@aranzatech/diagrams-bpmn 0.1.3 → 0.2.1

package/dist/nodes/index.cjs

@@ -46,13 +46,19 @@ function BpmnHandles({ variant = "all" }) {
 // src/nodes/shared/theme.ts
 var BPMN_THEME = {
   fill: "#ffffff",
-  stroke: "#404040",
-  strokeSelected: "#1a56db",
+  fillSoft: "#f8fbff",
+  fillSubtle: "#eef6ff",
+  stroke: "#334155",
+  strokeSelected: "#2563eb",
   strokeWidth: 1.5,
   strokeWidthSelected: 2.5,
   fontFamily: "Inter, system-ui, sans-serif",
   fontSize: 11,
-  labelColor: "#1a1a1a"};
+  labelColor: "#0f172a",
+  shadow: "0 4px 12px rgba(15, 23, 42, 0.08)",
+  shadowSelected: "0 0 0 4px rgba(37, 99, 235, 0.14), 0 8px 18px rgba(15, 23, 42, 0.12)",
+  transition: "box-shadow 140ms ease, filter 140ms ease, transform 140ms ease"
+};
 function resolveStroke(selected, override) {
   if (selected) return BPMN_THEME.strokeSelected;
   return override ?? BPMN_THEME.stroke;
@@ -60,6 +66,12 @@ function resolveStroke(selected, override) {
 function resolveStrokeWidth(selected) {
   return selected ? BPMN_THEME.strokeWidthSelected : BPMN_THEME.strokeWidth;
 }
+function resolveShapeFilter(selected) {
+  return selected ? "drop-shadow(0 0 0 rgba(37,99,235,0.2)) drop-shadow(0 8px 14px rgba(15,23,42,0.12))" : "drop-shadow(0 4px 10px rgba(15,23,42,0.08))";
+}
+function resolveNodeShadow(selected) {
+  return selected ? BPMN_THEME.shadowSelected : BPMN_THEME.shadow;
+}
 var EXTERNAL_STYLE = {
   position: "absolute",
   top: "100%",
@@ -212,7 +224,7 @@ function StartEventNode({ data, selected }) {
   const trigger = d.trigger ?? "none";
   const dashArray = d.isNonInterrupting ? "4 2" : void 0;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { width: SIZE, height: SIZE, position: "relative" }, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: SIZE, height: SIZE, style: { overflow: "visible", display: "block" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: SIZE, height: SIZE, style: { overflow: "visible", display: "block", filter: resolveShapeFilter(selected) }, children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         "circle",
         {
@@ -241,7 +253,7 @@ function EndEventNode({ data, selected }) {
   const fill = d.color?.fill ?? BPMN_THEME.fill;
   const trigger = d.trigger ?? "none";
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { width: SIZE2, height: SIZE2, position: "relative" }, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: SIZE2, height: SIZE2, style: { overflow: "visible", display: "block" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: SIZE2, height: SIZE2, style: { overflow: "visible", display: "block", filter: resolveShapeFilter(selected) }, children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         "circle",
         {
@@ -269,9 +281,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__ */ jsxRuntime.jsxs("div", { style: { width: SIZE3, height: SIZE3, position: "relative" }, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: SIZE3, height: SIZE3, style: { overflow: "visible", display: "block" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: SIZE3, height: SIZE3, style: { overflow: "visible", display: "block", filter: resolveShapeFilter(selected) }, children: [
       /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: CX3, cy: CX3, r: R_OUTER, fill, stroke, strokeWidth: sw }),
       /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: CX3, cy: CX3, r: R_INNER, fill: "none", stroke, strokeWidth: sw }),
       /* @__PURE__ */ jsxRuntime.jsx(EventMarker, { cx: CX3, cy: CX3, trigger, filled: false, stroke, bg: fill, r: ICON_R })
@@ -285,9 +297,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__ */ jsxRuntime.jsxs("div", { style: { width: SIZE3, height: SIZE3, position: "relative" }, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: SIZE3, height: SIZE3, style: { overflow: "visible", display: "block" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: SIZE3, height: SIZE3, style: { overflow: "visible", display: "block", filter: resolveShapeFilter(selected) }, children: [
       /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: CX3, cy: CX3, r: R_OUTER, fill, stroke, strokeWidth: sw }),
       /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: CX3, cy: CX3, r: R_INNER, fill: stroke, stroke, strokeWidth: sw }),
       /* @__PURE__ */ jsxRuntime.jsx(EventMarker, { cx: CX3, cy: CX3, trigger, filled: true, stroke: fill, bg: stroke, r: ICON_R })
@@ -301,10 +313,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__ */ jsxRuntime.jsxs("div", { style: { width: SIZE3, height: SIZE3, position: "relative" }, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: SIZE3, height: SIZE3, style: { overflow: "visible", display: "block" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: SIZE3, height: SIZE3, style: { overflow: "visible", display: "block", filter: resolveShapeFilter(selected) }, children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         "circle",
         {
@@ -339,6 +351,11 @@ function TaskIcon({ type, size = 14, color = "#404040" }) {
   const s = size;
   const c = color;
   switch (type) {
+    case "Task":
+      return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: s, height: s, viewBox: "0 0 16 16", fill: "none", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "3", y: "3", width: "10", height: "10", rx: "1.5", stroke: c, strokeWidth: "1.5" }),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("svg", { width: s, height: s, viewBox: "0 0 16 16", fill: "none", children: [
         /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "8", cy: "5", r: "3", stroke: c, strokeWidth: "1.5" }),
@@ -481,20 +498,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__ */ jsxRuntime.jsx("div", { style: { position: "absolute", top: 5, left: 5 }, children: /* @__PURE__ */ jsxRuntime.jsx(TaskIcon, { type: d.elementType, size: 14, color: stroke }) }),
+        d.elementType && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { position: "absolute", top: 5, left: 5 }, children: /* @__PURE__ */ jsxRuntime.jsx(TaskIcon, { type: d.elementType, size: 14, color: stroke }) }),
         /* @__PURE__ */ jsxRuntime.jsx(BpmnLabel, { style: { width: "100%" }, children: d.label ?? d.elementType }),
         d.priority && /* @__PURE__ */ jsxRuntime.jsx(
           "div",
@@ -572,7 +591,7 @@ function GatewayNode({ data, selected }) {
   const stroke = resolveStroke(selected, d.color?.stroke);
   const sw = resolveStrokeWidth(selected);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { width: SIZE4, height: SIZE4, position: "relative" }, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: SIZE4, height: SIZE4, style: { overflow: "visible", display: "block" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: SIZE4, height: SIZE4, style: { overflow: "visible", display: "block", filter: resolveShapeFilter(selected) }, children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         "polygon",
         {
@@ -588,11 +607,24 @@ function GatewayNode({ data, selected }) {
     /* @__PURE__ */ jsxRuntime.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";
@@ -602,12 +634,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__ */ jsxRuntime.jsx(
@@ -661,8 +695,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__ */ jsxRuntime.jsxs(
       "div",
@@ -676,14 +710,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__ */ jsxRuntime.jsx(
             "div",
             {
               "aria-label": "pool-header",
+              className: "pool-drag-handle",
               style: {
                 height: HEADER_HEIGHT,
                 minHeight: HEADER_HEIGHT,
@@ -692,7 +729,8 @@ function PoolNode({ data, selected }) {
                 alignItems: "center",
                 justifyContent: "center",
                 background: headerFill,
-                padding: "0 8px"
+                padding: "0 8px",
+                cursor: "grab"
               },
               children: /* @__PURE__ */ jsxRuntime.jsx(
                 "span",
@@ -726,14 +764,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__ */ jsxRuntime.jsx(
           "div",
           {
             "aria-label": "pool-header",
+            className: "pool-drag-handle",
             style: {
               width: HEADER_WIDTH,
               minWidth: HEADER_WIDTH,
@@ -741,7 +782,8 @@ function PoolNode({ data, selected }) {
               display: "flex",
               alignItems: "center",
               justifyContent: "center",
-              background: headerFill
+              background: headerFill,
+              cursor: "grab"
             },
             children: /* @__PURE__ */ jsxRuntime.jsx(
               "span",
@@ -774,8 +816,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__ */ jsxRuntime.jsxs(
       "div",
@@ -788,14 +830,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__ */ jsxRuntime.jsx(
             "div",
             {
               "aria-label": "lane-header",
+              className: "lane-drag-handle",
               style: {
                 width: HEADER_WIDTH2,
                 minWidth: HEADER_WIDTH2,
@@ -804,7 +849,8 @@ function LaneNode({ data, selected }) {
                 alignItems: "center",
                 justifyContent: "center",
                 background: headerFill,
-                padding: "6px 0"
+                padding: "6px 0",
+                cursor: "grab"
               },
               children: /* @__PURE__ */ jsxRuntime.jsx(
                 "span",
@@ -842,14 +888,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__ */ jsxRuntime.jsx(
           "div",
           {
             "aria-label": "lane-header",
+            className: "lane-drag-handle",
             style: {
               height: HEADER_HEIGHT2,
               minHeight: HEADER_HEIGHT2,
@@ -860,7 +909,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
           }
@@ -977,7 +1027,7 @@ function DataObjectNode({ data, selected }) {
     `L ${W} ${FOLD}`
   ].join(" ");
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { width: W, height: H2, position: "relative" }, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: W, height: H2, style: { overflow: "visible", display: "block" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: W, height: H2, style: { overflow: "visible", display: "block", filter: resolveShapeFilter(selected) }, children: [
       /* @__PURE__ */ jsxRuntime.jsx("path", { d: path, fill, stroke, strokeWidth: sw }),
       /* @__PURE__ */ jsxRuntime.jsx("path", { d: foldPath2, fill: "none", stroke, strokeWidth: sw })
     ] }),
@@ -995,7 +1045,7 @@ function DataStoreNode({ data, selected }) {
   const sw = resolveStrokeWidth(selected);
   const fill = d.color?.fill ?? BPMN_THEME.fill;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { width: DS_W, height: DS_H, position: "relative" }, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: DS_W, height: DS_H, style: { overflow: "visible", display: "block" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: DS_W, height: DS_H, style: { overflow: "visible", display: "block", filter: resolveShapeFilter(selected) }, children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         "path",
         {
@@ -1041,7 +1091,7 @@ function DataObjectReferenceNode({ data, selected }) {
   const sw = resolveStrokeWidth(selected);
   const fill = d.color?.fill ?? BPMN_THEME.fill;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { width: W2, height: H3, position: "relative" }, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: W2, height: H3, style: { overflow: "visible", display: "block" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: W2, height: H3, style: { overflow: "visible", display: "block", filter: resolveShapeFilter(selected) }, children: [
       /* @__PURE__ */ jsxRuntime.jsx("path", { d: documentPath(), fill, stroke, strokeWidth: sw }),
       /* @__PURE__ */ jsxRuntime.jsx("path", { d: foldPath(), fill: "none", stroke, strokeWidth: sw }),
       d.isCollection && collectionLines(stroke, sw)
@@ -1056,7 +1106,7 @@ function DataInputNode({ data, selected }) {
   const sw = resolveStrokeWidth(selected);
   const fill = d.color?.fill ?? BPMN_THEME.fill;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { width: W2, height: H3, position: "relative" }, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: W2, height: H3, style: { overflow: "visible", display: "block" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: W2, height: H3, style: { overflow: "visible", display: "block", filter: resolveShapeFilter(selected) }, children: [
       /* @__PURE__ */ jsxRuntime.jsx("path", { d: documentPath(), fill, stroke, strokeWidth: sw }),
       /* @__PURE__ */ jsxRuntime.jsx("path", { d: foldPath(), fill: "none", stroke, strokeWidth: sw }),
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -1080,7 +1130,7 @@ function DataOutputNode({ data, selected }) {
   const sw = resolveStrokeWidth(selected);
   const fill = d.color?.fill ?? BPMN_THEME.fill;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { width: W2, height: H3, position: "relative" }, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: W2, height: H3, style: { overflow: "visible", display: "block" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: W2, height: H3, style: { overflow: "visible", display: "block", filter: resolveShapeFilter(selected) }, children: [
       /* @__PURE__ */ jsxRuntime.jsx("path", { d: documentPath(), fill, stroke, strokeWidth: sw }),
       /* @__PURE__ */ jsxRuntime.jsx("path", { d: foldPath(), fill: "none", stroke, strokeWidth: sw }),
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -1108,7 +1158,7 @@ function DataStoreReferenceNode({ data, selected }) {
   const sw = resolveStrokeWidth(selected);
   const fill = d.color?.fill ?? BPMN_THEME.fill;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { width: DS_W2, height: DS_H2, position: "relative" }, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: DS_W2, height: DS_H2, style: { overflow: "visible", display: "block" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: DS_W2, height: DS_H2, style: { overflow: "visible", display: "block", filter: resolveShapeFilter(selected) }, children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         "path",
         {
@@ -1434,8 +1484,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