@valbuild/ui 0.46.0 → 0.47.0

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

@@ -72891,86 +72891,88 @@ function ImageField({
     }
   }, [hotspot, defaultValue]);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(FieldContainer, { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "div",
-      {
-        className: "flex flex-col max-w-4xl 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: "w-full",
-              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: "w-full p-4 border border-t-0 rounded-b-sm bg-background border-input", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "w-fit", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(
-        "label",
+        "div",
         {
-          htmlFor: `img_input:${path}`,
-          className: "block w-full px-1 py-2 text-sm text-center rounded-md cursor-pointer bg-primary text-background",
-          children: "Update"
-        }
+          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.jsx(
-        "input",
-        {
-          hidden: true,
-          id: `img_input:${path}`,
-          type: "file",
-          onChange: (ev) => {
-            readImage(ev).then((res) => {
-              setData({ src: res.src, filename: res.filename });
-              if (res.width && res.height && res.mimeType) {
-                setMetadata({
-                  sha256: res.sha256,
-                  width: res.width,
-                  height: res.height,
-                  mimeType: res.mimeType,
-                  hotspot
-                });
-              } else {
-                setMetadata(void 0);
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "p-4 border border-t-0 rounded-b-sm bg-background border-input", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "label",
+          {
+            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(
+          "input",
+          {
+            hidden: true,
+            id: `img_input:${path}`,
+            type: "file",
+            onChange: (ev) => {
+              readImage(ev).then((res) => {
+                setData({ src: res.src, filename: res.filename });
+                if (res.width && res.height && res.mimeType) {
+                  setMetadata({
+                    sha256: res.sha256,
+                    width: res.width,
+                    height: res.height,
+                    mimeType: res.mimeType,
+                    hotspot
+                  });
+                } else {
+                  setMetadata(void 0);
+                  setHotspot(void 0);
+                }
+              }).catch((err2) => {
+                console.error(err2.message);
+                setData(null);
                 setHotspot(void 0);
-              }
-            }).catch((err2) => {
-              console.error(err2.message);
-              setData(null);
-              setHotspot(void 0);
-              setMetadata(void 0);
-            });
+                setMetadata(void 0);
+              });
+            }
           }
-        }
-      )
+        )
+      ] })
     ] }),
     onSubmit && /* @__PURE__ */ jsxRuntimeExports.jsx(
       SubmitButton,
@@ -73326,10 +73328,13 @@ function StringField({
   ] });
 }
 function InlineValidationErrors({ errors }) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col gap-y-1 p-2 rounded-md text-sm text-destructive-foreground bg-destructive", children: errors.map((error, i) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: error.message }, i)) });
+  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 }) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "relative p-4", children });
+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,
@@ -73339,9 +73344,10 @@ function SubmitButton({
 }) {
   const { session } = useValOverlayContext();
   const isProxy = session.status === "success" && session.data.mode === "proxy";
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sticky bottom-0 m-4 ml-0", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between w-full gap-2 py-2 text-sm", children: [
-    validationErrors ? /* @__PURE__ */ jsxRuntimeExports.jsx(InlineValidationErrors, { errors: validationErrors || [] }) : /* @__PURE__ */ jsxRuntimeExports.jsx("span", {}),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { disabled: loading || !enabled, onClick, children: loading ? isProxy ? "Staging..." : "Saving..." : isProxy ? "Stage" : "Save" })
+  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 }) => {
@@ -77267,10 +77273,18 @@ Showing stack trace of: 1. ${fatalErrors[0].message}`;
                         children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronLeft, {})
                       }
                     ),
-                    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(Path, { children: selectedPath || "/" }) })
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      "div",
+                      {
+                        className: "truncate max-w-[300px] text-left",
+                        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: "p-4 text-lg bg-destructive text-destructive-foreground max-w-xl", children: [
+                    error && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "max-w-xl p-4 text-lg bg-destructive text-destructive-foreground", children: [
                       "ERROR: ",
                       error
                     ] }),
@@ -77390,7 +77404,15 @@ function AnyVal({
       ] });
     }
     return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
-      field ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-left", children: field }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Path, { children: path }),
+      field ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-left", children: field }) : /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "div",
+        {
+          className: "truncate max-w-[300px] text-left",
+          title: path,
+          dir: "rtl",
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx(Path, { children: path })
+        }
+      ),
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         ValList,
         {
@@ -77417,7 +77439,15 @@ function AnyVal({
       ] });
     }
     return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
-      field ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-left", children: field }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Path, { children: path }),
+      field ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-left", children: field }) : /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "div",
+        {
+          className: "truncate max-w-[300px] text-left",
+          title: path,
+          dir: "rtl",
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx(Path, { children: path })
+        }
+      ),
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         ValRecord,
         {
@@ -77433,6 +77463,7 @@ function AnyVal({
       return /* @__PURE__ */ jsxRuntimeExports.jsx(
         ValTaggedUnion,
         {
+          field,
           tag: schema.key,
           source,
           path,
@@ -77447,7 +77478,15 @@ function AnyVal({
     return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {});
   }
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "py-2 gap-y-4", children: [
-    field ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-left", children: field }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Path, { children: path }),
+    field ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-left", children: field }) : /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "div",
+      {
+        className: "truncate max-w-[300px] text-left",
+        title: path,
+        dir: "rtl",
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx(Path, { children: path })
+      }
+    ),
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       ValFormField,
       {
@@ -77462,6 +77501,7 @@ function AnyVal({
 }
 function ValTaggedUnion({
   tag,
+  field,
   path,
   source,
   schema,
@@ -77499,6 +77539,8 @@ function ValTaggedUnion({
       });
       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",
@@ -77509,22 +77551,32 @@ function ValTaggedUnion({
         setCurrent(null);
       }
     }
-  }, [currentKey, source, schema, keys]);
+  }, [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(
-    "div",
+    FieldContainer,
     {
-      className: classNames("flex flex-col gap-y-8", {
+      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] text-left",
+            title: path,
+            dir: "rtl",
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx(Path, { children: path })
+          }
+        ),
         /* @__PURE__ */ jsxRuntimeExports.jsxs(
           Select,
           {
-            defaultValue: currentKey ?? void 0,
+            value: currentKey ?? void 0,
             disabled: loading,
             onValueChange: (key) => {
               setCurrentKey(key);
@@ -77535,11 +77587,19 @@ function ValTaggedUnion({
             ]
           }
         ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          SubmitButton,
+          {
+            loading,
+            enabled: false,
+            onClick: () => onSubmit(async () => [])
+          }
+        ),
         current && /* @__PURE__ */ jsxRuntimeExports.jsx(
           AnyVal,
           {
             path,
-            source: current.source,
+            source: current.source ?? null,
             schema: current.schema,
             setSelectedPath,
             initOnSubmit,
@@ -77562,7 +77622,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]) => {
@@ -77655,7 +77715,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(FieldContainer, { 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",
@@ -77894,9 +77954,10 @@ function ValOptional({
   field
 }) {
   const [enable, setEnable] = reactExports.useState(source !== null);
+  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: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
+      editMode === "full" && /* @__PURE__ */ jsxRuntimeExports.jsx(
         Switch,
         {
           checked: enable,
@@ -77905,7 +77966,15 @@ function ValOptional({
           }
         }
       ),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: field ? field : /* @__PURE__ */ jsxRuntimeExports.jsx(Path, { children: path }) })
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "div",
+        {
+          className: "truncate max-w-[300px] text-left",
+          title: path,
+          dir: "rtl",
+          children: field ? field : /* @__PURE__ */ jsxRuntimeExports.jsx(Path, { children: path })
+        }
+      )
     ] }),
     enable && /* @__PURE__ */ jsxRuntimeExports.jsx(
       ValDefaultOf,
@@ -78004,7 +78073,14 @@ function PathTree({
   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", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Path, { children: dir }) }),
+      dir && /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "div",
+        {
+          className: "font-bold truncate max-w-[300px] text-left",
+          title: dir,
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx(Path, { children: dir })
+        }
+      ),
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         "div",
         {