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

package/dist/lib/browser/index.mjs

@@ -0,0 +1,1008 @@
+// packages/ui/react-ui-form/src/translations.ts
+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"
+      }
+    }
+  }
+];
+
+// packages/ui/react-ui-form/src/components/deprecated/FormInput.tsx
+import React from "react";
+import { Input } from "@dxos/react-ui";
+var DeprecatedFormInput = ({ label, description, secondary, children }) => {
+  const primary = /* @__PURE__ */ React.createElement("div", {
+    role: "none",
+    className: "flex w-full gap-4 py-1"
+  }, /* @__PURE__ */ React.createElement(Input.Root, null, /* @__PURE__ */ React.createElement("div", {
+    role: "none",
+    className: "flex flex-col w-full"
+  }, /* @__PURE__ */ React.createElement(Input.Label, {
+    classNames: "flex min-h-[40px] items-center"
+  }, label), description && /* @__PURE__ */ React.createElement(Input.DescriptionAndValidation, {
+    classNames: "mbs-0.5"
+  }, /* @__PURE__ */ React.createElement(Input.Description, null, description))), /* @__PURE__ */ React.createElement("div", {
+    role: "none"
+  }, /* @__PURE__ */ React.createElement("div", {
+    role: "none",
+    className: "flex min-h-[40px] items-center"
+  }, children))));
+  if (secondary) {
+    return /* @__PURE__ */ React.createElement("div", {
+      role: "none",
+      className: "flex flex-col w-full"
+    }, primary, secondary);
+  }
+  return primary;
+};
+
+// packages/ui/react-ui-form/src/components/FieldEditor/FieldEditor.tsx
+import React6, { useCallback as useCallback2, useEffect as useEffect3, useState as useState2 } from "react";
+import { FormatEnum as FormatEnum2, FormatEnums, formatToType } from "@dxos/echo-schema";
+import { log as log3 } from "@dxos/log";
+import { useTranslation as useTranslation3 } from "@dxos/react-ui";
+import { getFormatSchema, getSchemaProperties as getSchemaProperties2, sortProperties } from "@dxos/schema";
+
+// packages/ui/react-ui-form/src/components/Form/Form.tsx
+import React5, { useEffect as useEffect2, useMemo as useMemo2 } from "react";
+import { AST, S } from "@dxos/echo-schema";
+import { findNode, getDiscriminatedType, isDiscriminatedUnion } from "@dxos/effect";
+import { log as log2 } from "@dxos/log";
+import { IconButton, useTranslation as useTranslation2 } from "@dxos/react-ui";
+import { mx } from "@dxos/react-ui-theme";
+import { getSchemaProperties } from "@dxos/schema";
+import { isNotFalsy } from "@dxos/util";
+
+// packages/ui/react-ui-form/src/components/Form/factory.tsx
+import { FormatEnum } from "@dxos/echo-schema";
+
+// packages/ui/react-ui-form/src/components/Form/Custom.tsx
+import React3 from "react";
+import { Input as Input2, useTranslation } from "@dxos/react-ui";
+
+// packages/ui/react-ui-form/src/components/Form/Input.tsx
+import React2 from "react";
+import { Icon, Tooltip } from "@dxos/react-ui";
+import { errorText } from "@dxos/react-ui-theme";
+var InputHeader = ({ children, error }) => {
+  return /* @__PURE__ */ React2.createElement("div", {
+    role: "none",
+    className: "flex justify-between items-center mb-1"
+  }, children, error && /* @__PURE__ */ React2.createElement(Tooltip.Root, null, /* @__PURE__ */ React2.createElement(Tooltip.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ React2.createElement(Icon, {
+    icon: "ph--warning--regular",
+    size: 4,
+    classNames: errorText
+  })), /* @__PURE__ */ React2.createElement(Tooltip.Content, {
+    side: "bottom"
+  }, /* @__PURE__ */ React2.createElement(Tooltip.Arrow, null), error)));
+};
+
+// packages/ui/react-ui-form/src/components/Form/Custom.tsx
+var LatLngInput = ({ property, type, label, disabled, getStatus, getValue, onValueChange, onBlur }) => {
+  const { t } = useTranslation(translationKey);
+  const { status, error } = getStatus?.(property);
+  const { lat = 0, lng = 0 } = getValue(property) ?? {};
+  return /* @__PURE__ */ React3.createElement(Input2.Root, {
+    validationValence: status
+  }, /* @__PURE__ */ React3.createElement(InputHeader, {
+    error
+  }, /* @__PURE__ */ React3.createElement(Input2.Label, null, label)), /* @__PURE__ */ React3.createElement("div", {
+    className: "grid grid-cols-2 gap-2"
+  }, /* @__PURE__ */ React3.createElement(Input2.TextInput, {
+    type: "number",
+    disabled,
+    placeholder: t("placeholder latitude"),
+    value: lat,
+    onChange: (event) => onValueChange(property, type, {
+      lat: safeParseFloat(event.target.value, 0),
+      lng
+    }),
+    onBlur
+  }), /* @__PURE__ */ React3.createElement(Input2.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;
+  }
+};
+
+// packages/ui/react-ui-form/src/components/Form/Defaults.tsx
+import React4 from "react";
+import { Input as Input3, Select } from "@dxos/react-ui";
+var TextInput = ({ property, type, label, disabled, placeholder, getStatus, getValue, onValueChange, onBlur }) => {
+  const { status, error } = getStatus?.(property);
+  return /* @__PURE__ */ React4.createElement(Input3.Root, {
+    validationValence: status
+  }, /* @__PURE__ */ React4.createElement(InputHeader, {
+    error
+  }, /* @__PURE__ */ React4.createElement(Input3.Label, null, label)), /* @__PURE__ */ React4.createElement(Input3.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__ */ React4.createElement(Input3.Root, {
+    validationValence: status
+  }, /* @__PURE__ */ React4.createElement(InputHeader, {
+    error
+  }, /* @__PURE__ */ React4.createElement(Input3.Label, null, label)), /* @__PURE__ */ React4.createElement(Input3.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__ */ React4.createElement(Input3.Root, {
+    validationValence: status
+  }, /* @__PURE__ */ React4.createElement(InputHeader, {
+    error
+  }, /* @__PURE__ */ React4.createElement(Input3.Label, null, label)), /* @__PURE__ */ React4.createElement(Input3.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__ */ React4.createElement(Input3.Root, {
+    validationValence: status
+  }, /* @__PURE__ */ React4.createElement(InputHeader, {
+    error
+  }, /* @__PURE__ */ React4.createElement(Input3.Label, null, label)), /* @__PURE__ */ React4.createElement(Select.Root, {
+    value: getValue(property),
+    onValueChange: (value) => onValueChange(property, type, value)
+  }, /* @__PURE__ */ React4.createElement(Select.TriggerButton, {
+    classNames: "is-full",
+    disabled,
+    placeholder
+  }), /* @__PURE__ */ React4.createElement(Select.Portal, null, /* @__PURE__ */ React4.createElement(Select.Content, null, /* @__PURE__ */ React4.createElement(Select.Viewport, null, options?.map(({ value, label: label2 }) => (
+    // NOTE: Numeric values are converted to and from strings.
+    /* @__PURE__ */ React4.createElement(Select.Option, {
+      key: String(value),
+      value: String(value)
+    }, label2 ?? String(value))
+  )))))));
+};
+
+// packages/ui/react-ui-form/src/components/Form/factory.tsx
+var getInputComponent = (type, format) => {
+  switch (format) {
+    case FormatEnum.LatLng:
+      return LatLngInput;
+  }
+  switch (type) {
+    case "string":
+      return TextInput;
+    case "number":
+      return NumberInput;
+    case "boolean":
+      return BooleanInput;
+  }
+};
+
+// packages/ui/react-ui-form/src/hooks/useForm.ts
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { invariant } from "@dxos/invariant";
+import { log } from "@dxos/log";
+import { validateSchema } from "@dxos/schema";
+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] = useState(initialValues);
+  useEffect(() => {
+    setValues(initialValues);
+  }, [
+    initialValues
+  ]);
+  const [touched, setTouched] = useState(createKeySet(initialValues, false));
+  const [changed, setChanged] = useState(createKeySet(initialValues, false));
+  const [errors, setErrors] = useState({});
+  const validate = useCallback((values2) => {
+    let errors2 = validateSchema(schema, values2) ?? [];
+    if (errors2.length === 0 && onValidate) {
+      errors2 = onValidate(values2) ?? [];
+    }
+    setErrors(flatMap(errors2));
+    return errors2.length === 0;
+  }, [
+    schema,
+    onValidate
+  ]);
+  const [schemaDirty, setSchemaDirty] = useState(false);
+  useEffect(() => setSchemaDirty(true), [
+    schema
+  ]);
+  useEffect(() => {
+    if (schemaDirty) {
+      validate(values);
+      setSchemaDirty(false);
+    }
+  }, [
+    values,
+    schemaDirty
+  ]);
+  const canSubmit = useMemo(() => Object.keys(values).every((property) => touched[property] === false || !errors[property]), [
+    values,
+    touched,
+    errors
+  ]);
+  const handleSubmit = useCallback(() => {
+    if (validate(values)) {
+      onSubmit?.(values, {
+        changed
+      });
+    }
+  }, [
+    values,
+    validate,
+    onSubmit
+  ]);
+  const getStatus = 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) {
+      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 = 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) => {
+  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;
+  }, {});
+};
+
+// packages/ui/react-ui-form/src/components/Form/Form.tsx
+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 } = useTranslation2(translationKey);
+  const onValid = useMemo2(() => autoSave ? onSubmit : void 0, [
+    autoSave,
+    onSubmit
+  ]);
+  const { canSubmit, values, errors, handleSubmit, ...inputProps } = useForm({
+    schema,
+    initialValues,
+    onValuesChanged,
+    onValidate,
+    onValid,
+    onSubmit
+  });
+  const props = useMemo2(() => {
+    const props2 = 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
+  ]);
+  useEffect2(() => {
+    if (errors && Object.keys(errors).length) {
+      log2.warn("validation", {
+        errors
+      }, {
+        F: __dxlog_file2,
+        L: 93,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
+    }
+  }, [
+    errors
+  ]);
+  return /* @__PURE__ */ React5.createElement("div", {
+    role: "form",
+    className: 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 = findNode(prop.type, isDiscriminatedUnion);
+        const typeLiteral = baseNode ? getDiscriminatedType(baseNode, values[name]) : findNode(prop.type, AST.isTypeLiteral);
+        if (typeLiteral) {
+          const schema2 = S.make(typeLiteral);
+          return /* @__PURE__ */ React5.createElement("div", {
+            key: name,
+            role: "none"
+          }, /* @__PURE__ */ React5.createElement("div", {
+            className: padding
+          }, title ?? name), /* @__PURE__ */ React5.createElement(Form, {
+            schema: schema2,
+            path: key,
+            values: values[name] ?? {},
+            onValuesChanged: (childValues) => {
+              inputProps.onValueChange(name, "object", childValues);
+            },
+            Custom
+          }));
+        }
+      }
+      log2("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__ */ React5.createElement("div", {
+      key: name,
+      role: "none",
+      className: padding
+    }, /* @__PURE__ */ React5.createElement(InputComponent, {
+      type,
+      format,
+      property: name,
+      disabled: readonly,
+      label: title ?? name,
+      placeholder,
+      ...inputProps
+    }));
+  }).filter(isNotFalsy), (onCancel || onSubmit) && !autoSave && /* @__PURE__ */ React5.createElement("div", {
+    role: "none",
+    className: "flex justify-center"
+  }, /* @__PURE__ */ React5.createElement("div", {
+    role: "none",
+    className: mx(onCancel && !readonly && "grid grid-cols-2 gap-2")
+  }, onCancel && !readonly && /* @__PURE__ */ React5.createElement(IconButton, {
+    icon: "ph--x--regular",
+    label: t("button cancel"),
+    onClick: onCancel
+  }), onSubmit && /* @__PURE__ */ React5.createElement(IconButton, {
+    type: "submit",
+    disabled: !canSubmit,
+    icon: "ph--check--regular",
+    label: t("button save"),
+    onClick: handleSubmit
+  }))));
+};
+
+// packages/ui/react-ui-form/src/components/FieldEditor/FieldEditor.tsx
+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 } = useTranslation3(translationKey);
+  const [props, setProps] = useState2(projection.getFieldProjection(field.id).props);
+  useEffect3(() => setProps(projection.getFieldProjection(field.id).props), [
+    field,
+    projection
+  ]);
+  const [schemas, setSchemas] = useState2([]);
+  useEffect3(() => {
+    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] = useState2();
+  useEffect3(() => {
+    setSchema(schemas.find((schema2) => schema2.typename === props?.referenceSchema));
+  }, [
+    schemas,
+    props?.referenceSchema
+  ]);
+  const [{ fieldSchema }, setFieldSchema] = useState2({
+    fieldSchema: getFormatSchema(props?.format)
+  });
+  const handleValuesChanged = useCallback2((_props) => {
+    if (_props.format !== props.format) {
+      setFieldSchema({
+        fieldSchema: getFormatSchema(_props.format)
+      });
+    }
+    if (_props.referenceSchema !== props.referenceSchema) {
+      setSchema(schemas.find((schema2) => schema2.typename === _props.referenceSchema));
+    }
+    setProps((props2) => {
+      const type = formatToType[_props.format];
+      if (props2.type !== type) {
+        return {
+          ...props2,
+          ..._props,
+          type
+        };
+      }
+      return props2;
+    });
+  }, [
+    schemas,
+    props
+  ]);
+  const handleValidate = useCallback2(({ 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 = useCallback2((props2) => {
+    projection.setFieldProjection({
+      field,
+      props: props2
+    });
+    onClose();
+  }, [
+    projection,
+    field,
+    onClose
+  ]);
+  const handleCancel = useCallback2(() => {
+    requestAnimationFrame(() => onCancel?.());
+    onClose();
+  }, [
+    onClose
+  ]);
+  if (!fieldSchema) {
+    log3.warn("invalid format", {
+      props
+    }, {
+      F: __dxlog_file3,
+      L: 118,
+      S: void 0,
+      C: (f, a) => f(...a)
+    });
+    return null;
+  }
+  return /* @__PURE__ */ React6.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__ */ React6.createElement(SelectInput, {
+        ...props2,
+        options: FormatEnums.filter((value) => value !== FormatEnum2.None).map((value) => ({
+          value,
+          label: t(`format ${value}`)
+        }))
+      }),
+      ["referenceSchema"]: (props2) => /* @__PURE__ */ React6.createElement(SelectInput, {
+        ...props2,
+        options: schemas.map((schema2) => ({
+          value: schema2.typename
+        }))
+      }),
+      ["referencePath"]: (props2) => /* @__PURE__ */ React6.createElement(SelectInput, {
+        ...props2,
+        options: schema ? getSchemaProperties2(schema.schema.ast).sort(sortProperties).map((p) => ({
+          value: p.name
+        })) : []
+      })
+    }
+  });
+};
+
+// packages/ui/react-ui-form/src/components/ViewEditor/ViewEditor.tsx
+import React7, { useCallback as useCallback3, useMemo as useMemo3, useState as useState3 } from "react";
+import { AST as AST2, Format, S as S2 } from "@dxos/echo-schema";
+import { IconButton as IconButton2, useTranslation as useTranslation4 } from "@dxos/react-ui";
+import { List } from "@dxos/react-ui-list";
+import { ghostHover, inputTextLabel, mx as mx2 } from "@dxos/react-ui-theme";
+import { FieldSchema, ViewProjection, VIEW_FIELD_LIMIT } from "@dxos/schema";
+import { arrayMove } from "@dxos/util";
+var grid = "grid grid-cols-[32px_1fr_32px] min-bs-[2.5rem]";
+var ViewMetaSchema = S2.Struct({
+  name: S2.String.annotations({
+    [AST2.TitleAnnotationId]: "View"
+  }),
+  type: Format.DXN.annotations({
+    [AST2.TitleAnnotationId]: "Typename"
+  })
+}).pipe(S2.mutable);
+var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading = false, onDelete }) => {
+  const { t } = useTranslation4(translationKey);
+  const projection = useMemo3(() => new ViewProjection(schema, view), [
+    schema,
+    view
+  ]);
+  const [field, setField] = useState3();
+  const viewValues = useMemo3(() => {
+    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 = useCallback3(({ name, type }) => {
+    requestAnimationFrame(() => {
+      view.name = name;
+      view.query.type = type;
+      schema.updateTypename(type);
+    });
+  }, [
+    view,
+    schema
+  ]);
+  const handleSelect = useCallback3((field2) => {
+    setField((f) => f === field2 ? void 0 : field2);
+  }, []);
+  const handleAdd = useCallback3(() => {
+    const field2 = projection.createFieldProjection();
+    setField(field2);
+  }, [
+    view
+  ]);
+  const handleMove = useCallback3((fromIndex, toIndex) => {
+    arrayMove(view.fields, fromIndex, toIndex);
+  }, [
+    view.fields
+  ]);
+  const handleClose = useCallback3(() => setField(void 0), []);
+  return /* @__PURE__ */ React7.createElement("div", {
+    role: "none",
+    className: mx2("flex flex-col w-full divide-y divide-separator", classNames)
+  }, /* @__PURE__ */ React7.createElement(Form, {
+    autoFocus: true,
+    autoSave: true,
+    schema: ViewMetaSchema,
+    values: viewValues,
+    onSubmit: handleViewUpdate
+  }), /* @__PURE__ */ React7.createElement("div", null, /* @__PURE__ */ React7.createElement("div", {
+    role: "none",
+    className: "p-2"
+  }, /* @__PURE__ */ React7.createElement("label", {
+    className: mx2(inputTextLabel)
+  }, t("fields label"))), /* @__PURE__ */ React7.createElement(List.Root, {
+    items: view.fields,
+    isItem: S2.is(FieldSchema),
+    getId: (field2) => field2.id,
+    onMove: handleMove
+  }, ({ items: fields }) => /* @__PURE__ */ React7.createElement(React7.Fragment, null, showHeading && /* @__PURE__ */ React7.createElement("div", {
+    role: "heading",
+    className: grid
+  }, /* @__PURE__ */ React7.createElement("div", null), /* @__PURE__ */ React7.createElement("div", {
+    className: "flex items-center text-sm"
+  }, t("field path label"))), /* @__PURE__ */ React7.createElement("div", {
+    role: "list",
+    className: "flex flex-col w-full"
+  }, fields?.map((field2) => /* @__PURE__ */ React7.createElement(List.Item, {
+    key: field2.id,
+    item: field2,
+    classNames: mx2(grid, ghostHover, "cursor-pointer")
+  }, /* @__PURE__ */ React7.createElement(List.ItemDragHandle, null), /* @__PURE__ */ React7.createElement(List.ItemTitle, {
+    onClick: () => handleSelect(field2)
+  }, field2.path), /* @__PURE__ */ React7.createElement(List.ItemDeleteButton, {
+    disabled: view.fields.length <= 1,
+    onClick: () => onDelete(field2.id)
+  }))))))), field && /* @__PURE__ */ React7.createElement(FieldEditor, {
+    key: field.id,
+    view,
+    projection,
+    field,
+    registry,
+    onClose: handleClose
+  }), !readonly && !field && /* @__PURE__ */ React7.createElement("div", {
+    className: "flex p-2 justify-center"
+  }, /* @__PURE__ */ React7.createElement(IconButton2, {
+    icon: "ph--plus--regular",
+    label: t("button add property"),
+    onClick: handleAdd,
+    // TODO(burdon): Show field limit in ux (not tooltip).
+    disabled: view.fields.length >= VIEW_FIELD_LIMIT
+  })));
+};
+
+// packages/ui/react-ui-form/src/util/field.ts
+import { FormatEnum as FormatEnum3, TypeEnum } from "@dxos/echo-schema";
+var parseValue = ({ type, format, value }) => {
+  if (value === void 0 || value === null || value === "") {
+    return void 0;
+  }
+  const parseScalar = (type2) => {
+    switch (type2) {
+      case 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 TypeEnum.Number: {
+        const cleaned = typeof value === "string" ? value.replace(/[^0-9.-]+/g, "") : value;
+        const num = Number(cleaned);
+        return Number.isNaN(num) ? null : num;
+      }
+      case TypeEnum.String:
+      case TypeEnum.Ref:
+        return String(value);
+      default: {
+        return value;
+      }
+    }
+  };
+  if (!format) {
+    return parseScalar(type);
+  }
+  switch (format) {
+    case FormatEnum3.Boolean:
+      return parseScalar(TypeEnum.Boolean);
+    case FormatEnum3.Number:
+    case FormatEnum3.Percent:
+    case FormatEnum3.Currency:
+      return parseScalar(TypeEnum.Number);
+    case FormatEnum3.String:
+    case FormatEnum3.Markdown: {
+      return parseScalar(TypeEnum.String);
+    }
+    case FormatEnum3.Ref:
+      throw new Error(`unexpected format: ${FormatEnum3.Ref}`);
+    case FormatEnum3.DateTime:
+    case FormatEnum3.Date:
+    case FormatEnum3.Time:
+    case FormatEnum3.Timestamp: {
+      const date = new Date(value);
+      return isNaN(date.getTime()) ? null : date;
+    }
+    default: {
+      return value;
+    }
+  }
+};
+var cellClassesForFieldType = ({ type, format }) => {
+  if (!format) {
+    switch (type) {
+      case TypeEnum.Number:
+        return [
+          "text-right",
+          "font-mono"
+        ];
+      case TypeEnum.Boolean:
+        return [
+          "text-right",
+          "font-mono"
+        ];
+      case TypeEnum.String:
+        return void 0;
+      case TypeEnum.Ref:
+        return void 0;
+      default: {
+        return void 0;
+      }
+    }
+  }
+  switch (format) {
+    case FormatEnum3.Markdown:
+      return void 0;
+    case FormatEnum3.Timestamp:
+    case FormatEnum3.DateTime:
+    case FormatEnum3.Date:
+    case FormatEnum3.Time:
+      return [
+        "font-mono"
+      ];
+    case FormatEnum3.Currency:
+      return [
+        "text-right"
+      ];
+    case FormatEnum3.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`
+});
+
+// packages/ui/react-ui-form/src/util/formatting.ts
+import { FormatEnum as FormatEnum4, TypeEnum as TypeEnum2 } from "@dxos/echo-schema";
+var formatForDisplay = ({ type, format, value, locale = void 0 }) => {
+  const formatScalar = (type2) => {
+    switch (type2) {
+      case TypeEnum2.Boolean:
+        return value.toLocaleString().toUpperCase();
+      case TypeEnum2.Number:
+        return value.toLocaleString(locale);
+      case TypeEnum2.String:
+      case TypeEnum2.Ref:
+        return String(value);
+      default: {
+        return String(value);
+      }
+    }
+  };
+  if (!format) {
+    return formatScalar(type);
+  }
+  switch (format) {
+    case FormatEnum4.Boolean: {
+      return formatScalar(TypeEnum2.Boolean);
+    }
+    case FormatEnum4.Number: {
+      return formatScalar(TypeEnum2.Number);
+    }
+    case FormatEnum4.String:
+    case FormatEnum4.Ref: {
+      return formatScalar(TypeEnum2.String);
+    }
+    case FormatEnum4.Percent: {
+      return `${value * 100}%`;
+    }
+    case FormatEnum4.Currency: {
+      return value.toLocaleString(locale, {
+        style: "currency",
+        currency: "USD",
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 2
+      });
+    }
+    case FormatEnum4.DateTime:
+    case FormatEnum4.Date:
+    case FormatEnum4.Time: {
+      const date = new Date(value);
+      if (format === FormatEnum4.DateTime) {
+        return date.toLocaleString(locale);
+      } else if (format === FormatEnum4.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 TypeEnum2.Boolean:
+      case TypeEnum2.Number:
+      case TypeEnum2.String:
+      case TypeEnum2.Ref:
+        return String(value);
+      default:
+        return String(value);
+    }
+  };
+  if (!format) {
+    return formatScalar(type);
+  }
+  switch (format) {
+    case FormatEnum4.Boolean:
+    case FormatEnum4.Number:
+    case FormatEnum4.String:
+    case FormatEnum4.Ref: {
+      return formatScalar(type);
+    }
+    case FormatEnum4.Percent: {
+      return String(value * 100);
+    }
+    case FormatEnum4.Currency: {
+      return String(value);
+    }
+    case FormatEnum4.DateTime: {
+      const date = new Date(value);
+      return date.toISOString();
+    }
+    case FormatEnum4.Date: {
+      const date = new Date(value);
+      return date.toISOString().split("T")[0];
+    }
+    case FormatEnum4.Time: {
+      const date = new Date(value);
+      return date.toISOString().split("T")[1].split(".")[0];
+    }
+    default: {
+      return String(value);
+    }
+  }
+};
+export {
+  BooleanInput,
+  DeprecatedFormInput,
+  FieldEditor,
+  Form,
+  InputHeader,
+  LatLngInput,
+  NumberInput,
+  SelectInput,
+  TextInput,
+  ViewEditor,
+  cellClassesForFieldType,
+  cellClassesForRowSelection,
+  formatForDisplay,
+  formatForEditing,
+  parseValue,
+  pathNotUniqueError,
+  translations_default as translations,
+  useForm
+};
+//# sourceMappingURL=index.mjs.map