@cravern/bpmn-flow-designer 1.0.14 → 1.0.16

package/dist/App.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"App.d.ts","sourceRoot":"","sources":["../App.tsx"],"names":[],"mappings":"AACA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAkC3D,UAAU,iBAAiB;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;GAGG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAkOpD,CAAC;AAGF,QAAA,MAAM,GAAG,+CAOR,CAAC;AAEF,eAAe,GAAG,CAAC"}
+{"version":3,"file":"App.d.ts","sourceRoot":"","sources":["../App.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAkC3D,UAAU,iBAAiB;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;GAGG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA4QpD,CAAC;AAGF,QAAA,MAAM,GAAG,+CAOR,CAAC;AAEF,eAAe,GAAG,CAAC"}

package/dist/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.js"],"names":[],"mappings":"AAy5WA,2BA8LC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.js"],"names":[],"mappings":"AAy5WA,2BA8NC"}

package/dist/index.js

@@ -11741,96 +11741,122 @@ const Eo = `<?xml version="1.0" encoding="UTF-8"?>
     let V = R.createShape({ type: A });
     V && N.start(_, V);
   };
-  return /* @__PURE__ */ w.jsxs("div", { className: "flex h-screen w-full bg-white overflow-hidden text-slate-800 font-sans border border-slate-200 rounded-lg", children: [
-    /* @__PURE__ */ w.jsxs("div", { className: `${u ? "w-80" : "w-0"} transition-all duration-300 border-r border-slate-200 bg-slate-50 flex flex-col relative z-20 shadow-xl overflow-hidden`, children: [
-      u && /* @__PURE__ */ w.jsxs("div", { className: "flex-1 flex flex-col p-6 overflow-y-auto w-80", children: [
-        /* @__PURE__ */ w.jsxs("div", { className: "flex items-center gap-2 mb-8", children: [
-          t && /* @__PURE__ */ w.jsx(
-            "button",
-            {
-              onClick: t,
-              className: "p-2 hover:bg-slate-200 rounded-lg transition-colors mr-1 text-slate-600 cursor-pointer",
-              children: /* @__PURE__ */ w.jsx(li, { size: 18 })
-            }
-          ),
-          /* @__PURE__ */ w.jsx("h1", { className: "font-bold text-lg tracking-tight text-slate-900 truncate", children: n })
-        ] }),
-        /* @__PURE__ */ w.jsxs("div", { className: "space-y-6", children: [
-          /* @__PURE__ */ w.jsxs("section", { children: [
-            /* @__PURE__ */ w.jsx("h3", { className: "text-xs font-bold uppercase tracking-wider text-slate-400 mb-4", children: "Tools" }),
-            /* @__PURE__ */ w.jsx("div", { className: "grid grid-cols-1 gap-2", children: [
-              { type: "bpmn:StartEvent", icon: /* @__PURE__ */ w.jsx(ci, { size: 18 }), label: "Start Event", color: "bg-green-50 text-green-600" },
-              { type: "bpmn:Task", icon: /* @__PURE__ */ w.jsx(mi, { size: 18 }), label: "User Task", color: "bg-slate-100 text-slate-600" },
-              { type: "bpmn:IntermediateCatchEvent", icon: /* @__PURE__ */ w.jsx(fi, { size: 18 }), label: "Message Catch", color: "bg-blue-50 text-blue-600" },
-              { type: "bpmn:EndEvent", icon: /* @__PURE__ */ w.jsx(ui, { size: 18 }), label: "End Event", color: "bg-red-50 text-red-600" }
-            ].map((_) => /* @__PURE__ */ w.jsxs(
-              "div",
-              {
-                onMouseDown: (A) => M(A, _.type),
-                className: "flex items-center gap-3 p-3 bg-white border border-slate-200 rounded-xl cursor-grab hover:border-indigo-400 hover:shadow-sm transition-all group active:scale-95",
-                children: [
-                  /* @__PURE__ */ w.jsx("div", { className: `p-2 rounded-lg ${_.color}`, children: _.icon }),
-                  /* @__PURE__ */ w.jsx("span", { className: "text-sm font-medium", children: _.label })
-                ]
-              },
-              _.type
-            )) })
-          ] }),
-          /* @__PURE__ */ w.jsx("hr", { className: "border-slate-200" }),
-          /* @__PURE__ */ w.jsxs("section", { children: [
-            /* @__PURE__ */ w.jsxs("label", { className: "block text-xs font-bold uppercase tracking-wider text-slate-400 mb-3 flex items-center gap-2", children: [
-              /* @__PURE__ */ w.jsx(Jt, { className: "w-3 h-3 text-indigo-500" }),
-              "AI Architect"
+  return /* @__PURE__ */ w.jsxs("div", { className: "bpmn-designer flex h-screen w-full bg-white overflow-hidden text-slate-800 font-sans border border-slate-200 rounded-lg", children: [
+    /* @__PURE__ */ w.jsxs(
+      "div",
+      {
+        className: `${u ? "w-80" : "w-0"} transition-all duration-300 border-r border-slate-200 bg-slate-50 flex flex-col relative z-20 shadow-xl overflow-hidden bpmn-sidebar`,
+        children: [
+          u && /* @__PURE__ */ w.jsxs("div", { className: "flex-1 flex flex-col p-6 overflow-y-auto w-80", children: [
+            /* @__PURE__ */ w.jsxs("div", { className: "flex items-center gap-2 mb-8", children: [
+              t && /* @__PURE__ */ w.jsx(
+                "button",
+                {
+                  onClick: t,
+                  className: "p-2 hover:bg-slate-200 rounded-lg transition-colors mr-1 text-slate-600 cursor-pointer",
+                  children: /* @__PURE__ */ w.jsx(li, { size: 18 })
+                }
+              ),
+              /* @__PURE__ */ w.jsx("h1", { className: "font-bold text-lg tracking-tight text-slate-900 truncate", children: n })
             ] }),
-            /* @__PURE__ */ w.jsx(
-              "textarea",
-              {
-                className: "w-full h-24 p-3 text-sm border border-slate-300 rounded-xl focus:ring-2 focus:ring-indigo-500 bg-white outline-none resize-none transition-all",
-                placeholder: "Describe your business process...",
-                value: c,
-                onChange: (_) => f(_.target.value)
-              }
-            ),
-            /* @__PURE__ */ w.jsxs(
-              "button",
-              {
-                onClick: E,
-                disabled: p || !c.trim(),
-                className: "w-full mt-2 bg-indigo-600 hover:bg-indigo-700 disabled:bg-slate-300 text-white font-medium py-2 rounded-xl flex items-center justify-center gap-2 transition-all shadow-md active:scale-95",
-                children: [
-                  p ? /* @__PURE__ */ w.jsx(pi, { className: "animate-spin", size: 16 }) : /* @__PURE__ */ w.jsx(Jt, { size: 16 }),
-                  p ? "Processing..." : "Generate Diagram"
-                ]
-              }
-            ),
-            h && /* @__PURE__ */ w.jsx("p", { className: "mt-2 text-[10px] text-center font-bold text-indigo-600", children: h })
+            /* @__PURE__ */ w.jsxs("div", { className: "space-y-6", children: [
+              /* @__PURE__ */ w.jsxs("section", { children: [
+                /* @__PURE__ */ w.jsx("h3", { className: "text-xs font-bold uppercase tracking-wider text-slate-400 mb-4", children: "Tools" }),
+                /* @__PURE__ */ w.jsx("div", { className: "grid grid-cols-1 gap-2", children: [
+                  {
+                    type: "bpmn:StartEvent",
+                    icon: /* @__PURE__ */ w.jsx(ci, { size: 18 }),
+                    label: "Start Event",
+                    color: "bg-green-50 text-green-600"
+                  },
+                  {
+                    type: "bpmn:Task",
+                    icon: /* @__PURE__ */ w.jsx(mi, { size: 18 }),
+                    label: "User Task",
+                    color: "bg-slate-100 text-slate-600"
+                  },
+                  {
+                    type: "bpmn:IntermediateCatchEvent",
+                    icon: /* @__PURE__ */ w.jsx(fi, { size: 18 }),
+                    label: "Message Catch",
+                    color: "bg-blue-50 text-blue-600"
+                  },
+                  {
+                    type: "bpmn:EndEvent",
+                    icon: /* @__PURE__ */ w.jsx(ui, { size: 18 }),
+                    label: "End Event",
+                    color: "bg-red-50 text-red-600"
+                  }
+                ].map((_) => /* @__PURE__ */ w.jsxs(
+                  "div",
+                  {
+                    onMouseDown: (A) => M(A, _.type),
+                    className: "flex items-center gap-3 p-3 bg-white border border-slate-200 rounded-xl cursor-grab hover:border-indigo-400 hover:shadow-sm transition-all group active:scale-95",
+                    children: [
+                      /* @__PURE__ */ w.jsx("div", { className: `p-2 rounded-lg ${_.color}`, children: _.icon }),
+                      /* @__PURE__ */ w.jsx("span", { className: "text-sm font-medium", children: _.label })
+                    ]
+                  },
+                  _.type
+                )) })
+              ] }),
+              /* @__PURE__ */ w.jsx("hr", { className: "border-slate-200" }),
+              /* @__PURE__ */ w.jsxs("section", { children: [
+                /* @__PURE__ */ w.jsxs("label", { className: "block text-xs font-bold uppercase tracking-wider text-slate-400 mb-3 flex items-center gap-2", children: [
+                  /* @__PURE__ */ w.jsx(Jt, { className: "w-3 h-3 text-indigo-500" }),
+                  "AI Architect"
+                ] }),
+                /* @__PURE__ */ w.jsx(
+                  "textarea",
+                  {
+                    className: "w-full h-24 p-3 text-sm border border-slate-300 rounded-xl focus:ring-2 focus:ring-indigo-500 bg-white outline-none resize-none transition-all",
+                    placeholder: "Describe your business process...",
+                    value: c,
+                    onChange: (_) => f(_.target.value)
+                  }
+                ),
+                /* @__PURE__ */ w.jsxs(
+                  "button",
+                  {
+                    onClick: E,
+                    disabled: p || !c.trim(),
+                    className: "w-full mt-2 bg-indigo-600 hover:bg-indigo-700 disabled:bg-slate-300 text-white font-medium py-2 rounded-xl flex items-center justify-center gap-2 transition-all shadow-md active:scale-95",
+                    children: [
+                      p ? /* @__PURE__ */ w.jsx(pi, { className: "animate-spin", size: 16 }) : /* @__PURE__ */ w.jsx(Jt, { size: 16 }),
+                      p ? "Processing..." : "Generate Diagram"
+                    ]
+                  }
+                ),
+                h && /* @__PURE__ */ w.jsx("p", { className: "mt-2 text-[10px] text-center font-bold text-indigo-600", children: h })
+              ] }),
+              /* @__PURE__ */ w.jsx("section", { className: "mt-auto space-y-3 pt-6 border-t border-slate-200", children: /* @__PURE__ */ w.jsxs(
+                "button",
+                {
+                  onClick: () => {
+                    var _;
+                    return (_ = a.current) == null ? void 0 : _.importXML(Eo);
+                  },
+                  className: "w-full flex items-center gap-2 p-2 text-red-500 hover:bg-red-50 rounded-lg text-xs font-medium transition-all",
+                  children: [
+                    /* @__PURE__ */ w.jsx(hi, { size: 14 }),
+                    " Reset Canvas"
+                  ]
+                }
+              ) })
+            ] })
           ] }),
-          /* @__PURE__ */ w.jsx("section", { className: "mt-auto space-y-3 pt-6 border-t border-slate-200", children: /* @__PURE__ */ w.jsxs(
+          /* @__PURE__ */ w.jsx(
             "button",
             {
-              onClick: () => {
-                var _;
-                return (_ = a.current) == null ? void 0 : _.importXML(Eo);
-              },
-              className: "w-full flex items-center gap-2 p-2 text-red-500 hover:bg-red-50 rounded-lg text-xs font-medium transition-all",
-              children: [
-                /* @__PURE__ */ w.jsx(hi, { size: 14 }),
-                " Reset Canvas"
-              ]
+              onClick: () => d(!u),
+              className: "absolute -right-4 top-1/2 -translate-y-1/2 bg-white border border-slate-200 rounded-full p-1 shadow-md hover:text-indigo-600 transition-all z-50 focus:outline-none",
+              children: u ? /* @__PURE__ */ w.jsx(ai, { size: 20 }) : /* @__PURE__ */ w.jsx(Ht, { size: 20 })
             }
-          ) })
-        ] })
-      ] }),
-      /* @__PURE__ */ w.jsx(
-        "button",
-        {
-          onClick: () => d(!u),
-          className: "absolute -right-4 top-1/2 -translate-y-1/2 bg-white border border-slate-200 rounded-full p-1 shadow-md hover:text-indigo-600 transition-all z-50 focus:outline-none",
-          children: u ? /* @__PURE__ */ w.jsx(ai, { size: 20 }) : /* @__PURE__ */ w.jsx(Ht, { size: 20 })
-        }
-      )
-    ] }),
-    /* @__PURE__ */ w.jsxs("div", { className: "flex-1 relative flex flex-col min-w-0", children: [
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ w.jsxs("div", { className: "flex-1 relative flex flex-col min-w-0 bpmn-content", children: [
       /* @__PURE__ */ w.jsxs("header", { className: "h-14 border-b border-slate-200 flex items-center justify-between px-6 bg-white/80 backdrop-blur-md z-10", children: [
         /* @__PURE__ */ w.jsxs("div", { className: "flex items-center gap-2 text-xs font-medium", children: [
           /* @__PURE__ */ w.jsx("span", { className: "text-slate-400", children: "Project" }),
@@ -11851,7 +11877,13 @@ const Eo = `<?xml version="1.0" encoding="UTF-8"?>
       ] }),
       /* @__PURE__ */ w.jsxs("div", { className: "flex-1 relative overflow-hidden bg-white", children: [
         /* @__PURE__ */ w.jsx("div", { className: "absolute inset-0 bg-[radial-gradient(#e5e7eb_1px,transparent_1px)] [background-size:24px_24px] pointer-events-none opacity-40" }),
-        /* @__PURE__ */ w.jsx("div", { ref: l, className: "h-full w-full bpmn-io-style relative" })
+        /* @__PURE__ */ w.jsx(
+          "div",
+          {
+            ref: l,
+            className: "h-full w-full bpmn-io-style relative"
+          }
+        )
       ] })
     ] })
   ] });

package/dist/index.umd.js

@@ -218,4 +218,4 @@ React keys must be passed directly to JSX without using spread:
       </bpmndi:BPMNShape>
     </bpmndi:BPMNPlane>
   </bpmndi:BPMNDiagram>
-</bpmn:definitions>`,Of=({initialXml:o=Ho,onSave:e,onBack:t,title:n="Flow Designer",geminiApiKey:i})=>{const l=Z.useRef(null),a=Z.useRef(null),[u,d]=Z.useState(!0),[c,f]=Z.useState(""),[p,m]=Z.useState(!1),[h,g]=Z.useState("");Z.useEffect(()=>{const A=setTimeout(async()=>{if(l.current){a.current&&a.current.destroy(),a.current=new BpmnJS({container:l.current,keyboard:{}});try{await a.current.importXML(o)}catch(R){console.error("Error importing BPMN XML",R)}}},50);return()=>{clearTimeout(A),a.current&&(a.current.destroy(),a.current=null)}},[o]);const v=async()=>{if(a.current)try{const{xml:_}=await a.current.saveXML({format:!0});e&&e(_);const A=new Blob([_],{type:"application/xml"}),R=document.createElement("a");R.href=URL.createObjectURL(A),R.download="process-design.bpmn",R.click()}catch(_){console.error("Error exporting BPMN",_)}},E=async()=>{const _=i||"PLACEHOLDER_API_KEY";if(!(!c.trim()||!a.current||!_)){m(!0),g("Drafting flow...");try{let k=(await new $f({apiKey:_}).models.generateContent({model:"gemini-3-flash-preview",contents:`Generate a valid BPMN 2.0 XML based on this description: "${c}". Return ONLY the raw XML code without markdown blocks.`})).text||"";k=k.replace(/^```xml\n/,"").replace(/\n```$/,"").trim(),k.includes("<bpmn:definitions")?(await a.current.importXML(k),g("Import successful!"),f("")):g("Generated invalid XML. Try again.")}catch(A){console.error("AI Generation error",A),g("Generation failed.")}finally{m(!1),setTimeout(()=>g(""),3e3)}}},M=(_,A)=>{if(!a.current)return;const R=a.current.get("elementFactory"),k=a.current.get("create");let V=R.createShape({type:A});V&&k.start(_,V)};return w.jsxs("div",{className:"flex h-screen w-full bg-white overflow-hidden text-slate-800 font-sans border border-slate-200 rounded-lg",children:[w.jsxs("div",{className:`${u?"w-80":"w-0"} transition-all duration-300 border-r border-slate-200 bg-slate-50 flex flex-col relative z-20 shadow-xl overflow-hidden`,children:[u&&w.jsxs("div",{className:"flex-1 flex flex-col p-6 overflow-y-auto w-80",children:[w.jsxs("div",{className:"flex items-center gap-2 mb-8",children:[t&&w.jsx("button",{onClick:t,className:"p-2 hover:bg-slate-200 rounded-lg transition-colors mr-1 text-slate-600 cursor-pointer",children:w.jsx(oi,{size:18})}),w.jsx("h1",{className:"font-bold text-lg tracking-tight text-slate-900 truncate",children:n})]}),w.jsxs("div",{className:"space-y-6",children:[w.jsxs("section",{children:[w.jsx("h3",{className:"text-xs font-bold uppercase tracking-wider text-slate-400 mb-4",children:"Tools"}),w.jsx("div",{className:"grid grid-cols-1 gap-2",children:[{type:"bpmn:StartEvent",icon:w.jsx(si,{size:18}),label:"Start Event",color:"bg-green-50 text-green-600"},{type:"bpmn:Task",icon:w.jsx(ci,{size:18}),label:"User Task",color:"bg-slate-100 text-slate-600"},{type:"bpmn:IntermediateCatchEvent",icon:w.jsx(ai,{size:18}),label:"Message Catch",color:"bg-blue-50 text-blue-600"},{type:"bpmn:EndEvent",icon:w.jsx(ri,{size:18}),label:"End Event",color:"bg-red-50 text-red-600"}].map(_=>w.jsxs("div",{onMouseDown:A=>M(A,_.type),className:"flex items-center gap-3 p-3 bg-white border border-slate-200 rounded-xl cursor-grab hover:border-indigo-400 hover:shadow-sm transition-all group active:scale-95",children:[w.jsx("div",{className:`p-2 rounded-lg ${_.color}`,children:_.icon}),w.jsx("span",{className:"text-sm font-medium",children:_.label})]},_.type))})]}),w.jsx("hr",{className:"border-slate-200"}),w.jsxs("section",{children:[w.jsxs("label",{className:"block text-xs font-bold uppercase tracking-wider text-slate-400 mb-3 flex items-center gap-2",children:[w.jsx(Bt,{className:"w-3 h-3 text-indigo-500"}),"AI Architect"]}),w.jsx("textarea",{className:"w-full h-24 p-3 text-sm border border-slate-300 rounded-xl focus:ring-2 focus:ring-indigo-500 bg-white outline-none resize-none transition-all",placeholder:"Describe your business process...",value:c,onChange:_=>f(_.target.value)}),w.jsxs("button",{onClick:E,disabled:p||!c.trim(),className:"w-full mt-2 bg-indigo-600 hover:bg-indigo-700 disabled:bg-slate-300 text-white font-medium py-2 rounded-xl flex items-center justify-center gap-2 transition-all shadow-md active:scale-95",children:[p?w.jsx(ui,{className:"animate-spin",size:16}):w.jsx(Bt,{size:16}),p?"Processing...":"Generate Diagram"]}),h&&w.jsx("p",{className:"mt-2 text-[10px] text-center font-bold text-indigo-600",children:h})]}),w.jsx("section",{className:"mt-auto space-y-3 pt-6 border-t border-slate-200",children:w.jsxs("button",{onClick:()=>{var _;return(_=a.current)==null?void 0:_.importXML(Ho)},className:"w-full flex items-center gap-2 p-2 text-red-500 hover:bg-red-50 rounded-lg text-xs font-medium transition-all",children:[w.jsx(di,{size:14})," Reset Canvas"]})})]})]}),w.jsx("button",{onClick:()=>d(!u),className:"absolute -right-4 top-1/2 -translate-y-1/2 bg-white border border-slate-200 rounded-full p-1 shadow-md hover:text-indigo-600 transition-all z-50 focus:outline-none",children:u?w.jsx(ii,{size:20}):w.jsx(Gt,{size:20})})]}),w.jsxs("div",{className:"flex-1 relative flex flex-col min-w-0",children:[w.jsxs("header",{className:"h-14 border-b border-slate-200 flex items-center justify-between px-6 bg-white/80 backdrop-blur-md z-10",children:[w.jsxs("div",{className:"flex items-center gap-2 text-xs font-medium",children:[w.jsx("span",{className:"text-slate-400",children:"Project"}),w.jsx(Gt,{size:12,className:"text-slate-300"}),w.jsx("span",{className:"text-slate-900 font-bold",children:n})]}),w.jsx("div",{className:"flex gap-2",children:w.jsxs("button",{onClick:v,className:"text-xs font-bold text-white bg-indigo-600 hover:bg-indigo-700 px-4 py-2 rounded-lg shadow-sm flex items-center gap-2 transition-all active:scale-95",children:[w.jsx(li,{size:14})," Save & Export"]})})]}),w.jsxs("div",{className:"flex-1 relative overflow-hidden bg-white",children:[w.jsx("div",{className:"absolute inset-0 bg-[radial-gradient(#e5e7eb_1px,transparent_1px)] [background-size:24px_24px] pointer-events-none opacity-40"}),w.jsx("div",{ref:l,className:"h-full w-full bpmn-io-style relative"})]})]})]})},Jo=()=>w.jsx(Of,{title:"Sample Process Design",onSave:o=>console.log("Saved XML:",o)});le.BPMNFlowDesigner=Jo,le.default=Jo,Object.defineProperties(le,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));
+</bpmn:definitions>`,Of=({initialXml:o=Ho,onSave:e,onBack:t,title:n="Flow Designer",geminiApiKey:i})=>{const l=Z.useRef(null),a=Z.useRef(null),[u,d]=Z.useState(!0),[c,f]=Z.useState(""),[p,m]=Z.useState(!1),[h,g]=Z.useState("");Z.useEffect(()=>{const A=setTimeout(async()=>{if(l.current){a.current&&a.current.destroy(),a.current=new BpmnJS({container:l.current,keyboard:{}});try{await a.current.importXML(o)}catch(R){console.error("Error importing BPMN XML",R)}}},50);return()=>{clearTimeout(A),a.current&&(a.current.destroy(),a.current=null)}},[o]);const v=async()=>{if(a.current)try{const{xml:_}=await a.current.saveXML({format:!0});e&&e(_);const A=new Blob([_],{type:"application/xml"}),R=document.createElement("a");R.href=URL.createObjectURL(A),R.download="process-design.bpmn",R.click()}catch(_){console.error("Error exporting BPMN",_)}},E=async()=>{const _=i||"PLACEHOLDER_API_KEY";if(!(!c.trim()||!a.current||!_)){m(!0),g("Drafting flow...");try{let k=(await new $f({apiKey:_}).models.generateContent({model:"gemini-3-flash-preview",contents:`Generate a valid BPMN 2.0 XML based on this description: "${c}". Return ONLY the raw XML code without markdown blocks.`})).text||"";k=k.replace(/^```xml\n/,"").replace(/\n```$/,"").trim(),k.includes("<bpmn:definitions")?(await a.current.importXML(k),g("Import successful!"),f("")):g("Generated invalid XML. Try again.")}catch(A){console.error("AI Generation error",A),g("Generation failed.")}finally{m(!1),setTimeout(()=>g(""),3e3)}}},M=(_,A)=>{if(!a.current)return;const R=a.current.get("elementFactory"),k=a.current.get("create");let V=R.createShape({type:A});V&&k.start(_,V)};return w.jsxs("div",{className:"bpmn-designer flex h-screen w-full bg-white overflow-hidden text-slate-800 font-sans border border-slate-200 rounded-lg",children:[w.jsxs("div",{className:`${u?"w-80":"w-0"} transition-all duration-300 border-r border-slate-200 bg-slate-50 flex flex-col relative z-20 shadow-xl overflow-hidden bpmn-sidebar`,children:[u&&w.jsxs("div",{className:"flex-1 flex flex-col p-6 overflow-y-auto w-80",children:[w.jsxs("div",{className:"flex items-center gap-2 mb-8",children:[t&&w.jsx("button",{onClick:t,className:"p-2 hover:bg-slate-200 rounded-lg transition-colors mr-1 text-slate-600 cursor-pointer",children:w.jsx(oi,{size:18})}),w.jsx("h1",{className:"font-bold text-lg tracking-tight text-slate-900 truncate",children:n})]}),w.jsxs("div",{className:"space-y-6",children:[w.jsxs("section",{children:[w.jsx("h3",{className:"text-xs font-bold uppercase tracking-wider text-slate-400 mb-4",children:"Tools"}),w.jsx("div",{className:"grid grid-cols-1 gap-2",children:[{type:"bpmn:StartEvent",icon:w.jsx(si,{size:18}),label:"Start Event",color:"bg-green-50 text-green-600"},{type:"bpmn:Task",icon:w.jsx(ci,{size:18}),label:"User Task",color:"bg-slate-100 text-slate-600"},{type:"bpmn:IntermediateCatchEvent",icon:w.jsx(ai,{size:18}),label:"Message Catch",color:"bg-blue-50 text-blue-600"},{type:"bpmn:EndEvent",icon:w.jsx(ri,{size:18}),label:"End Event",color:"bg-red-50 text-red-600"}].map(_=>w.jsxs("div",{onMouseDown:A=>M(A,_.type),className:"flex items-center gap-3 p-3 bg-white border border-slate-200 rounded-xl cursor-grab hover:border-indigo-400 hover:shadow-sm transition-all group active:scale-95",children:[w.jsx("div",{className:`p-2 rounded-lg ${_.color}`,children:_.icon}),w.jsx("span",{className:"text-sm font-medium",children:_.label})]},_.type))})]}),w.jsx("hr",{className:"border-slate-200"}),w.jsxs("section",{children:[w.jsxs("label",{className:"block text-xs font-bold uppercase tracking-wider text-slate-400 mb-3 flex items-center gap-2",children:[w.jsx(Bt,{className:"w-3 h-3 text-indigo-500"}),"AI Architect"]}),w.jsx("textarea",{className:"w-full h-24 p-3 text-sm border border-slate-300 rounded-xl focus:ring-2 focus:ring-indigo-500 bg-white outline-none resize-none transition-all",placeholder:"Describe your business process...",value:c,onChange:_=>f(_.target.value)}),w.jsxs("button",{onClick:E,disabled:p||!c.trim(),className:"w-full mt-2 bg-indigo-600 hover:bg-indigo-700 disabled:bg-slate-300 text-white font-medium py-2 rounded-xl flex items-center justify-center gap-2 transition-all shadow-md active:scale-95",children:[p?w.jsx(ui,{className:"animate-spin",size:16}):w.jsx(Bt,{size:16}),p?"Processing...":"Generate Diagram"]}),h&&w.jsx("p",{className:"mt-2 text-[10px] text-center font-bold text-indigo-600",children:h})]}),w.jsx("section",{className:"mt-auto space-y-3 pt-6 border-t border-slate-200",children:w.jsxs("button",{onClick:()=>{var _;return(_=a.current)==null?void 0:_.importXML(Ho)},className:"w-full flex items-center gap-2 p-2 text-red-500 hover:bg-red-50 rounded-lg text-xs font-medium transition-all",children:[w.jsx(di,{size:14})," Reset Canvas"]})})]})]}),w.jsx("button",{onClick:()=>d(!u),className:"absolute -right-4 top-1/2 -translate-y-1/2 bg-white border border-slate-200 rounded-full p-1 shadow-md hover:text-indigo-600 transition-all z-50 focus:outline-none",children:u?w.jsx(ii,{size:20}):w.jsx(Gt,{size:20})})]}),w.jsxs("div",{className:"flex-1 relative flex flex-col min-w-0 bpmn-content",children:[w.jsxs("header",{className:"h-14 border-b border-slate-200 flex items-center justify-between px-6 bg-white/80 backdrop-blur-md z-10",children:[w.jsxs("div",{className:"flex items-center gap-2 text-xs font-medium",children:[w.jsx("span",{className:"text-slate-400",children:"Project"}),w.jsx(Gt,{size:12,className:"text-slate-300"}),w.jsx("span",{className:"text-slate-900 font-bold",children:n})]}),w.jsx("div",{className:"flex gap-2",children:w.jsxs("button",{onClick:v,className:"text-xs font-bold text-white bg-indigo-600 hover:bg-indigo-700 px-4 py-2 rounded-lg shadow-sm flex items-center gap-2 transition-all active:scale-95",children:[w.jsx(li,{size:14})," Save & Export"]})})]}),w.jsxs("div",{className:"flex-1 relative overflow-hidden bg-white",children:[w.jsx("div",{className:"absolute inset-0 bg-[radial-gradient(#e5e7eb_1px,transparent_1px)] [background-size:24px_24px] pointer-events-none opacity-40"}),w.jsx("div",{ref:l,className:"h-full w-full bpmn-io-style relative"})]})]})]})},Jo=()=>w.jsx(Of,{title:"Sample Process Design",onSave:o=>console.log("Saved XML:",o)});le.BPMNFlowDesigner=Jo,le.default=Jo,Object.defineProperties(le,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));

package/dist/style.css

@@ -1 +1 @@
-/*! tailwindcss v3.4.7 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder, textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246/0.5);--tw-ring-offset-shadow:0 0 transparent;--tw-ring-shadow:0 0 transparent;--tw-shadow:0 0 transparent;--tw-shadow-colored:0 0 transparent;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246/0.5);--tw-ring-offset-shadow:0 0 transparent;--tw-ring-shadow:0 0 transparent;--tw-shadow:0 0 transparent;--tw-shadow-colored:0 0 transparent;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }.hidden{display:none}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.bpmn-designer{display:flex;flex-direction:row;height:100vh;background:#fff;color:#1f2937;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,Liberation Sans,sans-serif;overflow:hidden}.bpmn-sidebar{width:20rem;border-right:1px solid #e5e7eb;background:#f8fafc;display:flex;flex-direction:column;position:relative;z-index:20;overflow:hidden}.bpmn-content{flex:1 1 auto;min-width:0}.p-6{padding:1.5rem}.p-3{padding:.75rem}.rounded-xl{border-radius:.75rem}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+/*! tailwindcss v3.4.7 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder, textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246/0.5);--tw-ring-offset-shadow:0 0 transparent;--tw-ring-shadow:0 0 transparent;--tw-shadow:0 0 transparent;--tw-shadow-colored:0 0 transparent;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246/0.5);--tw-ring-offset-shadow:0 0 transparent;--tw-ring-shadow:0 0 transparent;--tw-shadow:0 0 transparent;--tw-shadow-colored:0 0 transparent;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }.hidden{display:none}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.bpmn-designer{display:flex;flex-direction:row;height:100vh;background:#fff;color:#1f2937;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,Liberation Sans,sans-serif;overflow:hidden}.bpmn-sidebar{width:20rem;border-right:1px solid #e5e7eb;background:#f8fafc;display:flex;flex-direction:column;position:relative;z-index:20;overflow:hidden}.bpmn-content{flex:1 1 auto;min-width:0}.p-6{padding:1.5rem}.p-3{padding:.75rem}.rounded-xl{border-radius:.75rem}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bpmn-designer{display:flex!important;flex-direction:row!important;align-items:stretch!important;height:100vh!important;width:100%!important}.bpmn-designer>.bpmn-sidebar{flex:0 0 20rem!important;min-width:20rem!important;width:20rem!important}.bpmn-designer>.bpmn-sidebar.w-0,.bpmn-designer>.bpmn-sidebar[class*=w-0]{flex:0 0 0!important;width:0!important;min-width:0!important;overflow:hidden!important}.bpmn-designer>.bpmn-sidebar.w-80,.bpmn-designer>.bpmn-sidebar[class*=w-80]{flex:0 0 20rem!important;width:20rem!important;min-width:20rem!important}.bpmn-designer>.bpmn-content{flex:1 1 auto!important;min-width:0!important}.bpmn-content .bpmn-container,.bpmn-content .bpmn-io-style,.bpmn-content .djs-container{position:relative!important;height:100%!important;width:100%!important}.bpmn-content>header{height:56px!important;min-height:56px!important}body .bpmn-designer{box-sizing:border-box}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cravern/bpmn-flow-designer",
-  "version": "1.0.14",
+  "version": "1.0.16",
   "description": "Enterprise BPMN Flow Designer - A React-based tool for designing and managing business process models",
   "type": "module",
   "main": "dist/index.js",