@parallelworks/ui 0.4.0 → 0.5.0

package/dist/chunks/Loader-BXoXTZGc.js

@@ -0,0 +1,47 @@
+import { LoaderIcon } from "../icons.js";
+import cx from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Loader.tsx
+var RIPPLE_STAGGER_S = .22;
+var LOGO_RINGS = [
+	"M24.89,55V32.14a7.25,7.25,0,1,1,7.25,7.25h-6",
+	"M17.27,58.12v-26A14.88,14.88,0,1,1,32.14,47H24.89",
+	"M9.25,52.35V32.14A22.9,22.9,0,1,1,32.14,55H24.89",
+	"M62.68,32.14A30.54,30.54,0,1,1,1.6,32.14,30.54,30.54,0,1,1,62.68,32.14"
+];
+function Loader({ size = 48, text, textSize = 12, full = true, color = "", loaderStyle = {}, variant = "spinner" }) {
+	const loaderColor = color || "text-(--theme-element,#3b82f6)";
+	const dimension = typeof size === "number" ? `${size}px` : size;
+	return /* @__PURE__ */ jsxs("div", {
+		role: "status",
+		"aria-label": text || "Loading",
+		className: cx(full && "w-full", "flex flex-col flex-wrap justify-center items-center gap-y-1"),
+		children: [/* @__PURE__ */ jsx("div", {
+			className: cx("w-full flex justify-center items-center", loaderColor),
+			style: loaderStyle,
+			children: variant === "logo" ? /* @__PURE__ */ jsx("svg", {
+				viewBox: "0 0 64.29 64.29",
+				width: dimension,
+				height: dimension,
+				fill: "none",
+				stroke: "currentColor",
+				strokeWidth: 3.2,
+				"aria-hidden": "true",
+				children: LOGO_RINGS.map((d, i) => /* @__PURE__ */ jsx("path", {
+					d,
+					className: "logo-loader-ring",
+					style: { animationDelay: `${(i * RIPPLE_STAGGER_S).toFixed(2)}s` }
+				}, d))
+			}) : /* @__PURE__ */ jsx(LoaderIcon, {
+				className: "animate-spin",
+				style: { fontSize: dimension }
+			})
+		}), text && /* @__PURE__ */ jsx("div", {
+			className: "text-center italic",
+			style: { fontSize: `${textSize}px` },
+			children: text
+		})]
+	});
+}
+//#endregion
+export { Loader as t };

package/dist/chunks/{Monaco-BEj--GTx.js → Monaco-CvFXoW3r.js}

@@ -1,5 +1,6 @@
-import { l as useWorkflowJsonResolver } from "./Provider-uUHgWOWc.js";
-import { i as getThemeName, n as setupMonacoWorkers, r as defineEditorThemes, t as useCssIsDark } from "./editor-CdQbKtYO.js";
+import { l as useWorkflowJsonResolver } from "./Provider-jQCAN3NN.js";
+import { t as useCssIsDark } from "./useCssIsDark-DHr05dG2.js";
+import { n as defineEditorThemes, r as getThemeName, t as setupMonacoWorkers } from "./editor-CEXg6C8X.js";
 import cx from "classnames";
 import { jsx } from "react/jsx-runtime";
 import { useEffect, useRef } from "react";

package/dist/chunks/{Provider-uUHgWOWc.js → Provider-jQCAN3NN.js}

@@ -28,6 +28,20 @@ var DEFAULTS = {
 	},
 	strings: {
 		loading: "Loading…",
+		modal: {
+			cancel: "Cancel",
+			close: "Close",
+			create: "Create",
+			creating: "Creating…",
+			addDescription: "Add description…",
+			advanced: "Advanced",
+			favorite: "Favorite",
+			favorited: "Favorited",
+			favoriteHintOn: "Your item will be favorited when it's created",
+			favoriteHintOff: "Favorite your item when it's created",
+			filter: "Filter",
+			noOptions: "No options available"
+		},
 		common: {
 			copy: "Copy",
 			copied: "Copied!",
@@ -386,6 +400,10 @@ function UIProvider({ notify, strings, navigation, data, slots, children }) {
 		},
 		strings: {
 			loading: strings?.loading ?? DEFAULTS.strings.loading,
+			modal: {
+				...DEFAULTS.strings.modal,
+				...strings?.modal
+			},
 			common: {
 				...DEFAULTS.strings.common,
 				...strings?.common

package/dist/chunks/{SwitchToggle-BqD0dE-L.js → SwitchToggle-D0ud8cd5.js}

@@ -1,5 +1,5 @@
 import { AngleDownIcon, AngleRightIcon, CaretDownIcon } from "../icons.js";
-import { c as useStrings } from "./Provider-uUHgWOWc.js";
+import { c as useStrings } from "./Provider-jQCAN3NN.js";
 import { n as TOOLTIP_ID } from "./Tooltip-WgbiC_nd.js";
 import cx from "classnames";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";

package/dist/chunks/{Table-C5z6qWjM.js → Table-ByziK93x.js}

@@ -1,4 +1,4 @@
-import { t as Loader } from "./Loader-DQiZ75fa.js";
+import { t as Loader } from "./Loader-BXoXTZGc.js";
 import cx from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
 import React from "react";

package/dist/chunks/{editor-CdQbKtYO.js → editor-CEXg6C8X.js}

@@ -1,15 +1,15 @@
 import { CheckIcon, CopyIcon, EyeIcon, EyeOffIcon } from "../icons.js";
-import { c as useStrings, i as useNotify } from "./Provider-uUHgWOWc.js";
-import { t as Loader } from "./Loader-DQiZ75fa.js";
+import { c as useStrings, i as useNotify } from "./Provider-jQCAN3NN.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-DTgL8klR.js";
 import cx from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Suspense, lazy, useEffect, useMemo, useRef, useState } from "react";
+import { Suspense, lazy, 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-BEj--GTx.js"));
+var MonacoEditor = lazy(() => import("./Monaco-CvFXoW3r.js"));
 function Editor({ ...props }) {
 	return /* @__PURE__ */ jsx(Suspense, {
 		fallback: /* @__PURE__ */ jsx(Loader, { text: "Loading editor..." }),
@@ -333,40 +333,4 @@ function setupMonacoWorkers() {
 	window.MonacoEnvironment = monacoEnvironment;
 }
 //#endregion
-//#region src/editor/useCssIsDark.ts
-function readIsDark() {
-	const scheme = getComputedStyle(document.documentElement).colorScheme;
-	const dark = scheme.includes("dark");
-	if (dark !== scheme.includes("light")) return dark;
-	if (typeof window.matchMedia !== "function") return false;
-	return window.matchMedia("(prefers-color-scheme: dark)").matches;
-}
-/**
-* Follows the host's CSS color-scheme, the same signal the log viewer's
-* light-dark() palette uses — no provider API involved. For the rare concrete
-* pick (editor themes, image variants) the tokens cannot express.
-*/
-function useCssIsDark() {
-	const [isDark, setIsDark] = useState(readIsDark);
-	useEffect(() => {
-		const update = () => setIsDark(readIsDark());
-		const media = typeof window.matchMedia === "function" ? window.matchMedia("(prefers-color-scheme: dark)") : void 0;
-		media?.addEventListener("change", update);
-		const observer = new MutationObserver(update);
-		observer.observe(document.documentElement, {
-			attributes: true,
-			attributeFilter: [
-				"style",
-				"class",
-				"data-theme"
-			]
-		});
-		return () => {
-			media?.removeEventListener("change", update);
-			observer.disconnect();
-		};
-	}, []);
-	return isDark;
-}
-//#endregion
-export { FormCodePanel as a, getThemeName as i, setupMonacoWorkers as n, EditorField as o, defineEditorThemes as r, Editor as s, useCssIsDark as t };
+export { EditorField as a, FormCodePanel as i, defineEditorThemes as n, Editor as o, getThemeName as r, setupMonacoWorkers as t };

package/dist/chunks/{list-D5f5Fq-O.js → list-CvDWt0TC.js}

@@ -1,7 +1,7 @@
 import { CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ClipboardIcon, CopyIcon, DisplayIcon, ErrorIcon, FilterIcon, IdCardIcon, KeyIcon, LinkIcon, MailIcon, MoreIcon, SearchIcon, UserIcon, XIcon } from "../icons.js";
-import { c as useStrings, i as useNotify, n as useLink } from "./Provider-uUHgWOWc.js";
+import { c as useStrings, i as useNotify, n as useLink } from "./Provider-jQCAN3NN.js";
 import { n as TOOLTIP_ID, r as TooltipInfo } from "./Tooltip-WgbiC_nd.js";
-import { n as Table } from "./Table-C5z6qWjM.js";
+import { n as Table } from "./Table-ByziK93x.js";
 import cx from "classnames";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";

package/dist/chunks/useCssIsDark-DHr05dG2.js

@@ -0,0 +1,38 @@
+import { useEffect, useState } from "react";
+//#region src/components/useCssIsDark.ts
+function readIsDark() {
+	const scheme = getComputedStyle(document.documentElement).colorScheme;
+	const dark = scheme.includes("dark");
+	if (dark !== scheme.includes("light")) return dark;
+	if (typeof window.matchMedia !== "function") return false;
+	return window.matchMedia("(prefers-color-scheme: dark)").matches;
+}
+/**
+* Follows the host's CSS color-scheme, the same signal the log viewer's
+* light-dark() palette uses — no provider API involved. For the rare concrete
+* pick (editor themes, image variants) the tokens cannot express.
+*/
+function useCssIsDark() {
+	const [isDark, setIsDark] = useState(readIsDark);
+	useEffect(() => {
+		const update = () => setIsDark(readIsDark());
+		const media = typeof window.matchMedia === "function" ? window.matchMedia("(prefers-color-scheme: dark)") : void 0;
+		media?.addEventListener("change", update);
+		const observer = new MutationObserver(update);
+		observer.observe(document.documentElement, {
+			attributes: true,
+			attributeFilter: [
+				"style",
+				"class",
+				"data-theme"
+			]
+		});
+		return () => {
+			media?.removeEventListener("change", update);
+			observer.disconnect();
+		};
+	}, []);
+	return isDark;
+}
+//#endregion
+export { useCssIsDark as t };

package/dist/components/AddMenu.d.ts

@@ -0,0 +1,17 @@
+import type { ReactNode } from 'react';
+export interface HeaderAddMenuItem {
+    label: string;
+    icon?: ReactNode;
+    to?: string;
+    onSelect?: () => void;
+    disabled?: boolean;
+    separatorAbove?: boolean;
+}
+export declare function AddMenu({ items, label, buttonClassName, zClassName, children, }: {
+    items: HeaderAddMenuItem[];
+    label: string;
+    buttonClassName?: string;
+    /** Raise above modals when needed (e.g. z-[9999]). */
+    zClassName?: string;
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/components/BareModal.d.ts

@@ -0,0 +1,17 @@
+import type { KeyboardEvent as ReactKeyboardEvent, MouseEvent as ReactMouseEvent, ReactNode } from 'react';
+/** Omit when the content supplies its own panel styling. */
+export declare const modalPanelClasses = "rounded-xl border border-(--theme-border) bg-(--theme-app-bg) text-(--theme-app) shadow-2xl";
+export declare function BareModal({ open, onClose, ariaLabel, className, onPanelKeyDown, onPanelMouseDown, align, preventClose, children, }: {
+    open: boolean;
+    onClose: () => void;
+    ariaLabel?: string;
+    className?: string;
+    onPanelKeyDown?: (e: ReactKeyboardEvent<HTMLDivElement>) => void;
+    onPanelMouseDown?: (e: ReactMouseEvent<HTMLDivElement>) => void;
+    /** Vertical placement of the panel. Defaults to the ds top-anchored position. */
+    align?: 'top' | 'center';
+    /** Block the accidental-dismiss paths (backdrop click, Escape) so typed
+     * input isn't lost. The explicit close controls still work. */
+    preventClose?: boolean;
+    children: ReactNode;
+}): import("react").ReactPortal | null;

package/dist/components/ConfirmModal.d.ts

@@ -0,0 +1,17 @@
+import type { ReactNode } from 'react';
+export declare function ConfirmModal({ open, onClose, title, description, children, confirmLabel, onConfirm, confirmDisabled, destructive, align, cancelLabel, closeOnConfirm, }: {
+    open: boolean;
+    onClose: () => void;
+    title: string;
+    description?: ReactNode;
+    children?: ReactNode;
+    confirmLabel: string;
+    /** An async handler keeps both buttons disabled until it settles. */
+    onConfirm: () => void | Promise<unknown>;
+    confirmDisabled?: boolean;
+    destructive?: boolean;
+    align?: 'top' | 'center';
+    cancelLabel?: string;
+    /** When false, the dialog stays open after a successful confirm. */
+    closeOnConfirm?: boolean;
+}): import("react").JSX.Element;

package/dist/components/CreateModal.d.ts

@@ -0,0 +1,92 @@
+import type { InputHTMLAttributes, ReactNode, TextareaHTMLAttributes } from 'react';
+import { type HeaderAddMenuItem } from './AddMenu.js';
+interface CreateModalProps {
+    open: boolean;
+    onClose: () => void;
+    typeIcon?: ReactNode;
+    typeLabel: string;
+    /** Makes the type chip a dropdown to switch between sibling form types. */
+    typeMenu?: HeaderAddMenuItem[];
+    namePlaceholder: string;
+    hideName?: boolean;
+    initialName?: string;
+    showDescription?: boolean;
+    descriptionPlaceholder?: string;
+    submitLabel?: string;
+    submittingLabel?: string;
+    validateName?: (name: string) => string | null;
+    /** Normalize the name as the user types (e.g. strip disallowed characters). */
+    sanitizeName?: (name: string) => string;
+    nameHint?: (name: string) => ReactNode;
+    children?: ReactNode;
+    properties?: ReactNode;
+    advanced?: ReactNode;
+    submitDisabled?: boolean;
+    /** Hide the primary submit button and label the dismiss button "Close". */
+    hideSubmit?: boolean;
+    nameOptional?: boolean;
+    onNameChange?: (name: string) => void;
+    /** Additional unsaved input in `children`/`properties` that should block an
+     * accidental dismiss (name/description/favorite are already tracked). */
+    dirty?: boolean;
+    /** Show a favorite toggle in the footer. */
+    showFavorite?: boolean;
+    /** Resolves true to close the modal, false to keep it open (e.g. on error). */
+    onSubmit: (name: string, description: string, favorite: boolean) => Promise<boolean>;
+}
+/** Submits on Enter in the name field or ⌘/Ctrl+Enter from anywhere in the panel. */
+export declare function CreateModal({ open, onClose, typeIcon, typeLabel, typeMenu, namePlaceholder, hideName, initialName, showDescription, descriptionPlaceholder, submitLabel, submittingLabel, validateName, sanitizeName, nameHint, children, properties, advanced, submitDisabled, hideSubmit, nameOptional, onNameChange, dirty, showFavorite, onSubmit, }: CreateModalProps): import("react").JSX.Element;
+/** Labeled single-line input row for the dialog's extra fields. */
+export declare function CreateModalField({ label, tooltip, ...props }: InputHTMLAttributes<HTMLInputElement> & {
+    label: string;
+    /** Help text surfaced via an info icon next to the label. */
+    tooltip?: string;
+}): import("react").JSX.Element;
+/** Labeled multi-line field for credential blobs (JSON keys, PEM keys). */
+export declare function CreateModalTextarea({ label, tooltip, rows, ...props }: TextareaHTMLAttributes<HTMLTextAreaElement> & {
+    label: string;
+    /** Help text surfaced via an info icon next to the label. */
+    tooltip?: string;
+}): import("react").JSX.Element;
+/** Labeled input row with typeahead suggestions; free-form values allowed. */
+export declare function CreateModalAutocompleteField({ label, tooltip, value, onChange, options, placeholder, }: {
+    label: string;
+    /** Help text surfaced via an info icon next to the label. */
+    tooltip?: string;
+    value: string;
+    onChange: (value: string) => void;
+    options: string[];
+    placeholder?: string;
+}): import("react").JSX.Element;
+/** Compact property pill with an on/off switch. */
+export declare function CreateModalSwitch({ label, checked, onChange, tooltip, }: {
+    label: string;
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+    /** Help text surfaced on hover (explains what the toggle does). */
+    tooltip?: string;
+}): import("react").JSX.Element;
+export interface CreateModalSelectOption {
+    label: string;
+    value: string;
+    /** Small leading icon (e.g. the resource's provider icon). */
+    icon?: ReactNode;
+    /** Category header to group this option under in the dropdown. */
+    group?: string;
+}
+/** Compact property pill with a dropdown of options. Options may carry leading
+ * icons and group headers (e.g. Clusters vs Kubernetes). */
+export declare function CreateModalSelect({ label, icon, value, options, onChange, disabled, disabledHint, tooltip, }: {
+    label: string;
+    icon?: ReactNode;
+    value?: string;
+    options: CreateModalSelectOption[];
+    onChange: (value: string) => void;
+    /** Gray the pill out (e.g. while a prerequisite pill is unset). */
+    disabled?: boolean;
+    /** Shown as the pill's tooltip while disabled (e.g. the prerequisite). */
+    disabledHint?: string;
+    /** Help text surfaced on hover (explains what the pill selects). */
+    tooltip?: string;
+}): import("react").JSX.Element;
+export {};

package/dist/components/Loader.d.ts

@@ -5,6 +5,7 @@ interface LoaderProps {
     color?: string;
     full?: boolean;
     loaderStyle?: React.CSSProperties;
+    variant?: 'spinner' | 'logo';
 }
-export default function Loader({ size, text, textSize, full, color, loaderStyle, }: LoaderProps): import("react").JSX.Element;
+export default function Loader({ size, text, textSize, full, color, loaderStyle, variant, }: LoaderProps): import("react").JSX.Element;
 export {};

package/dist/components/Provider.d.ts

@@ -29,6 +29,20 @@ export interface UINotify {
 }
 export interface UIStrings {
     loading: string;
+    modal: {
+        cancel: string;
+        close: string;
+        create: string;
+        creating: string;
+        addDescription: string;
+        advanced: string;
+        favorite: string;
+        favorited: string;
+        favoriteHintOn: string;
+        favoriteHintOff: string;
+        filter: string;
+        noOptions: string;
+    };
     common: {
         copy: string;
         copied: string;
@@ -422,18 +436,6 @@ export interface UISlots {
         storage: unknown;
         groups?: unknown;
     }) => ReactNode;
-    /** The storage explorer's create-folder dialog; absent hides the affordance. */
-    createFolderDialog?: (args: {
-        open: boolean;
-        onClose: () => void;
-        typeIcon?: ReactNode;
-        typeLabel: string;
-        namePlaceholder: string;
-        submitLabel: string;
-        submittingLabel: string;
-        validateName: (name: string) => string | null;
-        onSubmit: (name: string) => Promise<boolean>;
-    }) => ReactNode;
 }
 export interface UIProviderValue {
     notify: UINotify;

package/dist/components/ghostButton.d.ts

@@ -0,0 +1,4 @@
+export declare const ghostButtonClasses = "inline-flex cursor-pointer items-center gap-1.5 h-8 px-3 rounded-md text-sm text-(--theme-muted-text-color) hover:text-(--theme-app) hover:bg-(--theme-muted-panel-bg) transition-colors";
+export declare const primaryButtonClasses = "inline-flex cursor-pointer items-center gap-1.5 h-7 px-2.5 rounded-md text-[12.5px] font-medium bg-(--theme-element) text-(--theme-element-text) hover:opacity-90 transition-opacity";
+/** Filled destructive button for confirming irreversible actions in ds modals. */
+export declare const dangerButtonClasses = "inline-flex cursor-pointer items-center gap-1.5 h-7 px-2.5 rounded-md text-[12.5px] font-medium bg-red-600 text-white hover:bg-red-700 transition-colors";

package/dist/editor/index.d.ts

@@ -4,4 +4,3 @@ export { default as FormCodePanel } from './FormCodePanel.js';
 export type { EditorMarketplaceItem, EditorWorkflowItem, IEditorProps, ISchemaError, } from './Monaco.js';
 export { defineEditorThemes, getThemeName } from './themes.js';
 export { setupMonacoWorkers } from './workers.js';
-export { useCssIsDark } from './useCssIsDark.js';

package/dist/editor/index.js

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

package/dist/file-explorer/index.js

@@ -1,12 +1,11 @@
 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 { i as Callout, n as CopyCodeBlock, r as CopyToClipboard, t as Markdown } from "../chunks/Markdown-iFhq8Gb0.js";
-import { a as useProvisionCorsRules, c as useStrings, i as useNotify, s as useSlots } from "../chunks/Provider-uUHgWOWc.js";
+import { c as ConfirmModal, f as Markdown, h as Callout, m as CopyToClipboard, p as CopyCodeBlock, t as CreateModal } from "../chunks/CreateModal-6zZZHxCI.js";
+import { a as useProvisionCorsRules, c as useStrings, i as useNotify, s as useSlots } from "../chunks/Provider-jQCAN3NN.js";
 import { n as TOOLTIP_ID, r as TooltipInfo } from "../chunks/Tooltip-WgbiC_nd.js";
-import { t as Loader } from "../chunks/Loader-DQiZ75fa.js";
-import { t as Modal } from "../chunks/Modal-sOUEwebV.js";
+import { t as Loader } from "../chunks/Loader-BXoXTZGc.js";
 import { t as StatusBadge } from "../chunks/StatusBadge-DXp4zkSd.js";
-import { n as Table } from "../chunks/Table-C5z6qWjM.js";
-import { A as useRowMenu, C as listTableProps, E as copySubmenu, S as listTableFixedProps, T as assembleRowMenu, _ as ListSkeleton, b as RowSelectCheckbox, h as ListActionsHeader, j as useRowMenuActive, w as MoreButton } from "../chunks/list-D5f5Fq-O.js";
+import { n as Table } from "../chunks/Table-ByziK93x.js";
+import { A as useRowMenu, C as listTableProps, E as copySubmenu, S as listTableFixedProps, T as assembleRowMenu, _ as ListSkeleton, b as RowSelectCheckbox, h as ListActionsHeader, j as useRowMenuActive, w as MoreButton } from "../chunks/list-CvDWt0TC.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";
@@ -2519,7 +2518,7 @@ function useObjectText(url, { enabled, maxBytes, maxLines, knownSize, cacheKey,
 }
 //#endregion
 //#region src/file-explorer/FilePreview/Viewer.tsx
-var CodePreviewEditor = lazy(() => import("../chunks/CodePreviewEditor-B3688Fx4.js"));
+var CodePreviewEditor = lazy(() => import("../chunks/CodePreviewEditor-CBtYRZi6.js"));
 var PREVIEW_MARKDOWN_CONTROLS = {
 	table: { fullscreen: false },
 	mermaid: { fullscreen: false }
@@ -5499,7 +5498,7 @@ function FileExplorer({ storages, onRefresh, showUserHierarchy = false, groups =
 				onDownload: downloadNode,
 				onCopyUri: copyNodeUri
 			}),
-			slots.createFolderDialog?.({
+			/* @__PURE__ */ jsx(CreateModal, {
 				open: !!createFolderTarget,
 				onClose: () => setCreateFolderTarget(null),
 				typeIcon: /* @__PURE__ */ jsx(FolderIcon, { className: "w-3 h-3" }),
@@ -5514,19 +5513,18 @@ function FileExplorer({ storages, onRefresh, showUserHierarchy = false, groups =
 				className: "absolute inset-0 bg-(--theme-app-bg)/75 backdrop-blur-[2px] transition-opacity flex items-center justify-center z-50",
 				children: /* @__PURE__ */ jsx(Loader, { full: true })
 			}),
-			/* @__PURE__ */ jsx(Modal, {
-				isOpen: uploadModalOpen && !!pendingUpload,
-				close: () => {
+			/* @__PURE__ */ jsx(ConfirmModal, {
+				open: uploadModalOpen && !!pendingUpload,
+				onClose: () => {
 					setUploadModalOpen(false);
 					setPendingUpload(null);
 				},
-				type: "info",
+				align: "center",
 				title: t.confirmUpload.title,
-				text: t.confirmUpload.text(pendingUpload?.targetPath || t.confirmUpload.defaultPath),
-				actionLabel: t.confirmUpload.confirm,
-				action: handleUpload,
-				disableAction: pendingUpload ? isUploadSizeExceeded(pendingUpload.totalSize) : false,
-				fitWidth: true,
+				description: t.confirmUpload.text(pendingUpload?.targetPath || t.confirmUpload.defaultPath),
+				confirmLabel: t.confirmUpload.confirm,
+				onConfirm: handleUpload,
+				confirmDisabled: pendingUpload ? isUploadSizeExceeded(pendingUpload.totalSize) : false,
 				children: /* @__PURE__ */ jsxs("div", {
 					className: "text-sm flex flex-col gap-2 mt-2 text-left",
 					children: [
@@ -5575,19 +5573,19 @@ function FileExplorer({ storages, onRefresh, showUserHierarchy = false, groups =
 					]
 				})
 			}),
-			/* @__PURE__ */ jsx(Modal, {
-				isOpen: deleteModalOpen && !!pendingDelete,
-				close: () => {
+			/* @__PURE__ */ jsx(ConfirmModal, {
+				open: deleteModalOpen && !!pendingDelete,
+				onClose: () => {
 					setDeleteModalOpen(false);
 					setPendingDelete(null);
 					setCheckedItems(/* @__PURE__ */ new Set());
 				},
-				type: "destructive",
+				align: "center",
+				destructive: true,
 				title: t.confirmDelete.title,
-				text: t.confirmDelete.text,
-				actionLabel: t.confirmDelete.action,
-				action: handleDelete,
-				fitWidth: true,
+				description: t.confirmDelete.text,
+				confirmLabel: t.confirmDelete.action,
+				onConfirm: handleDelete,
 				children: /* @__PURE__ */ jsx("div", {
 					className: "text-sm flex flex-col gap-2 mt-2 text-left",
 					children: /* @__PURE__ */ jsx("ul", {

package/dist/form/index.js

@@ -1,10 +1,10 @@
 import { AngleRightIcon, EyeIcon, EyeOffIcon, SuccessCheckmark, TrashIcon } from "../icons.js";
-import { c as useStrings, s as useSlots } from "../chunks/Provider-uUHgWOWc.js";
+import { c as useStrings, s as useSlots } from "../chunks/Provider-jQCAN3NN.js";
 import { n as TOOLTIP_ID, r as TooltipInfo } from "../chunks/Tooltip-WgbiC_nd.js";
-import { a as UncontrolledCollapsiblePanel, c as Dropdown, f as isCategory, n as SectionHeader, o as MultiSelectDropdown, r as ControlledCollapsiblePanel, s as CustomListbox, t as SwitchToggle } from "../chunks/SwitchToggle-BqD0dE-L.js";
-import { t as Loader } from "../chunks/Loader-DQiZ75fa.js";
+import { a as UncontrolledCollapsiblePanel, c as Dropdown, f as isCategory, n as SectionHeader, o as MultiSelectDropdown, r as ControlledCollapsiblePanel, s as CustomListbox, t as SwitchToggle } from "../chunks/SwitchToggle-D0ud8cd5.js";
+import { t as Loader } from "../chunks/Loader-BXoXTZGc.js";
 import { n as StatusDot } from "../chunks/StatusBadge-DXp4zkSd.js";
-import { n as Table } from "../chunks/Table-C5z6qWjM.js";
+import { n as Table } from "../chunks/Table-ByziK93x.js";
 import { a as resolvedFlag, c as FieldWrapper, i as initializeValues, n as flattenGroups, o as applySecondaryField, r as impureSetValueFromPath, s as findSecondaryOption, t as enforceOneMustBeTrue } from "../chunks/lib-DTgL8klR.js";
 import cx from "classnames";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";

package/dist/index.d.ts

@@ -13,10 +13,15 @@ export { default as CustomListbox } from './components/Listbox.js';
 export { default as Loader } from './components/Loader.js';
 export { default as Markdown } from './components/Markdown.js';
 export type { MarkdownProps } from './components/Markdown.js';
-export { default as Modal, type ModalProps } from './components/Modal.js';
+export { BareModal, modalPanelClasses } from './components/BareModal.js';
+export { ConfirmModal } from './components/ConfirmModal.js';
+export { CreateModal, CreateModalAutocompleteField, CreateModalField, CreateModalSelect, type CreateModalSelectOption, CreateModalSwitch, CreateModalTextarea, } from './components/CreateModal.js';
+export { AddMenu, type HeaderAddMenuItem } from './components/AddMenu.js';
+export { dangerButtonClasses, ghostButtonClasses, primaryButtonClasses, } from './components/ghostButton.js';
 export { default as MultiSelectDropdown } from './components/MultiSelect.js';
 export { Overview } from './components/Overview.js';
 export { UIProvider, useNavigation, useNotify, useProvisionCorsRules, useRunFile, useSlots, useStrings, useWorkflowJsonResolver, type RunFileResult, type WorkflowJsonRef, type UIData, type UINavigation, type UINotify, type UISlots, type UIStrings, } from './components/Provider.js';
+export { useCssIsDark } from './components/useCssIsDark.js';
 export { Indicator } from './components/Indicator.js';
 export { ControlledCollapsiblePanel, MaybeCollapsible, UncontrolledCollapsiblePanel, } from './components/CollapsiblePanel.js';
 export { default as SectionHeader } from './components/SectionHeader.js';

package/dist/index.js

@@ -1,15 +1,16 @@
 import { DEFAULT_PRESET, THEME_PRESETS, THEME_TOKENS, applyTheme, contrastRatio, deriveTheme, isDarkColor } from "./theme/index.js";
 import { AlertIcon, AngleRightIcon, EyeIcon, EyeOffIcon, FilterIcon, LoaderIcon, SortDownIcon, SortUnsortedIcon, SortUpIcon } from "./icons.js";
-import { i as Callout, n as CopyCodeBlock, r as CopyToClipboard, t as Markdown } from "./chunks/Markdown-iFhq8Gb0.js";
-import { a as useProvisionCorsRules, c as useStrings, i as useNotify, l as useWorkflowJsonResolver, n as useLink, o as useRunFile, r as useNavigation, s as useSlots, t as UIProvider } from "./chunks/Provider-uUHgWOWc.js";
+import { a as CreateModalSwitch, c as ConfirmModal, d as primaryButtonClasses, f as Markdown, h as Callout, i as CreateModalSelect, l as dangerButtonClasses, m as CopyToClipboard, n as CreateModalAutocompleteField, o as CreateModalTextarea, p as CopyCodeBlock, r as CreateModalField, s as AddMenu, t as CreateModal, u as ghostButtonClasses } from "./chunks/CreateModal-6zZZHxCI.js";
+import { a as useProvisionCorsRules, c as useStrings, i as useNotify, l as useWorkflowJsonResolver, n as useLink, o as useRunFile, r as useNavigation, s as useSlots, t as UIProvider } from "./chunks/Provider-jQCAN3NN.js";
 import { i as formatTooltipContent, n as TOOLTIP_ID, r as TooltipInfo, t as GlobalTooltip } from "./chunks/Tooltip-WgbiC_nd.js";
-import { a as UncontrolledCollapsiblePanel, c as Dropdown, d as flattenOptions, f as isCategory, i as MaybeCollapsible, l as DropdownCaret, n as SectionHeader, o as MultiSelectDropdown, p as isOption, r as ControlledCollapsiblePanel, s as CustomListbox, t as SwitchToggle, u as filterOption } from "./chunks/SwitchToggle-BqD0dE-L.js";
-import { t as Loader } from "./chunks/Loader-DQiZ75fa.js";
-import { t as Modal } from "./chunks/Modal-sOUEwebV.js";
+import { a as UncontrolledCollapsiblePanel, c as Dropdown, d as flattenOptions, f as isCategory, i as MaybeCollapsible, l as DropdownCaret, n as SectionHeader, o as MultiSelectDropdown, p as isOption, r as ControlledCollapsiblePanel, s as CustomListbox, t as SwitchToggle, u as filterOption } from "./chunks/SwitchToggle-D0ud8cd5.js";
+import { t as Loader } from "./chunks/Loader-BXoXTZGc.js";
+import { n as modalPanelClasses, t as BareModal } from "./chunks/BareModal-DBa84JZO.js";
+import { t as useCssIsDark } from "./chunks/useCssIsDark-DHr05dG2.js";
 import { t as Indicator } from "./chunks/Indicator-hBSIxOPK.js";
 import { t as SwitchToggleSmall } from "./chunks/SwitchToggleSmall-FcsaYSTs.js";
 import { n as StatusDot, t as StatusBadge } from "./chunks/StatusBadge-DXp4zkSd.js";
-import { n as Table, t as CompactTable } from "./chunks/Table-C5z6qWjM.js";
+import { n as Table, t as CompactTable } from "./chunks/Table-ByziK93x.js";
 import cx from "classnames";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import React, { forwardRef, useState } from "react";
@@ -534,4 +535,4 @@ function SettingModeOption({ name, checked, onSelect, label, description, isFirs
 	});
 }
 //#endregion
-export { Button, Callout, Card, CardHeader, CompactTable, ControlledCollapsiblePanel, CopyCodeBlock, CopyToClipboard, CustomListbox, DEFAULT_PRESET, DescriptionList, DescriptionListItem, Dropdown, DropdownCaret, EmptyState, Filter, FilterPill, GlobalTooltip, IconButton, Indicator, Input, LetterBadge, Loader, Markdown, MaybeCollapsible, MethodButton, Modal, MultiSelectDropdown, Overview, Pagination, SectionHeader, SettingModeOption, SettingRow, SettingSection, SettingsCard, SettingsGroup, Sort, StatusBadge, StatusDot, SwitchToggle, SwitchToggleSmall, THEME_PRESETS, THEME_TOKENS, TOOLTIP_ID, Table, Textarea, Toggle, TooltipInfo, UIProvider, UncontrolledCollapsiblePanel, applyTheme, contrastRatio, deriveTheme, filterOption, flattenOptions, formatTooltipContent, inputClasses, isCategory, isDarkColor, isOption, useNavigation, useNotify, useProvisionCorsRules, useRunFile, useSlots, useStrings, useWorkflowJsonResolver };
+export { AddMenu, BareModal, Button, Callout, Card, CardHeader, CompactTable, ConfirmModal, ControlledCollapsiblePanel, CopyCodeBlock, CopyToClipboard, CreateModal, CreateModalAutocompleteField, CreateModalField, CreateModalSelect, CreateModalSwitch, CreateModalTextarea, CustomListbox, DEFAULT_PRESET, DescriptionList, DescriptionListItem, Dropdown, DropdownCaret, EmptyState, Filter, FilterPill, GlobalTooltip, IconButton, Indicator, Input, LetterBadge, Loader, Markdown, MaybeCollapsible, MethodButton, MultiSelectDropdown, Overview, Pagination, SectionHeader, SettingModeOption, SettingRow, SettingSection, SettingsCard, SettingsGroup, Sort, StatusBadge, StatusDot, SwitchToggle, SwitchToggleSmall, THEME_PRESETS, THEME_TOKENS, TOOLTIP_ID, Table, Textarea, Toggle, TooltipInfo, UIProvider, UncontrolledCollapsiblePanel, applyTheme, contrastRatio, dangerButtonClasses, deriveTheme, filterOption, flattenOptions, formatTooltipContent, ghostButtonClasses, inputClasses, isCategory, isDarkColor, isOption, modalPanelClasses, primaryButtonClasses, useCssIsDark, useNavigation, useNotify, useProvisionCorsRules, useRunFile, useSlots, useStrings, useWorkflowJsonResolver };

package/dist/list/index.js

@@ -1,2 +1,2 @@
-import { A as useRowMenu, C as listTableProps, D as rowContextMenuProps, E as copySubmenu, O as toRowMenuItem, S as listTableFixedProps, T as assembleRowMenu, _ as ListSkeleton, a as ListSearchControl, b as RowSelectCheckbox, c as ListFilterMenu, d as DEFAULT_ORDER, f as FAVORITE_ORDER, g as ListError, h as ListActionsHeader, i as ListCount, j as useRowMenuActive, k as toolbarActionToRowAction, l as listControlButtonClasses, m as GroupRow, n as useHoverCard, o as useListSearch, p as useListView, r as ListPager, s as ListDisplayMenu, t as HoverCardSurface, u as isTextEntryContext, v as NAME_MIN_WIDTH_PX, w as MoreButton, x as actionsColumnWidth, y as NameCell } from "../chunks/list-D5f5Fq-O.js";
+import { A as useRowMenu, C as listTableProps, D as rowContextMenuProps, E as copySubmenu, O as toRowMenuItem, S as listTableFixedProps, T as assembleRowMenu, _ as ListSkeleton, a as ListSearchControl, b as RowSelectCheckbox, c as ListFilterMenu, d as DEFAULT_ORDER, f as FAVORITE_ORDER, g as ListError, h as ListActionsHeader, i as ListCount, j as useRowMenuActive, k as toolbarActionToRowAction, l as listControlButtonClasses, m as GroupRow, n as useHoverCard, o as useListSearch, p as useListView, r as ListPager, s as ListDisplayMenu, t as HoverCardSurface, u as isTextEntryContext, v as NAME_MIN_WIDTH_PX, w as MoreButton, x as actionsColumnWidth, y as NameCell } from "../chunks/list-CvDWt0TC.js";
 export { DEFAULT_ORDER, FAVORITE_ORDER, GroupRow, HoverCardSurface, ListActionsHeader, ListCount, ListDisplayMenu, ListError, ListFilterMenu, ListPager, ListSearchControl, ListSkeleton, MoreButton, NAME_MIN_WIDTH_PX, NameCell, RowSelectCheckbox, actionsColumnWidth, assembleRowMenu, copySubmenu, isTextEntryContext, listControlButtonClasses, listTableFixedProps, listTableProps, rowContextMenuProps, toRowMenuItem, toolbarActionToRowAction, useHoverCard, useListSearch, useListView, useRowMenu, useRowMenuActive };

package/dist/logviewer/index.js

@@ -1,5 +1,5 @@
 import { ArrowDownIcon, ArrowUpIcon, CheckIcon, ChevronDownIcon, ChevronRightIcon, CopyIcon, DownloadIcon, ExpandIcon, ShrinkIcon, XIcon } from "../icons.js";
-import { c as useStrings, i as useNotify } from "../chunks/Provider-uUHgWOWc.js";
+import { c as useStrings, i as useNotify } from "../chunks/Provider-jQCAN3NN.js";
 import cx from "classnames";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Fragment as Fragment$1, memo, useCallback, useEffect, useMemo, useRef, useState } from "react";