@dxos/react-ui-form 0.8.2-main.fbd8ed0 → 0.8.2-staging.42af850

package/dist/lib/node/index.cjs

@@ -69,41 +69,51 @@ __export(node_exports, {
   useRefQueryLookupHandler: () => useRefQueryLookupHandler
 });
 module.exports = __toCommonJS(node_exports);
+var import_tracking = require("@preact-signals/safe-react/tracking");
 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_tracking2 = require("@preact-signals/safe-react/tracking");
 var import_react2 = __toESM(require("react"));
 var import_react_ui2 = require("@dxos/react-ui");
 var import_react_ui_theme2 = require("@dxos/react-ui-theme");
+var import_tracking3 = require("@preact-signals/safe-react/tracking");
 var import_react3 = __toESM(require("react"));
 var import_echo_schema = require("@dxos/echo-schema");
 var import_log = require("@dxos/log");
 var import_react_ui3 = require("@dxos/react-ui");
 var import_schema = require("@dxos/schema");
+var import_tracking4 = require("@preact-signals/safe-react/tracking");
 var import_react4 = __toESM(require("react"));
 var import_echo_schema2 = require("@dxos/echo-schema");
 var import_react_ui4 = require("@dxos/react-ui");
 var import_util = require("@dxos/util");
+var import_tracking5 = require("@preact-signals/safe-react/tracking");
 var import_react5 = __toESM(require("react"));
 var import_react_ui5 = require("@dxos/react-ui");
 var import_react_ui_theme3 = require("@dxos/react-ui-theme");
+var import_tracking6 = require("@preact-signals/safe-react/tracking");
 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_theme4 = require("@dxos/react-ui-theme");
+var import_tracking7 = require("@preact-signals/safe-react/tracking");
 var import_react7 = __toESM(require("react"));
 var import_react_ui7 = require("@dxos/react-ui");
 var import_react_ui_theme5 = require("@dxos/react-ui-theme");
 var import_util2 = require("@dxos/util");
+var import_tracking8 = require("@preact-signals/safe-react/tracking");
 var import_react8 = __toESM(require("react"));
 var import_react_ui8 = require("@dxos/react-ui");
+var import_tracking9 = require("@preact-signals/safe-react/tracking");
 var import_react9 = __toESM(require("react"));
 var import_react_ui_theme6 = require("@dxos/react-ui-theme");
+var import_tracking10 = require("@preact-signals/safe-react/tracking");
 var import_react10 = __toESM(require("react"));
 var import_react_ui9 = require("@dxos/react-ui");
-var import_react_ui_theme7 = require("@dxos/react-ui-theme");
+var import_tracking11 = require("@preact-signals/safe-react/tracking");
 var import_react11 = __toESM(require("react"));
 var import_debug = require("@dxos/debug");
 var import_echo_schema3 = require("@dxos/echo-schema");
@@ -121,20 +131,21 @@ var import_echo = require("@dxos/react-client/echo");
 var import_util3 = require("@dxos/util");
 var import_react14 = require("react");
 var import_log3 = require("@dxos/log");
+var import_tracking12 = require("@preact-signals/safe-react/tracking");
 var import_effect4 = require("effect");
 var import_String = require("effect/String");
 var import_react15 = __toESM(require("react"));
 var import_effect5 = require("@dxos/effect");
-var import_react_ui_theme8 = require("@dxos/react-ui-theme");
+var import_react_ui_theme7 = require("@dxos/react-ui-theme");
 var import_schema3 = require("@dxos/schema");
 var import_util4 = require("@dxos/util");
+var import_tracking13 = require("@preact-signals/safe-react/tracking");
 var import_effect6 = require("effect");
 var import_String2 = require("effect/String");
 var import_react16 = __toESM(require("react"));
 var import_effect7 = require("@dxos/effect");
 var import_invariant2 = require("@dxos/invariant");
 var import_react_ui10 = require("@dxos/react-ui");
-var import_react_ui_theme9 = require("@dxos/react-ui-theme");
 var import_schema4 = require("@dxos/schema");
 var import_echo_schema6 = require("@dxos/echo-schema");
 var import_format = require("date-fns/format");
@@ -143,21 +154,25 @@ var import_echo_schema8 = require("@dxos/echo-schema");
 var import_effect8 = require("@dxos/effect");
 var import_effect9 = require("effect");
 var import_effect10 = require("@dxos/effect");
+var import_tracking14 = require("@preact-signals/safe-react/tracking");
 var import_react17 = __toESM(require("react"));
 var import_echo_schema9 = require("@dxos/echo-schema");
 var import_effect11 = require("@dxos/effect");
 var import_keys2 = require("@dxos/keys");
+var import_react18 = require("@dxos/lit-ui/react");
 var import_react_ui11 = require("@dxos/react-ui");
 var import_react_ui_tag_picker = require("@dxos/react-ui-tag-picker");
+var import_react_ui_theme8 = require("@dxos/react-ui-theme");
 var import_util5 = require("@dxos/util");
 var import_echo_schema10 = require("@dxos/echo-schema");
+var import_tracking15 = require("@preact-signals/safe-react/tracking");
 var import_effect12 = require("effect");
-var import_react18 = __toESM(require("react"));
+var import_react19 = __toESM(require("react"));
 var import_echo_schema11 = require("@dxos/echo-schema");
 var import_invariant3 = require("@dxos/invariant");
 var import_react_ui12 = require("@dxos/react-ui");
 var import_react_ui_list2 = require("@dxos/react-ui-list");
-var import_react_ui_theme10 = require("@dxos/react-ui-theme");
+var import_react_ui_theme9 = require("@dxos/react-ui-theme");
 var import_schema5 = require("@dxos/schema");
 var translationKey = "react-ui-form";
 var translations_default = [
@@ -166,6 +181,7 @@ var translations_default = [
       [translationKey]: {
         "fields label": "Fields",
         "hidden fields label": "Hidden Fields",
+        "empty readonly ref field label": "(none)",
         // TODO(burdon): Standardize field/property.
         "button add property": "Add property",
         "field property label": "Property",
@@ -175,6 +191,8 @@ var translations_default = [
         "add field": "Add field",
         "delete field": "Delete field",
         "field limit reached": "Maximum number of fields reached",
+        "boolean input true value": "Yes",
+        "boolean input false value": "No",
         // TODO(burdon): Factor out?
         "button cancel": "Cancel",
         "button save": "Save",
@@ -204,389 +222,466 @@ var translations_default = [
         "format number": "Number",
         "format uri": "URI",
         "format uuid": "UUID",
-        // Placeholders
+        // Placeholders.
         "placeholder latitude": "Latitude",
         "placeholder longitude": "Longitude",
-        // SelectOptionsInput
+        // SelectOptionsInput.
         "select option label": "Label",
         "select option label placeholder": "Option label",
         "select option color": "Color",
         "select option delete": "Delete",
-        "select option add": "Add option"
+        "select option add": "Add option",
+        // System schema message.
+        "system schema title": "System Schema",
+        "system schema description": "This schema is managed by the system and cannot be modified."
       }
     }
   }
 ];
 var DeprecatedFormContainer = ({ children, classNames }) => {
-  return /* @__PURE__ */ import_react.default.createElement("div", {
-    role: "none",
-    className: "container-max-width p-4 justify-center overflow-x-hidden overflow-y-auto"
-  }, /* @__PURE__ */ import_react.default.createElement("div", {
-    role: "form",
-    className: (0, import_react_ui_theme.mx)("flex flex-col", import_react_ui_theme.textBlockWidth, classNames)
-  }, children));
+  var _effect = (0, import_tracking.useSignals)();
+  try {
+    return /* @__PURE__ */ import_react.default.createElement("div", {
+      role: "none",
+      className: "container-max-width p-4 justify-center overflow-x-hidden overflow-y-auto"
+    }, /* @__PURE__ */ import_react.default.createElement("div", {
+      role: "form",
+      className: (0, import_react_ui_theme.mx)("flex flex-col", import_react_ui_theme.textBlockWidth, classNames)
+    }, children));
+  } finally {
+    _effect.f();
+  }
 };
 var DeprecatedFormInput = ({ label, description, secondary, children }) => {
-  const primary = /* @__PURE__ */ import_react.default.createElement("div", {
-    role: "none",
-    className: "flex w-full gap-4 py-1"
-  }, /* @__PURE__ */ import_react.default.createElement(import_react_ui.Input.Root, null, /* @__PURE__ */ import_react.default.createElement("div", {
-    role: "none",
-    className: "flex flex-col w-full"
-  }, /* @__PURE__ */ import_react.default.createElement(import_react_ui.Input.Label, {
-    classNames: "flex min-bs-[--rail-action] items-center",
-    style: {
-      fontSize: "unset"
-    }
-  }, label), description && /* @__PURE__ */ import_react.default.createElement(import_react_ui.Input.DescriptionAndValidation, {
-    classNames: "mbs-0.5"
-  }, /* @__PURE__ */ import_react.default.createElement(import_react_ui.Input.Description, null, description))), /* @__PURE__ */ import_react.default.createElement("div", {
-    role: "none"
-  }, /* @__PURE__ */ import_react.default.createElement("div", {
-    role: "none",
-    className: "flex min-bs-[--rail-action] items-center"
-  }, children))));
-  if (secondary) {
-    return /* @__PURE__ */ import_react.default.createElement("div", {
+  var _effect = (0, import_tracking.useSignals)();
+  try {
+    const primary = /* @__PURE__ */ import_react.default.createElement("div", {
+      role: "none",
+      className: "flex w-full gap-4 py-1"
+    }, /* @__PURE__ */ import_react.default.createElement(import_react_ui.Input.Root, null, /* @__PURE__ */ import_react.default.createElement("div", {
+      role: "none",
+      className: "flex flex-col w-full"
+    }, /* @__PURE__ */ import_react.default.createElement(import_react_ui.Input.Label, {
+      classNames: "flex min-bs-[--rail-action] items-center",
+      style: {
+        fontSize: "unset"
+      }
+    }, label), description && /* @__PURE__ */ import_react.default.createElement(import_react_ui.Input.DescriptionAndValidation, {
+      classNames: "mbs-0.5"
+    }, /* @__PURE__ */ import_react.default.createElement(import_react_ui.Input.Description, null, description))), /* @__PURE__ */ import_react.default.createElement("div", {
       role: "none"
-    }, primary, secondary);
+    }, /* @__PURE__ */ import_react.default.createElement("div", {
+      role: "none",
+      className: "flex min-bs-[--rail-action] items-center"
+    }, children))));
+    if (secondary) {
+      return /* @__PURE__ */ import_react.default.createElement("div", {
+        role: "none"
+      }, primary, secondary);
+    }
+    return primary;
+  } finally {
+    _effect.f();
   }
-  return primary;
 };
 var ControlPage = ({ children, classNames, ...props }) => {
-  return /* @__PURE__ */ import_react2.default.createElement("div", {
-    role: "none",
-    className: (0, import_react_ui_theme2.mx)("pli-2", classNames),
-    ...props
-  }, children);
+  var _effect = (0, import_tracking2.useSignals)();
+  try {
+    return /* @__PURE__ */ import_react2.default.createElement("div", {
+      role: "none",
+      className: (0, import_react_ui_theme2.mx)("pli-2", classNames),
+      ...props
+    }, children);
+  } finally {
+    _effect.f();
+  }
 };
 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 _effect = (0, import_tracking2.useSignals)();
+  try {
+    return /* @__PURE__ */ import_react2.default.createElement(import_react2.default.Fragment, null, /* @__PURE__ */ import_react2.default.createElement(ControlSectionHeading, {
+      title,
+      description
+    }), children);
+  } finally {
+    _effect.f();
+  }
 };
 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 _effect = (0, import_tracking2.useSignals)();
+  try {
+    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)));
+  } finally {
+    _effect.f();
+  }
 };
 var ControlGroupButton = ({ classNames, ...props }) => {
-  return /* @__PURE__ */ import_react2.default.createElement(import_react_ui2.Button, {
-    ...props,
-    classNames: [
-      "md:col-span-2",
-      classNames
-    ]
-  });
+  var _effect = (0, import_tracking2.useSignals)();
+  try {
+    return /* @__PURE__ */ import_react2.default.createElement(import_react_ui2.Button, {
+      ...props,
+      classNames: [
+        "md:col-span-2",
+        classNames
+      ]
+    });
+  } finally {
+    _effect.f();
+  }
+};
+var ControlGroup = ({ children, classNames }) => {
+  var _effect = (0, import_tracking2.useSignals)();
+  try {
+    return /* @__PURE__ */ import_react2.default.createElement("div", {
+      role: "none",
+      className: (0, import_react_ui_theme2.mx)("group container-max-width grid grid-cols-1 md:grid-cols-[1fr_min-content] gap-4", classNames)
+    }, children);
+  } finally {
+    _effect.f();
+  }
+};
+var ControlFrame = ({ children }) => {
+  var _effect = (0, import_tracking2.useSignals)();
+  try {
+    return /* @__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);
+  } finally {
+    _effect.f();
+  }
 };
-var ControlGroup = ({ children, classNames }) => /* @__PURE__ */ import_react2.default.createElement("div", {
-  role: "none",
-  className: (0, import_react_ui_theme2.mx)("group container-max-width grid grid-cols-1 md:grid-cols-[1fr_min-content] gap-4", classNames)
-}, 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 controlItemClasses = "p-4 border border-separator rounded-lg container-max-width grid md:col-span-2 grid-cols-subgrid items-center gap-2";
+var controlItemTitleClasses = "text-lg font-normal";
 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 _effect = (0, import_tracking2.useSignals)();
+  try {
+    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);
+  } finally {
+    _effect.f();
+  }
 };
 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 _effect = (0, import_tracking2.useSignals)();
+  try {
+    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));
+  } finally {
+    _effect.f();
+  }
 };
 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 _effect = (0, import_tracking2.useSignals)();
+  try {
+    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);
+  } finally {
+    _effect.f();
+  }
 };
 var InputHeader = ({ children, error }) => {
-  return /* @__PURE__ */ import_react5.default.createElement("div", {
-    role: "none",
-    className: "flex justify-between items-center mb-1"
-  }, children, error && /* @__PURE__ */ import_react5.default.createElement(import_react_ui5.Tooltip.Trigger, {
-    asChild: true,
-    content: error,
-    side: "bottom"
-  }, /* @__PURE__ */ import_react5.default.createElement(import_react_ui5.Icon, {
-    icon: "ph--warning--regular",
-    size: 4,
-    classNames: import_react_ui_theme3.errorText
-  })));
+  var _effect = (0, import_tracking5.useSignals)();
+  try {
+    return /* @__PURE__ */ import_react5.default.createElement("div", {
+      role: "none",
+      className: "flex justify-between items-center mbs-2 mbe-1 first:mbs-0"
+    }, children, error && /* @__PURE__ */ import_react5.default.createElement(import_react_ui5.Tooltip.Trigger, {
+      asChild: true,
+      content: error,
+      side: "bottom"
+    }, /* @__PURE__ */ import_react5.default.createElement(import_react_ui5.Icon, {
+      icon: "ph--warning--regular",
+      size: 4,
+      classNames: import_react_ui_theme3.errorText
+    })));
+  } finally {
+    _effect.f();
+  }
 };
 var GeoPointInput = ({ type, label, disabled, getStatus, getValue: getValue3, onValueChange, onBlur }) => {
-  const { t } = (0, import_react_ui4.useTranslation)(translationKey);
-  const { status, error } = getStatus();
-  const geoPoint = (0, import_react4.useMemo)(() => getValue3() ?? [
-    0,
-    0
-  ], [
-    getValue3
-  ]);
-  const geoLocation = (0, import_react4.useMemo)(() => import_echo_schema2.GeoLocation.fromGeoPoint(geoPoint), [
-    geoPoint
-  ]);
-  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_react4.useCallback)((coordinateType, setText) => (event) => {
-    const inputText = event.target.value;
-    setText(inputText);
-    if (inputText !== "" && inputText !== "-") {
-      const coord = (0, import_util.safeParseFloat)(inputText);
-      if (coord !== void 0 && !isNaN(coord)) {
-        const currentLocation = import_echo_schema2.GeoLocation.fromGeoPoint(getValue3() ?? [
-          0,
-          0
-        ]);
-        const newLocation = {
-          ...currentLocation,
-          [coordinateType]: coord
-        };
-        const newValue = import_echo_schema2.GeoLocation.toGeoPoint(newLocation);
-        onValueChange(type, newValue);
+  var _effect = (0, import_tracking4.useSignals)();
+  try {
+    const { t } = (0, import_react_ui4.useTranslation)(translationKey);
+    const { status, error } = getStatus();
+    const geoPoint = (0, import_react4.useMemo)(() => getValue3() ?? [
+      0,
+      0
+    ], [
+      getValue3
+    ]);
+    const geoLocation = (0, import_react4.useMemo)(() => import_echo_schema2.GeoLocation.fromGeoPoint(geoPoint), [
+      geoPoint
+    ]);
+    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_react4.useCallback)((coordinateType, setText) => (event) => {
+      const inputText = event.target.value;
+      setText(inputText);
+      if (inputText !== "" && inputText !== "-") {
+        const coord = (0, import_util.safeParseFloat)(inputText);
+        if (coord !== void 0 && !isNaN(coord)) {
+          const currentLocation = import_echo_schema2.GeoLocation.fromGeoPoint(getValue3() ?? [
+            0,
+            0
+          ]);
+          const newLocation = {
+            ...currentLocation,
+            [coordinateType]: coord
+          };
+          const newValue = import_echo_schema2.GeoLocation.toGeoPoint(newLocation);
+          onValueChange(type, newValue);
+        }
       }
-    }
-  }, [
-    getValue3,
-    onValueChange,
-    type
-  ]);
-  return /* @__PURE__ */ import_react4.default.createElement(import_react_ui4.Input.Root, {
-    validationValence: status
-  }, /* @__PURE__ */ import_react4.default.createElement(InputHeader, {
-    error
-  }, /* @__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_react4.default.createElement(import_react_ui4.Input.TextInput, {
-    type: "text",
-    pattern: "^-?[0-9]*\\.?[0-9]*$",
-    disabled,
-    placeholder: t("placeholder latitude"),
-    value: latitudeText,
-    onChange: handleCoordinateChange("latitude", setLatitudeText),
-    onBlur
-  }), /* @__PURE__ */ import_react4.default.createElement(import_react_ui4.Input.TextInput, {
-    type: "text",
-    pattern: "^-?[0-9]*\\.?[0-9]*$",
-    disabled,
-    placeholder: t("placeholder longitude"),
-    value: longitudeText,
-    onChange: handleCoordinateChange("longitude", setLongitudeText),
-    onBlur
-  })));
+    }, [
+      getValue3,
+      onValueChange,
+      type
+    ]);
+    return /* @__PURE__ */ import_react4.default.createElement(import_react_ui4.Input.Root, {
+      validationValence: status
+    }, /* @__PURE__ */ import_react4.default.createElement(InputHeader, {
+      error
+    }, /* @__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_react4.default.createElement(import_react_ui4.Input.TextInput, {
+      type: "text",
+      pattern: "^-?[0-9]*\\.?[0-9]*$",
+      disabled,
+      placeholder: t("placeholder latitude"),
+      value: latitudeText,
+      onChange: handleCoordinateChange("latitude", setLatitudeText),
+      onBlur
+    }), /* @__PURE__ */ import_react4.default.createElement(import_react_ui4.Input.TextInput, {
+      type: "text",
+      pattern: "^-?[0-9]*\\.?[0-9]*$",
+      disabled,
+      placeholder: t("placeholder longitude"),
+      value: longitudeText,
+      onChange: handleCoordinateChange("longitude", setLongitudeText),
+      onBlur
+    })));
+  } finally {
+    _effect.f();
+  }
 };
 var SelectOptionInput = ({ type, label, disabled, getStatus, getValue: getValue3, onValueChange }) => {
-  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_react6.useEffect)(() => {
-    if (options === void 0) {
-      onValueChange(type, []);
-    }
-  }, [
-    options,
-    onValueChange,
-    type
-  ]);
-  const randomHue = () => {
-    const usedHues = new Set(options?.map((option) => option.color) ?? []);
-    const unusedHues = import_react_ui_theme4.hues.filter((hue) => !usedHues.has(hue));
-    if (unusedHues.length > 0) {
-      return unusedHues[Math.floor(Math.random() * unusedHues.length)];
-    }
-    const lastThree = new Set(options?.slice(-3).map((option) => option.color) ?? []);
-    const availableHues = import_react_ui_theme4.hues.filter((hue) => !lastThree.has(hue));
-    return availableHues[Math.floor(Math.random() * availableHues.length)] ?? import_react_ui_theme4.hues[Math.floor(Math.random() * import_react_ui_theme4.hues.length)];
-  };
-  const handleAdd = (0, import_react6.useCallback)(() => {
-    const newId = import_keys.PublicKey.random().truncate();
-    const newOption = {
-      id: newId,
-      title: "",
-      color: randomHue()
+  var _effect = (0, import_tracking6.useSignals)();
+  try {
+    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_react6.useEffect)(() => {
+      if (options === void 0) {
+        onValueChange(type, []);
+      }
+    }, [
+      options,
+      onValueChange,
+      type
+    ]);
+    const randomHue = () => {
+      const usedHues = new Set(options?.map((option) => option.color) ?? []);
+      const unusedHues = import_react_ui_theme4.hues.filter((hue) => !usedHues.has(hue));
+      if (unusedHues.length > 0) {
+        return unusedHues[Math.floor(Math.random() * unusedHues.length)];
+      }
+      const lastThree = new Set(options?.slice(-3).map((option) => option.color) ?? []);
+      const availableHues = import_react_ui_theme4.hues.filter((hue) => !lastThree.has(hue));
+      return availableHues[Math.floor(Math.random() * availableHues.length)] ?? import_react_ui_theme4.hues[Math.floor(Math.random() * import_react_ui_theme4.hues.length)];
     };
-    onValueChange(type, [
-      ...options ?? [],
-      newOption
+    const handleAdd = (0, import_react6.useCallback)(() => {
+      const newId = import_keys.PublicKey.random().truncate();
+      const newOption = {
+        id: newId,
+        title: "",
+        color: randomHue()
+      };
+      onValueChange(type, [
+        ...options ?? [],
+        newOption
+      ]);
+      setSelectedId(newId);
+      setIsNewOption(true);
+    }, [
+      options,
+      type,
+      onValueChange
     ]);
-    setSelectedId(newId);
-    setIsNewOption(true);
-  }, [
-    options,
-    type,
-    onValueChange
-  ]);
-  const handleDelete = (0, import_react6.useCallback)((id) => {
-    const newOptions = options?.filter((option) => option.id !== id) ?? [];
-    onValueChange(type, newOptions);
-    setSelectedId(null);
-  }, [
-    options,
-    type,
-    onValueChange
-  ]);
-  const handleMove = (0, import_react6.useCallback)((from, to) => {
-    if (!options) {
-      return;
-    }
-    const newOptions = [
-      ...options
-    ];
-    const [removed] = newOptions.splice(from, 1);
-    newOptions.splice(to, 0, removed);
-    onValueChange(type, newOptions);
-  }, [
-    options,
-    type,
-    onValueChange
-  ]);
-  const handleClick = (0, import_react6.useCallback)((id) => {
-    setSelectedId((current) => current === id ? null : id);
-  }, []);
-  const handleTitleChange = (0, import_react6.useCallback)((id) => (e) => {
-    const newOptions = options?.map((o) => o.id === id ? {
-      ...o,
-      title: e.target.value
-    } : o);
-    onValueChange(type, newOptions ?? []);
-  }, [
-    options,
-    type,
-    onValueChange
-  ]);
-  const handleKeyDown = (0, import_react6.useCallback)((e) => {
-    if (e.key === "Enter") {
+    const handleDelete = (0, import_react6.useCallback)((id) => {
+      const newOptions = options?.filter((option) => option.id !== id) ?? [];
+      onValueChange(type, newOptions);
       setSelectedId(null);
-    }
-  }, []);
-  const handleColorChange = (0, import_react6.useCallback)((id) => (hue) => {
-    const newOptions = options?.map((o) => o.id === id ? {
-      ...o,
-      color: hue
-    } : o);
-    onValueChange(type, newOptions ?? []);
-  }, [
-    options,
-    type,
-    onValueChange
-  ]);
-  (0, import_react6.useEffect)(() => {
-    if (selected && isNewOption && inputRef.current) {
-      inputRef.current.focus();
-      setIsNewOption(false);
-    }
-  }, [
-    selected,
-    isNewOption
-  ]);
-  return /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.Input.Root, {
-    validationValence: status
-  }, /* @__PURE__ */ import_react6.default.createElement(InputHeader, {
-    error
-  }, /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.Input.Label, null, label)), /* @__PURE__ */ import_react6.default.createElement("div", {
-    role: "none"
-  }, options && /* @__PURE__ */ import_react6.default.createElement(import_react_ui_list.List.Root, {
-    items: options,
-    isItem: (item) => true,
-    onMove: handleMove
-  }, ({ items }) => /* @__PURE__ */ import_react6.default.createElement("div", {
-    role: "list",
-    className: "w-full overflow-auto"
-  }, items?.map((item) => /* @__PURE__ */ import_react6.default.createElement("div", {
-    key: item.id
-  }, /* @__PURE__ */ import_react6.default.createElement(import_react_ui_list.List.Item, {
-    role: "button",
-    item,
-    classNames: (0, import_react_ui_theme4.mx)("p-1 plb-2", "flex flex-col", "cursor-pointer", "hover:bg-hoverOverlay"),
-    "aria-expanded": selected === item.id
-  }, /* @__PURE__ */ import_react6.default.createElement("div", {
-    className: "flex items-center"
-  }, /* @__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_react6.default.createElement(import_react_ui6.Tag, {
-    palette: item.color
-  }, 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_react6.default.createElement("div", {
-    className: "mis-4 mbs-2 flex flex-col gap-1"
-  }, /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.Input.Label, {
-    classNames: "text-xs"
-  }, t("select option label")), /* @__PURE__ */ import_react6.default.createElement("div", {
-    className: "flex flex-row items-center gap-1"
-  }, /* @__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,
-    onChange: handleTitleChange(item.id),
-    onKeyDown: handleKeyDown,
-    classNames: "flex-1",
-    "data-no-submit": true
-  }), /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.Toolbar.Root, {
-    classNames: "p-0 m-0 !is-auto"
-  }, /* @__PURE__ */ import_react6.default.createElement(import_react_ui_pickers.HuePicker, {
-    value: item.color,
-    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_react6.default.createElement("div", {
-    role: "listitem"
-  }, /* @__PURE__ */ import_react6.default.createElement("div", {
-    role: "button",
-    className: (0, import_react_ui_theme4.mx)("p-1 plb-2", "flex flex-col", "cursor-pointer", "hover:bg-hoverOverlay"),
-    onClick: handleAdd
-  }, /* @__PURE__ */ import_react6.default.createElement("div", {
-    className: "flex items-center gap-1"
-  }, /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.Icon, {
-    icon: "ph--plus--regular"
-  }), /* @__PURE__ */ import_react6.default.createElement("span", {
-    className: "text-sm"
-  }, t("select option add")))))))));
+    }, [
+      options,
+      type,
+      onValueChange
+    ]);
+    const handleMove = (0, import_react6.useCallback)((from, to) => {
+      if (!options) {
+        return;
+      }
+      const newOptions = [
+        ...options
+      ];
+      const [removed] = newOptions.splice(from, 1);
+      newOptions.splice(to, 0, removed);
+      onValueChange(type, newOptions);
+    }, [
+      options,
+      type,
+      onValueChange
+    ]);
+    const handleClick = (0, import_react6.useCallback)((id) => {
+      setSelectedId((current) => current === id ? null : id);
+    }, []);
+    const handleTitleChange = (0, import_react6.useCallback)((id) => (e) => {
+      const newOptions = options?.map((o) => o.id === id ? {
+        ...o,
+        title: e.target.value
+      } : o);
+      onValueChange(type, newOptions ?? []);
+    }, [
+      options,
+      type,
+      onValueChange
+    ]);
+    const handleKeyDown = (0, import_react6.useCallback)((e) => {
+      if (e.key === "Enter") {
+        setSelectedId(null);
+      }
+    }, []);
+    const handleColorChange = (0, import_react6.useCallback)((id) => (hue) => {
+      const newOptions = options?.map((o) => o.id === id ? {
+        ...o,
+        color: hue
+      } : o);
+      onValueChange(type, newOptions ?? []);
+    }, [
+      options,
+      type,
+      onValueChange
+    ]);
+    (0, import_react6.useEffect)(() => {
+      if (selected && isNewOption && inputRef.current) {
+        inputRef.current.focus();
+        setIsNewOption(false);
+      }
+    }, [
+      selected,
+      isNewOption
+    ]);
+    return /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.Input.Root, {
+      validationValence: status
+    }, /* @__PURE__ */ import_react6.default.createElement(InputHeader, {
+      error
+    }, /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.Input.Label, null, label)), /* @__PURE__ */ import_react6.default.createElement("div", {
+      role: "none"
+    }, options && /* @__PURE__ */ import_react6.default.createElement(import_react_ui_list.List.Root, {
+      items: options,
+      isItem: (item) => true,
+      onMove: handleMove
+    }, ({ items }) => /* @__PURE__ */ import_react6.default.createElement("div", {
+      role: "list",
+      className: "w-full overflow-auto"
+    }, items?.map((item) => /* @__PURE__ */ import_react6.default.createElement("div", {
+      key: item.id
+    }, /* @__PURE__ */ import_react6.default.createElement(import_react_ui_list.List.Item, {
+      role: "button",
+      item,
+      classNames: (0, import_react_ui_theme4.mx)("p-1 plb-2", "flex flex-col", "cursor-pointer", "hover:bg-hoverOverlay"),
+      "aria-expanded": selected === item.id
+    }, /* @__PURE__ */ import_react6.default.createElement("div", {
+      className: "flex items-center"
+    }, /* @__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_react6.default.createElement(import_react_ui6.Tag, {
+      palette: item.color
+    }, 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_react6.default.createElement("div", {
+      className: "mis-4 mbs-2 flex flex-col gap-1"
+    }, /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.Input.Label, {
+      classNames: "text-xs"
+    }, t("select option label")), /* @__PURE__ */ import_react6.default.createElement("div", {
+      className: "flex flex-row items-center gap-1"
+    }, /* @__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,
+      onChange: handleTitleChange(item.id),
+      onKeyDown: handleKeyDown,
+      classNames: "flex-1",
+      "data-no-submit": true
+    }), /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.Toolbar.Root, {
+      classNames: "p-0 m-0 !is-auto"
+    }, /* @__PURE__ */ import_react6.default.createElement(import_react_ui_pickers.HuePicker, {
+      value: item.color,
+      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_react6.default.createElement("div", {
+      role: "listitem"
+    }, /* @__PURE__ */ import_react6.default.createElement("div", {
+      role: "button",
+      className: (0, import_react_ui_theme4.mx)("p-1 plb-2", "flex flex-col", "cursor-pointer", "hover:bg-hoverOverlay"),
+      onClick: handleAdd
+    }, /* @__PURE__ */ import_react6.default.createElement("div", {
+      className: "flex items-center gap-1"
+    }, /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.Icon, {
+      icon: "ph--plus--regular"
+    }), /* @__PURE__ */ import_react6.default.createElement("span", {
+      className: "text-sm"
+    }, t("select option add")))))))));
+  } finally {
+    _effect.f();
+  }
 };
 var gridCols = [
   "grid-cols-1",
@@ -595,131 +690,162 @@ var gridCols = [
   "grid-cols-4"
 ];
 var TupleInput = ({ binding, type, label, disabled, getStatus, getValue: getValue3, onValueChange, onBlur }) => {
-  const { status, error } = getStatus();
-  const values = getValue3() ?? {};
-  return /* @__PURE__ */ import_react7.default.createElement(import_react_ui7.Input.Root, {
-    validationValence: status
-  }, /* @__PURE__ */ import_react7.default.createElement(InputHeader, {
-    error
-  }, /* @__PURE__ */ import_react7.default.createElement(import_react_ui7.Input.Label, null, label)), /* @__PURE__ */ import_react7.default.createElement("div", {
-    className: (0, import_react_ui_theme5.mx)("grid gap-2", gridCols[binding.length - 1])
-  }, binding.map((prop) => /* @__PURE__ */ import_react7.default.createElement(import_react_ui7.Input.TextInput, {
-    key: prop,
-    type: "number",
-    disabled,
-    value: values[prop],
-    onChange: (event) => onValueChange(type, {
-      ...values,
-      [prop]: (0, import_util2.safeParseFloat)(event.target.value, 0)
-    }),
-    onBlur
-  }))));
+  var _effect = (0, import_tracking7.useSignals)();
+  try {
+    const { status, error } = getStatus();
+    const values = getValue3() ?? {};
+    return /* @__PURE__ */ import_react7.default.createElement(import_react_ui7.Input.Root, {
+      validationValence: status
+    }, /* @__PURE__ */ import_react7.default.createElement(InputHeader, {
+      error
+    }, /* @__PURE__ */ import_react7.default.createElement(import_react_ui7.Input.Label, null, label)), /* @__PURE__ */ import_react7.default.createElement("div", {
+      className: (0, import_react_ui_theme5.mx)("grid gap-2", gridCols[binding.length - 1])
+    }, binding.map((prop) => /* @__PURE__ */ import_react7.default.createElement(import_react_ui7.Input.TextInput, {
+      key: prop,
+      type: "number",
+      disabled,
+      value: values[prop],
+      onChange: (event) => onValueChange(type, {
+        ...values,
+        [prop]: (0, import_util2.safeParseFloat)(event.target.value, 0)
+      }),
+      onBlur
+    }))));
+  } finally {
+    _effect.f();
+  }
 };
 var TextInput = ({ type, label, inputOnly, disabled, placeholder, getStatus, getValue: getValue3, onValueChange, onBlur }) => {
-  const { status, error } = getStatus();
-  return /* @__PURE__ */ import_react8.default.createElement(import_react_ui8.Input.Root, {
-    validationValence: status
-  }, !inputOnly && /* @__PURE__ */ import_react8.default.createElement(InputHeader, {
-    error
-  }, /* @__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_react8.default.createElement(import_react_ui8.Input.Validation, null, error));
+  var _effect = (0, import_tracking8.useSignals)();
+  try {
+    const { status, error } = getStatus();
+    return disabled && !getValue3() ? null : disabled && inputOnly ? /* @__PURE__ */ import_react8.default.createElement("p", null, getValue3() ?? "") : /* @__PURE__ */ import_react8.default.createElement(import_react_ui8.Input.Root, {
+      validationValence: status
+    }, !inputOnly && /* @__PURE__ */ import_react8.default.createElement(InputHeader, {
+      error
+    }, /* @__PURE__ */ import_react8.default.createElement(import_react_ui8.Input.Label, null, label)), disabled ? /* @__PURE__ */ import_react8.default.createElement("p", null, getValue3() ?? "") : /* @__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_react8.default.createElement(import_react_ui8.Input.Validation, null, error));
+  } finally {
+    _effect.f();
+  }
 };
 var NumberInput = ({ type, label, inputOnly, disabled, placeholder, getStatus, getValue: getValue3, onValueChange, onBlur }) => {
-  const { status, error } = getStatus();
-  return /* @__PURE__ */ import_react8.default.createElement(import_react_ui8.Input.Root, {
-    validationValence: status
-  }, !inputOnly && /* @__PURE__ */ import_react8.default.createElement(InputHeader, {
-    error
-  }, /* @__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_react8.default.createElement(import_react_ui8.Input.DescriptionAndValidation, null, error));
+  var _effect = (0, import_tracking8.useSignals)();
+  try {
+    const { status, error } = getStatus();
+    return disabled && !getValue3() ? null : disabled && inputOnly ? /* @__PURE__ */ import_react8.default.createElement("p", null, getValue3() ?? "") : /* @__PURE__ */ import_react8.default.createElement(import_react_ui8.Input.Root, {
+      validationValence: status
+    }, !inputOnly && /* @__PURE__ */ import_react8.default.createElement(InputHeader, {
+      error
+    }, /* @__PURE__ */ import_react8.default.createElement(import_react_ui8.Input.Label, null, label)), disabled ? /* @__PURE__ */ import_react8.default.createElement("p", null, getValue3() ?? "") : /* @__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_react8.default.createElement(import_react_ui8.Input.DescriptionAndValidation, null, error));
+  } finally {
+    _effect.f();
+  }
 };
-var BooleanInput = ({ type, label, inputOnly, getStatus, getValue: getValue3, onValueChange }) => {
-  const { status, error } = getStatus();
-  const checked = Boolean(getValue3());
-  return /* @__PURE__ */ import_react8.default.createElement(import_react_ui8.Input.Root, {
-    validationValence: status
-  }, !inputOnly && /* @__PURE__ */ import_react8.default.createElement(InputHeader, {
-    error
-  }, /* @__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_react8.default.createElement(import_react_ui8.Input.DescriptionAndValidation, null, error));
+var BooleanInput = ({ type, label, inputOnly, getStatus, getValue: getValue3, onValueChange, disabled }) => {
+  var _effect = (0, import_tracking8.useSignals)();
+  try {
+    const { status, error } = getStatus();
+    const checked = Boolean(getValue3());
+    const { t } = (0, import_react_ui8.useTranslation)(translationKey);
+    return /* @__PURE__ */ import_react8.default.createElement(import_react_ui8.Input.Root, {
+      validationValence: status
+    }, !inputOnly && /* @__PURE__ */ import_react8.default.createElement(InputHeader, {
+      error
+    }, /* @__PURE__ */ import_react8.default.createElement(import_react_ui8.Input.Label, null, label)), disabled ? /* @__PURE__ */ import_react8.default.createElement("p", null, t(checked ? "boolean input true value" : "boolean input false value")) : /* @__PURE__ */ import_react8.default.createElement(import_react_ui8.Input.Switch, {
+      checked,
+      onCheckedChange: (value) => onValueChange(type, value)
+    }), inputOnly && /* @__PURE__ */ import_react8.default.createElement(import_react_ui8.Input.DescriptionAndValidation, null, error));
+  } finally {
+    _effect.f();
+  }
 };
 var SelectInput = ({ type, label, inputOnly, disabled, placeholder, options, getStatus, getValue: getValue3, onValueChange }) => {
-  const { status, error } = getStatus();
-  const value = getValue3();
-  const handleValueChange = (0, import_react8.useCallback)((value2) => onValueChange(type, value2), [
-    type,
-    onValueChange
-  ]);
-  return /* @__PURE__ */ import_react8.default.createElement(import_react_ui8.Input.Root, {
-    validationValence: status
-  }, !inputOnly && /* @__PURE__ */ import_react8.default.createElement(InputHeader, {
-    error
-  }, /* @__PURE__ */ import_react8.default.createElement(import_react_ui8.Input.Label, null, label)), /* @__PURE__ */ import_react8.default.createElement(import_react_ui8.Select.Root, {
-    value,
-    onValueChange: handleValueChange
-  }, /* @__PURE__ */ import_react8.default.createElement(import_react_ui8.Select.TriggerButton, {
-    classNames: "is-full",
-    disabled,
-    placeholder
-  }), /* @__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: value2, label: label2 }) => (
-    // NOTE: Numeric values are converted to and from strings.
-    /* @__PURE__ */ import_react8.default.createElement(import_react_ui8.Select.Option, {
-      key: String(value2),
-      value: String(value2)
-    }, label2 ?? String(value2))
-  )))))), inputOnly && /* @__PURE__ */ import_react8.default.createElement(import_react_ui8.Input.DescriptionAndValidation, null, error));
+  var _effect = (0, import_tracking8.useSignals)();
+  try {
+    const { status, error } = getStatus();
+    const value = getValue3();
+    const handleValueChange = (0, import_react8.useCallback)((value2) => onValueChange(type, value2), [
+      type,
+      onValueChange
+    ]);
+    return disabled && !value ? null : /* @__PURE__ */ import_react8.default.createElement(import_react_ui8.Input.Root, {
+      validationValence: status
+    }, !inputOnly && /* @__PURE__ */ import_react8.default.createElement(InputHeader, {
+      error
+    }, /* @__PURE__ */ import_react8.default.createElement(import_react_ui8.Input.Label, null, label)), disabled ? /* @__PURE__ */ import_react8.default.createElement("p", null, options?.find(({ value: optionValue }) => optionValue === value)?.label ?? String(value)) : /* @__PURE__ */ import_react8.default.createElement(import_react_ui8.Select.Root, {
+      value,
+      onValueChange: handleValueChange
+    }, /* @__PURE__ */ import_react8.default.createElement(import_react_ui8.Select.TriggerButton, {
+      classNames: "is-full",
+      disabled,
+      placeholder
+    }), /* @__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: value2, label: label2 }) => (
+      // NOTE: Numeric values are converted to and from strings.
+      /* @__PURE__ */ import_react8.default.createElement(import_react_ui8.Select.Option, {
+        key: String(value2),
+        value: String(value2)
+      }, label2 ?? String(value2))
+    )))))), inputOnly && /* @__PURE__ */ import_react8.default.createElement(import_react_ui8.Input.DescriptionAndValidation, null, error));
+  } finally {
+    _effect.f();
+  }
 };
 var MarkdownInput = ({ type, label, inputOnly, disabled, placeholder, getStatus, getValue: getValue3, onValueChange, onBlur }) => {
-  const { status, error } = getStatus();
-  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_react8.useEffect)(() => {
-    adjustHeight();
-  }, [
-    adjustHeight
-  ]);
-  (0, import_react8.useEffect)(() => {
-    adjustHeight();
-  }, [
-    getValue3(),
-    adjustHeight
-  ]);
-  return /* @__PURE__ */ import_react8.default.createElement(import_react_ui8.Input.Root, {
-    validationValence: status
-  }, !inputOnly && /* @__PURE__ */ import_react8.default.createElement(InputHeader, {
-    error
-  }, /* @__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,
-    value: getValue3() ?? "",
-    classNames: "min-bs-auto max-h-40 overflow-auto",
-    onChange: (event) => onValueChange(type, event.target.value),
-    onBlur,
-    style: {
-      resize: "none"
-    },
-    spellCheck: false
-  }), inputOnly && /* @__PURE__ */ import_react8.default.createElement(import_react_ui8.Input.Validation, null, error));
+  var _effect = (0, import_tracking8.useSignals)();
+  try {
+    const { status, error } = getStatus();
+    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_react8.useEffect)(() => {
+      adjustHeight();
+    }, [
+      adjustHeight
+    ]);
+    (0, import_react8.useEffect)(() => {
+      adjustHeight();
+    }, [
+      getValue3(),
+      adjustHeight
+    ]);
+    return /* @__PURE__ */ import_react8.default.createElement(import_react_ui8.Input.Root, {
+      validationValence: status
+    }, !inputOnly && /* @__PURE__ */ import_react8.default.createElement(InputHeader, {
+      error
+    }, /* @__PURE__ */ import_react8.default.createElement(import_react_ui8.Input.Label, null, label)), disabled ? /* @__PURE__ */ import_react8.default.createElement("p", null, getValue3() ?? "") : /* @__PURE__ */ import_react8.default.createElement(import_react_ui8.Input.TextArea, {
+      ref: textareaRef,
+      disabled,
+      placeholder,
+      value: getValue3() ?? "",
+      classNames: "min-bs-auto max-h-40 overflow-auto",
+      onChange: (event) => onValueChange(type, event.target.value),
+      onBlur,
+      style: {
+        resize: "none"
+      },
+      spellCheck: false
+    }), inputOnly && /* @__PURE__ */ import_react8.default.createElement(import_react_ui8.Input.Validation, null, error));
+  } finally {
+    _effect.f();
+  }
 };
 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 }) => {
@@ -922,7 +1048,7 @@ var flatMap = (errors) => {
   }, {});
 };
 var useRefQueryLookupHandler = ({ space }) => {
-  const handleRefQueryLookup = (0, import_react13.useCallback)(async (typeInfo) => {
+  return (0, import_react13.useCallback)(async (typeInfo) => {
     if (!space) {
       return [];
     }
@@ -942,7 +1068,6 @@ var useRefQueryLookupHandler = ({ space }) => {
   }, [
     space
   ]);
-  return handleRefQueryLookup;
 };
 var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-form/src/hooks/useQueryRefOptions.ts";
 var useQueryRefOptions = ({ refTypeInfo, onQueryRefOptions }) => {
@@ -1014,12 +1139,10 @@ var useInputProps = (path = []) => {
   ]);
 };
 var FormProvider = ({ children, formRef, autoSave, ...formOptions }) => {
-  const form = useForm(formOptions);
-  (0, import_react11.useEffect)(() => {
-    if (!formRef?.current) {
-      return;
-    }
-    const handleKeyDown = (event) => {
+  var _effect = (0, import_tracking11.useSignals)();
+  try {
+    const form = useForm(formOptions);
+    const handleKeyDown = (0, import_react11.useCallback)((event) => {
       const keyIsEnter = event.key === "Enter";
       const modifierUsed = event.ctrlKey || event.altKey || event.metaKey || event.shiftKey;
       const inputIsTextarea = event.target.tagName.toLowerCase() === "textarea";
@@ -1034,43 +1157,55 @@ var FormProvider = ({ children, formRef, autoSave, ...formOptions }) => {
           event.target.blur();
         }
       }
-    };
-    const formElement = formRef.current;
-    formElement.addEventListener("keydown", handleKeyDown);
-    return () => formElement.removeEventListener("keydown", handleKeyDown);
-  }, [
-    formRef,
-    form.canSave,
-    form.formIsValid,
-    form.handleSave,
-    autoSave
-  ]);
-  return /* @__PURE__ */ import_react11.default.createElement(FormContext.Provider, {
-    value: form
-  }, children);
+    }, [
+      form,
+      autoSave
+    ]);
+    (0, import_react11.useEffect)(() => {
+      if (!formRef?.current) {
+        return;
+      }
+      const formElement = formRef.current;
+      formElement.addEventListener("keydown", handleKeyDown);
+      return () => formElement.removeEventListener("keydown", handleKeyDown);
+    }, [
+      formRef,
+      form.canSave,
+      form.formIsValid,
+      form.handleSave,
+      autoSave
+    ]);
+    return /* @__PURE__ */ import_react11.default.createElement(FormContext.Provider, {
+      value: form
+    }, children);
+  } finally {
+    _effect.f();
+  }
 };
-var FormActions = ({ onCancel, readonly }) => {
-  const { t } = (0, import_react_ui9.useTranslation)(translationKey);
-  const { canSave, handleSave } = useFormContext();
-  return /* @__PURE__ */ import_react10.default.createElement("div", {
-    role: "none",
-    className: "mt-2 flex justify-center"
-  }, /* @__PURE__ */ import_react10.default.createElement("div", {
-    role: "none",
-    className: (0, import_react_ui_theme7.mx)(onCancel && !readonly && "grid grid-cols-2 gap-2")
-  }, 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_react10.default.createElement(import_react_ui9.IconButton, {
-    type: "submit",
-    "data-testid": "save-button",
-    disabled: !canSave,
-    icon: "ph--check--regular",
-    label: t("button save"),
-    onClick: handleSave
-  })));
+var FormActions = ({ readonly, onCancel }) => {
+  var _effect = (0, import_tracking10.useSignals)();
+  try {
+    const { t } = (0, import_react_ui9.useTranslation)(translationKey);
+    const { canSave, handleSave } = useFormContext();
+    return /* @__PURE__ */ import_react10.default.createElement("div", {
+      role: "none",
+      className: "flex [&_button]:grow gap-1"
+    }, 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_react10.default.createElement(import_react_ui9.IconButton, {
+      type: "submit",
+      "data-testid": "save-button",
+      disabled: !canSave,
+      icon: "ph--check--regular",
+      label: t("button save"),
+      onClick: handleSave
+    }));
+  } finally {
+    _effect.f();
+  }
 };
 var parseValue = ({ type, format, value }) => {
   if (value === void 0 || value === null || value === "") {
@@ -1363,229 +1498,250 @@ var getRefProps = (property) => {
   return void 0;
 };
 var __dxlog_file3 = "/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_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.`, {
-    F: __dxlog_file3,
-    L: 39,
-    S: void 0,
-    A: [
-      "Array.isArray(values)",
-      "`Values at path ${path?.join('.')} must be an array.`"
-    ]
-  });
-  const label = title ?? (0, import_effect6.pipe)(name, import_String2.capitalize);
-  const elementType = findArrayElementType(ast);
-  const getDefaultObjectValue = (typeNode) => {
-    const baseNode = (0, import_effect7.findNode)(typeNode, import_effect7.isDiscriminatedUnion);
-    const typeLiteral = baseNode ? (0, import_effect7.getDiscriminatedType)(baseNode, {}) : (0, import_effect7.findNode)(typeNode, import_effect6.SchemaAST.isTypeLiteral);
-    if (!typeLiteral) {
-      return {};
-    }
-    return Object.fromEntries((0, import_schema4.getSchemaProperties)(typeLiteral, {}).map((prop) => [
-      prop.name,
-      prop.defaultValue
-    ]));
-  };
-  const getDefaultValue = () => type === "object" && elementType ? getDefaultObjectValue(elementType) : import_effect7.SimpleType.getDefaultValue(type);
-  const handleAdd = (0, import_react16.useCallback)(() => {
-    inputProps.onValueChange(type, [
-      ...values,
-      getDefaultValue()
+  var _effect = (0, import_tracking13.useSignals)();
+  try {
+    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.`, {
+      F: __dxlog_file3,
+      L: 36,
+      S: void 0,
+      A: [
+        "Array.isArray(values)",
+        "`Values at path ${path?.join('.')} must be an array.`"
+      ]
+    });
+    const label = title ?? (0, import_effect6.pipe)(name, import_String2.capitalize);
+    const elementType = findArrayElementType(ast);
+    const getDefaultObjectValue = (typeNode) => {
+      const baseNode = (0, import_effect7.findNode)(typeNode, import_effect7.isDiscriminatedUnion);
+      const typeLiteral = baseNode ? (0, import_effect7.getDiscriminatedType)(baseNode, {}) : (0, import_effect7.findNode)(typeNode, import_effect6.SchemaAST.isTypeLiteral);
+      if (!typeLiteral) {
+        return {};
+      }
+      return Object.fromEntries((0, import_schema4.getSchemaProperties)(typeLiteral, {}).map((prop) => [
+        prop.name,
+        prop.defaultValue
+      ]));
+    };
+    const getDefaultValue = () => type === "object" && elementType ? getDefaultObjectValue(elementType) : import_effect7.SimpleType.getDefaultValue(type);
+    const handleAdd = (0, import_react16.useCallback)(() => {
+      inputProps.onValueChange(type, [
+        ...values,
+        getDefaultValue()
+      ]);
+    }, [
+      type,
+      elementType,
+      inputProps,
+      values
     ]);
-  }, [
-    type,
-    elementType,
-    inputProps,
-    values
-  ]);
-  const handleRemove = (0, import_react16.useCallback)((index) => {
-    const newValues = values.filter((_, i) => i !== index);
-    inputProps.onValueChange(type, newValues);
-  }, [
-    type,
-    inputProps,
-    values
-  ]);
-  if (!elementType) {
-    return null;
+    const handleRemove = (0, import_react16.useCallback)((index) => {
+      const newValues = values.filter((_, i) => i !== index);
+      inputProps.onValueChange(type, newValues);
+    }, [
+      type,
+      inputProps,
+      values
+    ]);
+    if (!elementType) {
+      return null;
+    }
+    return readonly && values.length < 1 ? null : /* @__PURE__ */ import_react16.default.createElement(import_react16.default.Fragment, null, /* @__PURE__ */ import_react16.default.createElement(InputHeader, null, label), /* @__PURE__ */ import_react16.default.createElement("div", {
+      role: "none",
+      className: readonly ? "flex flex-wrap gap-1 mlb-1" : values.length > 0 ? "grid gap-1 grid-cols-[1fr_min-content] mlb-1" : "hidden"
+    }, values.map((_value, index) => {
+      const field = /* @__PURE__ */ import_react16.default.createElement(FormField, {
+        property: {
+          ...property,
+          array: false,
+          ast: elementType
+        },
+        path: [
+          ...path ?? [],
+          index
+        ],
+        readonly,
+        inline: true,
+        Custom,
+        lookupComponent
+      });
+      return readonly ? field : /* @__PURE__ */ import_react16.default.createElement(import_react16.Fragment, {
+        key: index
+      }, /* @__PURE__ */ import_react16.default.createElement("div", {
+        role: "none"
+      }, field), /* @__PURE__ */ import_react16.default.createElement(import_react_ui10.IconButton, {
+        icon: "ph--trash--regular",
+        iconOnly: true,
+        label: t("button remove"),
+        onClick: () => handleRemove(index),
+        classNames: "self-center"
+      }));
+    })), !readonly && /* @__PURE__ */ import_react16.default.createElement(import_react_ui10.IconButton, {
+      classNames: "is-full mlb-1 flex",
+      icon: "ph--plus--regular",
+      label: t("add field"),
+      onClick: handleAdd
+    }));
+  } finally {
+    _effect.f();
   }
-  return /* @__PURE__ */ import_react16.default.createElement("div", {
-    role: "none",
-    className: (0, import_react_ui_theme9.mx)(padding)
-  }, /* @__PURE__ */ import_react16.default.createElement(InputHeader, null, label), /* @__PURE__ */ import_react16.default.createElement("div", {
-    role: "none",
-    className: "flex flex-col gap-1"
-  }, values.map((_value, index) => /* @__PURE__ */ import_react16.default.createElement("div", {
-    key: index,
-    role: "none",
-    className: "flex items-center gap-1"
-  }, /* @__PURE__ */ import_react16.default.createElement("div", {
-    role: "none",
-    className: "flex-1"
-  }, /* @__PURE__ */ import_react16.default.createElement(FormField, {
-    property: {
-      ...property,
-      array: false,
-      ast: elementType
-    },
-    path: [
-      ...path ?? [],
-      index
-    ],
-    readonly,
-    inline: true,
-    Custom,
-    lookupComponent
-  })), /* @__PURE__ */ import_react16.default.createElement(import_react_ui10.IconButton, {
-    icon: "ph--trash--regular",
-    iconOnly: true,
-    label: t("button remove"),
-    onClick: () => handleRemove(index)
-  })))), /* @__PURE__ */ import_react16.default.createElement("div", {
-    role: "none",
-    className: "flex justify-between items-center plb-1"
-  }, /* @__PURE__ */ import_react16.default.createElement(import_react_ui10.IconButton, {
-    icon: "ph--plus--regular",
-    iconOnly: true,
-    label: t("button add"),
-    onClick: handleAdd
-  })));
 };
 var RefField = ({ type, label, disabled, placeholder, inputOnly, array, ast, getValue: getValue3, onBlur, onQueryRefOptions, onValueChange, ...restInputProps }) => {
-  const refTypeInfo = (0, import_react17.useMemo)(() => ast ? (0, import_effect11.findAnnotation)(ast, import_echo_schema9.ReferenceAnnotationId) : void 0, [
-    ast
-  ]);
-  const { options: availableOptions, loading: _loading } = useQueryRefOptions({
-    refTypeInfo,
-    onQueryRefOptions
-  });
-  if (refTypeInfo && refTypeInfo?.typename === (0, import_echo_schema9.getTypeAnnotation)(import_echo_schema9.Expando)?.typename || !onQueryRefOptions) {
-    return /* @__PURE__ */ import_react17.default.createElement(RefFieldFallback, {
-      type,
-      label,
-      placeholder,
-      disabled,
-      inputOnly,
-      getValue: getValue3,
-      onBlur,
-      onValueChange,
-      ...restInputProps
+  var _effect = (0, import_tracking14.useSignals)();
+  try {
+    const { t } = (0, import_react_ui11.useTranslation)(translationKey);
+    const refTypeInfo = (0, import_react17.useMemo)(() => ast ? (0, import_effect11.findAnnotation)(ast, import_echo_schema9.ReferenceAnnotationId) : void 0, [
+      ast
+    ]);
+    const { options: availableOptions, loading: _loading } = useQueryRefOptions({
+      refTypeInfo,
+      onQueryRefOptions
     });
-  }
-  const handleGetValue = (0, import_react17.useCallback)(() => {
-    const formValue = getValue3();
-    const unknownToRefOption = (val) => {
-      if (import_echo_schema9.Ref.isRef(val)) {
-        const dxnString = val.dxn.toString();
-        const matchingOption = availableOptions.find((option2) => option2.id === dxnString);
-        if (matchingOption) {
-          return matchingOption;
+    if (refTypeInfo && refTypeInfo?.typename === (0, import_echo_schema9.getTypeAnnotation)(import_echo_schema9.Expando)?.typename || !onQueryRefOptions) {
+      return /* @__PURE__ */ import_react17.default.createElement(RefFieldFallback, {
+        type,
+        label,
+        placeholder,
+        disabled,
+        inputOnly,
+        getValue: getValue3,
+        onBlur,
+        onValueChange,
+        ...restInputProps
+      });
+    }
+    const handleGetValue = (0, import_react17.useCallback)(() => {
+      const formValue = getValue3();
+      const unknownToRefOption = (val) => {
+        if (import_echo_schema9.Ref.isRef(val)) {
+          const dxnString = val.dxn.toString();
+          const matchingOption = availableOptions.find((option2) => option2.id === dxnString);
+          if (matchingOption) {
+            return matchingOption;
+          }
         }
+        return void 0;
+      };
+      if (array && Array.isArray(formValue)) {
+        return formValue.map(unknownToRefOption).filter(import_util5.isNonNullable) ?? [];
       }
-      return void 0;
-    };
-    if (array && Array.isArray(formValue)) {
-      return formValue.map(unknownToRefOption).filter(import_util5.isNonNullable) ?? [];
-    }
-    const option = unknownToRefOption(formValue);
-    if (option) {
-      return [
-        option
-      ];
-    }
-    return [];
-  }, [
-    getValue3,
-    availableOptions,
-    array
-  ]);
-  const handleSearch = (0, import_react17.useCallback)((text, ids) => availableOptions.filter((option) => !ids.includes(option.id)).filter((option) => option.label.toLowerCase().includes(text.toLowerCase())).map((option) => ({
-    id: option.id,
-    label: option.label,
-    hue: option.hue
-  })), [
-    availableOptions
-  ]);
-  const handleUpdate = (0, import_react17.useCallback)((ids) => {
-    if (ids.length === 0) {
-      onValueChange("object", void 0);
-      return;
-    }
-    const refs = ids.map((id) => {
-      const item = availableOptions.find((option) => option.id === id);
-      if (item) {
-        const dxn = import_keys2.DXN.parse(item.id);
-        return import_echo_schema9.Ref.fromDXN(dxn);
+      const option = unknownToRefOption(formValue);
+      if (option) {
+        return [
+          option
+        ];
+      }
+      return [];
+    }, [
+      getValue3,
+      availableOptions,
+      array
+    ]);
+    const handleSearch = (0, import_react17.useCallback)((text, ids) => availableOptions.filter((option) => !ids.includes(option.id)).filter((option) => option.label.toLowerCase().includes(text.toLowerCase())).map((option) => ({
+      id: option.id,
+      label: option.label,
+      hue: option.hue
+    })), [
+      availableOptions
+    ]);
+    const handleUpdate = (0, import_react17.useCallback)((ids) => {
+      if (ids.length === 0) {
+        onValueChange("object", void 0);
+        return;
+      }
+      const refs = ids.map((id) => {
+        const item = availableOptions.find((option) => option.id === id);
+        if (item) {
+          const dxn = import_keys2.DXN.parse(item.id);
+          return import_echo_schema9.Ref.fromDXN(dxn);
+        }
+        return null;
+      }).filter(import_util5.isNonNullable);
+      if (array) {
+        onValueChange("object", refs);
+      } else {
+        onValueChange("object", refs[0]);
       }
+    }, [
+      availableOptions,
+      array,
+      onValueChange
+    ]);
+    const tagPickerMode = (0, import_react17.useMemo)(() => array ? "multi-select" : "single-select", [
+      array
+    ]);
+    if (!refTypeInfo) {
       return null;
-    }).filter(import_util5.isNonNullable);
-    if (array) {
-      onValueChange("object", refs);
-    } else {
-      onValueChange("object", refs[0]);
     }
-  }, [
-    availableOptions,
-    array,
-    onValueChange
-  ]);
-  const tagPickerMode = (0, import_react17.useMemo)(() => array ? "multi-select" : "single-select", [
-    array
-  ]);
-  if (!refTypeInfo) {
-    return null;
+    const { status, error } = restInputProps.getStatus();
+    const items = handleGetValue();
+    return disabled && items.length < 1 ? null : /* @__PURE__ */ import_react17.default.createElement(import_react_ui11.Input.Root, {
+      validationValence: status
+    }, !inputOnly && /* @__PURE__ */ import_react17.default.createElement(InputHeader, {
+      error
+    }, /* @__PURE__ */ import_react17.default.createElement(import_react_ui11.Input.Label, null, label)), /* @__PURE__ */ import_react17.default.createElement("div", {
+      "data-no-submit": true
+    }, disabled ? items.length < 1 ? /* @__PURE__ */ import_react17.default.createElement("p", {
+      className: (0, import_react_ui_theme8.mx)(import_react_ui_theme8.descriptionText, "mbe-2")
+    }, t("empty readonly ref field label")) : items.map((item) => /* @__PURE__ */ import_react17.default.createElement(import_react18.DxRefTag, {
+      key: item.id,
+      refid: item.id,
+      rootclassname: "mie-1",
+      style: {
+        marginInlineEnd: ".25rem"
+      }
+    }, item.label)) : /* @__PURE__ */ import_react17.default.createElement(import_react_ui_tag_picker.TagPicker, {
+      readonly: disabled,
+      items,
+      mode: tagPickerMode,
+      onBlur: (event) => onBlur(event),
+      onUpdate: handleUpdate,
+      onSearch: handleSearch,
+      classNames: "rounded-sm bg-inputSurface p-1.5"
+    })), inputOnly && /* @__PURE__ */ import_react17.default.createElement(import_react_ui11.Input.DescriptionAndValidation, null, error));
+  } finally {
+    _effect.f();
   }
-  const { status, error } = restInputProps.getStatus();
-  return /* @__PURE__ */ import_react17.default.createElement(import_react_ui11.Input.Root, {
-    validationValence: status
-  }, !inputOnly && /* @__PURE__ */ import_react17.default.createElement(InputHeader, {
-    error
-  }, /* @__PURE__ */ import_react17.default.createElement(import_react_ui11.Input.Label, null, label)), /* @__PURE__ */ import_react17.default.createElement("div", {
-    "data-no-submit": true
-  }, /* @__PURE__ */ import_react17.default.createElement(import_react_ui_tag_picker.TagPicker, {
-    items: handleGetValue(),
-    mode: tagPickerMode,
-    onBlur: (event) => onBlur(event),
-    onUpdate: handleUpdate,
-    onSearch: handleSearch,
-    classNames: "rounded-sm bg-input p-1.5"
-  })), inputOnly && /* @__PURE__ */ import_react17.default.createElement(import_react_ui11.Input.DescriptionAndValidation, null, error));
 };
 var RefFieldFallback = ({ type, label, disabled, placeholder, inputOnly, getValue: getValue3, onValueChange, ...restInputProps }) => {
-  const handleOnValueChange = (_type, dxnString) => {
-    const dxn = import_keys2.DXN.tryParse(dxnString);
-    if (dxn) {
-      onValueChange?.("object", import_echo_schema9.Ref.fromDXN(dxn));
-    } else if (dxnString === "") {
-      onValueChange?.("object", void 0);
-    } else {
-      onValueChange?.("string", dxnString);
-    }
-  };
-  const handleGetValue = () => {
-    const formValue = getValue3();
-    if (typeof formValue === "string") {
-      return formValue;
-    }
-    if (import_echo_schema9.Ref.isRef(formValue)) {
-      return formValue.dxn.toString();
-    }
-    return void 0;
-  };
-  return /* @__PURE__ */ import_react17.default.createElement(TextInput, {
-    type,
-    label,
-    disabled,
-    placeholder,
-    inputOnly,
-    getValue: handleGetValue,
-    onValueChange: handleOnValueChange,
-    ...restInputProps
-  });
+  var _effect = (0, import_tracking14.useSignals)();
+  try {
+    const handleOnValueChange = (_type, dxnString) => {
+      const dxn = import_keys2.DXN.tryParse(dxnString);
+      if (dxn) {
+        onValueChange?.("object", import_echo_schema9.Ref.fromDXN(dxn));
+      } else if (dxnString === "") {
+        onValueChange?.("object", void 0);
+      } else {
+        onValueChange?.("string", dxnString);
+      }
+    };
+    const handleGetValue = () => {
+      const formValue = getValue3();
+      if (typeof formValue === "string") {
+        return formValue;
+      }
+      if (import_echo_schema9.Ref.isRef(formValue)) {
+        return formValue.dxn.toString();
+      }
+      return void 0;
+    };
+    return /* @__PURE__ */ import_react17.default.createElement(TextInput, {
+      type,
+      label,
+      disabled,
+      placeholder,
+      inputOnly,
+      getValue: handleGetValue,
+      onValueChange: handleOnValueChange,
+      ...restInputProps
+    });
+  } finally {
+    _effect.f();
+  }
 };
 var getInputComponent = (type, format) => {
   switch (format) {
@@ -1604,556 +1760,600 @@ var getInputComponent = (type, format) => {
   }
 };
 var FormField = ({ property, path, readonly, inline, onQueryRefOptions, lookupComponent, Custom }) => {
-  const inputProps = useInputProps(path);
-  const { ast, name, type, format, title, description, options, examples, array } = property;
-  const label = (0, import_react15.useMemo)(() => title ?? (0, import_effect4.pipe)(name, import_String.capitalize), [
-    title,
-    name
-  ]);
-  const placeholder = (0, import_react15.useMemo)(() => examples?.length ? `Example: "${examples[0]}"` : description, [
-    examples,
-    description
-  ]);
-  const FoundComponent = lookupComponent?.({
-    prop: name,
-    schema: import_effect4.Schema.make(ast),
-    inputProps: {
-      type,
-      format,
-      label,
-      disabled: readonly,
-      placeholder,
-      ...inputProps
-    }
-  });
-  if (FoundComponent) {
-    return /* @__PURE__ */ import_react15.default.createElement("div", {
-      role: "none"
-    }, FoundComponent);
-  }
-  const jsonPath = (0, import_effect5.createJsonPath)(path ?? []);
-  const CustomComponent = Custom?.[jsonPath];
-  if (CustomComponent) {
-    return /* @__PURE__ */ import_react15.default.createElement(CustomComponent, {
-      type,
-      format,
-      label,
-      inputOnly: inline,
-      placeholder,
-      disabled: readonly,
-      ...inputProps
-    });
-  }
-  const refProps = getRefProps(property);
-  if (refProps) {
-    return /* @__PURE__ */ import_react15.default.createElement(RefField, {
-      ast: refProps.ast,
-      array: refProps.isArray,
-      type,
-      format,
-      label,
-      placeholder,
-      disabled: readonly,
-      inputOnly: inline,
-      onQueryRefOptions,
-      ...inputProps
-    });
-  }
-  if (array) {
-    return /* @__PURE__ */ import_react15.default.createElement(ArrayField, {
-      property,
-      path,
-      inputProps,
-      readonly,
-      Custom
+  var _effect = (0, import_tracking12.useSignals)();
+  try {
+    const inputProps = useInputProps(path);
+    const { ast, name, type, format, title, description, options, examples, array } = property;
+    const label = (0, import_react15.useMemo)(() => title ?? (0, import_effect4.pipe)(name, import_String.capitalize), [
+      title,
+      name
+    ]);
+    const placeholder = (0, import_react15.useMemo)(() => examples?.length ? `Example: "${examples[0]}"` : description, [
+      examples,
+      description
+    ]);
+    const FoundComponent = lookupComponent?.({
+      prop: name,
+      schema: import_effect4.Schema.make(ast),
+      inputProps: {
+        type,
+        format,
+        label,
+        disabled: readonly,
+        placeholder,
+        ...inputProps
+      }
     });
-  }
-  const InputComponent = getInputComponent(type, format);
-  if (InputComponent) {
-    return /* @__PURE__ */ import_react15.default.createElement("div", {
-      role: "none"
-    }, /* @__PURE__ */ import_react15.default.createElement(InputComponent, {
-      type,
-      format,
-      label,
-      inputOnly: inline,
-      placeholder,
-      disabled: readonly,
-      ...inputProps
-    }));
-  }
-  if (options) {
-    return /* @__PURE__ */ import_react15.default.createElement("div", {
-      role: "none"
-    }, /* @__PURE__ */ import_react15.default.createElement(SelectInput, {
-      type,
-      format,
-      disabled: readonly,
-      inputOnly: inline,
-      label,
-      options: options.map((option) => ({
-        value: option,
-        label: String(option)
-      })),
-      placeholder,
-      ...inputProps
-    }));
-  }
-  if (type === "object") {
-    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_effect4.SchemaAST.isTypeLiteral);
-    if (typeLiteral) {
-      return /* @__PURE__ */ import_react15.default.createElement("div", {
-        role: "none"
-      }, !inline && /* @__PURE__ */ import_react15.default.createElement("h3", {
-        className: "text-lg mbs-2 mbe-1"
-      }, label), /* @__PURE__ */ import_react15.default.createElement(FormFields, {
-        schema: import_effect4.Schema.make(typeLiteral),
+    if (FoundComponent) {
+      return FoundComponent;
+    }
+    const jsonPath = (0, import_effect5.createJsonPath)(path ?? []);
+    const CustomComponent = Custom?.[jsonPath];
+    if (CustomComponent) {
+      return /* @__PURE__ */ import_react15.default.createElement(CustomComponent, {
+        type,
+        format,
+        label,
+        inputOnly: inline,
+        placeholder,
+        disabled: readonly,
+        ...inputProps
+      });
+    }
+    const refProps = getRefProps(property);
+    if (refProps) {
+      return /* @__PURE__ */ import_react15.default.createElement(RefField, {
+        ast: refProps.ast,
+        array: refProps.isArray,
+        type,
+        format,
+        label,
+        placeholder,
+        disabled: readonly,
+        inputOnly: inline,
+        onQueryRefOptions,
+        ...inputProps
+      });
+    }
+    if (array) {
+      return /* @__PURE__ */ import_react15.default.createElement(ArrayField, {
+        property,
         path,
+        inputProps,
         readonly,
-        onQueryRefOptions,
-        Custom,
-        lookupComponent
-      }));
+        Custom
+      });
+    }
+    const InputComponent = getInputComponent(type, format);
+    if (InputComponent) {
+      return /* @__PURE__ */ import_react15.default.createElement(InputComponent, {
+        type,
+        format,
+        label,
+        inputOnly: inline,
+        placeholder,
+        disabled: readonly,
+        ...inputProps
+      });
+    }
+    if (options) {
+      return /* @__PURE__ */ import_react15.default.createElement(SelectInput, {
+        type,
+        format,
+        disabled: readonly,
+        inputOnly: inline,
+        label,
+        options: options.map((option) => ({
+          value: option,
+          label: String(option)
+        })),
+        placeholder,
+        ...inputProps
+      });
     }
+    if (type === "object") {
+      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_effect4.SchemaAST.isTypeLiteral);
+      if (typeLiteral) {
+        return /* @__PURE__ */ import_react15.default.createElement(import_react15.default.Fragment, null, !inline && /* @__PURE__ */ import_react15.default.createElement("h3", {
+          className: "text-lg mbs-2 mbe-1 first:mbs-0"
+        }, label), /* @__PURE__ */ import_react15.default.createElement(FormFields, {
+          schema: import_effect4.Schema.make(typeLiteral),
+          path,
+          readonly,
+          onQueryRefOptions,
+          Custom,
+          lookupComponent
+        }));
+      }
+    }
+    return null;
+  } finally {
+    _effect.f();
   }
-  return null;
 };
-var FormFields = ({ schema, path, filter, sort, readonly, onQueryRefOptions, lookupComponent, Custom }) => {
-  const values = useFormValues(path);
-  const properties = (0, import_react15.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;
-  }, [
-    schema,
-    values,
-    filter,
-    sort
-  ]);
-  return /* @__PURE__ */ import_react15.default.createElement("div", {
-    role: "form",
-    className: (0, import_react_ui_theme8.mx)("flex flex-col w-full gap-2")
-  }, properties.map((property) => {
-    return /* @__PURE__ */ import_react15.default.createElement(FormField, {
-      key: property.name,
-      property,
-      path: [
-        ...path ?? [],
-        property.name
-      ],
+var FormFields = ({ classNames, Custom, schema, path, filter, sort, readonly, lookupComponent, onQueryRefOptions }) => {
+  var _effect = (0, import_tracking12.useSignals)();
+  try {
+    const values = useFormValues(path);
+    const properties = (0, import_react15.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;
+    }, [
+      schema,
+      values,
+      filter,
+      sort
+    ]);
+    return (
+      // TODO(burdon): Consistent padding (with composite forms).
+      /* @__PURE__ */ import_react15.default.createElement("div", {
+        role: "form",
+        className: (0, import_react_ui_theme7.mx)("p-2 is-full", classNames)
+      }, properties.map((property) => {
+        return /* @__PURE__ */ import_react15.default.createElement(FormField, {
+          key: property.name,
+          property,
+          path: [
+            ...path ?? [],
+            property.name
+          ],
+          readonly,
+          onQueryRefOptions,
+          lookupComponent,
+          Custom
+        });
+      }).filter(import_util4.isNotFalsy))
+    );
+  } finally {
+    _effect.f();
+  }
+};
+var Form = ({ classNames, schema, values: initialValues, path = [], autoFocus, readonly, filter, sort, autoSave, testId, onValuesChanged, onValidate, onSave, onCancel, onQueryRefOptions, lookupComponent, Custom }) => {
+  var _effect = (0, import_tracking9.useSignals)();
+  try {
+    const formRef = (0, import_react9.useRef)(null);
+    const onValid = (0, import_react9.useMemo)(() => autoSave ? onSave : void 0, [
+      autoSave,
+      onSave
+    ]);
+    (0, import_react9.useEffect)(() => {
+      if (autoFocus && formRef.current) {
+        const input = formRef.current.querySelector("input");
+        if (input) {
+          input.focus();
+        }
+      }
+    }, [
+      autoFocus
+    ]);
+    return /* @__PURE__ */ import_react9.default.createElement(FormProvider, {
+      formRef,
+      schema,
+      autoSave,
+      initialValues,
+      onValuesChanged,
+      onValidate,
+      onValid,
+      onSave
+    }, /* @__PURE__ */ import_react9.default.createElement("div", {
+      ref: formRef,
+      role: "none",
+      className: (0, import_react_ui_theme6.mx)("flex flex-col gap-4", classNames),
+      "data-testid": testId
+    }, /* @__PURE__ */ import_react9.default.createElement(FormFields, {
+      schema,
+      path,
       readonly,
+      filter,
+      sort,
       onQueryRefOptions,
       lookupComponent,
       Custom
-    });
-  }).filter(import_util4.isNotFalsy));
-};
-var Form = ({ classNames, schema, values: initialValues, path = [], autoFocus, readonly, filter, sort, autoSave, testId, onValuesChanged, onValidate, onSave, onCancel, onQueryRefOptions, lookupComponent, Custom }) => {
-  const formRef = (0, import_react9.useRef)(null);
-  const onValid = (0, import_react9.useMemo)(() => autoSave ? onSave : void 0, [
-    autoSave,
-    onSave
-  ]);
-  (0, import_react9.useEffect)(() => {
-    if (autoFocus && formRef.current) {
-      const input = formRef.current.querySelector("input");
-      if (input) {
-        input.focus();
-      }
-    }
-  }, [
-    autoFocus
-  ]);
-  return /* @__PURE__ */ import_react9.default.createElement(FormProvider, {
-    formRef,
-    schema,
-    autoSave,
-    initialValues,
-    onValuesChanged,
-    onValidate,
-    onValid,
-    onSave
-  }, /* @__PURE__ */ import_react9.default.createElement("div", {
-    ref: formRef,
-    role: "none",
-    className: (0, import_react_ui_theme6.mx)("p-2", classNames),
-    "data-testid": testId
-  }, /* @__PURE__ */ import_react9.default.createElement(FormFields, {
-    schema,
-    path,
-    readonly,
-    filter,
-    sort,
-    onQueryRefOptions,
-    lookupComponent,
-    Custom
-  }), (onCancel || onSave) && !autoSave && /* @__PURE__ */ import_react9.default.createElement(FormActions, {
-    onCancel,
-    readonly
-  })));
+    }), (onCancel || onSave) && !autoSave && /* @__PURE__ */ import_react9.default.createElement(FormActions, {
+      onCancel,
+      readonly
+    })));
+  } finally {
+    _effect.f();
+  }
 };
 var __dxlog_file4 = "/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_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_react3.useState)([]);
-  (0, import_react3.useEffect)(() => {
-    if (!registry) {
-      return;
-    }
-    const subscription = registry.query().subscribe((query) => setSchemas(query.results), {
-      fire: true
-    });
-    const t2 = setTimeout(async () => {
-      const schemas2 = await registry.query().run();
-      setSchemas(schemas2);
-    });
-    return () => {
-      clearTimeout(t2);
-      subscription?.();
-    };
-  }, [
-    registry
-  ]);
-  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_react3.useState)({
-    fieldSchema: (0, import_schema.getFormatSchema)(props?.format)
-  });
-  const handleValuesChanged = (0, import_react3.useCallback)((_props) => {
-    setFieldSchema((prev) => {
-      const fieldSchema2 = (0, import_schema.getFormatSchema)(_props.format);
-      if (prev.fieldSchema === fieldSchema2) {
-        return prev;
+  var _effect = (0, import_tracking3.useSignals)();
+  try {
+    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_react3.useState)([]);
+    (0, import_react3.useEffect)(() => {
+      if (!registry) {
+        return;
       }
-      return {
-        fieldSchema: fieldSchema2
+      const subscription = registry.query().subscribe((query) => setSchemas(query.results), {
+        fire: true
+      });
+      const t2 = setTimeout(async () => {
+        const schemas2 = await registry.query().run();
+        setSchemas(schemas2);
+      });
+      return () => {
+        clearTimeout(t2);
+        subscription?.();
       };
+    }, [
+      registry
+    ]);
+    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_react3.useState)({
+      fieldSchema: (0, import_schema.getFormatSchema)(props?.format)
     });
-    setReferenceSchema((prev) => {
-      if (_props.referenceSchema !== prev?.typename) {
-        const newSchema = schemas.find((schema) => schema.typename === _props.referenceSchema);
-        if (newSchema) {
-          return newSchema;
+    const handleValuesChanged = (0, import_react3.useCallback)((_props) => {
+      setFieldSchema((prev) => {
+        const fieldSchema2 = (0, import_schema.getFormatSchema)(_props.format);
+        if (prev.fieldSchema === fieldSchema2) {
+          return prev;
         }
-      }
-      return prev;
-    });
-    setProps((props2) => {
-      const type = import_echo_schema.formatToType[_props.format];
-      if (props2.type !== type) {
         return {
-          ...props2,
-          ..._props,
-          type
+          fieldSchema: fieldSchema2
         };
-      }
-      return _props;
-    });
-  }, [
-    schemas,
-    props.format,
-    props.referenceSchema
-  ]);
-  const handleValidate = (0, import_react3.useCallback)(({ property }) => {
-    if (property && view.fields.find((f) => f.path === property && f.path !== field.path)) {
-      return [
-        {
-          path: "property",
-          message: `property is not unique: '${property}'`
+      });
+      setReferenceSchema((prev) => {
+        if (_props.referenceSchema !== prev?.typename) {
+          const newSchema = schemas.find((schema) => schema.typename === _props.referenceSchema);
+          if (newSchema) {
+            return newSchema;
+          }
         }
-      ];
-    }
-  }, [
-    view.fields,
-    field
-  ]);
-  const handleSave = (0, import_react3.useCallback)((props2) => {
-    projection.setFieldProjection({
+        return prev;
+      });
+      setProps((props2) => {
+        const type = import_echo_schema.formatToType[_props.format];
+        if (props2.type !== type) {
+          return {
+            ...props2,
+            ..._props,
+            type
+          };
+        }
+        return _props;
+      });
+    }, [
+      schemas,
+      props.format,
+      props.referenceSchema
+    ]);
+    const handleValidate = (0, import_react3.useCallback)(({ property }) => {
+      if (property && view.fields.find((f) => f.path === property && f.path !== field.path)) {
+        return [
+          {
+            path: "property",
+            message: `property is not unique: '${property}'`
+          }
+        ];
+      }
+    }, [
+      view.fields,
+      field
+    ]);
+    const handleSave = (0, import_react3.useCallback)((props2) => {
+      projection.setFieldProjection({
+        field,
+        props: props2
+      });
+      onSave();
+    }, [
+      projection,
       field,
-      props: props2
-    });
-    onSave();
-  }, [
-    projection,
-    field,
-    onSave
-  ]);
-  const handleCancel = (0, import_react3.useCallback)(() => {
-    requestAnimationFrame(() => onCancel?.());
-    onSave();
-  }, [
-    onSave
-  ]);
-  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_react3.default.createElement(SelectInput, {
-      ...props2,
-      options: schemas.map((schema) => ({
-        value: schema.typename
-      }))
-    }),
-    ["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_react3.default.createElement(SelectOptionInput, props2)
-  }), [
-    t,
-    schemas,
-    referenceSchema
-  ]);
-  const propIsNotType = (0, import_react3.useCallback)((props2) => props2.filter((p) => p.name !== "type"), []);
-  if (!fieldSchema) {
-    import_log.log.warn("invalid format", {
-      props
-    }, {
-      F: __dxlog_file4,
-      L: 174,
-      S: void 0,
-      C: (f, a) => f(...a)
+      onSave
+    ]);
+    const handleCancel = (0, import_react3.useCallback)(() => {
+      requestAnimationFrame(() => onCancel?.());
+      onSave();
+    }, [
+      onSave
+    ]);
+    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_react3.default.createElement(SelectInput, {
+        ...props2,
+        options: schemas.map((schema) => ({
+          value: schema.typename
+        }))
+      }),
+      ["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_react3.default.createElement(SelectOptionInput, props2)
+    }), [
+      t,
+      schemas,
+      referenceSchema
+    ]);
+    const propIsNotType = (0, import_react3.useCallback)((props2) => props2.filter((p) => p.name !== "type"), []);
+    if (!fieldSchema) {
+      import_log.log.warn("invalid format", {
+        props
+      }, {
+        F: __dxlog_file4,
+        L: 175,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
+      return null;
+    }
+    return /* @__PURE__ */ import_react3.default.createElement(Form, {
+      key: field.id,
+      autoFocus: true,
+      values: props,
+      schema: fieldSchema,
+      filter: propIsNotType,
+      sort: [
+        "property",
+        "format"
+      ],
+      onValuesChanged: handleValuesChanged,
+      onValidate: handleValidate,
+      onSave: handleSave,
+      onCancel: handleCancel,
+      Custom: custom
     });
-    return null;
+  } finally {
+    _effect.f();
   }
-  return /* @__PURE__ */ import_react3.default.createElement(Form, {
-    key: field.id,
-    autoFocus: true,
-    values: props,
-    schema: fieldSchema,
-    filter: propIsNotType,
-    sort: [
-      "property",
-      "format"
-    ],
-    onValuesChanged: handleValuesChanged,
-    onValidate: handleValidate,
-    onSave: handleSave,
-    onCancel: handleCancel,
-    Custom
-  });
 };
 var __dxlog_file5 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-form/src/components/ViewEditor/ViewEditor.tsx";
 var grid = "grid grid-cols-[32px_1fr_32px] min-bs-[2.5rem]";
 var ViewMetaSchema = import_effect12.Schema.Struct({
   name: import_effect12.Schema.String.annotations({
-    [import_effect12.SchemaAST.TitleAnnotationId]: "View"
+    title: "View"
   }),
   typename: import_echo_schema11.Format.URL.annotations({
-    [import_effect12.SchemaAST.TitleAnnotationId]: "Typename"
+    title: "Typename"
   })
 }).pipe(import_effect12.Schema.mutable);
 var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading = false, onTypenameChanged, onDelete }) => {
-  const { t } = (0, import_react_ui12.useTranslation)(translationKey);
-  const projection = (0, import_react18.useMemo)(() => new import_schema5.ViewProjection((0, import_echo_schema11.toJsonSchema)(schema), view), [
-    schema,
-    view
-  ]);
-  const [field, setField] = (0, import_react18.useState)();
-  const immutable = readonly || !(0, import_echo_schema11.isMutable)(schema);
-  const viewValues = (0, import_react18.useMemo)(() => {
-    return {
-      name: view.name,
-      // TODO(burdon): Need to warn user of possible consequences of editing.
-      // TODO(burdon): Settings should have domain name owned by user.
-      typename: view.query.typename
-    };
-  }, [
-    view
-  ]);
-  const handleSelect = (0, import_react18.useCallback)((field2) => {
-    setField((f) => f === field2 ? void 0 : field2);
-  }, []);
-  const handleAdd = (0, import_react18.useCallback)(() => {
-    (0, import_invariant3.invariant)(!immutable, void 0, {
-      F: __dxlog_file5,
-      L: 78,
-      S: void 0,
-      A: [
-        "!immutable",
-        ""
-      ]
-    });
-    const field2 = projection.createFieldProjection();
-    setField(field2);
-  }, [
-    schema,
-    view
-  ]);
-  const handleUpdate = (0, import_react18.useCallback)(({ name, typename }) => {
-    (0, import_invariant3.invariant)(!immutable, void 0, {
-      F: __dxlog_file5,
-      L: 85,
-      S: void 0,
-      A: [
-        "!immutable",
-        ""
-      ]
-    });
-    requestAnimationFrame(() => {
-      if (view.name !== name) {
-        view.name = name;
+  var _effect = (0, import_tracking15.useSignals)();
+  try {
+    const { t } = (0, import_react_ui12.useTranslation)(translationKey);
+    const projection = (0, import_react19.useMemo)(() => {
+      const jsonSchema = schema instanceof import_echo_schema11.EchoSchema ? schema.jsonSchema : (0, import_echo_schema11.toJsonSchema)(schema);
+      return new import_schema5.ViewProjection(jsonSchema, view);
+    }, [
+      schema,
+      view
+    ]);
+    const [field, setField] = (0, import_react19.useState)();
+    const immutable = readonly || !(0, import_echo_schema11.isMutable)(schema);
+    const viewValues = (0, import_react19.useMemo)(() => {
+      return {
+        name: view.name,
+        // TODO(burdon): Need to warn user of possible consequences of editing.
+        // TODO(burdon): Settings should have domain name owned by user.
+        typename: view.query.typename
+      };
+    }, [
+      view
+    ]);
+    const handleSelect = (0, import_react19.useCallback)((field2) => {
+      if (immutable) {
+        return;
       }
-      if (view.query.typename !== typename) {
-        onTypenameChanged?.(typename);
+      setField((f) => f === field2 ? void 0 : field2);
+    }, [
+      immutable
+    ]);
+    const handleAdd = (0, import_react19.useCallback)(() => {
+      (0, import_invariant3.invariant)(!immutable, void 0, {
+        F: __dxlog_file5,
+        L: 88,
+        S: void 0,
+        A: [
+          "!immutable",
+          ""
+        ]
+      });
+      const field2 = projection.createFieldProjection();
+      setField(field2);
+    }, [
+      schema,
+      view
+    ]);
+    const handleUpdate = (0, import_react19.useCallback)(({ name, typename }) => {
+      (0, import_invariant3.invariant)(!immutable, void 0, {
+        F: __dxlog_file5,
+        L: 95,
+        S: void 0,
+        A: [
+          "!immutable",
+          ""
+        ]
+      });
+      requestAnimationFrame(() => {
+        if (view.name !== name) {
+          view.name = name;
+        }
+        if (view.query.typename !== typename && !immutable) {
+          onTypenameChanged?.(typename);
+        }
+      });
+    }, [
+      schema,
+      view,
+      onTypenameChanged,
+      immutable
+    ]);
+    const handleDelete = (0, import_react19.useCallback)((fieldId) => {
+      (0, import_invariant3.invariant)(!immutable, void 0, {
+        F: __dxlog_file5,
+        L: 111,
+        S: void 0,
+        A: [
+          "!immutable",
+          ""
+        ]
+      });
+      if (fieldId === field?.id) {
+        setField(void 0);
       }
-    });
-  }, [
-    schema,
-    view,
-    onTypenameChanged
-  ]);
-  const handleDelete = (0, import_react18.useCallback)((fieldId) => {
-    (0, import_invariant3.invariant)(!immutable, void 0, {
-      F: __dxlog_file5,
-      L: 101,
-      S: void 0,
-      A: [
-        "!immutable",
-        ""
-      ]
-    });
-    if (fieldId === field?.id) {
+      onDelete?.(fieldId);
+    }, [
+      schema,
+      field,
+      onDelete
+    ]);
+    const handleMove = (0, import_react19.useCallback)((fromIndex, toIndex) => {
+      (0, import_invariant3.invariant)(!immutable, void 0, {
+        F: __dxlog_file5,
+        L: 123,
+        S: void 0,
+        A: [
+          "!immutable",
+          ""
+        ]
+      });
+      const fields = [
+        ...view.fields
+      ];
+      const [moved] = fields.splice(fromIndex, 1);
+      fields.splice(toIndex, 0, moved);
+      view.fields = fields;
+    }, [
+      schema,
+      view.fields
+    ]);
+    const handleClose = (0, import_react19.useCallback)(() => setField(void 0), []);
+    const hiddenProperties = projection.getHiddenProperties();
+    const handleHide = (0, import_react19.useCallback)((fieldId) => {
       setField(void 0);
-    }
-    onDelete?.(fieldId);
-  }, [
-    schema,
-    field,
-    onDelete
-  ]);
-  const handleMove = (0, import_react18.useCallback)((fromIndex, toIndex) => {
-    (0, import_invariant3.invariant)(!immutable, void 0, {
-      F: __dxlog_file5,
-      L: 113,
-      S: void 0,
-      A: [
-        "!immutable",
-        ""
-      ]
-    });
-    const fields = [
-      ...view.fields
-    ];
-    const [moved] = fields.splice(fromIndex, 1);
-    fields.splice(toIndex, 0, moved);
-    view.fields = fields;
-  }, [
-    schema,
-    view.fields
-  ]);
-  const handleClose = (0, import_react18.useCallback)(() => setField(void 0), []);
-  const hiddenProperties = projection.getHiddenProperties();
-  const handleHide = (0, import_react18.useCallback)((fieldId) => {
-    setField(void 0);
-    projection.hideFieldProjection(fieldId);
-  }, [
-    projection
-  ]);
-  const handleShow = (0, import_react18.useCallback)((property) => {
-    setField(void 0);
-    projection.showFieldProjection(property);
-  }, [
-    projection
-  ]);
-  return /* @__PURE__ */ import_react18.default.createElement("div", {
-    role: "none",
-    className: (0, import_react_ui_theme10.mx)("grid grid-rows-[1fr_1fr] min-bs-0", classNames)
-  }, /* @__PURE__ */ import_react18.default.createElement(Form, {
-    autoSave: true,
-    schema: ViewMetaSchema,
-    values: viewValues,
-    onSave: immutable ? void 0 : handleUpdate,
-    classNames: "min-bs-0 overflow-y-auto"
-  }), /* @__PURE__ */ import_react18.default.createElement("div", {
-    role: "none",
-    className: "border-bs border-separator min-bs-0 overflow-y-auto"
-  }, /* @__PURE__ */ import_react18.default.createElement("div", {
-    role: "none",
-    className: "p-2"
-  }, /* @__PURE__ */ import_react18.default.createElement("label", {
-    className: (0, import_react_ui_theme10.mx)(import_react_ui_theme10.inputTextLabel)
-  }, t("fields label"))), /* @__PURE__ */ import_react18.default.createElement(import_react_ui_list2.List.Root, {
-    items: view.fields,
-    isItem: import_effect12.Schema.is(import_schema5.FieldSchema),
-    getId: (field2) => field2.id,
-    onMove: immutable ? void 0 : handleMove
-  }, ({ items: fields }) => /* @__PURE__ */ import_react18.default.createElement(import_react18.default.Fragment, null, showHeading && /* @__PURE__ */ import_react18.default.createElement("div", {
-    role: "heading",
-    className: grid
-  }, /* @__PURE__ */ import_react18.default.createElement("div", null), /* @__PURE__ */ import_react18.default.createElement("div", {
-    className: "flex items-center text-sm"
-  }, t("field path label"))), /* @__PURE__ */ import_react18.default.createElement("div", {
-    role: "list",
-    className: "flex flex-col w-full"
-  }, fields?.map((field2) => /* @__PURE__ */ import_react18.default.createElement(import_react_ui_list2.List.Item, {
-    key: field2.id,
-    item: field2,
-    classNames: (0, import_react_ui_theme10.mx)(grid, import_react_ui_theme10.ghostHover, "cursor-pointer")
-  }, /* @__PURE__ */ import_react18.default.createElement(import_react_ui_list2.List.ItemDragHandle, null), /* @__PURE__ */ import_react18.default.createElement(import_react_ui_list2.List.ItemTitle, {
-    onClick: () => handleSelect(field2)
-  }, field2.path), /* @__PURE__ */ import_react18.default.createElement("div", {
-    className: "flex items-center gap-2 -ml-4"
-  }, /* @__PURE__ */ import_react18.default.createElement(import_react_ui_list2.List.ItemButton, {
-    icon: "ph--eye-slash--regular",
-    disabled: view.fields.length <= 1,
-    onClick: () => handleHide(field2.id)
-  }), !immutable && /* @__PURE__ */ import_react18.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_react18.default.createElement("div", null, /* @__PURE__ */ import_react18.default.createElement("div", {
-    role: "none",
-    className: "p-2"
-  }, /* @__PURE__ */ import_react18.default.createElement("label", {
-    className: (0, import_react_ui_theme10.mx)(import_react_ui_theme10.inputTextLabel)
-  }, t("hidden fields label"))), /* @__PURE__ */ import_react18.default.createElement(import_react_ui_list2.List.Root, {
-    items: hiddenProperties,
-    isItem: (item) => typeof item === "string",
-    getId: (property) => property
-  }, ({ items: properties }) => /* @__PURE__ */ import_react18.default.createElement("div", {
-    role: "list",
-    className: "flex flex-col w-full"
-  }, properties?.map((property) => /* @__PURE__ */ import_react18.default.createElement(import_react_ui_list2.List.Item, {
-    key: property,
-    item: property,
-    classNames: (0, import_react_ui_theme10.mx)(grid, import_react_ui_theme10.ghostHover, "cursor-pointer")
-  }, /* @__PURE__ */ import_react18.default.createElement("div", null), /* @__PURE__ */ import_react18.default.createElement(import_react_ui_list2.List.ItemTitle, null, property), /* @__PURE__ */ import_react18.default.createElement(import_react_ui_list2.List.ItemButton, {
-    icon: "ph--eye--regular",
-    onClick: () => handleShow(property)
-  }))))))), field && /* @__PURE__ */ import_react18.default.createElement(FieldEditor, {
-    key: field.id,
-    view,
-    projection,
-    field,
-    registry,
-    onSave: handleClose
-  }), !readonly && !field && /* @__PURE__ */ import_react18.default.createElement("div", {
-    className: "flex p-2 justify-center"
-  }, /* @__PURE__ */ import_react18.default.createElement(import_react_ui12.IconButton, {
-    icon: "ph--plus--regular",
-    label: t("button add property"),
-    onClick: immutable ? void 0 : handleAdd,
-    // TODO(burdon): Show field limit in ux (not tooltip).
-    disabled: view.fields.length >= import_schema5.VIEW_FIELD_LIMIT
-  })));
+      projection.hideFieldProjection(fieldId);
+    }, [
+      projection
+    ]);
+    const handleShow = (0, import_react19.useCallback)((property) => {
+      setField(void 0);
+      projection.showFieldProjection(property);
+    }, [
+      projection
+    ]);
+    return /* @__PURE__ */ import_react19.default.createElement("div", {
+      role: "none",
+      className: (0, import_react_ui_theme9.mx)("overflow-y-auto", classNames)
+    }, /* @__PURE__ */ import_react19.default.createElement("div", {
+      role: "none",
+      className: "p-2"
+    }, /* @__PURE__ */ import_react19.default.createElement("div", {
+      role: "none",
+      className: "mbe-2"
+    }, immutable && /* @__PURE__ */ import_react19.default.createElement(import_react_ui12.Message.Root, {
+      valence: "neutral",
+      className: "rounded"
+    }, /* @__PURE__ */ import_react19.default.createElement(import_react_ui12.Message.Title, null, /* @__PURE__ */ import_react19.default.createElement(import_react_ui12.Icon, {
+      icon: "ph--info--regular",
+      size: 5,
+      classNames: "inline"
+    }), " ", t("system schema title")), /* @__PURE__ */ import_react19.default.createElement(import_react_ui12.Message.Body, null, t("system schema description")))), /* @__PURE__ */ import_react19.default.createElement(Form, {
+      autoSave: true,
+      schema: ViewMetaSchema,
+      values: viewValues,
+      onSave: handleUpdate,
+      classNames: "min-bs-0 overflow-y-auto"
+    })), /* @__PURE__ */ import_react19.default.createElement("div", {
+      role: "none",
+      className: "min-bs-0 overflow-y-auto"
+    }, /* @__PURE__ */ import_react19.default.createElement("div", {
+      role: "none",
+      className: "p-2"
+    }, /* @__PURE__ */ import_react19.default.createElement("label", {
+      className: (0, import_react_ui_theme9.mx)(import_react_ui_theme9.inputTextLabel)
+    }, t("fields label"))), /* @__PURE__ */ import_react19.default.createElement(import_react_ui_list2.List.Root, {
+      items: view.fields,
+      isItem: import_effect12.Schema.is(import_schema5.FieldSchema),
+      getId: (field2) => field2.id,
+      onMove: immutable ? void 0 : handleMove
+    }, ({ items: fields }) => /* @__PURE__ */ import_react19.default.createElement(import_react19.default.Fragment, null, showHeading && /* @__PURE__ */ import_react19.default.createElement("div", {
+      role: "heading",
+      className: grid
+    }, /* @__PURE__ */ import_react19.default.createElement("div", null), /* @__PURE__ */ import_react19.default.createElement("div", {
+      className: "flex items-center text-sm"
+    }, t("field path label"))), /* @__PURE__ */ import_react19.default.createElement("div", {
+      role: "list",
+      className: "flex flex-col w-full"
+    }, fields?.map((field2) => /* @__PURE__ */ import_react19.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, !immutable && "cursor-pointer")
+    }, /* @__PURE__ */ import_react19.default.createElement(import_react_ui_list2.List.ItemDragHandle, null), /* @__PURE__ */ import_react19.default.createElement(import_react_ui_list2.List.ItemTitle, {
+      onClick: () => handleSelect(field2)
+    }, field2.path), /* @__PURE__ */ import_react19.default.createElement("div", {
+      className: "flex items-center gap-2 -ml-4"
+    }, /* @__PURE__ */ import_react19.default.createElement(import_react_ui_list2.List.ItemButton, {
+      icon: "ph--eye-slash--regular",
+      disabled: view.fields.length <= 1,
+      onClick: () => handleHide(field2.id)
+    }), !immutable && /* @__PURE__ */ import_react19.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_react19.default.createElement("div", null, /* @__PURE__ */ import_react19.default.createElement("div", {
+      role: "none",
+      className: "p-2"
+    }, /* @__PURE__ */ import_react19.default.createElement("label", {
+      className: (0, import_react_ui_theme9.mx)(import_react_ui_theme9.inputTextLabel)
+    }, t("hidden fields label"))), /* @__PURE__ */ import_react19.default.createElement(import_react_ui_list2.List.Root, {
+      items: hiddenProperties,
+      isItem: (item) => typeof item === "string",
+      getId: (property) => property
+    }, ({ items: properties }) => /* @__PURE__ */ import_react19.default.createElement("div", {
+      role: "list",
+      className: "flex flex-col w-full"
+    }, properties?.map((property) => /* @__PURE__ */ import_react19.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, !immutable && "cursor-pointer")
+    }, /* @__PURE__ */ import_react19.default.createElement("div", null), /* @__PURE__ */ import_react19.default.createElement(import_react_ui_list2.List.ItemTitle, null, property), /* @__PURE__ */ import_react19.default.createElement(import_react_ui_list2.List.ItemButton, {
+      icon: "ph--eye--regular",
+      onClick: () => handleShow(property)
+    }))))))), field && /* @__PURE__ */ import_react19.default.createElement(FieldEditor, {
+      key: field.id,
+      view,
+      projection,
+      field,
+      registry,
+      onSave: handleClose
+    }), !readonly && !field && /* @__PURE__ */ import_react19.default.createElement("div", {
+      role: "none",
+      className: "p-2"
+    }, /* @__PURE__ */ import_react19.default.createElement(import_react_ui12.IconButton, {
+      icon: "ph--plus--regular",
+      label: t("button add property"),
+      onClick: immutable ? void 0 : handleAdd,
+      // TODO(burdon): Show field limit in ux (not tooltip).
+      disabled: view.fields.length >= import_schema5.VIEW_FIELD_LIMIT,
+      classNames: "flex is-full"
+    })));
+  } finally {
+    _effect.f();
+  }
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {