@dxos/react-ui-form 0.7.1-staging.599df14

package/dist/lib/node/index.cjs

@@ -0,0 +1,1028 @@
+"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,
+  DeprecatedFormInput: () => DeprecatedFormInput,
+  FieldEditor: () => FieldEditor,
+  Form: () => Form,
+  InputHeader: () => InputHeader,
+  LatLngInput: () => LatLngInput,
+  NumberInput: () => NumberInput,
+  SelectInput: () => SelectInput,
+  TextInput: () => TextInput,
+  ViewEditor: () => ViewEditor,
+  cellClassesForFieldType: () => cellClassesForFieldType,
+  cellClassesForRowSelection: () => cellClassesForRowSelection,
+  formatForDisplay: () => formatForDisplay,
+  formatForEditing: () => formatForEditing,
+  parseValue: () => parseValue,
+  pathNotUniqueError: () => pathNotUniqueError,
+  translations: () => translations_default,
+  useForm: () => useForm
+});
+module.exports = __toCommonJS(node_exports);
+var import_react = __toESM(require("react"));
+var import_react_ui = require("@dxos/react-ui");
+var import_react2 = __toESM(require("react"));
+var import_echo_schema = require("@dxos/echo-schema");
+var import_log = require("@dxos/log");
+var import_react_ui2 = require("@dxos/react-ui");
+var import_schema = require("@dxos/schema");
+var import_react3 = __toESM(require("react"));
+var import_echo_schema2 = require("@dxos/echo-schema");
+var import_effect = require("@dxos/effect");
+var import_log2 = require("@dxos/log");
+var import_react_ui3 = require("@dxos/react-ui");
+var import_react_ui_theme = require("@dxos/react-ui-theme");
+var import_schema2 = require("@dxos/schema");
+var import_util = require("@dxos/util");
+var import_echo_schema3 = require("@dxos/echo-schema");
+var import_react4 = __toESM(require("react"));
+var import_react_ui4 = require("@dxos/react-ui");
+var import_react5 = __toESM(require("react"));
+var import_react_ui5 = require("@dxos/react-ui");
+var import_react_ui_theme2 = require("@dxos/react-ui-theme");
+var import_react6 = __toESM(require("react"));
+var import_react_ui6 = require("@dxos/react-ui");
+var import_react7 = require("react");
+var import_invariant = require("@dxos/invariant");
+var import_log3 = require("@dxos/log");
+var import_schema3 = require("@dxos/schema");
+var import_react8 = __toESM(require("react"));
+var import_echo_schema4 = require("@dxos/echo-schema");
+var import_react_ui7 = require("@dxos/react-ui");
+var import_react_ui_list = require("@dxos/react-ui-list");
+var import_react_ui_theme3 = require("@dxos/react-ui-theme");
+var import_schema4 = require("@dxos/schema");
+var import_util2 = require("@dxos/util");
+var import_echo_schema5 = require("@dxos/echo-schema");
+var import_echo_schema6 = require("@dxos/echo-schema");
+var translationKey = "react-ui-form";
+var translations_default = [
+  {
+    "en-US": {
+      [translationKey]: {
+        "fields label": "Fields",
+        // 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",
+        // 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 email": "Email",
+        "format formula": "Formula",
+        "format hostname": "Hostname",
+        "format integer": "Integer",
+        "format json": "JSON",
+        "format latlng": "LatLng",
+        "format markdown": "Markdown",
+        "format percent": "Percent",
+        "format ref": "Reference",
+        "format regex": "RegExp",
+        "format string": "String",
+        "format text": "Long text",
+        "format time": "Time",
+        "format timestamp": "Timestamp",
+        "format user": "User",
+        "format number": "Number",
+        "format uri": "URI",
+        "format uuid": "UUID",
+        // Placeholders
+        "placeholder latitude": "Latitude",
+        "placeholder longitude": "Longitude"
+      }
+    }
+  }
+];
+var DeprecatedFormInput = ({ label, description, secondary, children }) => {
+  const primary = /* @__PURE__ */ import_react.default.createElement("div", {
+    role: "none",
+    className: "flex w-full gap-4 py-1"
+  }, /* @__PURE__ */ import_react.default.createElement(import_react_ui.Input.Root, null, /* @__PURE__ */ import_react.default.createElement("div", {
+    role: "none",
+    className: "flex flex-col w-full"
+  }, /* @__PURE__ */ import_react.default.createElement(import_react_ui.Input.Label, {
+    classNames: "flex min-h-[40px] items-center"
+  }, 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-h-[40px] items-center"
+  }, children))));
+  if (secondary) {
+    return /* @__PURE__ */ import_react.default.createElement("div", {
+      role: "none",
+      className: "flex flex-col w-full"
+    }, primary, secondary);
+  }
+  return primary;
+};
+var InputHeader = ({ children, error }) => {
+  return /* @__PURE__ */ import_react5.default.createElement("div", {
+    role: "none",
+    className: "flex justify-between items-center mb-1"
+  }, children, error && /* @__PURE__ */ import_react5.default.createElement(import_react_ui5.Tooltip.Root, null, /* @__PURE__ */ import_react5.default.createElement(import_react_ui5.Tooltip.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ import_react5.default.createElement(import_react_ui5.Icon, {
+    icon: "ph--warning--regular",
+    size: 4,
+    classNames: import_react_ui_theme2.errorText
+  })), /* @__PURE__ */ import_react5.default.createElement(import_react_ui5.Tooltip.Content, {
+    side: "bottom"
+  }, /* @__PURE__ */ import_react5.default.createElement(import_react_ui5.Tooltip.Arrow, null), error)));
+};
+var LatLngInput = ({ property, type, label, disabled, getStatus, getValue, onValueChange, onBlur }) => {
+  const { t } = (0, import_react_ui4.useTranslation)(translationKey);
+  const { status, error } = getStatus?.(property);
+  const { lat = 0, lng = 0 } = getValue(property) ?? {};
+  return /* @__PURE__ */ import_react4.default.createElement(import_react_ui4.Input.Root, {
+    validationValence: status
+  }, /* @__PURE__ */ import_react4.default.createElement(InputHeader, {
+    error
+  }, /* @__PURE__ */ import_react4.default.createElement(import_react_ui4.Input.Label, null, label)), /* @__PURE__ */ import_react4.default.createElement("div", {
+    className: "grid grid-cols-2 gap-2"
+  }, /* @__PURE__ */ import_react4.default.createElement(import_react_ui4.Input.TextInput, {
+    type: "number",
+    disabled,
+    placeholder: t("placeholder latitude"),
+    value: lat,
+    onChange: (event) => onValueChange(property, type, {
+      lat: safeParseFloat(event.target.value, 0),
+      lng
+    }),
+    onBlur
+  }), /* @__PURE__ */ import_react4.default.createElement(import_react_ui4.Input.TextInput, {
+    type: "number",
+    disabled,
+    placeholder: t("placeholder longitude"),
+    value: lng,
+    onChange: (event) => onValueChange(property, type, {
+      lat,
+      lng: safeParseFloat(event.target.value, 0)
+    }),
+    onBlur
+  })));
+};
+var safeParseFloat = (str, defaultValue) => {
+  try {
+    return parseFloat(str);
+  } catch {
+    return defaultValue ?? 0;
+  }
+};
+var TextInput = ({ property, type, label, disabled, placeholder, getStatus, getValue, onValueChange, onBlur }) => {
+  const { status, error } = getStatus?.(property);
+  return /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.Input.Root, {
+    validationValence: status
+  }, /* @__PURE__ */ import_react6.default.createElement(InputHeader, {
+    error
+  }, /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.Input.Label, null, label)), /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.Input.TextInput, {
+    disabled,
+    placeholder,
+    value: getValue(property) ?? "",
+    onChange: (event) => onValueChange(property, type, event.target.value),
+    onBlur
+  }));
+};
+var NumberInput = ({ property, type, label, disabled, placeholder, getStatus, getValue, onValueChange, onBlur }) => {
+  const { status, error } = getStatus?.(property);
+  return /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.Input.Root, {
+    validationValence: status
+  }, /* @__PURE__ */ import_react6.default.createElement(InputHeader, {
+    error
+  }, /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.Input.Label, null, label)), /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.Input.TextInput, {
+    type: "number",
+    disabled,
+    placeholder,
+    value: getValue(property) ?? 0,
+    onChange: (event) => onValueChange(property, type, event.target.value),
+    onBlur
+  }));
+};
+var BooleanInput = ({ property, type, label, getStatus, getValue, onValueChange }) => {
+  const { status, error } = getStatus?.(property);
+  return /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.Input.Root, {
+    validationValence: status
+  }, /* @__PURE__ */ import_react6.default.createElement(InputHeader, {
+    error
+  }, /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.Input.Label, null, label)), /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.Input.Switch, {
+    checked: getValue(property),
+    onCheckedChange: (value) => onValueChange(property, type, value)
+  }));
+};
+var SelectInput = ({ property, type, label, disabled, placeholder, options, getStatus, getValue, onValueChange }) => {
+  const { status, error } = getStatus?.(property);
+  return /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.Input.Root, {
+    validationValence: status
+  }, /* @__PURE__ */ import_react6.default.createElement(InputHeader, {
+    error
+  }, /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.Input.Label, null, label)), /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.Select.Root, {
+    value: getValue(property),
+    onValueChange: (value) => onValueChange(property, type, value)
+  }, /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.Select.TriggerButton, {
+    classNames: "is-full",
+    disabled,
+    placeholder
+  }), /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.Select.Portal, null, /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.Select.Content, null, /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.Select.Viewport, null, options?.map(({ value, label: label2 }) => (
+    // NOTE: Numeric values are converted to and from strings.
+    /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.Select.Option, {
+      key: String(value),
+      value: String(value)
+    }, label2 ?? String(value))
+  )))))));
+};
+var getInputComponent = (type, format) => {
+  switch (format) {
+    case import_echo_schema3.FormatEnum.LatLng:
+      return LatLngInput;
+  }
+  switch (type) {
+    case "string":
+      return TextInput;
+    case "number":
+      return NumberInput;
+    case "boolean":
+      return BooleanInput;
+  }
+};
+var __dxlog_file = "/home/runner/work/dxos/dxos/packages/ui/react-ui-form/src/hooks/useForm.ts";
+var useForm = ({ schema, initialValues, onValuesChanged, onValidate, onValid, onSubmit }) => {
+  const [values, setValues] = (0, import_react7.useState)(initialValues);
+  (0, import_react7.useEffect)(() => {
+    setValues(initialValues);
+  }, [
+    initialValues
+  ]);
+  const [touched, setTouched] = (0, import_react7.useState)(createKeySet(initialValues, false));
+  const [changed, setChanged] = (0, import_react7.useState)(createKeySet(initialValues, false));
+  const [errors, setErrors] = (0, import_react7.useState)({});
+  const validate = (0, import_react7.useCallback)((values2) => {
+    let errors2 = (0, import_schema3.validateSchema)(schema, values2) ?? [];
+    if (errors2.length === 0 && onValidate) {
+      errors2 = onValidate(values2) ?? [];
+    }
+    setErrors(flatMap(errors2));
+    return errors2.length === 0;
+  }, [
+    schema,
+    onValidate
+  ]);
+  const [schemaDirty, setSchemaDirty] = (0, import_react7.useState)(false);
+  (0, import_react7.useEffect)(() => setSchemaDirty(true), [
+    schema
+  ]);
+  (0, import_react7.useEffect)(() => {
+    if (schemaDirty) {
+      validate(values);
+      setSchemaDirty(false);
+    }
+  }, [
+    values,
+    schemaDirty
+  ]);
+  const canSubmit = (0, import_react7.useMemo)(() => Object.keys(values).every((property) => touched[property] === false || !errors[property]), [
+    values,
+    touched,
+    errors
+  ]);
+  const handleSubmit = (0, import_react7.useCallback)(() => {
+    if (validate(values)) {
+      onSubmit?.(values, {
+        changed
+      });
+    }
+  }, [
+    values,
+    validate,
+    onSubmit
+  ]);
+  const getStatus = (0, import_react7.useCallback)((property) => ({
+    status: errors[property] ? "error" : void 0,
+    error: errors[property] ? errors[property] : void 0
+  }), [
+    touched,
+    errors
+  ]);
+  const getValue = (property) => {
+    return values[property];
+  };
+  const onValueChange = (property, type, value) => {
+    let parsedValue = value;
+    try {
+      if (type === "number") {
+        parsedValue = parseFloat(value) || 0;
+      }
+    } catch (err) {
+      import_log3.log.catch(err, void 0, {
+        F: __dxlog_file,
+        L: 164,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
+      parsedValue = void 0;
+    }
+    const newValues = {
+      ...values,
+      [property]: parsedValue
+    };
+    setValues(newValues);
+    setChanged((prev) => ({
+      ...prev,
+      [property]: true
+    }));
+    onValuesChanged?.(newValues);
+    const isValid = validate(newValues);
+    if (isValid && onValid) {
+      onValid(newValues, {
+        changed
+      });
+    }
+  };
+  const onBlur = (0, import_react7.useCallback)((event) => {
+    const { name } = event.target;
+    setTouched((touched2) => ({
+      ...touched2,
+      [name]: true
+    }));
+    if (event.relatedTarget?.getAttribute("type") === "submit") {
+      setTouched(createKeySet(values, true));
+    }
+    validate(values);
+  }, [
+    validate,
+    values
+  ]);
+  return {
+    // State.
+    values,
+    errors,
+    touched,
+    changed,
+    canSubmit,
+    handleSubmit,
+    // Field utils.
+    getStatus,
+    getValue,
+    onValueChange,
+    onBlur
+  };
+};
+var createKeySet = (obj, value) => {
+  (0, import_invariant.invariant)(obj, void 0, {
+    F: __dxlog_file,
+    L: 215,
+    S: void 0,
+    A: [
+      "obj",
+      ""
+    ]
+  });
+  return Object.keys(obj).reduce((acc, key) => ({
+    ...acc,
+    [key]: value
+  }), {});
+};
+var flatMap = (errors) => {
+  return errors.reduce((result, { path, message }) => {
+    if (!(path in result)) {
+      result[path] = message;
+    }
+    return result;
+  }, {});
+};
+var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-form/src/components/Form/Form.tsx";
+var padding = "px-2";
+var Form = ({ classNames, schema, values: initialValues, path = [], readonly, filter, sort, autoSave, onValuesChanged, onValidate, onSubmit, onCancel, Custom }) => {
+  const { t } = (0, import_react_ui3.useTranslation)(translationKey);
+  const onValid = (0, import_react3.useMemo)(() => autoSave ? onSubmit : void 0, [
+    autoSave,
+    onSubmit
+  ]);
+  const { canSubmit, values, errors, handleSubmit, ...inputProps } = useForm({
+    schema,
+    initialValues,
+    onValuesChanged,
+    onValidate,
+    onValid,
+    onSubmit
+  });
+  const props = (0, import_react3.useMemo)(() => {
+    const props2 = (0, import_schema2.getSchemaProperties)(schema.ast, values);
+    const filtered = filter ? filter(props2) : props2;
+    const findIndex = (props3, prop) => {
+      const idx = props3.findIndex((p) => p === prop);
+      return idx === -1 ? Infinity : idx;
+    };
+    return sort ? filtered.sort(({ name: a }, { name: b }) => findIndex(sort, a) - findIndex(sort, b)) : filtered;
+  }, [
+    schema,
+    filter,
+    values
+  ]);
+  (0, import_react3.useEffect)(() => {
+    if (errors && Object.keys(errors).length) {
+      import_log2.log.warn("validation", {
+        errors
+      }, {
+        F: __dxlog_file2,
+        L: 93,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
+    }
+  }, [
+    errors
+  ]);
+  return /* @__PURE__ */ import_react3.default.createElement("div", {
+    role: "form",
+    className: (0, import_react_ui_theme.mx)("flex flex-col w-full gap-2 py-2", classNames)
+  }, props.map(({ prop, name, type, format, title, description, examples }) => {
+    const key = [
+      ...path,
+      name
+    ];
+    const InputComponent = Custom?.[key.join(".")] ?? getInputComponent(type, format);
+    if (!InputComponent) {
+      if (type === "object") {
+        const baseNode = (0, import_effect.findNode)(prop.type, import_effect.isDiscriminatedUnion);
+        const typeLiteral = baseNode ? (0, import_effect.getDiscriminatedType)(baseNode, values[name]) : (0, import_effect.findNode)(prop.type, import_echo_schema2.AST.isTypeLiteral);
+        if (typeLiteral) {
+          const schema2 = import_echo_schema2.S.make(typeLiteral);
+          return /* @__PURE__ */ import_react3.default.createElement("div", {
+            key: name,
+            role: "none"
+          }, /* @__PURE__ */ import_react3.default.createElement("div", {
+            className: padding
+          }, title ?? name), /* @__PURE__ */ import_react3.default.createElement(Form, {
+            schema: schema2,
+            path: key,
+            values: values[name] ?? {},
+            onValuesChanged: (childValues) => {
+              inputProps.onValueChange(name, "object", childValues);
+            },
+            Custom
+          }));
+        }
+      }
+      (0, import_log2.log)("no renderer for property", {
+        name,
+        type
+      }, {
+        F: __dxlog_file2,
+        L: 132,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
+      return null;
+    }
+    const placeholder = examples?.length ? `Example: ${examples[0]}` : description;
+    return /* @__PURE__ */ import_react3.default.createElement("div", {
+      key: name,
+      role: "none",
+      className: padding
+    }, /* @__PURE__ */ import_react3.default.createElement(InputComponent, {
+      type,
+      format,
+      property: name,
+      disabled: readonly,
+      label: title ?? name,
+      placeholder,
+      ...inputProps
+    }));
+  }).filter(import_util.isNotFalsy), (onCancel || onSubmit) && !autoSave && /* @__PURE__ */ import_react3.default.createElement("div", {
+    role: "none",
+    className: "flex justify-center"
+  }, /* @__PURE__ */ import_react3.default.createElement("div", {
+    role: "none",
+    className: (0, import_react_ui_theme.mx)(onCancel && !readonly && "grid grid-cols-2 gap-2")
+  }, onCancel && !readonly && /* @__PURE__ */ import_react3.default.createElement(import_react_ui3.IconButton, {
+    icon: "ph--x--regular",
+    label: t("button cancel"),
+    onClick: onCancel
+  }), onSubmit && /* @__PURE__ */ import_react3.default.createElement(import_react_ui3.IconButton, {
+    type: "submit",
+    disabled: !canSubmit,
+    icon: "ph--check--regular",
+    label: t("button save"),
+    onClick: handleSubmit
+  }))));
+};
+var __dxlog_file3 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-form/src/components/FieldEditor/FieldEditor.tsx";
+var FieldEditor = ({ view, projection, field, registry, onClose, onCancel }) => {
+  const { t } = (0, import_react_ui2.useTranslation)(translationKey);
+  const [props, setProps] = (0, import_react2.useState)(projection.getFieldProjection(field.id).props);
+  (0, import_react2.useEffect)(() => setProps(projection.getFieldProjection(field.id).props), [
+    field,
+    projection
+  ]);
+  const [schemas, setSchemas] = (0, import_react2.useState)([]);
+  (0, import_react2.useEffect)(() => {
+    if (!registry) {
+      return;
+    }
+    const subscription = registry.subscribe(setSchemas);
+    const t2 = setTimeout(async () => {
+      const schemas2 = await registry.query();
+      setSchemas(schemas2);
+    });
+    return () => {
+      clearTimeout(t2);
+      subscription?.();
+    };
+  }, [
+    registry
+  ]);
+  const [schema, setSchema] = (0, import_react2.useState)();
+  (0, import_react2.useEffect)(() => {
+    setSchema(schemas.find((schema2) => schema2.typename === props?.referenceSchema));
+  }, [
+    schemas,
+    props?.referenceSchema
+  ]);
+  const [{ fieldSchema }, setFieldSchema] = (0, import_react2.useState)({
+    fieldSchema: (0, import_schema.getFormatSchema)(props?.format)
+  });
+  const handleValuesChanged = (0, import_react2.useCallback)((_props) => {
+    if (_props.format !== props.format) {
+      setFieldSchema({
+        fieldSchema: (0, import_schema.getFormatSchema)(_props.format)
+      });
+    }
+    if (_props.referenceSchema !== props.referenceSchema) {
+      setSchema(schemas.find((schema2) => schema2.typename === _props.referenceSchema));
+    }
+    setProps((props2) => {
+      const type = import_echo_schema.formatToType[_props.format];
+      if (props2.type !== type) {
+        return {
+          ...props2,
+          ..._props,
+          type
+        };
+      }
+      return props2;
+    });
+  }, [
+    schemas,
+    props
+  ]);
+  const handleValidate = (0, import_react2.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 handleSubmit = (0, import_react2.useCallback)((props2) => {
+    projection.setFieldProjection({
+      field,
+      props: props2
+    });
+    onClose();
+  }, [
+    projection,
+    field,
+    onClose
+  ]);
+  const handleCancel = (0, import_react2.useCallback)(() => {
+    requestAnimationFrame(() => onCancel?.());
+    onClose();
+  }, [
+    onClose
+  ]);
+  if (!fieldSchema) {
+    import_log.log.warn("invalid format", {
+      props
+    }, {
+      F: __dxlog_file3,
+      L: 118,
+      S: void 0,
+      C: (f, a) => f(...a)
+    });
+    return null;
+  }
+  return /* @__PURE__ */ import_react2.default.createElement(Form, {
+    key: field.id,
+    autoFocus: true,
+    values: props,
+    schema: fieldSchema,
+    filter: (props2) => props2.filter((p) => p.name !== "type"),
+    sort: [
+      "property",
+      "format"
+    ],
+    onValuesChanged: handleValuesChanged,
+    onValidate: handleValidate,
+    onSubmit: handleSubmit,
+    onCancel: handleCancel,
+    Custom: {
+      ["format"]: (props2) => /* @__PURE__ */ import_react2.default.createElement(SelectInput, {
+        ...props2,
+        options: import_echo_schema.FormatEnums.filter((value) => value !== import_echo_schema.FormatEnum.None).map((value) => ({
+          value,
+          label: t(`format ${value}`)
+        }))
+      }),
+      ["referenceSchema"]: (props2) => /* @__PURE__ */ import_react2.default.createElement(SelectInput, {
+        ...props2,
+        options: schemas.map((schema2) => ({
+          value: schema2.typename
+        }))
+      }),
+      ["referencePath"]: (props2) => /* @__PURE__ */ import_react2.default.createElement(SelectInput, {
+        ...props2,
+        options: schema ? (0, import_schema.getSchemaProperties)(schema.schema.ast).sort(import_schema.sortProperties).map((p) => ({
+          value: p.name
+        })) : []
+      })
+    }
+  });
+};
+var grid = "grid grid-cols-[32px_1fr_32px] min-bs-[2.5rem]";
+var ViewMetaSchema = import_echo_schema4.S.Struct({
+  name: import_echo_schema4.S.String.annotations({
+    [import_echo_schema4.AST.TitleAnnotationId]: "View"
+  }),
+  type: import_echo_schema4.Format.DXN.annotations({
+    [import_echo_schema4.AST.TitleAnnotationId]: "Typename"
+  })
+}).pipe(import_echo_schema4.S.mutable);
+var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading = false, onDelete }) => {
+  const { t } = (0, import_react_ui7.useTranslation)(translationKey);
+  const projection = (0, import_react8.useMemo)(() => new import_schema4.ViewProjection(schema, view), [
+    schema,
+    view
+  ]);
+  const [field, setField] = (0, import_react8.useState)();
+  const viewValues = (0, import_react8.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.
+      type: view.query.type
+    };
+  }, [
+    view
+  ]);
+  const handleViewUpdate = (0, import_react8.useCallback)(({ name, type }) => {
+    requestAnimationFrame(() => {
+      view.name = name;
+      view.query.type = type;
+      schema.updateTypename(type);
+    });
+  }, [
+    view,
+    schema
+  ]);
+  const handleSelect = (0, import_react8.useCallback)((field2) => {
+    setField((f) => f === field2 ? void 0 : field2);
+  }, []);
+  const handleAdd = (0, import_react8.useCallback)(() => {
+    const field2 = projection.createFieldProjection();
+    setField(field2);
+  }, [
+    view
+  ]);
+  const handleMove = (0, import_react8.useCallback)((fromIndex, toIndex) => {
+    (0, import_util2.arrayMove)(view.fields, fromIndex, toIndex);
+  }, [
+    view.fields
+  ]);
+  const handleClose = (0, import_react8.useCallback)(() => setField(void 0), []);
+  return /* @__PURE__ */ import_react8.default.createElement("div", {
+    role: "none",
+    className: (0, import_react_ui_theme3.mx)("flex flex-col w-full divide-y divide-separator", classNames)
+  }, /* @__PURE__ */ import_react8.default.createElement(Form, {
+    autoFocus: true,
+    autoSave: true,
+    schema: ViewMetaSchema,
+    values: viewValues,
+    onSubmit: handleViewUpdate
+  }), /* @__PURE__ */ import_react8.default.createElement("div", null, /* @__PURE__ */ import_react8.default.createElement("div", {
+    role: "none",
+    className: "p-2"
+  }, /* @__PURE__ */ import_react8.default.createElement("label", {
+    className: (0, import_react_ui_theme3.mx)(import_react_ui_theme3.inputTextLabel)
+  }, t("fields label"))), /* @__PURE__ */ import_react8.default.createElement(import_react_ui_list.List.Root, {
+    items: view.fields,
+    isItem: import_echo_schema4.S.is(import_schema4.FieldSchema),
+    getId: (field2) => field2.id,
+    onMove: handleMove
+  }, ({ items: fields }) => /* @__PURE__ */ import_react8.default.createElement(import_react8.default.Fragment, null, showHeading && /* @__PURE__ */ import_react8.default.createElement("div", {
+    role: "heading",
+    className: grid
+  }, /* @__PURE__ */ import_react8.default.createElement("div", null), /* @__PURE__ */ import_react8.default.createElement("div", {
+    className: "flex items-center text-sm"
+  }, t("field path label"))), /* @__PURE__ */ import_react8.default.createElement("div", {
+    role: "list",
+    className: "flex flex-col w-full"
+  }, fields?.map((field2) => /* @__PURE__ */ import_react8.default.createElement(import_react_ui_list.List.Item, {
+    key: field2.id,
+    item: field2,
+    classNames: (0, import_react_ui_theme3.mx)(grid, import_react_ui_theme3.ghostHover, "cursor-pointer")
+  }, /* @__PURE__ */ import_react8.default.createElement(import_react_ui_list.List.ItemDragHandle, null), /* @__PURE__ */ import_react8.default.createElement(import_react_ui_list.List.ItemTitle, {
+    onClick: () => handleSelect(field2)
+  }, field2.path), /* @__PURE__ */ import_react8.default.createElement(import_react_ui_list.List.ItemDeleteButton, {
+    disabled: view.fields.length <= 1,
+    onClick: () => onDelete(field2.id)
+  }))))))), field && /* @__PURE__ */ import_react8.default.createElement(FieldEditor, {
+    key: field.id,
+    view,
+    projection,
+    field,
+    registry,
+    onClose: handleClose
+  }), !readonly && !field && /* @__PURE__ */ import_react8.default.createElement("div", {
+    className: "flex p-2 justify-center"
+  }, /* @__PURE__ */ import_react8.default.createElement(import_react_ui7.IconButton, {
+    icon: "ph--plus--regular",
+    label: t("button add property"),
+    onClick: handleAdd,
+    // TODO(burdon): Show field limit in ux (not tooltip).
+    disabled: view.fields.length >= import_schema4.VIEW_FIELD_LIMIT
+  })));
+};
+var parseValue = ({ type, format, value }) => {
+  if (value === void 0 || value === null || value === "") {
+    return void 0;
+  }
+  const parseScalar = (type2) => {
+    switch (type2) {
+      case import_echo_schema5.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_schema5.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_schema5.TypeEnum.String:
+      case import_echo_schema5.TypeEnum.Ref:
+        return String(value);
+      default: {
+        return value;
+      }
+    }
+  };
+  if (!format) {
+    return parseScalar(type);
+  }
+  switch (format) {
+    case import_echo_schema5.FormatEnum.Boolean:
+      return parseScalar(import_echo_schema5.TypeEnum.Boolean);
+    case import_echo_schema5.FormatEnum.Number:
+    case import_echo_schema5.FormatEnum.Percent:
+    case import_echo_schema5.FormatEnum.Currency:
+      return parseScalar(import_echo_schema5.TypeEnum.Number);
+    case import_echo_schema5.FormatEnum.String:
+    case import_echo_schema5.FormatEnum.Markdown: {
+      return parseScalar(import_echo_schema5.TypeEnum.String);
+    }
+    case import_echo_schema5.FormatEnum.Ref:
+      throw new Error(`unexpected format: ${import_echo_schema5.FormatEnum.Ref}`);
+    case import_echo_schema5.FormatEnum.DateTime:
+    case import_echo_schema5.FormatEnum.Date:
+    case import_echo_schema5.FormatEnum.Time:
+    case import_echo_schema5.FormatEnum.Timestamp: {
+      const date = new Date(value);
+      return isNaN(date.getTime()) ? null : date;
+    }
+    default: {
+      return value;
+    }
+  }
+};
+var cellClassesForFieldType = ({ type, format }) => {
+  if (!format) {
+    switch (type) {
+      case import_echo_schema5.TypeEnum.Number:
+        return [
+          "text-right",
+          "font-mono"
+        ];
+      case import_echo_schema5.TypeEnum.Boolean:
+        return [
+          "text-right",
+          "font-mono"
+        ];
+      case import_echo_schema5.TypeEnum.String:
+        return void 0;
+      case import_echo_schema5.TypeEnum.Ref:
+        return void 0;
+      default: {
+        return void 0;
+      }
+    }
+  }
+  switch (format) {
+    case import_echo_schema5.FormatEnum.Markdown:
+      return void 0;
+    case import_echo_schema5.FormatEnum.Timestamp:
+    case import_echo_schema5.FormatEnum.DateTime:
+    case import_echo_schema5.FormatEnum.Date:
+    case import_echo_schema5.FormatEnum.Time:
+      return [
+        "font-mono"
+      ];
+    case import_echo_schema5.FormatEnum.Currency:
+      return [
+        "text-right"
+      ];
+    case import_echo_schema5.FormatEnum.JSON:
+      return [
+        "font-mono"
+      ];
+    default:
+      return void 0;
+  }
+};
+var cellClassesForRowSelection = (selected) => selected ? [
+  "!bg-gridCellSelected"
+] : 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_schema6.TypeEnum.Boolean:
+        return value.toLocaleString().toUpperCase();
+      case import_echo_schema6.TypeEnum.Number:
+        return value.toLocaleString(locale);
+      case import_echo_schema6.TypeEnum.String:
+      case import_echo_schema6.TypeEnum.Ref:
+        return String(value);
+      default: {
+        return String(value);
+      }
+    }
+  };
+  if (!format) {
+    return formatScalar(type);
+  }
+  switch (format) {
+    case import_echo_schema6.FormatEnum.Boolean: {
+      return formatScalar(import_echo_schema6.TypeEnum.Boolean);
+    }
+    case import_echo_schema6.FormatEnum.Number: {
+      return formatScalar(import_echo_schema6.TypeEnum.Number);
+    }
+    case import_echo_schema6.FormatEnum.String:
+    case import_echo_schema6.FormatEnum.Ref: {
+      return formatScalar(import_echo_schema6.TypeEnum.String);
+    }
+    case import_echo_schema6.FormatEnum.Percent: {
+      return `${value * 100}%`;
+    }
+    case import_echo_schema6.FormatEnum.Currency: {
+      return value.toLocaleString(locale, {
+        style: "currency",
+        currency: "USD",
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 2
+      });
+    }
+    case import_echo_schema6.FormatEnum.DateTime:
+    case import_echo_schema6.FormatEnum.Date:
+    case import_echo_schema6.FormatEnum.Time: {
+      const date = new Date(value);
+      if (format === import_echo_schema6.FormatEnum.DateTime) {
+        return date.toLocaleString(locale);
+      } else if (format === import_echo_schema6.FormatEnum.Date) {
+        return date.toLocaleDateString(locale);
+      } else {
+        return date.toLocaleTimeString(locale);
+      }
+    }
+    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_schema6.TypeEnum.Boolean:
+      case import_echo_schema6.TypeEnum.Number:
+      case import_echo_schema6.TypeEnum.String:
+      case import_echo_schema6.TypeEnum.Ref:
+        return String(value);
+      default:
+        return String(value);
+    }
+  };
+  if (!format) {
+    return formatScalar(type);
+  }
+  switch (format) {
+    case import_echo_schema6.FormatEnum.Boolean:
+    case import_echo_schema6.FormatEnum.Number:
+    case import_echo_schema6.FormatEnum.String:
+    case import_echo_schema6.FormatEnum.Ref: {
+      return formatScalar(type);
+    }
+    case import_echo_schema6.FormatEnum.Percent: {
+      return String(value * 100);
+    }
+    case import_echo_schema6.FormatEnum.Currency: {
+      return String(value);
+    }
+    case import_echo_schema6.FormatEnum.DateTime: {
+      const date = new Date(value);
+      return date.toISOString();
+    }
+    case import_echo_schema6.FormatEnum.Date: {
+      const date = new Date(value);
+      return date.toISOString().split("T")[0];
+    }
+    case import_echo_schema6.FormatEnum.Time: {
+      const date = new Date(value);
+      return date.toISOString().split("T")[1].split(".")[0];
+    }
+    default: {
+      return String(value);
+    }
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  BooleanInput,
+  DeprecatedFormInput,
+  FieldEditor,
+  Form,
+  InputHeader,
+  LatLngInput,
+  NumberInput,
+  SelectInput,
+  TextInput,
+  ViewEditor,
+  cellClassesForFieldType,
+  cellClassesForRowSelection,
+  formatForDisplay,
+  formatForEditing,
+  parseValue,
+  pathNotUniqueError,
+  translations,
+  useForm
+});
+//# sourceMappingURL=index.cjs.map