@dxos/plugin-space 0.8.4-main.67995b8 → 0.8.4-main.a4bbb77

package/src/components/SpacePresence.tsx

@@ -9,27 +9,27 @@ 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';
 import { usePath } from '../hooks';
-import { SPACE_PLUGIN } from '../meta';
+import { meta } from '../meta';
 import type { ObjectViewerProps } from '../types';
 
 // TODO(thure): Get/derive these values from protocol
@@ -254,7 +254,7 @@ export type SmallPresenceProps = {
 } & Pick<AttentionGlyphProps, 'attended' | 'containsAttended'>;
 
 export const SmallPresence = ({ count = 0, attended, containsAttended }: SmallPresenceProps) => {
-  const { t } = useTranslation(SPACE_PLUGIN);
+  const { t } = useTranslation(meta.id);
 
   return (
     <Tooltip.Trigger asChild content={t('presence label', { count })} side='bottom'>

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

@@ -2,37 +2,45 @@
 // Copyright 2024 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
+import { IntentPlugin } from '@dxos/app-framework';
+import { withPluginManager } from '@dxos/app-framework/testing';
 import { useClientProvider, withClientProvider } from '@dxos/react-client/testing';
-import { withTheme } from '@dxos/storybook-utils';
+import { withTheme } from '@dxos/react-ui/testing';
 
-import { SpaceSettingsContainer, type SpaceSettingsContainerProps } from './SpaceSettingsContainer';
 import { translations } from '../../translations';
 
-const Story = (args: Partial<SpaceSettingsContainerProps>) => {
+import { SpaceSettingsContainer, type SpaceSettingsContainerProps } from './SpaceSettingsContainer';
+
+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,
-  decorators: [withClientProvider({ createIdentity: true, createSpace: true }), withTheme],
+  decorators: [
+    withTheme,
+    withClientProvider({ createIdentity: true, createSpace: true }),
+    // TODO(wittjosiah): Try to write story which does not depend on plugin manager.
+    withPluginManager({ plugins: [IntentPlugin()] }),
+  ],
   parameters: {
     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,27 +2,27 @@
 // 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';
 
-import { SPACE_PLUGIN } from '../../meta';
+import { meta } from '../../meta';
 import { SpaceAction, SpaceForm } from '../../types';
 
 const FormSchema = SpaceForm.pipe(
@@ -35,7 +35,7 @@ export type SpaceSettingsContainerProps = {
 
 // TODO(wittjosiah): Handle space migrations here?
 export const SpaceSettingsContainer = ({ space }: SpaceSettingsContainerProps) => {
-  const { t } = useTranslation(SPACE_PLUGIN);
+  const { t } = useTranslation(meta.id);
   const { dispatchPromise: dispatch } = useIntentDispatcher();
   const client = useClient();
   const archived = useMulticastObservable(space.state) === SpaceState.SPACE_INACTIVE;
@@ -111,14 +111,14 @@ export const SpaceSettingsContainer = ({ space }: SpaceSettingsContainerProps) =
         );
       },
       icon: ({ type, label, getValue, onValueChange }) => {
-        const handleChange = useCallback((nextEmoji: string) => onValueChange(type, nextEmoji), [onValueChange, type]);
-        const handleEmojiReset = useCallback(() => onValueChange(type, undefined), [onValueChange, type]);
+        const handleChange = useCallback((icon: string) => onValueChange(type, icon), [onValueChange, type]);
+        const handleReset = useCallback(() => onValueChange(type, undefined), [onValueChange, type]);
         return (
           <ControlItem title={label} description={t('icon description')}>
             <IconPicker
               value={getValue()}
               onChange={handleChange}
-              onReset={handleEmojiReset}
+              onReset={handleReset}
               classNames='justify-self-end'
               iconSize={5}
             />
@@ -127,13 +127,13 @@ export const SpaceSettingsContainer = ({ space }: SpaceSettingsContainerProps) =
       },
       hue: ({ type, label, getValue, onValueChange }) => {
         const handleChange = useCallback((nextHue: string) => onValueChange(type, nextHue), [onValueChange, type]);
-        const handleHueReset = useCallback(() => onValueChange(type, undefined), [onValueChange, type]);
+        const handleReset = useCallback(() => onValueChange(type, undefined), [onValueChange, type]);
         return (
           <ControlItem title={label} description={t('hue description')}>
             <HuePicker
               value={getValue()}
               onChange={handleChange}
-              onReset={handleHueReset}
+              onReset={handleReset}
               classNames='[--hue-preview-size:1.25rem] justify-self-end'
             />
           </ControlItem>
@@ -162,11 +162,11 @@ 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 })}
-          description={t('space properties settings description', { ns: SPACE_PLUGIN })}
+          title={t('space properties settings verbose label', { ns: meta.id })}
+          description={t('space properties settings description', { ns: meta.id })}
         >
           <Form
             schema={FormSchema}
@@ -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/InlineSyncStatus.tsx

@@ -14,7 +14,7 @@ import { Tooltip, useTranslation } from '@dxos/react-ui';
 import { AttentionGlyph, useAttended, useAttention } from '@dxos/react-ui-attention';
 
 import { usePath } from '../../hooks';
-import { SPACE_PLUGIN } from '../../meta';
+import { meta } from '../../meta';
 
 const useEdgeStatus = (): EdgeStatus => {
   const [status, setStatus] = useState(EdgeStatus.NOT_CONNECTED);
@@ -29,7 +29,7 @@ const useEdgeStatus = (): EdgeStatus => {
 };
 
 export const InlineSyncStatus = ({ space, open }: { space: Space; open?: boolean }) => {
-  const { t } = useTranslation(SPACE_PLUGIN);
+  const { t } = useTranslation(meta.id);
   const id = space.id;
   const { hasAttention, isAncestor, isRelated } = useAttention(id);
   const isAttended = hasAttention || isAncestor || isRelated;

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

@@ -2,16 +2,15 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 
-import { withTheme } from '@dxos/storybook-utils';
+import { withTheme } from '@dxos/react-ui/testing';
 
-import { SyncStatusIndicator } from './SyncStatus';
 import { translations } from '../../translations';
 
-const meta: Meta = {
+import { SyncStatusIndicator } from './SyncStatus';
+
+const meta = {
   title: 'plugins/plugin-space/SyncStatusIndicator',
   component: SyncStatusIndicator,
   decorators: [withTheme],
@@ -19,11 +18,11 @@ const meta: Meta = {
     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 { meta } from '../../meta';
+
 import { createClientSaveTracker } from './save-tracker';
 import { getIcon, getStatus } from './status';
-import { SPACE_PLUGIN } from '../../meta';
 
 const SYNC_STALLED_TIMEOUT = 5_000;
 
@@ -30,7 +31,7 @@ export const SyncStatus = () => {
 };
 
 export const SyncStatusIndicator = ({ state, saved }: { state: SpaceSyncStateMap; saved: boolean }) => {
-  const { t } = useTranslation(SPACE_PLUGIN);
+  const { t } = useTranslation(meta.id);
   const summary = getSyncSummary(state);
   const offline = Object.values(state).length === 0;
   const needsToUpload = summary.differentDocuments > 0 || summary.missingOnRemote > 0;

package/src/components/ViewEditor.tsx

@@ -2,15 +2,15 @@
 // Copyright 2023 DXOS.org
 //
 
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback } from 'react';
 
 import { createIntent, useIntentDispatcher } from '@dxos/app-framework';
-import { Type } from '@dxos/echo';
+import { Filter, Query, Type } from '@dxos/echo';
 import { invariant } from '@dxos/invariant';
 import { useClient } from '@dxos/react-client';
-import { Filter, getSpace, useQuery, useSchema } from '@dxos/react-client/echo';
-import { ViewEditor as NativeViewEditor } from '@dxos/react-ui-form';
-import { DataType } from '@dxos/schema';
+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';
 
@@ -20,24 +20,19 @@ export const ViewEditor = ({ view }: ViewEditorProps) => {
   const { dispatchPromise: dispatch } = useIntentDispatcher();
   const client = useClient();
   const space = getSpace(view);
-  const schema = useSchema(client, space, view.query.typename);
+  const typename = view.query ? typenameFromQuery(view.query.ast) : undefined;
+  const schema = useSchema(client, space, typename);
 
-  const views = useQuery(space, Filter.type(DataType.View));
-  const currentTypename = useMemo(() => view.query?.typename, [view.query?.typename]);
-
-  const handleUpdateTypename = useCallback(
+  const handleUpdateQuery = useCallback(
     (typename: string) => {
       invariant(schema);
       invariant(Type.isMutable(schema));
 
-      const matchingViews = views.filter((view) => view.query.typename === currentTypename);
-      for (const view of matchingViews) {
-        view.query.typename = typename;
-      }
-
+      const newQuery = Query.select(Filter.typename(typename));
+      view.query.ast = newQuery.ast;
       schema.updateTypename(typename);
     },
-    [views, schema],
+    [view, schema],
   );
 
   const handleDelete = useCallback(
@@ -52,11 +47,11 @@ export const ViewEditor = ({ view }: ViewEditorProps) => {
   }
 
   return (
-    <NativeViewEditor
+    <NaturalViewEditor
       registry={space.db.schemaRegistry}
       schema={schema}
       view={view}
-      onTypenameChanged={Type.isMutable(schema) ? handleUpdateTypename : undefined}
+      onQueryChanged={Type.isMutable(schema) ? handleUpdateQuery : undefined}
       onDelete={Type.isMutable(schema) ? handleDelete : undefined}
       outerSpacing={false}
     />

package/src/components/index.ts

@@ -23,3 +23,4 @@ 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,14 +2,14 @@
 // Copyright 2025 DXOS.org
 //
 
-import { defineEvent, Events } from '@dxos/app-framework';
+import { Events, defineEvent } from '@dxos/app-framework';
 
-import { SPACE_PLUGIN } from './meta';
+import { meta } from './meta';
 
 export namespace SpaceEvents {
-  export const StateReady = Events.createStateEvent(`${SPACE_PLUGIN}/event/state-ready`);
-  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`);
+  export const StateReady = Events.createStateEvent(`${meta.id}/event/state-ready`);
+  export const SetupSettingsPanel = defineEvent(`${meta.id}/event/setup-settings-panel`);
+  export const DefaultSpaceReady = defineEvent(`${meta.id}/event/default-space-ready`);
+  export const SpaceCreated = defineEvent(`${meta.id}/event/space-created`);
+  export const SchemaAdded = defineEvent(`${meta.id}/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.

package/src/meta.ts

@@ -4,10 +4,8 @@
 
 import { type PluginMeta } from '@dxos/app-framework';
 
-export const SPACE_PLUGIN = 'dxos.org/plugin/space';
-
 export const meta: PluginMeta = {
-  id: SPACE_PLUGIN,
+  id: 'dxos.org/plugin/space',
   name: 'Spaces',
   icon: 'ph--planet--regular',
 };

package/src/translations.ts

@@ -2,6 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
+import { Type } from '@dxos/echo';
 import { StoredSchema } from '@dxos/echo-schema';
 import { type Resource } from '@dxos/react-ui';
 import { DataType } from '@dxos/schema';
@@ -21,7 +22,7 @@ export const translations = [
         'rename object label': 'Rename collection',
         'delete object label': 'Delete collection',
       },
-      [DataType.QueryCollection.typename]: {
+      [Type.getTypename(DataType.QueryCollection)]: {
         'typename label': 'Smart Collection',
         'typename label_zero': 'Smart Collections',
         'typename label_one': 'Smart Collection',
@@ -39,7 +40,7 @@ export const translations = [
         'rename object label': 'Rename record type',
         'delete object label': 'Delete record type',
       },
-      [DataType.View.typename]: {
+      [Type.getTypename(DataType.View)]: {
         'typename label': 'View',
         'typename label_zero': 'Views',
         'typename label_one': 'View',
@@ -69,7 +70,7 @@ export const translations = [
         'typename label_other': 'People',
         'object name placeholder': 'New person',
       },
-      [DataType.Project.typename]: {
+      [Type.getTypename(DataType.Project)]: {
         'typename label': 'Project',
         'typename label_zero': 'Projects',
         'typename label_one': 'Project',
@@ -214,10 +215,10 @@ export const translations = [
         'space settings properties label': 'General settings',
         'space properties settings verbose label': 'Manage space properties',
         'space properties settings description': 'You can configure how this space is displayed in the app here.',
-        'space settings schema label': 'Schema',
-        'schema verbose label': 'Manage schema',
-        'schema description': 'You can manage all of the schema stored within this space here.',
-        'no schemas found message': 'No schemas found',
+        'space settings schema label': 'Record types',
+        'schema verbose label': 'Manage record types',
+        'schema description': 'You can manage all of the record types stored within this space here.',
+        'no schemas found message': 'No record types found',
         'display name input placeholder': 'Space name',
         'display name description': 'Name of the space as it appears in the app.',
         'icon description': 'Icon used to represent the space in the app.',

package/src/types/types.ts

@@ -6,7 +6,7 @@ import { Schema } from 'effect';
 
 import { type AnyIntentChain } from '@dxos/app-framework';
 import { type Obj, Type } from '@dxos/echo';
-import { EchoSchema, StoredSchema, type TypedObject, type BaseObject } from '@dxos/echo-schema';
+import { type BaseObject, EchoSchema, StoredSchema, type TypedObject } from '@dxos/echo-schema';
 import { type PublicKey } from '@dxos/react-client';
 // TODO(wittjosiah): This pulls in full client.
 import { EchoObjectSchema, ReactiveObjectSchema, type Space, SpaceSchema } from '@dxos/react-client/echo';
@@ -14,9 +14,10 @@ import { CancellableInvitationObservable, Invitation } from '@dxos/react-client/
 import { DataType, FieldSchema, TypenameAnnotationId } from '@dxos/schema';
 import { type ComplexMap } from '@dxos/util';
 
-import { SPACE_PLUGIN } from '../meta';
+import { meta } from '../meta';
+
+export const SPACE_DIRECTORY_HANDLE = `${meta.id}/directory`;
 
-export const SPACE_DIRECTORY_HANDLE = 'dxos.org/plugin/space/directory';
 export const SPACE_TYPE = 'dxos.org/type/Space';
 
 export type ObjectViewerProps = {
@@ -114,7 +115,7 @@ export type ObjectForm<T extends BaseObject = BaseObject> = {
 
 export const defineObjectForm = <T extends BaseObject>(form: ObjectForm<T>) => form;
 
-export const SPACE_ACTION = `${SPACE_PLUGIN}/action`;
+export const SPACE_ACTION = `${meta.id}/action`;
 
 export namespace SpaceAction {
   export class OpenCreateSpace extends Schema.TaggedClass<OpenCreateSpace>()(`${SPACE_ACTION}/open-create-space`, {
@@ -238,6 +239,9 @@ export namespace SpaceAction {
     input: Schema.Struct({
       space: SpaceSchema,
       name: Schema.optional(Schema.String),
+      typename: Schema.optional(Schema.String),
+      // TODO(wittjosiah): Semantic version format.
+      version: Schema.optional(Schema.String),
       // TODO(wittjosiah): Schema for schema?
       schema: Schema.Any,
     }),
@@ -270,7 +274,9 @@ export namespace SpaceAction {
   export class OpenCreateObject extends Schema.TaggedClass<OpenCreateObject>()(`${SPACE_ACTION}/open-create-object`, {
     input: Schema.Struct({
       target: Schema.Union(SpaceSchema, DataType.Collection),
+      views: Schema.optional(Schema.Boolean),
       typename: Schema.optional(Schema.String),
+      initialFormValues: Schema.optional(Schema.Any),
       navigable: Schema.optional(Schema.Boolean),
       // TODO(wittjosiah): This is a function, is there a better way to handle this?
       onCreateObject: Schema.optional(Schema.Any),
@@ -362,11 +368,9 @@ export namespace CollectionAction {
 
   export const QueryCollectionForm = Schema.Struct({
     name: Schema.optional(Schema.String),
-    typename: Schema.optional(
-      Schema.String.annotations({
-        [TypenameAnnotationId]: ['object-form'],
-      }),
-    ),
+    typename: Schema.String.annotations({
+      [TypenameAnnotationId]: ['object-form'],
+    }),
   });
 
   export class CreateQueryCollection extends Schema.TaggedClass<CreateQueryCollection>()(
@@ -374,7 +378,8 @@ export namespace CollectionAction {
     {
       input: QueryCollectionForm,
       output: Schema.Struct({
-        object: DataType.QueryCollection,
+        // TODO(wittjosiah): Remove cast.
+        object: EchoObjectSchema, // DataType.QueryCollection,
       }),
     },
   ) {}