@dxos/plugin-space 0.8.4-main.8360d9e660 → 0.8.4-main.8baae0fced

package/src/containers/SpaceSettingsContainer/SpaceSettingsContainer.tsx

@@ -3,21 +3,34 @@
 //
 
 import * as Schema from 'effect/Schema';
-import React, { type ChangeEvent, useCallback, useMemo, useState } from 'react';
+import React, { type ChangeEvent, useCallback, useEffect, useMemo, useState } from 'react';
 
 import { useCapabilities, useOperationInvoker } from '@dxos/app-framework/ui';
-import { LayoutOperation, getSpacePath } from '@dxos/app-toolkit';
-import { Obj } from '@dxos/echo';
+import { getPersonalSpace, getSpacePath, isPersonalSpace, LayoutOperation } from '@dxos/app-toolkit';
+import { AppSurface } from '@dxos/app-toolkit/ui';
+import { Filter, Obj, Relation } from '@dxos/echo';
 import { log } from '@dxos/log';
+import { SpaceArchive } from '@dxos/protocols/proto/dxos/client/services';
 import { EdgeReplicationSetting } from '@dxos/protocols/proto/dxos/echo/metadata';
 import { useClient } from '@dxos/react-client';
-import { type Space, SpaceState } from '@dxos/react-client/echo';
-import { Button, Input, useFileDownload, useMulticastObservable, useTranslation } from '@dxos/react-ui';
+import { type Space, SpaceState, useQuery } from '@dxos/react-client/echo';
+import {
+  Button,
+  Dialog,
+  DropdownMenu,
+  Icon,
+  IconButton,
+  Input,
+  useMulticastObservable,
+  useTranslation,
+} from '@dxos/react-ui';
 import { Form, type FormFieldMap, Settings } from '@dxos/react-ui-form';
 import { HuePicker, IconPicker } from '@dxos/react-ui-pickers';
+import { ConfirmReset } from '@dxos/shell/react';
 
-import { meta } from '../../meta';
-import { SpaceCapabilities, SpaceForm, SpaceOperation } from '../../types';
+import { meta } from '#meta';
+import { SpaceOperation } from '#operations';
+import { SpaceCapabilities, SpaceForm } from '#types';
 
 const SpaceFormSchema = SpaceForm.pipe(
   Schema.extend(
@@ -27,12 +40,8 @@ const SpaceFormSchema = SpaceForm.pipe(
   ),
 );
 
-export type SpaceSettingsContainerProps = {
-  space: Space;
-};
-
 // TODO(wittjosiah): Handle space migrations here?
-export const SpaceSettingsContainer = ({ space }: SpaceSettingsContainerProps) => {
+export const SpaceSettingsContainer = ({ space }: AppSurface.SpaceArticleProps) => {
   const { t } = useTranslation(meta.id);
   const { invokePromise } = useOperationInvoker();
   const client = useClient();
@@ -61,15 +70,15 @@ export const SpaceSettingsContainer = ({ space }: SpaceSettingsContainerProps) =
       }
 
       if (changed['name'] || changed['icon'] || changed['hue']) {
-        Obj.change(space.properties, (p) => {
+        Obj.update(space.properties, (obj) => {
           if (changed['name'] && newValues.name !== undefined) {
-            p.name = newValues.name;
+            obj.name = newValues.name;
           }
           if (changed['icon']) {
-            p.icon = newValues.icon;
+            obj.icon = newValues.icon;
           }
           if (changed['hue']) {
-            p.hue = newValues.hue;
+            obj.hue = newValues.hue;
           }
         });
       }
@@ -77,9 +86,12 @@ export const SpaceSettingsContainer = ({ space }: SpaceSettingsContainerProps) =
       if (changed['archived']) {
         if (newValues.archived && !archived) {
           void invokePromise(SpaceOperation.Close, { space });
-          void invokePromise(LayoutOperation.SwitchWorkspace, {
-            subject: getSpacePath(client.spaces.default.id),
-          });
+          const personalSpace = getPersonalSpace(client);
+          if (personalSpace) {
+            void invokePromise(LayoutOperation.SwitchWorkspace, {
+              subject: getSpacePath(personalSpace.id),
+            });
+          }
         } else if (!newValues.archived && archived) {
           void invokePromise(SpaceOperation.Open, { space });
         }
@@ -88,7 +100,7 @@ export const SpaceSettingsContainer = ({ space }: SpaceSettingsContainerProps) =
     [space, client, archived, invokePromise, toggleEdgeReplication],
   );
 
-  const values = useMemo(
+  const defaultValues = useMemo(
     () => ({
       name: space.properties.name,
       icon: space.properties.icon,
@@ -99,43 +111,49 @@ export const SpaceSettingsContainer = ({ space }: SpaceSettingsContainerProps) =
     [space.properties.name, space.properties.icon, space.properties.hue, edgeReplication, archived],
   );
 
+  const personal = isPersonalSpace(space);
+
   const fieldMap = useMemo<FormFieldMap>(
     () => ({
-      name: ({ type, label, getValue, onValueChange }) => {
-        const handleChange = useCallback(
-          ({ target: { value } }: ChangeEvent<HTMLInputElement>) => onValueChange(type, value),
-          [onValueChange, type],
-        );
-        return (
-          <Settings.ItemInput title={label} description={t('display name description')}>
-            <Input.TextInput
-              value={getValue()}
-              onChange={handleChange}
-              placeholder={t('display name input placeholder')}
-              classNames='min-w-64'
-            />
-          </Settings.ItemInput>
-        );
-      },
-      icon: ({ type, label, getValue, onValueChange }) => {
-        const handleChange = useCallback((icon: string) => onValueChange(type, icon), [onValueChange, type]);
-        const handleReset = useCallback(() => onValueChange(type, undefined), [onValueChange, type]);
-        return (
-          <Settings.Item title={label} description={t('icon description')}>
-            <IconPicker
-              value={getValue()}
-              onChange={handleChange}
-              onReset={handleReset}
-              classNames='justify-self-end'
-            />
-          </Settings.Item>
-        );
-      },
+      name: personal
+        ? () => null
+        : ({ type, label, getValue, onValueChange }) => {
+            const handleChange = useCallback(
+              ({ target: { value } }: ChangeEvent<HTMLInputElement>) => onValueChange(type, value),
+              [onValueChange, type],
+            );
+            return (
+              <Settings.Item title={label} description={t('display-name.description')}>
+                <Input.TextInput
+                  value={getValue()}
+                  onChange={handleChange}
+                  placeholder={t('display-name-input.placeholder')}
+                  classNames='min-w-64'
+                />
+              </Settings.Item>
+            );
+          },
+      icon: personal
+        ? () => null
+        : ({ type, label, getValue, onValueChange }) => {
+            const handleChange = useCallback((icon: string) => onValueChange(type, icon), [onValueChange, type]);
+            const handleReset = useCallback(() => onValueChange(type, undefined), [onValueChange, type]);
+            return (
+              <Settings.Item title={label} description={t('icon.description')}>
+                <IconPicker
+                  value={getValue()}
+                  onChange={handleChange}
+                  onReset={handleReset}
+                  classNames='justify-self-end'
+                />
+              </Settings.Item>
+            );
+          },
       hue: ({ type, label, getValue, onValueChange }) => {
         const handleChange = useCallback((nextHue: string) => onValueChange(type, nextHue), [onValueChange, type]);
         const handleReset = useCallback(() => onValueChange(type, undefined), [onValueChange, type]);
         return (
-          <Settings.Item title={label} description={t('hue description')}>
+          <Settings.Item title={label} description={t('hue.description')}>
             <HuePicker value={getValue()} onChange={handleChange} onReset={handleReset} classNames='justify-self-end' />
           </Settings.Item>
         );
@@ -143,60 +161,190 @@ export const SpaceSettingsContainer = ({ space }: SpaceSettingsContainerProps) =
       edgeReplication: ({ type, label, getValue, onValueChange }) => {
         const handleChange = useCallback((checked: boolean) => onValueChange(type, checked), [onValueChange, type]);
         return (
-          <Settings.ItemInput title={label} description={t('edge replication description')}>
+          <Settings.Item title={label} description={t('edge-replication.description')}>
             <Input.Switch checked={getValue()} onCheckedChange={handleChange} classNames='justify-self-end' />
-          </Settings.ItemInput>
-        );
-      },
-      archived: ({ type, label, getValue, onValueChange }) => {
-        const handleChange = useCallback(() => onValueChange(type, !getValue()), [onValueChange, type, getValue]);
-        return (
-          <Settings.ItemInput title={label} description={t('archive space description')}>
-            <Button
-              disabled={space === client.spaces.default}
-              variant={getValue() ? 'default' : 'destructive'}
-              onClick={handleChange}
-            >
-              {getValue() ? t('unarchive space label') : t('archive space label')}
-            </Button>
-          </Settings.ItemInput>
+          </Settings.Item>
         );
       },
+      archived: personal
+        ? () => null
+        : ({ type, label, getValue, onValueChange }) => {
+            const handleChange = useCallback(() => onValueChange(type, !getValue()), [onValueChange, type, getValue]);
+            return (
+              <Settings.Item title={label} description={t('archive-space.description')}>
+                <Button variant={getValue() ? 'default' : 'destructive'} onClick={handleChange}>
+                  {getValue() ? t('unarchive-space.label') : t('archive-space.label')}
+                </Button>
+              </Settings.Item>
+            );
+          },
     }),
-    [t, space, client],
+    [t, space, personal],
   );
 
-  const download = useFileDownload();
-  const handleBackup = useCallback(async () => {
-    const archive = await space.internal.export();
-    download(new Blob([archive.contents as Uint8Array<ArrayBuffer>]), archive.filename);
-  }, [space, download]);
+  const handleBackupBinary = useCallback(async () => {
+    await invokePromise(SpaceOperation.ExportSpace, { space, format: SpaceArchive.Format.BINARY });
+  }, [space, invokePromise]);
+  const handleBackupJson = useCallback(async () => {
+    await invokePromise(SpaceOperation.ExportSpace, { space, format: SpaceArchive.Format.JSON });
+  }, [space, invokePromise]);
 
   const repairs = useCapabilities(SpaceCapabilities.Repair);
   const handleRepair = useCallback(async () => {
-    await Promise.all(repairs.map((repair) => repair({ space, isDefault: client.spaces.default === space })));
-  }, [client, space, repairs]);
+    await Promise.all(repairs.map((repair) => repair({ space, isDefault: isPersonalSpace(space) })));
+  }, [space, repairs]);
+
+  const { schemas, objects, relations, feeds } = useSpaceCounts(space);
+  const [resetConfirmOpen, setResetConfirmOpen] = useState(false);
+  const handleReset = useCallback(async () => {
+    log.info('reset: confirmed in dialog', { spaceId: space.id });
+    try {
+      await invokePromise(SpaceOperation.Reset, { space });
+      log.info('reset: invocation resolved', { spaceId: space.id });
+    } catch (err) {
+      log.catch(err, { stage: 'reset: invocation rejected', spaceId: space.id });
+      throw err;
+    }
+    setResetConfirmOpen(false);
+  }, [space, invokePromise]);
+  const handleResetCancel = useCallback(() => setResetConfirmOpen(false), []);
 
   return (
-    <Settings.Root>
+    <Settings.Viewport>
       <Settings.Section
-        title={t('space properties settings verbose label')}
-        description={t('space properties settings description', { ns: meta.id })}
+        title={t('space-properties-settings-verbose.label')}
+        description={t('space-properties-settings.description', { ns: meta.id })}
       >
-        <Form.Root fieldMap={fieldMap} schema={SpaceFormSchema} values={values} onValuesChanged={handleValuesChanged}>
+        <Form.Root
+          key={space.id}
+          fieldMap={fieldMap}
+          schema={SpaceFormSchema}
+          defaultValues={defaultValues}
+          onValuesChanged={handleValuesChanged}
+        >
           <Form.FieldSet />
         </Form.Root>
       </Settings.Section>
-      <Settings.Section title={t('space controls title')} description={t('space controls description')}>
-        <Settings.ItemInput title={t('backup space title')} description={t('backup space description')}>
-          <Button onClick={handleBackup}>{t('download backup label')}</Button>
-        </Settings.ItemInput>
-        <Settings.ItemInput title={t('repair space title')} description={t('repair space description')}>
-          <Button onClick={handleRepair}>{t('repair space label')}</Button>
-        </Settings.ItemInput>
+
+      <Settings.Section title={t('space-controls.title')} description={t('space-controls.description')}>
+        <Settings.Item title={t('space-key.title')} description={t('space-key.description')}>
+          <div className='flex items-center gap-2'>
+            <Input.Root>
+              <Input.TextInput value={space.key.toHex()} disabled classNames='flex-1 font-mono text-xs' />
+            </Input.Root>
+            <IconButton
+              icon='ph--copy--regular'
+              iconOnly
+              label={t('copy-space-key.label')}
+              onClick={() => {
+                void navigator.clipboard.writeText(space.key.toHex());
+              }}
+            />
+          </div>
+        </Settings.Item>
+        <Settings.Item title={t('backup-space.title')} description={t('backup-space.description')}>
+          <DropdownMenu.Root>
+            <DropdownMenu.Trigger asChild>
+              <Button>
+                {t('download-backup.label')}
+                <Icon icon='ph--caret-down--regular' size={4} classNames='mis-2' />
+              </Button>
+            </DropdownMenu.Trigger>
+            <DropdownMenu.Content>
+              <DropdownMenu.Viewport>
+                <DropdownMenu.Item onClick={handleBackupBinary}>{t('download-backup-binary.label')}</DropdownMenu.Item>
+                <DropdownMenu.Item onClick={handleBackupJson}>{t('download-backup-json.label')}</DropdownMenu.Item>
+              </DropdownMenu.Viewport>
+            </DropdownMenu.Content>
+          </DropdownMenu.Root>
+        </Settings.Item>
+        <Settings.Item title={t('repair-space.title')} description={t('repair-space.description')}>
+          <Button onClick={handleRepair}>{t('repair-space.label')}</Button>
+        </Settings.Item>
       </Settings.Section>
-    </Settings.Root>
+
+      <Settings.Section title={t('danger-zone.title')} description={t('danger-zone.description')}>
+        <Settings.Item title={t('space-contents.title')} description={t('space-contents.description')}>
+          <div className='grid grid-cols-4 gap-2 justify-self-end text-center'>
+            <ContentCount label={t('schema-count.label')} value={schemas} />
+            <ContentCount label={t('object-count.label')} value={objects} />
+            <ContentCount label={t('relation-count.label')} value={relations} />
+            <ContentCount label={t('feed-count.label')} value={feeds} />
+          </div>
+        </Settings.Item>
+        <Settings.Item title={t('reset-space.title')} description={t('reset-space.description')}>
+          <Dialog.Root open={resetConfirmOpen} onOpenChange={setResetConfirmOpen}>
+            <Dialog.Trigger asChild>
+              <Button variant='destructive'>{t('reset-space.label')}</Button>
+            </Dialog.Trigger>
+            <Dialog.Portal>
+              <Dialog.Overlay>
+                <Dialog.Content>
+                  <Dialog.Header>
+                    <Dialog.Title>{t('reset-space-confirm.title')}</Dialog.Title>
+                  </Dialog.Header>
+                  <Dialog.Body>
+                    <Dialog.Description classNames='sr-only'>{t('reset-space-confirm.description')}</Dialog.Description>
+                    <ConfirmReset
+                      active
+                      title={t('reset-space-confirm.title')}
+                      message={t('reset-space-confirm.description')}
+                      confirmLabel={t('reset-space.label')}
+                      errorMessage={t('reset-space-failed.message')}
+                      onConfirm={handleReset}
+                      onCancel={handleResetCancel}
+                    />
+                  </Dialog.Body>
+                </Dialog.Content>
+              </Dialog.Overlay>
+            </Dialog.Portal>
+          </Dialog.Root>
+        </Settings.Item>
+      </Settings.Section>
+    </Settings.Viewport>
   );
 };
 
 SpaceSettingsContainer.displayName = 'SpaceSettingsContainer';
+
+const ContentCount = ({ label, value }: { label: string; value: number }) => (
+  <div className='flex flex-col items-center'>
+    <div className='text-lg font-mono tabular-nums'>{value}</div>
+    <div className='text-xs text-description'>{label}</div>
+  </div>
+);
+
+type SpaceCounts = {
+  schemas: number;
+  objects: number;
+  relations: number;
+  feeds: number;
+};
+
+const useSpaceCounts = (space: Space): SpaceCounts => {
+  const entities = useQuery(space.db, Filter.everything());
+  const { objects, relations } = useMemo(() => {
+    let objects = 0;
+    let relations = 0;
+    for (const entity of entities) {
+      if (Relation.isRelation(entity)) {
+        relations += 1;
+      } else {
+        objects += 1;
+      }
+    }
+    return { objects, relations };
+  }, [entities]);
+
+  const [schemas, setSchemas] = useState(0);
+  useEffect(() => {
+    const query = space.db.schemaRegistry.query();
+    setSchemas(query.runSync().length);
+    return query.subscribe(() => setSchemas(query.results.length));
+  }, [space]);
+
+  const pipeline = useMulticastObservable(space.pipeline);
+  const feeds = (pipeline.controlFeeds?.length ?? 0) + (pipeline.dataFeeds?.length ?? 0);
+
+  return { schemas, objects, relations, feeds };
+};

package/src/containers/SpaceSettingsContainer/index.ts

@@ -2,6 +2,4 @@
 // Copyright 2024 DXOS.org
 //
 
-import { SpaceSettingsContainer } from './SpaceSettingsContainer';
-
-export default SpaceSettingsContainer;
+export { SpaceSettingsContainer as default } from './SpaceSettingsContainer';

package/src/containers/SyncStatus/SyncStatus.stories.tsx

@@ -7,7 +7,7 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import { withClientProvider } from '@dxos/react-client/testing';
 import { withTheme } from '@dxos/react-ui/testing';
 
-import { translations } from '../../translations';
+import { translations } from '#translations';
 
 import { SyncStatusIndicator } from './SyncStatus';
 

package/src/containers/SyncStatus/SyncStatus.tsx

@@ -4,18 +4,19 @@
 
 import React, { useEffect, useState } from 'react';
 
-import { StatusBar } from '@dxos/plugin-status-bar';
+import { log } from '@dxos/log';
+import { StatusBar } from '@dxos/plugin-status-bar/components';
 import { EdgeStatus } from '@dxos/protocols/proto/dxos/client/services';
 import { type QueryEdgeStatusResponse } from '@dxos/protocols/proto/dxos/client/services';
 import { useClient } from '@dxos/react-client';
 import { useStream } from '@dxos/react-client/devtools';
 import { type SpaceSyncStateMap, getSyncSummary, useSyncState } from '@dxos/react-client/echo';
-import { Icon, Popover, useTranslation } from '@dxos/react-ui';
-import { mx } from '@dxos/ui-theme';
+import { Icon, IconButton, Popover, useTranslation } from '@dxos/react-ui';
+import { iconSize, mx } from '@dxos/ui-theme';
 import { Unit, type UnitFormat } from '@dxos/util';
 
-import { createClientSaveTracker, getIcon, getStatus } from '../../components';
-import { meta } from '../../meta';
+import { createClientSaveTracker, getIcon, getStatus } from '#components';
+import { meta } from '#meta';
 
 const SYNC_STALLED_TIMEOUT = 5_000;
 
@@ -44,22 +45,25 @@ export const SyncStatusIndicator = ({ state, saved }: { state: SpaceSyncStateMap
     }
 
     const t = setTimeout(() => {
-      // TODO(wittjosiah): Use semantic color tokens.
-      setClassNames('text-orange-500');
+      log.warn('sync stalled', { state });
+      setClassNames('text-error-text');
     }, SYNC_STALLED_TIMEOUT);
-    return () => clearTimeout(t);
-  }, [offline, needsToUpload, needsToDownload]);
 
-  const title = t(`${status} label`);
-  const icon = <Icon icon={getIcon(status)} classNames={classNames} />;
+    return () => {
+      clearTimeout(t);
+      setClassNames(undefined);
+    };
+  }, [offline, needsToUpload, needsToDownload]);
 
   return (
     <Popover.Root>
       <Popover.Trigger asChild>
-        <StatusBar.Item title={title}>{icon}</StatusBar.Item>
+        <StatusBar.Item>
+          <IconButton icon={getIcon(status)} iconOnly label={t(`${status}.label`)} classNames={classNames} />
+        </StatusBar.Item>
       </Popover.Trigger>
       <Popover.Portal>
-        <Popover.Content>
+        <Popover.Content side='left' classNames=''>
           <EdgeConnectionPopover />
           <Popover.Arrow />
         </Popover.Content>
@@ -68,23 +72,18 @@ export const SyncStatusIndicator = ({ state, saved }: { state: SpaceSyncStateMap
   );
 };
 
-const useEdgeStatus = (): EdgeStatus | undefined => {
+const EdgeConnectionPopover = () => {
+  const { t } = useTranslation(meta.id);
   const client = useClient();
   const { status } = useStream(
     () => client.services.services.EdgeAgentService!.queryEdgeStatus(),
     {} as QueryEdgeStatusResponse,
   );
-  return status;
-};
-
-const EdgeConnectionPopover = () => {
-  const status = useEdgeStatus();
-  const { t } = useTranslation(meta.id);
 
   const isConnected = status?.state === EdgeStatus.ConnectionState.CONNECTED;
 
   return (
-    <div className='min-w-[240px] p-2'>
+    <div className='flex flex-col gap-2 w-[240px] p-2' style={iconSize(4)}>
       {/* Connection Status Header */}
       <div className='flex items-center gap-2 mb-2'>
         <Icon
@@ -92,44 +91,41 @@ const EdgeConnectionPopover = () => {
           classNames={mx(isConnected ? 'text-success-text' : 'text-error-text animate-pulse')}
         />
         <span className='font-medium text-sm'>
-          {isConnected ? t('sync edge connected label') : t('sync edge disconnected label')}
+          {isConnected ? t('sync-edge-connected.label') : t('sync-edge-disconnected.label')}
         </span>
       </div>
 
       {/* Connection Details */}
       {status?.state === EdgeStatus.ConnectionState.NOT_CONNECTED && (
-        <div className='flex items-center gap-2 text-sm text-description'>
+        <div className='grid grid-cols-[min-content_1fr_min-content_min-content] gap-2'>
           <Icon icon='ph--cloud-x--regular' />
-          <span>{t('sync no connection label')}</span>
+          <span className='text-description'>{t('sync-no-connection.label')}</span>
         </div>
       )}
 
       {status?.state === EdgeStatus.ConnectionState.CONNECTED && (
-        <div className='space-y-2'>
+        <div className='grid grid-cols-[min-content_1fr_min-content_min-content] gap-2 gap-y-1'>
           {/* Latency */}
-          <div className='flex items-center justify-between text-sm'>
-            <div className='flex items-center gap-2 text-description'>
-              <Icon icon='ph--timer--regular' />
-              <span>{t('sync latency label')}</span>
-            </div>
+          <div className='col-span-full grid grid-cols-subgrid gap-2 items-center text-sm'>
+            <Icon icon='ph--timer--regular' />
+            <span className='text-description'>{t('sync-latency.label')}</span>
+            <div />
             <UnitValue value={status.rtt} format={Unit.Millisecond} />
           </div>
 
           {/* Upload Speed */}
-          <div className='flex items-center justify-between text-sm'>
-            <div className='flex items-center gap-2 text-description'>
-              <Icon icon='ph--arrow-up--regular' />
-              <span>{t('sync upload label')}</span>
-            </div>
+          <div className='col-span-full grid grid-cols-subgrid gap-2 items-center text-sm'>
+            <Icon icon='ph--arrow-up--regular' classNames='text-green-500' />
+            <span className='text-description'>{t('sync-upload.label')}</span>
+            <UnitValue value={status.messagesSent} format={Unit.Thousand} />
             <UnitValue value={status.rateBytesUp} format={Unit.Kilobyte} suffix='/s' />
           </div>
 
           {/* Download Speed */}
-          <div className='flex items-center justify-between text-sm'>
-            <div className='flex items-center gap-2 text-sm text-description'>
-              <Icon icon='ph--arrow-down--regular' />
-              <span>{t('sync download label')}</span>
-            </div>
+          <div className='col-span-full grid grid-cols-subgrid gap-2 items-center text-sm'>
+            <Icon icon='ph--arrow-down--regular' classNames='text-orange-500' />
+            <span className='text-description'>{t('sync-download.label')}</span>
+            <UnitValue value={status.messagesReceived} format={Unit.Thousand} />
             <UnitValue value={status.rateBytesDown} format={Unit.Kilobyte} suffix='/s' />
           </div>
         </div>

package/src/containers/SyncStatus/index.ts

@@ -2,6 +2,4 @@
 // Copyright 2024 DXOS.org
 //
 
-import { SyncStatus } from './SyncStatus';
-
-export default SyncStatus;
+export { SyncStatus as default } from './SyncStatus';