@parallelworks/ui 0.77.0 → 0.79.0

package/dist/components/ConfirmModal.js

@@ -1,43 +1,74 @@
 import { useStrings } from "./Provider.js";
 import { Button } from "./Button.js";
+import { ErrorText } from "./Field.js";
 import { Modal } from "./Modal.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/ConfirmModal.tsx
+/** What the reader types or picks in, which takes focus ahead of the buttons. A checkbox or
+*  radio doesn't: a destructive dialog with one still opens on Cancel. Inputs a picker keeps
+*  out of the tab order, for its form value, aren't fields. */
+var FIELDS = [
+	"input:not([disabled]):not([type=\"hidden\"]):not([type=\"checkbox\"]):not([type=\"radio\"])",
+	"select:not([disabled])",
+	"textarea:not([disabled])",
+	"[role=\"combobox\"]:not([disabled]):not([aria-disabled=\"true\"])",
+	"[contenteditable=\"true\"]"
+].map((field) => `${field}:not([tabindex="-1"]):not([aria-hidden="true"])`).join(", ");
 /** Asks before an action: its title the question, its description what follows,
 *  and Cancel beside a confirm button named for the action. */
-function ConfirmModal({ open, onClose, title, description, children, confirmLabel, onConfirm, confirmDisabled = false, destructive = false, align = "top", cancelLabel, closeOnConfirm = true }) {
+function ConfirmModal({ open, onClose, title, description, children, confirmLabel, onConfirm, confirmDisabled = false, destructive = false, align = "top", cancelLabel, closeOnConfirm = true, initialFocus, pending: pendingProp = false, error, size = "md" }) {
 	const { common } = useStrings();
-	const [pending, setPending] = useState(false);
-	const running = useRef(false);
+	const [running, setRunning] = useState(false);
+	const fired = useRef(false);
+	const cancelButton = useRef(null);
+	const confirmButton = useRef(null);
+	const bodyElement = useRef(null);
+	useEffect(() => {
+		if (open) fired.current = false;
+	}, [open]);
+	const pending = running || pendingProp;
 	const runConfirm = async () => {
-		if (running.current) return;
-		running.current = true;
-		setPending(true);
+		if (fired.current || pendingProp) return;
+		fired.current = true;
+		setRunning(true);
+		let closing = false;
 		try {
 			await onConfirm();
-			if (closeOnConfirm) onClose();
+			closing = closeOnConfirm;
+			if (closing) onClose();
 		} finally {
-			running.current = false;
-			setPending(false);
+			fired.current = closing;
+			setRunning(false);
 		}
 	};
+	const body = children !== void 0 && children !== null && children !== false ? error ? /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-3",
+		children: [children, /* @__PURE__ */ jsx(ErrorText, { children: error })]
+	}) : children : error ? /* @__PURE__ */ jsx(ErrorText, { children: error }) : void 0;
 	return /* @__PURE__ */ jsx(Modal, {
 		alert: destructive,
 		open,
 		onClose,
 		align,
 		dismissible: !pending,
-		size: "md",
+		size,
 		title,
 		description,
-		footer: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Button, {
+		initialFocus: () => {
+			const button = (initialFocus === "cancel" || initialFocus !== "confirm" && destructive ? cancelButton : confirmButton).current;
+			if (initialFocus === "cancel" || initialFocus === "confirm") return button ?? true;
+			return bodyElement.current?.querySelector(FIELDS) ?? button ?? true;
+		},
+		footer: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Button, {
+			ref: cancelButton,
 			variant: "ghost",
 			size: "sm",
 			onClick: onClose,
 			disabled: pending,
 			children: cancelLabel ?? common.cancel
 		}), /* @__PURE__ */ jsx(Button, {
+			ref: confirmButton,
 			variant: destructive ? "danger" : "primary",
 			size: "sm",
 			onClick: runConfirm,
@@ -45,8 +76,62 @@ function ConfirmModal({ open, onClose, title, description, children, confirmLabe
 			loading: pending,
 			children: confirmLabel
 		})] }),
-		children
+		children: body !== void 0 && /* @__PURE__ */ jsx("div", {
+			ref: bodyElement,
+			className: "contents",
+			children: body
+		})
 	});
 }
+/** Asks from anywhere, such as a menu row, without keeping a dialog's state by hand:
+*  `const { confirm, dialog } = useConfirm()`, render `dialog` once, then
+*  `confirm({ title, confirmLabel, destructive, onConfirm })`. It resolves true once
+*  confirmed and `onConfirm` has settled, and false when the reader cancels. */
+function useConfirm() {
+	const [request, setRequest] = useState(null);
+	const [open, setOpen] = useState(false);
+	const [error, setError] = useState(void 0);
+	const settle = useRef(null);
+	const finish = useCallback((confirmed) => {
+		const resolve = settle.current;
+		settle.current = null;
+		resolve?.(confirmed);
+	}, []);
+	const confirm = useCallback((next) => {
+		finish(false);
+		setRequest(next);
+		setError(void 0);
+		setOpen(true);
+		return new Promise((resolve) => {
+			settle.current = resolve;
+		});
+	}, [finish]);
+	const close = useCallback(() => {
+		setOpen(false);
+		finish(false);
+	}, [finish]);
+	return {
+		confirm,
+		dialog: request && /* @__PURE__ */ jsx(ConfirmModal, {
+			...request,
+			open,
+			onClose: close,
+			error,
+			closeOnConfirm: false,
+			onConfirm: async () => {
+				if (!settle.current) return;
+				setError(void 0);
+				try {
+					await request.onConfirm();
+				} catch (failure) {
+					setError(request.errorMessage?.(failure));
+					return;
+				}
+				finish(true);
+				if (request.closeOnConfirm !== false) setOpen(false);
+			}
+		})
+	};
+}
 //#endregion
-export { ConfirmModal };
+export { ConfirmModal, useConfirm };

package/dist/components/ContextMenu.d.ts

@@ -1,17 +1,44 @@
+import { type ReactNode } from 'react';
 import { type FloatingAnchor } from './floating.js';
+import { type MenuSize } from './Menu.js';
 import { type MenuEntry, type MenuSearch } from './MenuEntries.js';
 export interface OpenMenuOptions {
     search?: MenuSearch | undefined;
     /** Called once the menu closes, or another menu replaces it. */
     onClose?: (() => void) | undefined;
+    /** As `MenuPopup`'s: `sm` rows for a compact surface. */
+    size?: MenuSize | undefined;
+    /** As `MenuPopup`'s: classes on the menu and its submenus, such as a terminal's colors. */
+    themeClassName?: string | undefined;
 }
-export type OpenMenu = (at: FloatingAnchor, items: MenuEntry[], options?: OpenMenuOptions) => void;
+/** Where a menu opens: an element, such as the button that opened it, or a pointer event,
+ *  such as a right-click. An event with Shift held is left to the browser, whose own menu
+ *  then shows; any other has its default prevented. */
+export type MenuOpener = FloatingAnchor & {
+    shiftKey?: boolean;
+    preventDefault?: () => void;
+};
+/** Opens a menu of `items` at `at`. Returns false when it opened none: no items, Shift held,
+ *  or `at` is the element whose menu is open, which it closes instead. */
+export type OpenMenu = (at: MenuOpener, items: MenuEntry[], options?: OpenMenuOptions) => boolean | void;
 /**
  * One menu that any number of rows, buttons or a canvas open with their own
  * items, so a long list holds a single menu rather than one per row. Render
- * `contextMenu` once.
+ * `contextMenu` once. Most hosts want the one `UIProvider` mounts, through
+ * `useOpenMenu`; this is for a menu scoped to one region.
  */
 export declare function useContextMenu(): {
     openMenu: OpenMenu;
     contextMenu: import("react").JSX.Element | null;
+    openedBy: Element | null;
 };
+/** The one menu every row, button and canvas below it opens through `useOpenMenu`, so none
+ *  renders a menu of its own. `UIProvider` mounts it; nothing else needs to. */
+export declare function ContextMenuProvider({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** Opens the app's one shared menu: `openMenu(e, items)` from a right-click, or
+ *  `openMenu(button, items)` under a button, which a second press closes. */
+export declare function useOpenMenu(): OpenMenu;
+/** The element the shared menu is open under, so its button can say it's expanded. */
+export declare function useMenuOpenedBy(): Element | null;

package/dist/components/ContextMenu.js

@@ -1,38 +1,60 @@
 import { toPositionerAnchor } from "./floating.js";
 import { MenuPopup } from "./Menu.js";
+import { isDev } from "../dev.js";
 import { MenuEntries, MenuFilter } from "./MenuEntries.js";
 import { Menu } from "@base-ui/react/menu";
-import { jsx } from "react/jsx-runtime";
-import { useCallback, useRef, useState } from "react";
+import { createContext, use, useCallback, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/ContextMenu.tsx
 /**
 * One menu that any number of rows, buttons or a canvas open with their own
 * items, so a long list holds a single menu rather than one per row. Render
-* `contextMenu` once.
+* `contextMenu` once. Most hosts want the one `UIProvider` mounts, through
+* `useOpenMenu`; this is for a menu scoped to one region.
 */
 function useContextMenu() {
 	const [opened, setOpened] = useState(null);
 	const [open, setOpen] = useState(false);
 	const owner = useRef(null);
+	const current = useRef(null);
 	const release = useCallback(() => {
 		const was = owner.current;
 		owner.current = null;
 		was?.onClose?.();
 	}, []);
 	const openMenu = useCallback((at, items, options) => {
-		if (items.length === 0) return;
+		const element = at instanceof Element ? at : null;
+		if (!element && at.shiftKey || items.length === 0) return false;
+		if (element && current.current?.element === element) {
+			current.current = null;
+			setOpen(false);
+			return false;
+		}
+		if (!element) at.preventDefault?.();
 		release();
 		const next = {
 			...options,
 			anchor: toPositionerAnchor(at),
+			element,
 			items
 		};
 		owner.current = next;
+		current.current = next;
 		setOpened(next);
 		setOpen(true);
+		return true;
 	}, [release]);
-	const onOpenChange = useCallback((next) => {
-		if (!next) setOpen(false);
+	const onOpenChange = useCallback((next, details) => {
+		if (next) return;
+		const element = current.current?.element;
+		const event = details.event;
+		const target = details.reason === "focus-out" && event instanceof FocusEvent ? event.relatedTarget : event?.target;
+		if ((details.reason === "outside-press" || details.reason === "focus-out") && element && target instanceof Node && element.contains(target)) {
+			details.cancel();
+			return;
+		}
+		current.current = null;
+		setOpen(false);
 	}, []);
 	const onOpenChangeComplete = useCallback((next) => {
 		if (!next) release();
@@ -48,6 +70,8 @@ function useContextMenu() {
 				modal: false,
 				children: /* @__PURE__ */ jsx(MenuPopup, {
 					anchor: opened.anchor,
+					size: opened.size,
+					themeClassName: opened.themeClassName,
 					children: /* @__PURE__ */ jsx(MenuEntries, {
 						entries: opened.items,
 						search: opened.search,
@@ -55,8 +79,36 @@ function useContextMenu() {
 					})
 				})
 			})
-		}, opened.search ? "search" : "plain")
+		}, opened.search ? "search" : "plain"),
+		openedBy: open ? opened?.element ?? null : null
 	};
 }
+var OpenMenuContext = createContext(null);
+var OpenedByContext = createContext(null);
+/** The one menu every row, button and canvas below it opens through `useOpenMenu`, so none
+*  renders a menu of its own. `UIProvider` mounts it; nothing else needs to. */
+function ContextMenuProvider({ children }) {
+	const { openMenu, contextMenu, openedBy } = useContextMenu();
+	return /* @__PURE__ */ jsx(OpenMenuContext, {
+		value: openMenu,
+		children: /* @__PURE__ */ jsxs(OpenedByContext, {
+			value: openedBy,
+			children: [children, contextMenu]
+		})
+	});
+}
+var warnNoProvider = () => {
+	if (isDev()) console.warn("useOpenMenu: no ContextMenuProvider or UIProvider above, so no menu opens.");
+	return false;
+};
+/** Opens the app's one shared menu: `openMenu(e, items)` from a right-click, or
+*  `openMenu(button, items)` under a button, which a second press closes. */
+function useOpenMenu() {
+	return use(OpenMenuContext) ?? warnNoProvider;
+}
+/** The element the shared menu is open under, so its button can say it's expanded. */
+function useMenuOpenedBy() {
+	return use(OpenedByContext);
+}
 //#endregion
-export { useContextMenu };
+export { ContextMenuProvider, useContextMenu, useMenuOpenedBy, useOpenMenu };

package/dist/components/CopyButton.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentPropsWithRef, ReactNode } from 'react';
+import { type ComponentPropsWithRef, type ReactNode } from 'react';
 import { type ButtonSize, type ButtonVariant } from './buttonClasses.js';
 export interface CopyButtonProps extends Omit<ComponentPropsWithRef<'button'>, 'onClick' | 'children' | 'type'> {
     variant?: ButtonVariant | undefined;
@@ -14,25 +14,38 @@ export interface CopyButtonProps extends Omit<ComponentPropsWithRef<'button'>, '
     /** Shows "Copy" (then "Copied") beside the icon, for a copy that is a toolbar's
      *  command rather than a detail beside a value. */
     showLabel?: boolean | undefined;
+    /** A glyph in place of the copy icon, such as a branch for a branch name; the check
+     *  still shows once it has copied. */
+    icon?: ReactNode | undefined;
+    /** The whole success toast, in place of "Copied …", as `useCopy` takes it. */
+    success?: string | undefined;
+    /** The whole failure toast, such as one that says where else to copy it from. */
+    failure?: string | undefined;
 }
 /** The one copy control: a button that copies its text, turns into a check for a
  *  moment, and says so in a toast, which screen readers announce. */
-export declare function CopyButton({ text, label, quiet, showLabel, variant, size, ...props }: CopyButtonProps): import("react").JSX.Element;
+export declare function CopyButton({ text, label, quiet, showLabel, variant, size, icon: glyph, success, failure, ...props }: CopyButtonProps): import("react").JSX.Element;
 export interface CopyCodeBlockProps {
     /** What the button copies: the code as the reader would type it. */
     text: string;
     /** Names what it copies, as CopyButton's `label` does, such as "install command". */
     label?: string | undefined;
-    /** The code as shown, which may be masked or highlighted. */
-    children: ReactNode;
-    /** Adds an eye button that shows or hides the value; the caller masks `children`
-     *  while `revealed` is false. */
+    /** The code as shown, such as highlighted; `text` by default. A secret's own children
+     *  must mask it while it is hidden. */
+    children?: ReactNode;
+    /** Adds an eye button that shows or hides the value. Without `children` the block masks
+     *  the value itself, with dots that don't give away its length. */
     secret?: boolean | undefined;
+    /** Whether a secret shows. Leave it out for the block to keep its own state, hidden first. */
     revealed?: boolean | undefined;
+    defaultRevealed?: boolean | undefined;
     onRevealedChange?: ((revealed: boolean) => void) | undefined;
+    /** Breaks a long value across lines instead of scrolling it, such as a token. */
+    wrap?: boolean | undefined;
     className?: string | undefined;
 }
 /** A block of code, such as a command to run, with a button that copies it. The
  *  buttons show while the pointer is over the block or focus is in it, and always
- *  where there is no hover to reveal them. */
-export declare function CopyCodeBlock({ text, label, children, secret, revealed, onRevealedChange, className, }: CopyCodeBlockProps): import("react").JSX.Element;
+ *  where there is no hover to reveal them. With `secret` it holds a value shown once,
+ *  such as a new API key: masked until the eye shows it, and copied either way. */
+export declare function CopyCodeBlock({ text, label, children, secret, revealed: revealedProp, defaultRevealed, onRevealedChange, wrap, className, }: CopyCodeBlockProps): import("react").JSX.Element;

package/dist/components/CopyButton.js

@@ -4,18 +4,21 @@ import { CheckIcon, CopyIcon, EyeIcon, EyeOffIcon } from "../icons.js";
 import { useStrings } from "./Provider.js";
 import { useCopy } from "./useCopy.js";
 import { IconButton } from "./IconButton.js";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/CopyButton.tsx
 /** The one copy control: a button that copies its text, turns into a check for a
 *  moment, and says so in a toast, which screen readers announce. */
-function CopyButton({ text, label, quiet = false, showLabel = false, variant = showLabel ? "outline" : "ghost", size = "sm", ...props }) {
+function CopyButton({ text, label, quiet = false, showLabel = false, variant = showLabel ? "outline" : "ghost", size = "sm", icon: glyph, success, failure, ...props }) {
 	const { common: t } = useStrings();
 	const { copy, copied } = useCopy();
 	const name = label ? copied ? t.copiedThing(label) : t.copyThing(label) : copied ? t.copied : t.copy;
-	const icon = copied ? /* @__PURE__ */ jsx(CheckIcon, { className: "text-(--theme-success)" }) : /* @__PURE__ */ jsx(CopyIcon, {});
+	const icon = copied ? /* @__PURE__ */ jsx(CheckIcon, { className: "text-(--theme-success)" }) : glyph ?? /* @__PURE__ */ jsx(CopyIcon, {});
 	const onClick = () => void copy(typeof text === "function" ? text() : text, {
 		label,
-		quiet
+		quiet,
+		success,
+		failure
 	});
 	if (showLabel) return /* @__PURE__ */ jsxs("button", {
 		type: "button",
@@ -37,24 +40,41 @@ function CopyButton({ text, label, quiet = false, showLabel = false, variant = s
 		onClick
 	});
 }
+var MASK = "•".repeat(24);
 /** A block of code, such as a command to run, with a button that copies it. The
 *  buttons show while the pointer is over the block or focus is in it, and always
-*  where there is no hover to reveal them. */
-function CopyCodeBlock({ text, label, children, secret = false, revealed = false, onRevealedChange, className }) {
+*  where there is no hover to reveal them. With `secret` it holds a value shown once,
+*  such as a new API key: masked until the eye shows it, and copied either way. */
+function CopyCodeBlock({ text, label, children, secret = false, revealed: revealedProp, defaultRevealed = false, onRevealedChange, wrap = false, className }) {
 	const { common: t } = useStrings();
+	const [ownRevealed, setOwnRevealed] = useState(defaultRevealed);
+	const revealed = revealedProp ?? ownRevealed;
+	const setRevealed = (next) => {
+		setOwnRevealed(next);
+		onRevealedChange?.(next);
+	};
 	const reveal = "opacity-0 group-hover/code:opacity-100 group-focus-within/code:opacity-100 pointer-coarse:opacity-100";
+	let shown = children ?? text;
+	if (secret && !revealed && children === void 0) shown = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		className: "whitespace-nowrap",
+		children: MASK
+	}), /* @__PURE__ */ jsx("span", {
+		className: "sr-only",
+		children: t.hiddenValue
+	})] });
 	return /* @__PURE__ */ jsxs("div", {
 		className: cx("group/code relative", className),
 		children: [/* @__PURE__ */ jsx("pre", {
-			className: cx("m-0 overflow-x-auto rounded-lg border border-(--theme-border) bg-(--theme-muted-panel-bg) p-4 text-left font-mono text-sm text-(--theme-app)", secret ? "pr-20" : "pr-12"),
-			children
+			className: cx("m-0 rounded-lg border border-(--theme-border) bg-(--theme-muted-panel-bg) p-4 text-left font-mono text-sm text-(--theme-app)", wrap ? "whitespace-pre-wrap break-all" : "overflow-x-auto", secret ? "pr-20" : "pr-12"),
+			children: shown
 		}), /* @__PURE__ */ jsxs("div", {
 			className: "absolute top-2 right-2 flex items-center gap-1",
 			children: [secret && /* @__PURE__ */ jsx(IconButton, {
 				label: t.showValue,
 				icon: revealed ? /* @__PURE__ */ jsx(EyeIcon, {}) : /* @__PURE__ */ jsx(EyeOffIcon, {}),
 				pressed: revealed,
-				onClick: () => onRevealedChange?.(!revealed),
+				onClick: () => setRevealed(!revealed),
 				className: cx("bg-(--theme-muted-panel-bg)", reveal)
 			}), /* @__PURE__ */ jsx(CopyButton, {
 				text,

package/dist/components/CreateModal.d.ts

@@ -1,6 +1,7 @@
 import type { ReactNode } from 'react';
 import { type ComboboxItems } from './comboboxItems.js';
-import type { MenuEntry } from './MenuEntries.js';
+import type { MenuEntry, MenuSearch } from './MenuEntries.js';
+import { type ModalSize } from './Modal.js';
 interface CreateModalProps {
     open: boolean;
     onClose: () => void;
@@ -8,11 +9,16 @@ interface CreateModalProps {
     typeLabel: string;
     /** Makes the type chip a dropdown to switch between sibling form types. */
     typeMenu?: MenuEntry[] | undefined;
+    /** A search atop the type chip's menu, for a long list such as many teams. */
+    typeMenuSearch?: MenuSearch | undefined;
     namePlaceholder: string;
     hideName?: boolean;
     initialName?: string | undefined;
     showDescription?: boolean;
     descriptionPlaceholder?: string;
+    /** Takes the description's place, such as a rich text editor. Typing in it counts as
+     *  unsaved input, as the description's does. */
+    descriptionField?: ReactNode;
     submitLabel?: string;
     submittingLabel?: string;
     validateName?: ((name: string) => string | null) | undefined;
@@ -34,11 +40,21 @@ interface CreateModalProps {
     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>;
+    /** Muted text at the footer's start, such as which keys submit. `error` takes its place. */
+    footerHint?: ReactNode;
+    /** Why the last submit failed, at the footer's start, read out as it appears. */
+    error?: ReactNode;
+    /** Its width, as `Modal`'s: `xl` for a long body such as a rich text editor. It narrows to
+     *  fit a small window. */
+    size?: ModalSize | undefined;
+    /** Resolves true to close the modal, false to keep it open (e.g. on error). `modifier` is
+     *  true when submitted with ⌘/Ctrl+Enter, so a host can create and then open what it made. */
+    onSubmit: (name: string, description: string, favorite: boolean, how: {
+        modifier: 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;
+export declare function CreateModal({ open, onClose, typeIcon, typeLabel, typeMenu, typeMenuSearch, namePlaceholder, hideName, initialName, showDescription, descriptionPlaceholder, descriptionField, submitLabel, submittingLabel, validateName, sanitizeName, nameHint, children, properties, advanced, submitDisabled, hideSubmit, nameOptional, onNameChange, dirty, showFavorite, footerHint, error, size, onSubmit, }: CreateModalProps): import("react").JSX.Element;
 /** Compact property pill with an on/off switch. */
 export declare function CreateModalSwitch({ label, checked, onCheckedChange, tooltip, }: {
     label: string;

package/dist/components/CreateModal.js

@@ -5,17 +5,18 @@ import { Tooltip } from "./Tooltip.js";
 import { useStrings } from "./Provider.js";
 import { ActionMenu } from "./ActionMenu.js";
 import { Button } from "./Button.js";
+import { ErrorText } from "./Field.js";
 import { comboboxLeaves } from "./comboboxItems.js";
 import { Combobox } from "./Combobox.js";
 import { Modal } from "./Modal.js";
 import { Disclosure } from "./Disclosure.js";
 import { Switch } from "./Switch.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useId, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Toggle } from "@base-ui/react/toggle";
 //#region src/components/CreateModal.tsx
 /** 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 }) {
+function CreateModal({ open, onClose, typeIcon, typeLabel, typeMenu, typeMenuSearch, namePlaceholder, hideName = false, initialName, showDescription = true, descriptionPlaceholder, descriptionField, submitLabel, submittingLabel, validateName, sanitizeName, nameHint, children, properties, advanced, submitDisabled = false, hideSubmit = false, nameOptional = false, onNameChange, dirty = false, showFavorite = false, footerHint, error, size = "lg", onSubmit }) {
 	const t = useStrings().modal;
 	const { common } = useStrings();
 	const submitText = submitLabel ?? common.create;
@@ -54,7 +55,7 @@ function CreateModal({ open, onClose, typeIcon, typeLabel, typeMenu, namePlaceho
 		setNameFlash(false);
 		requestAnimationFrame(() => setNameFlash(true));
 	};
-	const handleSubmit = async () => {
+	const handleSubmit = async (modifier = false) => {
 		if (!canSubmit) {
 			if (!hideName && !submitting && (!name.trim() || nameError)) flashName();
 			return;
@@ -62,7 +63,7 @@ function CreateModal({ open, onClose, typeIcon, typeLabel, typeMenu, namePlaceho
 		setSubmitting(true);
 		let close = false;
 		try {
-			close = await onSubmit(name.trim(), description.trim(), favorite);
+			close = await onSubmit(name.trim(), description.trim(), favorite, { modifier });
 		} catch (error) {
 			console.error(error);
 		} finally {
@@ -74,19 +75,19 @@ function CreateModal({ open, onClose, typeIcon, typeLabel, typeMenu, namePlaceho
 		open,
 		onClose,
 		"aria-label": `${submitText}: ${typeLabel}`,
-		size: "lg",
+		size,
 		dismissible: !isDirty,
 		initialFocus: () => nameRef.current ?? true,
 		onKeyDown: (e) => {
-			if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) handleSubmit();
+			if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) handleSubmit(true);
 		},
 		onMouseDown: (e) => {
 			if (e.target instanceof Element && !e.target.closest("input, textarea, button, a, select, label, code, pre, .select-all")) e.preventDefault();
 		},
-		footer: /* @__PURE__ */ jsxs(Fragment, { children: [
-			showFavorite && /* @__PURE__ */ jsx("div", {
-				className: "me-auto",
-				children: /* @__PURE__ */ jsx(Tooltip, {
+		footer: /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			(showFavorite || footerHint || error) && /* @__PURE__ */ jsxs("div", {
+				className: "me-auto flex min-w-0 items-center gap-3",
+				children: [showFavorite && /* @__PURE__ */ jsx(Tooltip, {
 					content: favorite ? t.favoriteHintOn : t.favoriteHintOff,
 					children: /* @__PURE__ */ jsxs(Toggle, {
 						pressed: favorite,
@@ -98,7 +99,10 @@ function CreateModal({ open, onClose, typeIcon, typeLabel, typeMenu, namePlaceho
 						}),
 						children: [favorite ? /* @__PURE__ */ jsx(FavoriteIcon, { className: "text-(--theme-favorite)" }) : /* @__PURE__ */ jsx(FavoriteOutlineIcon, {}), favorite ? t.favorited : t.favorite]
 					})
-				})
+				}), error ? /* @__PURE__ */ jsx(ErrorText, { children: error }) : footerHint && /* @__PURE__ */ jsx("p", {
+					className: "m-0 min-w-0 text-xs text-(--theme-muted-text-color)",
+					children: footerHint
+				})]
 			}),
 			/* @__PURE__ */ jsx(Button, {
 				variant: "ghost",
@@ -109,7 +113,7 @@ function CreateModal({ open, onClose, typeIcon, typeLabel, typeMenu, namePlaceho
 			!hideSubmit && /* @__PURE__ */ jsx(Button, {
 				variant: "primary",
 				size: "sm",
-				onClick: handleSubmit,
+				onClick: () => handleSubmit(false),
 				"aria-disabled": !canSubmit,
 				loading: submitting,
 				children: submitting ? submittingText : submitText
@@ -117,11 +121,15 @@ function CreateModal({ open, onClose, typeIcon, typeLabel, typeMenu, namePlaceho
 		] }),
 		children: /* @__PURE__ */ jsxs("div", {
 			onChangeCapture: () => setInteracted(true),
+			onInputCapture: (e) => {
+				if (e.target instanceof HTMLElement && e.target.isContentEditable) setInteracted(true);
+			},
 			children: [
 				/* @__PURE__ */ jsxs("div", { children: [
 					typeMenu && typeMenu.length > 0 ? /* @__PURE__ */ jsxs(ActionMenu, {
 						items: typeMenu,
 						label: typeLabel,
+						search: typeMenuSearch,
 						triggerClassName: "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,
@@ -132,7 +140,7 @@ function CreateModal({ open, onClose, typeIcon, typeLabel, typeMenu, namePlaceho
 						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: [
+					hideName ? /* @__PURE__ */ jsx("div", { className: "mt-3" }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
 						/* @__PURE__ */ jsx("input", {
 							ref: nameRef,
 							type: "text",
@@ -151,7 +159,7 @@ function CreateModal({ open, onClose, typeIcon, typeLabel, typeMenu, namePlaceho
 								if (e.key === "Enter" && !e.nativeEvent.isComposing && !e.metaKey && !e.ctrlKey) {
 									e.preventDefault();
 									e.stopPropagation();
-									handleSubmit();
+									handleSubmit(false);
 								}
 							},
 							placeholder: namePlaceholder,
@@ -172,7 +180,10 @@ function CreateModal({ open, onClose, typeIcon, typeLabel, typeMenu, namePlaceho
 							className: "mt-1 text-xs text-(--theme-muted-text-color)",
 							children: hint
 						}),
-						showDescription ? /* @__PURE__ */ jsx("textarea", {
+						showDescription && descriptionField ? /* @__PURE__ */ jsx("div", {
+							className: "mt-1.5",
+							children: descriptionField
+						}) : showDescription ? /* @__PURE__ */ jsx("textarea", {
 							autoComplete: "off",
 							"data-1p-ignore": true,
 							value: description,
@@ -232,9 +243,9 @@ function CreateModalSelect({ label, icon, value, items, onValueChange, disabled
 		label: item
 	} : item).find((item) => item.value === value);
 	const selectedLabel = selected?.label ?? (value || void 0);
-	const pillContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+	const pillContent = /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		selected?.icon ?? icon,
-		selectedLabel ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+		selectedLabel ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
 			className: "font-normal text-(--theme-muted-text-color)",
 			children: label
 		}), selectedLabel] }) : label,