@dxos/react-ui-form 0.7.1-staging.8709ba7 → 0.7.2-staging.6d26b2a

package/dist/types/src/components/Form/Input.d.ts

@@ -1,27 +1,22 @@
 import React, { type FC, type PropsWithChildren } from 'react';
-import { type FormatEnum } from '@dxos/echo-schema';
+import { type BaseObject, type FormatEnum, type PropertyKey } from '@dxos/echo-schema';
 import { type SimpleType } from '@dxos/effect';
-import { type PropertyKey } from '@dxos/schema';
 import { type FormHandler } from '../../hooks';
 /**
  * Props passed to input components.
  */
-export type InputProps<T extends object = {}> = {
+export type InputProps<T extends BaseObject> = {
     property: PropertyKey<T>;
     type: SimpleType;
     format?: FormatEnum;
     label: string;
     disabled?: boolean;
     placeholder?: string;
-    options?: Array<{
-        value: string | number;
-        label?: string;
-    }>;
 } & Pick<FormHandler<T>, 'getStatus' | 'getValue' | 'onValueChange' | 'onBlur'>;
 /**
  * Form input component.
  */
-export type InputComponent<T extends object = {}> = FC<InputProps<T>>;
+export type InputComponent<T extends BaseObject> = FC<InputProps<T>>;
 export type InputHeaderProps = PropsWithChildren<{
     error?: string;
 }>;

package/dist/types/src/components/Form/Input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../../../src/components/Form/Input.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE/D,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,cAAc,CAAC;AAG/C,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,cAAc,CAAC;AAEhD,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C;;GAEG;AACH,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,MAAM,GAAG,EAAE,IAAI;IAC9C,QAAQ,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC;IACzB,IAAI,EAAE,UAAU,CAAC;IACjB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,OAAO,CAAC,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CAC7D,GAAG,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,WAAW,GAAG,UAAU,GAAG,eAAe,GAAG,QAAQ,CAAC,CAAC;AAEhF;;GAEG;AAEH,MAAM,MAAM,cAAc,CAAC,CAAC,SAAS,MAAM,GAAG,EAAE,IAAI,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;AAEtE,MAAM,MAAM,gBAAgB,GAAG,iBAAiB,CAAC;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC,CAAC;AAEH,eAAO,MAAM,WAAW,wBAAyB,gBAAgB,sBAiBhE,CAAC"}
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../../../src/components/Form/Input.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE/D,OAAO,EAAE,KAAK,UAAU,EAAE,KAAK,UAAU,EAAE,KAAK,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACvF,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,cAAc,CAAC;AAI/C,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C;;GAEG;AACH,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,UAAU,IAAI;IAC7C,QAAQ,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC;IACzB,IAAI,EAAE,UAAU,CAAC;IACjB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,GAAG,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,WAAW,GAAG,UAAU,GAAG,eAAe,GAAG,QAAQ,CAAC,CAAC;AAEhF;;GAEG;AACH,MAAM,MAAM,cAAc,CAAC,CAAC,SAAS,UAAU,IAAI,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;AAErE,MAAM,MAAM,gBAAgB,GAAG,iBAAiB,CAAC;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC,CAAC;AAEH,eAAO,MAAM,WAAW,wBAAyB,gBAAgB,sBAiBhE,CAAC"}

package/dist/types/src/components/Form/factory.d.ts

@@ -1,8 +1,8 @@
-import { FormatEnum } from '@dxos/echo-schema';
+import { type BaseObject, FormatEnum } from '@dxos/echo-schema';
 import { type SimpleType } from '@dxos/effect';
 import { type InputComponent } from './Input';
 /**
  * Get property input component.
  */
-export declare const getInputComponent: <T extends object>(type: SimpleType, format?: FormatEnum) => InputComponent<T> | undefined;
+export declare const getInputComponent: <T extends BaseObject>(type: SimpleType, format?: FormatEnum) => InputComponent<T> | undefined;
 //# sourceMappingURL=factory.d.ts.map

package/dist/types/src/components/Form/factory.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"factory.d.ts","sourceRoot":"","sources":["../../../../../src/components/Form/factory.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,cAAc,CAAC;AAI/C,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,SAAS,CAAC;AAE9C;;GAEG;AACH,eAAO,MAAM,iBAAiB,GAAI,CAAC,SAAS,MAAM,QAC1C,UAAU,WACP,UAAU,KAClB,cAAc,CAAC,CAAC,CAAC,GAAG,SActB,CAAC"}
+{"version":3,"file":"factory.d.ts","sourceRoot":"","sources":["../../../../../src/components/Form/factory.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,UAAU,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAChE,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,cAAc,CAAC;AAI/C,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,SAAS,CAAC;AAE9C;;GAEG;AACH,eAAO,MAAM,iBAAiB,GAAI,CAAC,SAAS,UAAU,QAC9C,UAAU,WACP,UAAU,KAClB,cAAc,CAAC,CAAC,CAAC,GAAG,SActB,CAAC"}

package/dist/types/src/components/ViewEditor/ViewEditor.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ViewEditor.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/ViewEditor/ViewEditor.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,EAAE,KAAK,IAAI,EAAE,KAAK,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAU5D,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AA0C1C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CAQjC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC"}
+{"version":3,"file":"ViewEditor.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/ViewEditor/ViewEditor.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,EAAE,KAAK,IAAI,EAAE,KAAK,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAS5D,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AA0C1C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CAQjC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC"}

package/dist/types/src/hooks/useForm.d.ts

@@ -1,10 +1,11 @@
 import { type FocusEvent } from 'react';
+import { type BaseObject, type PropertyKey } from '@dxos/echo-schema';
 import { type SimpleType, type S } from '@dxos/effect';
-import { type PropertyKey, type ValidationError } from '@dxos/schema';
+import { type ValidationError } from '@dxos/schema';
 /**
  * Return type from `useForm` hook.
  */
-export type FormHandler<T extends object = {}> = {
+export type FormHandler<T extends BaseObject> = {
     values: T;
     errors: Record<PropertyKey<T>, string>;
     touched: Record<PropertyKey<T>, boolean>;
@@ -22,7 +23,7 @@ export type FormHandler<T extends object = {}> = {
 /**
  * Hook options.
  */
-export interface FormOptions<T extends object> {
+export interface FormOptions<T extends BaseObject> {
     schema: S.Schema<T>;
     initialValues: T;
     /**
@@ -54,5 +55,5 @@ export interface FormOptions<T extends object> {
  * Creates a hook for managing form state, including values, validation, and submission.
  * Deeply integrated with `@dxos/schema` for schema-based validation.
  */
-export declare const useForm: <T extends object>({ schema, initialValues, onValuesChanged, onValidate, onValid, onSubmit, }: FormOptions<T>) => FormHandler<T>;
+export declare const useForm: <T extends BaseObject>({ schema, initialValues, onValuesChanged, onValidate, onValid, onSubmit, }: FormOptions<T>) => FormHandler<T>;
 //# sourceMappingURL=useForm.d.ts.map

package/dist/types/src/hooks/useForm.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useForm.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useForm.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,UAAU,EAA6C,MAAM,OAAO,CAAC;AAEnF,OAAO,EAAE,KAAK,UAAU,EAAE,KAAK,CAAC,EAAE,MAAM,cAAc,CAAC;AAGvD,OAAO,EAAkB,KAAK,WAAW,EAAE,KAAK,eAAe,EAAE,MAAM,cAAc,CAAC;AAEtF;;GAEG;AACH,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,MAAM,GAAG,EAAE,IAAI;IAK/C,MAAM,EAAE,CAAC,CAAC;IACV,MAAM,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC;IACvC,OAAO,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC;IACzC,OAAO,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC;IACzC,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,MAAM,IAAI,CAAC;IAMzB,SAAS,EAAE,CAAC,QAAQ,EAAE,WAAW,CAAC,CAAC,CAAC,KAAK;QAAE,MAAM,CAAC,EAAE,OAAO,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9E,QAAQ,EAAE,CAAC,CAAC,EAAE,QAAQ,EAAE,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;IAC7C,aAAa,EAAE,CAAC,CAAC,EAAE,QAAQ,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IACjF,MAAM,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,gBAAgB,GAAG,mBAAmB,CAAC,KAAK,IAAI,CAAC;CAC7E,CAAC;AAEF;;GAEG;AACH,MAAM,WAAW,WAAW,CAAC,CAAC,SAAS,MAAM;IAC3C,MAAM,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;IAGpB,aAAa,EAAE,CAAC,CAAC;IAEjB;;;;OAIG;IACH,eAAe,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,IAAI,CAAC;IAEtC;;;;OAIG;IAEH,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,eAAe,EAAE,GAAG,SAAS,CAAC;IAE1D;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE;QAAE,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAA;KAAE,KAAK,IAAI,CAAC;IAE5E;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE;QAAE,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAA;KAAE,KAAK,IAAI,CAAC;CAC9E;AAED;;;GAGG;AACH,eAAO,MAAM,OAAO,GAAI,CAAC,SAAS,MAAM,8EAOrC,WAAW,CAAC,CAAC,CAAC,KAAG,WAAW,CAAC,CAAC,CAiIhC,CAAC"}
+{"version":3,"file":"useForm.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useForm.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,UAAU,EAA6C,MAAM,OAAO,CAAC;AAEnF,OAAO,EAAE,KAAK,UAAU,EAAE,KAAK,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACtE,OAAO,EAAE,KAAK,UAAU,EAAE,KAAK,CAAC,EAAE,MAAM,cAAc,CAAC;AAGvD,OAAO,EAAkB,KAAK,eAAe,EAAE,MAAM,cAAc,CAAC;AAEpE;;GAEG;AACH,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,UAAU,IAAI;IAK9C,MAAM,EAAE,CAAC,CAAC;IACV,MAAM,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC;IACvC,OAAO,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC;IACzC,OAAO,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC;IACzC,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,MAAM,IAAI,CAAC;IAMzB,SAAS,EAAE,CAAC,QAAQ,EAAE,WAAW,CAAC,CAAC,CAAC,KAAK;QAAE,MAAM,CAAC,EAAE,OAAO,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9E,QAAQ,EAAE,CAAC,CAAC,EAAE,QAAQ,EAAE,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;IAC7C,aAAa,EAAE,CAAC,CAAC,EAAE,QAAQ,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IACjF,MAAM,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,gBAAgB,GAAG,mBAAmB,CAAC,KAAK,IAAI,CAAC;CAC7E,CAAC;AAEF;;GAEG;AACH,MAAM,WAAW,WAAW,CAAC,CAAC,SAAS,UAAU;IAC/C,MAAM,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;IAGpB,aAAa,EAAE,CAAC,CAAC;IAEjB;;;;OAIG;IACH,eAAe,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,IAAI,CAAC;IAEtC;;;;OAIG;IAEH,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,eAAe,EAAE,GAAG,SAAS,CAAC;IAE1D;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE;QAAE,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAA;KAAE,KAAK,IAAI,CAAC;IAE5E;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE;QAAE,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAA;KAAE,KAAK,IAAI,CAAC;CAC9E;AAED;;;GAGG;AACH,eAAO,MAAM,OAAO,GAAI,CAAC,SAAS,UAAU,8EAOzC,WAAW,CAAC,CAAC,CAAC,KAAG,WAAW,CAAC,CAAC,CAiIhC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-form",
-  "version": "0.7.1-staging.8709ba7",
+  "version": "0.7.2-staging.6d26b2a",
   "description": "Data components.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -23,27 +23,25 @@
   ],
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "^1.4.0",
-    "@atlaskit/pragmatic-drag-and-drop-flourish": "^1.1.2",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.3",
-    "@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^1.1.3",
     "@effect/schema": "^0.75.5",
     "@radix-ui/react-context": "^1.0.0",
     "date-fns": "^3.3.1",
     "effect": "^3.9.2",
     "jsonpath": "^1.1.1",
-    "@dxos/async": "0.7.1-staging.8709ba7",
-    "@dxos/debug": "0.7.1-staging.8709ba7",
-    "@dxos/echo-db": "0.7.1-staging.8709ba7",
-    "@dxos/invariant": "0.7.1-staging.8709ba7",
-    "@dxos/effect": "0.7.1-staging.8709ba7",
-    "@dxos/echo-schema": "0.7.1-staging.8709ba7",
-    "@dxos/keys": "0.7.1-staging.8709ba7",
-    "@dxos/react-client": "0.7.1-staging.8709ba7",
-    "@dxos/log": "0.7.1-staging.8709ba7",
-    "@dxos/react-ui-list": "0.7.1-staging.8709ba7",
-    "@dxos/schema": "0.7.1-staging.8709ba7",
-    "@dxos/react-ui-types": "0.7.1-staging.8709ba7",
-    "@dxos/util": "0.7.1-staging.8709ba7"
+    "@dxos/async": "0.7.2-staging.6d26b2a",
+    "@dxos/debug": "0.7.2-staging.6d26b2a",
+    "@dxos/echo-db": "0.7.2-staging.6d26b2a",
+    "@dxos/effect": "0.7.2-staging.6d26b2a",
+    "@dxos/invariant": "0.7.2-staging.6d26b2a",
+    "@dxos/echo-schema": "0.7.2-staging.6d26b2a",
+    "@dxos/keys": "0.7.2-staging.6d26b2a",
+    "@dxos/log": "0.7.2-staging.6d26b2a",
+    "@dxos/react-ui-list": "0.7.2-staging.6d26b2a",
+    "@dxos/react-ui-types": "0.7.2-staging.6d26b2a",
+    "@dxos/react-client": "0.7.2-staging.6d26b2a",
+    "@dxos/schema": "0.7.2-staging.6d26b2a",
+    "@dxos/util": "0.7.2-staging.6d26b2a"
   },
   "devDependencies": {
     "@phosphor-icons/react": "^2.1.5",
@@ -54,12 +52,12 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/echo-signals": "0.7.1-staging.8709ba7",
-    "@dxos/random": "0.7.1-staging.8709ba7",
-    "@dxos/react-ui-syntax-highlighter": "0.7.1-staging.8709ba7",
-    "@dxos/react-ui": "0.7.1-staging.8709ba7",
-    "@dxos/react-ui-theme": "0.7.1-staging.8709ba7",
-    "@dxos/storybook-utils": "0.7.1-staging.8709ba7"
+    "@dxos/echo-signals": "0.7.2-staging.6d26b2a",
+    "@dxos/random": "0.7.2-staging.6d26b2a",
+    "@dxos/react-ui": "0.7.2-staging.6d26b2a",
+    "@dxos/react-ui-syntax-highlighter": "0.7.2-staging.6d26b2a",
+    "@dxos/react-ui-theme": "0.7.2-staging.6d26b2a",
+    "@dxos/storybook-utils": "0.7.2-staging.6d26b2a"
   },
   "peerDependencies": {
     "@effect/schema": "^0.75.5",
@@ -67,8 +65,8 @@
     "effect": "^3.9.2",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.7.1-staging.8709ba7",
-    "@dxos/react-ui-theme": "0.7.1-staging.8709ba7"
+    "@dxos/react-ui": "0.7.2-staging.6d26b2a",
+    "@dxos/react-ui-theme": "0.7.2-staging.6d26b2a"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Form/Custom.tsx

@@ -4,7 +4,7 @@
 
 import React from 'react';
 
-import { type LatLng } from '@dxos/echo-schema';
+import { type BaseObject, type GeoPoint } from '@dxos/echo-schema';
 import { Input, useTranslation } from '@dxos/react-ui';
 
 import { InputHeader, type InputProps } from './Input';
@@ -14,7 +14,7 @@ import { translationKey } from '../../translations';
 // Custom format components.
 //
 
-export const LatLngInput = <T extends object>({
+export const GeiPointInput = <T extends BaseObject>({
   property,
   type,
   label,
@@ -26,7 +26,7 @@ export const LatLngInput = <T extends object>({
 }: InputProps<T>) => {
   const { t } = useTranslation(translationKey);
   const { status, error } = getStatus?.(property);
-  const { lat = 0, lng = 0 } = getValue<LatLng>(property) ?? {};
+  const [lng = 0, lat = 0] = getValue<GeoPoint>(property) ?? [];
 
   return (
     <Input.Root validationValence={status}>
@@ -37,17 +37,17 @@ export const LatLngInput = <T extends object>({
         <Input.TextInput
           type='number'
           disabled={disabled}
-          placeholder={t('placeholder latitude')}
-          value={lat}
-          onChange={(event) => onValueChange(property, type, { lat: safeParseFloat(event.target.value, 0), lng })}
+          placeholder={t('placeholder longitude')}
+          value={lng}
+          onChange={(event) => onValueChange(property, type, [lat, safeParseFloat(event.target.value, 0)])}
           onBlur={onBlur}
         />
         <Input.TextInput
           type='number'
           disabled={disabled}
-          placeholder={t('placeholder longitude')}
-          value={lng}
-          onChange={(event) => onValueChange(property, type, { lat, lng: safeParseFloat(event.target.value, 0) })}
+          placeholder={t('placeholder latitude')}
+          value={lat}
+          onChange={(event) => onValueChange(property, type, [safeParseFloat(event.target.value, 0), lng])}
           onBlur={onBlur}
         />
       </div>

package/src/components/Form/Defaults.tsx

@@ -4,11 +4,12 @@
 
 import React from 'react';
 
+import { type BaseObject } from '@dxos/echo-schema';
 import { Input, Select } from '@dxos/react-ui';
 
 import { type InputProps, InputHeader } from './Input';
 
-export const TextInput = <T extends object>({
+export const TextInput = <T extends BaseObject>({
   property,
   type,
   label,
@@ -37,7 +38,7 @@ export const TextInput = <T extends object>({
   );
 };
 
-export const NumberInput = <T extends object>({
+export const NumberInput = <T extends BaseObject>({
   property,
   type,
   label,
@@ -68,7 +69,7 @@ export const NumberInput = <T extends object>({
   );
 };
 
-export const BooleanInput = <T extends object>({
+export const BooleanInput = <T extends BaseObject>({
   property,
   type,
   label,
@@ -91,7 +92,11 @@ export const BooleanInput = <T extends object>({
   );
 };
 
-export const SelectInput = <T extends object>({
+export type SelectInputOptions<T extends BaseObject> = InputProps<T> & {
+  options?: Array<{ value: string | number; label?: string }>;
+};
+
+export const SelectInput = <T extends BaseObject>({
   property,
   type,
   label,
@@ -101,7 +106,7 @@ export const SelectInput = <T extends object>({
   getStatus,
   getValue,
   onValueChange,
-}: InputProps<T>) => {
+}: SelectInputOptions<T>) => {
   const { status, error } = getStatus?.(property);
 
   return (

package/src/components/Form/Form.stories.tsx

@@ -26,7 +26,7 @@ const TestSchema = S.Struct({
       street: S.optional(S.String.annotations({ [AST.TitleAnnotationId]: 'Street' })),
       city: S.optional(S.String.annotations({ [AST.TitleAnnotationId]: 'City' })),
       zip: S.optional(S.String.pipe(S.pattern(/^\d{5}(-\d{4})?$/)).annotations({ [AST.TitleAnnotationId]: 'ZIP' })),
-      location: S.optional(Format.LatLng.annotations({ [AST.TitleAnnotationId]: 'Location' })),
+      location: S.optional(Format.GeoPoint.annotations({ [AST.TitleAnnotationId]: 'Location' })),
     }).annotations({ [AST.TitleAnnotationId]: 'Address' }),
   ),
 }).pipe(S.mutable);
@@ -51,7 +51,7 @@ const DefaultStory = ({ values: initialValues }: StoryProps) => {
 };
 
 const meta: Meta<StoryProps> = {
-  title: 'ui/react-ui-data/Form',
+  title: 'ui/react-ui-form/Form',
   component: Form,
   render: DefaultStory,
   decorators: [withLayout({ fullscreen: true, tooltips: true }), withTheme],

package/src/components/Form/Form.tsx

@@ -2,16 +2,19 @@
 // Copyright 2024 DXOS.org
 //
 
+import { pipe } from 'effect';
+import { capitalize } from 'effect/String';
 import React, { useEffect, useMemo } from 'react';
 
-import { AST, S } from '@dxos/echo-schema';
+import { AST, type BaseObject, S, type PropertyKey } from '@dxos/echo-schema';
 import { findNode, getDiscriminatedType, isDiscriminatedUnion } from '@dxos/effect';
 import { log } from '@dxos/log';
 import { IconButton, type ThemedClassName, useTranslation } from '@dxos/react-ui';
 import { mx } from '@dxos/react-ui-theme';
-import { getSchemaProperties, type PropertyKey, type SchemaProperty } from '@dxos/schema';
+import { getSchemaProperties, type SchemaProperty } from '@dxos/schema';
 import { isNotFalsy } from '@dxos/util';
 
+import { SelectInput } from './Defaults';
 import { type InputComponent } from './Input';
 import { getInputComponent } from './factory';
 import { type FormOptions, useForm } from '../../hooks';
@@ -21,9 +24,9 @@ import { translationKey } from '../../translations';
 
 const padding = 'px-2';
 
-export type PropsFilter<T extends Object> = (props: SchemaProperty<T>[]) => SchemaProperty<T>[];
+export type PropsFilter<T extends BaseObject> = (props: SchemaProperty<T>[]) => SchemaProperty<T>[];
 
-export type FormProps<T extends object> = ThemedClassName<
+export type FormProps<T extends BaseObject> = ThemedClassName<
   {
     values: T;
     /** Path to the current object from the root. Used with nested forms. */
@@ -48,7 +51,7 @@ export type FormProps<T extends object> = ThemedClassName<
 /**
  * General purpose form component that displays field controls based on the given schema.
  */
-export const Form = <T extends object = {}>({
+export const Form = <T extends BaseObject>({
   classNames,
   schema,
   values: initialValues,
@@ -76,7 +79,7 @@ export const Form = <T extends object = {}>({
 
   // Filter and sort props.
   // TODO(burdon): Move into useForm?
-  const props = useMemo(() => {
+  const properties = useMemo(() => {
     const props = getSchemaProperties<T>(schema.ast, values);
     const filtered = filter ? filter(props) : props;
     const findIndex = (props: PropertyKey<T>[], prop: PropertyKey<T>) => {
@@ -96,25 +99,50 @@ export const Form = <T extends object = {}>({
 
   return (
     <div role='form' className={mx('flex flex-col w-full gap-2 py-2', classNames)}>
-      {props
-        .map(({ prop, name, type, format, title, description, examples }) => {
-          // Custom property allows for sub forms.
-          // TODO(burdon): Use Select control if options are present in annotation?
+      {properties
+        .map((property) => {
+          const { ast, name, type, format, title, description, examples, options } = property;
           const key = [...path, name];
-          const InputComponent = Custom?.[key.join('.')] ?? getInputComponent<T>(type, format);
+          const label = pipe(title ?? name, capitalize);
+          const placeholder = examples?.length ? `Example: "${examples[0]}"` : description;
+
+          // Get generic input.
+          let InputComponent = Custom?.[key.join('.')];
+          if (!InputComponent) {
+            // Select.
+            if (options) {
+              return (
+                <div key={name} role='none' className={padding}>
+                  <SelectInput
+                    type={type}
+                    format={format}
+                    property={name}
+                    disabled={readonly}
+                    label={label}
+                    options={options.map((option) => ({ value: option, label: String(option) }))}
+                    placeholder={placeholder}
+                    {...inputProps}
+                  />
+                </div>
+              );
+            }
+
+            InputComponent = getInputComponent<T>(type, format);
+          }
+
           if (!InputComponent) {
             // Recursively render form.
             if (type === 'object') {
-              const baseNode = findNode(prop.type, isDiscriminatedUnion);
+              const baseNode = findNode(ast, isDiscriminatedUnion);
               const typeLiteral = baseNode
                 ? getDiscriminatedType(baseNode, values[name] as any)
-                : findNode(prop.type, AST.isTypeLiteral);
+                : findNode(ast, AST.isTypeLiteral);
 
               if (typeLiteral) {
                 const schema = S.make(typeLiteral);
                 return (
                   <div key={name} role='none'>
-                    <div className={padding}>{title ?? name}</div>
+                    <div className={padding}>{label}</div>
                     <Form<any>
                       schema={schema}
                       path={key}
@@ -133,8 +161,6 @@ export const Form = <T extends object = {}>({
             return null;
           }
 
-          const placeholder = examples?.length ? `Example: ${examples[0]}` : description;
-
           return (
             <div key={name} role='none' className={padding}>
               <InputComponent
@@ -142,7 +168,7 @@ export const Form = <T extends object = {}>({
                 format={format}
                 property={name}
                 disabled={readonly}
-                label={title ?? name}
+                label={label}
                 placeholder={placeholder}
                 {...inputProps}
               />
@@ -151,8 +177,6 @@ export const Form = <T extends object = {}>({
         })
         .filter(isNotFalsy)}
 
-      {/* {errors && <div className='overflow-hidden text-sm'>{JSON.stringify(errors)}</div>} */}
-
       {(onCancel || onSubmit) && !autoSave && (
         <div role='none' className='flex justify-center'>
           <div role='none' className={mx(onCancel && !readonly && 'grid grid-cols-2 gap-2')}>

package/src/components/Form/Input.tsx

@@ -4,33 +4,29 @@
 
 import React, { type FC, type PropsWithChildren } from 'react';
 
-import { type FormatEnum } from '@dxos/echo-schema';
+import { type BaseObject, type FormatEnum, type PropertyKey } from '@dxos/echo-schema';
 import { type SimpleType } from '@dxos/effect';
 import { Icon, Tooltip } from '@dxos/react-ui';
 import { errorText } from '@dxos/react-ui-theme';
-import { type PropertyKey } from '@dxos/schema';
 
 import { type FormHandler } from '../../hooks';
 
 /**
  * Props passed to input components.
  */
-export type InputProps<T extends object = {}> = {
+export type InputProps<T extends BaseObject> = {
   property: PropertyKey<T>;
   type: SimpleType;
   format?: FormatEnum;
   label: string;
   disabled?: boolean;
   placeholder?: string;
-  // TODO(burdon): Provide from annotations? E.g., enum.
-  options?: Array<{ value: string | number; label?: string }>;
 } & Pick<FormHandler<T>, 'getStatus' | 'getValue' | 'onValueChange' | 'onBlur'>;
 
 /**
  * Form input component.
  */
-// TODO(burdon): Remove generic from inputs.
-export type InputComponent<T extends object = {}> = FC<InputProps<T>>;
+export type InputComponent<T extends BaseObject> = FC<InputProps<T>>;
 
 export type InputHeaderProps = PropsWithChildren<{
   error?: string;

package/src/components/Form/factory.tsx

@@ -2,23 +2,23 @@
 // Copyright 2024 DXOS.org
 //
 
-import { FormatEnum } from '@dxos/echo-schema';
+import { type BaseObject, FormatEnum } from '@dxos/echo-schema';
 import { type SimpleType } from '@dxos/effect';
 
-import { LatLngInput } from './Custom';
+import { GeiPointInput } from './Custom';
 import { BooleanInput, NumberInput, TextInput } from './Defaults';
 import { type InputComponent } from './Input';
 
 /**
  * Get property input component.
  */
-export const getInputComponent = <T extends object>(
+export const getInputComponent = <T extends BaseObject>(
   type: SimpleType,
   format?: FormatEnum,
 ): InputComponent<T> | undefined => {
   switch (format) {
     case FormatEnum.LatLng:
-      return LatLngInput;
+      return GeiPointInput;
   }
 
   switch (type) {

package/src/components/ViewEditor/ViewEditor.stories.tsx

@@ -10,8 +10,7 @@ import React, { useCallback, useEffect, useState } from 'react';
 import { Format, type MutableSchema, S, toJsonSchema, TypedObject } from '@dxos/echo-schema';
 import { useSpace } from '@dxos/react-client/echo';
 import { withClientProvider } from '@dxos/react-client/testing';
-import { ViewProjection, createView } from '@dxos/schema';
-import { type ViewType } from '@dxos/schema';
+import { type ViewType, ViewProjection, createView } from '@dxos/schema';
 import { withTheme, withLayout } from '@dxos/storybook-utils';
 
 import { ViewEditor } from './ViewEditor';

package/src/hooks/useForm.ts

@@ -4,15 +4,16 @@
 
 import { type FocusEvent, useCallback, useEffect, useMemo, useState } from 'react';
 
+import { type BaseObject, type PropertyKey } from '@dxos/echo-schema';
 import { type SimpleType, type S } from '@dxos/effect';
 import { invariant } from '@dxos/invariant';
 import { log } from '@dxos/log';
-import { validateSchema, type PropertyKey, type ValidationError } from '@dxos/schema';
+import { validateSchema, type ValidationError } from '@dxos/schema';
 
 /**
  * Return type from `useForm` hook.
  */
-export type FormHandler<T extends object = {}> = {
+export type FormHandler<T extends BaseObject> = {
   //
   // Form state management.
   //
@@ -37,7 +38,7 @@ export type FormHandler<T extends object = {}> = {
 /**
  * Hook options.
  */
-export interface FormOptions<T extends object> {
+export interface FormOptions<T extends BaseObject> {
   schema: S.Schema<T>;
 
   // TODO(burdon): Are these reactive?
@@ -73,7 +74,7 @@ export interface FormOptions<T extends object> {
  * Creates a hook for managing form state, including values, validation, and submission.
  * Deeply integrated with `@dxos/schema` for schema-based validation.
  */
-export const useForm = <T extends object>({
+export const useForm = <T extends BaseObject>({
   schema,
   initialValues,
   onValuesChanged,
@@ -211,12 +212,12 @@ export const useForm = <T extends object>({
   } satisfies FormHandler<T>;
 };
 
-const createKeySet = <T extends object, V>(obj: T, value: V): Record<PropertyKey<T>, V> => {
+const createKeySet = <T extends BaseObject, V>(obj: T, value: V): Record<PropertyKey<T>, V> => {
   invariant(obj);
   return Object.keys(obj).reduce((acc, key) => ({ ...acc, [key]: value }), {} as Record<PropertyKey<T>, V>);
 };
 
-const flatMap = <T extends object>(errors: ValidationError[]) => {
+const flatMap = <T extends BaseObject>(errors: ValidationError[]) => {
   return errors.reduce(
     (result, { path, message }) => {
       if (!(path in result)) {