@dxos/plugin-space 0.8.4-main.fffef41 → 0.9.0

package/src/components/CreateObjectPanel/CreateObjectPanel.tsx

@@ -0,0 +1,260 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { useCallback, useMemo } from 'react';
+
+import { type Collection, type Database, Obj } from '@dxos/echo';
+import { type AnyProperties } from '@dxos/echo/internal';
+import { type SpaceId } from '@dxos/keys';
+import { type Space } from '@dxos/react-client/echo';
+import { Column, Icon, toLocalizedString, useDefaultValue, useTranslation } from '@dxos/react-ui';
+import { Form, omitId } from '@dxos/react-ui-form';
+import { Picker } from '@dxos/react-ui-list';
+import { SearchList, useSearchListResults } from '@dxos/react-ui-search';
+import { getStyles } from '@dxos/ui-theme';
+import { type MaybePromise } from '@dxos/util';
+
+import { useInputSurfaceLookup } from '#hooks';
+import { meta } from '#meta';
+import { type SpaceCapabilities } from '#types';
+
+import { getSpaceDisplayName } from '../../util';
+
+/** Display-ready option for the create object search list. */
+export type CreateObjectOption = {
+  id: string;
+  label: string;
+  icon?: string;
+  iconHue?: string;
+  /** Plugin name shown as "{{plugin}} Plugin" subtitle. */
+  plugin?: string;
+  /** Generic subtitle shown when plugin is not set. */
+  description?: string;
+};
+
+export type Metadata = SpaceCapabilities.CreateObjectEntry;
+
+export type CreateObjectPanelProps = {
+  options: CreateObjectOption[];
+  spaces: Space[];
+  typename?: string;
+  target?: Database.Database | Collection.Collection;
+  initialFormValues?: Partial<AnyProperties>;
+  defaultSpaceId?: SpaceId;
+  resolve?: (typename: string) => Metadata | undefined;
+  onTargetChange?: (target: Database.Database) => void;
+  onTypenameChange?: (typename: string) => void;
+  onCreateObject?: (params: { metadata: Metadata; data?: Record<string, any> }) => MaybePromise<void>;
+};
+
+export const CreateObjectPanel = ({
+  options,
+  spaces,
+  typename,
+  target,
+  initialFormValues: initialFormValuesProp,
+  defaultSpaceId,
+  resolve,
+  onTargetChange,
+  onTypenameChange,
+  onCreateObject,
+}: CreateObjectPanelProps) => {
+  const initialFormValues = useDefaultValue(initialFormValuesProp, () => ({}));
+  const metadata = typename && resolve?.(typename);
+
+  const sortedOptions = useMemo(() => [...options].sort((a, b) => a.label.localeCompare(b.label)), [options]);
+
+  const handleCreateObject = useCallback(
+    async (props: Record<string, any>) => {
+      if (!metadata) {
+        return;
+      }
+      await onCreateObject?.({ metadata, data: props });
+    },
+    [onCreateObject, metadata],
+  );
+
+  const handleSelectOption = useCallback(
+    async (id: string) => {
+      const metadata = resolve?.(id);
+      if (metadata && !metadata.inputSchema && !metadata.customPanel) {
+        await onCreateObject?.({ metadata });
+      } else {
+        onTypenameChange?.(id);
+      }
+    },
+    [resolve, onCreateObject],
+  );
+
+  const inputSchema = useMemo(
+    () => (metadata && typeof metadata === 'object' && metadata.inputSchema ? omitId(metadata.inputSchema) : undefined),
+    [metadata],
+  );
+  const inputSurfaceLookup = useInputSurfaceLookup({ target });
+
+  // TODO(wittjosiah): Extends and use react-ui-form to handle variants.
+
+  if (!metadata) {
+    return <SelectType options={sortedOptions} onChange={handleSelectOption} />;
+  }
+
+  if (!target) {
+    return <SelectSpace spaces={spaces} defaultSpaceId={defaultSpaceId} onChange={onTargetChange} />;
+  }
+
+  if (metadata.customPanel) {
+    const CustomPanel = metadata.customPanel;
+    return (
+      <CustomPanel
+        target={target}
+        initialFormValues={initialFormValues}
+        onCreateObject={(data) => handleCreateObject(data)}
+      />
+    );
+  }
+
+  if (metadata.inputSchema) {
+    // The host (Dialog.Body) already owns the gutter Column. Use Column.Center to place the form in
+    // the same center column as the dialog title — NOT a subgrid wrapper or Form.Viewport's own
+    // Column.Root. Subgrid can't propagate through Form.Root's `display: contents` wrapper (the form
+    // would fall back to a stray track and inset), and a nested Column.Root would double-gutter it.
+    return (
+      <Column.Center>
+        <Form.Root
+          autoFocus
+          schema={inputSchema}
+          defaultValues={initialFormValues}
+          fieldProvider={inputSurfaceLookup}
+          db={Obj.isObject(target) ? Obj.getDatabase(target) : target}
+          onSave={handleCreateObject}
+          testId='create-object-form'
+        >
+          <Form.Content>
+            <Form.FieldSet />
+            <Form.Submit />
+          </Form.Content>
+        </Form.Root>
+      </Column.Center>
+    );
+  }
+
+  return null;
+};
+
+CreateObjectPanel.displayName = 'CreateObjectPanel';
+
+type SelectTypeProps = Pick<CreateObjectPanelProps, 'options'> & {
+  onChange: (id: string) => void;
+};
+
+const SelectType = ({ options, onChange }: SelectTypeProps) => {
+  const { t } = useTranslation(meta.id);
+
+  const { results, handleSearch } = useSearchListResults({
+    items: options,
+    extract: (option) => option.label,
+  });
+
+  return (
+    <SearchList.Root onSearch={handleSearch}>
+      <SearchList.Input
+        classNames='mb-form-gap'
+        autoFocus
+        data-testid='create-object-form.schema-input'
+        placeholder={t('schema-input.placeholder')}
+      />
+      <SearchList.Viewport>
+        {results.map((option) => (
+          <Picker.Item
+            key={option.id}
+            value={option.id}
+            onSelect={() => onChange(option.id)}
+            classNames='flex gap-3 items-center px-2 py-2 rounded-xs'
+          >
+            <Icon
+              icon={option.icon ?? 'ph--circle-dashed--regular'}
+              size={8}
+              classNames={getIconHueStyles(option.iconHue)}
+            />
+            <div className='flex flex-col min-w-0 grow gap-0.5'>
+              <span className='truncate'>{option.label}</span>
+              {(option.plugin || option.description) && (
+                <span className='truncate text-description text-xs'>
+                  {option.plugin ? t('plugin-subtitle.label', { plugin: option.plugin }) : option.description}
+                </span>
+              )}
+            </div>
+          </Picker.Item>
+        ))}
+      </SearchList.Viewport>
+    </SearchList.Root>
+  );
+};
+
+type SelectSpaceProps = Pick<CreateObjectPanelProps, 'spaces' | 'defaultSpaceId'> & {
+  onChange?: (db: Database.Database) => void;
+};
+
+const SelectSpace = ({ spaces, defaultSpaceId, onChange }: SelectSpaceProps) => {
+  const { t } = useTranslation(meta.id);
+
+  const sortedSpaces = useMemo(
+    () =>
+      [...spaces].sort((a, b) => {
+        const labelA = toLocalizedString(
+          getSpaceDisplayName(a, {
+            personal: a.id === defaultSpaceId,
+          }),
+          t,
+        );
+        const labelB = toLocalizedString(
+          getSpaceDisplayName(b, {
+            personal: b.id === defaultSpaceId,
+          }),
+          t,
+        );
+        return labelA.localeCompare(labelB);
+      }),
+    [spaces, defaultSpaceId, t],
+  );
+
+  const { results, handleSearch } = useSearchListResults({
+    items: sortedSpaces,
+    extract: (space) =>
+      toLocalizedString(
+        getSpaceDisplayName(space, {
+          personal: space.id === defaultSpaceId,
+        }),
+        t,
+      ),
+  });
+
+  return (
+    <SearchList.Root onSearch={handleSearch}>
+      <SearchList.Input
+        classNames='mb-form-gap'
+        autoFocus
+        data-testid='create-object-form.space-input'
+        placeholder={t('space-input.placeholder')}
+      />
+      <SearchList.Viewport>
+        {results.map((space) => {
+          return (
+            <SearchList.Item
+              key={space.id}
+              value={space.id}
+              label={toLocalizedString(getSpaceDisplayName(space, { personal: space.id === defaultSpaceId }), t)}
+              onSelect={() => onChange?.(space.db)}
+            />
+          );
+        })}
+      </SearchList.Viewport>
+    </SearchList.Root>
+  );
+};
+
+const getIconHueStyles = (iconHue?: string): string | undefined => {
+  const styles = iconHue ? getStyles(iconHue) : undefined;
+  return styles?.text;
+};

package/src/components/CreateObjectPanel/index.ts

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

package/src/components/ForeignKeys/ForeignKeys.tsx

@@ -0,0 +1,57 @@
+//
+// 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.button')}
+          onClick={handleDelete}
+        />
+      </ListItem.Endcap>
+    </ListItem.Root>
+  );
+};

package/src/components/ForeignKeys/index.ts

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

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

@@ -0,0 +1,30 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+
+import { translations } from '#translations';
+
+import { SpaceSettings } from './SpaceSettings';
+
+const meta = {
+  title: 'plugins/plugin-space/components/SpaceSettings',
+  component: SpaceSettings,
+  tags: ['settings'],
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
+  parameters: {
+    layout: 'fullscreen',
+    translations,
+  },
+} satisfies Meta<typeof SpaceSettings>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};

package/src/components/SpaceSettings/SpaceSettings.tsx

@@ -0,0 +1,56 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React from 'react';
+
+import { isPersonalSpace } from '@dxos/app-toolkit';
+import { type Space } from '@dxos/react-client/echo';
+import { IconButton, Input, List, ListItem, toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { Settings as SettingsForm } from '@dxos/react-ui-form';
+
+import { meta } from '#meta';
+
+import { getSpaceDisplayName } from '../../util';
+
+export type SpaceSettingsProps = {
+  spaces?: Space[];
+  onOpenSpaceSettings?: (space: Space) => void;
+};
+
+export const SpaceSettings = ({ spaces, onOpenSpaceSettings }: SpaceSettingsProps) => {
+  const { t } = useTranslation(meta.id);
+
+  return (
+    <SettingsForm.Viewport>
+      <SettingsForm.Section title={t('space-settings.label')} description={t('space-settings.description')}>
+        <SettingsForm.Panel>
+          <Input.Root>
+            <Input.Label>{t('settings.space-list.label')}</Input.Label>
+          </Input.Root>
+          <List classNames='flex flex-col gap-trim-sm'>
+            {spaces?.map((space) => (
+              <ListItem.Root key={space.id} classNames='w-full items-center'>
+                {/* TODO(burdon): Should auto center and truncate; NOTE truncate doesn't work with flex grow. */}
+                <ListItem.Heading classNames='grow truncate min-h-0!'>
+                  {toLocalizedString(
+                    getSpaceDisplayName(space, {
+                      personal: isPersonalSpace(space),
+                    }),
+                    t,
+                  )}
+                </ListItem.Heading>
+                <IconButton
+                  icon='ph--faders--regular'
+                  label={t('settings.open-settings.label')}
+                  disabled={!onOpenSpaceSettings}
+                  onClick={() => onOpenSpaceSettings?.(space)}
+                />
+              </ListItem.Root>
+            ))}
+          </List>
+        </SettingsForm.Panel>
+      </SettingsForm.Section>
+    </SettingsForm.Viewport>
+  );
+};

package/src/components/SpaceSettings/index.ts

@@ -1,5 +1,5 @@
 //
-// Copyright 2024 DXOS.org
+// Copyright 2023 DXOS.org
 //
 
-export * from './SpaceSettingsContainer';
+export { SpaceSettings as default } from './SpaceSettings';

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

@@ -4,8 +4,9 @@
 
 import { type CleanupFn } from '@dxos/async';
 import { type Client } from '@dxos/client';
-import { type Space, type SpaceId } from '@dxos/client/echo';
+import { type Space } from '@dxos/client/echo';
 import { Context } from '@dxos/context';
+import { type SpaceId } from '@dxos/keys';
 
 export const createClientSaveTracker = (client: Client, cb: (state: 'saved' | 'saving') => void) => {
   const CleanupFns: Record<SpaceId, CleanupFn> = {};
@@ -46,10 +47,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/SyncStatus/status.ts

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-export type Status = 'saving locally' | 'downloading' | 'uploading' | 'offline persisted' | 'remote synced';
+export type Status = 'saving-locally' | 'downloading' | 'uploading' | 'offline-persisted' | 'remote-synced';
 
 export const getStatus = ({
   offline,
@@ -16,29 +16,29 @@ export const getStatus = ({
   needsToDownload: boolean;
 }): Status => {
   if (!saved) {
-    return 'saving locally';
+    return 'saving-locally';
   } else if (!offline && needsToDownload) {
     return 'downloading';
   } else if (!offline && needsToUpload) {
     return 'uploading';
   } else if (offline && !needsToUpload && !needsToDownload) {
-    return 'offline persisted';
+    return 'offline-persisted';
   } else {
-    return 'remote synced';
+    return 'remote-synced';
   }
 };
 
 export const getIcon = (status: Status) => {
   switch (status) {
-    case 'saving locally':
+    case 'saving-locally':
       return 'ph--download--regular';
     case 'downloading':
       return 'ph--cloud-arrow-down--regular';
     case 'uploading':
       return 'ph--cloud-arrow-up--regular';
-    case 'offline persisted':
+    case 'offline-persisted':
       return 'ph--check-circle--regular';
-    case 'remote synced':
+    case 'remote-synced':
       return 'ph--cloud-check--regular';
   }
 };

package/src/components/index.ts

@@ -5,21 +5,8 @@
 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 './CreateObjectPanel';
+export * from './ForeignKeys';
 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'));
+export const SpaceSettings: ComponentType<any> = lazy(() => import('./SpaceSettings'));

package/src/constants.ts

@@ -0,0 +1,14 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { DXN } from '@dxos/keys';
+
+import { meta } from '#meta';
+
+export const CREATE_OBJECT_DIALOG = DXN.make(`${meta.id}.createObjectDialog`);
+export const CREATE_SPACE_DIALOG = DXN.make(`${meta.id}.createSpaceDialog`);
+export const IMPORT_SPACE_DIALOG = DXN.make(`${meta.id}.importSpaceDialog`);
+export const JOIN_DIALOG = DXN.make(`${meta.id}.joinDialog`);
+export const ENTITY_RENAME_POPOVER = DXN.make(`${meta.id}.entityRenamePopover`);
+export const SPACE_RENAME_POPOVER = DXN.make(`${meta.id}.spaceRenamePopover`);

package/src/containers/CollectionArticle/CollectionArticle.tsx

@@ -0,0 +1,111 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { useCallback, useMemo } from 'react';
+
+import { useOperationInvoker } from '@dxos/app-framework/ui';
+import { LayoutOperation, getCollectionObjectPath, getObjectPathFromObject } from '@dxos/app-toolkit';
+import { type AppSurface } from '@dxos/app-toolkit/ui';
+import { type Collection, Obj } from '@dxos/echo';
+import { ScrollArea, toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { Card, Toolbar } 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';
+
+/**
+ * Article view for collections.
+ */
+export const CollectionArticle = ({ subject, attendableId }: AppSurface.ObjectArticleProps<Collection.Collection>) => {
+  const { t } = useTranslation(meta.id);
+  const { items, handleSearch } = useCollectionItems(subject, 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.Header>
+        <Toolbar.IconButton variant='ghost' label={label} icon={item.icon} iconOnly iconClassNames={styles?.fg} />
+        <Card.Title>{label}</Card.Title>
+        <Card.Menu />
+      </Card.Header>
+    </Card.Root>
+  );
+};
+
+/**
+ * Combined hook to get collection items with search/filter support.
+ */
+const useCollectionItems = (collection: Collection.Collection, 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 iconAnnotation = Obj.getIcon(obj);
+        const targetPath = attendableId ? getCollectionObjectPath(attendableId, obj.id) : getObjectPathFromObject(obj);
+
+        return {
+          id: Obj.getURI(obj),
+          object: obj,
+          targetPath,
+          icon: iconAnnotation?.icon ?? 'ph--circle-dashed--regular',
+          iconHue: iconAnnotation?.hue,
+        } satisfies ObjectItem;
+      }),
+    [objects, 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,5 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export { CollectionArticle as default } from './CollectionArticle';