@aranzatech/diagrams-bpmn 0.1.3 → 0.2.1

package/dist/{chunk-NXMUX67A.js → chunk-H3YMTGFG.js}

@@ -1,4 +1,4 @@
-import { BPMN_THEME, resolveStroke, resolveStrokeWidth } from './chunk-23B2IGK5.js';
+import { BPMN_THEME, resolveStroke, resolveStrokeWidth, resolveShapeFilter, resolveNodeShadow } from './chunk-KALSGH4D.js';
 import { Position, Handle } from '@xyflow/react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
@@ -192,7 +192,7 @@ function StartEventNode({ data, selected }) {
   const trigger = d.trigger ?? "none";
   const dashArray = d.isNonInterrupting ? "4 2" : void 0;
   return /* @__PURE__ */ jsxs("div", { style: { width: SIZE, height: SIZE, position: "relative" }, children: [
-    /* @__PURE__ */ jsxs("svg", { width: SIZE, height: SIZE, style: { overflow: "visible", display: "block" }, children: [
+    /* @__PURE__ */ jsxs("svg", { width: SIZE, height: SIZE, style: { overflow: "visible", display: "block", filter: resolveShapeFilter(selected) }, children: [
       /* @__PURE__ */ jsx(
         "circle",
         {
@@ -221,7 +221,7 @@ function EndEventNode({ data, selected }) {
   const fill = d.color?.fill ?? BPMN_THEME.fill;
   const trigger = d.trigger ?? "none";
   return /* @__PURE__ */ jsxs("div", { style: { width: SIZE2, height: SIZE2, position: "relative" }, children: [
-    /* @__PURE__ */ jsxs("svg", { width: SIZE2, height: SIZE2, style: { overflow: "visible", display: "block" }, children: [
+    /* @__PURE__ */ jsxs("svg", { width: SIZE2, height: SIZE2, style: { overflow: "visible", display: "block", filter: resolveShapeFilter(selected) }, children: [
       /* @__PURE__ */ jsx(
         "circle",
         {
@@ -249,9 +249,9 @@ function IntermediateCatchEventNode({ data, selected }) {
   const stroke = resolveStroke(selected, d.color?.stroke);
   const sw = resolveStrokeWidth(selected);
   const fill = d.color?.fill ?? BPMN_THEME.fill;
-  const trigger = d.trigger ?? "none";
+  const trigger = d.trigger && d.trigger !== "none" ? d.trigger : "timer";
   return /* @__PURE__ */ jsxs("div", { style: { width: SIZE3, height: SIZE3, position: "relative" }, children: [
-    /* @__PURE__ */ jsxs("svg", { width: SIZE3, height: SIZE3, style: { overflow: "visible", display: "block" }, children: [
+    /* @__PURE__ */ jsxs("svg", { width: SIZE3, height: SIZE3, style: { overflow: "visible", display: "block", filter: resolveShapeFilter(selected) }, children: [
       /* @__PURE__ */ jsx("circle", { cx: CX3, cy: CX3, r: R_OUTER, fill, stroke, strokeWidth: sw }),
       /* @__PURE__ */ jsx("circle", { cx: CX3, cy: CX3, r: R_INNER, fill: "none", stroke, strokeWidth: sw }),
       /* @__PURE__ */ jsx(EventMarker, { cx: CX3, cy: CX3, trigger, filled: false, stroke, bg: fill, r: ICON_R })
@@ -265,9 +265,9 @@ function IntermediateThrowEventNode({ data, selected }) {
   const stroke = resolveStroke(selected, d.color?.stroke);
   const sw = resolveStrokeWidth(selected);
   const fill = d.color?.fill ?? BPMN_THEME.fill;
-  const trigger = d.trigger ?? "none";
+  const trigger = d.trigger && d.trigger !== "none" ? d.trigger : "message";
   return /* @__PURE__ */ jsxs("div", { style: { width: SIZE3, height: SIZE3, position: "relative" }, children: [
-    /* @__PURE__ */ jsxs("svg", { width: SIZE3, height: SIZE3, style: { overflow: "visible", display: "block" }, children: [
+    /* @__PURE__ */ jsxs("svg", { width: SIZE3, height: SIZE3, style: { overflow: "visible", display: "block", filter: resolveShapeFilter(selected) }, children: [
       /* @__PURE__ */ jsx("circle", { cx: CX3, cy: CX3, r: R_OUTER, fill, stroke, strokeWidth: sw }),
       /* @__PURE__ */ jsx("circle", { cx: CX3, cy: CX3, r: R_INNER, fill: stroke, stroke, strokeWidth: sw }),
       /* @__PURE__ */ jsx(EventMarker, { cx: CX3, cy: CX3, trigger, filled: true, stroke: fill, bg: stroke, r: ICON_R })
@@ -281,10 +281,10 @@ function BoundaryEventNode({ data, selected }) {
   const stroke = resolveStroke(selected, d.color?.stroke);
   const sw = resolveStrokeWidth(selected);
   const fill = d.color?.fill ?? BPMN_THEME.fill;
-  const trigger = d.trigger ?? "none";
+  const trigger = d.trigger && d.trigger !== "none" ? d.trigger : "timer";
   const dashArray = d.isNonInterrupting ? "4 2" : void 0;
   return /* @__PURE__ */ jsxs("div", { style: { width: SIZE3, height: SIZE3, position: "relative" }, children: [
-    /* @__PURE__ */ jsxs("svg", { width: SIZE3, height: SIZE3, style: { overflow: "visible", display: "block" }, children: [
+    /* @__PURE__ */ jsxs("svg", { width: SIZE3, height: SIZE3, style: { overflow: "visible", display: "block", filter: resolveShapeFilter(selected) }, children: [
       /* @__PURE__ */ jsx(
         "circle",
         {
@@ -319,6 +319,11 @@ function TaskIcon({ type, size = 14, color = "#404040" }) {
   const s = size;
   const c = color;
   switch (type) {
+    case "Task":
+      return /* @__PURE__ */ jsxs("svg", { width: s, height: s, viewBox: "0 0 16 16", fill: "none", children: [
+        /* @__PURE__ */ jsx("rect", { x: "3", y: "3", width: "10", height: "10", rx: "1.5", stroke: c, strokeWidth: "1.5" }),
+        /* @__PURE__ */ jsx("path", { d: "M5.5 8.2 7.2 10 10.8 6", stroke: c, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
+      ] });
     case "UserTask":
       return /* @__PURE__ */ jsxs("svg", { width: s, height: s, viewBox: "0 0 16 16", fill: "none", children: [
         /* @__PURE__ */ jsx("circle", { cx: "8", cy: "5", r: "3", stroke: c, strokeWidth: "1.5" }),
@@ -461,20 +466,22 @@ function TaskNode({ data, selected }) {
       style: {
         width: "100%",
         height: "100%",
-        background: d.color?.fill ?? BPMN_THEME.fill,
+        background: d.color?.fill ?? `linear-gradient(180deg, ${BPMN_THEME.fill} 0%, ${BPMN_THEME.fillSoft} 100%)`,
         border: `${borderWidth}px solid ${stroke}`,
-        borderRadius: 6,
+        borderRadius: 7,
         boxSizing: "border-box",
+        boxShadow: resolveNodeShadow(selected),
         display: "flex",
         flexDirection: "column",
         alignItems: "center",
         justifyContent: "center",
         padding: hasMarkers ? "4px 8px 22px" : "4px 8px",
         position: "relative",
-        fontFamily: BPMN_THEME.fontFamily
+        fontFamily: BPMN_THEME.fontFamily,
+        transition: BPMN_THEME.transition
       },
       children: [
-        d.elementType && d.elementType !== "Task" && /* @__PURE__ */ jsx("div", { style: { position: "absolute", top: 5, left: 5 }, children: /* @__PURE__ */ jsx(TaskIcon, { type: d.elementType, size: 14, color: stroke }) }),
+        d.elementType && /* @__PURE__ */ jsx("div", { style: { position: "absolute", top: 5, left: 5 }, children: /* @__PURE__ */ jsx(TaskIcon, { type: d.elementType, size: 14, color: stroke }) }),
         /* @__PURE__ */ jsx(BpmnLabel, { style: { width: "100%" }, children: d.label ?? d.elementType }),
         d.priority && /* @__PURE__ */ jsx(
           "div",
@@ -552,7 +559,7 @@ function GatewayNode({ data, selected }) {
   const stroke = resolveStroke(selected, d.color?.stroke);
   const sw = resolveStrokeWidth(selected);
   return /* @__PURE__ */ jsxs("div", { style: { width: SIZE4, height: SIZE4, position: "relative" }, children: [
-    /* @__PURE__ */ jsxs("svg", { width: SIZE4, height: SIZE4, style: { overflow: "visible", display: "block" }, children: [
+    /* @__PURE__ */ jsxs("svg", { width: SIZE4, height: SIZE4, style: { overflow: "visible", display: "block", filter: resolveShapeFilter(selected) }, children: [
       /* @__PURE__ */ jsx(
         "polygon",
         {
@@ -568,11 +575,24 @@ function GatewayNode({ data, selected }) {
     /* @__PURE__ */ jsx(BpmnLabel, { external: true, children: d.label })
   ] });
 }
+function resolveVariant(d) {
+  if (d.subProcessVariant) return d.subProcessVariant;
+  switch (d.elementType) {
+    case "Transaction":
+      return "transaction";
+    case "EventSubProcess":
+      return "event";
+    case "AdHocSubProcess":
+      return "adhoc";
+    default:
+      return "embedded";
+  }
+}
 function SubProcessNode({ data, selected }) {
   const d = data;
   const stroke = resolveStroke(selected, d.color?.stroke);
   const sw = resolveStrokeWidth(selected);
-  const variant = d.subProcessVariant ?? "embedded";
+  const variant = resolveVariant(d);
   const isExpanded = d.isExpanded ?? true;
   const hasMarkers = d.markers && d.markers.length > 0;
   const borderStyle = variant === "event" ? "dashed" : "solid";
@@ -582,12 +602,14 @@ function SubProcessNode({ data, selected }) {
       style: {
         width: "100%",
         height: "100%",
-        background: d.color?.fill ?? "#f8faff",
+        background: d.color?.fill ?? `linear-gradient(180deg, ${BPMN_THEME.fill} 0%, ${BPMN_THEME.fillSubtle} 100%)`,
         border: `${sw}px ${borderStyle} ${stroke}`,
         borderRadius: 6,
         boxSizing: "border-box",
+        boxShadow: resolveNodeShadow(selected),
         position: "relative",
-        fontFamily: BPMN_THEME.fontFamily
+        fontFamily: BPMN_THEME.fontFamily,
+        transition: BPMN_THEME.transition
       },
       children: [
         variant === "transaction" && /* @__PURE__ */ jsx(
@@ -641,8 +663,8 @@ function PoolNode({ data, selected }) {
   const stroke = resolveStroke(selected, d.color?.stroke);
   const sw = resolveStrokeWidth(selected);
   const orientation = d.orientation ?? "horizontal";
-  const fill = d.color?.fill ?? "#f5f7ff";
-  const headerFill = d.color?.fill ?? "#edf0ff";
+  const fill = d.color?.fill ?? "#f8fbff";
+  const headerFill = d.color?.fill ?? "#eaf2ff";
   if (orientation === "vertical") {
     return /* @__PURE__ */ jsxs(
       "div",
@@ -656,14 +678,17 @@ function PoolNode({ data, selected }) {
           borderRadius: 4,
           boxSizing: "border-box",
           background: fill,
+          boxShadow: resolveNodeShadow(selected),
           overflow: "hidden",
-          fontFamily: BPMN_THEME.fontFamily
+          fontFamily: BPMN_THEME.fontFamily,
+          transition: BPMN_THEME.transition
         },
         children: [
           /* @__PURE__ */ jsx(
             "div",
             {
               "aria-label": "pool-header",
+              className: "pool-drag-handle",
               style: {
                 height: HEADER_HEIGHT,
                 minHeight: HEADER_HEIGHT,
@@ -672,7 +697,8 @@ function PoolNode({ data, selected }) {
                 alignItems: "center",
                 justifyContent: "center",
                 background: headerFill,
-                padding: "0 8px"
+                padding: "0 8px",
+                cursor: "grab"
               },
               children: /* @__PURE__ */ jsx(
                 "span",
@@ -706,14 +732,17 @@ function PoolNode({ data, selected }) {
         borderRadius: 4,
         boxSizing: "border-box",
         background: fill,
+        boxShadow: resolveNodeShadow(selected),
         overflow: "hidden",
-        fontFamily: BPMN_THEME.fontFamily
+        fontFamily: BPMN_THEME.fontFamily,
+        transition: BPMN_THEME.transition
       },
       children: [
         /* @__PURE__ */ jsx(
           "div",
           {
             "aria-label": "pool-header",
+            className: "pool-drag-handle",
             style: {
               width: HEADER_WIDTH,
               minWidth: HEADER_WIDTH,
@@ -721,7 +750,8 @@ function PoolNode({ data, selected }) {
               display: "flex",
               alignItems: "center",
               justifyContent: "center",
-              background: headerFill
+              background: headerFill,
+              cursor: "grab"
             },
             children: /* @__PURE__ */ jsx(
               "span",
@@ -754,8 +784,8 @@ function LaneNode({ data, selected }) {
   const stroke = resolveStroke(selected, d.color?.stroke);
   const sw = resolveStrokeWidth(selected);
   const orientation = d.orientation ?? "horizontal";
-  const fill = d.color?.fill ?? "#fafbff";
-  const headerFill = d.color?.fill ?? "#f0f3ff";
+  const fill = d.color?.fill ?? "#fbfdff";
+  const headerFill = d.color?.fill ?? "#eef6ff";
   if (orientation === "vertical") {
     return /* @__PURE__ */ jsxs(
       "div",
@@ -768,14 +798,17 @@ function LaneNode({ data, selected }) {
           borderRadius: 2,
           boxSizing: "border-box",
           background: fill,
+          boxShadow: resolveNodeShadow(selected),
           overflow: "hidden",
-          fontFamily: BPMN_THEME.fontFamily
+          fontFamily: BPMN_THEME.fontFamily,
+          transition: BPMN_THEME.transition
         },
         children: [
           /* @__PURE__ */ jsx(
             "div",
             {
               "aria-label": "lane-header",
+              className: "lane-drag-handle",
               style: {
                 width: HEADER_WIDTH2,
                 minWidth: HEADER_WIDTH2,
@@ -784,7 +817,8 @@ function LaneNode({ data, selected }) {
                 alignItems: "center",
                 justifyContent: "center",
                 background: headerFill,
-                padding: "6px 0"
+                padding: "6px 0",
+                cursor: "grab"
               },
               children: /* @__PURE__ */ jsx(
                 "span",
@@ -822,14 +856,17 @@ function LaneNode({ data, selected }) {
         borderRadius: 2,
         boxSizing: "border-box",
         background: fill,
+        boxShadow: resolveNodeShadow(selected),
         overflow: "hidden",
-        fontFamily: BPMN_THEME.fontFamily
+        fontFamily: BPMN_THEME.fontFamily,
+        transition: BPMN_THEME.transition
       },
       children: [
         /* @__PURE__ */ jsx(
           "div",
           {
             "aria-label": "lane-header",
+            className: "lane-drag-handle",
             style: {
               height: HEADER_HEIGHT2,
               minHeight: HEADER_HEIGHT2,
@@ -840,7 +877,8 @@ function LaneNode({ data, selected }) {
               background: headerFill,
               fontSize: BPMN_THEME.fontSize,
               fontWeight: 500,
-              color: BPMN_THEME.labelColor
+              color: BPMN_THEME.labelColor,
+              cursor: "grab"
             },
             children: d.label
           }
@@ -957,7 +995,7 @@ function DataObjectNode({ data, selected }) {
     `L ${W} ${FOLD}`
   ].join(" ");
   return /* @__PURE__ */ jsxs("div", { style: { width: W, height: H2, position: "relative" }, children: [
-    /* @__PURE__ */ jsxs("svg", { width: W, height: H2, style: { overflow: "visible", display: "block" }, children: [
+    /* @__PURE__ */ jsxs("svg", { width: W, height: H2, style: { overflow: "visible", display: "block", filter: resolveShapeFilter(selected) }, children: [
       /* @__PURE__ */ jsx("path", { d: path, fill, stroke, strokeWidth: sw }),
       /* @__PURE__ */ jsx("path", { d: foldPath2, fill: "none", stroke, strokeWidth: sw })
     ] }),
@@ -975,7 +1013,7 @@ function DataStoreNode({ data, selected }) {
   const sw = resolveStrokeWidth(selected);
   const fill = d.color?.fill ?? BPMN_THEME.fill;
   return /* @__PURE__ */ jsxs("div", { style: { width: DS_W, height: DS_H, position: "relative" }, children: [
-    /* @__PURE__ */ jsxs("svg", { width: DS_W, height: DS_H, style: { overflow: "visible", display: "block" }, children: [
+    /* @__PURE__ */ jsxs("svg", { width: DS_W, height: DS_H, style: { overflow: "visible", display: "block", filter: resolveShapeFilter(selected) }, children: [
       /* @__PURE__ */ jsx(
         "path",
         {
@@ -1021,7 +1059,7 @@ function DataObjectReferenceNode({ data, selected }) {
   const sw = resolveStrokeWidth(selected);
   const fill = d.color?.fill ?? BPMN_THEME.fill;
   return /* @__PURE__ */ jsxs("div", { style: { width: W2, height: H3, position: "relative" }, children: [
-    /* @__PURE__ */ jsxs("svg", { width: W2, height: H3, style: { overflow: "visible", display: "block" }, children: [
+    /* @__PURE__ */ jsxs("svg", { width: W2, height: H3, style: { overflow: "visible", display: "block", filter: resolveShapeFilter(selected) }, children: [
       /* @__PURE__ */ jsx("path", { d: documentPath(), fill, stroke, strokeWidth: sw }),
       /* @__PURE__ */ jsx("path", { d: foldPath(), fill: "none", stroke, strokeWidth: sw }),
       d.isCollection && collectionLines(stroke, sw)
@@ -1036,7 +1074,7 @@ function DataInputNode({ data, selected }) {
   const sw = resolveStrokeWidth(selected);
   const fill = d.color?.fill ?? BPMN_THEME.fill;
   return /* @__PURE__ */ jsxs("div", { style: { width: W2, height: H3, position: "relative" }, children: [
-    /* @__PURE__ */ jsxs("svg", { width: W2, height: H3, style: { overflow: "visible", display: "block" }, children: [
+    /* @__PURE__ */ jsxs("svg", { width: W2, height: H3, style: { overflow: "visible", display: "block", filter: resolveShapeFilter(selected) }, children: [
       /* @__PURE__ */ jsx("path", { d: documentPath(), fill, stroke, strokeWidth: sw }),
       /* @__PURE__ */ jsx("path", { d: foldPath(), fill: "none", stroke, strokeWidth: sw }),
       /* @__PURE__ */ jsx(
@@ -1060,7 +1098,7 @@ function DataOutputNode({ data, selected }) {
   const sw = resolveStrokeWidth(selected);
   const fill = d.color?.fill ?? BPMN_THEME.fill;
   return /* @__PURE__ */ jsxs("div", { style: { width: W2, height: H3, position: "relative" }, children: [
-    /* @__PURE__ */ jsxs("svg", { width: W2, height: H3, style: { overflow: "visible", display: "block" }, children: [
+    /* @__PURE__ */ jsxs("svg", { width: W2, height: H3, style: { overflow: "visible", display: "block", filter: resolveShapeFilter(selected) }, children: [
       /* @__PURE__ */ jsx("path", { d: documentPath(), fill, stroke, strokeWidth: sw }),
       /* @__PURE__ */ jsx("path", { d: foldPath(), fill: "none", stroke, strokeWidth: sw }),
       /* @__PURE__ */ jsx(
@@ -1088,7 +1126,7 @@ function DataStoreReferenceNode({ data, selected }) {
   const sw = resolveStrokeWidth(selected);
   const fill = d.color?.fill ?? BPMN_THEME.fill;
   return /* @__PURE__ */ jsxs("div", { style: { width: DS_W2, height: DS_H2, position: "relative" }, children: [
-    /* @__PURE__ */ jsxs("svg", { width: DS_W2, height: DS_H2, style: { overflow: "visible", display: "block" }, children: [
+    /* @__PURE__ */ jsxs("svg", { width: DS_W2, height: DS_H2, style: { overflow: "visible", display: "block", filter: resolveShapeFilter(selected) }, children: [
       /* @__PURE__ */ jsx(
         "path",
         {
@@ -1414,8 +1452,11 @@ var BPMN_NODE_TYPES = {
   ParallelGateway: GatewayNode,
   EventBasedGateway: GatewayNode,
   ComplexGateway: GatewayNode,
-  // Containers
+  // Containers — Transaction, EventSubProcess, AdHocSubProcess derive their visual variant from elementType
   SubProcess: SubProcessNode,
+  Transaction: SubProcessNode,
+  EventSubProcess: SubProcessNode,
+  AdHocSubProcess: SubProcessNode,
   Pool: PoolNode,
   Lane: LaneNode,
   // Artifacts
@@ -1439,5 +1480,5 @@ var BPMN_NODE_TYPES = {
 };
 
 export { AnnotationNode, BPMN_NODE_TYPES, BoundaryEventNode, CallChoreographyNode, CallConversationNode, ChoreographyTaskNode, ConversationNode, DataInputNode, DataObjectNode, DataObjectReferenceNode, DataOutputNode, DataStoreNode, DataStoreReferenceNode, EndEventNode, GatewayNode, GroupNode, IntermediateCatchEventNode, IntermediateThrowEventNode, LaneNode, PoolNode, StartEventNode, SubChoreographyNode, SubConversationNode, SubProcessNode, TaskNode };
-//# sourceMappingURL=chunk-NXMUX67A.js.map
-//# sourceMappingURL=chunk-NXMUX67A.js.map
+//# sourceMappingURL=chunk-H3YMTGFG.js.map
+//# sourceMappingURL=chunk-H3YMTGFG.js.map