@valbuild/ui 0.45.0 → 0.46.1

package/server/dist/valbuild-ui-main.esm.js

@@ -32446,7 +32446,7 @@ var Schema = /* @__PURE__ */ function() {
   return Schema2;
 }();
 var GetSchema = Symbol("GetSchema");
-var Path = Symbol("Path");
+var Path$1 = Symbol("Path");
 var GetSource = Symbol("GetSource");
 function getSchema(selector) {
   return selector[GetSchema];
@@ -32495,10 +32495,10 @@ function isSerializedVal(val) {
   return _typeof(val) === "object" && val !== null && val !== void 0 && ("val" in val || "valPath" in val);
 }
 function isVal(val) {
-  return _typeof(val) === "object" && val !== null && val !== void 0 && Path in val && "val" in val;
+  return _typeof(val) === "object" && val !== null && val !== void 0 && Path$1 in val && "val" in val;
 }
 function getValPath(valOrSelector) {
-  return valOrSelector[Path];
+  return valOrSelector[Path$1];
 }
 function hasOwn$1(obj, prop) {
   return Object.prototype.hasOwnProperty.call(obj, prop);
@@ -32510,7 +32510,7 @@ function _andThen(f, source, path) {
   return newSelectorProxy(source, path);
 }
 function isSelector(source) {
-  return _typeof(source) === "object" && source !== null && (GetSource in source || Path in source);
+  return _typeof(source) === "object" && source !== null && (GetSource in source || Path$1 in source);
 }
 function newSelectorProxy(source, path, moduleSchema) {
   if (_typeof(source) === "object") {
@@ -32539,7 +32539,7 @@ function newSelectorProxy(source, path, moduleSchema) {
             if (prop === GetSource) {
               return true;
             }
-            if (prop === Path) {
+            if (prop === Path$1) {
               return true;
             }
             if (prop === "andThen") {
@@ -32554,7 +32554,7 @@ function newSelectorProxy(source, path, moduleSchema) {
             if (prop === GetSource) {
               return source;
             }
-            if (prop === Path) {
+            if (prop === Path$1) {
               return path;
             }
             if (prop === GetSchema) {
@@ -32621,7 +32621,7 @@ function newSelectorProxy(source, path, moduleSchema) {
         andThen: function andThen(f) {
           return _andThen(f, source === void 0 ? null : source, path);
         }
-      }, GetSource, source === void 0 ? null : source), Path, path), GetSchema, moduleSchema);
+      }, GetSource, source === void 0 ? null : source), Path$1, path), GetSchema, moduleSchema);
   }
 }
 function createValPathOfItem$1(arrayPath, prop) {
@@ -32631,7 +32631,7 @@ function createValPathOfItem$1(arrayPath, prop) {
   return arrayPath && "".concat(arrayPath, ".").concat(JSON.stringify(prop));
 }
 function unValify(valueOrSelector) {
-  if (_typeof(valueOrSelector) === "object" && (GetSource in valueOrSelector || Path in valueOrSelector)) {
+  if (_typeof(valueOrSelector) === "object" && (GetSource in valueOrSelector || Path$1 in valueOrSelector)) {
     var selectorValue = valueOrSelector[GetSource];
     return selectorValue;
   }
@@ -33442,6 +33442,96 @@ function parsePath$1(input) {
   }
   return result2;
 }
+var StringSchema = /* @__PURE__ */ function(_Schema) {
+  _inherits(StringSchema2, _Schema);
+  var _super = _createSuper(StringSchema2);
+  function StringSchema2(options) {
+    var _this;
+    var opt = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : false;
+    var isRaw = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : false;
+    _classCallCheck(this, StringSchema2);
+    _this = _super.call(this);
+    _this.options = options;
+    _this.opt = opt;
+    _this.isRaw = isRaw;
+    return _this;
+  }
+  _createClass(StringSchema2, [{
+    key: "validate",
+    value: function validate(path, src) {
+      var _this$options, _this$options2, _this$options3;
+      if (this.opt && (src === null || src === void 0)) {
+        return false;
+      }
+      if (typeof src !== "string") {
+        return _defineProperty$1({}, path, [{
+          message: "Expected 'string', got '".concat(_typeof(src), "'"),
+          value: src
+        }]);
+      }
+      var errors = [];
+      if ((_this$options = this.options) !== null && _this$options !== void 0 && _this$options.maxLength && src.length > this.options.maxLength) {
+        errors.push({
+          message: "Expected string to be at most ".concat(this.options.maxLength, " characters long, got ").concat(src.length),
+          value: src
+        });
+      }
+      if ((_this$options2 = this.options) !== null && _this$options2 !== void 0 && _this$options2.minLength && src.length < this.options.minLength) {
+        errors.push({
+          message: "Expected string to be at least ".concat(this.options.minLength, " characters long, got ").concat(src.length),
+          value: src
+        });
+      }
+      if ((_this$options3 = this.options) !== null && _this$options3 !== void 0 && _this$options3.regexp && !this.options.regexp.test(src)) {
+        errors.push({
+          message: "Expected string to match reg exp: ".concat(this.options.regexp.toString(), ", got '").concat(src, "'"),
+          value: src
+        });
+      }
+      if (errors.length > 0) {
+        return _defineProperty$1({}, path, errors);
+      }
+      return false;
+    }
+  }, {
+    key: "assert",
+    value: function assert(src) {
+      if (this.opt && (src === null || src === void 0)) {
+        return true;
+      }
+      return typeof src === "string";
+    }
+  }, {
+    key: "optional",
+    value: function optional() {
+      return new StringSchema2(this.options, true, this.isRaw);
+    }
+  }, {
+    key: "raw",
+    value: function raw() {
+      return new StringSchema2(this.options, this.opt, true);
+    }
+  }, {
+    key: "serialize",
+    value: function serialize() {
+      var _this$options4, _this$options5, _this$options6;
+      return {
+        type: "string",
+        options: {
+          maxLength: (_this$options4 = this.options) === null || _this$options4 === void 0 ? void 0 : _this$options4.maxLength,
+          minLength: (_this$options5 = this.options) === null || _this$options5 === void 0 ? void 0 : _this$options5.minLength,
+          regexp: ((_this$options6 = this.options) === null || _this$options6 === void 0 ? void 0 : _this$options6.regexp) && {
+            source: this.options.regexp.source,
+            flags: this.options.regexp.flags
+          }
+        },
+        opt: this.opt,
+        raw: this.isRaw
+      };
+    }
+  }]);
+  return StringSchema2;
+}(Schema);
 function getVal(selector) {
   return newValProxy(serializedValOfSelectorSource(selector));
 }
@@ -33464,7 +33554,7 @@ function serializedValOfSelectorSource(selector) {
     var isObject = isObjectOrObjectSelector(child);
     if (isArray) {
       var array = GetSource in child ? child[GetSource] : child;
-      var valPath = Path in child ? child[Path] : void 0;
+      var valPath = Path$1 in child ? child[Path$1] : void 0;
       return {
         val: array.map(function(item, i) {
           return rec(isSelector(item) ? item : newSelectorProxy(item, createValPathOfItem$1(valPath, i)));
@@ -33473,7 +33563,7 @@ function serializedValOfSelectorSource(selector) {
       };
     } else if (isObject) {
       var obj = GetSource in child ? child[GetSource] : child;
-      var _valPath = Path in child ? child[Path] : void 0;
+      var _valPath = Path$1 in child ? child[Path$1] : void 0;
       return {
         val: obj !== null && Object.fromEntries(Object.entries(obj).map(function(_ref) {
           var _ref2 = _slicedToArray$1(_ref, 2), key = _ref2[0], value = _ref2[1];
@@ -33484,7 +33574,7 @@ function serializedValOfSelectorSource(selector) {
     } else if (isSelector(child)) {
       return {
         val: rec(child[GetSource]),
-        valPath: child[Path]
+        valPath: child[Path$1]
       };
     } else {
       return child;
@@ -33526,13 +33616,13 @@ function newValProxy(val) {
             if (prop === "val") {
               return true;
             }
-            if (prop === Path) {
+            if (prop === Path$1) {
               return true;
             }
             return hasOwn(target, prop);
           },
           get: function get(target, prop) {
-            if (prop === Path) {
+            if (prop === Path$1) {
               return val.valPath;
             }
             if (prop === "val") {
@@ -33553,7 +33643,7 @@ function newValProxy(val) {
         });
       }
     default:
-      return _defineProperty$1(_defineProperty$1({}, Path, val.valPath), "val", val.val);
+      return _defineProperty$1(_defineProperty$1({}, Path$1, val.valPath), "val", val.val);
   }
 }
 function hasOwn(obj, prop) {
@@ -38007,14 +38097,21 @@ const twMerge = /* @__PURE__ */ createTailwindMerge(getDefaultConfig);
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
-const ScrollArea = reactExports.forwardRef(({ className: className2, children, ...props }, ref) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+const ScrollArea = reactExports.forwardRef(({ className: className2, children, innerRef, ...props }, ref) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
   $57acba87d6e25586$export$be92b6f5f03c0fe9,
   {
     ref,
     className: cn("relative overflow-hidden", className2),
     ...props,
     children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx($57acba87d6e25586$export$d5c6c08dc2d3ca7, { className: "h-full w-full rounded-[inherit]", children }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        $57acba87d6e25586$export$d5c6c08dc2d3ca7,
+        {
+          className: "h-full w-full rounded-[inherit]",
+          ref: innerRef,
+          children
+        }
+      ),
       /* @__PURE__ */ jsxRuntimeExports.jsx(ScrollBar, {}),
       /* @__PURE__ */ jsxRuntimeExports.jsx($57acba87d6e25586$export$ac61190d9fc311a9, {})
     ]
@@ -38045,6 +38142,105 @@ const ScrollBar = reactExports.forwardRef(({ className: className2, orientation
   }
 ));
 ScrollBar.displayName = $57acba87d6e25586$export$2fabd85d0eba3c57.displayName;
+var defaultAttributes = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: 24,
+  height: 24,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: 2,
+  strokeLinecap: "round",
+  strokeLinejoin: "round"
+};
+const toKebabCase = (string) => string.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+const createLucideIcon = (iconName, iconNode) => {
+  const Component = reactExports.forwardRef(
+    ({ color = "currentColor", size: size2 = 24, strokeWidth = 2, absoluteStrokeWidth, children, ...rest }, ref) => reactExports.createElement(
+      "svg",
+      {
+        ref,
+        ...defaultAttributes,
+        width: size2,
+        height: size2,
+        stroke: color,
+        strokeWidth: absoluteStrokeWidth ? Number(strokeWidth) * 24 / Number(size2) : strokeWidth,
+        className: `lucide lucide-${toKebabCase(iconName)}`,
+        ...rest
+      },
+      [
+        ...iconNode.map(([tag, attrs]) => reactExports.createElement(tag, attrs)),
+        ...(Array.isArray(children) ? children : [children]) || []
+      ]
+    )
+  );
+  Component.displayName = `${iconName}`;
+  return Component;
+};
+const Check$2 = createLucideIcon("Check", [
+  ["polyline", { points: "20 6 9 17 4 12", key: "10jjfj" }]
+]);
+const ChevronDown = createLucideIcon("ChevronDown", [
+  ["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]
+]);
+const ChevronLeft = createLucideIcon("ChevronLeft", [
+  ["path", { d: "m15 18-6-6 6-6", key: "1wnfg3" }]
+]);
+const LogIn = createLucideIcon("LogIn", [
+  ["path", { d: "M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4", key: "u53s6r" }],
+  ["polyline", { points: "10 17 15 12 10 7", key: "1ail0h" }],
+  ["line", { x1: "15", x2: "3", y1: "12", y2: "12", key: "v6grx8" }]
+]);
+const Maximize2 = createLucideIcon("Maximize2", [
+  ["polyline", { points: "15 3 21 3 21 9", key: "mznyad" }],
+  ["polyline", { points: "9 21 3 21 3 15", key: "1avn1i" }],
+  ["line", { x1: "21", x2: "14", y1: "3", y2: "10", key: "ota7mn" }],
+  ["line", { x1: "3", x2: "10", y1: "21", y2: "14", key: "1atl0r" }]
+]);
+const Menu = createLucideIcon("Menu", [
+  ["line", { x1: "4", x2: "20", y1: "12", y2: "12", key: "1e0a9i" }],
+  ["line", { x1: "4", x2: "20", y1: "6", y2: "6", key: "1owob3" }],
+  ["line", { x1: "4", x2: "20", y1: "18", y2: "18", key: "yk5zj1" }]
+]);
+const Minimize2 = createLucideIcon("Minimize2", [
+  ["polyline", { points: "4 14 10 14 10 20", key: "11kfnr" }],
+  ["polyline", { points: "20 10 14 10 14 4", key: "rlmsce" }],
+  ["line", { x1: "14", x2: "21", y1: "10", y2: "3", key: "o5lafz" }],
+  ["line", { x1: "3", x2: "10", y1: "21", y2: "14", key: "1atl0r" }]
+]);
+const Moon = createLucideIcon("Moon", [
+  ["path", { d: "M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z", key: "a7tn18" }]
+]);
+const Pause = createLucideIcon("Pause", [
+  ["rect", { width: "4", height: "16", x: "6", y: "4", key: "iffhe4" }],
+  ["rect", { width: "4", height: "16", x: "14", y: "4", key: "sjin7j" }]
+]);
+const Play = createLucideIcon("Play", [
+  ["polygon", { points: "5 3 19 12 5 21 5 3", key: "191637" }]
+]);
+const Power = createLucideIcon("Power", [
+  ["path", { d: "M12 2v10", key: "mnfbl" }],
+  ["path", { d: "M18.4 6.6a9 9 0 1 1-12.77.04", key: "obofu9" }]
+]);
+const Send = createLucideIcon("Send", [
+  ["path", { d: "m22 2-7 20-4-9-9-4Z", key: "1q3vgg" }],
+  ["path", { d: "M22 2 11 13", key: "nzbqef" }]
+]);
+const Sun = createLucideIcon("Sun", [
+  ["circle", { cx: "12", cy: "12", r: "4", key: "4exip2" }],
+  ["path", { d: "M12 2v2", key: "tus03m" }],
+  ["path", { d: "M12 20v2", key: "1lh1kg" }],
+  ["path", { d: "m4.93 4.93 1.41 1.41", key: "149t6j" }],
+  ["path", { d: "m17.66 17.66 1.41 1.41", key: "ptbguv" }],
+  ["path", { d: "M2 12h2", key: "1t8f8n" }],
+  ["path", { d: "M20 12h2", key: "1q8mjw" }],
+  ["path", { d: "m6.34 17.66-1.41 1.41", key: "1m8zz5" }],
+  ["path", { d: "m19.07 4.93-1.41 1.41", key: "1shlcs" }]
+]);
+const X$2 = createLucideIcon("X", [
+  ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
+  ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
+]);
 function Grid({ children }) {
   const leftColRef = reactExports.useRef(null);
   const rightColRef = reactExports.useRef(null);
@@ -38052,6 +38248,7 @@ function Grid({ children }) {
   const x = reactExports.useRef(0);
   const dragRef = reactExports.useRef(null);
   const originalWidth = reactExports.useRef(0);
+  const [showMobileLeftMenu, setShowMobileLeftMenu] = reactExports.useState(true);
   const handleMouseUp = () => {
     isResizing.current = false;
     dragRef.current = null;
@@ -38092,17 +38289,40 @@ function Grid({ children }) {
       document.removeEventListener("mousemove", handleMouseMove);
     };
   }, []);
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex h-screen", children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative flex h-screen", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "div",
       {
         ref: leftColRef,
-        className: "relative border-r border-border",
-        style: { width: 300 },
+        className: classNames(
+          "absolute top-0 left-0 border-r border-border md:relative z-[1] bg-gradient-to-br from-card from-50% to-background",
+          {
+            "w-[300px]": showMobileLeftMenu,
+            "w-0 md:w-[300px]": !showMobileLeftMenu
+          }
+        ),
         children: [
           /* @__PURE__ */ jsxRuntimeExports.jsxs(Grid.Column, { children: [
-            header1,
-            /* @__PURE__ */ jsxRuntimeExports.jsx(ScrollArea, { style: { height: "calc(100vh - 50px)" }, children: body1 })
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              MenuButton$1,
+              {
+                showOnMobile: !showMobileLeftMenu,
+                onClick: () => {
+                  setShowMobileLeftMenu(!showMobileLeftMenu);
+                },
+                children: header1
+              }
+            ),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              ScrollArea,
+              {
+                style: { height: "calc(100vh - 50px)" },
+                onClick: () => {
+                  setShowMobileLeftMenu(false);
+                },
+                children: body1
+              }
+            )
           ] }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             "div",
@@ -38121,7 +38341,28 @@ function Grid({ children }) {
           "w-full": !header3 && !body3
         }),
         children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Grid.Column, { children: [
-          header2,
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex w-full border-b border-border", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              MenuButton$1,
+              {
+                className: "md:hidden",
+                showOnMobile: showMobileLeftMenu,
+                onClick: () => {
+                  setShowMobileLeftMenu(!showMobileLeftMenu);
+                },
+                children: header1
+              }
+            ),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "span",
+              {
+                className: classNames({
+                  "pl-[300px] md:pl-0": showMobileLeftMenu
+                }),
+                children: header2
+              }
+            )
+          ] }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(ScrollArea, { style: { height: "calc(100vh - 50px)" }, children: body2 })
         ] })
       }
@@ -38149,134 +38390,30 @@ function Grid({ children }) {
     )
   ] });
 }
-Grid.Column = ({ children }) => {
-  const [header, body] = reactExports.Children.toArray(children);
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center border-b border-border", children: header }),
-    body
-  ] });
-};
-const ImageIcon = ({ className: className2 }) => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-    "svg",
-    {
-      width: "12",
-      height: "12",
-      viewBox: "0 0 9 10",
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg",
-      className: className2,
-      children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("g", { clipPath: "url(#clip0_1225_1638)", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("rect", { y: "0.5", width: "9", height: "9" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M0 7L8.5 5", stroke: "currentColor" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "3", cy: "3.5", r: "1", fill: "currentColor" })
-        ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("rect", { x: "0.5", y: "1", width: "8", height: "8", stroke: "currentColor" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("defs", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("clipPath", { id: "clip0_1225_1638", children: /* @__PURE__ */ jsxRuntimeExports.jsx("rect", { y: "0.5", width: "9", height: "9", fill: "white" }) }) })
-      ]
-    }
-  );
-};
-const ImageIcon$1 = ImageIcon;
-const Section = ({ className: className2 }) => {
+function MenuButton$1({
+  className: className2,
+  showOnMobile,
+  onClick,
+  children
+}) {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-    "svg",
+    "div",
     {
-      width: "9",
-      height: "10",
-      viewBox: "0 0 9 10",
-      className: className2,
-      fill: "currentColor",
-      xmlns: "http://www.w3.org/2000/svg",
+      className: classNames("flex items-center px-4 md:px-4", className2, {
+        "hidden md:flex": showOnMobile
+      }),
       children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("g", { clipPath: "url(#clip0_1222_1618)", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            "path",
-            {
-              fillRule: "evenodd",
-              clipRule: "evenodd",
-              d: "M9 1.5H0V0.5H9V1.5Z",
-              fill: "currentColor"
-            }
-          ),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            "path",
-            {
-              fillRule: "evenodd",
-              clipRule: "evenodd",
-              d: "M9 9.5H0V8.5H9V9.5Z",
-              fill: "currentColor"
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("defs", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("clipPath", { id: "clip0_1222_1618", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "rect",
-          {
-            width: "9",
-            height: "9",
-            fill: "white",
-            transform: "translate(0 0.5)"
-          }
-        ) }) })
+        /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: "md:hidden", onClick, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Menu, {}) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "flex items-center justify-between w-full", children })
       ]
     }
   );
-};
-const Section$1 = Section;
-const TextIcon = ({ className: className2 }) => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    "svg",
-    {
-      width: "9",
-      height: "10",
-      viewBox: "0 0 9 10",
-      fill: "currentColor",
-      xmlns: "http://www.w3.org/2000/svg",
-      className: className2,
-      children: /* @__PURE__ */ jsxRuntimeExports.jsx("g", { clipPath: "url(#clip0_1229_1625)", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M0.0145513 0.5H8.98545L9 3.18569H8.57074C8.43007 2.2276 8.02749 1.57948 7.36298 1.24133C6.98949 1.05491 6.43169 0.953035 5.68957 0.935694V7.94581C5.68957 8.43569 5.78416 8.76084 5.97332 8.92124C6.16734 9.08165 6.5675 9.16185 7.17381 9.16185V9.5H1.86257V9.16185C2.44462 9.16185 2.83023 9.08165 3.0194 8.92124C3.21342 8.7565 3.31043 8.43136 3.31043 7.94581V0.935694C2.58286 0.953035 2.02506 1.05491 1.63703 1.24133C0.92401 1.58815 0.521423 2.23627 0.429264 3.18569H0L0.0145513 0.5Z" }) })
-    }
-  );
-};
-const TextIcon$1 = TextIcon;
-function Tree({ children, rootPath }) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col w-full py-2 text-xs", children: reactExports.Children.map(children, (child) => {
-    return reactExports.cloneElement(child, {
-      paths: [rootPath]
-    });
-  }) });
 }
-Tree.Node = ({
-  children,
-  paths = [],
-  path,
-  level = 1,
-  type,
-  setActivePath
-}) => {
-  const paddingLeft = level * 30;
-  const logo = type === "string" ? /* @__PURE__ */ jsxRuntimeExports.jsx(TextIcon$1, {}) : type === "image" ? /* @__PURE__ */ jsxRuntimeExports.jsx(ImageIcon$1, { className: "h-[9px] w-[9px]" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Section$1, {});
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "w-full", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "button",
-      {
-        className: "flex justify-between w-full group py-2 text-xs font-[400] shrink-0",
-        onClick: () => {
-          setActivePath && setActivePath(path);
-        },
-        style: { paddingLeft },
-        children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-center gap-2", children: [
-          logo,
-          /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: path })
-        ] })
-      }
-    ),
-    children && /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: reactExports.Children.map(children, (child) => {
-      return reactExports.cloneElement(child, {
-        level: level + 1,
-        paths: [...paths, path]
-      });
-    }) })
+Grid.Column = ({ children, className: className2 }) => {
+  const [header, body] = reactExports.Children.toArray(children);
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: classNames("flex flex-col", className2), children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center border-b border-border", children: header }),
+    body
   ] });
 };
 var Lexical_prod = {};
@@ -62197,6 +62334,29 @@ const Bold = ({ className: className2 }) => {
   );
 };
 const Bold$1 = Bold;
+const ImageIcon = ({ className: className2 }) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    "svg",
+    {
+      width: "12",
+      height: "12",
+      viewBox: "0 0 9 10",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className: className2,
+      children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("g", { clipPath: "url(#clip0_1225_1638)", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("rect", { y: "0.5", width: "9", height: "9" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M0 7L8.5 5", stroke: "currentColor" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "3", cy: "3.5", r: "1", fill: "currentColor" })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("rect", { x: "0.5", y: "1", width: "8", height: "8", stroke: "currentColor" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("defs", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("clipPath", { id: "clip0_1225_1638", children: /* @__PURE__ */ jsxRuntimeExports.jsx("rect", { y: "0.5", width: "9", height: "9", fill: "white" }) }) })
+      ]
+    }
+  );
+};
+const ImageIcon$1 = ImageIcon;
 const Italic = ({ className: className2 }) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "svg",
@@ -63506,7 +63666,7 @@ function _objectWithoutPropertiesLoose$3(source, excluded) {
   }
   return target;
 }
-var Check$1 = reactExports.forwardRef(function(_ref, ref) {
+var Check = reactExports.forwardRef(function(_ref, ref) {
   var _ref$color = _ref.color, color = _ref$color === void 0 ? "currentColor" : _ref$color, _ref$size = _ref.size, size2 = _ref$size === void 0 ? 24 : _ref$size, rest = _objectWithoutProperties$2(_ref, ["color", "size"]);
   return /* @__PURE__ */ React.createElement("svg", _extends$5({
     ref,
@@ -63523,12 +63683,12 @@ var Check$1 = reactExports.forwardRef(function(_ref, ref) {
     points: "20 6 9 17 4 12"
   }));
 });
-Check$1.propTypes = {
+Check.propTypes = {
   color: PropTypes.string,
   size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 };
-Check$1.displayName = "Check";
-const Check$2 = Check$1;
+Check.displayName = "Check";
+const Check$1 = Check;
 function _extends$4() {
   _extends$4 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -63646,7 +63806,7 @@ function _objectWithoutPropertiesLoose$1(source, excluded) {
   }
   return target;
 }
-var X$1 = reactExports.forwardRef(function(_ref, ref) {
+var X = reactExports.forwardRef(function(_ref, ref) {
   var _ref$color = _ref.color, color = _ref$color === void 0 ? "currentColor" : _ref$color, _ref$size = _ref.size, size2 = _ref$size === void 0 ? 24 : _ref$size, rest = _objectWithoutProperties(_ref, ["color", "size"]);
   return /* @__PURE__ */ React.createElement("svg", _extends$3({
     ref,
@@ -63671,12 +63831,12 @@ var X$1 = reactExports.forwardRef(function(_ref, ref) {
     y2: "18"
   }));
 });
-X$1.propTypes = {
+X.propTypes = {
   color: PropTypes.string,
   size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 };
-X$1.displayName = "X";
-const X$2 = X$1;
+X.displayName = "X";
+const X$1 = X;
 const Toolbar = ({
   fontSizes,
   fontsFamilies,
@@ -63851,7 +64011,7 @@ const Toolbar = ({
       }
     });
   }, [activeEditor]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sticky top-0 flex flex-col px-4 py-2 border-b bg-background border-highlight", children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sticky top-0 flex flex-col px-4 py-2 border rounded-md rounded-b-none border-input bg-background", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-row gap-1", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         Dropdown$1,
@@ -63959,7 +64119,7 @@ const Toolbar = ({
             ev.preventDefault();
             dispatchLinkChange(url || null);
           },
-          icon: /* @__PURE__ */ jsxRuntimeExports.jsx(Check$2, { size: 14 })
+          icon: /* @__PURE__ */ jsxRuntimeExports.jsx(Check$1, { size: 14 })
         }
       ),
       /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -63970,7 +64130,7 @@ const Toolbar = ({
             ev.preventDefault();
             dispatchLinkChange(null);
           },
-          icon: /* @__PURE__ */ jsxRuntimeExports.jsx(X$2, { size: 14 })
+          icon: /* @__PURE__ */ jsxRuntimeExports.jsx(X$1, { size: 14 })
         }
       )
     ] })
@@ -63980,12 +64140,10 @@ const Toolbar$1 = Toolbar;
 function onError(error) {
   console.error(error);
 }
-const TOOLBAR_HEIGHT = 28;
 const RichTextEditor = ({
   richtext,
   onEditor
 }) => {
-  const { windowSize } = useValOverlayContext();
   const prePopulatedState = (editor) => {
     editor.setEditorState(
       editor.parseEditorState({
@@ -64028,17 +64186,8 @@ const RichTextEditor = ({
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       LexicalRichTextPlugin_1.RichTextPlugin,
       {
-        contentEditable: /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "div",
-          {
-            className: "font-sans border-b text-primary border-highlight",
-            style: {
-              minHeight: (windowSize == null ? void 0 : windowSize.innerHeight) ? (windowSize == null ? void 0 : windowSize.innerHeight) - TOOLBAR_HEIGHT : void 0
-            },
-            children: /* @__PURE__ */ jsxRuntimeExports.jsx(LexicalContentEditable, { className: "p-4 outline-none bg-fill" })
-          }
-        ),
-        placeholder: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "", children: "Enter some text..." }),
+        contentEditable: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "px-3 py-2 text-sm border-b rounded-md rounded-t-none border-x border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", children: /* @__PURE__ */ jsxRuntimeExports.jsx(LexicalContentEditable, { className: "p-4 outline-none bg-fill" }) }),
+        placeholder: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "" }),
         ErrorBoundary: LexicalErrorBoundary$1
       }
     ),
@@ -64049,119 +64198,40 @@ const RichTextEditor = ({
     /* @__PURE__ */ jsxRuntimeExports.jsx(LexicalHistoryPlugin_1.HistoryPlugin, {})
   ] });
 };
-var defaultAttributes = {
-  xmlns: "http://www.w3.org/2000/svg",
-  width: 24,
-  height: 24,
-  viewBox: "0 0 24 24",
-  fill: "none",
-  stroke: "currentColor",
-  strokeWidth: 2,
-  strokeLinecap: "round",
-  strokeLinejoin: "round"
-};
-const toKebabCase = (string) => string.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
-const createLucideIcon = (iconName, iconNode) => {
-  const Component = reactExports.forwardRef(
-    ({ color = "currentColor", size: size2 = 24, strokeWidth = 2, absoluteStrokeWidth, children, ...rest }, ref) => reactExports.createElement(
-      "svg",
-      {
-        ref,
-        ...defaultAttributes,
-        width: size2,
-        height: size2,
-        stroke: color,
-        strokeWidth: absoluteStrokeWidth ? Number(strokeWidth) * 24 / Number(size2) : strokeWidth,
-        className: `lucide lucide-${toKebabCase(iconName)}`,
-        ...rest
-      },
-      [
-        ...iconNode.map(([tag, attrs]) => reactExports.createElement(tag, attrs)),
-        ...(Array.isArray(children) ? children : [children]) || []
-      ]
-    )
-  );
-  Component.displayName = `${iconName}`;
-  return Component;
-};
-const Check = createLucideIcon("Check", [
-  ["polyline", { points: "20 6 9 17 4 12", key: "10jjfj" }]
-]);
-const ChevronDown = createLucideIcon("ChevronDown", [
-  ["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]
-]);
-const ChevronLeft = createLucideIcon("ChevronLeft", [
-  ["path", { d: "m15 18-6-6 6-6", key: "1wnfg3" }]
-]);
-const LogIn = createLucideIcon("LogIn", [
-  ["path", { d: "M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4", key: "u53s6r" }],
-  ["polyline", { points: "10 17 15 12 10 7", key: "1ail0h" }],
-  ["line", { x1: "15", x2: "3", y1: "12", y2: "12", key: "v6grx8" }]
-]);
-const Maximize = createLucideIcon("Maximize", [
-  ["path", { d: "M8 3H5a2 2 0 0 0-2 2v3", key: "1dcmit" }],
-  ["path", { d: "M21 8V5a2 2 0 0 0-2-2h-3", key: "1e4gt3" }],
-  ["path", { d: "M3 16v3a2 2 0 0 0 2 2h3", key: "wsl5sc" }],
-  ["path", { d: "M16 21h3a2 2 0 0 0 2-2v-3", key: "18trek" }]
-]);
-const Minimize = createLucideIcon("Minimize", [
-  ["path", { d: "M8 3v3a2 2 0 0 1-2 2H3", key: "hohbtr" }],
-  ["path", { d: "M21 8h-3a2 2 0 0 1-2-2V3", key: "5jw1f3" }],
-  ["path", { d: "M3 16h3a2 2 0 0 1 2 2v3", key: "198tvr" }],
-  ["path", { d: "M16 21v-3a2 2 0 0 1 2-2h3", key: "ph8mxp" }]
-]);
-const Moon = createLucideIcon("Moon", [
-  ["path", { d: "M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z", key: "a7tn18" }]
-]);
-const Pause = createLucideIcon("Pause", [
-  ["rect", { width: "4", height: "16", x: "6", y: "4", key: "iffhe4" }],
-  ["rect", { width: "4", height: "16", x: "14", y: "4", key: "sjin7j" }]
-]);
-const Play = createLucideIcon("Play", [
-  ["polygon", { points: "5 3 19 12 5 21 5 3", key: "191637" }]
-]);
-const Power = createLucideIcon("Power", [
-  ["path", { d: "M12 2v10", key: "mnfbl" }],
-  ["path", { d: "M18.4 6.6a9 9 0 1 1-12.77.04", key: "obofu9" }]
-]);
-const Send = createLucideIcon("Send", [
-  ["path", { d: "m22 2-7 20-4-9-9-4Z", key: "1q3vgg" }],
-  ["path", { d: "M22 2 11 13", key: "nzbqef" }]
-]);
-const Sun = createLucideIcon("Sun", [
-  ["circle", { cx: "12", cy: "12", r: "4", key: "4exip2" }],
-  ["path", { d: "M12 2v2", key: "tus03m" }],
-  ["path", { d: "M12 20v2", key: "1lh1kg" }],
-  ["path", { d: "m4.93 4.93 1.41 1.41", key: "149t6j" }],
-  ["path", { d: "m17.66 17.66 1.41 1.41", key: "ptbguv" }],
-  ["path", { d: "M2 12h2", key: "1t8f8n" }],
-  ["path", { d: "M20 12h2", key: "1q8mjw" }],
-  ["path", { d: "m6.34 17.66-1.41 1.41", key: "1m8zz5" }],
-  ["path", { d: "m19.07 4.93-1.41 1.41", key: "1shlcs" }]
-]);
-const X = createLucideIcon("X", [
-  ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
-  ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
-]);
 const className = "p-1 border rounded-full shadow border-accent";
 const PREV_URL_KEY = "valbuild:urlBeforeNavigation";
 function ValMenu({
   api,
   patches,
+  direction,
   onCommit
 }) {
   const { theme: theme2, setTheme, editMode, setEditMode, session } = useValOverlayContext();
   if (session.status === "success" && session.data.mode === "unauthorized") {
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs(SingleItemMenu, { href: api.getLoginUrl(window.location.href), children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Login" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(LogIn, { size: 18 })
-    ] });
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      SingleItemMenu,
+      {
+        direction,
+        href: api.getLoginUrl(window.location.href),
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Login" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(LogIn, { size: 18 })
+        ]
+      }
+    );
   }
   if (session.status === "success" && !session.data.enabled) {
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs(SingleItemMenu, { href: api.getEnableUrl(window.location.href), children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Enable" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(LogIn, { size: 18 })
-    ] });
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      SingleItemMenu,
+      {
+        direction,
+        href: api.getEnableUrl(window.location.href),
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Enable" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(LogIn, { size: 18 })
+        ]
+      }
+    );
   }
   const [patchCount, setPatchCount] = reactExports.useState();
   reactExports.useEffect(() => {
@@ -64171,7 +64241,7 @@ function ValMenu({
     }
     setPatchCount(patchCount2);
   }, [patches]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(MenuContainer, { children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(MenuContainer, { direction, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       MenuButton,
       {
@@ -64207,7 +64277,7 @@ function ValMenu({
             window.location.href = prevUrl || "/";
           }
         },
-        children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-[24px] w-[24px] flex justify-center items-center", children: editMode === "full" ? /* @__PURE__ */ jsxRuntimeExports.jsx(Minimize, { size: 15 }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Maximize, { size: 15 }) })
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-[24px] w-[24px] flex justify-center items-center", children: editMode === "full" ? /* @__PURE__ */ jsxRuntimeExports.jsx(Minimize2, { size: 15 }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Maximize2, { size: 15 }) })
       }
     ),
     patchCount !== void 0 && session.status === "success" && session.data.mode === "proxy" && /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -64239,14 +64309,40 @@ function ValMenu({
 }
 function SingleItemMenu({
   href,
+  direction,
   children
 }) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-row items-center justify-center w-full h-full font-sans border-2 rounded-full gap-x-3 text-primary bg-background border-fill", children: /* @__PURE__ */ jsxRuntimeExports.jsx("a", { className, href, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center px-2 gap-x-2", children }) }) });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "div",
+    {
+      className: classNames(
+        "flex items-start justify-center w-full h-full font-sans border rounded-full gap-3 text-primary border-fill bg-gradient-to-br from-background/90 from-40% to-background backdrop-blur-lg drop-shadow-2xl",
+        {
+          "flex-col items-start": direction === "vertical",
+          "flex-row items-center": direction === "horizontal"
+        }
+      ),
+      children: /* @__PURE__ */ jsxRuntimeExports.jsx("a", { className, href, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center px-2 gap-y-2", children }) })
+    }
+  );
 }
 function MenuContainer({
-  children
+  children,
+  direction
 }) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-row items-center justify-center w-full h-full px-2 py-2 font-sans border-2 rounded-full gap-x-3 text-primary bg-background border-fill", children });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "div",
+    {
+      className: classNames(
+        "flex justify-center w-full h-full px-2 py-2 font-sans border rounded-full gap-3 text-primary border-fill bg-gradient-to-br from-background/90 from-40% to-background backdrop-blur-lg drop-shadow-2xl",
+        {
+          "flex-col items-start": direction === "vertical",
+          "flex-row items-center": direction === "horizontal"
+        }
+      ),
+      children
+    }
+  );
 }
 function MenuButton({
   active,
@@ -64257,7 +64353,7 @@ function MenuButton({
     "button",
     {
       className: classNames(className, {
-        "bg-accent drop-shadow-[0px_0px_12px_rgba(56,205,152,0.60)]": active
+        "bg-accent text-accent-foreground drop-shadow-[0px_0px_12px_hsl(var(--accent))]": active
       }),
       onClick,
       children
@@ -72578,7 +72674,7 @@ const SelectItem = reactExports.forwardRef(({ className: className2, children, .
     ),
     ...props,
     children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx($cc7e05a45900e73f$export$c3468e2714d175fa, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(Check, { className: "w-4 h-4" }) }) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx($cc7e05a45900e73f$export$c3468e2714d175fa, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(Check$2, { className: "w-4 h-4" }) }) }),
       /* @__PURE__ */ jsxRuntimeExports.jsx($cc7e05a45900e73f$export$d6e5bf9c43ea9319, { children })
     ]
   }
@@ -72605,8 +72701,10 @@ function ValFormField({
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       StringField,
       {
+        path,
         defaultValue: source,
         disabled,
+        schema,
         registerPatchCallback,
         onSubmit
       }
@@ -72681,7 +72779,13 @@ function ValFormField({
   }
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
     "Unsupported schema: ",
-    schema.type
+    schema.type,
+    " (source type: ",
+    typeof source,
+    " source:",
+    " ",
+    JSON.stringify(source),
+    ")"
   ] });
 }
 function createImagePatch(path, data, filename, metadata) {
@@ -72740,6 +72844,7 @@ function ImageField({
   onSubmit,
   registerPatchCallback
 }) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
   const [data, setData] = reactExports.useState(
     null
   );
@@ -72763,7 +72868,7 @@ function ImageField({
     }
   }, [data, defaultValue]);
   reactExports.useEffect(() => {
-    var _a;
+    var _a2;
     if (hotspot) {
       if (metadata) {
         const newMetadata = {
@@ -72780,43 +72885,63 @@ function ImageField({
         console.error("Neither image metadata nor value is set");
       }
     } else {
-      if ((_a = defaultValue == null ? void 0 : defaultValue.metadata) == null ? void 0 : _a.hotspot) {
+      if ((_a2 = defaultValue == null ? void 0 : defaultValue.metadata) == null ? void 0 : _a2.hotspot) {
         setHotspot(defaultValue.metadata.hotspot);
       }
     }
   }, [hotspot, defaultValue]);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(FieldContainer, { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col max-w-4xl p-4 gap-y-4", children: [
-      data || url ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative", children: [
-        hotspot && /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "div",
-          {
-            className: "rounded-full h-[20px] w-[20px] bg-accent absolute",
-            style: {
-              top: `${hotspot.y * 100}%`,
-              left: `${hotspot.x * 100}%`
-            }
-          }
-        ),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "w-fit", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "div",
+        {
+          className: "flex flex-col justify-start p-2 border border-b-0 rounded-sm rounded-b-none gap-y-4 bg-background text-foreground border-input",
+          children: data || url ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative", children: [
+            hotspot && /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "div",
+              {
+                className: "rounded-full h-[12px] w-[12px] bg-background mix-blend-difference border-accent border-2 absolute pointer-events-none",
+                style: {
+                  top: `${hotspot.y * 100}%`,
+                  left: `${hotspot.x * 100}%`
+                }
+              }
+            ),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "img",
+              {
+                src: (data == null ? void 0 : data.src) || url,
+                draggable: false,
+                className: "object-contain w-full max-h-[500px]",
+                style: {
+                  cursor: "crosshair"
+                },
+                onClick: (ev) => {
+                  const { width, height, left, top } = ev.currentTarget.getBoundingClientRect();
+                  const hotspotX = (ev.clientX - 6 - left) / width;
+                  const hotspotY = (ev.clientY - 6 - top) / height;
+                  setHotspot({
+                    x: hotspotX,
+                    y: hotspotY,
+                    width: 1,
+                    height: 1
+                  });
+                }
+              }
+            )
+          ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: "Select image below" })
+        },
+        path
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "p-4 border border-t-0 rounded-b-sm bg-background border-input", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "img",
+          "label",
           {
-            src: (data == null ? void 0 : data.src) || url,
-            className: "w-full cursor-crosshair",
-            onClick: (ev) => {
-              const x = ev.nativeEvent.offsetX;
-              const y = ev.nativeEvent.offsetY;
-              const width = ev.currentTarget.clientWidth;
-              const height = ev.currentTarget.clientHeight;
-              const hotspotX = Math.round(x / width * 100) / 100;
-              const hotspotY = Math.round(y / height * 100) / 100;
-              setHotspot({ x: hotspotX, y: hotspotY, width: 1, height: 1 });
-            }
+            htmlFor: `img_input:${path}`,
+            className: "block px-1 py-2 text-sm text-center rounded-md cursor-pointer bg-primary text-background",
+            children: "Update"
           }
-        )
-      ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: "Select image below" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { htmlFor: `img_input:${path}`, className: "", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "px-1 py-2 text-center rounded-md bg-primary text-background", children: "Update image" }),
+        ),
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           "input",
           {
@@ -72848,43 +72973,39 @@ function ImageField({
           }
         )
       ] })
-    ] }, path),
-    onSubmit && data && /* @__PURE__ */ jsxRuntimeExports.jsx(
+    ] }),
+    onSubmit && /* @__PURE__ */ jsxRuntimeExports.jsx(
       SubmitButton,
       {
         loading,
+        enabled: !!data || ((_b = (_a = defaultValue == null ? void 0 : defaultValue.metadata) == null ? void 0 : _a.hotspot) == null ? void 0 : _b.height) !== (hotspot == null ? void 0 : hotspot.height) || ((_d = (_c = defaultValue == null ? void 0 : defaultValue.metadata) == null ? void 0 : _c.hotspot) == null ? void 0 : _d.width) !== (hotspot == null ? void 0 : hotspot.width) || ((_f = (_e = defaultValue == null ? void 0 : defaultValue.metadata) == null ? void 0 : _e.hotspot) == null ? void 0 : _f.x) !== (hotspot == null ? void 0 : hotspot.x) || ((_h = (_g = defaultValue == null ? void 0 : defaultValue.metadata) == null ? void 0 : _g.hotspot) == null ? void 0 : _h.y) !== (hotspot == null ? void 0 : hotspot.y) || ((_i = defaultValue == null ? void 0 : defaultValue.metadata) == null ? void 0 : _i.width) !== (metadata == null ? void 0 : metadata.width) || ((_j = defaultValue == null ? void 0 : defaultValue.metadata) == null ? void 0 : _j.height) !== (metadata == null ? void 0 : metadata.height) || ((_k = defaultValue == null ? void 0 : defaultValue.metadata) == null ? void 0 : _k.mimeType) !== (metadata == null ? void 0 : metadata.mimeType) || ((_l = defaultValue == null ? void 0 : defaultValue.metadata) == null ? void 0 : _l.sha256) !== (metadata == null ? void 0 : metadata.sha256),
         onClick: () => {
-          setLoading(true);
-          onSubmit(
-            (path2) => Promise.resolve(
-              createImagePatch(
-                path2,
-                data.src,
-                data.filename ?? null,
-                metadata
+          if (data) {
+            setLoading(true);
+            onSubmit(
+              (path2) => Promise.resolve(
+                createImagePatch(
+                  path2,
+                  data.src,
+                  data.filename ?? null,
+                  metadata
+                )
               )
-            )
-          ).finally(() => {
-            setLoading(false);
-            setData(null);
-            setMetadata(void 0);
-          });
-        }
-      }
-    ),
-    onSubmit && !data && metadata && /* @__PURE__ */ jsxRuntimeExports.jsx(
-      SubmitButton,
-      {
-        loading,
-        onClick: () => {
-          setLoading(true);
-          onSubmit(
-            (path2) => Promise.resolve(createImageMetadataPatch(path2, metadata))
-          ).finally(() => {
-            setLoading(false);
-            setData(null);
-            setMetadata(void 0);
-          });
+            ).finally(() => {
+              setLoading(false);
+              setData(null);
+              setMetadata(void 0);
+            });
+          } else if (metadata) {
+            setLoading(true);
+            onSubmit(
+              (path2) => Promise.resolve(createImageMetadataPatch(path2, metadata))
+            ).finally(() => {
+              setLoading(false);
+              setData(null);
+              setMetadata(void 0);
+            });
+          }
         }
       }
     )
@@ -72965,10 +73086,11 @@ function RichTextField({
         }
       }
     ),
-    onSubmit && didChange && /* @__PURE__ */ jsxRuntimeExports.jsx(
+    onSubmit && /* @__PURE__ */ jsxRuntimeExports.jsx(
       SubmitButton,
       {
         loading: loading || !editor,
+        enabled: didChange,
         onClick: () => {
           if (editor) {
             setLoading(true);
@@ -73050,10 +73172,11 @@ function KeyOfField({
         ]
       }
     ),
-    onSubmit && defaultValue !== value && /* @__PURE__ */ jsxRuntimeExports.jsx(
+    onSubmit && /* @__PURE__ */ jsxRuntimeExports.jsx(
       SubmitButton,
       {
         loading,
+        enabled: defaultValue !== value,
         onClick: () => {
           setLoading(true);
           onSubmit(async (path) => [
@@ -73107,10 +73230,11 @@ function NumberField({
         type: "number"
       }
     ),
-    onSubmit && defaultValue !== value && /* @__PURE__ */ jsxRuntimeExports.jsx(
+    onSubmit && /* @__PURE__ */ jsxRuntimeExports.jsx(
       SubmitButton,
       {
         loading,
+        enabled: defaultValue !== value,
         onClick: () => {
           setLoading(true);
           onSubmit(async (path) => {
@@ -73133,6 +73257,8 @@ function NumberField({
 function StringField({
   disabled,
   defaultValue,
+  path,
+  schema,
   registerPatchCallback,
   onSubmit
 }) {
@@ -73144,18 +73270,28 @@ function StringField({
   const ref = reactExports.useRef(null);
   reactExports.useEffect(() => {
     if (registerPatchCallback) {
-      registerPatchCallback(async (path) => {
+      registerPatchCallback(async (path2) => {
         var _a;
         return [
           {
             op: "replace",
-            path,
+            path: path2,
             value: ((_a = ref.current) == null ? void 0 : _a.value) || ""
           }
         ];
       });
     }
   }, []);
+  const actualSchema = new StringSchema(
+    schema.options ? {
+      ...schema.options,
+      regexp: schema.options.regexp ? new RegExp(
+        schema.options.regexp.source,
+        schema.options.regexp.flags
+      ) : void 0
+    } : void 0
+  );
+  const validationErrors = actualSchema.validate(path, value);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(FieldContainer, { children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       Input,
@@ -73166,18 +73302,20 @@ function StringField({
         onChange: (e) => setValue(e.target.value)
       }
     ),
-    onSubmit && defaultValue !== value && /* @__PURE__ */ jsxRuntimeExports.jsx(
+    onSubmit && /* @__PURE__ */ jsxRuntimeExports.jsx(
       SubmitButton,
       {
+        validationErrors: validationErrors && validationErrors[path],
         loading,
+        enabled: defaultValue !== value && !validationErrors,
         onClick: () => {
           setLoading(true);
-          onSubmit(async (path) => {
+          onSubmit(async (path2) => {
             var _a;
             return [
               {
                 op: "replace",
-                path,
+                path: path2,
                 value: ((_a = ref.current) == null ? void 0 : _a.value) || ""
               }
             ];
@@ -73189,14 +73327,28 @@ function StringField({
     )
   ] });
 }
-function FieldContainer({ children }) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "relative p-4 border rounded border-card", children });
+function InlineValidationErrors({ errors }) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col p-2 text-sm rounded-md gap-y-1 text-destructive-foreground bg-destructive", children: errors.map((error, i) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: error.message }, i)) });
+}
+function FieldContainer({
+  children,
+  className: className2
+}) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: classNames("relative max-w-lg px-4 pt-4", className2), children });
 }
 function SubmitButton({
   loading,
+  enabled,
+  validationErrors,
   onClick
 }) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sticky bottom-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-end w-full py-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { disabled: loading, onClick, children: loading ? "Saving..." : "Save" }) }) });
+  const { session } = useValOverlayContext();
+  const isProxy = session.status === "success" && session.data.mode === "proxy";
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sticky bottom-0 m-4 mt-2 ml-0", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-start w-full gap-2 text-sm", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { disabled: loading || !enabled, onClick, children: loading ? isProxy ? "Staging..." : "Saving..." : isProxy ? "Stage" : "Save" }),
+    " ",
+    validationErrors ? /* @__PURE__ */ jsxRuntimeExports.jsx(InlineValidationErrors, { errors: validationErrors || [] }) : /* @__PURE__ */ jsxRuntimeExports.jsx("span", {})
+  ] }) });
 }
 const Logo = ({ className: className2 }) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
@@ -73213,7 +73365,7 @@ const Logo = ({ className: className2 }) => {
           "path",
           {
             d: "M5 5.36426C5 5.16309 5.16309 5 5.36426 5H17.6581C17.8593 5 18.0223 5.16309 18.0223 5.36426V28.4949C18.0223 28.696 17.8593 28.8591 17.6581 28.8591H5.36426C5.16309 28.8591 5 28.696 5 28.4949V5.36426Z",
-            fill: "#38CD98"
+            fill: "hsl(var(--accent))"
           }
         ) }),
         /* @__PURE__ */ jsxRuntimeExports.jsx("g", { filter: "url(#filter1_i_21_1677)", children: /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "11.4656", cy: "23.7595", r: "2.18557", fill: "currentColor" }) }),
@@ -76903,6 +77055,33 @@ function mapRouteProperties(route) {
   }
   return updates;
 }
+function Path({ children }) {
+  const segs = children.split("/").filter((seg) => seg);
+  return segs.map((seg, i) => {
+    if (i !== segs.length - 1) {
+      return /* @__PURE__ */ jsxRuntimeExports.jsxs(reactExports.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: seg }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "px-[2px] text-muted", children: "/" })
+      ] }, `${children}/${seg}`);
+    }
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(Seg, { children: seg }, children);
+  });
+}
+function Seg({ children }) {
+  if (children.includes(".")) {
+    const segs = children.split(".");
+    return segs.map((seg, i) => {
+      if (i !== segs.length - 1) {
+        return /* @__PURE__ */ jsxRuntimeExports.jsxs(reactExports.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: i === 0 ? seg : JSON.parse(seg) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "px-[2px] text-muted", children: "." })
+        ] }, `${children}.${seg}`);
+      }
+      return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: i === 0 ? seg : JSON.parse(seg) }, children);
+    });
+  }
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children });
+}
 const ValModulesContext = React.createContext(null);
 const useValModuleFromPath = (sourcePath) => {
   var _a, _b;
@@ -77053,12 +77232,13 @@ Showing stack trace of: 1. ${fatalErrors[0].message}`;
         "div",
         {
           id: "val-fullscreen-container",
-          className: "relative font-serif antialiased",
+          className: "relative w-full h-[100] overflow-hidden font-serif antialiased bg-background text-primary",
           "data-mode": theme2,
           children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "fixed -translate-x-1/2 z-overlay left-1/2 bottom-4", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "fixed -translate-y-1/2 right-4 top-1/2 z-overlay", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
               ValMenu,
               {
+                direction: "vertical",
                 api,
                 patches,
                 onCommit: () => setPatchResetId((prev) => prev + 1)
@@ -77071,18 +77251,19 @@ Showing stack trace of: 1. ${fatalErrors[0].message}`;
                 value: {
                   hoverElem: hoverElemRef == null ? void 0 : hoverElemRef.current
                 },
-                children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-primary bg-background", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Grid, { children: [
+                children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-primary", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Grid, { children: [
                   /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "px-4 h-[50px] flex items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Logo$1, {}) }),
                   /* @__PURE__ */ jsxRuntimeExports.jsx(ScrollArea, { className: "px-4", children: modules ? /* @__PURE__ */ jsxRuntimeExports.jsx(
                     PathTree,
                     {
+                      selectedPath,
                       paths: Object.keys(modules),
                       setSelectedModuleId: (path) => {
                         navigate(path);
                       }
                     }
                   ) : !error && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "py-4", children: "Loading..." }) }),
-                  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-start w-full h-[50px] gap-2 font-serif text-xs", children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-start h-[50px] gap-2 font-serif text-xs", children: [
                     /* @__PURE__ */ jsxRuntimeExports.jsx(
                       "button",
                       {
@@ -77092,10 +77273,18 @@ Showing stack trace of: 1. ${fatalErrors[0].message}`;
                         children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronLeft, {})
                       }
                     ),
-                    /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: selectedPath || "/" })
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      "div",
+                      {
+                        className: "truncate max-w-[300px]",
+                        dir: "rtl",
+                        title: selectedPath,
+                        children: /* @__PURE__ */ jsxRuntimeExports.jsx(Path, { children: selectedPath || "/" })
+                      }
+                    )
                   ] }),
                   /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "p-4", children: [
-                    error && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-lg text-destructive-foreground", children: [
+                    error && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "max-w-xl p-4 text-lg bg-destructive text-destructive-foreground", children: [
                       "ERROR: ",
                       error
                     ] }),
@@ -77164,7 +77353,7 @@ function AnyVal({
   initOnSubmit,
   top
 }) {
-  if (source === null || schema.opt) {
+  if (schema.opt) {
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       ValOptional,
       {
@@ -77177,6 +77366,18 @@ function AnyVal({
       }
     );
   }
+  if (source === null) {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      ValDefaultOf,
+      {
+        source,
+        schema,
+        path,
+        setSelectedPath,
+        initOnSubmit
+      }
+    );
+  }
   if (schema.type === "object") {
     if (typeof source !== "object" || isJsonArray(source)) {
       return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
@@ -77202,15 +77403,18 @@ function AnyVal({
         typeof source
       ] });
     }
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(
-      ValList,
-      {
-        source,
-        path,
-        schema,
-        setSelectedPath
-      }
-    );
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+      field ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-left", children: field }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "truncate max-w-[300px]", title: path, dir: "rtl", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Path, { children: path }) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        ValList,
+        {
+          source,
+          path,
+          schema,
+          setSelectedPath
+        }
+      )
+    ] });
   } else if (schema.type === "record") {
     if (typeof source !== "object") {
       return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
@@ -77226,18 +77430,39 @@ function AnyVal({
         schema.type
       ] });
     }
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(
-      ValRecord,
-      {
-        source,
-        path,
-        schema,
-        setSelectedPath
-      }
-    );
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+      field ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-left", children: field }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "truncate max-w-[300px]", title: path, dir: "rtl", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Path, { children: path }) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        ValRecord,
+        {
+          source,
+          path,
+          schema,
+          setSelectedPath
+        }
+      )
+    ] });
+  } else if ((schema == null ? void 0 : schema.type) === "union") {
+    if (schema.key && typeof source === "object" && !isJsonArray(source)) {
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(
+        ValTaggedUnion,
+        {
+          field,
+          tag: schema.key,
+          source,
+          path,
+          schema,
+          initOnSubmit,
+          setSelectedPath,
+          top
+        }
+      );
+    }
+  } else if ((schema == null ? void 0 : schema.type) === "literal") {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {});
   }
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "py-2 gap-y-4", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-left", children: field || path }),
+    field ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-left", children: field }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "truncate max-w-[300px]", title: path, dir: "rtl", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Path, { children: path }) }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       ValFormField,
       {
@@ -77250,6 +77475,110 @@ function AnyVal({
     )
   ] });
 }
+function ValTaggedUnion({
+  tag,
+  field,
+  path,
+  source,
+  schema,
+  setSelectedPath,
+  initOnSubmit,
+  top
+}) {
+  const [currentKey, setCurrentKey] = reactExports.useState(null);
+  const [current, setCurrent] = reactExports.useState(null);
+  const keys = schema.items.flatMap((item) => {
+    if (item.type === "object" && item.items[tag]) {
+      const maybeLiteral = item.items[tag];
+      if (maybeLiteral.type === "literal") {
+        return [maybeLiteral.value];
+      }
+    }
+    return [];
+  });
+  reactExports.useEffect(() => {
+    if (!currentKey) {
+      const maybeCurrentKey = source == null ? void 0 : source[tag];
+      if (maybeCurrentKey && typeof maybeCurrentKey === "string") {
+        setCurrentKey(maybeCurrentKey);
+      }
+    } else {
+      const sourceKey = source[tag];
+      const unionSchema = schema.items.find((item) => {
+        if (item.type === "object" && item.items[tag]) {
+          const maybeLiteral = item.items[tag];
+          if (maybeLiteral.type === "literal") {
+            return maybeLiteral.value === currentKey;
+          }
+          return false;
+        }
+      });
+      if (sourceKey && typeof sourceKey === "string" && unionSchema) {
+        setCurrent({ source, schema: unionSchema });
+      } else if (unionSchema) {
+        setCurrent({ schema: unionSchema });
+      } else {
+        console.error(
+          "Could not find source or schema of key",
+          currentKey,
+          source,
+          schema
+        );
+        setCurrent(null);
+      }
+    }
+  }, [currentKey, source, tag, schema, keys]);
+  if (keys.length !== schema.items.length) {
+    console.warn("Not all items have tag:", tag);
+  }
+  const loading = false;
+  const onSubmit = initOnSubmit(path);
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    FieldContainer,
+    {
+      className: classNames("flex flex-col gap-y-4", {
+        "border-l-2 border-border pl-6": !top
+      }),
+      children: [
+        field ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-left", children: field }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "truncate max-w-[300px]", title: path, dir: "rtl", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Path, { children: path }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          Select,
+          {
+            value: currentKey ?? void 0,
+            disabled: loading,
+            onValueChange: (key) => {
+              setCurrentKey(key);
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(SelectTrigger, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(SelectValue, { placeholder: "Select type" }) }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(SelectContent, { children: keys.map((tag2) => /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: tag2.toString(), children: tag2.toString() }, tag2)) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          SubmitButton,
+          {
+            loading,
+            enabled: false,
+            onClick: () => onSubmit(async () => [])
+          }
+        ),
+        current && /* @__PURE__ */ jsxRuntimeExports.jsx(
+          AnyVal,
+          {
+            path,
+            source: current.source ?? null,
+            schema: current.schema,
+            setSelectedPath,
+            initOnSubmit,
+            top
+          }
+        )
+      ]
+    },
+    path
+  );
+}
 function ValObject({
   path,
   source,
@@ -77261,7 +77590,7 @@ function ValObject({
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
     {
-      className: classNames("flex flex-col gap-y-8", {
+      className: classNames("flex flex-col gap-y-1", {
         "border-l-2 border-border pl-6": !top
       }),
       children: Object.entries(schema.items).map(([key, property]) => {
@@ -77270,7 +77599,7 @@ function ValObject({
           AnyVal,
           {
             path: subPath,
-            source: source[key],
+            source: (source == null ? void 0 : source[key]) ?? null,
             schema: property,
             setSelectedPath,
             field: key,
@@ -77354,7 +77683,7 @@ function ValList({
   setSelectedPath
 }) {
   const navigate = useNavigate();
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col gap-4 p-2", children: source.map((item, index2) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col gap-4 p-2 pb-8", children: source.map((item, index2) => {
     const subPath = createValPathOfItem(path, index2);
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       "button",
@@ -77593,9 +77922,10 @@ function ValOptional({
   field
 }) {
   const [enable, setEnable] = reactExports.useState(source !== null);
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-y-6", children: [
-    field ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-start gap-x-4", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
+  const { editMode } = useValOverlayContext();
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-y-2", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-start gap-x-4", children: [
+      editMode === "full" && /* @__PURE__ */ jsxRuntimeExports.jsx(
         Switch,
         {
           checked: enable,
@@ -77604,16 +77934,8 @@ function ValOptional({
           }
         }
       ),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: field })
-    ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx(
-      Switch,
-      {
-        checked: enable,
-        onClick: () => {
-          setEnable((prev) => !prev);
-        }
-      }
-    ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "truncate max-w-[300px]", title: path, dir: "rtl", children: field ? field : /* @__PURE__ */ jsxRuntimeExports.jsx(Path, { children: path }) })
+    ] }),
     enable && /* @__PURE__ */ jsxRuntimeExports.jsx(
       ValDefaultOf,
       {
@@ -77682,61 +78004,62 @@ function ValDefaultOf({
 function isJsonArray(source) {
   return Array.isArray(source);
 }
-function pathsToTree(paths) {
-  const tree = {};
+function dirPaths(paths) {
+  const res = {};
   paths.forEach((path) => {
-    const parts = path.split("/").filter((part) => part !== "");
-    let current = tree;
-    parts.forEach((part) => {
-      if (!current[part]) {
-        current[part] = {};
+    const allParts = path.split("/").filter((part) => part !== "");
+    if (allParts.length === 1) {
+      if (!res[""]) {
+        res[""] = [];
       }
-      current = current[part];
-    });
+      res[""].push(allParts[0]);
+    } else if (allParts.length > 1) {
+      const dir = allParts.slice(0, allParts.length - 1).join("/");
+      const file = allParts.slice(-1)[0];
+      if (!res[dir]) {
+        res[dir] = [];
+      }
+      res[dir].push(file);
+    }
   });
-  return tree;
+  return res;
 }
 function PathTree({
+  selectedPath,
   paths,
   setSelectedModuleId
 }) {
-  const tree = pathsToTree(paths);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Tree, { children: Object.entries(tree).map(([name, subTree]) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "px-4 py-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-    PathNode,
-    {
-      name,
-      tree: subTree,
-      moduleId: `/${name}`,
-      setSelectedModuleId
-    }
-  ) }, `/${name}`)) });
-}
-function PathNode({
-  name,
-  tree,
-  moduleId,
-  setSelectedModuleId
-}) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "button",
-      {
-        onClick: () => {
-          setSelectedModuleId(moduleId);
-        },
-        children: name
-      }
-    ),
-    Object.entries(tree).map(([childName, childTree]) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "px-4 py-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-      PathNode,
-      {
-        name: childName,
-        tree: childTree,
-        moduleId: `${moduleId}/${childName}`,
-        setSelectedModuleId
-      }
-    ) }, `${moduleId}/${childName}`))
-  ] });
+  const tree = dirPaths(paths);
+  const selectedModuleId = selectedPath && Internal.splitModuleIdAndModulePath(selectedPath)[0];
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col w-full py-2 text-xs", children: Object.entries(tree).map(([dir, files]) => {
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "px-4 py-2", children: [
+      dir && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-bold truncate max-w-[300px]", title: dir, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Path, { children: dir }) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "div",
+        {
+          className: classNames({
+            "flex flex-col py-2 justify-start items-start": !!dir
+          }),
+          children: files.map((file) => {
+            const moduleId = `/${dir}/${file}`;
+            return /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "button",
+              {
+                className: classNames("block px-2 py-1 rounded-full", {
+                  "bg-accent text-accent-foreground": selectedModuleId === moduleId
+                }),
+                onClick: () => {
+                  setSelectedModuleId(moduleId);
+                },
+                children: file
+              },
+              moduleId
+            );
+          })
+        }
+      )
+    ] }, `/${dir}`);
+  }) });
 }
 const theme = {
   tags: {
@@ -79163,7 +79486,7 @@ function fallbackRender({ error, resetErrorBoundary }) {
         /* @__PURE__ */ jsxRuntimeExports.jsx(Logo$1, {}),
         " encountered an error"
       ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("button", { onClick: resetErrorBoundary, children: /* @__PURE__ */ jsxRuntimeExports.jsx(X, {}) })
+      /* @__PURE__ */ jsxRuntimeExports.jsx("button", { onClick: resetErrorBoundary, children: /* @__PURE__ */ jsxRuntimeExports.jsx(X$2, {}) })
     ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-4xl font-normal ", children: "Message:" }),
     /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { children: error.message }),