@dxos/plugin-space 0.8.4-main.a4bbb77 → 0.8.4-main.ae835ea

package/src/components/CreateDialog/CreateObjectDialog.tsx

@@ -2,7 +2,8 @@
 // Copyright 2024 DXOS.org
 //
 
-import { Effect, pipe } from 'effect';
+import * as Effect from 'effect/Effect';
+import * as Function from 'effect/Function';
 import React, { useCallback, useRef, useState } from 'react';
 
 import {
@@ -20,7 +21,7 @@ import { useClient } from '@dxos/react-client';
 import { type Space, getSpace, isLiveObject, isSpace, useQuery, useSpaces } from '@dxos/react-client/echo';
 import { Button, Dialog, Icon, useTranslation } from '@dxos/react-ui';
 import { cardDialogContent, cardDialogHeader } from '@dxos/react-ui-stack';
-import { DataType, typenameFromQuery } from '@dxos/schema';
+import { DataType, getTypenameFromQuery } from '@dxos/schema';
 import { isNonNullable } from '@dxos/util';
 
 import { SpaceCapabilities } from '../../capabilities';
@@ -59,7 +60,7 @@ export const CreateObjectDialog = ({
   const space = isSpace(target) ? target : getSpace(target);
   const queryCollections = useQuery(space, Query.type(DataType.QueryCollection));
   const hiddenTypenames = queryCollections
-    .map((collection) => typenameFromQuery(collection.query))
+    .map((collection) => getTypenameFromQuery(collection.query))
     .filter(isNonNullable);
 
   const resolve = useCallback<NonNullable<CreateObjectPanelProps['resolve']>>(
@@ -88,7 +89,7 @@ export const CreateObjectDialog = ({
           const addObjectIntent = createIntent(SpaceAction.AddObject, { target, object, hidden });
           const shouldNavigate = _shouldNavigate ?? (() => true);
           if (shouldNavigate(object)) {
-            yield* dispatch(pipe(addObjectIntent, chain(LayoutAction.Open, { part: 'main' })));
+            yield* dispatch(Function.pipe(addObjectIntent, chain(LayoutAction.Open, { part: 'main' })));
           } else {
             yield* dispatch(addObjectIntent);
           }

package/src/components/CreateDialog/CreateObjectPanel.tsx

@@ -2,11 +2,11 @@
 // Copyright 2024 DXOS.org
 //
 
-import { Option } from 'effect';
+import * as Option from 'effect/Option';
 import React, { useCallback } from 'react';
 
 import { Type } from '@dxos/echo';
-import { type BaseObject, type TypeAnnotation, ViewAnnotation, getTypeAnnotation } from '@dxos/echo-schema';
+import { type BaseObject, type TypeAnnotation, ViewAnnotation, getTypeAnnotation } from '@dxos/echo/internal';
 import { type Space, type SpaceId } from '@dxos/react-client/echo';
 import { Icon, toLocalizedString, useDefaultValue, useTranslation } from '@dxos/react-ui';
 import { Form } from '@dxos/react-ui-form';

package/src/components/CreateDialog/CreateSpaceDialog.tsx

@@ -2,7 +2,8 @@
 // Copyright 2024 DXOS.org
 //
 
-import { Effect, type Schema } from 'effect';
+import * as Effect from 'effect/Effect';
+import type * as Schema from 'effect/Schema';
 import React, { useCallback, useRef } from 'react';
 
 import { LayoutAction, createIntent, useIntentDispatcher } from '@dxos/app-framework';

package/src/components/MembersContainer.tsx

@@ -130,7 +130,7 @@ export const MembersContainer = ({ space, createInvitationUrl }: MembersContaine
 
   return (
     <Clipboard.Provider>
-      <StackItem.Content classNames='block overflow-y-auto'>
+      <StackItem.Content scrollable>
         <ControlPage>
           <ControlSection title={t('members verbose label')} description={t('members description')}>
             <ControlFrame>

package/src/components/{ObjectDetailsPanel.tsx → ObjectDetailsPanel/ObjectDetailsPanel.tsx}

@@ -2,52 +2,33 @@
 // Copyright 2025 DXOS.org
 //
 
-import React, { useCallback } from 'react';
+import React from 'react';
 
-import { type JsonPath, setValue } from '@dxos/echo-schema';
-import { invariant } from '@dxos/invariant';
 import { useClient } from '@dxos/react-client';
 import { Filter, getSpace, useQuery, useSchema } from '@dxos/react-client/echo';
 import { Callout, useTranslation } from '@dxos/react-ui';
 import { useSelected } from '@dxos/react-ui-attention';
-import { Form, useRefQueryLookupHandler } from '@dxos/react-ui-form';
 import { type DataType } from '@dxos/schema';
-import { typenameFromQuery } from '@dxos/schema';
+import { getTypenameFromQuery } from '@dxos/schema';
 import { isNonNullable } from '@dxos/util';
 
-import { meta } from '../meta';
+import { meta } from '../../meta';
+
+import { ObjectForm } from './ObjectForm';
 
 type RowDetailsPanelProps = { objectId: string; view: DataType.View };
 
-const ObjectDetailsPanel = ({ objectId, view }: RowDetailsPanelProps) => {
+export const ObjectDetailsPanel = ({ objectId, view }: RowDetailsPanelProps) => {
   const { t } = useTranslation(meta.id);
   const client = useClient();
   const space = getSpace(view);
-  const typename = view.query ? typenameFromQuery(view.query.ast) : undefined;
+  const typename = view.query ? getTypenameFromQuery(view.query.ast) : undefined;
   const schema = useSchema(client, space, typename);
 
   const queriedObjects = useQuery(space, schema ? Filter.type(schema) : Filter.nothing());
   const selectedRows = useSelected(objectId, 'multi');
   const selectedObjects = selectedRows.map((id) => queriedObjects.find((obj) => obj.id === id)).filter(isNonNullable);
 
-  const handleRefQueryLookup = useRefQueryLookupHandler({ space });
-
-  const handleSave = useCallback(
-    (values: any, { changed }: { changed: Record<JsonPath, boolean> }) => {
-      const id = values.id;
-      invariant(typeof id === 'string');
-      const object = queriedObjects.find((obj) => obj.id === id);
-      invariant(object);
-
-      const changedPaths = Object.keys(changed).filter((path) => changed[path as JsonPath]) as JsonPath[];
-      for (const path of changedPaths) {
-        const value = values[path];
-        setValue(object, path, value);
-      }
-    },
-    [queriedObjects],
-  );
-
   if (selectedObjects.length === 0) {
     return (
       <div role='none' className='plb-cardSpacingBlock pli-cardSpacingInline'>
@@ -63,17 +44,9 @@ const ObjectDetailsPanel = ({ objectId, view }: RowDetailsPanelProps) => {
       {schema &&
         selectedObjects.map((object) => (
           <div key={object.id} className='border border-separator rounded'>
-            <Form
-              autoSave
-              schema={schema}
-              values={object}
-              onSave={handleSave}
-              onQueryRefOptions={handleRefQueryLookup}
-            />
+            <ObjectForm object={object} schema={schema} />
           </div>
         ))}
     </div>
   );
 };
-
-export default ObjectDetailsPanel;

package/src/components/ObjectDetailsPanel/ObjectForm.tsx

@@ -0,0 +1,75 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Schema from 'effect/Schema';
+import React, { useCallback, useMemo } from 'react';
+
+import { DXN, Obj, Tag, Type } from '@dxos/echo';
+import { type JsonPath, setValue } from '@dxos/echo/internal';
+import { invariant } from '@dxos/invariant';
+import { getSpace } from '@dxos/react-client/echo';
+import { Form, useRefQueryLookupHandler } from '@dxos/react-ui-form';
+
+import { meta as pluginMeta } from '../../meta';
+
+const TagSchema = Tag.Tag.pipe(Schema.omit('id'));
+
+type ObjectFormProps = { object: Obj.Any; schema: Schema.Schema.AnyNoContext };
+
+export const ObjectForm = ({ object, schema }: ObjectFormProps) => {
+  const space = getSpace(object);
+  const handleRefQueryLookup = useRefQueryLookupHandler({ space });
+
+  const formSchema = useMemo(
+    () => Schema.Struct({ tag: Type.Ref(Tag.Tag).pipe(Schema.optional) }).pipe(Schema.extend(schema)),
+    [schema],
+  );
+
+  const meta = Obj.getMeta(object);
+  const tag = meta.tags?.[0] ? space?.db.ref(DXN.parse(meta.tags?.[0])) : undefined;
+  const values = useMemo(() => ({ tag, ...object }), [object, tag]);
+
+  const handleCreateTag = useCallback((values: Schema.Schema.Type<typeof TagSchema>) => {
+    invariant(space);
+    const tag = space.db.add(Tag.make(values));
+    const meta = Obj.getMeta(object);
+    meta.tags = [Obj.getDXN(tag).toString()];
+  }, []);
+
+  const handleSave = useCallback(
+    (values: any, { changed }: { changed: Record<JsonPath, boolean> }) => {
+      const changedPaths = Object.keys(changed).filter((path) => changed[path as JsonPath]) as JsonPath[];
+      for (const path of changedPaths) {
+        if (path === 'tag') {
+          const tag = values[path];
+          const meta = Obj.getMeta(object);
+          const currentTag = meta.tags?.[0];
+          if (currentTag !== tag?.dxn.toString()) {
+            meta.tags = tag ? [tag.dxn.toString()] : [];
+          }
+          continue;
+        }
+
+        const value = values[path];
+        setValue(object, path, value);
+      }
+    },
+    [object],
+  );
+
+  return (
+    <Form
+      autoSave
+      schema={formSchema}
+      values={values}
+      createSchema={TagSchema}
+      createOptionIcon='ph--plus--regular'
+      createOptionLabel={['add tag label', { ns: pluginMeta.id }]}
+      createInitialValuePath='label'
+      onCreate={handleCreateTag}
+      onSave={handleSave}
+      onQueryRefOptions={handleRefQueryLookup}
+    />
+  );
+};

package/src/components/ObjectDetailsPanel/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { ObjectDetailsPanel } from './ObjectDetailsPanel';
+
+export default ObjectDetailsPanel;

package/src/components/ObjectSettings/AdvancedObjectSettings.tsx

@@ -5,7 +5,7 @@
 import React, { useCallback, useState } from 'react';
 
 import { Obj } from '@dxos/echo';
-import { ForeignKey } from '@dxos/echo-schema';
+import { ForeignKey } from '@dxos/echo/internal';
 import { IconButton, useTranslation } from '@dxos/react-ui';
 import { Form } from '@dxos/react-ui-form';
 

package/src/components/ObjectSettings/BaseObjectSettings.stories.tsx

@@ -0,0 +1,63 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { useEffect, useState } from 'react';
+
+import { type Obj, Tag } from '@dxos/echo';
+import { useClientProvider, withClientProvider } from '@dxos/react-client/testing';
+import { withTheme } from '@dxos/react-ui/testing';
+import { DataType } from '@dxos/schema';
+import { render } from '@dxos/storybook-utils';
+
+import { translations } from '../../translations';
+
+import { BaseObjectSettings } from './BaseObjectSettings';
+
+const DefaultStory = () => {
+  const { space } = useClientProvider();
+  const [object, setObject] = useState<Obj.Any>();
+
+  useEffect(() => {
+    if (space && !object) {
+      const object = space.db.add(DataType.makeProject());
+      setObject(object as Obj.Any);
+    }
+  }, [space, object]);
+
+  if (!object) {
+    return null;
+  }
+
+  return <BaseObjectSettings object={object} classNames='is-[20rem]' />;
+};
+
+const meta = {
+  title: 'plugins/plugin-space/BaseObjectSettings',
+  component: BaseObjectSettings as any,
+  render: render(DefaultStory),
+  decorators: [
+    withTheme,
+    withClientProvider({
+      createIdentity: true,
+      createSpace: true,
+      types: [DataType.Project, Tag.Tag],
+      onCreateSpace: async ({ space }) => {
+        space.db.add(Tag.make({ label: 'Tag 1' }));
+        space.db.add(Tag.make({ label: 'Tag 2' }));
+        space.db.add(Tag.make({ label: 'Tag 3' }));
+      },
+    }),
+  ],
+  parameters: {
+    layout: 'centered',
+    translations,
+  },
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/components/ObjectSettings/BaseObjectSettings.tsx

@@ -2,12 +2,28 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { type PropsWithChildren, useRef } from 'react';
+import { batch } from '@preact/signals-core';
+import * as Function from 'effect/Function';
+import * as Option from 'effect/Option';
+import * as Schema from 'effect/Schema';
+import React, { type PropsWithChildren, useCallback, useMemo } from 'react';
 
-import { type Obj } from '@dxos/echo';
-import { Input, type ThemedClassName, useTranslation } from '@dxos/react-ui';
+import { DXN, Obj, Tag, Type } from '@dxos/echo';
+import { invariant } from '@dxos/invariant';
+import { getSpace } from '@dxos/react-client/echo';
+import { type ThemedClassName } from '@dxos/react-ui';
+import { Form, useRefQueryLookupHandler } from '@dxos/react-ui-form';
 
-import { meta } from '../../meta';
+import { meta as pluginMeta } from '../../meta';
+
+// TODO(wittjosiah): Would be nice to control order when extending so this isn't always first/last.
+const BaseSchema = Schema.Struct({
+  // TODO(wittjosiah): Support multiple tags.
+  tag: Type.Ref(Tag.Tag).pipe(Schema.optional),
+});
+
+// TODO(wittjosiah): Better way to support validation of object schemas?
+const TagSchema = Tag.Tag.pipe(Schema.omit('id'));
 
 export type BaseObjectSettingsProps = ThemedClassName<
   PropsWithChildren<{
@@ -15,32 +31,76 @@ export type BaseObjectSettingsProps = ThemedClassName<
   }>
 >;
 
+// TODO(wittjosiah): Reconcile w/ ObjectDetailsPanel.
 export const BaseObjectSettings = ({ classNames, children, object }: BaseObjectSettingsProps) => {
-  const { t } = useTranslation(meta.id);
-  const inputRef = useRef<HTMLInputElement>(null);
+  const space = getSpace(object);
+  const handleRefQueryLookup = useRefQueryLookupHandler({ space });
+
+  const formSchema = useMemo(() => {
+    return Function.pipe(
+      Obj.getSchema(object),
+      Option.fromNullable,
+      Option.map((schema) => BaseSchema.pipe(Schema.extend(schema))),
+      Option.getOrUndefined,
+    );
+  }, [object]);
+
+  const meta = Obj.getMeta(object);
+  const tag = meta.tags?.[0] ? space?.db.ref(DXN.parse(meta.tags?.[0])) : undefined;
+  const values = useMemo(
+    () => ({
+      tag,
+      ...object,
+    }),
+    [object, tag],
+  );
+
+  const handleCreateTag = useCallback((values: Schema.Schema.Type<typeof TagSchema>) => {
+    invariant(space);
+    const tag = space.db.add(Tag.make(values));
+    const meta = Obj.getMeta(object);
+    meta.tags = [Obj.getDXN(tag).toString()];
+  }, []);
+
+  const handleSave = useCallback(
+    ({ tag, ...values }: Schema.Schema.Type<typeof formSchema>) => {
+      batch(() => {
+        const meta = Obj.getMeta(object);
+        const currentTag = meta.tags?.[0];
+        if (tag !== undefined && currentTag !== tag?.dxn.toString()) {
+          meta.tags = [tag.dxn.toString()];
+        }
+
+        Object.entries(values).forEach(([key, value]) => {
+          if (value !== undefined && value !== object[key as keyof Obj.Any]) {
+            Object.defineProperty(object, key, { value });
+          }
+        });
+      });
+    },
+    [object],
+  );
+
+  if (!formSchema) {
+    return null;
+  }
 
-  // TODO(wittjosiah): This should be a form based on the schema of the object.
-  //  The form should only include fields with a specific settings annotation.
-  //  Perhaps also including the field of the title annotation as well.
   return (
     <>
-      <Input.Root>
-        <Input.Label>{t('name label')}</Input.Label>
-        <Input.TextInput
-          ref={inputRef}
-          placeholder={t('name placeholder')}
-          // TODO(burdon): Use annotation to get the name field.
-          value={(object as any).name ?? ''}
-          onChange={(event) => {
-            (object as any).name = event.target.value;
-          }}
-          onKeyDown={(event) => {
-            if (event.key === 'Enter') {
-              inputRef.current?.blur();
-            }
-          }}
-        />
-      </Input.Root>
+      <Form
+        classNames={classNames}
+        outerSpacing={false}
+        autoSave
+        schema={formSchema}
+        values={values}
+        createSchema={TagSchema}
+        createOptionIcon='ph--plus--regular'
+        createOptionLabel={['add tag label', { ns: pluginMeta.id }]}
+        createInitialValuePath='label'
+        onCreate={handleCreateTag}
+        onSave={handleSave}
+        onQueryRefOptions={handleRefQueryLookup}
+      />
       {children}
     </>
   );

package/src/components/ObjectSettings/ForeignKeys.tsx

@@ -4,7 +4,7 @@
 
 import React, { useCallback } from 'react';
 
-import { type ForeignKey } from '@dxos/echo-schema';
+import { type ForeignKey } from '@dxos/echo/internal';
 import { IconButton, List, ListItem, useTranslation } from '@dxos/react-ui';
 
 import { meta } from '../../meta';

package/src/components/ObjectSettings/index.ts

@@ -2,4 +2,6 @@
 // Copyright 2025 DXOS.org
 //
 
-export * from './ObjectSettingsContainer';
+import { ObjectSettingsContainer } from './ObjectSettingsContainer';
+
+export default ObjectSettingsContainer;

package/src/components/RecordMain.stories.tsx

@@ -0,0 +1,116 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React from 'react';
+
+import { Capabilities, contributes, createSurface } from '@dxos/app-framework';
+import { withPluginManager } from '@dxos/app-framework/testing';
+import { Filter, Obj, Ref, Relation, type Type } from '@dxos/echo';
+import { faker } from '@dxos/random';
+import { useQuery } from '@dxos/react-client/echo';
+import { useClientProvider, withClientProvider } from '@dxos/react-client/testing';
+import { withTheme } from '@dxos/react-ui/testing';
+import { Card } from '@dxos/react-ui-stack';
+import { DataType } from '@dxos/schema';
+import { type ValueGenerator, createAsyncGenerator } from '@dxos/schema/testing';
+import { translations as shellTranslations } from '@dxos/shell/react';
+import { render } from '@dxos/storybook-utils';
+
+import { translations } from '../translations';
+
+import { RecordMain } from './RecordMain';
+
+faker.seed(1);
+const generator: ValueGenerator = faker as any;
+
+const DefaultStory = () => {
+  const { space } = useClientProvider();
+  const [org] = useQuery(space, Filter.type(DataType.Organization));
+  if (!org) {
+    return null;
+  }
+
+  return <RecordMain record={org} />;
+};
+
+const meta = {
+  title: 'plugins/plugin-space/RecordMain',
+  component: RecordMain as any,
+  render: render(DefaultStory),
+  decorators: [
+    withTheme, // TODO(wittjosiah): Try to write story which does not depend on plugin manager.
+    withPluginManager({
+      capabilities: [
+        contributes(Capabilities.ReactSurface, [
+          createSurface({
+            id: 'section',
+            role: 'section',
+            component: ({ data }) => (
+              <div role='none' className='flex justify-center'>
+                <div role='none' className='card-max-width'>
+                  <Card.SurfaceRoot classNames='p-2'>
+                    <pre className='overflow-x-auto'>{JSON.stringify(data, null, 2)}</pre>
+                  </Card.SurfaceRoot>
+                </div>
+              </div>
+            ),
+          }),
+          createSurface({
+            id: 'card',
+            role: 'card',
+            component: ({ data }) => (
+              <Card.SurfaceRoot classNames='p-2'>
+                <pre className='overflow-x-auto'>{JSON.stringify(data, null, 2)}</pre>
+              </Card.SurfaceRoot>
+            ),
+          }),
+        ]),
+      ],
+    }),
+    withClientProvider({
+      createIdentity: true,
+      createSpace: true,
+      types: [DataType.Organization, DataType.Person, DataType.Task, DataType.HasSubject],
+      onCreateSpace: async ({ space }) => {
+        const org = space.db.add(
+          Obj.make(DataType.Organization, {
+            name: 'ACME Corp',
+          }),
+        );
+        const task = space.db.add(
+          Obj.make(DataType.Task, {
+            title: 'Task',
+          }),
+        );
+        space.db.add(
+          Relation.make(DataType.HasSubject, {
+            [Relation.Source]: task,
+            [Relation.Target]: org,
+            completedAt: new Date().toISOString(),
+          }),
+        );
+        const objectGenerator = createAsyncGenerator(generator, DataType.Person as Type.Obj.Any, {
+          db: space?.db,
+          force: true,
+        });
+        await objectGenerator.createObjects(3).then((objects) => {
+          objects.forEach((object) => {
+            object.organization = Ref.make(org);
+          });
+        });
+      },
+    }),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+    translations: [...translations, ...shellTranslations],
+  },
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};