@oomol-lab/open-flow 0.1.0-beta.75 → 0.1.0-beta.76

package/dist/browser/preview.css

@@ -91,109 +91,90 @@
 }
 
 .open-flow-theme {
-  color-scheme: light;
-  --open-flow-background: #fdfdfd;
-  --open-flow-foreground: #242424;
-  --open-flow-card: #fff;
-  --open-flow-node-surface: #f6f6f6;
-  --open-flow-node-content: #fff;
-  --open-flow-node-running-beam: oklch(72.3% .219 149.579);
-  --open-flow-comment-surface: #f3eddc;
-  --open-flow-comment-content: var(--open-flow-comment-surface);
+  --_open-flow-theme: light;
+  color-scheme: var(--_open-flow-theme);
+  --_open-flow-background: var(--open-flow-background, light-dark(#fdfdfd, #1c1c1c));
+  --_open-flow-foreground: var(--open-flow-foreground, light-dark(#242424, #eee));
+  --_open-flow-card: var(--open-flow-card, light-dark(#fefefe, #242424));
+  --_open-flow-node-surface: var(--open-flow-node-surface, light-dark(#f6f6f6, #2b2b2b));
+  --_open-flow-node-content: var(--open-flow-node-content, light-dark(#fff, #242424));
+  --_open-flow-node-running-beam: var(--open-flow-node-running-beam, oklch(72.3% .219 149.579));
+  --_open-flow-comment-surface: var(--open-flow-comment-surface, light-dark(#f3eddc, #403727));
+  --_open-flow-comment-content: var(--open-flow-comment-content, light-dark(var(--_open-flow-comment-surface), #2b261d));
 }
 
 @supports (color: color-mix(in lab, red, red)) {
   .open-flow-theme {
-    --open-flow-comment-content: color-mix(in srgb, var(--open-flow-comment-surface) 55%, var(--open-flow-node-content));
+    --_open-flow-comment-content: var(--open-flow-comment-content, light-dark(color-mix(in srgb, var(--_open-flow-comment-surface) 55%, var(--_open-flow-node-content)), #2b261d));
   }
 }
 
 .open-flow-theme {
-  --open-flow-comment-border: #e3d8ba;
-  --open-flow-card-foreground: #242424;
-  --open-flow-popover: #fff;
-  --open-flow-popover-foreground: #242424;
-  --open-flow-primary: #242424;
-  --open-flow-primary-foreground: #fafafa;
-  --open-flow-secondary: #eee;
-  --open-flow-secondary-foreground: #242424;
-  --open-flow-muted: #f6f6f6;
-  --open-flow-muted-foreground: #6b6b6b;
-  --open-flow-accent: #e7e7e7;
-  --open-flow-accent-foreground: #242424;
-  --open-flow-destructive: #dc2626;
-  --open-flow-border: #dedede;
-  --open-flow-input: #d2d2d2;
-  --open-flow-ring: #777;
-  --open-flow-radius: 10px;
+  --_open-flow-comment-border: var(--open-flow-comment-border, light-dark(#e3d8ba, #5c4e36));
+  --_open-flow-card-foreground: var(--open-flow-card-foreground, light-dark(#242424, #eee));
+  --_open-flow-popover: var(--open-flow-popover, light-dark(#fefefe, #2b2b2b));
+  --_open-flow-popover-foreground: var(--open-flow-popover-foreground, light-dark(#242424, #eee));
+  --_open-flow-primary: var(--open-flow-primary, light-dark(#242424, #eee));
+  --_open-flow-primary-foreground: var(--open-flow-primary-foreground, light-dark(#fafafa, #242424));
+  --_open-flow-secondary: var(--open-flow-secondary, light-dark(#eee, #2b2b2b));
+  --_open-flow-secondary-foreground: var(--open-flow-secondary-foreground, light-dark(#242424, #eee));
+  --_open-flow-muted: var(--open-flow-muted, light-dark(#f6f6f6, #242424));
+  --_open-flow-muted-foreground: var(--open-flow-muted-foreground, light-dark(#6b6b6b, #ababab));
+  --_open-flow-accent: var(--open-flow-accent, light-dark(#e7e7e7, #303030));
+  --_open-flow-accent-foreground: var(--open-flow-accent-foreground, light-dark(#242424, #eee));
+  --_open-flow-destructive: var(--open-flow-destructive, light-dark(#dc2626, #f87171));
+  --_open-flow-border: var(--open-flow-border, light-dark(#dedede, #3c3c3c));
+  --_open-flow-input: var(--open-flow-input, light-dark(#d2d2d2, #484848));
+  --_open-flow-ring: var(--open-flow-ring, light-dark(#777, #b4b4b4));
+  --_open-flow-radius: var(--open-flow-radius, 10px);
+}
+
+.open-flow-theme[data-theme="dark"] {
+  --_open-flow-theme: dark;
+}
+
+.open-flow-theme, .open-flow-canvas-root :is(.react-flow__controls, [data-canvas-control-scope]) {
   --ui-code-gutter-background: light-dark(#fff, #333338);
   --ui-code-gutter-border: light-dark(#ddd, #333338);
-  --ui-background: var(--open-flow-background);
-  --ui-foreground: var(--open-flow-foreground);
-  --ui-card: var(--open-flow-card);
-  --ui-card-foreground: var(--open-flow-card-foreground);
-  --ui-popover: var(--open-flow-popover);
-  --ui-popover-foreground: var(--open-flow-popover-foreground);
-  --ui-primary: var(--open-flow-primary);
-  --ui-primary-foreground: var(--open-flow-primary-foreground);
-  --ui-secondary: var(--open-flow-secondary);
-  --ui-secondary-foreground: var(--open-flow-secondary-foreground);
-  --ui-muted: var(--open-flow-muted);
-  --ui-muted-foreground: var(--open-flow-muted-foreground);
-  --ui-accent: var(--open-flow-accent);
-  --ui-accent-foreground: var(--open-flow-accent-foreground);
-  --ui-destructive: var(--open-flow-destructive);
+  --ui-background: var(--_open-flow-background);
+  --ui-foreground: var(--_open-flow-foreground);
+  --ui-card: var(--_open-flow-card);
+  --ui-card-foreground: var(--_open-flow-card-foreground);
+  --ui-popover: var(--_open-flow-popover);
+  --ui-popover-foreground: var(--_open-flow-popover-foreground);
+  --ui-primary: var(--_open-flow-primary);
+  --ui-primary-foreground: var(--_open-flow-primary-foreground);
+  --ui-secondary: var(--_open-flow-secondary);
+  --ui-secondary-foreground: var(--_open-flow-secondary-foreground);
+  --ui-muted: var(--_open-flow-muted);
+  --ui-muted-foreground: var(--_open-flow-muted-foreground);
+  --ui-accent: var(--_open-flow-accent);
+  --ui-accent-foreground: var(--_open-flow-accent-foreground);
+  --ui-destructive: var(--_open-flow-destructive);
   --ui-danger-control-background-default: var(--ui-destructive);
 }
 
 @supports (color: color-mix(in lab, red, red)) {
-  .open-flow-theme {
+  .open-flow-theme, .open-flow-canvas-root :is(.react-flow__controls, [data-canvas-control-scope]) {
     --ui-danger-control-background-default: color-mix(in srgb, var(--ui-destructive) 3%, var(--ui-control-background, var(--ui-background)));
   }
 }
 
-.open-flow-theme {
+.open-flow-theme, .open-flow-canvas-root :is(.react-flow__controls, [data-canvas-control-scope]) {
   --ui-danger-control-background-hover: var(--ui-destructive);
 }
 
 @supports (color: color-mix(in lab, red, red)) {
-  .open-flow-theme {
+  .open-flow-theme, .open-flow-canvas-root :is(.react-flow__controls, [data-canvas-control-scope]) {
     --ui-danger-control-background-hover: color-mix(in srgb, var(--ui-destructive) 8%, var(--ui-control-background, var(--ui-background)));
   }
 }
 
-.open-flow-theme {
-  --ui-border: var(--open-flow-border);
-  --ui-input: var(--open-flow-input);
-  --ui-ring: var(--open-flow-ring);
-  --ui-radius: var(--open-flow-radius);
-}
-
-.open-flow-theme[data-theme="dark"] {
-  color-scheme: dark;
-  --open-flow-background: #1c1c1c;
-  --open-flow-foreground: #eee;
-  --open-flow-card: #242424;
-  --open-flow-node-surface: #2b2b2b;
-  --open-flow-node-content: #242424;
-  --open-flow-comment-surface: #403727;
-  --open-flow-comment-content: #2b261d;
-  --open-flow-comment-border: #5c4e36;
-  --open-flow-card-foreground: #eee;
-  --open-flow-popover: #2b2b2b;
-  --open-flow-popover-foreground: #eee;
-  --open-flow-primary: #eee;
-  --open-flow-primary-foreground: #242424;
-  --open-flow-secondary: #2b2b2b;
-  --open-flow-secondary-foreground: #eee;
-  --open-flow-muted: #242424;
-  --open-flow-muted-foreground: #ababab;
-  --open-flow-accent: #303030;
-  --open-flow-accent-foreground: #eee;
-  --open-flow-destructive: #f87171;
-  --open-flow-border: #3c3c3c;
-  --open-flow-input: #484848;
-  --open-flow-ring: #b4b4b4;
+.open-flow-theme, .open-flow-canvas-root :is(.react-flow__controls, [data-canvas-control-scope]) {
+  --ui-border: var(--_open-flow-border);
+  --ui-input: var(--_open-flow-input);
+  --ui-ring: var(--_open-flow-ring);
+  --ui-radius: var(--_open-flow-radius);
 }
 
 .open-flow-workbench .resource-browser {
@@ -219,20 +200,20 @@
 
 @supports (color: color-mix(in lab, red, red)) {
   .open-flow-property-panel {
-    --ui-input: color-mix(in srgb, var(--ui-border) 70%, var(--open-flow-node-content));
+    --ui-input: color-mix(in srgb, var(--ui-border) 70%, var(--_open-flow-node-content));
   }
 }
 
 .open-flow-property-panel {
-  --ui-card: var(--open-flow-node-surface);
-  --ui-background: var(--open-flow-node-surface);
-  --ui-control-background: var(--open-flow-node-content);
-  --ui-control-hover-background: var(--open-flow-secondary);
+  --ui-card: var(--_open-flow-node-surface);
+  --ui-background: var(--_open-flow-node-surface);
+  --ui-control-background: var(--_open-flow-node-content);
+  --ui-control-hover-background: var(--_open-flow-secondary);
 }
 
 @supports (color: color-mix(in lab, red, red)) {
   .open-flow-property-panel {
-    --ui-control-hover-background: color-mix(in srgb, var(--open-flow-secondary) 25%, var(--ui-control-background));
+    --ui-control-hover-background: color-mix(in srgb, var(--_open-flow-secondary) 25%, var(--ui-control-background));
   }
 }
 
@@ -331,24 +312,23 @@
   --success: #52c41a;
   --warning: #faad14;
   --error: #ff4d4f;
-  color-scheme: light;
-  --fill-1: #fff;
-  --fill-2: #fafafa;
-  --fill-3: #f6f6f6;
-  --fill-4: #eee;
-  --fill-5: #e7e7e7;
-  --fill-6: #e3e3e3;
-  --fill-7: #dedede;
-  --border-1: #dedede;
-  --border-2: #d2d2d2;
-  --text-1: #858585;
-  --text-2: #6b6b6b;
-  --text-3: #6b6b6b;
-  --text-4: #242424;
-  --text-5: #242424;
-  --accent-soft: #ededed;
-  --accent-soft-hover: #e3e3e3;
-  --accent-foreground: #333;
+  --fill-1: var(--open-flow-card, light-dark(#fff, #242424));
+  --fill-2: var(--open-flow-background, light-dark(#fafafa, #1c1c1c));
+  --fill-3: var(--open-flow-node-surface, light-dark(#f6f6f6, #2b2b2b));
+  --fill-4: var(--open-flow-secondary, light-dark(#eee, #303030));
+  --fill-5: var(--open-flow-accent, light-dark(#e7e7e7, #363636));
+  --fill-6: var(--open-flow-border, light-dark(#e3e3e3, #3c3c3c));
+  --fill-7: var(--open-flow-input, light-dark(#dedede, #484848));
+  --border-1: var(--open-flow-border, light-dark(#dedede, #3c3c3c));
+  --border-2: var(--open-flow-input, light-dark(#d2d2d2, #484848));
+  --text-1: var(--open-flow-muted-foreground, #858585);
+  --text-2: var(--open-flow-muted-foreground, light-dark(#6b6b6b, #ababab));
+  --text-3: var(--open-flow-muted-foreground, light-dark(#6b6b6b, #ababab));
+  --text-4: var(--open-flow-foreground, light-dark(#242424, #eee));
+  --text-5: var(--open-flow-foreground, light-dark(#242424, #eee));
+  --accent-soft: var(--open-flow-accent, light-dark(#ededed, #353535));
+  --accent-soft-hover: var(--open-flow-secondary, light-dark(#e3e3e3, #424242));
+  --accent-foreground: var(--open-flow-accent-foreground, light-dark(#333, #e0e0e0));
   --trigger-icon-color: var(--accent-orange-2);
   --trigger-icon-fill: var(--trigger-icon-color);
 }
@@ -360,35 +340,42 @@
 }
 
 .open-flow-theme[data-surface="canvas"] {
-  --canvas-lock-stripe: var(--open-flow-canvas-lock-stripe, #6464640d);
-  --canvas-grid: #64646424;
+  --canvas-lock-stripe: var(--open-flow-canvas-lock-stripe, light-dark(#6464640d, #b4b4b40d));
+  --canvas-grid: var(--open-flow-canvas-grid, light-dark(#64646424, #b4b4b421));
   --node-shadow: none;
-  --node-selected-shadow: 0 0 0 2px #4646461f, 0 2px 6px #0000000d;
+  --node-selected-shadow: 0 0 0 2px var(--open-flow-ring, #464646), 0 2px 6px #0000000d;
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  .open-flow-theme[data-surface="canvas"] {
+    --node-selected-shadow: 0 0 0 2px color-mix(in srgb, var(--open-flow-ring, #464646) 12%, transparent), 0 2px 6px #0000000d;
+  }
+}
+
+.open-flow-theme[data-surface="canvas"] {
   --node-error-selected-shadow: 0 0 0 2px #cc3e4424, 0 2px 6px #1c20240d;
   --floating-control-shadow: 0 1px 3px #1c20240a;
-  --background: var(--fill-1);
-  --foreground: var(--text-5);
   --ui-background: var(--fill-1);
   --ui-foreground: var(--text-5);
-  --ui-card: var(--widget-popup-background);
-  --ui-card-foreground: var(--widget-font-color);
+  --ui-card: var(--open-flow-card, var(--widget-popup-background));
+  --ui-card-foreground: var(--open-flow-card-foreground, var(--widget-font-color));
   --ui-popover: var(--widget-popup-background);
-  --ui-popover-foreground: var(--widget-font-color);
+  --ui-popover-foreground: var(--open-flow-popover-foreground, var(--widget-font-color));
   --ui-primary: var(--brand-highlight-color);
   --ui-primary-foreground: var(--widget-font-highlight-color);
   --ui-secondary: var(--fill-4);
-  --ui-secondary-foreground: var(--text-4);
-  --ui-muted: var(--fill-4);
+  --ui-secondary-foreground: var(--open-flow-secondary-foreground, var(--text-4));
+  --ui-muted: var(--open-flow-muted, var(--fill-4));
   --ui-muted-foreground: var(--text-2);
   --ui-accent: var(--fill-5);
-  --ui-accent-foreground: var(--text-5);
-  --ui-destructive: var(--accent-red-1);
-  --ui-border: var(--border-2);
+  --ui-accent-foreground: var(--open-flow-accent-foreground, var(--text-5));
+  --ui-destructive: var(--open-flow-destructive, var(--accent-red-1));
+  --ui-border: var(--open-flow-border, var(--border-2));
   --ui-input: var(--border-2);
-  --ui-ring: var(--open-flow-ring);
+  --ui-ring: var(--_open-flow-ring);
   --ui-radius: 6px;
-  --brand-color: #3d3d3d;
-  --brand-highlight-color: #505050;
+  --brand-color: var(--open-flow-primary, light-dark(#3d3d3d, #ccc));
+  --brand-highlight-color: var(--open-flow-primary, light-dark(#505050, #b8b8b8));
   --brand-hover-color: var(--brand-highlight-color);
 }
 
@@ -399,7 +386,7 @@
 }
 
 .open-flow-theme[data-surface="canvas"] {
-  --node-background-color: var(--open-flow-node-content);
+  --node-background-color: var(--_open-flow-node-content);
   --node-border-color: var(--border-1);
   --node-selected-border-color: var(--brand-highlight-color);
   --node-head-background-color: var(--fill-3);
@@ -410,7 +397,7 @@
   --widget-font-color: var(--text-4);
   --widget-font-readonly-color: var(--widget-font-color);
   --widget-font-placeholder-color: var(--text-2);
-  --widget-font-highlight-color: var(--white);
+  --widget-font-highlight-color: var(--open-flow-primary-foreground, var(--white));
   --widget-font-disable-color: var(--text-2);
   --widget-font-error-color: var(--widget-font-color);
   --widget-secondary-font-color: var(--text-3);
@@ -420,19 +407,19 @@
   --widget-null-color: #0550ae;
   --widget-null-bg-color: #79c0ff33;
   --widget-border-color: var(--border-2);
-  --widget-border-highlight-color: #a3a3a3;
+  --widget-border-highlight-color: var(--open-flow-ring, light-dark(#a3a3a3, #747474));
   --widget-background: var(--fill-4);
   --widget-background-highlight-color: var(--fill-5);
   --widget-background-mask-highlight-color: #0000001a;
   --widget-input-background: var(--fill-3);
-  --widget-input-selection-background-color: #d1d2f3;
+  --widget-input-selection-background-color: var(--open-flow-accent, light-dark(#d1d2f3, #2b4f77));
   --widget-switch-background-color: var(--fill-7);
   --widget-switch-border-color: transparent;
   --widget-label-background: var(--fill-4);
   --widget-active-background: var(--fill-6);
-  --widget-selector-selected-focused-bg: var(--brand-1);
-  --widget-selector-selected-bg: var(--brand-2);
-  --widget-popup-background: var(--fill-1);
+  --widget-selector-selected-focused-bg: var(--open-flow-accent, light-dark(var(--brand-1), var(--brand-9)));
+  --widget-selector-selected-bg: var(--open-flow-secondary, light-dark(var(--brand-2), var(--brand-8)));
+  --widget-popup-background: var(--open-flow-popover, var(--fill-1));
   --widget-range-background: var(--brand-color);
   --widget-segmented-item-selected-bg: var(--fill-2);
   --widget-segmented-item-hover-bg: var(--block-editor-item-background-color);
@@ -461,7 +448,7 @@
   --edge-selected: var(--text-2);
   --edge-bin: #00d6b9;
   --edge-error: var(--seti-red);
-  --flow-bg: var(--fill-4);
+  --flow-bg: var(--open-flow-canvas-background, light-dark(var(--fill-4), var(--fill-2)));
   --xy-controls-button-background-color: var(--ui-background);
   --xy-controls-button-background-color-hover: var(--ui-muted);
   --xy-controls-button-border-color: var(--ui-border);
@@ -471,7 +458,7 @@
   --xy-minimap-background-color: var(--node-background-color);
   --xy-minimap-mask-background-color: #0000001a;
   --xy-minimap-node-background-color: var(--widget-background);
-  --highlight-indicate-color: var(--brand-7);
+  --highlight-indicate-color: var(--open-flow-primary, light-dark(var(--brand-7), var(--brand-1)));
   --block-editor-item-background-color: var(--fill-3);
   --table-head-color: var(--text-2);
   --minimap-border-color: var(--border-2);
@@ -484,13 +471,13 @@
   --text-weak: var(--text-1);
   --text-weaker: var(--border-2);
   --border-weak: var(--border-1);
-  --bubble-bg: var(--brand-1);
-  --bubble-border: var(--brand-4);
-  --pseudo-outline-color: var(--brand-3);
-  --comment-bg: var(--open-flow-comment-surface);
-  --comment-preview-bg: var(--open-flow-comment-content);
+  --bubble-bg: var(--open-flow-accent, light-dark(var(--brand-1), var(--brand-7)));
+  --bubble-border: var(--open-flow-border, light-dark(var(--brand-4), var(--brand-3)));
+  --pseudo-outline-color: var(--open-flow-ring, light-dark(var(--brand-3), var(--brand-7)));
+  --comment-bg: var(--_open-flow-comment-surface);
+  --comment-preview-bg: var(--_open-flow-comment-content);
   --comment-head-bg: #e8d7b3;
-  --comment-border: var(--open-flow-comment-border);
+  --comment-border: var(--_open-flow-comment-border);
   --comment-selected-border: #a58b50;
   --comment-hover-bg: var(--comment-head-bg);
 }
@@ -512,24 +499,6 @@
 }
 
 .open-flow-theme[data-surface="canvas"][data-theme="dark"] {
-  color-scheme: dark;
-  --fill-1: #242424;
-  --fill-2: #1c1c1c;
-  --fill-3: #2b2b2b;
-  --fill-4: #303030;
-  --fill-5: #363636;
-  --fill-6: #3c3c3c;
-  --fill-7: #484848;
-  --border-1: #3c3c3c;
-  --border-2: #484848;
-  --text-1: #858585;
-  --text-2: #ababab;
-  --text-3: #ababab;
-  --text-4: #eee;
-  --text-5: #eee;
-  --accent-soft: #353535;
-  --accent-soft-hover: #424242;
-  --accent-foreground: #e0e0e0;
   --trigger-icon-color: var(--warning);
   --trigger-icon-fill: var(--trigger-icon-color);
 }
@@ -541,135 +510,38 @@
 }
 
 .open-flow-theme[data-surface="canvas"][data-theme="dark"] {
-  --canvas-lock-stripe: var(--open-flow-canvas-lock-stripe, #b4b4b40d);
-  --canvas-grid: #b4b4b421;
-  --node-shadow: none;
-  --node-selected-shadow: 0 0 0 2px #bebebe29, 0 2px 6px #0003;
-  --node-error-selected-shadow: 0 0 0 2px #cc3e443d, 0 2px 6px #0003;
-  --floating-control-shadow: 0 1px 3px #00000029;
-  --brand-color: #ccc;
-  --brand-highlight-color: #b8b8b8;
-  --brand-hover-color: var(--brand-highlight-color);
+  --node-selected-shadow: 0 0 0 2px var(--open-flow-ring, #bebebe), 0 2px 6px #0003;
 }
 
 @supports (color: color-mix(in lab, red, red)) {
   .open-flow-theme[data-surface="canvas"][data-theme="dark"] {
-    --brand-hover-color: color-mix(in srgb, var(--brand-highlight-color) 20%, transparent);
+    --node-selected-shadow: 0 0 0 2px color-mix(in srgb, var(--open-flow-ring, #bebebe) 16%, transparent), 0 2px 6px #0003;
   }
 }
 
 .open-flow-theme[data-surface="canvas"][data-theme="dark"] {
-  --ui-background: var(--fill-1);
-  --ui-foreground: var(--text-5);
-  --ui-card: var(--widget-popup-background);
-  --ui-card-foreground: var(--widget-font-color);
-  --ui-popover: var(--widget-popup-background);
-  --ui-popover-foreground: var(--widget-font-color);
-  --ui-primary: var(--brand-highlight-color);
-  --ui-primary-foreground: var(--widget-font-highlight-color);
-  --ui-secondary: var(--fill-4);
-  --ui-secondary-foreground: var(--text-4);
-  --ui-muted: var(--fill-4);
-  --ui-muted-foreground: var(--text-2);
-  --ui-accent: var(--fill-5);
-  --ui-accent-foreground: var(--text-5);
-  --ui-destructive: var(--accent-red-1);
-  --ui-border: var(--border-2);
-  --ui-input: var(--border-2);
-  --ui-ring: var(--open-flow-ring);
-  --ui-radius: 6px;
-  --node-background-color: var(--open-flow-node-content);
-  --node-border-color: var(--border-1);
-  --node-selected-border-color: var(--brand-highlight-color);
-  --node-head-background-color: var(--fill-3);
-  --node-head-background-highlight-color: var(--fill-4);
+  --node-error-selected-shadow: 0 0 0 2px #cc3e443d, 0 2px 6px #0003;
+  --floating-control-shadow: 0 1px 3px #00000029;
   --widget-error-tag-background: #641e1e;
   --widget-error-tag-border-color: #c60000;
-  --widget-shadow: #0009;
-  --widget-font-color: var(--text-4);
-  --widget-font-readonly-color: var(--widget-font-color);
-  --widget-font-placeholder-color: var(--text-2);
-  --widget-font-highlight-color: var(--white);
-  --widget-font-disable-color: var(--text-2);
-  --widget-font-error-color: var(--widget-font-color);
-  --widget-secondary-font-color: var(--text-3);
   --widget-font-danger-color: #fffc;
-  --widget-button-danger-bg: #f851494d;
-  --widget-button-danger-hover-bg: #f8514989;
   --widget-null-color: #79c0ff;
-  --widget-null-bg-color: #79c0ff33;
-  --widget-border-color: var(--border-2);
-  --widget-border-highlight-color: #747474;
-  --widget-background: var(--fill-4);
-  --widget-background-highlight-color: var(--fill-5);
   --widget-background-mask-highlight-color: #ffffff1a;
-  --widget-input-background: var(--fill-3);
-  --widget-input-selection-background-color: #2b4f77;
-  --widget-switch-background-color: var(--fill-7);
-  --widget-switch-border-color: transparent;
-  --widget-label-background: var(--fill-4);
-  --widget-active-background: var(--fill-6);
-  --widget-selector-selected-focused-bg: var(--brand-9);
-  --widget-selector-selected-bg: var(--brand-8);
-  --widget-popup-background: var(--fill-1);
   --widget-range-background: var(--brand-highlight-color);
   --widget-segmented-item-selected-bg: var(--fill-4);
-  --widget-segmented-item-hover-bg: var(--block-editor-item-background-color);
-  --widget-segmented-track-bg: var(--fill-3);
-  --widget-segmented-font-color: var(--text-strong);
-  --widget-segmented-inactive-color: var(--text-weak);
-  --widget-time-picker-active-bg: var(--brand-highlight-color);
-  --widget-success-progress-color: var(--accent-green-1);
-  --widget-error-progress-color: var(--accent-red-1);
-  --widget-error-color: red;
   --widget-error-hover-color: #f22;
   --widget-error-hover-background-color: #ff000040;
   --widget-error-background: #7b2424;
   --widget-error-background-highlight-color: #853b3c;
   --widget-error-input-border-color: #761414;
   --widget-error-input-background: #351717;
-  --widget-error-tip-border: var(--widget-error-input-border-color);
-  --widget-error-tip-background: var(--widget-error-input-background);
-  --widget-warn-color: var(--warning);
   --edge-color: #696e77;
-  --edge-linear-gradient-start: var(--edge-color);
-  --edge-linear-gradient-end: var(--edge-color);
-  --edge-string: #f9ae58;
-  --edge-json: #9ca0df;
   --edge-primitive: #737373;
-  --edge-selected: var(--text-2);
-  --edge-bin: #00d6b9;
-  --edge-error: var(--seti-red);
-  --flow-bg: var(--fill-2);
-  --xy-controls-button-background-color: var(--ui-background);
-  --xy-controls-button-background-color-hover: var(--ui-muted);
-  --xy-controls-button-border-color: var(--ui-border);
-  --xy-controls-button-color: var(--ui-muted-foreground);
-  --xy-controls-button-color-hover: var(--ui-foreground);
-  --xy-controls-box-shadow: var(--floating-control-shadow);
-  --xy-minimap-background-color: var(--node-background-color);
-  --xy-minimap-mask-background-color: #0000001a;
-  --xy-minimap-node-background-color: var(--widget-background);
-  --highlight-indicate-color: var(--brand-1);
-  --block-editor-item-background-color: var(--fill-3);
-  --table-head-color: var(--text-2);
-  --minimap-border-color: var(--border-2);
   --contextmenu-shadow: #0000005c;
-  --contextmenu-background: var(--fill-1);
-  --contextmenu-hover: var(--fill-5);
-  --text: var(--text-3);
-  --text-strong: var(--text-4);
-  --text-stronger: var(--text-5);
   --text-weak: var(--text-2);
   --text-weaker: var(--text-1);
   --border-weak: var(--border-2);
-  --bubble-bg: var(--brand-7);
-  --bubble-border: var(--brand-3);
-  --pseudo-outline-color: var(--brand-7);
-  --comment-bg: var(--open-flow-comment-surface);
-  --comment-preview-bg: var(--open-flow-comment-content);
   --comment-head-bg: #514532;
-  --comment-border: var(--open-flow-comment-border);
   --comment-selected-border: #bba165;
   --comment-hover-bg: var(--comment-head-bg);
 }
@@ -1505,6 +1377,10 @@
     min-height: calc(var(--spacing) * 12);
   }
 
+  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .min-h-14 {
+    min-height: calc(var(--spacing) * 14);
+  }
+
   :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .min-h-16 {
     min-height: calc(var(--spacing) * 16);
   }
@@ -1585,6 +1461,10 @@
     width: calc(var(--spacing) * 56);
   }
 
+  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .w-60 {
+    width: calc(var(--spacing) * 60);
+  }
+
   :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .w-64 {
     width: calc(var(--spacing) * 64);
   }
@@ -1773,6 +1653,10 @@
     flex-shrink: 0;
   }
 
+  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .grow {
+    flex-grow: 1;
+  }
+
   :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .basis-48 {
     flex-basis: calc(var(--spacing) * 48);
   }
@@ -1833,6 +1717,10 @@
     transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
   }
 
+  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .transform\! {
+    transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ) !important;
+  }
+
   :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .animate-pulse {
     animation: var(--animate-pulse);
   }
@@ -2313,13 +2201,13 @@
     border-left-width: 1px;
   }
 
-  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .border-\[color-mix\(in_srgb\,var\(--open-flow-comment-border\)_45\%\,transparent\)\] {
-    border-color: var(--open-flow-comment-border);
+  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .border-\[color-mix\(in_srgb\,var\(--_open-flow-comment-border\)_45\%\,transparent\)\] {
+    border-color: var(--_open-flow-comment-border);
   }
 
   @supports (color: color-mix(in lab, red, red)) {
-    :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .border-\[color-mix\(in_srgb\,var\(--open-flow-comment-border\)_45\%\,transparent\)\] {
-      border-color: color-mix(in srgb,var(--open-flow-comment-border) 45%,transparent);
+    :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .border-\[color-mix\(in_srgb\,var\(--_open-flow-comment-border\)_45\%\,transparent\)\] {
+      border-color: color-mix(in srgb,var(--_open-flow-comment-border) 45%,transparent);
     }
   }
 
@@ -2333,12 +2221,12 @@
     }
   }
 
-  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .border-\[var\(--branch-color\)\] {
-    border-color: var(--branch-color);
+  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .border-\[var\(--_open-flow-comment-border\)\] {
+    border-color: var(--_open-flow-comment-border);
   }
 
-  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .border-\[var\(--open-flow-comment-border\)\] {
-    border-color: var(--open-flow-comment-border);
+  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .border-\[var\(--branch-color\)\] {
+    border-color: var(--branch-color);
   }
 
   :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .border-\[var\(--ui-border\)\], :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .border-border, :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .border-border\/50 {
@@ -2413,12 +2301,12 @@
     }
   }
 
-  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .bg-\[var\(--open-flow-comment-content\)\] {
-    background-color: var(--open-flow-comment-content);
+  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .bg-\[var\(--_open-flow-comment-content\)\] {
+    background-color: var(--_open-flow-comment-content);
   }
 
-  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .bg-\[var\(--open-flow-comment-surface\)\] {
-    background-color: var(--open-flow-comment-surface);
+  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .bg-\[var\(--_open-flow-comment-surface\)\] {
+    background-color: var(--_open-flow-comment-surface);
   }
 
   :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .bg-\[var\(--ui-control-background\,var\(--ui-muted\)\)\] {
@@ -3090,6 +2978,10 @@
     color: var(--ui-secondary-foreground);
   }
 
+  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .lowercase {
+    text-transform: lowercase;
+  }
+
   :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .uppercase {
     text-transform: uppercase;
   }
@@ -3772,13 +3664,13 @@
   }
 
   @media (hover: hover) {
-    :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .hover\:bg-\[color-mix\(in_oklch\,var\(--secondary\)\,var\(--foreground\)_5\%\)\]:hover {
-      background-color: var(--secondary);
+    :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .hover\:bg-\[color-mix\(in_oklch\,var\(--ui-secondary\)\,var\(--ui-foreground\)_5\%\)\]:hover {
+      background-color: var(--ui-secondary);
     }
 
     @supports (color: color-mix(in lab, red, red)) {
-      :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .hover\:bg-\[color-mix\(in_oklch\,var\(--secondary\)\,var\(--foreground\)_5\%\)\]:hover {
-        background-color: color-mix(in oklch,var(--secondary),var(--foreground) 5%);
+      :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .hover\:bg-\[color-mix\(in_oklch\,var\(--ui-secondary\)\,var\(--ui-foreground\)_5\%\)\]:hover {
+        background-color: color-mix(in oklch,var(--ui-secondary),var(--ui-foreground) 5%);
       }
     }
 
@@ -5240,283 +5132,285 @@
     }
   }
 
-  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:border-input:where([data-theme="dark"], [data-theme="dark"] *) {
-    border-color: var(--ui-input);
-  }
-
-  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:bg-\[color-mix\(in_srgb\,black_16\%\,var\(--ui-popover\)\)\]:where([data-theme="dark"], [data-theme="dark"] *) {
-    background-color: #000;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:bg-\[color-mix\(in_srgb\,black_16\%\,var\(--ui-popover\)\)\]:where([data-theme="dark"], [data-theme="dark"] *) {
-      background-color: color-mix(in srgb,black 16%,var(--ui-popover));
+  @container style(--_open-flow-theme: dark) {
+    :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:border-input {
+      border-color: var(--ui-input);
     }
-  }
 
-  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:bg-\[var\(--ui-control-background\,var\(--ui-muted\)\)\]:where([data-theme="dark"], [data-theme="dark"] *) {
-    background-color: var(--ui-control-background, var(--ui-muted));
-  }
-
-  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:bg-destructive\/20:where([data-theme="dark"], [data-theme="dark"] *) {
-    background-color: var(--ui-destructive);
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:bg-destructive\/20:where([data-theme="dark"], [data-theme="dark"] *) {
-      background-color: color-mix(in oklab, var(--ui-destructive) 20%, transparent);
+    :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:bg-\[color-mix\(in_srgb\,black_16\%\,var\(--ui-popover\)\)\] {
+      background-color: #000;
     }
-  }
 
-  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:bg-input\/30:where([data-theme="dark"], [data-theme="dark"] *) {
-    background-color: var(--ui-input);
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:bg-input\/30:where([data-theme="dark"], [data-theme="dark"] *) {
-      background-color: color-mix(in oklab, var(--ui-input) 30%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:bg-\[color-mix\(in_srgb\,black_16\%\,var\(--ui-popover\)\)\] {
+        background-color: color-mix(in srgb,black 16%,var(--ui-popover));
+      }
     }
-  }
 
-  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:bg-transparent:where([data-theme="dark"], [data-theme="dark"] *) {
-    background-color: #0000;
-  }
-
-  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:text-muted-foreground:where([data-theme="dark"], [data-theme="dark"] *) {
-    color: var(--ui-muted-foreground);
-  }
+    :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:bg-\[var\(--ui-control-background\,var\(--ui-muted\)\)\] {
+      background-color: var(--ui-control-background, var(--ui-muted));
+    }
 
-  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:not-data-disabled\:bg-input\/30:where([data-theme="dark"], [data-theme="dark"] *):not([data-disabled]) {
-    background-color: var(--ui-input);
-  }
+    :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:bg-destructive\/20 {
+      background-color: var(--ui-destructive);
+    }
 
-  @supports (color: color-mix(in lab, red, red)) {
-    :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:not-data-disabled\:bg-input\/30:where([data-theme="dark"], [data-theme="dark"] *):not([data-disabled]) {
-      background-color: color-mix(in oklab, var(--ui-input) 30%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:bg-destructive\/20 {
+        background-color: color-mix(in oklab, var(--ui-destructive) 20%, transparent);
+      }
     }
-  }
 
-  @media (hover: hover) {
-    :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:hover\:bg-\[color-mix\(in_srgb\,currentColor_8\%\,transparent\)\]:where([data-theme="dark"], [data-theme="dark"] *):hover {
-      background-color: currentColor;
+    :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:bg-input\/30 {
+      background-color: var(--ui-input);
     }
 
     @supports (color: color-mix(in lab, red, red)) {
-      :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:hover\:bg-\[color-mix\(in_srgb\,currentColor_8\%\,transparent\)\]:where([data-theme="dark"], [data-theme="dark"] *):hover {
-        background-color: color-mix(in srgb,currentColor 8%,transparent);
+      :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:bg-input\/30 {
+        background-color: color-mix(in oklab, var(--ui-input) 30%, transparent);
       }
     }
 
-    :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:hover\:bg-\[var\(--ui-control-hover-background\,var\(--ui-muted\)\)\]:where([data-theme="dark"], [data-theme="dark"] *):hover {
-      background-color: var(--ui-control-hover-background, var(--ui-muted));
+    :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:bg-transparent {
+      background-color: #0000;
     }
 
-    :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:hover\:bg-\[var\(--ui-disabled-background\,color-mix\(in_srgb\,var\(--ui-input\)_50\%\,transparent\)\)\]:where([data-theme="dark"], [data-theme="dark"] *):hover {
-      background-color: var(--ui-disabled-background, var(--ui-input));
+    :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:text-muted-foreground {
+      color: var(--ui-muted-foreground);
+    }
+
+    :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:not-data-disabled\:bg-input\/30:not([data-disabled]) {
+      background-color: var(--ui-input);
     }
 
     @supports (color: color-mix(in lab, red, red)) {
-      :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:hover\:bg-\[var\(--ui-disabled-background\,color-mix\(in_srgb\,var\(--ui-input\)_50\%\,transparent\)\)\]:where([data-theme="dark"], [data-theme="dark"] *):hover {
-        background-color: var(--ui-disabled-background, color-mix(in srgb,var(--ui-input) 50%,transparent));
+      :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:not-data-disabled\:bg-input\/30:not([data-disabled]) {
+        background-color: color-mix(in oklab, var(--ui-input) 30%, transparent);
       }
     }
 
-    :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:hover\:bg-accent\/50:where([data-theme="dark"], [data-theme="dark"] *):hover {
-      background-color: var(--ui-accent);
-    }
+    @media (hover: hover) {
+      :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:hover\:bg-\[color-mix\(in_srgb\,currentColor_8\%\,transparent\)\]:hover {
+        background-color: currentColor;
+      }
 
-    @supports (color: color-mix(in lab, red, red)) {
-      :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:hover\:bg-accent\/50:where([data-theme="dark"], [data-theme="dark"] *):hover {
-        background-color: color-mix(in oklab, var(--ui-accent) 50%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:hover\:bg-\[color-mix\(in_srgb\,currentColor_8\%\,transparent\)\]:hover {
+          background-color: color-mix(in srgb,currentColor 8%,transparent);
+        }
+      }
+
+      :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:hover\:bg-\[var\(--ui-control-hover-background\,var\(--ui-muted\)\)\]:hover {
+        background-color: var(--ui-control-hover-background, var(--ui-muted));
+      }
+
+      :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:hover\:bg-\[var\(--ui-disabled-background\,color-mix\(in_srgb\,var\(--ui-input\)_50\%\,transparent\)\)\]:hover {
+        background-color: var(--ui-disabled-background, var(--ui-input));
+      }
+
+      @supports (color: color-mix(in lab, red, red)) {
+        :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:hover\:bg-\[var\(--ui-disabled-background\,color-mix\(in_srgb\,var\(--ui-input\)_50\%\,transparent\)\)\]:hover {
+          background-color: var(--ui-disabled-background, color-mix(in srgb,var(--ui-input) 50%,transparent));
+        }
+      }
+
+      :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:hover\:bg-accent\/50:hover {
+        background-color: var(--ui-accent);
+      }
+
+      @supports (color: color-mix(in lab, red, red)) {
+        :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:hover\:bg-accent\/50:hover {
+          background-color: color-mix(in oklab, var(--ui-accent) 50%, transparent);
+        }
+      }
+
+      :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:hover\:bg-destructive\/20:hover {
+        background-color: var(--ui-destructive);
+      }
+
+      @supports (color: color-mix(in lab, red, red)) {
+        :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:hover\:bg-destructive\/20:hover {
+          background-color: color-mix(in oklab, var(--ui-destructive) 20%, transparent);
+        }
+      }
+
+      :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:hover\:bg-destructive\/30:hover {
+        background-color: var(--ui-destructive);
+      }
+
+      @supports (color: color-mix(in lab, red, red)) {
+        :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:hover\:bg-destructive\/30:hover {
+          background-color: color-mix(in oklab, var(--ui-destructive) 30%, transparent);
+        }
+      }
+
+      :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:hover\:bg-foreground:hover, :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:hover\:bg-foreground\/7:hover {
+        background-color: var(--ui-foreground);
+      }
+
+      @supports (color: color-mix(in lab, red, red)) {
+        :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:hover\:bg-foreground\/7:hover {
+          background-color: color-mix(in oklab, var(--ui-foreground) 7%, transparent);
+        }
+      }
+
+      :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:hover\:bg-foreground\/10:hover {
+        background-color: var(--ui-foreground);
+      }
+
+      @supports (color: color-mix(in lab, red, red)) {
+        :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:hover\:bg-foreground\/10:hover {
+          background-color: color-mix(in oklab, var(--ui-foreground) 10%, transparent);
+        }
+      }
+
+      :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:hover\:bg-input\/50:hover {
+        background-color: var(--ui-input);
+      }
+
+      @supports (color: color-mix(in lab, red, red)) {
+        :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:hover\:bg-input\/50:hover {
+          background-color: color-mix(in oklab, var(--ui-input) 50%, transparent);
+        }
+      }
+
+      :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:hover\:bg-muted\/50:hover {
+        background-color: var(--ui-muted);
+      }
+
+      @supports (color: color-mix(in lab, red, red)) {
+        :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:hover\:bg-muted\/50:hover {
+          background-color: color-mix(in oklab, var(--ui-muted) 50%, transparent);
+        }
+      }
+
+      :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:hover\:bg-transparent:hover {
+        background-color: #0000;
+      }
+
+      :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:hover\:text-foreground:hover {
+        color: var(--ui-foreground);
       }
     }
 
-    :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:hover\:bg-destructive\/20:where([data-theme="dark"], [data-theme="dark"] *):hover {
-      background-color: var(--ui-destructive);
+    :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:disabled\:bg-\[var\(--ui-disabled-background\,color-mix\(in_srgb\,var\(--ui-input\)_80\%\,transparent\)\)\]:disabled {
+      background-color: var(--ui-disabled-background, var(--ui-input));
     }
 
     @supports (color: color-mix(in lab, red, red)) {
-      :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:hover\:bg-destructive\/20:where([data-theme="dark"], [data-theme="dark"] *):hover {
-        background-color: color-mix(in oklab, var(--ui-destructive) 20%, transparent);
+      :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:disabled\:bg-\[var\(--ui-disabled-background\,color-mix\(in_srgb\,var\(--ui-input\)_80\%\,transparent\)\)\]:disabled {
+        background-color: var(--ui-disabled-background, color-mix(in srgb,var(--ui-input) 80%,transparent));
       }
     }
 
-    :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:hover\:bg-destructive\/30:where([data-theme="dark"], [data-theme="dark"] *):hover {
-      background-color: var(--ui-destructive);
+    :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:disabled\:bg-transparent:disabled {
+      background-color: #0000;
+    }
+
+    :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:has-disabled\:bg-\[var\(--ui-disabled-background\,color-mix\(in_srgb\,var\(--ui-input\)_80\%\,transparent\)\)\]:has(:disabled) {
+      background-color: var(--ui-disabled-background, var(--ui-input));
     }
 
     @supports (color: color-mix(in lab, red, red)) {
-      :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:hover\:bg-destructive\/30:where([data-theme="dark"], [data-theme="dark"] *):hover {
-        background-color: color-mix(in oklab, var(--ui-destructive) 30%, transparent);
+      :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:has-disabled\:bg-\[var\(--ui-disabled-background\,color-mix\(in_srgb\,var\(--ui-input\)_80\%\,transparent\)\)\]:has(:disabled) {
+        background-color: var(--ui-disabled-background, color-mix(in srgb,var(--ui-input) 80%,transparent));
       }
     }
 
-    :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:hover\:bg-foreground:where([data-theme="dark"], [data-theme="dark"] *):hover, :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:hover\:bg-foreground\/7:where([data-theme="dark"], [data-theme="dark"] *):hover {
-      background-color: var(--ui-foreground);
+    :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:has-data-checked\:border-primary\/20:has([data-checked]) {
+      border-color: var(--ui-primary);
     }
 
     @supports (color: color-mix(in lab, red, red)) {
-      :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:hover\:bg-foreground\/7:where([data-theme="dark"], [data-theme="dark"] *):hover {
-        background-color: color-mix(in oklab, var(--ui-foreground) 7%, transparent);
+      :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:has-data-checked\:border-primary\/20:has([data-checked]) {
+        border-color: color-mix(in oklab, var(--ui-primary) 20%, transparent);
       }
     }
 
-    :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:hover\:bg-foreground\/10:where([data-theme="dark"], [data-theme="dark"] *):hover {
-      background-color: var(--ui-foreground);
+    :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:has-data-checked\:bg-primary\/10:has([data-checked]) {
+      background-color: var(--ui-primary);
     }
 
     @supports (color: color-mix(in lab, red, red)) {
-      :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:hover\:bg-foreground\/10:where([data-theme="dark"], [data-theme="dark"] *):hover {
-        background-color: color-mix(in oklab, var(--ui-foreground) 10%, transparent);
+      :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:has-data-checked\:bg-primary\/10:has([data-checked]) {
+        background-color: color-mix(in oklab, var(--ui-primary) 10%, transparent);
       }
     }
 
-    :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:hover\:bg-input\/50:where([data-theme="dark"], [data-theme="dark"] *):hover {
+    :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:data-active\:border-input[data-active] {
+      border-color: var(--ui-input);
+    }
+
+    :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:data-active\:bg-input\/30[data-active] {
       background-color: var(--ui-input);
     }
 
     @supports (color: color-mix(in lab, red, red)) {
-      :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:hover\:bg-input\/50:where([data-theme="dark"], [data-theme="dark"] *):hover {
-        background-color: color-mix(in oklab, var(--ui-input) 50%, transparent);
+      :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:data-active\:bg-input\/30[data-active] {
+        background-color: color-mix(in oklab, var(--ui-input) 30%, transparent);
       }
     }
 
-    :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:hover\:bg-muted\/50:where([data-theme="dark"], [data-theme="dark"] *):hover {
-      background-color: var(--ui-muted);
+    :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:data-active\:text-foreground[data-active] {
+      color: var(--ui-foreground);
+    }
+
+    :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:group-data-\[variant\=flat\]\/tabs-list\:data-active\:bg-\[color-mix\(in_srgb\,var\(--ui-foreground\)_8\%\,var\(--ui-popover\)\)\]:is(:where(.group\/tabs-list)[data-variant="flat"] *)[data-active] {
+      background-color: var(--ui-foreground);
     }
 
     @supports (color: color-mix(in lab, red, red)) {
-      :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:hover\:bg-muted\/50:where([data-theme="dark"], [data-theme="dark"] *):hover {
-        background-color: color-mix(in oklab, var(--ui-muted) 50%, transparent);
+      :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:group-data-\[variant\=flat\]\/tabs-list\:data-active\:bg-\[color-mix\(in_srgb\,var\(--ui-foreground\)_8\%\,var\(--ui-popover\)\)\]:is(:where(.group\/tabs-list)[data-variant="flat"] *)[data-active] {
+        background-color: color-mix(in srgb,var(--ui-foreground) 8%,var(--ui-popover));
       }
     }
 
-    :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:hover\:bg-transparent:where([data-theme="dark"], [data-theme="dark"] *):hover {
-      background-color: #0000;
+    :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:group-data-\[variant\=line\]\/tabs-list\:data-active\:border-transparent:is(:where(.group\/tabs-list)[data-variant="line"] *)[data-active] {
+      border-color: #0000;
     }
 
-    :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:hover\:text-foreground:where([data-theme="dark"], [data-theme="dark"] *):hover {
-      color: var(--ui-foreground);
+    :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:group-data-\[variant\=line\]\/tabs-list\:data-active\:bg-transparent:is(:where(.group\/tabs-list)[data-variant="line"] *)[data-active] {
+      background-color: #0000;
     }
-  }
 
-  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:disabled\:bg-\[var\(--ui-disabled-background\,color-mix\(in_srgb\,var\(--ui-input\)_80\%\,transparent\)\)\]:where([data-theme="dark"], [data-theme="dark"] *):disabled {
-    background-color: var(--ui-disabled-background, var(--ui-input));
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:disabled\:bg-\[var\(--ui-disabled-background\,color-mix\(in_srgb\,var\(--ui-input\)_80\%\,transparent\)\)\]:where([data-theme="dark"], [data-theme="dark"] *):disabled {
-      background-color: var(--ui-disabled-background, color-mix(in srgb,var(--ui-input) 80%,transparent));
+    :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:group-data-\[variant\=navigation\]\/tabs-list\:data-active\:bg-muted:is(:where(.group\/tabs-list)[data-variant="navigation"] *)[data-active] {
+      background-color: var(--ui-muted);
     }
-  }
-
-  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:disabled\:bg-transparent:where([data-theme="dark"], [data-theme="dark"] *):disabled {
-    background-color: #0000;
-  }
-
-  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:has-disabled\:bg-\[var\(--ui-disabled-background\,color-mix\(in_srgb\,var\(--ui-input\)_80\%\,transparent\)\)\]:where([data-theme="dark"], [data-theme="dark"] *):has(:disabled) {
-    background-color: var(--ui-disabled-background, var(--ui-input));
-  }
 
-  @supports (color: color-mix(in lab, red, red)) {
-    :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:has-disabled\:bg-\[var\(--ui-disabled-background\,color-mix\(in_srgb\,var\(--ui-input\)_80\%\,transparent\)\)\]:where([data-theme="dark"], [data-theme="dark"] *):has(:disabled) {
-      background-color: var(--ui-disabled-background, color-mix(in srgb,var(--ui-input) 80%,transparent));
+    :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:group-data-\[variant\=navigation\]\/tabs-list\:data-active\:text-foreground:is(:where(.group\/tabs-list)[data-variant="navigation"] *)[data-active] {
+      color: var(--ui-foreground);
     }
-  }
 
-  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:has-data-checked\:border-primary\/20:where([data-theme="dark"], [data-theme="dark"] *):has([data-checked]) {
-    border-color: var(--ui-primary);
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:has-data-checked\:border-primary\/20:where([data-theme="dark"], [data-theme="dark"] *):has([data-checked]) {
-      border-color: color-mix(in oklab, var(--ui-primary) 20%, transparent);
+    :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:data-checked\:bg-primary-foreground[data-checked] {
+      background-color: var(--ui-primary-foreground);
     }
-  }
 
-  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:has-data-checked\:bg-primary\/10:where([data-theme="dark"], [data-theme="dark"] *):has([data-checked]) {
-    background-color: var(--ui-primary);
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:has-data-checked\:bg-primary\/10:where([data-theme="dark"], [data-theme="dark"] *):has([data-checked]) {
-      background-color: color-mix(in oklab, var(--ui-primary) 10%, transparent);
+    :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:not-data-disabled\:data-checked\:bg-primary:not([data-disabled])[data-checked] {
+      background-color: var(--ui-primary);
     }
-  }
 
-  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:data-active\:border-input:where([data-theme="dark"], [data-theme="dark"] *)[data-active] {
-    border-color: var(--ui-input);
-  }
-
-  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:data-active\:bg-input\/30:where([data-theme="dark"], [data-theme="dark"] *)[data-active] {
-    background-color: var(--ui-input);
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:data-active\:bg-input\/30:where([data-theme="dark"], [data-theme="dark"] *)[data-active] {
-      background-color: color-mix(in oklab, var(--ui-input) 30%, transparent);
+    :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:data-unchecked\:bg-foreground[data-unchecked] {
+      background-color: var(--ui-foreground);
     }
-  }
-
-  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:data-active\:text-foreground:where([data-theme="dark"], [data-theme="dark"] *)[data-active] {
-    color: var(--ui-foreground);
-  }
-
-  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:group-data-\[variant\=flat\]\/tabs-list\:data-active\:bg-\[color-mix\(in_srgb\,var\(--ui-foreground\)_8\%\,var\(--ui-popover\)\)\]:where([data-theme="dark"], [data-theme="dark"] *):is(:where(.group\/tabs-list)[data-variant="flat"] *)[data-active] {
-    background-color: var(--ui-foreground);
-  }
 
-  @supports (color: color-mix(in lab, red, red)) {
-    :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:group-data-\[variant\=flat\]\/tabs-list\:data-active\:bg-\[color-mix\(in_srgb\,var\(--ui-foreground\)_8\%\,var\(--ui-popover\)\)\]:where([data-theme="dark"], [data-theme="dark"] *):is(:where(.group\/tabs-list)[data-variant="flat"] *)[data-active] {
-      background-color: color-mix(in srgb,var(--ui-foreground) 8%,var(--ui-popover));
+    :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:data-unchecked\:bg-input\/80[data-unchecked] {
+      background-color: var(--ui-input);
     }
-  }
-
-  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:group-data-\[variant\=line\]\/tabs-list\:data-active\:border-transparent:where([data-theme="dark"], [data-theme="dark"] *):is(:where(.group\/tabs-list)[data-variant="line"] *)[data-active] {
-    border-color: #0000;
-  }
-
-  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:group-data-\[variant\=line\]\/tabs-list\:data-active\:bg-transparent:where([data-theme="dark"], [data-theme="dark"] *):is(:where(.group\/tabs-list)[data-variant="line"] *)[data-active] {
-    background-color: #0000;
-  }
 
-  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:group-data-\[variant\=navigation\]\/tabs-list\:data-active\:bg-muted:where([data-theme="dark"], [data-theme="dark"] *):is(:where(.group\/tabs-list)[data-variant="navigation"] *)[data-active] {
-    background-color: var(--ui-muted);
-  }
-
-  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:group-data-\[variant\=navigation\]\/tabs-list\:data-active\:text-foreground:where([data-theme="dark"], [data-theme="dark"] *):is(:where(.group\/tabs-list)[data-variant="navigation"] *)[data-active] {
-    color: var(--ui-foreground);
-  }
-
-  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:data-checked\:bg-primary-foreground:where([data-theme="dark"], [data-theme="dark"] *)[data-checked] {
-    background-color: var(--ui-primary-foreground);
-  }
-
-  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:not-data-disabled\:data-checked\:bg-primary:where([data-theme="dark"], [data-theme="dark"] *):not([data-disabled])[data-checked] {
-    background-color: var(--ui-primary);
-  }
-
-  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:data-unchecked\:bg-foreground:where([data-theme="dark"], [data-theme="dark"] *)[data-unchecked] {
-    background-color: var(--ui-foreground);
-  }
-
-  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:data-unchecked\:bg-input\/80:where([data-theme="dark"], [data-theme="dark"] *)[data-unchecked] {
-    background-color: var(--ui-input);
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:data-unchecked\:bg-input\/80:where([data-theme="dark"], [data-theme="dark"] *)[data-unchecked] {
-      background-color: color-mix(in oklab, var(--ui-input) 80%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:data-unchecked\:bg-input\/80[data-unchecked] {
+        background-color: color-mix(in oklab, var(--ui-input) 80%, transparent);
+      }
     }
-  }
 
-  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:data-\[variant\=destructive\]\:focus\:bg-destructive\/20:where([data-theme="dark"], [data-theme="dark"] *)[data-variant="destructive"]:focus {
-    background-color: var(--ui-destructive);
-  }
+    :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:data-\[variant\=destructive\]\:focus\:bg-destructive\/20[data-variant="destructive"]:focus {
+      background-color: var(--ui-destructive);
+    }
 
-  @supports (color: color-mix(in lab, red, red)) {
-    :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:data-\[variant\=destructive\]\:focus\:bg-destructive\/20:where([data-theme="dark"], [data-theme="dark"] *)[data-variant="destructive"]:focus {
-      background-color: color-mix(in oklab, var(--ui-destructive) 20%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:data-\[variant\=destructive\]\:focus\:bg-destructive\/20[data-variant="destructive"]:focus {
+        background-color: color-mix(in oklab, var(--ui-destructive) 20%, transparent);
+      }
     }
   }
 
@@ -6994,7 +6888,7 @@ svg.react-flow__connectionline {
 
 .open-flow-workbench .editor-grid:not(.context-panel-closed):after {
   border-left: 1px solid var(--ui-border);
-  background: var(--open-flow-node-surface);
+  background: var(--_open-flow-node-surface);
   content: "";
   pointer-events: none;
   grid-area: 2 / 2;
@@ -7126,17 +7020,11 @@ svg.react-flow__connectionline {
 }
 
 .open-flow-workbench .diagnostics-popover[data-slot="popover-content"] {
-  --ui-background: var(--open-flow-card);
-  --ui-foreground: var(--open-flow-card-foreground);
-  --ui-muted: var(--open-flow-muted);
-  --ui-muted-foreground: var(--open-flow-muted-foreground);
-  --ui-border: var(--open-flow-border);
-  --ui-destructive: var(--open-flow-destructive);
   width: min(400px, var(--available-width, calc(100vw - 32px)));
   max-height: min(600px, calc(100dvh - 96px), var(--available-height));
-  border: 1px solid var(--open-flow-border);
-  background: var(--open-flow-card);
-  color: var(--open-flow-card-foreground);
+  border: 1px solid var(--ui-border);
+  background: var(--ui-card);
+  color: var(--ui-card-foreground);
   border-radius: 14px;
   gap: 0;
   padding: 0;
@@ -8260,7 +8148,7 @@ svg.react-flow__connectionline {
 }
 
 .open-flow-workbench .prompt-input-reference {
-  color: var(--open-flow-primary);
+  color: var(--_open-flow-primary);
   background: currentColor;
 }
 
@@ -9360,7 +9248,7 @@ svg.react-flow__connectionline {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-}.CanvasCard_card_56d5c {
+}.CanvasCard_card_77a06 {
   --card-stroke: var(--node-border-color);
   --card-selection-stroke: var(--node-selected-border-color);
   --card-shadow: 0 1px 2px rgb(0 0 0 / 3%), 0 4px 12px rgb(0 0 0 / 3%);
@@ -9370,57 +9258,57 @@ svg.react-flow__connectionline {
   padding: 8px;
   border: 1px solid var(--card-stroke);
   border-radius: var(--card-radius);
-  background: var(--open-flow-node-surface);
+  background: var(--_open-flow-node-surface);
   color: var(--text-4);
   box-shadow: var(--card-shadow);
 }
 
-.CanvasCard_value_56d5c {
+.CanvasCard_value_77a06 {
   --card-shadow: 0 1px 2px rgb(0 0 0 / 3%);
   --card-radius: 12px;
 }
-.CanvasCard_value_56d5c .CanvasCard_preview_56d5c {
+.CanvasCard_value_77a06 .CanvasCard_preview_77a06 {
   border-radius: 6px;
 }
 
-.CanvasCard_comment_56d5c {
+.CanvasCard_comment_77a06 {
   --card-stroke: var(--comment-border);
   --card-selection-stroke: var(--comment-selected-border);
   background: var(--comment-bg);
 }
 
-.CanvasCard_comment_56d5c .CanvasCard_preview_56d5c {
+.CanvasCard_comment_77a06 .CanvasCard_preview_77a06 {
   background: var(--comment-preview-bg);
   border-color: color-mix(in srgb, var(--comment-border) 45%, transparent);
 }
 
-.CanvasCard_selected_56d5c {
+.CanvasCard_selected_77a06 {
   --card-stroke: var(--card-selection-stroke);
   box-shadow: 0 0 0 1px var(--card-stroke), var(--card-shadow);
 }
 
-.CanvasCard_problem_56d5c {
+.CanvasCard_problem_77a06 {
   --card-stroke: var(--accent-red-1);
 }
 
-.CanvasCard_runningBeam_56d5c {
+.CanvasCard_runningBeam_77a06 {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   pointer-events: none;
   fill: none;
-  stroke: var(--open-flow-node-running-beam);
+  stroke: var(--_open-flow-node-running-beam);
   stroke-width: 1px;
-  animation: CanvasCard_running-beam_56d5c 4s linear infinite;
+  animation: CanvasCard_running-beam_77a06 4s linear infinite;
 }
-.CanvasCard_runningBeam_56d5c rect {
+.CanvasCard_runningBeam_77a06 rect {
   width: calc(100% - 1px);
   height: calc(100% - 1px);
   rx: calc(var(--card-radius) - 1px);
 }
 
-@keyframes CanvasCard_running-beam_56d5c {
+@keyframes CanvasCard_running-beam_77a06 {
   from {
     stroke-dashoffset: 0;
   }
@@ -9429,11 +9317,11 @@ svg.react-flow__connectionline {
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  .CanvasCard_runningBeam_56d5c {
+  .CanvasCard_runningBeam_77a06 {
     animation: none;
   }
 }
-.CanvasCard_header_56d5c {
+.CanvasCard_header_77a06 {
   min-height: 58px;
   display: flex;
   align-items: center;
@@ -9441,7 +9329,7 @@ svg.react-flow__connectionline {
   padding: 8px 10px;
 }
 
-.CanvasCard_icon_56d5c {
+.CanvasCard_icon_77a06 {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -9451,11 +9339,11 @@ svg.react-flow__connectionline {
   font-size: 22px;
   color: var(--text-2);
 }
-.CanvasCard_icon_56d5c > :where(img, svg) {
+.CanvasCard_icon_77a06 > :where(img, svg) {
   width: 24px;
   height: 24px;
 }
-.CanvasCard_icon_56d5c:has(> img, > [data-icon-kind=initials]) {
+.CanvasCard_icon_77a06:has(> img, > [data-icon-kind=initials]) {
   --content-icon-initials-background: transparent;
   width: 32px;
   height: 32px;
@@ -9463,19 +9351,19 @@ svg.react-flow__connectionline {
   border: 1px solid color-mix(in srgb, var(--ui-foreground) 14%, transparent);
   border-radius: 11px;
 }
-.CanvasCard_icon_56d5c:has(> img, > [data-icon-kind=initials]) > img {
+.CanvasCard_icon_77a06:has(> img, > [data-icon-kind=initials]) > img {
   width: 20px;
   height: 20px;
 }
 
-.CanvasCard_identity_56d5c {
+.CanvasCard_identity_77a06 {
   display: flex;
   flex: 1;
   min-width: 0;
   flex-direction: column;
   gap: 4px;
 }
-.CanvasCard_identity_56d5c strong {
+.CanvasCard_identity_77a06 strong {
   font-size: 14px;
   font-weight: 600;
   line-height: 20px;
@@ -9483,26 +9371,26 @@ svg.react-flow__connectionline {
   white-space: nowrap;
   text-overflow: ellipsis;
 }
-.CanvasCard_identity_56d5c > span {
+.CanvasCard_identity_77a06 > span {
   font-size: 11px;
   line-height: 15px;
   color: var(--text-2);
 }
 
-.CanvasCard_indicator_56d5c {
+.CanvasCard_indicator_77a06 {
   font-size: 20px;
   transform: translateX(4px);
 }
 
-.CanvasCard_warning_56d5c {
+.CanvasCard_warning_77a06 {
   color: var(--widget-warn-color);
 }
 
-.CanvasCard_danger_56d5c {
+.CanvasCard_danger_77a06 {
   color: var(--accent-red-1);
 }
 
-.CanvasCard_content_56d5c {
+.CanvasCard_content_77a06 {
   padding: 2px 10px 12px;
   font-size: 13px;
   line-height: 1.65;
@@ -9510,51 +9398,51 @@ svg.react-flow__connectionline {
   overflow-wrap: anywhere;
 }
 
-.CanvasCard_preview_56d5c {
+.CanvasCard_preview_77a06 {
   border: 1px solid color-mix(in srgb, var(--node-border-color) 45%, transparent);
   border-radius: 12px;
   background: var(--node-background-color);
   overflow: hidden;
 }
 
-.CanvasCard_footer_56d5c {
+.CanvasCard_footer_77a06 {
   margin: 2px 8px 0;
   padding: 8px 0 2px;
   border-top: 1px solid color-mix(in srgb, var(--node-border-color) 60%, transparent);
 }
 
-.CanvasCard_afterPreview_56d5c {
+.CanvasCard_afterPreview_77a06 {
   margin-top: 4px;
   border-top: 0;
 }
 
-.CanvasCard_branches_56d5c {
+.CanvasCard_branches_77a06 {
   grid-template-columns: minmax(0, 1fr) 12px 84px;
   column-gap: 12px;
   display: grid;
   margin: 0 -8px;
 }
 
-.CanvasCard_collapse_56d5c {
+.CanvasCard_collapse_77a06 {
   display: grid;
   grid-template-rows: 1fr;
   transition: grid-template-rows 200ms ease;
 }
-.CanvasCard_collapse_56d5c[data-hidden=true] {
+.CanvasCard_collapse_77a06[data-hidden=true] {
   grid-template-rows: 0fr;
 }
 
-.CanvasCard_collapseInner_56d5c {
+.CanvasCard_collapseInner_77a06 {
   min-height: 0;
   overflow: hidden;
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .CanvasCard_collapse_56d5c {
+  .CanvasCard_collapse_77a06 {
     transition: none;
   }
 }
-.CanvasCard_compactIdentity_56d5c {
+.CanvasCard_compactIdentity_77a06 {
   container: compact-node-identity/size;
   position: absolute;
   inset: 0;
@@ -9566,29 +9454,29 @@ svg.react-flow__connectionline {
   visibility: hidden;
   pointer-events: none;
 }
-.CanvasCard_compactIdentity_56d5c .CanvasCard_icon_56d5c {
+.CanvasCard_compactIdentity_77a06 .CanvasCard_icon_77a06 {
   width: 36px;
   height: 36px;
   font-size: 32px;
 }
-.CanvasCard_compactIdentity_56d5c .CanvasCard_icon_56d5c > :where(img, svg) {
+.CanvasCard_compactIdentity_77a06 .CanvasCard_icon_77a06 > :where(img, svg) {
   width: 32px;
   height: 32px;
 }
-.CanvasCard_compactIdentity_56d5c .CanvasCard_icon_56d5c:has(> img, > [data-icon-kind=initials]) {
+.CanvasCard_compactIdentity_77a06 .CanvasCard_icon_77a06:has(> img, > [data-icon-kind=initials]) {
   width: 40px;
   height: 40px;
   font-size: 28px;
   border-radius: 13px;
 }
-.CanvasCard_compactIdentity_56d5c .CanvasCard_icon_56d5c:has(> img, > [data-icon-kind=initials]) > img {
+.CanvasCard_compactIdentity_77a06 .CanvasCard_icon_77a06:has(> img, > [data-icon-kind=initials]) > img {
   width: 28px;
   height: 28px;
 }
-.CanvasCard_compactIdentity_56d5c .CanvasCard_indicator_56d5c {
+.CanvasCard_compactIdentity_77a06 .CanvasCard_indicator_77a06 {
   font-size: 30px;
 }
-.CanvasCard_compactIdentity_56d5c strong {
+.CanvasCard_compactIdentity_77a06 strong {
   flex: 1;
   min-width: 0;
   overflow: hidden;
@@ -9600,15 +9488,15 @@ svg.react-flow__connectionline {
   transform: translateY(-1px);
 }
 
-.CanvasCard_compact_56d5c > .CanvasCard_header_56d5c {
+.CanvasCard_compact_77a06 > .CanvasCard_header_77a06 {
   visibility: hidden;
 }
-.CanvasCard_compact_56d5c .CanvasCard_compactIdentity_56d5c {
+.CanvasCard_compact_77a06 .CanvasCard_compactIdentity_77a06 {
   visibility: visible;
 }
 
 @container compact-node-identity (min-height: 72px) {
-  .CanvasCard_compactIdentity_56d5c strong {
+  .CanvasCard_compactIdentity_77a06 strong {
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 2;
@@ -9616,52 +9504,52 @@ svg.react-flow__connectionline {
     overflow-wrap: anywhere;
   }
 }
-.CanvasCard_withBody_56d5c {
+.CanvasCard_withBody_77a06 {
   position: relative;
 }
-.CanvasCard_withBody_56d5c .CanvasCard_compactIdentity_56d5c {
+.CanvasCard_withBody_77a06 .CanvasCard_compactIdentity_77a06 {
   padding: 8px 10px;
 }
 
-.CanvasCard_compactContent_56d5c > :not(.CanvasCard_header_56d5c, .CanvasCard_runningBeam_56d5c) {
+.CanvasCard_compactContent_77a06 > :not(.CanvasCard_header_77a06, .CanvasCard_runningBeam_77a06) {
   visibility: hidden;
 }
 
-.CanvasCard_compactContent_56d5c .CanvasCard_singleContent_56d5c {
+.CanvasCard_compactContent_77a06 .CanvasCard_singleContent_77a06 {
   border-radius: 12px;
   background: var(--node-background-color);
   visibility: visible;
 }
-.CanvasCard_compactContent_56d5c .CanvasCard_singleContent_56d5c > * {
+.CanvasCard_compactContent_77a06 .CanvasCard_singleContent_77a06 > * {
   visibility: hidden;
 }
 
-.CanvasCard_value_56d5c.CanvasCard_compactContent_56d5c .CanvasCard_singleContent_56d5c {
+.CanvasCard_value_77a06.CanvasCard_compactContent_77a06 .CanvasCard_singleContent_77a06 {
   border-radius: 6px;
 }
 
-.CanvasCard_subtitle_56d5c {
+.CanvasCard_subtitle_77a06 {
   display: flex;
   align-items: center;
   gap: 8px;
   min-width: 0;
 }
-.CanvasCard_subtitle_56d5c > span:first-child {
+.CanvasCard_subtitle_77a06 > span:first-child {
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.CanvasCard_fill_56d5c {
+.CanvasCard_fill_77a06 {
   height: 100%;
   display: grid;
   grid-template-rows: auto minmax(0, 1fr);
 }
-.CanvasCard_fill_56d5c > .CanvasCard_singleContent_56d5c,
-.CanvasCard_fill_56d5c .CanvasCard_collapse_56d5c,
-.CanvasCard_fill_56d5c .CanvasCard_collapseInner_56d5c,
-.CanvasCard_fill_56d5c .CanvasCard_preview_56d5c {
+.CanvasCard_fill_77a06 > .CanvasCard_singleContent_77a06,
+.CanvasCard_fill_77a06 .CanvasCard_collapse_77a06,
+.CanvasCard_fill_77a06 .CanvasCard_collapseInner_77a06,
+.CanvasCard_fill_77a06 .CanvasCard_preview_77a06 {
   min-height: 0;
   height: 100%;
 }.NodeContentRows_rows_01c56 {
@@ -11145,7 +11033,7 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
 .markdownPreview_body_c03ca pre:has(code.language-mermaid > svg) {
   text-align: center;
   background-color: transparent;
-}.NodeHead_container_56ebb {
+}.NodeHead_container_e9871 {
   padding: 0 4px;
   background-color: var(--node-head-background-color);
   overflow: hidden;
@@ -11153,71 +11041,71 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
   flex-flow: row nowrap;
   align-items: center;
 }
-.open-flow-canvas-node-minimap1 .NodeHead_container_56ebb {
+.open-flow-canvas-node-minimap1 .NodeHead_container_e9871 {
   visibility: hidden;
 }
-.react-flow__node-input_node .NodeHead_container_56ebb, .react-flow__node-output_node .NodeHead_container_56ebb {
+.react-flow__node-input_node .NodeHead_container_e9871, .react-flow__node-output_node .NodeHead_container_e9871 {
   display: none;
 }
-.react-flow__node-comment_node .NodeHead_container_56ebb {
+.react-flow__node-comment_node .NodeHead_container_e9871 {
   background-color: var(--comment-head-bg);
 }
-.react-flow__node-comment_node .NodeHead_container_56ebb :where(button:has(> i)) {
+.react-flow__node-comment_node .NodeHead_container_e9871 :where(button:has(> i)) {
   color: var(--text-3);
 }
-.react-flow__node-comment_node .NodeHead_container_56ebb :where(button:hover) {
+.react-flow__node-comment_node .NodeHead_container_e9871 :where(button:hover) {
   background-color: var(--comment-hover-bg);
 }
-.react-flow__node-comment_node .NodeHead_container_56ebb :where(button:active) {
+.react-flow__node-comment_node .NodeHead_container_e9871 :where(button:active) {
   background-color: var(--comment-active-bg);
 }
 
-.NodeHead_title_56ebb {
+.NodeHead_title_e9871 {
   flex: 1;
   min-width: 0;
   margin-right: 0.25em;
   font-size: inherit;
   font-weight: 600;
 }
-.NodeHead_title_56ebb > input {
+.NodeHead_title_e9871 > input {
   padding: 0;
   background-color: transparent;
 }
-.NodeHead_title_56ebb > input:focus-visible:not([aria-invalid=true]) {
+.NodeHead_title_e9871 > input:focus-visible:not([aria-invalid=true]) {
   border-color: transparent;
 }
 
-.NodeHead_connection_56ebb {
+.NodeHead_connection_e9871 {
   flex: 0 1 40%;
   max-width: 180px;
   padding: 0 4px;
   font-size: 90%;
 }
 
-.NodeHead_menu_56ebb {
+.NodeHead_menu_e9871 {
   min-width: 176px;
   padding: 6px;
-  border-radius: calc(var(--open-flow-radius) + 2px);
+  border-radius: calc(var(--_open-flow-radius) + 2px);
 }
-.NodeHead_menu_56ebb [data-slot$='menu-item'] {
+.NodeHead_menu_e9871 [data-slot$='menu-item'] {
   min-height: 28px;
   gap: 8px;
   padding: 4px 10px;
-  border-radius: var(--open-flow-radius);
+  border-radius: var(--_open-flow-radius);
 }
-.NodeHead_menu_56ebb [data-slot$='menu-item'] > i,
-.NodeHead_menu_56ebb [data-slot$='menu-item'] > svg {
+.NodeHead_menu_e9871 [data-slot$='menu-item'] > i,
+.NodeHead_menu_e9871 [data-slot$='menu-item'] > svg {
   flex: 0 0 16px;
   width: 16px;
   height: 16px;
 }
 
-.NodeHead_menuButton_56ebb {
+.NodeHead_menuButton_e9871 {
   display: flex;
   align-items: flex-start;
 }
 
-.NodeHead_commentIcon_56ebb, .NodeHead_errorIcon_56ebb {
+.NodeHead_commentIcon_e9871, .NodeHead_errorIcon_e9871 {
   width: var(--icon-size);
   height: var(--icon-size);
   display: flex;
@@ -11227,12 +11115,12 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
   pointer-events: none;
 }
 
-.NodeHead_errorIcon_56ebb {
+.NodeHead_errorIcon_e9871 {
   color: var(--accent-red-1);
   pointer-events: auto;
 }
 
-.NodeHead_blockSettings_56ebb {
+.NodeHead_blockSettings_e9871 {
   align-self: flex-start;
   position: absolute;
   left: 100%;
@@ -11240,9 +11128,8 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
   width: 400px;
 }
 
-.NodeHead_floatBar_56ebb {
+.NodeHead_floatBar_e9871 {
   --ui-control-radius: 8px;
-  --ui-popover: var(--open-flow-popover, var(--widget-popup-background));
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
@@ -11251,22 +11138,22 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
   padding: 3px;
   border: 1px solid var(--node-border-color);
   border-radius: calc(var(--ui-control-radius) + 4px);
-  background: var(--ui-popover);
+  background: var(--_open-flow-popover);
   color: var(--ui-muted-foreground);
   box-shadow: var(--floating-control-shadow);
   --icon-font-size: 16px;
   --icon-size: 32px;
 }
 
-.NodeHead_floatBarButton_56ebb {
+.NodeHead_floatBarButton_e9871 {
   font-size: var(--icon-font-size);
 }
-.NodeHead_floatBarButton_56ebb[data-danger]:is(:hover, :focus-visible) {
+.NodeHead_floatBarButton_e9871[data-danger]:is(:hover, :focus-visible) {
   color: var(--ui-destructive);
   background-color: color-mix(in srgb, var(--ui-destructive) 10%, transparent);
 }
 
-.NodeHead_nodeIcon_56ebb {
+.NodeHead_nodeIcon_e9871 {
   flex: none;
   display: grid;
   place-items: center;
@@ -11277,7 +11164,7 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
   background: color-mix(in srgb, var(--brand-highlight-color) 9%, var(--node-background-color));
 }
 
-.NodeHead_action_56ebb {
+.NodeHead_action_e9871 {
   width: var(--icon-size);
   height: var(--icon-size);
   padding: 0;
@@ -11441,163 +11328,163 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
 }
 .open-flow-canvas-node-minimap2 .NodeMinimap_wrapper_e79d7 {
   font-size: calc(0.75rem * var(--open-flow-canvas-scale, 1));
-}.ReactFlowContainer_container_ebe22 {
+}.ReactFlowContainer_container_b3d0e {
   width: 100%;
   height: 100%;
   position: relative;
   container: open-flow-canvas-controls/inline-size;
 }
 
-.ReactFlowContainer_flow_ebe22 {
+.ReactFlowContainer_flow_b3d0e {
   position: relative;
   outline: none !important;
   scrollbar-color: rgba(121, 121, 121, 0.4) transparent;
   --xy-background-color: var(--flow-bg);
 }
-.ReactFlowContainer_flow_ebe22.react-flow.open-flow-canvas {
+.ReactFlowContainer_flow_b3d0e.react-flow.open-flow-canvas {
   --xy-edge-stroke-width-default: 2;
 }
-.ReactFlowContainer_flow_ebe22 ::-webkit-scrollbar-corner,
-.ReactFlowContainer_flow_ebe22 ::-webkit-resizer {
+.ReactFlowContainer_flow_b3d0e ::-webkit-scrollbar-corner,
+.ReactFlowContainer_flow_b3d0e ::-webkit-resizer {
   border: none;
   outline: none;
   background: no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 36 36'%3E%3Ccircle cx='12' cy='24' r='1.5' fill='%23888888' class='clr-i-outline clr-i-outline-path-1'/%3E%3Ccircle cx='18' cy='24' r='1.5' fill='%23888888' class='clr-i-outline clr-i-outline-path-2'/%3E%3Ccircle cx='18' cy='18' r='1.5' fill='%23888888' class='clr-i-outline clr-i-outline-path-3'/%3E%3Ccircle cx='24' cy='12' r='1.5' fill='%23888888' class='clr-i-outline clr-i-outline-path-4'/%3E%3Ccircle cx='24' cy='24' r='1.5' fill='%23888888' class='clr-i-outline clr-i-outline-path-5'/%3E%3Ccircle cx='24' cy='18' r='1.5' fill='%23888888' class='clr-i-outline clr-i-outline-path-6'/%3E%3Cpath fill='none' d='M0 0h36v36H0z'/%3E%3C/svg%3E");
 }
-.ReactFlowContainer_flow_ebe22 > .react-flow__renderer {
+.ReactFlowContainer_flow_b3d0e > .react-flow__renderer {
   overflow: clip;
 }
-.ReactFlowContainer_flow_ebe22 *,
-.ReactFlowContainer_flow_ebe22 *::before,
-.ReactFlowContainer_flow_ebe22 *::after {
+.ReactFlowContainer_flow_b3d0e *,
+.ReactFlowContainer_flow_b3d0e *::before,
+.ReactFlowContainer_flow_b3d0e *::after {
   box-sizing: border-box;
 }
-.ReactFlowContainer_flow_ebe22 .react-flow__pane.selection,
-.ReactFlowContainer_flow_ebe22 .react-flow__node,
-.ReactFlowContainer_flow_ebe22 .react-flow__edge {
+.ReactFlowContainer_flow_b3d0e .react-flow__pane.selection,
+.ReactFlowContainer_flow_b3d0e .react-flow__node,
+.ReactFlowContainer_flow_b3d0e .react-flow__edge {
   cursor: auto !important;
 }
-.ReactFlowContainer_flow_ebe22.touchpad .react-flow__pane.draggable .react-flow__node {
+.ReactFlowContainer_flow_b3d0e.touchpad .react-flow__pane.draggable .react-flow__node {
   pointer-events: none !important;
 }
-.ReactFlowContainer_flow_ebe22 .react-flow__controls {
+.ReactFlowContainer_flow_b3d0e .react-flow__controls {
   width: auto;
   overflow: visible;
 }
-.ReactFlowContainer_flow_ebe22 .react-flow__controls-button path {
+.ReactFlowContainer_flow_b3d0e .react-flow__controls-button path {
   fill: currentColor;
 }
-.ReactFlowContainer_flow_ebe22 .react-flow__nodesselection-rect:focus,
-.ReactFlowContainer_flow_ebe22 .react-flow__nodesselection-rect:focus-visible,
-.ReactFlowContainer_flow_ebe22 .react-flow__selection:focus,
-.ReactFlowContainer_flow_ebe22 .react-flow__selection:focus-visible {
+.ReactFlowContainer_flow_b3d0e .react-flow__nodesselection-rect:focus,
+.ReactFlowContainer_flow_b3d0e .react-flow__nodesselection-rect:focus-visible,
+.ReactFlowContainer_flow_b3d0e .react-flow__selection:focus,
+.ReactFlowContainer_flow_b3d0e .react-flow__selection:focus-visible {
   outline: none !important;
 }
-.ReactFlowContainer_flow_ebe22:has(.ReactFlowContainer_contextMenu_ebe22) .react-flow__nodesselection-rect {
+.ReactFlowContainer_flow_b3d0e:has(.ReactFlowContainer_contextMenu_b3d0e) .react-flow__nodesselection-rect {
   pointer-events: none;
 }
-.ReactFlowContainer_flow_ebe22 .react-flow__viewport > .isolate {
+.ReactFlowContainer_flow_b3d0e .react-flow__viewport > .isolate {
   pointer-events: all;
 }
-.ReactFlowContainer_flow_ebe22 button > i {
+.ReactFlowContainer_flow_b3d0e button > i {
   cursor: inherit;
 }
 
-.ReactFlowContainer_movingLayout_ebe22 .react-flow__node {
+.ReactFlowContainer_movingLayout_b3d0e .react-flow__node {
   transition: transform var(--layout-transition-duration) cubic-bezier(0.22, 1, 0.36, 1);
 }
 
-.ReactFlowContainer_layoutPending_ebe22 .react-flow__viewport {
+.ReactFlowContainer_layoutPending_b3d0e .react-flow__viewport {
   opacity: 0;
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .ReactFlowContainer_movingLayout_ebe22 .react-flow__node {
+  .ReactFlowContainer_movingLayout_b3d0e .react-flow__node {
     transition: none;
   }
-  .ReactFlowContainer_flow_ebe22 .react-flow__controls-button {
+  .ReactFlowContainer_flow_b3d0e .react-flow__controls-button {
     transition: none;
   }
 }
-.ReactFlowContainer_contextMenu_ebe22 {
+.ReactFlowContainer_contextMenu_b3d0e {
   min-width: 176px;
   padding: 6px;
-  border-radius: calc(var(--open-flow-radius) + 2px);
+  border-radius: calc(var(--_open-flow-radius) + 2px);
 }
-.ReactFlowContainer_contextMenu_ebe22 [data-slot$='menu-item'] {
+.ReactFlowContainer_contextMenu_b3d0e [data-slot$='menu-item'] {
   min-height: 28px;
   gap: 8px;
   padding: 4px 10px;
-  border-radius: var(--open-flow-radius);
+  border-radius: var(--_open-flow-radius);
 }
-.ReactFlowContainer_contextMenu_ebe22 [data-slot$='menu-item'] > i,
-.ReactFlowContainer_contextMenu_ebe22 [data-slot$='menu-item'] > svg {
+.ReactFlowContainer_contextMenu_b3d0e [data-slot$='menu-item'] > i,
+.ReactFlowContainer_contextMenu_b3d0e [data-slot$='menu-item'] > svg {
   flex: 0 0 16px;
   width: 16px;
   height: 16px;
 }
 
-.ReactFlowContainer_dock_ebe22 {
+.ReactFlowContainer_dock_b3d0e {
   margin-bottom: 22px;
   max-width: calc(100% - 32px);
 }
 
-.ReactFlowContainer_viewDock_ebe22 {
+.ReactFlowContainer_viewDock_b3d0e {
   z-index: 6;
 }
-.ReactFlowContainer_viewDock_ebe22 > [data-size] {
+.ReactFlowContainer_viewDock_b3d0e > [data-size] {
   height: 28px;
   width: 28px;
 }
-.ReactFlowContainer_viewDock_ebe22 [data-size] {
+.ReactFlowContainer_viewDock_b3d0e [data-size] {
   color: var(--ui-muted-foreground);
 }
-.ReactFlowContainer_viewDock_ebe22 [data-size]:is(:hover, :focus-visible) {
+.ReactFlowContainer_viewDock_b3d0e [data-size]:is(:hover, :focus-visible) {
   color: var(--ui-foreground);
 }
-.ReactFlowContainer_viewDock_ebe22 [data-size] > i {
+.ReactFlowContainer_viewDock_b3d0e [data-size] > i {
   width: 16px;
   height: 16px;
   flex: none;
   font-size: 16px;
 }
 
-.ReactFlowContainer_expandedViewControls_ebe22,
-.ReactFlowContainer_viewOptionButtons_ebe22 {
+.ReactFlowContainer_expandedViewControls_b3d0e,
+.ReactFlowContainer_viewOptionButtons_b3d0e {
   display: flex;
   align-items: center;
   gap: 2px;
 }
-.ReactFlowContainer_expandedViewControls_ebe22 > [data-size],
-.ReactFlowContainer_viewOptionButtons_ebe22 > [data-size] {
+.ReactFlowContainer_expandedViewControls_b3d0e > [data-size],
+.ReactFlowContainer_viewOptionButtons_b3d0e > [data-size] {
   height: 28px;
 }
-.ReactFlowContainer_expandedViewControls_ebe22 > [data-size=icon],
-.ReactFlowContainer_viewOptionButtons_ebe22 > [data-size=icon] {
+.ReactFlowContainer_expandedViewControls_b3d0e > [data-size=icon],
+.ReactFlowContainer_viewOptionButtons_b3d0e > [data-size=icon] {
   width: 28px;
 }
 
-.ReactFlowContainer_compactViewControls_ebe22 {
+.ReactFlowContainer_compactViewControls_b3d0e {
   display: none;
 }
-.ReactFlowContainer_compactViewControls_ebe22 [data-size] {
+.ReactFlowContainer_compactViewControls_b3d0e [data-size] {
   height: 28px;
   font-size: 11px;
   font-variant-numeric: tabular-nums;
 }
 
 @container open-flow-canvas-controls (width <= 900px) {
-  .ReactFlowContainer_viewDock_ebe22[data-readonly=false] .ReactFlowContainer_expandedViewControls_ebe22 {
+  .ReactFlowContainer_viewDock_b3d0e[data-readonly=false] .ReactFlowContainer_expandedViewControls_b3d0e {
     display: none;
   }
-  .ReactFlowContainer_viewDock_ebe22[data-readonly=false] .ReactFlowContainer_compactViewControls_ebe22 {
+  .ReactFlowContainer_viewDock_b3d0e[data-readonly=false] .ReactFlowContainer_compactViewControls_b3d0e {
     display: block;
   }
 }
-.ReactFlowContainer_createDock_ebe22 {
+.ReactFlowContainer_createDock_b3d0e {
   gap: 5px;
 }
 
-.ReactFlowContainer_zoomValue_ebe22 {
+.ReactFlowContainer_zoomValue_b3d0e {
   min-width: 40px;
   padding-inline: 5px;
   color: var(--ui-muted-foreground);
@@ -11605,26 +11492,26 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
   font-variant-numeric: tabular-nums;
 }
 
-.ReactFlowContainer_interactiveModeTrigger_ebe22 > [data-mode-icon] {
+.ReactFlowContainer_interactiveModeTrigger_b3d0e > [data-mode-icon] {
   width: 16px;
   height: 16px;
   flex: none;
   font-size: 16px;
 }
 
-.ReactFlowContainer_interactiveModePanel_ebe22.ReactFlowContainer_interactiveModePanel_ebe22 {
+.ReactFlowContainer_interactiveModePanel_b3d0e.ReactFlowContainer_interactiveModePanel_b3d0e {
   width: min(360px, 100cqw - 32px);
   padding: 10px;
 }
 
-.ReactFlowContainer_interactiveModeChoices_ebe22.ReactFlowContainer_interactiveModeChoices_ebe22 {
+.ReactFlowContainer_interactiveModeChoices_b3d0e.ReactFlowContainer_interactiveModeChoices_b3d0e {
   display: grid;
   width: 100%;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 8px;
 }
 
-.ReactFlowContainer_interactiveModeChoice_ebe22.ReactFlowContainer_interactiveModeChoice_ebe22 {
+.ReactFlowContainer_interactiveModeChoice_b3d0e.ReactFlowContainer_interactiveModeChoice_b3d0e {
   width: 100%;
   height: auto;
   min-height: 140px;
@@ -11635,56 +11522,56 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
   text-align: center;
   white-space: normal;
 }
-.ReactFlowContainer_interactiveModeChoice_ebe22.ReactFlowContainer_interactiveModeChoice_ebe22[aria-checked=true] {
+.ReactFlowContainer_interactiveModeChoice_b3d0e.ReactFlowContainer_interactiveModeChoice_b3d0e[aria-checked=true] {
   border-color: var(--ui-primary);
   background: var(--ui-secondary);
   color: var(--ui-foreground);
 }
-.ReactFlowContainer_interactiveModeChoice_ebe22.ReactFlowContainer_interactiveModeChoice_ebe22 > i {
+.ReactFlowContainer_interactiveModeChoice_b3d0e.ReactFlowContainer_interactiveModeChoice_b3d0e > i {
   color: var(--ui-muted-foreground);
   width: 28px;
   height: 28px;
   font-size: 28px;
 }
-.ReactFlowContainer_interactiveModeChoice_ebe22.ReactFlowContainer_interactiveModeChoice_ebe22:is(:hover, :focus-visible, [aria-checked=true]) > i {
+.ReactFlowContainer_interactiveModeChoice_b3d0e.ReactFlowContainer_interactiveModeChoice_b3d0e:is(:hover, :focus-visible, [aria-checked=true]) > i {
   color: var(--ui-foreground);
 }
-.ReactFlowContainer_interactiveModeChoice_ebe22.ReactFlowContainer_interactiveModeChoice_ebe22 > strong {
+.ReactFlowContainer_interactiveModeChoice_b3d0e.ReactFlowContainer_interactiveModeChoice_b3d0e > strong {
   font-size: 13px;
   font-weight: 500;
   line-height: 1.5;
 }
-.ReactFlowContainer_interactiveModeChoice_ebe22.ReactFlowContainer_interactiveModeChoice_ebe22 > span {
+.ReactFlowContainer_interactiveModeChoice_b3d0e.ReactFlowContainer_interactiveModeChoice_b3d0e > span {
   color: var(--ui-muted-foreground);
   font-size: 12px;
   font-weight: 400;
   line-height: 1.5;
 }
 
-.ReactFlowContainer_dockActions_ebe22 {
+.ReactFlowContainer_dockActions_b3d0e {
   display: flex;
   align-items: center;
   gap: 5px;
 }
 
 @container open-flow-workbench (max-width: 720px) {
-  .ReactFlowContainer_dock_ebe22 {
+  .ReactFlowContainer_dock_b3d0e {
     padding: 5px;
     margin-bottom: 14px;
   }
-  .ReactFlowContainer_dockActions_ebe22 {
+  .ReactFlowContainer_dockActions_b3d0e {
     gap: 3px;
   }
 }
 @container open-flow-workbench (max-width: 560px) {
-  .ReactFlowContainer_interactiveModeChoices_ebe22.ReactFlowContainer_interactiveModeChoices_ebe22 {
+  .ReactFlowContainer_interactiveModeChoices_b3d0e.ReactFlowContainer_interactiveModeChoices_b3d0e {
     grid-template-columns: 1fr;
   }
-  .ReactFlowContainer_interactiveModeChoice_ebe22.ReactFlowContainer_interactiveModeChoice_ebe22 {
+  .ReactFlowContainer_interactiveModeChoice_b3d0e.ReactFlowContainer_interactiveModeChoice_b3d0e {
     min-height: 120px;
   }
 }
-.ReactFlowContainer_miniMap_ebe22.react-flow__panel {
+.ReactFlowContainer_miniMap_b3d0e.react-flow__panel {
   bottom: calc(100% + 8px);
   left: 0;
   margin: 0;
@@ -11694,29 +11581,29 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
   border-radius: var(--ui-radius);
 }
 
-.ReactFlowContainer_viewOptions_ebe22 {
+.ReactFlowContainer_viewOptions_b3d0e {
   display: grid;
   grid-template-columns: 0fr;
   opacity: 0;
   visibility: hidden;
   transition: grid-template-columns 180ms ease, opacity 180ms ease, visibility 180ms;
 }
-.ReactFlowContainer_viewOptions_ebe22[data-expanded=true] {
+.ReactFlowContainer_viewOptions_b3d0e[data-expanded=true] {
   grid-template-columns: 1fr;
   opacity: 1;
   visibility: visible;
 }
 
-.ReactFlowContainer_viewOptionsClip_ebe22 {
+.ReactFlowContainer_viewOptionsClip_b3d0e {
   min-width: 0;
   overflow: hidden;
 }
 
-.ReactFlowContainer_viewOptionButtons_ebe22 {
+.ReactFlowContainer_viewOptionButtons_b3d0e {
   width: max-content;
 }
 
-.ReactFlowContainer_viewSeparator_ebe22 {
+.ReactFlowContainer_viewSeparator_b3d0e {
   width: 1px;
   height: 16px;
   margin-inline: 4px;
@@ -11724,31 +11611,10 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .ReactFlowContainer_viewOptions_ebe22 {
+  .ReactFlowContainer_viewOptions_b3d0e {
     transition: none;
   }
-}.open-flow-canvas-root :where(.react-flow__controls, [data-canvas-control-scope]) {
-  --ui-background: var(--open-flow-background, var(--fill-1));
-  --ui-foreground: var(--open-flow-foreground, var(--text-5));
-  --ui-card: var(--open-flow-card, var(--widget-popup-background));
-  --ui-card-foreground: var(--open-flow-card-foreground, var(--widget-font-color));
-  --ui-popover: var(--open-flow-popover, var(--widget-popup-background));
-  --ui-popover-foreground: var(--open-flow-popover-foreground, var(--widget-font-color));
-  --ui-primary: var(--open-flow-primary, var(--brand-highlight-color));
-  --ui-primary-foreground: var(--open-flow-primary-foreground, var(--widget-font-highlight-color));
-  --ui-secondary: var(--open-flow-secondary, var(--fill-4));
-  --ui-secondary-foreground: var(--open-flow-secondary-foreground, var(--text-4));
-  --ui-muted: var(--open-flow-muted, var(--fill-4));
-  --ui-muted-foreground: var(--open-flow-muted-foreground, var(--text-2));
-  --ui-accent: var(--open-flow-accent, var(--fill-5));
-  --ui-accent-foreground: var(--open-flow-accent-foreground, var(--text-5));
-  --ui-destructive: var(--open-flow-destructive, var(--accent-red-1));
-  --ui-border: var(--open-flow-border, var(--border-2));
-  --ui-input: var(--open-flow-input, var(--border-2));
-  --ui-ring: var(--open-flow-ring, var(--brand-highlight-color));
-  --ui-radius: var(--open-flow-radius, 6px);
-}
-.open-flow-canvas-root .react-flow__controls.horizontal {
+}.open-flow-canvas-root .react-flow__controls.horizontal {
   flex-direction: row !important;
 }
 .open-flow-canvas-root .react-flow__controls:is(.horizontal, .vertical) > [data-slot=button] {