@valbuild/ui 0.26.0 → 0.28.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 (145) hide show
  1. package/dist/valbuild-ui.cjs.js +41 -15
  2. package/dist/valbuild-ui.esm.js +41 -15
  3. package/package.json +7 -3
  4. package/server/.tmp/assets/index-18cfa26c.css +1 -0
  5. package/server/.tmp/assets/index-513f7a9c.js +197 -0
  6. package/{index.html → server/.tmp/index.html} +3 -1
  7. package/server/dist/style.css +0 -3
  8. package/server/dist/valbuild-ui-main.cjs.js +60 -34
  9. package/server/dist/valbuild-ui-main.esm.js +60 -34
  10. package/server/dist/valbuild-ui-server.cjs.js +1 -1
  11. package/server/dist/valbuild-ui-server.esm.js +1 -1
  12. package/.babelrc.json +0 -10
  13. package/.storybook/main.js +0 -25
  14. package/.storybook/preview-head.html +0 -6
  15. package/.storybook/preview.js +0 -33
  16. package/.storybook/theme.css +0 -34
  17. package/CHANGELOG.md +0 -0
  18. package/components.json +0 -16
  19. package/fix-server-hack.js +0 -54
  20. package/fullscreen.vite.config.ts +0 -9
  21. package/jest.config.js +0 -4
  22. package/postcss.config.js +0 -6
  23. package/rollup.config.js +0 -23
  24. package/server.vite.config.ts +0 -31
  25. package/src/App.tsx +0 -73
  26. package/src/assets/icons/Bold.tsx +0 -23
  27. package/src/assets/icons/Chevron.tsx +0 -28
  28. package/src/assets/icons/FontColor.tsx +0 -30
  29. package/src/assets/icons/ImageIcon.tsx +0 -29
  30. package/src/assets/icons/Italic.tsx +0 -24
  31. package/src/assets/icons/Logo.tsx +0 -103
  32. package/src/assets/icons/Section.tsx +0 -41
  33. package/src/assets/icons/Strikethrough.tsx +0 -22
  34. package/src/assets/icons/TextIcon.tsx +0 -20
  35. package/src/assets/icons/Underline.tsx +0 -22
  36. package/src/assets/icons/Undo.tsx +0 -20
  37. package/src/components/Button.tsx +0 -68
  38. package/src/components/Checkbox.tsx +0 -51
  39. package/src/components/DraggableList.stories.tsx +0 -20
  40. package/src/components/DraggableList.tsx +0 -95
  41. package/src/components/Dropdown.tsx +0 -101
  42. package/src/components/EditButton.tsx +0 -10
  43. package/src/components/ErrorText.tsx +0 -3
  44. package/src/components/ExpandLogo.tsx +0 -72
  45. package/src/components/Grid.stories.tsx +0 -43
  46. package/src/components/Grid.tsx +0 -139
  47. package/src/components/RichTextEditor/ContentEditable.tsx +0 -117
  48. package/src/components/RichTextEditor/Nodes/ImageNode.tsx +0 -100
  49. package/src/components/RichTextEditor/Plugins/AutoFocus.tsx +0 -12
  50. package/src/components/RichTextEditor/Plugins/ImagePlugin.tsx +0 -45
  51. package/src/components/RichTextEditor/Plugins/LinkEditorPlugin.tsx +0 -58
  52. package/src/components/RichTextEditor/Plugins/Toolbar.tsx +0 -412
  53. package/src/components/RichTextEditor/RichTextEditor.tsx +0 -105
  54. package/src/components/UploadModal.tsx +0 -109
  55. package/src/components/User.tsx +0 -17
  56. package/src/components/ValFormField.tsx +0 -574
  57. package/src/components/ValFullscreen.tsx +0 -1278
  58. package/src/components/ValMenu.tsx +0 -92
  59. package/src/components/ValOverlay.tsx +0 -488
  60. package/src/components/ValOverlayContext.tsx +0 -80
  61. package/src/components/ValWindow.stories.tsx +0 -146
  62. package/src/components/ValWindow.tsx +0 -220
  63. package/src/components/dashboard/DashboardButton.tsx +0 -25
  64. package/src/components/dashboard/DashboardDropdown.tsx +0 -59
  65. package/src/components/dashboard/Dropdown.stories.tsx +0 -11
  66. package/src/components/dashboard/Dropdown.tsx +0 -70
  67. package/src/components/dashboard/FormGroup.stories.tsx +0 -37
  68. package/src/components/dashboard/FormGroup.tsx +0 -42
  69. package/src/components/dashboard/Grid2.stories.tsx +0 -56
  70. package/src/components/dashboard/Grid2.tsx +0 -72
  71. package/src/components/dashboard/Tree.stories.tsx +0 -91
  72. package/src/components/dashboard/Tree.tsx +0 -72
  73. package/src/components/dashboard/ValDashboardEditor.tsx +0 -269
  74. package/src/components/dashboard/ValDashboardGrid.tsx +0 -142
  75. package/src/components/dashboard/ValTreeNavigator.tsx +0 -253
  76. package/src/components/forms/Form.tsx +0 -126
  77. package/src/components/forms/FormContainer.tsx +0 -24
  78. package/src/components/forms/ImageForm.tsx +0 -195
  79. package/src/components/forms/TextArea.tsx +0 -24
  80. package/src/components/ui/accordion.tsx +0 -58
  81. package/src/components/ui/alert-dialog.tsx +0 -139
  82. package/src/components/ui/avatar.tsx +0 -48
  83. package/src/components/ui/button.tsx +0 -56
  84. package/src/components/ui/calendar.tsx +0 -62
  85. package/src/components/ui/card.tsx +0 -86
  86. package/src/components/ui/checkbox.tsx +0 -28
  87. package/src/components/ui/command.tsx +0 -153
  88. package/src/components/ui/dialog.tsx +0 -120
  89. package/src/components/ui/dropdown-menu.tsx +0 -198
  90. package/src/components/ui/form.tsx +0 -177
  91. package/src/components/ui/input.tsx +0 -24
  92. package/src/components/ui/label.tsx +0 -24
  93. package/src/components/ui/popover.tsx +0 -29
  94. package/src/components/ui/progress.tsx +0 -26
  95. package/src/components/ui/radio-group.tsx +0 -42
  96. package/src/components/ui/scroll-area.tsx +0 -51
  97. package/src/components/ui/select.tsx +0 -119
  98. package/src/components/ui/switch.tsx +0 -27
  99. package/src/components/ui/tabs.tsx +0 -53
  100. package/src/components/ui/toggle.tsx +0 -43
  101. package/src/components/ui/tooltip.tsx +0 -28
  102. package/src/components/usePatch.ts +0 -86
  103. package/src/components/useTheme.ts +0 -45
  104. package/src/dto/SerializedSchema.ts +0 -69
  105. package/src/dto/Session.ts +0 -12
  106. package/src/dto/SessionMode.ts +0 -5
  107. package/src/dto/Tree.ts +0 -18
  108. package/src/exports.ts +0 -6
  109. package/src/index.css +0 -115
  110. package/src/index.tsx +0 -14
  111. package/src/lib/IValStore.ts +0 -6
  112. package/src/lib/utils.ts +0 -6
  113. package/src/main.jsx +0 -10
  114. package/src/richtext/conversion/conversion.test.ts +0 -146
  115. package/src/richtext/conversion/lexicalToRichTextSource.test.ts +0 -89
  116. package/src/richtext/conversion/lexicalToRichTextSource.ts +0 -285
  117. package/src/richtext/conversion/parseRichTextSource.test.ts +0 -469
  118. package/src/richtext/conversion/parseRichTextSource.ts +0 -233
  119. package/src/richtext/conversion/richTextSourceToLexical.test.ts +0 -381
  120. package/src/richtext/conversion/richTextSourceToLexical.ts +0 -293
  121. package/src/richtext/shadowRootPolyFill.js +0 -115
  122. package/src/server.ts +0 -70
  123. package/src/stories/Button.stories.tsx +0 -20
  124. package/src/stories/Checkbox.stories.tsx +0 -14
  125. package/src/stories/Dropdown.stories.tsx +0 -23
  126. package/src/stories/Introduction.mdx +0 -221
  127. package/src/stories/RichTextEditor.stories.tsx +0 -24
  128. package/src/stories/assets/code-brackets.svg +0 -1
  129. package/src/stories/assets/colors.svg +0 -1
  130. package/src/stories/assets/comments.svg +0 -1
  131. package/src/stories/assets/direction.svg +0 -1
  132. package/src/stories/assets/flow.svg +0 -1
  133. package/src/stories/assets/plugin.svg +0 -1
  134. package/src/stories/assets/repo.svg +0 -1
  135. package/src/stories/assets/stackalt.svg +0 -1
  136. package/src/utils/Remote.ts +0 -15
  137. package/src/utils/imageMimeType.ts +0 -23
  138. package/src/utils/readImage.ts +0 -54
  139. package/src/utils/resolvePath.ts +0 -32
  140. package/src/vite-env.d.ts +0 -1
  141. package/src/vite-index.tsx +0 -7
  142. package/src/vite-server.ts +0 -42
  143. package/tailwind.config.js +0 -83
  144. package/tsconfig.json +0 -19
  145. package/vite.config.ts +0 -43
package/{index.html → server/.tmp/index.html} RENAMED
@@ -4,7 +4,9 @@
4
4
  <meta charset="UTF-8" />
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
6
  <title>Val</title>
7
- <script type="module" src="/src/main.jsx"></script>
7
+
8
+ <script type="module" crossorigin src="/api/val/static/assets/index-513f7a9c.js"></script>
9
+ <link rel="stylesheet" href="/api/val/static/assets/index-18cfa26c.css">
8
10
  </head>
9
11
  <body>
10
12
  <div id="root"></div>
package/server/dist/style.css CHANGED
@@ -747,9 +747,6 @@ body {
747
747
  .grid {
748
748
  display: grid;
749
749
  }
750
- .contents {
751
- display: contents;
752
- }
753
750
  .hidden {
754
751
  display: none;
755
752
  }
package/server/dist/valbuild-ui-main.cjs.js CHANGED
@@ -37762,6 +37762,26 @@ Tree.Node = ({
37762
37762
  }) })
37763
37763
  ] });
37764
37764
  };
37765
+ const MIME_TYPE_REGEX = /^data:(image\/(png|jpeg|jpg|gif|webp|bmp|tiff|ico|svg\+xml));base64,/;
37766
+ function getMimeType(base64Url) {
37767
+ const match = MIME_TYPE_REGEX.exec(base64Url);
37768
+ if (match && match[1]) {
37769
+ return match[1];
37770
+ }
37771
+ return;
37772
+ }
37773
+ function mimeTypeToFileExt(mimeType) {
37774
+ if (mimeType === "image/svg+xml") {
37775
+ return "svg";
37776
+ }
37777
+ if (mimeType === "image/vnd.microsoft.icon") {
37778
+ return "ico";
37779
+ }
37780
+ if (mimeType.startsWith("image/")) {
37781
+ return mimeType.slice("image/".length);
37782
+ }
37783
+ return mimeType;
37784
+ }
37765
37785
  var LexicalList_dev = {};
37766
37786
  var Lexical_dev = {};
37767
37787
  var hasRequiredLexical_dev;
@@ -59206,26 +59226,6 @@ const Dropdown = ({
59206
59226
  ) });
59207
59227
  };
59208
59228
  const Dropdown$1 = Dropdown;
59209
- const MIME_TYPE_REGEX = /^data:(image\/(png|jpeg|jpg|gif|webp|bmp|tiff|ico|svg\+xml));base64,/;
59210
- function getMimeType(base64Url) {
59211
- const match = MIME_TYPE_REGEX.exec(base64Url);
59212
- if (match && match[1]) {
59213
- return match[1];
59214
- }
59215
- return;
59216
- }
59217
- function mimeTypeToFileExt(mimeType) {
59218
- if (mimeType === "image/svg+xml") {
59219
- return "svg";
59220
- }
59221
- if (mimeType === "image/vnd.microsoft.icon") {
59222
- return "ico";
59223
- }
59224
- if (mimeType.startsWith("image/")) {
59225
- return mimeType.slice("image/".length);
59226
- }
59227
- return mimeType;
59228
- }
59229
59229
  const textEncoder$1 = new TextEncoder();
59230
59230
  function readImage(ev) {
59231
59231
  return new Promise((resolve, reject) => {
@@ -59246,6 +59246,7 @@ function readImage(ev) {
59246
59246
  src: result2,
59247
59247
  width: image.naturalWidth,
59248
59248
  height: image.naturalHeight,
59249
+ filename: imageFile == null ? void 0 : imageFile.name,
59249
59250
  sha256,
59250
59251
  mimeType,
59251
59252
  fileExt: mimeType && mimeTypeToFileExt(mimeType)
@@ -59253,6 +59254,7 @@ function readImage(ev) {
59253
59254
  } else {
59254
59255
  resolve({
59255
59256
  src: result2,
59257
+ filename: imageFile == null ? void 0 : imageFile.name,
59256
59258
  sha256
59257
59259
  });
59258
59260
  }
@@ -60712,7 +60714,7 @@ const Toolbar = ({
60712
60714
  )
60713
60715
  }
60714
60716
  ),
60715
- /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: "flex items-center justify-center", children: [
60717
+ /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: "flex items-center justify-center cursor-pointer", children: [
60716
60718
  /* @__PURE__ */ jsxRuntimeExports.jsx(ImageIcon$1, {}),
60717
60719
  /* @__PURE__ */ jsxRuntimeExports.jsx(
60718
60720
  "input",
@@ -63633,7 +63635,7 @@ async function fromLexicalImageNode(node, files) {
63633
63635
  [FILE_REF_PROP]: filePath,
63634
63636
  metadata: {
63635
63637
  width: node.width || 0,
63636
- height: node.width || 0,
63638
+ height: node.height || 0,
63637
63639
  sha256: sha256 || ""
63638
63640
  }
63639
63641
  };
@@ -63644,7 +63646,7 @@ async function fromLexicalImageNode(node, files) {
63644
63646
  [FILE_REF_PROP]: `/public${node.src.split("?")[0]}`,
63645
63647
  metadata: {
63646
63648
  width: node.width || 0,
63647
- height: node.width || 0,
63649
+ height: node.height || 0,
63648
63650
  sha256: sha256 || ""
63649
63651
  }
63650
63652
  };
@@ -68139,25 +68141,35 @@ function ValFormField({
68139
68141
  schema.type
68140
68142
  ] });
68141
68143
  }
68142
- async function createImagePatch(path, data, metadata, defaultValue) {
68143
- const pathParts = path.split("/");
68144
+ function createImagePatch(path, data, filename, metadata) {
68144
68145
  if (!data || !metadata) {
68145
68146
  return [];
68146
68147
  }
68148
+ const shaSuffix = metadata.sha256.slice(0, 5);
68149
+ const newFilePath = function() {
68150
+ const mimeType = getMimeType(data) ?? "unknown";
68151
+ const newExt = mimeTypeToFileExt(mimeType);
68152
+ if (filename) {
68153
+ const filenameWithoutExt = filename.split(".").slice(0, -1).join(".") || filename;
68154
+ return `/public/${filenameWithoutExt}_${shaSuffix}.${newExt}`;
68155
+ }
68156
+ return `/public/${metadata.sha256}.${newExt}`;
68157
+ }();
68147
68158
  return [
68148
68159
  {
68149
68160
  value: {
68150
- ...defaultValue,
68161
+ [FILE_REF_PROP]: newFilePath,
68162
+ [VAL_EXTENSION]: "file",
68151
68163
  metadata
68152
68164
  },
68153
68165
  op: "replace",
68154
68166
  path
68155
68167
  },
68156
- // update the contents of the file:
68157
68168
  {
68158
68169
  value: data,
68159
- op: "replace",
68160
- path: `${pathParts.slice(0, -1).join("/")}/$${pathParts[pathParts.length - 1]}`
68170
+ op: "file",
68171
+ path,
68172
+ filePath: newFilePath
68161
68173
  }
68162
68174
  ];
68163
68175
  }
@@ -68167,7 +68179,9 @@ function ImageField({
68167
68179
  onSubmit,
68168
68180
  registerPatchCallback
68169
68181
  }) {
68170
- const [data, setData] = reactExports.useState(null);
68182
+ const [data, setData] = reactExports.useState(
68183
+ null
68184
+ );
68171
68185
  const [loading, setLoading] = reactExports.useState(false);
68172
68186
  const [metadata, setMetadata] = reactExports.useState();
68173
68187
  const [url, setUrl] = reactExports.useState();
@@ -68177,13 +68191,18 @@ function ImageField({
68177
68191
  reactExports.useEffect(() => {
68178
68192
  if (registerPatchCallback) {
68179
68193
  registerPatchCallback(async (path2) => {
68180
- return createImagePatch(path2, data, metadata, defaultValue);
68194
+ return createImagePatch(
68195
+ path2,
68196
+ (data == null ? void 0 : data.src) ?? null,
68197
+ (data == null ? void 0 : data.filename) ?? null,
68198
+ metadata
68199
+ );
68181
68200
  });
68182
68201
  }
68183
68202
  }, [data, defaultValue]);
68184
68203
  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "max-w-4xl p-4", children: [
68185
68204
  /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { htmlFor: `img_input:${path}`, className: "", children: [
68186
- data || url ? /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: data || url }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: "Empty" }),
68205
+ data || url ? /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: (data == null ? void 0 : data.src) || url }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: "Empty" }),
68187
68206
  /* @__PURE__ */ jsxRuntimeExports.jsx(
68188
68207
  "input",
68189
68208
  {
@@ -68192,7 +68211,7 @@ function ImageField({
68192
68211
  hidden: true,
68193
68212
  onChange: (ev) => {
68194
68213
  readImage(ev).then((res) => {
68195
- setData(res.src);
68214
+ setData({ src: res.src, filename: res.filename });
68196
68215
  if (res.width && res.height) {
68197
68216
  setMetadata({
68198
68217
  sha256: res.sha256,
@@ -68218,7 +68237,14 @@ function ImageField({
68218
68237
  onClick: () => {
68219
68238
  setLoading(true);
68220
68239
  onSubmit(
68221
- (path2) => createImagePatch(path2, data, metadata, defaultValue)
68240
+ (path2) => Promise.resolve(
68241
+ createImagePatch(
68242
+ path2,
68243
+ data.src,
68244
+ data.filename ?? null,
68245
+ metadata
68246
+ )
68247
+ )
68222
68248
  ).finally(() => {
68223
68249
  setLoading(false);
68224
68250
  setData(null);
package/server/dist/valbuild-ui-main.esm.js CHANGED
@@ -37761,6 +37761,26 @@ Tree.Node = ({
37761
37761
  }) })
37762
37762
  ] });
37763
37763
  };
37764
+ const MIME_TYPE_REGEX = /^data:(image\/(png|jpeg|jpg|gif|webp|bmp|tiff|ico|svg\+xml));base64,/;
37765
+ function getMimeType(base64Url) {
37766
+ const match = MIME_TYPE_REGEX.exec(base64Url);
37767
+ if (match && match[1]) {
37768
+ return match[1];
37769
+ }
37770
+ return;
37771
+ }
37772
+ function mimeTypeToFileExt(mimeType) {
37773
+ if (mimeType === "image/svg+xml") {
37774
+ return "svg";
37775
+ }
37776
+ if (mimeType === "image/vnd.microsoft.icon") {
37777
+ return "ico";
37778
+ }
37779
+ if (mimeType.startsWith("image/")) {
37780
+ return mimeType.slice("image/".length);
37781
+ }
37782
+ return mimeType;
37783
+ }
37764
37784
  var LexicalList_dev = {};
37765
37785
  var Lexical_dev = {};
37766
37786
  var hasRequiredLexical_dev;
@@ -59205,26 +59225,6 @@ const Dropdown = ({
59205
59225
  ) });
59206
59226
  };
59207
59227
  const Dropdown$1 = Dropdown;
59208
- const MIME_TYPE_REGEX = /^data:(image\/(png|jpeg|jpg|gif|webp|bmp|tiff|ico|svg\+xml));base64,/;
59209
- function getMimeType(base64Url) {
59210
- const match = MIME_TYPE_REGEX.exec(base64Url);
59211
- if (match && match[1]) {
59212
- return match[1];
59213
- }
59214
- return;
59215
- }
59216
- function mimeTypeToFileExt(mimeType) {
59217
- if (mimeType === "image/svg+xml") {
59218
- return "svg";
59219
- }
59220
- if (mimeType === "image/vnd.microsoft.icon") {
59221
- return "ico";
59222
- }
59223
- if (mimeType.startsWith("image/")) {
59224
- return mimeType.slice("image/".length);
59225
- }
59226
- return mimeType;
59227
- }
59228
59228
  const textEncoder$1 = new TextEncoder();
59229
59229
  function readImage(ev) {
59230
59230
  return new Promise((resolve, reject) => {
@@ -59245,6 +59245,7 @@ function readImage(ev) {
59245
59245
  src: result2,
59246
59246
  width: image.naturalWidth,
59247
59247
  height: image.naturalHeight,
59248
+ filename: imageFile == null ? void 0 : imageFile.name,
59248
59249
  sha256,
59249
59250
  mimeType,
59250
59251
  fileExt: mimeType && mimeTypeToFileExt(mimeType)
@@ -59252,6 +59253,7 @@ function readImage(ev) {
59252
59253
  } else {
59253
59254
  resolve({
59254
59255
  src: result2,
59256
+ filename: imageFile == null ? void 0 : imageFile.name,
59255
59257
  sha256
59256
59258
  });
59257
59259
  }
@@ -60711,7 +60713,7 @@ const Toolbar = ({
60711
60713
  )
60712
60714
  }
60713
60715
  ),
60714
- /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: "flex items-center justify-center", children: [
60716
+ /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: "flex items-center justify-center cursor-pointer", children: [
60715
60717
  /* @__PURE__ */ jsxRuntimeExports.jsx(ImageIcon$1, {}),
60716
60718
  /* @__PURE__ */ jsxRuntimeExports.jsx(
60717
60719
  "input",
@@ -63632,7 +63634,7 @@ async function fromLexicalImageNode(node, files) {
63632
63634
  [FILE_REF_PROP]: filePath,
63633
63635
  metadata: {
63634
63636
  width: node.width || 0,
63635
- height: node.width || 0,
63637
+ height: node.height || 0,
63636
63638
  sha256: sha256 || ""
63637
63639
  }
63638
63640
  };
@@ -63643,7 +63645,7 @@ async function fromLexicalImageNode(node, files) {
63643
63645
  [FILE_REF_PROP]: `/public${node.src.split("?")[0]}`,
63644
63646
  metadata: {
63645
63647
  width: node.width || 0,
63646
- height: node.width || 0,
63648
+ height: node.height || 0,
63647
63649
  sha256: sha256 || ""
63648
63650
  }
63649
63651
  };
@@ -68140,25 +68142,35 @@ function ValFormField({
68140
68142
  schema.type
68141
68143
  ] });
68142
68144
  }
68143
- async function createImagePatch(path, data, metadata, defaultValue) {
68144
- const pathParts = path.split("/");
68145
+ function createImagePatch(path, data, filename, metadata) {
68145
68146
  if (!data || !metadata) {
68146
68147
  return [];
68147
68148
  }
68149
+ const shaSuffix = metadata.sha256.slice(0, 5);
68150
+ const newFilePath = function() {
68151
+ const mimeType = getMimeType(data) ?? "unknown";
68152
+ const newExt = mimeTypeToFileExt(mimeType);
68153
+ if (filename) {
68154
+ const filenameWithoutExt = filename.split(".").slice(0, -1).join(".") || filename;
68155
+ return `/public/${filenameWithoutExt}_${shaSuffix}.${newExt}`;
68156
+ }
68157
+ return `/public/${metadata.sha256}.${newExt}`;
68158
+ }();
68148
68159
  return [
68149
68160
  {
68150
68161
  value: {
68151
- ...defaultValue,
68162
+ [FILE_REF_PROP]: newFilePath,
68163
+ [VAL_EXTENSION]: "file",
68152
68164
  metadata
68153
68165
  },
68154
68166
  op: "replace",
68155
68167
  path
68156
68168
  },
68157
- // update the contents of the file:
68158
68169
  {
68159
68170
  value: data,
68160
- op: "replace",
68161
- path: `${pathParts.slice(0, -1).join("/")}/$${pathParts[pathParts.length - 1]}`
68171
+ op: "file",
68172
+ path,
68173
+ filePath: newFilePath
68162
68174
  }
68163
68175
  ];
68164
68176
  }
@@ -68168,7 +68180,9 @@ function ImageField({
68168
68180
  onSubmit,
68169
68181
  registerPatchCallback
68170
68182
  }) {
68171
- const [data, setData] = reactExports.useState(null);
68183
+ const [data, setData] = reactExports.useState(
68184
+ null
68185
+ );
68172
68186
  const [loading, setLoading] = reactExports.useState(false);
68173
68187
  const [metadata, setMetadata] = reactExports.useState();
68174
68188
  const [url, setUrl] = reactExports.useState();
@@ -68178,13 +68192,18 @@ function ImageField({
68178
68192
  reactExports.useEffect(() => {
68179
68193
  if (registerPatchCallback) {
68180
68194
  registerPatchCallback(async (path2) => {
68181
- return createImagePatch(path2, data, metadata, defaultValue);
68195
+ return createImagePatch(
68196
+ path2,
68197
+ (data == null ? void 0 : data.src) ?? null,
68198
+ (data == null ? void 0 : data.filename) ?? null,
68199
+ metadata
68200
+ );
68182
68201
  });
68183
68202
  }
68184
68203
  }, [data, defaultValue]);
68185
68204
  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "max-w-4xl p-4", children: [
68186
68205
  /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { htmlFor: `img_input:${path}`, className: "", children: [
68187
- data || url ? /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: data || url }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: "Empty" }),
68206
+ data || url ? /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: (data == null ? void 0 : data.src) || url }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: "Empty" }),
68188
68207
  /* @__PURE__ */ jsxRuntimeExports.jsx(
68189
68208
  "input",
68190
68209
  {
@@ -68193,7 +68212,7 @@ function ImageField({
68193
68212
  hidden: true,
68194
68213
  onChange: (ev) => {
68195
68214
  readImage(ev).then((res) => {
68196
- setData(res.src);
68215
+ setData({ src: res.src, filename: res.filename });
68197
68216
  if (res.width && res.height) {
68198
68217
  setMetadata({
68199
68218
  sha256: res.sha256,
@@ -68219,7 +68238,14 @@ function ImageField({
68219
68238
  onClick: () => {
68220
68239
  setLoading(true);
68221
68240
  onSubmit(
68222
- (path2) => createImagePatch(path2, data, metadata, defaultValue)
68241
+ (path2) => Promise.resolve(
68242
+ createImagePatch(
68243
+ path2,
68244
+ data.src,
68245
+ data.filename ?? null,
68246
+ metadata
68247
+ )
68248
+ )
68223
68249
  ).finally(() => {
68224
68250
  setLoading(false);
68225
68251
  setData(null);