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

package/dist/browser/ui.css

@@ -148,6 +148,7 @@
   --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);
@@ -207,7 +208,7 @@
 .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-background: var(--open-flow-control-background, var(--_open-flow-node-content));
   --ui-control-hover-background: var(--_open-flow-secondary);
 }
 
@@ -411,7 +412,7 @@
   --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-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;
@@ -642,6 +643,9 @@
 
   :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root), :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) *, :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) :before, :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) :after {
     box-sizing: border-box;
+    --tw-translate-x: 0;
+    --tw-translate-y: 0;
+    --tw-translate-z: 0;
   }
 
   :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) button, :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) input, :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) select, :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) textarea {
@@ -835,6 +839,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;
   }
@@ -901,6 +909,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;
   }
@@ -1213,6 +1225,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);
   }
@@ -1305,10 +1321,6 @@
     max-height: calc(var(--spacing) * 64);
   }
 
-  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .max-h-96 {
-    max-height: calc(var(--spacing) * 96);
-  }
-
   :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .max-h-\[70vh\] {
     max-height: 70vh;
   }
@@ -1317,6 +1329,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;
   }
@@ -1333,6 +1349,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));
   }
@@ -1341,6 +1361,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);
   }
@@ -1437,6 +1461,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);
   }
@@ -1445,6 +1473,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);
   }
@@ -1533,6 +1565,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);
   }
@@ -1657,10 +1693,18 @@
     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;
   }
@@ -1881,6 +1925,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;
   }
@@ -2053,6 +2101,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;
@@ -2201,6 +2253,11 @@
     border-left-width: 1px;
   }
 
+  :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);
   }
@@ -2385,16 +2442,6 @@
     }
   }
 
-  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .bg-foreground\/5 {
-    background-color: var(--ui-foreground);
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .bg-foreground\/5 {
-      background-color: color-mix(in oklab, var(--ui-foreground) 5%, transparent);
-    }
-  }
-
   :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .bg-foreground\/\[0\.03\] {
     background-color: var(--ui-foreground);
   }
@@ -2601,6 +2648,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;
   }
@@ -3012,10 +3063,6 @@
     text-underline-offset: 4px;
   }
 
-  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .opacity-0 {
-    opacity: 0;
-  }
-
   :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .opacity-40 {
     opacity: .4;
   }
@@ -3647,6 +3694,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);
   }
@@ -3728,7 +3784,7 @@
       }
     }
 
-    :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .hover\:bg-foreground:hover, :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .hover\:bg-foreground\/7:hover {
+    :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .hover\:bg-foreground\/7:hover {
       background-color: var(--ui-foreground);
     }
 
@@ -5011,10 +5067,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);
     }
@@ -5047,6 +5131,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;
     }
@@ -5244,7 +5332,7 @@
         }
       }
 
-      :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 {
+      :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:hover\:bg-foreground\/7:hover {
         background-color: var(--ui-foreground);
       }
 
@@ -5818,14 +5906,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);
   }
 }

package/dist/browser/ui.js

@@ -13188,10 +13188,11 @@ function DialogOverlay({ className, ...props }) {
 		...props
 	});
 }
-function DialogContent$1({ children, className, closeLabel = "Close", container, showCloseButton = true, ...props }) {
+var DialogContent$1 = React.forwardRef(function DialogContent({ children, className, closeLabel = "Close", container, showCloseButton = true, ...props }, ref) {
 	return /* @__PURE__ */ jsxs(DialogPortal, {
 		container,
 		children: [/* @__PURE__ */ jsx(DialogOverlay, {}), /* @__PURE__ */ jsxs(DialogPopup, {
+			ref,
 			"data-slot": "dialog-content",
 			className: cn("fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] grid-cols-[minmax(0,1fr)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-lg bg-popover [--ui-control-background:var(--ui-popover)] p-4 text-sm text-popover-foreground shadow-lg ring-1 ring-foreground/10 outline-none sm:max-w-sm transition-opacity duration-150 ease-out data-starting-style:opacity-0 data-ending-style:opacity-0 motion-reduce:transition-none", className),
 			...props,
@@ -13214,7 +13215,7 @@ function DialogContent$1({ children, className, closeLabel = "Close", container,
 			})] })]
 		})]
 	});
-}
+});
 function DialogHeader$1({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "dialog-header",