@arronqzy/abuilder 1.1.34 → 1.1.36

package/dist/styles.css

@@ -3853,6 +3853,10 @@ video {
   bottom: 0.375rem;
 }
 
+.bottom-3 {
+  bottom: 0.75rem;
+}
+
 .bottom-\[var\(--rv-ruler-size\)\] {
   bottom: var(--rv-ruler-size);
 }
@@ -3889,6 +3893,10 @@ video {
   right: 0px;
 }
 
+.right-1\.5 {
+  right: 0.375rem;
+}
+
 .right-2 {
   right: 0.5rem;
 }
@@ -3909,6 +3917,10 @@ video {
   top: 0.25rem;
 }
 
+.top-1\.5 {
+  top: 0.375rem;
+}
+
 .top-2 {
   top: 0.5rem;
 }
@@ -3917,6 +3929,10 @@ video {
   top: 1rem;
 }
 
+.top-\[calc\(100\%\+4px\)\] {
+  top: calc(100% + 4px);
+}
+
 .top-\[calc\(100\%\+6px\)\] {
   top: calc(100% + 6px);
 }
@@ -3929,6 +3945,10 @@ video {
   isolation: isolate;
 }
 
+.z-10 {
+  z-index: 10;
+}
+
 .z-20 {
   z-index: 20;
 }
@@ -3941,6 +3961,10 @@ video {
   z-index: 10000;
 }
 
+.z-\[10090\] {
+  z-index: 10090;
+}
+
 .z-\[10100\] {
   z-index: 10100;
 }
@@ -3953,6 +3977,14 @@ video {
   z-index: 10150;
 }
 
+.z-\[10200\] {
+  z-index: 10200;
+}
+
+.z-\[10300\] {
+  z-index: 10300;
+}
+
 .z-\[70\] {
   z-index: 70;
 }
@@ -4194,10 +4226,26 @@ video {
   height: 100%;
 }
 
+.h-px {
+  height: 1px;
+}
+
+.max-h-24 {
+  max-height: 6rem;
+}
+
 .max-h-28 {
   max-height: 7rem;
 }
 
+.max-h-32 {
+  max-height: 8rem;
+}
+
+.max-h-40 {
+  max-height: 10rem;
+}
+
 .max-h-44 {
   max-height: 11rem;
 }
@@ -4206,10 +4254,18 @@ video {
   max-height: 13rem;
 }
 
+.max-h-56 {
+  max-height: 14rem;
+}
+
 .max-h-\[160px\] {
   max-height: 160px;
 }
 
+.max-h-\[180px\] {
+  max-height: 180px;
+}
+
 .max-h-\[200px\] {
   max-height: 200px;
 }
@@ -4218,6 +4274,10 @@ video {
   max-height: 78vh;
 }
 
+.max-h-\[90vh\] {
+  max-height: 90vh;
+}
+
 .max-h-\[min\(78vh\2c 560px\)\] {
   max-height: min(78vh, 560px);
 }
@@ -4250,6 +4310,10 @@ video {
   min-height: 68px;
 }
 
+.min-h-\[min\(62vh\2c 640px\)\] {
+  min-height: min(62vh, 640px);
+}
+
 .min-h-full {
   min-height: 100%;
 }
@@ -4338,10 +4402,22 @@ video {
   width: 108px;
 }
 
+.w-\[148px\] {
+  width: 148px;
+}
+
+.w-\[168px\] {
+  width: 168px;
+}
+
 .w-\[220px\] {
   width: 220px;
 }
 
+.w-\[240px\] {
+  width: 240px;
+}
+
 .w-\[280px\] {
   width: 280px;
 }
@@ -4354,6 +4430,18 @@ video {
   width: min(94vw, 680px);
 }
 
+.w-\[min\(96vw\2c 1100px\)\] {
+  width: min(96vw, 1100px);
+}
+
+.w-\[min\(96vw\2c 960px\)\] {
+  width: min(96vw, 960px);
+}
+
+.w-\[var\(--radix-popover-trigger-width\)\] {
+  width: var(--radix-popover-trigger-width);
+}
+
 .w-\[var\(--rv-ruler-size\)\] {
   width: var(--rv-ruler-size);
 }
@@ -4390,10 +4478,18 @@ video {
   max-width: 140px;
 }
 
+.max-w-\[180px\] {
+  max-width: 180px;
+}
+
 .max-w-\[200px\] {
   max-width: 200px;
 }
 
+.max-w-\[260px\] {
+  max-width: 260px;
+}
+
 .max-w-\[360px\] {
   max-width: 360px;
 }
@@ -4426,6 +4522,10 @@ video {
   max-width: 90%;
 }
 
+.max-w-full {
+  max-width: 100%;
+}
+
 .max-w-lg {
   max-width: 32rem;
 }
@@ -4469,6 +4569,11 @@ video {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.rotate-180 {
+  --tw-rotate: 180deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .transform {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
@@ -4536,6 +4641,10 @@ video {
   resize: none;
 }
 
+.resize-y {
+  resize: vertical;
+}
+
 .resize {
   resize: both;
 }
@@ -4652,6 +4761,11 @@ video {
   gap: 1.25rem;
 }
 
+.gap-x-2 {
+  -moz-column-gap: 0.5rem;
+       column-gap: 0.5rem;
+}
+
 .gap-x-4 {
   -moz-column-gap: 1rem;
        column-gap: 1rem;
@@ -4888,10 +5002,18 @@ video {
   border-color: hsl(var(--border) / 0.8);
 }
 
+.border-destructive {
+  border-color: hsl(var(--destructive));
+}
+
 .border-destructive\/20 {
   border-color: hsl(var(--destructive) / 0.2);
 }
 
+.border-destructive\/30 {
+  border-color: hsl(var(--destructive) / 0.3);
+}
+
 .border-destructive\/40 {
   border-color: hsl(var(--destructive) / 0.4);
 }
@@ -4900,6 +5022,10 @@ video {
   border-color: hsl(var(--destructive) / 0.5);
 }
 
+.border-destructive\/60 {
+  border-color: hsl(var(--destructive) / 0.6);
+}
+
 .border-emerald-500\/30 {
   border-color: rgb(16 185 129 / 0.3);
 }
@@ -4917,10 +5043,18 @@ video {
   border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
 }
 
+.border-input {
+  border-color: hsl(var(--input));
+}
+
 .border-primary\/25 {
   border-color: hsl(var(--primary) / 0.25);
 }
 
+.border-primary\/30 {
+  border-color: hsl(var(--primary) / 0.3);
+}
+
 .border-primary\/40 {
   border-color: hsl(var(--primary) / 0.4);
 }
@@ -4941,6 +5075,10 @@ video {
   border-color: hsl(var(--primary) / 0.8);
 }
 
+.border-rose-500\/50 {
+  border-color: rgb(244 63 94 / 0.5);
+}
+
 .border-sky-500\/40 {
   border-color: rgb(14 165 233 / 0.4);
 }
@@ -5088,6 +5226,10 @@ video {
   background-color: hsl(var(--destructive) / 0.15);
 }
 
+.bg-destructive\/5 {
+  background-color: hsl(var(--destructive) / 0.05);
+}
+
 .bg-emerald-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));
@@ -5097,6 +5239,10 @@ video {
   background-color: rgb(16 185 129 / 0.1);
 }
 
+.bg-emerald-500\/15 {
+  background-color: rgb(16 185 129 / 0.15);
+}
+
 .bg-muted {
   background-color: hsl(var(--muted));
 }
@@ -5209,6 +5355,10 @@ video {
   background-color: hsl(var(--primary) / 0.9);
 }
 
+.bg-rose-500\/15 {
+  background-color: rgb(244 63 94 / 0.15);
+}
+
 .bg-secondary {
   background-color: hsl(var(--secondary));
 }
@@ -5355,6 +5505,10 @@ video {
   padding: 0px;
 }
 
+.p-0\.5 {
+  padding: 0.125rem;
+}
+
 .p-1 {
   padding: 0.25rem;
 }
@@ -5475,6 +5629,11 @@ video {
   padding-bottom: 1.75rem;
 }
 
+.py-8 {
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+}
+
 .py-px {
   padding-top: 1px;
   padding-bottom: 1px;
@@ -5524,6 +5683,10 @@ video {
   padding-left: 1.25rem;
 }
 
+.pr-0\.5 {
+  padding-right: 0.125rem;
+}
+
 .pr-1 {
   padding-right: 0.25rem;
 }
@@ -5694,6 +5857,11 @@ video {
   color: rgb(4 120 87 / var(--tw-text-opacity, 1));
 }
 
+.text-emerald-800 {
+  --tw-text-opacity: 1;
+  color: rgb(6 95 70 / var(--tw-text-opacity, 1));
+}
+
 .text-foreground {
   color: hsl(var(--foreground));
 }
@@ -5749,6 +5917,11 @@ video {
   color: hsl(var(--primary) / 0.8);
 }
 
+.text-rose-600 {
+  --tw-text-opacity: 1;
+  color: rgb(225 29 72 / var(--tw-text-opacity, 1));
+}
+
 .text-secondary-foreground {
   color: hsl(var(--secondary-foreground));
 }
@@ -5833,6 +6006,10 @@ video {
   opacity: 0.6;
 }
 
+.opacity-90 {
+  opacity: 0.9;
+}
+
 .shadow {
   --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
@@ -6178,6 +6355,10 @@ video {
   background-color: rgb(245 158 11 / 0.15);
 }
 
+.hover\:bg-destructive\/10:hover {
+  background-color: hsl(var(--destructive) / 0.1);
+}
+
 .hover\:bg-destructive\/90:hover {
   background-color: hsl(var(--destructive) / 0.9);
 }
@@ -6202,6 +6383,10 @@ video {
   background-color: hsl(var(--primary) / 0.9);
 }
 
+.hover\:bg-rose-500\/25:hover {
+  background-color: rgb(244 63 94 / 0.25);
+}
+
 .hover\:bg-secondary\/80:hover {
   background-color: hsl(var(--secondary) / 0.8);
 }
@@ -6362,11 +6547,21 @@ video {
   color: rgb(252 211 77 / var(--tw-text-opacity, 1));
 }
 
+.dark\:text-emerald-200:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(167 243 208 / var(--tw-text-opacity, 1));
+}
+
 .dark\:text-emerald-300:is(.dark *) {
   --tw-text-opacity: 1;
   color: rgb(110 231 183 / var(--tw-text-opacity, 1));
 }
 
+.dark\:text-rose-300:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(253 164 175 / var(--tw-text-opacity, 1));
+}
+
 .dark\:text-sky-300:is(.dark *) {
   --tw-text-opacity: 1;
   color: rgb(125 211 252 / var(--tw-text-opacity, 1));
@@ -6400,6 +6595,10 @@ video {
     display: flex;
   }
 
+  .sm\:max-w-\[1100px\] {
+    max-width: 1100px;
+  }
+
   .sm\:max-w-\[520px\] {
     max-width: 520px;
   }
@@ -6408,6 +6607,18 @@ video {
     max-width: 860px;
   }
 
+  .sm\:max-w-\[960px\] {
+    max-width: 960px;
+  }
+
+  .sm\:max-w-md {
+    max-width: 28rem;
+  }
+
+  .sm\:max-w-sm {
+    max-width: 24rem;
+  }
+
   .sm\:grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -6416,6 +6627,10 @@ video {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
 
+  .sm\:gap-0 {
+    gap: 0px;
+  }
+
   .sm\:space-x-0 > :not([hidden]) ~ :not([hidden]) {
     --tw-space-x-reverse: 0;
     margin-right: calc(0px * var(--tw-space-x-reverse));
@@ -7297,13 +7512,13 @@ svg.react-flow__connectionline {
 .bp-flow.react-flow,
 [data-workspace-region="blueprint"] .react-flow {
   --xy-background-color: transparent;
-  --xy-edge-stroke: #2563eb;
-  --xy-edge-stroke-width: 2.5;
-  --xy-edge-stroke-selected: #1d4ed8;
-  --xy-connectionline-stroke: #2563eb;
-  --xy-connectionline-stroke-width: 2.5;
-  --xy-handle-background-color: hsl(var(--primary));
-  --xy-handle-border-color: hsl(var(--background));
+  --xy-edge-stroke: #94a3b8;
+  --xy-edge-stroke-width: 1.75;
+  --xy-edge-stroke-selected: #64748b;
+  --xy-connectionline-stroke: #94a3b8;
+  --xy-connectionline-stroke-width: 1.75;
+  --xy-handle-background-color: #ffffff;
+  --xy-handle-border-color: #94a3b8;
   background-color: transparent;
 }
 
@@ -7359,16 +7574,16 @@ svg.react-flow__connectionline {
 [data-workspace-region="blueprint"] .react-flow__edges path.react-flow__edge-path,
 [data-workspace-region="blueprint"] .react-flow__edges path.bp-edge-visible {
   fill: none !important;
-  stroke: #2563eb !important;
-  stroke-width: 2.5px !important;
+  stroke: #94a3b8 !important;
+  stroke-width: 1.75px !important;
   opacity: 1 !important;
 }
 
 .bp-canvas .react-flow__edge.selected path.react-flow__edge-path,
 .bp-flow .react-flow__edge.selected path.react-flow__edge-path,
 [data-workspace-region="blueprint"] .react-flow__edge.selected path.react-flow__edge-path {
-  stroke: #1d4ed8 !important;
-  stroke-width: 3px !important;
+  stroke: #64748b !important;
+  stroke-width: 2.25px !important;
 }
 
 .bp-canvas .react-flow__edge.bp-edge--signal-true path.react-flow__edge-path,
@@ -7416,16 +7631,16 @@ svg.react-flow__connectionline {
 .bp-canvas .react-flow__arrowhead polyline,
 .bp-flow .react-flow__arrowhead polyline,
 [data-workspace-region="blueprint"] .react-flow__arrowhead polyline {
-  stroke: #2563eb;
-  fill: #2563eb;
+  stroke: #94a3b8;
+  fill: #94a3b8;
 }
 
 .bp-canvas .react-flow__connection-path,
 .bp-flow .react-flow__connection-path,
 [data-workspace-region="blueprint"] .react-flow__connection-path {
   fill: none !important;
-  stroke: #2563eb !important;
-  stroke-width: 2.5px !important;
+  stroke: #94a3b8 !important;
+  stroke-width: 1.75px !important;
 }
 
 .bp-canvas .react-flow__edge-interaction,
@@ -7454,96 +7669,117 @@ svg.react-flow__connectionline {
   padding: 0;
 }
 
-/* 连接点：禁止 transform，避免覆盖 React Flow 的 translate(-50%, -50%) 定位 */
+/* 以卡片壳为 handle 定位基准，避免挂到外层导致左右/垂直偏移 */
+
+.bp-node {
+  position: relative;
+  display: block;
+  width: max-content;
+  min-height: 1px;
+}
+
+/* 连接点：显式锚定左右中线（勿覆盖 transform 以外的 RF 行为） */
 
 .bp-canvas .react-flow__handle.bp-flow-handle,
 .bp-flow .react-flow__handle.bp-flow-handle,
 [data-workspace-region="blueprint"] .react-flow__handle.bp-flow-handle {
+  position: absolute !important;
   z-index: 3;
-  width: 10px;
-  height: 10px;
-  min-width: 10px;
-  min-height: 10px;
-  border: 2px solid hsl(var(--background)) !important;
+  width: 8px;
+  height: 8px;
+  min-width: 8px;
+  min-height: 8px;
+  border: 1.5px solid hsl(var(--card)) !important;
   border-radius: 9999px;
-  background-color: hsl(var(--foreground) / 0.42) !important;
+  background-color: #ffffff !important;
+  box-shadow: 0 0 0 1px rgb(148 163 184 / 0.55);
+  pointer-events: all !important;
   transition:
     background-color 0.15s ease,
     border-color 0.15s ease,
     box-shadow 0.15s ease;
 }
 
+.bp-node > .react-flow__handle.react-flow__handle-left,
+.bp-node > .react-flow__handle[data-handlepos="left"] {
+  top: 50%;
+  left: 0;
+  right: auto;
+  bottom: auto;
+  transform: translate(-50%, -50%);
+}
+
+.bp-node > .react-flow__handle.react-flow__handle-right,
+.bp-node > .react-flow__handle[data-handlepos="right"] {
+  top: 50%;
+  right: 0;
+  left: auto;
+  bottom: auto;
+  transform: translate(50%, -50%);
+}
+
 .bp-canvas .react-flow__handle.bp-flow-handle:hover,
 .bp-flow .react-flow__handle.bp-flow-handle:hover,
 [data-workspace-region="blueprint"] .react-flow__handle.bp-flow-handle:hover {
-  background-color: hsl(var(--primary)) !important;
-  border-color: hsl(var(--background)) !important;
-  box-shadow: 0 0 0 3px hsl(var(--primary) / 0.28);
+  background-color: #ffffff !important;
+  border-color: hsl(var(--primary)) !important;
+  box-shadow: 0 0 0 3px hsl(var(--primary) / 0.22);
 }
 
 .bp-canvas .react-flow__handle.bp-flow-handle--target,
 .bp-flow .react-flow__handle.bp-flow-handle--target,
 [data-workspace-region="blueprint"] .react-flow__handle.bp-flow-handle--target {
-  background-color: hsl(var(--foreground) / 0.48) !important;
+  background-color: #ffffff !important;
 }
 
 .bp-canvas .react-flow__handle.bp-flow-handle--source,
 .bp-flow .react-flow__handle.bp-flow-handle--source,
 [data-workspace-region="blueprint"] .react-flow__handle.bp-flow-handle--source {
-  background-color: hsl(var(--primary) / 0.72) !important;
+  background-color: #ffffff !important;
 }
 
 .bp-node--selected .bp-flow-handle {
-  border-color: hsl(var(--card)) !important;
-  box-shadow: 0 0 0 2px hsl(var(--primary) / 0.35);
-}
-
-.bp-node--selected .bp-flow-handle--target {
-  background-color: hsl(var(--foreground) / 0.55) !important;
+  border-color: hsl(var(--primary) / 0.55) !important;
+  box-shadow: 0 0 0 2px hsl(var(--primary) / 0.2);
 }
 
+.bp-node--selected .bp-flow-handle--target,
 .bp-node--selected .bp-flow-handle--source {
-  background-color: hsl(var(--primary)) !important;
+  background-color: #ffffff !important;
 }
 
 .bp-node--execution-true .bp-node-card {
-  border-color: rgb(22 163 74 / 0.65);
+  border-color: rgb(22 163 74 / 0.55);
   box-shadow:
-    0 0 0 1px rgb(22 163 74 / 0.35),
-    0 4px 14px rgb(22 163 74 / 0.18);
+    0 0 0 1px rgb(22 163 74 / 0.28),
+    0 8px 24px rgb(22 163 74 / 0.14);
 }
 
 .bp-node--execution-true .bp-flow-handle {
-  border-color: hsl(var(--card));
-  box-shadow: 0 0 0 2px rgb(22 163 74 / 0.45);
-}
-
-.bp-node--execution-true .bp-flow-handle--source {
-  background-color: #16a34a !important;
+  border-color: rgb(22 163 74 / 0.7) !important;
+  box-shadow: 0 0 0 2px rgb(22 163 74 / 0.28);
 }
 
+.bp-node--execution-true .bp-flow-handle--source,
 .bp-node--execution-true .bp-flow-handle--target {
-  background-color: rgb(22 163 74 / 0.55) !important;
+  background-color: #ffffff !important;
 }
 
 .bp-node--execution-false .bp-node-card {
-  border-color: hsl(var(--destructive) / 0.65);
+  border-color: hsl(var(--destructive) / 0.55);
   box-shadow:
-    0 0 0 1px hsl(var(--destructive) / 0.4),
-    0 4px 14px hsl(var(--destructive) / 0.16);
+    0 0 0 1px hsl(var(--destructive) / 0.3),
+    0 8px 24px hsl(var(--destructive) / 0.12);
 }
 
 .bp-node--execution-false .bp-flow-handle {
-  border-color: hsl(var(--card));
-  box-shadow: 0 0 0 2px hsl(var(--destructive) / 0.4);
-}
-
-.bp-node--execution-false .bp-flow-handle--source {
-  background-color: hsl(var(--destructive)) !important;
+  border-color: hsl(var(--destructive) / 0.65) !important;
+  box-shadow: 0 0 0 2px hsl(var(--destructive) / 0.25);
 }
 
+.bp-node--execution-false .bp-flow-handle--source,
 .bp-node--execution-false .bp-flow-handle--target {
-  background-color: hsl(var(--destructive) / 0.55) !important;
+  background-color: #ffffff !important;
 }
 
 /* 生命周期节点无输入口：隐藏任何左侧/目标连接点（含旧数据产生的幽灵 handle） */
@@ -7616,6 +7852,269 @@ svg.react-flow__connectionline {
   background: hsl(var(--border));
 }
 
+/* Soft UI 节点卡片（写入 CSS，避免 Tailwind content 未扫到 react-blueprint） */
+
+.bp-node-card {
+  width: 200px;
+  overflow: hidden;
+  border-radius: 1rem;
+  border: 1px solid hsl(var(--border) / 0.7);
+  background: hsl(var(--card));
+  color: hsl(var(--card-foreground));
+  box-shadow: 0 8px 24px rgb(15 23 42 / 0.08);
+  cursor: grab;
+  transition:
+    box-shadow 0.15s ease,
+    border-color 0.15s ease;
+}
+
+.bp-node-card:active {
+  cursor: grabbing;
+}
+
+.bp-node-card.bp-node-card--selected {
+  border-color: hsl(var(--primary) / 0.7);
+  box-shadow:
+    0 0 0 2px hsl(var(--primary) / 0.35),
+    0 10px 28px hsl(var(--primary) / 0.18);
+}
+
+.bp-node-card__body {
+  display: flex;
+  width: 100%;
+  align-items: flex-start;
+  padding: 10px 12px;
+  border: none;
+  background: transparent;
+  color: inherit;
+  text-align: left;
+  cursor: inherit;
+  outline: none;
+  transition: background-color 0.15s ease;
+}
+
+.bp-node-card__body:hover {
+  background: hsl(var(--accent) / 0.25);
+}
+
+.bp-node-card__body:focus-visible {
+  box-shadow: inset 0 0 0 1px hsl(var(--primary));
+}
+
+.bp-node-card__content {
+  min-width: 0;
+  flex: 1;
+}
+
+.bp-node-card__title-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 6px;
+}
+
+.bp-node-card__title {
+  min-width: 0;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 1.35;
+  color: hsl(var(--foreground));
+}
+
+.bp-node-card__meta,
+.bp-node-card__subtitle {
+  margin-top: 2px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  line-height: 1.3;
+  color: hsl(var(--muted-foreground));
+}
+
+.bp-node-card__meta {
+  font-size: 11px;
+}
+
+.bp-node-card__subtitle {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 10px;
+  opacity: 0.85;
+}
+
+.bp-node-card__badge {
+  flex-shrink: 0;
+  border-radius: 6px;
+  padding: 2px 6px;
+  font-size: 10px;
+  font-weight: 600;
+  line-height: 1;
+}
+
+.bp-node-icon {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  margin-top: 2px;
+  margin-right: 10px;
+  border-radius: 8px;
+}
+
+.bp-node-icon svg {
+  width: 14px;
+  height: 14px;
+}
+
+.bp-node-icon--blueprint {
+  background: hsl(var(--primary) / 0.14);
+  color: hsl(var(--primary));
+}
+
+.bp-node-icon--view {
+  background: rgb(100 116 139 / 0.18);
+  color: rgb(71 85 105);
+}
+
+.bp-node-icon--logic {
+  background: rgb(14 165 233 / 0.15);
+  color: rgb(2 132 199);
+}
+
+.bp-node-icon--and {
+  background: rgb(99 102 241 / 0.15);
+  color: rgb(79 70 229);
+}
+
+.bp-node-icon--lifecycle {
+  background: rgb(245 158 11 / 0.15);
+  color: rgb(217 119 6);
+}
+
+.bp-node-icon--event {
+  background: rgb(217 70 239 / 0.15);
+  color: rgb(192 38 211);
+}
+
+.bp-node-icon--fetch {
+  background: rgb(139 92 246 / 0.15);
+  color: rgb(124 58 237);
+}
+
+.bp-node-icon--json {
+  background: rgb(20 184 166 / 0.15);
+  color: rgb(13 148 136);
+}
+
+.bp-node-icon--storage {
+  background: rgb(16 185 129 / 0.15);
+  color: rgb(5 150 105);
+}
+
+.bp-node-icon--clock {
+  background: rgb(244 63 94 / 0.15);
+  color: rgb(225 29 72);
+}
+
+.bp-node-card__badge--blueprint {
+  background: hsl(var(--primary) / 0.1);
+  color: hsl(var(--primary));
+}
+
+.bp-node-card__badge--view {
+  background: rgb(100 116 139 / 0.12);
+  color: rgb(51 65 85);
+}
+
+.bp-node-card__badge--logic {
+  background: rgb(14 165 233 / 0.1);
+  color: rgb(3 105 161);
+}
+
+.bp-node-card__badge--and {
+  background: rgb(99 102 241 / 0.1);
+  color: rgb(67 56 202);
+}
+
+.bp-node-card__badge--lifecycle {
+  background: rgb(245 158 11 / 0.1);
+  color: rgb(180 83 9);
+}
+
+.bp-node-card__badge--event {
+  background: rgb(217 70 239 / 0.1);
+  color: rgb(162 28 175);
+}
+
+.bp-node-card__badge--fetch {
+  background: rgb(139 92 246 / 0.1);
+  color: rgb(109 40 217);
+}
+
+.bp-node-card__badge--json {
+  background: rgb(20 184 166 / 0.1);
+  color: rgb(15 118 110);
+}
+
+.bp-node-card__badge--storage {
+  background: rgb(16 185 129 / 0.1);
+  color: rgb(4 120 87);
+}
+
+.bp-node-card__badge--clock {
+  background: rgb(244 63 94 / 0.1);
+  color: rgb(190 18 60);
+}
+
+.dark .bp-node-icon--logic,
+:root.dark .bp-node-icon--logic {
+  color: rgb(125 211 252);
+}
+
+.dark .bp-node-icon--view,
+:root.dark .bp-node-icon--view {
+  color: rgb(203 213 225);
+}
+
+.dark .bp-node-icon--and,
+:root.dark .bp-node-icon--and {
+  color: rgb(165 180 252);
+}
+
+.dark .bp-node-icon--lifecycle,
+:root.dark .bp-node-icon--lifecycle {
+  color: rgb(252 211 77);
+}
+
+.dark .bp-node-icon--event,
+:root.dark .bp-node-icon--event {
+  color: rgb(240 171 252);
+}
+
+.dark .bp-node-icon--fetch,
+:root.dark .bp-node-icon--fetch {
+  color: rgb(196 181 253);
+}
+
+.dark .bp-node-icon--json,
+:root.dark .bp-node-icon--json {
+  color: rgb(94 234 212);
+}
+
+.dark .bp-node-icon--storage,
+:root.dark .bp-node-icon--storage {
+  color: rgb(110 231 183);
+}
+
+.dark .bp-node-icon--clock,
+:root.dark .bp-node-icon--clock {
+  color: rgb(253 164 175);
+}
+
 /* 宿主应用根节点建议设置 height:100%，与 #app 配合占满视口 */
 
 *,