@dxos/plugin-client 0.8.4-main.69d29f4 → 0.8.4-main.6fa680abb7

package/src/components/index.ts

@@ -1,10 +1,3 @@
 //
 // Copyright 2024 DXOS.org
 //
-
-export * from './DevicesContainer';
-export * from './JoinDialog';
-export * from './ProfileContainer';
-export * from './RecoveryCodeDialog';
-export * from './RecoveryCredentialsContainer';
-export * from './ResetDialog';

package/src/constants.ts

@@ -4,6 +4,6 @@
 
 import { meta } from './meta';
 
-export const JOIN_DIALOG = `${meta.id}/JoinDialog`;
-export const RECOVERY_CODE_DIALOG = `${meta.id}/RecoveryCodeDialog`;
-export const RESET_DIALOG = `${meta.id}/ResetDialog`;
+export const JOIN_DIALOG = `${meta.id}.JoinDialog`;
+export const RECOVERY_CODE_DIALOG = `${meta.id}.RecoveryCodeDialog`;
+export const RESET_DIALOG = `${meta.id}.ResetDialog`;

package/src/{components → containers/DevicesContainer}/DevicesContainer.stories.tsx

@@ -5,21 +5,22 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import * as Effect from 'effect/Effect';
 
-import { OperationPlugin } from '@dxos/app-framework';
+import { OperationPlugin, RuntimePlugin } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
-import { withTheme } from '@dxos/react-ui/testing';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { translations as shellTranslations } from '@dxos/shell/react';
 
-import { ClientPlugin } from '../ClientPlugin';
-import { translations } from '../translations';
+import { ClientPlugin } from '../../ClientPlugin';
+import { translations } from '../../translations';
 
 import { DevicesContainer } from './DevicesContainer';
 
 const meta = {
-  title: 'plugins/plugin-client/DevicesContainer',
+  title: 'plugins/plugin-client/containers/DevicesContainer',
   component: DevicesContainer,
   decorators: [
-    withTheme,
+    withTheme(),
+    withLayout({ layout: 'fullscreen' }),
     withPluginManager({
       plugins: [
         ClientPlugin({
@@ -29,6 +30,7 @@ const meta = {
             }),
         }),
         OperationPlugin(),
+        RuntimePlugin(),
       ],
     }),
   ],

package/src/{components → containers/DevicesContainer}/DevicesContainer.tsx

@@ -5,28 +5,20 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { QR } from 'react-qr-rounded';
 
-import { useOperationInvoker } from '@dxos/app-framework/react';
+import { useOperationInvoker } from '@dxos/app-framework/ui';
 import { log } from '@dxos/log';
 import { useClient, useMulticastObservable } from '@dxos/react-client';
 import { type Device, useDevices } from '@dxos/react-client/halo';
 import { type CancellableInvitationObservable, Invitation, InvitationEncoder } from '@dxos/react-client/invitations';
 import { useNetworkStatus } from '@dxos/react-client/mesh';
 import { Button, Clipboard, Icon, IconButton, List, useId, useTranslation } from '@dxos/react-ui';
-import {
-  ControlFrame,
-  ControlFrameItem,
-  ControlGroup,
-  ControlItem,
-  ControlPage,
-  ControlSection,
-} from '@dxos/react-ui-form';
-import { translationKey } from '@dxos/shell/react';
-import { AuthCode, Centered, DeviceListItem, Emoji, Viewport } from '@dxos/shell/react';
+import { Settings } from '@dxos/react-ui-form';
+import { AuthCode, Centered, DeviceListItem, Emoji, Viewport, translationKey } from '@dxos/shell/react';
 import { osTranslations } from '@dxos/ui-theme';
 import { hexToEmoji } from '@dxos/util';
 
-import { meta } from '../meta';
-import { ClientOperation } from '../types';
+import { meta } from '../../meta';
+import { ClientOperation } from '../../types';
 
 export type DevicesContainerProps = {
   createInvitationUrl?: (invitationCode: string) => string;
@@ -52,57 +44,55 @@ export const DevicesContainer = ({ createInvitationUrl }: DevicesContainerProps)
 
   return (
     <Clipboard.Provider>
-      <ControlPage>
-        <ControlSection
+      <Settings.Root>
+        <Settings.Section
           title={t('devices verbose label', { ns: meta.id })}
           description={t('devices description', { ns: meta.id })}
         >
-          <ControlFrame>
-            <ControlFrameItem title={t('devices label', { ns: meta.id })}>
+          <Settings.Frame>
+            <Settings.FrameItem title={t('devices label', { ns: meta.id })}>
               <List>
-                {devices.map((device: Device) => {
-                  return (
-                    <DeviceListItem key={device.deviceKey.toHex()} device={device} connectionState={connectionState} />
-                  );
-                })}
+                {devices.map((device: Device) => (
+                  <DeviceListItem key={device.deviceKey.toHex()} device={device} connectionState={connectionState} />
+                ))}
               </List>
-            </ControlFrameItem>
+            </Settings.FrameItem>
             {createInvitationUrl && (
-              <ControlFrameItem title='Add device'>
+              <Settings.FrameItem title='Add device'>
                 <DeviceInvitation createInvitationUrl={createInvitationUrl} />
-              </ControlFrameItem>
+              </Settings.FrameItem>
             )}
-          </ControlFrame>
-        </ControlSection>
-        <ControlSection
+          </Settings.Frame>
+        </Settings.Section>
+        <Settings.Section
           title={t('danger zone title', { ns: meta.id })}
           description={t('danger zone description', { ns: meta.id })}
         >
-          <ControlGroup>
-            <ControlItem title={t('reset device label')} description={t('reset device description', { ns: meta.id })}>
+          <Settings.Group>
+            <Settings.Item title={t('reset device label')} description={t('reset device description', { ns: meta.id })}>
               <Button variant='destructive' onClick={handleResetStorage} data-testid='devicesContainer.reset'>
                 {t('reset device label')}
               </Button>
-            </ControlItem>
-            <ControlItem
+            </Settings.Item>
+            <Settings.Item
               title={t('recover identity label')}
               description={t('recover identity description', { ns: meta.id })}
             >
               <Button variant='destructive' onClick={handleRecover} data-testid='devicesContainer.recover'>
                 {t('recover identity label')}
               </Button>
-            </ControlItem>
-            <ControlItem
+            </Settings.Item>
+            <Settings.Item
               title={t('join new identity label')}
               description={t('join new identity description', { ns: meta.id })}
             >
               <Button variant='destructive' onClick={handleJoinNewIdentity} data-testid='devicesContainer.joinExisting'>
                 {t('join new identity label')}
               </Button>
-            </ControlItem>
-          </ControlGroup>
-        </ControlSection>
-      </ControlPage>
+            </Settings.Item>
+          </Settings.Group>
+        </Settings.Section>
+      </Settings.Root>
     </Clipboard.Provider>
   );
 };
@@ -188,12 +178,12 @@ const InvitationSection = ({
           : 'qr-code';
   return activeView === 'init' ? (
     <>
-      <p className='text-description mbe-2'>{t('add device description')}</p>
+      <p className='text-description mb-2'>{t('add device description')}</p>
       <IconButton
         icon='ph--plus--regular'
         label={t('create device invitation label')}
         disabled={state >= 0}
-        classNames='is-full'
+        classNames='w-full'
         data-testid='devicesContainer.createInvitation'
         onClick={onInvitationCreate}
       />
@@ -225,21 +215,23 @@ const InvitationQR = ({ id, url, onCancel }: { id: string; url: string; onCancel
   return (
     <>
       <p className='text-description'>{t('qr code description', { ns: meta.id })}</p>
-      <div role='group' className='grid grid-cols-[1fr_min-content] mlb-2 gap-2'>
-        <div role='none' className='is-full aspect-square relative text-description'>
-          <QR
-            rounding={100}
-            backgroundColor='transparent'
-            color='currentColor'
-            aria-labelledby={qrLabel}
-            errorCorrectionLevel='Q'
-            cutout={true}
-          >
-            {url ?? 'never'}
-          </QR>
-          <Centered>
-            <Emoji text={emoji} />
-          </Centered>
+      <div role='group' className='grid grid-cols-[1fr_min-content]'>
+        <div className='flex justify-center py-4'>
+          <div role='none' className='w-full md:max-w-80 aspect-square relative text-description'>
+            <QR
+              rounding={100}
+              backgroundColor='transparent'
+              color='currentColor'
+              aria-labelledby={qrLabel}
+              errorCorrectionLevel='Q'
+              cutout={true}
+            >
+              {url ?? 'never'}
+            </QR>
+            <Centered>
+              <Emoji text={emoji} />
+            </Centered>
+          </div>
         </div>
         <span id={qrLabel} className='sr-only'>
           {t('qr label')}
@@ -265,9 +257,9 @@ const InvitationAuthCode = ({ id, code, onCancel }: { id: string; code: string;
   return (
     <>
       <p className='text-description'>{t('auth other device emoji message')}</p>
-      {emoji && <Emoji text={emoji} className='mli-auto mlb-2 text-center' />}
+      {emoji && <Emoji text={emoji} className='mx-auto my-2 text-center' />}
       <p className='text-description'>{t('auth code message')}</p>
-      <AuthCode code={code} large classNames='mli-auto mlb-2 text-center grow' />
+      <AuthCode code={code} large classNames='mx-auto my-2 text-center grow' />
       <Button variant='ghost' onClick={onCancel}>
         {t('cancel label')}
       </Button>

package/src/containers/DevicesContainer/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { DevicesContainer } from './DevicesContainer';
+
+export default DevicesContainer;

package/src/{components → containers/JoinDialog}/JoinDialog.tsx

@@ -4,16 +4,16 @@
 
 import React, { useCallback } 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 { ObservabilityOperation } from '@dxos/plugin-observability/types';
 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';
-import { ClientOperation } from '../types';
+import { meta } from '../../meta';
+import { ClientOperation } from '../../types';
 
 export const JoinDialog = (props: JoinPanelProps) => {
   const { invokePromise } = useOperationInvoker();
@@ -25,7 +25,7 @@ export const JoinDialog = (props: JoinPanelProps) => {
     async (result: InvitationResult | null) => {
       if (result?.identityKey) {
         await Promise.all([
-          invokePromise(Common.LayoutOperation.UpdateDialog, { state: false }),
+          invokePromise(LayoutOperation.UpdateDialog, { state: false }),
           invokePromise(ObservabilityOperation.SendEvent, {
             name: props.initialDisposition === 'recover-identity' ? 'identity.recover' : 'identity.join',
           }),
@@ -37,7 +37,9 @@ export const JoinDialog = (props: JoinPanelProps) => {
 
   return (
     <Dialog.Content>
-      <Dialog.Title classNames='sr-only'>{t('join space label', { ns: osTranslations })}</Dialog.Title>
+      <Dialog.Header>
+        <Dialog.Title classNames='sr-only'>{t('join space label', { ns: osTranslations })}</Dialog.Title>
+      </Dialog.Header>
       <JoinPanel
         mode='halo-only'
         {...props}

package/src/containers/JoinDialog/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { JoinDialog } from './JoinDialog';
+
+export default JoinDialog;

package/src/{components → containers/ProfileContainer}/ProfileContainer.stories.tsx

@@ -5,16 +5,16 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 
 import { withClientProvider } from '@dxos/react-client/testing';
-import { withTheme } from '@dxos/react-ui/testing';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 
-import { translations } from '../translations';
+import { translations } from '../../translations';
 
 import { ProfileContainer } from './ProfileContainer';
 
 const meta = {
-  title: 'plugins/plugin-client/ProfileContainer',
+  title: 'plugins/plugin-client/containers/ProfileContainer',
   component: ProfileContainer,
-  decorators: [withTheme, withClientProvider({ createIdentity: true })],
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' }), withClientProvider({ createIdentity: true })],
   parameters: {
     layout: 'fullscreen',
     translations,

package/src/{components → containers/ProfileContainer}/ProfileContainer.tsx

@@ -9,19 +9,11 @@ import { debounce } from '@dxos/async';
 import { useClient } from '@dxos/react-client';
 import { type Identity, useIdentity } from '@dxos/react-client/halo';
 import { ButtonGroup, Clipboard, Input, useTranslation } from '@dxos/react-ui';
-import {
-  ControlItem,
-  ControlItemInput,
-  ControlPage,
-  ControlSection,
-  Form,
-  type FormFieldMap,
-  type FormUpdateMeta,
-} from '@dxos/react-ui-form';
+import { Form, type FormFieldMap, type FormUpdateMeta, Settings } from '@dxos/react-ui-form';
 import { EmojiPickerBlock, HuePicker } from '@dxos/react-ui-pickers';
 import { hexToEmoji, hexToHue } from '@dxos/util';
 
-import { meta } from '../meta';
+import { meta } from '../../meta';
 
 // TOOD(burdon): Factor out?
 // TODO(wittjosiah): Integrate annotations with translations.
@@ -109,14 +101,14 @@ export const ProfileContainer = () => {
         );
 
         return (
-          <ControlItemInput title={label} description={t('display name description')}>
+          <Settings.ItemInput title={label} description={t('display name description')}>
             <Input.TextInput
               value={getValue()}
               onChange={handleChange}
               placeholder={t('display name input placeholder')}
-              classNames='min-is-64'
+              classNames='min-w-64'
             />
-          </ControlItemInput>
+          </Settings.ItemInput>
         );
       },
       emoji: ({ type, label, getValue, onValueChange }) => {
@@ -127,7 +119,7 @@ export const ProfileContainer = () => {
         );
 
         return (
-          <ControlItem title={label} description={t('icon description')}>
+          <Settings.Item title={label} description={t('icon description')}>
             <EmojiPickerBlock
               triggerVariant='default'
               emoji={getValue()}
@@ -135,7 +127,7 @@ export const ProfileContainer = () => {
               onClickClear={handleEmojiReset}
               classNames='justify-self-end'
             />
-          </ControlItem>
+          </Settings.Item>
         );
       },
       hue: ({ type, label, getValue, onValueChange }) => {
@@ -146,22 +138,22 @@ export const ProfileContainer = () => {
         );
 
         return (
-          <ControlItem title={label} description={t('hue description')}>
+          <Settings.Item title={label} description={t('hue description')}>
             <div role='none' className='flex justify-self-end'>
               <HuePicker value={getValue()} onChange={handleChange} onReset={handleHueReset} />
             </div>
-          </ControlItem>
+          </Settings.Item>
         );
       },
       // TODO(wittjosiah): We need text input annotations for disabled and copyable.
       did: ({ label, getValue }) => {
         return (
-          <ControlItemInput title={label} description={t('did description')}>
-            <ButtonGroup>
-              <Input.TextInput value={getValue()} disabled classNames='min-is-64' />
+          <Settings.ItemInput title={label} description={t('did description')}>
+            <ButtonGroup classNames='w-full'>
+              <Input.TextInput value={getValue()} disabled classNames='min-w-64' />
               <Clipboard.IconButton value={getValue() ?? ''} />
             </ButtonGroup>
-          </ControlItemInput>
+          </Settings.ItemInput>
         );
       },
     }),
@@ -169,16 +161,16 @@ export const ProfileContainer = () => {
   );
 
   return (
-    <ControlPage>
-      <Clipboard.Provider>
-        <ControlSection title={t('profile label')} description={t('profile description')}>
+    <Clipboard.Provider>
+      <Settings.Root>
+        <Settings.Section title={t('profile label')} description={t('profile description')}>
           <Form.Root schema={UserProfile} values={values} fieldMap={fieldMap} onValuesChanged={handleChange}>
             <Form.Content>
-              <Form.FieldSet classNames='container-max-width grid grid-cols-1 md:grid-cols-[1fr_min-content]' />
+              <Form.FieldSet />
             </Form.Content>
           </Form.Root>
-        </ControlSection>
-      </Clipboard.Provider>
-    </ControlPage>
+        </Settings.Section>
+      </Settings.Root>
+    </Clipboard.Provider>
   );
 };

package/src/containers/ProfileContainer/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { ProfileContainer } from './ProfileContainer';
+
+export default ProfileContainer;

package/src/{components → containers/RecoveryCodeDialog}/RecoveryCodeDialog.stories.tsx

@@ -8,9 +8,9 @@ import React, { useState } from 'react';
 import { useClient } from '@dxos/react-client';
 import { withClientProvider } from '@dxos/react-client/testing';
 import { AlertDialog, useAsyncEffect } from '@dxos/react-ui';
-import { withTheme } from '@dxos/react-ui/testing';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 
-import { translations } from '../translations';
+import { translations } from '../../translations';
 
 import { RecoveryCodeDialog } from './RecoveryCodeDialog';
 
@@ -32,10 +32,10 @@ const DefaultStory = () => {
 };
 
 const meta = {
-  title: 'plugins/plugin-client/RecoveryCodeDialog',
+  title: 'plugins/plugin-client/containers/RecoveryCodeDialog',
   component: RecoveryCodeDialog as any,
   render: DefaultStory,
-  decorators: [withTheme, withClientProvider({ createIdentity: true })],
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' }), withClientProvider({ createIdentity: true })],
   parameters: {
     layout: 'fullscreen',
     translations,

package/src/{components → containers/RecoveryCodeDialog}/RecoveryCodeDialog.tsx

@@ -6,12 +6,13 @@ import React, { useCallback, useState } from 'react';
 
 import { AlertDialog, Button, Clipboard, Input, useTranslation } from '@dxos/react-ui';
 
-import { meta } from '../meta';
+import { meta } from '../../meta';
 
 export type RecoveryCodeDialogProps = {
   code: string;
 };
 
+// TODO(burdon): Should have cancel button.
 export const RecoveryCodeDialog = ({ code }: RecoveryCodeDialogProps) => {
   const { t } = useTranslation(meta.id);
   const [confirmation, setConfirmation] = useState(false);
@@ -19,33 +20,35 @@ export const RecoveryCodeDialog = ({ code }: RecoveryCodeDialogProps) => {
   const handleConfirmation = useCallback((checked: boolean) => setConfirmation(checked), []);
 
   return (
-    <AlertDialog.Content classNames='bs-content min-bs-[15rem] max-bs-full md:max-is-[40rem] overflow-hidden'>
-      <AlertDialog.Title>{t('recovery code dialog title')}</AlertDialog.Title>
-      <p className='plb-4'>{t('recovery code dialog description')}</p>
-      <Clipboard.Provider>
-        <Code code={code} />
-      </Clipboard.Provider>
-      <div className='flex flex-col plb-4 gap-2'>
-        <p>{t('recovery code dialog warning 1')}</p>
-        <p>{t('recovery code dialog warning 2')}</p>
-      </div>
-      <div className='flex items-center gap-2 pbe-4'>
-        <Input.Root>
-          <Input.Checkbox
-            data-testid='recoveryCode.confirm'
-            checked={confirmation}
-            onCheckedChange={handleConfirmation}
-          />
-          <Input.Label>{t('recovery code confirmation label')}</Input.Label>
-        </Input.Root>
-      </div>
-      <div className='flex justify-end'>
+    <AlertDialog.Content size='md' classNames='min-h-[15rem]'>
+      <AlertDialog.Body>
+        <AlertDialog.Title>{t('recovery code dialog title')}</AlertDialog.Title>
+        <p className='py-4'>{t('recovery code dialog description')}</p>
+        <Clipboard.Provider>
+          <Code code={code} />
+        </Clipboard.Provider>
+        <div className='flex flex-col py-4 gap-2'>
+          <p>{t('recovery code dialog warning 1')}</p>
+          <p>{t('recovery code dialog warning 2')}</p>
+        </div>
+        <div className='flex items-center gap-2 pb-4'>
+          <Input.Root>
+            <Input.Checkbox
+              data-testid='recoveryCode.confirm'
+              checked={confirmation}
+              onCheckedChange={handleConfirmation}
+            />
+            <Input.Label>{t('recovery code confirmation label')}</Input.Label>
+          </Input.Root>
+        </div>
+      </AlertDialog.Body>
+      <AlertDialog.ActionBar>
         <AlertDialog.Action asChild>
           <Button data-testid='recoveryCode.continue' variant='primary' disabled={!confirmation}>
             {t('continue label')}
           </Button>
         </AlertDialog.Action>
-      </div>
+      </AlertDialog.ActionBar>
     </AlertDialog.Content>
   );
 };
@@ -53,12 +56,12 @@ export const RecoveryCodeDialog = ({ code }: RecoveryCodeDialogProps) => {
 const Code = ({ code }: { code: string }) => {
   const words = code.split(' ');
   return (
-    <div className='relative p-2 border border-separator rounded group'>
+    <div className='relative p-2 border border-separator rounded-sm group'>
       <Clipboard.IconButton value={code} classNames='absolute top-2 right-2 invisible group-hover:visible' />
       <div className='grid grid-cols-4'>
         {words.map((word, i) => (
           <div key={i} className='flex items-center p-2 gap-2'>
-            <div className='is-4 text-xs text-center text-subdued'>{i + 1}</div>
+            <div className='w-4 text-xs text-center text-subdued'>{i + 1}</div>
             <div className='text-sm'>{word}</div>
           </div>
         ))}

package/src/containers/RecoveryCodeDialog/index.ts

@@ -0,0 +1,8 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { RecoveryCodeDialog } from './RecoveryCodeDialog';
+
+export * from './RecoveryCodeDialog';
+export default RecoveryCodeDialog;

package/src/{components → containers/RecoveryCredentialsContainer}/RecoveryCredentialsContainer.stories.tsx

@@ -5,20 +5,21 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import * as Effect from 'effect/Effect';
 
-import { OperationPlugin } from '@dxos/app-framework';
+import { OperationPlugin, RuntimePlugin } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
-import { withTheme } from '@dxos/react-ui/testing';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 
-import { ClientPlugin } from '../ClientPlugin';
-import { translations } from '../translations';
+import { ClientPlugin } from '../../ClientPlugin';
+import { translations } from '../../translations';
 
 import { RecoveryCredentialsContainer } from './RecoveryCredentialsContainer';
 
 const meta = {
-  title: 'plugins/plugin-client/RecoveryCredentialsContainer',
+  title: 'plugins/plugin-client/containers/RecoveryCredentialsContainer',
   component: RecoveryCredentialsContainer,
   decorators: [
-    withTheme,
+    withTheme(),
+    withLayout({ layout: 'fullscreen' }),
     withPluginManager({
       plugins: [
         ClientPlugin({
@@ -28,6 +29,7 @@ const meta = {
             }),
         }),
         OperationPlugin(),
+        RuntimePlugin(),
       ],
     }),
   ],