feat: save variable/resource even with validation errors (#4798)

Closes #4753

Variable validation especially resources shouldn't be too destructive.
User may configure complex resource and get it all wiped out because url
is invalid or header has empty value.

Here I tweaked the logic to require only not duplicated "name" and
everything else is saved even when invalid.

This will not break anything in generation process and will still show
user an error.

<img width="649" alt="Screenshot 2025-01-28 at 14 18 11"
src="https://github.com/user-attachments/assets/0916d250-a864-4362-bf1f-67b6c15024ef"
/>

Author: TrySound

apps/builder/app/builder/features/settings-panel/variable-popover.tsx

@@ -813,7 +813,14 @@ export const VariablePopoverTrigger = ({
                 if (requiresUpgrade) {
                   return;
                 }
-                if (event.currentTarget.checkValidity()) {
+                const nameElement =
+                  event.currentTarget.elements.namedItem("name");
+                // make sure only name is valid and allow to save everything else
+                // to avoid loosing complex configuration when closed accidentally
+                if (
+                  nameElement instanceof HTMLInputElement &&
+                  nameElement.checkValidity()
+                ) {
                   const formData = new FormData(event.currentTarget);
                   panelRef.current?.save(formData);
                   // close popover whenever new variable is created

apps/builder/package.json

@@ -38,7 +38,7 @@
     "@lexical/selection": "^0.21.0",
     "@lexical/utils": "^0.21.0",
     "@lezer/common": "^1.2.3",
-    "@lezer/css": "^1.1.9",
+    "@lezer/css": "^1.1.10",
     "@lezer/highlight": "^1.2.1",
     "@nanostores/react": "^0.8.0",
     "@nkzw/use-relative-time": "^1.1.0",

packages/design-system/src/components/floating-panel.tsx

@@ -158,6 +158,7 @@ export const FloatingPanel = ({
         width={width}
         height={height}
         {...position}
+        aria-describedby={undefined}
         onInteractOutside={(event) => {
           // When a dialog is centered, we don't want to close it when clicking outside
           // This allows having inline and left positioned dialogs open at the same time as a centered dialog,