@uipath/apollo-react 6.79.0 → 7.0.0

package/dist/canvas/components/NodePropertyPanel/NodePropertyPanel.cjs

@@ -38,7 +38,7 @@ function findFieldElement(root, name) {
     for (const field of fields)if (field.getAttribute('data-field-name') === name) return field;
     return null;
 }
-function NodePropertyPanel({ panelTitle, dragHandleProps, onClose, nodeIcon, nodeLabel, nodeCategory, nodeDescription, nodeLabelPlaceholder, nodeDescriptionPlaceholder, onNodeLabelChange, onNodeLabelSubmit, onNodeDescriptionChange, onNodeDescriptionSubmit, nodeLabelError, nodeDescriptionError, action, schema, plugins, onSubmit, disabled, autoComplete, resetKey, className, contentInset = '1.5rem', children, headerExtra, sectionVariant, activeStepId, onActiveStepChange, changedFields }) {
+function NodePropertyPanel({ panelTitle, dragHandleProps, onClose, nodeIcon, nodeLabel, nodeCategory, nodeDescription, nodeLabelPlaceholder, nodeDescriptionPlaceholder, onNodeLabelChange, onNodeLabelSubmit, onNodeDescriptionChange, onNodeDescriptionSubmit, nodeLabelError, nodeDescriptionError, action, schema, plugins, onSubmit, disabled, autoComplete, resetKey, className, contentInset = '1rem', children, headerExtra, sectionVariant, activeStepId, onActiveStepChange, changedFields }) {
     const { _ } = (0, index_cjs_namespaceObject.useSafeLingui)();
     const rootRef = (0, external_react_namespaceObject.useRef)(null);
     const scrolledKeyRef = (0, external_react_namespaceObject.useRef)(null);
@@ -109,7 +109,7 @@ function NodePropertyPanel({ panelTitle, dragHandleProps, onClose, nodeIcon, nod
         children: [
             panelTitle && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
                 "data-slot": "node-property-panel-titlebar",
-                className: "flex h-10 shrink-0 items-center justify-between px-2",
+                className: "flex h-10 shrink-0 items-center justify-between [padding-inline:var(--mf-content-inset,1rem)]",
                 children: [
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
                         className: "flex items-center gap-1",
@@ -117,7 +117,7 @@ function NodePropertyPanel({ panelTitle, dragHandleProps, onClose, nodeIcon, nod
                             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
                                 ...dragHandleProps,
                                 "data-slot": "node-property-panel-drag-handle",
-                                className: "grid size-8 cursor-grab touch-none place-items-center text-foreground-subtle active:cursor-grabbing",
+                                className: "ml-[calc(-1*min(14px,var(--mf-content-inset,1rem)))] grid size-8 cursor-grab touch-none place-items-center text-foreground-subtle active:cursor-grabbing",
                                 children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.GripVertical, {
                                     size: 14
                                 })
@@ -143,7 +143,7 @@ function NodePropertyPanel({ panelTitle, dragHandleProps, onClose, nodeIcon, nod
                                     id: 'canvas.node_property_panel.close',
                                     message: 'Close'
                                 }),
-                                className: "grid size-6 place-items-center rounded text-foreground-muted transition hover:bg-surface-overlay hover:text-foreground",
+                                className: "mr-[calc(-1*min(8px,var(--mf-content-inset,1rem)))] grid size-6 place-items-center rounded text-foreground-muted transition hover:bg-surface-overlay hover:text-foreground",
                                 children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.X, {
                                     size: 14
                                 })
@@ -153,7 +153,7 @@ function NodePropertyPanel({ panelTitle, dragHandleProps, onClose, nodeIcon, nod
                 ]
             }),
             hasNodeHeader && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-                className: "flex shrink-0 items-center justify-between gap-4 py-4 [padding-inline:var(--mf-content-inset,1.5rem)]",
+                className: "flex shrink-0 items-center justify-between gap-4 py-4 [padding-inline:var(--mf-content-inset,1rem)]",
                 children: [
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
                         className: "flex min-w-0 flex-1 items-center gap-3.5",
@@ -254,7 +254,7 @@ function NodePropertyPanel({ panelTitle, dragHandleProps, onClose, nodeIcon, nod
                     }, resetKey)
                 })
             }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-                className: "py-4 text-xs text-foreground-subtle [padding-inline:var(--mf-content-inset,1.5rem)]",
+                className: "py-4 text-xs text-foreground-subtle [padding-inline:var(--mf-content-inset,1rem)]",
                 children: "No form schema defined for this node."
             })
         ]

package/dist/canvas/components/NodePropertyPanel/NodePropertyPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NodePropertyPanel.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/NodePropertyPanel/NodePropertyPanel.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AAuDxE,wBAAgB,iBAAiB,CAAC,EAChC,UAAU,EACV,eAAe,EACf,OAAO,EACP,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,eAAe,EACf,oBAAoB,EACpB,0BAA0B,EAC1B,iBAAiB,EACjB,iBAAiB,EACjB,uBAAuB,EACvB,uBAAuB,EACvB,cAAc,EACd,oBAAoB,EACpB,MAAM,EACN,MAAM,EACN,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,YAAY,EACZ,QAAQ,EACR,SAAS,EACT,YAAuB,EACvB,QAAQ,EACR,WAAW,EACX,cAAc,EACd,YAAY,EACZ,kBAAkB,EAClB,aAAa,GACd,EAAE,sBAAsB,2CA8OxB"}
+{"version":3,"file":"NodePropertyPanel.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/NodePropertyPanel/NodePropertyPanel.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AAuDxE,wBAAgB,iBAAiB,CAAC,EAChC,UAAU,EACV,eAAe,EACf,OAAO,EACP,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,eAAe,EACf,oBAAoB,EACpB,0BAA0B,EAC1B,iBAAiB,EACjB,iBAAiB,EACjB,uBAAuB,EACvB,uBAAuB,EACvB,cAAc,EACd,oBAAoB,EACpB,MAAM,EACN,MAAM,EACN,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,YAAY,EACZ,QAAQ,EACR,SAAS,EACT,YAAqB,EACrB,QAAQ,EACR,WAAW,EACX,cAAc,EACd,YAAY,EACZ,kBAAkB,EAClB,aAAa,GACd,EAAE,sBAAsB,2CAoPxB"}

package/dist/canvas/components/NodePropertyPanel/NodePropertyPanel.js

@@ -10,7 +10,7 @@ function findFieldElement(root, name) {
     for (const field of fields)if (field.getAttribute('data-field-name') === name) return field;
     return null;
 }
-function NodePropertyPanel({ panelTitle, dragHandleProps, onClose, nodeIcon, nodeLabel, nodeCategory, nodeDescription, nodeLabelPlaceholder, nodeDescriptionPlaceholder, onNodeLabelChange, onNodeLabelSubmit, onNodeDescriptionChange, onNodeDescriptionSubmit, nodeLabelError, nodeDescriptionError, action, schema, plugins, onSubmit, disabled, autoComplete, resetKey, className, contentInset = '1.5rem', children, headerExtra, sectionVariant, activeStepId, onActiveStepChange, changedFields }) {
+function NodePropertyPanel({ panelTitle, dragHandleProps, onClose, nodeIcon, nodeLabel, nodeCategory, nodeDescription, nodeLabelPlaceholder, nodeDescriptionPlaceholder, onNodeLabelChange, onNodeLabelSubmit, onNodeDescriptionChange, onNodeDescriptionSubmit, nodeLabelError, nodeDescriptionError, action, schema, plugins, onSubmit, disabled, autoComplete, resetKey, className, contentInset = '1rem', children, headerExtra, sectionVariant, activeStepId, onActiveStepChange, changedFields }) {
     const { _ } = useSafeLingui();
     const rootRef = useRef(null);
     const scrolledKeyRef = useRef(null);
@@ -81,7 +81,7 @@ function NodePropertyPanel({ panelTitle, dragHandleProps, onClose, nodeIcon, nod
         children: [
             panelTitle && /*#__PURE__*/ jsxs("div", {
                 "data-slot": "node-property-panel-titlebar",
-                className: "flex h-10 shrink-0 items-center justify-between px-2",
+                className: "flex h-10 shrink-0 items-center justify-between [padding-inline:var(--mf-content-inset,1rem)]",
                 children: [
                     /*#__PURE__*/ jsxs("div", {
                         className: "flex items-center gap-1",
@@ -89,7 +89,7 @@ function NodePropertyPanel({ panelTitle, dragHandleProps, onClose, nodeIcon, nod
                             /*#__PURE__*/ jsx("div", {
                                 ...dragHandleProps,
                                 "data-slot": "node-property-panel-drag-handle",
-                                className: "grid size-8 cursor-grab touch-none place-items-center text-foreground-subtle active:cursor-grabbing",
+                                className: "ml-[calc(-1*min(14px,var(--mf-content-inset,1rem)))] grid size-8 cursor-grab touch-none place-items-center text-foreground-subtle active:cursor-grabbing",
                                 children: /*#__PURE__*/ jsx(GripVertical, {
                                     size: 14
                                 })
@@ -115,7 +115,7 @@ function NodePropertyPanel({ panelTitle, dragHandleProps, onClose, nodeIcon, nod
                                     id: 'canvas.node_property_panel.close',
                                     message: 'Close'
                                 }),
-                                className: "grid size-6 place-items-center rounded text-foreground-muted transition hover:bg-surface-overlay hover:text-foreground",
+                                className: "mr-[calc(-1*min(8px,var(--mf-content-inset,1rem)))] grid size-6 place-items-center rounded text-foreground-muted transition hover:bg-surface-overlay hover:text-foreground",
                                 children: /*#__PURE__*/ jsx(X, {
                                     size: 14
                                 })
@@ -125,7 +125,7 @@ function NodePropertyPanel({ panelTitle, dragHandleProps, onClose, nodeIcon, nod
                 ]
             }),
             hasNodeHeader && /*#__PURE__*/ jsxs("div", {
-                className: "flex shrink-0 items-center justify-between gap-4 py-4 [padding-inline:var(--mf-content-inset,1.5rem)]",
+                className: "flex shrink-0 items-center justify-between gap-4 py-4 [padding-inline:var(--mf-content-inset,1rem)]",
                 children: [
                     /*#__PURE__*/ jsxs("div", {
                         className: "flex min-w-0 flex-1 items-center gap-3.5",
@@ -226,7 +226,7 @@ function NodePropertyPanel({ panelTitle, dragHandleProps, onClose, nodeIcon, nod
                     }, resetKey)
                 })
             }) : /*#__PURE__*/ jsx("div", {
-                className: "py-4 text-xs text-foreground-subtle [padding-inline:var(--mf-content-inset,1.5rem)]",
+                className: "py-4 text-xs text-foreground-subtle [padding-inline:var(--mf-content-inset,1rem)]",
                 children: "No form schema defined for this node."
             })
         ]

package/dist/canvas/components/NodeVariablesPanel/NodeVariableEditDialog.cjs

@@ -0,0 +1,405 @@
+"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__, {
+    NodeVariableEditDialog: ()=>NodeVariableEditDialog
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const apollo_wind_namespaceObject = require("@uipath/apollo-wind");
+const external_lucide_react_namespaceObject = require("lucide-react");
+const external_react_namespaceObject = require("react");
+const index_cjs_namespaceObject = require("../../../i18n/index.cjs");
+const VARIABLE_TYPES = [
+    'string',
+    'number',
+    'boolean',
+    'object',
+    'array'
+];
+const IDENTIFIER_PATTERN = /^[A-Za-z_][A-Za-z0-9_]*$/;
+function draftFor(type, value) {
+    if (null == value) return '';
+    if ('object' === type || 'array' === type) return JSON.stringify(value, null, 2);
+    return String(value);
+}
+function parseDefault(type, draft, checked) {
+    if ('boolean' === type) return {
+        value: checked
+    };
+    const text = draft.trim();
+    if (!text) return {
+        value: void 0
+    };
+    if ('string' === type) return {
+        value: draft
+    };
+    if ('number' === type) {
+        const value = Number(text);
+        return Number.isFinite(value) ? {
+            value
+        } : {
+            error: true
+        };
+    }
+    try {
+        const value = JSON.parse(text);
+        const isArray = Array.isArray(value);
+        const isObject = 'object' == typeof value && null !== value && !isArray;
+        return ('array' === type ? isArray : isObject) ? {
+            value
+        } : {
+            error: true
+        };
+    } catch  {
+        return {
+            error: true
+        };
+    }
+}
+function NodeVariableEditDialog({ variable, takenNames, referenceFor, onSave, onClose }) {
+    const { _ } = (0, index_cjs_namespaceObject.useSafeLingui)();
+    const fieldId = (0, external_react_namespaceObject.useId)();
+    const idInputRef = (0, external_react_namespaceObject.useRef)(null);
+    const [id, setId] = (0, external_react_namespaceObject.useState)(variable.id);
+    const [editingId, setEditingId] = (0, external_react_namespaceObject.useState)(()=>!IDENTIFIER_PATTERN.test(variable.id));
+    const [type, setType] = (0, external_react_namespaceObject.useState)(variable.type);
+    const [description, setDescription] = (0, external_react_namespaceObject.useState)(variable.description ?? '');
+    const [draft, setDraftState] = (0, external_react_namespaceObject.useState)(()=>draftFor(variable.type, variable.defaultValue));
+    const [checked, setCheckedState] = (0, external_react_namespaceObject.useState)('boolean' == typeof variable.defaultValue ? variable.defaultValue : void 0);
+    const [defaultEdited, setDefaultEdited] = (0, external_react_namespaceObject.useState)(false);
+    const setDraft = (next)=>{
+        setDraftState(next);
+        setDefaultEdited(true);
+    };
+    const setChecked = (next)=>{
+        setCheckedState(next);
+        setDefaultEdited(true);
+    };
+    const nullPlaceholder = null !== variable.defaultValue || defaultEdited ? void 0 : 'null';
+    const trimmedId = id.trim();
+    const idError = IDENTIFIER_PATTERN.test(trimmedId) ? trimmedId !== variable.id && takenNames.has(trimmedId) ? _({
+        id: 'canvas.node_variables_panel.edit_id_taken_error',
+        message: 'A variable named {name} already exists.',
+        values: {
+            name: trimmedId
+        }
+    }) : void 0 : _({
+        id: 'canvas.node_variables_panel.edit_id_pattern_error',
+        message: 'Use a letter or underscore first, then letters, numbers, or underscores.'
+    });
+    const parsed = parseDefault(type, draft, checked);
+    const defaultError = 'error' in parsed ? ({
+        number: _({
+            id: 'canvas.node_variables_panel.edit_default_number_error',
+            message: 'Enter a number.'
+        }),
+        object: _({
+            id: 'canvas.node_variables_panel.edit_default_object_error',
+            message: 'Enter a valid JSON object.'
+        }),
+        array: _({
+            id: 'canvas.node_variables_panel.edit_default_array_error',
+            message: 'Enter a valid JSON array.'
+        })
+    })[type] : void 0;
+    const changeType = (next)=>{
+        setType(next);
+        setDraft('');
+        setChecked(void 0);
+    };
+    const submit = (event)=>{
+        event.preventDefault();
+        if (idError || 'error' in parsed) return;
+        const untouched = !defaultEdited;
+        onSave({
+            id: trimmedId,
+            type,
+            description: description.trim() || void 0,
+            defaultValue: untouched ? variable.defaultValue : parsed.value
+        });
+    };
+    const typeLabel = {
+        string: _({
+            id: 'canvas.node_variables_panel.type_string',
+            message: 'String'
+        }),
+        number: _({
+            id: 'canvas.node_variables_panel.type_number',
+            message: 'Number'
+        }),
+        boolean: _({
+            id: 'canvas.node_variables_panel.type_boolean',
+            message: 'Boolean'
+        }),
+        object: _({
+            id: 'canvas.node_variables_panel.type_object',
+            message: 'Object'
+        }),
+        array: _({
+            id: 'canvas.node_variables_panel.type_array',
+            message: 'Array'
+        })
+    };
+    const defaultLabel = _({
+        id: 'canvas.node_variables_panel.edit_default_label',
+        message: 'Default value'
+    });
+    const reference = referenceFor(IDENTIFIER_PATTERN.test(trimmedId) ? trimmedId : variable.id);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Dialog, {
+        open: true,
+        onOpenChange: (open)=>!open && onClose(),
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.DialogContent, {
+            "aria-describedby": void 0,
+            onKeyDown: (event)=>event.stopPropagation(),
+            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("form", {
+                onSubmit: submit,
+                noValidate: true,
+                className: "grid gap-4",
+                children: [
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.DialogHeader, {
+                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(apollo_wind_namespaceObject.DialogTitle, {
+                            className: "flex items-center gap-2",
+                            children: [
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Database, {
+                                    size: 16,
+                                    "aria-hidden": "true",
+                                    className: "text-foreground-muted"
+                                }),
+                                _({
+                                    id: 'canvas.node_variables_panel.edit_title',
+                                    message: 'Edit variable'
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(apollo_wind_namespaceObject.FormField, {
+                        children: [
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.FormFieldLabel, {
+                                htmlFor: `${fieldId}-id`,
+                                children: _({
+                                    id: 'canvas.node_variables_panel.edit_id_label',
+                                    message: 'ID'
+                                })
+                            }),
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                                className: "flex items-start gap-2",
+                                children: [
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Input, {
+                                        ref: idInputRef,
+                                        id: `${fieldId}-id`,
+                                        value: id,
+                                        disabled: !editingId,
+                                        onChange: (event)=>setId(event.target.value),
+                                        error: editingId ? idError : void 0,
+                                        "aria-describedby": `${fieldId}-id-hint`,
+                                        autoComplete: "off",
+                                        spellCheck: false,
+                                        className: "flex-1 font-mono"
+                                    }),
+                                    !editingId && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Button, {
+                                        type: "button",
+                                        variant: "outline",
+                                        size: "icon",
+                                        "aria-label": _({
+                                            id: 'canvas.node_variables_panel.edit_id_action',
+                                            message: 'Edit ID'
+                                        }),
+                                        onClick: ()=>{
+                                            setEditingId(true);
+                                            requestAnimationFrame(()=>idInputRef.current?.select());
+                                        },
+                                        className: "shrink-0",
+                                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Pencil, {})
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(apollo_wind_namespaceObject.FormFieldDescription, {
+                                id: `${fieldId}-id-hint`,
+                                children: [
+                                    _({
+                                        id: 'canvas.node_variables_panel.edit_id_hint',
+                                        message: 'Used in expressions as'
+                                    }),
+                                    ' ',
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("code", {
+                                        className: "break-all rounded bg-surface-overlay px-1 py-0.5 font-mono text-xs",
+                                        children: reference
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(apollo_wind_namespaceObject.FormField, {
+                        children: [
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.FormFieldLabel, {
+                                htmlFor: `${fieldId}-type`,
+                                children: _({
+                                    id: 'canvas.node_variables_panel.edit_type_label',
+                                    message: 'Data type'
+                                })
+                            }),
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(apollo_wind_namespaceObject.Select, {
+                                value: type,
+                                onValueChange: (next)=>changeType(next),
+                                children: [
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.SelectTrigger, {
+                                        id: `${fieldId}-type`,
+                                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.SelectValue, {})
+                                    }),
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.SelectContent, {
+                                        children: VARIABLE_TYPES.map((option)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.SelectItem, {
+                                                value: option,
+                                                children: typeLabel[option]
+                                            }, option))
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(apollo_wind_namespaceObject.FormField, {
+                        children: [
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.FormFieldLabel, {
+                                htmlFor: `${fieldId}-description`,
+                                children: _({
+                                    id: "canvas.node_variables_panel.edit_description_label",
+                                    message: "Description"
+                                })
+                            }),
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Textarea, {
+                                id: `${fieldId}-description`,
+                                value: description,
+                                onChange: (event)=>setDescription(event.target.value),
+                                placeholder: _({
+                                    id: "canvas.node_variables_panel.edit_description_placeholder",
+                                    message: "Helpful description of what this variable represents"
+                                }),
+                                rows: 2
+                            })
+                        ]
+                    }),
+                    'boolean' === type ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(apollo_wind_namespaceObject.FormField, {
+                        children: [
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.FormFieldLabel, {
+                                htmlFor: `${fieldId}-default`,
+                                children: defaultLabel
+                            }),
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                                className: "flex items-center gap-2",
+                                children: [
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Switch, {
+                                        id: `${fieldId}-default`,
+                                        checked: checked ?? false,
+                                        onCheckedChange: setChecked,
+                                        "aria-describedby": `${fieldId}-default-hint`
+                                    }),
+                                    void 0 !== checked && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Button, {
+                                        type: "button",
+                                        variant: "ghost",
+                                        size: "2xs",
+                                        onClick: ()=>setChecked(void 0),
+                                        "aria-label": _({
+                                            id: 'canvas.node_variables_panel.edit_default_clear_label',
+                                            message: 'Clear default value'
+                                        }),
+                                        children: _({
+                                            id: 'canvas.node_variables_panel.edit_default_clear',
+                                            message: 'Clear'
+                                        })
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.FormFieldDescription, {
+                                id: `${fieldId}-default-hint`,
+                                children: void 0 === checked ? _({
+                                    id: 'canvas.node_variables_panel.edit_default_boolean_unset_hint',
+                                    message: 'No default. Toggle on for true, off for false'
+                                }) : _({
+                                    id: 'canvas.node_variables_panel.edit_default_boolean_hint',
+                                    message: 'Toggle on for true, off for false'
+                                })
+                            })
+                        ]
+                    }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(apollo_wind_namespaceObject.FormField, {
+                        children: [
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.FormFieldLabel, {
+                                htmlFor: `${fieldId}-default`,
+                                children: defaultLabel
+                            }),
+                            'object' === type || 'array' === type ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Textarea, {
+                                id: `${fieldId}-default`,
+                                value: draft,
+                                onChange: (event)=>setDraft(event.target.value),
+                                placeholder: nullPlaceholder ?? ('object' === type ? '{"key": "value"}' : '[1, 2, 3]'),
+                                error: defaultError,
+                                rows: 4,
+                                spellCheck: false,
+                                className: "font-mono"
+                            }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Input, {
+                                id: `${fieldId}-default`,
+                                value: draft,
+                                onChange: (event)=>setDraft(event.target.value),
+                                inputMode: 'number' === type ? 'decimal' : void 0,
+                                placeholder: nullPlaceholder ?? ('number' === type ? '0' : _({
+                                    id: 'canvas.node_variables_panel.edit_default_string_placeholder',
+                                    message: 'Enter text value'
+                                })),
+                                error: defaultError,
+                                autoComplete: "off"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(apollo_wind_namespaceObject.DialogFooter, {
+                        children: [
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Button, {
+                                type: "button",
+                                variant: "outline",
+                                onClick: onClose,
+                                children: _({
+                                    id: 'canvas.node_variables_panel.edit_cancel',
+                                    message: 'Cancel'
+                                })
+                            }),
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Button, {
+                                type: "submit",
+                                disabled: !!idError || !!defaultError,
+                                children: _({
+                                    id: 'canvas.node_variables_panel.edit_save',
+                                    message: 'Save'
+                                })
+                            })
+                        ]
+                    })
+                ]
+            })
+        })
+    });
+}
+exports.NodeVariableEditDialog = __webpack_exports__.NodeVariableEditDialog;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "NodeVariableEditDialog"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/canvas/components/NodeVariablesPanel/NodeVariableEditDialog.d.ts

@@ -0,0 +1,10 @@
+import type { NodeVariableDetails } from './NodeVariablesPanel.types';
+export interface NodeVariableEditDialogProps {
+    variable: NodeVariableDetails;
+    takenNames: ReadonlySet<string>;
+    referenceFor: (id: string) => string;
+    onSave: (next: NodeVariableDetails) => void;
+    onClose: () => void;
+}
+export declare function NodeVariableEditDialog({ variable, takenNames, referenceFor, onSave, onClose, }: NodeVariableEditDialogProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=NodeVariableEditDialog.d.ts.map

package/dist/canvas/components/NodeVariablesPanel/NodeVariableEditDialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NodeVariableEditDialog.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/NodeVariablesPanel/NodeVariableEditDialog.tsx"],"names":[],"mappings":"AAuBA,OAAO,KAAK,EAAE,mBAAmB,EAAoB,MAAM,4BAA4B,CAAC;AA6CxF,MAAM,WAAW,2BAA2B;IAE1C,QAAQ,EAAE,mBAAmB,CAAC;IAE9B,UAAU,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAEhC,YAAY,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,MAAM,CAAC;IACrC,MAAM,EAAE,CAAC,IAAI,EAAE,mBAAmB,KAAK,IAAI,CAAC;IAC5C,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAOD,wBAAgB,sBAAsB,CAAC,EACrC,QAAQ,EACR,UAAU,EACV,YAAY,EACZ,MAAM,EACN,OAAO,GACR,EAAE,2BAA2B,2CA+R7B"}