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

package/dist/browser/ui.css

@@ -91,109 +91,91 @@
 }
 
 .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-control-background: var(--open-flow-control-background);
+  --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 +201,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-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 +313,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 +341,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 +387,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 +398,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 +408,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-background: var(--open-flow-control-background, var(--fill-3));
+  --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 +449,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 +459,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 +472,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 +500,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 +511,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);
 }
@@ -963,6 +836,10 @@
     order: 9999;
   }
 
+  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .col-span-2 {
+    grid-column: span 2 / span 2;
+  }
+
   :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .col-span-full {
     grid-column: 1 / -1;
   }
@@ -1029,6 +906,10 @@
     margin: calc(var(--spacing) * 2);
   }
 
+  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .m-4 {
+    margin: calc(var(--spacing) * 4);
+  }
+
   :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .m-auto {
     margin: auto;
   }
@@ -1341,6 +1222,10 @@
     height: calc(var(--spacing) * 10);
   }
 
+  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .h-16 {
+    height: calc(var(--spacing) * 16);
+  }
+
   :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .h-80 {
     height: calc(var(--spacing) * 80);
   }
@@ -1445,6 +1330,10 @@
     max-height: 80dvh;
   }
 
+  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .max-h-\[80vh\] {
+    max-height: 80vh;
+  }
+
   :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .max-h-\[85dvh\] {
     max-height: 85dvh;
   }
@@ -1461,6 +1350,10 @@
     max-height: min(40vh, 280px);
   }
 
+  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .max-h-\[min\(50vh\,360px\)\] {
+    max-height: min(50vh, 360px);
+  }
+
   :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .max-h-\[min\(50vh\,360px\,calc\(var\(--available-height\)-0\.5rem\)\)\] {
     max-height: min(50vh, 360px, calc(var(--available-height) - .5rem));
   }
@@ -1469,6 +1362,10 @@
     max-height: min(60dvh, 480px);
   }
 
+  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .max-h-\[min\(60vh\,32rem\)\] {
+    max-height: min(60vh, 32rem);
+  }
+
   :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .max-h-\[min\(60vh\,360px\)\] {
     max-height: min(60vh, 360px);
   }
@@ -1505,6 +1402,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);
   }
@@ -1561,6 +1462,10 @@
     width: calc(var(--spacing) * 16);
   }
 
+  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .w-24 {
+    width: calc(var(--spacing) * 24);
+  }
+
   :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .w-28 {
     width: calc(var(--spacing) * 28);
   }
@@ -1569,6 +1474,10 @@
     width: calc(var(--spacing) * 36);
   }
 
+  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .w-40 {
+    width: calc(var(--spacing) * 40);
+  }
+
   :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .w-44 {
     width: calc(var(--spacing) * 44);
   }
@@ -1585,6 +1494,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);
   }
@@ -1653,6 +1566,10 @@
     max-width: calc(var(--spacing) * 40);
   }
 
+  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .max-w-48 {
+    max-width: calc(var(--spacing) * 48);
+  }
+
   :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .max-w-64 {
     max-width: calc(var(--spacing) * 64);
   }
@@ -1773,10 +1690,22 @@
     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-30 {
+    flex-basis: calc(var(--spacing) * 30);
+  }
+
   :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .basis-48 {
     flex-basis: calc(var(--spacing) * 48);
   }
 
+  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .table-fixed {
+    table-layout: fixed;
+  }
+
   :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .border-collapse {
     border-collapse: collapse;
   }
@@ -1833,6 +1762,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);
   }
@@ -1993,6 +1926,10 @@
     align-items: center;
   }
 
+  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .items-end {
+    align-items: flex-end;
+  }
+
   :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .items-start {
     align-items: flex-start;
   }
@@ -2165,6 +2102,10 @@
     align-self: stretch;
   }
 
+  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .justify-self-start {
+    justify-self: flex-start;
+  }
+
   :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .truncate {
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -2313,13 +2254,18 @@
     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-dashed {
+    --tw-border-style: dashed;
+    border-style: dashed;
+  }
+
+  :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 +2279,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 +2359,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\)\)\] {
@@ -2713,6 +2659,10 @@
     padding-block: calc(var(--spacing) * 4);
   }
 
+  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .py-8 {
+    padding-block: calc(var(--spacing) * 8);
+  }
+
   :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .py-\[5px\] {
     padding-block: 5px;
   }
@@ -3090,6 +3040,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;
   }
@@ -3755,6 +3709,15 @@
     margin-bottom: 0;
   }
 
+  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .last\:border-0:last-child {
+    border-style: var(--tw-border-style);
+    border-width: 0;
+  }
+
+  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .last\:pb-0:last-child {
+    padding-bottom: 0;
+  }
+
   :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .last\:pb-1:last-child {
     padding-bottom: var(--spacing);
   }
@@ -3772,13 +3735,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%);
       }
     }
 
@@ -5119,10 +5082,38 @@
   }
 
   @media (min-width: 40rem) {
+    :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .sm\:col-span-1 {
+      grid-column: span 1 / span 1;
+    }
+
+    :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .sm\:col-start-2 {
+      grid-column-start: 2;
+    }
+
+    :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .sm\:col-start-3 {
+      grid-column-start: 3;
+    }
+
+    :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .sm\:row-start-1 {
+      grid-row-start: 1;
+    }
+
+    :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .sm\:w-3\/5 {
+      width: 60%;
+    }
+
+    :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .sm\:w-20 {
+      width: calc(var(--spacing) * 20);
+    }
+
     :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .sm\:w-56 {
       width: calc(var(--spacing) * 56);
     }
 
+    :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .sm\:w-auto {
+      width: auto;
+    }
+
     :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .sm\:max-w-2xl {
       max-width: var(--container-2xl);
     }
@@ -5155,6 +5146,10 @@
       grid-template-columns: repeat(2, minmax(0, 1fr));
     }
 
+    :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .sm\:grid-cols-\[minmax\(0\,1fr\)_auto_auto\] {
+      grid-template-columns: minmax(0, 1fr) auto auto;
+    }
+
     :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .sm\:flex-row {
       flex-direction: row;
     }
@@ -5202,6 +5197,10 @@
     :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .lg\:grid-cols-2 {
       grid-template-columns: repeat(2, minmax(0, 1fr));
     }
+
+    :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .lg\:grid-cols-\[minmax\(280px\,360px\)_minmax\(0\,1fr\)\] {
+      grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
+    }
   }
 
   @media (min-width: 80rem) {
@@ -5240,283 +5239,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);
+      }
     }
   }
 
@@ -5924,14 +5925,14 @@
 }
 
 @supports (position-anchor: --open-flow-canvas) {
-  [data-sonner-toaster].open-flow-notifications[data-sonner-theme][data-x-position="center"] {
+  :root:not(:has([data-slot="dialog-content"])) [data-sonner-toaster].open-flow-notifications[data-sonner-theme][data-x-position="center"] {
     position-anchor: --open-flow-canvas;
     left: anchor(center, 50%);
     max-width: calc(anchor-size(width, 100%) - 24px);
     transform: translateX(-50%);
   }
 
-  [data-sonner-toaster].open-flow-notifications[data-sonner-theme][data-x-position="center"][data-y-position="top"] {
+  :root:not(:has([data-slot="dialog-content"])) [data-sonner-toaster].open-flow-notifications[data-sonner-theme][data-x-position="center"][data-y-position="top"] {
     top: calc(anchor(top, calc(var(--offset-top) - 16px)) + 16px);
   }
 }