@valbuild/ui 0.46.0 → 0.46.1

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.
@@ -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-yY5yCkWt.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>
@@ -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]",
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,7 @@ 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("div", { className: "truncate max-w-[300px]", title: path, dir: "rtl", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Path, { children: path }) }),
77393
77407
  /* @__PURE__ */ jsxRuntimeExports.jsx(
77394
77408
  ValList,
77395
77409
  {
@@ -77416,7 +77430,7 @@ function AnyVal({
77416
77430
  ] });
77417
77431
  }
77418
77432
  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
77419
- field ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-left", children: field }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Path, { children: path }),
77433
+ field ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-left", children: field }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "truncate max-w-[300px]", title: path, dir: "rtl", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Path, { children: path }) }),
77420
77434
  /* @__PURE__ */ jsxRuntimeExports.jsx(
77421
77435
  ValRecord,
77422
77436
  {
@@ -77432,6 +77446,7 @@ function AnyVal({
77432
77446
  return /* @__PURE__ */ jsxRuntimeExports.jsx(
77433
77447
  ValTaggedUnion,
77434
77448
  {
77449
+ field,
77435
77450
  tag: schema.key,
77436
77451
  source,
77437
77452
  path,
@@ -77446,7 +77461,7 @@ function AnyVal({
77446
77461
  return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {});
77447
77462
  }
77448
77463
  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 }),
77464
+ field ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-left", children: field }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "truncate max-w-[300px]", title: path, dir: "rtl", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Path, { children: path }) }),
77450
77465
  /* @__PURE__ */ jsxRuntimeExports.jsx(
77451
77466
  ValFormField,
77452
77467
  {
@@ -77461,6 +77476,7 @@ function AnyVal({
77461
77476
  }
77462
77477
  function ValTaggedUnion({
77463
77478
  tag,
77479
+ field,
77464
77480
  path,
77465
77481
  source,
77466
77482
  schema,
@@ -77498,6 +77514,8 @@ function ValTaggedUnion({
77498
77514
  });
77499
77515
  if (sourceKey && typeof sourceKey === "string" && unionSchema) {
77500
77516
  setCurrent({ source, schema: unionSchema });
77517
+ } else if (unionSchema) {
77518
+ setCurrent({ schema: unionSchema });
77501
77519
  } else {
77502
77520
  console.error(
77503
77521
  "Could not find source or schema of key",
@@ -77508,22 +77526,24 @@ function ValTaggedUnion({
77508
77526
  setCurrent(null);
77509
77527
  }
77510
77528
  }
77511
- }, [currentKey, source, schema, keys]);
77529
+ }, [currentKey, source, tag, schema, keys]);
77512
77530
  if (keys.length !== schema.items.length) {
77513
77531
  console.warn("Not all items have tag:", tag);
77514
77532
  }
77515
77533
  const loading = false;
77534
+ const onSubmit = initOnSubmit(path);
77516
77535
  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
77517
- "div",
77536
+ FieldContainer,
77518
77537
  {
77519
- className: classNames("flex flex-col gap-y-8", {
77538
+ className: classNames("flex flex-col gap-y-4", {
77520
77539
  "border-l-2 border-border pl-6": !top
77521
77540
  }),
77522
77541
  children: [
77542
+ field ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-left", children: field }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "truncate max-w-[300px]", title: path, dir: "rtl", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Path, { children: path }) }),
77523
77543
  /* @__PURE__ */ jsxRuntimeExports.jsxs(
77524
77544
  Select,
77525
77545
  {
77526
- defaultValue: currentKey ?? void 0,
77546
+ value: currentKey ?? void 0,
77527
77547
  disabled: loading,
77528
77548
  onValueChange: (key) => {
77529
77549
  setCurrentKey(key);
@@ -77534,11 +77554,19 @@ function ValTaggedUnion({
77534
77554
  ]
77535
77555
  }
77536
77556
  ),
77557
+ /* @__PURE__ */ jsxRuntimeExports.jsx(
77558
+ SubmitButton,
77559
+ {
77560
+ loading,
77561
+ enabled: false,
77562
+ onClick: () => onSubmit(async () => [])
77563
+ }
77564
+ ),
77537
77565
  current && /* @__PURE__ */ jsxRuntimeExports.jsx(
77538
77566
  AnyVal,
77539
77567
  {
77540
77568
  path,
77541
- source: current.source,
77569
+ source: current.source ?? null,
77542
77570
  schema: current.schema,
77543
77571
  setSelectedPath,
77544
77572
  initOnSubmit,
@@ -77561,7 +77589,7 @@ function ValObject({
77561
77589
  return /* @__PURE__ */ jsxRuntimeExports.jsx(
77562
77590
  "div",
77563
77591
  {
77564
- className: classNames("flex flex-col gap-y-8", {
77592
+ className: classNames("flex flex-col gap-y-1", {
77565
77593
  "border-l-2 border-border pl-6": !top
77566
77594
  }),
77567
77595
  children: Object.entries(schema.items).map(([key, property]) => {
@@ -77654,7 +77682,7 @@ function ValList({
77654
77682
  setSelectedPath
77655
77683
  }) {
77656
77684
  const navigate = useNavigate();
77657
- return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col gap-4 p-2", children: source.map((item, index2) => {
77685
+ return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col gap-4 p-2 pb-8", children: source.map((item, index2) => {
77658
77686
  const subPath = createValPathOfItem(path, index2);
77659
77687
  return /* @__PURE__ */ jsxRuntimeExports.jsx(
77660
77688
  "button",
@@ -77893,9 +77921,10 @@ function ValOptional({
77893
77921
  field
77894
77922
  }) {
77895
77923
  const [enable, setEnable] = reactExports.useState(source !== null);
77924
+ const { editMode } = useValOverlayContext();
77896
77925
  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-y-2", children: [
77897
77926
  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-start gap-x-4", children: [
77898
- /* @__PURE__ */ jsxRuntimeExports.jsx(
77927
+ editMode === "full" && /* @__PURE__ */ jsxRuntimeExports.jsx(
77899
77928
  Switch,
77900
77929
  {
77901
77930
  checked: enable,
@@ -77904,7 +77933,7 @@ function ValOptional({
77904
77933
  }
77905
77934
  }
77906
77935
  ),
77907
- /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: field ? field : /* @__PURE__ */ jsxRuntimeExports.jsx(Path, { children: path }) })
77936
+ /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "truncate max-w-[300px]", title: path, dir: "rtl", children: field ? field : /* @__PURE__ */ jsxRuntimeExports.jsx(Path, { children: path }) })
77908
77937
  ] }),
77909
77938
  enable && /* @__PURE__ */ jsxRuntimeExports.jsx(
77910
77939
  ValDefaultOf,
@@ -78003,7 +78032,7 @@ function PathTree({
78003
78032
  const selectedModuleId = selectedPath && Internal.splitModuleIdAndModulePath(selectedPath)[0];
78004
78033
  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col w-full py-2 text-xs", children: Object.entries(tree).map(([dir, files]) => {
78005
78034
  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 }) }),
78035
+ dir && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-bold truncate max-w-[300px]", title: dir, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Path, { children: dir }) }),
78007
78036
  /* @__PURE__ */ jsxRuntimeExports.jsx(
78008
78037
  "div",
78009
78038
  {