@parallelworks/ui 0.3.1 → 0.5.0

package/dist/chunks/BareModal-DBa84JZO.js

@@ -0,0 +1,80 @@
+import cx from "classnames";
+import { jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef } from "react";
+import { createPortal } from "react-dom";
+//#region src/components/BareModal.tsx
+/** Omit when the content supplies its own panel styling. */
+var modalPanelClasses = "rounded-xl border border-(--theme-border) bg-(--theme-app-bg) text-(--theme-app) shadow-2xl";
+var FOCUSABLE = "a[href], button:not([disabled]), textarea, input, select, [tabindex]:not([tabindex=\"-1\"])";
+function BareModal({ open, onClose, ariaLabel, className, onPanelKeyDown, onPanelMouseDown, align = "top", preventClose = false, children }) {
+	const panelRef = useRef(null);
+	useEffect(() => {
+		if (!open || preventClose) return;
+		const onKeyDown = (e) => {
+			if (e.key === "Escape") onClose();
+		};
+		document.addEventListener("keydown", onKeyDown);
+		return () => document.removeEventListener("keydown", onKeyDown);
+	}, [
+		open,
+		onClose,
+		preventClose
+	]);
+	useEffect(() => {
+		if (!open) return;
+		const previouslyFocused = document.activeElement;
+		const previousOverflow = document.body.style.overflow;
+		document.body.style.overflow = "hidden";
+		return () => {
+			document.body.style.overflow = previousOverflow;
+			previouslyFocused?.focus?.();
+		};
+	}, [open]);
+	const trapFocus = useCallback((e) => {
+		const panel = panelRef.current;
+		if (e.key !== "Tab" || !panel || !panel.contains(document.activeElement)) {
+			onPanelKeyDown?.(e);
+			return;
+		}
+		const focusable = panel.querySelectorAll(FOCUSABLE);
+		if (focusable.length === 0) {
+			e.preventDefault();
+			onPanelKeyDown?.(e);
+			return;
+		}
+		const first = focusable[0];
+		const last = focusable[focusable.length - 1];
+		if (!first || !last) {
+			onPanelKeyDown?.(e);
+			return;
+		}
+		if (e.shiftKey && document.activeElement === first) {
+			e.preventDefault();
+			last.focus();
+		} else if (!e.shiftKey && document.activeElement === last) {
+			e.preventDefault();
+			first.focus();
+		}
+		onPanelKeyDown?.(e);
+	}, [onPanelKeyDown]);
+	if (!open) return null;
+	return createPortal(/* @__PURE__ */ jsx("div", {
+		"data-testid": "modal-backdrop",
+		className: cx("fixed inset-0 z-[9990] flex justify-center px-4 pb-8", align === "center" ? "items-center" : "items-start pt-[14vh]"),
+		style: { backgroundColor: "rgba(0, 0, 0, 0.4)" },
+		onClick: preventClose ? void 0 : onClose,
+		children: /* @__PURE__ */ jsx("div", {
+			ref: panelRef,
+			role: "dialog",
+			"aria-modal": "true",
+			"aria-label": ariaLabel,
+			className,
+			onClick: (e) => e.stopPropagation(),
+			onKeyDown: trapFocus,
+			onMouseDown: onPanelMouseDown,
+			children
+		})
+	}), document.body);
+}
+//#endregion
+export { modalPanelClasses as n, BareModal as t };

package/dist/chunks/{CodePreviewEditor-CSPRILMp.js → CodePreviewEditor-CBtYRZi6.js}

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

package/dist/chunks/CreateModal-6zZZHxCI.js

@@ -0,0 +1,595 @@
+import { AlertIcon, CheckIcon, ChevronDownIcon, ChevronRightIcon, ClipboardIcon, CopyIcon, FavoriteIcon, FavoriteOutlineIcon, HiddenFalseIcon, HiddenTrueIcon, InfoIcon, TooltipIcon } from "../icons.js";
+import { c as useStrings, i as useNotify, n as useLink } from "./Provider-jQCAN3NN.js";
+import { n as TOOLTIP_ID } from "./Tooltip-WgbiC_nd.js";
+import { n as modalPanelClasses, t as BareModal } from "./BareModal-DBa84JZO.js";
+import cx from "classnames";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, Suspense, lazy, useCallback, useEffect, useRef, useState } from "react";
+import { Combobox, ComboboxInput, ComboboxOption, ComboboxOptions, Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/react";
+//#region src/components/Callout.tsx
+function CalloutIcon({ type }) {
+	if (type === "warning" || type === "error") return /* @__PURE__ */ jsx(AlertIcon, { className: "h-6 w-6 mr-4 text-lg" });
+	else return /* @__PURE__ */ jsx(InfoIcon, { className: "h-6 w-6 mr-4 text-lg" });
+}
+function Callout({ type, className = "", children }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cx(className, type === "warning" && "bg-orange-100 border-orange-500 text-orange-700", type === "error" && "bg-red-100 border-red-500 text-red-700", type === "info" && "bg-blue-100 border-blue-500 text-blue-700", "border-t-4 rounded-b px-4 py-3 shadow-md my-4"),
+		role: "alert",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "py-1",
+				children: /* @__PURE__ */ jsx(CalloutIcon, { type })
+			}), /* @__PURE__ */ jsx("div", { children })]
+		})
+	});
+}
+//#endregion
+//#region src/components/CopyToClipboard.tsx
+function CopyToClipboard({ as = "div", text, className, children, showIcon = true }) {
+	const notify = useNotify();
+	const handleCopy = async () => {
+		try {
+			await navigator.clipboard.writeText(text);
+			notify.info("Copied to clipboard");
+		} catch {
+			notify.error("Failed to copy to clipboard");
+		}
+	};
+	return /* @__PURE__ */ jsxs(as, {
+		className,
+		onClick: handleCopy,
+		...as === "button" ? { type: "button" } : {},
+		children: [showIcon && /* @__PURE__ */ jsx(ClipboardIcon, {}), children]
+	});
+}
+function CopyCodeBlock({ textToCopy, children, secret = false, isRevealed = false, onRevealToggle }) {
+	const notify = useNotify();
+	const [copied, setCopied] = useState(false);
+	const handleCopy = async () => {
+		if (copied) return;
+		try {
+			await navigator.clipboard.writeText(textToCopy);
+			setCopied(true);
+			notify.info("Copied to clipboard");
+			setTimeout(() => setCopied(false), 2e3);
+		} catch {
+			notify.error("Failed to copy to clipboard");
+		}
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "group relative",
+		onClick: handleCopy,
+		children: [/* @__PURE__ */ jsx("pre", {
+			className: `p-4 theme-hover border rounded-lg text-left font-mono text-sm overflow-x-auto ${secret ? "pr-24" : "pr-12"}`,
+			children
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "absolute top-0 right-0 bottom-0 flex items-center gap-1 pl-8 pr-2 bg-gradient-to-l from-[var(--color-panel)] from-70% to-transparent rounded-r-lg",
+			children: [secret && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: (e) => {
+					e.stopPropagation();
+					onRevealToggle?.();
+				},
+				className: "p-2 rounded-md opacity-0 group-hover:opacity-100 transition-all duration-150",
+				"aria-label": isRevealed ? "Hide secret" : "Reveal secret",
+				title: isRevealed ? "Hide secret" : "Reveal secret",
+				children: isRevealed ? /* @__PURE__ */ jsx(HiddenFalseIcon, {}) : /* @__PURE__ */ jsx(HiddenTrueIcon, {})
+			}), /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: (e) => {
+					e.stopPropagation();
+					handleCopy();
+				},
+				className: "p-2 rounded-md opacity-0 group-hover:opacity-100 transition-all duration-150",
+				"aria-label": copied ? "Copied" : "Copy to clipboard",
+				children: copied ? /* @__PURE__ */ jsx(CheckIcon, { className: "text-green-400" }) : /* @__PURE__ */ jsx(CopyIcon, {})
+			})]
+		})]
+	});
+}
+//#endregion
+//#region src/components/Markdown.tsx
+var MarkdownImpl = lazy(() => import("./MarkdownImpl-Bq4QhrtA.js"));
+function Markdown(props) {
+	return /* @__PURE__ */ jsx(Suspense, {
+		fallback: /* @__PURE__ */ jsx("div", {
+			className: "markdown whitespace-pre-wrap text-start w-full",
+			children: props.children
+		}),
+		children: /* @__PURE__ */ jsx(MarkdownImpl, { ...props })
+	});
+}
+//#endregion
+//#region src/components/ghostButton.ts
+var 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";
+var 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. */
+var 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";
+//#endregion
+//#region src/components/ConfirmModal.tsx
+function ConfirmModal({ open, onClose, title, description, children, confirmLabel, onConfirm, confirmDisabled = false, destructive = false, align = "top", cancelLabel, closeOnConfirm = true }) {
+	const strings = useStrings();
+	const [pending, setPending] = useState(false);
+	const firedRef = useRef(false);
+	useEffect(() => {
+		if (open) firedRef.current = false;
+	}, [open]);
+	const onCloseRef = useRef(onClose);
+	onCloseRef.current = onClose;
+	const runConfirm = useCallback(async () => {
+		if (firedRef.current) return;
+		firedRef.current = true;
+		setPending(true);
+		try {
+			await onConfirm();
+			if (closeOnConfirm) onCloseRef.current();
+			else firedRef.current = false;
+		} finally {
+			setPending(false);
+		}
+	}, [onConfirm, closeOnConfirm]);
+	return /* @__PURE__ */ jsxs(BareModal, {
+		open,
+		onClose,
+		ariaLabel: title,
+		align,
+		preventClose: pending,
+		className: cx(modalPanelClasses, "w-[480px] max-w-full"),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "px-5 pt-5",
+			children: [
+				/* @__PURE__ */ jsx("h2", {
+					className: "text-lg font-semibold text-(--theme-app)",
+					children: title
+				}),
+				description !== null && description !== void 0 && /* @__PURE__ */ jsx("p", {
+					className: "mt-1.5 text-sm text-(--theme-muted-text-color)",
+					children: description
+				}),
+				children !== null && children !== void 0 && /* @__PURE__ */ jsx("div", {
+					className: "mt-4",
+					children
+				})
+			]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "mt-5 flex items-center justify-end gap-2 border-t border-(--theme-border) px-5 py-3",
+			children: [/* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: onClose,
+				disabled: pending,
+				className: cx(ghostButtonClasses, pending && "cursor-wait"),
+				children: cancelLabel ?? strings.modal.cancel
+			}), /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: runConfirm,
+				disabled: confirmDisabled || pending,
+				className: cx(destructive ? dangerButtonClasses : primaryButtonClasses, "disabled:cursor-not-allowed disabled:opacity-50", pending && "cursor-wait"),
+				children: confirmLabel
+			})]
+		})]
+	});
+}
+//#endregion
+//#region src/components/AddMenu.tsx
+var addMenuItemClasses = "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";
+function AddMenu({ items, label, buttonClassName, zClassName = "z-50", children }) {
+	const Link = useLink();
+	return /* @__PURE__ */ jsxs(Menu, { children: [/* @__PURE__ */ jsx(MenuButton, {
+		"aria-label": label,
+		title: label,
+		className: buttonClassName,
+		children
+	}), /* @__PURE__ */ jsx(MenuItems, {
+		anchor: "bottom start",
+		className: cx("mt-1 min-w-52 rounded-lg border border-(--theme-border) bg-(--theme-app-bg) py-1 shadow-lg focus:outline-none", zClassName),
+		children: items.map((item) => /* @__PURE__ */ jsxs(Fragment$1, { children: [item.separatorAbove && /* @__PURE__ */ jsx("div", { className: "my-1 border-t border-(--theme-border)" }), /* @__PURE__ */ jsx(MenuItem, { children: item.to && !item.disabled ? /* @__PURE__ */ jsxs(Link, {
+			to: item.to,
+			className: addMenuItemClasses,
+			children: [item.icon, item.label]
+		}) : /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			onClick: item.onSelect,
+			disabled: item.disabled,
+			className: cx(addMenuItemClasses, item.disabled && "opacity-50 cursor-not-allowed"),
+			children: [item.icon, item.label]
+		}) })] }, item.label))
+	})] });
+}
+//#endregion
+//#region src/components/CreateModal.tsx
+/** Small info icon that surfaces field help via the global tooltip. */
+function FieldHelp({ tooltip }) {
+	if (!tooltip) return null;
+	return /* @__PURE__ */ jsx("span", {
+		"data-tooltip-id": TOOLTIP_ID,
+		"data-tooltip-content": tooltip,
+		className: "inline-flex cursor-help text-(--theme-muted-text-color)",
+		children: /* @__PURE__ */ jsx(TooltipIcon, { className: "w-3 h-3" })
+	});
+}
+/** Anchors the tooltip on a non-focusable span so it opens on hover but not when focus returns to the button after its menu/toggle closes (which would leave it stuck). */
+function PillTooltip({ content, className, children }) {
+	return /* @__PURE__ */ jsx("span", {
+		...content ? {
+			"data-tooltip-id": TOOLTIP_ID,
+			"data-tooltip-content": content
+		} : {},
+		className: cx("inline-flex items-center gap-1.5", className),
+		children
+	});
+}
+/** Submits on Enter in the name field or ⌘/Ctrl+Enter from anywhere in the panel. */
+function CreateModal({ open, onClose, typeIcon, typeLabel, typeMenu, namePlaceholder, hideName = false, initialName, showDescription = true, descriptionPlaceholder, submitLabel, submittingLabel, validateName, sanitizeName, nameHint, children, properties, advanced, submitDisabled = false, hideSubmit = false, nameOptional = false, onNameChange, dirty = false, showFavorite = false, onSubmit }) {
+	const t = useStrings().modal;
+	const submitText = submitLabel ?? t.create;
+	const submittingText = submittingLabel ?? t.creating;
+	const descriptionText = descriptionPlaceholder ?? t.addDescription;
+	const [name, setName] = useState("");
+	const [description, setDescription] = useState("");
+	const [submitting, setSubmitting] = useState(false);
+	const [advancedOpen, setAdvancedOpen] = useState(false);
+	const [favorite, setFavorite] = useState(false);
+	const [nameFlash, setNameFlash] = useState(false);
+	const [nameTouched, setNameTouched] = useState(false);
+	const [interacted, setInteracted] = useState(false);
+	const nameRef = useRef(null);
+	useEffect(() => {
+		if (open) {
+			setName(initialName ?? "");
+			setDescription("");
+			setSubmitting(false);
+			setAdvancedOpen(false);
+			setFavorite(false);
+			setNameTouched(false);
+			setInteracted(false);
+			requestAnimationFrame(() => nameRef.current?.focus());
+		}
+	}, [open, initialName]);
+	const nameError = name.trim() ? validateName?.(name.trim()) ?? null : null;
+	const hint = !nameError && name.trim() ? nameHint?.(name.trim()) : null;
+	const canSubmit = (hideName || nameOptional || name.trim().length > 0) && !nameError && !submitting && !submitDisabled;
+	const isDirty = !submitting && (interacted || name !== (initialName ?? "") || description !== "" || favorite || dirty);
+	const nameMissing = !hideName && !nameOptional && (!name.trim() || !!nameError) && (nameTouched || description !== "" || favorite || dirty);
+	const flashName = () => {
+		setNameTouched(true);
+		nameRef.current?.focus();
+		setNameFlash(false);
+		requestAnimationFrame(() => setNameFlash(true));
+	};
+	const handleSubmit = async () => {
+		if (!canSubmit) {
+			if (!hideName && !submitting && (!name.trim() || nameError)) flashName();
+			return;
+		}
+		setSubmitting(true);
+		let close = false;
+		try {
+			close = await onSubmit(name.trim(), description.trim(), favorite);
+		} finally {
+			if (!close) setSubmitting(false);
+		}
+		if (close) onClose();
+	};
+	return /* @__PURE__ */ jsxs(BareModal, {
+		open,
+		onClose,
+		ariaLabel: `${submitText}: ${typeLabel}`,
+		className: cx(modalPanelClasses, "w-[560px] max-w-full flex flex-col max-h-full"),
+		preventClose: isDirty,
+		onPanelKeyDown: (e) => {
+			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();
+		},
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex-1 min-h-0 overflow-y-auto overscroll-contain",
+			onChangeCapture: () => setInteracted(true),
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "px-4 pt-4",
+					children: [
+						typeMenu && typeMenu.length > 0 ? /* @__PURE__ */ jsxs(AddMenu, {
+							items: typeMenu,
+							label: typeLabel,
+							zClassName: "z-[9999]",
+							buttonClassName: "inline-flex items-center gap-1.5 px-1.5 py-1 rounded-md bg-(--theme-muted-panel-bg) text-xs font-medium text-(--theme-muted-text-color) transition-colors hover:text-(--theme-app)",
+							children: [
+								typeIcon,
+								typeLabel,
+								/* @__PURE__ */ jsx(ChevronDownIcon, { className: "w-3 h-3 opacity-60" })
+							]
+						}) : /* @__PURE__ */ jsxs("div", {
+							className: "inline-flex items-center gap-1.5 px-1.5 py-1 rounded-md bg-(--theme-muted-panel-bg) text-xs font-medium text-(--theme-muted-text-color)",
+							children: [typeIcon, typeLabel]
+						}),
+						hideName ? /* @__PURE__ */ jsx("div", { className: "mt-3" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+							/* @__PURE__ */ jsx("input", {
+								ref: nameRef,
+								type: "text",
+								autoComplete: "off",
+								"data-1p-ignore": true,
+								value: name,
+								onChange: (e) => {
+									const next = sanitizeName ? sanitizeName(e.target.value) : e.target.value;
+									setName(next);
+									onNameChange?.(next);
+								},
+								onBlur: (e) => {
+									if (!e.target.value.trim()) setNameTouched(true);
+								},
+								onKeyDown: (e) => {
+									if (e.key === "Enter" && !e.nativeEvent.isComposing && !e.metaKey && !e.ctrlKey) {
+										e.preventDefault();
+										e.stopPropagation();
+										handleSubmit();
+									}
+								},
+								placeholder: namePlaceholder,
+								"aria-label": namePlaceholder,
+								onAnimationEnd: () => setNameFlash(false),
+								className: cx("mt-2 -mb-1 -mx-1.5 w-[calc(100%+0.75rem)] rounded-md border-0 px-1.5 py-1 bg-transparent shadow-none text-lg font-medium text-(--theme-app) placeholder:text-(--theme-muted-text-color) focus:outline-none", nameFlash && "animate-field-flash", nameMissing ? "ring-1 ring-(--theme-error)" : "focus:ring-0")
+							}),
+							nameError && /* @__PURE__ */ jsx("p", {
+								className: "mt-1 text-xs text-(--theme-error)",
+								children: nameError
+							}),
+							hint && /* @__PURE__ */ jsx("p", {
+								className: "mt-1 text-xs text-(--theme-muted-text-color)",
+								children: hint
+							}),
+							showDescription ? /* @__PURE__ */ jsx("textarea", {
+								autoComplete: "off",
+								"data-1p-ignore": true,
+								value: description,
+								onChange: (e) => setDescription(e.target.value),
+								placeholder: descriptionText,
+								"aria-label": descriptionText,
+								rows: 3,
+								className: "mt-1.5 w-full border-0 p-0 bg-transparent shadow-none resize-none text-sm text-(--theme-app) placeholder:text-(--theme-muted-text-color) focus:outline-none focus:ring-0"
+							}) : /* @__PURE__ */ jsx("div", { className: "mt-3" })
+						] }),
+						children
+					]
+				}),
+				properties && /* @__PURE__ */ jsx("div", {
+					className: "flex flex-wrap items-center gap-1.5 px-4 pt-1 pb-3",
+					children: properties
+				}),
+				advanced && /* @__PURE__ */ jsxs("div", {
+					className: "px-4 pb-3",
+					children: [/* @__PURE__ */ jsxs("button", {
+						type: "button",
+						onClick: () => setAdvancedOpen((o) => !o),
+						className: "inline-flex items-center gap-1 text-xs font-medium text-(--theme-muted-text-color) hover:text-(--theme-app) transition-colors",
+						children: [/* @__PURE__ */ jsx(ChevronRightIcon, { className: cx("w-3 h-3 transition-transform", advancedOpen && "rotate-90") }), t.advanced]
+					}), advancedOpen && /* @__PURE__ */ jsx("div", {
+						className: "mt-2",
+						children: advanced
+					})]
+				})
+			]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "shrink-0 flex items-center justify-between gap-2 px-4 py-3",
+			children: [showFavorite ? /* @__PURE__ */ jsx("button", {
+				type: "button",
+				role: "switch",
+				"aria-checked": favorite,
+				"aria-label": t.favorite,
+				onClick: () => setFavorite((f) => !f),
+				className: cx("inline-flex h-8 rounded-md text-sm font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-(--theme-focus-ring)", favorite ? "text-(--theme-favorite) bg-(--theme-favorite-muted)" : "text-(--theme-muted-text-color) hover:text-(--theme-app) hover:bg-(--theme-muted-panel-bg)"),
+				children: /* @__PURE__ */ jsxs(PillTooltip, {
+					content: favorite ? t.favoriteHintOn : t.favoriteHintOff,
+					className: "px-2.5",
+					children: [favorite ? /* @__PURE__ */ jsx(FavoriteIcon, { className: "w-4 h-4 scale-110 transition-transform" }) : /* @__PURE__ */ jsx(FavoriteOutlineIcon, { className: "w-4 h-4 transition-transform" }), favorite ? t.favorited : t.favorite]
+				})
+			}) : /* @__PURE__ */ jsx("span", {}), /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: onClose,
+					className: ghostButtonClasses,
+					children: hideSubmit ? t.close : t.cancel
+				}), !hideSubmit && /* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: handleSubmit,
+					"aria-disabled": !canSubmit,
+					className: `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 aria-disabled:opacity-50 aria-disabled:cursor-not-allowed aria-disabled:hover:opacity-50`,
+					children: submitting ? submittingText : submitText
+				})]
+			})]
+		})]
+	});
+}
+var fieldInputClasses = "w-full h-8 px-2.5 rounded-md border border-(--theme-border) bg-(--theme-input-bg) shadow-none text-sm text-(--theme-app) placeholder:text-(--theme-muted-text-color) transition-colors focus:outline-none focus:ring-0 focus:border-(--theme-element)";
+var fieldLabelClasses = "block mb-1 text-xs font-medium text-(--theme-muted-text-color)";
+/** Labeled single-line input row for the dialog's extra fields. */
+function CreateModalField({ label, tooltip, ...props }) {
+	return /* @__PURE__ */ jsxs("label", {
+		className: "block mb-3",
+		children: [/* @__PURE__ */ jsxs("span", {
+			className: cx(fieldLabelClasses, "flex items-center gap-1"),
+			children: [label, /* @__PURE__ */ jsx(FieldHelp, { tooltip })]
+		}), /* @__PURE__ */ jsx("input", {
+			type: "text",
+			autoComplete: "off",
+			"data-1p-ignore": true,
+			...props,
+			className: fieldInputClasses
+		})]
+	});
+}
+/** Labeled multi-line field for credential blobs (JSON keys, PEM keys). */
+function CreateModalTextarea({ label, tooltip, rows = 4, ...props }) {
+	return /* @__PURE__ */ jsxs("label", {
+		className: "block mb-3",
+		children: [/* @__PURE__ */ jsxs("span", {
+			className: cx(fieldLabelClasses, "flex items-center gap-1"),
+			children: [label, /* @__PURE__ */ jsx(FieldHelp, { tooltip })]
+		}), /* @__PURE__ */ jsx("textarea", {
+			autoComplete: "off",
+			"data-1p-ignore": true,
+			rows,
+			...props,
+			className: cx(fieldInputClasses, "h-auto py-2 font-mono text-xs leading-relaxed resize-y")
+		})]
+	});
+}
+/** Labeled input row with typeahead suggestions; free-form values allowed. */
+function CreateModalAutocompleteField({ label, tooltip, value, onChange, options, placeholder }) {
+	const query = value.trim().toLowerCase();
+	const filtered = query ? options.filter((option) => option.toLowerCase().includes(query)) : options;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "mb-3",
+		children: [/* @__PURE__ */ jsxs("span", {
+			className: cx(fieldLabelClasses, "flex items-center gap-1"),
+			children: [label, /* @__PURE__ */ jsx(FieldHelp, { tooltip })]
+		}), /* @__PURE__ */ jsxs(Combobox, {
+			value,
+			onChange: (next) => onChange(next ?? ""),
+			immediate: true,
+			children: [/* @__PURE__ */ jsx(ComboboxInput, {
+				autoComplete: "off",
+				"data-1p-ignore": true,
+				"aria-label": label,
+				placeholder,
+				displayValue: (current) => current ?? "",
+				onChange: (e) => onChange(e.target.value),
+				className: fieldInputClasses
+			}), filtered.length > 0 && /* @__PURE__ */ jsx(ComboboxOptions, {
+				anchor: "bottom start",
+				className: "z-[9999] mt-1 w-(--input-width) [--anchor-max-height:14rem] overflow-auto rounded-lg border border-(--theme-border) bg-(--theme-app-bg) py-1 shadow-lg focus:outline-none",
+				children: filtered.map((option) => /* @__PURE__ */ jsx(ComboboxOption, {
+					value: option,
+					className: "px-3 py-1.5 text-[13px] text-(--theme-app) data-[focus]:bg-(--theme-muted-panel-bg) cursor-pointer",
+					children: option
+				}, option))
+			})]
+		})]
+	});
+}
+/** Compact property pill with an on/off switch. */
+function CreateModalSwitch({ label, checked, onChange, tooltip }) {
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		role: "switch",
+		"aria-checked": checked,
+		onClick: () => onChange(!checked),
+		className: cx("inline-flex h-7 rounded-md border border-(--theme-border) text-xs font-medium transition-colors hover:bg-(--theme-muted-panel-bg)", checked ? "text-(--theme-app)" : "text-(--theme-muted-text-color)"),
+		children: /* @__PURE__ */ jsxs(PillTooltip, {
+			content: tooltip,
+			className: "px-2",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: cx("relative inline-flex h-3.5 w-6 shrink-0 rounded-full transition-colors", checked ? "bg-(--theme-element)" : "bg-(--theme-border)"),
+				children: /* @__PURE__ */ jsx("span", { className: cx("absolute top-0.5 left-0.5 h-2.5 w-2.5 rounded-full bg-white shadow-sm transition-transform", checked && "translate-x-2.5") })
+			}), label]
+		})
+	});
+}
+function buildOptionNodes(options, query, onChange) {
+	const normalize = (s) => s.toLowerCase().replace(/-/g, "");
+	const q = normalize(query.trim());
+	const filtered = q ? options.filter((o) => normalize(o.label).includes(q)) : options;
+	const nodes = [];
+	let lastGroup;
+	for (const option of filtered) {
+		if (option.group && option.group !== lastGroup) {
+			lastGroup = option.group;
+			nodes.push(/* @__PURE__ */ jsx("div", {
+				className: "px-3 pt-2 pb-1 text-[10px] font-semibold uppercase tracking-wide text-(--theme-muted-text-color)",
+				children: option.group
+			}, `group-${option.group}`));
+		}
+		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));
+	}
+	return nodes;
+}
+function CreateModalSelectPanel({ open, options, label, onChange }) {
+	const t = useStrings().modal;
+	const [query, setQuery] = useState("");
+	const inputRef = useRef(null);
+	const showFilter = options.length > 8;
+	useEffect(() => {
+		if (!open) {
+			setQuery("");
+			return;
+		}
+		if (!showFilter) return;
+		const raf = requestAnimationFrame(() => inputRef.current?.focus());
+		return () => cancelAnimationFrame(raf);
+	}, [open, showFilter]);
+	const rendered = buildOptionNodes(options, query, onChange);
+	return /* @__PURE__ */ jsxs(MenuItems, {
+		anchor: "bottom start",
+		className: "z-[9999] mt-1 min-w-44 [--anchor-max-height:16rem] overflow-auto rounded-lg border border-(--theme-border) bg-(--theme-app-bg) shadow-lg focus:outline-none",
+		children: [showFilter && /* @__PURE__ */ jsx("div", {
+			className: "sticky top-0 z-10 bg-(--theme-app-bg) px-1.5 pt-1 pb-1.5 border-b border-(--theme-border)",
+			children: /* @__PURE__ */ jsx("input", {
+				ref: inputRef,
+				type: "text",
+				autoComplete: "off",
+				"data-1p-ignore": true,
+				"aria-label": label,
+				placeholder: t.filter,
+				value: query,
+				onChange: (e) => setQuery(e.target.value),
+				onKeyDown: (e) => {
+					if (e.key !== "Escape") e.stopPropagation();
+				},
+				className: "w-full h-7 px-2 rounded-md border border-(--theme-border) bg-(--theme-input-bg) text-[13px] text-(--theme-app) placeholder:text-(--theme-muted-text-color) focus:outline-none focus:border-(--theme-element)"
+			})
+		}), /* @__PURE__ */ jsx("div", {
+			className: "py-1",
+			children: rendered.length === 0 ? /* @__PURE__ */ jsx("div", {
+				className: "px-3 py-1.5 text-[13px] text-(--theme-muted-text-color)",
+				children: t.noOptions
+			}) : rendered
+		})]
+	});
+}
+/** Compact property pill with a dropdown of options. Options may carry leading
+* icons and group headers (e.g. Clusters vs Kubernetes). */
+function CreateModalSelect({ label, icon, value, options, onChange, disabled = false, disabledHint, tooltip }) {
+	const selected = options.find((o) => o.value === value);
+	const pillContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+		selected?.icon ?? icon,
+		selected ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+			className: "font-normal text-(--theme-muted-text-color)",
+			children: label
+		}), selected.label] }) : label,
+		/* @__PURE__ */ jsx(ChevronDownIcon, { className: "w-3 h-3 opacity-60" })
+	] });
+	if (disabled) return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"aria-disabled": "true",
+		"aria-label": label,
+		className: cx("inline-flex h-7 rounded-md border border-(--theme-border) text-xs font-medium", "opacity-50 cursor-not-allowed text-(--theme-muted-text-color)"),
+		children: /* @__PURE__ */ jsx(PillTooltip, {
+			content: disabledHint ?? tooltip,
+			className: "px-2",
+			children: pillContent
+		})
+	});
+	return /* @__PURE__ */ jsx(Menu, { children: ({ open }) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(MenuButton, {
+		"aria-label": label,
+		className: cx("inline-flex h-7 rounded-md border border-(--theme-border) text-xs font-medium transition-colors hover:bg-(--theme-muted-panel-bg)", selected ? "text-(--theme-app)" : "text-(--theme-muted-text-color)"),
+		children: /* @__PURE__ */ jsx(PillTooltip, {
+			content: tooltip,
+			className: "px-2",
+			children: pillContent
+		})
+	}), /* @__PURE__ */ jsx(CreateModalSelectPanel, {
+		open,
+		options,
+		label,
+		onChange
+	})] }) });
+}
+//#endregion
+export { CreateModalSwitch as a, ConfirmModal as c, primaryButtonClasses as d, Markdown as f, Callout as h, CreateModalSelect as i, dangerButtonClasses as l, CopyToClipboard as m, CreateModalAutocompleteField as n, CreateModalTextarea as o, CopyCodeBlock as p, CreateModalField as r, AddMenu as s, CreateModal as t, ghostButtonClasses as u };