@aranzatech/diagrams-bpmn 0.2.0 → 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",
         {
@@ -615,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(
@@ -674,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",
@@ -689,8 +710,10 @@ 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(
@@ -741,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,
@@ -790,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",
@@ -804,8 +830,10 @@ 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(
@@ -860,8 +888,10 @@ 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(
@@ -997,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 })
     ] }),
@@ -1015,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",
         {
@@ -1061,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)
@@ -1076,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(
@@ -1100,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(
@@ -1128,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",
         {