@cravern/bpmn-flow-designer 1.0.8 → 1.0.10

package/README.md

@@ -1,158 +1,20 @@
-# BPMN Flow Designer
+<div align="center">
+<img width="1200" height="475" alt="GHBanner" src="https://github.com/user-attachments/assets/0aa67016-6eaf-458a-adb2-6e31a0763ed6" />
+</div>
 
-A React component for designing and managing BPMN (Business Process Model and Notation) flows with support for business processes, capabilities, cycles, and practices.
+# Run and deploy your AI Studio app
 
-## Features
+This contains everything you need to run your app locally.
 
-- **Hierarchical Structure**: Organize processes into capabilities, cycles, and practices
-- **BPMN Diagram Support**: Create and edit BPMN diagrams
-- **AI-Powered**: Integration with Google's Generative AI for intelligent suggestions
-- **Beautiful UI**: Built with Tailwind CSS for a modern, responsive design
-- **TypeScript Support**: Full TypeScript type definitions included
-- **React 18+ Compatible**: Works with React 18 and React 19
+View your app in AI Studio: https://ai.studio/apps/drive/1T5RxWNtwMo7anyaqY3VRKVCDzKWZNbKZ
 
-## Installation
+## Run Locally
 
-```bash
-npm install @cravern/bpmn-flow-designer
-```
+**Prerequisites:**  Node.js
 
-## Usage
 
-### Basic Usage
-
-```jsx
-import React from "react";
-import { BpmnFlowDesigner } from "@cravern/bpmn-flow-designer";
-import "@cravern/bpmn-flow-designer/style.css";
-
-function App() {
-  return <BpmnFlowDesigner />;
-}
-
-export default App;
-```
-
-### Requirements
-
-This package requires the following peer dependencies:
-
-- `react` ^18.0.0 or ^19.0.0
-- `react-dom` ^18.0.0 or ^19.0.0
-
-### CSS Styles
-
-You must import the stylesheet to use this component:
-
-```jsx
-import "@cravern/bpmn-flow-designer/style.css";
-```
-
-The package includes:
-
-- **Tailwind CSS**: Utility-first CSS framework
-- **Lucide React Icons**: Beautiful, accessible icons
-- **BPMN-JS Styles**: Styling for BPMN diagram components
-
-### External Dependencies
-
-The component also requires these libraries to be included in your project for full functionality:
-
-```html
-<!-- BPMN-JS Library and 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"
-/>
-<script src="https://unpkg.com/bpmn-js@18.1.0/dist/bpmn-modeler.development.js"></script>
-```
-
-Or install BPMN-JS as a package:
-
-```bash
-npm install bpmn-js
-```
-
-## API
-
-### BpmnFlowDesigner Component
-
-The main component that provides the BPMN flow designer interface.
-
-```jsx
-<BpmnFlowDesigner />
-```
-
-The component manages:
-
-- Business process organization
-- Capability definitions
-- Business cycle management
-- Work practice documentation
-- BPMN diagram creation and editing
-
-## Environment Variables
-
-If using AI-powered features, set your Gemini API key:
-
-```bash
-VITE_GEMINI_API_KEY=your_api_key_here
-```
-
-or in `.env.local`:
-
-```
-GEMINI_API_KEY=your_api_key_here
-```
-
-## Development
-
-### Prerequisites
-
-- Node.js 16+
-- npm or yarn
-
-### Setup
-
-```bash
-git clone <repository>
-cd bpmn-flow-designer
-npm install
-```
-
-### Running Locally
-
-```bash
-npm run dev
-```
-
-### Building
-
-```bash
-npm run build
-```
-
-This will:
-
-1. Generate TypeScript declarations
-2. Build ES and UMD modules
-3. Extract and bundle CSS
-
-## Browser Support
-
-- Chrome (latest)
-- Firefox (latest)
-- Safari (latest)
-- Edge (latest)
-
-## License
-
-MIT
-
-## Support
-
-For issues, questions, or contributions, please visit the project repository.
+1. Install dependencies:
+   `npm install`
+2. Set the `GEMINI_API_KEY` in [.env.local](.env.local) to your Gemini API key
+3. Run the app:
+   `npm run dev`

package/dist/App.d.ts

@@ -1,3 +1,16 @@
-import React from 'react';
-declare const App: React.FC;
+import { default as React } from 'react';
+interface BpmnDesignerProps {
+    initialXml?: string;
+    onSave?: (xml: string) => void;
+    onBack?: () => void;
+    title?: string;
+    geminiApiKey?: string;
+}
+/**
+ * BpmnDesigner - A reusable BPMN 2.0 flow designer component.
+ * Can be installed and used in any React application.
+ */
+export declare const BpmnDesigner: React.FC<BpmnDesignerProps>;
+declare const App: () => import("react/jsx-runtime").JSX.Element;
 export default App;
+//# sourceMappingURL=App.d.ts.map

package/dist/App.d.ts.map

@@ -0,0 +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"}

package/dist/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { Kf as BPMNFlowDesigner };
+declare function Kf(): any;
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/dist/index.umd.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=index.umd.d.ts.map

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

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