@process.co/ui 0.0.9 → 0.0.11

package/dist/components/fields/index.cjs

@@ -134,7 +134,7 @@ function _unsupported_iterable_to_array(o, minLen) {
     if (n === "Map" || n === "Set") return Array.from(n);
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
 }
-var React3 = require('react');
+var React4 = require('react');
 var SelectPrimitive = require('@radix-ui/react-select');
 var lucideReact = require('lucide-react');
 function _interopNamespace(e) {
@@ -156,9 +156,10 @@ function _interopNamespace(e) {
     n.default = e;
     return Object.freeze(n);
 }
-var React3__namespace = /*#__PURE__*/ _interopNamespace(React3);
+var React4__namespace = /*#__PURE__*/ _interopNamespace(React4);
 var SelectPrimitive__namespace = /*#__PURE__*/ _interopNamespace(SelectPrimitive);
 // src/components/fields/index.tsx
+var DevContext = React4.createContext(null);
 // ../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
 function r(e) {
     var t, f, n = "";
@@ -4806,9 +4807,53 @@ function cn() {
     return twMerge(clsx(inputs));
 }
 // src/components/fields/Input.tsx
+function useResolvedExpectedType(expectedType, devCtx) {
+    var inferredTypes = devCtx === null || devCtx === void 0 ? void 0 : devCtx.inferredTypes;
+    return React4__namespace.useMemo(function() {
+        var _match_;
+        if (!expectedType) return "any";
+        if (!expectedType.startsWith("$infer<")) {
+            return expectedType;
+        }
+        var match = expectedType.match(/^\$infer<(.+)>$/);
+        if (!match) return expectedType;
+        var content = ((_match_ = match[1]) === null || _match_ === void 0 ? void 0 : _match_.trim()) || "";
+        if (content.startsWith("[") && content.endsWith("]")) {
+            var arrayContent = content.slice(1, -1);
+            var fieldNames = arrayContent.split(",").map(function(s) {
+                return s.trim().replace(/^["']|["']$/g, "");
+            }).filter(Boolean);
+            if (!inferredTypes) {
+                return "Subscribing to: ".concat(fieldNames.join(", "));
+            }
+            var types = fieldNames.map(function(name) {
+                return inferredTypes[name];
+            }).filter(function(t) {
+                return !!t && t.length > 0;
+            });
+            if (types.length === 0) {
+                return "Waiting for: ".concat(fieldNames.join(", "));
+            }
+            return types.length === 1 ? types[0] : types.join(" & ");
+        }
+        if (!content.includes("|") && /^[a-zA-Z_][a-zA-Z0-9_\-]*$/.test(content)) {
+            if (!inferredTypes) {
+                return "Subscribing to: ".concat(content);
+            }
+            var resolvedType = inferredTypes[content];
+            return resolvedType || "Waiting for: ".concat(content);
+        }
+        return content;
+    }, [
+        expectedType,
+        inferredTypes
+    ]);
+}
 function Input(param) {
     var fieldName = param.fieldName, label = param.label, value = param.value, onChange = param.onChange, _param_disabled = param.disabled, disabled = _param_disabled === void 0 ? false : _param_disabled, placeholder = param.placeholder, _param_expectedType = param.expectedType, expectedType = _param_expectedType === void 0 ? "string" : _param_expectedType, _param_required = param.required, required = _param_required === void 0 ? false : _param_required, _param_hasRequiredError = param.hasRequiredError, hasRequiredError = _param_hasRequiredError === void 0 ? false : _param_hasRequiredError, className = param.className, editorClassName = param.editorClassName;
-    var displayValue = React3__namespace.useMemo(function() {
+    var devCtx = React4.useContext(DevContext);
+    var resolvedExpectedType = useResolvedExpectedType(expectedType, devCtx);
+    var displayValue = React4__namespace.useMemo(function() {
         if (value && (typeof value === "undefined" ? "undefined" : _type_of(value)) === "object" && "expression" in value) {
             return value.expression || "";
         }
@@ -4816,12 +4861,12 @@ function Input(param) {
     }, [
         value
     ]);
-    var isExpression = React3__namespace.useMemo(function() {
+    var isExpression = React4__namespace.useMemo(function() {
         return value && (typeof value === "undefined" ? "undefined" : _type_of(value)) === "object" && "expression" in value;
     }, [
         value
     ]);
-    var handleChange = React3__namespace.useCallback(function(e) {
+    var handleChange = React4__namespace.useCallback(function(e) {
         var newValue = e.target.value;
         if (newValue.includes("{{")) {
             onChange({
@@ -4835,20 +4880,22 @@ function Input(param) {
         onChange
     ]);
     var showError = hasRequiredError || required && !displayValue;
-    return /* @__PURE__ */ React3__namespace.createElement("div", {
+    var isWaiting = resolvedExpectedType.startsWith("Waiting for:") || resolvedExpectedType.startsWith("Subscribing to:");
+    return /* @__PURE__ */ React4__namespace.createElement("div", {
         className: cn("uii:mb-2", className)
-    }, /* @__PURE__ */ React3__namespace.createElement("div", {
+    }, /* @__PURE__ */ React4__namespace.createElement("div", {
         className: "uii:flex uii:items-center uii:gap-2 uii:mt-2"
-    }, /* @__PURE__ */ React3__namespace.createElement("label", {
+    }, /* @__PURE__ */ React4__namespace.createElement("label", {
         htmlFor: fieldName,
         className: "uii:text-xs uii:font-bold uii:text-muted-foreground"
-    }, label, ":"), expectedType !== "$.interface.timer" && /* @__PURE__ */ React3__namespace.createElement("span", {
-        className: "uii:-mt-2 uii:inline-flex uii:px-1 uii:py-0.5 uii:bg-gray-200 uii:rounded-sm uii:text-[10px] uii:font-mono uii:text-muted-foreground uii:font-light"
-    }, expectedType), showError && /* @__PURE__ */ React3__namespace.createElement("span", {
+    }, label, ":"), resolvedExpectedType !== "$.interface.timer" && /* @__PURE__ */ React4__namespace.createElement("span", {
+        className: cn("uii:-mt-2 uii:inline-flex uii:px-1 uii:py-0.5 uii:rounded-sm uii:text-[10px] uii:font-mono uii:font-light uii:max-w-[300px] uii:truncate", isWaiting ? "uii:bg-yellow-100 uii:text-yellow-700" : "uii:bg-gray-200 uii:text-muted-foreground"),
+        title: resolvedExpectedType
+    }, resolvedExpectedType), showError && /* @__PURE__ */ React4__namespace.createElement("span", {
         className: "uii:-mt-2 uii:inline-flex uii:px-1 uii:py-0.5 uii:bg-red-100 uii:text-red-600 uii:rounded-sm uii:text-[10px] uii:font-medium"
-    }, "Required")), /* @__PURE__ */ React3__namespace.createElement("div", {
+    }, "Required")), /* @__PURE__ */ React4__namespace.createElement("div", {
         className: "uii:mt-0.5"
-    }, /* @__PURE__ */ React3__namespace.createElement("input", {
+    }, /* @__PURE__ */ React4__namespace.createElement("input", {
         id: fieldName,
         name: fieldName,
         type: "text",
@@ -4861,13 +4908,13 @@ function Input(param) {
 }
 function Select(_param) {
     var props = _extends({}, _object_destructuring_empty(_param));
-    return /* @__PURE__ */ React3__namespace.createElement(SelectPrimitive__namespace.Root, _object_spread({
+    return /* @__PURE__ */ React4__namespace.createElement(SelectPrimitive__namespace.Root, _object_spread({
         "data-slot": "select"
     }, props));
 }
 function SelectValue(_param) {
     var props = _extends({}, _object_destructuring_empty(_param));
-    return /* @__PURE__ */ React3__namespace.createElement(SelectPrimitive__namespace.Value, _object_spread({
+    return /* @__PURE__ */ React4__namespace.createElement(SelectPrimitive__namespace.Value, _object_spread({
         "data-slot": "select-value"
     }, props));
 }
@@ -4876,12 +4923,12 @@ function SelectTrigger(_param) {
         "className",
         "children"
     ]);
-    return /* @__PURE__ */ React3__namespace.createElement(SelectPrimitive__namespace.Trigger, _object_spread({
+    return /* @__PURE__ */ React4__namespace.createElement(SelectPrimitive__namespace.Trigger, _object_spread({
         "data-slot": "select-trigger",
         className: cn("uii:border-input uii:data-[placeholder]:text-muted-foreground uii:[&_svg:not([class*=text-])]:text-muted-foreground uii:focus-visible:border-ring uii:focus-visible:ring-ring/50 uii:aria-invalid:ring-destructive/20 uii:dark:aria-invalid:ring-destructive/40 uii:aria-invalid:border-destructive uii:flex uii:h-9 uii:w-full uii:items-center uii:justify-between uii:gap-2 uii:rounded-md uii:border uii:bg-transparent uii:px-3 uii:py-2 uii:text-sm uii:whitespace-nowrap uii:shadow-xs uii:transition-[color,box-shadow] uii:outline-none uii:focus-visible:ring-[3px] uii:disabled:cursor-not-allowed uii:disabled:opacity-50 uii:*:data-[slot=select-value]:line-clamp-1 uii:*:data-[slot=select-value]:flex uii:*:data-[slot=select-value]:items-center uii:*:data-[slot=select-value]:gap-2 uii:[&_svg]:pointer-events-none uii:[&_svg]:shrink-0 uii:[&_svg:not([class*=size-])]:size-4", className)
-    }, props), children, /* @__PURE__ */ React3__namespace.createElement(SelectPrimitive__namespace.Icon, {
+    }, props), children, /* @__PURE__ */ React4__namespace.createElement(SelectPrimitive__namespace.Icon, {
         asChild: true
-    }, /* @__PURE__ */ React3__namespace.createElement(lucideReact.ChevronDownIcon, {
+    }, /* @__PURE__ */ React4__namespace.createElement(lucideReact.ChevronDownIcon, {
         className: "uii:size-4 uii:opacity-50"
     })));
 }
@@ -4894,38 +4941,38 @@ function SelectContent(_param) {
         "hideScrollUpButton",
         "hideScrollDownButton"
     ]);
-    return /* @__PURE__ */ React3__namespace.createElement(SelectPrimitive__namespace.Portal, null, /* @__PURE__ */ React3__namespace.createElement(SelectPrimitive__namespace.Content, _object_spread({
+    return /* @__PURE__ */ React4__namespace.createElement(SelectPrimitive__namespace.Portal, null, /* @__PURE__ */ React4__namespace.createElement(SelectPrimitive__namespace.Content, _object_spread({
         "data-slot": "select-content",
         className: cn("uii:bg-popover uii:text-popover-foreground uii:data-[state=open]:animate-in uii:data-[state=closed]:animate-out uii:data-[state=closed]:fade-out-0 uii:data-[state=open]:fade-in-0 uii:data-[state=closed]:zoom-out-95 uii:data-[state=open]:zoom-in-95 uii:data-[side=bottom]:slide-in-from-top-2 uii:data-[side=left]:slide-in-from-right-2 uii:data-[side=right]:slide-in-from-left-2 uii:data-[side=top]:slide-in-from-bottom-2 uii:relative uii:z-50 uii:max-h-96 uii:min-w-[8rem] uii:overflow-hidden uii:rounded-md uii:border uii:shadow-md", position === "popper" && "uii:data-[side=bottom]:translate-y-1 uii:data-[side=left]:-translate-x-1 uii:data-[side=right]:translate-x-1 uii:data-[side=top]:-translate-y-1", "uii:slide-in-from-right-6", className),
         position: position
-    }, props), !hideScrollUpButton && /* @__PURE__ */ React3__namespace.createElement(SelectScrollUpButton, null), /* @__PURE__ */ React3__namespace.createElement(SelectPrimitive__namespace.Viewport, {
+    }, props), !hideScrollUpButton && /* @__PURE__ */ React4__namespace.createElement(SelectScrollUpButton, null), /* @__PURE__ */ React4__namespace.createElement(SelectPrimitive__namespace.Viewport, {
         className: cn("uii:p-1", position === "popper" && "uii:h-[var(--radix-select-trigger-height)] uii:w-full uii:min-w-[var(--radix-select-trigger-width)] uii:scroll-my-1")
-    }, children), footer ? /* @__PURE__ */ React3__namespace.createElement("div", {
+    }, children), footer ? /* @__PURE__ */ React4__namespace.createElement("div", {
         className: "uii:border-t uii:p-2 uii:bg-popover"
-    }, footer) : null, !hideScrollDownButton && /* @__PURE__ */ React3__namespace.createElement(SelectScrollDownButton, null)));
+    }, footer) : null, !hideScrollDownButton && /* @__PURE__ */ React4__namespace.createElement(SelectScrollDownButton, null)));
 }
 function SelectItem(_param) {
     var className = _param.className, children = _param.children, props = _object_without_properties(_param, [
         "className",
         "children"
     ]);
-    return /* @__PURE__ */ React3__namespace.createElement(SelectPrimitive__namespace.Item, _object_spread({
+    return /* @__PURE__ */ React4__namespace.createElement(SelectPrimitive__namespace.Item, _object_spread({
         "data-slot": "select-item",
         className: cn("uii:focus:bg-accent uii:focus:text-accent-foreground uii:[&_svg:not([class*=text-])]:text-muted-foreground uii:relative uii:flex uii:w-full uii:cursor-default uii:items-center uii:gap-2 uii:rounded-sm uii:py-1.5 uii:pr-8 uii:pl-2 uii:text-sm uii:outline-hidden uii:select-none uii:data-[disabled]:pointer-events-none uii:data-[disabled]:opacity-50 uii:[&_svg]:pointer-events-none uii:[&_svg]:shrink-0 uii:[&_svg:not([class*=size-])]:size-4 uii:*:[span]:last:flex uii:*:[span]:last:items-center uii:*:[span]:last:gap-2", className)
-    }, props), /* @__PURE__ */ React3__namespace.createElement("span", {
+    }, props), /* @__PURE__ */ React4__namespace.createElement("span", {
         className: "uii:absolute uii:right-2 uii:flex uii:size-3.5 uii:items-center uii:justify-center"
-    }, /* @__PURE__ */ React3__namespace.createElement(SelectPrimitive__namespace.ItemIndicator, null, /* @__PURE__ */ React3__namespace.createElement(lucideReact.CheckIcon, {
+    }, /* @__PURE__ */ React4__namespace.createElement(SelectPrimitive__namespace.ItemIndicator, null, /* @__PURE__ */ React4__namespace.createElement(lucideReact.CheckIcon, {
         className: "uii:size-4"
-    }))), /* @__PURE__ */ React3__namespace.createElement(SelectPrimitive__namespace.ItemText, null, children));
+    }))), /* @__PURE__ */ React4__namespace.createElement(SelectPrimitive__namespace.ItemText, null, children));
 }
 function SelectScrollUpButton(_param) {
     var className = _param.className, props = _object_without_properties(_param, [
         "className"
     ]);
-    return /* @__PURE__ */ React3__namespace.createElement(SelectPrimitive__namespace.ScrollUpButton, _object_spread({
+    return /* @__PURE__ */ React4__namespace.createElement(SelectPrimitive__namespace.ScrollUpButton, _object_spread({
         "data-slot": "select-scroll-up-button",
         className: cn("uii:flex uii:cursor-default uii:items-center uii:justify-center uii:py-1", className)
-    }, props), /* @__PURE__ */ React3__namespace.createElement(lucideReact.ChevronUpIcon, {
+    }, props), /* @__PURE__ */ React4__namespace.createElement(lucideReact.ChevronUpIcon, {
         className: "uii:size-4"
     }));
 }
@@ -4933,19 +4980,63 @@ function SelectScrollDownButton(_param) {
     var className = _param.className, props = _object_without_properties(_param, [
         "className"
     ]);
-    return /* @__PURE__ */ React3__namespace.createElement(SelectPrimitive__namespace.ScrollDownButton, _object_spread({
+    return /* @__PURE__ */ React4__namespace.createElement(SelectPrimitive__namespace.ScrollDownButton, _object_spread({
         "data-slot": "select-scroll-down-button",
         className: cn("uii:flex uii:cursor-default uii:items-center uii:justify-center uii:py-1", className)
-    }, props), /* @__PURE__ */ React3__namespace.createElement(lucideReact.ChevronDownIcon, {
+    }, props), /* @__PURE__ */ React4__namespace.createElement(lucideReact.ChevronDownIcon, {
         className: "uii:size-4"
     }));
 }
 // src/components/fields/Select.tsx
+function useResolvedExpectedType2(expectedType, devCtx) {
+    var inferredTypes = devCtx === null || devCtx === void 0 ? void 0 : devCtx.inferredTypes;
+    return React4__namespace.useMemo(function() {
+        var _match_;
+        if (!expectedType) return "any";
+        if (!expectedType.startsWith("$infer<")) {
+            return expectedType;
+        }
+        var match = expectedType.match(/^\$infer<(.+)>$/);
+        if (!match) return expectedType;
+        var content = ((_match_ = match[1]) === null || _match_ === void 0 ? void 0 : _match_.trim()) || "";
+        if (content.startsWith("[") && content.endsWith("]")) {
+            var arrayContent = content.slice(1, -1);
+            var fieldNames = arrayContent.split(",").map(function(s) {
+                return s.trim().replace(/^["']|["']$/g, "");
+            }).filter(Boolean);
+            if (!inferredTypes) {
+                return "Subscribing to: ".concat(fieldNames.join(", "));
+            }
+            var types = fieldNames.map(function(name) {
+                return inferredTypes[name];
+            }).filter(function(t) {
+                return !!t && t.length > 0;
+            });
+            if (types.length === 0) {
+                return "Waiting for: ".concat(fieldNames.join(", "));
+            }
+            return types.length === 1 ? types[0] : types.join(" & ");
+        }
+        if (!content.includes("|") && /^[a-zA-Z_][a-zA-Z0-9_\-]*$/.test(content)) {
+            if (!inferredTypes) {
+                return "Subscribing to: ".concat(content);
+            }
+            var resolvedType = inferredTypes[content];
+            return resolvedType || "Waiting for: ".concat(content);
+        }
+        return content;
+    }, [
+        expectedType,
+        inferredTypes
+    ]);
+}
 function Select2(param) {
     var fieldName = param.fieldName, label = param.label, value = param.value, onChange = param.onChange, rawOptions = param.options, _param_disabled = param.disabled, disabled = _param_disabled === void 0 ? false : _param_disabled, placeholder = param.placeholder, _param_expectedType = param.expectedType, expectedType = _param_expectedType === void 0 ? "string" : _param_expectedType, _param_required = param.required, required = _param_required === void 0 ? false : _param_required, _param_hasRequiredError = param.hasRequiredError, hasRequiredError = _param_hasRequiredError === void 0 ? false : _param_hasRequiredError, className = param.className, children = param.children;
-    var _React3__namespace_useState = _sliced_to_array(React3__namespace.useState(false), 2), isExpressionMode = _React3__namespace_useState[0], setIsExpressionMode = _React3__namespace_useState[1];
-    var _React3__namespace_useState1 = _sliced_to_array(React3__namespace.useState(""), 2), expressionValue = _React3__namespace_useState1[0], setExpressionValue = _React3__namespace_useState1[1];
-    var options = React3__namespace.useMemo(function() {
+    var devCtx = React4.useContext(DevContext);
+    var resolvedExpectedType = useResolvedExpectedType2(expectedType, devCtx);
+    var _React4__namespace_useState = _sliced_to_array(React4__namespace.useState(false), 2), isExpressionMode = _React4__namespace_useState[0], setIsExpressionMode = _React4__namespace_useState[1];
+    var _React4__namespace_useState1 = _sliced_to_array(React4__namespace.useState(""), 2), expressionValue = _React4__namespace_useState1[0], setExpressionValue = _React4__namespace_useState1[1];
+    var options = React4__namespace.useMemo(function() {
         return rawOptions.map(function(opt) {
             return typeof opt === "string" ? {
                 value: opt,
@@ -4955,7 +5046,7 @@ function Select2(param) {
     }, [
         rawOptions
     ]);
-    var displayValue = React3__namespace.useMemo(function() {
+    var displayValue = React4__namespace.useMemo(function() {
         if (value && (typeof value === "undefined" ? "undefined" : _type_of(value)) === "object" && "expression" in value) {
             return value.expression || "";
         }
@@ -4963,12 +5054,12 @@ function Select2(param) {
     }, [
         value
     ]);
-    var isExpression = React3__namespace.useMemo(function() {
+    var isExpression = React4__namespace.useMemo(function() {
         return value && (typeof value === "undefined" ? "undefined" : _type_of(value)) === "object" && "expression" in value;
     }, [
         value
     ]);
-    React3__namespace.useEffect(function() {
+    React4__namespace.useEffect(function() {
         if (isExpression) {
             setIsExpressionMode(true);
             setExpressionValue(displayValue);
@@ -4977,7 +5068,7 @@ function Select2(param) {
         isExpression,
         displayValue
     ]);
-    var handleSelectChange = React3__namespace.useCallback(function(newValue) {
+    var handleSelectChange = React4__namespace.useCallback(function(newValue) {
         if (newValue === "__expression__") {
             setIsExpressionMode(true);
             return;
@@ -4986,7 +5077,7 @@ function Select2(param) {
     }, [
         onChange
     ]);
-    var handleExpressionChange = React3__namespace.useCallback(function(e) {
+    var handleExpressionChange = React4__namespace.useCallback(function(e) {
         var newValue = e.target.value;
         setExpressionValue(newValue);
         onChange({
@@ -4996,7 +5087,7 @@ function Select2(param) {
     }, [
         onChange
     ]);
-    var handleSwitchToValue = React3__namespace.useCallback(function() {
+    var handleSwitchToValue = React4__namespace.useCallback(function() {
         setIsExpressionMode(false);
         setExpressionValue("");
         onChange("");
@@ -5031,24 +5122,26 @@ function Select2(param) {
         },
         hasError: showError
     };
-    return /* @__PURE__ */ React3__namespace.createElement("div", {
+    var isWaiting = resolvedExpectedType.startsWith("Waiting for:") || resolvedExpectedType.startsWith("Subscribing to:");
+    return /* @__PURE__ */ React4__namespace.createElement("div", {
         className: cn("uii:mb-2", className)
-    }, /* @__PURE__ */ React3__namespace.createElement("div", {
+    }, /* @__PURE__ */ React4__namespace.createElement("div", {
         className: "uii:flex uii:items-center uii:gap-2 uii:mt-2"
-    }, /* @__PURE__ */ React3__namespace.createElement("label", {
+    }, /* @__PURE__ */ React4__namespace.createElement("label", {
         htmlFor: fieldName,
         className: "uii:text-xs uii:font-bold uii:text-muted-foreground"
-    }, label, ":"), expectedType !== "$.interface.timer" && /* @__PURE__ */ React3__namespace.createElement("span", {
-        className: "uii:-mt-2 uii:inline-flex uii:px-1 uii:py-0.5 uii:bg-gray-200 uii:rounded-sm uii:text-[10px] uii:font-mono uii:text-muted-foreground uii:font-light"
-    }, expectedType), showError && /* @__PURE__ */ React3__namespace.createElement("span", {
+    }, label, ":"), resolvedExpectedType !== "$.interface.timer" && /* @__PURE__ */ React4__namespace.createElement("span", {
+        className: cn("uii:-mt-2 uii:inline-flex uii:px-1 uii:py-0.5 uii:rounded-sm uii:text-[10px] uii:font-mono uii:font-light uii:max-w-[300px] uii:truncate", isWaiting ? "uii:bg-yellow-100 uii:text-yellow-700" : "uii:bg-gray-200 uii:text-muted-foreground"),
+        title: resolvedExpectedType
+    }, resolvedExpectedType), showError && /* @__PURE__ */ React4__namespace.createElement("span", {
         className: "uii:-mt-2 uii:inline-flex uii:px-1 uii:py-0.5 uii:bg-red-100 uii:text-red-600 uii:rounded-sm uii:text-[10px] uii:font-medium"
-    }, "Required")), /* @__PURE__ */ React3__namespace.createElement("div", {
+    }, "Required")), /* @__PURE__ */ React4__namespace.createElement("div", {
         className: "uii:mt-0.5"
     }, children ? // Use custom render function
     children(renderProps) : isExpressionMode ? // Expression mode - show input with clear button
-    /* @__PURE__ */ React3__namespace.createElement("div", {
+    /* @__PURE__ */ React4__namespace.createElement("div", {
         className: "uii:flex uii:items-center uii:h-9 uii:rounded-sm uii:border uii:border-amber-500/50 uii:bg-amber-500/5"
-    }, /* @__PURE__ */ React3__namespace.createElement("input", {
+    }, /* @__PURE__ */ React4__namespace.createElement("input", {
         id: fieldName,
         name: fieldName,
         type: "text",
@@ -5057,7 +5150,7 @@ function Select2(param) {
         disabled: disabled,
         placeholder: "Enter expression...",
         className: cn("uii:flex-1 uii:h-full uii:px-3 uii:bg-transparent uii:text-sm uii:font-mono uii:text-amber-600", "uii:outline-none uii:border-none", disabled && "uii:opacity-50 uii:cursor-not-allowed")
-    }), /* @__PURE__ */ React3__namespace.createElement("button", {
+    }), /* @__PURE__ */ React4__namespace.createElement("button", {
         type: "button",
         onClick: handleSwitchToValue,
         className: "uii:flex uii:items-center uii:justify-center uii:h-full uii:px-2 uii:text-amber-600 hover:uii:text-red-600 uii:border-l uii:border-amber-500/30",
@@ -5093,23 +5186,154 @@ function Select2(param) {
     //     📝 Custom Expression
     //   </option>
     // </select>
-    /* @__PURE__ */ React3__namespace.createElement(Select, {
+    /* @__PURE__ */ React4__namespace.createElement(Select, {
         value: displayValue,
         onValueChange: function(e) {
             return handleSelectChange(e);
         },
         disabled: disabled !== null && disabled !== void 0 ? disabled : disabled
-    }, /* @__PURE__ */ React3__namespace.createElement(SelectTrigger, {
+    }, /* @__PURE__ */ React4__namespace.createElement(SelectTrigger, {
         className: "ui:w-full ui:h-9 ui:px-3 ui:border ui:border-input ui:rounded-sm ui:bg-background"
-    }, /* @__PURE__ */ React3__namespace.createElement(SelectValue, {
+    }, /* @__PURE__ */ React4__namespace.createElement(SelectValue, {
         placeholder: placeholder
-    })), /* @__PURE__ */ React3__namespace.createElement(SelectContent, null, options.map(function(opt) {
-        return /* @__PURE__ */ React3__namespace.createElement(SelectItem, {
+    })), /* @__PURE__ */ React4__namespace.createElement(SelectContent, null, options.map(function(opt) {
+        return /* @__PURE__ */ React4__namespace.createElement(SelectItem, {
             key: opt.value,
             value: opt.value
-        }, opt.node ? opt.node : /* @__PURE__ */ React3__namespace.createElement(React3__namespace.Fragment, null, opt.label));
+        }, opt.node ? opt.node : /* @__PURE__ */ React4__namespace.createElement(React4__namespace.Fragment, null, opt.label));
     })))));
 }
+// src/components/template-editor/operatorTypes.ts
+function parseInferredTypes(typeStr) {
+    var result = {
+        baseTypes: [],
+        stringConstants: [],
+        numberConstants: [],
+        hasConstants: false,
+        rawTypes: []
+    };
+    if (!typeStr || typeStr === "any" || typeStr === "unknown") {
+        result.baseTypes = [
+            "any"
+        ];
+        result.rawTypes = [
+            "any"
+        ];
+        return result;
+    }
+    var types = typeStr.split("|").map(function(t) {
+        return t.trim();
+    }).filter(Boolean);
+    var baseTypesSet = /* @__PURE__ */ new Set();
+    var rawTypesSet = /* @__PURE__ */ new Set();
+    var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
+    try {
+        for(var _iterator = types[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true){
+            var t = _step.value;
+            rawTypesSet.add(t);
+            var stringLiteralMatch = t.match(/^["'](.*)["']$/);
+            if (stringLiteralMatch && stringLiteralMatch[1] !== void 0) {
+                result.stringConstants.push(stringLiteralMatch[1]);
+                baseTypesSet.add("string");
+                result.hasConstants = true;
+                continue;
+            }
+            if (/^-?\d+(\.\d+)?$/.test(t)) {
+                result.numberConstants.push(parseFloat(t));
+                baseTypesSet.add("number");
+                result.hasConstants = true;
+                continue;
+            }
+            if (t === "true" || t === "false") {
+                baseTypesSet.add("boolean");
+                result.hasConstants = true;
+                continue;
+            }
+            baseTypesSet.add(t);
+        }
+    } catch (err) {
+        _didIteratorError = true;
+        _iteratorError = err;
+    } finally{
+        try {
+            if (!_iteratorNormalCompletion && _iterator.return != null) {
+                _iterator.return();
+            }
+        } finally{
+            if (_didIteratorError) {
+                throw _iteratorError;
+            }
+        }
+    }
+    result.baseTypes = Array.from(baseTypesSet);
+    result.rawTypes = Array.from(rawTypesSet);
+    return result;
+}
+function computeExtendedType(inferredType, opDef) {
+    if (opDef.narrowsTo === "never") {
+        return "never";
+    }
+    var parsed = parseInferredTypes(inferredType);
+    var matchingLiterals = [];
+    var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
+    try {
+        for(var _iterator = parsed.rawTypes[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true){
+            var t = _step.value;
+            if (opDef.narrowsTo === "string") {
+                if (t === "string") ;
+                else if (/^["'].*["']$/.test(t)) {
+                    matchingLiterals.push(t);
+                }
+            } else if (opDef.narrowsTo === "number") {
+                if (t === "number") ;
+                else if (/^-?\d+(\.\d+)?$/.test(t)) {
+                    matchingLiterals.push(t);
+                }
+            } else if (opDef.narrowsTo === "boolean") {
+                if (t === "boolean") ;
+                else if (t === "true" || t === "false") {
+                    matchingLiterals.push(t);
+                }
+            }
+        }
+    } catch (err) {
+        _didIteratorError = true;
+        _iteratorError = err;
+    } finally{
+        try {
+            if (!_iteratorNormalCompletion && _iterator.return != null) {
+                _iterator.return();
+            }
+        } finally{
+            if (_didIteratorError) {
+                throw _iteratorError;
+            }
+        }
+    }
+    var result = _to_consumable_array(matchingLiterals);
+    if (opDef.extendsWithBase || matchingLiterals.length === 0) {
+        if (!result.includes(opDef.narrowsTo)) {
+            result.push(opDef.narrowsTo);
+        }
+    }
+    return result.length > 0 ? result.join(" | ") : opDef.narrowsTo;
+}
+function filterOperatorsByType(operators, inferredType) {
+    var parsed = parseInferredTypes(inferredType);
+    var baseTypes = parsed.baseTypes;
+    return operators.filter(function(op) {
+        if (op.types.includes("any")) return true;
+        return op.types.some(function(t) {
+            return baseTypes.includes(t) || baseTypes.includes("any");
+        });
+    });
+}
+function getStringConstants(inferredType) {
+    return parseInferredTypes(inferredType).stringConstants;
+}
+function getNumberConstants(inferredType) {
+    return parseInferredTypes(inferredType).numberConstants;
+}
 // src/components/fields/index.tsx
 function useTemplateFieldContext() {
     return {
@@ -5137,19 +5361,30 @@ function useFieldPath(fieldName) {
 }
 function TemplateFieldProvider(param) {
     var children = param.children;
-    return /* @__PURE__ */ React3__namespace.default.createElement(React3__namespace.default.Fragment, null, children);
+    return /* @__PURE__ */ React4__namespace.default.createElement(React4__namespace.default.Fragment, null, children);
 }
 function NestedFieldProvider(param) {
     var children = param.children;
-    return /* @__PURE__ */ React3__namespace.default.createElement(React3__namespace.default.Fragment, null, children);
+    return /* @__PURE__ */ React4__namespace.default.createElement(React4__namespace.default.Fragment, null, children);
 }
-var InferredTypesContext = React3.createContext(null);
+var InferredTypesContext = React4.createContext(null);
 function useInferredTypes() {
-    return React3.useContext(InferredTypesContext);
+    var devContext = React4.useContext(DevContext);
+    var realContext = React4.useContext(InferredTypesContext);
+    if (devContext) {
+        return {
+            inferredTypes: devContext.inferredTypes,
+            setInferredType: devContext.setInferredType,
+            getInferredType: devContext.getInferredType,
+            clearInferredType: devContext.clearInferredType,
+            clearAllInferredTypes: devContext.clearAllInferredTypes
+        };
+    }
+    return realContext;
 }
 function InferredTypesProvider(param) {
     var children = param.children;
-    return /* @__PURE__ */ React3__namespace.default.createElement(React3__namespace.default.Fragment, null, children);
+    return /* @__PURE__ */ React4__namespace.default.createElement(React4__namespace.default.Fragment, null, children);
 }
 function intersectTypes(types) {
     var validTypes = types.filter(function(t) {
@@ -5272,64 +5507,196 @@ function getOperatorsForType(type) {
 }
 function NodePropertyProvider(param) {
     var children = param.children;
-    return /* @__PURE__ */ React3__namespace.default.createElement(React3__namespace.default.Fragment, null, children);
+    return /* @__PURE__ */ React4__namespace.default.createElement(React4__namespace.default.Fragment, null, children);
 }
 function useIsInNodePropertyProvider() {
-    return false;
+    var devContext = React4.useContext(DevContext);
+    return devContext !== null;
 }
 function useNodeProperty(key) {
-    var noopSetter = React3.useCallback(function() {
-        console.warn('[useNodeProperty] Mock mode - cannot set "'.concat(key, '"'));
+    var devContext = React4.useContext(DevContext);
+    var _React4_useState = _sliced_to_array(React4.useState(function() {
+        var _devContext_data;
+        return devContext === null || devContext === void 0 ? void 0 : (_devContext_data = devContext.data) === null || _devContext_data === void 0 ? void 0 : _devContext_data[key];
+    }), 2), devValue = _React4_useState[0], setDevValue = _React4_useState[1];
+    React4__namespace.default.useEffect(function() {
+        if (devContext) {
+            setDevValue(devContext.data[key]);
+        }
+    }, [
+        devContext,
+        key
+    ]);
+    var devSetter = React4.useCallback(function(value) {
+        if (devContext) {
+            devContext.setProperty(key, value);
+            setDevValue(value);
+        }
     }, [
+        devContext,
         key
     ]);
+    var noopSetter = React4.useCallback(function() {
+        console.warn('[useNodeProperty] No provider - cannot set "'.concat(key, '"'));
+    }, [
+        key
+    ]);
+    if (devContext) {
+        return [
+            devValue,
+            devSetter
+        ];
+    }
     return [
         void 0,
         noopSetter
     ];
 }
 function useNodeProperties() {
-    var noopSetter = React3.useCallback(function() {
-        console.warn("[useNodeProperties] Mock mode - cannot set properties");
+    var devContext = React4.useContext(DevContext);
+    var _React4_useState = _sliced_to_array(React4.useState(function() {
+        var _devContext_data;
+        return (_devContext_data = devContext === null || devContext === void 0 ? void 0 : devContext.data) !== null && _devContext_data !== void 0 ? _devContext_data : {};
+    }), 2), devData = _React4_useState[0], setDevData = _React4_useState[1];
+    React4__namespace.default.useEffect(function() {
+        if (devContext) {
+            setDevData(_object_spread({}, devContext.data));
+        }
+    }, [
+        devContext,
+        devContext === null || devContext === void 0 ? void 0 : devContext.data
+    ]);
+    var devSetter = React4.useCallback(function(updates) {
+        if (devContext) {
+            Object.entries(updates).forEach(function(param) {
+                var _param = _sliced_to_array(param, 2), key = _param[0], value = _param[1];
+                devContext.setProperty(key, value);
+            });
+            setDevData(function(prev) {
+                return _object_spread({}, prev, updates);
+            });
+        }
+    }, [
+        devContext
+    ]);
+    var noopSetter = React4.useCallback(function() {
+        console.warn("[useNodeProperties] No provider - cannot set properties");
     }, []);
+    if (devContext) {
+        return [
+            devData,
+            devSetter
+        ];
+    }
     return [
         {},
         noopSetter
     ];
 }
 function useInferredType(fieldName) {
+    var devContext = React4.useContext(DevContext);
+    var _React4_useState = _sliced_to_array(React4.useState(function() {
+        var _devContext_inferredTypes;
+        return devContext === null || devContext === void 0 ? void 0 : (_devContext_inferredTypes = devContext.inferredTypes) === null || _devContext_inferredTypes === void 0 ? void 0 : _devContext_inferredTypes[fieldName];
+    }), 2), devInferredType = _React4_useState[0], setDevInferredType = _React4_useState[1];
+    React4__namespace.default.useEffect(function() {
+        if (devContext) {
+            setDevInferredType(devContext.inferredTypes[fieldName]);
+        }
+    }, [
+        devContext,
+        fieldName,
+        devContext === null || devContext === void 0 ? void 0 : devContext.inferredTypes
+    ]);
+    if (devContext) {
+        return devInferredType;
+    }
     return void 0;
 }
 function useSetInferredType() {
-    return React3.useCallback(function(fieldName, type) {
-        console.warn('[useSetInferredType] Mock mode - cannot set "'.concat(fieldName, '" to "').concat(type, '"'));
-    }, []);
+    var devContext = React4.useContext(DevContext);
+    return React4.useCallback(function(fieldName, type) {
+        if (devContext) {
+            devContext.setInferredType(fieldName, type);
+        } else {
+            console.warn('[useSetInferredType] No provider - cannot set "'.concat(fieldName, '" to "').concat(type, '"'));
+        }
+    }, [
+        devContext
+    ]);
+}
+function useClearInferredType() {
+    var devContext = React4.useContext(DevContext);
+    return React4.useCallback(function(fieldName) {
+        if (devContext) {
+            devContext.clearInferredType(fieldName);
+        } else {
+            console.warn('[useClearInferredType] No provider - cannot clear "'.concat(fieldName, '"'));
+        }
+    }, [
+        devContext
+    ]);
+}
+function useClearAllInferredTypes() {
+    var devContext = React4.useContext(DevContext);
+    return React4.useCallback(function() {
+        if (devContext) {
+            devContext.clearAllInferredTypes();
+        } else {
+            console.warn("[useClearAllInferredTypes] No provider - cannot clear all types");
+        }
+    }, [
+        devContext
+    ]);
 }
 function useAllInferredTypes() {
+    var devContext = React4.useContext(DevContext);
+    var _React4_useState = _sliced_to_array(React4.useState(function() {
+        var _devContext_inferredTypes;
+        return (_devContext_inferredTypes = devContext === null || devContext === void 0 ? void 0 : devContext.inferredTypes) !== null && _devContext_inferredTypes !== void 0 ? _devContext_inferredTypes : {};
+    }), 2), devTypes = _React4_useState[0], setDevTypes = _React4_useState[1];
+    React4__namespace.default.useEffect(function() {
+        if (devContext) {
+            setDevTypes(_object_spread({}, devContext.inferredTypes));
+        }
+    }, [
+        devContext,
+        devContext === null || devContext === void 0 ? void 0 : devContext.inferredTypes
+    ]);
+    if (devContext) {
+        return devTypes;
+    }
     return {};
 }
 function useSetProperty() {
-    return React3.useCallback(function(key, value) {
-        console.warn('[useSetProperty] Mock mode - cannot set "'.concat(key, '"'));
-    }, []);
+    var devContext = React4.useContext(DevContext);
+    return React4.useCallback(function(key, value) {
+        if (devContext) {
+            devContext.setProperty(key, value);
+        } else {
+            console.warn('[useSetProperty] No provider - cannot set "'.concat(key, '"'));
+        }
+    }, [
+        devContext
+    ]);
 }
 function useFieldValidation() {
-    var setFieldRequired = React3.useCallback(function(fieldName, required) {
+    var setFieldRequired = React4.useCallback(function(fieldName, required) {
         console.warn('[useFieldValidation] Mock mode - cannot set required for "'.concat(fieldName, '"'));
     }, []);
-    var setFieldRequiredIf = React3.useCallback(function(fieldName, requiredIf) {
+    var setFieldRequiredIf = React4.useCallback(function(fieldName, requiredIf) {
         console.warn('[useFieldValidation] Mock mode - cannot set requiredIf for "'.concat(fieldName, '"'));
     }, []);
-    var setFieldValidation = React3.useCallback(function(fieldName, customValidation) {
+    var setFieldValidation = React4.useCallback(function(fieldName, customValidation) {
         console.warn('[useFieldValidation] Mock mode - cannot set validation for "'.concat(fieldName, '"'));
     }, []);
-    var clearFieldValidation = React3.useCallback(function(fieldName) {
+    var clearFieldValidation = React4.useCallback(function(fieldName) {
         console.warn('[useFieldValidation] Mock mode - cannot clear validation for "'.concat(fieldName, '"'));
     }, []);
-    var isFieldRequired = React3.useCallback(function(fieldName) {
+    var isFieldRequired = React4.useCallback(function(fieldName) {
         return false;
     }, []);
-    var validateField = React3.useCallback(function(fieldName) {
+    var validateField = React4.useCallback(function(fieldName) {
         return null;
     }, []);
     return {
@@ -5349,10 +5716,17 @@ exports.NodePropertyProvider = NodePropertyProvider;
 exports.OPERATORS_BY_TYPE = OPERATORS_BY_TYPE;
 exports.Select = Select2;
 exports.TemplateFieldProvider = TemplateFieldProvider;
+exports.computeExtendedType = computeExtendedType;
+exports.filterOperatorsByType = filterOperatorsByType;
+exports.getNumberConstants = getNumberConstants;
 exports.getOperatorsForType = getOperatorsForType;
+exports.getStringConstants = getStringConstants;
 exports.intersectTypes = intersectTypes;
 exports.parseInferSyntax = parseInferSyntax;
+exports.parseInferredTypes = parseInferredTypes;
 exports.useAllInferredTypes = useAllInferredTypes;
+exports.useClearAllInferredTypes = useClearAllInferredTypes;
+exports.useClearInferredType = useClearInferredType;
 exports.useFieldPath = useFieldPath;
 exports.useFieldValidation = useFieldValidation;
 exports.useInferredType = useInferredType;