@oomol-lab/open-flow 0.1.0-beta.65 → 0.1.0-beta.66

package/dist/browser/ui.css

@@ -1439,6 +1439,10 @@
     max-height: min(40vh, 280px);
   }
 
+  :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));
+  }
+
   :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .max-h-\[min\(60dvh\,480px\)\] {
     max-height: min(60dvh, 480px);
   }
@@ -1883,6 +1887,10 @@
     grid-template-columns: minmax(0, 1fr);
   }
 
+  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .grid-cols-\[minmax\(0\,1fr\)_380px\] {
+    grid-template-columns: minmax(0, 1fr) 380px;
+  }
+
   :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .grid-cols-\[minmax\(0\,1fr\)_auto\] {
     grid-template-columns: minmax(0, 1fr) auto;
   }
@@ -2427,7 +2435,17 @@
     }
   }
 
-  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .bg-foreground, :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .bg-foreground\/5 {
+  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .bg-foreground, :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .bg-foreground\/3 {
+    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\/3 {
+      background-color: color-mix(in oklab, var(--ui-foreground) 3%, transparent);
+    }
+  }
+
+  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .bg-foreground\/5 {
     background-color: var(--ui-foreground);
   }
 
@@ -2717,6 +2735,10 @@
     padding-left: calc(var(--spacing) * 4);
   }
 
+  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .pl-6 {
+    padding-left: calc(var(--spacing) * 6);
+  }
+
   :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .pl-8 {
     padding-left: calc(var(--spacing) * 8);
   }
@@ -3726,7 +3748,17 @@
       }
     }
 
-    :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\/10:hover {
+    :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 {
+      background-color: var(--ui-foreground);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .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) .hover\:bg-foreground\/10:hover {
       background-color: var(--ui-foreground);
     }
 
@@ -4813,6 +4845,33 @@
     outline-offset: calc(-1 * var(--ui-danger-border-width, 1px));
   }
 
+  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .data-\[slot\=select-trigger\]\:focus-visible\:text-field-focus[data-slot="select-trigger"]:focus-visible {
+    outline: 2px solid var(--ui-ring);
+    outline-offset: -1px;
+    box-shadow: none;
+    transition-property: color, background-color;
+  }
+
+  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .data-\[slot\=select-trigger\]\:focus-visible\:text-field-focus[data-slot="select-trigger"]:focus-visible[readonly] {
+    outline: var(--ui-readonly-focus-outline, 2px solid var(--ui-ring));
+  }
+
+  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .data-\[slot\=select-trigger\]\:focus-visible\:aria-invalid\:invalid-text-field-focus[data-slot="select-trigger"]:focus-visible[aria-invalid="true"] {
+    outline: 2px solid var(--ui-ring);
+    outline-offset: -1px;
+    box-shadow: none;
+    transition-property: color, background-color;
+  }
+
+  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .data-\[slot\=select-trigger\]\:focus-visible\:aria-invalid\:invalid-text-field-focus[data-slot="select-trigger"]:focus-visible[aria-invalid="true"][readonly] {
+    outline: var(--ui-readonly-focus-outline, 2px solid var(--ui-ring));
+  }
+
+  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .data-\[slot\=select-trigger\]\:focus-visible\:aria-invalid\:invalid-text-field-focus[data-slot="select-trigger"]:focus-visible[aria-invalid="true"] {
+    outline-color: var(--ui-destructive);
+    outline-offset: calc(-1 * var(--ui-danger-border-width, 1px));
+  }
+
   :is(:where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .\*\:data-\[slot\=select-value\]\:line-clamp-1 > *)[data-slot="select-value"] {
     -webkit-line-clamp: 1;
     -webkit-box-orient: vertical;
@@ -5184,7 +5243,17 @@
       }
     }
 
-    :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\/10:where([data-theme="dark"], [data-theme="dark"] *):hover {
+    :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);
+    }
+
+    @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\:hover\:bg-foreground\/10:where([data-theme="dark"], [data-theme="dark"] *):hover {
       background-color: var(--ui-foreground);
     }
 
@@ -5754,6 +5823,19 @@
   font-family: inherit;
 }
 
+@supports (position-anchor: --open-flow-canvas) {
+  [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"] {
+    top: calc(anchor(top, calc(var(--offset-top) - 16px)) + 16px);
+  }
+}
+
 [data-sonner-toaster].open-flow-notifications[data-sonner-theme] [data-sonner-toast] {
   transition-duration: .3s;
 }

package/dist/browser/ui.js

@@ -19617,12 +19617,13 @@ var themeIcons = {
 	dark: "i-lucide-light:moon",
 	auto: "i-lucide-light:sun-moon"
 };
+var actionClassName = "rounded-full bg-foreground/3 text-foreground hover:bg-foreground/7 dark:hover:bg-foreground/7";
 /** Shared host navigation; each host owns preference storage and localized labels. */
 function HostNavigationActions({ className, language, onLanguageChange, theme, onThemeChange, labels }) {
 	const themeId = useId();
 	const languageId = useId();
 	return /* @__PURE__ */ jsxs("div", {
-		className,
+		className: cn("flex items-center gap-2", className),
 		children: [
 			/* @__PURE__ */ jsx(HostTooltip, {
 				label: "GitHub",
@@ -19633,8 +19634,8 @@ function HostNavigationActions({ className, language, onLanguageChange, theme, o
 					rel: "noopener noreferrer",
 					className: buttonVariants({
 						variant: "ghost",
-						size: "icon-sm",
-						className: "text-foreground"
+						size: "icon",
+						className: actionClassName
 					}),
 					"aria-label": "GitHub",
 					children: /* @__PURE__ */ jsx("i", {
@@ -19647,8 +19648,9 @@ function HostNavigationActions({ className, language, onLanguageChange, theme, o
 				label: labels.theme,
 				side: "bottom",
 				children: /* @__PURE__ */ jsx(Button$1, {
+					className: actionClassName,
 					variant: "ghost",
-					size: "icon-sm",
+					size: "icon",
 					type: "button",
 					"aria-label": labels.theme,
 					popovertarget: themeId,
@@ -19662,8 +19664,9 @@ function HostNavigationActions({ className, language, onLanguageChange, theme, o
 				label: labels.language,
 				side: "bottom",
 				children: /* @__PURE__ */ jsx(Button$1, {
+					className: actionClassName,
 					variant: "ghost",
-					size: "icon-sm",
+					size: "icon",
 					type: "button",
 					popovertarget: languageId,
 					"aria-label": labels.language,