@dxos/plugin-client 0.8.4-main.f9ba587 → 0.8.4-main.fffef41

package/src/components/DevicesContainer.tsx

@@ -2,17 +2,17 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Check, X } from '@phosphor-icons/react';
 import React, { useCallback, useEffect, useState } from 'react';
 import { QR } from 'react-qr-rounded';
 
-import { createIntent, useIntentDispatcher } from '@dxos/app-framework';
+import { createIntent } from '@dxos/app-framework';
+import { useIntentDispatcher } from '@dxos/app-framework/react';
 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, IconButton, List, useId, useTranslation } from '@dxos/react-ui';
+import { Button, Clipboard, Icon, IconButton, List, useId, useTranslation } from '@dxos/react-ui';
 import {
   ControlFrame,
   ControlFrameItem,
@@ -21,12 +21,10 @@ import {
   ControlPage,
   ControlSection,
 } from '@dxos/react-ui-form';
-import { StackItem } from '@dxos/react-ui-stack';
-import { getSize, mx } from '@dxos/react-ui-theme';
 import { AuthCode, Centered, DeviceListItem, Emoji, Viewport } from '@dxos/shell/react';
 import { hexToEmoji } from '@dxos/util';
 
-import { CLIENT_PLUGIN } from '../meta';
+import { meta } from '../meta';
 import { ClientAction } from '../types';
 
 export type DevicesContainerProps = {
@@ -53,70 +51,57 @@ export const DevicesContainer = ({ createInvitationUrl }: DevicesContainerProps)
 
   return (
     <Clipboard.Provider>
-      <StackItem.Content classNames='block overflow-y-auto'>
-        <ControlPage>
-          <ControlSection
-            title={t('devices verbose label', { ns: CLIENT_PLUGIN })}
-            description={t('devices description', { ns: CLIENT_PLUGIN })}
-          >
-            <ControlFrame>
-              <ControlFrameItem title={t('devices label', { ns: CLIENT_PLUGIN })}>
-                <List>
-                  {devices.map((device: Device) => {
-                    return (
-                      <DeviceListItem
-                        key={device.deviceKey.toHex()}
-                        device={device}
-                        connectionState={connectionState}
-                      />
-                    );
-                  })}
-                </List>
+      <ControlPage>
+        <ControlSection
+          title={t('devices verbose label', { ns: meta.id })}
+          description={t('devices description', { ns: meta.id })}
+        >
+          <ControlFrame>
+            <ControlFrameItem title={t('devices label', { ns: meta.id })}>
+              <List>
+                {devices.map((device: Device) => {
+                  return (
+                    <DeviceListItem key={device.deviceKey.toHex()} device={device} connectionState={connectionState} />
+                  );
+                })}
+              </List>
+            </ControlFrameItem>
+            {createInvitationUrl && (
+              <ControlFrameItem title='Add device'>
+                <DeviceInvitation createInvitationUrl={createInvitationUrl} />
               </ControlFrameItem>
-              {createInvitationUrl && (
-                <ControlFrameItem title='Add device'>
-                  <DeviceInvitation createInvitationUrl={createInvitationUrl} />
-                </ControlFrameItem>
-              )}
-            </ControlFrame>
-          </ControlSection>
-          <ControlSection
-            title={t('danger zone title', { ns: CLIENT_PLUGIN })}
-            description={t('danger zone description', { ns: CLIENT_PLUGIN })}
-          >
-            <ControlGroup>
-              <ControlItem
-                title={t('reset device label')}
-                description={t('reset device description', { ns: CLIENT_PLUGIN })}
-              >
-                <Button variant='destructive' onClick={handleResetStorage} data-testid='devicesContainer.reset'>
-                  {t('reset device label')}
-                </Button>
-              </ControlItem>
-              <ControlItem
-                title={t('recover identity label')}
-                description={t('recover identity description', { ns: CLIENT_PLUGIN })}
-              >
-                <Button variant='destructive' onClick={handleRecover} data-testid='devicesContainer.recover'>
-                  {t('recover identity label')}
-                </Button>
-              </ControlItem>
-              <ControlItem
-                title={t('join new identity label')}
-                description={t('join new identity description', { ns: CLIENT_PLUGIN })}
-              >
-                <Button
-                  variant='destructive'
-                  onClick={handleJoinNewIdentity}
-                  data-testid='devicesContainer.joinExisting'
-                >
-                  {t('join new identity label')}
-                </Button>
-              </ControlItem>
-            </ControlGroup>
-          </ControlSection>
-        </ControlPage>
-      </StackItem.Content>
+            )}
+          </ControlFrame>
+        </ControlSection>
+        <ControlSection
+          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 })}>
+              <Button variant='destructive' onClick={handleResetStorage} data-testid='devicesContainer.reset'>
+                {t('reset device label')}
+              </Button>
+            </ControlItem>
+            <ControlItem
+              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
+              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>
     </Clipboard.Provider>
   );
 };
@@ -191,7 +176,7 @@ const InvitationSection = ({
   onInvitationDone = () => {},
   onInvitationCreate = () => {},
 }: InvitationComponentProps) => {
-  const { t } = useTranslation(CLIENT_PLUGIN);
+  const { t } = useTranslation(meta.id);
   const activeView =
     state < 0
       ? 'init'
@@ -238,7 +223,7 @@ const InvitationQR = ({ id, url, onCancel }: { id: string; url: string; onCancel
   const emoji = hexToEmoji(id);
   return (
     <>
-      <p className='text-description'>{t('qr code description', { ns: CLIENT_PLUGIN })}</p>
+      <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
@@ -290,5 +275,9 @@ const InvitationAuthCode = ({ id, code, onCancel }: { id: string; code: string;
 };
 
 const InvitationComplete = ({ statusValue }: { statusValue: number }) => {
-  return statusValue > 0 ? <Check className={mx('m-1.5', getSize(6))} /> : <X className={mx('m-1.5', getSize(6))} />;
+  return statusValue > 0 ? (
+    <Icon icon='ph--check--regular' size={6} classNames='m-1.5' />
+  ) : (
+    <Icon icon='ph--x--regular' size={6} classNames='m-1.5' />
+  );
 };

package/src/components/JoinDialog.tsx

@@ -4,20 +4,21 @@
 
 import React, { useCallback } from 'react';
 
-import { createIntent, LayoutAction, useIntentDispatcher } from '@dxos/app-framework';
+import { LayoutAction, createIntent } from '@dxos/app-framework';
+import { useIntentDispatcher } from '@dxos/app-framework/react';
 import { ObservabilityAction } 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 { CLIENT_PLUGIN } from '../meta';
+import { meta } from '../meta';
 import { ClientAction } from '../types';
 
-export const JOIN_DIALOG = `${CLIENT_PLUGIN}/JoinDialog`;
+export const JOIN_DIALOG = `${meta.id}/JoinDialog`;
 
 export const JoinDialog = (props: JoinPanelProps) => {
   const { dispatchPromise: dispatch } = useIntentDispatcher();
-  const { t } = useTranslation(CLIENT_PLUGIN);
+  const { t } = useTranslation(meta.id);
 
   const handleCancelResetStorage = useCallback(() => dispatch(createIntent(ClientAction.ShareIdentity)), [dispatch]);
 

package/src/components/ProfileContainer.stories.tsx

@@ -2,28 +2,27 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
-import { type StoryObj, type Meta } from '@storybook/react-vite';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 
 import { withClientProvider } from '@dxos/react-client/testing';
-import { withTheme, withLayout } from '@dxos/storybook-utils';
+import { withTheme } from '@dxos/react-ui/testing';
 
-import { ProfileContainer } from './ProfileContainer';
 import { translations } from '../translations';
 
-const meta: Meta = {
+import { ProfileContainer } from './ProfileContainer';
+
+const meta = {
   title: 'plugins/plugin-client/ProfileContainer',
   component: ProfileContainer,
-  decorators: [withClientProvider({ createIdentity: true }), withTheme, withLayout()],
+  decorators: [withTheme, withClientProvider({ createIdentity: true })],
   parameters: {
     layout: 'fullscreen',
     translations,
   },
-};
+} satisfies Meta<typeof ProfileContainer>;
 
 export default meta;
 
-type Story = StoryObj<typeof ProfileContainer>;
+type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {};

package/src/components/ProfileContainer.tsx

@@ -2,7 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Schema } from 'effect';
+import * as Schema from 'effect/Schema';
 import React, { type ChangeEvent, useCallback, useMemo, useState } from 'react';
 
 import { debounce } from '@dxos/async';
@@ -10,18 +10,17 @@ 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 {
-  Form,
-  type InputComponent,
   ControlItem,
   ControlItemInput,
-  ControlSection,
   ControlPage,
+  ControlSection,
+  Form,
+  type InputComponent,
 } from '@dxos/react-ui-form';
 import { EmojiPickerBlock, HuePicker } from '@dxos/react-ui-pickers';
-import { StackItem } from '@dxos/react-ui-stack';
-import { hexToHue, hexToEmoji } from '@dxos/util';
+import { hexToEmoji, hexToHue } from '@dxos/util';
 
-import { CLIENT_PLUGIN } from '../meta';
+import { meta } from '../meta';
 
 // TODO(thure): Factor out?
 const getDefaultHueValue = (identity: Identity | null) => hexToHue(identity?.identityKey.toHex() ?? '0');
@@ -30,7 +29,7 @@ const getHueValue = (identity: Identity | null) => identity?.profile?.data?.hue
 const getEmojiValue = (identity: Identity | null) => identity?.profile?.data?.emoji || getDefaultEmojiValue(identity);
 
 export const ProfileContainer = () => {
-  const { t } = useTranslation(CLIENT_PLUGIN);
+  const { t } = useTranslation(meta.id);
   const client = useClient();
   const identity = useIdentity();
   const [displayName, setDisplayNameDirectly] = useState(identity?.profile?.displayName ?? '');
@@ -58,7 +57,7 @@ export const ProfileContainer = () => {
       setDisplayNameDirectly(profile.displayName);
       setEmojiDirectly(profile.emoji);
       setHueDirectly(profile.hue);
-      updateProfile(profile);
+      void updateProfile(profile);
     },
     [identity],
   );
@@ -118,12 +117,7 @@ export const ProfileContainer = () => {
         );
         return (
           <ControlItem title={label} description={t('hue description')}>
-            <HuePicker
-              value={getValue()}
-              onChange={handleChange}
-              onReset={handleHueReset}
-              classNames='[--hue-preview-size:1.5rem] justify-self-end'
-            />
+            <HuePicker value={getValue()} onChange={handleChange} onReset={handleHueReset} />
           </ControlItem>
         );
       },
@@ -143,23 +137,21 @@ export const ProfileContainer = () => {
   );
 
   return (
-    <StackItem.Content classNames='block overflow-y-auto'>
-      <ControlPage>
-        <Clipboard.Provider>
-          <ControlSection title={t('profile label')} description={t('profile description')}>
-            <Form
-              schema={ProfileSchema}
-              values={values}
-              autoSave
-              onSave={handleSave}
-              Custom={customElements}
-              classNames='container-max-width grid grid-cols-1 md:grid-cols-[1fr_min-content] gap-4'
-              outerSpacing={false}
-            />
-          </ControlSection>
-        </Clipboard.Provider>
-      </ControlPage>
-    </StackItem.Content>
+    <ControlPage>
+      <Clipboard.Provider>
+        <ControlSection title={t('profile label')} description={t('profile description')}>
+          <Form
+            schema={ProfileSchema}
+            values={values}
+            autoSave
+            onSave={handleSave}
+            Custom={customElements}
+            classNames='container-max-width grid grid-cols-1 md:grid-cols-[1fr_min-content]'
+            outerSpacing={false}
+          />
+        </ControlSection>
+      </Clipboard.Provider>
+    </ControlPage>
   );
 };
 

package/src/components/RecoveryCodeDialog.stories.tsx

@@ -2,19 +2,18 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
-import { type StoryObj, type Meta } from '@storybook/react-vite';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 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, withLayout } from '@dxos/storybook-utils';
+import { withTheme } from '@dxos/react-ui/testing';
 
-import { RecoveryCodeDialog, type RecoveryCodeDialogProps } from './RecoveryCodeDialog';
 import { translations } from '../translations';
 
+import { RecoveryCodeDialog } from './RecoveryCodeDialog';
+
 const DefaultStory = () => {
   const client = useClient();
   const [recoveryCode, setRecoveryCode] = useState<string>();
@@ -32,19 +31,19 @@ const DefaultStory = () => {
   );
 };
 
-const meta: Meta<RecoveryCodeDialogProps> = {
+const meta = {
   title: 'plugins/plugin-client/RecoveryCodeDialog',
-  component: RecoveryCodeDialog,
+  component: RecoveryCodeDialog as any,
   render: DefaultStory,
-  decorators: [withClientProvider({ createIdentity: true }), withTheme, withLayout()],
+  decorators: [withTheme, withClientProvider({ createIdentity: true })],
   parameters: {
     layout: 'fullscreen',
     translations,
   },
-};
+} satisfies Meta<typeof DefaultStory>;
 
 export default meta;
 
-type Story = StoryObj<RecoveryCodeDialogProps>;
+type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {};

package/src/components/RecoveryCodeDialog.tsx

@@ -6,16 +6,16 @@ import React, { useCallback, useState } from 'react';
 
 import { AlertDialog, Button, Clipboard, Input, useTranslation } from '@dxos/react-ui';
 
-import { CLIENT_PLUGIN } from '../meta';
+import { meta } from '../meta';
 
-export const RECOVERY_CODE_DIALOG = `${CLIENT_PLUGIN}/RecoveryCodeDialog`;
+export const RECOVERY_CODE_DIALOG = `${meta.id}/RecoveryCodeDialog`;
 
 export type RecoveryCodeDialogProps = {
   code: string;
 };
 
 export const RecoveryCodeDialog = ({ code }: RecoveryCodeDialogProps) => {
-  const { t } = useTranslation(CLIENT_PLUGIN);
+  const { t } = useTranslation(meta.id);
   const [confirmation, setConfirmation] = useState(false);
 
   const handleConfirmation = useCallback((checked: boolean) => setConfirmation(checked), []);
@@ -23,11 +23,11 @@ export const RecoveryCodeDialog = ({ code }: RecoveryCodeDialogProps) => {
   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='py-4'>{t('recovery code dialog description')}</p>
+      <p className='plb-4'>{t('recovery code dialog description')}</p>
       <Clipboard.Provider>
         <Code code={code} />
       </Clipboard.Provider>
-      <div className='flex flex-col py-4 gap-2'>
+      <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>
@@ -60,7 +60,7 @@ const Code = ({ code }: { code: string }) => {
       <div className='grid grid-cols-4'>
         {words.map((word, i) => (
           <div key={i} className='flex items-center p-2 gap-2'>
-            <div className='w-4 text-xs text-center text-subdued'>{i + 1}</div>
+            <div className='is-4 text-xs text-center text-subdued'>{i + 1}</div>
             <div className='text-sm'>{word}</div>
           </div>
         ))}

package/src/components/RecoveryCredentialsContainer.stories.tsx

@@ -2,43 +2,41 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
-import { type StoryObj, type Meta } from '@storybook/react-vite';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 
 import { IntentPlugin } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
-import { withTheme, withLayout } from '@dxos/storybook-utils';
+import { withTheme } from '@dxos/react-ui/testing';
 
-import { RecoveryCredentialsContainer } from './RecoveryCredentialsContainer';
 import { ClientPlugin } from '../ClientPlugin';
 import { translations } from '../translations';
 
-const meta: Meta = {
+import { RecoveryCredentialsContainer } from './RecoveryCredentialsContainer';
+
+const meta = {
   title: 'plugins/plugin-client/RecoveryCredentialsContainer',
   component: RecoveryCredentialsContainer,
   decorators: [
+    withTheme,
     withPluginManager({
       plugins: [
         ClientPlugin({
-          onClientInitialized: async (_, client) => {
+          onClientInitialized: async ({ client }) => {
             await client.halo.createIdentity();
           },
         }),
         IntentPlugin(),
       ],
     }),
-    withTheme,
-    withLayout(),
   ],
   parameters: {
     layout: 'fullscreen',
     translations,
   },
-};
+} satisfies Meta<typeof RecoveryCredentialsContainer>;
 
 export default meta;
 
-type Story = StoryObj<typeof RecoveryCredentialsContainer>;
+type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {};

package/src/components/RecoveryCredentialsContainer.tsx

@@ -4,19 +4,19 @@
 
 import React from 'react';
 
-import { createIntent, useIntentDispatcher } from '@dxos/app-framework';
+import { createIntent } from '@dxos/app-framework';
+import { useIntentDispatcher } from '@dxos/app-framework/react';
 import { useCredentials } from '@dxos/react-client/halo';
-import { Icon, IconButton, List, ListItem, useTranslation, Message } from '@dxos/react-ui';
+import { Icon, IconButton, List, ListItem, Message, useTranslation } from '@dxos/react-ui';
 import { ControlGroup, ControlItem, ControlPage, ControlSection } from '@dxos/react-ui-form';
-import { StackItem } from '@dxos/react-ui-stack';
 
-import { CLIENT_PLUGIN } from '../meta';
+import { meta } from '../meta';
 import { ClientAction } from '../types';
 
-export const MANAGE_CREDENTIALS_DIALOG = `${CLIENT_PLUGIN}/ManageCredentialsDialog`;
+export const MANAGE_CREDENTIALS_DIALOG = `${meta.id}/ManageCredentialsDialog`;
 
 export const RecoveryCredentialsContainer = () => {
-  const { t } = useTranslation(CLIENT_PLUGIN);
+  const { t } = useTranslation(meta.id);
   const { dispatchPromise: dispatch } = useIntentDispatcher();
   const credentials = useCredentials();
   const recoveryCredentials = credentials.filter(
@@ -24,50 +24,46 @@ export const RecoveryCredentialsContainer = () => {
   );
 
   return (
-    <StackItem.Content classNames='block overflow-y-auto'>
-      <ControlPage>
-        <ControlSection title={t('recovery setup dialog title')} description={t('recovery setup dialog description')}>
-          <ControlGroup>
-            <ControlItem title={t('create passkey label')} description={t('create passkey description')}>
-              <IconButton
-                label={t('create passkey label')}
-                icon='ph--key--duotone'
-                variant='primary'
-                size={5}
-                onClick={() => dispatch(createIntent(ClientAction.CreatePasskey))}
-              />
-            </ControlItem>
-            <ControlItem title={t('create recovery code label')} description={t('create recovery code description')}>
-              <IconButton
-                label={t('create recovery code label')}
-                icon='ph--receipt--duotone'
-                variant='default'
-                size={5}
-                onClick={() => dispatch(createIntent(ClientAction.CreateRecoveryCode))}
-              />
-            </ControlItem>
-          </ControlGroup>
-        </ControlSection>
-        <ControlSection title={t('credentials list label')}>
-          {recoveryCredentials.length < 1 ? (
-            <Message.Root valence='error' classNames='container-max-width'>
-              <Message.Title icon='ph--shield-warning--duotone'>{t('no credentials title')}</Message.Title>
-              <Message.Content>{t('no credentials message')}</Message.Content>
-            </Message.Root>
-          ) : (
-            <List classNames='container-max-width pli-2'>
-              {recoveryCredentials.map((credential) => (
-                <ListItem.Root key={credential.id?.toHex()}>
-                  <ListItem.Endcap>
-                    <Icon icon='ph--key--regular' size={5} />
-                  </ListItem.Endcap>
-                  <ListItem.Heading>{credential.issuanceDate.toLocaleString()}</ListItem.Heading>
-                </ListItem.Root>
-              ))}
-            </List>
-          )}
-        </ControlSection>
-      </ControlPage>
-    </StackItem.Content>
+    <ControlPage>
+      <ControlSection title={t('recovery setup dialog title')} description={t('recovery setup dialog description')}>
+        <ControlGroup>
+          <ControlItem title={t('create passkey label')} description={t('create passkey description')}>
+            <IconButton
+              label={t('create passkey label')}
+              icon='ph--key--duotone'
+              variant='primary'
+              onClick={() => dispatch(createIntent(ClientAction.CreatePasskey))}
+            />
+          </ControlItem>
+          <ControlItem title={t('create recovery code label')} description={t('create recovery code description')}>
+            <IconButton
+              label={t('create recovery code label')}
+              icon='ph--receipt--duotone'
+              variant='default'
+              onClick={() => dispatch(createIntent(ClientAction.CreateRecoveryCode))}
+            />
+          </ControlItem>
+        </ControlGroup>
+      </ControlSection>
+      <ControlSection title={t('credentials list label')}>
+        {recoveryCredentials.length < 1 ? (
+          <Message.Root valence='error' classNames='container-max-width'>
+            <Message.Title icon='ph--shield-warning--duotone'>{t('no credentials title')}</Message.Title>
+            <Message.Content>{t('no credentials message')}</Message.Content>
+          </Message.Root>
+        ) : (
+          <List classNames='container-max-width pli-2'>
+            {recoveryCredentials.map((credential) => (
+              <ListItem.Root key={credential.id?.toHex()}>
+                <ListItem.Endcap>
+                  <Icon icon='ph--key--regular' />
+                </ListItem.Endcap>
+                <ListItem.Heading>{credential.issuanceDate.toLocaleString()}</ListItem.Heading>
+              </ListItem.Root>
+            ))}
+          </List>
+        )}
+      </ControlSection>
+    </ControlPage>
   );
 };