@dxos/plugin-space 0.8.4-main.1068cf700f → 0.8.4-main.1c7ec43d41

package/src/components/CollectionArticle.tsx

@@ -1,156 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React, { useCallback, useMemo } from 'react';
-
-import { useCapabilities, useOperationInvoker } from '@dxos/app-framework/ui';
-import { AppCapabilities, LayoutOperation } from '@dxos/app-toolkit';
-import { type SurfaceComponentProps } from '@dxos/app-toolkit/ui';
-import { Filter, Obj } from '@dxos/echo';
-import { useClient } from '@dxos/react-client';
-import { getSpace, useQuery } from '@dxos/react-client/echo';
-import { Layout, ScrollArea, Toolbar, toLocalizedString, useTranslation } from '@dxos/react-ui';
-import { Card, Mosaic, type StackTileComponent } from '@dxos/react-ui-mosaic';
-import { SearchList, useSearchListResults } from '@dxos/react-ui-searchlist';
-import { Collection } from '@dxos/schema';
-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 }: SurfaceComponentProps<Collection.Collection | Collection.Managed>) => {
-  const { t } = useTranslation(meta.id);
-  const resolveMetadata = useMetadataResolver();
-  const { items, handleSearch } = useCollectionItems(subject, resolveMetadata);
-
-  return (
-    <Layout.Main toolbar>
-      <SearchList.Root onSearch={handleSearch}>
-        <Toolbar.Root>
-          <SearchList.Input placeholder={t('search placeholder')} />
-        </Toolbar.Root>
-        <SearchList.Content>
-          <Mosaic.Container asChild>
-            <ScrollArea.Root orientation='vertical'>
-              <ScrollArea.Viewport classNames='p-2'>
-                <Mosaic.Stack items={items} getId={(item) => item.id} Tile={ObjectTile} />
-              </ScrollArea.Viewport>
-            </ScrollArea.Root>
-          </Mosaic.Container>
-        </SearchList.Content>
-      </SearchList.Root>
-    </Layout.Main>
-  );
-};
-
-type ObjectItem = {
-  id: string;
-  object: Obj.Unknown;
-  icon: string;
-  iconHue?: string;
-};
-
-const ObjectTile: StackTileComponent<ObjectItem> = ({ data: item }) => {
-  const { t } = useTranslation(meta.id);
-  const { invokeSync } = 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 = () => {
-    invokeSync(LayoutOperation.Open, { subject: [item.id] });
-  };
-
-  return (
-    <Card.Root fullWidth>
-      <Card.Toolbar>
-        <Card.ToolbarIconButton variant='ghost' label={label} icon={item.icon} iconOnly iconClassNames={styles?.icon} />
-        <Card.Title onClick={handleClick}>{label}</Card.Title>
-        <Card.Menu />
-      </Card.Toolbar>
-    </Card.Root>
-  );
-};
-
-export default CollectionArticle;
-
-/**
- * Hook to get items from a regular collection.
- */
-const useRegularCollectionItems = (collection: Collection.Collection): Obj.Unknown[] => {
-  return useMemo(
-    () => (collection.objects ?? []).map((ref) => ref.target).filter((obj): obj is Obj.Unknown => Obj.isObject(obj)),
-    [collection.objects],
-  );
-};
-
-/**
- * Hook to get items from a managed collection by querying the space.
- */
-const useManagedCollectionItems = (collection: Collection.Managed): Obj.Unknown[] => {
-  const client = useClient();
-  const space = getSpace(collection);
-
-  const schema = useMemo(
-    () => client.graph.schemaRegistry.query({ typename: collection.key, location: ['runtime'] }).runSync()[0],
-    [client, collection],
-  );
-
-  return useQuery(space?.db, schema ? Filter.type(schema) : Filter.nothing());
-};
-
-type MetadataResolver = (typename: string) => { icon?: string; iconHue?: string };
-
-/**
- * Combined hook to get collection items with search/filter support.
- */
-const useCollectionItems = (
-  collection: Collection.Collection | Collection.Managed,
-  resolveMetadata: MetadataResolver,
-) => {
-  const isManaged = Obj.instanceOf(Collection.Managed, collection);
-
-  // Call both hooks unconditionally to satisfy React's rules of hooks.
-  const regularObjects = useRegularCollectionItems(collection as Collection.Collection);
-  const managedObjects = useManagedCollectionItems(collection as Collection.Managed);
-
-  const objects = isManaged ? managedObjects : regularObjects;
-
-  // Convert objects to items with resolved metadata.
-  const items = useMemo(
-    () =>
-      objects.map((obj) => {
-        const typename = Obj.getTypename(obj);
-        const metadata = typename ? resolveMetadata(typename) : {};
-        return {
-          id: Obj.getDXN(obj).toString(),
-          object: obj,
-          icon: metadata.icon ?? 'ph--placeholder--regular',
-          iconHue: metadata.iconHue,
-        } satisfies ObjectItem;
-      }),
-    [objects, resolveMetadata],
-  );
-
-  // Use searchlist results for filtering.
-  const { results, handleSearch } = useSearchListResults({
-    items,
-    extract: (item) => Obj.getLabel(item.object) ?? item.id,
-  });
-
-  return { items: results, handleSearch };
-};

package/src/components/CollectionSection.tsx

@@ -1,22 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import React from 'react';
-
-import { type SurfaceComponentProps } from '@dxos/app-toolkit/ui';
-import { useTranslation } from '@dxos/react-ui';
-import { type Collection } from '@dxos/schema';
-
-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-bs-[3.5rem] grid grid-rows-subgrid grid-cols-subgrid items-center'>
-      <span className='truncate'>{subject.name ?? t('unnamed collection label')}</span>
-    </div>
-  );
-};

package/src/components/CreateDialog/CreateObjectDialog.stories.tsx

@@ -1,91 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React, { useEffect } from 'react';
-
-import { OperationPlugin, RuntimePlugin } from '@dxos/app-framework';
-import { withPluginManager } from '@dxos/app-framework/testing';
-import { Filter, Obj } from '@dxos/echo';
-import { useDatabase, useQuery } from '@dxos/react-client/echo';
-import { withClientProvider } from '@dxos/react-client/testing';
-import { Dialog } from '@dxos/react-ui';
-import { withTheme } from '@dxos/react-ui/testing';
-import { Collection } from '@dxos/schema';
-import { translations as shellTranslations } from '@dxos/shell/react';
-
-import { translations } from '../../translations';
-
-import { CreateObjectDialog, type CreateObjectDialogProps } from './CreateObjectDialog';
-
-const DefaultStory = (props: CreateObjectDialogProps) => {
-  return (
-    <Dialog.Root open>
-      <Dialog.Overlay blockAlign='start'>
-        <CreateObjectDialog {...props} />
-      </Dialog.Overlay>
-    </Dialog.Root>
-  );
-};
-
-// TODO(wittjosiah): Story should be for CreateObjectPanel.
-const meta = {
-  title: 'plugins/plugin-space/CreateObjectDialog',
-  component: CreateObjectDialog,
-  render: DefaultStory,
-  decorators: [
-    withTheme(), // TODO(wittjosiah): Try to write story which does not depend on plugin manager.
-    withPluginManager({
-      plugins: [RuntimePlugin(), OperationPlugin()],
-    }),
-    withClientProvider({
-      createIdentity: true,
-      createSpace: true,
-      types: [Collection.Collection],
-    }),
-  ],
-  parameters: {
-    translations: [...translations, ...shellTranslations],
-  },
-  args: {},
-} satisfies Meta<typeof DefaultStory>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};
-
-export const Typename: Story = {
-  args: { typename: Collection.Collection.typename },
-};
-
-export const TargetSpace: Story = {
-  render: (args) => {
-    const db = useDatabase();
-
-    if (!db) {
-      return <></>;
-    }
-
-    return <DefaultStory {...args} target={db} />;
-  },
-};
-
-export const TargetCollection: Story = {
-  render: (args) => {
-    const db = useDatabase();
-    const [collection] = useQuery(db, Filter.type(Collection.Collection));
-
-    useEffect(() => {
-      db?.add(Obj.make(Collection.Collection, { name: 'My Collection', objects: [] }));
-    }, [db]);
-
-    if (!collection) {
-      return <></>;
-    }
-
-    return <DefaultStory {...args} target={collection} />;
-  },
-};

package/src/components/CreateDialog/CreateObjectDialog.tsx

@@ -1,147 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import * as Effect from 'effect/Effect';
-import React, { useCallback, useMemo, useRef, useState } from 'react';
-
-import { Capability } from '@dxos/app-framework';
-import { useOperationInvoker, usePluginManager } from '@dxos/app-framework/ui';
-import { AppCapabilities, LayoutOperation } from '@dxos/app-toolkit';
-import { Database, Obj, Type } from '@dxos/echo';
-import { EntityKind, getTypeAnnotation } from '@dxos/echo/internal';
-import { runAndForwardErrors } from '@dxos/effect';
-import { invariant } from '@dxos/invariant';
-import { Operation } from '@dxos/operation';
-import { useClient } from '@dxos/react-client';
-import { useSpaces } from '@dxos/react-client/echo';
-import { Dialog, useTranslation } from '@dxos/react-ui';
-import { type Collection } from '@dxos/schema';
-
-import { meta } from '../../meta';
-import { SpaceOperation } from '../../types';
-
-import { CreateObjectPanel, type CreateObjectPanelProps, type Metadata } from './CreateObjectPanel';
-
-export const CREATE_OBJECT_DIALOG = `${meta.id}/CreateObjectDialog`;
-
-export type CreateObjectDialogProps = Pick<
-  CreateObjectPanelProps,
-  'target' | 'views' | 'typename' | 'initialFormValues'
-> & {
-  onCreateObject?: (object: Obj.Unknown) => void;
-  shouldNavigate?: (object: Obj.Unknown) => boolean;
-};
-
-export const CreateObjectDialog = ({
-  target: initialTarget,
-  typename: initialTypename,
-  views,
-  initialFormValues,
-  onCreateObject,
-  shouldNavigate: _shouldNavigate,
-}: CreateObjectDialogProps) => {
-  const manager = usePluginManager();
-  const { t } = useTranslation(meta.id);
-  const operationInvoker = useOperationInvoker();
-  const [target, setTarget] = useState<Database.Database | Collection.Collection | undefined>(initialTarget);
-  const [typename, setTypename] = useState<string | undefined>(initialTypename);
-  const client = useClient();
-  const spaces = useSpaces();
-  const closeRef = useRef<HTMLButtonElement | null>(null);
-
-  const resolve = useCallback<NonNullable<CreateObjectPanelProps['resolve']>>(
-    (typename) => {
-      const metadata = manager.capabilities
-        .getAll(AppCapabilities.Metadata)
-        .find(({ id }) => id === typename)?.metadata;
-      return metadata?.createObject ? (metadata as Metadata) : undefined;
-    },
-    [manager],
-  );
-
-  const db = Database.isDatabase(target) ? target : target && Obj.getDatabase(target);
-  // TODO(wittjosiah): Support database schemas.
-  const schemas = db?.schemaRegistry.query({ location: ['runtime'], includeSystem: false }).runSync();
-  const userSchemas = useMemo(
-    () =>
-      schemas
-        ?.filter((schema) => getTypeAnnotation(schema)?.kind !== EntityKind.Relation)
-        .filter((schema) => !!resolve(Type.getTypename(schema))) ?? [],
-    [schemas],
-  );
-
-  const handleCreateObject = useCallback<NonNullable<CreateObjectPanelProps['onCreateObject']>>(
-    ({ metadata, data = {} }) =>
-      Effect.gen(function* () {
-        if (!target) {
-          // TODO(wittjosiah): UI feedback.
-          return;
-        }
-
-        // NOTE: Must close before navigating or attention won't follow object.
-        closeRef.current?.click();
-
-        const db = Database.isDatabase(target) ? target : target && Obj.getDatabase(target);
-        invariant(db, 'Missing database');
-        const object = yield* metadata.createObject(data, { db });
-        if (Obj.isObject(object) && !Obj.instanceOf(Type.PersistentType, object)) {
-          // TODO(wittjosiah): Selection in navtree isn't working as expected when hidden typenames evals to true.
-          const hidden = !metadata.addToCollectionOnCreate;
-          yield* operationInvoker.invoke(SpaceOperation.AddObject, {
-            target,
-            object,
-            hidden,
-          });
-          const shouldNavigate = _shouldNavigate ?? (() => true);
-          if (shouldNavigate(object)) {
-            yield* Effect.promise(() =>
-              operationInvoker.invokePromise(LayoutOperation.Open, {
-                subject: [Obj.getDXN(object).toString()],
-              }),
-            );
-          }
-
-          onCreateObject?.(object);
-        }
-      }).pipe(
-        Effect.provideService(Capability.Service, manager.capabilities),
-        Effect.provideService(Operation.Service, operationInvoker),
-        runAndForwardErrors,
-      ),
-    [target, _shouldNavigate, onCreateObject, manager.capabilities, operationInvoker],
-  );
-
-  return (
-    <Dialog.Content>
-      <Dialog.Header>
-        <Dialog.Title>
-          {t('create object dialog title', {
-            object: t('typename label', {
-              ns: typename,
-              defaultValue: views ? 'View' : 'Object',
-            }),
-          })}
-        </Dialog.Title>
-        <Dialog.Close asChild>
-          <Dialog.CloseIconButton ref={closeRef} />
-        </Dialog.Close>
-      </Dialog.Header>
-      <Dialog.Body>
-        <CreateObjectPanel
-          schemas={userSchemas}
-          spaces={spaces}
-          target={target}
-          views={views}
-          typename={typename}
-          initialFormValues={initialFormValues}
-          defaultSpaceId={client.spaces.default.id}
-          resolve={resolve}
-          onTargetChange={setTarget}
-          onTypenameChange={setTypename}
-          onCreateObject={handleCreateObject}
-        />
-      </Dialog.Body>
-    </Dialog.Content>
-  );
-};

package/src/components/CreateDialog/CreateSpaceDialog.tsx

@@ -1,72 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import * as Effect from 'effect/Effect';
-import type * as Schema from 'effect/Schema';
-import React, { useCallback, useRef } from 'react';
-
-import { useOperationInvoker } from '@dxos/app-framework/ui';
-import { LayoutOperation } from '@dxos/app-toolkit';
-import { runAndForwardErrors } from '@dxos/effect';
-import { Dialog, useTranslation } from '@dxos/react-ui';
-import { Form } from '@dxos/react-ui-form';
-
-import { useInputSurfaceLookup } from '../../hooks';
-import { meta } from '../../meta';
-import { SpaceForm, SpaceOperation } from '../../types';
-
-export const CREATE_SPACE_DIALOG = `${meta.id}/CreateSpaceDialog`;
-
-type FormValues = Schema.Schema.Type<typeof SpaceForm>;
-const initialValues: FormValues = { edgeReplication: true };
-
-export const CreateSpaceDialog = () => {
-  const closeRef = useRef<HTMLButtonElement | null>(null);
-  const { t } = useTranslation(meta.id);
-  const { invokePromise } = useOperationInvoker();
-
-  const inputSurfaceLookup = useInputSurfaceLookup();
-
-  const handleCreateSpace = useCallback(
-    async (data: FormValues) => {
-      const program = Effect.gen(function* () {
-        const { data: result } = yield* Effect.promise(() => invokePromise(SpaceOperation.Create, data));
-        if (result?.space) {
-          yield* Effect.promise(() => invokePromise(LayoutOperation.SwitchWorkspace, { subject: result.space.id }));
-          yield* Effect.promise(() => invokePromise(LayoutOperation.UpdateDialog, { state: false }));
-        }
-      });
-      await runAndForwardErrors(program);
-    },
-    [invokePromise],
-  );
-
-  return (
-    <Dialog.Content>
-      <Dialog.Header>
-        <Dialog.Title>{t('create space dialog title')}</Dialog.Title>
-        <Dialog.Close asChild>
-          <Dialog.CloseIconButton ref={closeRef} />
-        </Dialog.Close>
-      </Dialog.Header>
-      <Dialog.Body>
-        <Form.Root
-          testId='create-space-form'
-          autoFocus
-          schema={SpaceForm}
-          values={initialValues}
-          fieldProvider={inputSurfaceLookup}
-          onSave={handleCreateSpace}
-        >
-          <Form.Viewport>
-            <Form.Content>
-              <Form.FieldSet />
-              <Form.Submit />
-            </Form.Content>
-          </Form.Viewport>
-        </Form.Root>
-      </Dialog.Body>
-    </Dialog.Content>
-  );
-};

package/src/components/JoinDialog/JoinDialog.tsx

@@ -1,105 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import React, { useCallback } from 'react';
-
-import { useOperationInvoker } from '@dxos/app-framework/ui';
-import { LayoutOperation } from '@dxos/app-toolkit';
-import { useAppGraph } from '@dxos/app-toolkit/ui';
-import { Trigger } from '@dxos/async';
-import { Graph } from '@dxos/plugin-graph';
-import { ObservabilityOperation } from '@dxos/plugin-observability/types';
-import { useClient } from '@dxos/react-client';
-import { type Space } from '@dxos/react-client/echo';
-import { type InvitationResult } from '@dxos/react-client/invitations';
-import { Dialog, useTranslation } from '@dxos/react-ui';
-import { JoinPanel, type JoinPanelProps } from '@dxos/shell/react';
-import { osTranslations } from '@dxos/ui-theme';
-
-import { meta } from '../../meta';
-
-export const JOIN_DIALOG = `${meta.id}/JoinDialog`;
-
-export type JoinDialogProps = JoinPanelProps & {
-  navigableCollections?: boolean;
-};
-
-export const JoinDialog = ({ navigableCollections, onDone, ...props }: JoinDialogProps) => {
-  const { invokePromise } = useOperationInvoker();
-  const client = useClient();
-  const { graph } = useAppGraph();
-  const { t } = useTranslation(meta.id);
-
-  const handleDone = useCallback(
-    async (result: InvitationResult | null) => {
-      const spaceKey = result?.spaceKey;
-      if (!spaceKey) {
-        return;
-      }
-
-      await Promise.all([
-        invokePromise(LayoutOperation.AddToast, {
-          id: `${meta.id}/join-success`,
-          duration: 5_000,
-          title: ['join success label', { ns: meta.id }],
-          closeLabel: ['dismiss label', { ns: meta.id }],
-        }),
-        invokePromise(LayoutOperation.UpdateDialog, { state: false }),
-      ]);
-
-      let space = client.spaces.get(spaceKey);
-      if (!space) {
-        // TODO(wittjosiah): Add api to wait for a space.
-        const trigger = new Trigger<Space>();
-        client.spaces.subscribe(() => {
-          const space = client.spaces.get(spaceKey);
-          if (space) {
-            trigger.wake(space);
-          }
-        });
-        space = await trigger.wait();
-      }
-
-      await invokePromise(LayoutOperation.SwitchWorkspace, { subject: space.id });
-
-      // TODO(wittjosiah): If navigableCollections is false and there's no target,
-      //   should try to navigate to the first object of the space replicates.
-      //   Potentially this could also be done on the inviters side to ensure there's always a target.
-      const target = result?.target || (navigableCollections ? space?.id : undefined);
-      if (target) {
-        // Wait before navigating to the target node.
-        // If the target has not yet replicated, this will trigger a loading toast.
-        await Graph.waitForPath(graph, { target }).catch(() => {});
-        await Promise.all([
-          invokePromise(LayoutOperation.Open, { subject: [target] }),
-          invokePromise(LayoutOperation.Expose, { subject: target }),
-        ]);
-      }
-
-      await onDone?.(result);
-
-      if (space) {
-        await invokePromise(ObservabilityOperation.SendEvent, {
-          name: 'space.join',
-          properties: {
-            spaceId: space.id,
-          },
-        });
-      }
-    },
-    [invokePromise, client, graph, navigableCollections, onDone],
-  );
-
-  return (
-    <Dialog.Content>
-      <Dialog.Title classNames='sr-only'>{t('join space label', { ns: osTranslations })}</Dialog.Title>
-      <JoinPanel
-        {...props}
-        exitActionParent={<Dialog.Close asChild />}
-        doneActionParent={<Dialog.Close asChild />}
-        onDone={handleDone}
-      />
-    </Dialog.Content>
-  );
-};

package/src/components/JoinDialog/index.ts

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

package/src/components/MembersContainer/MembersContainer.stories.tsx

@@ -1,56 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React from 'react';
-
-import { OperationPlugin } from '@dxos/app-framework';
-import { withPluginManager } from '@dxos/app-framework/testing';
-import { useSpace } from '@dxos/react-client/echo';
-import { withClientProvider } from '@dxos/react-client/testing';
-import { withTheme } from '@dxos/react-ui/testing';
-import { translations as shellTranslations } from '@dxos/shell/react';
-import { render } from '@dxos/storybook-utils';
-
-import { translations } from '../../translations';
-
-import { MembersContainer } from './MembersContainer';
-
-const DefaultStory = () => {
-  const space = useSpace();
-  if (!space) {
-    return null;
-  }
-
-  return (
-    <MembersContainer
-      space={space}
-      createInvitationUrl={(invitationCode) => `https://dxos.org/invite/${invitationCode}`}
-    />
-  );
-};
-
-const meta = {
-  title: 'plugins/plugin-space/MembersContainer',
-  component: MembersContainer as any,
-  render: render(DefaultStory),
-  decorators: [
-    withTheme(), // TODO(wittjosiah): Try to write story which does not depend on plugin manager.
-    withPluginManager({ plugins: [OperationPlugin()] }),
-    withClientProvider({
-      createIdentity: true,
-      createSpace: true,
-    }),
-  ],
-  parameters: {
-    layout: 'fullscreen',
-    translations: [...translations, ...shellTranslations],
-  },
-} satisfies Meta<typeof DefaultStory>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};