@dxos/react-ui-form 0.8.1-staging.5be625a → 0.8.1-staging.97aedb1

package/dist/lib/node/index.cjs

@@ -29,6 +29,13 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var node_exports = {};
 __export(node_exports, {
   BooleanInput: () => BooleanInput,
+  ControlFrame: () => ControlFrame,
+  ControlFrameItem: () => ControlFrameItem,
+  ControlGroup: () => ControlGroup,
+  ControlItem: () => ControlItem,
+  ControlItemInput: () => ControlItemInput,
+  ControlSection: () => ControlSection,
+  ControlSectionHeading: () => ControlSectionHeading,
   DeprecatedFormContainer: () => DeprecatedFormContainer,
   DeprecatedFormInput: () => DeprecatedFormInput,
   FieldEditor: () => FieldEditor,
@@ -44,7 +51,7 @@ __export(node_exports, {
   TupleInput: () => TupleInput,
   ViewEditor: () => ViewEditor,
   cellClassesForFieldType: () => cellClassesForFieldType,
-  cellClassesForRowSelection: () => cellClassesForRowSelection,
+  controlItemClasses: () => controlItemClasses,
   formatForDisplay: () => formatForDisplay,
   formatForEditing: () => formatForEditing,
   parseValue: () => parseValue,
@@ -60,40 +67,42 @@ var import_react = __toESM(require("react"));
 var import_react_ui = require("@dxos/react-ui");
 var import_react_ui_theme = require("@dxos/react-ui-theme");
 var import_react2 = __toESM(require("react"));
-var import_echo_schema = require("@dxos/echo-schema");
-var import_log = require("@dxos/log");
 var import_react_ui2 = require("@dxos/react-ui");
-var import_schema = require("@dxos/schema");
 var import_react3 = __toESM(require("react"));
-var import_echo_schema2 = require("@dxos/echo-schema");
+var import_echo_schema = require("@dxos/echo-schema");
+var import_log = require("@dxos/log");
 var import_react_ui3 = require("@dxos/react-ui");
-var import_util = require("@dxos/util");
+var import_schema = require("@dxos/schema");
 var import_react4 = __toESM(require("react"));
+var import_echo_schema2 = require("@dxos/echo-schema");
 var import_react_ui4 = require("@dxos/react-ui");
-var import_react_ui_theme2 = require("@dxos/react-ui-theme");
+var import_util = require("@dxos/util");
 var import_react5 = __toESM(require("react"));
-var import_keys = require("@dxos/keys");
 var import_react_ui5 = require("@dxos/react-ui");
+var import_react_ui_theme2 = require("@dxos/react-ui-theme");
+var import_react6 = __toESM(require("react"));
+var import_keys = require("@dxos/keys");
+var import_react_ui6 = require("@dxos/react-ui");
 var import_react_ui_list = require("@dxos/react-ui-list");
 var import_react_ui_pickers = require("@dxos/react-ui-pickers");
 var import_react_ui_theme3 = require("@dxos/react-ui-theme");
-var import_react6 = __toESM(require("react"));
-var import_react_ui6 = require("@dxos/react-ui");
-var import_react_ui_theme4 = require("@dxos/react-ui-theme");
-var import_util2 = require("@dxos/util");
 var import_react7 = __toESM(require("react"));
 var import_react_ui7 = require("@dxos/react-ui");
+var import_react_ui_theme4 = require("@dxos/react-ui-theme");
+var import_util2 = require("@dxos/util");
 var import_react8 = __toESM(require("react"));
-var import_react_ui_theme5 = require("@dxos/react-ui-theme");
-var import_react9 = __toESM(require("react"));
 var import_react_ui8 = require("@dxos/react-ui");
-var import_react_ui_theme6 = require("@dxos/react-ui-theme");
+var import_react9 = __toESM(require("react"));
+var import_react_ui_theme5 = require("@dxos/react-ui-theme");
 var import_react10 = __toESM(require("react"));
+var import_react_ui9 = require("@dxos/react-ui");
+var import_react_ui_theme6 = require("@dxos/react-ui-theme");
+var import_react11 = __toESM(require("react"));
 var import_debug = require("@dxos/debug");
 var import_echo_schema3 = require("@dxos/echo-schema");
 var import_effect = require("@dxos/effect");
 var import_effect2 = require("effect");
-var import_react11 = require("react");
+var import_react12 = require("react");
 var import_echo_schema4 = require("@dxos/echo-schema");
 var import_effect3 = require("@dxos/effect");
 var import_invariant = require("@dxos/invariant");
@@ -101,7 +110,7 @@ var import_log2 = require("@dxos/log");
 var import_schema2 = require("@dxos/schema");
 var import_effect4 = require("effect");
 var import_String = require("effect/String");
-var import_react12 = __toESM(require("react"));
+var import_react13 = __toESM(require("react"));
 var import_echo_schema5 = require("@dxos/echo-schema");
 var import_effect5 = require("@dxos/effect");
 var import_react_ui_theme7 = require("@dxos/react-ui-theme");
@@ -109,22 +118,23 @@ var import_schema3 = require("@dxos/schema");
 var import_util3 = require("@dxos/util");
 var import_effect6 = require("effect");
 var import_String2 = require("effect/String");
-var import_react13 = __toESM(require("react"));
+var import_react14 = __toESM(require("react"));
 var import_echo_schema6 = require("@dxos/echo-schema");
 var import_effect7 = require("@dxos/effect");
 var import_invariant2 = require("@dxos/invariant");
-var import_react_ui9 = require("@dxos/react-ui");
+var import_react_ui10 = require("@dxos/react-ui");
 var import_react_ui_theme8 = require("@dxos/react-ui-theme");
 var import_schema4 = require("@dxos/schema");
 var import_echo_schema7 = require("@dxos/echo-schema");
-var import_react14 = __toESM(require("react"));
+var import_react15 = __toESM(require("react"));
 var import_echo_schema8 = require("@dxos/echo-schema");
 var import_invariant3 = require("@dxos/invariant");
-var import_react_ui10 = require("@dxos/react-ui");
+var import_react_ui11 = require("@dxos/react-ui");
 var import_react_ui_list2 = require("@dxos/react-ui-list");
 var import_react_ui_theme9 = require("@dxos/react-ui-theme");
 var import_schema5 = require("@dxos/schema");
 var import_echo_schema9 = require("@dxos/echo-schema");
+var import_format = require("date-fns/format");
 var import_echo_schema10 = require("@dxos/echo-schema");
 var translationKey = "react-ui-form";
 var translations_default = [
@@ -220,42 +230,102 @@ var DeprecatedFormInput = ({ label, description, secondary, children }) => {
   }
   return primary;
 };
+var ControlSectionHeading = ({ title, description }) => {
+  const { t } = (0, import_react_ui2.useTranslation)(translationKey);
+  return /* @__PURE__ */ import_react2.default.createElement(import_react2.default.Fragment, null, /* @__PURE__ */ import_react2.default.createElement("h2", {
+    className: "pli-4 container-max-width text-xl mbs-6 mbe-4"
+  }, (0, import_react_ui2.toLocalizedString)(title, t)), description && /* @__PURE__ */ import_react2.default.createElement("p", {
+    className: "pli-4 mlb-4 container-max-width text-description"
+  }, (0, import_react_ui2.toLocalizedString)(description, t)));
+};
+var ControlSection = ({ title, description, children }) => {
+  return /* @__PURE__ */ import_react2.default.createElement(import_react2.default.Fragment, null, /* @__PURE__ */ import_react2.default.createElement(ControlSectionHeading, {
+    title,
+    description
+  }), children);
+};
+var ControlGroup = ({ children }) => /* @__PURE__ */ import_react2.default.createElement("div", {
+  role: "none",
+  className: "group container-max-width grid grid-cols-1 md:grid-cols-[1fr_min-content] gap-4"
+}, children);
+var ControlFrame = ({ children }) => /* @__PURE__ */ import_react2.default.createElement("div", {
+  role: "none",
+  className: "p-4 border border-separator rounded-lg container-max-width grid grid-cols-1 md:grid-cols-[1fr_1fr] gap-2 md:gap-8"
+}, children);
+var controlItemClasses = "p-4 border border-separator rounded-lg container-max-width grid md:col-span-2 grid-cols-subgrid items-center";
+var controlItemTitleClasses = "text-lg font-normal mbe-2";
+var controlItemDescriptionClasses = "text-base mlb-2 md:mbe-0 text-description";
+var ControlItem = ({ title, description, children }) => {
+  const { t } = (0, import_react_ui2.useTranslation)(translationKey);
+  return /* @__PURE__ */ import_react2.default.createElement("div", {
+    className: controlItemClasses
+  }, /* @__PURE__ */ import_react2.default.createElement("div", {
+    role: "none"
+  }, /* @__PURE__ */ import_react2.default.createElement("h3", {
+    className: controlItemTitleClasses
+  }, (0, import_react_ui2.toLocalizedString)(title, t)), description && /* @__PURE__ */ import_react2.default.createElement("p", {
+    className: controlItemDescriptionClasses
+  }, (0, import_react_ui2.toLocalizedString)(description, t))), children);
+};
+var ControlItemInput = ({ title, description, children }) => {
+  const { t } = (0, import_react_ui2.useTranslation)(translationKey);
+  return /* @__PURE__ */ import_react2.default.createElement(import_react_ui2.Input.Root, null, /* @__PURE__ */ import_react2.default.createElement("div", {
+    className: controlItemClasses
+  }, /* @__PURE__ */ import_react2.default.createElement("div", {
+    role: "none"
+  }, /* @__PURE__ */ import_react2.default.createElement(import_react_ui2.Input.Label, {
+    classNames: controlItemTitleClasses
+  }, (0, import_react_ui2.toLocalizedString)(title, t)), description && /* @__PURE__ */ import_react2.default.createElement(import_react_ui2.Input.DescriptionAndValidation, null, /* @__PURE__ */ import_react2.default.createElement(import_react_ui2.Input.Description, {
+    classNames: controlItemDescriptionClasses
+  }, (0, import_react_ui2.toLocalizedString)(description, t)))), children));
+};
+var ControlFrameItem = ({ title, description, children }) => {
+  const { t } = (0, import_react_ui2.useTranslation)(translationKey);
+  return /* @__PURE__ */ import_react2.default.createElement("div", {
+    role: "group",
+    className: "min-is-0"
+  }, /* @__PURE__ */ import_react2.default.createElement("h3", {
+    className: "text-lg mbe-2"
+  }, (0, import_react_ui2.toLocalizedString)(title, t)), description && /* @__PURE__ */ import_react2.default.createElement("p", {
+    className: "mlb-2 md:mbe-0 text-description"
+  }, (0, import_react_ui2.toLocalizedString)(description, t)), children);
+};
 var InputHeader = ({ children, error }) => {
-  return /* @__PURE__ */ import_react4.default.createElement("div", {
+  return /* @__PURE__ */ import_react5.default.createElement("div", {
     role: "none",
     className: "flex justify-between items-center mb-1"
-  }, children, error && /* @__PURE__ */ import_react4.default.createElement(import_react_ui4.Tooltip.Root, null, /* @__PURE__ */ import_react4.default.createElement(import_react_ui4.Tooltip.Trigger, {
+  }, children, error && /* @__PURE__ */ import_react5.default.createElement(import_react_ui5.Tooltip.Root, null, /* @__PURE__ */ import_react5.default.createElement(import_react_ui5.Tooltip.Trigger, {
     asChild: true
-  }, /* @__PURE__ */ import_react4.default.createElement(import_react_ui4.Icon, {
+  }, /* @__PURE__ */ import_react5.default.createElement(import_react_ui5.Icon, {
     icon: "ph--warning--regular",
     size: 4,
     classNames: import_react_ui_theme2.errorText
-  })), /* @__PURE__ */ import_react4.default.createElement(import_react_ui4.Tooltip.Content, {
+  })), /* @__PURE__ */ import_react5.default.createElement(import_react_ui5.Tooltip.Content, {
     side: "bottom"
-  }, /* @__PURE__ */ import_react4.default.createElement(import_react_ui4.Tooltip.Arrow, null), error)));
+  }, /* @__PURE__ */ import_react5.default.createElement(import_react_ui5.Tooltip.Arrow, null), error)));
 };
 var GeoPointInput = ({ type, label, disabled, getStatus, getValue: getValue3, onValueChange, onBlur }) => {
-  const { t } = (0, import_react_ui3.useTranslation)(translationKey);
+  const { t } = (0, import_react_ui4.useTranslation)(translationKey);
   const { status, error } = getStatus();
-  const geoPoint = (0, import_react3.useMemo)(() => getValue3() ?? [
+  const geoPoint = (0, import_react4.useMemo)(() => getValue3() ?? [
     0,
     0
   ], [
     getValue3
   ]);
-  const geoLocation = (0, import_react3.useMemo)(() => import_echo_schema2.GeoLocation.fromGeoPoint(geoPoint), [
+  const geoLocation = (0, import_react4.useMemo)(() => import_echo_schema2.GeoLocation.fromGeoPoint(geoPoint), [
     geoPoint
   ]);
-  const [longitudeText, setLongitudeText] = (0, import_react3.useState)(geoLocation.longitude?.toString());
-  const [latitudeText, setLatitudeText] = (0, import_react3.useState)(geoLocation.latitude?.toString());
-  (0, import_react3.useEffect)(() => {
+  const [longitudeText, setLongitudeText] = (0, import_react4.useState)(geoLocation.longitude?.toString());
+  const [latitudeText, setLatitudeText] = (0, import_react4.useState)(geoLocation.latitude?.toString());
+  (0, import_react4.useEffect)(() => {
     const location = import_echo_schema2.GeoLocation.fromGeoPoint(geoPoint);
     setLongitudeText(location.longitude.toString());
     setLatitudeText(location.latitude.toString());
   }, [
     geoPoint
   ]);
-  const handleCoordinateChange = (0, import_react3.useCallback)((coordinateType, setText) => (event) => {
+  const handleCoordinateChange = (0, import_react4.useCallback)((coordinateType, setText) => (event) => {
     const inputText = event.target.value;
     setText(inputText);
     if (inputText !== "" && inputText !== "-") {
@@ -278,14 +348,14 @@ var GeoPointInput = ({ type, label, disabled, getStatus, getValue: getValue3, on
     onValueChange,
     type
   ]);
-  return /* @__PURE__ */ import_react3.default.createElement(import_react_ui3.Input.Root, {
+  return /* @__PURE__ */ import_react4.default.createElement(import_react_ui4.Input.Root, {
     validationValence: status
-  }, /* @__PURE__ */ import_react3.default.createElement(InputHeader, {
+  }, /* @__PURE__ */ import_react4.default.createElement(InputHeader, {
     error
-  }, /* @__PURE__ */ import_react3.default.createElement(import_react_ui3.Input.Label, null, label)), /* @__PURE__ */ import_react3.default.createElement("div", {
+  }, /* @__PURE__ */ import_react4.default.createElement(import_react_ui4.Input.Label, null, label)), /* @__PURE__ */ import_react4.default.createElement("div", {
     role: "none",
     className: "grid grid-cols-2 gap-2"
-  }, /* @__PURE__ */ import_react3.default.createElement(import_react_ui3.Input.TextInput, {
+  }, /* @__PURE__ */ import_react4.default.createElement(import_react_ui4.Input.TextInput, {
     type: "text",
     pattern: "^-?[0-9]*\\.?[0-9]*$",
     disabled,
@@ -293,7 +363,7 @@ var GeoPointInput = ({ type, label, disabled, getStatus, getValue: getValue3, on
     value: latitudeText,
     onChange: handleCoordinateChange("latitude", setLatitudeText),
     onBlur
-  }), /* @__PURE__ */ import_react3.default.createElement(import_react_ui3.Input.TextInput, {
+  }), /* @__PURE__ */ import_react4.default.createElement(import_react_ui4.Input.TextInput, {
     type: "text",
     pattern: "^-?[0-9]*\\.?[0-9]*$",
     disabled,
@@ -304,13 +374,13 @@ var GeoPointInput = ({ type, label, disabled, getStatus, getValue: getValue3, on
   })));
 };
 var SelectOptionInput = ({ type, label, disabled, getStatus, getValue: getValue3, onValueChange }) => {
-  const [selected, setSelectedId] = (0, import_react5.useState)(null);
-  const [isNewOption, setIsNewOption] = (0, import_react5.useState)(false);
-  const inputRef = (0, import_react5.useRef)(null);
-  const { t } = (0, import_react_ui5.useTranslation)(translationKey);
+  const [selected, setSelectedId] = (0, import_react6.useState)(null);
+  const [isNewOption, setIsNewOption] = (0, import_react6.useState)(false);
+  const inputRef = (0, import_react6.useRef)(null);
+  const { t } = (0, import_react_ui6.useTranslation)(translationKey);
   const { status, error } = getStatus();
   const options = getValue3();
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (options === void 0) {
       onValueChange(type, []);
     }
@@ -329,7 +399,7 @@ var SelectOptionInput = ({ type, label, disabled, getStatus, getValue: getValue3
     const availableHues = import_react_ui_theme3.hues.filter((hue) => !lastThree.has(hue));
     return availableHues[Math.floor(Math.random() * availableHues.length)] ?? import_react_ui_theme3.hues[Math.floor(Math.random() * import_react_ui_theme3.hues.length)];
   };
-  const handleAdd = (0, import_react5.useCallback)(() => {
+  const handleAdd = (0, import_react6.useCallback)(() => {
     const newId = import_keys.PublicKey.random().truncate();
     const newOption = {
       id: newId,
@@ -347,7 +417,7 @@ var SelectOptionInput = ({ type, label, disabled, getStatus, getValue: getValue3
     type,
     onValueChange
   ]);
-  const handleDelete = (0, import_react5.useCallback)((id) => {
+  const handleDelete = (0, import_react6.useCallback)((id) => {
     const newOptions = options?.filter((option) => option.id !== id) ?? [];
     onValueChange(type, newOptions);
     setSelectedId(null);
@@ -356,7 +426,7 @@ var SelectOptionInput = ({ type, label, disabled, getStatus, getValue: getValue3
     type,
     onValueChange
   ]);
-  const handleMove = (0, import_react5.useCallback)((from, to) => {
+  const handleMove = (0, import_react6.useCallback)((from, to) => {
     if (!options) {
       return;
     }
@@ -371,10 +441,10 @@ var SelectOptionInput = ({ type, label, disabled, getStatus, getValue: getValue3
     type,
     onValueChange
   ]);
-  const handleClick = (0, import_react5.useCallback)((id) => {
+  const handleClick = (0, import_react6.useCallback)((id) => {
     setSelectedId((current) => current === id ? null : id);
   }, []);
-  const handleTitleChange = (0, import_react5.useCallback)((id) => (e) => {
+  const handleTitleChange = (0, import_react6.useCallback)((id) => (e) => {
     const newOptions = options?.map((o) => o.id === id ? {
       ...o,
       title: e.target.value
@@ -385,12 +455,12 @@ var SelectOptionInput = ({ type, label, disabled, getStatus, getValue: getValue3
     type,
     onValueChange
   ]);
-  const handleKeyDown = (0, import_react5.useCallback)((e) => {
+  const handleKeyDown = (0, import_react6.useCallback)((e) => {
     if (e.key === "Enter") {
       setSelectedId(null);
     }
   }, []);
-  const handleColorChange = (0, import_react5.useCallback)((id) => (hue) => {
+  const handleColorChange = (0, import_react6.useCallback)((id) => (hue) => {
     const newOptions = options?.map((o) => o.id === id ? {
       ...o,
       color: hue
@@ -401,7 +471,7 @@ var SelectOptionInput = ({ type, label, disabled, getStatus, getValue: getValue3
     type,
     onValueChange
   ]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (selected && isNewOption && inputRef.current) {
       inputRef.current.focus();
       setIsNewOption(false);
@@ -410,43 +480,43 @@ var SelectOptionInput = ({ type, label, disabled, getStatus, getValue: getValue3
     selected,
     isNewOption
   ]);
-  return /* @__PURE__ */ import_react5.default.createElement(import_react_ui5.Input.Root, {
+  return /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.Input.Root, {
     validationValence: status
-  }, /* @__PURE__ */ import_react5.default.createElement(InputHeader, {
+  }, /* @__PURE__ */ import_react6.default.createElement(InputHeader, {
     error
-  }, /* @__PURE__ */ import_react5.default.createElement(import_react_ui5.Input.Label, null, label)), /* @__PURE__ */ import_react5.default.createElement("div", {
+  }, /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.Input.Label, null, label)), /* @__PURE__ */ import_react6.default.createElement("div", {
     role: "none"
-  }, options && /* @__PURE__ */ import_react5.default.createElement(import_react_ui_list.List.Root, {
+  }, options && /* @__PURE__ */ import_react6.default.createElement(import_react_ui_list.List.Root, {
     items: options,
     isItem: (item) => true,
     onMove: handleMove
-  }, ({ items }) => /* @__PURE__ */ import_react5.default.createElement("div", {
+  }, ({ items }) => /* @__PURE__ */ import_react6.default.createElement("div", {
     role: "list",
     className: "w-full overflow-auto"
-  }, items?.map((item) => /* @__PURE__ */ import_react5.default.createElement("div", {
+  }, items?.map((item) => /* @__PURE__ */ import_react6.default.createElement("div", {
     key: item.id
-  }, /* @__PURE__ */ import_react5.default.createElement(import_react_ui_list.List.Item, {
+  }, /* @__PURE__ */ import_react6.default.createElement(import_react_ui_list.List.Item, {
     role: "button",
     item,
     classNames: (0, import_react_ui_theme3.mx)("p-1 plb-2", "flex flex-col", "cursor-pointer", "hover:bg-hoverOverlay"),
     "aria-expanded": selected === item.id
-  }, /* @__PURE__ */ import_react5.default.createElement("div", {
+  }, /* @__PURE__ */ import_react6.default.createElement("div", {
     className: "flex items-center"
-  }, /* @__PURE__ */ import_react5.default.createElement(import_react_ui_list.List.ItemDragHandle, null), /* @__PURE__ */ import_react5.default.createElement(import_react_ui_list.List.ItemTitle, {
+  }, /* @__PURE__ */ import_react6.default.createElement(import_react_ui_list.List.ItemDragHandle, null), /* @__PURE__ */ import_react6.default.createElement(import_react_ui_list.List.ItemTitle, {
     onClick: () => handleClick(item.id),
     classNames: "flex-1"
-  }, /* @__PURE__ */ import_react5.default.createElement(import_react_ui5.Tag, {
+  }, /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.Tag, {
     palette: item.color
-  }, item.title || "\u200B")), /* @__PURE__ */ import_react5.default.createElement(import_react_ui5.Icon, {
+  }, item.title || "\u200B")), /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.Icon, {
     icon: selected === item.id ? "ph--caret-down--regular" : "ph--caret-right--regular",
     onClick: () => handleClick(item.id)
-  })), selected === item.id && /* @__PURE__ */ import_react5.default.createElement("div", {
+  })), selected === item.id && /* @__PURE__ */ import_react6.default.createElement("div", {
     className: "mis-4 mbs-2 flex flex-col gap-1"
-  }, /* @__PURE__ */ import_react5.default.createElement(import_react_ui5.Input.Label, {
+  }, /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.Input.Label, {
     classNames: "text-xs"
-  }, t("select option label")), /* @__PURE__ */ import_react5.default.createElement("div", {
+  }, t("select option label")), /* @__PURE__ */ import_react6.default.createElement("div", {
     className: "flex flex-row items-center gap-1"
-  }, /* @__PURE__ */ import_react5.default.createElement(import_react_ui5.Input.TextInput, {
+  }, /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.Input.TextInput, {
     placeholder: t("select option label placeholder"),
     ref: selected === item.id ? inputRef : void 0,
     value: item.title,
@@ -454,27 +524,28 @@ var SelectOptionInput = ({ type, label, disabled, getStatus, getValue: getValue3
     onKeyDown: handleKeyDown,
     classNames: "flex-1",
     "data-no-submit": true
-  }), /* @__PURE__ */ import_react5.default.createElement(import_react_ui5.Toolbar.Root, {
+  }), /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.Toolbar.Root, {
     classNames: "p-0 m-0 !is-auto"
-  }, /* @__PURE__ */ import_react5.default.createElement(import_react_ui_pickers.HuePicker, {
+  }, /* @__PURE__ */ import_react6.default.createElement(import_react_ui_pickers.HuePicker, {
     value: item.color,
-    onChange: handleColorChange(item.id)
-  })), /* @__PURE__ */ import_react5.default.createElement(import_react_ui5.IconButton, {
+    onChange: handleColorChange(item.id),
+    rootVariant: "toolbar-button"
+  })), /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.IconButton, {
     icon: "ph--trash--fill",
     iconOnly: true,
     label: t("select option delete"),
     onClick: () => handleDelete(item.id)
-  })))))), /* @__PURE__ */ import_react5.default.createElement("div", {
+  })))))), /* @__PURE__ */ import_react6.default.createElement("div", {
     role: "listitem"
-  }, /* @__PURE__ */ import_react5.default.createElement("div", {
+  }, /* @__PURE__ */ import_react6.default.createElement("div", {
     role: "button",
     className: (0, import_react_ui_theme3.mx)("p-1 plb-2", "flex flex-col", "cursor-pointer", "hover:bg-hoverOverlay"),
     onClick: handleAdd
-  }, /* @__PURE__ */ import_react5.default.createElement("div", {
+  }, /* @__PURE__ */ import_react6.default.createElement("div", {
     className: "flex items-center gap-1"
-  }, /* @__PURE__ */ import_react5.default.createElement(import_react_ui5.Icon, {
+  }, /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.Icon, {
     icon: "ph--plus--regular"
-  }), /* @__PURE__ */ import_react5.default.createElement("span", {
+  }), /* @__PURE__ */ import_react6.default.createElement("span", {
     className: "text-sm"
   }, t("select option add")))))))));
 };
@@ -487,13 +558,13 @@ var gridCols = [
 var TupleInput = ({ binding, type, label, disabled, getStatus, getValue: getValue3, onValueChange, onBlur }) => {
   const { status, error } = getStatus();
   const values = getValue3() ?? {};
-  return /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.Input.Root, {
+  return /* @__PURE__ */ import_react7.default.createElement(import_react_ui7.Input.Root, {
     validationValence: status
-  }, /* @__PURE__ */ import_react6.default.createElement(InputHeader, {
+  }, /* @__PURE__ */ import_react7.default.createElement(InputHeader, {
     error
-  }, /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.Input.Label, null, label)), /* @__PURE__ */ import_react6.default.createElement("div", {
+  }, /* @__PURE__ */ import_react7.default.createElement(import_react_ui7.Input.Label, null, label)), /* @__PURE__ */ import_react7.default.createElement("div", {
     className: (0, import_react_ui_theme4.mx)("grid gap-2", gridCols[binding.length - 1])
-  }, binding.map((prop) => /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.Input.TextInput, {
+  }, binding.map((prop) => /* @__PURE__ */ import_react7.default.createElement(import_react_ui7.Input.TextInput, {
     key: prop,
     type: "number",
     disabled,
@@ -507,92 +578,92 @@ var TupleInput = ({ binding, type, label, disabled, getStatus, getValue: getValu
 };
 var TextInput = ({ type, label, inputOnly, disabled, placeholder, getStatus, getValue: getValue3, onValueChange, onBlur }) => {
   const { status, error } = getStatus();
-  return /* @__PURE__ */ import_react7.default.createElement(import_react_ui7.Input.Root, {
+  return /* @__PURE__ */ import_react8.default.createElement(import_react_ui8.Input.Root, {
     validationValence: status
-  }, !inputOnly && /* @__PURE__ */ import_react7.default.createElement(InputHeader, {
+  }, !inputOnly && /* @__PURE__ */ import_react8.default.createElement(InputHeader, {
     error
-  }, /* @__PURE__ */ import_react7.default.createElement(import_react_ui7.Input.Label, null, label)), /* @__PURE__ */ import_react7.default.createElement(import_react_ui7.Input.TextInput, {
+  }, /* @__PURE__ */ import_react8.default.createElement(import_react_ui8.Input.Label, null, label)), /* @__PURE__ */ import_react8.default.createElement(import_react_ui8.Input.TextInput, {
     disabled,
     placeholder,
     value: getValue3() ?? "",
     onChange: (event) => onValueChange(type, event.target.value),
     onBlur
-  }), inputOnly && /* @__PURE__ */ import_react7.default.createElement(import_react_ui7.Input.Validation, null, error));
+  }), inputOnly && /* @__PURE__ */ import_react8.default.createElement(import_react_ui8.Input.Validation, null, error));
 };
 var NumberInput = ({ type, label, inputOnly, disabled, placeholder, getStatus, getValue: getValue3, onValueChange, onBlur }) => {
   const { status, error } = getStatus();
-  return /* @__PURE__ */ import_react7.default.createElement(import_react_ui7.Input.Root, {
+  return /* @__PURE__ */ import_react8.default.createElement(import_react_ui8.Input.Root, {
     validationValence: status
-  }, !inputOnly && /* @__PURE__ */ import_react7.default.createElement(InputHeader, {
+  }, !inputOnly && /* @__PURE__ */ import_react8.default.createElement(InputHeader, {
     error
-  }, /* @__PURE__ */ import_react7.default.createElement(import_react_ui7.Input.Label, null, label)), /* @__PURE__ */ import_react7.default.createElement(import_react_ui7.Input.TextInput, {
+  }, /* @__PURE__ */ import_react8.default.createElement(import_react_ui8.Input.Label, null, label)), /* @__PURE__ */ import_react8.default.createElement(import_react_ui8.Input.TextInput, {
     type: "number",
     disabled,
     placeholder,
     value: getValue3() ?? 0,
     onChange: (event) => onValueChange(type, event.target.value),
     onBlur
-  }), inputOnly && /* @__PURE__ */ import_react7.default.createElement(import_react_ui7.Input.DescriptionAndValidation, null, error));
+  }), inputOnly && /* @__PURE__ */ import_react8.default.createElement(import_react_ui8.Input.DescriptionAndValidation, null, error));
 };
 var BooleanInput = ({ type, label, inputOnly, getStatus, getValue: getValue3, onValueChange }) => {
   const { status, error } = getStatus();
   const checked = Boolean(getValue3());
-  return /* @__PURE__ */ import_react7.default.createElement(import_react_ui7.Input.Root, {
+  return /* @__PURE__ */ import_react8.default.createElement(import_react_ui8.Input.Root, {
     validationValence: status
-  }, !inputOnly && /* @__PURE__ */ import_react7.default.createElement(InputHeader, {
+  }, !inputOnly && /* @__PURE__ */ import_react8.default.createElement(InputHeader, {
     error
-  }, /* @__PURE__ */ import_react7.default.createElement(import_react_ui7.Input.Label, null, label)), /* @__PURE__ */ import_react7.default.createElement(import_react_ui7.Input.Switch, {
+  }, /* @__PURE__ */ import_react8.default.createElement(import_react_ui8.Input.Label, null, label)), /* @__PURE__ */ import_react8.default.createElement(import_react_ui8.Input.Switch, {
     checked,
     onCheckedChange: (value) => onValueChange(type, value)
-  }), inputOnly && /* @__PURE__ */ import_react7.default.createElement(import_react_ui7.Input.DescriptionAndValidation, null, error));
+  }), inputOnly && /* @__PURE__ */ import_react8.default.createElement(import_react_ui8.Input.DescriptionAndValidation, null, error));
 };
 var SelectInput = ({ type, label, inputOnly, disabled, placeholder, options, getStatus, getValue: getValue3, onValueChange }) => {
   const { status, error } = getStatus();
-  return /* @__PURE__ */ import_react7.default.createElement(import_react_ui7.Input.Root, {
+  return /* @__PURE__ */ import_react8.default.createElement(import_react_ui8.Input.Root, {
     validationValence: status
-  }, !inputOnly && /* @__PURE__ */ import_react7.default.createElement(InputHeader, {
+  }, !inputOnly && /* @__PURE__ */ import_react8.default.createElement(InputHeader, {
     error
-  }, /* @__PURE__ */ import_react7.default.createElement(import_react_ui7.Input.Label, null, label)), /* @__PURE__ */ import_react7.default.createElement(import_react_ui7.Select.Root, {
+  }, /* @__PURE__ */ import_react8.default.createElement(import_react_ui8.Input.Label, null, label)), /* @__PURE__ */ import_react8.default.createElement(import_react_ui8.Select.Root, {
     value: getValue3(),
     onValueChange: (value) => onValueChange(type, value)
-  }, /* @__PURE__ */ import_react7.default.createElement(import_react_ui7.Select.TriggerButton, {
+  }, /* @__PURE__ */ import_react8.default.createElement(import_react_ui8.Select.TriggerButton, {
     classNames: "is-full",
     disabled,
     placeholder
-  }), /* @__PURE__ */ import_react7.default.createElement(import_react_ui7.Select.Portal, null, /* @__PURE__ */ import_react7.default.createElement(import_react_ui7.Select.Content, null, /* @__PURE__ */ import_react7.default.createElement(import_react_ui7.Select.Viewport, null, options?.map(({ value, label: label2 }) => (
+  }), /* @__PURE__ */ import_react8.default.createElement(import_react_ui8.Select.Portal, null, /* @__PURE__ */ import_react8.default.createElement(import_react_ui8.Select.Content, null, /* @__PURE__ */ import_react8.default.createElement(import_react_ui8.Select.Viewport, null, options?.map(({ value, label: label2 }) => (
     // NOTE: Numeric values are converted to and from strings.
-    /* @__PURE__ */ import_react7.default.createElement(import_react_ui7.Select.Option, {
+    /* @__PURE__ */ import_react8.default.createElement(import_react_ui8.Select.Option, {
       key: String(value),
       value: String(value)
     }, label2 ?? String(value))
-  )))))), inputOnly && /* @__PURE__ */ import_react7.default.createElement(import_react_ui7.Input.DescriptionAndValidation, null, error));
+  )))))), inputOnly && /* @__PURE__ */ import_react8.default.createElement(import_react_ui8.Input.DescriptionAndValidation, null, error));
 };
 var MarkdownInput = ({ type, label, inputOnly, disabled, placeholder, getStatus, getValue: getValue3, onValueChange, onBlur }) => {
   const { status, error } = getStatus();
-  const textareaRef = (0, import_react7.useRef)(null);
-  const adjustHeight = (0, import_react7.useCallback)(() => {
+  const textareaRef = (0, import_react8.useRef)(null);
+  const adjustHeight = (0, import_react8.useCallback)(() => {
     const textarea = textareaRef.current;
     if (textarea) {
       textarea.style.blockSize = "auto";
       textarea.style.blockSize = `${textarea.scrollHeight + 2}px`;
     }
   }, []);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     adjustHeight();
   }, [
     adjustHeight
   ]);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     adjustHeight();
   }, [
     getValue3(),
     adjustHeight
   ]);
-  return /* @__PURE__ */ import_react7.default.createElement(import_react_ui7.Input.Root, {
+  return /* @__PURE__ */ import_react8.default.createElement(import_react_ui8.Input.Root, {
     validationValence: status
-  }, !inputOnly && /* @__PURE__ */ import_react7.default.createElement(InputHeader, {
+  }, !inputOnly && /* @__PURE__ */ import_react8.default.createElement(InputHeader, {
     error
-  }, /* @__PURE__ */ import_react7.default.createElement(import_react_ui7.Input.Label, null, label)), /* @__PURE__ */ import_react7.default.createElement(import_react_ui7.Input.TextArea, {
+  }, /* @__PURE__ */ import_react8.default.createElement(import_react_ui8.Input.Label, null, label)), /* @__PURE__ */ import_react8.default.createElement(import_react_ui8.Input.TextArea, {
     ref: textareaRef,
     disabled,
     placeholder,
@@ -604,7 +675,7 @@ var MarkdownInput = ({ type, label, inputOnly, disabled, placeholder, getStatus,
       resize: "none"
     },
     spellCheck: false
-  }), inputOnly && /* @__PURE__ */ import_react7.default.createElement(import_react_ui7.Input.Validation, null, error));
+  }), inputOnly && /* @__PURE__ */ import_react8.default.createElement(import_react_ui8.Input.Validation, null, error));
 };
 var __dxlog_file = "/home/runner/work/dxos/dxos/packages/ui/react-ui-form/src/hooks/useForm.ts";
 var useForm = ({ schema, initialValues, onValuesChanged, onValidate, onValid, onSave }) => {
@@ -617,17 +688,17 @@ var useForm = ({ schema, initialValues, onValuesChanged, onValidate, onValid, on
       ""
     ]
   });
-  const [values, setValues] = (0, import_react11.useState)(initialValues);
-  (0, import_react11.useEffect)(() => {
+  const [values, setValues] = (0, import_react12.useState)(initialValues);
+  (0, import_react12.useEffect)(() => {
     setValues(initialValues);
   }, [
     initialValues
   ]);
-  const [touched, setTouched] = (0, import_react11.useState)(createKeySet(initialValues, false));
-  const [changed, setChanged] = (0, import_react11.useState)(createKeySet(initialValues, false));
-  const [errors, setErrors] = (0, import_react11.useState)({});
-  const [saving, setSaving] = (0, import_react11.useState)(false);
-  const validate = (0, import_react11.useCallback)((values2) => {
+  const [touched, setTouched] = (0, import_react12.useState)(createKeySet(initialValues, false));
+  const [changed, setChanged] = (0, import_react12.useState)(createKeySet(initialValues, false));
+  const [errors, setErrors] = (0, import_react12.useState)({});
+  const [saving, setSaving] = (0, import_react12.useState)(false);
+  const validate = (0, import_react12.useCallback)((values2) => {
     let errors2 = (0, import_schema2.validateSchema)(schema, values2) ?? [];
     if (errors2.length === 0 && onValidate) {
       const validatedValues = values2;
@@ -640,11 +711,11 @@ var useForm = ({ schema, initialValues, onValuesChanged, onValidate, onValid, on
     schema,
     onValidate
   ]);
-  const [schemaDirty, setSchemaDirty] = (0, import_react11.useState)(false);
-  (0, import_react11.useEffect)(() => setSchemaDirty(true), [
+  const [schemaDirty, setSchemaDirty] = (0, import_react12.useState)(false);
+  (0, import_react12.useEffect)(() => setSchemaDirty(true), [
     schema
   ]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     if (schemaDirty) {
       validate(values);
       setSchemaDirty(false);
@@ -653,18 +724,18 @@ var useForm = ({ schema, initialValues, onValuesChanged, onValidate, onValid, on
     values,
     schemaDirty
   ]);
-  const formIsValid = (0, import_react11.useMemo)(() => {
+  const formIsValid = (0, import_react12.useMemo)(() => {
     return Object.keys(errors).length === 0;
   }, [
     errors
   ]);
-  const canSave = (0, import_react11.useMemo)(() => !saving && // Check if any error paths that are touched have errors.
+  const canSave = (0, import_react12.useMemo)(() => !saving && // Check if any error paths that are touched have errors.
   !Object.entries(touched).some(([path, isTouched]) => isTouched && Object.keys(errors).some((errorPath) => errorPath === path || errorPath.startsWith(`${path}.`) || errorPath.startsWith(`${path}[`))), [
     touched,
     errors,
     saving
   ]);
-  const handleSave = (0, import_react11.useCallback)(async () => {
+  const handleSave = (0, import_react12.useCallback)(async () => {
     if (validate(values)) {
       setSaving(true);
       try {
@@ -681,7 +752,7 @@ var useForm = ({ schema, initialValues, onValuesChanged, onValidate, onValid, on
     onSave,
     changed
   ]);
-  const getStatus = (0, import_react11.useCallback)((path) => {
+  const getStatus = (0, import_react12.useCallback)((path) => {
     const jsonPath = Array.isArray(path) ? (0, import_effect3.createJsonPath)(path) : path;
     const matchingError = Object.entries(errors).find(([errorPath]) => errorPath === jsonPath || errorPath.startsWith(`${jsonPath}.`) || errorPath.startsWith(`${jsonPath}[`));
     const isTouched = touched[jsonPath];
@@ -699,12 +770,12 @@ var useForm = ({ schema, initialValues, onValuesChanged, onValidate, onValid, on
     errors,
     touched
   ]);
-  const getFormValue = (0, import_react11.useCallback)((path) => {
+  const getFormValue = (0, import_react12.useCallback)((path) => {
     return (0, import_echo_schema4.getValue)(values, (0, import_effect3.createJsonPath)(path));
   }, [
     values
   ]);
-  const onValueChange = (0, import_react11.useCallback)((path, type, value) => {
+  const onValueChange = (0, import_react12.useCallback)((path, type, value) => {
     const jsonPath = (0, import_effect3.createJsonPath)(path);
     let parsedValue = value;
     try {
@@ -742,7 +813,7 @@ var useForm = ({ schema, initialValues, onValuesChanged, onValidate, onValid, on
     onValid,
     changed
   ]);
-  const onTouched = (0, import_react11.useCallback)((path) => {
+  const onTouched = (0, import_react12.useCallback)((path) => {
     const jsonPath = (0, import_effect3.createJsonPath)(path);
     setTouched((touched2) => ({
       ...touched2,
@@ -753,7 +824,7 @@ var useForm = ({ schema, initialValues, onValuesChanged, onValidate, onValid, on
     validate,
     values
   ]);
-  return (0, import_react11.useMemo)(() => ({
+  return (0, import_react12.useMemo)(() => ({
     // State.
     values,
     errors,
@@ -806,9 +877,9 @@ var flatMap = (errors) => {
     return result;
   }, {});
 };
-var FormContext = /* @__PURE__ */ (0, import_react10.createContext)(void 0);
+var FormContext = /* @__PURE__ */ (0, import_react11.createContext)(void 0);
 var useFormContext = () => {
-  return (0, import_react10.useContext)(FormContext) ?? (0, import_debug.raise)(new Error("Missing FormContext"));
+  return (0, import_react11.useContext)(FormContext) ?? (0, import_debug.raise)(new Error("Missing FormContext"));
 };
 var useFormValues = (path = []) => {
   const { values: formValues } = useFormContext();
@@ -817,10 +888,10 @@ var useFormValues = (path = []) => {
 };
 var useInputProps = (path = []) => {
   const { getStatus, getValue: getFormValue, onValueChange, onTouched } = useFormContext();
-  const stablePath = (0, import_react10.useMemo)(() => path, [
+  const stablePath = (0, import_react11.useMemo)(() => path, [
     Array.isArray(path) ? path.join(".") : path
   ]);
-  return (0, import_react10.useMemo)(() => ({
+  return (0, import_react11.useMemo)(() => ({
     getStatus: () => getStatus(stablePath),
     getValue: () => getFormValue(stablePath),
     onValueChange: (type, value) => onValueChange(stablePath, type, value),
@@ -835,7 +906,7 @@ var useInputProps = (path = []) => {
 };
 var FormProvider = ({ children, formRef, autoSave, ...formOptions }) => {
   const form = useForm(formOptions);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     if (!formRef?.current) {
       return;
     }
@@ -865,25 +936,25 @@ var FormProvider = ({ children, formRef, autoSave, ...formOptions }) => {
     form.handleSave,
     autoSave
   ]);
-  return /* @__PURE__ */ import_react10.default.createElement(FormContext.Provider, {
+  return /* @__PURE__ */ import_react11.default.createElement(FormContext.Provider, {
     value: form
   }, children);
 };
 var FormActions = ({ onCancel, readonly }) => {
-  const { t } = (0, import_react_ui8.useTranslation)(translationKey);
+  const { t } = (0, import_react_ui9.useTranslation)(translationKey);
   const { canSave, handleSave } = useFormContext();
-  return /* @__PURE__ */ import_react9.default.createElement("div", {
+  return /* @__PURE__ */ import_react10.default.createElement("div", {
     role: "none",
     className: "mt-2 flex justify-center"
-  }, /* @__PURE__ */ import_react9.default.createElement("div", {
+  }, /* @__PURE__ */ import_react10.default.createElement("div", {
     role: "none",
     className: (0, import_react_ui_theme6.mx)(onCancel && !readonly && "grid grid-cols-2 gap-2")
-  }, onCancel && !readonly && /* @__PURE__ */ import_react9.default.createElement(import_react_ui8.IconButton, {
+  }, onCancel && !readonly && /* @__PURE__ */ import_react10.default.createElement(import_react_ui9.IconButton, {
     "data-testid": "cancel-button",
     icon: "ph--x--regular",
     label: t("button cancel"),
     onClick: onCancel
-  }), handleSave && /* @__PURE__ */ import_react9.default.createElement(import_react_ui8.IconButton, {
+  }), handleSave && /* @__PURE__ */ import_react10.default.createElement(import_react_ui9.IconButton, {
     type: "submit",
     "data-testid": "save-button",
     disabled: !canSave,
@@ -895,7 +966,7 @@ var FormActions = ({ onCancel, readonly }) => {
 var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-form/src/components/Form/ArrayField.tsx";
 var padding = "px-2";
 var ArrayField = ({ property, readonly, path, inputProps, Custom, lookupComponent }) => {
-  const { t } = (0, import_react_ui9.useTranslation)(translationKey);
+  const { t } = (0, import_react_ui10.useTranslation)(translationKey);
   const { ast, name, type, title } = property;
   const values = useFormValues(path ?? []);
   (0, import_invariant2.invariant)(Array.isArray(values), `Values at path ${path?.join(".")} must be an array.`, {
@@ -921,7 +992,7 @@ var ArrayField = ({ property, readonly, path, inputProps, Custom, lookupComponen
       prop.defaultValue
     ]));
   };
-  const newValue = (0, import_react13.useMemo)(() => {
+  const newValue = (0, import_react14.useMemo)(() => {
     if (type === "object" && elementType) {
       return getDefaultObjectValue(elementType);
     } else {
@@ -931,7 +1002,7 @@ var ArrayField = ({ property, readonly, path, inputProps, Custom, lookupComponen
     type,
     elementType
   ]);
-  const handleAdd = (0, import_react13.useCallback)(() => {
+  const handleAdd = (0, import_react14.useCallback)(() => {
     inputProps.onValueChange(type, [
       ...values,
       newValue
@@ -943,7 +1014,7 @@ var ArrayField = ({ property, readonly, path, inputProps, Custom, lookupComponen
     newValue,
     values
   ]);
-  const handleRemove = (0, import_react13.useCallback)((index) => {
+  const handleRemove = (0, import_react14.useCallback)((index) => {
     const newValues = values.filter((_, i) => i !== index);
     inputProps.onValueChange(type, newValues);
   }, [
@@ -954,20 +1025,20 @@ var ArrayField = ({ property, readonly, path, inputProps, Custom, lookupComponen
   if (!elementType) {
     return null;
   }
-  return /* @__PURE__ */ import_react13.default.createElement("div", {
+  return /* @__PURE__ */ import_react14.default.createElement("div", {
     role: "none",
     className: (0, import_react_ui_theme8.mx)(padding)
-  }, /* @__PURE__ */ import_react13.default.createElement(InputHeader, null, label), /* @__PURE__ */ import_react13.default.createElement("div", {
+  }, /* @__PURE__ */ import_react14.default.createElement(InputHeader, null, label), /* @__PURE__ */ import_react14.default.createElement("div", {
     role: "none",
     className: "flex flex-col gap-1"
-  }, values.map((_value, index) => /* @__PURE__ */ import_react13.default.createElement("div", {
+  }, values.map((_value, index) => /* @__PURE__ */ import_react14.default.createElement("div", {
     key: index,
     role: "none",
     className: "flex items-center gap-1"
-  }, /* @__PURE__ */ import_react13.default.createElement("div", {
+  }, /* @__PURE__ */ import_react14.default.createElement("div", {
     role: "none",
     className: "flex-1"
-  }, /* @__PURE__ */ import_react13.default.createElement(FormField, {
+  }, /* @__PURE__ */ import_react14.default.createElement(FormField, {
     property: {
       ...property,
       array: false,
@@ -981,15 +1052,15 @@ var ArrayField = ({ property, readonly, path, inputProps, Custom, lookupComponen
     inline: true,
     Custom,
     lookupComponent
-  })), /* @__PURE__ */ import_react13.default.createElement(import_react_ui9.IconButton, {
+  })), /* @__PURE__ */ import_react14.default.createElement(import_react_ui10.IconButton, {
     icon: "ph--trash--regular",
     iconOnly: true,
     label: t("button remove"),
     onClick: () => handleRemove(index)
-  })))), /* @__PURE__ */ import_react13.default.createElement("div", {
+  })))), /* @__PURE__ */ import_react14.default.createElement("div", {
     role: "none",
     className: "flex justify-between items-center plb-1"
-  }, /* @__PURE__ */ import_react13.default.createElement(import_react_ui9.IconButton, {
+  }, /* @__PURE__ */ import_react14.default.createElement(import_react_ui10.IconButton, {
     icon: "ph--plus--regular",
     iconOnly: true,
     label: t("button add"),
@@ -1015,11 +1086,11 @@ var getInputComponent = (type, format) => {
 var FormField = ({ property, path, readonly, inline, lookupComponent, Custom }) => {
   const inputProps = useInputProps(path);
   const { ast, name, type, format, title, description, options, examples, array } = property;
-  const label = (0, import_react12.useMemo)(() => title ?? (0, import_effect4.pipe)(name, import_String.capitalize), [
+  const label = (0, import_react13.useMemo)(() => title ?? (0, import_effect4.pipe)(name, import_String.capitalize), [
     title,
     name
   ]);
-  const placeholder = (0, import_react12.useMemo)(() => examples?.length ? `Example: "${examples[0]}"` : description, [
+  const placeholder = (0, import_react13.useMemo)(() => examples?.length ? `Example: "${examples[0]}"` : description, [
     examples,
     description
   ]);
@@ -1036,14 +1107,14 @@ var FormField = ({ property, path, readonly, inline, lookupComponent, Custom })
     }
   });
   if (FoundComponent) {
-    return /* @__PURE__ */ import_react12.default.createElement("div", {
+    return /* @__PURE__ */ import_react13.default.createElement("div", {
       role: "none"
     }, FoundComponent);
   }
   const jsonPath = (0, import_effect5.createJsonPath)(path ?? []);
   const CustomComponent = Custom?.[jsonPath];
   if (CustomComponent) {
-    return /* @__PURE__ */ import_react12.default.createElement(CustomComponent, {
+    return /* @__PURE__ */ import_react13.default.createElement(CustomComponent, {
       type,
       format,
       label,
@@ -1054,7 +1125,7 @@ var FormField = ({ property, path, readonly, inline, lookupComponent, Custom })
     });
   }
   if (array) {
-    return /* @__PURE__ */ import_react12.default.createElement(ArrayField, {
+    return /* @__PURE__ */ import_react13.default.createElement(ArrayField, {
       property,
       path,
       inputProps,
@@ -1064,9 +1135,9 @@ var FormField = ({ property, path, readonly, inline, lookupComponent, Custom })
   }
   const InputComponent = getInputComponent(type, format);
   if (InputComponent) {
-    return /* @__PURE__ */ import_react12.default.createElement("div", {
+    return /* @__PURE__ */ import_react13.default.createElement("div", {
       role: "none"
-    }, /* @__PURE__ */ import_react12.default.createElement(InputComponent, {
+    }, /* @__PURE__ */ import_react13.default.createElement(InputComponent, {
       type,
       format,
       label,
@@ -1077,9 +1148,9 @@ var FormField = ({ property, path, readonly, inline, lookupComponent, Custom })
     }));
   }
   if (options) {
-    return /* @__PURE__ */ import_react12.default.createElement("div", {
+    return /* @__PURE__ */ import_react13.default.createElement("div", {
       role: "none"
-    }, /* @__PURE__ */ import_react12.default.createElement(SelectInput, {
+    }, /* @__PURE__ */ import_react13.default.createElement(SelectInput, {
       type,
       format,
       disabled: readonly,
@@ -1097,9 +1168,9 @@ var FormField = ({ property, path, readonly, inline, lookupComponent, Custom })
     const baseNode = (0, import_effect5.findNode)(ast, import_effect5.isDiscriminatedUnion);
     const typeLiteral = baseNode ? (0, import_effect5.getDiscriminatedType)(baseNode, inputProps.getValue()) : (0, import_effect5.findNode)(ast, import_echo_schema5.AST.isTypeLiteral);
     if (typeLiteral) {
-      return /* @__PURE__ */ import_react12.default.createElement("div", {
+      return /* @__PURE__ */ import_react13.default.createElement("div", {
         role: "none"
-      }, !inline && /* @__PURE__ */ import_react12.default.createElement("div", null, label), /* @__PURE__ */ import_react12.default.createElement(FormFields, {
+      }, !inline && /* @__PURE__ */ import_react13.default.createElement("div", null, label), /* @__PURE__ */ import_react13.default.createElement(FormFields, {
         schema: import_echo_schema5.S.make(typeLiteral),
         path,
         readonly,
@@ -1111,7 +1182,7 @@ var FormField = ({ property, path, readonly, inline, lookupComponent, Custom })
 };
 var FormFields = ({ schema, path, filter, sort, readonly, lookupComponent, Custom }) => {
   const values = useFormValues(path);
-  const properties = (0, import_react12.useMemo)(() => {
+  const properties = (0, import_react13.useMemo)(() => {
     const props = (0, import_schema3.getSchemaProperties)(schema.ast, values);
     const filtered = filter ? filter(props) : props;
     return sort ? filtered.sort((a, b) => sort.indexOf(a.name) - sort.indexOf(b.name)) : filtered;
@@ -1121,11 +1192,11 @@ var FormFields = ({ schema, path, filter, sort, readonly, lookupComponent, Custo
     filter,
     sort
   ]);
-  return /* @__PURE__ */ import_react12.default.createElement("div", {
+  return /* @__PURE__ */ import_react13.default.createElement("div", {
     role: "form",
     className: (0, import_react_ui_theme7.mx)("flex flex-col w-full gap-2")
   }, properties.map((property) => {
-    return /* @__PURE__ */ import_react12.default.createElement(FormField, {
+    return /* @__PURE__ */ import_react13.default.createElement(FormField, {
       key: property.name,
       property,
       path: [
@@ -1139,12 +1210,12 @@ var FormFields = ({ schema, path, filter, sort, readonly, lookupComponent, Custo
   }).filter(import_util3.isNotFalsy));
 };
 var Form = ({ classNames, schema, values: initialValues, path = [], autoFocus, readonly, filter, sort, autoSave, testId, onValuesChanged, onValidate, onSave, onCancel, lookupComponent, Custom }) => {
-  const formRef = (0, import_react8.useRef)(null);
-  const onValid = (0, import_react8.useMemo)(() => autoSave ? onSave : void 0, [
+  const formRef = (0, import_react9.useRef)(null);
+  const onValid = (0, import_react9.useMemo)(() => autoSave ? onSave : void 0, [
     autoSave,
     onSave
   ]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (autoFocus && formRef.current) {
       const input = formRef.current.querySelector("input");
       if (input) {
@@ -1154,7 +1225,7 @@ var Form = ({ classNames, schema, values: initialValues, path = [], autoFocus, r
   }, [
     autoFocus
   ]);
-  return /* @__PURE__ */ import_react8.default.createElement(FormProvider, {
+  return /* @__PURE__ */ import_react9.default.createElement(FormProvider, {
     formRef,
     schema,
     autoSave,
@@ -1163,12 +1234,12 @@ var Form = ({ classNames, schema, values: initialValues, path = [], autoFocus, r
     onValidate,
     onValid,
     onSave
-  }, /* @__PURE__ */ import_react8.default.createElement("div", {
+  }, /* @__PURE__ */ import_react9.default.createElement("div", {
     ref: formRef,
     role: "none",
     className: (0, import_react_ui_theme5.mx)("p-2", classNames),
     "data-testid": testId
-  }, /* @__PURE__ */ import_react8.default.createElement(FormFields, {
+  }, /* @__PURE__ */ import_react9.default.createElement(FormFields, {
     schema,
     path,
     readonly,
@@ -1176,21 +1247,21 @@ var Form = ({ classNames, schema, values: initialValues, path = [], autoFocus, r
     sort,
     lookupComponent,
     Custom
-  }), (onCancel || onSave) && !autoSave && /* @__PURE__ */ import_react8.default.createElement(FormActions, {
+  }), (onCancel || onSave) && !autoSave && /* @__PURE__ */ import_react9.default.createElement(FormActions, {
     onCancel,
     readonly
   })));
 };
 var __dxlog_file3 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-form/src/components/FieldEditor/FieldEditor.tsx";
 var FieldEditor = ({ view, projection, field, registry, onSave, onCancel }) => {
-  const { t } = (0, import_react_ui2.useTranslation)(translationKey);
-  const [props, setProps] = (0, import_react2.useState)(projection.getFieldProjection(field.id).props);
-  (0, import_react2.useEffect)(() => setProps(projection.getFieldProjection(field.id).props), [
+  const { t } = (0, import_react_ui3.useTranslation)(translationKey);
+  const [props, setProps] = (0, import_react3.useState)(projection.getFieldProjection(field.id).props);
+  (0, import_react3.useEffect)(() => setProps(projection.getFieldProjection(field.id).props), [
     field,
     projection
   ]);
-  const [schemas, setSchemas] = (0, import_react2.useState)([]);
-  (0, import_react2.useEffect)(() => {
+  const [schemas, setSchemas] = (0, import_react3.useState)([]);
+  (0, import_react3.useEffect)(() => {
     if (!registry) {
       return;
     }
@@ -1208,17 +1279,17 @@ var FieldEditor = ({ view, projection, field, registry, onSave, onCancel }) => {
   }, [
     registry
   ]);
-  const [referenceSchema, setReferenceSchema] = (0, import_react2.useState)();
-  (0, import_react2.useEffect)(() => {
+  const [referenceSchema, setReferenceSchema] = (0, import_react3.useState)();
+  (0, import_react3.useEffect)(() => {
     setReferenceSchema(schemas.find((schema) => schema.typename === props?.referenceSchema));
   }, [
     schemas,
     props?.referenceSchema
   ]);
-  const [{ fieldSchema }, setFieldSchema] = (0, import_react2.useState)({
+  const [{ fieldSchema }, setFieldSchema] = (0, import_react3.useState)({
     fieldSchema: (0, import_schema.getFormatSchema)(props?.format)
   });
-  const handleValuesChanged = (0, import_react2.useCallback)((_props) => {
+  const handleValuesChanged = (0, import_react3.useCallback)((_props) => {
     setFieldSchema((prev) => {
       const fieldSchema2 = (0, import_schema.getFormatSchema)(_props.format);
       if (prev.fieldSchema === fieldSchema2) {
@@ -1253,7 +1324,7 @@ var FieldEditor = ({ view, projection, field, registry, onSave, onCancel }) => {
     props.format,
     props.referenceSchema
   ]);
-  const handleValidate = (0, import_react2.useCallback)(({ property }) => {
+  const handleValidate = (0, import_react3.useCallback)(({ property }) => {
     if (property && view.fields.find((f) => f.path === property && f.path !== field.path)) {
       return [
         {
@@ -1266,7 +1337,7 @@ var FieldEditor = ({ view, projection, field, registry, onSave, onCancel }) => {
     view.fields,
     field
   ]);
-  const handleSave = (0, import_react2.useCallback)((props2) => {
+  const handleSave = (0, import_react3.useCallback)((props2) => {
     projection.setFieldProjection({
       field,
       props: props2
@@ -1277,39 +1348,39 @@ var FieldEditor = ({ view, projection, field, registry, onSave, onCancel }) => {
     field,
     onSave
   ]);
-  const handleCancel = (0, import_react2.useCallback)(() => {
+  const handleCancel = (0, import_react3.useCallback)(() => {
     requestAnimationFrame(() => onCancel?.());
     onSave();
   }, [
     onSave
   ]);
-  const Custom = (0, import_react2.useMemo)(() => ({
-    ["format"]: (props2) => /* @__PURE__ */ import_react2.default.createElement(SelectInput, {
+  const Custom = (0, import_react3.useMemo)(() => ({
+    ["format"]: (props2) => /* @__PURE__ */ import_react3.default.createElement(SelectInput, {
       ...props2,
       options: import_echo_schema.FormatEnums.filter((value) => value !== import_echo_schema.FormatEnum.None).map((value) => ({
         value,
         label: t(`format ${value}`)
       }))
     }),
-    ["referenceSchema"]: (props2) => /* @__PURE__ */ import_react2.default.createElement(SelectInput, {
+    ["referenceSchema"]: (props2) => /* @__PURE__ */ import_react3.default.createElement(SelectInput, {
       ...props2,
       options: schemas.map((schema) => ({
         value: schema.typename
       }))
     }),
-    ["referencePath"]: (props2) => /* @__PURE__ */ import_react2.default.createElement(SelectInput, {
+    ["referencePath"]: (props2) => /* @__PURE__ */ import_react3.default.createElement(SelectInput, {
       ...props2,
       options: referenceSchema ? (0, import_schema.getSchemaProperties)(referenceSchema.ast).sort(import_schema.sortProperties).map((p) => ({
         value: p.name
       })) : []
     }),
-    ["options"]: (props2) => /* @__PURE__ */ import_react2.default.createElement(SelectOptionInput, props2)
+    ["options"]: (props2) => /* @__PURE__ */ import_react3.default.createElement(SelectOptionInput, props2)
   }), [
     t,
     schemas,
     referenceSchema
   ]);
-  const propIsNotType = (0, import_react2.useCallback)((props2) => props2.filter((p) => p.name !== "type"), []);
+  const propIsNotType = (0, import_react3.useCallback)((props2) => props2.filter((p) => p.name !== "type"), []);
   if (!fieldSchema) {
     import_log.log.warn("invalid format", {
       props
@@ -1321,7 +1392,7 @@ var FieldEditor = ({ view, projection, field, registry, onSave, onCancel }) => {
     });
     return null;
   }
-  return /* @__PURE__ */ import_react2.default.createElement(Form, {
+  return /* @__PURE__ */ import_react3.default.createElement(Form, {
     key: field.id,
     autoFocus: true,
     values: props,
@@ -1349,13 +1420,13 @@ var ViewMetaSchema = import_echo_schema8.S.Struct({
   })
 }).pipe(import_echo_schema8.S.mutable);
 var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading = false, onTypenameChanged, onDelete }) => {
-  const { t } = (0, import_react_ui10.useTranslation)(translationKey);
-  const projection = (0, import_react14.useMemo)(() => new import_schema5.ViewProjection(schema, view), [
+  const { t } = (0, import_react_ui11.useTranslation)(translationKey);
+  const projection = (0, import_react15.useMemo)(() => new import_schema5.ViewProjection(schema.jsonSchema, view), [
     schema,
     view
   ]);
-  const [field, setField] = (0, import_react14.useState)();
-  const viewValues = (0, import_react14.useMemo)(() => {
+  const [field, setField] = (0, import_react15.useState)();
+  const viewValues = (0, import_react15.useMemo)(() => {
     return {
       name: view.name,
       // TODO(burdon): Need to warn user of possible consequences of editing.
@@ -1365,10 +1436,10 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading =
   }, [
     view
   ]);
-  const handleSelect = (0, import_react14.useCallback)((field2) => {
+  const handleSelect = (0, import_react15.useCallback)((field2) => {
     setField((f) => f === field2 ? void 0 : field2);
   }, []);
-  const handleAdd = (0, import_react14.useCallback)(() => {
+  const handleAdd = (0, import_react15.useCallback)(() => {
     (0, import_invariant3.invariant)(!schema.readonly, void 0, {
       F: __dxlog_file4,
       L: 76,
@@ -1384,7 +1455,7 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading =
     schema,
     view
   ]);
-  const handleUpdate = (0, import_react14.useCallback)(({ name, typename }) => {
+  const handleUpdate = (0, import_react15.useCallback)(({ name, typename }) => {
     (0, import_invariant3.invariant)(!schema.readonly, void 0, {
       F: __dxlog_file4,
       L: 83,
@@ -1407,7 +1478,7 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading =
     view,
     onTypenameChanged
   ]);
-  const handleDelete = (0, import_react14.useCallback)((fieldId) => {
+  const handleDelete = (0, import_react15.useCallback)((fieldId) => {
     (0, import_invariant3.invariant)(!schema.readonly, void 0, {
       F: __dxlog_file4,
       L: 99,
@@ -1426,7 +1497,7 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading =
     field,
     onDelete
   ]);
-  const handleMove = (0, import_react14.useCallback)((fromIndex, toIndex) => {
+  const handleMove = (0, import_react15.useCallback)((fromIndex, toIndex) => {
     (0, import_invariant3.invariant)(!schema.readonly, void 0, {
       F: __dxlog_file4,
       L: 111,
@@ -1446,91 +1517,91 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading =
     schema,
     view.fields
   ]);
-  const handleClose = (0, import_react14.useCallback)(() => setField(void 0), []);
+  const handleClose = (0, import_react15.useCallback)(() => setField(void 0), []);
   const hiddenProperties = projection.getHiddenProperties();
-  const handleHide = (0, import_react14.useCallback)((fieldId) => {
+  const handleHide = (0, import_react15.useCallback)((fieldId) => {
     setField(void 0);
     projection.hideFieldProjection(fieldId);
   }, [
     projection
   ]);
-  const handleShow = (0, import_react14.useCallback)((property) => {
+  const handleShow = (0, import_react15.useCallback)((property) => {
     setField(void 0);
     projection.showFieldProjection(property);
   }, [
     projection
   ]);
-  return /* @__PURE__ */ import_react14.default.createElement("div", {
+  return /* @__PURE__ */ import_react15.default.createElement("div", {
     role: "none",
     className: (0, import_react_ui_theme9.mx)("flex flex-col w-full divide-y divide-separator", classNames)
-  }, /* @__PURE__ */ import_react14.default.createElement(Form, {
+  }, /* @__PURE__ */ import_react15.default.createElement(Form, {
     autoSave: true,
     schema: ViewMetaSchema,
     values: viewValues,
     onSave: schema.readonly ? void 0 : handleUpdate
-  }), /* @__PURE__ */ import_react14.default.createElement("div", null, /* @__PURE__ */ import_react14.default.createElement("div", {
+  }), /* @__PURE__ */ import_react15.default.createElement("div", null, /* @__PURE__ */ import_react15.default.createElement("div", {
     role: "none",
     className: "p-2"
-  }, /* @__PURE__ */ import_react14.default.createElement("label", {
+  }, /* @__PURE__ */ import_react15.default.createElement("label", {
     className: (0, import_react_ui_theme9.mx)(import_react_ui_theme9.inputTextLabel)
-  }, t("fields label"))), /* @__PURE__ */ import_react14.default.createElement(import_react_ui_list2.List.Root, {
+  }, t("fields label"))), /* @__PURE__ */ import_react15.default.createElement(import_react_ui_list2.List.Root, {
     items: view.fields,
     isItem: import_echo_schema8.S.is(import_schema5.FieldSchema),
     getId: (field2) => field2.id,
     onMove: schema.readonly ? void 0 : handleMove
-  }, ({ items: fields }) => /* @__PURE__ */ import_react14.default.createElement(import_react14.default.Fragment, null, showHeading && /* @__PURE__ */ import_react14.default.createElement("div", {
+  }, ({ items: fields }) => /* @__PURE__ */ import_react15.default.createElement(import_react15.default.Fragment, null, showHeading && /* @__PURE__ */ import_react15.default.createElement("div", {
     role: "heading",
     className: grid
-  }, /* @__PURE__ */ import_react14.default.createElement("div", null), /* @__PURE__ */ import_react14.default.createElement("div", {
+  }, /* @__PURE__ */ import_react15.default.createElement("div", null), /* @__PURE__ */ import_react15.default.createElement("div", {
     className: "flex items-center text-sm"
-  }, t("field path label"))), /* @__PURE__ */ import_react14.default.createElement("div", {
+  }, t("field path label"))), /* @__PURE__ */ import_react15.default.createElement("div", {
     role: "list",
     className: "flex flex-col w-full"
-  }, fields?.map((field2) => /* @__PURE__ */ import_react14.default.createElement(import_react_ui_list2.List.Item, {
+  }, fields?.map((field2) => /* @__PURE__ */ import_react15.default.createElement(import_react_ui_list2.List.Item, {
     key: field2.id,
     item: field2,
     classNames: (0, import_react_ui_theme9.mx)(grid, import_react_ui_theme9.ghostHover, "cursor-pointer")
-  }, /* @__PURE__ */ import_react14.default.createElement(import_react_ui_list2.List.ItemDragHandle, null), /* @__PURE__ */ import_react14.default.createElement(import_react_ui_list2.List.ItemTitle, {
+  }, /* @__PURE__ */ import_react15.default.createElement(import_react_ui_list2.List.ItemDragHandle, null), /* @__PURE__ */ import_react15.default.createElement(import_react_ui_list2.List.ItemTitle, {
     onClick: () => handleSelect(field2)
-  }, field2.path), /* @__PURE__ */ import_react14.default.createElement("div", {
+  }, field2.path), /* @__PURE__ */ import_react15.default.createElement("div", {
     className: "flex items-center gap-2 -ml-4"
-  }, /* @__PURE__ */ import_react14.default.createElement(import_react_ui_list2.List.ItemButton, {
+  }, /* @__PURE__ */ import_react15.default.createElement(import_react_ui_list2.List.ItemButton, {
     icon: "ph--eye-slash--regular",
     disabled: view.fields.length <= 1,
     onClick: () => handleHide(field2.id)
-  }), !schema.readonly && /* @__PURE__ */ import_react14.default.createElement(import_react_ui_list2.List.ItemDeleteButton, {
+  }), !schema.readonly && /* @__PURE__ */ import_react15.default.createElement(import_react_ui_list2.List.ItemDeleteButton, {
     icon: "ph--trash--regular",
     disabled: view.fields.length <= 1,
     onClick: () => handleDelete(field2.id)
-  }))))))), hiddenProperties.length > 0 && /* @__PURE__ */ import_react14.default.createElement("div", null, /* @__PURE__ */ import_react14.default.createElement("div", {
+  }))))))), hiddenProperties.length > 0 && /* @__PURE__ */ import_react15.default.createElement("div", null, /* @__PURE__ */ import_react15.default.createElement("div", {
     role: "none",
     className: "p-2"
-  }, /* @__PURE__ */ import_react14.default.createElement("label", {
+  }, /* @__PURE__ */ import_react15.default.createElement("label", {
     className: (0, import_react_ui_theme9.mx)(import_react_ui_theme9.inputTextLabel)
-  }, t("hidden fields label"))), /* @__PURE__ */ import_react14.default.createElement(import_react_ui_list2.List.Root, {
+  }, t("hidden fields label"))), /* @__PURE__ */ import_react15.default.createElement(import_react_ui_list2.List.Root, {
     items: hiddenProperties,
     isItem: (item) => typeof item === "string",
     getId: (property) => property
-  }, ({ items: properties }) => /* @__PURE__ */ import_react14.default.createElement("div", {
+  }, ({ items: properties }) => /* @__PURE__ */ import_react15.default.createElement("div", {
     role: "list",
     className: "flex flex-col w-full"
-  }, properties?.map((property) => /* @__PURE__ */ import_react14.default.createElement(import_react_ui_list2.List.Item, {
+  }, properties?.map((property) => /* @__PURE__ */ import_react15.default.createElement(import_react_ui_list2.List.Item, {
     key: property,
     item: property,
     classNames: (0, import_react_ui_theme9.mx)(grid, import_react_ui_theme9.ghostHover, "cursor-pointer")
-  }, /* @__PURE__ */ import_react14.default.createElement("div", null), /* @__PURE__ */ import_react14.default.createElement(import_react_ui_list2.List.ItemTitle, null, property), /* @__PURE__ */ import_react14.default.createElement(import_react_ui_list2.List.ItemButton, {
+  }, /* @__PURE__ */ import_react15.default.createElement("div", null), /* @__PURE__ */ import_react15.default.createElement(import_react_ui_list2.List.ItemTitle, null, property), /* @__PURE__ */ import_react15.default.createElement(import_react_ui_list2.List.ItemButton, {
     icon: "ph--eye--regular",
     onClick: () => handleShow(property)
-  }))))))), field && /* @__PURE__ */ import_react14.default.createElement(FieldEditor, {
+  }))))))), field && /* @__PURE__ */ import_react15.default.createElement(FieldEditor, {
     key: field.id,
     view,
     projection,
     field,
     registry,
     onSave: handleClose
-  }), !readonly && !field && /* @__PURE__ */ import_react14.default.createElement("div", {
+  }), !readonly && !field && /* @__PURE__ */ import_react15.default.createElement("div", {
     className: "flex p-2 justify-center"
-  }, /* @__PURE__ */ import_react14.default.createElement(import_react_ui10.IconButton, {
+  }, /* @__PURE__ */ import_react15.default.createElement(import_react_ui11.IconButton, {
     icon: "ph--plus--regular",
     label: t("button add property"),
     onClick: schema.readonly ? void 0 : handleAdd,
@@ -1641,12 +1712,14 @@ var cellClassesForFieldType = ({ type, format }) => {
   switch (format) {
     case import_echo_schema9.FormatEnum.Markdown:
       return void 0;
+    case import_echo_schema9.FormatEnum.Time:
     case import_echo_schema9.FormatEnum.Timestamp:
     case import_echo_schema9.FormatEnum.DateTime:
     case import_echo_schema9.FormatEnum.Date:
-    case import_echo_schema9.FormatEnum.Time:
+    case import_echo_schema9.FormatEnum.Duration:
       return [
-        "font-mono"
+        "font-mono",
+        "text-right"
       ];
     case import_echo_schema9.FormatEnum.Currency:
       return [
@@ -1661,9 +1734,6 @@ var cellClassesForFieldType = ({ type, format }) => {
       return void 0;
   }
 };
-var cellClassesForRowSelection = (selected) => selected ? [
-  "!bg-gridCellSelected"
-] : void 0;
 var pathNotUniqueError = (path) => ({
   path: "path",
   message: `'${path}' is already present`
@@ -1708,17 +1778,14 @@ var formatForDisplay = ({ type, format, value, locale = void 0 }) => {
         maximumFractionDigits: 2
       });
     }
-    case import_echo_schema10.FormatEnum.DateTime:
-    case import_echo_schema10.FormatEnum.Date:
+    case import_echo_schema10.FormatEnum.Date: {
+      return (0, import_format.format)(new Date(value), "yyyy-MM-dd");
+    }
     case import_echo_schema10.FormatEnum.Time: {
-      const date = new Date(value);
-      if (format === import_echo_schema10.FormatEnum.DateTime) {
-        return date.toLocaleString(locale);
-      } else if (format === import_echo_schema10.FormatEnum.Date) {
-        return date.toLocaleDateString(locale);
-      } else {
-        return date.toLocaleTimeString(locale);
-      }
+      return (0, import_format.format)(new Date(value), "HH:mm:ss");
+    }
+    case import_echo_schema10.FormatEnum.DateTime: {
+      return (0, import_format.format)(new Date(value), "yyyy-MM-dd HH:mm:ss");
     }
     case import_echo_schema10.FormatEnum.GeoPoint: {
       if (value === null || value === void 0) {
@@ -1796,6 +1863,13 @@ var formatForEditing = ({ type, format, value, locale = void 0 }) => {
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   BooleanInput,
+  ControlFrame,
+  ControlFrameItem,
+  ControlGroup,
+  ControlItem,
+  ControlItemInput,
+  ControlSection,
+  ControlSectionHeading,
   DeprecatedFormContainer,
   DeprecatedFormInput,
   FieldEditor,
@@ -1811,7 +1885,7 @@ var formatForEditing = ({ type, format, value, locale = void 0 }) => {
   TupleInput,
   ViewEditor,
   cellClassesForFieldType,
-  cellClassesForRowSelection,
+  controlItemClasses,
   formatForDisplay,
   formatForEditing,
   parseValue,