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

package/dist/browser/ui.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);
+      }
     }
   }