@valbuild/ui 0.46.0 → 0.47.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 (11) hide show
  1. package/dist/valbuild-ui.cjs.js +176 -99
  2. package/dist/valbuild-ui.esm.js +176 -99
  3. package/package.json +3 -3
  4. package/server/.tmp/assets/index-0Qeyj20F.css +1 -0
  5. package/server/.tmp/assets/{index-k8iMLNYr.js → index-8U9B2Ocg.js} +52 -52
  6. package/server/.tmp/index.html +2 -2
  7. package/server/dist/valbuild-ui-main.cjs.js +172 -96
  8. package/server/dist/valbuild-ui-main.esm.js +172 -96
  9. package/server/dist/valbuild-ui-server.cjs.js +1 -1
  10. package/server/dist/valbuild-ui-server.esm.js +1 -1
  11. package/server/.tmp/assets/index-gPuJOraZ.css +0 -1
package/server/.tmp/index.html CHANGED
@@ -4,8 +4,8 @@
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" crossorigin src="/api/val/static/assets/index-k8iMLNYr.js"></script>
8
- <link rel="stylesheet" crossorigin href="/api/val/static/assets/index-gPuJOraZ.css">
7
+ <script type="module" crossorigin src="/api/val/static/assets/index-8U9B2Ocg.js"></script>
8
+ <link rel="stylesheet" crossorigin href="/api/val/static/assets/index-0Qeyj20F.css">
9
9
  </head>
10
10
  <body>
11
11
  <div id="root"></div>
package/server/dist/valbuild-ui-main.cjs.js CHANGED
@@ -72890,86 +72890,88 @@ function ImageField({
72890
72890
  }
72891
72891
  }, [hotspot, defaultValue]);
72892
72892
  return /* @__PURE__ */ jsxRuntimeExports.jsxs(FieldContainer, { children: [
72893
- /* @__PURE__ */ jsxRuntimeExports.jsx(
72894
- "div",
72895
- {
72896
- 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",
72897
- children: data || url ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative", children: [
72898
- hotspot && /* @__PURE__ */ jsxRuntimeExports.jsx(
72899
- "div",
72900
- {
72901
- className: "rounded-full h-[12px] w-[12px] bg-background mix-blend-difference border-accent border-2 absolute pointer-events-none",
72902
- style: {
72903
- top: `${hotspot.y * 100}%`,
72904
- left: `${hotspot.x * 100}%`
72905
- }
72906
- }
72907
- ),
72908
- /* @__PURE__ */ jsxRuntimeExports.jsx(
72909
- "img",
72910
- {
72911
- src: (data == null ? void 0 : data.src) || url,
72912
- draggable: false,
72913
- className: "w-full",
72914
- style: {
72915
- cursor: "crosshair"
72916
- },
72917
- onClick: (ev) => {
72918
- const { width, height, left, top } = ev.currentTarget.getBoundingClientRect();
72919
- const hotspotX = (ev.clientX - 6 - left) / width;
72920
- const hotspotY = (ev.clientY - 6 - top) / height;
72921
- setHotspot({
72922
- x: hotspotX,
72923
- y: hotspotY,
72924
- width: 1,
72925
- height: 1
72926
- });
72927
- }
72928
- }
72929
- )
72930
- ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: "Select image below" })
72931
- },
72932
- path
72933
- ),
72934
- /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "w-full p-4 border border-t-0 rounded-b-sm bg-background border-input", children: [
72893
+ /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "w-fit", children: [
72935
72894
  /* @__PURE__ */ jsxRuntimeExports.jsx(
72936
- "label",
72895
+ "div",
72937
72896
  {
72938
- htmlFor: `img_input:${path}`,
72939
- className: "block w-full px-1 py-2 text-sm text-center rounded-md cursor-pointer bg-primary text-background",
72940
- children: "Update"
72941
- }
72897
+ 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",
72898
+ children: data || url ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative", children: [
72899
+ hotspot && /* @__PURE__ */ jsxRuntimeExports.jsx(
72900
+ "div",
72901
+ {
72902
+ className: "rounded-full h-[12px] w-[12px] bg-background mix-blend-difference border-accent border-2 absolute pointer-events-none",
72903
+ style: {
72904
+ top: `${hotspot.y * 100}%`,
72905
+ left: `${hotspot.x * 100}%`
72906
+ }
72907
+ }
72908
+ ),
72909
+ /* @__PURE__ */ jsxRuntimeExports.jsx(
72910
+ "img",
72911
+ {
72912
+ src: (data == null ? void 0 : data.src) || url,
72913
+ draggable: false,
72914
+ className: "object-contain w-full max-h-[500px]",
72915
+ style: {
72916
+ cursor: "crosshair"
72917
+ },
72918
+ onClick: (ev) => {
72919
+ const { width, height, left, top } = ev.currentTarget.getBoundingClientRect();
72920
+ const hotspotX = (ev.clientX - 6 - left) / width;
72921
+ const hotspotY = (ev.clientY - 6 - top) / height;
72922
+ setHotspot({
72923
+ x: hotspotX,
72924
+ y: hotspotY,
72925
+ width: 1,
72926
+ height: 1
72927
+ });
72928
+ }
72929
+ }
72930
+ )
72931
+ ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: "Select image below" })
72932
+ },
72933
+ path
72942
72934
  ),
72943
- /* @__PURE__ */ jsxRuntimeExports.jsx(
72944
- "input",
72945
- {
72946
- hidden: true,
72947
- id: `img_input:${path}`,
72948
- type: "file",
72949
- onChange: (ev) => {
72950
- readImage(ev).then((res) => {
72951
- setData({ src: res.src, filename: res.filename });
72952
- if (res.width && res.height && res.mimeType) {
72953
- setMetadata({
72954
- sha256: res.sha256,
72955
- width: res.width,
72956
- height: res.height,
72957
- mimeType: res.mimeType,
72958
- hotspot
72959
- });
72960
- } else {
72961
- setMetadata(void 0);
72935
+ /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "p-4 border border-t-0 rounded-b-sm bg-background border-input", children: [
72936
+ /* @__PURE__ */ jsxRuntimeExports.jsx(
72937
+ "label",
72938
+ {
72939
+ htmlFor: `img_input:${path}`,
72940
+ className: "block px-1 py-2 text-sm text-center rounded-md cursor-pointer bg-primary text-background",
72941
+ children: "Update"
72942
+ }
72943
+ ),
72944
+ /* @__PURE__ */ jsxRuntimeExports.jsx(
72945
+ "input",
72946
+ {
72947
+ hidden: true,
72948
+ id: `img_input:${path}`,
72949
+ type: "file",
72950
+ onChange: (ev) => {
72951
+ readImage(ev).then((res) => {
72952
+ setData({ src: res.src, filename: res.filename });
72953
+ if (res.width && res.height && res.mimeType) {
72954
+ setMetadata({
72955
+ sha256: res.sha256,
72956
+ width: res.width,
72957
+ height: res.height,
72958
+ mimeType: res.mimeType,
72959
+ hotspot
72960
+ });
72961
+ } else {
72962
+ setMetadata(void 0);
72963
+ setHotspot(void 0);
72964
+ }
72965
+ }).catch((err2) => {
72966
+ console.error(err2.message);
72967
+ setData(null);
72962
72968
  setHotspot(void 0);
72963
- }
72964
- }).catch((err2) => {
72965
- console.error(err2.message);
72966
- setData(null);
72967
- setHotspot(void 0);
72968
- setMetadata(void 0);
72969
- });
72969
+ setMetadata(void 0);
72970
+ });
72971
+ }
72970
72972
  }
72971
- }
72972
- )
72973
+ )
72974
+ ] })
72973
72975
  ] }),
72974
72976
  onSubmit && /* @__PURE__ */ jsxRuntimeExports.jsx(
72975
72977
  SubmitButton,
@@ -73325,10 +73327,13 @@ function StringField({
73325
73327
  ] });
73326
73328
  }
73327
73329
  function InlineValidationErrors({ errors }) {
73328
- 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)) });
73330
+ 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)) });
73329
73331
  }
73330
- function FieldContainer({ children }) {
73331
- return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "relative p-4", children });
73332
+ function FieldContainer({
73333
+ children,
73334
+ className: className2
73335
+ }) {
73336
+ return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: classNames("relative max-w-lg px-4 pt-4", className2), children });
73332
73337
  }
73333
73338
  function SubmitButton({
73334
73339
  loading,
@@ -73338,9 +73343,10 @@ function SubmitButton({
73338
73343
  }) {
73339
73344
  const { session } = useValOverlayContext();
73340
73345
  const isProxy = session.status === "success" && session.data.mode === "proxy";
73341
- 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: [
73342
- validationErrors ? /* @__PURE__ */ jsxRuntimeExports.jsx(InlineValidationErrors, { errors: validationErrors || [] }) : /* @__PURE__ */ jsxRuntimeExports.jsx("span", {}),
73343
- /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { disabled: loading || !enabled, onClick, children: loading ? isProxy ? "Staging..." : "Saving..." : isProxy ? "Stage" : "Save" })
73346
+ 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: [
73347
+ /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { disabled: loading || !enabled, onClick, children: loading ? isProxy ? "Staging..." : "Saving..." : isProxy ? "Stage" : "Save" }),
73348
+ " ",
73349
+ validationErrors ? /* @__PURE__ */ jsxRuntimeExports.jsx(InlineValidationErrors, { errors: validationErrors || [] }) : /* @__PURE__ */ jsxRuntimeExports.jsx("span", {})
73344
73350
  ] }) });
73345
73351
  }
73346
73352
  const Logo = ({ className: className2 }) => {
@@ -77266,10 +77272,18 @@ Showing stack trace of: 1. ${fatalErrors[0].message}`;
77266
77272
  children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronLeft, {})
77267
77273
  }
77268
77274
  ),
77269
- /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(Path, { children: selectedPath || "/" }) })
77275
+ /* @__PURE__ */ jsxRuntimeExports.jsx(
77276
+ "div",
77277
+ {
77278
+ className: "truncate max-w-[300px] text-left",
77279
+ dir: "rtl",
77280
+ title: selectedPath,
77281
+ children: /* @__PURE__ */ jsxRuntimeExports.jsx(Path, { children: selectedPath || "/" })
77282
+ }
77283
+ )
77270
77284
  ] }),
77271
77285
  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "p-4", children: [
77272
- error && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "p-4 text-lg bg-destructive text-destructive-foreground max-w-xl", children: [
77286
+ error && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "max-w-xl p-4 text-lg bg-destructive text-destructive-foreground", children: [
77273
77287
  "ERROR: ",
77274
77288
  error
77275
77289
  ] }),
@@ -77389,7 +77403,15 @@ function AnyVal({
77389
77403
  ] });
77390
77404
  }
77391
77405
  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
77392
- field ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-left", children: field }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Path, { children: path }),
77406
+ field ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-left", children: field }) : /* @__PURE__ */ jsxRuntimeExports.jsx(
77407
+ "div",
77408
+ {
77409
+ className: "truncate max-w-[300px] text-left",
77410
+ title: path,
77411
+ dir: "rtl",
77412
+ children: /* @__PURE__ */ jsxRuntimeExports.jsx(Path, { children: path })
77413
+ }
77414
+ ),
77393
77415
  /* @__PURE__ */ jsxRuntimeExports.jsx(
77394
77416
  ValList,
77395
77417
  {
@@ -77416,7 +77438,15 @@ function AnyVal({
77416
77438
  ] });
77417
77439
  }
77418
77440
  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
77419
- field ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-left", children: field }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Path, { children: path }),
77441
+ field ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-left", children: field }) : /* @__PURE__ */ jsxRuntimeExports.jsx(
77442
+ "div",
77443
+ {
77444
+ className: "truncate max-w-[300px] text-left",
77445
+ title: path,
77446
+ dir: "rtl",
77447
+ children: /* @__PURE__ */ jsxRuntimeExports.jsx(Path, { children: path })
77448
+ }
77449
+ ),
77420
77450
  /* @__PURE__ */ jsxRuntimeExports.jsx(
77421
77451
  ValRecord,
77422
77452
  {
@@ -77432,6 +77462,7 @@ function AnyVal({
77432
77462
  return /* @__PURE__ */ jsxRuntimeExports.jsx(
77433
77463
  ValTaggedUnion,
77434
77464
  {
77465
+ field,
77435
77466
  tag: schema.key,
77436
77467
  source,
77437
77468
  path,
@@ -77446,7 +77477,15 @@ function AnyVal({
77446
77477
  return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {});
77447
77478
  }
77448
77479
  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "py-2 gap-y-4", children: [
77449
- field ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-left", children: field }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Path, { children: path }),
77480
+ field ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-left", children: field }) : /* @__PURE__ */ jsxRuntimeExports.jsx(
77481
+ "div",
77482
+ {
77483
+ className: "truncate max-w-[300px] text-left",
77484
+ title: path,
77485
+ dir: "rtl",
77486
+ children: /* @__PURE__ */ jsxRuntimeExports.jsx(Path, { children: path })
77487
+ }
77488
+ ),
77450
77489
  /* @__PURE__ */ jsxRuntimeExports.jsx(
77451
77490
  ValFormField,
77452
77491
  {
@@ -77461,6 +77500,7 @@ function AnyVal({
77461
77500
  }
77462
77501
  function ValTaggedUnion({
77463
77502
  tag,
77503
+ field,
77464
77504
  path,
77465
77505
  source,
77466
77506
  schema,
@@ -77498,6 +77538,8 @@ function ValTaggedUnion({
77498
77538
  });
77499
77539
  if (sourceKey && typeof sourceKey === "string" && unionSchema) {
77500
77540
  setCurrent({ source, schema: unionSchema });
77541
+ } else if (unionSchema) {
77542
+ setCurrent({ schema: unionSchema });
77501
77543
  } else {
77502
77544
  console.error(
77503
77545
  "Could not find source or schema of key",
@@ -77508,22 +77550,32 @@ function ValTaggedUnion({
77508
77550
  setCurrent(null);
77509
77551
  }
77510
77552
  }
77511
- }, [currentKey, source, schema, keys]);
77553
+ }, [currentKey, source, tag, schema, keys]);
77512
77554
  if (keys.length !== schema.items.length) {
77513
77555
  console.warn("Not all items have tag:", tag);
77514
77556
  }
77515
77557
  const loading = false;
77558
+ const onSubmit = initOnSubmit(path);
77516
77559
  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
77517
- "div",
77560
+ FieldContainer,
77518
77561
  {
77519
- className: classNames("flex flex-col gap-y-8", {
77562
+ className: classNames("flex flex-col gap-y-4", {
77520
77563
  "border-l-2 border-border pl-6": !top
77521
77564
  }),
77522
77565
  children: [
77566
+ field ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-left", children: field }) : /* @__PURE__ */ jsxRuntimeExports.jsx(
77567
+ "div",
77568
+ {
77569
+ className: "truncate max-w-[300px] text-left",
77570
+ title: path,
77571
+ dir: "rtl",
77572
+ children: /* @__PURE__ */ jsxRuntimeExports.jsx(Path, { children: path })
77573
+ }
77574
+ ),
77523
77575
  /* @__PURE__ */ jsxRuntimeExports.jsxs(
77524
77576
  Select,
77525
77577
  {
77526
- defaultValue: currentKey ?? void 0,
77578
+ value: currentKey ?? void 0,
77527
77579
  disabled: loading,
77528
77580
  onValueChange: (key) => {
77529
77581
  setCurrentKey(key);
@@ -77534,11 +77586,19 @@ function ValTaggedUnion({
77534
77586
  ]
77535
77587
  }
77536
77588
  ),
77589
+ /* @__PURE__ */ jsxRuntimeExports.jsx(
77590
+ SubmitButton,
77591
+ {
77592
+ loading,
77593
+ enabled: false,
77594
+ onClick: () => onSubmit(async () => [])
77595
+ }
77596
+ ),
77537
77597
  current && /* @__PURE__ */ jsxRuntimeExports.jsx(
77538
77598
  AnyVal,
77539
77599
  {
77540
77600
  path,
77541
- source: current.source,
77601
+ source: current.source ?? null,
77542
77602
  schema: current.schema,
77543
77603
  setSelectedPath,
77544
77604
  initOnSubmit,
@@ -77561,7 +77621,7 @@ function ValObject({
77561
77621
  return /* @__PURE__ */ jsxRuntimeExports.jsx(
77562
77622
  "div",
77563
77623
  {
77564
- className: classNames("flex flex-col gap-y-8", {
77624
+ className: classNames("flex flex-col gap-y-1", {
77565
77625
  "border-l-2 border-border pl-6": !top
77566
77626
  }),
77567
77627
  children: Object.entries(schema.items).map(([key, property]) => {
@@ -77654,7 +77714,7 @@ function ValList({
77654
77714
  setSelectedPath
77655
77715
  }) {
77656
77716
  const navigate = useNavigate();
77657
- return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col gap-4 p-2", children: source.map((item, index2) => {
77717
+ return /* @__PURE__ */ jsxRuntimeExports.jsx(FieldContainer, { className: "flex flex-col gap-4 p-2 pb-8", children: source.map((item, index2) => {
77658
77718
  const subPath = createValPathOfItem(path, index2);
77659
77719
  return /* @__PURE__ */ jsxRuntimeExports.jsx(
77660
77720
  "button",
@@ -77893,9 +77953,10 @@ function ValOptional({
77893
77953
  field
77894
77954
  }) {
77895
77955
  const [enable, setEnable] = reactExports.useState(source !== null);
77956
+ const { editMode } = useValOverlayContext();
77896
77957
  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-y-2", children: [
77897
77958
  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-start gap-x-4", children: [
77898
- /* @__PURE__ */ jsxRuntimeExports.jsx(
77959
+ editMode === "full" && /* @__PURE__ */ jsxRuntimeExports.jsx(
77899
77960
  Switch,
77900
77961
  {
77901
77962
  checked: enable,
@@ -77904,7 +77965,15 @@ function ValOptional({
77904
77965
  }
77905
77966
  }
77906
77967
  ),
77907
- /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: field ? field : /* @__PURE__ */ jsxRuntimeExports.jsx(Path, { children: path }) })
77968
+ /* @__PURE__ */ jsxRuntimeExports.jsx(
77969
+ "div",
77970
+ {
77971
+ className: "truncate max-w-[300px] text-left",
77972
+ title: path,
77973
+ dir: "rtl",
77974
+ children: field ? field : /* @__PURE__ */ jsxRuntimeExports.jsx(Path, { children: path })
77975
+ }
77976
+ )
77908
77977
  ] }),
77909
77978
  enable && /* @__PURE__ */ jsxRuntimeExports.jsx(
77910
77979
  ValDefaultOf,
@@ -78003,7 +78072,14 @@ function PathTree({
78003
78072
  const selectedModuleId = selectedPath && Internal.splitModuleIdAndModulePath(selectedPath)[0];
78004
78073
  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col w-full py-2 text-xs", children: Object.entries(tree).map(([dir, files]) => {
78005
78074
  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "px-4 py-2", children: [
78006
- dir && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-bold", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Path, { children: dir }) }),
78075
+ dir && /* @__PURE__ */ jsxRuntimeExports.jsx(
78076
+ "div",
78077
+ {
78078
+ className: "font-bold truncate max-w-[300px] text-left",
78079
+ title: dir,
78080
+ children: /* @__PURE__ */ jsxRuntimeExports.jsx(Path, { children: dir })
78081
+ }
78082
+ ),
78007
78083
  /* @__PURE__ */ jsxRuntimeExports.jsx(
78008
78084
  "div",
78009
78085
  {