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

package/src/capabilities/schema-defs.ts

@@ -1,31 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { Capabilities, type PluginContext, contributes } from '@dxos/app-framework';
-import { ClientCapabilities } from '@dxos/plugin-client';
-
-import { type ObjectForm } from '../types';
-
-import { SpaceCapabilities } from './capabilities';
-
-export default (context: PluginContext) => {
-  const registry = context.getCapability(Capabilities.RxRegistry);
-  const client = context.getCapability(ClientCapabilities.Client);
-
-  // TODO(wittjosiah): Unregister schemas when they are disabled.
-  let previous: ObjectForm[] = [];
-  const cancel = registry.subscribe(
-    context.capabilities(SpaceCapabilities.ObjectForm),
-    (_forms) => {
-      const forms = Array.from(new Set(_forms));
-      // TODO(wittjosiah): Filter out schemas which the client has already registered.
-      const newSchemas = forms.filter((form) => !previous.includes(form)).map((form) => form.objectSchema);
-      previous = forms;
-      client.addTypes(newSchemas);
-    },
-    { immediate: true },
-  );
-
-  return contributes(Capabilities.Null, null, () => cancel());
-};

package/src/components/CollectionMain.tsx

@@ -1,32 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import React from 'react';
-
-import { useTranslation } from '@dxos/react-ui';
-import { baseSurface, descriptionMessage, mx } from '@dxos/react-ui-theme';
-import { type DataType } from '@dxos/schema';
-
-import { meta } from '../meta';
-
-export const CollectionMain = ({ collection }: { collection: DataType.Collection }) => {
-  const { t } = useTranslation(meta.id);
-
-  return (
-    <div
-      role='none'
-      className={mx(baseSurface, 'min-bs-screen is-full flex items-center justify-center p-8')}
-      data-testid='composer.firstRunMessage'
-    >
-      <p
-        role='alert'
-        className={mx(descriptionMessage, 'rounded-md p-8 font-normal text-lg max-is-[24rem] break-words')}
-      >
-        {collection.name ?? t('unnamed collection label')}
-      </p>
-    </div>
-  );
-};
-
-export default CollectionMain;

package/src/components/CollectionSection.tsx

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

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

@@ -1,85 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React, { useEffect } from 'react';
-
-import { IntentPlugin } from '@dxos/app-framework';
-import { withPluginManager } from '@dxos/app-framework/testing';
-import { Filter, Obj, Type } from '@dxos/echo';
-import { useQuery, useSpace } 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 { DataType } from '@dxos/schema';
-import { translations as shellTranslations } from '@dxos/shell/react';
-
-import { translations } from '../../translations';
-
-import { CreateObjectDialog, type CreateObjectDialogProps } from './CreateObjectDialog';
-
-const Story = (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: Story,
-  decorators: [
-    withTheme, // TODO(wittjosiah): Try to write story which does not depend on plugin manager.
-    withPluginManager({ plugins: [IntentPlugin()] }),
-    withClientProvider({ createIdentity: true, createSpace: true, types: [DataType.Collection] }),
-  ],
-  parameters: {
-    translations: [...translations, ...shellTranslations],
-  },
-  args: {},
-} satisfies Meta<typeof CreateObjectDialog>;
-
-export default meta;
-
-export const Default: StoryObj<typeof CreateObjectDialog> = {};
-
-export const Typename: StoryObj<typeof CreateObjectDialog> = {
-  args: { typename: Type.getTypename(DataType.Collection) },
-};
-
-export const TargetSpace: StoryObj<typeof CreateObjectDialog> = {
-  render: (args) => {
-    const space = useSpace();
-
-    if (!space) {
-      return <></>;
-    }
-
-    return <Story {...args} target={space} />;
-  },
-};
-
-export const TargetCollection: StoryObj<typeof CreateObjectDialog> = {
-  render: (args) => {
-    const space = useSpace();
-    const [collection] = useQuery(space, Filter.type(DataType.Collection));
-
-    useEffect(() => {
-      if (space) {
-        space.db.add(Obj.make(DataType.Collection, { name: 'My Collection', objects: [] }));
-      }
-    }, [space]);
-
-    if (!collection) {
-      return <></>;
-    }
-
-    return <Story {...args} target={collection} />;
-  },
-};

package/src/components/CreateDialog/CreateObjectDialog.tsx

@@ -1,134 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { Effect, pipe } from 'effect';
-import React, { useCallback, useRef, useState } from 'react';
-
-import {
-  Capabilities,
-  LayoutAction,
-  chain,
-  createIntent,
-  useCapabilities,
-  useIntentDispatcher,
-  usePluginManager,
-} from '@dxos/app-framework';
-import { Obj, Query, Type } from '@dxos/echo';
-import { invariant } from '@dxos/invariant';
-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 { isNonNullable } from '@dxos/util';
-
-import { SpaceCapabilities } from '../../capabilities';
-import { meta } from '../../meta';
-import { SpaceAction } from '../../types';
-
-import { CreateObjectPanel, type CreateObjectPanelProps } from './CreateObjectPanel';
-
-export const CREATE_OBJECT_DIALOG = `${meta.id}/CreateObjectDialog`;
-
-export type CreateObjectDialogProps = Pick<
-  CreateObjectPanelProps,
-  'target' | 'views' | 'typename' | 'initialFormValues'
-> & {
-  onCreateObject?: (object: Obj.Any) => void;
-  shouldNavigate?: (object: Obj.Any) => boolean;
-};
-
-export const CreateObjectDialog = ({
-  target: initialTarget,
-  typename: initialTypename,
-  views,
-  initialFormValues,
-  onCreateObject,
-  shouldNavigate: _shouldNavigate,
-}: CreateObjectDialogProps) => {
-  const closeRef = useRef<HTMLButtonElement | null>(null);
-  const manager = usePluginManager();
-  const { t } = useTranslation(meta.id);
-  const client = useClient();
-  const spaces = useSpaces();
-  const { dispatch } = useIntentDispatcher();
-  const forms = useCapabilities(SpaceCapabilities.ObjectForm);
-  const [target, setTarget] = useState<Space | DataType.Collection | undefined>(initialTarget);
-  const [typename, setTypename] = useState<string | undefined>(initialTypename);
-  const space = isSpace(target) ? target : getSpace(target);
-  const queryCollections = useQuery(space, Query.type(DataType.QueryCollection));
-  const hiddenTypenames = queryCollections
-    .map((collection) => typenameFromQuery(collection.query))
-    .filter(isNonNullable);
-
-  const resolve = useCallback<NonNullable<CreateObjectPanelProps['resolve']>>(
-    (typename) =>
-      manager.context.getCapabilities(Capabilities.Metadata).find(({ id }) => id === typename)?.metadata ?? {},
-    [manager],
-  );
-
-  const handleCreateObject = useCallback<NonNullable<CreateObjectPanelProps['onCreateObject']>>(
-    ({ form, 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 space = isSpace(target) ? target : getSpace(target);
-        invariant(space, 'Missing space');
-        const { object } = yield* dispatch(form.getIntent(data, { space }));
-        if (isLiveObject(object) && !Obj.instanceOf(DataType.StoredSchema, object)) {
-          // TODO(wittjosiah): Selection in navtree isn't working as expected when hidden typenames evals to true.
-          const hidden = form.hidden || hiddenTypenames.includes(Type.getTypename(form.objectSchema));
-          const addObjectIntent = createIntent(SpaceAction.AddObject, { target, object, hidden });
-          const shouldNavigate = _shouldNavigate ?? (() => true);
-          if (shouldNavigate(object)) {
-            yield* dispatch(pipe(addObjectIntent, chain(LayoutAction.Open, { part: 'main' })));
-          } else {
-            yield* dispatch(addObjectIntent);
-          }
-
-          onCreateObject?.(object);
-        }
-      }).pipe(Effect.runPromise),
-    [dispatch, target, resolve, hiddenTypenames, _shouldNavigate],
-  );
-
-  return (
-    // TODO(wittjosiah): The tablist dialog pattern is copied from @dxos/plugin-manager.
-    //  Consider factoring it out to the tabs package.
-    <Dialog.Content classNames={cardDialogContent}>
-      <div role='none' className={cardDialogHeader}>
-        <Dialog.Title>
-          {t('create object dialog title', {
-            object: t('typename label', { ns: typename, defaultValue: views ? 'View' : 'Item' }),
-          })}
-        </Dialog.Title>
-        <Dialog.Close asChild>
-          <Button ref={closeRef} density='fine' variant='ghost' autoFocus>
-            <Icon icon='ph--x--regular' size={4} />
-          </Button>
-        </Dialog.Close>
-      </div>
-
-      <CreateObjectPanel
-        forms={forms}
-        spaces={spaces}
-        target={target}
-        views={views}
-        typename={typename}
-        initialFormValues={initialFormValues}
-        defaultSpaceId={client.spaces.default.id}
-        resolve={resolve}
-        onTargetChange={setTarget}
-        onTypenameChange={setTypename}
-        onCreateObject={handleCreateObject}
-      />
-    </Dialog.Content>
-  );
-};

package/src/components/CreateDialog/CreateSpaceDialog.tsx

@@ -1,66 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { Effect, type Schema } from 'effect';
-import React, { useCallback, useRef } from 'react';
-
-import { LayoutAction, createIntent, useIntentDispatcher } from '@dxos/app-framework';
-import { Button, Dialog, Icon, useTranslation } from '@dxos/react-ui';
-import { Form } from '@dxos/react-ui-form';
-import { cardDialogContent, cardDialogHeader } from '@dxos/react-ui-stack';
-
-import { useInputSurfaceLookup } from '../../hooks';
-import { meta } from '../../meta';
-import { SpaceAction, SpaceForm } 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 { dispatch } = useIntentDispatcher();
-
-  const inputSurfaceLookup = useInputSurfaceLookup();
-
-  const handleCreateSpace = useCallback(
-    async (data: FormValues) => {
-      const program = Effect.gen(function* () {
-        const { space } = yield* dispatch(createIntent(SpaceAction.Create, data));
-        yield* dispatch(createIntent(LayoutAction.SwitchWorkspace, { part: 'workspace', subject: space.id }));
-        yield* dispatch(createIntent(LayoutAction.UpdateDialog, { part: 'dialog', options: { state: false } }));
-      });
-      await Effect.runPromise(program);
-    },
-    [dispatch],
-  );
-
-  return (
-    // TODO(wittjosiah): The tablist dialog pattern is copied from @dxos/plugin-manager.
-    //  Consider factoring it out to the tabs package.
-    <Dialog.Content classNames={cardDialogContent}>
-      <div role='none' className={cardDialogHeader}>
-        <Dialog.Title>{t('create space dialog title')}</Dialog.Title>
-        <Dialog.Close asChild>
-          <Button ref={closeRef} density='fine' variant='ghost' autoFocus>
-            <Icon icon='ph--x--regular' size={4} />
-          </Button>
-        </Dialog.Close>
-      </div>
-      <div role='none' className='contents'>
-        <Form
-          testId='create-space-form'
-          autoFocus
-          values={initialValues}
-          schema={SpaceForm}
-          lookupComponent={inputSurfaceLookup}
-          onSave={handleCreateSpace}
-          outerSpacing='scroll-fields'
-        />
-      </div>
-    </Dialog.Content>
-  );
-};

package/src/components/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 { IntentPlugin } 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: [IntentPlugin()] }),
-    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 = {};

package/src/components/ObjectDetailsPanel.tsx

@@ -1,79 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React, { useCallback } 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 { isNonNullable } from '@dxos/util';
-
-import { meta } from '../meta';
-
-type RowDetailsPanelProps = { objectId: string; view: DataType.View };
-
-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 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'>
-        <Callout.Root classNames='is-full'>
-          <Callout.Title>{t('row details no selection label')}</Callout.Title>
-        </Callout.Root>
-      </div>
-    );
-  }
-
-  return (
-    <div role='none' className='bs-full is-full flex flex-col p-2 gap-1 overflow-y-auto'>
-      {schema &&
-        selectedObjects.map((object) => (
-          <div key={object.id} className='border border-separator rounded'>
-            <Form
-              autoSave
-              schema={schema}
-              values={object}
-              onSave={handleSave}
-              onQueryRefOptions={handleRefQueryLookup}
-            />
-          </div>
-        ))}
-    </div>
-  );
-};
-
-export default ObjectDetailsPanel;

package/src/components/ObjectSettings/AdvancedObjectSettings.tsx

@@ -1,81 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import React, { useCallback, useState } from 'react';
-
-import { Obj } from '@dxos/echo';
-import { ForeignKey } from '@dxos/echo-schema';
-import { IconButton, useTranslation } from '@dxos/react-ui';
-import { Form } from '@dxos/react-ui-form';
-
-import { meta } from '../../meta';
-
-import { ForeignKeys } from './ForeignKeys';
-
-const initialValues = {
-  source: '',
-  id: '',
-};
-
-export type AdvancedObjectSettingsProps = {
-  object: Obj.Any;
-};
-
-export const AdvancedObjectSettings = ({ object }: AdvancedObjectSettingsProps) => {
-  const { t } = useTranslation(meta.id);
-  const [adding, setAdding] = useState(false);
-  const { keys } = Obj.getMeta(object);
-
-  const handleNew = useCallback(() => setAdding(true), []);
-  const handleCancel = useCallback(() => setAdding(false), []);
-  const handleSave = useCallback(
-    (key: ForeignKey) => {
-      const index = keys.findIndex(({ source, id }) => source === key.source && id === key.id);
-      if (index === -1) {
-        keys.push(key);
-      }
-      setAdding(false);
-    },
-    [keys],
-  );
-  const handleDelete = useCallback(
-    (key: ForeignKey) => {
-      const index = keys.findIndex(({ source, id }) => source === key.source && id === key.id);
-      if (index !== -1) {
-        keys.splice(index, 1);
-      }
-    },
-    [keys],
-  );
-
-  // TODO(wittjosiah): This should be wrapped in an "Advanced" accordion.
-  return (
-    <>
-      <div className='p-2 flex flex-col gap-4'>
-        <h2>{t('advanced settings label')}</h2>
-        <div className='flex items-center'>
-          <h3 className='text-sm font-semibold'>{t('foreign keys')}</h3>
-          <div className='grow' />
-          <IconButton
-            classNames={adding && 'invisible'}
-            icon='ph--plus--regular'
-            label={t('add key')}
-            onClick={handleNew}
-          />
-        </div>
-        {!adding && <ForeignKeys keys={keys} onDelete={handleDelete} />}
-      </div>
-
-      {adding && (
-        <Form
-          outerSpacing={false}
-          schema={ForeignKey}
-          values={initialValues}
-          onSave={handleSave}
-          onCancel={handleCancel}
-        />
-      )}
-    </>
-  );
-};

package/src/components/ObjectSettings/BaseObjectSettings.tsx

@@ -1,47 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import React, { type PropsWithChildren, useRef } from 'react';
-
-import { type Obj } from '@dxos/echo';
-import { Input, type ThemedClassName, useTranslation } from '@dxos/react-ui';
-
-import { meta } from '../../meta';
-
-export type BaseObjectSettingsProps = ThemedClassName<
-  PropsWithChildren<{
-    object: Obj.Any;
-  }>
->;
-
-export const BaseObjectSettings = ({ classNames, children, object }: BaseObjectSettingsProps) => {
-  const { t } = useTranslation(meta.id);
-  const inputRef = useRef<HTMLInputElement>(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>
-      {children}
-    </>
-  );
-};

package/src/components/ObjectSettings/ObjectSettingsContainer.tsx

@@ -1,37 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React, { useMemo } from 'react';
-
-import { Surface } from '@dxos/app-framework';
-import { type Obj } from '@dxos/echo';
-import { Clipboard, Toolbar } from '@dxos/react-ui';
-import { StackItem } from '@dxos/react-ui-stack';
-
-import { BaseObjectSettings } from './BaseObjectSettings';
-
-export type ObjectSettingsContainerProps = {
-  object: Obj.Any;
-  role: string;
-};
-
-export const ObjectSettingsContainer = ({ object, role }: ObjectSettingsContainerProps) => {
-  const data = useMemo(() => ({ subject: object }), [object]);
-
-  return (
-    <Clipboard.Provider>
-      <StackItem.Content toolbar>
-        <Toolbar.Root></Toolbar.Root>
-        <div role='none' className='overflow-y-auto pli-cardSpacingInline plb-cardSpacingBlock'>
-          <BaseObjectSettings object={object}>
-            <Surface role='base-object-settings' data={data} />
-          </BaseObjectSettings>
-          <Surface role='object-settings' data={data} />
-          {/* TODO(wittjosiah): Remove? */}
-          {/* <AdvancedObjectSettings object={object} /> */}
-        </div>
-      </StackItem.Content>
-    </Clipboard.Provider>
-  );
-};

package/src/components/ObjectSettings/index.ts

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