@parallelworks/ui 0.13.0 → 0.15.0

package/dist/chunks/{CodePreviewEditor-67A_SKgE.js → CodePreviewEditor-DuMZMA_k.js}

@@ -1,5 +1,5 @@
 import { t as useCssIsDark } from "./useCssIsDark-DHr05dG2.js";
-import { n as defineEditorThemes, r as getThemeName, t as setupMonacoWorkers } from "./editor-BZ9Buwi4.js";
+import { n as defineEditorThemes, r as getThemeName, t as setupMonacoWorkers } from "./editor-Ko3zX22Y.js";
 import { jsx } from "react/jsx-runtime";
 import { useEffect, useRef } from "react";
 import * as monaco from "monaco-editor";

package/dist/chunks/{CreateModal-k_e1dI8c.js → CreateModal-B7smkHkv.js}

@@ -1,9 +1,9 @@
 import { AlertIcon, CheckIcon, ChevronDownIcon, ChevronRightIcon, ClipboardIcon, CopyIcon, FavoriteIcon, FavoriteOutlineIcon, HiddenFalseIcon, HiddenTrueIcon, InfoIcon, TooltipIcon } from "../icons.js";
 import { c as useStrings, i as useNotify } from "./Provider-CbFVFB7O.js";
 import { n as TOOLTIP_ID } from "./Tooltip-n9w7Tkt1.js";
-import { i as filterOption, l as toggleSetMember } from "./StatusBadge-RRUI78iS.js";
+import { i as filterOption, l as toggleSetMember } from "./StatusBadge-zvEtK16a.js";
 import { n as modalPanelClasses, t as BareModal } from "./BareModal-BqroLbZ5.js";
-import { C as AddMenu } from "./PageHeader-FhtphHGc.js";
+import { w as AddMenu } from "./PageHeader-CoZWF0pJ.js";
 import cx from "classnames";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Suspense, lazy, useCallback, useEffect, useRef, useState } from "react";
@@ -280,7 +280,7 @@ function CreateModal({ open, onClose, typeIcon, typeLabel, typeMenu, namePlaceho
 			if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) handleSubmit();
 		},
 		onPanelMouseDown: (e) => {
-			if (e.target instanceof Element && !e.target.closest("input, textarea, button, a, select, label")) e.preventDefault();
+			if (e.target instanceof Element && !e.target.closest("input, textarea, button, a, select, label, code, pre, .select-all")) e.preventDefault();
 		},
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "flex-1 min-h-0 overflow-y-auto overscroll-contain",
@@ -514,7 +514,7 @@ function pushToggleRowOnce(nodes, toggledGroups, group, count, collapse) {
 function buildOptionNodes(options, query, onChange, collapse) {
 	const trimmed = query.trim();
 	const q = trimmed.toLowerCase().replace(/-/g, "");
-	const filtered = q ? options.filter((o) => filterOption({
+	const filtered = q ? options.filter((o) => o.pinned || filterOption({
 		label: o.label,
 		value: o.value,
 		secondaryValue: o.group
@@ -536,12 +536,28 @@ function buildOptionNodes(options, query, onChange, collapse) {
 			pushToggleRowOnce(nodes, toggledGroups, group, collapsibleCounts.get(group) ?? 0, collapse);
 			if (!collapse.expanded.has(group)) continue;
 		}
-		nodes.push(/* @__PURE__ */ jsx(MenuItem, { children: /* @__PURE__ */ jsxs("button", {
-			type: "button",
-			onClick: () => onChange(option.value),
-			className: "flex w-full items-center gap-2 px-3 py-1.5 text-[13px] text-(--theme-app) data-[focus]:bg-(--theme-muted-panel-bg) cursor-pointer",
-			children: [option.icon, option.label]
-		}) }, option.value));
+		nodes.push(/* @__PURE__ */ jsx(MenuItem, {
+			disabled: option.disabled ?? false,
+			children: /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				disabled: option.disabled,
+				"aria-disabled": option.disabled,
+				"aria-label": option.description ? option.label : void 0,
+				"aria-description": option.description,
+				onClick: () => onChange(option.value),
+				className: cx("flex w-full items-center gap-2 px-3 py-1.5 text-left text-[13px] data-[focus]:bg-(--theme-muted-panel-bg)", option.disabled ? "cursor-not-allowed text-(--theme-muted-text-color)" : "cursor-pointer text-(--theme-app)", option.pinned && "mt-1 border-t border-(--theme-border) pt-2 font-medium"),
+				children: [option.icon, option.description ? /* @__PURE__ */ jsxs("span", {
+					className: "flex min-w-0 flex-col",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "truncate",
+						children: option.label
+					}), /* @__PURE__ */ jsx("span", {
+						className: "truncate text-[11px] font-normal text-(--theme-muted-text-color)",
+						children: option.description
+					})]
+				}) : option.label]
+			})
+		}, option.value));
 	}
 	return nodes;
 }

package/dist/chunks/{Monaco-H56KyEdb.js → Monaco-BXDH2jVj.js}

@@ -1,6 +1,6 @@
 import { l as useWorkflowJsonResolver } from "./Provider-CbFVFB7O.js";
 import { t as useCssIsDark } from "./useCssIsDark-DHr05dG2.js";
-import { n as defineEditorThemes, r as getThemeName, t as setupMonacoWorkers } from "./editor-BZ9Buwi4.js";
+import { n as defineEditorThemes, r as getThemeName, t as setupMonacoWorkers } from "./editor-Ko3zX22Y.js";
 import cx from "classnames";
 import { jsx } from "react/jsx-runtime";
 import { useEffect, useRef } from "react";

package/dist/chunks/{PageHeader-FhtphHGc.js → PageHeader-CoZWF0pJ.js}

@@ -128,7 +128,8 @@ function toRowMenuItem(action) {
 		icon: action.icon,
 		onSelect: action.onSelect ?? (() => {}),
 		disabled: action.disabled,
-		destructive: action.destructive
+		destructive: action.destructive,
+		tooltip: action.tooltip
 	};
 }
 /** Bridges a toolbar action (icon component, `onClick`/`href`) onto the shared
@@ -143,7 +144,8 @@ function toolbarActionToRowAction(action) {
 		onSelect: action.onClick,
 		to: action.href,
 		disabled: action.disabled,
-		destructive: action.key === "delete" || action.key === "destroy"
+		destructive: action.key === "delete" || action.key === "destroy",
+		tooltip: action.disabledTooltip
 	};
 }
 /** Assembles a row's context menu in the shared order: leading link(s) → middle
@@ -344,8 +346,14 @@ function MenuRow({ item, onClose, side }) {
 	});
 	return /* @__PURE__ */ jsxs("button", {
 		type: "button",
-		disabled: item.disabled,
+		disabled: item.disabled && !item.tooltip,
+		"aria-disabled": item.disabled,
+		...item.disabled && item.tooltip ? {
+			"data-tooltip-id": TOOLTIP_ID,
+			"data-tooltip-content": item.tooltip
+		} : {},
 		onClick: () => {
+			if (item.disabled) return;
 			if (item.copy) {
 				const { text, label } = item.copy;
 				navigator.clipboard?.writeText(text).then(() => notify.success(t.copied(label)), () => notify.error(t.couldntCopy(label)));
@@ -440,7 +448,7 @@ var headerAddButtonClasses = "inline-flex h-[26px] shrink-0 items-center gap-1.5
 /** With menu, the plus opens a chooser; otherwise navigates to or calls the
 * single action. `word` is the visible verb; `label` stays the full action for
 * the tooltip and screen readers. */
-function HeaderAddButton({ to, onClick, label, word = "add", menu }) {
+function HeaderAddButton({ to, onClick, label, word = "add", menu, disabled = false, disabledHint }) {
 	const { common } = useStrings();
 	const Link = useLink();
 	const content = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(AddIcon, { className: "w-3 h-3" }), /* @__PURE__ */ jsx("span", { children: word === "create" ? common.create : common.add })] });
@@ -457,12 +465,17 @@ function HeaderAddButton({ to, onClick, label, word = "add", menu }) {
 		className: headerAddButtonClasses,
 		children: content
 	});
+	const hint = disabled ? disabledHint : void 0;
 	return /* @__PURE__ */ jsx("button", {
 		type: "button",
-		onClick,
-		"aria-label": label,
-		title: label,
-		className: headerAddButtonClasses,
+		onClick: disabled ? void 0 : onClick,
+		"aria-label": hint ? `${label}. ${hint}` : label,
+		"aria-disabled": disabled || void 0,
+		...hint ? {
+			"data-tooltip-id": TOOLTIP_ID,
+			"data-tooltip-content": hint
+		} : { title: label },
+		className: cx(headerAddButtonClasses, "aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:hover:bg-transparent aria-disabled:hover:text-(--theme-muted-text-color)"),
 		children: content
 	});
 }
@@ -611,4 +624,4 @@ function PageHeader({ breadcrumbs, title, titleAction, actions, toolbar, classNa
 	});
 }
 //#endregion
-export { AddMenu as C, useSetDefaultBreadcrumbs as S, BreadcrumbProvider as _, HeaderAddButton as a, useHideBreadcrumbs as b, PageHeader as c, copySubmenu as d, rowContextMenuProps as f, useRowMenuActive as g, useRowMenu as h, HeaderActionMenu as i, MoreButton as l, toolbarActionToRowAction as m, BreadcrumbsRightAction as n, HeaderEditButton as o, toRowMenuItem as p, BreadcrumbsTitleAction as r, HeaderRowMenu as s, BreadcrumbsActionButton as t, assembleRowMenu as u, useBreadcrumb as v, useSetBreadcrumbs as x, useClearBreadcrumbs as y };
+export { useSetDefaultBreadcrumbs as C, useSetBreadcrumbs as S, useRowMenuActive as _, HeaderAddButton as a, useClearBreadcrumbs as b, PageHeader as c, assembleRowMenu as d, copySubmenu as f, useRowMenu as g, toolbarActionToRowAction as h, HeaderActionMenu as i, headerActionButtonClasses as l, toRowMenuItem as m, BreadcrumbsRightAction as n, HeaderEditButton as o, rowContextMenuProps as p, BreadcrumbsTitleAction as r, HeaderRowMenu as s, BreadcrumbsActionButton as t, MoreButton as u, BreadcrumbProvider as v, AddMenu as w, useHideBreadcrumbs as x, useBreadcrumb as y };

package/dist/chunks/{StatusBadge-RRUI78iS.js → StatusBadge-zvEtK16a.js}

@@ -67,7 +67,7 @@ function collapsedCategoryRows(category, filtered, collapsibleCount, expanded, c
 }
 function flattenDisplayOptions({ options, query, expandedCategories, collapsedLabel, selectedValue, allowCustomValue, customValueLabel }) {
 	const flatOptions = options.flatMap((option) => {
-		if (!isCategory(option)) return filterOption(option, query) ? [option] : [];
+		if (!isCategory(option)) return option.pinned || filterOption(option, query) ? [option] : [];
 		const filtered = option.options.filter((opt) => filterOption(opt, query));
 		if (filtered.length === 0) return [];
 		const category = option.category || "";

package/dist/chunks/{SwitchToggle-DbW0Q__L.js → SwitchToggle-3V836Cn7.js}

@@ -1,7 +1,7 @@
 import { AngleDownIcon, AngleRightIcon, CaretDownIcon } from "../icons.js";
 import { c as useStrings } from "./Provider-CbFVFB7O.js";
 import { a as truncationTooltipProps, n as TOOLTIP_ID } from "./Tooltip-n9w7Tkt1.js";
-import { a as flattenDisplayOptions, c as isOption, i as filterOption, l as toggleSetMember, o as flattenOptions, r as DropdownCaret, s as isCategory } from "./StatusBadge-RRUI78iS.js";
+import { a as flattenDisplayOptions, c as isOption, i as filterOption, l as toggleSetMember, o as flattenOptions, r as DropdownCaret, s as isCategory } from "./StatusBadge-zvEtK16a.js";
 import cx from "classnames";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
@@ -263,6 +263,7 @@ function DropdownHelper({ wrapperClassName = "w-full", className, textBoxClassNa
 			const optionDescription = typeof option !== "string" ? option.description : void 0;
 			const isCategoryRow = typeof option !== "string" && Boolean(option.category);
 			const toggleTarget = typeof option !== "string" ? option.toggle : void 0;
+			const isPinned = typeof option !== "string" && Boolean(option.pinned);
 			if (toggleTarget !== void 0) return /* @__PURE__ */ jsx(ToggleOption, {
 				option,
 				category: toggleTarget,
@@ -272,7 +273,7 @@ function DropdownHelper({ wrapperClassName = "w-full", className, textBoxClassNa
 			return /* @__PURE__ */ jsx(ComboboxOption, {
 				"data-testid": "combobox-option",
 				value: option,
-				className: cx("w-full group relative flex", optionDescription ? "min-h-10 py-2" : "h-10", isCategoryRow ? "text-[14px] font-bold pl-1 items-center" : "data-disabled:text-(--theme-muted-text-color) data-disabled:bg-(--theme-muted-panel-bg) data-disabled:cursor-not-allowed cursor-pointer items-center pr-9 pl-3 leading-5 data-focus:bg-(--theme-muted-panel-bg) data-focus:text-(--theme-app) data-focus:outline-hidden", "data-selected:border-l-2 data-selected:border-(--theme-link) data-selected:bg-(--theme-muted-panel-bg) data-selected:text-(--theme-app)"),
+				className: cx("w-full group relative flex", optionDescription ? "min-h-10 py-2" : "h-10", isCategoryRow ? "text-[14px] font-bold pl-1 items-center" : "data-disabled:text-(--theme-muted-text-color) data-disabled:bg-(--theme-muted-panel-bg) data-disabled:cursor-not-allowed cursor-pointer items-center pr-9 pl-3 leading-5 data-focus:bg-(--theme-muted-panel-bg) data-focus:text-(--theme-app) data-focus:outline-hidden", "data-selected:border-l-2 data-selected:border-(--theme-link) data-selected:bg-(--theme-muted-panel-bg) data-selected:text-(--theme-app)", isPinned && "border-t border-(--theme-border) font-medium"),
 				children: /* @__PURE__ */ jsx(OptionContent, {
 					label: optionLabel,
 					description: optionDescription,
@@ -619,7 +620,7 @@ function MultiSelectDropdown({ options, value, onChange, id, "aria-labelledby":
 //#endregion
 //#region src/components/CollapsiblePanel.tsx
 var noop = () => {};
-function ControlledCollapsiblePanel({ title = "", children, open, setOpen, onClick = noop, wrapperElement, customizedButton = null, className }) {
+function ControlledCollapsiblePanel({ title = "", children, open, setOpen, onClick = noop, wrapperElement, customizedButton = null, titleAction, className }) {
 	const toggleOpen = useCallback(() => {
 		if (onClick) onClick();
 		setOpen?.((open) => !open);
@@ -633,18 +634,25 @@ function ControlledCollapsiblePanel({ title = "", children, open, setOpen, onCli
 	}) })] }) : /* @__PURE__ */ jsxs("div", {
 		className: cx("border border-solid rounded-2xl border-(--theme-border) bg-(--theme-panel-bg) text-(--theme-panel) mb-1 w-full", className),
 		children: [/* @__PURE__ */ jsxs("div", {
-			className: cx(!open && "text-(--theme-muted-text-color)", "w-full flex items-center justify-between transform ease-in transition text-sm py-3 px-2 cursor-pointer"),
-			children: [/* @__PURE__ */ jsxs("button", {
-				type: "button",
-				"aria-expanded": !!open,
-				"aria-controls": contentId,
-				className: "flex items-center w-full text-left cursor-pointer",
-				onClick: toggleOpen,
-				children: [/* @__PURE__ */ jsx(AngleRightIcon, { className: cx(open && "transform rotate-90", "px-1 ml-1 text-[1.25rem] transition ease-in") }), /* @__PURE__ */ jsx("span", {
-					className: "px-2 font-bold select-none",
-					children: title?.toString()
-				})]
-			}), /* @__PURE__ */ jsx("div", { children: customizedButton })]
+			className: cx(!open && "text-(--theme-muted-text-color)", "w-full flex items-center transform ease-in transition text-sm py-3 px-2 cursor-pointer"),
+			children: [
+				/* @__PURE__ */ jsxs("button", {
+					type: "button",
+					"aria-expanded": !!open,
+					"aria-controls": contentId,
+					className: cx("flex items-center text-left cursor-pointer", !titleAction && "w-full"),
+					onClick: toggleOpen,
+					children: [/* @__PURE__ */ jsx(AngleRightIcon, { className: cx(open && "transform rotate-90", "px-1 ml-1 text-[1.25rem] transition ease-in") }), /* @__PURE__ */ jsx("span", {
+						className: "px-2 font-bold select-none",
+						children: title?.toString()
+					})]
+				}),
+				titleAction,
+				/* @__PURE__ */ jsx("div", {
+					className: "ml-auto",
+					children: customizedButton
+				})
+			]
 		}), /* @__PURE__ */ jsx(AnimateHeight, {
 			id: contentId,
 			duration: 300,

package/dist/chunks/{editor-BZ9Buwi4.js → editor-Ko3zX22Y.js}

@@ -2,14 +2,14 @@ import { CheckIcon, CopyIcon, EyeIcon, EyeOffIcon } from "../icons.js";
 import { c as useStrings, i as useNotify } from "./Provider-CbFVFB7O.js";
 import { t as Loader } from "./Loader-BXoXTZGc.js";
 import { t as SwitchToggleSmall } from "./SwitchToggleSmall-FcsaYSTs.js";
-import { c as FieldWrapper, n as flattenGroups, r as impureSetValueFromPath } from "./lib-DyJvmbzj.js";
+import { c as FieldWrapper, n as flattenGroups, r as impureSetValueFromPath } from "./lib-CUTRDpa6.js";
 import cx from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Suspense, lazy, useId, useMemo, useRef, useState } from "react";
 import { convertToDynamicForm, parseStringsOfObj, parseStringsOfObjReady } from "@parallelworks/workflow-parser";
 import { useField, useFormikContext } from "formik";
 //#region src/editor/Editor.tsx
-var MonacoEditor = lazy(() => import("./Monaco-H56KyEdb.js"));
+var MonacoEditor = lazy(() => import("./Monaco-BXDH2jVj.js"));
 function Editor({ ...props }) {
 	return /* @__PURE__ */ jsx(Suspense, {
 		fallback: /* @__PURE__ */ jsx(Loader, { text: "Loading editor..." }),

package/dist/chunks/{lib-DyJvmbzj.js → lib-CUTRDpa6.js}

@@ -115,11 +115,9 @@ function enforceOneMustBeTrue(items, options, promoteIndex) {
 	const oneMustBeTrueFields = Object.keys(options).filter((key) => typeof options[key] === "object" && options[key] !== null && "one_must_be_true" in options[key] && options[key].one_must_be_true);
 	for (const fieldKey of oneMustBeTrueFields) {
 		const fieldSchema = options[fieldKey];
-		if (typeof fieldSchema === "object" && fieldSchema && "options" in fieldSchema) {
-			const opts = fieldSchema.options;
-			const trueOption = typeof opts === "object" && opts && !Array.isArray(opts) && "onOption" in opts ? opts.onOption || true : true;
-			if (!items.some((item) => item[fieldKey] === trueOption)) items[clampedIndex][fieldKey] = trueOption;
-		}
+		const opts = typeof fieldSchema === "object" && fieldSchema && "options" in fieldSchema ? fieldSchema.options : void 0;
+		const trueOption = typeof opts === "object" && opts && !Array.isArray(opts) && "onOption" in opts ? opts.onOption || true : true;
+		if (!items.some((item) => item[fieldKey] === trueOption)) items[clampedIndex][fieldKey] = trueOption;
 	}
 	return items;
 }

package/dist/chunks/{list-3jZW8rmM.js → list-CduoUsMW.js}

@@ -1,7 +1,7 @@
 import { CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, DisplayIcon, ErrorIcon, FilterIcon, MenuIcon, SearchIcon, XIcon } from "../icons.js";
 import { c as useStrings, n as useLink, r as useNavigation } from "./Provider-CbFVFB7O.js";
 import { n as TOOLTIP_ID, r as TooltipInfo } from "./Tooltip-n9w7Tkt1.js";
-import { c as PageHeader, f as rowContextMenuProps, g as useRowMenuActive, l as MoreButton } from "./PageHeader-FhtphHGc.js";
+import { _ as useRowMenuActive, c as PageHeader, p as rowContextMenuProps, u as MoreButton } from "./PageHeader-CoZWF0pJ.js";
 import { n as Table } from "./Table-CutP1bRt.js";
 import cx from "classnames";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -203,13 +203,16 @@ var listTableFixedProps = {
 	...listTableProps,
 	className: listTableProps.className.replace("table-auto", "table-fixed")
 };
-function NameCell({ icon, name, subtitle, href }) {
+function NameCell({ icon, name, subtitle, href, badge }) {
 	const Link = useLink();
 	const inner = /* @__PURE__ */ jsxs(Fragment, { children: [icon, /* @__PURE__ */ jsxs("div", {
 		className: "min-w-0",
-		children: [/* @__PURE__ */ jsx("div", {
-			className: NAME_TEXT,
-			children: name
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex min-w-0 items-center gap-1.5",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: cx(NAME_TEXT, href && "group-hover/namecell:text-(--theme-link)"),
+				children: name
+			}), badge]
 		}), subtitle && /* @__PURE__ */ jsx("div", {
 			className: SUBTITLE_TEXT,
 			children: subtitle
@@ -219,7 +222,7 @@ function NameCell({ icon, name, subtitle, href }) {
 		className: "py-2.5",
 		children: href ? /* @__PURE__ */ jsx(Link, {
 			to: href,
-			className: "flex items-center gap-2.5 min-w-0 cursor-pointer",
+			className: "group/namecell flex items-center gap-2.5 min-w-0 cursor-pointer",
 			children: inner
 		}) : /* @__PURE__ */ jsx("div", {
 			className: "flex items-center gap-2.5 min-w-0",
@@ -390,7 +393,7 @@ function ListPage({ section = "main", shellPadded, embedded = false, breadcrumbs
 			actions,
 			toolbar
 		}), /* @__PURE__ */ jsx("div", {
-			className: "@container min-h-0 flex-1 overflow-auto",
+			className: "relative @container min-h-0 flex-1 overflow-auto",
 			children: /* @__PURE__ */ jsx(ListRowActionsProvider, {
 				view,
 				children
@@ -434,7 +437,7 @@ function ListRow({ href, items, goTo, openMenu, pinnedActions, selected, selecti
 							type: "button",
 							"aria-label": action.label,
 							"data-tooltip-id": "global-tooltip",
-							"data-tooltip-content": action.label,
+							"data-tooltip-content": action.disabled && action.tooltip ? action.tooltip : action.label,
 							"data-tooltip-place": "bottom",
 							"aria-disabled": action.disabled,
 							onClick: (e) => {
@@ -1259,7 +1262,7 @@ function useHoverCard() {
 		keepOpen
 	};
 }
-function HoverCardSurface({ x, y, widthClassName, relayoutKey, onKeepOpen, onLeave, children }) {
+function HoverCardSurface({ x, y, widthClassName, padded = true, relayoutKey, onKeepOpen, onLeave, children }) {
 	const ref = useRef(null);
 	const [pos, setPos] = useState(null);
 	useLayoutEffect(() => {
@@ -1282,7 +1285,7 @@ function HoverCardSurface({ x, y, widthClassName, relayoutKey, onKeepOpen, onLea
 		onMouseLeave: onLeave,
 		onFocus: onKeepOpen,
 		onBlur: onLeave,
-		className: cx("fixed z-[9999] rounded-xl border border-(--theme-border) bg-(--theme-panel-bg) p-3 shadow-xl backdrop-blur-xl", widthClassName),
+		className: cx("fixed z-[9999] overflow-hidden rounded-xl border border-(--theme-border) bg-(--theme-panel-bg) shadow-xl backdrop-blur-xl", padded && "p-3", widthClassName),
 		style: {
 			left: pos?.left ?? x,
 			top: pos?.top ?? y + 8,

package/dist/components/CollapsiblePanel.d.ts

@@ -9,9 +9,11 @@ interface IControlledCollapsiblePanelProps {
     shown?: boolean;
     setShown?: (shown: boolean) => void;
     customizedButton?: React.ReactNode;
+    /** Rendered right after the title, outside the toggle button. */
+    titleAction?: React.ReactNode;
     className?: string | undefined;
 }
-export declare function ControlledCollapsiblePanel({ title, children, open, setOpen, onClick, wrapperElement, customizedButton, className, }: IControlledCollapsiblePanelProps): React.JSX.Element;
+export declare function ControlledCollapsiblePanel({ title, children, open, setOpen, onClick, wrapperElement, customizedButton, titleAction, className, }: IControlledCollapsiblePanelProps): React.JSX.Element;
 export declare function UncontrolledCollapsiblePanel({ title, children, onClick, wrapperElement, initialState, className, customizedButton, }: Omit<IControlledCollapsiblePanelProps, 'setOpen' | 'open'> & {
     initialState?: boolean | undefined;
 }): React.JSX.Element;

package/dist/components/CreateModal.d.ts

@@ -75,6 +75,12 @@ export interface CreateModalSelectOption {
     group?: string;
     /** Hidden behind the group's toggle row until the group is expanded. */
     collapsible?: boolean;
+    /** Always listed regardless of the typed filter (e.g. a trailing "Create new…" action). */
+    pinned?: boolean;
+    /** Muted second line under the label (e.g. the allocation a group bills to). */
+    description?: string;
+    /** Listed but not selectable (e.g. a group whose allocation is exhausted). */
+    disabled?: boolean;
 }
 /** Callers gating collapse on list size must use this same threshold so
  * collapsed rows always come with a filter to find them. */

package/dist/components/PageHeader.d.ts

@@ -10,15 +10,19 @@ export interface PageHeaderCrumb {
     label: ReactNode;
     href?: string;
 }
+export declare const headerActionButtonClasses = "flex items-center justify-center w-6 h-6 rounded-md shrink-0 cursor-pointer text-(--theme-muted-text-color) hover:text-(--theme-app) hover:bg-(--theme-muted-panel-bg) transition-colors";
 /** With menu, the plus opens a chooser; otherwise navigates to or calls the
  * single action. `word` is the visible verb; `label` stays the full action for
  * the tooltip and screen readers. */
-export declare function HeaderAddButton({ to, onClick, label, word, menu, }: {
+export declare function HeaderAddButton({ to, onClick, label, word, menu, disabled, disabledHint, }: {
     to?: string;
     onClick?: () => void;
     label: string;
     word?: 'add' | 'create';
     menu?: HeaderAddMenuItem[];
+    /** Button mode only. */
+    disabled?: boolean;
+    disabledHint?: string;
 }): import("react").JSX.Element;
 export declare function HeaderActionMenu({ items, label, }: {
     items: HeaderAddMenuItem[];

package/dist/components/dropdownUtils.d.ts

@@ -8,6 +8,8 @@ export interface IOptions<T = unknown> {
     description?: string | undefined;
     /** Hidden behind the category's toggle row until the category is expanded. */
     collapsible?: boolean | undefined;
+    /** Always listed regardless of the typed query (e.g. a trailing "Create new…" action). */
+    pinned?: boolean | undefined;
 }
 export interface ICategory<T = unknown> {
     category?: string | undefined;

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-BZ9Buwi4.js";
+import { a as EditorField, i as FormCodePanel, n as defineEditorThemes, o as Editor, r as getThemeName, t as setupMonacoWorkers } from "../chunks/editor-Ko3zX22Y.js";
 export { Editor, EditorField, FormCodePanel, defineEditorThemes, getThemeName, setupMonacoWorkers };

package/dist/file-explorer/FileExplorer.d.ts

@@ -1,5 +1,5 @@
 import type { IFileExplorerClient, IFileExplorerProvider } from './lib/fileExplorer.js';
-import type { TStorage } from './lib/types.js';
+import type { TreeNode, TStorage } from './lib/types.js';
 interface IFileExplorerProps {
     storages: TStorage[];
     /** Resolves the storage's injected provider pair; the host owns caching. */
@@ -8,6 +8,10 @@ interface IFileExplorerProps {
         client: IFileExplorerClient | null;
     }>;
     onRefresh?: () => void;
+    /** Handles activating a file instead of previewing it. Lets a host embed the
+     * explorer as a file picker (the notebook editor opens .ipynb this way);
+     * return false to fall through to the built-in preview. */
+    onOpenFile?: ((node: TreeNode, storage: TStorage | undefined) => boolean) | undefined;
     showUserHierarchy?: boolean;
     groups?: {
         name: string;
@@ -16,6 +20,19 @@ interface IFileExplorerProps {
     groupsLoading?: boolean;
     selectedPath: string;
     onPathChange: (path: string) => void;
+    /** Renders only the tree, for a host that embeds it as a navigator and owns
+     * the pane beside it (the notebooks page puts its editor there). The host
+     * also owns the width, so the tree fills its container instead of carrying
+     * its own resize handle. */
+    treeOnly?: boolean;
+    /** Changes when the host has written into the selected folder outside the
+     * explorer's own upload flow, so the folder is re-listed and shows the file. */
+    refreshKey?: unknown;
+    /** Seeds the expanded folders on mount, so a host can restore the tree's open
+     * state across reloads. Read once; the explorer owns the set from then on. */
+    initialExpandedPaths?: readonly string[];
+    /** Fires whenever the expanded folders change, for the host to persist. */
+    onExpandedPathsChange?: (paths: string[]) => void;
 }
-export default function FileExplorer({ storages, onRefresh, showUserHierarchy, groups, groupsLoading, selectedPath, onPathChange, getProviderAndClient, }: IFileExplorerProps): import("react").JSX.Element;
+export default function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHierarchy, groups, groupsLoading, selectedPath, onPathChange, getProviderAndClient, treeOnly, initialExpandedPaths, onExpandedPathsChange, }: IFileExplorerProps): import("react").JSX.Element;
 export {};

package/dist/file-explorer/index.js

@@ -1,12 +1,12 @@
 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-k_e1dI8c.js";
+import { c as ConfirmModal, f as Markdown, h as Callout, m as CopyToClipboard, n as CreateModal, p as CopyCodeBlock } from "../chunks/CreateModal-B7smkHkv.js";
 import { a as useProvisionCorsRules, c as useStrings, i as useNotify, s as useSlots } from "../chunks/Provider-CbFVFB7O.js";
 import { n as TOOLTIP_ID, r as TooltipInfo } from "../chunks/Tooltip-n9w7Tkt1.js";
-import { t as StatusBadge } from "../chunks/StatusBadge-RRUI78iS.js";
+import { t as StatusBadge } from "../chunks/StatusBadge-zvEtK16a.js";
 import { t as Loader } from "../chunks/Loader-BXoXTZGc.js";
-import { d as copySubmenu, g as useRowMenuActive, h as useRowMenu, l as MoreButton, u as assembleRowMenu } from "../chunks/PageHeader-FhtphHGc.js";
+import { _ as useRowMenuActive, d as assembleRowMenu, f as copySubmenu, g as useRowMenu, u as MoreButton } from "../chunks/PageHeader-CoZWF0pJ.js";
 import { n as Table } from "../chunks/Table-CutP1bRt.js";
-import { C as ListSkeleton, E as RowSelectCheckbox, O as listTableFixedProps, k as listTableProps, x as ListActionsHeader } from "../chunks/list-3jZW8rmM.js";
+import { C as ListSkeleton, E as RowSelectCheckbox, O as listTableFixedProps, k as listTableProps, x as ListActionsHeader } from "../chunks/list-CduoUsMW.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";
@@ -2537,7 +2537,7 @@ function useObjectText(url, { enabled, maxBytes, maxLines, knownSize, cacheKey,
 }
 //#endregion
 //#region src/file-explorer/FilePreview/Viewer.tsx
-var CodePreviewEditor = lazy(() => import("../chunks/CodePreviewEditor-67A_SKgE.js"));
+var CodePreviewEditor = lazy(() => import("../chunks/CodePreviewEditor-DuMZMA_k.js"));
 var PREVIEW_MARKDOWN_CONTROLS = {
 	table: { fullscreen: false },
 	mermaid: { fullscreen: false }
@@ -4313,7 +4313,37 @@ function getAncestorDirPaths(path) {
 	for (let i = 1; i <= dirSegmentCount; i++) ancestors.push(segments.slice(0, i).join("/") + "/");
 	return ancestors;
 }
-function FileExplorer({ storages, onRefresh, showUserHierarchy = false, groups = [], groupsLoading = false, selectedPath, onPathChange, getProviderAndClient }) {
+/** The tree's width is the host's when the tree is embedded on its own, and this
+* component's when it is showing the details pane beside it. */
+function TreeFrame({ treeOnly, sidebarWidth, onWidthChange, children }) {
+	if (treeOnly) return /* @__PURE__ */ jsx("div", {
+		className: "h-full w-full min-w-0",
+		children
+	});
+	return /* @__PURE__ */ jsx(Resizable, {
+		size: {
+			width: sidebarWidth,
+			height: "100%"
+		},
+		minWidth: 200,
+		maxWidth: 800,
+		enable: {
+			top: false,
+			right: true,
+			bottom: false,
+			left: false,
+			topRight: false,
+			bottomRight: false,
+			bottomLeft: false,
+			topLeft: false
+		},
+		onResizeStop: (_e, _direction, _ref, d) => {
+			onWidthChange((prev) => prev + d.width);
+		},
+		children
+	});
+}
+function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHierarchy = false, groups = [], groupsLoading = false, selectedPath, onPathChange, getProviderAndClient, treeOnly = false, initialExpandedPaths, onExpandedPathsChange }) {
 	const t = useStrings().fileExplorer;
 	const notify = useNotify();
 	const slots = useSlots();
@@ -4348,8 +4378,19 @@ function FileExplorer({ storages, onRefresh, showUserHierarchy = false, groups =
 		return `${selectedPath}/`;
 	}, [selectedPath, treeMap]);
 	const setSelectedPath = onPathChange;
-	const [expandedPaths, setExpandedPaths] = useState(() => new Set([""]));
+	const [expandedPaths, setExpandedPaths] = useState(() => new Set(["", ...initialExpandedPaths ?? []]));
+	const onExpandedPathsChangeRef = useRef(onExpandedPathsChange);
+	onExpandedPathsChangeRef.current = onExpandedPathsChange;
+	useEffect(() => {
+		onExpandedPathsChangeRef.current?.([...expandedPaths]);
+	}, [expandedPaths]);
 	const selectedNode = useMemo(() => normalizedSelectedPath ? treeMap[normalizedSelectedPath] ?? null : null, [normalizedSelectedPath, treeMap]);
+	const seenRefreshKey = useRef(refreshKey);
+	useEffect(() => {
+		if (refreshKey === seenRefreshKey.current) return;
+		seenRefreshKey.current = refreshKey;
+		if (selectedNode?.type === "directory" && selectedNode.storageId) fetchNodeChildren(selectedNode, { replace: true });
+	}, [refreshKey, selectedNode]);
 	const [checkedItems, setCheckedItems] = useState(/* @__PURE__ */ new Set());
 	const [checkedItemsPath, setCheckedItemsPath] = useState(selectedPath);
 	if (checkedItemsPath !== selectedPath) {
@@ -4714,6 +4755,7 @@ function FileExplorer({ storages, onRefresh, showUserHierarchy = false, groups =
 	const previewSiblings = useMemo(() => previewNode ? getNodeChildren(parentToChildrenMap, getParentPath(previewNode.path)).filter((n) => n.type === "file") : [], [previewNode, parentToChildrenMap]);
 	const openPreview = (node) => {
 		if (node.type !== "file") return;
+		if (onOpenFile?.(node, storages.find((s) => s.id === node.storageId))) return;
 		setPreviewNode(node);
 		setPreviewOpen(true);
 	};
@@ -5073,12 +5115,13 @@ function FileExplorer({ storages, onRefresh, showUserHierarchy = false, groups =
 		}
 	};
 	const handleRefresh = async (opts) => {
-		if (selectedNode?.storageId) {
-			if (selectedNode.type === "directory") return fetchNodeChildren(selectedNode, {
-				replace: true,
-				silent: opts?.silent
-			});
-		} else if (onRefresh) onRefresh();
+		const dirs = [...expandedPaths].map((path) => treeMap[path]).filter((node) => !!node && node.type === "directory" && !!node.storageId);
+		if (selectedNode?.type === "directory" && selectedNode.storageId && !dirs.some((dir) => dir.path === selectedNode.path)) dirs.push(selectedNode);
+		if (dirs.length > 0) return { corsError: (await Promise.all(dirs.map((dir) => fetchNodeChildren(dir, {
+			replace: true,
+			silent: opts?.silent
+		})))).some((result) => result.corsError) };
+		if (onRefresh) onRefresh();
 		return { corsError: false };
 	};
 	return /* @__PURE__ */ jsxs("div", {
@@ -5086,26 +5129,10 @@ function FileExplorer({ storages, onRefresh, showUserHierarchy = false, groups =
 		children: [
 			/* @__PURE__ */ jsxs("div", {
 				className: "w-full h-full flex",
-				children: [/* @__PURE__ */ jsx(Resizable, {
-					size: {
-						width: sidebarWidth,
-						height: "100%"
-					},
-					minWidth: 200,
-					maxWidth: 800,
-					enable: {
-						top: false,
-						right: true,
-						bottom: false,
-						left: false,
-						topRight: false,
-						bottomRight: false,
-						bottomLeft: false,
-						topLeft: false
-					},
-					onResizeStop: (e, direction, ref, d) => {
-						setSidebarWidth((prev) => prev + d.width);
-					},
+				children: [/* @__PURE__ */ jsx(TreeFrame, {
+					treeOnly,
+					sidebarWidth,
+					onWidthChange: setSidebarWidth,
 					children: /* @__PURE__ */ jsxs("div", {
 						className: "h-full flex flex-col border-r theme-border bg-(--theme-panel-bg)/60",
 						children: [/* @__PURE__ */ jsx("div", {
@@ -5139,14 +5166,17 @@ function FileExplorer({ storages, onRefresh, showUserHierarchy = false, groups =
 							selectedPath: normalizedSelectedPath,
 							loadingPaths,
 							onToggleExpand: handleToggleExpand,
-							onSelect: handleSelectTreeItem,
+							onSelect: (path, node) => {
+								handleSelectTreeItem(path, node);
+								if (treeOnly && node.type === "file") openPreview(node);
+							},
 							onDropToFolder: onDropFiles,
 							onContextMenu: openNodeContextMenu,
 							onPreviewFile: openPreview,
 							paging: treePaging
 						})]
 					})
-				}), /* @__PURE__ */ jsx("div", {
+				}), !treeOnly && /* @__PURE__ */ jsx("div", {
 					className: "h-full flex flex-col flex-1 min-w-0",
 					children: !selectedNode && normalizedSelectedPath ? hydrationStuck ? /* @__PURE__ */ jsx(NotFoundPreview, {
 						path: normalizedSelectedPath,