@uipath/apollo-wind 2.79.2 → 2.80.0

package/dist/components/ui/quick-form-field/quick-form-field.cjs

@@ -31,20 +31,29 @@ const external_lucide_react_namespaceObject = require("lucide-react");
 const external_react_namespaceObject = require("react");
 const external_calendar_cjs_namespaceObject = require("../calendar.cjs");
 const external_datetime_picker_cjs_namespaceObject = require("../datetime-picker.cjs");
+const external_editable_text_cjs_namespaceObject = require("../editable-text.cjs");
 const external_file_upload_cjs_namespaceObject = require("../file-upload.cjs");
 const external_input_group_cjs_namespaceObject = require("../input-group.cjs");
+const external_label_cjs_namespaceObject = require("../label.cjs");
 const external_multi_select_cjs_namespaceObject = require("../multi-select.cjs");
 const external_popover_cjs_namespaceObject = require("../popover.cjs");
+const external_prompt_value_control_cjs_namespaceObject = require("../prompt-value-control.cjs");
 const external_select_cjs_namespaceObject = require("../select.cjs");
 const external_switch_cjs_namespaceObject = require("../switch.cjs");
+const external_variable_value_control_cjs_namespaceObject = require("../variable-value-control.cjs");
 const index_cjs_namespaceObject = require("../../../lib/index.cjs");
 const date_value_cjs_namespaceObject = require("../../../lib/date-value.cjs");
 const field_menu_cjs_namespaceObject = require("../field-addons/field-menu.cjs");
+const value_mode_switch_dialog_cjs_namespaceObject = require("../field-addons/value-mode-switch-dialog.cjs");
 const field_header_cjs_namespaceObject = require("./components/field-header.cjs");
 const lock_toggle_button_cjs_namespaceObject = require("./components/lock-toggle-button.cjs");
 const external_types_cjs_namespaceObject = require("./types.cjs");
 const external_utils_cjs_namespaceObject = require("./utils.cjs");
-function QuickFormField({ value = '', onValueChange, onValueBlur, locked = true, onLockedChange, showLock = true, disabled = false, leadingAddon, trailingAddon, more, mode = 'literal', onModeChange, renderExpressionEditor, renderModeControl, fieldType = 'string', fieldTypes, onFieldTypeChange, required, onRequiredChange, label, strings: stringOverrides, placeholder, error, errorId, belowValue, fileUploadAriaLabel, headerActions, compact, showFieldActions = true, options = external_utils_cjs_namespaceObject.DEFAULT_SELECT_OPTIONS, onGenerateWithAi, onInsertVariable, variables = [], id, className }) {
+const DEFAULT_VALUE_MODES = [
+    'literal',
+    'expression'
+];
+function QuickFormField({ value = '', onValueChange, onValueBlur, locked = true, onLockedChange, showLock = true, disabled = false, leadingAddon, trailingAddon, more, mode = 'literal', onModeChange, valueModes = DEFAULT_VALUE_MODES, confirmModeChange, renderExpressionEditor, renderModeControl, fieldType = 'string', fieldTypes, onFieldTypeChange, required, onRequiredChange, label, onLabelChange, isEditingLabel, onIsEditingLabelChange, labelAddon, tooltip, strings: stringOverrides, placeholder, error, errorId, belowValue, fileUploadAriaLabel, headerActions, compact, showFieldActions = true, options = external_utils_cjs_namespaceObject.DEFAULT_SELECT_OPTIONS, onGenerateWithAi, onInsertVariable, variables = [], id, className }) {
     const strings = (0, external_react_namespaceObject.useMemo)(()=>({
             ...external_types_cjs_namespaceObject.DEFAULT_QUICK_FORM_FIELD_STRINGS,
             ...stringOverrides
@@ -55,8 +64,17 @@ function QuickFormField({ value = '', onValueChange, onValueBlur, locked = true,
     const valueInputRef = (0, external_react_namespaceObject.useRef)(null);
     const committedRef = (0, external_react_namespaceObject.useRef)(value);
     const caretRef = (0, external_react_namespaceObject.useRef)(null);
+    const modeControlRef = (0, external_react_namespaceObject.useRef)(null);
+    const setModeControl = (0, external_react_namespaceObject.useCallback)((el)=>{
+        modeControlRef.current = el;
+    }, []);
     const [datePopoverOpen, setDatePopoverOpen] = (0, external_react_namespaceObject.useState)(false);
     const [selectOpen, setSelectOpen] = (0, external_react_namespaceObject.useState)(false);
+    const [labelDraft, setLabelDraft] = (0, external_react_namespaceObject.useState)(null);
+    const [pendingSwitch, setPendingSwitch] = (0, external_react_namespaceObject.useState)();
+    const variablePicker = (0, external_react_namespaceObject.useMemo)(()=>(0, external_utils_cjs_namespaceObject.toVariablePickerSource)(variables), [
+        variables
+    ]);
     const fieldId = id ?? generatedId;
     const validationId = errorId ?? `${fieldId}-error`;
     const typeMeta = external_types_cjs_namespaceObject.FIELD_TYPE_META[fieldType];
@@ -70,6 +88,7 @@ function QuickFormField({ value = '', onValueChange, onValueBlur, locked = true,
                 id: 'clear',
                 label: strings.clearValue,
                 icon: external_lucide_react_namespaceObject.Trash2,
+                destructive: true,
                 onSelect: more.onClear
             }
         ] : [],
@@ -82,20 +101,44 @@ function QuickFormField({ value = '', onValueChange, onValueBlur, locked = true,
             }
         ] : []
     ];
+    const valueModeStrings = {
+        ...strings.valueModes,
+        literalTitle: strings.literalLabels[fieldType] ?? typeMeta.fixedLabel,
+        expressionTitle: strings.expressionLabel,
+        expressionDescription: strings.expressionDescription,
+        fieldActions: strings.moreActionsAriaLabel
+    };
+    const focusControlOnClose = (0, external_react_namespaceObject.useRef)(false);
+    const keepControlFocus = (event)=>{
+        if (!focusControlOnClose.current) return;
+        focusControlOnClose.current = false;
+        event.preventDefault();
+        (valueInputRef.current ?? modeControlRef.current)?.focus();
+    };
+    const selectMode = (next)=>{
+        if (!onModeChange) return;
+        const confirm = next !== mode && confirmModeChange?.(mode, next);
+        if (confirm) return void setPendingSwitch({
+            ...true === confirm ? {} : confirm,
+            to: next
+        });
+        focusControlOnClose.current = next !== mode;
+        onModeChange(next);
+    };
+    const switchable = !!onModeChange && valueModes.length > 1;
     const builtInMenu = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(field_menu_cjs_namespaceObject.FieldMenu, {
         mode: mode,
-        onSelect: (next)=>onModeChange?.(next),
-        modesDisabled: !onModeChange && menuActions.length > 0,
-        disabled: disabled || !onModeChange && 0 === menuActions.length,
+        modes: [
+            ...valueModes
+        ],
+        onSelect: selectMode,
+        modesDisabled: !switchable && menuActions.length > 0,
+        disabled: disabled || !switchable && 0 === menuActions.length,
         actions: menuActions,
         triggerLabel: strings.valueModeAriaLabel,
         literalDescription: strings.literalDescriptions[fieldType] ?? typeMeta.fixedDescription,
-        strings: {
-            literalTitle: strings.literalLabels[fieldType] ?? typeMeta.fixedLabel,
-            expressionTitle: strings.expressionLabel,
-            expressionDescription: strings.expressionDescription,
-            fieldActions: strings.moreActionsAriaLabel
-        }
+        strings: valueModeStrings,
+        onCloseAutoFocus: keepControlFocus
     });
     const controlProps = {
         id: fieldId,
@@ -112,11 +155,14 @@ function QuickFormField({ value = '', onValueChange, onValueBlur, locked = true,
         'data-slot': 'input-group-control'
     };
     const modeControl = renderModeControl?.(mode, controlProps) ?? null;
+    const builtInVariable = null === modeControl && 'variable' === mode;
+    const builtInPrompt = null === modeControl && 'prompt' === mode;
     const modeOnMount = (0, external_react_namespaceObject.useRef)(mode);
     (0, external_react_namespaceObject.useEffect)(()=>{
         if (modeOnMount.current === mode) return;
         modeOnMount.current = mode;
-        valueInputRef.current?.focus();
+        const frame = requestAnimationFrame(()=>(valueInputRef.current ?? modeControlRef.current)?.focus());
+        return ()=>cancelAnimationFrame(frame);
     }, [
         mode
     ]);
@@ -279,6 +325,11 @@ function QuickFormField({ value = '', onValueChange, onValueBlur, locked = true,
         selected: (0, external_utils_cjs_namespaceObject.parseListValue)(value),
         onChange: (selected)=>editableOnValueChange?.(JSON.stringify(selected)),
         placeholder: strings.selectOptions,
+        searchPlaceholder: strings.multiSelectSearchPlaceholder,
+        emptyMessage: strings.multiSelectEmpty,
+        clearAllText: strings.multiSelectClearAll,
+        strings: strings.multiSelect,
+        overflow: "collapse",
         disabled: !editableOnValueChange,
         onBlur: onValueBlur
     }) : 'textarea' === fieldType ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_input_group_cjs_namespaceObject.InputGroupTextarea, {
@@ -292,11 +343,60 @@ function QuickFormField({ value = '', onValueChange, onValueBlur, locked = true,
         type: 'integer' === fieldType || 'double' === fieldType ? 'number' : 'text',
         step: 'double' === fieldType ? 'any' : void 0
     });
+    const canPickVariable = !disabled && (!!onInsertVariable || !!onValueChange);
+    const variableControl = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_variable_value_control_cjs_namespaceObject.VariableValueControl, {
+        id: fieldId,
+        value: value,
+        onChange: (reference, item)=>onInsertVariable && item ? onInsertVariable(variablePicker.resolve(item), {
+                value,
+                caret: null
+            }) : onValueChange?.(reference),
+        onBlur: onValueBlur,
+        inputRef: setModeControl,
+        variables: variablePicker.items,
+        disabled: !canPickVariable,
+        placeholder: placeholder,
+        strings: strings.valueModes,
+        "aria-describedby": controlProps['aria-describedby']
+    });
+    const promptControl = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_prompt_value_control_cjs_namespaceObject.PromptValueControl, {
+        id: fieldId,
+        value: value,
+        onChange: (next)=>editableOnValueChange?.(next),
+        onBlur: onValueBlur,
+        inputRef: setModeControl,
+        disabled: !editableOnValueChange,
+        placeholder: placeholder,
+        strings: strings.valueModes,
+        "aria-describedby": controlProps['aria-describedby']
+    });
+    const editableLabel = 'string' == typeof label && onLabelChange ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("span", {
+        className: (0, index_cjs_namespaceObject.cn)('flex min-w-0 items-center', field_header_cjs_namespaceObject.GROW_WHILE_EDITING),
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_editable_text_cjs_namespaceObject.EditableText, {
+                size: "label",
+                value: labelDraft ?? label,
+                placeholder: strings.labelPlaceholder,
+                "aria-label": strings.labelAriaLabel,
+                editing: isEditingLabel,
+                onEditingChange: onIsEditingLabelChange,
+                disabled: disabled,
+                onChange: (next)=>setLabelDraft(next === label ? null : next),
+                onSubmit: (next)=>{
+                    setLabelDraft(null);
+                    onLabelChange(next);
+                }
+            }),
+            required && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_label_cjs_namespaceObject.RequiredIndicator, {})
+        ]
+    }) : void 0;
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
         className: (0, index_cjs_namespaceObject.cn)('@container group flex flex-col gap-1.5 [&>[data-slot=form-field-error]]:mt-0', className),
         children: [
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(field_header_cjs_namespaceObject.FieldHeader, {
-                label: label,
+                label: editableLabel ?? label,
+                labelAddon: labelAddon,
+                tooltip: tooltip,
                 fieldId: fieldId,
                 fieldLabel: fieldLabel,
                 required: required,
@@ -309,9 +409,9 @@ function QuickFormField({ value = '', onValueChange, onValueBlur, locked = true,
                 isExpression: 'expression' === mode,
                 showFieldActions: showFieldActions,
                 onValueChange: editableOnValueChange,
-                variables: variables,
+                variables: variablePicker,
                 onGenerateWithAi: onGenerateWithAi,
-                onInsertVariable: (variable)=>onInsertVariable ? onInsertVariable(variable, {
+                onInsertVariable: builtInVariable ? void 0 : (variable)=>onInsertVariable ? onInsertVariable(variable, {
                         value,
                         caret: caretRef.current
                     }) : insertVariableAtCaret(variable.value),
@@ -322,7 +422,8 @@ function QuickFormField({ value = '', onValueChange, onValueBlur, locked = true,
                 error: error,
                 errorId: validationId,
                 disabled: disabled,
-                layout: 'literal' === mode && ('file' === fieldType || 'multi-select' === fieldType || 'textarea' === fieldType) ? 'grow' : 'row',
+                variant: builtInPrompt ? 'agent' : void 0,
+                layout: builtInPrompt || 'literal' === mode && ('file' === fieldType || 'textarea' === fieldType) ? 'grow' : 'row',
                 children: [
                     (showLock || void 0 !== leadingAddon) && null !== leadingAddon && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_input_group_cjs_namespaceObject.InputGroupAddon, {
                         align: "inline-start",
@@ -336,7 +437,7 @@ function QuickFormField({ value = '', onValueChange, onValueBlur, locked = true,
                     modeControl ?? ('expression' === mode ? renderExpressionEditor ? renderExpressionEditor(controlProps) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_input_group_cjs_namespaceObject.InputGroupInput, {
                         ...textInputProps,
                         className: "font-mono"
-                    }) : literalControl),
+                    }) : builtInVariable ? variableControl : builtInPrompt ? promptControl : literalControl),
                     null !== trailingAddon && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_input_group_cjs_namespaceObject.InputGroupAddon, {
                         align: "inline-end",
                         className: "cursor-default",
@@ -344,7 +445,23 @@ function QuickFormField({ value = '', onValueChange, onValueBlur, locked = true,
                     })
                 ]
             }),
-            belowValue
+            belowValue,
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(value_mode_switch_dialog_cjs_namespaceObject.ValueModeSwitchDialog, {
+                open: !!pendingSwitch,
+                title: pendingSwitch?.title,
+                description: pendingSwitch?.description,
+                confirmLabel: pendingSwitch?.confirmLabel,
+                strings: strings.valueModes,
+                onCancel: ()=>setPendingSwitch(void 0),
+                onConfirm: ()=>{
+                    if (pendingSwitch && !disabled) {
+                        focusControlOnClose.current = true;
+                        onModeChange?.(pendingSwitch.to);
+                    }
+                    setPendingSwitch(void 0);
+                },
+                onCloseAutoFocus: keepControlFocus
+            })
         ]
     });
 }

package/dist/components/ui/quick-form-field/quick-form-field.d.ts

@@ -10,11 +10,14 @@ import type { QuickFormFieldProps } from './types';
  * form-field anatomy (`FormField`, `FormFieldLabel`, `InputGroup`, …) or
  * describe them to `MetadataForm`.
  *
- * - Literal and expression have built-in controls; `renderModeControl`
- *   supplies the control for any mode, and `variable` / `prompt` need it.
+ * - Every mode has a built-in control: `variable` is a picker over
+ *   `variables`, `prompt` an agent textarea. `valueModes` chooses which the
+ *   menu offers, and `renderModeControl` replaces the control for any mode.
+ * - `confirmModeChange` asks before a switch the consumer knows is lossy.
  * - `locked` is configuration the author sets, so the value stays editable;
  *   `disabled` is what stops the author editing the field.
  * - `fieldTypes` chooses which types the picker offers.
+ * - `onLabelChange` makes a string `label` editable in place.
  * - Insert variable renders `variables` as supplied and splices at the caret;
  *   `onInsertVariable` takes over what inserting means.
  * - Enter commits through `onValueBlur`, Escape restores the value as of focus.
@@ -26,4 +29,4 @@ import type { QuickFormFieldProps } from './types';
  * AI-assist button renders only with `onGenerateWithAi`, and file uploads
  * aren't persisted anywhere.
  */
-export declare function QuickFormField({ value, onValueChange, onValueBlur, locked, onLockedChange, showLock, disabled, leadingAddon, trailingAddon, more, mode, onModeChange, renderExpressionEditor, renderModeControl, fieldType, fieldTypes, onFieldTypeChange, required, onRequiredChange, label, strings: stringOverrides, placeholder, error, errorId, belowValue, fileUploadAriaLabel, headerActions, compact, showFieldActions, options, onGenerateWithAi, onInsertVariable, variables, id, className, }: QuickFormFieldProps): import("react/jsx-runtime").JSX.Element;
+export declare function QuickFormField({ value, onValueChange, onValueBlur, locked, onLockedChange, showLock, disabled, leadingAddon, trailingAddon, more, mode, onModeChange, valueModes, confirmModeChange, renderExpressionEditor, renderModeControl, fieldType, fieldTypes, onFieldTypeChange, required, onRequiredChange, label, onLabelChange, isEditingLabel, onIsEditingLabelChange, labelAddon, tooltip, strings: stringOverrides, placeholder, error, errorId, belowValue, fileUploadAriaLabel, headerActions, compact, showFieldActions, options, onGenerateWithAi, onInsertVariable, variables, id, className, }: QuickFormFieldProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/quick-form-field/quick-form-field.js

@@ -3,20 +3,29 @@ import { RefreshCw, Trash2 } from "lucide-react";
 import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
 import { Calendar } from "../calendar.js";
 import { DateTimePicker } from "../datetime-picker.js";
+import { EditableText } from "../editable-text.js";
 import { FileUpload } from "../file-upload.js";
 import { InputGroup, InputGroupAddon, InputGroupInput, InputGroupTextarea } from "../input-group.js";
+import { RequiredIndicator } from "../label.js";
 import { MultiSelect } from "../multi-select.js";
 import { Popover, PopoverContent, PopoverTrigger } from "../popover.js";
+import { PromptValueControl } from "../prompt-value-control.js";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../select.js";
 import { Switch } from "../switch.js";
+import { VariableValueControl } from "../variable-value-control.js";
 import { cn } from "../../../lib/index.js";
 import { toDateValue } from "../../../lib/date-value.js";
 import { FieldMenu } from "../field-addons/field-menu.js";
-import { FieldHeader } from "./components/field-header.js";
+import { ValueModeSwitchDialog } from "../field-addons/value-mode-switch-dialog.js";
+import { FieldHeader, GROW_WHILE_EDITING } from "./components/field-header.js";
 import { LockToggleButton } from "./components/lock-toggle-button.js";
 import { DEFAULT_QUICK_FORM_FIELD_STRINGS, FIELD_TYPE_META } from "./types.js";
-import { DEFAULT_SELECT_OPTIONS, formatDateValue, parseListValue, toDateOnlyString } from "./utils.js";
-function QuickFormField({ value = '', onValueChange, onValueBlur, locked = true, onLockedChange, showLock = true, disabled = false, leadingAddon, trailingAddon, more, mode = 'literal', onModeChange, renderExpressionEditor, renderModeControl, fieldType = 'string', fieldTypes, onFieldTypeChange, required, onRequiredChange, label, strings: stringOverrides, placeholder, error, errorId, belowValue, fileUploadAriaLabel, headerActions, compact, showFieldActions = true, options = DEFAULT_SELECT_OPTIONS, onGenerateWithAi, onInsertVariable, variables = [], id, className }) {
+import { DEFAULT_SELECT_OPTIONS, formatDateValue, parseListValue, toDateOnlyString, toVariablePickerSource } from "./utils.js";
+const DEFAULT_VALUE_MODES = [
+    'literal',
+    'expression'
+];
+function QuickFormField({ value = '', onValueChange, onValueBlur, locked = true, onLockedChange, showLock = true, disabled = false, leadingAddon, trailingAddon, more, mode = 'literal', onModeChange, valueModes = DEFAULT_VALUE_MODES, confirmModeChange, renderExpressionEditor, renderModeControl, fieldType = 'string', fieldTypes, onFieldTypeChange, required, onRequiredChange, label, onLabelChange, isEditingLabel, onIsEditingLabelChange, labelAddon, tooltip, strings: stringOverrides, placeholder, error, errorId, belowValue, fileUploadAriaLabel, headerActions, compact, showFieldActions = true, options = DEFAULT_SELECT_OPTIONS, onGenerateWithAi, onInsertVariable, variables = [], id, className }) {
     const strings = useMemo(()=>({
             ...DEFAULT_QUICK_FORM_FIELD_STRINGS,
             ...stringOverrides
@@ -27,8 +36,17 @@ function QuickFormField({ value = '', onValueChange, onValueBlur, locked = true,
     const valueInputRef = useRef(null);
     const committedRef = useRef(value);
     const caretRef = useRef(null);
+    const modeControlRef = useRef(null);
+    const setModeControl = useCallback((el)=>{
+        modeControlRef.current = el;
+    }, []);
     const [datePopoverOpen, setDatePopoverOpen] = useState(false);
     const [selectOpen, setSelectOpen] = useState(false);
+    const [labelDraft, setLabelDraft] = useState(null);
+    const [pendingSwitch, setPendingSwitch] = useState();
+    const variablePicker = useMemo(()=>toVariablePickerSource(variables), [
+        variables
+    ]);
     const fieldId = id ?? generatedId;
     const validationId = errorId ?? `${fieldId}-error`;
     const typeMeta = FIELD_TYPE_META[fieldType];
@@ -42,6 +60,7 @@ function QuickFormField({ value = '', onValueChange, onValueBlur, locked = true,
                 id: 'clear',
                 label: strings.clearValue,
                 icon: Trash2,
+                destructive: true,
                 onSelect: more.onClear
             }
         ] : [],
@@ -54,20 +73,44 @@ function QuickFormField({ value = '', onValueChange, onValueBlur, locked = true,
             }
         ] : []
     ];
+    const valueModeStrings = {
+        ...strings.valueModes,
+        literalTitle: strings.literalLabels[fieldType] ?? typeMeta.fixedLabel,
+        expressionTitle: strings.expressionLabel,
+        expressionDescription: strings.expressionDescription,
+        fieldActions: strings.moreActionsAriaLabel
+    };
+    const focusControlOnClose = useRef(false);
+    const keepControlFocus = (event)=>{
+        if (!focusControlOnClose.current) return;
+        focusControlOnClose.current = false;
+        event.preventDefault();
+        (valueInputRef.current ?? modeControlRef.current)?.focus();
+    };
+    const selectMode = (next)=>{
+        if (!onModeChange) return;
+        const confirm = next !== mode && confirmModeChange?.(mode, next);
+        if (confirm) return void setPendingSwitch({
+            ...true === confirm ? {} : confirm,
+            to: next
+        });
+        focusControlOnClose.current = next !== mode;
+        onModeChange(next);
+    };
+    const switchable = !!onModeChange && valueModes.length > 1;
     const builtInMenu = /*#__PURE__*/ jsx(FieldMenu, {
         mode: mode,
-        onSelect: (next)=>onModeChange?.(next),
-        modesDisabled: !onModeChange && menuActions.length > 0,
-        disabled: disabled || !onModeChange && 0 === menuActions.length,
+        modes: [
+            ...valueModes
+        ],
+        onSelect: selectMode,
+        modesDisabled: !switchable && menuActions.length > 0,
+        disabled: disabled || !switchable && 0 === menuActions.length,
         actions: menuActions,
         triggerLabel: strings.valueModeAriaLabel,
         literalDescription: strings.literalDescriptions[fieldType] ?? typeMeta.fixedDescription,
-        strings: {
-            literalTitle: strings.literalLabels[fieldType] ?? typeMeta.fixedLabel,
-            expressionTitle: strings.expressionLabel,
-            expressionDescription: strings.expressionDescription,
-            fieldActions: strings.moreActionsAriaLabel
-        }
+        strings: valueModeStrings,
+        onCloseAutoFocus: keepControlFocus
     });
     const controlProps = {
         id: fieldId,
@@ -84,11 +127,14 @@ function QuickFormField({ value = '', onValueChange, onValueBlur, locked = true,
         'data-slot': 'input-group-control'
     };
     const modeControl = renderModeControl?.(mode, controlProps) ?? null;
+    const builtInVariable = null === modeControl && 'variable' === mode;
+    const builtInPrompt = null === modeControl && 'prompt' === mode;
     const modeOnMount = useRef(mode);
     useEffect(()=>{
         if (modeOnMount.current === mode) return;
         modeOnMount.current = mode;
-        valueInputRef.current?.focus();
+        const frame = requestAnimationFrame(()=>(valueInputRef.current ?? modeControlRef.current)?.focus());
+        return ()=>cancelAnimationFrame(frame);
     }, [
         mode
     ]);
@@ -251,6 +297,11 @@ function QuickFormField({ value = '', onValueChange, onValueBlur, locked = true,
         selected: parseListValue(value),
         onChange: (selected)=>editableOnValueChange?.(JSON.stringify(selected)),
         placeholder: strings.selectOptions,
+        searchPlaceholder: strings.multiSelectSearchPlaceholder,
+        emptyMessage: strings.multiSelectEmpty,
+        clearAllText: strings.multiSelectClearAll,
+        strings: strings.multiSelect,
+        overflow: "collapse",
         disabled: !editableOnValueChange,
         onBlur: onValueBlur
     }) : 'textarea' === fieldType ? /*#__PURE__*/ jsx(InputGroupTextarea, {
@@ -264,11 +315,60 @@ function QuickFormField({ value = '', onValueChange, onValueBlur, locked = true,
         type: 'integer' === fieldType || 'double' === fieldType ? 'number' : 'text',
         step: 'double' === fieldType ? 'any' : void 0
     });
+    const canPickVariable = !disabled && (!!onInsertVariable || !!onValueChange);
+    const variableControl = /*#__PURE__*/ jsx(VariableValueControl, {
+        id: fieldId,
+        value: value,
+        onChange: (reference, item)=>onInsertVariable && item ? onInsertVariable(variablePicker.resolve(item), {
+                value,
+                caret: null
+            }) : onValueChange?.(reference),
+        onBlur: onValueBlur,
+        inputRef: setModeControl,
+        variables: variablePicker.items,
+        disabled: !canPickVariable,
+        placeholder: placeholder,
+        strings: strings.valueModes,
+        "aria-describedby": controlProps['aria-describedby']
+    });
+    const promptControl = /*#__PURE__*/ jsx(PromptValueControl, {
+        id: fieldId,
+        value: value,
+        onChange: (next)=>editableOnValueChange?.(next),
+        onBlur: onValueBlur,
+        inputRef: setModeControl,
+        disabled: !editableOnValueChange,
+        placeholder: placeholder,
+        strings: strings.valueModes,
+        "aria-describedby": controlProps['aria-describedby']
+    });
+    const editableLabel = 'string' == typeof label && onLabelChange ? /*#__PURE__*/ jsxs("span", {
+        className: cn('flex min-w-0 items-center', GROW_WHILE_EDITING),
+        children: [
+            /*#__PURE__*/ jsx(EditableText, {
+                size: "label",
+                value: labelDraft ?? label,
+                placeholder: strings.labelPlaceholder,
+                "aria-label": strings.labelAriaLabel,
+                editing: isEditingLabel,
+                onEditingChange: onIsEditingLabelChange,
+                disabled: disabled,
+                onChange: (next)=>setLabelDraft(next === label ? null : next),
+                onSubmit: (next)=>{
+                    setLabelDraft(null);
+                    onLabelChange(next);
+                }
+            }),
+            required && /*#__PURE__*/ jsx(RequiredIndicator, {})
+        ]
+    }) : void 0;
     return /*#__PURE__*/ jsxs("div", {
         className: cn('@container group flex flex-col gap-1.5 [&>[data-slot=form-field-error]]:mt-0', className),
         children: [
             /*#__PURE__*/ jsx(FieldHeader, {
-                label: label,
+                label: editableLabel ?? label,
+                labelAddon: labelAddon,
+                tooltip: tooltip,
                 fieldId: fieldId,
                 fieldLabel: fieldLabel,
                 required: required,
@@ -281,9 +381,9 @@ function QuickFormField({ value = '', onValueChange, onValueBlur, locked = true,
                 isExpression: 'expression' === mode,
                 showFieldActions: showFieldActions,
                 onValueChange: editableOnValueChange,
-                variables: variables,
+                variables: variablePicker,
                 onGenerateWithAi: onGenerateWithAi,
-                onInsertVariable: (variable)=>onInsertVariable ? onInsertVariable(variable, {
+                onInsertVariable: builtInVariable ? void 0 : (variable)=>onInsertVariable ? onInsertVariable(variable, {
                         value,
                         caret: caretRef.current
                     }) : insertVariableAtCaret(variable.value),
@@ -294,7 +394,8 @@ function QuickFormField({ value = '', onValueChange, onValueBlur, locked = true,
                 error: error,
                 errorId: validationId,
                 disabled: disabled,
-                layout: 'literal' === mode && ('file' === fieldType || 'multi-select' === fieldType || 'textarea' === fieldType) ? 'grow' : 'row',
+                variant: builtInPrompt ? 'agent' : void 0,
+                layout: builtInPrompt || 'literal' === mode && ('file' === fieldType || 'textarea' === fieldType) ? 'grow' : 'row',
                 children: [
                     (showLock || void 0 !== leadingAddon) && null !== leadingAddon && /*#__PURE__*/ jsx(InputGroupAddon, {
                         align: "inline-start",
@@ -308,7 +409,7 @@ function QuickFormField({ value = '', onValueChange, onValueBlur, locked = true,
                     modeControl ?? ('expression' === mode ? renderExpressionEditor ? renderExpressionEditor(controlProps) : /*#__PURE__*/ jsx(InputGroupInput, {
                         ...textInputProps,
                         className: "font-mono"
-                    }) : literalControl),
+                    }) : builtInVariable ? variableControl : builtInPrompt ? promptControl : literalControl),
                     null !== trailingAddon && /*#__PURE__*/ jsx(InputGroupAddon, {
                         align: "inline-end",
                         className: "cursor-default",
@@ -316,7 +417,23 @@ function QuickFormField({ value = '', onValueChange, onValueBlur, locked = true,
                     })
                 ]
             }),
-            belowValue
+            belowValue,
+            /*#__PURE__*/ jsx(ValueModeSwitchDialog, {
+                open: !!pendingSwitch,
+                title: pendingSwitch?.title,
+                description: pendingSwitch?.description,
+                confirmLabel: pendingSwitch?.confirmLabel,
+                strings: strings.valueModes,
+                onCancel: ()=>setPendingSwitch(void 0),
+                onConfirm: ()=>{
+                    if (pendingSwitch && !disabled) {
+                        focusControlOnClose.current = true;
+                        onModeChange?.(pendingSwitch.to);
+                    }
+                    setPendingSwitch(void 0);
+                },
+                onCloseAutoFocus: keepControlFocus
+            })
         ]
     });
 }

package/dist/components/ui/quick-form-field/types.cjs

@@ -144,6 +144,9 @@ const DEFAULT_QUICK_FORM_FIELD_STRINGS = {
     falseLabel: 'False',
     requiredTooltip: 'Required',
     requiredAriaLabel: 'Required field',
+    labelAriaLabel: 'Field label',
+    labelPlaceholder: 'Untitled field',
+    tooltipAriaLabel: 'More information',
     optionalAriaLabel: 'Optional field',
     insertLabel: 'Insert',
     insertAriaLabel: 'Insert variable',
@@ -152,9 +155,14 @@ const DEFAULT_QUICK_FORM_FIELD_STRINGS = {
     valueModeAriaLabel: 'Choose value mode',
     expressionLabel: 'Expression',
     expressionDescription: 'Use a JS expression',
+    valueModes: {},
     pickDate: 'Pick a date',
     selectOption: 'Select an option',
     selectOptions: 'Select options...',
+    multiSelectSearchPlaceholder: 'Search...',
+    multiSelectEmpty: 'No items found.',
+    multiSelectClearAll: (count)=>`Clear all (${count})`,
+    multiSelect: {},
     moreActionsAriaLabel: 'More value actions',
     clearValue: 'Clear value',
     forceRefresh: 'Force refresh',