@uipath/apollo-wind 2.31.1 → 2.32.0

package/dist/components/custom/panel-flow.cjs

@@ -30,11 +30,11 @@ __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 external_chat_composer_cjs_namespaceObject = require("./chat-composer.cjs");
 const avatar_cjs_namespaceObject = require("../ui/avatar.cjs");
 const collapsible_cjs_namespaceObject = require("../ui/collapsible.cjs");
 const tooltip_cjs_namespaceObject = require("../ui/tooltip.cjs");
 const index_cjs_namespaceObject = require("../../lib/index.cjs");
-const external_chat_composer_cjs_namespaceObject = require("./chat-composer.cjs");
 function UiPathLogo() {
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
         className: "flex h-9 w-9 items-center justify-center overflow-clip rounded-lg bg-[#0092b8] shadow-sm",
@@ -173,7 +173,7 @@ function ToolCard({ card }) {
                             }),
                             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
                                 className: "flex flex-col gap-3",
-                                children: card.items.map((item, i)=>{
+                                children: card.items.map((item, index)=>{
                                     const Icon = toolIconMap[item.icon];
                                     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
                                         className: "flex items-start gap-2.5 pl-4 pr-9",
@@ -198,7 +198,7 @@ function ToolCard({ card }) {
                                                 ]
                                             })
                                         ]
-                                    }, i);
+                                    }, item.id ?? `${item.icon}-${item.title}-${item.description}-${index}`);
                                 })
                             })
                         ]

package/dist/components/custom/panel-flow.d.ts

@@ -5,6 +5,8 @@ export interface FlowPanelNavItem {
     icon: React.ReactNode;
 }
 export interface FlowPanelToolItem {
+    /** Stable identifier used when rendering dynamic tool lists. */
+    id?: string;
     icon: 'search' | 'bot';
     title: string;
     description: string;

package/dist/components/custom/panel-flow.js

@@ -1,11 +1,11 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Bot, Brain, ChevronUp, Copy, House, MessageCircle, PanelRightOpen, RefreshCcw, Search, ThumbsDown, ThumbsUp, Workflow } from "lucide-react";
 import { useState } from "react";
+import { ChatComposer } from "./chat-composer.js";
 import { Avatar, AvatarFallback } from "../ui/avatar.js";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../ui/collapsible.js";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../ui/tooltip.js";
 import { cn } from "../../lib/index.js";
-import { ChatComposer } from "./chat-composer.js";
 function UiPathLogo() {
     return /*#__PURE__*/ jsx("div", {
         className: "flex h-9 w-9 items-center justify-center overflow-clip rounded-lg bg-[#0092b8] shadow-sm",
@@ -144,7 +144,7 @@ function ToolCard({ card }) {
                             }),
                             /*#__PURE__*/ jsx("div", {
                                 className: "flex flex-col gap-3",
-                                children: card.items.map((item, i)=>{
+                                children: card.items.map((item, index)=>{
                                     const Icon = toolIconMap[item.icon];
                                     return /*#__PURE__*/ jsxs("div", {
                                         className: "flex items-start gap-2.5 pl-4 pr-9",
@@ -169,7 +169,7 @@ function ToolCard({ card }) {
                                                 ]
                                             })
                                         ]
-                                    }, i);
+                                    }, item.id ?? `${item.icon}-${item.title}-${item.description}-${index}`);
                                 })
                             })
                         ]

package/dist/components/ui/file-upload.cjs

@@ -32,7 +32,7 @@ const external_lucide_react_namespaceObject = require("lucide-react");
 const external_react_namespaceObject = require("react");
 const external_button_cjs_namespaceObject = require("./button.cjs");
 const index_cjs_namespaceObject = require("../../lib/index.cjs");
-function FileUpload({ onFilesChange, accept, multiple = false, disabled = false, maxSize, className, showPreview = false, errors }) {
+function FileUpload({ id, ariaLabel, onFilesChange, accept, multiple = false, disabled = false, maxSize, className, showPreview = false, errors, onBlur }) {
     const [files, setFiles] = external_react_namespaceObject.useState([]);
     const [isDragging, setIsDragging] = external_react_namespaceObject.useState(false);
     const [fileErrors, setFileErrors] = external_react_namespaceObject.useState(new Map());
@@ -160,13 +160,29 @@ function FileUpload({ onFilesChange, accept, multiple = false, disabled = false,
         const i = Math.floor(Math.log(bytes) / Math.log(k));
         return Math.round(bytes / k ** i * 100) / 100 + ' ' + sizes[i];
     };
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-        className: (0, index_cjs_namespaceObject.cn)('w-full', className),
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("fieldset", {
+        className: (0, index_cjs_namespaceObject.cn)('m-0 min-w-0 w-full border-0 p-0', className),
+        onBlur: (event)=>{
+            if (!event.currentTarget.contains(event.relatedTarget)) onBlur?.(event);
+        },
         children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("input", {
+                ref: inputRef,
+                id: id,
+                type: "file",
+                className: "hidden",
+                accept: accept,
+                multiple: multiple,
+                disabled: disabled,
+                onChange: handleInputChange,
+                "aria-label": id ? void 0 : ariaLabel ?? 'File upload'
+            }),
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-                role: "group",
-                "aria-label": "File upload area",
-                className: (0, index_cjs_namespaceObject.cn)('relative flex flex-col items-center justify-center w-full h-32 px-4 py-6 border-2 border-dashed rounded-lg cursor-pointer transition-colors', 'future:rounded-xl', isDragging ? 'border-primary bg-primary/5' : 'border-input bg-background hover:bg-accent/50 future:border-border future:bg-surface-raised future:hover:bg-surface-overlay', disabled && 'opacity-50 cursor-not-allowed hover:bg-background future:hover:bg-surface-raised'),
+                role: "button",
+                "aria-label": ariaLabel ?? 'File upload area',
+                "aria-disabled": disabled,
+                tabIndex: disabled ? -1 : 0,
+                className: (0, index_cjs_namespaceObject.cn)('relative flex flex-col items-center justify-center w-full h-32 px-4 py-6 border-2 border-dashed rounded-lg cursor-pointer transition-colors', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background', 'future:rounded-xl', isDragging ? 'border-primary bg-primary/5' : 'border-input bg-background hover:bg-accent/50 future:border-border future:bg-surface-raised future:hover:bg-surface-overlay', disabled && 'opacity-50 cursor-not-allowed hover:bg-background future:hover:bg-surface-raised'),
                 onDragEnter: handleDragEnter,
                 onDragOver: handleDragOver,
                 onDragLeave: handleDragLeave,
@@ -179,16 +195,6 @@ function FileUpload({ onFilesChange, accept, multiple = false, disabled = false,
                     }
                 },
                 children: [
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("input", {
-                        ref: inputRef,
-                        type: "file",
-                        className: "hidden",
-                        accept: accept,
-                        multiple: multiple,
-                        disabled: disabled,
-                        onChange: handleInputChange,
-                        "aria-label": "File upload"
-                    }),
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Upload, {
                         className: "w-8 h-8 mb-2 text-muted-foreground"
                     }),

package/dist/components/ui/file-upload.d.ts

@@ -1,4 +1,21 @@
+import * as React from 'react';
 export interface FileUploadProps {
+    /**
+     * Applied to the underlying `<input type="file">`, so an external
+     * `<label htmlFor>` can activate it (click-to-open) like any other labelable
+     * control. The dropzone itself is a `div[role=button]`, which isn't labelable,
+     * hence `ariaLabel` below for naming that part.
+     */
+    id?: string;
+    /**
+     * Names the dropzone (`div[role=button]`, not a labelable element, so a
+     * surrounding `<label htmlFor>` can't associate with it -- pass the field's
+     * visible label text here instead). Also names the `<input type="file">`
+     * itself when `id` is omitted; when `id` is provided, an external
+     * `<label htmlFor>` names the input instead (aria-label would otherwise
+     * override it in the accessible-name computation).
+     */
+    ariaLabel?: string;
     onFilesChange?: (files: File[]) => void;
     accept?: string;
     multiple?: boolean;
@@ -8,5 +25,6 @@ export interface FileUploadProps {
     showPreview?: boolean;
     /** External errors keyed by filename. Use this to set errors from outside (e.g., upload failures). */
     errors?: Record<string, string>;
+    onBlur?: React.FocusEventHandler<HTMLFieldSetElement>;
 }
-export declare function FileUpload({ onFilesChange, accept, multiple, disabled, maxSize, className, showPreview, errors, }: FileUploadProps): import("react/jsx-runtime").JSX.Element;
+export declare function FileUpload({ id, ariaLabel, onFilesChange, accept, multiple, disabled, maxSize, className, showPreview, errors, onBlur, }: FileUploadProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/file-upload.js

@@ -4,7 +4,7 @@ import { Upload, X } from "lucide-react";
 import { useRef, useState } from "react";
 import { Button } from "./button.js";
 import { cn } from "../../lib/index.js";
-function FileUpload({ onFilesChange, accept, multiple = false, disabled = false, maxSize, className, showPreview = false, errors }) {
+function FileUpload({ id, ariaLabel, onFilesChange, accept, multiple = false, disabled = false, maxSize, className, showPreview = false, errors, onBlur }) {
     const [files, setFiles] = useState([]);
     const [isDragging, setIsDragging] = useState(false);
     const [fileErrors, setFileErrors] = useState(new Map());
@@ -132,13 +132,29 @@ function FileUpload({ onFilesChange, accept, multiple = false, disabled = false,
         const i = Math.floor(Math.log(bytes) / Math.log(k));
         return Math.round(bytes / k ** i * 100) / 100 + ' ' + sizes[i];
     };
-    return /*#__PURE__*/ jsxs("div", {
-        className: cn('w-full', className),
+    return /*#__PURE__*/ jsxs("fieldset", {
+        className: cn('m-0 min-w-0 w-full border-0 p-0', className),
+        onBlur: (event)=>{
+            if (!event.currentTarget.contains(event.relatedTarget)) onBlur?.(event);
+        },
         children: [
+            /*#__PURE__*/ jsx("input", {
+                ref: inputRef,
+                id: id,
+                type: "file",
+                className: "hidden",
+                accept: accept,
+                multiple: multiple,
+                disabled: disabled,
+                onChange: handleInputChange,
+                "aria-label": id ? void 0 : ariaLabel ?? 'File upload'
+            }),
             /*#__PURE__*/ jsxs("div", {
-                role: "group",
-                "aria-label": "File upload area",
-                className: cn('relative flex flex-col items-center justify-center w-full h-32 px-4 py-6 border-2 border-dashed rounded-lg cursor-pointer transition-colors', 'future:rounded-xl', isDragging ? 'border-primary bg-primary/5' : 'border-input bg-background hover:bg-accent/50 future:border-border future:bg-surface-raised future:hover:bg-surface-overlay', disabled && 'opacity-50 cursor-not-allowed hover:bg-background future:hover:bg-surface-raised'),
+                role: "button",
+                "aria-label": ariaLabel ?? 'File upload area',
+                "aria-disabled": disabled,
+                tabIndex: disabled ? -1 : 0,
+                className: cn('relative flex flex-col items-center justify-center w-full h-32 px-4 py-6 border-2 border-dashed rounded-lg cursor-pointer transition-colors', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background', 'future:rounded-xl', isDragging ? 'border-primary bg-primary/5' : 'border-input bg-background hover:bg-accent/50 future:border-border future:bg-surface-raised future:hover:bg-surface-overlay', disabled && 'opacity-50 cursor-not-allowed hover:bg-background future:hover:bg-surface-raised'),
                 onDragEnter: handleDragEnter,
                 onDragOver: handleDragOver,
                 onDragLeave: handleDragLeave,
@@ -151,16 +167,6 @@ function FileUpload({ onFilesChange, accept, multiple = false, disabled = false,
                     }
                 },
                 children: [
-                    /*#__PURE__*/ jsx("input", {
-                        ref: inputRef,
-                        type: "file",
-                        className: "hidden",
-                        accept: accept,
-                        multiple: multiple,
-                        disabled: disabled,
-                        onChange: handleInputChange,
-                        "aria-label": "File upload"
-                    }),
                     /*#__PURE__*/ jsx(Upload, {
                         className: "w-8 h-8 mb-2 text-muted-foreground"
                     }),

package/dist/components/ui/index.cjs

@@ -57,7 +57,7 @@ var __webpack_modules__ = {
     "./datetime-picker" (module) {
         module.exports = require("./datetime-picker.cjs");
     },
-    "@/components/ui/dialog" (module) {
+    "./dialog" (module) {
         module.exports = require("./dialog.cjs");
     },
     "./dropdown-menu" (module) {
@@ -345,7 +345,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_datetime_picker__rspack_import_18[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _dialog__rspack_import_19 = __webpack_require__("@/components/ui/dialog");
+    var _dialog__rspack_import_19 = __webpack_require__("./dialog");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _dialog__rspack_import_19)if ([
         "TreeView",

package/dist/components/ui/lockable-value-field/components/field-header.cjs

@@ -0,0 +1,327 @@
+"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__, {
+    FieldHeader: ()=>FieldHeader
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_lucide_react_namespaceObject = require("lucide-react");
+const external_react_namespaceObject = require("react");
+const external_button_cjs_namespaceObject = require("../../button.cjs");
+const external_dropdown_menu_cjs_namespaceObject = require("../../dropdown-menu.cjs");
+const external_label_cjs_namespaceObject = require("../../label.cjs");
+const external_popover_cjs_namespaceObject = require("../../popover.cjs");
+const external_switch_cjs_namespaceObject = require("../../switch.cjs");
+const external_textarea_cjs_namespaceObject = require("../../textarea.cjs");
+const external_tooltip_cjs_namespaceObject = require("../../tooltip.cjs");
+const index_cjs_namespaceObject = require("../../../../lib/index.cjs");
+const external_types_cjs_namespaceObject = require("../types.cjs");
+function FieldHeader({ label, fieldId, fieldLabel, required, fieldType, onFieldTypeChange, onRequiredChange, controlsVisibility, compact, showFieldActions, value, onValueChange, variables, onGenerateWithAi, headerActions }) {
+    const promptId = (0, external_react_namespaceObject.useId)();
+    const [aiPrompt, setAiPrompt] = (0, external_react_namespaceObject.useState)('');
+    const typeMeta = external_types_cjs_namespaceObject.FIELD_TYPE_META[fieldType];
+    const collapsedTextClass = (0, index_cjs_namespaceObject.cn)('@max-[259px]:hidden', compact && '!hidden');
+    const collapsedPaddingClass = (0, index_cjs_namespaceObject.cn)('@max-[259px]:px-1.5', compact && '!px-1.5');
+    const compactOnlyClass = (0, index_cjs_namespaceObject.cn)('hidden @max-[259px]:block', compact && '!block');
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+        className: "flex items-center gap-1",
+        children: [
+            label ?? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_label_cjs_namespaceObject.Label, {
+                htmlFor: fieldId,
+                className: "text-xs font-medium text-foreground-muted",
+                children: [
+                    fieldLabel,
+                    required && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                        className: "ml-0.5 text-destructive",
+                        children: "*"
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_tooltip_cjs_namespaceObject.TooltipProvider, {
+                delayDuration: 300,
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                    className: "ml-auto flex items-center gap-0.5",
+                    children: [
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                            className: (0, index_cjs_namespaceObject.cn)('flex items-center gap-0.5', 'hover' === controlsVisibility && 'opacity-0 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100 has-[[aria-expanded=true]]:opacity-100'),
+                            children: [
+                                onFieldTypeChange && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_dropdown_menu_cjs_namespaceObject.DropdownMenu, {
+                                    children: [
+                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_tooltip_cjs_namespaceObject.Tooltip, {
+                                            children: [
+                                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_tooltip_cjs_namespaceObject.TooltipTrigger, {
+                                                    asChild: true,
+                                                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_dropdown_menu_cjs_namespaceObject.DropdownMenuTrigger, {
+                                                        asChild: true,
+                                                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("button", {
+                                                            type: "button",
+                                                            "aria-label": "Field type",
+                                                            className: (0, index_cjs_namespaceObject.cn)('flex h-7 items-center gap-1 rounded-lg px-2 text-[11px] text-foreground-subtle transition hover:bg-surface-overlay hover:text-foreground', collapsedPaddingClass),
+                                                            children: [
+                                                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(typeMeta.icon, {
+                                                                    size: 12
+                                                                }),
+                                                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                                                    className: collapsedTextClass,
+                                                                    children: typeMeta.label
+                                                                }),
+                                                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.ChevronDown, {
+                                                                    size: 9,
+                                                                    className: collapsedTextClass
+                                                                })
+                                                            ]
+                                                        })
+                                                    })
+                                                }),
+                                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_tooltip_cjs_namespaceObject.TooltipContent, {
+                                                    children: "Type"
+                                                })
+                                            ]
+                                        }),
+                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_dropdown_menu_cjs_namespaceObject.DropdownMenuContent, {
+                                            align: "end",
+                                            className: "w-44",
+                                            children: external_types_cjs_namespaceObject.FIELD_TYPE_ORDER.map((type)=>{
+                                                const meta = external_types_cjs_namespaceObject.FIELD_TYPE_META[type];
+                                                const isActive = type === fieldType;
+                                                return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_dropdown_menu_cjs_namespaceObject.DropdownMenuItem, {
+                                                    onClick: ()=>onFieldTypeChange(type),
+                                                    children: [
+                                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(meta.icon, {
+                                                            className: isActive ? 'text-brand' : 'text-foreground-muted'
+                                                        }),
+                                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                                            className: (0, index_cjs_namespaceObject.cn)(isActive && 'font-medium text-brand'),
+                                                            children: meta.label
+                                                        })
+                                                    ]
+                                                }, type);
+                                            })
+                                        })
+                                    ]
+                                }),
+                                onRequiredChange && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+                                    children: [
+                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                                            className: collapsedTextClass,
+                                            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_tooltip_cjs_namespaceObject.Tooltip, {
+                                                children: [
+                                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_tooltip_cjs_namespaceObject.TooltipTrigger, {
+                                                        asChild: true,
+                                                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                                            className: "inline-flex",
+                                                            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_switch_cjs_namespaceObject.Switch, {
+                                                                size: "sm",
+                                                                checked: !!required,
+                                                                onCheckedChange: onRequiredChange,
+                                                                className: "data-[state=checked]:bg-brand data-[state=unchecked]:bg-foreground-subtle",
+                                                                "aria-label": required ? 'Required field' : 'Optional field'
+                                                            })
+                                                        })
+                                                    }),
+                                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_tooltip_cjs_namespaceObject.TooltipContent, {
+                                                        children: "Required"
+                                                    })
+                                                ]
+                                            })
+                                        }),
+                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                                            className: compactOnlyClass,
+                                            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_popover_cjs_namespaceObject.Popover, {
+                                                children: [
+                                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_tooltip_cjs_namespaceObject.Tooltip, {
+                                                        children: [
+                                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_tooltip_cjs_namespaceObject.TooltipTrigger, {
+                                                                asChild: true,
+                                                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_popover_cjs_namespaceObject.PopoverTrigger, {
+                                                                    asChild: true,
+                                                                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
+                                                                        type: "button",
+                                                                        "aria-label": required ? 'Required field' : 'Optional field',
+                                                                        className: "grid size-7 place-items-center rounded-lg text-foreground-subtle transition hover:bg-surface-overlay hover:text-foreground",
+                                                                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Asterisk, {
+                                                                            size: 12
+                                                                        })
+                                                                    })
+                                                                })
+                                                            }),
+                                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_tooltip_cjs_namespaceObject.TooltipContent, {
+                                                                children: "Required"
+                                                            })
+                                                        ]
+                                                    }),
+                                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_popover_cjs_namespaceObject.PopoverContent, {
+                                                        align: "end",
+                                                        className: "w-48",
+                                                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                                                            className: "flex items-center justify-between gap-3",
+                                                            children: [
+                                                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                                                    className: "text-xs font-medium text-foreground",
+                                                                    children: "Required"
+                                                                }),
+                                                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_switch_cjs_namespaceObject.Switch, {
+                                                                    size: "sm",
+                                                                    checked: !!required,
+                                                                    onCheckedChange: onRequiredChange,
+                                                                    className: "data-[state=checked]:bg-brand data-[state=unchecked]:bg-foreground-subtle",
+                                                                    "aria-label": required ? 'Required field' : 'Optional field'
+                                                                })
+                                                            ]
+                                                        })
+                                                    })
+                                                ]
+                                            })
+                                        })
+                                    ]
+                                }),
+                                showFieldActions && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+                                    children: [
+                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_popover_cjs_namespaceObject.Popover, {
+                                            children: [
+                                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_tooltip_cjs_namespaceObject.Tooltip, {
+                                                    children: [
+                                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_tooltip_cjs_namespaceObject.TooltipTrigger, {
+                                                            asChild: true,
+                                                            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_popover_cjs_namespaceObject.PopoverTrigger, {
+                                                                asChild: true,
+                                                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
+                                                                    type: "button",
+                                                                    "aria-label": "AI assist",
+                                                                    className: "grid size-7 place-items-center rounded-lg text-foreground-subtle transition hover:bg-surface-overlay hover:text-foreground",
+                                                                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Sparkles, {
+                                                                        size: 12
+                                                                    })
+                                                                })
+                                                            })
+                                                        }),
+                                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_tooltip_cjs_namespaceObject.TooltipContent, {
+                                                            children: "Generate with AI"
+                                                        })
+                                                    ]
+                                                }),
+                                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_popover_cjs_namespaceObject.PopoverContent, {
+                                                    align: "end",
+                                                    className: "space-y-3",
+                                                    children: [
+                                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                                                            className: "space-y-1.5",
+                                                            children: [
+                                                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_label_cjs_namespaceObject.Label, {
+                                                                    htmlFor: promptId,
+                                                                    className: "text-xs font-medium text-foreground-muted",
+                                                                    children: "Describe what you want"
+                                                                }),
+                                                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_textarea_cjs_namespaceObject.Textarea, {
+                                                                    id: promptId,
+                                                                    rows: 3,
+                                                                    value: aiPrompt,
+                                                                    onChange: (e)=>setAiPrompt(e.target.value),
+                                                                    placeholder: "Display a value from the previous step",
+                                                                    className: "resize-none text-sm"
+                                                                })
+                                                            ]
+                                                        }),
+                                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("span", {
+                                                            className: "block text-[11px] text-foreground-subtle",
+                                                            children: [
+                                                                "Output: ",
+                                                                typeMeta.label,
+                                                                typeMeta.supportsExpression ? ' expression' : ' value'
+                                                            ]
+                                                        }),
+                                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_button_cjs_namespaceObject.Button, {
+                                                            size: "sm",
+                                                            className: "w-full",
+                                                            disabled: !onGenerateWithAi,
+                                                            onClick: ()=>onGenerateWithAi?.(aiPrompt),
+                                                            children: "Generate"
+                                                        })
+                                                    ]
+                                                })
+                                            ]
+                                        }),
+                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_dropdown_menu_cjs_namespaceObject.DropdownMenu, {
+                                            children: [
+                                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_tooltip_cjs_namespaceObject.Tooltip, {
+                                                    children: [
+                                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_tooltip_cjs_namespaceObject.TooltipTrigger, {
+                                                            asChild: true,
+                                                            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_dropdown_menu_cjs_namespaceObject.DropdownMenuTrigger, {
+                                                                asChild: true,
+                                                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("button", {
+                                                                    type: "button",
+                                                                    "aria-label": "Insert variable",
+                                                                    disabled: 0 === variables.length || !onValueChange,
+                                                                    className: (0, index_cjs_namespaceObject.cn)('flex h-7 items-center gap-1 rounded-lg px-2 text-[11px] text-foreground-subtle transition hover:bg-surface-overlay hover:text-foreground disabled:pointer-events-none disabled:opacity-50', collapsedPaddingClass),
+                                                                    children: [
+                                                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Braces, {
+                                                                            size: 12
+                                                                        }),
+                                                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                                                            className: collapsedTextClass,
+                                                                            children: "Insert"
+                                                                        }),
+                                                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.ChevronDown, {
+                                                                            size: 9,
+                                                                            className: collapsedTextClass
+                                                                        })
+                                                                    ]
+                                                                })
+                                                            })
+                                                        }),
+                                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_tooltip_cjs_namespaceObject.TooltipContent, {
+                                                            children: "Insert variable"
+                                                        })
+                                                    ]
+                                                }),
+                                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_dropdown_menu_cjs_namespaceObject.DropdownMenuContent, {
+                                                    align: "end",
+                                                    className: "w-48",
+                                                    children: variables.map((variable)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_dropdown_menu_cjs_namespaceObject.DropdownMenuItem, {
+                                                            onClick: ()=>onValueChange?.(value ? `${value} ${variable.value}` : variable.value),
+                                                            children: variable.label
+                                                        }, variable.value))
+                                                })
+                                            ]
+                                        })
+                                    ]
+                                })
+                            ]
+                        }),
+                        headerActions
+                    ]
+                })
+            })
+        ]
+    });
+}
+exports.FieldHeader = __webpack_exports__.FieldHeader;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "FieldHeader"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/components/ui/lockable-value-field/components/field-header.d.ts

@@ -0,0 +1,19 @@
+import type { ReactNode } from 'react';
+import type { LockableFieldType, LockableValueFieldOption } from '../types';
+export declare function FieldHeader({ label, fieldId, fieldLabel, required, fieldType, onFieldTypeChange, onRequiredChange, controlsVisibility, compact, showFieldActions, value, onValueChange, variables, onGenerateWithAi, headerActions, }: {
+    label?: ReactNode;
+    fieldId: string;
+    fieldLabel: string;
+    required?: boolean;
+    fieldType: LockableFieldType;
+    onFieldTypeChange?: (fieldType: LockableFieldType) => void;
+    onRequiredChange?: (required: boolean) => void;
+    controlsVisibility: 'visible' | 'hover';
+    compact?: boolean;
+    showFieldActions: boolean;
+    value: string;
+    onValueChange?: (value: string) => void;
+    variables: LockableValueFieldOption[];
+    onGenerateWithAi?: (prompt: string) => void;
+    headerActions?: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;