@valbuild/ui 0.27.0 → 0.29.0

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

@@ -33724,6 +33724,42 @@ var ValApi = /* @__PURE__ */ function() {
     value: function getEditUrl() {
       return "".concat(this.host, "/static/edit");
     }
+  }, {
+    key: "getLoginUrl",
+    value: function getLoginUrl(redirectTo) {
+      return "".concat(this.host, "/authorize?redirect_to=").concat(encodeURIComponent(redirectTo));
+    }
+  }, {
+    key: "getPatches",
+    value: function() {
+      var _getPatches = _asyncToGenerator(/* @__PURE__ */ _regeneratorRuntime().mark(function _callee(_ref) {
+        var patchIds, headers, patchIdsParam;
+        return _regeneratorRuntime().wrap(function _callee$(_context) {
+          while (1)
+            switch (_context.prev = _context.next) {
+              case 0:
+                patchIds = _ref.patchIds, headers = _ref.headers;
+                patchIdsParam = patchIds ? "?".concat(patchIds.map(function(id) {
+                  return "".concat(id, "=").concat(encodeURIComponent(id));
+                }).join("&")) : "";
+                return _context.abrupt("return", fetch("".concat(this.host, "/patches/~").concat(patchIdsParam), {
+                  headers: headers || {
+                    "Content-Type": "application/json"
+                  }
+                }).then(function(res) {
+                  return parse$1(res);
+                }));
+              case 3:
+              case "end":
+                return _context.stop();
+            }
+        }, _callee, this);
+      }));
+      function getPatches(_x) {
+        return _getPatches.apply(this, arguments);
+      }
+      return getPatches;
+    }()
   }, {
     key: "postPatches",
     value: function postPatches(moduleId, patches, headers) {
@@ -33746,8 +33782,8 @@ var ValApi = /* @__PURE__ */ function() {
     }
   }, {
     key: "getModules",
-    value: function getModules(_ref) {
-      var _ref$patch = _ref.patch, patch = _ref$patch === void 0 ? false : _ref$patch, _ref$includeSchema = _ref.includeSchema, includeSchema = _ref$includeSchema === void 0 ? false : _ref$includeSchema, _ref$includeSource = _ref.includeSource, includeSource = _ref$includeSource === void 0 ? false : _ref$includeSource, _ref$treePath = _ref.treePath, treePath = _ref$treePath === void 0 ? "/" : _ref$treePath, headers = _ref.headers;
+    value: function getModules(_ref2) {
+      var _ref2$patch = _ref2.patch, patch = _ref2$patch === void 0 ? false : _ref2$patch, _ref2$includeSchema = _ref2.includeSchema, includeSchema = _ref2$includeSchema === void 0 ? false : _ref2$includeSchema, _ref2$includeSource = _ref2.includeSource, includeSource = _ref2$includeSource === void 0 ? false : _ref2$includeSource, _ref2$treePath = _ref2.treePath, treePath = _ref2$treePath === void 0 ? "/" : _ref2$treePath, headers = _ref2.headers;
       var params = new URLSearchParams();
       params.set("patch", patch.toString());
       params.set("schema", includeSchema.toString());
@@ -33761,52 +33797,52 @@ var ValApi = /* @__PURE__ */ function() {
   }]);
   return ValApi2;
 }();
-function parse$1(_x) {
+function parse$1(_x2) {
   return _parse.apply(this, arguments);
 }
 function _parse() {
-  _parse = _asyncToGenerator(/* @__PURE__ */ _regeneratorRuntime().mark(function _callee(res) {
-    return _regeneratorRuntime().wrap(function _callee$(_context) {
+  _parse = _asyncToGenerator(/* @__PURE__ */ _regeneratorRuntime().mark(function _callee2(res) {
+    return _regeneratorRuntime().wrap(function _callee2$(_context2) {
       while (1)
-        switch (_context.prev = _context.next) {
+        switch (_context2.prev = _context2.next) {
           case 0:
-            _context.prev = 0;
+            _context2.prev = 0;
             if (!res.ok) {
-              _context.next = 9;
+              _context2.next = 9;
               break;
             }
-            _context.t0 = result;
-            _context.next = 5;
+            _context2.t0 = result;
+            _context2.next = 5;
             return res.json();
           case 5:
-            _context.t1 = _context.sent;
-            return _context.abrupt("return", _context.t0.ok.call(_context.t0, _context.t1));
+            _context2.t1 = _context2.sent;
+            return _context2.abrupt("return", _context2.t0.ok.call(_context2.t0, _context2.t1));
           case 9:
-            _context.t2 = result;
-            _context.t3 = res.status;
-            _context.next = 13;
+            _context2.t2 = result;
+            _context2.t3 = res.status;
+            _context2.next = 13;
             return res.text();
           case 13:
-            _context.t4 = _context.sent;
-            _context.t5 = {
-              statusCode: _context.t3,
-              message: _context.t4
+            _context2.t4 = _context2.sent;
+            _context2.t5 = {
+              statusCode: _context2.t3,
+              message: _context2.t4
             };
-            return _context.abrupt("return", _context.t2.err.call(_context.t2, _context.t5));
+            return _context2.abrupt("return", _context2.t2.err.call(_context2.t2, _context2.t5));
           case 16:
-            _context.next = 21;
+            _context2.next = 21;
             break;
           case 18:
-            _context.prev = 18;
-            _context.t6 = _context["catch"](0);
-            return _context.abrupt("return", err({
-              message: _context.t6 instanceof Error ? _context.t6.message : "Unknown error"
+            _context2.prev = 18;
+            _context2.t6 = _context2["catch"](0);
+            return _context2.abrupt("return", err({
+              message: _context2.t6 instanceof Error ? _context2.t6.message : "Unknown error"
             }));
           case 21:
           case "end":
-            return _context.stop();
+            return _context2.stop();
         }
-    }, _callee, null, [[0, 18]]);
+    }, _callee2, null, [[0, 18]]);
   }));
   return _parse.apply(this, arguments);
 }
@@ -37761,6 +37797,26 @@ Tree.Node = ({
     }) })
   ] });
 };
+const MIME_TYPE_REGEX = /^data:(image\/(png|jpeg|jpg|gif|webp|bmp|tiff|ico|svg\+xml));base64,/;
+function getMimeType(base64Url) {
+  const match = MIME_TYPE_REGEX.exec(base64Url);
+  if (match && match[1]) {
+    return match[1];
+  }
+  return;
+}
+function mimeTypeToFileExt(mimeType) {
+  if (mimeType === "image/svg+xml") {
+    return "svg";
+  }
+  if (mimeType === "image/vnd.microsoft.icon") {
+    return "ico";
+  }
+  if (mimeType.startsWith("image/")) {
+    return mimeType.slice("image/".length);
+  }
+  return mimeType;
+}
 var LexicalList_dev = {};
 var Lexical_dev = {};
 var hasRequiredLexical_dev;
@@ -59205,26 +59261,6 @@ const Dropdown = ({
   ) });
 };
 const Dropdown$1 = Dropdown;
-const MIME_TYPE_REGEX = /^data:(image\/(png|jpeg|jpg|gif|webp|bmp|tiff|ico|svg\+xml));base64,/;
-function getMimeType(base64Url) {
-  const match = MIME_TYPE_REGEX.exec(base64Url);
-  if (match && match[1]) {
-    return match[1];
-  }
-  return;
-}
-function mimeTypeToFileExt(mimeType) {
-  if (mimeType === "image/svg+xml") {
-    return "svg";
-  }
-  if (mimeType === "image/vnd.microsoft.icon") {
-    return "ico";
-  }
-  if (mimeType.startsWith("image/")) {
-    return mimeType.slice("image/".length);
-  }
-  return mimeType;
-}
 const textEncoder$1 = new TextEncoder();
 function readImage(ev) {
   return new Promise((resolve, reject) => {
@@ -59245,6 +59281,7 @@ function readImage(ev) {
               src: result2,
               width: image.naturalWidth,
               height: image.naturalHeight,
+              filename: imageFile == null ? void 0 : imageFile.name,
               sha256,
               mimeType,
               fileExt: mimeType && mimeTypeToFileExt(mimeType)
@@ -59252,6 +59289,7 @@ function readImage(ev) {
           } else {
             resolve({
               src: result2,
+              filename: imageFile == null ? void 0 : imageFile.name,
               sha256
             });
           }
@@ -60711,7 +60749,7 @@ const Toolbar = ({
           )
         }
       ),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: "flex items-center justify-center", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: "flex items-center justify-center cursor-pointer", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(ImageIcon$1, {}),
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           "input",
@@ -61055,6 +61093,11 @@ const ChevronDown = createLucideIcon("ChevronDown", [
 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" }],
@@ -61081,6 +61124,10 @@ 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" }],
@@ -61099,8 +61146,30 @@ const X = createLucideIcon("X", [
 const className = "p-1 border rounded-full shadow border-accent";
 const PREV_URL_KEY = "valbuild:urlBeforeNavigation";
 function ValMenu({ api }) {
-  const { theme: theme2, setTheme, editMode, setEditMode } = useValOverlayContext();
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-row items-center justify-center w-full h-full px-1 py-2 border-2 rounded-full gap-x-3 text-primary bg-background border-fill", children: [
+  const { theme: theme2, setTheme, editMode, setEditMode, session } = useValOverlayContext();
+  if (session.status === "success" && session.data === "not-authenticated") {
+    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: api.getLoginUrl(window.location.href), children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-center px-2 gap-x-2", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Login" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(LogIn, { size: 18 })
+    ] }) }) });
+  }
+  const [patchCount, setPatchCount] = reactExports.useState();
+  reactExports.useEffect(() => {
+    if (session.status === "success" && session.data !== "not-authenticated") {
+      api.getPatches({}).then((patchRes) => {
+        if (result.isOk(patchRes)) {
+          let patchCount2 = 0;
+          for (const moduleId in patchRes.value) {
+            patchCount2 += patchRes.value[moduleId].length;
+          }
+          setPatchCount(patchCount2);
+        } else {
+          console.error("Could not load patches", patchRes.error);
+        }
+      });
+    }
+  }, [session]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(MenuContainer, { children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       MenuButton,
       {
@@ -61139,9 +61208,25 @@ function ValMenu({ api }) {
         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 }) })
       }
     ),
+    patchCount && /* @__PURE__ */ jsxRuntimeExports.jsx(
+      MenuButton,
+      {
+        onClick: () => {
+        },
+        children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative h-[24px] w-[24px] flex justify-center items-center", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute -right-[10px] -top-[10px] border border-border rounded-full px-1 font-sans text-xs bg-card text-accent", children: patchCount }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Send, { size: 18 })
+        ] })
+      }
+    ),
     /* @__PURE__ */ jsxRuntimeExports.jsx("a", { className, href: api.getDisableUrl(), children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-[24px] w-[24px] flex justify-center items-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Power, { size: 18 }) }) })
   ] });
 }
+function MenuContainer({
+  children
+}) {
+  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 });
+}
 function MenuButton({
   active,
   onClick,
@@ -63632,7 +63717,7 @@ async function fromLexicalImageNode(node, files) {
       [FILE_REF_PROP]: filePath,
       metadata: {
         width: node.width || 0,
-        height: node.width || 0,
+        height: node.height || 0,
         sha256: sha256 || ""
       }
     };
@@ -63643,7 +63728,7 @@ async function fromLexicalImageNode(node, files) {
       [FILE_REF_PROP]: `/public${node.src.split("?")[0]}`,
       metadata: {
         width: node.width || 0,
-        height: node.width || 0,
+        height: node.height || 0,
         sha256: sha256 || ""
       }
     };
@@ -68140,25 +68225,35 @@ function ValFormField({
     schema.type
   ] });
 }
-async function createImagePatch(path, data, metadata, defaultValue) {
-  const pathParts = path.split("/");
+function createImagePatch(path, data, filename, metadata) {
   if (!data || !metadata) {
     return [];
   }
+  const shaSuffix = metadata.sha256.slice(0, 5);
+  const newFilePath = function() {
+    const mimeType = getMimeType(data) ?? "unknown";
+    const newExt = mimeTypeToFileExt(mimeType);
+    if (filename) {
+      const filenameWithoutExt = filename.split(".").slice(0, -1).join(".") || filename;
+      return `/public/${filenameWithoutExt}_${shaSuffix}.${newExt}`;
+    }
+    return `/public/${metadata.sha256}.${newExt}`;
+  }();
   return [
     {
       value: {
-        ...defaultValue,
+        [FILE_REF_PROP]: newFilePath,
+        [VAL_EXTENSION]: "file",
         metadata
       },
       op: "replace",
       path
     },
-    // update the contents of the file:
     {
       value: data,
-      op: "replace",
-      path: `${pathParts.slice(0, -1).join("/")}/$${pathParts[pathParts.length - 1]}`
+      op: "file",
+      path,
+      filePath: newFilePath
     }
   ];
 }
@@ -68168,7 +68263,9 @@ function ImageField({
   onSubmit,
   registerPatchCallback
 }) {
-  const [data, setData] = reactExports.useState(null);
+  const [data, setData] = reactExports.useState(
+    null
+  );
   const [loading, setLoading] = reactExports.useState(false);
   const [metadata, setMetadata] = reactExports.useState();
   const [url, setUrl] = reactExports.useState();
@@ -68178,13 +68275,18 @@ function ImageField({
   reactExports.useEffect(() => {
     if (registerPatchCallback) {
       registerPatchCallback(async (path2) => {
-        return createImagePatch(path2, data, metadata, defaultValue);
+        return createImagePatch(
+          path2,
+          (data == null ? void 0 : data.src) ?? null,
+          (data == null ? void 0 : data.filename) ?? null,
+          metadata
+        );
       });
     }
   }, [data, defaultValue]);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "max-w-4xl p-4", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { htmlFor: `img_input:${path}`, className: "", children: [
-      data || url ? /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: data || url }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: "Empty" }),
+      data || url ? /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: (data == null ? void 0 : data.src) || url }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: "Empty" }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         "input",
         {
@@ -68193,7 +68295,7 @@ function ImageField({
           hidden: true,
           onChange: (ev) => {
             readImage(ev).then((res) => {
-              setData(res.src);
+              setData({ src: res.src, filename: res.filename });
               if (res.width && res.height) {
                 setMetadata({
                   sha256: res.sha256,
@@ -68219,7 +68321,14 @@ function ImageField({
         onClick: () => {
           setLoading(true);
           onSubmit(
-            (path2) => createImagePatch(path2, data, metadata, defaultValue)
+            (path2) => Promise.resolve(
+              createImagePatch(
+                path2,
+                data.src,
+                data.filename ?? null,
+                metadata
+              )
+            )
           ).finally(() => {
             setLoading(false);
             setData(null);