@cravern/bpmn-flow-designer 1.0.0 → 1.0.2

package/package.json

@@ -1,23 +1,43 @@
 {
   "name": "@cravern/bpmn-flow-designer",
   "private": false,
-  "version": "1.0.0",
+  "version": "1.0.2",
   "type": "module",
+  "description": "A BPMN flow designer component built with React and Tailwind CSS",
+  "main": "./dist/index.js",
+  "types": "./dist/src/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/src/index.d.ts"
+    },
+    "./style.css": "./dist/style.css"
+  },
+  "files": [
+    "dist"
+  ],
   "scripts": {
     "dev": "vite",
-    "build": "vite build",
+    "build": "tsc && vite build",
     "preview": "vite preview"
   },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
   "dependencies": {
-    "react": "^19.2.3",
-    "react-dom": "^19.2.3",
     "@google/genai": "1.3.0",
     "lucide-react": "0.460.0"
   },
   "devDependencies": {
     "@types/node": "^22.14.0",
     "@vitejs/plugin-react": "^5.0.0",
+    "autoprefixer": "^10.4.16",
+    "postcss": "^8.4.31",
+    "tailwindcss": "^3.4.1",
     "typescript": "~5.8.2",
-    "vite": "^6.2.0"
+    "vite": "^6.2.0",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3"
   }
 }

package/App.tsx

@@ -1,441 +0,0 @@
-
-import React, { useState, useEffect, useRef } from 'react';
-import { 
-  Play, 
-  Save, 
-  FileCode, 
-  Download, 
-  Trash2, 
-  Sparkles, 
-  ChevronRight,
-  ChevronLeft,
-  Circle,
-  MessageCircle,
-  XCircle,
-  Layers,
-  Square,
-  ArrowLeft,
-  Briefcase,
-  Target,
-  RefreshCw,
-  FileText,
-  Plus,
-  GitCommit
-} from 'lucide-react';
-import { GoogleGenAI } from "@google/genai";
-
-declare const BpmnJS: any;
-
-// Updated Mock Data Structure: Practices are now children of Cycles
-const BUSINESS_PROCESSES = [
-  {
-    id: 'bp1',
-    name: 'Order to Cash',
-    capabilities: [
-      {
-        id: 'cap1',
-        name: 'Order Management',
-        cycles: [
-          { 
-            id: 'cyc1', 
-            name: 'Standard Order Processing', 
-            type: 'cycle',
-            practices: [
-              { id: 'pra1', name: 'Validate Customer Credit', type: 'practice' },
-              { id: 'pra3', name: 'Check Inventory Availability', type: 'practice' }
-            ]
-          },
-          { 
-            id: 'cyc2', 
-            name: 'Returns Management', 
-            type: 'cycle',
-            practices: [
-              { id: 'pra4', name: 'Issue Return Material Auth', type: 'practice' }
-            ]
-          }
-        ]
-      },
-      {
-        id: 'cap2',
-        name: 'Invoicing & Collections',
-        cycles: [
-          { 
-            id: 'cyc3', 
-            name: 'Automated Billing Cycle', 
-            type: 'cycle',
-            practices: []
-          }
-        ]
-      }
-    ]
-  },
-  {
-    id: 'bp2',
-    name: 'Hire to Retire',
-    capabilities: [
-      {
-        id: 'cap3',
-        name: 'Talent Acquisition',
-        cycles: [
-          { 
-            id: 'cyc4', 
-            name: 'Recruitment Funnel', 
-            type: 'cycle',
-            practices: [
-              { id: 'pra2', name: 'Interview Evaluation', type: 'practice' },
-              { id: 'pra5', name: 'Background Verification', type: 'practice' }
-            ]
-          }
-        ]
-      }
-    ]
-  }
-];
-
-const INITIAL_DIAGRAM = `<?xml version="1.0" encoding="UTF-8"?>
-<bpmn:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" id="Definitions_1" targetNamespace="http://bpmn.io/schema/bpmn">
-  <bpmn:process id="Process_1" isExecutable="false">
-    <bpmn:startEvent id="StartEvent_1" name="Start" />
-  </bpmn:process>
-  <bpmndi:BPMNDiagram id="BPMNDiagram_1">
-    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">
-      <bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_1">
-        <dc:Bounds x="173" y="102" width="36" height="36" />
-      </bpmndi:BPMNShape>
-    </bpmndi:BPMNPlane>
-  </bpmndi:BPMNDiagram>
-</bpmn:definitions>`;
-
-const App: React.FC = () => {
-  const [view, setView] = useState<'dashboard' | 'designer'>('dashboard');
-  const [activeProcessTab, setActiveProcessTab] = useState(BUSINESS_PROCESSES[0].id);
-  const [editingItem, setEditingItem] = useState<{ id: string, name: string, type: string } | null>(null);
-  
-  // Designer State
-  const containerRef = useRef<HTMLDivElement>(null);
-  const modelerRef = useRef<any>(null);
-  const [isSidebarOpen, setIsSidebarOpen] = useState(true);
-  const [prompt, setPrompt] = useState('');
-  const [isGenerating, setIsGenerating] = useState(false);
-  const [statusMsg, setStatusMsg] = useState('');
-
-  // Modeler initialization and cleanup
-  useEffect(() => {
-    if (view === 'designer' && containerRef.current) {
-      // Small timeout to ensure DOM is fully ready
-      const timer = setTimeout(() => {
-        if (!modelerRef.current && containerRef.current) {
-          modelerRef.current = new BpmnJS({ container: containerRef.current });
-          modelerRef.current.importXML(INITIAL_DIAGRAM).catch(console.error);
-        }
-      }, 50);
-      return () => clearTimeout(timer);
-    }
-    
-    // Cleanup when leaving designer or component unmounts
-    return () => {
-      if (modelerRef.current) {
-        try {
-          modelerRef.current.destroy();
-        } catch (e) {
-          console.warn("Modeler destruction warning", e);
-        }
-        modelerRef.current = null;
-      }
-    };
-  }, [view]);
-
-  const handleOpenDesigner = (item: { id: string, name: string, type: string }) => {
-    setEditingItem(item);
-    setView('designer');
-  };
-
-  const handleBackToDashboard = () => {
-    // Navigate back immediately
-    setView('dashboard');
-    // Clear states
-    setEditingItem(null);
-    setPrompt('');
-    setStatusMsg('');
-    setIsGenerating(false);
-  };
-
-  const handleDownloadXml = async () => {
-    if (!modelerRef.current) return;
-    try {
-      const { xml } = await modelerRef.current.saveXML({ format: true });
-      const blob = new Blob([xml], { type: 'application/xml' });
-      const a = document.createElement('a');
-      a.href = URL.createObjectURL(blob);
-      a.download = `${editingItem?.name.replace(/\s+/g, '_') || 'process'}.bpmn`;
-      a.click();
-    } catch (err) {
-      console.error('Error exporting BPMN', err);
-    }
-  };
-
-  const generateWithAi = async () => {
-    if (!prompt.trim() || !modelerRef.current) return;
-    setIsGenerating(true);
-    setStatusMsg('Drafting flow...');
-    try {
-      const ai = new GoogleGenAI({ apiKey: process.env.API_KEY || '' });
-      const response = await ai.models.generateContent({
-        model: 'gemini-3-flash-preview',
-        contents: `Generate a valid BPMN 2.0 XML for a ${editingItem?.type} named "${editingItem?.name}". Specific requirements: "${prompt}". Return ONLY the raw XML code.`,
-      });
-      let xml = response.text || '';
-      xml = xml.replace(/^```xml\n/, '').replace(/\n```$/, '').trim();
-      if (xml.includes('<bpmn:definitions')) {
-        await modelerRef.current.importXML(xml);
-        setStatusMsg('Import successful!');
-        setPrompt('');
-      } else {
-        setStatusMsg('Generated invalid XML.');
-      }
-    } catch (err) {
-      console.error('AI Generation error', err);
-      setStatusMsg('Generation failed.');
-    } finally {
-      setIsGenerating(false);
-      setTimeout(() => setStatusMsg(''), 3000);
-    }
-  };
-
-  const handleDragStart = (event: React.MouseEvent, type: string) => {
-    if (!modelerRef.current) return;
-    const elementFactory = modelerRef.current.get('elementFactory');
-    const create = modelerRef.current.get('create');
-    let shape = elementFactory.createShape({ type });
-    if (shape) create.start(event, shape);
-  };
-
-  if (view === 'dashboard') {
-    const currentProcess = BUSINESS_PROCESSES.find(bp => bp.id === activeProcessTab);
-
-    return (
-      <div className="min-h-screen bg-slate-50 text-slate-900">
-        <header className="bg-white border-b border-slate-200 px-8 py-6">
-          <div className="max-w-7xl mx-auto flex justify-between items-center">
-            <div>
-              <h1 className="text-2xl font-bold tracking-tight text-slate-900 flex items-center gap-2">
-                <Briefcase className="text-indigo-600" />
-                Enterprise Blueprint
-              </h1>
-              <p className="text-slate-500 text-sm">Organize processes, capabilities, and work cycles.</p>
-            </div>
-            <button className="bg-indigo-600 text-white px-4 py-2 rounded-lg text-sm font-semibold hover:bg-indigo-700 transition-colors flex items-center gap-2 shadow-sm">
-              <Plus size={18} /> New Process
-            </button>
-          </div>
-        </header>
-
-        <div className="bg-white border-b border-slate-200 sticky top-0 z-10">
-          <div className="max-w-7xl mx-auto flex gap-8 px-8">
-            {BUSINESS_PROCESSES.map(bp => (
-              <button
-                key={bp.id}
-                onClick={() => setActiveProcessTab(bp.id)}
-                className={`py-4 text-sm font-semibold border-b-2 transition-all ${
-                  activeProcessTab === bp.id 
-                    ? 'border-indigo-600 text-indigo-600' 
-                    : 'border-transparent text-slate-500 hover:text-slate-700'
-                }`}
-              >
-                {bp.name}
-              </button>
-            ))}
-          </div>
-        </div>
-
-        <main className="max-w-7xl mx-auto p-8">
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
-            {currentProcess?.capabilities.map(cap => (
-              <div key={cap.id} className="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden flex flex-col h-fit">
-                <div className="p-6 border-b border-slate-100 bg-slate-50/50">
-                  <h3 className="text-lg font-bold flex items-center gap-2 text-slate-800">
-                    <Target className="text-indigo-500 w-5 h-5" />
-                    {cap.name}
-                  </h3>
-                  <span className="text-xs font-semibold text-slate-400 uppercase tracking-widest mt-1 block">Capability</span>
-                </div>
-                
-                <div className="p-6 space-y-4">
-                  <h4 className="text-xs font-bold text-slate-400 uppercase tracking-wider mb-2 flex items-center gap-2">
-                    <RefreshCw size={14} /> Work Cycles & Practices
-                  </h4>
-                  
-                  <div className="space-y-4">
-                    {cap.cycles.map(cycle => (
-                      <div key={cycle.id} className="rounded-xl border border-slate-100 overflow-hidden bg-white shadow-sm">
-                        {/* Cycle Header */}
-                        <div className="flex items-center justify-between p-3 bg-slate-50/50 group border-b border-slate-100">
-                          <div className="flex items-center gap-2">
-                            <RefreshCw size={14} className="text-indigo-400" />
-                            <span className="text-sm font-bold text-slate-800">{cycle.name}</span>
-                          </div>
-                          <button 
-                            onClick={() => handleOpenDesigner(cycle)}
-                            className="text-[10px] font-bold text-indigo-600 bg-indigo-100 px-2 py-1 rounded hover:bg-indigo-200 transition-colors uppercase tracking-tight"
-                          >
-                            Design Cycle
-                          </button>
-                        </div>
-
-                        {/* Nested Practices */}
-                        <div className="p-2 space-y-1">
-                          {cycle.practices.length > 0 ? (
-                            cycle.practices.map(practice => (
-                              <div key={practice.id} className="flex items-center justify-between p-2 pl-4 rounded-lg hover:bg-indigo-50/50 group transition-all">
-                                <div className="flex items-center gap-2">
-                                  <GitCommit size={12} className="text-slate-300" />
-                                  <span className="text-xs font-medium text-slate-600">{practice.name}</span>
-                                </div>
-                                <button 
-                                  onClick={() => handleOpenDesigner(practice)}
-                                  className="text-[10px] font-semibold text-slate-400 opacity-0 group-hover:opacity-100 hover:text-indigo-600 flex items-center gap-1 transition-all"
-                                >
-                                  Design Practice <ChevronRight size={10}/>
-                                </button>
-                              </div>
-                            ))
-                          ) : (
-                            <div className="py-2 px-4 text-[10px] italic text-slate-400">No practices defined for this cycle.</div>
-                          )}
-                        </div>
-                      </div>
-                    ))}
-                  </div>
-                </div>
-              </div>
-            ))}
-          </div>
-        </main>
-      </div>
-    );
-  }
-
-  // Designer View
-  return (
-    <div className="flex h-screen w-full bg-white overflow-hidden text-slate-800">
-      <div className={`${isSidebarOpen ? 'w-80' : 'w-0'} transition-all duration-300 border-r border-slate-200 bg-slate-50 flex flex-col relative z-20 shadow-xl`}>
-        {isSidebarOpen && (
-          <div className="flex-1 flex flex-col p-6 overflow-y-auto w-80">
-            <div className="flex items-center gap-2 mb-8">
-              <button 
-                onClick={(e) => {
-                  e.preventDefault();
-                  handleBackToDashboard();
-                }}
-                className="p-2 hover:bg-slate-200 rounded-lg transition-colors mr-1 flex items-center justify-center text-slate-600 hover:text-indigo-600 active:scale-95 cursor-pointer"
-                title="Back to Dashboard"
-              >
-                <ArrowLeft size={18} />
-              </button>
-              <h1 className="font-bold text-lg tracking-tight text-slate-900 truncate">
-                {editingItem?.name}
-              </h1>
-            </div>
-
-            <div className="space-y-6">
-              <section>
-                <h3 className="text-xs font-bold uppercase tracking-wider text-slate-400 mb-4 flex items-center gap-2">
-                  Palette
-                </h3>
-                <div className="grid grid-cols-1 gap-2">
-                  {[
-                    { type: 'bpmn:StartEvent', icon: <Circle size={18} />, label: 'Start', color: 'bg-green-50 text-green-600' },
-                    { type: 'bpmn:Task', icon: <Square size={18} />, label: 'Task', color: 'bg-slate-100 text-slate-600' },
-                    { type: 'bpmn:IntermediateCatchEvent', icon: <MessageCircle size={18} />, label: 'Event', color: 'bg-blue-50 text-blue-600' },
-                    { type: 'bpmn:EndEvent', icon: <XCircle size={18} />, label: 'End', color: 'bg-red-50 text-red-600' }
-                  ].map(item => (
-                    <div 
-                      key={item.type}
-                      onMouseDown={(e) => handleDragStart(e, item.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"
-                    >
-                      <div className={`p-2 rounded-lg ${item.color}`}>
-                        {item.icon}
-                      </div>
-                      <span className="text-sm font-medium">{item.label}</span>
-                    </div>
-                  ))}
-                </div>
-              </section>
-
-              <hr className="border-slate-200" />
-
-              <section>
-                <label className="block text-xs font-bold uppercase tracking-wider text-slate-400 mb-3 flex items-center gap-2">
-                  <Sparkles className="w-3 h-3 text-indigo-500" />
-                  AI Architect
-                </label>
-                <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="Ask AI to draft this process..."
-                  value={prompt}
-                  onChange={(e) => setPrompt(e.target.value)}
-                />
-                <button
-                  onClick={generateWithAi}
-                  disabled={isGenerating || !prompt.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"
-                >
-                  {isGenerating ? "Drafting..." : "Generate Flow"}
-                </button>
-                {statusMsg && <p className="mt-2 text-[10px] text-center font-medium text-indigo-600">{statusMsg}</p>}
-              </section>
-
-              <section className="mt-auto space-y-3 pt-6 border-t border-slate-200">
-                <button 
-                  onClick={() => {
-                    if (modelerRef.current) {
-                      modelerRef.current.importXML(INITIAL_DIAGRAM);
-                    }
-                  }}
-                  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"
-                >
-                  <Trash2 size={14} /> Reset Canvas
-                </button>
-              </section>
-            </div>
-          </div>
-        )}
-
-        <button 
-          onClick={() => setIsSidebarOpen(!isSidebarOpen)}
-          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"
-        >
-          {isSidebarOpen ? <ChevronLeft size={20}/> : <ChevronRight size={20}/>}
-        </button>
-      </div>
-
-      <div className="flex-1 relative flex flex-col min-w-0">
-        <header className="h-14 border-b border-slate-200 flex items-center justify-between px-6 bg-white/80 backdrop-blur-md z-10">
-          <div className="flex items-center gap-2 text-xs font-medium">
-            <span className="text-slate-400">Architecture</span>
-            <ChevronRight size={12} className="text-slate-300" />
-            <span className="text-slate-400 uppercase tracking-tighter">{editingItem?.type === 'cycle' ? 'Cycle' : 'Practice'}</span>
-            <ChevronRight size={12} className="text-slate-300" />
-            <span className="text-slate-900 font-bold">{editingItem?.name}</span>
-          </div>
-          <div className="flex gap-2">
-            <button 
-              onClick={handleDownloadXml}
-              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"
-            >
-              <Download size={14} /> Export BPMN
-            </button>
-          </div>
-        </header>
-
-        <div className="flex-1 relative overflow-hidden bg-white">
-          <div className="absolute inset-0 bg-[radial-gradient(#e5e7eb_1px,transparent_1px)] [background-size:24px_24px] pointer-events-none opacity-40" />
-          <div ref={containerRef} className="h-full w-full bpmn-io-style relative" />
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default App;

package/index.html

@@ -1,60 +0,0 @@
-
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>BPMN Flow Designer</title>
-    <script src="https://cdn.tailwindcss.com"></script>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-    
-    <!-- BPMN-JS Styles -->
-    <link rel="stylesheet" href="https://unpkg.com/bpmn-js@18.1.0/dist/assets/diagram-js.css">
-    <link rel="stylesheet" href="https://unpkg.com/bpmn-js@18.1.0/dist/assets/bpmn-font/css/bpmn.css">
-    
-    <!-- BPMN-JS Library -->
-    <script src="https://unpkg.com/bpmn-js@18.1.0/dist/bpmn-modeler.development.js"></script>
-
-    <style>
-      @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
-      body {
-        font-family: 'Inter', sans-serif;
-        margin: 0;
-        padding: 0;
-        overflow: hidden;
-        height: 100vh;
-      }
-      #root {
-        height: 100%;
-      }
-      /* Hide the default bpmn-js palette to use our custom one */
-      .bpmn-io-style .djs-palette {
-        display: none !important;
-      }
-      .bpmn-io-style .djs-container {
-        background-color: transparent !important;
-      }
-      .bjs-powered-by {
-        display: none !important;
-      }
-    </style>
-    <script type="importmap">
-{
-  "imports": {
-    "react": "https://esm.sh/react@19.0.0",
-    "react-dom": "https://esm.sh/react-dom@19.0.0",
-    "react-dom/client": "https://esm.sh/react-dom@19.0.0/client",
-    "@google/genai": "https://esm.sh/@google/genai@1.3.0",
-    "lucide-react": "https://esm.sh/lucide-react@0.460.0",
-    "react-dom/": "https://esm.sh/react-dom@^19.2.3/",
-    "react/": "https://esm.sh/react@^19.2.3/"
-  }
-}
-</script>
-<link rel="stylesheet" href="/index.css">
-</head>
-<body class="bg-slate-50">
-    <div id="root"></div>
-<script type="module" src="/index.tsx"></script>
-</body>
-</html>

package/index.tsx

@@ -1,16 +0,0 @@
-
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import App from './App';
-
-const rootElement = document.getElementById('root');
-if (!rootElement) {
-  throw new Error("Could not find root element to mount to");
-}
-
-const root = ReactDOM.createRoot(rootElement);
-root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-);

package/metadata.json

@@ -1,5 +0,0 @@
-{
-  "name": "BPMN Flow Designer",
-  "description": "A sophisticated BPMN 2.0 flow designer built with React, Tailwind CSS, and Gemini AI integration for automated diagram generation and process optimization.",
-  "requestFramePermissions": []
-}

package/tsconfig.json

@@ -1,21 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2022",
-    "experimentalDecorators": true,
-    "useDefineForClassFields": false,
-    "module": "ESNext",
-    "lib": ["ES2022", "DOM", "DOM.Iterable"],
-    "skipLibCheck": true,
-    "types": ["node"],
-    "moduleResolution": "bundler",
-    "isolatedModules": true,
-    "moduleDetection": "force",
-    "allowJs": true,
-    "jsx": "react-jsx",
-    "paths": {
-      "@/*": ["./*"]
-    },
-    "allowImportingTsExtensions": true,
-    "noEmit": true
-  }
-}

package/vite.config.ts

@@ -1,23 +0,0 @@
-import path from 'path';
-import { defineConfig, loadEnv } from 'vite';
-import react from '@vitejs/plugin-react';
-
-export default defineConfig(({ mode }) => {
-    const env = loadEnv(mode, '.', '');
-    return {
-      server: {
-        port: 3000,
-        host: '0.0.0.0',
-      },
-      plugins: [react()],
-      define: {
-        'process.env.API_KEY': JSON.stringify(env.GEMINI_API_KEY),
-        'process.env.GEMINI_API_KEY': JSON.stringify(env.GEMINI_API_KEY)
-      },
-      resolve: {
-        alias: {
-          '@': path.resolve(__dirname, '.'),
-        }
-      }
-    };
-});