npm - @valbuild/ui - Versions diffs - 0.27.0 → 0.29.0 - Mend

@valbuild/ui 0.27.0 → 0.29.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (12) hide show

package/dist/valbuild-ui.cjs.js +108 -28
package/dist/valbuild-ui.esm.js +108 -28
package/package.json +2 -2
package/server/.tmp/assets/index-8e61e324.css +1 -0
package/server/.tmp/assets/{index-3108ab2a.js → index-9616f8c2.js} +59 -59
package/server/.tmp/index.html +2 -2
package/server/dist/style.css +10 -3
package/server/dist/valbuild-ui-main.cjs.js +172 -63
package/server/dist/valbuild-ui-main.esm.js +172 -63
package/server/dist/valbuild-ui-server.cjs.js +1 -1
package/server/dist/valbuild-ui-server.esm.js +1 -1
package/server/.tmp/assets/index-082e6676.css +0 -1

package/server/.tmp/index.html CHANGED Viewed

@@ -5,8 +5,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Val</title>
-    <script type="module" crossorigin src="/api/val/static/assets/index-3108ab2a.js"></script>
-    <link rel="stylesheet" href="/api/val/static/assets/index-082e6676.css">
+    <script type="module" crossorigin src="/api/val/static/assets/index-9616f8c2.js"></script>
+    <link rel="stylesheet" href="/api/val/static/assets/index-8e61e324.css">
   </head>
   <body>
     <div id="root"></div>

package/server/dist/style.css CHANGED Viewed

@@ -634,6 +634,12 @@ body {
 .-left-2 {
   left: -0.5rem;
 }
+.-right-\[10px\] {
+  right: -10px;
+}
+.-top-\[10px\] {
+  top: -10px;
+}
 .-top-\[4px\] {
   top: -4px;
 }
@@ -747,9 +753,6 @@ body {
 .grid {
   display: grid;
 }
-.contents {
-  display: contents;
-}
 .hidden {
   display: none;
 }
@@ -1075,6 +1078,10 @@ body {
 .gap-\[36px\] {
   gap: 36px;
 }
+.gap-x-2 {
+  -moz-column-gap: 0.5rem;
+       column-gap: 0.5rem;
+}
 .gap-x-3 {
   -moz-column-gap: 0.75rem;
        column-gap: 0.75rem;

package/server/dist/valbuild-ui-main.cjs.js CHANGED Viewed

@@ -33725,6 +33725,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) {
@@ -33747,8 +33783,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());
@@ -33762,52 +33798,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);
 }
@@ -37762,6 +37798,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;
@@ -59206,26 +59262,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) => {
@@ -59246,6 +59282,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)
@@ -59253,6 +59290,7 @@ function readImage(ev) {
           } else {
             resolve({
               src: result2,
+              filename: imageFile == null ? void 0 : imageFile.name,
               sha256
             });
           }
@@ -60712,7 +60750,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",
@@ -61056,6 +61094,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" }],
@@ -61082,6 +61125,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" }],
@@ -61100,8 +61147,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,
       {
@@ -61140,9 +61209,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,
@@ -63633,7 +63718,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 || ""
       }
     };
@@ -63644,7 +63729,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 || ""
       }
     };
@@ -68139,25 +68224,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
     }
   ];
 }
@@ -68167,7 +68262,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();
@@ -68177,13 +68274,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",
         {
@@ -68192,7 +68294,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,
@@ -68218,7 +68320,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);