@dxos/plugin-space 0.6.13 → 0.6.14-main.69511f5

package/src/components/SaveStatus.tsx

@@ -0,0 +1,95 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { useEffect, useState } from 'react';
+
+import { type UnsubscribeCallback } from '@dxos/async';
+import { type Client } from '@dxos/client';
+import { type Space, type SpaceId } from '@dxos/client/echo';
+import { Context } from '@dxos/context';
+import { StatusBar } from '@dxos/plugin-status-bar';
+import { useClient } from '@dxos/react-client';
+import { Icon, useTranslation } from '@dxos/react-ui';
+
+import { SPACE_PLUGIN } from '../meta';
+
+export const SaveStatus = () => {
+  const { t } = useTranslation(SPACE_PLUGIN);
+  const client = useClient();
+  const [state, setState] = useState<'saved' | 'saving'>('saved');
+  useEffect(() => {
+    return createClientSaveTracker(client, (state) => {
+      setState(state);
+    });
+  }, []);
+
+  return (
+    <StatusBar.Item title={state === 'saving' ? t('saving label') : t('saved label')}>
+      <Icon icon={state === 'saving' ? 'ph--arrows-clockwise--regular' : 'ph--check-circle--regular'} size={4} />
+    </StatusBar.Item>
+  );
+};
+
+const createClientSaveTracker = (client: Client, cb: (state: 'saved' | 'saving') => void) => {
+  const unsubscribeCallbacks: Record<SpaceId, UnsubscribeCallback> = {};
+  const state: Record<SpaceId, 'saved' | 'saving'> = {};
+
+  const install = (spaces: Space[]) => {
+    for (const space of spaces) {
+      if (state[space.id]) {
+        continue;
+      }
+
+      state[space.id] = 'saved';
+      unsubscribeCallbacks[space.id] = createSpaceSaveTracker(space, (s) => {
+        state[space.id] = s;
+        cb(Object.values(state).some((s) => s === 'saving') ? 'saving' : 'saved');
+      });
+    }
+  };
+  client.spaces.subscribe((spaces) => {
+    install(spaces);
+  });
+  install(client.spaces.get());
+
+  return () => {
+    for (const unsubscribe of Object.values(unsubscribeCallbacks)) {
+      unsubscribe();
+    }
+  };
+};
+
+const createSpaceSaveTracker = (space: Space, cb: (state: 'saved' | 'saving') => void): UnsubscribeCallback => {
+  const ctx = new Context();
+
+  void space.waitUntilReady().then(() => {
+    if (ctx.disposed) {
+      return;
+    }
+
+    let hasUnsavedChanges = false;
+    let lastFlushPromise: Promise<void> | undefined;
+    space.crud.saveStateChanged.on(ctx, ({ unsavedDocuments }) => {
+      hasUnsavedChanges = unsavedDocuments.length > 0;
+    });
+    space.crud.saveStateChanged.debounce(500).on(ctx, () => {
+      if (hasUnsavedChanges) {
+        lastFlushPromise = undefined;
+        cb('saving');
+      } else {
+        const flushPromise = space.crud.flush();
+        lastFlushPromise = flushPromise;
+        void flushPromise.then(() => {
+          if (lastFlushPromise === flushPromise) {
+            cb('saved');
+          }
+        });
+      }
+    });
+  });
+
+  return () => {
+    void ctx.dispose();
+  };
+};

package/src/components/ShareSpaceButton.stories.tsx

@@ -4,20 +4,24 @@
 
 import '@dxos-theme';
 
+import { type Meta } from '@storybook/react';
+
 import { withTheme } from '@dxos/storybook-utils';
 
 import { ShareSpaceButtonImpl } from './ShareSpaceButton';
 import translations from '../translations';
 
-export default {
-  title: 'plugin-space/ShareSpaceButton',
-  component: ShareSpaceButtonImpl,
-  decorators: [withTheme],
-  parameters: { translations },
-};
-
 export const Default = {
   args: {
     onClick: () => console.log('clicked'),
   },
 };
+
+const meta: Meta = {
+  title: 'plugins/plugin-space/ShareSpaceButton',
+  component: ShareSpaceButtonImpl,
+  decorators: [withTheme],
+  parameters: { translations },
+};
+
+export default meta;

package/src/components/SpaceMain/SpaceMain.tsx

@@ -6,35 +6,14 @@ import { Command } from '@phosphor-icons/react';
 import React from 'react';
 
 import { Surface } from '@dxos/app-framework';
-import { type Action } from '@dxos/plugin-graph';
 import { SpaceState, type Space } from '@dxos/react-client/echo';
-import { Button, Main, useTranslation, toLocalizedString } from '@dxos/react-ui';
+import { Main, useTranslation } from '@dxos/react-ui';
 import { getSize, mx, topbarBlockPaddingStart } from '@dxos/react-ui-theme';
 import { ClipboardProvider } from '@dxos/shell/react';
 
 import { SpaceMembersSection } from './SpaceMembersSection';
 import { SPACE_PLUGIN } from '../../meta';
 
-const _InFlowSpaceActions = ({ actionsMap }: { actionsMap: Record<string, Action> }) => {
-  const { t } = useTranslation(SPACE_PLUGIN);
-  return (
-    <section className='mbe-4 col-start-2 col-end-4 md:col-end-7 grid gap-2 auto-rows-min grid-cols-[repeat(auto-fill,minmax(8rem,1fr))]'>
-      {Object.entries(actionsMap)
-        .filter(([_, { properties }]) => properties?.mainAreaDisposition === 'in-flow')
-        .map(([actionId, { data: invoke, properties }]) => {
-          const Icon = properties?.icon;
-          const label = properties?.label;
-          return (
-            <Button key={actionId} classNames='block text-center plb-2 font-normal'>
-              {Icon && <Icon size={5} className='mli-auto' />}
-              <p>{toLocalizedString(label, t)}</p>
-            </Button>
-          );
-        })}
-    </section>
-  );
-};
-
 const KeyShortcuts = () => {
   const { t } = useTranslation(SPACE_PLUGIN);
   return (

package/src/components/SpacePresence.stories.tsx

@@ -2,10 +2,11 @@
 // Copyright 2023 DXOS.org
 //
 
-import React from 'react';
-
 import '@dxos-theme';
 
+import { type Meta } from '@storybook/react';
+import React from 'react';
+
 import { PublicKey } from '@dxos/keys';
 import { HaloSpaceMember, SpaceMember } from '@dxos/react-client/echo';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
@@ -13,13 +14,6 @@ import { withLayout, withTheme } from '@dxos/storybook-utils';
 import { FullPresence, type MemberPresenceProps, SmallPresence, type Member } from './SpacePresence';
 import translations from '../translations';
 
-export default {
-  title: 'plugin-space/SpacePresence',
-  decorators: [withTheme, withLayout({ tooltips: true })],
-  parameters: { translations },
-  actions: { argTypesRegex: '^on.*' },
-};
-
 const nViewers = (n: number, currentlyAttended = true): Member[] =>
   Array.from({ length: n }, () => ({
     role: HaloSpaceMember.Role.ADMIN,
@@ -95,3 +89,11 @@ export const Small = (props: MemberPresenceProps) => {
     </div>
   );
 };
+
+const meta: Meta = {
+  title: 'plugins/plugin-space/SpacePresence',
+  decorators: [withTheme, withLayout({ tooltips: true })],
+  parameters: { translations },
+};
+
+export default meta;

package/src/components/SpacePresence.tsx

@@ -17,13 +17,12 @@ import {
   type Size,
   type ThemedClassName,
   Tooltip,
-  useDensityContext,
   useTranslation,
   List,
   ListItem,
   useDefaultValue,
 } from '@dxos/react-ui';
-import { AttentionGlyph } from '@dxos/react-ui-attention';
+import { AttentionGlyph, useAttention } from '@dxos/react-ui-attention';
 import { ComplexMap, keyToFallback } from '@dxos/util';
 
 import { SPACE_PLUGIN } from '../meta';
@@ -40,7 +39,6 @@ const noViewers = new ComplexMap<PublicKey, ObjectViewerProps>(PublicKey.hash);
 const getName = (identity: Identity) => identity.profile?.displayName ?? generateName(identity.identityKey.toHex());
 
 export const SpacePresence = ({ object, spaceKey }: { object: Expando; spaceKey?: PublicKey }) => {
-  const density = useDensityContext();
   const spacePlugin = usePlugin<SpacePluginProvides>(SPACE_PLUGIN);
   const client = useClient();
   const identity = useIdentity();
@@ -86,11 +84,7 @@ export const SpacePresence = ({ object, spaceKey }: { object: Expando; spaceKey?
     })
     .toSorted((a, b) => a.lastSeen - b.lastSeen);
 
-  return density === 'fine' ? (
-    <SmallPresence count={membersForObject.length} />
-  ) : (
-    <FullPresence members={membersForObject} />
-  );
+  return <FullPresence members={membersForObject} />;
 };
 
 export type Member = SpaceMember & {
@@ -110,7 +104,7 @@ export type MemberPresenceProps = ThemedClassName<{
 
 export const FullPresence = (props: MemberPresenceProps) => {
   const { size = 9, onMemberClick } = props;
-  const members = useDefaultValue(props.members, []);
+  const members = useDefaultValue(props.members, () => []);
 
   if (members.length === 0) {
     return null;
@@ -200,28 +194,45 @@ const PrensenceAvatar = ({ identity, showName, match, group, index, onClick }: P
   );
 };
 
-export const SmallPresenceLive = ({ viewers }: { viewers?: ComplexMap<PublicKey, ObjectViewerProps> }) => {
-  const [moment, setMoment] = useState(Date.now());
+export const SmallPresenceLive = ({
+  id,
+  viewers,
+}: {
+  id?: string;
+  viewers?: ComplexMap<PublicKey, ObjectViewerProps>;
+}) => {
+  const getActiveViewers = (viewers: ComplexMap<PublicKey, ObjectViewerProps>): ObjectViewerProps[] => {
+    const moment = Date.now();
+    return Array.from(viewers.values()).filter(({ lastSeen }) => moment - lastSeen < ACTIVITY_DURATION);
+  };
 
-  // NOTE(thure): This is necessary so Presence updates without any underlying data updating.
-  useEffect(() => {
-    const interval = setInterval(() => setMoment(Date.now()), REFRESH_INTERVAL);
-    return () => clearInterval(interval);
-  }, []);
-
-  const activeViewers = viewers
-    ? Array.from(viewers.values()).filter(({ lastSeen }) => moment - lastSeen < ACTIVITY_DURATION)
-    : [];
+  const [activeViewers, setActiveViewers] = useState(viewers ? getActiveViewers(viewers) : []);
 
-  return <SmallPresence count={activeViewers.length} />;
+  useEffect(() => {
+    if (viewers) {
+      setActiveViewers(getActiveViewers(viewers));
+      const interval = setInterval(() => {
+        setActiveViewers(getActiveViewers(viewers));
+      }, REFRESH_INTERVAL);
+      return () => clearInterval(interval);
+    }
+  }, [viewers]);
+
+  return <SmallPresence id={id} count={activeViewers.length} />;
 };
 
-export const SmallPresence = ({ count }: { count: number }) => {
+export const SmallPresence = ({ id, count }: { id?: string; count: number }) => {
   const { t } = useTranslation(SPACE_PLUGIN);
+  const { hasAttention, isAncestor, isRelated } = useAttention(id);
+  const attention = hasAttention || isAncestor || isRelated;
+
   return (
     <Tooltip.Root>
       <Tooltip.Trigger asChild>
-        <AttentionGlyph presence={count > 1 ? 'many' : count === 1 ? 'one' : 'none'} classNames='self-center mie-1' />
+        {/* TODO(wittjosiah): Don't depend on data attribute just pass prop to AttentionGlyph. */}
+        <div role='none' className='flex' data-attention={attention}>
+          <AttentionGlyph presence={count > 1 ? 'many' : count === 1 ? 'one' : 'none'} classNames='self-center mie-1' />
+        </div>
       </Tooltip.Trigger>
       <Tooltip.Portal>
         <Tooltip.Content side='bottom' classNames='z-[70]'>

package/src/components/SpaceSettings.tsx

@@ -4,20 +4,21 @@
 
 import React from 'react';
 
-import { useIntentDispatcher } from '@dxos/app-framework';
-import { SettingsValue } from '@dxos/plugin-settings';
-import { Input, useTranslation } from '@dxos/react-ui';
+import { useIntentDispatcher, useResolvePlugins } from '@dxos/app-framework';
+import { Input, Select, toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { FormInput } from '@dxos/react-ui-data';
 
 import { SpaceAction, SPACE_PLUGIN } from '../meta';
-import { type SpaceSettingsProps } from '../types';
+import { parseSpaceInitPlugin, type SpaceSettingsProps } from '../types';
 
 export const SpaceSettings = ({ settings }: { settings: SpaceSettingsProps }) => {
   const { t } = useTranslation(SPACE_PLUGIN);
   const dispatch = useIntentDispatcher();
+  const plugins = useResolvePlugins(parseSpaceInitPlugin);
 
   return (
     <>
-      <SettingsValue label={t('show hidden spaces label')}>
+      <FormInput label={t('show hidden spaces label')}>
         <Input.Switch
           checked={settings.showHidden}
           onCheckedChange={(checked) =>
@@ -28,7 +29,35 @@ export const SpaceSettings = ({ settings }: { settings: SpaceSettingsProps }) =>
             })
           }
         />
-      </SettingsValue>
+      </FormInput>
+
+      <FormInput label={t('default on space create label')}>
+        <Select.Root
+          value={settings.onSpaceCreate}
+          onValueChange={(value) => {
+            settings.onSpaceCreate = value;
+          }}
+        >
+          <Select.TriggerButton />
+          <Select.Portal>
+            <Select.Content>
+              <Select.Viewport>
+                {plugins.map(
+                  ({
+                    provides: {
+                      space: { onSpaceCreate },
+                    },
+                  }) => (
+                    <Select.Option key={onSpaceCreate.action} value={onSpaceCreate.action}>
+                      {toLocalizedString(onSpaceCreate.label, t)}
+                    </Select.Option>
+                  ),
+                )}
+              </Select.Viewport>
+            </Select.Content>
+          </Select.Portal>
+        </Select.Root>
+      </FormInput>
     </>
   );
 };

package/src/components/SpaceSettingsPanel.tsx

@@ -0,0 +1,59 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { useCallback, useState } from 'react';
+
+import { log } from '@dxos/log';
+import { EdgeReplicationSetting } from '@dxos/protocols/proto/dxos/echo/metadata';
+import { type Space } from '@dxos/react-client/echo';
+import { Input, useTranslation } from '@dxos/react-ui';
+
+import { SPACE_PLUGIN } from '../meta';
+
+export type SpaceSettingsPanelProps = {
+  space: Space;
+};
+
+export const SpaceSettingsPanel = ({ space }: SpaceSettingsPanelProps) => {
+  const { t } = useTranslation(SPACE_PLUGIN);
+  const [edgeReplication, setEdgeReplication] = useState(
+    space.internal.data.edgeReplication === EdgeReplicationSetting.ENABLED,
+  );
+
+  const toggleEdgeReplication = useCallback(
+    async (next: boolean) => {
+      setEdgeReplication(next);
+      await space?.internal
+        .setEdgeReplicationPreference(next ? EdgeReplicationSetting.ENABLED : EdgeReplicationSetting.DISABLED)
+        .catch((err) => {
+          log.catch(err);
+          setEdgeReplication(!next);
+        });
+    },
+    [space],
+  );
+
+  return (
+    <div role='form' className='flex flex-col w-full p-2 gap-4'>
+      <Input.Root>
+        <div role='none' className='flex flex-col gap-1'>
+          <Input.Label>{t('name label')}</Input.Label>
+          <Input.TextInput
+            placeholder={t('name placeholder')}
+            value={space.properties.name}
+            onChange={(event) => {
+              space.properties.name = event.target.value;
+            }}
+          />
+        </div>
+      </Input.Root>
+      <Input.Root>
+        <div role='none' className='flex justify-between'>
+          <Input.Label>{t('edge replication label')}</Input.Label>
+          <Input.Switch checked={edgeReplication} onCheckedChange={toggleEdgeReplication} />
+        </div>
+      </Input.Root>
+    </div>
+  );
+};

package/src/components/SyncStatus/SyncStatus.stories.tsx

@@ -0,0 +1,65 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxos-theme';
+
+import { type Meta } from '@storybook/react';
+import React from 'react';
+
+import { SpaceId } from '@dxos/keys';
+import { withTheme, withLayout } from '@dxos/storybook-utils';
+
+import { SyncStatusDetail, SyncStatusIndicator } from './SyncStatus';
+import { getSyncSummary, type SpaceSyncStateMap } from './types';
+import translations from '../../translations';
+
+const DefaultStory = (props: any) => {
+  return (
+    <div className='flex flex-col-reverse p-4 '>
+      <SyncStatusIndicator {...props} />
+    </div>
+  );
+};
+
+const random = ({ min, max }: { min: number; max: number }) => min + Math.floor(Math.random() * (max - min));
+
+const state: SpaceSyncStateMap = Array.from({ length: 5 }).reduce<SpaceSyncStateMap>((map) => {
+  const total = random({ min: 10, max: 500 });
+  const haveLocal = random({ min: 0, max: total });
+  const haveRemote = random({ min: 0, max: total });
+  map[SpaceId.random()] = {
+    localDocumentCount: haveLocal,
+    remoteDocumentCount: haveRemote,
+    missingOnLocal: total - haveLocal,
+    missingOnRemote: total - haveRemote,
+    differentDocuments: 0,
+  };
+
+  return map;
+}, {});
+
+export const Default = {
+  args: {
+    state,
+  },
+};
+
+export const Detail = {
+  render: SyncStatusDetail,
+  args: {
+    state,
+    summary: getSyncSummary(state),
+    classNames: 'm-2 w-[200px] border border-separator rounded-md',
+  },
+};
+
+const meta: Meta = {
+  title: 'plugins/plugin-space/SyncStatusIndicator',
+  component: SyncStatusIndicator,
+  render: DefaultStory,
+  decorators: [withTheme, withLayout({ fullscreen: true })],
+  parameters: { translations },
+};
+
+export default meta;

package/src/components/SyncStatus/SyncStatus.tsx

@@ -0,0 +1,188 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { type HTMLAttributes, useEffect, useState } from 'react';
+
+import { StatusBar } from '@dxos/plugin-status-bar';
+import { Icon, Popover, useTranslation } from '@dxos/react-ui';
+import { type ThemedClassName } from '@dxos/react-ui';
+import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
+import { mx } from '@dxos/react-ui-theme';
+
+import { type Progress, type PeerSyncState, type SpaceSyncStateMap, getSyncSummary, useSyncState } from './types';
+import { SPACE_PLUGIN } from '../../meta';
+
+const SYNC_STALLED_TIMEOUT = 5_000;
+
+const styles = {
+  barBg: 'bg-neutral-50 dark:bg-green-900 text-black',
+  barFg: 'bg-neutral-100 bg-green-500',
+  barHover: 'dark:hover:bg-green-500',
+};
+
+export const SyncStatus = () => {
+  const state = useSyncState();
+  return <SyncStatusIndicator state={state} />;
+};
+
+export const SyncStatusIndicator = ({ state }: { state: SpaceSyncStateMap }) => {
+  const summary = getSyncSummary(state);
+  const offline = false;
+
+  const needsToUpload = summary.differentDocuments > 0 || summary.missingOnRemote > 0;
+  const needsToDownload = summary.differentDocuments > 0 || summary.missingOnLocal > 0;
+  const [classNames, setClassNames] = useState<string>();
+  useEffect(() => {
+    setClassNames(undefined);
+    if (!needsToUpload && !needsToDownload) {
+      return;
+    }
+
+    const t = setTimeout(() => {
+      setClassNames('text-orange-500');
+    }, SYNC_STALLED_TIMEOUT);
+    return () => clearTimeout(t);
+  }, [needsToUpload, needsToDownload]);
+
+  return (
+    <StatusBar.Item>
+      <Popover.Root>
+        <Popover.Trigger>
+          <Icon
+            icon={
+              offline
+                ? 'ph--cloud-x--regular'
+                : needsToUpload
+                  ? 'ph--cloud-arrow-up--regular'
+                  : needsToDownload
+                    ? 'ph--cloud-arrow-down--regular'
+                    : 'ph--cloud-check--regular'
+            }
+            size={4}
+            classNames={classNames}
+          />
+        </Popover.Trigger>
+        <Popover.Content sideOffset={16}>
+          <SyncStatusDetail state={state} summary={summary} debug={false} />
+        </Popover.Content>
+      </Popover.Root>
+    </StatusBar.Item>
+  );
+};
+
+export const SyncStatusDetail = ({
+  classNames,
+  state,
+  summary,
+  debug,
+}: ThemedClassName<{
+  state: SpaceSyncStateMap;
+  summary: PeerSyncState;
+  debug?: boolean;
+}>) => {
+  const { t } = useTranslation(SPACE_PLUGIN);
+  const entries = Object.entries(state).sort(([a], [b]) => (a < b ? -1 : a > b ? 1 : 0));
+
+  // TODO(burdon): Normalize to max document count?
+  return (
+    <div className={mx('flex flex-col text-xs min-w-[16rem]', classNames)}>
+      <h1 className='p-2'>{t('sync status title')}</h1>
+      <div className='flex flex-col gap-[2px] my-[2px]'>
+        {entries.map(([spaceId, state]) => (
+          <SpaceRow key={spaceId} spaceId={spaceId} state={state} />
+        ))}
+      </div>
+      {debug && <SyntaxHighlighter language='json'>{JSON.stringify(summary, null, 2)}</SyntaxHighlighter>}
+    </div>
+  );
+};
+
+const useActive = (count: number) => {
+  const [current, setCurrent] = useState(count);
+  const [active, setActive] = useState(false);
+  useEffect(() => {
+    let t: NodeJS.Timeout | undefined;
+    if (count !== current) {
+      setActive(true);
+      setCurrent(count);
+      t && clearTimeout(t);
+      t = setTimeout(() => {
+        setActive(false);
+      }, SYNC_STALLED_TIMEOUT);
+    }
+
+    return () => {
+      setActive(false);
+      clearTimeout(t);
+    };
+  }, [count, current]);
+  return active;
+};
+
+const SpaceRow = ({
+  spaceId,
+  state: { localDocumentCount, remoteDocumentCount, missingOnLocal, missingOnRemote },
+}: {
+  spaceId: string;
+  state: PeerSyncState;
+}) => {
+  const downActive = useActive(localDocumentCount);
+  const upActive = useActive(remoteDocumentCount);
+
+  return (
+    <div
+      className={mx('flex items-center mx-[2px] gap-[2px] cursor-pointer', styles.barHover)}
+      title={spaceId}
+      onClick={() => {
+        void navigator.clipboard.writeText(spaceId);
+      }}
+    >
+      <Icon
+        icon='ph--arrow-fat-line-left--regular'
+        size={3}
+        classNames={mx(downActive && 'animate-[pulse_1s_infinite]')}
+      />
+      <Candle
+        up={{ count: remoteDocumentCount, total: remoteDocumentCount + missingOnRemote }}
+        down={{ count: localDocumentCount, total: localDocumentCount + missingOnLocal }}
+        title={spaceId}
+      />
+      <Icon
+        icon='ph--arrow-fat-line-right--regular'
+        size={3}
+        classNames={mx(upActive && 'animate-[pulse_1s_step-start_infinite]')}
+      />
+    </div>
+  );
+};
+
+type CandleProps = ThemedClassName<Pick<HTMLAttributes<HTMLDivElement>, 'title'>> & { up: Progress; down: Progress };
+
+const Candle = ({ classNames, up, down }: CandleProps) => {
+  return (
+    <div className={mx('grid grid-cols-[1fr_2rem_1fr] w-full h-3', classNames)}>
+      <Bar classNames='justify-end' {...up} />
+      <div className='relative'>
+        <div className={mx('absolute inset-0 flex items-center justify-center text-xs', styles.barBg)}>{up.total}</div>
+      </div>
+      <Bar {...down} />
+    </div>
+  );
+};
+
+const Bar = ({ classNames, count, total }: ThemedClassName<Progress>) => {
+  let p = (count / total) * 100;
+  if (count < total) {
+    p = Math.min(p, 95);
+  }
+
+  return (
+    <div className={mx('relative flex w-full', styles.barBg, classNames)}>
+      <div className={mx('shrink-0', styles.barFg)} style={{ width: `${p}%` }}></div>
+      {count !== total && (
+        <div className='absolute top-0 bottom-0 flex items-center mx-0.5 text-black text-xs'>{count}</div>
+      )}
+    </div>
+  );
+};

package/src/components/SyncStatus/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export * from './SyncStatus';