@parallelworks/ui 0.17.0 → 0.18.0

package/dist/chunks/{list-7k0eaI5N.js → list-qrojZZNv.js}

@@ -1,12 +1,12 @@
+import { a as usePersistedState, n as useLink, r as useNavigation, u as useStrings } from "./Provider-Ghua9PkN.js";
+import { T as Avatar, _ as useRowMenuActive, c as PageHeader, f as rowContextMenuProps, u as MoreButton } from "./PageHeader-l49p1nM9.js";
 import { CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, DisplayIcon, ErrorIcon, FilterIcon, MenuIcon, SearchIcon, XIcon } from "../icons.js";
-import { a as usePersistedState, n as useLink, r as useNavigation, u as useStrings } from "./Provider-DHmZ3v9i.js";
-import { n as TOOLTIP_ID, r as TooltipInfo } from "./Tooltip-n9w7Tkt1.js";
-import { _ as useRowMenuActive, c as PageHeader, p as rowContextMenuProps, u as MoreButton } from "./PageHeader-MxuOs9cH.js";
-import { n as Table } from "./Table-C6JdFFiJ.js";
+import { n as TOOLTIP_ID, r as TooltipInfo } from "./Tooltip-Crxo_eU_.js";
+import { n as Table } from "./Table-4OHjdKdO.js";
 import cx from "classnames";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Children, Fragment as Fragment$1, cloneElement, createContext, isValidElement, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Children, Fragment, cloneElement, createContext, isValidElement, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { useLocalStorage } from "usehooks-ts";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { createPortal } from "react-dom";
 import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/react";
 //#region src/list/ActionToolbar.tsx
@@ -20,7 +20,7 @@ function tipProps(content, place) {
 	};
 }
 function ToolbarItemView({ item }) {
-	if ("element" in item) return /* @__PURE__ */ jsx(Fragment, { children: item.element });
+	if ("element" in item) return /* @__PURE__ */ jsx(Fragment$1, { children: item.element });
 	return /* @__PURE__ */ jsx(ToolbarButton, { action: item });
 }
 function ToolbarButton({ action }) {
@@ -30,7 +30,7 @@ function ToolbarButton({ action }) {
 	const className = cx("inline-flex items-center gap-x-0.5 h-9 px-2 rounded-md text-[13.5px] uppercase font-semibold transition-colors whitespace-nowrap", "bg-(--theme-element) text-(--theme-element-text)", action.disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer hover:bg-(--theme-element-hover)");
 	const tooltipProps = tipProps(action.disabled ? action.disabledTooltip : action.enabledTooltip, "bottom");
 	const Icon = action.icon;
-	const content = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+	const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
 		className: "h-6 flex items-center",
 		children: /* @__PURE__ */ jsx(Icon, { className: cx("w-auto", action.iconClassName) })
 	}), action.label] });
@@ -64,7 +64,7 @@ function OverflowRow({ item }) {
 	const Icon = item.icon;
 	const className = cx("flex w-full items-center gap-x-1 px-4 py-2 text-[13px] uppercase font-semibold link hover:theme-hover", item.disabled && "opacity-50 cursor-not-allowed");
 	const tooltipProps = tipProps(item.disabled ? item.disabledTooltip : item.enabledTooltip, "left");
-	const content = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+	const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
 		className: "w-5 h-6 flex items-center",
 		children: /* @__PURE__ */ jsx(Icon, { className: cx(item.iconClassName) })
 	}), item.label] });
@@ -106,7 +106,7 @@ function OverflowMenu({ items }) {
 			className: "z-50 min-w-56 rounded-md border theme-border bg-(--theme-app-bg) shadow-lg py-1 focus:outline-none",
 			children: /* @__PURE__ */ jsx(OverflowMenuContext.Provider, {
 				value: true,
-				children: items.map((item) => "element" in item ? /* @__PURE__ */ jsx(Fragment$1, { children: item.element }, item.key) : /* @__PURE__ */ jsx(OverflowRow, { item }, item.key))
+				children: items.map((item) => "element" in item ? /* @__PURE__ */ jsx(Fragment, { children: item.element }, item.key) : /* @__PURE__ */ jsx(OverflowRow, { item }, item.key))
 			})
 		})]
 	});
@@ -177,7 +177,7 @@ function ActionToolbar({ groups, right = [], sticky = false }) {
 		className: cx("flex items-center gap-2.5", sticky && cx("sticky top-10 z-10 bg-(--theme-app-bg)", "py-1.5")),
 		children: [visibleGroups.length > 0 && /* @__PURE__ */ jsx("div", {
 			className: "flex items-center gap-2.5 shrink-0",
-			children: visibleGroups.map((group, i) => /* @__PURE__ */ jsxs(Fragment$1, { children: [i > 0 && /* @__PURE__ */ jsx("div", { className: "w-px h-5 bg-(--theme-border)" }), /* @__PURE__ */ jsx("div", {
+			children: visibleGroups.map((group, i) => /* @__PURE__ */ jsxs(Fragment, { children: [i > 0 && /* @__PURE__ */ jsx("div", { className: "w-px h-5 bg-(--theme-border)" }), /* @__PURE__ */ jsx("div", {
 				className: "flex items-center gap-1",
 				children: group.map((item) => /* @__PURE__ */ jsx(ToolbarItemView, { item }, item.key))
 			})] }, group[0]?.key ?? i))
@@ -205,7 +205,7 @@ var listTableFixedProps = {
 };
 function NameCell({ icon, name, subtitle, href, badge, title }) {
 	const Link = useLink();
-	const inner = /* @__PURE__ */ jsxs(Fragment, { children: [icon, /* @__PURE__ */ jsxs("div", {
+	const inner = /* @__PURE__ */ jsxs(Fragment$1, { children: [icon, /* @__PURE__ */ jsxs("div", {
 		className: "min-w-0",
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "flex min-w-0 items-center gap-1.5",
@@ -332,7 +332,7 @@ function ListActionsHeader({ view, actionCount = 0, className }) {
 			width,
 			minWidth: width
 		},
-		className: cx("py-2 text-right @max-[43rem]:w-[52px]! @max-[43rem]:min-w-[52px]!", className),
+		className: cx("relative py-2 text-right @max-[43rem]:w-[52px]! @max-[43rem]:min-w-[52px]!", className),
 		children: /* @__PURE__ */ jsx("span", {
 			className: "sr-only",
 			children: "Actions"
@@ -462,7 +462,7 @@ function ListRow({ href, onActivate, items, goTo, openMenu, pinnedActions, selec
 }
 /** Name column min-width is by role, not position, so a leading checkbox doesn't shift it. */
 function ListColumns({ view }) {
-	return /* @__PURE__ */ jsxs(Fragment, { children: [view.visibleColumns.map((col, i) => /* @__PURE__ */ jsx(Table.Header, {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [view.visibleColumns.map((col, i) => /* @__PURE__ */ jsx(Table.Header, {
 		caps: false,
 		className: cx(col.headerClassName, view.columnClasses[i]),
 		style: col.alwaysVisible ? { minWidth: 200 } : void 0,
@@ -743,7 +743,7 @@ function AnchoredPopover({ icon, label, active, shortcut, panelClassName, childr
 		window.addEventListener("keydown", onKey);
 		return () => window.removeEventListener("keydown", onKey);
 	}, [shortcut, open]);
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("button", {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("button", {
 		ref: btnRef,
 		type: "button",
 		onClick: () => pos ? close() : open(),
@@ -986,7 +986,7 @@ function FilterMenuBody({ view }) {
 	const scheduleClose = () => {
 		closeTimer.current = setTimeout(() => setOpenKey(null), 160);
 	};
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
 		className: "flex items-center justify-between px-3 py-1",
 		children: [/* @__PURE__ */ jsx("span", {
 			className: "text-[11px] font-medium uppercase tracking-wide text-(--theme-muted-text-color)",
@@ -1297,4 +1297,115 @@ function HoverCardSurface({ x, y, widthClassName, padded = true, relayoutKey, on
 	}), document.querySelector(".ds-root") ?? document.body);
 }
 //#endregion
-export { ActionToolbar as A, ListSkeleton as C, actionsColumnWidth as D, RowSelectCheckbox as E, stickyTabsClasses as M, stickyTabsUnderHeaderClasses as N, listTableFixedProps as O, stickyToolbarClasses as P, ListError as S, NameCell as T, ListRow as _, ListCount as a, GroupRow as b, ListDisplayMenu as c, isTextEntryContext as d, DEFAULT_ORDER as f, ListPage as g, ListColumns as h, ListPager as i, ToolbarButton as j, listTableProps as k, ListFilterMenu as l, useListView as m, useHoverCard as n, ListSearchControl as o, FAVORITE_ORDER as p, LIST_PAGE_SIZES as r, useListSearch as s, HoverCardSurface as t, listControlButtonClasses as u, ListRowActionsProvider as v, NAME_MIN_WIDTH_PX as w, ListActionsHeader as x, useListNavigate as y };
+//#region src/list/UserHoverCard.tsx
+/** Opens `card` after a short hover or on focus of `children`. */
+function HoverCardTrigger({ className, children, card }) {
+	const { triggerRef, coords, scheduleOpen, scheduleClose, keepOpen } = useHoverCard();
+	return /* @__PURE__ */ jsxs("span", {
+		ref: triggerRef,
+		role: "none",
+		className,
+		onMouseEnter: scheduleOpen,
+		onMouseLeave: scheduleClose,
+		onFocus: scheduleOpen,
+		onBlur: scheduleClose,
+		children: [children, coords && card({
+			x: coords.x,
+			y: coords.y,
+			onKeepOpen: keepOpen,
+			onLeave: scheduleClose
+		})]
+	});
+}
+function UserHoverCard({ x, y, onKeepOpen, onLeave, username, name, avatarSrc, badge, href, linkComponent, loading = false, relayoutKey, children }) {
+	const strings = useStrings();
+	const SlotLink = useLink();
+	const Link = linkComponent ?? SlotLink;
+	const displayName = name || username;
+	const header = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Avatar, {
+		src: avatarSrc,
+		name: displayName,
+		size: "lg",
+		className: "shrink-0"
+	}), /* @__PURE__ */ jsxs("div", {
+		className: "min-w-0",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-1.5",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "truncate text-sm font-semibold text-(--theme-app)",
+				children: displayName
+			}), badge && /* @__PURE__ */ jsx("span", {
+				className: "shrink-0 rounded-full bg-(--theme-muted-panel-bg) px-1.5 py-0.5 text-[10px] font-medium leading-none text-(--theme-muted-text-color)",
+				children: badge
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "truncate text-xs text-(--theme-muted-text-color)",
+			children: username
+		})]
+	})] });
+	return /* @__PURE__ */ jsxs(HoverCardSurface, {
+		x,
+		y,
+		widthClassName: "w-64",
+		relayoutKey,
+		onKeepOpen,
+		onLeave,
+		children: [href ? /* @__PURE__ */ jsx(Link, {
+			to: href,
+			className: "flex items-center gap-3 transition-opacity hover:opacity-80",
+			children: header
+		}) : /* @__PURE__ */ jsx("div", {
+			className: "flex items-center gap-3",
+			children: header
+		}), loading ? /* @__PURE__ */ jsxs("div", {
+			role: "status",
+			"aria-label": strings.loading,
+			className: "mt-3 space-y-2 border-t border-(--theme-border) pt-3",
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					"aria-hidden": "true",
+					className: "h-3 w-24 animate-pulse rounded theme-muted-panel"
+				}),
+				/* @__PURE__ */ jsx("div", {
+					"aria-hidden": "true",
+					className: "h-3 w-36 animate-pulse rounded theme-muted-panel"
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "sr-only",
+					children: strings.loading
+				})
+			]
+		}) : children ? /* @__PURE__ */ jsx("div", {
+			className: "mt-3 space-y-2 border-t border-(--theme-border) pt-3 text-[13px]",
+			children
+		}) : null]
+	});
+}
+var rowClasses = "flex gap-2 text-(--theme-muted-text-color)";
+/** One detail line of a hover card: a leading icon and its content. With
+* `onClick` the line is a button. */
+function HoverCardRow({ icon, children, title, align = "center", truncate = false, onClick }) {
+	const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		className: cx("flex shrink-0 items-center [&>svg]:h-3.5 [&>svg]:w-3.5", align === "start" && "mt-0.5"),
+		children: icon
+	}), /* @__PURE__ */ jsx("span", {
+		className: cx("min-w-0", truncate && "truncate"),
+		children
+	})] });
+	const alignClass = align === "start" ? "items-start" : "items-center";
+	if (onClick) return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		title,
+		onClick,
+		className: cx(rowClasses, alignClass, "-mx-1 max-w-full rounded px-1 py-0.5 text-left transition-colors hover:bg-(--theme-muted-panel-bg) hover:text-(--theme-app)"),
+		children: content
+	});
+	return /* @__PURE__ */ jsx("div", {
+		title,
+		className: cx(rowClasses, alignClass),
+		children: content
+	});
+}
+//#endregion
+export { actionsColumnWidth as A, GroupRow as C, NAME_MIN_WIDTH_PX as D, ListSkeleton as E, stickyTabsClasses as F, stickyTabsUnderHeaderClasses as I, stickyToolbarClasses as L, listTableProps as M, ActionToolbar as N, NameCell as O, ToolbarButton as P, useListNavigate as S, ListError as T, useListView as _, useHoverCard as a, ListRow as b, ListCount as c, ListDisplayMenu as d, ListFilterMenu as f, FAVORITE_ORDER as g, DEFAULT_ORDER as h, HoverCardSurface as i, listTableFixedProps as j, RowSelectCheckbox as k, ListSearchControl as l, isTextEntryContext as m, HoverCardTrigger as n, LIST_PAGE_SIZES as o, listControlButtonClasses as p, UserHoverCard as r, ListPager as s, HoverCardRow as t, useListSearch as u, ListColumns as v, ListActionsHeader as w, ListRowActionsProvider as x, ListPage as y };

package/dist/components/AddMenu.d.ts

@@ -5,6 +5,7 @@ export interface HeaderAddMenuItem {
     to?: string;
     onSelect?: () => void;
     disabled?: boolean;
+    hint?: string | undefined;
     separatorAbove?: boolean;
 }
 export declare function AddMenu({ items, label, buttonClassName, zClassName, children, }: {

package/dist/components/Avatar.d.ts

@@ -0,0 +1,13 @@
+export type AvatarSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+export type AvatarStatus = 'online' | 'offline' | 'busy' | 'away';
+export interface AvatarProps {
+    /** Image URL; absent or failing to load shows the initials of `name`. */
+    src?: string | null | undefined;
+    name?: string | undefined;
+    size?: AvatarSize | undefined;
+    status?: AvatarStatus | undefined;
+    className?: string | undefined;
+}
+/** Up to two initials: the first and last word of a name split on spaces and dots. */
+export declare function avatarInitials(name: string | undefined): string;
+export declare function Avatar({ src, name, size, status, className, }: AvatarProps): import("react").JSX.Element;

package/dist/components/Dropdown.d.ts

@@ -24,5 +24,7 @@ export interface IProps {
     /** Label for the toggle row hiding a category's collapsible options. */
     collapsedLabel?: (count: number) => string;
     portalEl?: HTMLElement;
+    /** Smaller option rows and text, for dense toolbars. */
+    compact?: boolean | undefined;
 }
 export default function Dropdown(props: IProps): import("react").JSX.Element;

package/dist/components/Provider.d.ts

@@ -55,6 +55,7 @@ export interface UIStrings {
         create: string;
         remove: string;
         sort: string;
+        userAvatar: string;
     };
     dropdown: {
         select: (type: string) => string;
@@ -330,6 +331,7 @@ export interface UIStrings {
         years: (n: number) => string;
     };
     list: {
+        copyMenu: string;
         copy: (label: string) => string;
         copied: (label: string) => string;
         couldntCopy: (label: string) => string;

package/dist/editor/index.js

@@ -1,2 +1,2 @@
-import { a as EditorField, i as FormCodePanel, n as defineEditorThemes, o as Editor, r as getThemeName, t as setupMonacoWorkers } from "../chunks/editor-mNznodJN.js";
+import { a as EditorField, i as FormCodePanel, n as defineEditorThemes, o as Editor, r as getThemeName, t as setupMonacoWorkers } from "../chunks/editor-9_uVtUyy.js";
 export { Editor, EditorField, FormCodePanel, defineEditorThemes, getThemeName, setupMonacoWorkers };

package/dist/file-explorer/index.js

@@ -1,16 +1,16 @@
+import { i as useNotify, l as useSlots, o as useProvisionCorsRules, u as useStrings } from "../chunks/Provider-Ghua9PkN.js";
+import { _ as useRowMenuActive, d as assembleRowMenu, g as useRowMenu, h as useCopySubmenu, u as MoreButton } from "../chunks/PageHeader-l49p1nM9.js";
 import { AccessIcon, AlertIcon, AngleDownIcon, AngleRightIcon, AngleUpIcon, ChevronLeftIcon, ChevronRightIcon, ClipboardIcon, CloseIcon, CloudUploadIcon, CollapseIcon, CustomizeIcon, DiskIcon, DocumentIcon, DownloadFileIcon, ExpandIcon, ExpandVerticalIcon, EyeIcon, FileIcon, FileTextIcon, FolderIcon, FolderOpenIcon, ImageIcon, LinkIcon, LockIcon, MinimizeIcon, MusicIcon, PdfIcon, RefreshIcon, ShareIcon, SpreadsheetIcon, SuccessIcon, TrashIcon, UploadIcon, UserIcon, VideoIcon, ZipIcon, ZoomInIcon, ZoomOutIcon } from "../icons.js";
-import { c as ConfirmModal, f as Markdown, h as Callout, m as CopyToClipboard, n as CreateModal, p as CopyCodeBlock } from "../chunks/CreateModal-BbV5cTj7.js";
-import { i as useNotify, l as useSlots, o as useProvisionCorsRules, u as useStrings } from "../chunks/Provider-DHmZ3v9i.js";
-import { n as TOOLTIP_ID, r as TooltipInfo } from "../chunks/Tooltip-n9w7Tkt1.js";
+import { c as ConfirmModal, f as Markdown, h as Callout, m as CopyToClipboard, n as CreateModal, p as CopyCodeBlock } from "../chunks/CreateModal-BY6DLmur.js";
+import { n as TOOLTIP_ID, r as TooltipInfo } from "../chunks/Tooltip-Crxo_eU_.js";
 import { t as StatusBadge } from "../chunks/StatusBadge-C1Blx_cW.js";
 import { t as Loader } from "../chunks/Loader-BXoXTZGc.js";
-import { _ as useRowMenuActive, d as assembleRowMenu, f as copySubmenu, g as useRowMenu, u as MoreButton } from "../chunks/PageHeader-MxuOs9cH.js";
-import { n as Table } from "../chunks/Table-C6JdFFiJ.js";
-import { C as ListSkeleton, E as RowSelectCheckbox, O as listTableFixedProps, k as listTableProps, x as ListActionsHeader } from "../chunks/list-7k0eaI5N.js";
+import { n as Table } from "../chunks/Table-4OHjdKdO.js";
+import { E as ListSkeleton, M as listTableProps, j as listTableFixedProps, k as RowSelectCheckbox, w as ListActionsHeader } from "../chunks/list-qrojZZNv.js";
 import cx from "classnames";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Suspense, createContext, lazy, memo, use, useCallback, useEffect, useEffectEvent, useId, useLayoutEffect, useMemo, useRef, useState, useTransition } from "react";
 import { useLocalStorage } from "usehooks-ts";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { createPortal } from "react-dom";
 import { Menu, MenuButton, MenuItem, MenuItems, MenuSeparator } from "@headlessui/react";
 import Skeleton from "react-loading-skeleton";
@@ -451,7 +451,7 @@ function FileProgressBar({ fileProgress, fileName, progressBarColorScheme, onCan
 						children: [/* @__PURE__ */ jsx("div", {
 							className: cx("h-full transition-all duration-300 relative flex items-center justify-center", barColor, isHovered && "opacity-80"),
 							style: { width: `${percentage}%` }
-						}), isHovered && !isCompleted && totalBytes > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+						}), isHovered && !isCompleted && totalBytes > 0 && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
 							className: "absolute inset-0 flex items-center justify-center text-xs whitespace-nowrap p-0.5 z-10",
 							style: {
 								WebkitClipPath: `inset(0 ${100 - percentage}% 0 0)`,
@@ -625,7 +625,7 @@ function UploadSessionToast({ session, queueLength, onCancel, onCancelFile }) {
 						})
 					]
 				})]
-			}), isToastExpanded && /* @__PURE__ */ jsxs(Fragment, { children: [
+			}), isToastExpanded && /* @__PURE__ */ jsxs(Fragment$1, { children: [
 				/* @__PURE__ */ jsxs("div", {
 					className: "flex items-center justify-between",
 					children: [/* @__PURE__ */ jsxs("div", {
@@ -1493,7 +1493,7 @@ function PropagationStage({ status, label }) {
 					"aria-hidden": "true",
 					children: /* @__PURE__ */ jsx("polyline", { points: "3.5 8.5 6.5 11.5 12.5 5" })
 				}),
-				status === "active" && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", { className: "absolute inline-flex h-full w-full animate-ping rounded-full bg-blue-400/60" }), /* @__PURE__ */ jsx("span", { className: "relative inline-flex h-2 w-2 rounded-full bg-blue-500" })] }),
+				status === "active" && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", { className: "absolute inline-flex h-full w-full animate-ping rounded-full bg-blue-400/60" }), /* @__PURE__ */ jsx("span", { className: "relative inline-flex h-2 w-2 rounded-full bg-blue-500" })] }),
 				status === "pending" && /* @__PURE__ */ jsx("span", { className: "inline-flex h-1.5 w-1.5 rounded-full theme-muted-text opacity-60" })
 			]
 		}), /* @__PURE__ */ jsx("span", {
@@ -2557,7 +2557,7 @@ function useObjectText(url, { enabled, maxBytes, maxLines, knownSize, cacheKey,
 }
 //#endregion
 //#region src/file-explorer/FilePreview/Viewer.tsx
-var CodePreviewEditor = lazy(() => import("../chunks/CodePreviewEditor-UAtnpmOV.js"));
+var CodePreviewEditor = lazy(() => import("../chunks/CodePreviewEditor-4lx3kE-w.js"));
 var PREVIEW_MARKDOWN_CONTROLS = {
 	table: { fullscreen: false },
 	mermaid: { fullscreen: false }
@@ -2998,7 +2998,7 @@ function PreviewFetchState({ loading, tooLarge, error, corsError, storage, onCor
 	});
 	if (tooLarge) return /* @__PURE__ */ jsx(TooLargeInline, { onDownload });
 	if (error) return /* @__PURE__ */ jsx(PreviewError, { onDownload });
-	return /* @__PURE__ */ jsx(Fragment, { children });
+	return /* @__PURE__ */ jsx(Fragment$1, { children });
 }
 function NotPreviewable({ icon, title, message, onDownload }) {
 	const t = useStrings().fileExplorer;
@@ -3247,7 +3247,7 @@ function FilePreview({ open, node, siblings, storage, getPresignedUrl, onNavigat
 		onClick: (e) => {
 			if (e.target === e.currentTarget) onClose();
 		},
-		children: [isOverlay && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(EdgeButton, {
+		children: [isOverlay && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(EdgeButton, {
 			side: "left",
 			label: t.preview.previousFile,
 			disabled: !hasPrev,
@@ -3592,7 +3592,7 @@ function FileRowsWindow({ items, padTop, padBottom, nodes, checkedItems, activeI
 	const storageIconAlt = useStrings().fileExplorer.chrome.storageIconAlt;
 	useNestedScrollerWarning(scrollEl, nodes.length);
 	useRowPitchAudit(scrollEl, nodes, items);
-	return /* @__PURE__ */ jsxs(Fragment, { children: [
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		padTop > 0 && /* @__PURE__ */ jsx(Spacer, { height: padTop }, "pad-top"),
 		items.map((item) => {
 			const node = nodes[item.index];
@@ -3625,7 +3625,7 @@ function FileRowsWindow({ items, padTop, padBottom, nodes, checkedItems, activeI
 	] });
 }
 function Spacer({ height }) {
-	return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("tr", {
+	return /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx("tr", {
 		"aria-hidden": "true",
 		className: "border-0",
 		children: /* @__PURE__ */ jsx("td", {
@@ -3658,7 +3658,7 @@ function useRowPitchAudit(scrollEl, nodes, items) {
 *  would land in `<tbody>`, since Children.toArray only flattens arrays. */
 function FileTableHeaders({ allSelected, someSelected, onSelectAll }) {
 	const t = useStrings().fileExplorer;
-	return /* @__PURE__ */ jsxs(Fragment, { children: [
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		/* @__PURE__ */ jsx(Table.Header, {
 			caps: false,
 			className: "py-2",
@@ -4100,7 +4100,7 @@ function indentStyle(depth, isDirectory) {
 }
 function IndentGuides({ depth }) {
 	if (depth === 0) return null;
-	return /* @__PURE__ */ jsx(Fragment, { children: Array.from({ length: depth }, (_, level) => /* @__PURE__ */ jsx("span", {
+	return /* @__PURE__ */ jsx(Fragment$1, { children: Array.from({ length: depth }, (_, level) => /* @__PURE__ */ jsx("span", {
 		"aria-hidden": "true",
 		className: "pointer-events-none absolute inset-y-0 w-px bg-(--theme-border)/60",
 		style: { left: GUIDE_OFFSET + level * INDENT_PER_LEVEL }
@@ -4112,7 +4112,7 @@ function RowIcons({ isDirectory, isExpanded, customIcon }) {
 		children: customIcon
 	});
 	const folder = isExpanded ? /* @__PURE__ */ jsx(FolderOpenIcon, { className: "h-4 w-4 mr-1 text-sky-500" }) : /* @__PURE__ */ jsx(FolderIcon, { className: "h-4 w-4 mr-1 text-sky-500/80" });
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(AngleRightIcon, { className: cx("h-3.5 w-3.5 shrink-0 theme-muted-text transition-transform duration-150", isExpanded && "rotate-90") }), customIcon ?? folder] });
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(AngleRightIcon, { className: cx("h-3.5 w-3.5 shrink-0 theme-muted-text transition-transform duration-150", isExpanded && "rotate-90") }), customIcon ?? folder] });
 }
 /** Sized by the slot, not by its contents: react-loading-skeleton wraps each bar
 *  in an inline span, so a bar occupies a line box taller than its `height` and
@@ -4364,6 +4364,7 @@ function TreeFrame({ treeOnly, sidebarWidth, onWidthChange, children }) {
 	});
 }
 function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHierarchy = false, groups = [], groupsLoading = false, selectedPath, onPathChange, getProviderAndClient, treeOnly = false, initialExpandedPaths, onExpandedPathsChange }) {
+	const copySubmenu = useCopySubmenu();
 	const t = useStrings().fileExplorer;
 	const notify = useNotify();
 	const slots = useSlots();
@@ -5228,7 +5229,7 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 							selectedStorage: null,
 							onRefresh: handleRefresh
 						})]
-					}) : !selectedNode ? /* @__PURE__ */ jsx(NoFileSelectedPreview, {}) : /* @__PURE__ */ jsxs(Fragment, { children: [
+					}) : !selectedNode ? /* @__PURE__ */ jsx(NoFileSelectedPreview, {}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
 						/* @__PURE__ */ jsxs("div", {
 							className: "flex items-center justify-between gap-3 px-4 h-12 shrink-0 border-b theme-border",
 							children: [renderBreadcrumb(), /* @__PURE__ */ jsxs("div", {
@@ -5320,7 +5321,7 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 											className: "text-sm rounded-sm hover:theme-hover cursor-pointer w-full items-center px-2 py-1.5",
 											onClick: handleDownload,
 											children: "From browser"
-										}) }), selectedNodeSupportsPwUri && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(MenuSeparator, { className: "my-0.5 h-px theme-border" }), /* @__PURE__ */ jsx(MenuItem, { children: /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
+										}) }), selectedNodeSupportsPwUri && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(MenuSeparator, { className: "my-0.5 h-px theme-border" }), /* @__PURE__ */ jsx(MenuItem, { children: /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
 											className: "text-sm w-full text-center pointer-events-none px-2 py-1.5",
 											children: "Using PW CLI"
 										}), (() => {
@@ -5456,7 +5457,7 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 															className: "tabular-nums",
 															children: formatFileSize(selectedNode.size)
 														}),
-														modifiedDt && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+														modifiedDt && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
 															"aria-hidden": true,
 															children: "·"
 														}), /* @__PURE__ */ jsxs("span", { children: ["Modified ", modifiedDt.toRelative()] })] })
@@ -5486,21 +5487,21 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 											}), /* @__PURE__ */ jsxs("dl", {
 												className: "grid grid-cols-[minmax(0,140px)_1fr] gap-x-6 gap-y-2 text-sm",
 												children: [
-													typeof selectedNode.size === "number" && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("dt", {
+													typeof selectedNode.size === "number" && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("dt", {
 														className: "theme-muted-text",
 														children: t.chrome.size
 													}), /* @__PURE__ */ jsx("dd", {
 														className: "tabular-nums",
 														children: formatFileSize(selectedNode.size)
 													})] }),
-													selectedNode.contentType && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("dt", {
+													selectedNode.contentType && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("dt", {
 														className: "theme-muted-text",
 														children: "Content Type"
 													}), /* @__PURE__ */ jsx("dd", {
 														className: "font-mono text-xs",
 														children: selectedNode.contentType
 													})] }),
-													createdDt && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("dt", {
+													createdDt && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("dt", {
 														className: "theme-muted-text",
 														children: t.chrome.created
 													}), /* @__PURE__ */ jsxs("dd", { children: [
@@ -5511,7 +5512,7 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 															children: ["· ", createdDt.toRelative()]
 														})
 													] })] }),
-													modifiedDt && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("dt", {
+													modifiedDt && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("dt", {
 														className: "theme-muted-text",
 														children: "Last Modified"
 													}), /* @__PURE__ */ jsxs("dd", { children: [
@@ -5522,14 +5523,14 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 															children: ["· ", modifiedDt.toRelative()]
 														})
 													] })] }),
-													selectedNode.hash && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("dt", {
+													selectedNode.hash && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("dt", {
 														className: "theme-muted-text",
 														children: t.chrome.hash
 													}), /* @__PURE__ */ jsx("dd", {
 														className: "font-mono text-xs break-all",
 														children: selectedNode.hash.replace(/^"|"$/g, "")
 													})] }),
-													selectedNode.storageClass && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("dt", {
+													selectedNode.storageClass && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("dt", {
 														className: "theme-muted-text",
 														children: "Storage Class"
 													}), /* @__PURE__ */ jsx("dd", {

package/dist/form/FieldWrapper.d.ts

@@ -1,4 +1,5 @@
 import type React from 'react';
+import type { Optional } from './types/workflow-schema.js';
 export interface FieldLabelBinding {
     id: string;
     labelId: string;
@@ -10,6 +11,6 @@ export declare function FieldWrapper({ label, tooltipComponent, description, lab
     description?: string | undefined;
     labelPosition?: 'left' | 'top' | undefined;
     spaceCompact?: boolean | undefined;
-    optional?: boolean | undefined;
+    optional?: Optional | undefined;
     children: React.ReactNode | ((binding: FieldLabelBinding) => React.ReactNode);
 }): React.JSX.Element;

package/dist/form/Form.d.ts

@@ -105,6 +105,8 @@ export interface DynamicFormProps {
     missingFields?: string[] | undefined;
     spaceCompact?: boolean;
     organizationVariables?: WorkflowVariables | undefined;
+    /** A remote workflow's repo/branch/yaml, so `${{ remote.* }}` resolves the same here as it does on the run. */
+    remoteVars?: Record<string, string | undefined> | undefined;
     needsOrganizationVariables?: boolean;
     onSubmit?: ((values: Record<string, unknown>) => void) | undefined;
     submitLabel?: string;
@@ -120,5 +122,5 @@ export interface DynamicFormProps {
     /** Host-supplied field components, merged over the core registry by type. */
     fields?: Record<string, FieldComponent>;
 }
-export declare function DynamicForm({ formJSONs: options, reinitialize, initialValues, setValues, setFormDirty, formikRef, labelPosition, missingFields, spaceCompact, organizationVariables, needsOrganizationVariables, onSubmit, submitLabel, className, workflowForm, contextKey, skipValueParse, fields, }: DynamicFormProps): React.JSX.Element;
+export declare function DynamicForm({ formJSONs: options, reinitialize, initialValues, setValues, setFormDirty, formikRef, labelPosition, missingFields, spaceCompact, organizationVariables, remoteVars, needsOrganizationVariables, onSubmit, submitLabel, className, workflowForm, contextKey, skipValueParse, fields, }: DynamicFormProps): React.JSX.Element;
 export {};