@uipath/apollo-wind 2.57.0 → 2.58.0

package/dist/components/ui/code-editors.shared.js

@@ -0,0 +1,264 @@
+import { jsx } from "react/jsx-runtime";
+import react from "@monaco-editor/react";
+import { useEffect, useId, useRef, useState } from "react";
+import { apolloCoreDarkCodeMirror, apolloCoreDarkHCCodeMirror, apolloCoreDarkHCMonaco, apolloCoreDarkMonaco, apolloCoreLightCodeMirror, apolloCoreLightHCCodeMirror, apolloCoreLightHCMonaco, apolloCoreLightMonaco, apolloFutureDarkCodeMirror, apolloFutureDarkMonaco, apolloFutureLightCodeMirror, apolloFutureLightMonaco } from "../../editor-themes/index.js";
+const editorThemeConfigs = [
+    {
+        key: 'future-dark',
+        label: 'Future Dark',
+        monacoThemeName: 'apollo-future-dark',
+        monacoExport: 'apolloFutureDarkMonaco',
+        cmExport: 'apolloFutureDarkCodeMirror',
+        monacoThemeObj: apolloFutureDarkMonaco,
+        cmTokens: apolloFutureDarkCodeMirror,
+        isDark: true,
+        family: 'Future'
+    },
+    {
+        key: 'future-light',
+        label: 'Future Light',
+        monacoThemeName: 'apollo-future-light',
+        monacoExport: 'apolloFutureLightMonaco',
+        cmExport: 'apolloFutureLightCodeMirror',
+        monacoThemeObj: apolloFutureLightMonaco,
+        cmTokens: apolloFutureLightCodeMirror,
+        isDark: false,
+        family: 'Future'
+    },
+    {
+        key: 'dark',
+        label: 'Dark',
+        monacoThemeName: 'apollo-core-dark',
+        monacoExport: 'apolloCoreDarkMonaco',
+        cmExport: 'apolloCoreDarkCodeMirror',
+        monacoThemeObj: apolloCoreDarkMonaco,
+        cmTokens: apolloCoreDarkCodeMirror,
+        isDark: true,
+        family: 'Core'
+    },
+    {
+        key: 'light',
+        label: 'Light',
+        monacoThemeName: 'apollo-core-light',
+        monacoExport: 'apolloCoreLightMonaco',
+        cmExport: 'apolloCoreLightCodeMirror',
+        monacoThemeObj: apolloCoreLightMonaco,
+        cmTokens: apolloCoreLightCodeMirror,
+        isDark: false,
+        family: 'Core'
+    },
+    {
+        key: 'dark-hc',
+        label: 'Dark High Contrast',
+        monacoThemeName: 'apollo-core-dark-hc',
+        monacoExport: 'apolloCoreDarkHCMonaco',
+        cmExport: 'apolloCoreDarkHCCodeMirror',
+        monacoThemeObj: apolloCoreDarkHCMonaco,
+        cmTokens: apolloCoreDarkHCCodeMirror,
+        isDark: true,
+        family: 'Core HC'
+    },
+    {
+        key: 'light-hc',
+        label: 'Light High Contrast',
+        monacoThemeName: 'apollo-core-light-hc',
+        monacoExport: 'apolloCoreLightHCMonaco',
+        cmExport: 'apolloCoreLightHCCodeMirror',
+        monacoThemeObj: apolloCoreLightHCMonaco,
+        cmTokens: apolloCoreLightHCCodeMirror,
+        isDark: false,
+        family: 'Core HC'
+    }
+];
+const monacoFullSample = `import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+type SortDirection = 'asc' | 'desc';
+
+interface Column<T> {
+  key: keyof T;
+  header: string;
+  sortable?: boolean;
+  render?: (value: T[keyof T], row: T) => ReactNode;
+}
+
+interface TableProps<T> {
+  data: T[];
+  columns: Column<T>[];
+  pageSize?: number;
+}
+
+export function DataTable<T extends { id: string | number }>({
+  data,
+  columns,
+  pageSize = 10,
+}: TableProps<T>) {
+  const [query, setQuery] = useState('');
+  const [sortKey, setSortKey] = useState<keyof T | null>(null);
+  const [sortDir, setSortDir] = useState<SortDirection>('asc');
+  const [page, setPage] = useState(1);
+
+  useEffect(() => { setPage(1); }, [query, sortKey, sortDir]);
+
+  const filtered = useMemo(() => {
+    if (!query.trim()) return data;
+    const q = query.toLowerCase();
+    return data.filter((row) =>
+      columns.some((col) => String(row[col.key]).toLowerCase().includes(q))
+    );
+  }, [data, columns, query]);
+
+  const sorted = useMemo(() => {
+    if (!sortKey) return filtered;
+    return [...filtered].sort((a, b) => {
+      const cmp = a[sortKey] < b[sortKey] ? -1 : a[sortKey] > b[sortKey] ? 1 : 0;
+      return sortDir === 'asc' ? cmp : -cmp;
+    });
+  }, [filtered, sortKey, sortDir]);
+
+  return (
+    <div className="flex flex-col gap-4">
+      <input
+        className="rounded-lg border border-border px-3 py-2 text-sm"
+        placeholder="Search..."
+        value={query}
+        onChange={(e) => setQuery(e.target.value)}
+      />
+      <table className="w-full text-sm">
+        <thead>
+          <tr className="border-b border-border">
+            {columns.map((col) => (
+              <th key={String(col.key)} className="px-4 py-2 text-left">
+                {col.header}
+              </th>
+            ))}
+          </tr>
+        </thead>
+      </table>
+    </div>
+  );
+}`.trim();
+const monacoSample = `interface WorkflowNode {
+  id: string;
+  type: 'action' | 'condition' | 'trigger';
+  executionStatus: 'NotExecuted' | 'InProgress' | 'Completed' | 'Failed';
+}
+
+function getNextNodes(node: WorkflowNode): string[] {
+  if (node.executionStatus === 'Completed') {
+    return node.type === 'condition'
+      ? ['true-branch', 'false-branch']
+      : ['next'];
+  }
+  return [];
+}`.trim();
+let monacoThemesRegistered = false;
+function registerAllMonacoThemes(monaco) {
+    if (monacoThemesRegistered) return;
+    for (const cfg of editorThemeConfigs)monaco.editor.defineTheme(cfg.monacoThemeName, cfg.monacoThemeObj);
+    monacoThemesRegistered = true;
+}
+let demoDefaultsUsers = 0;
+let savedTypescriptDefaults = null;
+function acquireDemoTypescriptDefaults(monaco) {
+    demoDefaultsUsers += 1;
+    if (demoDefaultsUsers > 1) return;
+    const ts = monaco.languages.typescript.typescriptDefaults;
+    savedTypescriptDefaults = {
+        diagnostics: ts.getDiagnosticsOptions(),
+        compiler: ts.getCompilerOptions()
+    };
+    ts.setDiagnosticsOptions({
+        ...ts.getDiagnosticsOptions(),
+        noSemanticValidation: true
+    });
+    ts.setCompilerOptions({
+        ...ts.getCompilerOptions(),
+        jsx: monaco.languages.typescript.JsxEmit.Preserve
+    });
+}
+function releaseDemoTypescriptDefaults(monaco) {
+    demoDefaultsUsers -= 1;
+    if (demoDefaultsUsers > 0 || !savedTypescriptDefaults) return;
+    const ts = monaco.languages.typescript.typescriptDefaults;
+    ts.setDiagnosticsOptions(savedTypescriptDefaults.diagnostics);
+    ts.setCompilerOptions(savedTypescriptDefaults.compiler);
+    savedTypescriptDefaults = null;
+}
+function LiveMonacoEditor({ themeConfig, height = '220px', value, onChange, onMount, language = "typescript", options = {} }) {
+    const extension = 'json' === language ? 'json' : 'tsx';
+    const modelPath = `file:///editor-${useId().replace(/[^a-zA-Z0-9]/g, '')}.${extension}`;
+    const monacoRef = useRef(null);
+    useEffect(()=>()=>{
+            if (monacoRef.current) releaseDemoTypescriptDefaults(monacoRef.current);
+            monacoRef.current = null;
+        }, []);
+    return /*#__PURE__*/ jsx(react, {
+        height: height,
+        path: modelPath,
+        defaultLanguage: language,
+        ...onChange ? {
+            value: value ?? ''
+        } : {
+            defaultValue: value ?? monacoSample
+        },
+        theme: themeConfig.monacoThemeName,
+        beforeMount: (monaco)=>{
+            registerAllMonacoThemes(monaco);
+            if (!monacoRef.current) {
+                monacoRef.current = monaco;
+                acquireDemoTypescriptDefaults(monaco);
+            }
+        },
+        onChange: onChange,
+        onMount: onMount,
+        options: {
+            fontSize: 13,
+            lineHeight: 20,
+            minimap: {
+                enabled: false
+            },
+            scrollBeyondLastLine: false,
+            wordWrap: 'on',
+            fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace',
+            padding: {
+                top: 16,
+                bottom: 16
+            },
+            lineNumbers: 'on',
+            glyphMargin: false,
+            folding: false,
+            renderLineHighlight: 'line',
+            hideCursorInOverviewRuler: true,
+            overviewRulerBorder: false,
+            scrollbar: {
+                vertical: 'auto',
+                horizontal: 'hidden',
+                alwaysConsumeMouseWheel: false
+            },
+            automaticLayout: true,
+            fixedOverflowWidgets: true,
+            ...options
+        }
+    });
+}
+const futureDarkConfig = editorThemeConfigs[0];
+function getStorybookThemeConfig() {
+    const keys = editorThemeConfigs.map((c)=>c.key);
+    const found = Array.from(document.body.classList).find((c)=>keys.includes(c));
+    return editorThemeConfigs.find((c)=>c.key === found) ?? futureDarkConfig;
+}
+function useEditorThemeConfig() {
+    const [themeConfig, setThemeConfig] = useState(getStorybookThemeConfig);
+    useEffect(()=>{
+        const observer = new MutationObserver(()=>setThemeConfig(getStorybookThemeConfig()));
+        observer.observe(document.body, {
+            attributes: true,
+            attributeFilter: [
+                'class'
+            ]
+        });
+        return ()=>observer.disconnect();
+    }, []);
+    return themeConfig;
+}
+export { LiveMonacoEditor, editorThemeConfigs, monacoFullSample, monacoSample, registerAllMonacoThemes, useEditorThemeConfig };

package/dist/components/ui/dialog.cjs

@@ -53,6 +53,7 @@ const external_lucide_react_namespaceObject = require("lucide-react");
 const external_react_namespaceObject = require("react");
 const external_button_cjs_namespaceObject = require("./button.cjs");
 const external_portal_container_cjs_namespaceObject = require("./portal-container.cjs");
+const dialog_surface_cjs_namespaceObject = require("../../lib/dialog-surface.cjs");
 const index_cjs_namespaceObject = require("../../lib/index.cjs");
 function Dialog({ ...props }) {
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_dialog_namespaceObject.Root, {
@@ -73,7 +74,7 @@ function DialogPortal({ ...props }) {
         ...props
     });
 }
-const dialogContentVariants = (0, external_class_variance_authority_namespaceObject.cva)('bg-surface-raised text-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 relative z-50 border border-border-subtle shadow-xl duration-200', {
+const dialogContentVariants = (0, external_class_variance_authority_namespaceObject.cva)(`${dialog_surface_cjs_namespaceObject.dialogSurfaceClassName} data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 relative z-50 duration-200`, {
     variants: {
         variant: {
             default: 'grid w-full max-w-[calc(100%-2rem)] gap-4 rounded-2xl p-6 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 sm:max-w-lg',

package/dist/components/ui/dialog.js

@@ -6,6 +6,7 @@ import { Maximize2, Minimize2, XIcon } from "lucide-react";
 import { forwardRef, useState } from "react";
 import { Button } from "./button.js";
 import { useResolvedPortalContainer } from "./portal-container.js";
+import { dialogSurfaceClassName } from "../../lib/dialog-surface.js";
 import { cn } from "../../lib/index.js";
 function Dialog({ ...props }) {
     return /*#__PURE__*/ jsx(Root, {
@@ -26,7 +27,7 @@ function DialogPortal({ ...props }) {
         ...props
     });
 }
-const dialogContentVariants = cva('bg-surface-raised text-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 relative z-50 border border-border-subtle shadow-xl duration-200', {
+const dialogContentVariants = cva(`${dialogSurfaceClassName} data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 relative z-50 duration-200`, {
     variants: {
         variant: {
             default: 'grid w-full max-w-[calc(100%-2rem)] gap-4 rounded-2xl p-6 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 sm:max-w-lg',

package/dist/components/ui/field-actions/ai-assist-action.cjs

@@ -40,16 +40,42 @@ const DEFAULT_AI_ASSIST_ACTION_STRINGS = {
     tooltip: 'Generate with AI',
     prompt: 'Describe what you want',
     promptPlaceholder: 'Display a value from the previous step',
-    generate: 'Generate'
+    generate: 'Generate',
+    generating: 'Generating',
+    error: 'Could not generate a value. Try again.'
 };
-function AiAssistAction({ onGenerate, hint, strings }) {
+function AiAssistAction({ onGenerate, hint, disabled, strings }) {
     const promptId = (0, external_react_namespaceObject.useId)();
+    const errorId = (0, external_react_namespaceObject.useId)();
     const [prompt, setPrompt] = (0, external_react_namespaceObject.useState)('');
+    const [open, setOpen] = (0, external_react_namespaceObject.useState)(false);
+    const [pending, setPending] = (0, external_react_namespaceObject.useState)(false);
+    const [failed, setFailed] = (0, external_react_namespaceObject.useState)(false);
     const text = {
         ...DEFAULT_AI_ASSIST_ACTION_STRINGS,
         ...strings
     };
+    const changeOpen = (next)=>{
+        setFailed(false);
+        setOpen(next);
+    };
+    const generate = async ()=>{
+        setFailed(false);
+        const result = onGenerate?.(prompt);
+        if (!isThenable(result)) return;
+        setPending(true);
+        try {
+            await result;
+            setOpen(false);
+        } catch  {
+            setFailed(true);
+        } finally{
+            setPending(false);
+        }
+    };
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_popover_cjs_namespaceObject.Popover, {
+        open: open && !disabled,
+        onOpenChange: changeOpen,
         children: [
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_tooltip_cjs_namespaceObject.Tooltip, {
                 children: [
@@ -60,7 +86,8 @@ function AiAssistAction({ onGenerate, hint, strings }) {
                             children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
                                 type: "button",
                                 "aria-label": text.trigger,
-                                className: "grid size-7 place-items-center rounded-lg text-foreground-subtle transition hover:bg-surface-overlay hover:text-foreground",
+                                disabled: disabled,
+                                className: "grid size-7 place-items-center rounded-lg text-foreground-subtle transition hover:bg-surface-overlay hover:text-foreground disabled:pointer-events-none disabled:opacity-50",
                                 children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Sparkles, {
                                     size: 12
                                 })
@@ -90,6 +117,7 @@ function AiAssistAction({ onGenerate, hint, strings }) {
                                 value: prompt,
                                 onChange: (e)=>setPrompt(e.target.value),
                                 placeholder: text.promptPlaceholder,
+                                "aria-describedby": failed ? errorId : void 0,
                                 className: "resize-none text-sm"
                             })
                         ]
@@ -98,18 +126,34 @@ function AiAssistAction({ onGenerate, hint, strings }) {
                         className: "block text-[11px] text-foreground-subtle",
                         children: hint
                     }),
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_button_cjs_namespaceObject.Button, {
+                    failed && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
+                        id: errorId,
+                        role: "alert",
+                        className: "text-xs text-error",
+                        children: text.error
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_button_cjs_namespaceObject.Button, {
                         size: "sm",
                         className: "w-full",
-                        disabled: !onGenerate,
-                        onClick: ()=>onGenerate?.(prompt),
-                        children: text.generate
+                        disabled: !onGenerate || pending,
+                        "aria-busy": pending || void 0,
+                        onClick: ()=>generate(),
+                        children: [
+                            pending && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Loader2, {
+                                className: "animate-spin",
+                                "aria-hidden": "true"
+                            }),
+                            pending ? text.generating : text.generate
+                        ]
                     })
                 ]
             })
         ]
     });
 }
+function isThenable(value) {
+    return ('object' == typeof value || 'function' == typeof value) && null !== value && 'function' == typeof value.then;
+}
 exports.AiAssistAction = __webpack_exports__.AiAssistAction;
 exports.DEFAULT_AI_ASSIST_ACTION_STRINGS = __webpack_exports__.DEFAULT_AI_ASSIST_ACTION_STRINGS;
 for(var __rspack_i in __webpack_exports__)if (-1 === [

package/dist/components/ui/field-actions/ai-assist-action.d.ts

@@ -5,11 +5,20 @@ export interface AiAssistActionStrings {
     prompt: string;
     promptPlaceholder: string;
     generate: string;
+    /** Replaces `generate` while a returned promise is pending. */
+    generating: string;
+    /** Shown when a returned promise rejects. */
+    error: string;
 }
 export declare const DEFAULT_AI_ASSIST_ACTION_STRINGS: AiAssistActionStrings;
 export interface AiAssistActionProps {
-    /** Called with the entered prompt. Omitted, Generate is disabled. */
-    onGenerate?: (prompt: string) => void;
+    /**
+     * Called with the entered prompt. Omitted, Generate is disabled. A returned promise keeps the
+     * prompt open and busy until it settles: it closes once the promise resolves and stays open,
+     * prompt intact and the error shown, if it rejects.
+     */
+    onGenerate?: (prompt: string) => unknown;
+    disabled?: boolean;
     /** A line under the prompt describing what will be generated, such as the value's type. */
     hint?: ReactNode;
     /** Overrides for any subset of the English strings. */
@@ -18,4 +27,4 @@ export interface AiAssistActionProps {
 /**
  * The AI-assist header action: a prompt in a popover. Requires an ancestor `TooltipProvider`.
  */
-export declare function AiAssistAction({ onGenerate, hint, strings }: AiAssistActionProps): import("react/jsx-runtime").JSX.Element;
+export declare function AiAssistAction({ onGenerate, hint, disabled, strings }: AiAssistActionProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/field-actions/ai-assist-action.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Sparkles } from "lucide-react";
+import { Loader2, Sparkles } from "lucide-react";
 import { useId, useState } from "react";
 import { Button } from "../button.js";
 import { Label } from "../label.js";
@@ -11,16 +11,42 @@ const DEFAULT_AI_ASSIST_ACTION_STRINGS = {
     tooltip: 'Generate with AI',
     prompt: 'Describe what you want',
     promptPlaceholder: 'Display a value from the previous step',
-    generate: 'Generate'
+    generate: 'Generate',
+    generating: 'Generating',
+    error: 'Could not generate a value. Try again.'
 };
-function AiAssistAction({ onGenerate, hint, strings }) {
+function AiAssistAction({ onGenerate, hint, disabled, strings }) {
     const promptId = useId();
+    const errorId = useId();
     const [prompt, setPrompt] = useState('');
+    const [open, setOpen] = useState(false);
+    const [pending, setPending] = useState(false);
+    const [failed, setFailed] = useState(false);
     const text = {
         ...DEFAULT_AI_ASSIST_ACTION_STRINGS,
         ...strings
     };
+    const changeOpen = (next)=>{
+        setFailed(false);
+        setOpen(next);
+    };
+    const generate = async ()=>{
+        setFailed(false);
+        const result = onGenerate?.(prompt);
+        if (!isThenable(result)) return;
+        setPending(true);
+        try {
+            await result;
+            setOpen(false);
+        } catch  {
+            setFailed(true);
+        } finally{
+            setPending(false);
+        }
+    };
     return /*#__PURE__*/ jsxs(Popover, {
+        open: open && !disabled,
+        onOpenChange: changeOpen,
         children: [
             /*#__PURE__*/ jsxs(Tooltip, {
                 children: [
@@ -31,7 +57,8 @@ function AiAssistAction({ onGenerate, hint, strings }) {
                             children: /*#__PURE__*/ jsx("button", {
                                 type: "button",
                                 "aria-label": text.trigger,
-                                className: "grid size-7 place-items-center rounded-lg text-foreground-subtle transition hover:bg-surface-overlay hover:text-foreground",
+                                disabled: disabled,
+                                className: "grid size-7 place-items-center rounded-lg text-foreground-subtle transition hover:bg-surface-overlay hover:text-foreground disabled:pointer-events-none disabled:opacity-50",
                                 children: /*#__PURE__*/ jsx(Sparkles, {
                                     size: 12
                                 })
@@ -61,6 +88,7 @@ function AiAssistAction({ onGenerate, hint, strings }) {
                                 value: prompt,
                                 onChange: (e)=>setPrompt(e.target.value),
                                 placeholder: text.promptPlaceholder,
+                                "aria-describedby": failed ? errorId : void 0,
                                 className: "resize-none text-sm"
                             })
                         ]
@@ -69,16 +97,32 @@ function AiAssistAction({ onGenerate, hint, strings }) {
                         className: "block text-[11px] text-foreground-subtle",
                         children: hint
                     }),
-                    /*#__PURE__*/ jsx(Button, {
+                    failed && /*#__PURE__*/ jsx("p", {
+                        id: errorId,
+                        role: "alert",
+                        className: "text-xs text-error",
+                        children: text.error
+                    }),
+                    /*#__PURE__*/ jsxs(Button, {
                         size: "sm",
                         className: "w-full",
-                        disabled: !onGenerate,
-                        onClick: ()=>onGenerate?.(prompt),
-                        children: text.generate
+                        disabled: !onGenerate || pending,
+                        "aria-busy": pending || void 0,
+                        onClick: ()=>generate(),
+                        children: [
+                            pending && /*#__PURE__*/ jsx(Loader2, {
+                                className: "animate-spin",
+                                "aria-hidden": "true"
+                            }),
+                            pending ? text.generating : text.generate
+                        ]
                     })
                 ]
             })
         ]
     });
 }
+function isThenable(value) {
+    return ('object' == typeof value || 'function' == typeof value) && null !== value && 'function' == typeof value.then;
+}
 export { AiAssistAction, DEFAULT_AI_ASSIST_ACTION_STRINGS };

package/dist/components/ui/field-actions/insert-variable-action.cjs

@@ -29,35 +29,36 @@ __webpack_require__.d(__webpack_exports__, {
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const external_lucide_react_namespaceObject = require("lucide-react");
+const external_react_namespaceObject = require("react");
 const index_cjs_namespaceObject = require("../variable-picker/index.cjs");
 const external_lib_index_cjs_namespaceObject = require("../../../lib/index.cjs");
 const external_collapse_cjs_namespaceObject = require("./collapse.cjs");
 const DEFAULT_INSERT_VARIABLE_ACTION_STRINGS = {
     label: 'Insert',
-    ariaLabel: 'Insert variable'
+    ariaLabel: 'Insert variable',
+    searchPlaceholder: 'Search variables...',
+    empty: 'No variables found.',
+    replaceTitle: 'Replace the value?',
+    replaceDescription: 'The variable will replace the current value. This cannot be undone.',
+    replaceConfirm: 'Replace'
 };
 function InsertVariableAction({ variables, onInsert, disabled, compact, strings }) {
     const text = {
         ...DEFAULT_INSERT_VARIABLE_ACTION_STRINGS,
         ...strings
     };
-    const inert = disabled || 0 === variables.length || !onInsert;
+    const lazy = 'function' == typeof variables;
+    const inert = disabled || !onInsert || !lazy && 0 === variables.length;
+    const [openedItems, setOpenedItems] = (0, external_react_namespaceObject.useState)([]);
     const collapsedTextClass = (0, external_lib_index_cjs_namespaceObject.cn)(external_collapse_cjs_namespaceObject.COLLAPSED_HIDDEN, compact && '!hidden');
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.VariablePicker, {
         disabled: inert,
-        items: [
-            {
-                id: 'vars',
-                label: '$vars',
-                type: 'object',
-                children: variables.map((variable)=>({
-                        id: variable.value,
-                        label: variable.label,
-                        value: variable.value,
-                        type: 'string'
-                    }))
-            }
-        ],
+        items: lazy ? openedItems : variables,
+        placeholder: text.searchPlaceholder,
+        emptyText: text.empty,
+        onOpenChange: (open)=>{
+            if (open && lazy) setOpenedItems(variables());
+        },
         onSelect: (variable)=>{
             if (variable.value) onInsert?.(variable.value);
         },

package/dist/components/ui/field-actions/insert-variable-action.d.ts

@@ -1,15 +1,26 @@
+import { type VariablePickerItem } from '../variable-picker';
 export interface InsertVariableActionStrings {
     /** Visible text, hidden when the action collapses to its icon. */
     label: string;
     /** Accessible name and hover title. */
     ariaLabel: string;
+    /** The picker's search box. */
+    searchPlaceholder: string;
+    /** The picker with nothing to show. */
+    empty: string;
+    /** Confirms replacing a value that cannot take the reference at a caret. */
+    replaceTitle: string;
+    replaceDescription: string;
+    replaceConfirm: string;
 }
 export declare const DEFAULT_INSERT_VARIABLE_ACTION_STRINGS: InsertVariableActionStrings;
 export interface InsertVariableActionProps {
-    variables: {
-        label: string;
-        value: string;
-    }[];
+    /**
+     * The variables to offer, rendered as supplied: the picker adds no root and no types. A function
+     * is called each time the picker opens, never during render, so a host can hand over a live
+     * source without re-rendering the field whenever it changes.
+     */
+    variables: VariablePickerItem[] | (() => VariablePickerItem[]);
     /** Called with the picked variable's value. Omitted, the action is disabled. */
     onInsert?: (value: string) => void;
     disabled?: boolean;

package/dist/components/ui/field-actions/insert-variable-action.js

@@ -1,34 +1,35 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Braces, ChevronDown } from "lucide-react";
+import { useState } from "react";
 import { VariablePicker } from "../variable-picker/index.js";
 import { cn } from "../../../lib/index.js";
 import { COLLAPSED_HIDDEN, COLLAPSED_ICON_PADDING } from "./collapse.js";
 const DEFAULT_INSERT_VARIABLE_ACTION_STRINGS = {
     label: 'Insert',
-    ariaLabel: 'Insert variable'
+    ariaLabel: 'Insert variable',
+    searchPlaceholder: 'Search variables...',
+    empty: 'No variables found.',
+    replaceTitle: 'Replace the value?',
+    replaceDescription: 'The variable will replace the current value. This cannot be undone.',
+    replaceConfirm: 'Replace'
 };
 function InsertVariableAction({ variables, onInsert, disabled, compact, strings }) {
     const text = {
         ...DEFAULT_INSERT_VARIABLE_ACTION_STRINGS,
         ...strings
     };
-    const inert = disabled || 0 === variables.length || !onInsert;
+    const lazy = 'function' == typeof variables;
+    const inert = disabled || !onInsert || !lazy && 0 === variables.length;
+    const [openedItems, setOpenedItems] = useState([]);
     const collapsedTextClass = cn(COLLAPSED_HIDDEN, compact && '!hidden');
     return /*#__PURE__*/ jsx(VariablePicker, {
         disabled: inert,
-        items: [
-            {
-                id: 'vars',
-                label: '$vars',
-                type: 'object',
-                children: variables.map((variable)=>({
-                        id: variable.value,
-                        label: variable.label,
-                        value: variable.value,
-                        type: 'string'
-                    }))
-            }
-        ],
+        items: lazy ? openedItems : variables,
+        placeholder: text.searchPlaceholder,
+        emptyText: text.empty,
+        onOpenChange: (open)=>{
+            if (open && lazy) setOpenedItems(variables());
+        },
         onSelect: (variable)=>{
             if (variable.value) onInsert?.(variable.value);
         },