@dxos/react-ui-table 0.7.2 → 0.7.3-staging.0905f03

package/dist/types/src/types/table.d.ts

@@ -1,4 +1,57 @@
-import { ref, S } from '@dxos/echo-schema';
+import { ref, ObjectId, S } from '@dxos/echo-schema';
+export declare const TableSchema: S.Struct<{
+    id: S.SchemaClass<string, string, never> & {
+        random(): ObjectId;
+    };
+    name: S.optional<typeof S.String>;
+    view: S.optional<ref<{
+        name: string;
+        schema?: import("@dxos/echo-schema").JsonSchemaType | undefined;
+        query: import("@dxos/echo-schema").QueryType;
+        fields: {
+            referencePath?: import("@dxos/echo-schema").JsonPath | undefined;
+            id: string;
+            path: import("@dxos/echo-schema").JsonPath;
+            visible?: boolean | undefined;
+            size?: number | undefined;
+        }[];
+    } & {
+        id: string;
+    }>>;
+    threads: S.optional<S.Array$<ref<{
+        name?: string | undefined;
+        anchor?: string | undefined;
+        status?: "active" | "staged" | "resolved" | undefined;
+        messages: import("@dxos/echo-schema").Ref<{
+            text: string;
+            timestamp: string;
+            state?: import("@dxos/plugin-space").MessageState | undefined;
+            sender: {
+                name?: string | undefined;
+                contact?: import("@dxos/echo-schema").Ref<{
+                    name?: string | undefined;
+                    identifiers: {
+                        readonly value: string;
+                        readonly type: string;
+                    }[];
+                } & {
+                    id: string;
+                }>;
+                identityKey?: string | undefined;
+                email?: string | undefined;
+            };
+            parts?: import("@dxos/echo-schema").Ref<import("@dxos/echo-schema").Expando>[] | undefined;
+            properties?: {
+                [x: string]: any;
+            } | undefined;
+            context?: import("@dxos/echo-schema").Ref<import("@dxos/echo-schema").Expando>;
+        } & {
+            id: string;
+        }>[];
+    } & {
+        id: string;
+    }>>>;
+}>;
 declare const TableType_base: import("@dxos/echo-schema").AbstractTypedObject<{
     name?: string | undefined;
     id: string;
@@ -52,7 +105,9 @@ declare const TableType_base: import("@dxos/echo-schema").AbstractTypedObject<{
 } & {
     id: string;
 }, S.Struct.Encoded<{
-    readonly id: typeof S.String;
+    readonly id: S.SchemaClass<string, string, never> & {
+        random(): ObjectId;
+    };
     readonly name: S.optional<typeof S.String>;
     readonly view: S.optional<ref<{
         name: string;

package/dist/types/src/types/table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../../../src/types/table.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,GAAG,EAAE,CAAC,EAAe,MAAM,mBAAmB,CAAC;;;;;;;;;yBAkBiB,CAAC;;;mBAAmF,CAAC;gBAAmC,CAAC;;;;;;;;;;;;iBAAonF,CAAC;;oBAA8D,CAAC;uBAAyC,CAAC;wBAAwD,CAAC;;;;;;;;2BAAsP,CAAC;qBAAuC,CAAC;;iBAA8C,CAAC;sBAA4E,CAAC;;;mBAAwE,CAAC;;;;;;;;;;;;;;;;;yBAAp3G,CAAC;;;mBAAmF,CAAC;gBAAmC,CAAC;;;;;;;;;;;;iBAAonF,CAAC;;oBAA8D,CAAC;uBAAyC,CAAC;wBAAwD,CAAC;;;;;;;;2BAAsP,CAAC;qBAAuC,CAAC;;iBAA8C,CAAC;sBAA4E,CAAC;;;mBAAwE,CAAC;;;;;;;;AAJ77G,qBAAa,SAAU,SAAQ,cAGT;CAAG"}
+{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../../../src/types/table.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,CAAC,EAAe,MAAM,mBAAmB,CAAC;AAIlE,eAAO,MAAM,WAAW;;;;;;;;;;yBAcD,CAAC;;;mBAAmF,CAAC;gBAAmC,CAAC;;;;;;;;;;;;iBAAglF,CAAC;;oBAA8D,CAAC;uBAAyC,CAAC;wBAAwD,CAAC;;;;;;;;2BAAsP,CAAC;qBAAuC,CAAC;;iBAA8C,CAAC;sBAA4E,CAAC;;;mBAAwE,CAAC;;;;;;;EARr2G,CAAC;;;;;;;;;yBAQoB,CAAC;;;mBAAmF,CAAC;gBAAmC,CAAC;;;;;;;;;;;;iBAAglF,CAAC;;oBAA8D,CAAC;uBAAyC,CAAC;wBAAwD,CAAC;;;;;;;;2BAAsP,CAAC;qBAAuC,CAAC;;iBAA8C,CAAC;sBAA4E,CAAC;;;mBAAwE,CAAC;;;;;;;;;;;;;;;;;;;yBAAh1G,CAAC;;;mBAAmF,CAAC;gBAAmC,CAAC;;;;;;;;;;;;iBAAglF,CAAC;;oBAA8D,CAAC;uBAAyC,CAAC;wBAAwD,CAAC;;;;;;;;2BAAsP,CAAC;qBAAuC,CAAC;;iBAA8C,CAAC;sBAA4E,CAAC;;;mBAAwE,CAAC;;;;;;;;AAJv2G,qBAAa,SAAU,SAAQ,cAGT;CAAG"}

package/dist/types/src/util/index.d.ts

@@ -1,4 +1,3 @@
-export * from './grid';
 export * from './signals';
 export * from './table';
 export * from './table-buttons';

package/dist/types/src/util/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/util/index.ts"],"names":[],"mappings":"AAIA,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/util/index.ts"],"names":[],"mappings":"AAIA,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,iBAAiB,CAAC"}

package/dist/types/src/util/table-buttons.d.ts

@@ -1,4 +1,12 @@
 export declare const tableButtons: {
+    readonly referencedCell: {
+        readonly attr: string;
+        readonly icon: string;
+        readonly render: ({ targetId, schemaId }: {
+            targetId: string;
+            schemaId: string;
+        }) => string;
+    };
     readonly columnSettings: {
         readonly attr: string;
         readonly icon: string;

package/dist/types/src/util/table-buttons.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table-buttons.d.ts","sourceRoot":"","sources":["../../../../src/util/table-buttons.ts"],"names":[],"mappings":"AAiCA,eAAO,MAAM,YAAY;;;;uCAIC;YAAE,OAAO,EAAE,MAAM,CAAA;SAAE;;;;;wCAMlB;YAAE,QAAQ,EAAE,MAAM,CAAA;SAAE;;;;;yCAMpB;YAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;SAAE;;CAGvC,CAAC"}
+{"version":3,"file":"table-buttons.d.ts","sourceRoot":"","sources":["../../../../src/util/table-buttons.ts"],"names":[],"mappings":"AAwCA,eAAO,MAAM,YAAY;;;;kDAIY;YAAE,QAAQ,EAAE,MAAM,CAAC;YAAC,QAAQ,EAAE,MAAM,CAAA;SAAE;;;;;uCAUjD;YAAE,OAAO,EAAE,MAAM,CAAA;SAAE;;;;;wCAMlB;YAAE,QAAQ,EAAE,MAAM,CAAA;SAAE;;;;;yCAMpB;YAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;SAAE;;CAGvC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-table",
-  "version": "0.7.2",
+  "version": "0.7.3-staging.0905f03",
   "description": "A table component.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -53,25 +53,26 @@
     "@tanstack/react-virtual": "^3.9.0",
     "date-fns": "^3.3.1",
     "lodash.orderby": "^4.6.0",
-    "@dxos/debug": "0.7.2",
-    "@dxos/context": "0.7.2",
-    "@dxos/echo-schema": "0.7.2",
-    "@dxos/invariant": "0.7.2",
-    "@dxos/keys": "0.7.2",
-    "@dxos/lit-grid": "0.7.2",
-    "@dxos/log": "0.7.2",
-    "@dxos/plugin-search": "0.7.2",
-    "@dxos/react-client": "0.7.2",
-    "@dxos/plugin-space": "0.7.2",
-    "@dxos/react-ui-attention": "0.7.2",
-    "@dxos/react-ui-form": "0.7.2",
-    "@dxos/react-ui-grid": "0.7.2",
-    "@dxos/react-ui-searchlist": "0.7.2",
-    "@dxos/react-ui-stack": "0.7.2",
-    "@dxos/react-ui-types": "0.7.2",
-    "@dxos/react-ui-syntax-highlighter": "0.7.2",
-    "@dxos/util": "0.7.2",
-    "@dxos/schema": "0.7.2"
+    "@dxos/debug": "0.7.3-staging.0905f03",
+    "@dxos/context": "0.7.3-staging.0905f03",
+    "@dxos/echo-schema": "0.7.3-staging.0905f03",
+    "@dxos/invariant": "0.7.3-staging.0905f03",
+    "@dxos/live-object": "0.7.3-staging.0905f03",
+    "@dxos/keys": "0.7.3-staging.0905f03",
+    "@dxos/lit-grid": "0.7.3-staging.0905f03",
+    "@dxos/log": "0.7.3-staging.0905f03",
+    "@dxos/plugin-search": "0.7.3-staging.0905f03",
+    "@dxos/plugin-space": "0.7.3-staging.0905f03",
+    "@dxos/react-ui-attention": "0.7.3-staging.0905f03",
+    "@dxos/react-client": "0.7.3-staging.0905f03",
+    "@dxos/react-ui-grid": "0.7.3-staging.0905f03",
+    "@dxos/react-ui-form": "0.7.3-staging.0905f03",
+    "@dxos/react-ui-searchlist": "0.7.3-staging.0905f03",
+    "@dxos/react-ui-stack": "0.7.3-staging.0905f03",
+    "@dxos/react-ui-syntax-highlighter": "0.7.3-staging.0905f03",
+    "@dxos/react-ui-types": "0.7.3-staging.0905f03",
+    "@dxos/util": "0.7.3-staging.0905f03",
+    "@dxos/schema": "0.7.3-staging.0905f03"
   },
   "devDependencies": {
     "@phosphor-icons/react": "^2.1.5",
@@ -82,19 +83,19 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/echo-signals": "0.7.2",
-    "@dxos/random": "0.7.2",
-    "@dxos/react-ui": "0.7.2",
-    "@dxos/react-ui-theme": "0.7.2",
-    "@dxos/storybook-utils": "0.7.2",
-    "@dxos/test-utils": "0.7.2"
+    "@dxos/echo-signals": "0.7.3-staging.0905f03",
+    "@dxos/react-ui": "0.7.3-staging.0905f03",
+    "@dxos/random": "0.7.3-staging.0905f03",
+    "@dxos/react-ui-theme": "0.7.3-staging.0905f03",
+    "@dxos/test-utils": "0.7.3-staging.0905f03",
+    "@dxos/storybook-utils": "0.7.3-staging.0905f03"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.1.5",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.7.2",
-    "@dxos/react-ui-theme": "0.7.2"
+    "@dxos/react-ui-theme": "0.7.3-staging.0905f03",
+    "@dxos/react-ui": "0.7.3-staging.0905f03"
   },
   "publishConfig": {
     "access": "public"

package/src/_deprecated/components/Table/Table.stories.tsx

@@ -8,8 +8,8 @@ import { Plugs, PlugsConnected } from '@phosphor-icons/react';
 import { type StoryObj } from '@storybook/react';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
-import { create } from '@dxos/echo-schema';
 import { PublicKey } from '@dxos/keys';
+import { create } from '@dxos/live-object';
 import { log } from '@dxos/log';
 import { faker } from '@dxos/random';
 import { Button } from '@dxos/react-ui';

package/src/components/Table/ColumnActionsMenu.tsx

@@ -14,7 +14,6 @@ type ColumnActionsMenuProps = { model?: TableModel };
 export const ColumnActionsMenu = ({ model }: ColumnActionsMenuProps) => {
   const { t } = useTranslation(translationKey);
   const state = model?.modalController.state.value;
-
   if (!model || state?.type !== 'column') {
     return null;
   }

package/src/components/Table/ColumnSettings.tsx

@@ -11,9 +11,9 @@ import { type FieldType } from '@dxos/schema';
 
 import { type TableModel } from '../../model';
 
-type ColumnSettingsProps = { model?: TableModel };
+type ColumnSettingsProps = { model?: TableModel; onNewColumn: () => void };
 
-export const ColumnSettings = ({ model }: ColumnSettingsProps) => {
+export const ColumnSettings = ({ model, onNewColumn }: ColumnSettingsProps) => {
   const [newField, setNewField] = useState<FieldType>();
   const state = model?.modalController.state.value;
 
@@ -22,6 +22,9 @@ export const ColumnSettings = ({ model }: ColumnSettingsProps) => {
   useEffect(() => {
     if (state?.type === 'columnSettings' && state.mode.type === 'create' && model?.projection) {
       setNewField(model.projection.createFieldProjection());
+      requestAnimationFrame(() => {
+        onNewColumn();
+      });
     } else {
       setNewField(undefined);
     }
@@ -39,7 +42,7 @@ export const ColumnSettings = ({ model }: ColumnSettingsProps) => {
 
   const field = existingField ?? newField;
 
-  const handleClose = useCallback(() => {
+  const handleSave = useCallback(() => {
     model?.modalController.close();
   }, [model?.modalController]);
 
@@ -64,7 +67,7 @@ export const ColumnSettings = ({ model }: ColumnSettingsProps) => {
               projection={model.projection}
               field={field}
               registry={space?.db.schemaRegistry}
-              onClose={handleClose}
+              onSave={handleSave}
               onCancel={handleCancel}
             />
           </DropdownMenu.Viewport>

package/src/components/Table/CreateRefPanel.tsx

@@ -0,0 +1,83 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { useCallback, useMemo } from 'react';
+
+import { S } from '@dxos/echo-schema';
+import { create, getSpace } from '@dxos/react-client/echo';
+import { Popover } from '@dxos/react-ui';
+import { Form } from '@dxos/react-ui-form';
+import { type GridScopedProps, useGridContext } from '@dxos/react-ui-grid';
+
+import { type TableModel } from '../../model';
+
+export type CreateRefPanelProps = { model?: TableModel };
+
+// TODO(burdon): Factor out Space dependency (to plugin?)
+export const CreateRefPanel = ({ model, __gridScope }: GridScopedProps<CreateRefPanelProps>) => {
+  const { id: gridId } = useGridContext('TableCellEditor', __gridScope);
+  const space = getSpace(model?.table);
+  const state = model?.modalController.state.value;
+  const schema = useMemo<S.Schema<any> | undefined>(() => {
+    if (!space || state?.type !== 'createRefPanel') {
+      return;
+    }
+
+    // TODO(burdon): Factor out.
+    const schema: S.Schema<any> | undefined = space.db.schemaRegistry.getSchema(state.typename)?.schema;
+    if (schema) {
+      const omit = S.omit<any, any, ['id']>('id');
+      return omit(schema);
+    }
+  }, [space, state]);
+
+  const handleSave = useCallback(
+    (values: any) => {
+      if (!model || !space || state?.type !== 'createRefPanel') {
+        return;
+      }
+
+      const schema: S.Schema<any> | undefined = space.db.schemaRegistry.getSchema(state.typename)?.schema;
+      if (schema) {
+        const obj = space.db.add(create(schema, values));
+        state.onCreate?.(obj);
+      }
+
+      void model.modalController.close();
+    },
+    [model?.modalController, space, state],
+  );
+
+  const handleCancel = useCallback(() => {
+    if (model) {
+      model.modalController.close();
+    }
+  }, [model?.modalController]);
+
+  if (!model?.table?.view || !model.projection) {
+    return null;
+  }
+
+  return (
+    <Popover.Root
+      modal={false}
+      open={state?.type === 'createRefPanel' && !!schema}
+      onOpenChange={(nextOpen) => {
+        if (model && !nextOpen) {
+          return model.modalController.close();
+        }
+      }}
+    >
+      <Popover.VirtualTrigger virtualRef={model.modalController.trigger} />
+      <Popover.Portal>
+        <Popover.Content classNames='md:is-64' data-grid={gridId}>
+          {state?.type === 'createRefPanel' && schema && (
+            <Form schema={schema} values={state.initialValues ?? {}} onSave={handleSave} onCancel={handleCancel} />
+          )}
+          <Popover.Arrow />
+        </Popover.Content>
+      </Popover.Portal>
+    </Popover.Root>
+  );
+};

package/src/components/Table/RefPanel.tsx

@@ -0,0 +1,52 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React from 'react';
+
+import { getSpace, type Space } from '@dxos/react-client/echo';
+import { Popover } from '@dxos/react-ui';
+import { Form } from '@dxos/react-ui-form';
+
+import { type TableModel } from '../../model';
+
+type RefPanelProps = { model?: TableModel };
+
+const getRefTargetObj = (space?: Space, id?: string) => {
+  if (space && id) {
+    return space?.db.getObjectById(id);
+  } else {
+    return undefined;
+  }
+};
+
+export const RefPanel = ({ model }: RefPanelProps) => {
+  const state = model?.modalController.state.value;
+  const space = getSpace(model?.table);
+  const targetObj = getRefTargetObj(space, state?.type === 'refPanel' ? state.targetId : undefined);
+  const schema = space && state?.type === 'refPanel' ? space.db.schemaRegistry.getSchema(state.typename) : undefined;
+
+  if (!model?.table?.view || !model.projection) {
+    return null;
+  }
+
+  return (
+    <Popover.Root
+      modal={false}
+      open={state?.type === 'refPanel' && !!targetObj && !!schema}
+      onOpenChange={(nextOpen) => {
+        if (model && !nextOpen) {
+          return model.modalController.close();
+        }
+      }}
+    >
+      <Popover.VirtualTrigger virtualRef={model.modalController.trigger} />
+      <Popover.Portal>
+        <Popover.Content classNames='md:is-64'>
+          {targetObj && schema && <Form readonly values={targetObj} schema={schema} />}
+          <Popover.Arrow />
+        </Popover.Content>
+      </Popover.Portal>
+    </Popover.Root>
+  );
+};

package/src/components/Table/RowActionsMenu.tsx

@@ -13,9 +13,8 @@ type RowActionsMenuProps = { model: TableModel };
 
 export const RowActionsMenu = ({ model }: RowActionsMenuProps) => {
   const { t } = useTranslation(translationKey);
-  const state = model.modalController.state.value;
   const hasSelection = model.selection.hasSelection.value;
-
+  const state = model.modalController.state.value;
   if (state?.type !== 'row') {
     return null;
   }

package/src/components/Table/Table.stories.tsx

@@ -54,7 +54,7 @@ const DefaultStory = () => {
     }
   }, [schema, table?.view]);
 
-  const objects = useQuery(space, schema ? Filter.schema(schema) : () => false, undefined, [schema]);
+  const objects = useQuery(space, schema ? Filter.schema(schema) : Filter.nothing());
   const filteredObjects = useGlobalFilteredObjects(objects);
 
   const handleInsertRow = useCallback(() => {

package/src/components/Table/Table.tsx

@@ -14,17 +14,20 @@ import React, {
 import { getValue } from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
 import { Filter, getSpace, fullyQualifiedId } from '@dxos/react-client/echo';
+import { useTranslation } from '@dxos/react-ui';
 import { useAttention } from '@dxos/react-ui-attention';
-import { type DxGridElement, Grid, type GridContentProps, closestCell } from '@dxos/react-ui-grid';
+import { type DxGridElement, Grid, type GridContentProps, closestCell, type DxGridPosition } from '@dxos/react-ui-grid';
 import { mx } from '@dxos/react-ui-theme';
 import { isNotFalsy } from '@dxos/util';
 
 import { ColumnActionsMenu } from './ColumnActionsMenu';
 import { ColumnSettings } from './ColumnSettings';
+import { CreateRefPanel } from './CreateRefPanel';
+import { RefPanel } from './RefPanel';
 import { RowActionsMenu } from './RowActionsMenu';
 import { type TableModel } from '../../model';
-import { type GridCell } from '../../util';
-import { TableCellEditor, type TableCellEditorProps } from '../TableCellEditor';
+import { translationKey } from '../../translations';
+import { createOption, TableCellEditor, type TableCellEditorProps } from '../TableCellEditor';
 
 // NOTE(Zan): These fragments add border to inline-end and block-end of the grid using pseudo-elements.
 // These are offset by 1px to avoid double borders in planks.
@@ -62,7 +65,7 @@ const TableRoot = ({ children, role }: TableRootProps) => {
 //
 
 export type TableController = {
-  update?: (cell?: GridCell) => void;
+  update?: (cell?: DxGridPosition) => void;
 };
 
 export type TableMainProps = {
@@ -72,8 +75,8 @@ export type TableMainProps = {
 
 const TableMain = forwardRef<TableController, TableMainProps>(({ model, ignoreAttention }, forwardedRef) => {
   const [dxGrid, setDxGrid] = useState<DxGridElement | null>(null);
-
   const { hasAttention } = useAttention(model?.table ? fullyQualifiedId(model.table) : 'table');
+  const { t } = useTranslation(translationKey);
 
   /**
    * Provides an external controller that can be called to repaint the table.
@@ -99,18 +102,29 @@ const TableMain = forwardRef<TableController, TableMainProps>(({ model, ignoreAt
     [model, dxGrid],
   );
 
-  const handleFocus: TableCellEditorProps['onFocus'] = (increment, delta) => {
-    dxGrid?.refocus(increment, delta);
-  };
+  const handleFocus = useCallback<NonNullable<TableCellEditorProps['onFocus']>>(
+    (increment, delta) => {
+      if (dxGrid) {
+        dxGrid.refocus(increment, delta);
+      }
+    },
+    [dxGrid],
+  );
 
   const handleEnter = useCallback<NonNullable<TableCellEditorProps['onEnter']>>(
     (cell) => {
       // TODO(burdon): Insert row only if bottom row isn't completely blank already.
       if (model && cell.row === model.getRowCount() - 1) {
         model.insertRow(cell.row);
+        if (dxGrid) {
+          requestAnimationFrame(() => {
+            dxGrid?.scrollToRow(cell.row + 1);
+            dxGrid?.refocus('row', 1);
+          });
+        }
       }
     },
-    [model],
+    [model, dxGrid],
   );
 
   const handleKeyDown = useCallback<NonNullable<GridContentProps['onKeyDown']>>(
@@ -150,17 +164,24 @@ const TableMain = forwardRef<TableController, TableMainProps>(({ model, ignoreAt
     [hasAttention, ignoreAttention],
   );
 
+  const handleNewColumn = useCallback(() => {
+    const columns = model?.getColumnCount();
+    if (dxGrid && columns) {
+      dxGrid.scrollToColumn(columns - 1);
+    }
+  }, [model, dxGrid]);
+
   // TODO(burdon): Factor out?
+  // TODO(burdon): Generalize to handle other value types (e.g., enums).
   const handleQuery = useCallback<NonNullable<TableCellEditorProps['onQuery']>>(
-    async ({ field, props }, _text) => {
+    async ({ field, props }, text) => {
       if (model && props.referenceSchema && field.referencePath) {
         const space = getSpace(model.table);
         invariant(space);
         const schema = space.db.schemaRegistry.getSchema(props.referenceSchema);
         if (schema) {
-          // TODO(burdon): Cache/filter.
           const { objects } = await space.db.query(Filter.schema(schema)).run();
-          return objects
+          const options = objects
             .map((obj) => {
               const value = getValue(obj, field.referencePath!);
               if (!value || typeof value !== 'string') {
@@ -173,6 +194,14 @@ const TableMain = forwardRef<TableController, TableMainProps>(({ model, ignoreAt
               };
             })
             .filter(isNotFalsy);
+
+          return [
+            ...options,
+            {
+              label: t('create new object label', { text }),
+              data: createOption(text),
+            },
+          ];
         }
       }
 
@@ -186,29 +215,27 @@ const TableMain = forwardRef<TableController, TableMainProps>(({ model, ignoreAt
   }
 
   return (
-    <>
-      <Grid.Root id={model.table.id ?? 'table-grid'}>
-        <TableCellEditor model={model} onEnter={handleEnter} onFocus={handleFocus} onQuery={handleQuery} />
-
-        <Grid.Content
-          onWheelCapture={handleWheel}
-          className={mx('[--dx-grid-base:var(--surface-bg)]', inlineEndLine, blockEndLine)}
-          frozen={frozen}
-          columns={model.columnMeta.value}
-          limitRows={model.getRowCount() ?? 0}
-          limitColumns={model.table.view?.fields?.length ?? 0}
-          onAxisResize={handleAxisResize}
-          onClick={model?.handleGridClick}
-          onKeyDown={handleKeyDown}
-          overscroll='trap'
-          ref={setDxGrid}
-        />
-      </Grid.Root>
-
+    <Grid.Root id={model.table.id ?? 'table-grid'}>
+      <TableCellEditor model={model} onEnter={handleEnter} onFocus={handleFocus} onQuery={handleQuery} />
+      <Grid.Content
+        onWheelCapture={handleWheel}
+        className={mx('[--dx-grid-base:var(--surface-bg)]', inlineEndLine, blockEndLine)}
+        frozen={frozen}
+        columns={model.columnMeta.value}
+        limitRows={model.getRowCount() ?? 0}
+        limitColumns={model.table.view?.fields?.length ?? 0}
+        onAxisResize={handleAxisResize}
+        onClick={model?.handleGridClick}
+        onKeyDown={handleKeyDown}
+        overscroll='trap'
+        ref={setDxGrid}
+      />
       <RowActionsMenu model={model} />
       <ColumnActionsMenu model={model} />
-      <ColumnSettings model={model} />
-    </>
+      <ColumnSettings model={model} onNewColumn={handleNewColumn} />
+      <RefPanel model={model} />
+      <CreateRefPanel model={model} />
+    </Grid.Root>
   );
 });
 

package/src/components/TableCellEditor/TableCellEditor.stories.tsx

@@ -107,7 +107,7 @@ type Story = StoryObj<StoryProps>;
 export const Default: Story = {
   args: {
     editing: {
-      index: '0,3',
+      index: 'grid,0,3',
       initialContent: 'Test',
     },
   },