@oomol-lab/open-flow 0.1.0-beta.51 → 0.1.0-beta.52

package/dist/browser/theme.css

@@ -29,6 +29,8 @@
   --open-flow-input: #d2d2d2;
   --open-flow-ring: #777777;
   --open-flow-radius: 10px;
+  --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);

package/dist/browser/ui-hostNavigationActions.d.ts

@@ -0,0 +1,13 @@
+import type { ReactElement } from 'react';
+import type { UiLanguage } from '../common/localization.js';
+export type HostThemeMode = 'light' | 'dark' | 'auto';
+export interface HostNavigationActionsProps {
+    readonly className?: string;
+    readonly language: UiLanguage;
+    readonly onLanguageChange: (language: UiLanguage) => void;
+    readonly theme: HostThemeMode;
+    readonly onThemeChange: (theme: HostThemeMode) => void;
+    readonly labels: Readonly<Record<HostThemeMode | 'theme' | 'language', string>>;
+}
+/** Shared host navigation; each host owns preference storage and localized labels. */
+export declare function HostNavigationActions({ className, language, onLanguageChange, theme, onThemeChange, labels }: HostNavigationActionsProps): ReactElement;

package/dist/browser/ui-hostTooltip.d.ts

@@ -0,0 +1,8 @@
+import type { ReactElement } from 'react';
+export interface HostTooltipProps {
+    readonly children: ReactElement;
+    readonly label: string;
+    readonly side?: 'top' | 'bottom' | 'left' | 'right';
+}
+/** Compose a host control with the shared tooltip while preserving its theme and semantics. */
+export declare function HostTooltip({ children, label, side }: HostTooltipProps): ReactElement;

package/dist/browser/ui-logo.d.ts

@@ -0,0 +1,5 @@
+import type { ComponentPropsWithoutRef } from 'react';
+export interface OpenFlowLogoProps extends Omit<ComponentPropsWithoutRef<'img'>, 'src' | 'srcSet'> {
+    readonly theme: 'light' | 'dark';
+}
+export declare function OpenFlowLogo({ theme, alt, width, height, style, ...props }: OpenFlowLogoProps): import("react").JSX.Element;

package/dist/browser/ui.css

@@ -125,6 +125,8 @@
   --open-flow-input: #d2d2d2;
   --open-flow-ring: #777;
   --open-flow-radius: 10px;
+  --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);
@@ -1688,10 +1690,6 @@
     min-width: calc(var(--spacing) * 36);
   }
 
-  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .min-w-40 {
-    min-width: calc(var(--spacing) * 40);
-  }
-
   :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .min-w-44 {
     min-width: calc(var(--spacing) * 44);
   }
@@ -2055,10 +2053,10 @@
     column-gap: calc(var(--spacing) * 3);
   }
 
-  :where(:where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .-space-x-2 > :not(:last-child)) {
+  :where(:where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .-space-x-0\.5 > :not(:last-child)) {
     --tw-space-x-reverse: 0;
-    margin-inline-start: calc(calc(var(--spacing) * -2) * var(--tw-space-x-reverse));
-    margin-inline-end: calc(calc(var(--spacing) * -2) * calc(1 - var(--tw-space-x-reverse)));
+    margin-inline-start: calc(calc(var(--spacing) * -.5) * var(--tw-space-x-reverse));
+    margin-inline-end: calc(calc(var(--spacing) * -.5) * calc(1 - var(--tw-space-x-reverse)));
   }
 
   :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .gap-y-1 {
@@ -3190,6 +3188,10 @@
     --content-icon-initials-background: transparent;
   }
 
+  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .\[--ui-control-hover-background\:var\(--ui-control-background\,var\(--ui-muted\)\)\] {
+    --ui-control-hover-background: var(--ui-control-background, var(--ui-muted));
+  }
+
   :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .\[--ui-control-hover-background\:var\(--warning-subtle-hover\)\] {
     --ui-control-hover-background: var(--warning-subtle-hover);
   }
@@ -3438,6 +3440,21 @@
     }
   }
 
+  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .placeholder\:opacity-70::placeholder {
+    opacity: .7;
+  }
+
+  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .placeholder\:transition-opacity::placeholder {
+    transition-property: opacity;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+
+  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .placeholder\:duration-300::placeholder {
+    --tw-duration: .3s;
+    transition-duration: .3s;
+  }
+
   :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .before\:absolute:before {
     content: var(--tw-content);
     position: absolute;
@@ -3677,6 +3694,10 @@
       --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
+
+    :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .hover\:placeholder\:opacity-50:hover::placeholder {
+      opacity: .5;
+    }
   }
 
   :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .focus\:z-10:focus {
@@ -3695,6 +3716,10 @@
     color: var(--ui-accent-foreground);
   }
 
+  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .focus\:placeholder\:opacity-30:focus::placeholder {
+    opacity: .3;
+  }
+
   :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .focus-visible\:z-10:focus-visible {
     z-index: 10;
   }
@@ -4651,6 +4676,33 @@
     border-radius: calc(var(--ui-radius) - 2px);
   }
 
+  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .data-\[slot\=native-select\]\:focus-visible\:text-field-focus[data-slot="native-select"]: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\=native-select\]\:focus-visible\:text-field-focus[data-slot="native-select"]: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\=native-select\]\:focus-visible\:aria-invalid\:invalid-text-field-focus[data-slot="native-select"]: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\=native-select\]\:focus-visible\:aria-invalid\:invalid-text-field-focus[data-slot="native-select"]: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\=native-select\]\:focus-visible\:aria-invalid\:invalid-text-field-focus[data-slot="native-select"]: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;
@@ -4765,7 +4817,7 @@
       animation: none;
     }
 
-    :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .motion-reduce\:transition-none {
+    :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .motion-reduce\:transition-none, :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .motion-reduce\:placeholder\:transition-none::placeholder {
       transition-property: none;
     }
 
@@ -5735,6 +5787,28 @@
   width: 28px;
 }
 
+.open-flow-navigation-menu {
+  border: 1px solid var(--ui-border);
+  border-radius: var(--ui-radius);
+  background: var(--ui-popover);
+  color: var(--ui-popover-foreground);
+  margin: 0;
+  padding: 4px;
+  position: fixed;
+  inset: 48px 16px auto auto;
+  box-shadow: 0 4px 12px #0002;
+}
+
+.open-flow-navigation-menu:popover-open {
+  flex-direction: column;
+  align-items: stretch;
+  display: flex;
+}
+
+.open-flow-navigation-menu button[aria-pressed="true"] {
+  background: var(--ui-muted);
+}
+
 .npm__react-simple-code-editor__textarea:focus {
   outline: none;
 }

package/dist/browser/ui.d.ts

@@ -37,6 +37,7 @@ export declare const InputGroupAddon: ComponentType<ComponentPropsWithoutRef<'di
 }>;
 export declare const InputGroupInput: ForwardRefExoticComponent<ComponentPropsWithoutRef<'input'> & RefAttributes<HTMLInputElement>>;
 export { Label } from './ui-label.js';
+export { OpenFlowLogo, type OpenFlowLogoProps } from './ui-logo.js';
 export { Textarea } from './ui-textarea.js';
 /** Shared Sonner presentation for hosts and the component Lab. */
 export declare const notificationToasterProps: {
@@ -60,3 +61,5 @@ export declare const notificationToasterProps: {
 export declare function NotificationUndoLabel({ children }: {
     children: ReactNode;
 }): ReactNode;
+export { HostTooltip, type HostTooltipProps } from './ui-hostTooltip.js';
+export { HostNavigationActions, type HostNavigationActionsProps, type HostThemeMode } from './ui-hostNavigationActions.js';

package/dist/browser/ui.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { createElement, forwardRef, useLayoutEffect } from "react";
+import { createElement, forwardRef, useId, useLayoutEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as ReactDOM from "react-dom";
 //#region \0rolldown/runtime.js
@@ -4526,7 +4526,7 @@ var maybeReactUseId = SafeReact.useId;
 * @param idOverride
 * @returns {string}
 */
-function useId(idOverride, prefix) {
+function useId$1(idOverride, prefix) {
 	if (maybeReactUseId !== void 0) {
 		const reactId = maybeReactUseId();
 		return idOverride ?? (prefix ? `${prefix}-${reactId}` : reactId);
@@ -4541,7 +4541,7 @@ function useId(idOverride, prefix) {
 * @returns {string | undefined}
 */
 function useBaseUiId(idOverride) {
-	return useId(idOverride, "base-ui");
+	return useId$1(idOverride, "base-ui");
 }
 //#endregion
 //#region ../../node_modules/.bun/@base-ui+react@1.4.1+fa6c2f29eeb10566/node_modules/@base-ui/react/esm/dialog/description/DialogDescription.js
@@ -5506,7 +5506,7 @@ var usePortalContext = () => React.useContext(PortalContext);
 var attr = createAttribute("portal");
 function useFloatingPortalNode(props = {}) {
 	const { ref, container: containerProp, componentProps = EMPTY_OBJECT, elementProps } = props;
-	const uniqueId = useId();
+	const uniqueId = useId$1();
 	const parentPortalNode = usePortalContext()?.portalNode;
 	const [containerElement, setContainerElement] = React.useState(null);
 	const [portalNode, setPortalNode] = React.useState(null);
@@ -9157,7 +9157,7 @@ var popupStoreSelectors = {
 //#region ../../node_modules/.bun/@base-ui+react@1.4.1+fa6c2f29eeb10566/node_modules/@base-ui/react/esm/floating-ui-react/hooks/useFloatingRootContext.js
 function useFloatingRootContext(options) {
 	const { open = false, onOpenChange, elements = {} } = options;
-	const floatingId = useId();
+	const floatingId = useId$1();
 	const nested = useFloatingParentNodeId() != null;
 	if (process.env.NODE_ENV !== "production") {
 		const optionDomReference = elements.reference;
@@ -9315,7 +9315,7 @@ function useFloating(options = {}) {
 */
 function useSyncedFloatingRootContext(options) {
 	const { popupStore, treatPopupAsFloatingElement = false, onOpenChange } = options;
-	const floatingId = useId();
+	const floatingId = useId$1();
 	const nested = useFloatingParentNodeId() != null;
 	const open = popupStore.useState("open");
 	const referenceElement = popupStore.useState("activeTriggerElement");
@@ -9992,7 +9992,7 @@ function useRole(context, props = {}) {
 	const domReference = store.useState("domReferenceElement");
 	const floatingElement = store.useState("floatingElement");
 	const { role = "dialog" } = props;
-	const defaultReferenceId = useId();
+	const defaultReferenceId = useId$1();
 	const referenceId = domReference?.id || defaultReferenceId;
 	const floatingId = React.useMemo(() => getFloatingFocusElement(floatingElement)?.id || defaultFloatingId, [floatingElement, defaultFloatingId]);
 	const ariaRole = componentRoleToAriaRoleMap.get(role) ?? role;
@@ -12611,6 +12611,28 @@ function Label({ className, ...props }) {
 	});
 }
 //#endregion
+//#region ../../assets/logo/open-flow-dark.svg
+var open_flow_dark_default = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='100'%20height='100'%20viewBox='0%200%20100%20100'%20role='img'%20aria-label='Open%20Flow'%3e%3cpath%20fill='%23e0e2e6'%20d='M32%2016H68Q84%2016%2084%2032V36H68C46%2036%2054%2056%2032%2056H16V32Q16%2016%2032%2016Z'/%3e%3cpath%20fill='%238c919a'%20d='M16%2068H32C54%2068%2046%2048%2068%2048H84V68Q84%2084%2068%2084H32Q16%2084%2016%2068Z'/%3e%3c/svg%3e";
+//#endregion
+//#region ../../assets/logo/open-flow-light.svg
+var open_flow_light_default = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='100'%20height='100'%20viewBox='0%200%20100%20100'%20role='img'%20aria-label='Open%20Flow'%3e%3cpath%20fill='%2344474c'%20d='M32%2016H68Q84%2016%2084%2032V36H68C46%2036%2054%2056%2032%2056H16V32Q16%2016%2032%2016Z'/%3e%3cpath%20fill='%2393979f'%20d='M16%2068H32C54%2068%2046%2048%2068%2048H84V68Q84%2084%2068%2084H32Q16%2084%2016%2068Z'/%3e%3c/svg%3e";
+//#endregion
+//#region src/ui/browser/logo.tsx
+function OpenFlowLogo({ theme, alt = "Open Flow", width = 24, height = 24, style, ...props }) {
+	return /* @__PURE__ */ jsx("img", {
+		...props,
+		src: theme === "dark" ? open_flow_dark_default : open_flow_light_default,
+		alt,
+		width,
+		height,
+		style: {
+			flexShrink: 0,
+			objectFit: "contain",
+			...style
+		}
+	});
+}
+//#endregion
 //#region src/ui/browser/textarea.tsx
 var Textarea = React.forwardRef(function Textarea({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx("textarea", {
@@ -12621,6 +12643,148 @@ var Textarea = React.forwardRef(function Textarea({ className, ...props }, ref)
 	});
 });
 //#endregion
+//#region src/ui/browser/hostTooltip.tsx
+/** Compose a host control with the shared tooltip while preserving its theme and semantics. */
+function HostTooltip({ children, label, side = "top" }) {
+	const [anchor, setAnchor] = useState(null);
+	return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+		ref: setAnchor,
+		render: children
+	}), /* @__PURE__ */ jsx(TooltipContent, {
+		container: anchor?.closest(".open-flow-theme"),
+		side,
+		children: label
+	})] });
+}
+//#endregion
+//#region src/localization/common/languages.ts
+var uiLanguages = [
+	"en",
+	"zh-CN",
+	"zh-TW",
+	"ja",
+	"ko",
+	"ru",
+	"fr"
+];
+/** Endonyms, shown in language pickers regardless of the current UI language. */
+var uiLanguageNames = {
+	"en": "English",
+	"zh-CN": "简体中文",
+	"zh-TW": "繁體中文",
+	"ja": "日本語",
+	"ko": "한국어",
+	"ru": "Русский",
+	"fr": "Français"
+};
+new Map(uiLanguages.map((language) => [language.toLowerCase(), language]));
+//#endregion
+//#region src/ui/browser/hostNavigationActions.tsx
+var themeIcons = {
+	light: "i-lucide-light:sun",
+	dark: "i-lucide-light:moon",
+	auto: "i-lucide-light:sun-moon"
+};
+/** 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,
+		children: [
+			/* @__PURE__ */ jsx(HostTooltip, {
+				label: "GitHub",
+				side: "bottom",
+				children: /* @__PURE__ */ jsx("a", {
+					href: "https://github.com/oomol-lab/open-flow",
+					target: "_blank",
+					rel: "noopener noreferrer",
+					className: buttonVariants({
+						variant: "ghost",
+						size: "icon-sm",
+						className: "text-foreground"
+					}),
+					"aria-label": "GitHub",
+					children: /* @__PURE__ */ jsx("i", {
+						"aria-hidden": "true",
+						className: "i-lucide-light:github size-4"
+					})
+				})
+			}),
+			/* @__PURE__ */ jsx(HostTooltip, {
+				label: labels.theme,
+				side: "bottom",
+				children: /* @__PURE__ */ jsx(Button$1, {
+					variant: "ghost",
+					size: "icon-sm",
+					type: "button",
+					"aria-label": labels.theme,
+					popovertarget: themeId,
+					children: /* @__PURE__ */ jsx("i", {
+						"aria-hidden": "true",
+						className: `${themeIcons[theme]} size-4`
+					})
+				})
+			}),
+			/* @__PURE__ */ jsx(HostTooltip, {
+				label: labels.language,
+				side: "bottom",
+				children: /* @__PURE__ */ jsx(Button$1, {
+					variant: "ghost",
+					size: "icon-sm",
+					type: "button",
+					popovertarget: languageId,
+					"aria-label": labels.language,
+					children: /* @__PURE__ */ jsx("i", {
+						"aria-hidden": "true",
+						className: "i-lucide-light:languages size-4"
+					})
+				})
+			}),
+			/* @__PURE__ */ jsx("div", {
+				id: themeId,
+				popover: "auto",
+				className: "open-flow-navigation-menu",
+				children: [
+					"light",
+					"dark",
+					"auto"
+				].map((value) => /* @__PURE__ */ jsxs(Button$1, {
+					className: "justify-start gap-2",
+					variant: "ghost",
+					size: "sm",
+					type: "button",
+					"aria-pressed": theme == value,
+					onClick: (event) => {
+						onThemeChange(value);
+						event.currentTarget.closest("[popover]")?.hidePopover();
+					},
+					children: [/* @__PURE__ */ jsx("i", {
+						"aria-hidden": "true",
+						className: `${themeIcons[value]} size-4`
+					}), labels[value]]
+				}, value))
+			}),
+			/* @__PURE__ */ jsx("div", {
+				id: languageId,
+				popover: "auto",
+				className: "open-flow-navigation-menu",
+				children: uiLanguages.map((value) => /* @__PURE__ */ jsx(Button$1, {
+					variant: "ghost",
+					size: "sm",
+					type: "button",
+					"aria-pressed": language == value,
+					onClick: (event) => {
+						onLanguageChange(value);
+						event.currentTarget.closest("[popover]")?.hidePopover();
+					},
+					children: uiLanguageNames[value]
+				}, value))
+			})
+		]
+	});
+}
+//#endregion
 //#region src/ui/browser/public.ts
 var Button = Button$1;
 var Dialog = Dialog$1;
@@ -12669,4 +12833,4 @@ function NotificationUndoLabel({ children }) {
 	}), children);
 }
 //#endregion
-export { Button, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, Input, InputGroup, InputGroupAddon, InputGroupInput, Label, NotificationUndoLabel, Textarea, notificationToasterProps };
+export { Button, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, HostNavigationActions, HostTooltip, Input, InputGroup, InputGroupAddon, InputGroupInput, Label, NotificationUndoLabel, OpenFlowLogo, Textarea, notificationToasterProps };

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

@@ -21,13 +21,10 @@ export interface WorkbenchActor {
 export interface WorkbenchHost {
     /** Optional deployment-owned identity lookup. Return null for an unknown actor. */
     readonly resolveActor?: (actorId: string, signal: AbortSignal) => Promise<WorkbenchActor | null>;
-    /** Shared, optional persistent catalog responses, isolated by browser origin. */
-    readonly catalogCache?: {
-        readonly storage?: CatalogCacheStorage;
-    };
-    readonly connectionCache?: {
-        readonly storage?: WorkbenchPreferences;
-    };
+    /** Cache deployment identity. The session id must be stable and non-secret. */
+    readonly cacheEnvironment?: string;
+    /** Host-selected connector owner identity, typically the Team from the host route. */
+    readonly connectorOwnerId?: string;
     notify(notification: WorkbenchNotification | undefined): void;
     openExternalPage(resolveUrl: () => Promise<string>): Promise<boolean>;
     request(input: RequestInfo | URL, init?: RequestInit): Promise<Response>;
@@ -57,7 +54,3 @@ export interface WorkbenchPreferences {
 /** The host resolves deployment and Flow scope before rendering navigation links. */
 export type ConnectionHref = (flowId: string, providerId: string, connectionId?: string) => string | undefined;
 /** Object values are complete response/ETag records; implementations must reject failures. */
-export interface CatalogCacheStorage {
-    get(key: string): Promise<unknown>;
-    set(key: string, value: unknown): Promise<void>;
-}