@dxos/react-ui-form 0.8.3 → 0.8.4-main.f9ba587

package/dist/lib/node/index.cjs

@@ -1,2416 +0,0 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var node_exports = {};
-__export(node_exports, {
-  BooleanInput: () => BooleanInput,
-  ControlFrame: () => ControlFrame,
-  ControlFrameItem: () => ControlFrameItem,
-  ControlGroup: () => ControlGroup,
-  ControlGroupButton: () => ControlGroupButton,
-  ControlItem: () => ControlItem,
-  ControlItemInput: () => ControlItemInput,
-  ControlPage: () => ControlPage,
-  ControlSection: () => ControlSection,
-  ControlSectionHeading: () => ControlSectionHeading,
-  DeprecatedFormContainer: () => DeprecatedFormContainer,
-  DeprecatedFormInput: () => DeprecatedFormInput,
-  FieldEditor: () => FieldEditor,
-  Form: () => Form,
-  FormProvider: () => FormProvider,
-  GeoPointInput: () => GeoPointInput,
-  InputHeader: () => InputHeader,
-  MarkdownInput: () => MarkdownInput,
-  NumberInput: () => NumberInput,
-  SelectInput: () => SelectInput,
-  SelectOptionInput: () => SelectOptionInput,
-  TextInput: () => TextInput,
-  TupleInput: () => TupleInput,
-  ViewEditor: () => ViewEditor,
-  cellClassesForFieldType: () => cellClassesForFieldType,
-  controlItemClasses: () => controlItemClasses,
-  findArrayElementType: () => findArrayElementType,
-  formatForDisplay: () => formatForDisplay,
-  formatForEditing: () => formatForEditing,
-  getRefProps: () => getRefProps,
-  parseValue: () => parseValue,
-  pathNotUniqueError: () => pathNotUniqueError,
-  translations: () => translations_default,
-  useForm: () => useForm,
-  useFormContext: () => useFormContext,
-  useFormValues: () => useFormValues,
-  useInputProps: () => useInputProps,
-  useQueryRefOptions: () => useQueryRefOptions,
-  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_stack = require("@dxos/react-ui-stack");
-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_stack2 = require("@dxos/react-ui-stack");
-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_stack3 = require("@dxos/react-ui-stack");
-var import_react_ui_theme6 = 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");
-var import_effect = require("@dxos/effect");
-var import_effect2 = require("effect");
-var import_react12 = require("react");
-var import_echo_schema4 = require("@dxos/echo-schema");
-var import_effect3 = require("@dxos/effect");
-var import_invariant = require("@dxos/invariant");
-var import_log2 = require("@dxos/log");
-var import_schema2 = require("@dxos/schema");
-var import_react13 = require("react");
-var import_echo_schema5 = require("@dxos/echo-schema");
-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_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_schema4 = require("@dxos/schema");
-var import_echo_schema6 = require("@dxos/echo-schema");
-var import_format = require("date-fns/format");
-var import_echo_schema7 = require("@dxos/echo-schema");
-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_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_stack4 = require("@dxos/react-ui-stack");
-var import_react_ui_theme9 = require("@dxos/react-ui-theme");
-var import_schema5 = require("@dxos/schema");
-var translationKey = "react-ui-form";
-var translations_default = [
-  {
-    "en-US": {
-      [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",
-        "field property placeholder": "Property name",
-        "field format label": "Type",
-        "field path label": "Field path",
-        "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",
-        // FormatEnum
-        "format boolean": "Boolean",
-        "format currency": "Currency",
-        "format date": "Date",
-        "format date-time": "DateTime",
-        "format did": "DID",
-        "format duration": "Duration",
-        "format dxn": "DXN",
-        "format email": "Email",
-        "format formula": "Formula",
-        "format hostname": "Hostname",
-        "format integer": "Integer",
-        "format json": "JSON",
-        "format latlng": "Geopoint",
-        "format markdown": "Markdown",
-        "format percent": "Percent",
-        "format ref": "Reference",
-        "format regex": "RegExp",
-        "format string": "String",
-        "format single-select": "Select",
-        "format multi-select": "Multi-select",
-        "format text": "Long text",
-        "format time": "Time",
-        "format timestamp": "Timestamp",
-        "format user": "User",
-        "format number": "Number",
-        "format uri": "URI",
-        "format url": "URL",
-        "format uuid": "UUID",
-        // Placeholders.
-        "placeholder latitude": "Latitude",
-        "placeholder longitude": "Longitude",
-        // SelectOptionsInput.
-        "select option label": "Label",
-        "select option label placeholder": "Option label",
-        "select option color": "Color",
-        "select option delete": "Delete",
-        "select option add": "Add option",
-        // System schema message.
-        "system schema title": "System Schema",
-        "system schema description": "This is a system schema and cannot be modified."
-      }
-    }
-  }
-];
-var DeprecatedFormContainer = ({ children, classNames }) => {
-  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 }) => {
-  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"
-    }, /* @__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();
-  }
-};
-var ControlPage = ({ children, classNames, ...props }) => {
-  var _effect = (0, import_tracking2.useSignals)();
-  try {
-    return /* @__PURE__ */ import_react2.default.createElement("div", {
-      role: "none",
-      className: (0, import_react_ui_theme2.mx)("pli-cardSpacingInline", classNames),
-      ...props
-    }, children);
-  } finally {
-    _effect.f();
-  }
-};
-var ControlSection = ({ 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 }) => {
-  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-trimMd container-max-width text-xl mbs-trimLg mbe-trimMd"
-    }, (0, import_react_ui2.toLocalizedString)(title, t)), description && /* @__PURE__ */ import_react2.default.createElement("p", {
-      className: "pli-trimMd mlb-trimMd container-max-width text-description"
-    }, (0, import_react_ui2.toLocalizedString)(description, t)));
-  } finally {
-    _effect.f();
-  }
-};
-var ControlGroupButton = ({ classNames, ...props }) => {
-  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-trimMd", 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-trimMd container-max-width grid grid-cols-1 md:grid-cols-[1fr_1fr] gap-trimSm md:gap-trimMd border border-separator rounded-md"
-    }, children);
-  } finally {
-    _effect.f();
-  }
-};
-var controlItemClasses = "pli-trimMd plb-trimMd container-max-width grid md:col-span-2 grid-cols-subgrid items-center gap-trimSm border border-separator rounded-md *:first:!mbs-0 *:last:!mbe-0";
-var controlItemTitleClasses = "text-lg font-normal";
-var controlItemDescriptionClasses = "text-base mlb-trimSm md:mbe-0 text-description";
-var ControlItem = ({ title, description, 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 }) => {
-  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 }) => {
-  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-trimSm md:mbe-0 text-description"
-    }, (0, import_react_ui2.toLocalizedString)(description, t)), children);
-  } finally {
-    _effect.f();
-  }
-};
-var InputHeader = ({ error, label, readonly }) => {
-  var _effect = (0, import_tracking5.useSignals)();
-  try {
-    const Label = readonly ? "span" : import_react_ui5.Input.Label;
-    const labelProps = readonly ? {} : {
-      classNames: "!mlb-0"
-    };
-    return /* @__PURE__ */ import_react5.default.createElement("div", {
-      role: "none",
-      className: (0, import_react_ui_theme3.mx)("flex justify-between items-center", import_react_ui_stack.labelSpacing)
-    }, /* @__PURE__ */ import_react5.default.createElement(Label, labelProps, label), 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 }) => {
-  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,
-      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 }) => {
-  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)];
-    };
-    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
-    ]);
-    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") {
-        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,
-      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",
-  "grid-cols-2",
-  "grid-cols-3",
-  "grid-cols-4"
-];
-var TupleInput = ({ binding, type, label, disabled, getStatus, getValue: getValue3, onValueChange, 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,
-      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 }) => {
-  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,
-      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 }) => {
-  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,
-      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, 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,
-      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 }) => {
-  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,
-      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 }) => {
-  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,
-      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 }) => {
-  (0, import_invariant.invariant)(import_effect2.SchemaAST.isTypeLiteral(schema.ast), void 0, {
-    F: __dxlog_file,
-    L: 93,
-    S: void 0,
-    A: [
-      "SchemaAST.isTypeLiteral(schema.ast)",
-      ""
-    ]
-  });
-  const [values, setValues] = (0, import_react12.useState)(initialValues);
-  (0, import_react12.useEffect)(() => {
-    setValues(initialValues);
-  }, [
-    initialValues
-  ]);
-  const [touched, setTouched] = (0, import_react12.useState)(createKeySet(initialValues, false));
-  const [changed, setChanged] = (0, import_react12.useState)(createKeySet(initialValues, false));
-  const [errors, setErrors] = (0, import_react12.useState)({});
-  const [saving, setSaving] = (0, import_react12.useState)(false);
-  const validate = (0, import_react12.useCallback)((values2) => {
-    let errors2 = (0, import_schema2.validateSchema)(schema, values2) ?? [];
-    if (errors2.length === 0 && onValidate) {
-      const validatedValues = values2;
-      errors2 = onValidate(validatedValues) ?? [];
-    }
-    setErrors(flatMap(errors2));
-    const valid = errors2.length === 0;
-    return valid;
-  }, [
-    schema,
-    onValidate
-  ]);
-  const [schemaDirty, setSchemaDirty] = (0, import_react12.useState)(false);
-  (0, import_react12.useEffect)(() => setSchemaDirty(true), [
-    schema
-  ]);
-  (0, import_react12.useEffect)(() => {
-    if (schemaDirty) {
-      validate(values);
-      setSchemaDirty(false);
-    }
-  }, [
-    values,
-    schemaDirty
-  ]);
-  const formIsValid = (0, import_react12.useMemo)(() => {
-    return Object.keys(errors).length === 0;
-  }, [
-    errors
-  ]);
-  const canSave = (0, import_react12.useMemo)(() => !saving && // Check if any error paths that are touched have errors.
-  !Object.entries(touched).some(([path, isTouched]) => isTouched && Object.keys(errors).some((errorPath) => errorPath === path || errorPath.startsWith(`${path}.`) || errorPath.startsWith(`${path}[`))), [
-    touched,
-    errors,
-    saving
-  ]);
-  const handleSave = (0, import_react12.useCallback)(async () => {
-    if (validate(values)) {
-      setSaving(true);
-      try {
-        await onSave?.(values, {
-          changed
-        });
-      } finally {
-        setSaving(false);
-      }
-    }
-  }, [
-    values,
-    validate,
-    onSave,
-    changed
-  ]);
-  const getStatus = (0, import_react12.useCallback)((path) => {
-    const jsonPath = Array.isArray(path) ? (0, import_effect3.createJsonPath)(path) : path;
-    const matchingError = Object.entries(errors).find(([errorPath]) => errorPath === jsonPath || errorPath.startsWith(`${jsonPath}.`) || errorPath.startsWith(`${jsonPath}[`));
-    const isTouched = touched[jsonPath];
-    if (!isTouched) {
-      return {
-        status: void 0,
-        error: void 0
-      };
-    }
-    return {
-      status: matchingError ? "error" : void 0,
-      error: matchingError ? matchingError[1] : void 0
-    };
-  }, [
-    errors,
-    touched
-  ]);
-  const getFormValue = (0, import_react12.useCallback)((path) => {
-    return (0, import_echo_schema4.getValue)(values, (0, import_effect3.createJsonPath)(path));
-  }, [
-    values
-  ]);
-  const onValueChange = (0, import_react12.useCallback)((path, type, value) => {
-    const jsonPath = (0, import_effect3.createJsonPath)(path);
-    let parsedValue = value;
-    try {
-      if (type === "number") {
-        parsedValue = parseFloat(value) || 0;
-      }
-    } catch (err) {
-      import_log2.log.catch(err, void 0, {
-        F: __dxlog_file,
-        L: 213,
-        S: void 0,
-        C: (f, a) => f(...a)
-      });
-      parsedValue = void 0;
-    }
-    const newValues = {
-      ...(0, import_echo_schema4.setValue)(values, jsonPath, parsedValue)
-    };
-    setValues(newValues);
-    setChanged((prev) => ({
-      ...prev,
-      [jsonPath]: true
-    }));
-    onValuesChanged?.(newValues);
-    const isValid = validate(newValues);
-    if (isValid && onValid) {
-      onValid(newValues, {
-        changed
-      });
-    }
-  }, [
-    values,
-    onValuesChanged,
-    validate,
-    onValid,
-    changed
-  ]);
-  const onTouched = (0, import_react12.useCallback)((path) => {
-    const jsonPath = (0, import_effect3.createJsonPath)(path);
-    setTouched((touched2) => ({
-      ...touched2,
-      [jsonPath]: true
-    }));
-    validate(values);
-  }, [
-    validate,
-    values
-  ]);
-  return (0, import_react12.useMemo)(() => ({
-    // State.
-    values,
-    errors,
-    touched,
-    changed,
-    canSave,
-    formIsValid,
-    // Actions.
-    handleSave,
-    // Field utils.
-    getStatus,
-    getValue: getFormValue,
-    onValueChange,
-    onTouched
-  }), [
-    values,
-    errors,
-    touched,
-    changed,
-    canSave,
-    formIsValid,
-    handleSave,
-    getStatus,
-    getFormValue,
-    onValueChange,
-    onTouched
-  ]);
-};
-var createKeySet = (obj, value) => {
-  (0, import_invariant.invariant)(obj, void 0, {
-    F: __dxlog_file,
-    L: 275,
-    S: void 0,
-    A: [
-      "obj",
-      ""
-    ]
-  });
-  return Object.keys(obj).reduce((acc, key) => ({
-    ...acc,
-    [key]: value
-  }), {});
-};
-var flatMap = (errors) => {
-  return errors.reduce((result, { path, message }) => {
-    const jsonPath = (0, import_effect3.fromEffectValidationPath)(path);
-    if (!(jsonPath in result)) {
-      result[jsonPath] = message;
-    }
-    return result;
-  }, {});
-};
-var useRefQueryLookupHandler = ({ space }) => {
-  return (0, import_react13.useCallback)(async (typeInfo) => {
-    if (!space) {
-      return [];
-    }
-    const query = space.db.query(import_echo.Filter.typename(typeInfo.typename));
-    const { objects } = await query.run();
-    return objects.map((object) => {
-      const dxn = (0, import_echo_schema5.getObjectDXN)(object);
-      if (!dxn) {
-        return void 0;
-      }
-      const item = {
-        dxn,
-        label: object?.name ?? object?.id ?? ""
-      };
-      return item;
-    }).filter(import_util3.isNonNullable);
-  }, [
-    space
-  ]);
-};
-var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-form/src/hooks/useQueryRefOptions.ts";
-var useQueryRefOptions = ({ refTypeInfo, onQueryRefOptions }) => {
-  const [options, setOptions] = (0, import_react14.useState)([]);
-  const [loading, setLoading] = (0, import_react14.useState)(false);
-  (0, import_react14.useEffect)(() => {
-    if (!refTypeInfo || !onQueryRefOptions) {
-      return;
-    }
-    const fetchOptions = async () => {
-      setLoading(true);
-      try {
-        const fetchedOptions = await onQueryRefOptions(refTypeInfo);
-        setOptions(fetchedOptions.map((option) => {
-          const dxn = option.dxn.toString();
-          return {
-            id: dxn,
-            label: option.label ?? dxn,
-            hue: "neutral"
-          };
-        }));
-      } catch (error) {
-        import_log3.log.error("Failed to fetch ref options:", error, {
-          F: __dxlog_file2,
-          L: 42,
-          S: void 0,
-          C: (f, a) => f(...a)
-        });
-        setOptions([]);
-      } finally {
-        setLoading(false);
-      }
-    };
-    void fetchOptions();
-  }, [
-    refTypeInfo,
-    onQueryRefOptions
-  ]);
-  return {
-    options,
-    loading
-  };
-};
-var FormContext = /* @__PURE__ */ (0, import_react11.createContext)(void 0);
-var useFormContext = () => {
-  return (0, import_react11.useContext)(FormContext) ?? (0, import_debug.raise)(new Error("Missing FormContext"));
-};
-var useFormValues = (path = []) => {
-  const { values: formValues } = useFormContext();
-  const jsonPath = (0, import_effect.createJsonPath)(path);
-  return (0, import_echo_schema3.getValue)(formValues, jsonPath);
-};
-var useInputProps = (path = []) => {
-  const { getStatus, getValue: getFormValue, onValueChange, onTouched } = useFormContext();
-  const stablePath = (0, import_react11.useMemo)(() => path, [
-    Array.isArray(path) ? path.join(".") : path
-  ]);
-  return (0, import_react11.useMemo)(() => ({
-    getStatus: () => getStatus(stablePath),
-    getValue: () => getFormValue(stablePath),
-    onValueChange: (type, value) => onValueChange(stablePath, type, value),
-    onBlur: () => onTouched(stablePath)
-  }), [
-    getStatus,
-    getFormValue,
-    onValueChange,
-    onTouched,
-    stablePath
-  ]);
-};
-var FormProvider = ({ children, formRef, autoSave, ...formOptions }) => {
-  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";
-      const inputOptOut = event.target.hasAttribute("data-no-submit") || event.target.closest("[data-no-submit]") !== null;
-      const shouldSubmitRegularInput = !inputIsTextarea && keyIsEnter && !modifierUsed;
-      const shouldSubmitTextarea = inputIsTextarea && keyIsEnter && event.metaKey;
-      if ((shouldSubmitRegularInput || shouldSubmitTextarea) && !inputOptOut) {
-        if (!autoSave && form.canSave) {
-          form.handleSave();
-        }
-        if (autoSave && form.formIsValid) {
-          event.target.blur();
-        }
-      }
-    }, [
-      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 = ({ readonly, onCancel, outerSpacing = true }) => {
-  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: (0, import_react_ui_theme6.mx)(outerSpacing === "scroll-fields" ? "pli-cardSpacingInline mbe-cardSpacingBlock" : outerSpacing ? import_react_ui_stack3.cardSpacing : "mbs-cardSpacingBlock", "flex [&_button]:grow gap-1 first:mbs-0")
-    }, 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 === "") {
-    return void 0;
-  }
-  const parseScalar = (type2) => {
-    switch (type2) {
-      case import_echo_schema6.TypeEnum.Boolean: {
-        if (typeof value === "string") {
-          const lowercaseValue = value.toLowerCase();
-          if (lowercaseValue === "0" || lowercaseValue === "false") {
-            return false;
-          } else if (lowercaseValue === "1" || lowercaseValue === "true") {
-            return true;
-          }
-        }
-        return Boolean(value);
-      }
-      case import_echo_schema6.TypeEnum.Number: {
-        const cleaned = typeof value === "string" ? value.replace(/[^0-9.-]+/g, "") : value;
-        const num = Number(cleaned);
-        return Number.isNaN(num) ? null : num;
-      }
-      case import_echo_schema6.TypeEnum.String:
-      case import_echo_schema6.TypeEnum.Ref:
-        return String(value);
-      default: {
-        return value;
-      }
-    }
-  };
-  if (!format) {
-    return parseScalar(type);
-  }
-  switch (format) {
-    case import_echo_schema6.FormatEnum.Boolean:
-      return parseScalar(import_echo_schema6.TypeEnum.Boolean);
-    case import_echo_schema6.FormatEnum.Number:
-    case import_echo_schema6.FormatEnum.Percent:
-    case import_echo_schema6.FormatEnum.Currency:
-      return parseScalar(import_echo_schema6.TypeEnum.Number);
-    case import_echo_schema6.FormatEnum.String:
-    case import_echo_schema6.FormatEnum.Markdown: {
-      return parseScalar(import_echo_schema6.TypeEnum.String);
-    }
-    case import_echo_schema6.FormatEnum.Ref:
-      throw new Error(`unexpected format: ${import_echo_schema6.FormatEnum.Ref}`);
-    case import_echo_schema6.FormatEnum.DateTime:
-    case import_echo_schema6.FormatEnum.Date:
-    case import_echo_schema6.FormatEnum.Time:
-    case import_echo_schema6.FormatEnum.Timestamp: {
-      const date = new Date(value);
-      return isNaN(date.getTime()) ? null : date;
-    }
-    case import_echo_schema6.FormatEnum.GeoPoint: {
-      if (typeof value === "string") {
-        const cleaned = value.replace(/[^0-9.,-]+/g, "");
-        const parts = cleaned.split(",");
-        if (parts.length === 2) {
-          const lat = parseFloat(parts[0]);
-          const long = parseFloat(parts[1]);
-          if (!isNaN(lat) && !isNaN(long)) {
-            return import_echo_schema6.GeoLocation.toGeoPoint({
-              latitude: lat,
-              longitude: long
-            });
-          }
-        }
-      }
-      return [
-        0,
-        0
-      ];
-    }
-    default: {
-      return value;
-    }
-  }
-};
-var cellClassesForFieldType = ({ type, format }) => {
-  if (!format) {
-    switch (type) {
-      case import_echo_schema6.TypeEnum.Number:
-        return [
-          "text-right",
-          "font-mono"
-        ];
-      case import_echo_schema6.TypeEnum.Boolean:
-        return [
-          "text-right",
-          "font-mono"
-        ];
-      case import_echo_schema6.TypeEnum.String:
-        return void 0;
-      case import_echo_schema6.TypeEnum.Ref:
-        return void 0;
-      default: {
-        return void 0;
-      }
-    }
-  }
-  switch (format) {
-    case import_echo_schema6.FormatEnum.Markdown:
-      return void 0;
-    case import_echo_schema6.FormatEnum.Time:
-    case import_echo_schema6.FormatEnum.Timestamp:
-    case import_echo_schema6.FormatEnum.DateTime:
-    case import_echo_schema6.FormatEnum.Date:
-    case import_echo_schema6.FormatEnum.Duration:
-      return [
-        "font-mono",
-        "text-right"
-      ];
-    case import_echo_schema6.FormatEnum.Currency:
-      return [
-        "text-right"
-      ];
-    case import_echo_schema6.FormatEnum.JSON:
-    case import_echo_schema6.FormatEnum.DID:
-      return [
-        "font-mono"
-      ];
-    default:
-      return void 0;
-  }
-};
-var pathNotUniqueError = (path) => ({
-  path: "path",
-  message: `'${path}' is already present`
-});
-var formatForDisplay = ({ type, format, value, locale = void 0 }) => {
-  const formatScalar = (type2) => {
-    switch (type2) {
-      case import_echo_schema7.TypeEnum.Boolean:
-        return value.toLocaleString().toUpperCase();
-      case import_echo_schema7.TypeEnum.Number:
-        return value.toLocaleString(locale);
-      case import_echo_schema7.TypeEnum.String:
-      case import_echo_schema7.TypeEnum.Ref:
-        return String(value);
-      default: {
-        return String(value);
-      }
-    }
-  };
-  if (!format) {
-    return formatScalar(type);
-  }
-  switch (format) {
-    case import_echo_schema7.FormatEnum.Boolean: {
-      return formatScalar(import_echo_schema7.TypeEnum.Boolean);
-    }
-    case import_echo_schema7.FormatEnum.Number: {
-      return formatScalar(import_echo_schema7.TypeEnum.Number);
-    }
-    case import_echo_schema7.FormatEnum.String:
-    case import_echo_schema7.FormatEnum.Ref: {
-      return formatScalar(import_echo_schema7.TypeEnum.String);
-    }
-    case import_echo_schema7.FormatEnum.Percent: {
-      return `${value * 100}%`;
-    }
-    case import_echo_schema7.FormatEnum.Currency: {
-      return value.toLocaleString(locale, {
-        style: "currency",
-        currency: "USD",
-        minimumFractionDigits: 2,
-        maximumFractionDigits: 2
-      });
-    }
-    case import_echo_schema7.FormatEnum.Date: {
-      try {
-        return (0, import_format.format)(new Date(value), "yyyy-MM-dd");
-      } catch (error) {
-        return "Invalid Date";
-      }
-    }
-    case import_echo_schema7.FormatEnum.Time: {
-      try {
-        return (0, import_format.format)(new Date(value), "HH:mm:ss");
-      } catch (error) {
-        return "Invalid Time";
-      }
-    }
-    case import_echo_schema7.FormatEnum.DateTime: {
-      try {
-        return (0, import_format.format)(new Date(value), "yyyy-MM-dd HH:mm:ss");
-      } catch (error) {
-        return "Invalid DateTime";
-      }
-    }
-    case import_echo_schema7.FormatEnum.GeoPoint: {
-      if (value === null || value === void 0) {
-        return "";
-      }
-      if (Array.isArray(value) && value.length >= 2 && value.every(Number.isFinite)) {
-        const { latitude, longitude } = import_echo_schema7.GeoLocation.fromGeoPoint(value);
-        return `${latitude},${longitude}`;
-      }
-      return String(value);
-    }
-    default: {
-      if (value === null || value === "undefined") {
-        return "";
-      }
-      return String(value);
-    }
-  }
-};
-var formatForEditing = ({ type, format, value, locale = void 0 }) => {
-  const formatScalar = (type2) => {
-    switch (type2) {
-      case import_echo_schema7.TypeEnum.Boolean:
-      case import_echo_schema7.TypeEnum.Number:
-      case import_echo_schema7.TypeEnum.String:
-      case import_echo_schema7.TypeEnum.Ref:
-        return String(value);
-      default:
-        return String(value);
-    }
-  };
-  if (!format) {
-    return formatScalar(type);
-  }
-  switch (format) {
-    case import_echo_schema7.FormatEnum.Boolean:
-    case import_echo_schema7.FormatEnum.Number:
-    case import_echo_schema7.FormatEnum.String:
-    case import_echo_schema7.FormatEnum.Ref: {
-      return formatScalar(type);
-    }
-    case import_echo_schema7.FormatEnum.Percent: {
-      return String(value * 100);
-    }
-    case import_echo_schema7.FormatEnum.Currency: {
-      return String(value);
-    }
-    case import_echo_schema7.FormatEnum.DateTime: {
-      const date = new Date(value);
-      return date.toISOString();
-    }
-    case import_echo_schema7.FormatEnum.Date: {
-      const date = new Date(value);
-      return date.toISOString().split("T")[0];
-    }
-    case import_echo_schema7.FormatEnum.Time: {
-      const date = new Date(value);
-      return date.toISOString().split("T")[1].split(".")[0];
-    }
-    case import_echo_schema7.FormatEnum.GeoPoint: {
-      if (value === null || value === void 0) {
-        return "";
-      }
-      if (Array.isArray(value) && value.length >= 2 && value.every(Number.isFinite)) {
-        const { latitude, longitude } = import_echo_schema7.GeoLocation.fromGeoPoint(value);
-        return `${latitude},${longitude}`;
-      }
-      return String(value);
-    }
-    default: {
-      return String(value);
-    }
-  }
-};
-var findArrayElementType = (ast) => {
-  const tupleType = (0, import_effect10.findNode)(ast, import_effect9.SchemaAST.isTupleType);
-  const elementType = tupleType?.rest[0]?.type;
-  return elementType;
-};
-var getRefProps = (property) => {
-  const { ast, format, array } = property;
-  if (format === import_echo_schema8.FormatEnum.Ref) {
-    return {
-      ast,
-      isArray: false
-    };
-  }
-  if (array) {
-    const elementType = findArrayElementType(ast);
-    if (elementType) {
-      const annotation = (0, import_effect8.findAnnotation)(elementType, import_echo_schema8.ReferenceAnnotationId);
-      if (annotation) {
-        return {
-          ast: elementType,
-          isArray: true
-        };
-      }
-    }
-  }
-  return void 0;
-};
-var __dxlog_file3 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-form/src/components/Form/ArrayField.tsx";
-var ArrayField = ({ property, readonly, path, inputProps, Custom, lookupComponent }) => {
-  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
-    ]);
-    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, {
-      readonly: true,
-      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();
-  }
-};
-var RefField = ({ type, label, disabled, placeholder, inputOnly, array, ast, getValue: getValue3, onBlur, onQueryRefOptions, 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
-    });
-    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) ?? [];
-      }
-      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;
-    }
-    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,
-      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();
-  }
-};
-var RefFieldFallback = ({ type, label, disabled, placeholder, inputOnly, getValue: getValue3, onValueChange, ...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) {
-    case import_echo_schema10.FormatEnum.GeoPoint:
-      return GeoPointInput;
-    case import_echo_schema10.FormatEnum.Markdown:
-      return MarkdownInput;
-  }
-  switch (type) {
-    case "string":
-      return TextInput;
-    case "number":
-      return NumberInput;
-    case "boolean":
-      return BooleanInput;
-  }
-};
-var FormField = ({ property, path, readonly, inline, onQueryRefOptions, lookupComponent, Custom }) => {
-  var _effect = (0, import_tracking12.useSignals)();
-  try {
-    const { ast, name, type, format, title, description, options, examples, array } = property;
-    const inputProps = useInputProps(path);
-    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 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
-      });
-    }
-    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: (0, import_react_ui_theme7.mx)("text-lg mlb-inputSpacingBlock 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();
-  }
-};
-var FormFields = /* @__PURE__ */ (0, import_react15.forwardRef)(({ classNames, testId, schema, path, filter, sort, readonly, lookupComponent, Custom, onQueryRefOptions }, forwardRef2) => {
-  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 /* @__PURE__ */ import_react15.default.createElement("div", {
-      role: "form",
-      className: (0, import_react_ui_theme7.mx)("is-full", classNames),
-      ref: forwardRef2
-    }, 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, testId, values: initialValues, autoFocus, readonly, autoSave, outerSpacing = true, onCancel, schema, onValuesChanged, onValidate, onSave, ...props }) => {
-  var _effect = (0, import_tracking9.useSignals)();
-  try {
-    const formRef = (0, import_react9.useRef)(null);
-    const handleValid = (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: handleValid,
-      onSave
-    }, /* @__PURE__ */ import_react9.default.createElement("div", {
-      role: "none",
-      className: "contents",
-      "data-testid": testId
-    }, /* @__PURE__ */ import_react9.default.createElement(FormFields, {
-      ...props,
-      ref: formRef,
-      classNames: [
-        outerSpacing === "blockStart-0" ? "pli-cardSpacingInline mbe-cardSpacingBlock [&>.mbs-inputSpacingBlock:first-child]:!mbs-0" : outerSpacing === "scroll-fields" ? "pli-cardSpacingInline pbe-cardSpacingBlock" : outerSpacing ? import_react_ui_stack2.cardSpacing : false,
-        outerSpacing === "scroll-fields" && import_react_ui_stack2.cardDialogOverflow,
-        classNames
-      ],
-      readonly,
-      schema
-    }), (onCancel || onSave) && !autoSave && /* @__PURE__ */ import_react9.default.createElement(FormActions, {
-      readonly,
-      onCancel,
-      outerSpacing
-    })));
-  } 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, outerSpacing }) => {
-  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;
-      }
-      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;
-        }
-        return {
-          fieldSchema: fieldSchema2
-        };
-      });
-      setReferenceSchema((prev) => {
-        if (_props.referenceSchema !== prev?.typename) {
-          const newSchema = schemas.find((schema) => schema.typename === _props.referenceSchema);
-          if (newSchema) {
-            return newSchema;
-          }
-        }
-        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,
-      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: 183,
-        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,
-      outerSpacing
-    });
-  } finally {
-    _effect.f();
-  }
-};
-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_32px] min-bs-[2.5rem]";
-var ViewMetaSchema = import_effect12.Schema.Struct({
-  name: import_effect12.Schema.String.annotations({
-    title: "View"
-  }),
-  typename: import_echo_schema11.Format.URL.annotations({
-    title: "Typename"
-  })
-}).pipe(import_effect12.Schema.mutable);
-var ViewEditor = ({ classNames, schema, view, registry, readonly: _readonly, showHeading = false, onTypenameChanged, onDelete, outerSpacing = true }) => {
-  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 readonly = _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 (readonly) {
-        return;
-      }
-      setField((f) => f === field2 ? void 0 : field2);
-    }, [
-      readonly
-    ]);
-    const handleAdd = (0, import_react19.useCallback)(() => {
-      (0, import_invariant3.invariant)(!readonly, void 0, {
-        F: __dxlog_file5,
-        L: 92,
-        S: void 0,
-        A: [
-          "!readonly",
-          ""
-        ]
-      });
-      const field2 = projection.createFieldProjection();
-      setField(field2);
-    }, [
-      schema,
-      view,
-      readonly
-    ]);
-    const handleUpdate = (0, import_react19.useCallback)(({ name, typename }) => {
-      (0, import_invariant3.invariant)(!readonly, void 0, {
-        F: __dxlog_file5,
-        L: 99,
-        S: void 0,
-        A: [
-          "!readonly",
-          ""
-        ]
-      });
-      requestAnimationFrame(() => {
-        if (view.name !== name) {
-          view.name = name;
-        }
-        if (view.query.typename !== typename && !readonly) {
-          onTypenameChanged?.(typename);
-        }
-      });
-    }, [
-      schema,
-      view,
-      onTypenameChanged,
-      readonly
-    ]);
-    const handleDelete = (0, import_react19.useCallback)((fieldId) => {
-      (0, import_invariant3.invariant)(!readonly, void 0, {
-        F: __dxlog_file5,
-        L: 115,
-        S: void 0,
-        A: [
-          "!readonly",
-          ""
-        ]
-      });
-      if (fieldId === field?.id) {
-        setField(void 0);
-      }
-      onDelete?.(fieldId);
-    }, [
-      schema,
-      field,
-      onDelete,
-      readonly
-    ]);
-    const handleMove = (0, import_react19.useCallback)((fromIndex, toIndex) => {
-      (0, import_invariant3.invariant)(!readonly, void 0, {
-        F: __dxlog_file5,
-        L: 127,
-        S: void 0,
-        A: [
-          "!readonly",
-          ""
-        ]
-      });
-      const fields = [
-        ...view.fields
-      ];
-      const [moved] = fields.splice(fromIndex, 1);
-      fields.splice(toIndex, 0, moved);
-      view.fields = fields;
-    }, [
-      schema,
-      view.fields,
-      readonly
-    ]);
-    const handleClose = (0, import_react19.useCallback)(() => setField(void 0), []);
-    const hiddenProperties = projection.getHiddenProperties();
-    const handleHide = (0, import_react19.useCallback)((fieldId) => {
-      setField(void 0);
-      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)(classNames)
-    }, readonly && /* @__PURE__ */ import_react19.default.createElement("div", {
-      role: "none",
-      className: (0, import_react_ui_theme9.mx)("is-full", outerSpacing && "plb-cardSpacingBlock pli-cardSpacingInline")
-    }, /* @__PURE__ */ import_react19.default.createElement(import_react_ui12.Callout.Root, {
-      valence: "info"
-    }, /* @__PURE__ */ import_react19.default.createElement(import_react_ui12.Callout.Title, null, t("system schema description")))), /* @__PURE__ */ import_react19.default.createElement(Form, {
-      autoSave: true,
-      schema: ViewMetaSchema,
-      values: viewValues,
-      readonly,
-      onSave: handleUpdate,
-      outerSpacing
-    }), /* @__PURE__ */ import_react19.default.createElement("div", {
-      role: "none",
-      className: outerSpacing ? import_react_ui_stack4.cardSpacing : "mlb-cardSpacingBlock"
-    }, /* @__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,
-      readonly,
-      onMove: readonly ? 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 is-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, "overflow-hidden", !readonly && "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(import_react_ui_list2.List.ItemButton, {
-      "data-testid": "hide-field-button",
-      icon: "ph--eye-slash--regular",
-      // TDOO(burdon): Is this the correct test?
-      disabled: view.fields.length <= 1,
-      onClick: () => handleHide(field2.id)
-    }), !readonly && /* @__PURE__ */ import_react19.default.createElement(import_react_ui_list2.List.ItemDeleteButton, {
-      disabled: view.fields.length <= 1,
-      onClick: () => handleDelete(field2.id)
-    })))))), hiddenProperties.length > 0 && /* @__PURE__ */ import_react19.default.createElement(import_react19.default.Fragment, null, /* @__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 is-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, !readonly && "cursor-pointer")
-    }, /* @__PURE__ */ import_react19.default.createElement(import_react_ui_list2.List.ItemDragHandle, {
-      disabled: true
-    }), /* @__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),
-      "data-testid": "show-field-button"
-    }))))))), 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: outerSpacing ? import_react_ui_stack4.cardSpacing : "mlb-cardSpacingBlock"
-    }, /* @__PURE__ */ import_react19.default.createElement(import_react_ui12.IconButton, {
-      icon: "ph--plus--regular",
-      label: t("button add property"),
-      onClick: readonly ? 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 = {
-  BooleanInput,
-  ControlFrame,
-  ControlFrameItem,
-  ControlGroup,
-  ControlGroupButton,
-  ControlItem,
-  ControlItemInput,
-  ControlPage,
-  ControlSection,
-  ControlSectionHeading,
-  DeprecatedFormContainer,
-  DeprecatedFormInput,
-  FieldEditor,
-  Form,
-  FormProvider,
-  GeoPointInput,
-  InputHeader,
-  MarkdownInput,
-  NumberInput,
-  SelectInput,
-  SelectOptionInput,
-  TextInput,
-  TupleInput,
-  ViewEditor,
-  cellClassesForFieldType,
-  controlItemClasses,
-  findArrayElementType,
-  formatForDisplay,
-  formatForEditing,
-  getRefProps,
-  parseValue,
-  pathNotUniqueError,
-  translations,
-  useForm,
-  useFormContext,
-  useFormValues,
-  useInputProps,
-  useQueryRefOptions,
-  useRefQueryLookupHandler
-});
-//# sourceMappingURL=index.cjs.map