@dxos/react-ui-form 0.7.5-main.9d26e3a → 0.7.5-main.9d2a38b

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

@@ -1,8 +1,8 @@
 import React from 'react';
-import { type BaseObject, type PropertyKey } from '@dxos/echo-schema';
+import { type BaseObject, S, type PropertyKey } from '@dxos/echo-schema';
 import { type ThemedClassName } from '@dxos/react-ui';
 import { type SchemaProperty } from '@dxos/schema';
-import { type InputComponent } from './Input';
+import { type InputProps, type InputComponent } from './Input';
 import { type FormOptions } from '../../hooks';
 export type PropsFilter<T extends BaseObject> = (props: SchemaProperty<T>[]) => SchemaProperty<T>[];
 export type FormProps<T extends BaseObject> = ThemedClassName<{
@@ -16,15 +16,21 @@ export type FormProps<T extends BaseObject> = ThemedClassName<{
     autoSave?: boolean;
     testId?: string;
     onCancel?: () => void;
+    lookupComponent?: (args: {
+        prop: string;
+        schema: S.Schema<any>;
+        inputProps: InputProps<T>;
+    }) => React.ReactElement | undefined;
     /**
      * Map of custom renderers for specific properties.
+     * @deprecated Use lookupComponent instead.
      */
     Custom?: Partial<Record<string, InputComponent<T>>>;
 } & Pick<FormOptions<T>, 'schema' | 'onValuesChanged' | 'onValidate' | 'onSave'>>;
 /**
  * General purpose form component that displays field controls based on the given schema.
  */
-export declare const Form: <T extends BaseObject>({ classNames, schema, values: initialValues, path, readonly, filter, sort, autoSave, testId, onValuesChanged, onValidate, onSave, onCancel, Custom, }: FormProps<T>) => React.JSX.Element;
+export declare const Form: <T extends BaseObject>({ classNames, schema, values: initialValues, path, readonly, filter, sort, autoSave, testId, onValuesChanged, onValidate, onSave, onCancel, lookupComponent, Custom, }: FormProps<T>) => React.JSX.Element;
 type FormActionsProps = {
     readonly?: boolean;
     canSubmit: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../../../../../src/components/Form/Form.tsx"],"names":[],"mappings":"AAMA,OAAO,KAA6B,MAAM,OAAO,CAAC;AAElD,OAAO,EAAO,KAAK,UAAU,EAAK,KAAK,WAAW,EAAmB,MAAM,mBAAmB,CAAC;AAG/F,OAAO,EAAc,KAAK,eAAe,EAAkB,MAAM,gBAAgB,CAAC;AAElF,OAAO,EAAuB,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAIxE,OAAO,EAAe,KAAK,cAAc,EAAE,MAAM,SAAS,CAAC;AAE3D,OAAO,EAAoB,KAAK,WAAW,EAAW,MAAM,aAAa,CAAC;AAO1E,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,UAAU,IAAI,CAAC,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,EAAE,KAAK,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC;AAEpG,MAAM,MAAM,SAAS,CAAC,CAAC,SAAS,UAAU,IAAI,eAAe,CAC3D;IACE,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;IAEnB,wEAAwE;IACxE,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;IAGhB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,MAAM,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC;IACxB,IAAI,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IAEtB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;CACrD,GAAG,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,QAAQ,GAAG,iBAAiB,GAAG,YAAY,GAAG,QAAQ,CAAC,CACjF,CAAC;AAEF;;GAEG;AAEH,eAAO,MAAM,IAAI,GAAI,CAAC,SAAS,UAAU,yJAetC,SAAS,CAAC,CAAC,CAAC,sBAwId,CAAC;AAqJF,KAAK,gBAAgB,GAAG;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,WAAW,gDAAiD,gBAAgB,sBAsBxF,CAAC"}
+{"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../../../../../src/components/Form/Form.tsx"],"names":[],"mappings":"AAMA,OAAO,KAA6B,MAAM,OAAO,CAAC;AAElD,OAAO,EAAO,KAAK,UAAU,EAAE,CAAC,EAAE,KAAK,WAAW,EAAmB,MAAM,mBAAmB,CAAC;AAG/F,OAAO,EAAc,KAAK,eAAe,EAAkB,MAAM,gBAAgB,CAAC;AAElF,OAAO,EAAuB,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAIxE,OAAO,EAAe,KAAK,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,SAAS,CAAC;AAE5E,OAAO,EAAoB,KAAK,WAAW,EAAW,MAAM,aAAa,CAAC;AAO1E,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,UAAU,IAAI,CAAC,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,EAAE,KAAK,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC;AAEpG,MAAM,MAAM,SAAS,CAAC,CAAC,SAAS,UAAU,IAAI,eAAe,CAC3D;IACE,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;IAEnB,wEAAwE;IACxE,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;IAGhB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,MAAM,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC;IACxB,IAAI,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IAEtB,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE;QACvB,IAAI,EAAE,MAAM,CAAC;QACb,MAAM,EAAE,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;QACtB,UAAU,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC;KAC3B,KAAK,KAAK,CAAC,YAAY,GAAG,SAAS,CAAC;IACrC;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;CACrD,GAAG,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,QAAQ,GAAG,iBAAiB,GAAG,YAAY,GAAG,QAAQ,CAAC,CACjF,CAAC;AAEF;;GAEG;AAEH,eAAO,MAAM,IAAI,GAAI,CAAC,SAAS,UAAU,0KAgBtC,SAAS,CAAC,CAAC,CAAC,sBA8Jd,CAAC;AAqJF,KAAK,gBAAgB,GAAG;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,WAAW,gDAAiD,gBAAgB,sBAsBxF,CAAC"}

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

@@ -9,10 +9,11 @@ export type ViewEditorProps = ThemedClassName<{
     registry?: SchemaRegistry;
     readonly?: boolean;
     showHeading?: boolean;
+    onTypenameChanged: (typename: string) => void;
     onDelete: (fieldId: string) => void;
 }>;
 /**
  * Schema-based object form.
  */
-export declare const ViewEditor: ({ classNames, schema, view, registry, readonly, showHeading, onDelete, }: ViewEditorProps) => React.JSX.Element;
+export declare const ViewEditor: ({ classNames, schema, view, registry, readonly, showHeading, onTypenameChanged, onDelete, }: ViewEditorProps) => React.JSX.Element;
 //# sourceMappingURL=ViewEditor.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ViewEditor.d.ts","sourceRoot":"","sources":["../../../../../src/components/ViewEditor/ViewEditor.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAE9D,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,eAAe,CAAC;AACpD,OAAO,EAAe,KAAK,UAAU,EAAK,MAAM,mBAAmB,CAAC;AACpE,OAAO,EAAc,KAAK,eAAe,EAAkB,MAAM,gBAAgB,CAAC;AAGlF,OAAO,EAA+B,KAAK,QAAQ,EAAoC,MAAM,cAAc,CAAC;AAoB5G,MAAM,MAAM,eAAe,GAAG,eAAe,CAAC;IAC5C,MAAM,EAAE,UAAU,CAAC;IACnB,IAAI,EAAE,QAAQ,CAAC;IACf,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CACrC,CAAC,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,UAAU,6EAQpB,eAAe,sBA2GjB,CAAC"}
+{"version":3,"file":"ViewEditor.d.ts","sourceRoot":"","sources":["../../../../../src/components/ViewEditor/ViewEditor.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAE9D,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,eAAe,CAAC;AACpD,OAAO,EAAe,KAAK,UAAU,EAAK,MAAM,mBAAmB,CAAC;AACpE,OAAO,EAAc,KAAK,eAAe,EAAkB,MAAM,gBAAgB,CAAC;AAGlF,OAAO,EAA+B,KAAK,QAAQ,EAAoC,MAAM,cAAc,CAAC;AAoB5G,MAAM,MAAM,eAAe,GAAG,eAAe,CAAC;IAC5C,MAAM,EAAE,UAAU,CAAC;IACnB,IAAI,EAAE,QAAQ,CAAC;IACf,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,iBAAiB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CACrC,CAAC,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,UAAU,gGASpB,eAAe,sBA8GjB,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;AAU5D,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AA+D1C,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/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"version":"5.7.2"}
+{"version":"5.7.3"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-form",
-  "version": "0.7.5-main.9d26e3a",
+  "version": "0.7.5-main.9d2a38b",
   "description": "Data components.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -29,20 +29,20 @@
     "date-fns": "^3.3.1",
     "effect": "^3.12.1",
     "jsonpath": "^1.1.1",
-    "@dxos/debug": "0.7.5-main.9d26e3a",
-    "@dxos/echo-db": "0.7.5-main.9d26e3a",
-    "@dxos/echo-schema": "0.7.5-main.9d26e3a",
-    "@dxos/effect": "0.7.5-main.9d26e3a",
-    "@dxos/async": "0.7.5-main.9d26e3a",
-    "@dxos/keys": "0.7.5-main.9d26e3a",
-    "@dxos/invariant": "0.7.5-main.9d26e3a",
-    "@dxos/log": "0.7.5-main.9d26e3a",
-    "@dxos/live-object": "0.7.5-main.9d26e3a",
-    "@dxos/react-client": "0.7.5-main.9d26e3a",
-    "@dxos/react-ui-list": "0.7.5-main.9d26e3a",
-    "@dxos/react-ui-types": "0.7.5-main.9d26e3a",
-    "@dxos/schema": "0.7.5-main.9d26e3a",
-    "@dxos/util": "0.7.5-main.9d26e3a"
+    "@dxos/async": "0.7.5-main.9d2a38b",
+    "@dxos/debug": "0.7.5-main.9d2a38b",
+    "@dxos/echo-db": "0.7.5-main.9d2a38b",
+    "@dxos/echo-schema": "0.7.5-main.9d2a38b",
+    "@dxos/effect": "0.7.5-main.9d2a38b",
+    "@dxos/keys": "0.7.5-main.9d2a38b",
+    "@dxos/invariant": "0.7.5-main.9d2a38b",
+    "@dxos/live-object": "0.7.5-main.9d2a38b",
+    "@dxos/log": "0.7.5-main.9d2a38b",
+    "@dxos/react-client": "0.7.5-main.9d2a38b",
+    "@dxos/react-ui-list": "0.7.5-main.9d2a38b",
+    "@dxos/schema": "0.7.5-main.9d2a38b",
+    "@dxos/react-ui-types": "0.7.5-main.9d2a38b",
+    "@dxos/util": "0.7.5-main.9d2a38b"
   },
   "devDependencies": {
     "@phosphor-icons/react": "^2.1.5",
@@ -53,12 +53,12 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/react-ui": "0.7.5-main.9d26e3a",
-    "@dxos/echo-signals": "0.7.5-main.9d26e3a",
-    "@dxos/random": "0.7.5-main.9d26e3a",
-    "@dxos/react-ui-syntax-highlighter": "0.7.5-main.9d26e3a",
-    "@dxos/storybook-utils": "0.7.5-main.9d26e3a",
-    "@dxos/react-ui-theme": "0.7.5-main.9d26e3a"
+    "@dxos/echo-signals": "0.7.5-main.9d2a38b",
+    "@dxos/react-ui": "0.7.5-main.9d2a38b",
+    "@dxos/random": "0.7.5-main.9d2a38b",
+    "@dxos/react-ui-syntax-highlighter": "0.7.5-main.9d2a38b",
+    "@dxos/react-ui-theme": "0.7.5-main.9d2a38b",
+    "@dxos/storybook-utils": "0.7.5-main.9d2a38b"
   },
   "peerDependencies": {
     "@effect/schema": "^0.75.5",
@@ -66,8 +66,8 @@
     "effect": "^3.9.2",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.7.5-main.9d26e3a",
-    "@dxos/react-ui-theme": "0.7.5-main.9d26e3a"
+    "@dxos/react-ui": "0.7.5-main.9d2a38b",
+    "@dxos/react-ui-theme": "0.7.5-main.9d2a38b"
   },
   "publishConfig": {
     "access": "public"

package/src/components/FieldEditor/FieldEditor.tsx

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
 import { type SchemaRegistry } from '@dxos/echo-db';
 import { FormatEnum, FormatEnums, formatToType, type EchoSchema } from '@dxos/echo-schema';
@@ -16,10 +16,11 @@ import {
   type PropertyType,
   type ViewType,
   type ViewProjection,
+  type SchemaProperty,
 } from '@dxos/schema';
 
 import { translationKey } from '../../translations';
-import { Form, type FormProps, SelectInput } from '../Form';
+import { Form, type FormProps, type InputComponent, SelectInput } from '../Form';
 
 export type FieldEditorProps = {
   view: ViewType;
@@ -57,9 +58,9 @@ export const FieldEditor = ({ view, projection, field, registry, onSave, onCance
     };
   }, [registry]);
 
-  const [schema, setSchema] = useState<EchoSchema>();
+  const [referenceSchema, setReferenceSchema] = useState<EchoSchema>();
   useEffect(() => {
-    setSchema(schemas.find((schema) => schema.typename === props?.referenceSchema));
+    setReferenceSchema(schemas.find((schema) => schema.typename === props?.referenceSchema));
   }, [schemas, props?.referenceSchema]);
 
   // TODO(burdon): Need to wrap otherwise throws error:
@@ -78,9 +79,15 @@ export const FieldEditor = ({ view, projection, field, registry, onSave, onCance
         }
         return { fieldSchema };
       });
-      if (_props.referenceSchema !== props.referenceSchema) {
-        setSchema(schemas.find((schema) => schema.typename === _props.referenceSchema));
-      }
+      setReferenceSchema((prev) => {
+        if (_props.referenceSchema !== prev?.typename) {
+          const newSchema = schemas.find((schema) => schema.typename === _props.referenceSchema);
+          if (newSchema) {
+            return newSchema;
+          }
+        }
+        return prev;
+      });
 
       setProps((props) => {
         const type = formatToType[_props.format as keyof typeof formatToType];
@@ -122,6 +129,46 @@ export const FieldEditor = ({ view, projection, field, registry, onSave, onCance
     onSave();
   }, [onSave]);
 
+  const Custom: Partial<Record<string, InputComponent<PropertyType>>> = useMemo(
+    () => ({
+      ['format' satisfies keyof PropertyType]: (props) => (
+        <SelectInput<PropertyType>
+          {...props}
+          options={FormatEnums.filter((value) => value !== FormatEnum.None).map((value) => ({
+            value,
+            label: t(`format ${value}`),
+          }))}
+        />
+      ),
+      ['referenceSchema' satisfies keyof PropertyType]: (props) => (
+        <SelectInput<PropertyType>
+          {...props}
+          options={schemas.map((schema) => ({
+            value: schema.typename,
+          }))}
+        />
+      ),
+      ['referencePath' satisfies keyof PropertyType]: (props) => (
+        <SelectInput<PropertyType>
+          {...props}
+          options={
+            referenceSchema
+              ? getSchemaProperties(referenceSchema.ast)
+                  .sort(sortProperties)
+                  .map((p) => ({ value: p.name }))
+              : []
+          }
+        />
+      ),
+    }),
+    [t, schemas, referenceSchema],
+  );
+
+  const propIsNotType = useCallback(
+    (props: SchemaProperty<PropertyType>[]) => props.filter((p) => p.name !== 'type'),
+    [],
+  );
+
   if (!fieldSchema) {
     log.warn('invalid format', { props });
     return null;
@@ -133,43 +180,13 @@ export const FieldEditor = ({ view, projection, field, registry, onSave, onCance
       autoFocus
       values={props}
       schema={fieldSchema}
-      filter={(props) => props.filter((p) => p.name !== 'type')}
+      filter={propIsNotType}
       sort={['property', 'format']}
       onValuesChanged={handleValuesChanged}
       onValidate={handleValidate}
       onSave={handleSave}
       onCancel={handleCancel}
-      Custom={{
-        ['format' satisfies keyof PropertyType]: (props) => (
-          <SelectInput<PropertyType>
-            {...props}
-            options={FormatEnums.filter((value) => value !== FormatEnum.None).map((value) => ({
-              value,
-              label: t(`format ${value}`),
-            }))}
-          />
-        ),
-        ['referenceSchema' satisfies keyof PropertyType]: (props) => (
-          <SelectInput<PropertyType>
-            {...props}
-            options={schemas.map((schema) => ({
-              value: schema.typename,
-            }))}
-          />
-        ),
-        ['referencePath' satisfies keyof PropertyType]: (props) => (
-          <SelectInput<PropertyType>
-            {...props}
-            options={
-              schema
-                ? getSchemaProperties(schema.ast)
-                    .sort(sortProperties)
-                    .map((p) => ({ value: p.name }))
-                : []
-            }
-          />
-        ),
-      }}
+      Custom={Custom}
     />
   );
 };

package/src/components/Form/Form.tsx

@@ -15,7 +15,7 @@ import { getSchemaProperties, type SchemaProperty } from '@dxos/schema';
 import { isNotFalsy } from '@dxos/util';
 
 import { SelectInput } from './Defaults';
-import { InputHeader, type InputComponent } from './Input';
+import { InputHeader, type InputProps, type InputComponent } from './Input';
 import { getInputComponent } from './factory';
 import { type FormHandler, type FormOptions, useForm } from '../../hooks';
 import { translationKey } from '../../translations';
@@ -43,8 +43,14 @@ export type FormProps<T extends BaseObject> = ThemedClassName<
     testId?: string;
     onCancel?: () => void;
 
+    lookupComponent?: (args: {
+      prop: string;
+      schema: S.Schema<any>;
+      inputProps: InputProps<T>;
+    }) => React.ReactElement | undefined;
     /**
      * Map of custom renderers for specific properties.
+     * @deprecated Use lookupComponent instead.
      */
     Custom?: Partial<Record<string, InputComponent<T>>>;
   } & Pick<FormOptions<T>, 'schema' | 'onValuesChanged' | 'onValidate' | 'onSave'>
@@ -68,6 +74,7 @@ export const Form = <T extends BaseObject>({
   onValidate,
   onSave,
   onCancel,
+  lookupComponent,
   Custom,
 }: FormProps<T>) => {
   const onValid = useMemo(() => (autoSave ? onSave : undefined), [autoSave, onSave]);
@@ -109,6 +116,28 @@ export const Form = <T extends BaseObject>({
           const label = title ?? pipe(name, capitalize);
           const placeholder = examples?.length ? `Example: "${examples[0]}"` : description;
 
+          const FoundComponent = lookupComponent?.({
+            prop: name,
+            schema: S.make(ast),
+            inputProps: {
+              property: name,
+              type,
+              format,
+              label,
+              disabled: readonly,
+              placeholder,
+              ...inputProps,
+            },
+          });
+
+          if (FoundComponent) {
+            return (
+              <div key={name} role='none' className={padding}>
+                {FoundComponent}
+              </div>
+            );
+          }
+
           // Get generic input.
           // TODO(ZaymonFC): We might need to switch this to using globs since we're now indexing into arrays.
           let InputComponent = Custom?.[key.join('.')];

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

@@ -5,13 +5,13 @@
 import '@dxos-theme';
 
 import { type Meta, type StoryObj } from '@storybook/react';
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 
 import { Format, type EchoSchema, S, toJsonSchema, TypedObject } from '@dxos/echo-schema';
-import { useSpace } from '@dxos/react-client/echo';
+import { Filter, useQuery, useSpace } from '@dxos/react-client/echo';
 import { withClientProvider } from '@dxos/react-client/testing';
 import { useAsyncEffect } from '@dxos/react-ui';
-import { type ViewType, ViewProjection, createView } from '@dxos/schema';
+import { ViewProjection, ViewType, createView } from '@dxos/schema';
 import { withTheme, withLayout } from '@dxos/storybook-utils';
 
 import { ViewEditor } from './ViewEditor';
@@ -41,6 +41,21 @@ const DefaultStory = () => {
     }
   }, [space]);
 
+  const views = useQuery(space, Filter.schema(ViewType));
+  const currentTypename = useMemo(() => view?.query?.type, [view]);
+  const updateViewTypename = useCallback(
+    (newTypename: string) => {
+      if (!schema) {
+        return;
+      }
+      const matchingViews = views.filter((view) => view.query.type === currentTypename);
+      for (const view of matchingViews) {
+        view.query.type = newTypename;
+      }
+      schema.updateTypename(newTypename);
+    },
+    [views, schema],
+  );
   const handleDelete = useCallback((property: string) => projection?.deleteFieldProjection(property), [projection]);
 
   if (!schema || !view || !projection) {
@@ -50,7 +65,13 @@ const DefaultStory = () => {
   return (
     <TestLayout json={{ schema, view, projection }}>
       <TestPanel>
-        <ViewEditor schema={schema} view={view} registry={space?.db.schemaRegistry} onDelete={handleDelete} />
+        <ViewEditor
+          schema={schema}
+          view={view}
+          registry={space?.db.schemaRegistry}
+          onTypenameChanged={updateViewTypename}
+          onDelete={handleDelete}
+        />
       </TestPanel>
     </TestLayout>
   );

package/src/components/ViewEditor/ViewEditor.tsx

@@ -35,6 +35,7 @@ export type ViewEditorProps = ThemedClassName<{
   registry?: SchemaRegistry;
   readonly?: boolean;
   showHeading?: boolean;
+  onTypenameChanged: (typename: string) => void;
   onDelete: (fieldId: string) => void;
 }>;
 
@@ -48,6 +49,7 @@ export const ViewEditor = ({
   registry,
   readonly,
   showHeading = false,
+  onTypenameChanged,
   onDelete,
 }: ViewEditorProps) => {
   const { t } = useTranslation(translationKey);
@@ -67,12 +69,15 @@ export const ViewEditor = ({
   const handleViewUpdate = useCallback(
     ({ name, typename }: ViewMetaType) => {
       requestAnimationFrame(() => {
-        view.name = name;
-        view.query.type = typename;
-        schema.updateTypename(typename);
+        if (view.name !== name) {
+          view.name = name;
+        }
+        if (view.query.type !== typename) {
+          onTypenameChanged(typename);
+        }
       });
     },
-    [view, schema],
+    [view, schema, onTypenameChanged],
   );
 
   const handleSelect = useCallback((field: FieldType) => {