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

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/ObjectDetailsPanel/ObjectDetailsPanel.tsx

@@ -1,52 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React from 'react';
-
-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 { type DataType } from '@dxos/schema';
-import { getTypenameFromQuery } from '@dxos/schema';
-import { isNonNullable } from '@dxos/util';
-
-import { meta } from '../../meta';
-
-import { ObjectForm } from './ObjectForm';
-
-type RowDetailsPanelProps = { objectId: string; view: DataType.View };
-
-export const ObjectDetailsPanel = ({ objectId, view }: RowDetailsPanelProps) => {
-  const { t } = useTranslation(meta.id);
-  const client = useClient();
-  const space = getSpace(view);
-  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);
-
-  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'>
-            <ObjectForm object={object} schema={schema} />
-          </div>
-        ))}
-    </div>
-  );
-};

package/src/components/ObjectDetailsPanel/ObjectForm.tsx

@@ -1,75 +0,0 @@
-//
-// 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

@@ -1,7 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { ObjectDetailsPanel } from './ObjectDetailsPanel';
-
-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/internal';
-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,107 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-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 { 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 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<{
-    object: Obj.Any;
-  }>
->;
-
-// TODO(wittjosiah): Reconcile w/ ObjectDetailsPanel.
-export const BaseObjectSettings = ({ classNames, children, object }: BaseObjectSettingsProps) => {
-  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;
-  }
-
-  return (
-    <>
-      <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/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,7 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { ObjectSettingsContainer } from './ObjectSettingsContainer';
-
-export default ObjectSettingsContainer;

package/src/components/PersistenceStatus.tsx

@@ -1,83 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import React, { useEffect, useState } from 'react';
-
-import { debounce } from '@dxos/async';
-import { type EchoDatabase } from '@dxos/react-client/echo';
-import { Icon, Tooltip, useTranslation } from '@dxos/react-ui';
-import { mx, staticPlaceholderText, warningText } from '@dxos/react-ui-theme';
-
-import { meta } from '../meta';
-
-enum Status {
-  PERSISTED_LOCALLY = 0,
-  PENDING = 1,
-  ERROR = 2,
-}
-
-// TODO(zan): This now has no usages. Remove it?
-export const PersistenceStatus = ({ db }: { db: EchoDatabase }) => {
-  const { t } = useTranslation(meta.id);
-  const [displayMessage, setDisplayMessage] = useState(false);
-  const [status, naturalSetStatus] = useState<Status>(Status.PERSISTED_LOCALLY);
-  const [prevStatus, setPrevStatus] = useState<Status>(Status.PERSISTED_LOCALLY);
-  const _setStatus = debounce(naturalSetStatus, 500);
-
-  // TODO(dmaretskyi): Fix this when we have save status for automerge.
-  // useEffect(() => {
-  //   return db.pendingBatch.on(({ duration, error }) => {
-  //     if (error) {
-  //       setStatus(Status.ERROR);
-  //     } else if (duration === undefined) {
-  //       setStatus(Status.PENDING);
-  //     } else {
-  //       setStatus(Status.PERSISTED_LOCALLY);
-  //     }
-  //   });
-  // }, [db]);
-
-  useEffect(() => {
-    // If this is changed outside the effect it's batched with setStatus and the following condition will never be true.
-    setPrevStatus(status);
-
-    if (prevStatus !== status && status === Status.PERSISTED_LOCALLY) {
-      setDisplayMessage(true);
-      const timeout = setTimeout(() => setDisplayMessage(false), 5000);
-      return () => clearTimeout(timeout);
-    }
-  }, [status]); // `prevStatus` omitted from dependency array to prevent timeout from being reset.
-
-  switch (status) {
-    case Status.ERROR:
-      return (
-        <div className='flex items-center'>
-          <Icon icon='ph--warning--regular' size={4} classNames='me-1' />
-          <span className={mx('text-sm', warningText)}>{t('persistence error label')}</span>
-        </div>
-      );
-    case Status.PENDING:
-      return (
-        <div className='flex items-center'>
-          <Icon icon='ph--arrows-counter-clockwise--regular' size={4} classNames='me-1' />
-          <span className={mx('text-sm', staticPlaceholderText)}>{t('persistence pending label')}</span>
-        </div>
-      );
-    case Status.PERSISTED_LOCALLY:
-    default:
-      return (
-        <Tooltip.Trigger
-          delayDuration={400}
-          role='status'
-          content={t('persisted locally message')}
-          className='flex items-center'
-        >
-          <Icon icon='ph--check-circle--regular' size={4} classNames='me-1' />
-          {displayMessage && (
-            <span className={mx('text-sm', staticPlaceholderText)}>{t('persisted locally label')}</span>
-          )}
-        </Tooltip.Trigger>
-      );
-  }
-};

package/src/components/RecordMain.tsx

@@ -1,83 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import React, { useMemo } from 'react';
-
-import { Surface } from '@dxos/app-framework';
-import { Filter, type Obj, Ref, Relation } from '@dxos/echo';
-import { getSpace, useQuery } from '@dxos/react-client/echo';
-import { useTranslation } from '@dxos/react-ui';
-import { Masonry } from '@dxos/react-ui-masonry';
-import { StackItem } from '@dxos/react-ui-stack';
-import { mx } from '@dxos/react-ui-theme';
-import { isNonNullable } from '@dxos/util';
-
-import { meta } from '../meta';
-
-export type RecordMainProps = {
-  record: Obj.Any;
-};
-
-export const RecordMain = ({ record }: RecordMainProps) => {
-  const { t } = useTranslation(meta.id);
-  const space = getSpace(record);
-  const data = useMemo(() => ({ subject: record }), [record]);
-
-  // TODO(wittjosiah): This is a hack. ECHO needs to have a back reference index to easily query for related objects.
-  const objects = useQuery(space, Filter.everything());
-  const related = useMemo(() => {
-    const relations = objects.filter((obj) => Relation.isRelation(obj));
-    const targetObjects = relations
-      .filter((relation) => Relation.getSource(relation) === record)
-      .map((relation) => Relation.getTarget(relation));
-    const sourceObjects = relations
-      .filter((relation) => Relation.getTarget(relation) === record)
-      .map((relation) => Relation.getSource(relation));
-
-    const references = getReferencesFromObject(record);
-    const referencedObjects = references.map((ref) => ref.target).filter(isNonNullable);
-    const referencingObjects = objects.filter((obj) => {
-      const refs = getReferencesFromObject(obj);
-      return refs.some((ref) => ref.target === record);
-    });
-
-    return [...referencedObjects, ...referencingObjects, ...targetObjects, ...sourceObjects];
-  }, [record, objects]);
-
-  return (
-    <StackItem.Content classNames='flex flex-col items-center'>
-      <div role='none' className={mx('flex flex-col gap-4 p-6 is-full overflow-y-auto')}>
-        <div role='none' className={mx('flex flex-col gap-1 card-min-width card-max-width')}>
-          <Surface role='section' data={data} limit={1} />
-        </div>
-
-        {/* TODO(wittjosiah): This should maybe be in a separate stack item. */}
-        {related.length > 0 && (
-          <div role='none' className={mx('flex flex-col gap-1', related.length === 1 ? 'card-max-width' : 'is-full')}>
-            <label className='text-description text-sm mbs-2'>{t('related objects label')}</label>
-            <Masonry.Root<Obj.Any>
-              items={related}
-              render={Card}
-              intrinsicHeight
-              columnCount={related.length === 1 ? 1 : undefined}
-            />
-          </div>
-        )}
-      </div>
-    </StackItem.Content>
-  );
-};
-
-const Card = ({ data: subject }: { data: Obj.Any }) => {
-  const data = useMemo(() => ({ subject }), [subject]);
-  return <Surface role='card' data={data} limit={1} />;
-};
-
-const getReferencesFromObject = (obj: Obj.Any): Ref.Any[] => {
-  return Object.getOwnPropertyNames(obj)
-    .map((name) => obj[name as keyof Obj.Any])
-    .filter((value) => Ref.isRef(value)) as Ref.Any[];
-};
-
-export default RecordMain;

package/src/events.ts

@@ -1,15 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { Events, defineEvent } from '@dxos/app-framework';
-
-import { meta } from './meta';
-
-export namespace SpaceEvents {
-  export const StateReady = Events.createStateEvent(`${meta.id}/event/state-ready`);
-  export const SetupSettingsPanel = defineEvent(`${meta.id}/event/setup-settings-panel`);
-  export const DefaultSpaceReady = defineEvent(`${meta.id}/event/default-space-ready`);
-  export const SpaceCreated = defineEvent(`${meta.id}/event/space-created`);
-  export const SchemaAdded = defineEvent(`${meta.id}/event/schema-added`);
-}