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

package/dist/browser/theme.css

@@ -10,6 +10,7 @@
   --open-flow-card: #ffffff;
   --open-flow-node-surface: #f6f6f6;
   --open-flow-node-content: #ffffff;
+  --open-flow-node-running-beam: oklch(72.3% 0.219 149.579);
   --open-flow-comment-surface: #f3eddc;
   --open-flow-comment-content: color-mix(in srgb, var(--open-flow-comment-surface) 55%, var(--open-flow-node-content));
   --open-flow-comment-border: #e3d8ba;

package/dist/browser/ui.css

@@ -97,6 +97,7 @@
   --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);
 }
@@ -725,6 +726,7 @@
     --spacing: .25rem;
     --container-xs: 20rem;
     --container-sm: 24rem;
+    --container-md: 28rem;
     --container-lg: 32rem;
     --container-xl: 36rem;
     --container-2xl: 42rem;
@@ -1431,6 +1433,10 @@
     max-height: 85dvh;
   }
 
+  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .max-h-\[calc\(100dvh-2rem\)\] {
+    max-height: calc(100dvh - 2rem);
+  }
+
   :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .max-h-\[calc\(100dvh-32px\)\] {
     max-height: calc(100dvh - 32px);
   }
@@ -1439,6 +1445,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);
   }
@@ -1535,10 +1545,6 @@
     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);
   }
@@ -1615,6 +1621,10 @@
     width: max-content;
   }
 
+  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .w-md {
+    width: var(--container-md);
+  }
+
   :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .max-w-\(--available-width\) {
     max-width: var(--available-width);
   }
@@ -1639,6 +1649,10 @@
     max-width: calc(100% - 2rem);
   }
 
+  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .max-w-\[calc\(100vw-2rem\)\] {
+    max-width: calc(100vw - 2rem);
+  }
+
   :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .max-w-\[calc\(100vw-24px\)\] {
     max-width: calc(100vw - 24px);
   }
@@ -1883,6 +1897,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;
   }
@@ -1907,6 +1925,10 @@
     grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr));
   }
 
+  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .grid-rows-\[auto_minmax\(0\,1fr\)_auto\] {
+    grid-template-rows: auto minmax(0, 1fr) auto;
+  }
+
   :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .grid-rows-\[minmax\(0\,1fr\)_auto\] {
     grid-template-rows: minmax(0, 1fr) auto;
   }
@@ -2427,7 +2449,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);
   }
 
@@ -2621,6 +2653,10 @@
     padding-block: calc(var(--spacing) * 2);
   }
 
+  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .py-2\.5 {
+    padding-block: calc(var(--spacing) * 2.5);
+  }
+
   :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .py-3 {
     padding-block: calc(var(--spacing) * 3);
   }
@@ -2717,6 +2753,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);
   }
@@ -2725,6 +2765,10 @@
     padding-left: 22px;
   }
 
+  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .pl-\[calc\(1\.25rem\+1em\)\] {
+    padding-left: calc(1.25rem + 1em);
+  }
+
   :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .text-center {
     text-align: center;
   }
@@ -3252,6 +3296,10 @@
     cursor: pointer;
   }
 
+  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .group-open\:rotate-90:is(:where(.group):is([open], :popover-open, :open) *) {
+    rotate: 90deg;
+  }
+
   @media (hover: hover) {
     :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .group-hover\/app\:border-\[color-mix\(in_srgb\,var\(--ui-foreground\)_14\%\,var\(--ui-popover\)\)\]:is(:where(.group\/app):hover *) {
       border-color: var(--ui-foreground);
@@ -3726,7 +3774,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 +4871,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 +5269,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);
     }
 
@@ -5412,6 +5507,10 @@
     height: calc(var(--spacing) * 4);
   }
 
+  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .\[\&\:\:-webkit-details-marker\]\:hidden::-webkit-details-marker {
+    display: none;
+  }
+
   :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .\[\.border-b\]\:pb-2.border-b {
     padding-bottom: calc(var(--spacing) * 2);
   }
@@ -5754,6 +5853,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,

package/dist/browser/workbench-contract.d.ts

@@ -61,6 +61,6 @@ export interface WorkbenchImportInput {
     readonly sourceUrl?: string;
 }
 export interface OpenFlowWorkbenchHandle {
-    /** Opens confirmation on an idle, initialized Flow list. Does not create a Flow. */
+    /** Opens confirmation on an idle, initialized Flow list. Invalid files notify the host. Does not create a Flow. */
     openImport(input: WorkbenchImportInput): 'opened' | 'unavailable' | 'invalid-file';
 }