@oomol-lab/open-flow 0.1.0-beta.59 → 0.1.0-beta.60

package/dist/browser/workbench.d.ts

@@ -16,7 +16,8 @@ export type { WorkbenchActor } from './workbench-contract.js';
 export type { FlowCatalogEvent, FlowChangeEvent, WorkbenchHost, WorkbenchLanguage, WorkbenchLocation, WorkbenchNavigationOptions, WorkbenchNotification, WorkbenchPreferences, WorkbenchTheme, WorkbenchView, } from './workbench-contract.js';
 export { isUiLanguage as isWorkbenchLanguage, resolveUiLanguage as resolveWorkbenchLanguage, uiLanguageNames as workbenchLanguageNames, uiLanguages as workbenchLanguages, } from '../common/localization.js';
 export interface OpenFlowWorkbenchProps {
-    readonly catalogWidth?: 'default' | 'full' | undefined;
+    /** Embedded catalogs fill a host-owned page without adding width limits or page padding. */
+    readonly catalogWidth?: 'default' | 'full' | 'embedded' | undefined;
     readonly createFlow?: ((name: string) => Promise<string>) | undefined;
     readonly createFlowDisabled?: boolean | undefined;
     readonly createFlowField?: {
@@ -46,6 +47,8 @@ export interface OpenFlowWorkbenchProps {
     } | undefined;
     readonly connectionHref?: ConnectionHref | undefined;
     readonly flowBadges?: Readonly<Record<string, string>> | undefined;
+    /** Reports the active Flow name, including renames; clears it on exit or unmount. Hosts own document titles. */
+    readonly onFlowNameChange?: ((name: string | undefined) => void) | undefined;
     readonly host: WorkbenchHost;
     readonly hrefFor: (location: WorkbenchLocation) => string;
     readonly language: WorkbenchLanguage;

package/dist/browser/workbench.js

@@ -1,7 +1,7 @@
-import { $ as RunStore, $t as EventSourcesPage, An as providerIconAppearance, At as followWorkbenchLink, B as CacheResource, Bn as invalidResponse, Cn as sampleErrorOutputs, Ct as setCodeActions, Dt as updateTriggerConfig, Et as setTriggerConnection, F as feishuResourceKind, Gn as controlErrorCode, Gt as InputGroupAddon, H as resourceData, Hn as record, I as supportsFeishuChatFilter, J as providerIcon, Jt as EmptyContent, Kt as InputGroupInput, L as combineSources, Lt as PopoverTitle, M as addNodeIntent, Mt as Popover, N as deriveAddNodeOptions, Nt as PopoverContent, On as connection, Ot as updateTriggerSchedule, Qt as EmptyTitle, Rt as PopoverTrigger, St as resetInputValues, Tn as isJsonObject, Tt as setInputSources, U as resourceValue, Un as string, Vn as jsonValue, W as designerGraph, Wn as ApiError, Wt as InputGroup, Xt as EmptyHeader, Yt as EmptyDescription, Zt as EmptyMedia, _ as updateValue, _n as randomId, _t as setComment, a as nameCreatedNodes, at as deriveInspectorDiagnostics, bn as decodeTriggerCatalog, bt as setNodePositions, c as updateCondition, d as updateNodeName, dt as connectionCatalog, f as updateNodeSettings, ft as canvasPresentationChange, g as updateTaskPorts, gn as WorkbenchClient, gt as restoreCanvasPresentation, h as updateTaskAdditionalInputs, hn as errorNotice, ht as removeComments, i as deleteSelection, it as Latest, jt as Switch, kn as connectorActionMetadata, kt as IdTooltip, l as updateNodeDescription, m as updateTask, mt as flowPresentation, nn as createI18n, nt as revisionView, o as setInputValue, ot as diagnosticItems, p as updateResolution, pt as commentIds, qn as IconThemeContext, qt as Empty, r as applyFlowChanges, rt as flowResourceReferences, s as setInputVariable, t as addNode, u as updateNodeIcon, ut as actionWithConnections, v as updateWebhook, vn as allConnectorConnectionsQuery, vt as setFlowViewport, wn as triggerOutputDefinitions, wt as setConnectorConnection, xt as repairNodeNames, yt as setNodeContentHidden, z as scopedValue, zn as inputValue } from "./flowChanges-DL0Njlg6.js";
+import { $ as RunStore, $n as connection, $t as DropdownMenuContent, At as followWorkbenchLink, B as CacheResource, Bn as errorNotice, Cn as Badge, Ct as setCodeActions, Dn as createI18n, Dt as updateTriggerConfig, Et as setTriggerConnection, F as feishuResourceKind, Gn as decodeTriggerCatalog, Gt as Empty, H as resourceData, Hn as randomId, Ht as InputGroup, I as supportsFeishuChatFilter, It as PopoverTitle, J as providerIcon, Jn as sampleErrorOutputs, Jt as EmptyHeader, Kt as EmptyContent, L as combineSources, M as addNodeIntent, Mt as PopoverContent, N as deriveAddNodeOptions, Ot as updateTriggerSchedule, St as resetInputValues, Tt as setInputSources, U as resourceValue, Un as allConnectorConnectionsQuery, Ut as InputGroupAddon, Vn as WorkbenchClient, W as designerGraph, Wt as InputGroupInput, Xn as isJsonObject, Xt as EmptyTitle, Yn as triggerOutputDefinitions, Yt as EmptyMedia, Zt as DropdownMenu, _ as updateValue, _t as setComment, a as nameCreatedNodes, an as DropdownMenuSeparator, at as deriveInspectorDiagnostics, bt as setNodePositions, c as updateCondition, d as updateNodeName, dr as invalidResponse, dt as connectionCatalog, er as connectorActionMetadata, f as updateNodeSettings, fr as jsonValue, ft as canvasPresentationChange, g as updateTaskPorts, gr as controlErrorCode, gt as restoreCanvasPresentation, h as updateTaskAdditionalInputs, hr as ApiError, ht as removeComments, i as deleteSelection, it as Latest, jt as Popover, kt as IdTooltip, l as updateNodeDescription, ln as DropdownMenuTrigger, m as updateTask, mr as string, mt as flowPresentation, nt as revisionView, o as setInputValue, ot as diagnosticItems, p as updateResolution, pr as record, pt as commentIds, qt as EmptyDescription, r as applyFlowChanges, rt as flowResourceReferences, s as setInputVariable, t as addNode, tn as DropdownMenuItem, tr as providerIconAppearance, u as updateNodeIcon, ur as inputValue, ut as actionWithConnections, v as updateWebhook, vt as setFlowViewport, wn as EventSourcesPage, wt as setConnectorConnection, xt as repairNodeNames, yr as IconThemeContext, yt as setNodeContentHidden, z as scopedValue } from "./flowChanges-Cbl6Izr-.js";
 import { a as derive, i as compute, l as val } from "./dist-bO8nvHFH.js";
 import { a as toPlainObject, c as useLang, l as useTranslate, o as I18nProvider, u as useVal } from "./dist-BFmpkX4P.js";
-import { E as FieldLabel, H as applyFlowChanges$1, J as resourceNameIssue, Q as nodeInputMappings, S as Field, T as FieldGroup, V as FlowChangeError, Z as mapConditionSources, a as DialogDescription, at as dequal$1, bi as cn, c as DialogTitle, d as TooltipContent, i as DialogContent, n as Dialog, o as DialogFooter, or as Input, p as TooltipTrigger, r as DialogClose, s as DialogHeader, t as Icon, u as Tooltip, vi as Button, w as FieldError, x as Spinner } from "./icons-6oQ8Q9Wm.js";
+import { E as FieldLabel, H as applyFlowChanges$1, J as resourceNameIssue, Q as nodeInputMappings, S as Field, T as FieldGroup, V as FlowChangeError, Z as mapConditionSources, a as DialogDescription, at as dequal$1, bi as cn, c as DialogTitle, d as TooltipContent, i as DialogContent, n as Dialog, o as DialogFooter, or as Input, p as TooltipTrigger, r as DialogClose, s as DialogHeader, t as Icon, u as Tooltip, vi as Button, w as FieldError, x as Spinner } from "./icons-D70mz3qW.js";
 import { c as isUiLanguage, d as uiLanguages, l as resolveUiLanguage, u as uiLanguageNames } from "./value-DL_poNiC.js";
 import { Suspense, lazy, useEffect, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -106,13 +106,13 @@ var NavigationStore = class {
 			if (change == this.#change) this.#syncing = false;
 		}
 	}
-	async selectFlow(flow) {
+	async selectFlow(flow, view = "design") {
 		const change = ++this.#change;
 		this.#syncing = true;
 		this.#store.runRequests.dismissInputs();
 		await this.#store.selectFlow(flow.flowId);
 		if (change == this.#change) {
-			this.#write("design", false);
+			this.#write(view, false, {});
 			this.#syncing = false;
 		}
 	}
@@ -184,11 +184,10 @@ function Skeleton({ className, ...props }) {
 }
 //#endregion
 //#region src/workbench/browser/runtime/shell/resourceBrowser.tsx
-var CreateResourceDialog = lazy(() => import("./createResourceDialog-C23SBjYd.js"));
+var CreateResourceDialog = lazy(() => import("./createResourceDialog-B7ThMSeA.js"));
 var flowIdTooltipAlignOffset = 44;
 var renamePopoverAlignOffset = -12;
 var renamePopoverVerticalShift = 8;
-var rowControlSelector = "a, button, input, select, textarea, [data-slot=\"tooltip-trigger\"]";
 function compactFlowId(flowId) {
 	return flowId.length <= 20 ? flowId : `${flowId.slice(0, 10)}…${flowId.slice(-6)}`;
 }
@@ -203,9 +202,6 @@ function formatUpdatedAt(updatedAt, locale) {
 		year: date.getFullYear() == current.getFullYear() ? void 0 : "numeric"
 	});
 }
-function clickedRowControl(event) {
-	return event.target instanceof Element && event.target.closest(rowControlSelector) != null;
-}
 function FlowDeletionImpact({ listeners, failed, onRetry }) {
 	const t = useTranslate();
 	if (failed) return /* @__PURE__ */ jsxs("div", {
@@ -256,10 +252,10 @@ function FlowDeletionImpact({ listeners, failed, onRetry }) {
 		]
 	});
 }
-function FlowItem({ badge, busy, flow, href, onSelect, store }) {
+function FlowItem({ showTeam, badge, busy, flow, href, onSelect, store }) {
 	const [root, setRoot] = useState(null);
 	const renameAnchor = useRef(null);
-	const deleteButton = useRef(null);
+	const actionsButton = useRef(null);
 	const nameInput = useRef(null);
 	const cancelDelete = useRef(null);
 	const locale = useLang();
@@ -287,6 +283,7 @@ function FlowItem({ badge, busy, flow, href, onSelect, store }) {
 		listenersRetry
 	]);
 	const [pending, setPending] = useState();
+	const hasTeam = showTeam && Boolean(badge?.trim());
 	const changed = flow.live != null && flow.live.revisionId != flow.draftRevisionId;
 	const publicationStatus = flow.status == "retiring" ? "resource.retiring" : flow.live == null ? "resource.notPublished" : changed ? "resource.unpublishedChanges" : "resource.isPublished";
 	const publicationTone = flow.status == "retiring" ? "danger" : flow.live == null ? "neutral" : changed ? "running" : "success";
@@ -308,16 +305,13 @@ function FlowItem({ badge, busy, flow, href, onSelect, store }) {
 	async function remove() {
 		if (await store.workspace.deleteFlow(flow.flowId)) setMode("idle");
 	}
-	function openFromRow(event) {
-		if (!clickedRowControl(event)) onSelect(flow);
-	}
 	return /* @__PURE__ */ jsxs("div", {
 		className: "resource-item-row",
 		ref: setRoot,
 		children: [
 			/* @__PURE__ */ jsxs("div", {
 				className: "resource-list-row flow-columns",
-				onClick: openFromRow,
+				"data-has-team": hasTeam,
 				children: [
 					/* @__PURE__ */ jsxs("span", {
 						className: "resource-primary-cell",
@@ -325,46 +319,41 @@ function FlowItem({ badge, busy, flow, href, onSelect, store }) {
 							"aria-hidden": "true",
 							className: "resource-flow-icon",
 							children: /* @__PURE__ */ jsx("i", { className: "i-lucide-light:workflow" })
-						}), /* @__PURE__ */ jsxs("span", {
+						}), /* @__PURE__ */ jsx("span", {
 							className: "resource-primary-copy",
-							children: [/* @__PURE__ */ jsxs("span", {
+							children: /* @__PURE__ */ jsxs("span", {
 								className: "resource-primary-heading",
-								ref: renameAnchor,
-								children: [/* @__PURE__ */ jsx(Button, {
-									"aria-disabled": flow.status == "retiring",
-									className: "resource-primary-title",
-									nativeButton: false,
-									onClick: (event) => {
-										if (flow.status == "retiring") {
-											event.preventDefault();
-											return;
-										}
-										followWorkbenchLink(event, () => onSelect(flow));
-									},
-									render: /* @__PURE__ */ jsx("a", { href: flow.status == "retiring" ? void 0 : href }),
-									tabIndex: flow.status == "retiring" ? -1 : void 0,
-									title: flow.name,
-									variant: "link",
+								children: [/* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+									render: /* @__PURE__ */ jsx("a", {
+										"aria-disabled": flow.status == "retiring",
+										className: "resource-primary-title",
+										onClick: (event) => {
+											if (flow.status == "retiring") {
+												event.preventDefault();
+												return;
+											}
+											followWorkbenchLink(event, () => onSelect(flow));
+										},
+										href: flow.status == "retiring" ? void 0 : href,
+										tabIndex: flow.status == "retiring" ? -1 : void 0
+									}),
+									children: /* @__PURE__ */ jsx("span", {
+										className: "resource-primary-name",
+										ref: renameAnchor,
+										children: flow.name
+									})
+								}), /* @__PURE__ */ jsx(TooltipContent, {
+									container: root,
+									collisionBoundary: [],
+									positionMethod: "fixed",
 									children: flow.name
-								}), flow.status == "active" && /* @__PURE__ */ jsxs(Popover, {
+								})] }), flow.status == "active" && /* @__PURE__ */ jsx(Popover, {
 									onOpenChange: (open) => {
 										setMode(open ? "rename" : "idle");
 										if (open) setName(flow.name);
 									},
 									open: mode == "rename",
-									children: [/* @__PURE__ */ jsx(PopoverTrigger, {
-										render: /* @__PURE__ */ jsx(Button, {
-											"aria-label": t("sidebar.renameFlow", { name: flow.name }),
-											className: "resource-rename-trigger",
-											size: "icon-xs",
-											type: "button",
-											variant: "ghost"
-										}),
-										children: /* @__PURE__ */ jsx("i", {
-											"aria-hidden": "true",
-											className: "i-lucide-light:pencil"
-										})
-									}), /* @__PURE__ */ jsxs(PopoverContent, {
+									children: /* @__PURE__ */ jsxs(PopoverContent, {
 										align: "start",
 										alignOffset: renamePopoverAlignOffset,
 										anchor: renameAnchor,
@@ -372,6 +361,7 @@ function FlowItem({ badge, busy, flow, href, onSelect, store }) {
 										collisionBoundary: [],
 										container: root,
 										initialFocus: nameInput,
+										finalFocus: actionsButton,
 										positionMethod: "fixed",
 										side: "top",
 										sideOffset: ({ anchor, positioner }) => -(anchor.height + positioner.height) / 2 - renamePopoverVerticalShift,
@@ -423,13 +413,9 @@ function FlowItem({ badge, busy, flow, href, onSelect, store }) {
 												})
 											]
 										})]
-									})]
+									})
 								})]
-							}), badge != null && /* @__PURE__ */ jsx("span", {
-								className: "resource-team-label",
-								title: badge,
-								children: badge
-							})]
+							})
 						})]
 					}),
 					/* @__PURE__ */ jsx("span", {
@@ -446,6 +432,11 @@ function FlowItem({ badge, busy, flow, href, onSelect, store }) {
 							alignOffset: flowIdTooltipAlignOffset
 						})
 					}),
+					showTeam && /* @__PURE__ */ jsx("span", {
+						className: "resource-team-cell",
+						title: badge,
+						children: hasTeam ? badge : "—"
+					}),
 					/* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
 						render: /* @__PURE__ */ jsx("time", {
 							className: "resource-updated-at",
@@ -462,70 +453,112 @@ function FlowItem({ badge, busy, flow, href, onSelect, store }) {
 						sideOffset: 6,
 						children: new Date(flow.updatedAt).toLocaleString(locale)
 					})] }),
+					/* @__PURE__ */ jsx(Badge, {
+						variant: "secondary",
+						className: cn("resource-publication-status h-auto px-2.5 py-0.75", publicationTone),
+						children: t(publicationStatus)
+					}),
 					/* @__PURE__ */ jsxs("span", {
 						className: "resource-status",
-						children: [
-							/* @__PURE__ */ jsx("span", {
-								"aria-hidden": "true",
-								className: cn("status-dot", publicationTone)
-							}),
-							/* @__PURE__ */ jsx("span", { children: t(publicationStatus) }),
-							flow.live != null && /* @__PURE__ */ jsxs("span", {
-								className: "resource-enabled-status",
-								"aria-busy": pending == "enabled",
-								children: [/* @__PURE__ */ jsx("span", { children: t(flow.live.enabled ? "resource.enabled" : "resource.disabled") }), /* @__PURE__ */ jsx(Switch, {
-									"aria-label": t("resource.enableFlow", { name: flow.name }),
-									checked: flow.live.enabled,
-									disabled: flow.status != "active" || busy != null || pending != null,
-									onCheckedChange: (enabled) => void update(enabled),
-									size: "sm",
-									title: t("resource.enabledHint")
-								})]
-							})
-						]
+						"aria-busy": pending == "enabled",
+						children: [/* @__PURE__ */ jsx("span", {
+							"aria-hidden": "true",
+							className: cn("status-dot", flow.live?.enabled ? "success" : "neutral")
+						}), /* @__PURE__ */ jsx("span", { children: t(flow.live == null ? "resource.runtimeUnpublished" : flow.live.enabled ? "resource.enabled" : "resource.disabled") })]
 					})
 				]
 			}),
-			/* @__PURE__ */ jsxs("div", {
+			/* @__PURE__ */ jsx("div", {
 				className: "resource-live-controls",
 				"aria-busy": pending != null,
-				onClick: openFromRow,
-				children: [
-					flow.status == "active" && /* @__PURE__ */ jsx(Button, {
-						onClick: () => onSelect(flow),
-						size: "sm",
-						variant: "outline",
-						children: t("resource.edit")
-					}),
-					/* @__PURE__ */ jsx(Button, {
-						disabled: flow.status != "active" || busy != null || pending != null || flow.live != null && !changed,
-						onClick: () => void update("publish"),
-						size: "sm",
-						variant: "outline",
-						children: t(pending == "publish" ? "workspace.publishing" : flow.live == null ? "resource.publish" : "resource.publishUpdate")
-					}),
-					flow.status == "active" && /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
-						render: /* @__PURE__ */ jsx(Button, {
-							"aria-label": t("sidebar.deleteFlow", { name: flow.name }),
-							ref: deleteButton,
-							disabled: busy != null || pending != null,
-							onClick: () => setMode("delete"),
-							size: "icon-sm",
-							variant: "destructive"
+				children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+					render: /* @__PURE__ */ jsx(DropdownMenuTrigger, { render: /* @__PURE__ */ jsx(Button, {
+						ref: actionsButton,
+						"aria-label": t("resource.actions"),
+						size: "icon-sm",
+						variant: "ghost"
+					}) }),
+					children: /* @__PURE__ */ jsx("i", {
+						"aria-hidden": "true",
+						className: "i-lucide-light:ellipsis"
+					})
+				}), /* @__PURE__ */ jsx(TooltipContent, {
+					container: root,
+					collisionBoundary: [],
+					positionMethod: "fixed",
+					children: t("resource.actions")
+				})] }), /* @__PURE__ */ jsxs(DropdownMenuContent, {
+					align: "end",
+					collisionBoundary: [],
+					positionMethod: "fixed",
+					container: root,
+					className: "w-48",
+					finalFocus: mode == "idle" ? actionsButton : false,
+					children: [
+						/* @__PURE__ */ jsxs(DropdownMenuItem, {
+							disabled: flow.status != "active",
+							onClick: () => onSelect(flow),
+							children: [/* @__PURE__ */ jsx("i", {
+								"aria-hidden": "true",
+								className: "i-lucide-light:square-pen size-4 shrink-0"
+							}), t("resource.edit")]
 						}),
-						children: /* @__PURE__ */ jsx("i", {
-							"aria-hidden": "true",
-							className: "i-lucide-light:trash-2"
+						/* @__PURE__ */ jsxs(DropdownMenuItem, {
+							disabled: flow.status != "active" || busy != null || pending != null,
+							onClick: () => {
+								setName(flow.name);
+								setMode("rename");
+							},
+							children: [/* @__PURE__ */ jsx("i", {
+								"aria-hidden": "true",
+								className: "i-lucide-light:text-cursor-input size-4 shrink-0"
+							}), t("common.rename")]
+						}),
+						/* @__PURE__ */ jsxs(DropdownMenuItem, {
+							disabled: flow.status != "active" || busy != null || pending != null || flow.live != null && !changed,
+							onClick: () => void update("publish"),
+							children: [/* @__PURE__ */ jsx("i", {
+								"aria-hidden": "true",
+								className: "i-lucide-light:upload size-4 shrink-0"
+							}), t(pending == "publish" ? "workspace.publishing" : flow.live == null ? "resource.publish" : "resource.publishUpdate")]
+						}),
+						flow.live != null && /* @__PURE__ */ jsxs(DropdownMenuItem, {
+							disabled: flow.status != "active" || busy != null || pending != null,
+							onClick: () => void update(flow.live?.enabled != true),
+							children: [/* @__PURE__ */ jsx("i", {
+								"aria-hidden": "true",
+								className: cn("size-4 shrink-0", flow.live.enabled ? "i-lucide-light:square" : "i-lucide-light:play")
+							}), t(flow.live.enabled ? "resource.stop" : "resource.start")]
+						}),
+						/* @__PURE__ */ jsx(DropdownMenuSeparator, { className: "mx-2 bg-border/50" }),
+						/* @__PURE__ */ jsxs(DropdownMenuItem, {
+							disabled: flow.status != "active",
+							onClick: () => onSelect(flow, "publications"),
+							children: [/* @__PURE__ */ jsx("i", {
+								"aria-hidden": "true",
+								className: "i-lucide-light:cloud-upload size-4 shrink-0"
+							}), t("workspace.publications")]
+						}),
+						/* @__PURE__ */ jsxs(DropdownMenuItem, {
+							disabled: flow.status != "active",
+							onClick: () => onSelect(flow, "runs"),
+							children: [/* @__PURE__ */ jsx("i", {
+								"aria-hidden": "true",
+								className: "i-lucide-light:history size-4 shrink-0"
+							}), t("workspace.runs")]
+						}),
+						/* @__PURE__ */ jsx(DropdownMenuSeparator, { className: "mx-2 bg-border/50" }),
+						/* @__PURE__ */ jsxs(DropdownMenuItem, {
+							disabled: flow.status != "active" || busy != null || pending != null,
+							variant: "destructive",
+							onClick: () => setMode("delete"),
+							children: [/* @__PURE__ */ jsx("i", {
+								"aria-hidden": "true",
+								className: "i-lucide-light:trash-2 size-4 shrink-0"
+							}), t("common.delete")]
 						})
-					}), /* @__PURE__ */ jsx(TooltipContent, {
-						align: "center",
-						collisionBoundary: [],
-						container: root,
-						positionMethod: "fixed",
-						side: "top",
-						children: t("common.delete")
-					})] })
-				]
+					]
+				})] })
 			}),
 			/* @__PURE__ */ jsx(Dialog, {
 				open: mode == "delete",
@@ -535,7 +568,7 @@ function FlowItem({ badge, busy, flow, href, onSelect, store }) {
 				children: /* @__PURE__ */ jsxs(DialogContent, {
 					container: root,
 					initialFocus: cancelDelete,
-					finalFocus: deleteButton,
+					finalFocus: actionsButton,
 					showCloseButton: false,
 					children: [
 						/* @__PURE__ */ jsxs(DialogHeader, { children: [/* @__PURE__ */ jsx(DialogTitle, { children: t("sidebar.deleteFlowConfirm", { name: flow.name }) }), /* @__PURE__ */ jsx(DialogDescription, { children: t("resource.deleteDescription") })] }),
@@ -562,24 +595,30 @@ function FlowItem({ badge, busy, flow, href, onSelect, store }) {
 		]
 	});
 }
-function FlowSkeleton() {
+function FlowSkeleton({ showTeam }) {
 	return /* @__PURE__ */ jsxs("div", {
 		"aria-hidden": "true",
 		className: "resource-item-row",
 		children: [/* @__PURE__ */ jsxs("div", {
-			className: "resource-list-row resource-skeleton-row flow-columns",
+			className: "resource-list-row flow-columns",
+			"data-has-team": showTeam,
 			children: [
 				/* @__PURE__ */ jsxs("span", {
-					className: "resource-skeleton-copy",
-					children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-3.5 w-36 max-w-full" }), /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-24 max-w-full" })]
+					className: "resource-primary-cell",
+					children: [/* @__PURE__ */ jsx(Skeleton, { className: "resource-flow-icon" }), /* @__PURE__ */ jsx("span", {
+						className: "resource-primary-copy",
+						children: /* @__PURE__ */ jsx(Skeleton, { className: "h-3.5 w-36 max-w-full" })
+					})]
 				}),
-				/* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-36 max-w-full" }),
-				/* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-28 max-w-full" }),
-				/* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-16" })
+				/* @__PURE__ */ jsx(Skeleton, { className: "resource-flow-id-cell h-3 w-36 max-w-full" }),
+				showTeam && /* @__PURE__ */ jsx(Skeleton, { className: "resource-team-cell h-3 w-24 max-w-full" }),
+				/* @__PURE__ */ jsx(Skeleton, { className: "resource-updated-at h-3 w-28 max-w-full" }),
+				/* @__PURE__ */ jsx(Skeleton, { className: "resource-publication-status h-3 w-16" }),
+				/* @__PURE__ */ jsx(Skeleton, { className: "resource-status h-3 w-16" })
 			]
-		}), /* @__PURE__ */ jsxs("div", {
+		}), /* @__PURE__ */ jsx("div", {
 			className: "resource-live-controls",
-			children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-7 w-16" }), /* @__PURE__ */ jsx(Skeleton, { className: "h-7 w-14" })]
+			children: /* @__PURE__ */ jsx(Skeleton, { className: "size-7" })
 		})]
 	});
 }
@@ -598,6 +637,7 @@ function FlowBrowser({ catalogWidth, createFlowDisabled, createFlowField, flowBa
 	const [creating, setCreating] = useState(false);
 	const [filter, setFilter] = useState("");
 	const [name, setName] = useState("");
+	const showTeam = flows.some((flow) => (flowBadges?.[flow.flowId]?.trim().length ?? 0) > 0);
 	const normalized = filter.trim().toLocaleLowerCase();
 	const visible = flows.filter((flow) => flow.name.toLocaleLowerCase().includes(normalized));
 	async function create(event) {
@@ -611,7 +651,10 @@ function FlowBrowser({ catalogWidth, createFlowDisabled, createFlowField, flowBa
 		className: "resource-browser",
 		"data-tooltip-portal": true,
 		children: /* @__PURE__ */ jsxs("div", {
-			className: cn("resource-page", catalogWidth != "default" && "resource-page-full"),
+			className: cn("resource-page", {
+				"resource-page-full": catalogWidth == null || catalogWidth == "full",
+				"resource-page-embedded": catalogWidth == "embedded"
+			}),
 			children: [
 				/* @__PURE__ */ jsx("h1", {
 					className: "sr-only",
@@ -659,7 +702,7 @@ function FlowBrowser({ catalogWidth, createFlowDisabled, createFlowField, flowBa
 						/* @__PURE__ */ jsx("div", {
 							className: "resource-table-scroll",
 							children: /* @__PURE__ */ jsxs("div", {
-								className: "resource-table",
+								className: cn("resource-table", showTeam && "resource-table-with-teams"),
 								children: [/* @__PURE__ */ jsxs("div", {
 									"aria-hidden": "true",
 									className: "resource-list-columns-shell",
@@ -671,11 +714,16 @@ function FlowBrowser({ catalogWidth, createFlowDisabled, createFlowField, flowBa
 												className: "resource-flow-id-heading",
 												children: t("resource.flowId")
 											}),
+											showTeam && /* @__PURE__ */ jsx("span", {
+												className: "resource-team-heading",
+												children: t("resource.team")
+											}),
 											/* @__PURE__ */ jsx("span", {
 												className: "resource-updated-heading",
 												children: t("resource.updated")
 											}),
-											/* @__PURE__ */ jsx("span", { children: t("resource.status") })
+											/* @__PURE__ */ jsx("span", { children: t("resource.publicationStatus") }),
+											/* @__PURE__ */ jsx("span", { children: t("resource.runtimeStatus") })
 										]
 									}), /* @__PURE__ */ jsx("span", {
 										className: "resource-actions-heading",
@@ -683,7 +731,7 @@ function FlowBrowser({ catalogWidth, createFlowDisabled, createFlowField, flowBa
 									})]
 								}), /* @__PURE__ */ jsx("div", {
 									className: "resource-list",
-									children: loading ? Array.from({ length: 5 }, (_, index) => /* @__PURE__ */ jsx(FlowSkeleton, {}, index)) : loadFailed ? /* @__PURE__ */ jsxs(Empty, {
+									children: loading ? Array.from({ length: 5 }, (_, index) => /* @__PURE__ */ jsx(FlowSkeleton, { showTeam }, index)) : loadFailed ? /* @__PURE__ */ jsxs(Empty, {
 										className: "min-h-64",
 										role: "alert",
 										children: [/* @__PURE__ */ jsxs(EmptyHeader, { children: [
@@ -722,6 +770,7 @@ function FlowBrowser({ catalogWidth, createFlowDisabled, createFlowField, flowBa
 											}), t("resource.newFlow")]
 										}) })]
 									}) : visible.map((flow) => /* @__PURE__ */ jsx(FlowItem, {
+										showTeam,
 										badge: flowBadges?.[flow.flowId],
 										busy,
 										flow,
@@ -6735,7 +6784,7 @@ var WorkbenchStore = class {
 };
 //#endregion
 //#region src/workbench/browser/runtime/openFlowWorkbench.tsx
-var FlowWorkspace = lazy(() => import("./flowWorkspace-Cp5CcEGu.js"));
+var FlowWorkspace = lazy(() => import("./flowWorkspace-BdbsnUDs.js"));
 function OpenFlowSessionGate({ action, description, error, onSubmit, onTokenChange, pending = false, title, token, tokenLabel }) {
 	const hasToken = token != null && tokenLabel != null && onTokenChange != null;
 	const tokenValue = token ?? "";
@@ -6835,6 +6884,12 @@ function NotificationBridge({ host, store }) {
 	useEffect(() => () => notify(void 0), [notify]);
 	return null;
 }
+function FlowNameBridge({ store, onChange }) {
+	const name = useVal(store.workspace.$.flow)?.name;
+	useEffect(() => onChange(name), [name, onChange]);
+	useEffect(() => () => onChange(void 0), [onChange]);
+	return null;
+}
 function Workbench({ catalogWidth, createFlow, createFlowDisabled, createFlowField, flowBadges, connectionHref, hrefFor, initializing, language, navigation, onConfigureConnector, onManageConnectorAccess, onLanguageChange, store, theme }) {
 	const flowId = useVal(store.workspace.$.flowId);
 	return /* @__PURE__ */ jsx("div", {
@@ -6852,7 +6907,7 @@ function Workbench({ catalogWidth, createFlow, createFlowDisabled, createFlowFie
 			language,
 			onCreateFlow: (name) => navigation.createFlow(name, createFlow),
 			onLanguageChange,
-			onSelectFlow: (flow) => void navigation.selectFlow(flow),
+			onSelectFlow: (flow, view) => void navigation.selectFlow(flow, view),
 			store
 		}) : /* @__PURE__ */ jsx(Suspense, {
 			fallback: /* @__PURE__ */ jsx("main", {
@@ -6871,7 +6926,7 @@ function Workbench({ catalogWidth, createFlow, createFlowDisabled, createFlowFie
 		})
 	});
 }
-function Session({ catalogWidth, createFlow, createFlowDisabled, createFlowField, flowBadges, connectionHref, host, hrefFor, language, location, onConfigureConnector, onManageConnectorAccess, onLanguageChange, onNavigate, preferences, sessionKey, theme, variables = true }) {
+function Session({ catalogWidth, createFlow, createFlowDisabled, createFlowField, flowBadges, connectionHref, host, hrefFor, language, location, onConfigureConnector, onManageConnectorAccess, onLanguageChange, onNavigate, onFlowNameChange, preferences, sessionKey, theme, variables = true }) {
 	const navigate = useRef(onNavigate);
 	navigate.current = onNavigate;
 	const [{ i18n, navigation, store }] = useState(() => {
@@ -6925,29 +6980,36 @@ function Session({ catalogWidth, createFlow, createFlowDisabled, createFlowField
 			children: /* @__PURE__ */ jsxs("div", {
 				className: "open-flow-theme open-flow-workbench",
 				"data-theme": theme,
-				children: [/* @__PURE__ */ jsx(NotificationBridge, {
-					host,
-					store
-				}), started || location.flowId == null ? /* @__PURE__ */ jsx(Workbench, {
-					catalogWidth,
-					createFlow,
-					createFlowDisabled,
-					createFlowField,
-					flowBadges,
-					connectionHref,
-					hrefFor,
-					initializing: !started,
-					language,
-					navigation,
-					onConfigureConnector,
-					onManageConnectorAccess,
-					onLanguageChange,
-					store,
-					theme
-				}) : /* @__PURE__ */ jsx("main", {
-					"aria-busy": "true",
-					className: "workspace"
-				})]
+				children: [
+					/* @__PURE__ */ jsx(NotificationBridge, {
+						host,
+						store
+					}),
+					onFlowNameChange != null && /* @__PURE__ */ jsx(FlowNameBridge, {
+						store,
+						onChange: onFlowNameChange
+					}),
+					started || location.flowId == null ? /* @__PURE__ */ jsx(Workbench, {
+						catalogWidth,
+						createFlow,
+						createFlowDisabled,
+						createFlowField,
+						flowBadges,
+						connectionHref,
+						hrefFor,
+						initializing: !started,
+						language,
+						navigation,
+						onConfigureConnector,
+						onManageConnectorAccess,
+						onLanguageChange,
+						store,
+						theme
+					}) : /* @__PURE__ */ jsx("main", {
+						"aria-busy": "true",
+						className: "workspace"
+					})
+				]
 			})
 		})
 	});

package/dist/browser/{workbenchSelect-DpLbIr29.js → workbenchSelect-gB45mZY7.js}

@@ -1,4 +1,4 @@
-import { Ct as SelectGroup, Dt as SelectValue, Et as SelectTrigger, St as SelectContent, bi as cn, bt as Select, wt as SelectItem } from "./icons-6oQ8Q9Wm.js";
+import { Ct as SelectGroup, Dt as SelectValue, Et as SelectTrigger, St as SelectContent, bi as cn, bt as Select, wt as SelectItem } from "./icons-D70mz3qW.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/workbench/browser/runtime/shell/workbenchSelect.tsx
 function WorkbenchSelect({ ariaLabel, className, disabled = false, id, onValueChange, options, portalRoot, size, value, variant }) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oomol-lab/open-flow",
-  "version": "0.1.0-beta.59",
+  "version": "0.1.0-beta.60",
   "description": "TypeScript contracts and Browser runtime for Open Flow.",
   "license": "Apache-2.0",
   "repository": {