@dxos/plugin-space 0.8.4-main.72ec0f3 → 0.8.4-main.7996785055

package/src/components/ObjectDetails/BaseObjectSettings.tsx

@@ -0,0 +1,140 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+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 { DXN, Obj, Ref, Tag, Type } from '@dxos/echo';
+import { type JsonPath, splitJsonPath } from '@dxos/echo/internal';
+import { invariant } from '@dxos/invariant';
+import { Form, type FormFieldMap, omitId } from '@dxos/react-ui-form';
+import { HuePicker } from '@dxos/react-ui-pickers';
+import { composable, composableProps } from '@dxos/ui-theme';
+import { isNonNullable } from '@dxos/util';
+
+import { meta as pluginMeta } from '../../meta';
+
+const createFieldMap: FormFieldMap = {
+  hue: ({ type, label, layout, getValue, onValueChange }) => {
+    const handleChange = useCallback((nextHue: string) => onValueChange(type, nextHue), [onValueChange, type]);
+    const handleReset = useCallback(() => onValueChange(type, undefined), [onValueChange, type]);
+    return (
+      <>
+        {layout !== 'inline' && <Form.Label label={label} />}
+        <HuePicker value={getValue()} onChange={handleChange} onReset={handleReset} />
+      </>
+    );
+  },
+};
+
+// TODO(wittjosiah): Would be nice to control order when extending so this isn't always first/last.
+const BaseSchema = Schema.Struct({
+  tags: Schema.Array(Ref.Ref(Tag.Tag)).pipe(Schema.optional),
+});
+
+export type BaseObjectSettingsProps = PropsWithChildren<{
+  object: Obj.Unknown;
+}>;
+
+// TODO(wittjosiah): Reconcile w/ ObjectForm.
+export const BaseObjectSettings = composable<HTMLDivElement, BaseObjectSettingsProps>(
+  ({ children, object, ...props }, forwardedRef) => {
+    const db = Obj.getDatabase(object);
+
+    const formSchema = useMemo(() => {
+      return Function.pipe(
+        Obj.getSchema(object),
+        Option.fromNullable,
+        Option.map((schema) => omitId(BaseSchema.pipe(Schema.extend(schema)))),
+        Option.getOrUndefined,
+      );
+    }, [object]);
+
+    const meta = Obj.getMeta(object);
+    const tags = (meta.tags ?? []).map((tag) => db?.makeRef(DXN.parse(tag))).filter(isNonNullable);
+    const values = useMemo(
+      () => ({
+        tags,
+        ...object,
+      }),
+      [object, tags],
+    );
+
+    const handleCreate = useCallback((schema: Type.AnyEntity, values: any) => {
+      invariant(db);
+      invariant(Type.isObjectSchema(schema));
+      const newObject = db.add(Obj.make(schema, values));
+      if (Obj.instanceOf(Tag.Tag, newObject)) {
+        Obj.change(object, (obj) => {
+          Obj.getMeta(obj).tags = [...(Obj.getMeta(obj).tags ?? []), Obj.getDXN(newObject).toString()];
+        });
+      }
+    }, []);
+
+    // TODO(wittjosiah): Use FormRootProps type.
+    const handleChange = useCallback(
+      (
+        { tags, ...values }: Schema.Schema.Type<typeof formSchema>,
+        { isValid, changed }: { isValid: boolean; changed: Record<JsonPath, boolean> },
+      ) => {
+        if (!isValid) {
+          return;
+        }
+
+        const changedPaths = Object.keys(changed).filter((path) => changed[path as JsonPath]) as JsonPath[];
+
+        // Handle tags separately using Obj.change.
+        const hasTagsChange = changedPaths.some((path) => splitJsonPath(path)[0] === 'tags');
+        if (hasTagsChange) {
+          Obj.change(object, (obj) => {
+            Obj.getMeta(obj).tags = tags?.map((tag: Ref.Ref<Tag.Tag>) => tag.dxn.toString()) ?? [];
+          });
+        }
+
+        // Handle other property changes.
+        const nonTagPaths = changedPaths.filter((path) => splitJsonPath(path)[0] !== 'tags');
+        if (nonTagPaths.length > 0) {
+          Obj.change(object, () => {
+            for (const path of nonTagPaths) {
+              const parts = splitJsonPath(path);
+              const value = Obj.getValue(values as any, parts);
+              Obj.setValue(object, parts, value);
+            }
+          });
+        }
+      },
+      [object],
+    );
+
+    if (!formSchema) {
+      return null;
+    }
+
+    const { className } = composableProps(props);
+
+    return (
+      <Form.Root
+        schema={formSchema}
+        defaultValues={values as any}
+        createTypename={Type.getTypename(Tag.Tag)}
+        createOptionIcon='ph--plus--regular'
+        createOptionLabel={['add tag label', { ns: pluginMeta.id }]}
+        createInitialValuePath='label'
+        createFieldMap={createFieldMap}
+        db={db}
+        onValuesChanged={handleChange}
+        onCreate={handleCreate}
+      >
+        <Form.Viewport>
+          <Form.Content classNames={className}>
+            <Form.FieldSet />
+            {children}
+          </Form.Content>
+        </Form.Viewport>
+      </Form.Root>
+    );
+  },
+);

package/src/components/ObjectDetails/ForeignKeys.tsx

@@ -0,0 +1,51 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { useCallback } from 'react';
+
+import { type Key } from '@dxos/echo';
+import { IconButton, List, ListItem, useTranslation } from '@dxos/react-ui';
+
+import { meta } from '../../meta';
+
+export type ForeignKeysProps = {
+  keys: Key.ForeignKey[];
+  onDelete?: (key: Key.ForeignKey) => void;
+};
+
+// TODO(wittjosiah): This is a clone of `TokenManager`. Consider a form variant for arrays of read-only objects.
+export const ForeignKeys = ({ keys, onDelete }: ForeignKeysProps) => {
+  return (
+    <List classNames='flex flex-col gap-2'>
+      {keys.map((key) => (
+        <KeyItem key={key.id} forignKey={key} onDelete={onDelete} />
+      ))}
+    </List>
+  );
+};
+
+type KeyItemProps = {
+  forignKey: Key.ForeignKey;
+  onDelete?: (key: Key.ForeignKey) => void;
+};
+
+const KeyItem = ({ forignKey, onDelete }: KeyItemProps) => {
+  const { t } = useTranslation(meta.id);
+
+  const handleDelete = useCallback(() => {
+    onDelete?.(forignKey);
+  }, [forignKey, onDelete]);
+
+  return (
+    <ListItem.Root classNames='px-2'>
+      <ListItem.Heading classNames='flex flex-col grow truncate'>
+        <div>{forignKey.source}</div>
+        <div className='text-description text-sm truncate'>{forignKey.id}</div>
+      </ListItem.Heading>
+      <ListItem.Endcap>
+        <IconButton iconOnly icon='ph--x--regular' variant='ghost' label={t('delete key')} onClick={handleDelete} />
+      </ListItem.Endcap>
+    </ListItem.Root>
+  );
+};

package/src/components/ObjectDetails/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './BaseObjectSettings';
+export * from './ForeignKeys';

package/src/components/ObjectForm/ObjectForm.tsx

@@ -0,0 +1,115 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Schema from 'effect/Schema';
+import React, { useCallback, useMemo } from 'react';
+
+import { DXN, Obj, Ref, Tag, Type } from '@dxos/echo';
+import { type JsonPath, splitJsonPath } from '@dxos/echo/internal';
+import { invariant } from '@dxos/invariant';
+import { Form, type FormFieldMap, omitId } from '@dxos/react-ui-form';
+import { HuePicker } from '@dxos/react-ui-pickers';
+import { isNonNullable } from '@dxos/util';
+
+import { meta as pluginMeta } from '../../meta';
+
+export type ObjectFormProps = {
+  schema: Schema.Schema.AnyNoContext;
+  object: Obj.Unknown;
+};
+
+const createFieldMap: FormFieldMap = {
+  hue: ({ type, label, layout, getValue, onValueChange }) => {
+    const handleChange = useCallback((nextHue: string) => onValueChange(type, nextHue), [onValueChange, type]);
+    const handleReset = useCallback(() => onValueChange(type, undefined), [onValueChange, type]);
+    return (
+      <>
+        {layout !== 'inline' && <Form.Label label={label} />}
+        <HuePicker value={getValue()} onChange={handleChange} onReset={handleReset} />
+      </>
+    );
+  },
+};
+
+export const ObjectForm = ({ object, schema }: ObjectFormProps) => {
+  const db = Obj.getDatabase(object);
+
+  const formSchema = useMemo(
+    () =>
+      omitId(
+        Schema.Struct({
+          tags: Schema.Array(Ref.Ref(Tag.Tag)).pipe(Schema.optional),
+        }).pipe(Schema.extend(schema)),
+      ),
+    [schema],
+  );
+
+  const meta = Obj.getMeta(object);
+  const tags = (meta.tags ?? []).map((tag) => db?.makeRef(DXN.parse(tag))).filter(isNonNullable);
+  const values = useMemo(() => ({ tags, ...object }), [object, tags]);
+
+  const handleCreate = useCallback((schema: Type.AnyEntity, values: any) => {
+    invariant(db);
+    invariant(Type.isObjectSchema(schema));
+    const newObject = db.add(Obj.make(schema, values));
+    if (Obj.instanceOf(Tag.Tag, newObject)) {
+      Obj.change(object, (obj) => {
+        Obj.getMeta(obj).tags = [...(Obj.getMeta(obj).tags ?? []), Obj.getDXN(newObject).toString()];
+      });
+    }
+  }, []);
+
+  // TODO(wittjosiah): Use FormRootProps type.
+  const handleChange = useCallback(
+    ({ tags, ...values }: any, { isValid, changed }: { isValid: boolean; changed: Record<JsonPath, boolean> }) => {
+      if (!isValid) {
+        return;
+      }
+
+      const changedPaths = Object.keys(changed).filter((path) => changed[path as JsonPath]) as JsonPath[];
+
+      // Handle tags separately using Obj.change.
+      const hasTagsChange = changedPaths.some((path) => splitJsonPath(path)[0] === 'tags');
+      if (hasTagsChange) {
+        Obj.change(object, (obj) => {
+          Obj.getMeta(obj).tags = tags?.map((tag: Ref.Ref<Tag.Tag>) => tag.dxn.toString()) ?? [];
+        });
+      }
+
+      // Handle other property changes.
+      const nonTagPaths = changedPaths.filter((path) => splitJsonPath(path)[0] !== 'tags');
+      if (nonTagPaths.length > 0) {
+        Obj.change(object, () => {
+          for (const path of nonTagPaths) {
+            const parts = splitJsonPath(path);
+            const value = Obj.getValue(values, parts);
+            Obj.setValue(object, parts, value);
+          }
+        });
+      }
+    },
+    [object],
+  );
+
+  return (
+    <Form.Root
+      schema={formSchema}
+      defaultValues={values}
+      createTypename={Type.getTypename(Tag.Tag)}
+      createOptionIcon='ph--plus--regular'
+      createOptionLabel={['add tag label', { ns: pluginMeta.id }]}
+      createInitialValuePath='label'
+      createFieldMap={createFieldMap}
+      db={db}
+      onValuesChanged={handleChange}
+      onCreate={handleCreate}
+    >
+      <Form.Viewport>
+        <Form.Content>
+          <Form.FieldSet />
+        </Form.Content>
+      </Form.Viewport>
+    </Form.Root>
+  );
+};

package/src/components/ObjectForm/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './ObjectForm';

package/src/components/SyncStatus/index.ts

@@ -2,5 +2,5 @@
 // Copyright 2024 DXOS.org
 //
 
-export * from './InlineSyncStatus';
-export * from './SyncStatus';
+export * from './save-tracker';
+export * from './status';

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

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

package/src/components/index.ts

@@ -2,24 +2,8 @@
 // Copyright 2023 DXOS.org
 //
 
-import { type ComponentType, lazy } from 'react';
-
 export * from './AwaitingObject';
 export * from './CreateDialog';
-export * from './CollectionSection';
-export * from './JoinDialog';
-export * from './MembersContainer';
-export * from './MenuFooter';
-export * from './ObjectRenamePopover';
-export * from './SpaceRenamePopover';
-export * from './SchemaContainer';
-export * from './SpacePresence';
-export * from './SpacePluginSettings';
-export * from './SpaceSettings';
+export * from './ObjectDetails';
+export * from './ObjectForm';
 export * from './SyncStatus';
-export * from './ViewEditor';
-
-export const CollectionArticle = lazy(() => import('./CollectionArticle'));
-export const ObjectDetailsPanel: ComponentType<any> = lazy(() => import('./ObjectDetailsPanel'));
-export const ObjectSettingsContainer = lazy(() => import('./ObjectSettings'));
-export const RecordArticle = lazy(() => import('./RecordArticle'));

package/src/constants.ts

@@ -0,0 +1,11 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { meta } from './meta';
+
+export const CREATE_OBJECT_DIALOG = `${meta.id}.CreateObjectDialog`;
+export const CREATE_SPACE_DIALOG = `${meta.id}.CreateSpaceDialog`;
+export const JOIN_DIALOG = `${meta.id}.JoinDialog`;
+export const OBJECT_RENAME_POPOVER = `${meta.id}.ObjectRenamePopover`;
+export const SPACE_RENAME_POPOVER = `${meta.id}.SpaceRenamePopover`;

package/src/containers/CollectionArticle/CollectionArticle.tsx

@@ -0,0 +1,134 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { useCallback, useMemo } from 'react';
+
+import { useCapabilities, useOperationInvoker } from '@dxos/app-framework/ui';
+import { AppCapabilities, LayoutOperation, getCollectionObjectPath, getObjectPathFromObject } from '@dxos/app-toolkit';
+import { type SurfaceComponentProps } from '@dxos/app-toolkit/ui';
+import { Obj } from '@dxos/echo';
+import { type Collection } from '@dxos/echo';
+import { ScrollArea, toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { Card } from '@dxos/react-ui';
+import { Mosaic, type MosaicStackTileComponent } from '@dxos/react-ui-mosaic';
+import { SearchPanel, useSearchListResults } from '@dxos/react-ui-search';
+import { getStyles } from '@dxos/ui-theme';
+
+import { meta } from '../../meta';
+
+/**
+ * Hook to resolve metadata (icon, iconHue, etc.) for objects based on their typename.
+ */
+const useMetadataResolver = () => {
+  const allMetadata = useCapabilities(AppCapabilities.Metadata);
+  return useCallback((typename: string) => allMetadata.find((m) => m.id === typename)?.metadata ?? {}, [allMetadata]);
+};
+
+/**
+ * Article view for collections.
+ */
+export const CollectionArticle = ({ subject, attendableId }: SurfaceComponentProps<Collection.Collection>) => {
+  const { t } = useTranslation(meta.id);
+  const resolveMetadata = useMetadataResolver();
+  const { items, handleSearch } = useCollectionItems(subject, resolveMetadata, attendableId);
+
+  return (
+    <SearchPanel onSearch={handleSearch}>
+      <Mosaic.Container asChild>
+        <ScrollArea.Root centered padding thin>
+          <ScrollArea.Viewport>
+            <Mosaic.Stack
+              classNames='gap-1'
+              draggable={false}
+              items={items}
+              getId={(item) => item.id}
+              Tile={ObjectTile}
+            />
+          </ScrollArea.Viewport>
+        </ScrollArea.Root>
+      </Mosaic.Container>
+    </SearchPanel>
+  );
+};
+
+type ObjectItem = {
+  id: string;
+  object: Obj.Unknown;
+  targetPath: string;
+  icon: string;
+  iconHue?: string;
+};
+
+const ObjectTile: MosaicStackTileComponent<ObjectItem> = ({ data: item }) => {
+  const { t } = useTranslation(meta.id);
+  const { invokePromise } = useOperationInvoker();
+
+  const typename = Obj.getTypename(item.object) ?? '';
+  const label =
+    Obj.getLabel(item.object) ??
+    toLocalizedString(['object name placeholder', { ns: typename, defaultValue: item.id }], t);
+  const styles = item.iconHue ? getStyles(item.iconHue) : undefined;
+
+  const handleClick = useCallback(
+    () => void invokePromise(LayoutOperation.Open, { subject: [item.targetPath] }),
+    [invokePromise, item.targetPath],
+  );
+
+  return (
+    <Card.Root fullWidth role='button' classNames='cursor-pointer' onClick={handleClick}>
+      <Card.Toolbar>
+        <Card.ToolbarIconButton
+          variant='ghost'
+          label={label}
+          icon={item.icon}
+          iconOnly
+          iconClassNames={styles?.surfaceText}
+        />
+        <Card.Title>{label}</Card.Title>
+        <Card.Menu />
+      </Card.Toolbar>
+    </Card.Root>
+  );
+};
+
+type MetadataResolver = (typename: string) => { icon?: string; iconHue?: string };
+
+/**
+ * Combined hook to get collection items with search/filter support.
+ */
+const useCollectionItems = (
+  collection: Collection.Collection,
+  resolveMetadata: MetadataResolver,
+  attendableId?: string,
+) => {
+  const objects = useMemo(
+    () => (collection.objects ?? []).map((ref) => ref.target).filter((obj): obj is Obj.Unknown => Obj.isObject(obj)),
+    [collection.objects],
+  );
+
+  const items = useMemo(
+    () =>
+      objects.map((obj) => {
+        const typename = Obj.getTypename(obj);
+        const metadata = typename ? resolveMetadata(typename) : {};
+        const targetPath = attendableId ? getCollectionObjectPath(attendableId, obj.id) : getObjectPathFromObject(obj);
+
+        return {
+          id: Obj.getDXN(obj).toString(),
+          object: obj,
+          targetPath,
+          icon: metadata.icon ?? 'ph--placeholder--regular',
+          iconHue: metadata.iconHue,
+        } satisfies ObjectItem;
+      }),
+    [objects, resolveMetadata, attendableId],
+  );
+
+  const { results, handleSearch } = useSearchListResults({
+    items,
+    extract: (item) => Obj.getLabel(item.object) ?? item.id,
+  });
+
+  return { items: results, handleSearch };
+};

package/src/containers/CollectionArticle/index.ts

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

package/src/containers/CollectionSection/CollectionSection.tsx

@@ -0,0 +1,22 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React from 'react';
+
+import { type SurfaceComponentProps } from '@dxos/app-toolkit/ui';
+import { type Collection } from '@dxos/echo';
+import { useTranslation } from '@dxos/react-ui';
+
+import { meta } from '../../meta';
+
+export const CollectionSection = ({ role, subject }: SurfaceComponentProps<Collection.Collection>) => {
+  const { t } = useTranslation(meta.id);
+
+  // TODO(wittjosiah): Better placeholder.
+  return (
+    <div role={role} className='min-h-[3.5rem] grid grid-rows-subgrid grid-cols-subgrid items-center'>
+      <span className='truncate'>{subject.name ?? t('unnamed collection label')}</span>
+    </div>
+  );
+};

package/src/containers/CollectionSection/index.ts

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

package/src/containers/CreateObjectDialog/CreateObjectDialog.stories.tsx

@@ -0,0 +1,81 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import * as Effect from 'effect/Effect';
+import * as Schema from 'effect/Schema';
+import React, { useState } from 'react';
+
+import { withPluginManager } from '@dxos/app-framework/testing';
+import { type Database } from '@dxos/echo';
+import { type Space } from '@dxos/react-client/echo';
+import { Dialog } from '@dxos/react-ui';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+
+import { type CreateObjectOption, type Metadata, CreateObjectPanel } from '../../components';
+import { translations } from '../../translations';
+
+const mockOptions: CreateObjectOption[] = [
+  { id: 'org.dxos.type.document', label: 'Document', icon: 'ph--file-text--regular' },
+  { id: 'org.dxos.type.table', label: 'Table', icon: 'ph--table--regular' },
+  { id: 'org.dxos.type.canvas', label: 'Canvas', icon: 'ph--paint-brush--regular' },
+  { id: 'org.dxos.type.thread', label: 'Thread', icon: 'ph--chat-circle-text--regular' },
+];
+
+const mockSpaces = [
+  { id: 'space-1', db: {} as Database.Database, displayName: 'Personal Space' },
+  { id: 'space-2', db: {} as Database.Database, displayName: 'Team Space' },
+] as unknown as Space[];
+
+const DefaultStory = () => {
+  const [typename, setTypename] = useState<string | undefined>(undefined);
+
+  return (
+    <Dialog.Root open>
+      <Dialog.Overlay>
+        <Dialog.Content>
+          <Dialog.Body>
+            <CreateObjectPanel
+              options={mockOptions}
+              spaces={mockSpaces}
+              typename={typename}
+              target={{} as Database.Database}
+              resolve={() => mockMetadata}
+              onTypenameChange={setTypename}
+              onCreateObject={async () => {}}
+            />
+          </Dialog.Body>
+        </Dialog.Content>
+      </Dialog.Overlay>
+    </Dialog.Root>
+  );
+};
+
+const mockInputSchema = Schema.Struct({
+  id: Schema.String,
+  name: Schema.String.annotations({ title: 'Name' }),
+  description: Schema.optional(Schema.String.annotations({ title: 'Description' })),
+});
+
+const mockMetadata: Metadata = {
+  createObject: () => Effect.succeed({ id: 'mock-id', subject: [], object: {} as any }),
+  inputSchema: mockInputSchema,
+  icon: 'ph--file-text--regular',
+};
+
+const meta = {
+  title: 'plugins/plugin-space/containers/CreateObjectDialog',
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' }), withPluginManager()],
+  parameters: {
+    translations,
+  },
+} satisfies Meta;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: DefaultStory,
+};