@dxos/plugin-space 0.8.4-main.21d9917 → 0.8.4-main.2244d791bb

package/src/components/MembersContainer/MembersContainer.tsx

@@ -5,15 +5,14 @@
 import React, { type Dispatch, type SetStateAction, useCallback, useMemo, useState } from 'react';
 import { QR } from 'react-qr-rounded';
 
-import { useOperationInvoker } from '@dxos/app-framework/react';
+import { useOperationInvoker } from '@dxos/app-framework/ui';
 import { Obj } from '@dxos/echo';
 import { log } from '@dxos/log';
 import { useConfig } from '@dxos/react-client';
 import { type Space, useSpaceInvitations } from '@dxos/react-client/echo';
 import { type CancellableInvitationObservable, Invitation, InvitationEncoder } from '@dxos/react-client/invitations';
 import { Button, Clipboard, Icon, Input, useId, useTranslation } from '@dxos/react-ui';
-import { ControlFrame, ControlFrameItem, ControlItemInput, ControlPage, ControlSection } from '@dxos/react-ui-form';
-import { Layout } from '@dxos/react-ui-mosaic';
+import { Settings } from '@dxos/react-ui-form';
 import { Collection } from '@dxos/schema';
 import {
   type ActionMenuItem,
@@ -130,51 +129,49 @@ export const MembersContainer = ({ space, createInvitationUrl }: MembersContaine
 
   return (
     <Clipboard.Provider>
-      <Layout.Container scrollable>
-        <ControlPage>
-          <ControlSection title={t('members verbose label')} description={t('members description')}>
-            <ControlFrame>
-              <ControlFrameItem title={t('members label')}>
-                <SpaceMemberList spaceKey={space.key} includeSelf />
-              </ControlFrameItem>
-              {locked && (
-                <ControlFrameItem title={t('invitations label')}>
-                  <p className='text-description mbe-2'>{t('locked space description')}</p>
-                </ControlFrameItem>
-              )}
-              {!locked && (
-                <ControlFrameItem title={t('invitations label')}>
-                  {selectedInvitation && <InvitationSection {...selectedInvitation} onBack={handleBack} />}
-                  {!selectedInvitation && (
-                    <>
-                      <p className='text-description mbe-2'>{t('space invitation description')}</p>
-                      <InvitationList
-                        className='mb-2'
-                        send={handleSend}
-                        invitations={visibleInvitations ?? []}
-                        onClickRemove={(invitation) => invitation.cancel()}
-                        createInvitationUrl={createInvitationUrl}
-                      />
-                      <BifurcatedAction
-                        actions={inviteActions}
-                        activeAction={activeAction}
-                        onChangeActiveAction={setActiveAction as Dispatch<SetStateAction<string>>}
-                        data-testid='membersContainer.createInvitation'
-                      />
-                    </>
-                  )}
-                </ControlFrameItem>
-              )}
-            </ControlFrame>
-            {/* TODO(wittjosiah): Make ControlItemInput & ControlFrame compatible. */}
-            <div className='justify-center p-0 mbs-4 container-max-width grid grid-cols-1 md:grid-cols-[1fr_min-content]'>
-              <ControlItemInput title={t('space locked label')} description={t('space locked description')}>
-                <Input.Switch checked={locked} onCheckedChange={handleChangeLocked} classNames='justify-self-end' />
-              </ControlItemInput>
-            </div>
-          </ControlSection>
-        </ControlPage>
-      </Layout.Container>
+      <Settings.Root>
+        <Settings.Section title={t('members verbose label')} description={t('members description')}>
+          <Settings.Frame>
+            <Settings.FrameItem title={t('members label')}>
+              <SpaceMemberList spaceKey={space.key} includeSelf />
+            </Settings.FrameItem>
+            {locked && (
+              <Settings.FrameItem title={t('invitations label')}>
+                <p className='text-description mbe-2'>{t('locked space description')}</p>
+              </Settings.FrameItem>
+            )}
+            {!locked && (
+              <Settings.FrameItem title={t('invitations label')}>
+                {selectedInvitation && <InvitationSection {...selectedInvitation} onBack={handleBack} />}
+                {!selectedInvitation && (
+                  <>
+                    <p className='text-description mbe-2'>{t('space invitation description')}</p>
+                    <InvitationList
+                      className='mb-2'
+                      send={handleSend}
+                      invitations={visibleInvitations ?? []}
+                      onClickRemove={(invitation) => invitation.cancel()}
+                      createInvitationUrl={createInvitationUrl}
+                    />
+                    <BifurcatedAction
+                      actions={inviteActions}
+                      activeAction={activeAction}
+                      onChangeActiveAction={setActiveAction as Dispatch<SetStateAction<string>>}
+                      data-testid='membersContainer.createInvitation'
+                    />
+                  </>
+                )}
+              </Settings.FrameItem>
+            )}
+          </Settings.Frame>
+          {/* TODO(wittjosiah): Make Settings.ItemInput & Settings.Frame compatible. */}
+          <div className='justify-center p-0 mbs-4 container-max-width grid grid-cols-1 md:grid-cols-[1fr_min-content]'>
+            <Settings.ItemInput title={t('space locked label')} description={t('space locked description')}>
+              <Input.Switch checked={locked} onCheckedChange={handleChangeLocked} classNames='justify-self-end' />
+            </Settings.ItemInput>
+          </div>
+        </Settings.Section>
+      </Settings.Root>
     </Clipboard.Provider>
   );
 };

package/src/components/ObjectCardStack/ObjectCardStack.tsx

@@ -7,9 +7,9 @@ import React, { forwardRef } from 'react';
 import { Obj } from '@dxos/echo';
 import { Filter, useQuery, useSchema } from '@dxos/react-client/echo';
 import { Callout, Toolbar, useTranslation } from '@dxos/react-ui';
+import { Layout } from '@dxos/react-ui';
 import { useSelected } from '@dxos/react-ui-attention';
 import { Card } from '@dxos/react-ui-mosaic';
-import { Layout } from '@dxos/react-ui-mosaic';
 import { CardStack, StackItem } from '@dxos/react-ui-stack';
 import { type View, getTypenameFromQuery } from '@dxos/schema';
 import { isNonNullable } from '@dxos/util';

package/src/components/ObjectDetails/BaseObjectSettings.stories.tsx

@@ -9,7 +9,7 @@ import { type Obj, Tag } from '@dxos/echo';
 import { useClientStory, withClientProvider } from '@dxos/react-client/testing';
 import { withTheme } from '@dxos/react-ui/testing';
 import { render } from '@dxos/storybook-utils';
-import { Project } from '@dxos/types';
+import { Pipeline } from '@dxos/types';
 
 import { translations } from '../../translations';
 
@@ -21,7 +21,7 @@ const DefaultStory = () => {
 
   useEffect(() => {
     if (space && !object) {
-      const object = space.db.add(Project.make());
+      const object = space.db.add(Pipeline.make());
       setObject(object);
     }
   }, [space, object]);
@@ -38,11 +38,11 @@ const meta = {
   component: BaseObjectSettings as any,
   render: render(DefaultStory),
   decorators: [
-    withTheme,
+    withTheme(),
     withClientProvider({
       createIdentity: true,
       createSpace: true,
-      types: [Project.Project, Tag.Tag],
+      types: [Pipeline.Pipeline, Tag.Tag],
       onCreateSpace: async ({ space }) => {
         space.db.add(Tag.make({ label: 'Tag 1' }));
         space.db.add(Tag.make({ label: 'Tag 2' }));

package/src/components/ObjectDetails/ObjectDetails.tsx

@@ -4,10 +4,11 @@
 
 import React, { forwardRef, useMemo } from 'react';
 
-import { Surface, type SurfaceComponentProps } from '@dxos/app-framework/react';
+import { Surface } from '@dxos/app-framework/ui';
+import { type SurfaceComponentProps } from '@dxos/app-toolkit/ui';
 import { type Obj } from '@dxos/echo';
 import { Toolbar } from '@dxos/react-ui';
-import { Layout } from '@dxos/react-ui-mosaic';
+import { Layout } from '@dxos/react-ui';
 
 import { BaseObjectSettings } from './BaseObjectSettings';
 
@@ -18,11 +19,11 @@ export const ObjectDetails = forwardRef<HTMLDivElement, ObjectDetailsProps>(
     const data = useMemo(() => ({ subject: object }), [object]);
 
     return (
-      <Layout.Main role={role} ref={forwardedRef}>
+      <Layout.Main toolbar role={role} ref={forwardedRef}>
         <Toolbar.Root />
         <BaseObjectSettings object={object}>
-          <Surface role='base-object-settings' data={data} />
-          <Surface role='object-settings' data={data} />
+          <Surface.Surface role='base-object-settings' data={data} />
+          <Surface.Surface role='object-settings' data={data} />
           {/* TODO(wittjosiah): Remove (or add as surface)? */}
           {/* <AdvancedObjectSettings object={object} /> */}
         </BaseObjectSettings>

package/src/components/ObjectRenamePopover/ObjectRenamePopover.tsx

@@ -4,8 +4,8 @@
 
 import React, { useCallback, useRef, useState } from 'react';
 
-import { Common } from '@dxos/app-framework';
-import { useOperationInvoker } from '@dxos/app-framework/react';
+import { useOperationInvoker } from '@dxos/app-framework/ui';
+import { LayoutOperation } from '@dxos/app-toolkit';
 import { Obj } from '@dxos/echo';
 import { log } from '@dxos/log';
 import { Button, Input, useTranslation } from '@dxos/react-ui';
@@ -27,7 +27,7 @@ export const ObjectRenamePopover = ({ object }: { object: Obj.Unknown }) => {
     } catch (err) {
       log.error('Failed to rename object', { err });
     }
-    void invokePromise(Common.LayoutOperation.UpdatePopover, { anchorId: '', state: false });
+    void invokePromise(LayoutOperation.UpdatePopover, { anchorId: '', state: false });
   }, [object, name, invokePromise]);
 
   return (

package/src/components/RecordArticle.stories.tsx

@@ -5,8 +5,9 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { Capability, Common } from '@dxos/app-framework';
+import { Capabilities, Capability } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
+import { Surface } from '@dxos/app-framework/ui';
 import { Filter, Obj, Ref, Relation, type Type } from '@dxos/echo';
 import { faker } from '@dxos/random';
 import { useQuery } from '@dxos/react-client/echo';
@@ -41,12 +42,12 @@ const meta = {
   component: RecordArticle as any,
   render: render(DefaultStory),
   decorators: [
-    withTheme,
+    withTheme(),
     // TODO(wittjosiah): Try to write story which does not depend on plugin manager.
     withPluginManager({
       capabilities: [
-        Capability.contributes(Common.Capability.ReactSurface, [
-          Common.createSurface({
+        Capability.contributes(Capabilities.ReactSurface, [
+          Surface.create({
             id: 'section',
             role: 'section',
             component: ({ data }) => (
@@ -55,7 +56,7 @@ const meta = {
               </Card.Root>
             ),
           }),
-          Common.createSurface({
+          Surface.create({
             id: 'card',
             role: 'card',
             component: ({ data }) => (

package/src/components/RecordArticle.tsx

@@ -4,13 +4,13 @@
 
 import React, { useMemo } from 'react';
 
-import { Surface } from '@dxos/app-framework/react';
-import { type SurfaceComponentProps } from '@dxos/app-framework/react';
+import { Surface } from '@dxos/app-framework/ui';
+import { type SurfaceComponentProps } from '@dxos/app-toolkit/ui';
 import { type Database, Entity, Filter, Obj, Ref, Relation } from '@dxos/echo';
 import { useQuery } from '@dxos/react-client/echo';
-import { useTranslation } from '@dxos/react-ui';
+import { Layout, ScrollArea, useTranslation } from '@dxos/react-ui';
 import { Masonry } from '@dxos/react-ui-masonry';
-import { Layout, Card as MosaicCard } from '@dxos/react-ui-mosaic';
+import { Card as MosaicCard } from '@dxos/react-ui-mosaic';
 import { mx } from '@dxos/ui-theme';
 import { isNonNullable } from '@dxos/util';
 
@@ -28,23 +28,25 @@ export const RecordArticle = ({ role, subject }: SurfaceComponentProps) => {
 
   return (
     <Layout.Main role={role}>
-      <div role='none' className={mx('flex flex-col gap-4 p-4 is-full overflow-y-auto')}>
-        <div role='none' className={mx('flex is-full card-max-width')}>
-          <Surface role='section' data={data} limit={1} />
-        </div>
-
-        {related.length > 0 && (
-          <div role='none' className={mx('flex flex-col gap-1', singleColumn ? 'card-max-width' : 'is-full')}>
-            <label className='mbs-2 text-sm text-description'>{t('related objects label')}</label>
-            <Masonry.Root<Entity.Unknown>
-              items={related}
-              render={Card}
-              columnCount={singleColumn ? 1 : undefined}
-              intrinsicHeight
-            />
+      <ScrollArea.Root orientation='vertical'>
+        <ScrollArea.Viewport classNames={mx('p-4 gap-4')}>
+          <div role='none' className={mx('flex is-full card-max-width')}>
+            <Surface.Surface role='section' data={data} limit={1} />
           </div>
-        )}
-      </div>
+
+          {related.length > 0 && (
+            <div role='none' className={mx('flex flex-col gap-1', singleColumn ? 'card-max-width' : 'is-full')}>
+              <label className='mbs-2 text-sm text-description'>{t('related objects label')}</label>
+              <Masonry.Root<Entity.Unknown>
+                items={related}
+                render={Card}
+                columnCount={singleColumn ? 1 : undefined}
+                intrinsicHeight
+              />
+            </div>
+          )}
+        </ScrollArea.Viewport>
+      </ScrollArea.Root>
     </Layout.Main>
   );
 };
@@ -57,7 +59,7 @@ const Card = ({ data: subject }: { data: Entity.Unknown }) => {
         <span />
         <MosaicCard.Title>{Entity.getLabel(subject)}</MosaicCard.Title>
       </MosaicCard.Toolbar>
-      <Surface role='card--content' data={data} limit={1} />
+      <Surface.Surface role='card--content' data={data} limit={1} />
     </MosaicCard.Root>
   );
 };

package/src/components/SchemaContainer.tsx

@@ -7,33 +7,36 @@ import React, { useEffect, useState } from 'react';
 import { type Type } from '@dxos/echo';
 import { type Space } from '@dxos/react-client/echo';
 import { useTranslation } from '@dxos/react-ui';
-import { ControlPage, ControlSection, controlItemClasses } from '@dxos/react-ui-form';
-import { Layout } from '@dxos/react-ui-mosaic';
+import { Settings } from '@dxos/react-ui-form';
+import { mx } from '@dxos/ui-theme';
 
 import { meta } from '../meta';
 
 type SchemaPanelProps = { space: Space };
 
+const itemClasses = mx([
+  'container-max-width grid md:col-span-2 grid-cols-subgrid gap-trimSm items-center',
+  '*:first:!mbs-0 *:last:!mbe-0 pli-trimMd plb-trimMd',
+  'border border-separator rounded-md',
+]);
+
 export const SchemaContainer = ({ space }: SchemaPanelProps) => {
   const { t } = useTranslation(meta.id);
   const schemas = useQuerySpaceSchemas(space);
 
-  // TODO(ZaymonFC): Support deleting Schema (DangerZone section).
   return (
-    <Layout.Container scrollable>
-      <ControlPage>
-        <ControlSection title={t('schema verbose label')} description={t('schema description')}>
-          <div role='none' className={controlItemClasses}>
-            {schemas.length === 0 && <div className='text-center plb-4'>{t('no schemas found message')}</div>}
-            {schemas.map((schema) => (
-              <div role='none' key={schema.id}>
-                {schema.typename}
-              </div>
-            ))}
-          </div>
-        </ControlSection>
-      </ControlPage>
-    </Layout.Container>
+    <Settings.Root>
+      <Settings.Section title={t('schema verbose label')} description={t('schema description')}>
+        <div role='none' className={itemClasses}>
+          {schemas.length === 0 && <div className='text-center plb-4'>{t('no schemas found message')}</div>}
+          {schemas.map((schema) => (
+            <div role='none' key={schema.id}>
+              {schema.typename}
+            </div>
+          ))}
+        </div>
+      </Settings.Section>
+    </Settings.Root>
   );
 };
 

package/src/components/SpacePluginSettings.tsx

@@ -4,11 +4,11 @@
 
 import React from 'react';
 
-import { useOperationInvoker } from '@dxos/app-framework/react';
+import { useOperationInvoker } from '@dxos/app-framework/ui';
 import { useClient } from '@dxos/react-client';
 import { useSpaces } from '@dxos/react-client/echo';
 import { IconButton, Input, List, ListItem, toLocalizedString, useTranslation } from '@dxos/react-ui';
-import { ControlGroup, ControlItemInput, ControlPage, ControlSection, controlItemClasses } from '@dxos/react-ui-form';
+import { Settings } from '@dxos/react-ui-form';
 
 import { meta } from '../meta';
 import { SpaceOperation, type SpaceSettingsProps } from '../types';
@@ -26,37 +26,40 @@ export const SpacePluginSettings = ({ settings, onSettingsChange }: SpacePluginS
   const { invokePromise } = useOperationInvoker();
 
   return (
-    <ControlPage>
-      <ControlSection title={t('space settings label')} description={t('space settings description')}>
-        <ControlGroup>
-          <ControlItemInput title={t('show hidden spaces label')}>
+    <Settings.Root>
+      <Settings.Section title={t('space settings label')} description={t('space settings description')}>
+        <Settings.Group>
+          <Settings.ItemInput title={t('show hidden spaces label')}>
             <Input.Switch
               checked={settings.showHidden}
-              onCheckedChange={(checked) => onSettingsChange((s) => ({ ...s, showHidden: !!checked }))}
+              onCheckedChange={(checked) => onSettingsChange((state) => ({ ...state, showHidden: !!checked }))}
             />
-          </ControlItemInput>
-        </ControlGroup>
-        <List classNames={[controlItemClasses, 'flex flex-col gap-trimSm']}>
-          {spaces.map((space) => (
-            <ListItem.Root key={space.id} classNames='is-full items-center'>
-              {/* TODO(burdon): Should auto center and truncate; NOTE truncate doesn't work with flex grow. */}
-              <ListItem.Heading classNames='grow truncate !min-bs-0'>
-                {toLocalizedString(
-                  getSpaceDisplayName(space, {
-                    personal: space === client.spaces.default,
-                  }),
-                  t,
-                )}
-              </ListItem.Heading>
-              <IconButton
-                icon='ph--faders--regular'
-                onClick={() => invokePromise(SpaceOperation.OpenSettings, { space })}
-                label={t('open space settings label')}
-              />
-            </ListItem.Root>
-          ))}
-        </List>
-      </ControlSection>
-    </ControlPage>
+          </Settings.ItemInput>
+        </Settings.Group>
+
+        <Settings.Container>
+          <List classNames='flex flex-col gap-trimSm'>
+            {spaces.map((space) => (
+              <ListItem.Root key={space.id} classNames='is-full items-center'>
+                {/* TODO(burdon): Should auto center and truncate; NOTE truncate doesn't work with flex grow. */}
+                <ListItem.Heading classNames='grow truncate !min-bs-0'>
+                  {toLocalizedString(
+                    getSpaceDisplayName(space, {
+                      personal: space === client.spaces.default,
+                    }),
+                    t,
+                  )}
+                </ListItem.Heading>
+                <IconButton
+                  icon='ph--faders--regular'
+                  onClick={() => invokePromise(SpaceOperation.OpenSettings, { space })}
+                  label={t('open space settings label')}
+                />
+              </ListItem.Root>
+            ))}
+          </List>
+        </Settings.Container>
+      </Settings.Section>
+    </Settings.Root>
   );
 };

package/src/components/SpacePresence/SpacePresence.stories.tsx

@@ -24,7 +24,7 @@ const viewers = (n: number, currentlyAttended = true): Member[] =>
 
 const meta = {
   title: 'plugins/plugin-space/SpacePresence',
-  decorators: [withTheme],
+  decorators: [withTheme()],
   parameters: {
     translations,
   },

package/src/components/SpacePresence/SpacePresence.tsx

@@ -5,7 +5,8 @@
 import * as Option from 'effect/Option';
 import React, { forwardRef, useCallback, useEffect, useState } from 'react';
 
-import { useAppGraph, useAtomCapability } from '@dxos/app-framework/react';
+import { useAtomCapability } from '@dxos/app-framework/ui';
+import { useAppGraph } from '@dxos/app-toolkit/ui';
 import { generateName } from '@dxos/display-name';
 import { type Key, Obj } from '@dxos/echo';
 import { PublicKey } from '@dxos/react-client';

package/src/components/SpaceRenamePopover/SpaceRenamePopover.tsx

@@ -4,8 +4,8 @@
 
 import React, { useCallback, useRef, useState } from 'react';
 
-import { Common } from '@dxos/app-framework';
-import { useOperationInvoker } from '@dxos/app-framework/react';
+import { useOperationInvoker } from '@dxos/app-framework/ui';
+import { LayoutOperation } from '@dxos/app-toolkit';
 import { type Space } from '@dxos/client/echo';
 import { Obj } from '@dxos/echo';
 import { Button, Input, Popover, useTranslation } from '@dxos/react-ui';
@@ -25,7 +25,7 @@ export const SpaceRenamePopover = ({ space }: { space: Space }) => {
     Obj.change(space.properties, (p) => {
       p.name = name;
     });
-    void invokePromise(Common.LayoutOperation.UpdatePopover, { anchorId: '', state: false });
+    void invokePromise(LayoutOperation.UpdatePopover, { anchorId: '', state: false });
   }, [space, name, invokePromise]);
 
   // TODO(thure): Why does the input value need to be uncontrolled to work?

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

@@ -28,7 +28,7 @@ const meta = {
   component: SpaceSettingsContainer,
   render: Story,
   decorators: [
-    withTheme,
+    withTheme(),
     withClientProvider({ createIdentity: true, createSpace: true }),
     // TODO(wittjosiah): Try to write story which does not depend on plugin manager.
     withPluginManager({ plugins: [OperationPlugin()] }),