@schmitech/chatbot-widget 0.5.3 → 0.5.4

package/dist/shared/styles.d.ts

@@ -51,7 +51,7 @@ export declare let CHAT_CONSTANTS: {
 /**
  * Global CSS styles for the ChatWidget component
  */
-export declare const CHAT_WIDGET_STYLES = "\n  body, button, input, textarea {\n    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\n  }\n  \n  /* Complete focus ring removal - covers all browsers and scenarios */\n  textarea,\n  textarea:focus,\n  textarea:focus-visible,\n  input,\n  input:focus,\n  input:focus-visible {\n    outline: none !important;\n    box-shadow: none !important;\n    border-color: inherit !important;\n    -webkit-appearance: none !important;\n    -moz-appearance: none !important;\n    -webkit-tap-highlight-color: transparent !important;\n  }\n  \n  /* Alternative: Uncomment for subtle light focus ring instead of complete removal */\n  /*\n  textarea:focus,\n  textarea:focus-visible {\n    outline: 2px solid rgba(203, 213, 225, 0.4) !important;\n    outline-offset: -1px !important;\n    box-shadow: 0 0 0 1px rgba(203, 213, 225, 0.2) !important;\n  }\n  */\n  \n  /* Remove webkit/safari specific styling */\n  textarea::-webkit-input-placeholder,\n  input::-webkit-input-placeholder {\n    -webkit-appearance: none;\n  }\n  \n  /* Ensure buttons also don't show focus rings */\n  button:focus,\n  button:focus-visible {\n    outline: none !important;\n    box-shadow: none !important;\n  }\n\n  /* Enhanced animations for modern feel */\n  @keyframes slideInUp {\n    0% { \n      opacity: 0; \n      transform: translateY(20px) scale(0.95); \n    }\n    100% { \n      opacity: 1; \n      transform: translateY(0) scale(1); \n    }\n  }\n\n  @keyframes slideOutDown {\n    0% { \n      opacity: 1; \n      transform: translateY(0) scale(1); \n    }\n    100% { \n      opacity: 0; \n      transform: translateY(20px) scale(0.95); \n    }\n  }\n\n  .animate-slide-in-up {\n    animation: slideInUp 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;\n  }\n\n  .animate-slide-out-down {\n    animation: slideOutDown 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;\n  }\n\n  @keyframes pulseGlow {\n    0%, 100% { \n      box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4);\n    }\n    50% { \n      box-shadow: 0 0 0 8px rgba(59, 130, 246, 0);\n    }\n  }\n\n  .animate-pulse-glow {\n    animation: pulseGlow 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n  }\n\n  @keyframes messageEntry {\n    0% { \n      opacity: 0; \n      transform: translateY(10px) scale(0.98);\n    }\n    100% { \n      opacity: 1; \n      transform: translateY(0) scale(1);\n    }\n  }\n\n  .animate-message-entry {\n    animation: messageEntry 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;\n  }\n\n  @keyframes buttonHover {\n    0% { transform: translateY(0) scale(1); }\n    100% { transform: translateY(-2px) scale(1.05); }\n  }\n\n  .animate-button-hover:hover {\n    animation: buttonHover 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;\n  }\n  \n  @keyframes fadeInOut {\n    0% { opacity: 0; transform: translateY(4px); }\n    20% { opacity: 1; transform: translateY(0); }\n    80% { opacity: 1; transform: translateY(0); }\n    100% { opacity: 0; transform: translateY(-4px); }\n  }\n  .animate-fade-in-out {\n    animation: fadeInOut 2s ease-in-out forwards;\n  }\n  \n  @keyframes bounce-gentle {\n    0%, 100% { transform: translateY(0); }\n    50% { transform: translateY(-8px); }\n  }\n  .animate-bounce-gentle {\n    animation: bounce-gentle 3s ease-in-out infinite;\n    animation-delay: 2s;\n  }\n\n  @keyframes float {\n    0%, 100% { transform: translateY(0px) rotate(0deg) scale(1); }\n    25% { transform: translateY(-8px) rotate(2deg) scale(1.02); }\n    50% { transform: translateY(-4px) rotate(-1deg) scale(1); }\n    75% { transform: translateY(-6px) rotate(1deg) scale(1.01); }\n  }\n  .animate-float {\n    animation: float 2.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n  }\n  \n  /* Modern typing dots animation */\n  @keyframes dotWave {\n    0%, 60%, 100% {\n      transform: translateY(0) scale(1);\n      background-color: #9ca3af;\n    }\n    30% {\n      transform: translateY(-10px) scale(1.1);\n      background-color: #6b7280;\n    }\n  }\n  \n  .typing-dots-container {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    padding: 2px 0;\n  }\n  \n  .typing-dot {\n    width: 8px;\n    height: 8px;\n    border-radius: 50%;\n    background-color: #9ca3af;\n    animation: dotWave 1.4s ease-in-out infinite;\n  }\n  \n  .typing-dot:nth-child(1) {\n    animation-delay: 0s;\n  }\n  \n  .typing-dot:nth-child(2) {\n    animation-delay: 0.2s;\n  }\n  \n  .typing-dot:nth-child(3) {\n    animation-delay: 0.4s;\n  }\n\n  /* Glassmorphism effects */\n  .glass-effect {\n    backdrop-filter: blur(20px);\n    -webkit-backdrop-filter: blur(20px);\n    background: rgba(255, 255, 255, 0.8);\n    border: 1px solid rgba(255, 255, 255, 0.3);\n  }\n\n  .glass-effect-dark {\n    backdrop-filter: blur(20px);\n    -webkit-backdrop-filter: blur(20px);\n    background: rgba(30, 41, 59, 0.8);\n    border: 1px solid rgba(255, 255, 255, 0.1);\n  }\n\n  /* Custom scrollbar */\n  .custom-scrollbar::-webkit-scrollbar {\n    width: 6px;\n  }\n\n  .custom-scrollbar::-webkit-scrollbar-track {\n    background: rgba(0, 0, 0, 0.05);\n    border-radius: 3px;\n  }\n\n  .custom-scrollbar::-webkit-scrollbar-thumb {\n    background: rgba(0, 0, 0, 0.2);\n    border-radius: 3px;\n    transition: background 0.2s ease;\n  }\n\n  .custom-scrollbar::-webkit-scrollbar-thumb:hover {\n    background: rgba(0, 0, 0, 0.3);\n  }\n\n  /* Enhanced shadows */\n  .shadow-elegant {\n    box-shadow: \n      0 10px 25px -5px rgba(0, 0, 0, 0.1),\n      0 8px 10px -6px rgba(0, 0, 0, 0.1),\n      0 0 0 1px rgba(255, 255, 255, 0.05);\n  }\n\n  .shadow-soft {\n    box-shadow: \n      0 4px 6px -1px rgba(0, 0, 0, 0.1),\n      0 2px 4px -1px rgba(0, 0, 0, 0.06);\n  }\n\n  .shadow-floating {\n    box-shadow: \n      0 20px 25px -5px rgba(0, 0, 0, 0.1),\n      0 10px 10px -5px rgba(0, 0, 0, 0.04);\n  }\n  \n  .prose {\n    max-width: 100%;\n  }\n  \n  .prose > * {\n    margin-top: 0 !important;\n    margin-bottom: 0.5em !important;\n  }\n  \n  .prose p {\n    margin: 0 0 0.5em 0 !important;\n    padding: 0;\n    line-height: 1.6;\n  }\n  \n  .prose p:last-child {\n    margin-bottom: 0 !important;\n  }\n  \n  .prose ul,\n  .prose ol {\n    margin-top: 0.5em !important;\n    margin-bottom: 0.5em !important;\n    padding-left: 1.5em !important;\n  }\n  \n  .prose li {\n    margin-bottom: 0.25em !important;\n    padding-left: 0.25em !important;\n    line-height: 1.5;\n  }\n  \n  .prose li p {\n    margin: 0 !important;\n  }\n  \n  .prose li + li {\n    margin-top: 0.1em !important;\n  }\n  \n  .prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {\n    margin-top: 1em !important;\n    margin-bottom: 0.5em !important;\n    font-weight: 600;\n  }\n\n  /* Button enhancements */\n  .btn-modern {\n    position: relative;\n    overflow: hidden;\n    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  }\n\n  .btn-modern::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));\n    opacity: 0;\n    transition: opacity 0.3s ease;\n  }\n\n  .btn-modern:hover::before {\n    opacity: 1;\n  }\n\n  /* Input enhancements */\n  .input-modern {\n    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  }\n\n  .input-modern:focus {\n    transform: translateY(-1px);\n  }\n  ";
+export declare const CHAT_WIDGET_STYLES = "\n  body, button, input, textarea {\n    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\n  }\n  \n  /* Complete focus ring removal - covers all browsers and scenarios */\n  textarea,\n  textarea:focus,\n  textarea:focus-visible,\n  input,\n  input:focus,\n  input:focus-visible {\n    outline: none !important;\n    box-shadow: none !important;\n    border-color: inherit !important;\n    -webkit-appearance: none !important;\n    -moz-appearance: none !important;\n    -webkit-tap-highlight-color: transparent !important;\n  }\n  \n  /* Alternative: Uncomment for subtle light focus ring instead of complete removal */\n  /*\n  textarea:focus,\n  textarea:focus-visible {\n    outline: 2px solid rgba(203, 213, 225, 0.4) !important;\n    outline-offset: -1px !important;\n    box-shadow: 0 0 0 1px rgba(203, 213, 225, 0.2) !important;\n  }\n  */\n  \n  /* Remove webkit/safari specific styling */\n  textarea::-webkit-input-placeholder,\n  input::-webkit-input-placeholder {\n    -webkit-appearance: none;\n  }\n  \n  /* Ensure buttons also don't show focus rings */\n  button:focus,\n  button:focus-visible {\n    outline: none !important;\n    box-shadow: none !important;\n  }\n\n  /* Enhanced animations for modern feel */\n  @keyframes slideInUp {\n    0% { \n      opacity: 0; \n      transform: translateY(20px) scale(0.95); \n    }\n    100% { \n      opacity: 1; \n      transform: translateY(0) scale(1); \n    }\n  }\n\n  @keyframes slideOutDown {\n    0% { \n      opacity: 1; \n      transform: translateY(0) scale(1); \n    }\n    100% { \n      opacity: 0; \n      transform: translateY(20px) scale(0.95); \n    }\n  }\n\n  .animate-slide-in-up {\n    animation: slideInUp 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;\n  }\n\n  .animate-slide-out-down {\n    animation: slideOutDown 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;\n  }\n\n  @keyframes pulseGlow {\n    0%, 100% { \n      box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4);\n    }\n    50% { \n      box-shadow: 0 0 0 8px rgba(59, 130, 246, 0);\n    }\n  }\n\n  .animate-pulse-glow {\n    animation: pulseGlow 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n  }\n\n  @keyframes messageEntry {\n    0% { \n      opacity: 0; \n      transform: translateY(10px) scale(0.98);\n    }\n    100% { \n      opacity: 1; \n      transform: translateY(0) scale(1);\n    }\n  }\n\n  .animate-message-entry {\n    animation: messageEntry 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;\n  }\n\n  @keyframes buttonHover {\n    0% { transform: translateY(0) scale(1); }\n    100% { transform: translateY(-2px) scale(1.05); }\n  }\n\n  .animate-button-hover:hover {\n    animation: buttonHover 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;\n  }\n  \n  @keyframes fadeInOut {\n    0% { opacity: 0; transform: translateY(4px); }\n    20% { opacity: 1; transform: translateY(0); }\n    80% { opacity: 1; transform: translateY(0); }\n    100% { opacity: 0; transform: translateY(-4px); }\n  }\n  .animate-fade-in-out {\n    animation: fadeInOut 2s ease-in-out forwards;\n  }\n  \n  @keyframes bounce-gentle {\n    0%, 100% { transform: translateY(0); }\n    50% { transform: translateY(-8px); }\n  }\n  .animate-bounce-gentle {\n    animation: bounce-gentle 3s ease-in-out infinite;\n    animation-delay: 2s;\n  }\n\n  @keyframes float {\n    0%, 100% { transform: translateY(0px) rotate(0deg) scale(1); }\n    25% { transform: translateY(-8px) rotate(2deg) scale(1.02); }\n    50% { transform: translateY(-4px) rotate(-1deg) scale(1); }\n    75% { transform: translateY(-6px) rotate(1deg) scale(1.01); }\n  }\n  .animate-float {\n    animation: float 2.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n  }\n  \n  /* Modern typing dots animation */\n  @keyframes dotWave {\n    0%, 60%, 100% {\n      transform: translateY(0) scale(1);\n      background-color: #9ca3af;\n    }\n    30% {\n      transform: translateY(-10px) scale(1.1);\n      background-color: #6b7280;\n    }\n  }\n  \n  .typing-dots-container {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    padding: 2px 0;\n  }\n  \n  .typing-dot {\n    width: 8px;\n    height: 8px;\n    border-radius: 50%;\n    background-color: #9ca3af;\n    animation: dotWave 1.4s ease-in-out infinite;\n  }\n  \n  .typing-dot:nth-child(1) {\n    animation-delay: 0s;\n  }\n  \n  .typing-dot:nth-child(2) {\n    animation-delay: 0.2s;\n  }\n  \n  .typing-dot:nth-child(3) {\n    animation-delay: 0.4s;\n  }\n\n  /* Glassmorphism effects */\n  .glass-effect {\n    backdrop-filter: blur(20px);\n    -webkit-backdrop-filter: blur(20px);\n    background: rgba(255, 255, 255, 0.8);\n    border: 1px solid rgba(255, 255, 255, 0.3);\n  }\n\n  .glass-effect-dark {\n    backdrop-filter: blur(20px);\n    -webkit-backdrop-filter: blur(20px);\n    background: rgba(30, 41, 59, 0.8);\n    border: 1px solid rgba(255, 255, 255, 0.1);\n  }\n\n  /* Custom scrollbar */\n  .custom-scrollbar::-webkit-scrollbar {\n    width: 6px;\n  }\n\n  .custom-scrollbar::-webkit-scrollbar-track {\n    background: rgba(0, 0, 0, 0.05);\n    border-radius: 3px;\n  }\n\n  .custom-scrollbar::-webkit-scrollbar-thumb {\n    background: rgba(0, 0, 0, 0.2);\n    border-radius: 3px;\n    transition: background 0.2s ease;\n  }\n\n  .custom-scrollbar::-webkit-scrollbar-thumb:hover {\n    background: rgba(0, 0, 0, 0.3);\n  }\n\n  /* Horizontal scrollbar for markdown content (tables, code blocks, etc.) */\n  .markdown-content-wrapper {\n    overflow-x: scroll !important; /* Use 'scroll' to always show scrollbar when content overflows */\n    overflow-y: visible !important;\n    -webkit-overflow-scrolling: touch;\n    /* Force scrollbar to always be visible when content overflows */\n    scrollbar-width: thin;\n    scrollbar-color: rgba(0, 0, 0, 0.4) rgba(0, 0, 0, 0.15);\n  }\n\n  /* WebKit scrollbar - always visible when overflow */\n  .markdown-content-wrapper::-webkit-scrollbar {\n    height: 12px;\n    width: 12px;\n    /* Force scrollbar to always display */\n    display: block;\n    -webkit-appearance: none;\n  }\n\n  .markdown-content-wrapper::-webkit-scrollbar-track {\n    background: rgba(0, 0, 0, 0.15);\n    border-radius: 6px;\n    margin: 4px;\n    /* Make track always visible */\n    -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);\n  }\n\n  .markdown-content-wrapper::-webkit-scrollbar-thumb {\n    background: rgba(0, 0, 0, 0.4);\n    border-radius: 6px;\n    border: 2px solid transparent;\n    background-clip: padding-box;\n    transition: background 0.2s ease;\n    /* Ensure thumb is always visible */\n    min-height: 20px;\n  }\n\n  .markdown-content-wrapper::-webkit-scrollbar-thumb:hover {\n    background: rgba(0, 0, 0, 0.6);\n    background-clip: padding-box;\n  }\n\n  .markdown-content-wrapper::-webkit-scrollbar-thumb:active {\n    background: rgba(0, 0, 0, 0.7);\n  }\n\n  .markdown-content-wrapper::-webkit-scrollbar-corner {\n    background: rgba(0, 0, 0, 0.1);\n  }\n\n  /* Ensure scrollbar styling is consistent across browsers */\n  @supports (-webkit-appearance: none) {\n    .markdown-content-wrapper::-webkit-scrollbar {\n      -webkit-appearance: none;\n    }\n  }\n\n  /* Force scrollbar to always be visible when content overflows (macOS workaround) */\n  .markdown-content-wrapper.has-horizontal-scroll {\n    /* Reserve space for scrollbar */\n    scrollbar-gutter: stable;\n  }\n\n  .markdown-content-wrapper.has-horizontal-scroll::-webkit-scrollbar {\n    /* Force scrollbar to always be visible */\n    display: block !important;\n    opacity: 1 !important;\n    visibility: visible !important;\n  }\n\n  .markdown-content-wrapper.has-horizontal-scroll::-webkit-scrollbar-track {\n    /* Make track more visible */\n    background: rgba(0, 0, 0, 0.2) !important;\n    opacity: 1 !important;\n    visibility: visible !important;\n  }\n\n  .markdown-content-wrapper.has-horizontal-scroll::-webkit-scrollbar-thumb {\n    /* Make thumb more visible */\n    background: rgba(0, 0, 0, 0.5) !important;\n    opacity: 1 !important;\n    visibility: visible !important;\n  }\n\n  /* Enhanced shadows */\n  .shadow-elegant {\n    box-shadow: \n      0 10px 25px -5px rgba(0, 0, 0, 0.1),\n      0 8px 10px -6px rgba(0, 0, 0, 0.1),\n      0 0 0 1px rgba(255, 255, 255, 0.05);\n  }\n\n  .shadow-soft {\n    box-shadow: \n      0 4px 6px -1px rgba(0, 0, 0, 0.1),\n      0 2px 4px -1px rgba(0, 0, 0, 0.06);\n  }\n\n  .shadow-floating {\n    box-shadow: \n      0 20px 25px -5px rgba(0, 0, 0, 0.1),\n      0 10px 10px -5px rgba(0, 0, 0, 0.04);\n  }\n  \n  .prose {\n    max-width: 100%;\n  }\n  \n  .prose > * {\n    margin-top: 0 !important;\n    margin-bottom: 0.5em !important;\n  }\n  \n  .prose p {\n    margin: 0 0 0.5em 0 !important;\n    padding: 0;\n    line-height: 1.6;\n  }\n  \n  .prose p:last-child {\n    margin-bottom: 0 !important;\n  }\n  \n  .prose ul,\n  .prose ol {\n    margin-top: 0.5em !important;\n    margin-bottom: 0.5em !important;\n    padding-left: 1.5em !important;\n  }\n  \n  .prose li {\n    margin-bottom: 0.25em !important;\n    padding-left: 0.25em !important;\n    line-height: 1.5;\n  }\n  \n  .prose li p {\n    margin: 0 !important;\n  }\n  \n  .prose li + li {\n    margin-top: 0.1em !important;\n  }\n  \n  .prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {\n    margin-top: 1em !important;\n    margin-bottom: 0.5em !important;\n    font-weight: 600;\n  }\n\n  /* Button enhancements */\n  .btn-modern {\n    position: relative;\n    overflow: hidden;\n    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  }\n\n  .btn-modern::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));\n    opacity: 0;\n    transition: opacity 0.3s ease;\n  }\n\n  .btn-modern:hover::before {\n    opacity: 1;\n  }\n\n  /* Input enhancements */\n  .input-modern {\n    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  }\n\n  .input-modern:focus {\n    transform: translateY(-1px);\n  }\n  ";
 /**
  * Helper functions for responsive window dimensions
  */

package/dist/stateDiagram-1ecb1508-CpRKICMQ-C5OFJeRZ.js

@@ -0,0 +1,266 @@
+import { A as O, v as N, D as T } from "./styles-ca3715f6-BouNgl-L-_qXsPDP3.js";
+import { g as t, P as S, O as k, W as G, l as z, c as L, k as P, i as U } from "./index-s6Yb6o1D.js";
+import { K as I } from "./graph-BjmGDpTe-DgbYS1Ie.js";
+import { A as R } from "./layout-D_6hdlf3-B7guhEBN.js";
+typeof window < "u" && (window.global = window);
+const W = (e) => e.append("circle").attr("class", "start-state").attr("r", t().state.sizeUnit).attr("cx", t().state.padding + t().state.sizeUnit).attr("cy", t().state.padding + t().state.sizeUnit), C = (e) => e.append("line").style("stroke", "grey").style("stroke-dasharray", "3").attr("x1", t().state.textHeight).attr("class", "divider").attr("x2", t().state.textHeight * 2).attr("y1", 0).attr("y2", 0), F = (e, r) => {
+  const g = e.append("text").attr("x", 2 * t().state.padding).attr("y", t().state.textHeight + 2 * t().state.padding).attr("font-size", t().state.fontSize).attr("class", "state-title").text(r.id), s = g.node().getBBox();
+  return e.insert("rect", ":first-child").attr("x", t().state.padding).attr("y", t().state.padding).attr("width", s.width + 2 * t().state.padding).attr("height", s.height + 2 * t().state.padding).attr("rx", t().state.radius), g;
+}, J = (e, r) => {
+  const g = function(o, u, b) {
+    const w = o.append("tspan").attr("x", 2 * t().state.padding).text(u);
+    b || w.attr("dy", t().state.textHeight);
+  }, s = e.append("text").attr("x", 2 * t().state.padding).attr("y", t().state.textHeight + 1.3 * t().state.padding).attr("font-size", t().state.fontSize).attr("class", "state-title").text(r.descriptions[0]).node().getBBox(), d = s.height, l = e.append("text").attr("x", t().state.padding).attr(
+    "y",
+    d + t().state.padding * 0.4 + t().state.dividerMargin + t().state.textHeight
+  ).attr("class", "state-description");
+  let h = !0, a = !0;
+  r.descriptions.forEach(function(o) {
+    h || (g(l, o, a), a = !1), h = !1;
+  });
+  const n = e.append("line").attr("x1", t().state.padding).attr("y1", t().state.padding + d + t().state.dividerMargin / 2).attr("y2", t().state.padding + d + t().state.dividerMargin / 2).attr("class", "descr-divider"), x = l.node().getBBox(), p = Math.max(x.width, s.width);
+  return n.attr("x2", p + 3 * t().state.padding), e.insert("rect", ":first-child").attr("x", t().state.padding).attr("y", t().state.padding).attr("width", p + 2 * t().state.padding).attr("height", x.height + d + 2 * t().state.padding).attr("rx", t().state.radius), e;
+}, Y = (e, r, g) => {
+  const s = t().state.padding, d = 2 * t().state.padding, l = e.node().getBBox(), h = l.width, a = l.x, n = e.append("text").attr("x", 0).attr("y", t().state.titleShift).attr("font-size", t().state.fontSize).attr("class", "state-title").text(r.id), x = n.node().getBBox().width + d;
+  let p = Math.max(x, h);
+  p === h && (p = p + d);
+  let o;
+  const u = e.node().getBBox();
+  r.doc, o = a - s, x > h && (o = (h - p) / 2 + s), Math.abs(a - u.x) < s && x > h && (o = a - (x - h) / 2);
+  const b = 1 - t().state.textHeight;
+  return e.insert("rect", ":first-child").attr("x", o).attr("y", b).attr("class", g ? "alt-composit" : "composit").attr("width", p).attr(
+    "height",
+    u.height + t().state.textHeight + t().state.titleShift + 1
+  ).attr("rx", "0"), n.attr("x", o + s), x <= h && n.attr("x", a + (p - d) / 2 - x / 2 + s), e.insert("rect", ":first-child").attr("x", o).attr(
+    "y",
+    t().state.titleShift - t().state.textHeight - t().state.padding
+  ).attr("width", p).attr("height", t().state.textHeight * 3).attr("rx", t().state.radius), e.insert("rect", ":first-child").attr("x", o).attr(
+    "y",
+    t().state.titleShift - t().state.textHeight - t().state.padding
+  ).attr("width", p).attr("height", u.height + 3 + 2 * t().state.textHeight).attr("rx", t().state.radius), e;
+}, j = (e) => (e.append("circle").attr("class", "end-state-outer").attr("r", t().state.sizeUnit + t().state.miniPadding).attr(
+  "cx",
+  t().state.padding + t().state.sizeUnit + t().state.miniPadding
+).attr(
+  "cy",
+  t().state.padding + t().state.sizeUnit + t().state.miniPadding
+), e.append("circle").attr("class", "end-state-inner").attr("r", t().state.sizeUnit).attr("cx", t().state.padding + t().state.sizeUnit + 2).attr("cy", t().state.padding + t().state.sizeUnit + 2)), K = (e, r) => {
+  let g = t().state.forkWidth, s = t().state.forkHeight;
+  if (r.parentId) {
+    let d = g;
+    g = s, s = d;
+  }
+  return e.append("rect").style("stroke", "black").style("fill", "black").attr("width", g).attr("height", s).attr("x", t().state.padding).attr("y", t().state.padding);
+}, X = (e, r, g, s) => {
+  let d = 0;
+  const l = s.append("text");
+  l.style("text-anchor", "start"), l.attr("class", "noteText");
+  let h = e.replace(/\r\n/g, "<br/>");
+  h = h.replace(/\n/g, "<br/>");
+  const a = h.split(z.lineBreakRegex);
+  let n = 1.25 * t().state.noteMargin;
+  for (const x of a) {
+    const p = x.trim();
+    if (p.length > 0) {
+      const o = l.append("tspan");
+      if (o.text(p), n === 0) {
+        const u = o.node().getBBox();
+        n += u.height;
+      }
+      d += n, o.attr("x", r + t().state.noteMargin), o.attr("y", g + d + 1.25 * t().state.noteMargin);
+    }
+  }
+  return { textWidth: l.node().getBBox().width, textHeight: d };
+}, $ = (e, r) => {
+  r.attr("class", "state-note");
+  const g = r.append("rect").attr("x", 0).attr("y", t().state.padding), s = r.append("g"), { textWidth: d, textHeight: l } = X(e, 0, 0, s);
+  return g.attr("height", l + 2 * t().state.noteMargin), g.attr("width", d + t().state.noteMargin * 2), g;
+}, H = function(e, r) {
+  const g = r.id, s = {
+    id: g,
+    label: r.id,
+    width: 0,
+    height: 0
+  }, d = e.append("g").attr("id", g).attr("class", "stateGroup");
+  r.type === "start" && W(d), r.type === "end" && j(d), (r.type === "fork" || r.type === "join") && K(d, r), r.type === "note" && $(r.note.text, d), r.type === "divider" && C(d), r.type === "default" && r.descriptions.length === 0 && F(d, r), r.type === "default" && r.descriptions.length > 0 && J(d, r);
+  const l = d.node().getBBox();
+  return s.width = l.width + 2 * t().state.padding, s.height = l.height + 2 * t().state.padding, s;
+};
+let A = 0;
+const q = function(e, r, g) {
+  const s = function(n) {
+    switch (n) {
+      case N.relationType.AGGREGATION:
+        return "aggregation";
+      case N.relationType.EXTENSION:
+        return "extension";
+      case N.relationType.COMPOSITION:
+        return "composition";
+      case N.relationType.DEPENDENCY:
+        return "dependency";
+    }
+  };
+  r.points = r.points.filter((n) => !Number.isNaN(n.y));
+  const d = r.points, l = L().x(function(n) {
+    return n.x;
+  }).y(function(n) {
+    return n.y;
+  }).curve(P), h = e.append("path").attr("d", l(d)).attr("id", "edge" + A).attr("class", "transition");
+  let a = "";
+  if (t().state.arrowMarkerAbsolute && (a = window.location.protocol + "//" + window.location.host + window.location.pathname + window.location.search, a = a.replace(/\(/g, "\\("), a = a.replace(/\)/g, "\\)")), h.attr(
+    "marker-end",
+    "url(" + a + "#" + s(N.relationType.DEPENDENCY) + "End)"
+  ), g.title !== void 0) {
+    const n = e.append("g").attr("class", "stateLabel"), { x, y: p } = U.calcLabelPosition(r.points), o = z.getRows(g.title);
+    let u = 0;
+    const b = [];
+    let w = 0, M = 0;
+    for (let f = 0; f <= o.length; f++) {
+      const c = n.append("text").attr("text-anchor", "middle").text(o[f]).attr("x", x).attr("y", p + u), y = c.node().getBBox();
+      w = Math.max(w, y.width), M = Math.min(M, y.x), k.info(y.x, x, p + u), u === 0 && (u = c.node().getBBox().height, k.info("Title height", u, p)), b.push(c);
+    }
+    let E = u * o.length;
+    if (o.length > 1) {
+      const f = (o.length - 1) * u * 0.5;
+      b.forEach((c, y) => c.attr("y", p + y * u - f)), E = u * o.length;
+    }
+    const i = n.node().getBBox();
+    n.insert("rect", ":first-child").attr("class", "box").attr("x", x - w / 2 - t().state.padding / 2).attr("y", p - E / 2 - t().state.padding / 2 - 3.5).attr("width", w + t().state.padding).attr("height", E + t().state.padding), k.info(i);
+  }
+  A++;
+};
+let m;
+const v = {}, Z = function() {
+}, Q = function(e) {
+  e.append("defs").append("marker").attr("id", "dependencyEnd").attr("refX", 19).attr("refY", 7).attr("markerWidth", 20).attr("markerHeight", 28).attr("orient", "auto").append("path").attr("d", "M 19,7 L9,13 L14,7 L9,1 Z");
+}, V = function(e, r, g, s) {
+  m = t().state;
+  const d = t().securityLevel;
+  let l;
+  d === "sandbox" && (l = S("#i" + r));
+  const h = d === "sandbox" ? S(l.nodes()[0].contentDocument.body) : S("body"), a = d === "sandbox" ? l.nodes()[0].contentDocument : document;
+  k.debug("Rendering diagram " + e);
+  const n = h.select(`[id='${r}']`);
+  Q(n);
+  const x = s.db.getRootDoc();
+  D(x, n, void 0, !1, h, a, s);
+  const p = m.padding, o = n.node().getBBox(), u = o.width + p * 2, b = o.height + p * 2, w = u * 1.75;
+  G(n, b, w, m.useMaxWidth), n.attr(
+    "viewBox",
+    `${o.x - m.padding}  ${o.y - m.padding} ` + u + " " + b
+  );
+}, _ = (e) => e ? e.length * m.fontSizeFactor : 1, D = (e, r, g, s, d, l, h) => {
+  const a = new I({
+    compound: !0,
+    multigraph: !0
+  });
+  let n, x = !0;
+  for (n = 0; n < e.length; n++)
+    if (e[n].stmt === "relation") {
+      x = !1;
+      break;
+    }
+  g ? a.setGraph({
+    rankdir: "LR",
+    multigraph: !0,
+    compound: !0,
+    // acyclicer: 'greedy',
+    ranker: "tight-tree",
+    ranksep: x ? 1 : m.edgeLengthFactor,
+    nodeSep: x ? 1 : 50,
+    isMultiGraph: !0
+    // ranksep: 5,
+    // nodesep: 1
+  }) : a.setGraph({
+    rankdir: "TB",
+    multigraph: !0,
+    compound: !0,
+    // isCompound: true,
+    // acyclicer: 'greedy',
+    // ranker: 'longest-path'
+    ranksep: x ? 1 : m.edgeLengthFactor,
+    nodeSep: x ? 1 : 50,
+    ranker: "tight-tree",
+    // ranker: 'network-simplex'
+    isMultiGraph: !0
+  }), a.setDefaultEdgeLabel(function() {
+    return {};
+  }), h.db.extract(e);
+  const p = h.db.getStates(), o = h.db.getRelations(), u = Object.keys(p);
+  for (const i of u) {
+    const f = p[i];
+    g && (f.parentId = g);
+    let c;
+    if (f.doc) {
+      let y = r.append("g").attr("id", f.id).attr("class", "stateGroup");
+      c = D(f.doc, y, f.id, !s, d, l, h);
+      {
+        y = Y(y, f, s);
+        let B = y.node().getBBox();
+        c.width = B.width, c.height = B.height + m.padding / 2, v[f.id] = { y: m.compositTitleSize };
+      }
+    } else
+      c = H(r, f);
+    if (f.note) {
+      const y = {
+        descriptions: [],
+        id: f.id + "-note",
+        note: f.note,
+        type: "note"
+      }, B = H(r, y);
+      f.note.position === "left of" ? (a.setNode(c.id + "-note", B), a.setNode(c.id, c)) : (a.setNode(c.id, c), a.setNode(c.id + "-note", B)), a.setParent(c.id, c.id + "-group"), a.setParent(c.id + "-note", c.id + "-group");
+    } else
+      a.setNode(c.id, c);
+  }
+  k.debug("Count=", a.nodeCount(), a);
+  let b = 0;
+  o.forEach(function(i) {
+    b++, k.debug("Setting edge", i), a.setEdge(
+      i.id1,
+      i.id2,
+      {
+        relation: i,
+        width: _(i.title),
+        height: m.labelHeight * z.getRows(i.title).length,
+        labelpos: "c"
+      },
+      "id" + b
+    );
+  }), R(a), k.debug("Graph after layout", a.nodes());
+  const w = r.node();
+  a.nodes().forEach(function(i) {
+    i !== void 0 && a.node(i) !== void 0 ? (k.warn("Node " + i + ": " + JSON.stringify(a.node(i))), d.select("#" + w.id + " #" + i).attr(
+      "transform",
+      "translate(" + (a.node(i).x - a.node(i).width / 2) + "," + (a.node(i).y + (v[i] ? v[i].y : 0) - a.node(i).height / 2) + " )"
+    ), d.select("#" + w.id + " #" + i).attr("data-x-shift", a.node(i).x - a.node(i).width / 2), l.querySelectorAll("#" + w.id + " #" + i + " .divider").forEach((f) => {
+      const c = f.parentElement;
+      let y = 0, B = 0;
+      c && (c.parentElement && (y = c.parentElement.getBBox().width), B = parseInt(c.getAttribute("data-x-shift"), 10), Number.isNaN(B) && (B = 0)), f.setAttribute("x1", 0 - B + 8), f.setAttribute("x2", y - B - 8);
+    })) : k.debug("No Node " + i + ": " + JSON.stringify(a.node(i)));
+  });
+  let M = w.getBBox();
+  a.edges().forEach(function(i) {
+    i !== void 0 && a.edge(i) !== void 0 && (k.debug("Edge " + i.v + " -> " + i.w + ": " + JSON.stringify(a.edge(i))), q(r, a.edge(i), a.edge(i).relation));
+  }), M = w.getBBox();
+  const E = {
+    id: g || "root",
+    label: g || "root",
+    width: 0,
+    height: 0
+  };
+  return E.width = M.width + 2 * m.padding, E.height = M.height + 2 * m.padding, k.debug("Doc rendered", E, a), E;
+}, tt = {
+  setConf: Z,
+  draw: V
+}, dt = {
+  parser: T,
+  db: N,
+  renderer: tt,
+  styles: O,
+  init: (e) => {
+    e.state || (e.state = {}), e.state.arrowMarkerAbsolute = e.arrowMarkerAbsolute, N.clear();
+  }
+};
+export {
+  dt as diagram
+};

package/dist/stateDiagram-v2-c2b004d7-BtkhFyQ5-DxzE8Je5.js

@@ -0,0 +1,185 @@
+import { A as Y, v as W, D as F, C as H, E as z, t as Q, I as X, _ as Z } from "./styles-ca3715f6-BouNgl-L-_qXsPDP3.js";
+import { K as tt } from "./graph-BjmGDpTe-DgbYS1Ie.js";
+import { O as p, g as S, P as A, i as et, W as st, l as B } from "./index-s6Yb6o1D.js";
+import { b as ot } from "./index-5325376f-CJL5w-Sw-BXp44Ej5.js";
+import "./layout-D_6hdlf3-B7guhEBN.js";
+typeof window < "u" && (window.global = window);
+const x = "rect", k = "rectWithTitle", at = "start", it = "end", rt = "divider", nt = "roundedWithTitle", dt = "note", lt = "noteGroup", h = "statediagram", ct = "state", pt = `${h}-${ct}`, I = "transition", bt = "note", gt = "note-edge", ut = `${I} ${gt}`, ht = `${h}-${bt}`, yt = "cluster", ft = `${h}-${yt}`, $t = "cluster-alt", mt = `${h}-${$t}`, L = "parent", M = "note", wt = "state", C = "----", xt = `${C}${M}`, _ = `${C}${L}`, j = "fill:none", G = "fill: #333", K = "c", q = "text", J = "normal";
+let T = {}, c = 0;
+const Tt = function(t) {
+  const a = Object.keys(t);
+  for (const e of a)
+    t[e];
+}, St = function(t, a) {
+  return a.db.extract(a.db.getRootDocV2()), a.db.getClasses();
+};
+function Dt(t) {
+  return t == null ? "" : t.classes ? t.classes.join(" ") : "";
+}
+function v(t = "", a = 0, e = "", i = C) {
+  const r = e !== null && e.length > 0 ? `${i}${e}` : "";
+  return `${wt}-${t}${r}-${a}`;
+}
+const w = (t, a, e, i, r, n) => {
+  const s = e.id, y = Dt(i[s]);
+  if (s !== "root") {
+    let g = x;
+    e.start === !0 && (g = at), e.start === !1 && (g = it), e.type !== z && (g = e.type), T[s] || (T[s] = {
+      id: s,
+      shape: g,
+      description: B.sanitizeText(s, S()),
+      classes: `${y} ${pt}`
+    });
+    const o = T[s];
+    e.description && (Array.isArray(o.description) ? (o.shape = k, o.description.push(e.description)) : o.description.length > 0 ? (o.shape = k, o.description === s ? o.description = [e.description] : o.description = [o.description, e.description]) : (o.shape = x, o.description = e.description), o.description = B.sanitizeTextOrArray(o.description, S())), o.description.length === 1 && o.shape === k && (o.shape = x), !o.type && e.doc && (p.info("Setting cluster for ", s, E(e)), o.type = "group", o.dir = E(e), o.shape = e.type === Q ? rt : nt, o.classes = o.classes + " " + ft + " " + (n ? mt : ""));
+    const u = {
+      labelStyle: "",
+      shape: o.shape,
+      labelText: o.description,
+      // typeof newNode.description === 'object'
+      //   ? newNode.description[0]
+      //   : newNode.description,
+      classes: o.classes,
+      style: "",
+      //styles.style,
+      id: s,
+      dir: o.dir,
+      domId: v(s, c),
+      type: o.type,
+      padding: 15
+      //getConfig().flowchart.padding
+    };
+    if (u.centerLabel = !0, e.note) {
+      const d = {
+        labelStyle: "",
+        shape: dt,
+        labelText: e.note.text,
+        classes: ht,
+        // useHtmlLabels: false,
+        style: "",
+        // styles.style,
+        id: s + xt + "-" + c,
+        domId: v(s, c, M),
+        type: o.type,
+        padding: 15
+        //getConfig().flowchart.padding
+      }, l = {
+        labelStyle: "",
+        shape: lt,
+        labelText: e.note.text,
+        classes: o.classes,
+        style: "",
+        // styles.style,
+        id: s + _,
+        domId: v(s, c, L),
+        type: "group",
+        padding: 0
+        //getConfig().flowchart.padding
+      };
+      c++;
+      const f = s + _;
+      t.setNode(f, l), t.setNode(d.id, d), t.setNode(s, u), t.setParent(s, f), t.setParent(d.id, f);
+      let b = s, $ = d.id;
+      e.note.position === "left of" && (b = d.id, $ = s), t.setEdge(b, $, {
+        arrowhead: "none",
+        arrowType: "",
+        style: j,
+        labelStyle: "",
+        classes: ut,
+        arrowheadStyle: G,
+        labelpos: K,
+        labelType: q,
+        thickness: J
+      });
+    } else
+      t.setNode(s, u);
+  }
+  a && a.id !== "root" && (p.trace("Setting node ", s, " to be child of its parent ", a.id), t.setParent(s, a.id)), e.doc && (p.trace("Adding nodes children "), At(t, e, e.doc, i, r, !n));
+}, At = (t, a, e, i, r, n) => {
+  p.trace("items", e), e.forEach((s) => {
+    switch (s.stmt) {
+      case Z:
+        w(t, a, s, i, r, n);
+        break;
+      case z:
+        w(t, a, s, i, r, n);
+        break;
+      case X:
+        {
+          w(t, a, s.state1, i, r, n), w(t, a, s.state2, i, r, n);
+          const y = {
+            id: "edge" + c,
+            arrowhead: "normal",
+            arrowTypeEnd: "arrow_barb",
+            style: j,
+            labelStyle: "",
+            label: B.sanitizeText(s.description, S()),
+            arrowheadStyle: G,
+            labelpos: K,
+            labelType: q,
+            thickness: J,
+            classes: I
+          };
+          t.setEdge(s.state1.id, s.state2.id, y, c), c++;
+        }
+        break;
+    }
+  });
+}, E = (t, a = H) => {
+  let e = a;
+  if (t.doc)
+    for (let i = 0; i < t.doc.length; i++) {
+      const r = t.doc[i];
+      r.stmt === "dir" && (e = r.value);
+    }
+  return e;
+}, kt = async function(t, a, e, i) {
+  p.info("Drawing state diagram (v2)", a), T = {}, i.db.getDirection();
+  const { securityLevel: r, state: n } = S(), s = n.nodeSpacing || 50, y = n.rankSpacing || 50;
+  p.info(i.db.getRootDocV2()), i.db.extract(i.db.getRootDocV2()), p.info(i.db.getRootDocV2());
+  const g = i.db.getStates(), o = new tt({
+    multigraph: !0,
+    compound: !0
+  }).setGraph({
+    rankdir: E(i.db.getRootDocV2()),
+    nodesep: s,
+    ranksep: y,
+    marginx: 8,
+    marginy: 8
+  }).setDefaultEdgeLabel(function() {
+    return {};
+  });
+  w(o, void 0, i.db.getRootDocV2(), g, i.db, !0);
+  let u;
+  r === "sandbox" && (u = A("#i" + a));
+  const d = r === "sandbox" ? A(u.nodes()[0].contentDocument.body) : A("body"), l = d.select(`[id="${a}"]`), f = d.select("#" + a + " g");
+  await ot(f, o, ["barb"], h, a);
+  const b = 8;
+  et.insertTitle(l, "statediagramTitleText", n.titleTopMargin, i.db.getDiagramTitle());
+  const $ = l.node().getBBox(), R = $.width + b * 2, V = $.height + b * 2;
+  l.attr("class", h);
+  const N = l.node().getBBox();
+  st(l, V, R, n.useMaxWidth);
+  const O = `${N.x - b} ${N.y - b} ${R} ${V}`;
+  p.debug(`viewBox ${O}`), l.attr("viewBox", O);
+  const U = document.querySelectorAll('[id="' + a + '"] .edgeLabel .label');
+  for (const D of U) {
+    const P = D.getBBox(), m = document.createElementNS("http://www.w3.org/2000/svg", x);
+    m.setAttribute("rx", 0), m.setAttribute("ry", 0), m.setAttribute("width", P.width), m.setAttribute("height", P.height), D.insertBefore(m, D.firstChild);
+  }
+}, vt = {
+  setConf: Tt,
+  getClasses: St,
+  draw: kt
+}, Nt = {
+  parser: F,
+  db: W,
+  renderer: vt,
+  styles: Y,
+  init: (t) => {
+    t.state || (t.state = {}), t.state.arrowMarkerAbsolute = t.arrowMarkerAbsolute, W.clear();
+  }
+};
+export {
+  Nt as diagram
+};