@jeevandev/flow-canvas 0.1.4 → 0.1.6

package/README.md

@@ -10,14 +10,14 @@ A powerful, production-ready, page-based canvas editor library for React. Build
 
 - 🎨 **Multi-Page Canvas** - Create and manage multiple pages with smooth scrolling
 - 🖱️ **Interactive Elements** - Drag, resize, rotate with smooth interactions
-- 📏 **Smart Snapping** - Visual snap guides with Canva-like design
+- 📏 **Smart Snapping & Margins** - Visual snap guides and customizable page margins
 - 🔄 **Cross-Page Dragging** - Move elements between pages with ghost preview
 - 👥 **Grouping** - Group/ungroup elements with professional editing mode
 - 🎯 **Multi-Selection** - Select and manipulate multiple elements
 - ⌨️ **Keyboard Shortcuts** - Full keyboard support (Undo/Redo, Copy/Paste, etc.)
-- 🔍 **Zoom & Pan** - Smooth zoom and pan controls
+- 🔍 **Zoom & Pan** - Smooth zoom controls
 - ⚡ **High Performance** - Viewport culling and virtualization for large datasets
-- 🛡️ **Production Ready** - Error boundaries, logging, and comprehensive error handling
+
 - ♿ **Accessible** - ARIA labels and keyboard navigation support
 - 📦 **TypeScript** - Full type safety and IntelliSense support
 - 🎨 **Customizable** - Extensive configuration options and theming
@@ -174,7 +174,7 @@ const CustomNode = ({ data, style, className }: NodeComponentProps) => (
   </div>
 );
 
-<Canvas nodeTypes={{ custom: CustomNode }} />
+<Canvas nodeTypes={{ custom: CustomNode }} />;
 ```
 
 ### Selection
@@ -210,23 +210,13 @@ The library is optimized for performance:
 - **Memoization** - React.memo and useMemo for optimal re-renders
 - **Bundle Size** - Optimized bundle (121KB UMD, 38KB gzipped)
 
-## 🛡️ Production Features
-
-- ✅ **Error Boundaries** - Graceful error handling
-- ✅ **Logging** - Production-ready logger (no console.logs)
-- ✅ **Error Reporting** - Sentry-ready error reporting
-- ✅ **Performance Monitoring** - Built-in performance metrics
-- ✅ **Auto-Save** - State persistence utilities
-- ✅ **Templates** - Template system for reusable designs
-- ✅ **Accessibility** - WCAG compliant with ARIA labels
-
 ## 📊 Bundle Size
 
-| Format | Size | Gzipped |
-|--------|------|---------|
-| ES Module | 165 KB | 43 KB |
-| UMD | 121 KB | 38 KB |
-| CSS | 13 KB | 2.8 KB |
+| Format    | Size   | Gzipped |
+| --------- | ------ | ------- |
+| ES Module | 165 KB | 43 KB   |
+| UMD       | 121 KB | 38 KB   |
+| CSS       | 13 KB  | 2.8 KB  |
 
 ## 🧪 Development
 
@@ -262,6 +252,7 @@ MIT © [Jeevan Jose](https://github.com/jeevanjose)
 ## 🙏 Acknowledgments
 
 Built with:
+
 - [React](https://react.dev/)
 - [Zustand](https://github.com/pmndrs/zustand) - State management
 - [@use-gesture/react](https://use-gesture.netlify.app/) - Gesture handling

package/dist/flow-canvas.css

@@ -1 +1 @@
-.ce-editor{position:relative;width:100%;height:100%;overflow:hidden;background-color:#f3f4f6}.ce-editor__viewport{position:relative;width:100%;height:100%;overflow:auto;cursor:default}.ce-editor__viewport--panning{cursor:grab!important}.ce-editor__viewport--panning *{pointer-events:none!important}.ce-editor__scale-wrapper{width:100%;height:100%;display:flex;justify-content:center;align-items:flex-start;padding-top:40px}.ce-editor__canvas{transform-origin:top center;display:flex;flex-direction:column;align-items:center;padding:40px}.ce-editor__grid-layer{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0}.ce-editor__content-area{position:absolute;left:0;top:0;background-color:#fff;overflow:hidden;z-index:1;box-shadow:0 0 20px #0000001a}.ce-editor__infinite-area{position:relative;z-index:1}.ce-page{position:relative;flex-shrink:0;background-color:#fff;box-shadow:0 2px 8px #00000014,0 0 0 1px #0000000a;border-radius:4px;overflow:hidden;transition:box-shadow .2s ease,transform .2s ease}.ce-page--drag-target{box-shadow:0 4px 16px #06f3,0 0 0 2px #0066ff4d;transform:scale(1.002)}.ce-page--active{box-shadow:0 4px 12px #0000001f,0 0 0 1px #0000000f}.ce-page__ghost-preview{position:absolute;inset:0;pointer-events:none;z-index:999;background-color:#0066ff08;border:2px dashed rgba(0,102,255,.4);border-radius:4px}.ce-element{position:absolute;touch-action:none;-webkit-user-select:none;user-select:none;box-sizing:border-box;transition:box-shadow .15s ease,outline .15s ease}.ce-element--selected{outline:2px solid #0066FF;outline-width:calc(2px * var(--ce-inverse-zoom, 1));outline-offset:calc(-1px * var(--ce-inverse-zoom, 1));box-shadow:0 0 0 calc(1px * var(--ce-inverse-zoom, 1)) #ffffffe6,0 2px 8px #0066ff26;z-index:100!important}.ce-element img{pointer-events:none;-webkit-user-drag:none;-webkit-user-select:none;user-select:none}.ce-editor--editing-group .ce-element{opacity:.15;pointer-events:none!important;transition:opacity .2s ease,filter .2s ease}.ce-editor--editing-group .ce-element--editing-active{opacity:1;filter:none;pointer-events:auto;z-index:50!important;outline:2px dashed #0066FF;outline-offset:4px}.ce-editor--editing-group .ce-element--editing-active .ce-element{opacity:1;filter:none;pointer-events:auto!important}.ce-editor--connecting{cursor:crosshair!important}.ce-editor--connecting .ce-element:hover{outline:2px dashed #3b82f6;outline-width:calc(2px * var(--ce-inverse-zoom, 1));background-color:#3b82f60d;cursor:copy}.ce-editor--connecting .ce-handle:hover{transform:scale(1.5);background-color:#3b82f6!important;border-color:#fff!important;transition:transform .1s}.ce-resize-handle{width:calc(8px * var(--ce-inverse-zoom, 1));height:calc(8px * var(--ce-inverse-zoom, 1));background:#fff;border:calc(1.5px * var(--ce-inverse-zoom, 1)) solid #0066FF;border-radius:2px;position:absolute;z-index:101;box-shadow:0 1px 3px #00000026;transition:transform .1s ease,box-shadow .1s ease}.ce-resize-handle:hover{transform:scale(1.2);box-shadow:0 2px 6px #0003}.ce-resize-handle--nw{top:calc(-4px * var(--ce-inverse-zoom, 1));left:calc(-4px * var(--ce-inverse-zoom, 1));cursor:nw-resize}.ce-resize-handle--ne{top:calc(-4px * var(--ce-inverse-zoom, 1));right:calc(-4px * var(--ce-inverse-zoom, 1));cursor:ne-resize}.ce-resize-handle--sw{bottom:calc(-4px * var(--ce-inverse-zoom, 1));left:calc(-4px * var(--ce-inverse-zoom, 1));cursor:sw-resize}.ce-resize-handle--se{bottom:calc(-4px * var(--ce-inverse-zoom, 1));right:calc(-4px * var(--ce-inverse-zoom, 1));cursor:se-resize}.ce-resize-handle--n{top:calc(-4px * var(--ce-inverse-zoom, 1));left:50%;transform:translate(-50%);cursor:n-resize}.ce-resize-handle--s{bottom:calc(-4px * var(--ce-inverse-zoom, 1));left:50%;transform:translate(-50%);cursor:s-resize}.ce-resize-handle--e{right:calc(-4px * var(--ce-inverse-zoom, 1));top:50%;transform:translateY(-50%);cursor:e-resize}.ce-resize-handle--w{left:calc(-4px * var(--ce-inverse-zoom, 1));top:50%;transform:translateY(-50%);cursor:w-resize}.ce-rotate-handle{width:calc(20px * var(--ce-inverse-zoom, 1));height:calc(20px * var(--ce-inverse-zoom, 1));background:#fff;border:none;box-shadow:0 2px 6px #00000026;border-radius:50%;position:absolute;bottom:auto;top:calc(-32px * var(--ce-inverse-zoom, 1));left:50%;transform:translate(-50%);margin-left:0;cursor:grab;z-index:101;display:flex;align-items:center;justify-content:center;color:#06f;pointer-events:auto;transition:transform .1s ease,box-shadow .1s ease}.ce-rotate-handle svg{width:calc(12px * var(--ce-inverse-zoom, 1));height:calc(12px * var(--ce-inverse-zoom, 1))}.ce-rotate-handle:hover{transform:translate(-50%) scale(1.1);box-shadow:0 3px 8px #0003}.ce-rotate-handle:active{cursor:grabbing;background:#f3f4f6}.ce-drag-handle-minimal{width:calc(20px * var(--ce-inverse-zoom, 1));height:calc(20px * var(--ce-inverse-zoom, 1));position:absolute;top:auto;bottom:calc(-32px * var(--ce-inverse-zoom, 1));left:50%;transform:translate(-50%);margin-left:0;background-color:#fff;border-radius:50%;box-shadow:0 2px 6px #00000026;cursor:grab;z-index:102;display:flex;align-items:center;justify-content:center;color:#06f;transition:transform .1s ease,box-shadow .1s ease}.ce-drag-handle-minimal svg{width:calc(14px * var(--ce-inverse-zoom, 1));height:calc(14px * var(--ce-inverse-zoom, 1))}.ce-drag-handle-minimal:hover{transform:translate(-50%) scale(1.1);box-shadow:0 3px 8px #0003}.ce-drag-handle-minimal:active{cursor:grabbing;background-color:#f3f4f6}.ce-selection-overlay{position:absolute;top:0;left:0;width:0;height:0;pointer-events:none;z-index:1000}.ce-selection-overlay__box{position:absolute;border:2px solid #0066FF;background-color:#0066ff0a;pointer-events:none;box-shadow:0 0 0 1px #ffffffe6,0 2px 8px #0066ff26;transition:opacity .1s ease}.ce-resize-handle{position:absolute;width:10px;height:10px;background-color:#fff;border:calc(1.5px * var(--ce-inverse-zoom, 1)) solid #3b82f6;border-radius:calc(2px * var(--ce-inverse-zoom, 1));z-index:101;pointer-events:auto;box-shadow:0 1px 4px #0000001f,0 0 0 calc(.5px * var(--ce-inverse-zoom, 1)) #ffffffe6;transition:all .15s cubic-bezier(.4,0,.2,1)}.ce-resize-handle:hover{background-color:#3b82f6;box-shadow:0 2px 8px #3b82f659,0 0 0 calc(1px * var(--ce-inverse-zoom, 1)) #fff;transform:scale(1.2)}.ce-resize-handle--nw{top:-5px;left:-5px;cursor:nw-resize}.ce-resize-handle--ne{top:-5px;right:-5px;cursor:ne-resize}.ce-resize-handle--sw{bottom:-5px;left:-5px;cursor:sw-resize}.ce-resize-handle--se{bottom:-5px;right:-5px;cursor:se-resize}.ce-resize-handle--n{top:-5px;left:50%;transform:translate(-50%);cursor:n-resize}.ce-resize-handle--s{bottom:-5px;left:50%;transform:translate(-50%);cursor:s-resize}.ce-resize-handle--e{top:50%;right:-5px;transform:translateY(-50%);cursor:e-resize}.ce-resize-handle--w{top:50%;left:-5px;transform:translateY(-50%);cursor:w-resize}.ce-drag-handle-minimal{position:absolute;top:auto;left:50%;transform:translate(-50%);cursor:grab;background-color:#fff;border-radius:50%;border:calc(1.5px * var(--ce-inverse-zoom, 1)) solid #3b82f6;box-shadow:0 2px 8px #00000026,0 0 0 calc(.5px * var(--ce-inverse-zoom, 1)) #ffffffe6;display:flex;align-items:center;justify-content:center;color:#3b82f6;-webkit-user-select:none;user-select:none;pointer-events:auto;z-index:102;transition:all .15s cubic-bezier(.4,0,.2,1)}.ce-drag-handle-minimal:hover{background-color:#3b82f6;color:#fff;box-shadow:0 4px 12px #3b82f64d,0 0 0 calc(1px * var(--ce-inverse-zoom, 1)) #fff;transform:translate(-50%) scale(1.1)}.ce-drag-handle-minimal:active{cursor:grabbing}.ce-drag-handle-minimal svg{width:calc(16px * var(--ce-inverse-zoom, 1));height:calc(16px * var(--ce-inverse-zoom, 1));fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.ce-element-content{width:100%;height:100%}.ce-snap-guide{position:absolute;background-color:#06f;pointer-events:none;z-index:200;opacity:.85;transition:opacity .15s ease;box-shadow:0 0 0 .5px #fff9;animation:snapGuideFadeIn .15s ease-out}.ce-snap-guide--vertical{width:1px;height:100%;left:0;top:0}.ce-snap-guide--horizontal{height:1px;width:100%;left:0;top:0}.ce-snap-guide:after{content:"";position:absolute;inset:-.5px;background:#0066ff26;border-radius:1px;z-index:-1}@keyframes snapGuideFadeIn{0%{opacity:0}to{opacity:.85}}.ce-node-default,.ce-node-input,.ce-node-output{background:#fff;border:1px solid #777;border-radius:4px;padding:10px;min-width:180px;text-align:center;font-size:14px;color:#222;box-shadow:0 1px 4px #0000001a;position:relative}.ce-node-input{border-color:#3b82f6}.ce-node-output{border-color:#10b981}.ce-node-content{pointer-events:none}.ce-handle{width:10px;height:10px;background:#fff;border-radius:50%;position:absolute;border:3px solid #777;z-index:10;cursor:crosshair;transition:border-color .2s}.ce-handle--left{left:0;transform:translate(-50%)}.ce-handle--right{right:0;transform:translate(50%)}.ce-handle--top{top:0;transform:translateY(-50%)}.ce-handle--bottom{bottom:0;transform:translateY(50%)}.ce-workflow-node:hover .ce-delete-node-btn{opacity:1;pointer-events:auto}.ce-delete-node-btn{position:absolute;top:-8px;right:-8px;width:18px;height:18px;background:#ff4d4f;color:#fff;border:none;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px;line-height:1;padding:0;z-index:20;opacity:0;pointer-events:none;transition:opacity .2s,transform .1s;box-shadow:0 2px 4px #0000001a}.ce-delete-node-btn:hover{transform:scale(1.1);background:#ff7875}.demo-node{width:100%;height:100%;background:#fff;border:1px solid #e5e7eb;border-radius:8px;overflow:hidden;-webkit-user-select:none;user-select:none;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;display:flex;flex-direction:column}.demo-node__header{height:32px;background:#f9fafb;border-bottom:1px solid #e5e7eb;display:flex;align-items:center;padding:0 12px;font-size:12px;font-weight:500;color:#6b7280}.demo-node__body{flex:1;padding:12px;font-size:14px;color:#1f2937;display:flex;align-items:center;justify-content:center;background:#fff}.ce-edge-group .ce-edge-delete-fo{opacity:0;pointer-events:none;transition:opacity .2s}.ce-edge-group:hover .ce-edge-delete-fo{opacity:1;pointer-events:auto}.ce-connection-line{animation:dashdraw .5s linear infinite}@keyframes dashdraw{0%{stroke-dashoffset:10}to{stroke-dashoffset:0}}.ce-group-node{position:relative;pointer-events:none;width:100%;height:100%}.ce-group-node--editing{outline:2px dashed #0066FF;outline-offset:4px;border-radius:4px}.ce-editor--editing-group .ce-element{opacity:.5;pointer-events:none!important;transition:opacity .25s ease,filter .25s ease;filter:grayscale(.15)}.ce-editor--editing-group .ce-group-node--editing{opacity:1;filter:none;pointer-events:auto;z-index:50!important;outline:2px dashed #0066FF;outline-offset:4px;border-radius:4px;background:#0066ff05;box-shadow:0 0 0 1px #0066ff1a}.ce-editor--editing-group .ce-group-node--editing .ce-element{opacity:1;filter:none;pointer-events:auto!important}.ce-editor--editing-group .ce-group-node--editing .ce-element--selected{opacity:1;filter:none;z-index:100!important}.ce-editor--editing-group .ce-group-node--editing>.ce-element{opacity:1!important;filter:none!important}.ce-element[data-node-type=group].ce-element--selected{outline:2px solid #0066FF;outline-offset:2px;box-shadow:0 0 0 1px #ffffffe6,0 2px 8px #06f3}.ce-error-boundary{padding:20px;background-color:#fee;border:1px solid #fcc;border-radius:4px;color:#c00}.ce-error-boundary__title{margin:0 0 10px;font-size:18px}.ce-error-boundary__message{margin:0 0 10px}.ce-error-boundary__details{font-size:14px}.ce-error-boundary__details summary{cursor:pointer;margin-bottom:10px}.ce-error-boundary__details pre{padding:10px;background-color:#fff;border:1px solid #ddd;border-radius:4px;overflow:auto;font-size:12px}.ce-accessibility-instructions{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}.ce-group-editor{position:fixed;top:16px;left:50%;transform:translate(-50%);z-index:10000;display:flex;align-items:center;gap:8px;background-color:#fffffff2;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:8px 16px;border-radius:8px;box-shadow:0 4px 12px #00000026,0 0 0 1px #0000000d;pointer-events:auto}.ce-group-editor__breadcrumbs{display:flex;align-items:center;gap:4px;font-size:13px;color:#666}.ce-group-editor__separator{color:#999;margin:0 4px}.ce-group-editor__breadcrumb{background:none;border:none;padding:4px 8px;border-radius:4px;cursor:pointer;color:#666;font-weight:400;transition:background-color .15s ease}.ce-group-editor__breadcrumb--active{color:#06f;font-weight:600}.ce-group-editor__breadcrumb:hover:not(.ce-group-editor__breadcrumb--active){background-color:#0066ff1a}.ce-group-editor__exit-button{background:none;border:1px solid #ddd;border-radius:6px;padding:6px 12px;cursor:pointer;color:#666;font-size:12px;font-weight:500;display:flex;align-items:center;gap:6px;transition:all .15s ease;margin-left:8px}.ce-group-editor__exit-button:hover{background-color:#f5f5f5;border-color:#bbb}.ce-default-node{padding:20px;background-color:#f0f0f0}.ce-virtualization-debug{position:fixed;bottom:10px;right:10px;padding:8px;background-color:#000000b3;color:#fff;font-size:12px;border-radius:4px;z-index:10000}.ce-virtualized-container{position:relative;width:100%;height:100%}.ce-global-snap-guide{position:absolute;inset:0;pointer-events:none;z-index:200}
+.ce-editor{position:relative;width:100%;height:100%;overflow:hidden;background-color:#f3f4f6}.ce-editor__viewport{position:relative;width:100%;height:100%;overflow:auto;cursor:default}.ce-editor__viewport--panning{cursor:grab!important}.ce-editor__viewport--panning *{pointer-events:none!important}.ce-editor__scale-wrapper{width:100%;height:100%;display:flex;justify-content:center;align-items:flex-start;padding-top:40px}.ce-editor__canvas{transform-origin:top center;display:flex;flex-direction:column;align-items:center;padding:40px}.ce-editor__grid-layer{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0}.ce-editor__content-area{position:absolute;left:0;top:0;background-color:#fff;overflow:hidden;z-index:1;box-shadow:0 0 20px #0000001a}.ce-editor__infinite-area{position:relative;z-index:1}.ce-page{position:relative;flex-shrink:0;background-color:#fff;box-shadow:0 2px 8px #00000014,0 0 0 1px #0000000a;overflow:hidden;transition:box-shadow .2s ease,transform .2s ease;cursor:pointer}.ce-page--drag-target{box-shadow:0 4px 16px #06f3,0 0 0 2px #0066ff4d;transform:scale(1.002)}.ce-page--selected{outline:2px solid #3b82f6;outline-offset:2px;box-shadow:0 6px 16px #3b82f640,0 0 0 1px #3b82f626}.ce-page__ghost-preview{position:absolute;inset:0;pointer-events:none;z-index:999;background-color:#0066ff08;border:2px dashed rgba(0,102,255,.4);border-radius:4px}.ce-element{position:absolute;touch-action:none;-webkit-user-select:none;user-select:none;box-sizing:border-box;transition:box-shadow .15s ease,outline .15s ease}.ce-element--selected{outline:2px solid #0066FF;outline-width:calc(2px * var(--ce-inverse-zoom, 1));outline-offset:calc(-1px * var(--ce-inverse-zoom, 1));box-shadow:0 0 0 calc(1px * var(--ce-inverse-zoom, 1)) #ffffffe6,0 2px 8px #0066ff26;z-index:100!important}.ce-element img{pointer-events:none;-webkit-user-drag:none;-webkit-user-select:none;user-select:none}.ce-editor--editing-group .ce-element{opacity:.15;pointer-events:none!important;transition:opacity .2s ease,filter .2s ease}.ce-editor--editing-group .ce-element--editing-active{opacity:1;filter:none;pointer-events:auto;z-index:50!important;outline:2px dashed #0066FF;outline-offset:4px}.ce-editor--editing-group .ce-element--editing-active .ce-element{opacity:1;filter:none;pointer-events:auto!important}.ce-editor--connecting{cursor:crosshair!important}.ce-editor--connecting .ce-element:hover{outline:2px dashed #3b82f6;outline-width:calc(2px * var(--ce-inverse-zoom, 1));background-color:#3b82f60d;cursor:copy}.ce-editor--connecting .ce-handle:hover{transform:scale(1.5);background-color:#3b82f6!important;border-color:#fff!important;transition:transform .1s}.ce-resize-handle{width:calc(8px * var(--ce-inverse-zoom, 1));height:calc(8px * var(--ce-inverse-zoom, 1));background:#fff;border:calc(1.5px * var(--ce-inverse-zoom, 1)) solid #0066FF;border-radius:2px;position:absolute;z-index:101;box-shadow:0 1px 3px #00000026;transition:transform .1s ease,box-shadow .1s ease}.ce-resize-handle:hover{transform:scale(1.2);box-shadow:0 2px 6px #0003}.ce-resize-handle--nw{top:calc(-4px * var(--ce-inverse-zoom, 1));left:calc(-4px * var(--ce-inverse-zoom, 1));cursor:nw-resize}.ce-resize-handle--ne{top:calc(-4px * var(--ce-inverse-zoom, 1));right:calc(-4px * var(--ce-inverse-zoom, 1));cursor:ne-resize}.ce-resize-handle--sw{bottom:calc(-4px * var(--ce-inverse-zoom, 1));left:calc(-4px * var(--ce-inverse-zoom, 1));cursor:sw-resize}.ce-resize-handle--se{bottom:calc(-4px * var(--ce-inverse-zoom, 1));right:calc(-4px * var(--ce-inverse-zoom, 1));cursor:se-resize}.ce-resize-handle--n{top:calc(-4px * var(--ce-inverse-zoom, 1));left:50%;transform:translate(-50%);cursor:n-resize}.ce-resize-handle--s{bottom:calc(-4px * var(--ce-inverse-zoom, 1));left:50%;transform:translate(-50%);cursor:s-resize}.ce-resize-handle--e{right:calc(-4px * var(--ce-inverse-zoom, 1));top:50%;transform:translateY(-50%);cursor:e-resize}.ce-resize-handle--w{left:calc(-4px * var(--ce-inverse-zoom, 1));top:50%;transform:translateY(-50%);cursor:w-resize}.ce-rotate-handle{width:calc(20px * var(--ce-inverse-zoom, 1));height:calc(20px * var(--ce-inverse-zoom, 1));background:#fff;border:none;box-shadow:0 2px 6px #00000026;border-radius:50%;position:absolute;bottom:auto;top:calc(-32px * var(--ce-inverse-zoom, 1));left:50%;transform:translate(-50%);margin-left:0;cursor:grab;z-index:101;display:flex;align-items:center;justify-content:center;color:#06f;pointer-events:auto;transition:transform .1s ease,box-shadow .1s ease}.ce-rotate-handle svg{width:calc(12px * var(--ce-inverse-zoom, 1));height:calc(12px * var(--ce-inverse-zoom, 1))}.ce-rotate-handle:hover{transform:translate(-50%) scale(1.1);box-shadow:0 3px 8px #0003}.ce-rotate-handle:active{cursor:grabbing;background:#f3f4f6}.ce-drag-handle-minimal{width:calc(20px * var(--ce-inverse-zoom, 1));height:calc(20px * var(--ce-inverse-zoom, 1));position:absolute;top:auto;bottom:calc(-32px * var(--ce-inverse-zoom, 1));left:50%;transform:translate(-50%);margin-left:0;background-color:#fff;border-radius:50%;box-shadow:0 2px 6px #00000026;cursor:grab;z-index:102;display:flex;align-items:center;justify-content:center;color:#06f;transition:transform .1s ease,box-shadow .1s ease}.ce-drag-handle-minimal svg{width:calc(14px * var(--ce-inverse-zoom, 1));height:calc(14px * var(--ce-inverse-zoom, 1))}.ce-drag-handle-minimal:hover{transform:translate(-50%) scale(1.1);box-shadow:0 3px 8px #0003}.ce-drag-handle-minimal:active{cursor:grabbing;background-color:#f3f4f6}.ce-selection-overlay{position:absolute;top:0;left:0;width:0;height:0;pointer-events:none;z-index:1000}.ce-selection-overlay__box{position:absolute;border:2px solid #0066FF;background-color:#0066ff0a;pointer-events:none;box-shadow:0 0 0 1px #ffffffe6,0 2px 8px #0066ff26;transition:opacity .1s ease}.ce-resize-handle{position:absolute;width:10px;height:10px;background-color:#fff;border:calc(1.5px * var(--ce-inverse-zoom, 1)) solid #3b82f6;border-radius:calc(2px * var(--ce-inverse-zoom, 1));z-index:101;pointer-events:auto;box-shadow:0 1px 4px #0000001f,0 0 0 calc(.5px * var(--ce-inverse-zoom, 1)) #ffffffe6;transition:all .15s cubic-bezier(.4,0,.2,1)}.ce-resize-handle:hover{background-color:#3b82f6;box-shadow:0 2px 8px #3b82f659,0 0 0 calc(1px * var(--ce-inverse-zoom, 1)) #fff;transform:scale(1.2)}.ce-resize-handle--nw{top:-5px;left:-5px;cursor:nw-resize}.ce-resize-handle--ne{top:-5px;right:-5px;cursor:ne-resize}.ce-resize-handle--sw{bottom:-5px;left:-5px;cursor:sw-resize}.ce-resize-handle--se{bottom:-5px;right:-5px;cursor:se-resize}.ce-resize-handle--n{top:-5px;left:50%;transform:translate(-50%);cursor:n-resize}.ce-resize-handle--s{bottom:-5px;left:50%;transform:translate(-50%);cursor:s-resize}.ce-resize-handle--e{top:50%;right:-5px;transform:translateY(-50%);cursor:e-resize}.ce-resize-handle--w{top:50%;left:-5px;transform:translateY(-50%);cursor:w-resize}.ce-drag-handle-minimal{position:absolute;top:auto;left:50%;transform:translate(-50%);cursor:grab;background-color:#fff;border-radius:50%;border:calc(1.5px * var(--ce-inverse-zoom, 1)) solid #3b82f6;box-shadow:0 2px 8px #00000026,0 0 0 calc(.5px * var(--ce-inverse-zoom, 1)) #ffffffe6;display:flex;align-items:center;justify-content:center;color:#3b82f6;-webkit-user-select:none;user-select:none;pointer-events:auto;z-index:102;transition:all .15s cubic-bezier(.4,0,.2,1)}.ce-drag-handle-minimal:hover{background-color:#3b82f6;color:#fff;box-shadow:0 4px 12px #3b82f64d,0 0 0 calc(1px * var(--ce-inverse-zoom, 1)) #fff;transform:translate(-50%) scale(1.1)}.ce-drag-handle-minimal:active{cursor:grabbing}.ce-drag-handle-minimal svg{width:calc(16px * var(--ce-inverse-zoom, 1));height:calc(16px * var(--ce-inverse-zoom, 1));fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.ce-element-content{width:100%;height:100%}.ce-snap-guide{position:absolute;background-color:#06f;pointer-events:none;z-index:200;opacity:.85;transition:opacity .15s ease;box-shadow:0 0 0 .5px #fff9;animation:snapGuideFadeIn .15s ease-out}.ce-snap-guide--vertical{width:1px;height:100%;left:0;top:0}.ce-snap-guide--horizontal{height:1px;width:100%;left:0;top:0}.ce-snap-guide:after{content:"";position:absolute;inset:-.5px;background:#0066ff26;border-radius:1px;z-index:-1}@keyframes snapGuideFadeIn{0%{opacity:0}to{opacity:.85}}.ce-node-default,.ce-node-input,.ce-node-output{background:#fff;border:1px solid #777;border-radius:4px;padding:10px;min-width:180px;text-align:center;font-size:14px;color:#222;box-shadow:0 1px 4px #0000001a;position:relative}.ce-node-input{border-color:#3b82f6}.ce-node-output{border-color:#10b981}.ce-node-content{pointer-events:none}.ce-handle{width:10px;height:10px;background:#fff;border-radius:50%;position:absolute;border:3px solid #777;z-index:10;cursor:crosshair;transition:border-color .2s}.ce-handle--left{left:0;transform:translate(-50%)}.ce-handle--right{right:0;transform:translate(50%)}.ce-handle--top{top:0;transform:translateY(-50%)}.ce-handle--bottom{bottom:0;transform:translateY(50%)}.ce-workflow-node:hover .ce-delete-node-btn{opacity:1;pointer-events:auto}.ce-delete-node-btn{position:absolute;top:-8px;right:-8px;width:18px;height:18px;background:#ff4d4f;color:#fff;border:none;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px;line-height:1;padding:0;z-index:20;opacity:0;pointer-events:none;transition:opacity .2s,transform .1s;box-shadow:0 2px 4px #0000001a}.ce-delete-node-btn:hover{transform:scale(1.1);background:#ff7875}.demo-node{width:100%;height:100%;background:#fff;border:1px solid #e5e7eb;border-radius:8px;overflow:hidden;-webkit-user-select:none;user-select:none;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;display:flex;flex-direction:column}.demo-node__header{height:32px;background:#f9fafb;border-bottom:1px solid #e5e7eb;display:flex;align-items:center;padding:0 12px;font-size:12px;font-weight:500;color:#6b7280}.demo-node__body{flex:1;padding:12px;font-size:14px;color:#1f2937;display:flex;align-items:center;justify-content:center;background:#fff}.ce-edge-group .ce-edge-delete-fo{opacity:0;pointer-events:none;transition:opacity .2s}.ce-edge-group:hover .ce-edge-delete-fo{opacity:1;pointer-events:auto}.ce-connection-line{animation:dashdraw .5s linear infinite}@keyframes dashdraw{0%{stroke-dashoffset:10}to{stroke-dashoffset:0}}.ce-group-node{position:relative;pointer-events:none;width:100%;height:100%}.ce-group-node--editing{outline:2px dashed #0066FF;outline-offset:4px;border-radius:4px}.ce-editor--editing-group .ce-element{opacity:.5;pointer-events:none!important;transition:opacity .25s ease,filter .25s ease;filter:grayscale(.15)}.ce-editor--editing-group .ce-group-node--editing{opacity:1;filter:none;pointer-events:auto;z-index:50!important;outline:2px dashed #0066FF;outline-offset:4px;border-radius:4px;background:#0066ff05;box-shadow:0 0 0 1px #0066ff1a}.ce-editor--editing-group .ce-group-node--editing .ce-element{opacity:1;filter:none;pointer-events:auto!important}.ce-editor--editing-group .ce-group-node--editing .ce-element--selected{opacity:1;filter:none;z-index:100!important}.ce-editor--editing-group .ce-group-node--editing>.ce-element{opacity:1!important;filter:none!important}.ce-element[data-node-type=group].ce-element--selected{outline:2px solid #0066FF;outline-offset:2px;box-shadow:0 0 0 1px #ffffffe6,0 2px 8px #06f3}.ce-error-boundary{padding:20px;background-color:#fee;border:1px solid #fcc;border-radius:4px;color:#c00}.ce-error-boundary__title{margin:0 0 10px;font-size:18px}.ce-error-boundary__message{margin:0 0 10px}.ce-error-boundary__details{font-size:14px}.ce-error-boundary__details summary{cursor:pointer;margin-bottom:10px}.ce-error-boundary__details pre{padding:10px;background-color:#fff;border:1px solid #ddd;border-radius:4px;overflow:auto;font-size:12px}.ce-accessibility-instructions{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}.ce-group-editor{position:fixed;top:16px;left:50%;transform:translate(-50%);z-index:10000;display:flex;align-items:center;gap:8px;background-color:#fffffff2;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:8px 16px;border-radius:8px;box-shadow:0 4px 12px #00000026,0 0 0 1px #0000000d;pointer-events:auto}.ce-group-editor__breadcrumbs{display:flex;align-items:center;gap:4px;font-size:13px;color:#666}.ce-group-editor__separator{color:#999;margin:0 4px}.ce-group-editor__breadcrumb{background:none;border:none;padding:4px 8px;border-radius:4px;cursor:pointer;color:#666;font-weight:400;transition:background-color .15s ease}.ce-group-editor__breadcrumb--active{color:#06f;font-weight:600}.ce-group-editor__breadcrumb:hover:not(.ce-group-editor__breadcrumb--active){background-color:#0066ff1a}.ce-group-editor__exit-button{background:none;border:1px solid #ddd;border-radius:6px;padding:6px 12px;cursor:pointer;color:#666;font-size:12px;font-weight:500;display:flex;align-items:center;gap:6px;transition:all .15s ease;margin-left:8px}.ce-group-editor__exit-button:hover{background-color:#f5f5f5;border-color:#bbb}.ce-default-node{padding:20px;background-color:#f0f0f0}.ce-virtualization-debug{position:fixed;bottom:10px;right:10px;padding:8px;background-color:#000000b3;color:#fff;font-size:12px;border-radius:4px;z-index:10000}.ce-virtualized-container{position:relative;width:100%;height:100%}.ce-global-snap-guide{position:absolute;inset:0;pointer-events:none;z-index:200}