@uipath/apollo-wind 2.75.0 → 2.76.0

package/dist/components/forms/field-actions.cjs

@@ -24,11 +24,12 @@ var __webpack_require__ = {};
 var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
-    createClearAction: ()=>createClearAction,
     resolveVariables: ()=>resolveVariables,
     createInsertVariableAction: ()=>createInsertVariableAction,
     resolveFieldActions: ()=>resolveFieldActions,
     DEFAULT_FIELD_ACTION_REGISTRY: ()=>DEFAULT_FIELD_ACTION_REGISTRY,
+    createClearAction: ()=>createClearAction,
+    bindVariablePicker: ()=>bindVariablePicker,
     buildFieldActionRegistry: ()=>buildFieldActionRegistry,
     createAiAssistAction: ()=>createAiAssistAction
 });
@@ -36,6 +37,20 @@ const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const external_lucide_react_namespaceObject = require("lucide-react");
 const ai_assist_action_cjs_namespaceObject = require("../ui/field-actions/ai-assist-action.cjs");
 const insert_variable_action_cjs_namespaceObject = require("../ui/field-actions/insert-variable-action.cjs");
+function bindVariablePicker(picker) {
+    const bound = new WeakMap();
+    return (field)=>{
+        let render = bound.get(field);
+        if (!render) {
+            render = (props)=>picker({
+                    ...props,
+                    field
+                });
+            bound.set(field, render);
+        }
+        return render;
+    };
+}
 function resolveVariables(source, field) {
     if (!source) return [];
     return 'function' == typeof source ? source({
@@ -74,7 +89,8 @@ function insertTarget(ctx, formatReference, text) {
             confirm
         });
 }
-function createInsertVariableAction({ variables, formatReference, strings, id = 'insert-variable' }) {
+function createInsertVariableAction({ variables, renderPicker, formatReference, strings, id = 'insert-variable' }) {
+    const pickerFor = renderPicker && bindVariablePicker(renderPicker);
     return {
         id,
         render: (ctx)=>{
@@ -84,30 +100,53 @@ function createInsertVariableAction({ variables, formatReference, strings, id =
                 ...strings
             };
             const insert = insertTarget(ctx, formatReference, text);
+            const onInsert = insert && ((reference)=>insertTarget(ctx, formatReference, text)?.(reference));
+            if (pickerFor) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(insert_variable_action_cjs_namespaceObject.InsertVariableAction, {
+                renderPicker: pickerFor(ctx.field),
+                onInsert: onInsert,
+                disabled: ctx.disabled,
+                strings: text
+            });
             return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(insert_variable_action_cjs_namespaceObject.InsertVariableAction, {
                 variables: Array.isArray(variables) ? variables : ()=>variables ? resolveVariables(variables, ctx.field) : ctx.variables(),
-                onInsert: insert && ((reference)=>insertTarget(ctx, formatReference, text)?.(reference)),
+                onInsert: onInsert,
                 disabled: ctx.disabled,
                 strings: text
             });
         }
     };
 }
-function createAiAssistAction({ generate, hint, placeholder, strings, id = 'ai-assist' }) {
+function writeResult(ctx, result) {
+    if (!result || ctx.disabled) return;
+    const mode = result.mode ?? ctx.mode?.mode;
+    if (ctx.setModeValue && mode) ctx.setModeValue(mode, result.value);
+    else ctx.setValue(result.value);
+}
+function createAiAssistAction({ generate, renderContent, hint, placeholder, strings, id = 'ai-assist' }) {
     return {
         id,
         render: (ctx)=>{
+            if (renderContent) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ai_assist_action_cjs_namespaceObject.AiAssistAction, {
+                renderContent: ({ close, disabled })=>renderContent({
+                        close,
+                        disabled,
+                        apply: (result)=>{
+                            writeResult(ctx, result);
+                            close();
+                        },
+                        ctx
+                    }),
+                disabled: ctx.disabled,
+                strings: {
+                    ...ctx.strings.aiAssist,
+                    ...strings
+                }
+            });
             const promptPlaceholder = 'function' == typeof placeholder ? placeholder(ctx) : placeholder;
             return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ai_assist_action_cjs_namespaceObject.AiAssistAction, {
-                onGenerate: async (prompt)=>{
-                    const result = await generate({
+                onGenerate: async (prompt)=>writeResult(ctx, await generate({
                         prompt
-                    }, ctx);
-                    if (!result || ctx.disabled) return;
-                    const mode = result.mode ?? ctx.mode?.mode;
-                    if (ctx.setModeValue && mode) ctx.setModeValue(mode, result.value);
-                    else ctx.setValue(result.value);
-                },
+                    }, ctx)),
                 hint: 'function' == typeof hint ? hint(ctx) : hint,
                 disabled: ctx.disabled,
                 strings: {
@@ -161,6 +200,7 @@ function resolveFieldActions(field, registry) {
     };
 }
 exports.DEFAULT_FIELD_ACTION_REGISTRY = __webpack_exports__.DEFAULT_FIELD_ACTION_REGISTRY;
+exports.bindVariablePicker = __webpack_exports__.bindVariablePicker;
 exports.buildFieldActionRegistry = __webpack_exports__.buildFieldActionRegistry;
 exports.createAiAssistAction = __webpack_exports__.createAiAssistAction;
 exports.createClearAction = __webpack_exports__.createClearAction;
@@ -169,6 +209,7 @@ exports.resolveFieldActions = __webpack_exports__.resolveFieldActions;
 exports.resolveVariables = __webpack_exports__.resolveVariables;
 for(var __rspack_i in __webpack_exports__)if (-1 === [
     "DEFAULT_FIELD_ACTION_REGISTRY",
+    "bindVariablePicker",
     "buildFieldActionRegistry",
     "createAiAssistAction",
     "createClearAction",

package/dist/components/forms/field-actions.d.ts

@@ -1,9 +1,9 @@
 import { type LucideIcon } from 'lucide-react';
 import type * as React from 'react';
 import type { FieldValues, UseFormReturn } from 'react-hook-form';
-import { type AiAssistActionStrings } from '../ui/field-actions/ai-assist-action';
+import { type AiAssistActionStrings, type AiAssistContentProps } from '../ui/field-actions/ai-assist-action';
 import { type InsertVariableActionStrings } from '../ui/field-actions/insert-variable-action';
-import type { VariablePickerItem } from '../ui/variable-picker';
+import type { RenderVariablePicker, VariablePickerItem, VariablePickerSlotProps } from '../ui/variable-picker';
 import type { FieldMetadata, FormPlugin, FormVariables, ValueModeId } from './form-schema';
 import type { ClearActionStrings, MetadataFormStrings } from './form-strings';
 import type { DecodedValue, ValueModeControlHandle } from './value-modes';
@@ -62,6 +62,15 @@ export interface FieldMenuAction {
 }
 /** A variable Insert variable offers, rendered as supplied. */
 export type ValueModeVariable = VariablePickerItem;
+/**
+ * A host's own variable picker for a form field, rendered in place of the built-in tree. Called
+ * only while the picker is open, with the field it picks for.
+ */
+export type FormVariablePicker = (props: VariablePickerSlotProps & {
+    field: FieldMetadata;
+}) => React.ReactNode;
+/** Binds `picker` to each field once, so the action's props stay stable across renders. */
+export declare function bindVariablePicker(picker: FormVariablePicker): (field: FieldMetadata) => RenderVariablePicker;
 /** `source` for `field`: a function is called now, so only call this when a picker opens. */
 export declare function resolveVariables(source: FormVariables | undefined, field: FieldMetadata): ValueModeVariable[];
 /**
@@ -70,10 +79,7 @@ export declare function resolveVariables(source: FormVariables | undefined, fiel
  */
 export type FieldActionGenerate = (request: {
     prompt: string;
-}, ctx: FieldActionContext) => Promise<{
-    mode?: ValueModeId;
-    value: unknown;
-} | undefined | void>;
+}, ctx: FieldActionContext) => Promise<FieldActionResult | undefined | void>;
 export interface FieldActionsPluginConfig {
     /** Header actions by id, in the order fields list them. */
     header?: Record<string, FieldHeaderAction>;
@@ -88,6 +94,11 @@ export interface FieldActionRegistry {
 export interface InsertVariableActionOptions {
     /** Defaults to the form's `FormPlugin.variables`. */
     variables?: FormVariables;
+    /**
+     * The host's own picker, rendered in place of a picker over `variables`, which it wins over. Its
+     * pick is written like a picked variable: at the caret, or as the value once confirmed.
+     */
+    renderPicker?: FormVariablePicker;
     /**
      * How a picked reference is written at the caret, such as `{{ ref }}` inside fixed-value text.
      * A field that switches to `expression` or `variable` to take the reference gets it as picked.
@@ -101,9 +112,23 @@ export interface InsertVariableActionOptions {
     id?: string;
 }
 /** Insert variable: a variable picker behind the label that writes the picked reference. */
-export declare function createInsertVariableAction({ variables, formatReference, strings, id, }: InsertVariableActionOptions): FieldHeaderAction;
-export interface AiAssistActionOptions {
-    generate: FieldActionGenerate;
+export declare function createInsertVariableAction({ variables, renderPicker, formatReference, strings, id, }: InsertVariableActionOptions): FieldHeaderAction;
+/** A generated or host-produced value: in `mode`, or else the mode the field is in when written. */
+export interface FieldActionResult {
+    mode?: ValueModeId;
+    value: unknown;
+}
+/** What a host-rendered AI-assist panel gets inside a form. */
+export interface AiAssistFieldContentProps extends AiAssistContentProps {
+    /**
+     * Writes `result` and closes the popover. Nothing is written if the field was disabled
+     * meanwhile.
+     */
+    apply(result: FieldActionResult): void;
+    /** The field the panel generates for, read when accessed. */
+    ctx: FieldActionContext;
+}
+interface AiAssistActionBaseOptions {
     /** Guidance under the prompt, such as the value type expected. */
     hint?: React.ReactNode | ((ctx: FieldActionContext) => React.ReactNode);
     /** The prompt's placeholder, such as an example request for this field. */
@@ -112,8 +137,19 @@ export interface AiAssistActionOptions {
     /** Defaults to `ai-assist`. */
     id?: string;
 }
+export type AiAssistActionOptions = AiAssistActionBaseOptions & ({
+    generate: FieldActionGenerate;
+    renderContent?: undefined;
+} | {
+    generate?: undefined;
+    /**
+     * The host's own panel, in place of the built-in prompt form, whose `hint` and
+     * `placeholder` it then does not use. Called only while the popover is open.
+     */
+    renderContent: (props: AiAssistFieldContentProps) => React.ReactNode;
+});
 /** AI assist: a prompt behind the label whose generated value is written to the field. */
-export declare function createAiAssistAction({ generate, hint, placeholder, strings, id, }: AiAssistActionOptions): FieldHeaderAction;
+export declare function createAiAssistAction({ generate, renderContent, hint, placeholder, strings, id, }: AiAssistActionOptions): FieldHeaderAction;
 export interface ClearActionOptions {
     strings?: Partial<ClearActionStrings>;
     /** Defaults to `clear`. */
@@ -129,3 +165,4 @@ export declare function resolveFieldActions(field: FieldMetadata, registry: Fiel
     header: FieldHeaderAction[];
     menu: FieldMenuAction[];
 };
+export {};

package/dist/components/forms/field-actions.js

@@ -2,6 +2,20 @@ import { jsx } from "react/jsx-runtime";
 import { Eraser } from "lucide-react";
 import { AiAssistAction } from "../ui/field-actions/ai-assist-action.js";
 import { InsertVariableAction } from "../ui/field-actions/insert-variable-action.js";
+function bindVariablePicker(picker) {
+    const bound = new WeakMap();
+    return (field)=>{
+        let render = bound.get(field);
+        if (!render) {
+            render = (props)=>picker({
+                    ...props,
+                    field
+                });
+            bound.set(field, render);
+        }
+        return render;
+    };
+}
 function resolveVariables(source, field) {
     if (!source) return [];
     return 'function' == typeof source ? source({
@@ -40,7 +54,8 @@ function insertTarget(ctx, formatReference, text) {
             confirm
         });
 }
-function createInsertVariableAction({ variables, formatReference, strings, id = 'insert-variable' }) {
+function createInsertVariableAction({ variables, renderPicker, formatReference, strings, id = 'insert-variable' }) {
+    const pickerFor = renderPicker && bindVariablePicker(renderPicker);
     return {
         id,
         render: (ctx)=>{
@@ -50,30 +65,53 @@ function createInsertVariableAction({ variables, formatReference, strings, id =
                 ...strings
             };
             const insert = insertTarget(ctx, formatReference, text);
+            const onInsert = insert && ((reference)=>insertTarget(ctx, formatReference, text)?.(reference));
+            if (pickerFor) return /*#__PURE__*/ jsx(InsertVariableAction, {
+                renderPicker: pickerFor(ctx.field),
+                onInsert: onInsert,
+                disabled: ctx.disabled,
+                strings: text
+            });
             return /*#__PURE__*/ jsx(InsertVariableAction, {
                 variables: Array.isArray(variables) ? variables : ()=>variables ? resolveVariables(variables, ctx.field) : ctx.variables(),
-                onInsert: insert && ((reference)=>insertTarget(ctx, formatReference, text)?.(reference)),
+                onInsert: onInsert,
                 disabled: ctx.disabled,
                 strings: text
             });
         }
     };
 }
-function createAiAssistAction({ generate, hint, placeholder, strings, id = 'ai-assist' }) {
+function writeResult(ctx, result) {
+    if (!result || ctx.disabled) return;
+    const mode = result.mode ?? ctx.mode?.mode;
+    if (ctx.setModeValue && mode) ctx.setModeValue(mode, result.value);
+    else ctx.setValue(result.value);
+}
+function createAiAssistAction({ generate, renderContent, hint, placeholder, strings, id = 'ai-assist' }) {
     return {
         id,
         render: (ctx)=>{
+            if (renderContent) return /*#__PURE__*/ jsx(AiAssistAction, {
+                renderContent: ({ close, disabled })=>renderContent({
+                        close,
+                        disabled,
+                        apply: (result)=>{
+                            writeResult(ctx, result);
+                            close();
+                        },
+                        ctx
+                    }),
+                disabled: ctx.disabled,
+                strings: {
+                    ...ctx.strings.aiAssist,
+                    ...strings
+                }
+            });
             const promptPlaceholder = 'function' == typeof placeholder ? placeholder(ctx) : placeholder;
             return /*#__PURE__*/ jsx(AiAssistAction, {
-                onGenerate: async (prompt)=>{
-                    const result = await generate({
+                onGenerate: async (prompt)=>writeResult(ctx, await generate({
                         prompt
-                    }, ctx);
-                    if (!result || ctx.disabled) return;
-                    const mode = result.mode ?? ctx.mode?.mode;
-                    if (ctx.setModeValue && mode) ctx.setModeValue(mode, result.value);
-                    else ctx.setValue(result.value);
-                },
+                    }, ctx)),
                 hint: 'function' == typeof hint ? hint(ctx) : hint,
                 disabled: ctx.disabled,
                 strings: {
@@ -126,4 +164,4 @@ function resolveFieldActions(field, registry) {
         menu: pick(field.menuActions, registry.menu)
     };
 }
-export { DEFAULT_FIELD_ACTION_REGISTRY, buildFieldActionRegistry, createAiAssistAction, createClearAction, createInsertVariableAction, resolveFieldActions, resolveVariables };
+export { DEFAULT_FIELD_ACTION_REGISTRY, bindVariablePicker, buildFieldActionRegistry, createAiAssistAction, createClearAction, createInsertVariableAction, resolveFieldActions, resolveVariables };

package/dist/components/forms/index.cjs

@@ -52,6 +52,7 @@ __webpack_require__.d(__webpack_exports__, {
     DataFetcher: ()=>external_data_fetcher_cjs_namespaceObject.DataFetcher,
     DataTransformers: ()=>external_data_fetcher_cjs_namespaceObject.DataTransformers,
     createAiAssistAction: ()=>external_field_actions_cjs_namespaceObject.createAiAssistAction,
+    createVariableModeControl: ()=>external_variable_mode_control_cjs_namespaceObject.createVariableModeControl,
     RulesEngine: ()=>external_rules_engine_cjs_namespaceObject.RulesEngine,
     RuleBuilder: ()=>external_rules_engine_cjs_namespaceObject.RuleBuilder,
     DataSourceBuilder: ()=>external_data_fetcher_cjs_namespaceObject.DataSourceBuilder,
@@ -76,6 +77,7 @@ const external_mode_aware_field_cjs_namespaceObject = require("./mode-aware-fiel
 const external_rules_engine_cjs_namespaceObject = require("./rules-engine.cjs");
 const external_string_list_field_cjs_namespaceObject = require("./string-list-field.cjs");
 const external_value_modes_cjs_namespaceObject = require("./value-modes.cjs");
+const external_variable_mode_control_cjs_namespaceObject = require("./variable-mode-control.cjs");
 exports.DEFAULT_METADATA_FORM_STRINGS = __webpack_exports__.DEFAULT_METADATA_FORM_STRINGS;
 exports.DataFetcher = __webpack_exports__.DataFetcher;
 exports.DataSourceBuilder = __webpack_exports__.DataSourceBuilder;
@@ -99,6 +101,7 @@ exports.autoSavePlugin = __webpack_exports__.autoSavePlugin;
 exports.createAiAssistAction = __webpack_exports__.createAiAssistAction;
 exports.createClearAction = __webpack_exports__.createClearAction;
 exports.createInsertVariableAction = __webpack_exports__.createInsertVariableAction;
+exports.createVariableModeControl = __webpack_exports__.createVariableModeControl;
 exports.envelopeCodec = __webpack_exports__.envelopeCodec;
 exports.formatTemplate = __webpack_exports__.formatTemplate;
 exports.formattingPlugin = __webpack_exports__.formattingPlugin;
@@ -137,6 +140,7 @@ for(var __rspack_i in __webpack_exports__)if (-1 === [
     "createAiAssistAction",
     "createClearAction",
     "createInsertVariableAction",
+    "createVariableModeControl",
     "envelopeCodec",
     "formatTemplate",
     "formattingPlugin",

package/dist/components/forms/index.d.ts

@@ -3,7 +3,7 @@
  * Enterprise-grade metadata-driven form system
  */
 export { type AdapterRequest, type AdapterResponse, type DataAdapter, DataFetcher, DataSourceBuilder, DataTransformers, FetchAdapter, } from './data-fetcher';
-export { type AiAssistActionOptions, type ClearActionOptions, createAiAssistAction, createClearAction, createInsertVariableAction, type FieldActionContext, type FieldActionGenerate, type FieldActionRegistry, type FieldActionsPluginConfig, type FieldHeaderAction, type FieldMenuAction, type InsertVariableActionOptions, resolveVariables, type ValueModeVariable, } from './field-actions';
+export { type AiAssistActionOptions, type AiAssistFieldContentProps, type ClearActionOptions, createAiAssistAction, createClearAction, createInsertVariableAction, type FieldActionContext, type FieldActionGenerate, type FieldActionRegistry, type FieldActionResult, type FieldActionsPluginConfig, type FieldHeaderAction, type FieldMenuAction, type FormVariablePicker, type InsertVariableActionOptions, resolveVariables, type ValueModeVariable, } from './field-actions';
 export { FIELD_CONTROL_GEOMETRY, FieldControl, type FieldControlFormField, type FieldControlGeometry, type FieldControlLabelTarget, type FieldControlProps, } from './field-control';
 export { FormFieldRenderer } from './field-renderer';
 export { FormDesigner } from './form-designer';
@@ -17,3 +17,4 @@ export { ModeAwareField, type ModeAwareFieldProps, } from './mode-aware-field';
 export { ExpressionBuilder, RuleBuilder, RulesEngine } from './rules-engine';
 export { formatTemplate, StringListField, type StringListFieldProps } from './string-list-field';
 export { type CodecContext, type ConvertResult, type DecodedValue, envelopeCodec, type FieldControlRegistration, isEmptyModeValue, isValueModeEnvelope, literalValues, VALUE_MODE_OPAQUE, type ValueModeCodec, type ValueModeControlHandle, type ValueModeControlProps, type ValueModeControlRegistration, type ValueModeDefinition, type ValueModeEnvelope, type ValueModeRegistry, type ValueModesPluginConfig, } from './value-modes';
+export { createVariableModeControl, type VariableModeControlOptions, } from './variable-mode-control';

package/dist/components/forms/index.js

@@ -12,4 +12,5 @@ import { ModeAwareField } from "./mode-aware-field.js";
 import { ExpressionBuilder, RuleBuilder, RulesEngine } from "./rules-engine.js";
 import { StringListField, formatTemplate } from "./string-list-field.js";
 import { VALUE_MODE_OPAQUE, envelopeCodec, isEmptyModeValue, isValueModeEnvelope, literalValues } from "./value-modes.js";
-export { DEFAULT_METADATA_FORM_STRINGS, DataFetcher, DataSourceBuilder, DataTransformers, ExpressionBuilder, FIELD_CONTROL_GEOMETRY, FetchAdapter, FieldControl, FormDesigner, FormFieldRenderer, FormStateViewer, MetadataForm, ModeAwareField, RuleBuilder, RulesEngine, StringListField, VALUE_MODE_OPAQUE, analyticsPlugin, auditPlugin, autoSavePlugin, createAiAssistAction, createClearAction, createInsertVariableAction, envelopeCodec, formatTemplate, formattingPlugin, hasMinMaxStep, hasOptions, isCustomField, isEmptyModeValue, isFileField, isValueModeEnvelope, literalValues, resolveVariables, useWatch, validationPlugin, workflowPlugin };
+import { createVariableModeControl } from "./variable-mode-control.js";
+export { DEFAULT_METADATA_FORM_STRINGS, DataFetcher, DataSourceBuilder, DataTransformers, ExpressionBuilder, FIELD_CONTROL_GEOMETRY, FetchAdapter, FieldControl, FormDesigner, FormFieldRenderer, FormStateViewer, MetadataForm, ModeAwareField, RuleBuilder, RulesEngine, StringListField, VALUE_MODE_OPAQUE, analyticsPlugin, auditPlugin, autoSavePlugin, createAiAssistAction, createClearAction, createInsertVariableAction, createVariableModeControl, envelopeCodec, formatTemplate, formattingPlugin, hasMinMaxStep, hasOptions, isCustomField, isEmptyModeValue, isFileField, isValueModeEnvelope, literalValues, resolveVariables, useWatch, validationPlugin, workflowPlugin };

package/dist/components/forms/metadata-form.cjs

@@ -507,6 +507,7 @@ function TabbedStepForm({ schema, context, customComponents, disabled, sectionVa
                         return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(panel_tabs_cjs_namespaceObject.PanelTabsContent, {
                             value: step.id,
                             padded: !selfPadded,
+                            tabIndex: disabled ? 0 : void 0,
                             innerClassName: showEmptyState ? 'text-sm text-muted-foreground' : 'space-y-2',
                             children: showEmptyState ? step.emptyState : selfPadded ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
                                 className: "pb-6 [padding-inline:var(--mf-content-inset,0px)]",

package/dist/components/forms/metadata-form.js

@@ -468,6 +468,7 @@ function TabbedStepForm({ schema, context, customComponents, disabled, sectionVa
                         return /*#__PURE__*/ jsx(PanelTabsContent, {
                             value: step.id,
                             padded: !selfPadded,
+                            tabIndex: disabled ? 0 : void 0,
                             innerClassName: showEmptyState ? 'text-sm text-muted-foreground' : 'space-y-2',
                             children: showEmptyState ? step.emptyState : selfPadded ? /*#__PURE__*/ jsx("div", {
                                 className: "pb-6 [padding-inline:var(--mf-content-inset,0px)]",

package/dist/components/forms/variable-mode-control.cjs

@@ -0,0 +1,65 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    createVariableModeControl: ()=>createVariableModeControl
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const variable_value_control_cjs_namespaceObject = require("../ui/variable-value-control.cjs");
+const external_field_actions_cjs_namespaceObject = require("./field-actions.cjs");
+const Control = variable_value_control_cjs_namespaceObject.VariableValueControl;
+function createVariableModeControl({ renderPicker, describeReference }) {
+    const pickerFor = renderPicker && (0, external_field_actions_cjs_namespaceObject.bindVariablePicker)(renderPicker);
+    const described = new WeakMap();
+    const describerFor = (field)=>{
+        if (!describeReference) return;
+        let describe = described.get(field);
+        if (!describe) {
+            describe = (reference)=>describeReference(reference, {
+                    field
+                });
+            described.set(field, describe);
+        }
+        return describe;
+    };
+    function HostVariableValueControl(props) {
+        const { field } = props;
+        return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Control, {
+            ...props,
+            renderPicker: field && pickerFor?.(field),
+            describeReference: field && describerFor(field)
+        });
+    }
+    return {
+        component: HostVariableValueControl
+    };
+}
+exports.createVariableModeControl = __webpack_exports__.createVariableModeControl;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "createVariableModeControl"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/components/forms/variable-mode-control.d.ts

@@ -0,0 +1,20 @@
+import { type VariableReferenceDescription } from '../ui/variable-value-control';
+import { type FormVariablePicker } from './field-actions';
+import type { FieldMetadata } from './form-schema';
+import type { ValueModeControlRegistration } from './value-modes';
+export interface VariableModeControlOptions {
+    /** The host's own picker, rendered in place of a picker over the form's variables. */
+    renderPicker?: FormVariablePicker;
+    /**
+     * The chip's label and type icon for a bound reference. Returning nothing shows the reference
+     * as stored.
+     */
+    describeReference?: (reference: string, ctx: {
+        field: FieldMetadata;
+    }) => VariableReferenceDescription | undefined;
+}
+/**
+ * The `variable` mode's control with the host's own picker or reference labels. Register it as
+ * `FormPlugin.valueModes.definitions.variable.control`; call this once, at module scope.
+ */
+export declare function createVariableModeControl({ renderPicker, describeReference, }: VariableModeControlOptions): ValueModeControlRegistration;

package/dist/components/forms/variable-mode-control.js

@@ -0,0 +1,31 @@
+import { jsx } from "react/jsx-runtime";
+import { VariableValueControl } from "../ui/variable-value-control.js";
+import { bindVariablePicker } from "./field-actions.js";
+const Control = VariableValueControl;
+function createVariableModeControl({ renderPicker, describeReference }) {
+    const pickerFor = renderPicker && bindVariablePicker(renderPicker);
+    const described = new WeakMap();
+    const describerFor = (field)=>{
+        if (!describeReference) return;
+        let describe = described.get(field);
+        if (!describe) {
+            describe = (reference)=>describeReference(reference, {
+                    field
+                });
+            described.set(field, describe);
+        }
+        return describe;
+    };
+    function HostVariableValueControl(props) {
+        const { field } = props;
+        return /*#__PURE__*/ jsx(Control, {
+            ...props,
+            renderPicker: field && pickerFor?.(field),
+            describeReference: field && describerFor(field)
+        });
+    }
+    return {
+        component: HostVariableValueControl
+    };
+}
+export { createVariableModeControl };