@dxos/plugin-space 0.8.4-main.67995b8 → 0.8.4-main.a4bbb77

package/src/components/CreateDialog/CreateSpaceDialog.tsx

@@ -5,23 +5,23 @@
 import { Effect, type Schema } from 'effect';
 import React, { useCallback, useRef } from 'react';
 
-import { createIntent, LayoutAction, useIntentDispatcher } from '@dxos/app-framework';
+import { LayoutAction, createIntent, useIntentDispatcher } from '@dxos/app-framework';
 import { Button, Dialog, Icon, useTranslation } from '@dxos/react-ui';
 import { Form } from '@dxos/react-ui-form';
 import { cardDialogContent, cardDialogHeader } from '@dxos/react-ui-stack';
 
 import { useInputSurfaceLookup } from '../../hooks';
-import { SPACE_PLUGIN } from '../../meta';
+import { meta } from '../../meta';
 import { SpaceAction, SpaceForm } from '../../types';
 
-export const CREATE_SPACE_DIALOG = `${SPACE_PLUGIN}/CreateSpaceDialog`;
+export const CREATE_SPACE_DIALOG = `${meta.id}/CreateSpaceDialog`;
 
 type FormValues = Schema.Schema.Type<typeof SpaceForm>;
 const initialValues: FormValues = { edgeReplication: true };
 
 export const CreateSpaceDialog = () => {
   const closeRef = useRef<HTMLButtonElement | null>(null);
-  const { t } = useTranslation(SPACE_PLUGIN);
+  const { t } = useTranslation(meta.id);
   const { dispatch } = useIntentDispatcher();
 
   const inputSurfaceLookup = useInputSurfaceLookup();

package/src/components/JoinDialog.tsx

@@ -4,7 +4,7 @@
 
 import React, { useCallback } from 'react';
 
-import { createIntent, LayoutAction, useAppGraph, useIntentDispatcher } from '@dxos/app-framework';
+import { LayoutAction, createIntent, useAppGraph, useIntentDispatcher } from '@dxos/app-framework';
 import { Trigger } from '@dxos/async';
 import { ObservabilityAction } from '@dxos/plugin-observability/types';
 import { useClient } from '@dxos/react-client';
@@ -13,9 +13,9 @@ import { type InvitationResult } from '@dxos/react-client/invitations';
 import { Dialog, useTranslation } from '@dxos/react-ui';
 import { JoinPanel, type JoinPanelProps } from '@dxos/shell/react';
 
-import { SPACE_PLUGIN } from '../meta';
+import { meta } from '../meta';
 
-export const JOIN_DIALOG = `${SPACE_PLUGIN}/JoinDialog`;
+export const JOIN_DIALOG = `${meta.id}/JoinDialog`;
 
 export type JoinDialogProps = JoinPanelProps & {
   navigableCollections?: boolean;
@@ -25,7 +25,7 @@ export const JoinDialog = ({ navigableCollections, onDone, ...props }: JoinDialo
   const { dispatchPromise: dispatch } = useIntentDispatcher();
   const client = useClient();
   const { graph } = useAppGraph();
-  const { t } = useTranslation(SPACE_PLUGIN);
+  const { t } = useTranslation(meta.id);
 
   const handleDone = useCallback(
     async (result: InvitationResult | null) => {
@@ -39,10 +39,10 @@ export const JoinDialog = ({ navigableCollections, onDone, ...props }: JoinDialo
           createIntent(LayoutAction.AddToast, {
             part: 'toast',
             subject: {
-              id: `${SPACE_PLUGIN}/join-success`,
+              id: `${meta.id}/join-success`,
               duration: 5_000,
-              title: ['join success label', { ns: SPACE_PLUGIN }],
-              closeLabel: ['dismiss label', { ns: SPACE_PLUGIN }],
+              title: ['join success label', { ns: meta.id }],
+              closeLabel: ['dismiss label', { ns: meta.id }],
             },
           }),
         ),

package/src/components/MembersContainer.stories.tsx

@@ -2,29 +2,55 @@
 // 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 from 'react';
 
+import { IntentPlugin } from '@dxos/app-framework';
+import { withPluginManager } from '@dxos/app-framework/testing';
+import { useSpace } from '@dxos/react-client/echo';
 import { withClientProvider } from '@dxos/react-client/testing';
+import { withTheme } from '@dxos/react-ui/testing';
 import { translations as shellTranslations } from '@dxos/shell/react';
-import { withTheme, withLayout } from '@dxos/storybook-utils';
+import { render } from '@dxos/storybook-utils';
 
-import { MembersContainer } from './MembersContainer';
 import { translations } from '../translations';
 
-const meta: Meta = {
+import { MembersContainer } from './MembersContainer';
+
+const DefaultStory = () => {
+  const space = useSpace();
+  if (!space) {
+    return null;
+  }
+
+  return (
+    <MembersContainer
+      space={space}
+      createInvitationUrl={(invitationCode) => `https://dxos.org/invite/${invitationCode}`}
+    />
+  );
+};
+
+const meta = {
   title: 'plugins/plugin-space/MembersContainer',
-  component: MembersContainer,
-  decorators: [withClientProvider({ createIdentity: true, createSpace: true }), withTheme, withLayout()],
+  component: MembersContainer as any,
+  render: render(DefaultStory),
+  decorators: [
+    withTheme, // TODO(wittjosiah): Try to write story which does not depend on plugin manager.
+    withPluginManager({ plugins: [IntentPlugin()] }),
+    withClientProvider({
+      createIdentity: true,
+      createSpace: true,
+    }),
+  ],
   parameters: {
     layout: 'fullscreen',
     translations: [...translations, ...shellTranslations],
   },
-};
+} satisfies Meta<typeof DefaultStory>;
 
 export default meta;
 
-type Story = StoryObj<typeof MembersContainer>;
+type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {};

package/src/components/MembersContainer.tsx

@@ -8,10 +8,10 @@ import { QR } from 'react-qr-rounded';
 import { createIntent, useIntentDispatcher } from '@dxos/app-framework';
 import { log } from '@dxos/log';
 import { useConfig } from '@dxos/react-client';
-import { fullyQualifiedId, useSpaceInvitations, type Space } from '@dxos/react-client/echo';
+import { type Space, fullyQualifiedId, 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 { ControlPage, ControlSection, ControlFrame, ControlFrameItem, ControlItemInput } from '@dxos/react-ui-form';
+import { ControlFrame, ControlFrameItem, ControlItemInput, ControlPage, ControlSection } from '@dxos/react-ui-form';
 import { StackItem } from '@dxos/react-ui-stack';
 import { DataType } from '@dxos/schema';
 import {
@@ -26,7 +26,7 @@ import {
 } from '@dxos/shell/react';
 import { hexToEmoji } from '@dxos/util';
 
-import { SPACE_PLUGIN } from '../meta';
+import { meta } from '../meta';
 import { SpaceAction } from '../types';
 import { COMPOSER_SPACE_LOCK } from '../util';
 
@@ -41,14 +41,13 @@ const handleInvitationEvent = (invitation: Invitation, subscription: ZenObservab
   }
 };
 
-export const MembersContainer = ({
-  space,
-  createInvitationUrl,
-}: {
+export type MembersContainerProps = {
   space: Space;
   createInvitationUrl: (invitationCode: string) => string;
-}) => {
-  const { t } = useTranslation(SPACE_PLUGIN);
+};
+
+export const MembersContainer = ({ space, createInvitationUrl }: MembersContainerProps) => {
+  const { t } = useTranslation(meta.id);
   const config = useConfig();
   const { dispatchPromise: dispatch } = useIntentDispatcher();
   const invitations = useSpaceInvitations(space.key);
@@ -76,7 +75,7 @@ export const MembersContainer = ({
       inviteOne: {
         label: t('invite one label', { ns: 'os' }),
         description: t('invite one description', { ns: 'os' }),
-        icon: () => <Icon icon='ph--user-plus--regular' size={5} />,
+        icon: 'ph--user-plus--regular',
         testId: 'membersContainer.inviteOne',
         onClick: async () => {
           const { data: invitation } = await dispatch(
@@ -98,7 +97,7 @@ export const MembersContainer = ({
       inviteMany: {
         label: t('invite many label', { ns: 'os' }),
         description: t('invite many description', { ns: 'os' }),
-        icon: () => <Icon icon='ph--users-three--regular' size={5} />,
+        icon: 'ph--users-three--regular',
         testId: 'membersContainer.inviteMany',
         onClick: async () => {
           const { data: invitation } = await dispatch(
@@ -168,7 +167,7 @@ export const MembersContainer = ({
               )}
             </ControlFrame>
             {/* TODO(wittjosiah): Make ControlItemInput & ControlFrame compatible. */}
-            <div className='justify-center gap-4 p-0 mbs-4 container-max-width grid grid-cols-1 md:grid-cols-[1fr_min-content]'>
+            <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>
@@ -231,7 +230,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: SPACE_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

package/src/components/MenuFooter.tsx

@@ -9,11 +9,11 @@ import { type Obj } from '@dxos/echo';
 import { useClient } from '@dxos/react-client';
 import { DropdownMenu, Icon, toLocalizedString, useTranslation } from '@dxos/react-ui';
 
-import { SPACE_PLUGIN } from '../meta';
+import { meta } from '../meta';
 import { getSpaceDisplayName } from '../util';
 
 export const MenuFooter = ({ object }: { object: Obj.Any }) => {
-  const { t } = useTranslation(SPACE_PLUGIN);
+  const { t } = useTranslation(meta.id);
   const client = useClient();
   const space = getSpace(object);
   const spaceName = space ? getSpaceDisplayName(space, { personal: client.spaces.default === space }) : '';

package/src/components/ObjectDetailsPanel.tsx

@@ -7,22 +7,24 @@ import React, { useCallback } from 'react';
 import { type JsonPath, setValue } from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
 import { useClient } from '@dxos/react-client';
-import { getSpace, Filter, useQuery, useSchema } from '@dxos/react-client/echo';
+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 { Form, useRefQueryLookupHandler } from '@dxos/react-ui-form';
 import { type DataType } from '@dxos/schema';
+import { typenameFromQuery } from '@dxos/schema';
 import { isNonNullable } from '@dxos/util';
 
-import { SPACE_PLUGIN } from '../meta';
+import { meta } from '../meta';
 
 type RowDetailsPanelProps = { objectId: string; view: DataType.View };
 
 const ObjectDetailsPanel = ({ objectId, view }: RowDetailsPanelProps) => {
-  const { t } = useTranslation(SPACE_PLUGIN);
+  const { t } = useTranslation(meta.id);
   const client = useClient();
   const space = getSpace(view);
-  const schema = useSchema(client, space, view.query?.typename);
+  const typename = view.query ? typenameFromQuery(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');

package/src/components/ObjectSettings/AdvancedObjectSettings.tsx

@@ -9,8 +9,9 @@ import { ForeignKey } from '@dxos/echo-schema';
 import { IconButton, useTranslation } from '@dxos/react-ui';
 import { Form } from '@dxos/react-ui-form';
 
+import { meta } from '../../meta';
+
 import { ForeignKeys } from './ForeignKeys';
-import { SPACE_PLUGIN } from '../../meta';
 
 const initialValues = {
   source: '',
@@ -22,7 +23,7 @@ export type AdvancedObjectSettingsProps = {
 };
 
 export const AdvancedObjectSettings = ({ object }: AdvancedObjectSettingsProps) => {
-  const { t } = useTranslation(SPACE_PLUGIN);
+  const { t } = useTranslation(meta.id);
   const [adding, setAdding] = useState(false);
   const { keys } = Obj.getMeta(object);
 

package/src/components/ObjectSettings/ForeignKeys.tsx

@@ -7,7 +7,7 @@ import React, { useCallback } from 'react';
 import { type ForeignKey } from '@dxos/echo-schema';
 import { IconButton, List, ListItem, useTranslation } from '@dxos/react-ui';
 
-import { SPACE_PLUGIN } from '../../meta';
+import { meta } from '../../meta';
 
 export type ForeignKeysProps = {
   keys: ForeignKey[];
@@ -31,7 +31,7 @@ type KeyItemProps = {
 };
 
 const KeyItem = ({ forignKey, onDelete }: KeyItemProps) => {
-  const { t } = useTranslation(SPACE_PLUGIN);
+  const { t } = useTranslation(meta.id);
 
   const handleDelete = useCallback(() => {
     onDelete?.(forignKey);

package/src/components/ObjectSettings/ObjectSettingsContainer.tsx

@@ -6,7 +6,7 @@ import React, { useMemo } from 'react';
 
 import { Surface } from '@dxos/app-framework';
 import { type Obj } from '@dxos/echo';
-import { Clipboard } from '@dxos/react-ui';
+import { Clipboard, Toolbar } from '@dxos/react-ui';
 import { StackItem } from '@dxos/react-ui-stack';
 
 import { BaseObjectSettings } from './BaseObjectSettings';
@@ -21,7 +21,8 @@ export const ObjectSettingsContainer = ({ object, role }: ObjectSettingsContaine
 
   return (
     <Clipboard.Provider>
-      <StackItem.Content toolbar={false}>
+      <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} />

package/src/components/PersistenceStatus.tsx

@@ -9,7 +9,7 @@ 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 { SPACE_PLUGIN } from '../meta';
+import { meta } from '../meta';
 
 enum Status {
   PERSISTED_LOCALLY = 0,
@@ -19,7 +19,7 @@ enum Status {
 
 // TODO(zan): This now has no usages. Remove it?
 export const PersistenceStatus = ({ db }: { db: EchoDatabase }) => {
-  const { t } = useTranslation(SPACE_PLUGIN);
+  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);

package/src/components/PopoverRenameObject.tsx

@@ -4,33 +4,27 @@
 
 import React, { useCallback, useRef, useState } from 'react';
 
-import { createIntent, LayoutAction, useIntentDispatcher } from '@dxos/app-framework';
+import { LayoutAction, createIntent, useIntentDispatcher } from '@dxos/app-framework';
+import { Obj } from '@dxos/echo';
 import { type Live } from '@dxos/live-object';
 import { log } from '@dxos/log';
 import { Button, Input, useTranslation } from '@dxos/react-ui';
 
-import { SPACE_PLUGIN } from '../meta';
+import { meta } from '../meta';
 
-export const POPOVER_RENAME_OBJECT = `${SPACE_PLUGIN}/PopoverRenameObject`;
+export const POPOVER_RENAME_OBJECT = `${meta.id}/PopoverRenameObject`;
 
-export const PopoverRenameObject = ({ object: obj }: { object: Live<any> }) => {
-  const { t } = useTranslation(SPACE_PLUGIN);
+export const PopoverRenameObject = ({ object }: { object: Live<any> }) => {
+  const { t } = useTranslation(meta.id);
   const doneButton = useRef<HTMLButtonElement>(null);
-  // TODO(wittjosiah): Use schema here.
-  const object = obj as any;
-  // TODO(burdon): Field should not be hardcoded field.
-  const [name, setName] = useState(object.name || object.title || '');
+  const [name, setName] = useState(Obj.getLabel(object));
   const { dispatchPromise: dispatch } = useIntentDispatcher();
 
   const handleDone = useCallback(() => {
     try {
-      object.name = name;
+      name && Obj.setLabel(object, name);
     } catch (err) {
-      try {
-        object.title = name;
-      } catch {
-        log.error('Failed to rename object', { err });
-      }
+      log.error('Failed to rename object', { err });
     }
     void dispatch(
       createIntent(LayoutAction.UpdatePopover, {

package/src/components/PopoverRenameSpace.tsx

@@ -4,16 +4,16 @@
 
 import React, { useCallback, useRef, useState } from 'react';
 
-import { createIntent, LayoutAction, useIntentDispatcher } from '@dxos/app-framework';
+import { LayoutAction, createIntent, useIntentDispatcher } from '@dxos/app-framework';
 import { type Space } from '@dxos/react-client/echo';
 import { Button, Input, Popover, useTranslation } from '@dxos/react-ui';
 
-import { SPACE_PLUGIN } from '../meta';
+import { meta } from '../meta';
 
-export const POPOVER_RENAME_SPACE = `${SPACE_PLUGIN}/PopoverRenameSpace`;
+export const POPOVER_RENAME_SPACE = `${meta.id}/PopoverRenameSpace`;
 
 export const PopoverRenameSpace = ({ space }: { space: Space }) => {
-  const { t } = useTranslation(SPACE_PLUGIN);
+  const { t } = useTranslation(meta.id);
   const doneButton = useRef<HTMLButtonElement>(null);
   const [name, setName] = useState(space.properties.name ?? '');
   const { dispatchPromise: dispatch } = useIntentDispatcher();

package/src/components/RecordMain.tsx

@@ -0,0 +1,43 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, { useCallback } from 'react';
+
+import { Obj } from '@dxos/echo';
+import { type JsonPath, setValue } from '@dxos/echo-schema';
+import { invariant } from '@dxos/invariant';
+import { getSpace } from '@dxos/react-client/echo';
+import { Form, useRefQueryLookupHandler } from '@dxos/react-ui-form';
+
+export const RecordMain = ({ record }: { record: Obj.Any }) => {
+  const space = getSpace(record);
+  const schema = Obj.getSchema(record);
+  invariant(schema, 'Record has no schema.');
+
+  const handleRefQueryLookup = useRefQueryLookupHandler({ space });
+
+  const handleSave = useCallback(
+    (values: any, { changed }: { changed: Record<JsonPath, boolean> }) => {
+      const id = values.id;
+      invariant(typeof id === 'string');
+
+      const changedPaths = Object.keys(changed).filter((path) => changed[path as JsonPath]) as JsonPath[];
+      for (const path of changedPaths) {
+        const value = values[path];
+        setValue(record, path, value);
+      }
+    },
+    [record],
+  );
+
+  return (
+    <div role='none' className='container-max-width flex flex-col p-2 gap-1 overflow-y-auto'>
+      <div key={record.id} className='border border-separator rounded'>
+        <Form autoSave schema={schema} values={record} onSave={handleSave} onQueryRefOptions={handleRefQueryLookup} />
+      </div>
+    </div>
+  );
+};
+
+export default RecordMain;

package/src/components/SchemaContainer.tsx

@@ -2,15 +2,15 @@
 // Copyright 2025 DXOS.org
 //
 
-import React, { useState, useEffect } from 'react';
+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 { controlItemClasses, ControlPage, ControlSection } from '@dxos/react-ui-form';
+import { ControlPage, ControlSection, controlItemClasses } from '@dxos/react-ui-form';
 import { StackItem } from '@dxos/react-ui-stack';
 
-import { SPACE_PLUGIN } from '../meta';
+import { meta } from '../meta';
 
 type SchemaPanelProps = { space: Space };
 
@@ -37,7 +37,7 @@ export const useQuerySpaceSchemas = (space: Space): Type.Schema[] => {
 };
 
 export const SchemaContainer = ({ space }: SchemaPanelProps) => {
-  const { t } = useTranslation(SPACE_PLUGIN);
+  const { t } = useTranslation(meta.id);
   const schemas = useQuerySpaceSchemas(space);
 
   return (

package/src/components/SpacePluginSettings.tsx

@@ -7,31 +7,30 @@ import React from 'react';
 import { createIntent, useIntentDispatcher } from '@dxos/app-framework';
 import { useClient } from '@dxos/react-client';
 import { useSpaces } from '@dxos/react-client/echo';
-import { Input, toLocalizedString, useTranslation, List, ListItem, IconButton } from '@dxos/react-ui';
-import { controlItemClasses, ControlPage, ControlSection, DeprecatedFormInput } from '@dxos/react-ui-form';
+import { IconButton, Input, List, ListItem, toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { ControlGroup, ControlItemInput, ControlPage, ControlSection, controlItemClasses } from '@dxos/react-ui-form';
 
-import { SPACE_PLUGIN } from '../meta';
+import { meta } from '../meta';
 import { SpaceAction, type SpaceSettingsProps } from '../types';
 import { getSpaceDisplayName } from '../util';
 
 export const SpacePluginSettings = ({ settings }: { settings: SpaceSettingsProps }) => {
-  const { t } = useTranslation(SPACE_PLUGIN);
+  const { t } = useTranslation(meta.id);
   const client = useClient();
   const spaces = useSpaces({ all: settings.showHidden });
   const { dispatchPromise: dispatch } = useIntentDispatcher();
 
-  // TODO(wittjosiah): Migrate to new form container.
   return (
     <ControlPage>
       <ControlSection title={t('space settings label')} description={t('space settings description')}>
-        <div className='pli-trimMd container-max-width'>
-          <DeprecatedFormInput label={t('show hidden spaces label')}>
+        <ControlGroup>
+          <ControlItemInput title={t('show hidden spaces label')}>
             <Input.Switch
               checked={settings.showHidden}
               onCheckedChange={(checked) => (settings.showHidden = !!checked)}
             />
-          </DeprecatedFormInput>
-        </div>
+          </ControlItemInput>
+        </ControlGroup>
         <List classNames={[controlItemClasses, 'flex flex-col gap-trimSm']}>
           {spaces.map((space) => (
             <ListItem.Root key={space.id} classNames='is-full items-center'>

package/src/components/SpacePresence.stories.tsx

@@ -2,19 +2,18 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Meta } from '@storybook/react-vite';
 import React from 'react';
 
 import { IdentityDid, PublicKey } from '@dxos/keys';
 import { HaloSpaceMember, SpaceMember } from '@dxos/react-client/echo';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
+import { withTheme } from '@dxos/react-ui/testing';
 
-import { FullPresence, type MemberPresenceProps, SmallPresence, type Member } from './SpacePresence';
 import { translations } from '../translations';
 
-const nViewers = (n: number, currentlyAttended = true): Member[] =>
+import { FullPresence, type Member, type MemberPresenceProps, SmallPresence } from './SpacePresence';
+
+const viewers = (n: number, currentlyAttended = true): Member[] =>
   Array.from({ length: n }, () => ({
     role: HaloSpaceMember.Role.ADMIN,
     identity: { did: IdentityDid.random(), identityKey: PublicKey.random() },
@@ -23,6 +22,16 @@ const nViewers = (n: number, currentlyAttended = true): Member[] =>
     currentlyAttended,
   }));
 
+const meta = {
+  title: 'plugins/plugin-space/SpacePresence',
+  decorators: [withTheme],
+  parameters: {
+    translations,
+  },
+} satisfies Meta<typeof IdentityDid>;
+
+export default meta;
+
 export const Full = (props: MemberPresenceProps) => {
   const p: MemberPresenceProps = {
     ...props,
@@ -31,31 +40,31 @@ export const Full = (props: MemberPresenceProps) => {
   return (
     <div className='p-4'>
       <div className='p-3'>
-        <FullPresence members={nViewers(1)} {...p} />
+        <FullPresence members={viewers(1)} {...p} />
       </div>
       <div className='p-3'>
-        <FullPresence members={nViewers(2)} {...p} />
+        <FullPresence members={viewers(2)} {...p} />
       </div>
       <div className='p-3'>
-        <FullPresence members={nViewers(3)} {...p} />
+        <FullPresence members={viewers(3)} {...p} />
       </div>
       <div className='p-3'>
-        <FullPresence members={nViewers(3, false)} {...p} />
+        <FullPresence members={viewers(3, false)} {...p} />
       </div>
       <div className='p-3'>
-        <FullPresence members={nViewers(4)} {...p} />
+        <FullPresence members={viewers(4)} {...p} />
       </div>
       <div className='p-3'>
-        <FullPresence members={nViewers(5)} {...p} />
+        <FullPresence members={viewers(5)} {...p} />
       </div>
       <div className='p-3'>
-        <FullPresence members={nViewers(5, false)} {...p} />
+        <FullPresence members={viewers(5, false)} {...p} />
       </div>
       <div className='p-3'>
-        <FullPresence members={nViewers(10)} {...p} />
+        <FullPresence members={viewers(10)} {...p} />
       </div>
       <div className='p-3'>
-        <FullPresence members={nViewers(100)} {...p} />
+        <FullPresence members={viewers(100)} {...p} />
       </div>
     </div>
   );
@@ -97,11 +106,3 @@ export const Small = () => {
     </div>
   );
 };
-
-const meta: Meta = {
-  title: 'plugins/plugin-space/SpacePresence',
-  decorators: [withTheme, withLayout()],
-  parameters: { translations },
-};
-
-export default meta;