@dxos/plugin-space 0.8.3-staging.0fa589b → 0.8.4-main.1da679c

package/src/components/PersistenceStatus.tsx

@@ -2,13 +2,12 @@
 // Copyright 2024 DXOS.org
 //
 
-import { ArrowsCounterClockwise, CheckCircle, Warning } from '@phosphor-icons/react';
 import React, { useEffect, useState } from 'react';
 
 import { debounce } from '@dxos/async';
 import { type EchoDatabase } from '@dxos/react-client/echo';
-import { Tooltip, useTranslation } from '@dxos/react-ui';
-import { getSize, mx, staticPlaceholderText, warningText } from '@dxos/react-ui-theme';
+import { Icon, Tooltip, useTranslation } from '@dxos/react-ui';
+import { mx, staticPlaceholderText, warningText } from '@dxos/react-ui-theme';
 
 import { SPACE_PLUGIN } from '../meta';
 
@@ -54,14 +53,14 @@ export const PersistenceStatus = ({ db }: { db: EchoDatabase }) => {
     case Status.ERROR:
       return (
         <div className='flex items-center'>
-          <Warning className={mx(getSize(4), 'me-1')} />
+          <Icon icon='ph--warning--regular' size={4} classNames='me-1' />
           <span className={mx('text-sm', warningText)}>{t('persistence error label')}</span>
         </div>
       );
     case Status.PENDING:
       return (
         <div className='flex items-center'>
-          <ArrowsCounterClockwise className={mx(getSize(4), 'me-1')} />
+          <Icon icon='ph--arrows-counter-clockwise--regular' size={4} classNames='me-1' />
           <span className={mx('text-sm', staticPlaceholderText)}>{t('persistence pending label')}</span>
         </div>
       );
@@ -74,7 +73,7 @@ export const PersistenceStatus = ({ db }: { db: EchoDatabase }) => {
           content={t('persisted locally message')}
           className='flex items-center'
         >
-          <CheckCircle className={mx(getSize(4), 'me-1')} />
+          <Icon icon='ph--check-circle--regular' size={4} classNames='me-1' />
           {displayMessage && (
             <span className={mx('text-sm', staticPlaceholderText)}>{t('persisted locally label')}</span>
           )}

package/src/components/PopoverRenameObject.tsx

@@ -4,7 +4,8 @@
 
 import React, { useCallback, useRef, useState } from 'react';
 
-import { createIntent, LayoutAction, useIntentDispatcher } from '@dxos/app-framework';
+import { LayoutAction, createIntent, useIntentDispatcher } from '@dxos/app-framework';
+import { Obj } from '@dxos/echo';
 import { type Live } from '@dxos/live-object';
 import { log } from '@dxos/log';
 import { Button, Input, useTranslation } from '@dxos/react-ui';
@@ -13,24 +14,17 @@ import { SPACE_PLUGIN } from '../meta';
 
 export const POPOVER_RENAME_OBJECT = `${SPACE_PLUGIN}/PopoverRenameObject`;
 
-export const PopoverRenameObject = ({ object: obj }: { object: Live<any> }) => {
+export const PopoverRenameObject = ({ object }: { object: Live<any> }) => {
   const { t } = useTranslation(SPACE_PLUGIN);
   const doneButton = useRef<HTMLButtonElement>(null);
-  // TODO(wittjosiah): Use schema here.
-  const object = obj as any;
-  // TODO(burdon): Field should not be hardcoded field.
-  const [name, setName] = useState(object.name || object.title || '');
+  const [name, setName] = useState(Obj.getLabel(object));
   const { dispatchPromise: dispatch } = useIntentDispatcher();
 
   const handleDone = useCallback(() => {
     try {
-      object.name = name;
-    } catch {
-      try {
-        object.title = name;
-      } catch (err) {
-        log.error('Failed to rename object', { err });
-      }
+      name && Obj.setLabel(object, name);
+    } catch (err) {
+      log.error('Failed to rename object', { err });
     }
     void dispatch(
       createIntent(LayoutAction.UpdatePopover, {

package/src/components/PopoverRenameSpace.tsx

@@ -4,7 +4,7 @@
 
 import React, { useCallback, useRef, useState } from 'react';
 
-import { createIntent, LayoutAction, useIntentDispatcher } from '@dxos/app-framework';
+import { LayoutAction, createIntent, useIntentDispatcher } from '@dxos/app-framework';
 import { type Space } from '@dxos/react-client/echo';
 import { Button, Input, Popover, useTranslation } from '@dxos/react-ui';
 

package/src/components/RecordMain.tsx

@@ -0,0 +1,43 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, { useCallback } from 'react';
+
+import { Obj } from '@dxos/echo';
+import { type JsonPath, setValue } from '@dxos/echo-schema';
+import { invariant } from '@dxos/invariant';
+import { getSpace } from '@dxos/react-client/echo';
+import { Form, useRefQueryLookupHandler } from '@dxos/react-ui-form';
+
+export const RecordMain = ({ record }: { record: Obj.Any }) => {
+  const space = getSpace(record);
+  const schema = Obj.getSchema(record);
+  invariant(schema, 'Record has no schema.');
+
+  const handleRefQueryLookup = useRefQueryLookupHandler({ space });
+
+  const handleSave = useCallback(
+    (values: any, { changed }: { changed: Record<JsonPath, boolean> }) => {
+      const id = values.id;
+      invariant(typeof id === 'string');
+
+      const changedPaths = Object.keys(changed).filter((path) => changed[path as JsonPath]) as JsonPath[];
+      for (const path of changedPaths) {
+        const value = values[path];
+        setValue(record, path, value);
+      }
+    },
+    [record],
+  );
+
+  return (
+    <div role='none' className='container-max-width flex flex-col p-2 gap-1 overflow-y-auto'>
+      <div key={record.id} className='border border-separator rounded'>
+        <Form autoSave schema={schema} values={record} onSave={handleSave} onQueryRefOptions={handleRefQueryLookup} />
+      </div>
+    </div>
+  );
+};
+
+export default RecordMain;

package/src/components/SchemaContainer.tsx

@@ -2,12 +2,12 @@
 // Copyright 2025 DXOS.org
 //
 
-import React, { useState, useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 
 import { type Type } from '@dxos/echo';
 import { type Space } from '@dxos/react-client/echo';
 import { useTranslation } from '@dxos/react-ui';
-import { controlItemClasses, ControlPage, ControlSection } from '@dxos/react-ui-form';
+import { ControlPage, ControlSection, controlItemClasses } from '@dxos/react-ui-form';
 import { StackItem } from '@dxos/react-ui-stack';
 
 import { SPACE_PLUGIN } from '../meta';

package/src/components/SpacePluginSettings.tsx

@@ -7,8 +7,8 @@ import React from 'react';
 import { createIntent, useIntentDispatcher } from '@dxos/app-framework';
 import { useClient } from '@dxos/react-client';
 import { useSpaces } from '@dxos/react-client/echo';
-import { Input, toLocalizedString, useTranslation, List, ListItem, IconButton } from '@dxos/react-ui';
-import { controlItemClasses, ControlPage, ControlSection, DeprecatedFormInput } from '@dxos/react-ui-form';
+import { IconButton, Input, List, ListItem, toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { ControlGroup, ControlItemInput, ControlPage, ControlSection, controlItemClasses } from '@dxos/react-ui-form';
 
 import { SPACE_PLUGIN } from '../meta';
 import { SpaceAction, type SpaceSettingsProps } from '../types';
@@ -20,18 +20,17 @@ export const SpacePluginSettings = ({ settings }: { settings: SpaceSettingsProps
   const spaces = useSpaces({ all: settings.showHidden });
   const { dispatchPromise: dispatch } = useIntentDispatcher();
 
-  // TODO(wittjosiah): Migrate to new form container.
   return (
     <ControlPage>
       <ControlSection title={t('space settings label')} description={t('space settings description')}>
-        <div className='pli-trimMd container-max-width'>
-          <DeprecatedFormInput label={t('show hidden spaces label')}>
+        <ControlGroup>
+          <ControlItemInput title={t('show hidden spaces label')}>
             <Input.Switch
               checked={settings.showHidden}
               onCheckedChange={(checked) => (settings.showHidden = !!checked)}
             />
-          </DeprecatedFormInput>
-        </div>
+          </ControlItemInput>
+        </ControlGroup>
         <List classNames={[controlItemClasses, 'flex flex-col gap-trimSm']}>
           {spaces.map((space) => (
             <ListItem.Root key={space.id} classNames='is-full items-center'>

package/src/components/SpacePresence.stories.tsx

@@ -4,15 +4,16 @@
 
 import '@dxos-theme';
 
-import { type Meta } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
 import { IdentityDid, PublicKey } from '@dxos/keys';
 import { HaloSpaceMember, SpaceMember } from '@dxos/react-client/echo';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
-import { FullPresence, type MemberPresenceProps, SmallPresence, type Member } from './SpacePresence';
-import translations from '../translations';
+import { translations } from '../translations';
+
+import { FullPresence, type Member, type MemberPresenceProps, SmallPresence } from './SpacePresence';
 
 const nViewers = (n: number, currentlyAttended = true): Member[] =>
   Array.from({ length: n }, () => ({
@@ -98,10 +99,12 @@ export const Small = () => {
   );
 };
 
-const meta: Meta = {
+const meta = {
   title: 'plugins/plugin-space/SpacePresence',
   decorators: [withTheme, withLayout()],
   parameters: { translations },
-};
+} satisfies Meta<typeof IdentityDid>;
 
 export default meta;
+
+type Story = StoryObj<typeof meta>;

package/src/components/SpacePresence.tsx

@@ -9,22 +9,22 @@ import { useAppGraph, useCapability } from '@dxos/app-framework';
 import { generateName } from '@dxos/display-name';
 import { type Type } from '@dxos/echo';
 import { PublicKey, useClient } from '@dxos/react-client';
-import { getSpace, useMembers, type SpaceMember, fullyQualifiedId } from '@dxos/react-client/echo';
+import { type SpaceMember, fullyQualifiedId, getSpace, useMembers } from '@dxos/react-client/echo';
 import { type Identity, useIdentity } from '@dxos/react-client/halo';
 import {
   Avatar,
   type AvatarContentProps,
+  type DxAvatar,
+  List,
+  ListItem,
+  Popover,
   type Size,
   type ThemedClassName,
   Tooltip,
-  Popover,
-  useTranslation,
-  List,
-  ListItem,
   useDefaultValue,
-  type DxAvatar,
+  useTranslation,
 } from '@dxos/react-ui';
-import { AttentionGlyph, useAttended, useAttention, type AttentionGlyphProps } from '@dxos/react-ui-attention';
+import { AttentionGlyph, type AttentionGlyphProps, useAttended, useAttention } from '@dxos/react-ui-attention';
 import { ComplexMap, keyToFallback } from '@dxos/util';
 
 import { SpaceCapabilities } from '../capabilities';

package/src/components/SpaceSettings/SpaceSettingsContainer.stories.tsx

@@ -4,25 +4,26 @@
 
 import '@dxos-theme';
 
-import { type Meta, type StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
 import { useClientProvider, withClientProvider } from '@dxos/react-client/testing';
 import { withTheme } from '@dxos/storybook-utils';
 
+import { translations } from '../../translations';
+
 import { SpaceSettingsContainer, type SpaceSettingsContainerProps } from './SpaceSettingsContainer';
-import translations from '../../translations';
 
-const Story = (args: Partial<SpaceSettingsContainerProps>) => {
+const Story = (props: Partial<SpaceSettingsContainerProps>) => {
   const { space } = useClientProvider();
   return (
     <div role='none' className='p-2 border border-primary-500 rounded'>
-      <SpaceSettingsContainer {...args} space={space!} />
+      <SpaceSettingsContainer {...props} space={space!} />
     </div>
   );
 };
 
-const meta: Meta = {
+const meta = {
   title: 'plugins/plugin-space/SpaceSettingsContainer',
   component: SpaceSettingsContainer,
   render: Story,
@@ -31,8 +32,10 @@ const meta: Meta = {
     translations,
     layout: 'centered',
   },
-};
+} satisfies Meta<typeof SpaceSettingsContainer>;
 
 export default meta;
 
+type Story = StoryObj<typeof meta>;
+
 export const Default: StoryObj<typeof SpaceSettingsContainer> = {};

package/src/components/SpaceSettings/SpaceSettingsContainer.tsx

@@ -2,22 +2,22 @@
 // Copyright 2024 DXOS.org
 //
 
-import { pipe, Schema } from 'effect';
+import { Schema, pipe } from 'effect';
 import React, { type ChangeEvent, useCallback, useMemo, useState } from 'react';
 
-import { chain, createIntent, LayoutAction, useIntentDispatcher } from '@dxos/app-framework';
+import { LayoutAction, chain, createIntent, useIntentDispatcher } from '@dxos/app-framework';
 import { log } from '@dxos/log';
 import { EdgeReplicationSetting } from '@dxos/protocols/proto/dxos/echo/metadata';
 import { useClient } from '@dxos/react-client';
-import { SpaceState, type Space } from '@dxos/react-client/echo';
+import { type Space, SpaceState } from '@dxos/react-client/echo';
 import { Button, Input, useMulticastObservable, useTranslation } from '@dxos/react-ui';
 import {
-  Form,
-  type InputComponent,
   ControlItem,
   ControlItemInput,
-  ControlSection,
   ControlPage,
+  ControlSection,
+  Form,
+  type InputComponent,
 } from '@dxos/react-ui-form';
 import { HuePicker, IconPicker } from '@dxos/react-ui-pickers';
 import { StackItem } from '@dxos/react-ui-stack';
@@ -162,7 +162,7 @@ export const SpaceSettingsContainer = ({ space }: SpaceSettingsContainerProps) =
   );
 
   return (
-    <StackItem.Content classNames='block overflow-y-auto pli-2'>
+    <StackItem.Content classNames='block overflow-y-auto'>
       <ControlPage>
         <ControlSection
           title={t('space properties settings verbose label', { ns: SPACE_PLUGIN })}
@@ -175,7 +175,7 @@ export const SpaceSettingsContainer = ({ space }: SpaceSettingsContainerProps) =
             onSave={handleSave}
             Custom={customElements}
             outerSpacing={false}
-            classNames='container-max-width grid grid-cols-1 md:grid-cols-[1fr_min-content] gap-4'
+            classNames='container-max-width grid grid-cols-1 md:grid-cols-[1fr_min-content]'
           />
         </ControlSection>
       </ControlPage>

package/src/components/SyncStatus/SyncStatus.stories.tsx

@@ -4,33 +4,27 @@
 
 import '@dxos-theme';
 
-import { type Meta, type StoryObj } from '@storybook/react';
-import React from 'react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 
-import { withTheme, withLayout } from '@dxos/storybook-utils';
+import { withTheme } from '@dxos/storybook-utils';
+
+import { translations } from '../../translations';
 
 import { SyncStatusIndicator } from './SyncStatus';
-import translations from '../../translations';
-
-const DefaultStory = (props: any) => {
-  return (
-    <div className='flex flex-col-reverse p-4'>
-      <SyncStatusIndicator {...props} />
-    </div>
-  );
-};
 
-const meta: Meta = {
+const meta = {
   title: 'plugins/plugin-space/SyncStatusIndicator',
   component: SyncStatusIndicator,
-  render: DefaultStory,
-  decorators: [withTheme, withLayout({ fullscreen: true })],
-  parameters: { translations },
-};
+  decorators: [withTheme],
+  parameters: {
+    translations,
+    layout: 'centered',
+  },
+} satisfies Meta<typeof SyncStatusIndicator>;
 
 export default meta;
 
-type Story = StoryObj<typeof SyncStatusIndicator>;
+type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: {

package/src/components/SyncStatus/SyncStatus.tsx

@@ -6,12 +6,13 @@ import React, { useEffect, useState } from 'react';
 
 import { StatusBar } from '@dxos/plugin-status-bar';
 import { useClient } from '@dxos/react-client';
-import { getSyncSummary, type SpaceSyncStateMap, useSyncState } from '@dxos/react-client/echo';
+import { type SpaceSyncStateMap, getSyncSummary, useSyncState } from '@dxos/react-client/echo';
 import { Icon, useTranslation } from '@dxos/react-ui';
 
+import { SPACE_PLUGIN } from '../../meta';
+
 import { createClientSaveTracker } from './save-tracker';
 import { getIcon, getStatus } from './status';
-import { SPACE_PLUGIN } from '../../meta';
 
 const SYNC_STALLED_TIMEOUT = 5_000;
 
@@ -29,7 +30,7 @@ export const SyncStatus = () => {
   return <SyncStatusIndicator state={state} saved={saved} />;
 };
 
-export const SyncStatusIndicator = ({ state, saved }: { state: SpaceSyncStateMap; saved: Boolean }) => {
+export const SyncStatusIndicator = ({ state, saved }: { state: SpaceSyncStateMap; saved: boolean }) => {
   const { t } = useTranslation(SPACE_PLUGIN);
   const summary = getSyncSummary(state);
   const offline = Object.values(state).length === 0;

package/src/components/SyncStatus/save-tracker.ts

@@ -46,15 +46,15 @@ const createSpaceSaveTracker = (space: Space, cb: (state: 'saved' | 'saving') =>
 
     let hasUnsavedChanges = false;
     let lastFlushPromise: Promise<void> | undefined;
-    space.crud.saveStateChanged.on(ctx, ({ unsavedDocuments }) => {
+    space.db.saveStateChanged.on(ctx, ({ unsavedDocuments }) => {
       hasUnsavedChanges = unsavedDocuments.length > 0;
     });
-    space.crud.saveStateChanged.debounce(500).on(ctx, () => {
+    space.db.saveStateChanged.debounce(500).on(ctx, () => {
       if (hasUnsavedChanges) {
         lastFlushPromise = undefined;
         cb('saving');
       } else {
-        const flushPromise = space.crud.flush();
+        const flushPromise = space.db.flush();
         lastFlushPromise = flushPromise;
         void flushPromise.then(() => {
           if (lastFlushPromise === flushPromise) {

package/src/components/SyncStatus/status.ts

@@ -10,10 +10,10 @@ export const getStatus = ({
   needsToUpload,
   needsToDownload,
 }: {
-  offline: Boolean;
-  saved: Boolean;
-  needsToUpload: Boolean;
-  needsToDownload: Boolean;
+  offline: boolean;
+  saved: boolean;
+  needsToUpload: boolean;
+  needsToDownload: boolean;
 }): Status => {
   if (!saved) {
     return 'saving locally';

package/src/components/ViewEditor.tsx

@@ -0,0 +1,59 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, { useCallback } from 'react';
+
+import { createIntent, useIntentDispatcher } from '@dxos/app-framework';
+import { Filter, Query, Type } from '@dxos/echo';
+import { invariant } from '@dxos/invariant';
+import { useClient } from '@dxos/react-client';
+import { getSpace, useSchema } from '@dxos/react-client/echo';
+import { ViewEditor as NaturalViewEditor } from '@dxos/react-ui-form';
+import { type DataType, typenameFromQuery } from '@dxos/schema';
+
+import { SpaceAction } from '../types';
+
+type ViewEditorProps = { view: DataType.View };
+
+export const ViewEditor = ({ view }: ViewEditorProps) => {
+  const { dispatchPromise: dispatch } = useIntentDispatcher();
+  const client = useClient();
+  const space = getSpace(view);
+  const typename = view.query ? typenameFromQuery(view.query) : undefined;
+  const schema = useSchema(client, space, typename);
+
+  const handleUpdateQuery = useCallback(
+    (typename: string) => {
+      invariant(schema);
+      invariant(Type.isMutable(schema));
+
+      const newQuery = Query.select(Filter.typename(typename));
+      view.query = newQuery.ast;
+      schema.updateTypename(typename);
+    },
+    [view, schema],
+  );
+
+  const handleDelete = useCallback(
+    (fieldId: string) => {
+      void dispatch(createIntent(SpaceAction.DeleteField, { view, fieldId }));
+    },
+    [dispatch, view],
+  );
+
+  if (!space || !schema) {
+    return null;
+  }
+
+  return (
+    <NaturalViewEditor
+      registry={space.db.schemaRegistry}
+      schema={schema}
+      view={view}
+      onQueryChanged={Type.isMutable(schema) ? handleUpdateQuery : undefined}
+      onDelete={Type.isMutable(schema) ? handleDelete : undefined}
+      outerSpacing={false}
+    />
+  );
+};

package/src/components/index.ts

@@ -2,9 +2,10 @@
 // Copyright 2023 DXOS.org
 //
 
+import { lazy } from 'react';
+
 export * from './AwaitingObject';
 export * from './CreateDialog';
-export * from './CollectionMain';
 export * from './CollectionSection';
 export * from './JoinDialog';
 export * from './MembersContainer';
@@ -18,3 +19,8 @@ export * from './SpacePresence';
 export * from './SpacePluginSettings';
 export * from './SpaceSettings';
 export * from './SyncStatus';
+export * from './ViewEditor';
+
+export const CollectionMain = lazy(() => import('./CollectionMain'));
+export const ObjectDetailsPanel = lazy(() => import('./ObjectDetailsPanel'));
+export const RecordMain = lazy(() => import('./RecordMain'));

package/src/events.ts

@@ -2,7 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
-import { defineEvent, Events } from '@dxos/app-framework';
+import { Events, defineEvent } from '@dxos/app-framework';
 
 import { SPACE_PLUGIN } from './meta';
 
@@ -11,4 +11,5 @@ export namespace SpaceEvents {
   export const SetupSettingsPanel = defineEvent(`${SPACE_PLUGIN}/event/setup-settings-panel`);
   export const DefaultSpaceReady = defineEvent(`${SPACE_PLUGIN}/event/default-space-ready`);
   export const SpaceCreated = defineEvent(`${SPACE_PLUGIN}/event/space-created`);
+  export const SchemaAdded = defineEvent(`${SPACE_PLUGIN}/event/schema-added`);
 }

package/src/hooks/useActiveSpace.ts

@@ -2,13 +2,13 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Capabilities, useLayout, type PluginContext } from '@dxos/app-framework';
+import { Capabilities, type PluginContext, useLayout } from '@dxos/app-framework';
 import { ClientCapabilities } from '@dxos/plugin-client';
 import { parseId, useSpace } from '@dxos/react-client/echo';
 
 export const getActiveSpace = (context: PluginContext) => {
-  const layout = context.getCapability(Capabilities.Layout);
   const client = context.getCapability(ClientCapabilities.Client);
+  const layout = context.getCapability(Capabilities.Layout);
   const { spaceId } = parseId(layout.workspace);
   return spaceId ? client.spaces.get(spaceId) : undefined;
 };

package/src/hooks/useInputSurfaceLookup.tsx

@@ -5,7 +5,7 @@
 import { type Schema } from 'effect';
 import React, { useCallback } from 'react';
 
-import { usePluginManager, isSurfaceAvailable, Surface } from '@dxos/app-framework';
+import { Surface, isSurfaceAvailable, usePluginManager } from '@dxos/app-framework';
 import { type InputProps } from '@dxos/react-ui-form';
 
 // TODO(ZaymonFC): Move this if you find yourself needing it elsewhere.