@fluxo-dev/shell-workflow 26.2.4 → 26.2.6

package/index.esm.css

@@ -662,7 +662,7 @@ svg.react-flow__connectionline {
 .react-flow__edge.selected .react-flow__edge-path {
   stroke-width: 2.5px;
   stroke: #2563eb;
-  filter: drop-shadow(0 0 4px rgba(37, 99, 235, 0.4));
+  filter: drop-shadow(0 0 5px rgba(37, 99, 235, 0.45));
 }
 
 /* Hide attribution if proOptions doesn't work */
@@ -674,26 +674,40 @@ svg.react-flow__connectionline {
 .react-flow__connection-path {
   transition: stroke-width 0.2s ease;
   stroke: #2563eb;
-  stroke-width: 2px;
+  stroke-width: 2.5px;
+  stroke-dasharray: 6 4;
+}
+
+/* Smooth edge animations */
+.react-flow__edge-path {
+  transition: stroke 0.2s ease, stroke-width 0.2s ease, filter 0.2s ease;
 }
 
-/* Handle hover effects with smooth animation */
+.react-flow__edge:hover .react-flow__edge-path {
+  stroke-width: 3px;
+  filter: drop-shadow(0 0 3px rgba(0,0,0,0.18));
+}
+
+/* Handle hover effects */
 .react-flow__handle {
-  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .react-flow__handle:hover {
-  transform: scale(1.3);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
+  transform: scale(1.4);
+  box-shadow: 0 0 0 3px rgba(59,130,246,0.20), 0 4px 12px rgba(0,0,0,0.18) !important;
 }
 
 .react-flow__handle-connecting {
   background: #2563eb !important;
-  transform: scale(1.2);
+  transform: scale(1.4) !important;
+  box-shadow: 0 0 0 4px rgba(37,99,235,0.25) !important;
 }
 
 .react-flow__handle-valid {
   background: #10b981 !important;
+  box-shadow: 0 0 0 4px rgba(16,185,129,0.25) !important;
+  transform: scale(1.4) !important;
 }
 
 /* Clean minimap style */
@@ -707,15 +721,6 @@ svg.react-flow__connectionline {
   filter: brightness(1.02);
 }
 
-/* Smooth edge animations */
-.react-flow__edge-path {
-  transition: all 0.2s ease;
-}
-
-.react-flow__edge:hover .react-flow__edge-path {
-  stroke-width: 2.5px;
-}
-
 /* Controls styling */
 .react-flow__controls {
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
@@ -730,6 +735,69 @@ svg.react-flow__connectionline {
   transform: scale(1.05);
 }
 
+/* ── Debug Mode Animations ──────────────────────────────────────────────── */
+
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to   { transform: rotate(360deg); }
+}
+
+/* RUNNING — gradient border che scorre */
+@keyframes debug-gradient-slide {
+  0%   { background-position: 0% 50%, 0 0; }
+  100% { background-position: 300% 50%, 0 0; }
+}
+
+@keyframes debug-pulse-glow {
+  0%, 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0), 0 1px 4px rgba(0,0,0,0.08); }
+  50%       { box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15), 0 0 18px 4px rgba(59, 130, 246, 0.18); }
+}
+
+.debug-node-running {
+  border: 2px solid transparent !important;
+  border-left: 2px solid transparent !important;
+  background:
+    linear-gradient(white, white) padding-box,
+    linear-gradient(90deg, #3b82f6, #60a5fa, #93c5fd, #60a5fa, #3b82f6) border-box !important;
+  background-size: 300% 100%, 300% 100% !important;
+  animation:
+    debug-gradient-slide 1.2s linear infinite,
+    debug-pulse-glow 1.5s ease-in-out infinite;
+}
+
+/* SUCCESS — bordo verde con flash di ingresso */
+@keyframes debug-success-enter {
+  0%   { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6), 0 1px 4px rgba(0,0,0,0.08); }
+  40%  { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0.1), 0 0 16px 4px rgba(16, 185, 129, 0.3); }
+  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0), 0 2px 8px rgba(16, 185, 129, 0.15); }
+}
+
+.debug-node-success {
+  border: 2px solid #10b981 !important;
+  border-left: 3px solid #10b981 !important;
+  background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%) !important;
+  box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.2), 0 2px 8px rgba(16, 185, 129, 0.12) !important;
+  animation: debug-success-enter 0.6s ease-out forwards;
+}
+
+/* ERROR — bordo rosso con shake di ingresso */
+@keyframes debug-error-shake {
+  0%        { transform: translateX(0); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5); }
+  15%       { transform: translateX(-4px); }
+  30%       { transform: translateX(4px);  box-shadow: 0 0 0 5px rgba(239, 68, 68, 0.1); }
+  45%       { transform: translateX(-3px); }
+  60%       { transform: translateX(3px); }
+  75%       { transform: translateX(-1px); }
+  100%      { transform: translateX(0);    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0), 0 2px 8px rgba(239, 68, 68, 0.15); }
+}
+
+.debug-node-error {
+  border: 2px solid #ef4444 !important;
+  border-left: 3px solid #ef4444 !important;
+  background: linear-gradient(135deg, #ffffff 0%, #fff5f5 100%) !important;
+  box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.2), 0 2px 8px rgba(239, 68, 68, 0.12) !important;
+  animation: debug-error-shake 0.5s ease-out forwards;
+}
 
 /* Evidenziazione SEMPLICE per i riferimenti step output */