@dxos/react-ui 0.1.20 → 0.1.22

package/dist/types/src/layouts/PanelPopover/index.d.ts

@@ -0,0 +1,2 @@
+export * from './PanelPopover';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/src/layouts/PanelPopover/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/layouts/PanelPopover/index.ts"],"names":[],"mappings":"AAIA,cAAc,gBAAgB,CAAC"}

package/dist/types/src/layouts/PanelSidebar/PanelSidebar.d.ts

@@ -0,0 +1,20 @@
+import React, { ComponentProps, Dispatch, Fragment, PropsWithChildren, SetStateAction } from 'react';
+export declare type PanelSidebarState = 'show' | 'hide';
+export declare const sidebarWidth = 272;
+export interface PanelSidebarContextValue {
+    setDisplayState: Dispatch<SetStateAction<PanelSidebarState>>;
+    displayState: PanelSidebarState;
+}
+export declare const PanelSidebarContext: React.Context<PanelSidebarContextValue>;
+export declare const useTogglePanelSidebar: () => () => void;
+export interface PanelSidebarProviderSlots {
+    content?: ComponentProps<typeof Fragment>;
+    fixedBlockStart?: ComponentProps<'div'>;
+    fixedBlockEnd?: ComponentProps<'div'>;
+}
+export interface PanelSidebarProviderProps {
+    inlineStart?: boolean;
+    slots?: PanelSidebarProviderSlots;
+}
+export declare const PanelSidebarProvider: ({ children, slots }: PropsWithChildren<PanelSidebarProviderProps>) => JSX.Element;
+//# sourceMappingURL=PanelSidebar.d.ts.map

package/dist/types/src/layouts/PanelSidebar/PanelSidebar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PanelSidebar.d.ts","sourceRoot":"","sources":["../../../../../src/layouts/PanelSidebar/PanelSidebar.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,EACZ,cAAc,EAEd,QAAQ,EACR,QAAQ,EACR,iBAAiB,EACjB,cAAc,EAIf,MAAM,OAAO,CAAC;AAIf,oBAAY,iBAAiB,GAAG,MAAM,GAAG,MAAM,CAAC;AAEhD,eAAO,MAAM,YAAY,MAAM,CAAC;AAEhC,MAAM,WAAW,wBAAwB;IACvC,eAAe,EAAE,QAAQ,CAAC,cAAc,CAAC,iBAAiB,CAAC,CAAC,CAAC;IAC7D,YAAY,EAAE,iBAAiB,CAAC;CACjC;AAED,eAAO,MAAM,mBAAmB,yCAG9B,CAAC;AAEH,eAAO,MAAM,qBAAqB,kBAKjC,CAAC;AAEF,MAAM,WAAW,yBAAyB;IACxC,OAAO,CAAC,EAAE,cAAc,CAAC,OAAO,QAAQ,CAAC,CAAC;IAC1C,eAAe,CAAC,EAAE,cAAc,CAAC,KAAK,CAAC,CAAC;IACxC,aAAa,CAAC,EAAE,cAAc,CAAC,KAAK,CAAC,CAAC;CACvC;AAED,MAAM,WAAW,yBAAyB;IACxC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,yBAAyB,CAAC;CACnC;AAED,eAAO,MAAM,oBAAoB,wBAAyB,kBAAkB,yBAAyB,CAAC,gBA0ErG,CAAC"}

package/dist/types/src/layouts/PanelSidebar/index.d.ts

@@ -0,0 +1,2 @@
+export * from './PanelSidebar';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/src/layouts/PanelSidebar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/layouts/PanelSidebar/index.ts"],"names":[],"mappings":"AAIA,cAAc,gBAAgB,CAAC"}

package/dist/types/src/layouts/index.d.ts

@@ -0,0 +1,3 @@
+export * from './PanelPopover';
+export * from './PanelSidebar';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/src/layouts/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/layouts/index.ts"],"names":[],"mappings":"AAIA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC"}

package/dist/types/src/panels/IdentityPanel/IdentityPanel.d.ts

@@ -0,0 +1,6 @@
+import type { Profile } from '@dxos/client';
+export declare const IdentityPanel: ({ identity, onClickManageProfile }: {
+    identity: Profile;
+    onClickManageProfile?: (() => void) | undefined;
+}) => JSX.Element;
+//# sourceMappingURL=IdentityPanel.d.ts.map

package/dist/types/src/panels/IdentityPanel/IdentityPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IdentityPanel.d.ts","sourceRoot":"","sources":["../../../../../src/panels/IdentityPanel/IdentityPanel.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAI5C,eAAO,MAAM,aAAa;cAId,OAAO;kCACY,IAAI;iBAwBlC,CAAC"}

package/dist/types/src/panels/IdentityPanel/index.d.ts

@@ -0,0 +1,2 @@
+export * from './IdentityPanel';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/src/panels/IdentityPanel/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/panels/IdentityPanel/index.ts"],"names":[],"mappings":"AAIA,cAAc,iBAAiB,CAAC"}

package/dist/types/src/panels/index.d.ts

@@ -0,0 +1,2 @@
+export * from './IdentityPanel';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/src/panels/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/panels/index.ts"],"names":[],"mappings":"AAIA,cAAc,iBAAiB,CAAC"}

package/dist/types/src/styles/index.d.ts

@@ -1,12 +1,2 @@
-export * from './active';
-export * from './disabled';
-export * from './focus';
-export * from './group';
-export * from './hover';
-export * from './ornament';
-export * from './shimmer';
-export * from './size';
-export * from './text';
-export * from './valence';
-export * from './input';
+export * from './panelStyles';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/src/styles/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/styles/index.ts"],"names":[],"mappings":"AAIA,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/styles/index.ts"],"names":[],"mappings":"AAIA,cAAc,eAAe,CAAC"}

package/dist/types/src/styles/panelStyles.d.ts

@@ -0,0 +1,3 @@
+export declare const defaultPanel = "p-2 backdrop-blur-md bg-neutral-50/[.66] dark:bg-neutral-950/[.66]";
+export declare const defaultArrow = "text-neutral-50/[.66] dark:text-neutral-950/[.66]";
+//# sourceMappingURL=panelStyles.d.ts.map

package/dist/types/src/styles/panelStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"panelStyles.d.ts","sourceRoot":"","sources":["../../../../src/styles/panelStyles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,YAAY,uEAAuE,CAAC;AACjG,eAAO,MAAM,YAAY,sDAAsD,CAAC"}

package/dist/types/src/testing/ClientProvider.d.ts

@@ -0,0 +1,3 @@
+import { PropsWithChildren } from 'react';
+export declare const ClientProvider: ({ children }: PropsWithChildren<{}>) => JSX.Element;
+//# sourceMappingURL=ClientProvider.d.ts.map

package/dist/types/src/testing/ClientProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ClientProvider.d.ts","sourceRoot":"","sources":["../../../../src/testing/ClientProvider.tsx"],"names":[],"mappings":"AAIA,OAAc,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAOjD,eAAO,MAAM,cAAc,iBAAkB,kBAAkB,EAAE,CAAC,gBAMjE,CAAC"}

package/dist/types/src/testing/index.d.ts

@@ -1,2 +1,2 @@
-export * from './templateForComponent';
+export * from './ClientProvider';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/src/testing/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/testing/index.ts"],"names":[],"mappings":"AAIA,cAAc,wBAAwB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/testing/index.ts"],"names":[],"mappings":"AAIA,cAAc,kBAAkB,CAAC"}

package/dist/types/src/translations/index.d.ts

@@ -0,0 +1,5 @@
+import * as enUS from './locales/en-US';
+export declare const osTranslations: {
+    'en-US': typeof enUS;
+};
+//# sourceMappingURL=index.d.ts.map

package/dist/types/src/translations/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/translations/index.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,IAAI,MAAM,iBAAiB,CAAC;AAExC,eAAO,MAAM,cAAc;;CAAoB,CAAC"}

package/dist/types/src/translations/locales/en-US.d.ts

@@ -0,0 +1,6 @@
+export declare const os: {
+    'manage profile label': string;
+    'identity offline description': string;
+    'sidebar label': string;
+};
+//# sourceMappingURL=en-US.d.ts.map

package/dist/types/src/translations/locales/en-US.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"en-US.d.ts","sourceRoot":"","sources":["../../../../../src/translations/locales/en-US.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,EAAE;;;;CAId,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dxos/react-ui",
-  "version": "0.1.20",
-  "description": "Vite plugin which configures a low-level design system for DXOS.",
+  "version": "0.1.22",
+  "description": "A React component library for DXOS’s OS experiences",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
   "license": "MIT",
@@ -10,47 +10,31 @@
   "types": "dist/types/src/index.d.ts",
   "files": [
     "dist",
-    "src",
-    "plugin.js",
-    "plugin.d.ts"
+    "src"
   ],
   "dependencies": {
-    "@fontsource/fira-code": "^4.5.12",
-    "@fontsource/roboto-flex": "^4.5.2",
-    "@fontsource/space-grotesk": "^4.5.10",
-    "@headlessui/react": "^1.7.3",
-    "@radix-ui/react-alert-dialog": "^1.0.2",
-    "@radix-ui/react-avatar": "^1.0.1",
     "@radix-ui/react-dialog": "^1.0.0",
-    "@radix-ui/react-navigation-menu": "^1.1.1",
-    "@radix-ui/react-popover": "^1.0.2",
-    "@radix-ui/react-portal": "^1.0.1",
-    "@radix-ui/react-toast": "^1.1.1",
-    "@radix-ui/react-toolbar": "^1.0.1",
-    "@radix-ui/react-tooltip": "^1.0.2",
-    "@tailwindcss/forms": "^0.5.3",
-    "alea": "^1.0.1",
-    "autoprefixer": "^10.4.12",
-    "jdenticon": "^3.2.0",
-    "postcss": "^8.4.17",
-    "qrcode.react": "^3.1.0",
-    "rci": "^0.0.3",
-    "tailwind-merge": "^1.8.0",
-    "tailwindcss": "^3.1.8",
-    "tailwindcss-logical": "^3.0.0",
-    "tailwindcss-radix": "^2.6.0"
+    "@react-hook/async": "^3.1.1",
+    "debug": "^4.3.3",
+    "url-join": "^5.0.0",
+    "@dxos/client": "0.1.22",
+    "@dxos/config": "0.1.22",
+    "@dxos/debug": "0.1.22",
+    "@dxos/keys": "0.1.22",
+    "@dxos/react-client": "0.1.22",
+    "@dxos/react-components": "0.1.22",
+    "@dxos/util": "0.1.22"
   },
   "devDependencies": {
+    "@types/debug": "^4.1.7",
     "@types/react": "^18.0.21",
     "@types/react-dom": "^18.0.6",
-    "@vitejs/plugin-react": "^2.0.1",
-    "esbuild": "^0.15.1",
-    "esbuild-style-plugin": "^1.6.0",
+    "@vitejs/plugin-react": "^3.0.1",
     "phosphor-react": "^1.4.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "storybook-dark-mode": "^1.1.2",
-    "vite": "3.2.5"
+    "vite": "4.0.4"
   },
   "peerDependencies": {
     "phosphor-react": "^1.4.1",

package/src/components/IdentityListItem/IdentityListItem.stories.tsx

@@ -0,0 +1,23 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import '@dxosTheme';
+
+import { IdentityListItem } from './IdentityListItem';
+
+export default {
+  component: IdentityListItem
+};
+
+export const Default = {
+  args: {
+    identity: {
+      identityKey: {
+        toHex: () => '888',
+        truncate: () => '888..888'
+      }
+    },
+    presence: 0
+  }
+};

package/src/components/IdentityListItem/IdentityListItem.tsx

@@ -0,0 +1,32 @@
+//
+// Copyright 2023 DXOS.org
+//
+import React from 'react';
+
+import { Profile, SpaceMember } from '@dxos/client';
+import { Avatar, useTranslation } from '@dxos/react-components';
+
+export const IdentityListItem = ({ identity, presence }: { identity: Profile; presence?: SpaceMember['presence'] }) => {
+  const { t } = useTranslation('os');
+  return (
+    <li className='flex gap-2'>
+      <Avatar
+        {...{
+          size: 9,
+          fallbackValue: identity.identityKey.toHex(),
+          label: <p className='text-sm'>{identity.displayName ?? identity.identityKey.truncate()}</p>,
+          ...(presence === SpaceMember.PresenceState.OFFLINE && {
+            status: 'inactive',
+            description: (
+              <p className='font-system-normal text-xs text-neutral-700 dark:text-neutral-300'>
+                {t('identity offline description')}
+              </p>
+            )
+          }),
+          ...(presence === SpaceMember.PresenceState.ONLINE && { status: 'active' }),
+          slots: { labels: { className: 'block' } }
+        }}
+      />
+    </li>
+  );
+};

package/src/composites/IdentityPopover/IdentityPopover.tsx

@@ -0,0 +1,54 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, { ComponentProps } from 'react';
+
+import { Profile } from '@dxos/client';
+import { Avatar, mx } from '@dxos/react-components';
+
+import { PanelPopover } from '../../layouts';
+import { IdentityPanel } from '../../panels';
+
+export interface IdentityPopoverProps extends Partial<ComponentProps<typeof PanelPopover>> {
+  identity: Profile;
+  onClickManageProfile?: () => void;
+}
+
+export const IdentityPopover = ({
+  identity,
+  openTrigger,
+  slots,
+  triggerIsInToolbar = true,
+  onClickManageProfile,
+  ...popoverProps
+}: IdentityPopoverProps) => {
+  return (
+    <PanelPopover
+      {...popoverProps}
+      openTrigger={
+        openTrigger ?? (
+          <Avatar
+            size={10}
+            variant='circle'
+            fallbackValue={identity.identityKey.toHex()}
+            label={identity.displayName ?? ''}
+          />
+        )
+      }
+      slots={{
+        ...slots,
+        trigger: {
+          ...slots?.trigger,
+          className: mx(
+            'flex justify-self-end pointer-events-auto bg-white dark:bg-neutral-700 p-0.5 button-elevation rounded-full',
+            slots?.trigger?.className
+          )
+        }
+      }}
+      triggerIsInToolbar={triggerIsInToolbar}
+    >
+      <IdentityPanel {...{ identity, onClickManageProfile }} />
+    </PanelPopover>
+  );
+};

package/src/composites/IdentityPopover/index.ts

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

package/src/composites/index.ts

@@ -0,0 +1,4 @@
+//
+// Copyright 2022 DXOS.org
+//
+export * from './IdentityPopover';

package/src/index.ts

@@ -2,8 +2,8 @@
 // Copyright 2022 DXOS.org
 //
 
-export * from './components';
-export * from './hooks';
-export * from './props';
+export * from './composites';
+export * from './layouts';
+export * from './panels';
 export * from './styles';
-export * from './util';
+export * from './translations';

package/src/layouts/PanelPopover/PanelPopover.tsx

@@ -0,0 +1,40 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import React, { ComponentProps } from 'react';
+
+import { mx, Popover } from '@dxos/react-components';
+
+import { defaultPanel, defaultArrow } from '../../styles';
+
+/**
+ * This component essentially sets default styles for popovers which have panels as their content
+ * @param slots
+ * @param children
+ * @param popoverProps
+ * @constructor
+ */
+export const PanelPopover = ({ slots, children, ...popoverProps }: ComponentProps<typeof Popover>) => {
+  return (
+    <Popover
+      slots={{
+        arrow: { ...slots?.arrow, className: mx(defaultArrow, slots?.arrow?.className) },
+        content: {
+          collisionPadding: 8,
+          sideOffset: 4,
+          ...slots?.content,
+          className: mx(defaultPanel, slots?.content?.className)
+        },
+        trigger: {
+          ...slots?.trigger,
+          className: mx('', slots?.trigger?.className)
+        },
+        ...slots
+      }}
+      {...popoverProps}
+    >
+      {children}
+    </Popover>
+  );
+};

package/src/layouts/PanelPopover/index.ts

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

package/src/layouts/PanelSidebar/PanelSidebar.tsx

@@ -0,0 +1,126 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import React, {
+  ComponentProps,
+  createContext,
+  Dispatch,
+  Fragment,
+  PropsWithChildren,
+  SetStateAction,
+  useCallback,
+  useContext,
+  useState
+} from 'react';
+
+import { defaultOverlay, mx, useMediaQuery, useTranslation } from '@dxos/react-components';
+
+export type PanelSidebarState = 'show' | 'hide';
+
+export const sidebarWidth = 272;
+
+export interface PanelSidebarContextValue {
+  setDisplayState: Dispatch<SetStateAction<PanelSidebarState>>;
+  displayState: PanelSidebarState;
+}
+
+export const PanelSidebarContext = createContext<PanelSidebarContextValue>({
+  displayState: 'hide',
+  setDisplayState: () => {}
+});
+
+export const useTogglePanelSidebar = () => {
+  const { displayState, setDisplayState } = useContext(PanelSidebarContext);
+  return useCallback(() => {
+    setDisplayState(displayState === 'hide' ? 'show' : 'hide');
+  }, [displayState]);
+};
+
+export interface PanelSidebarProviderSlots {
+  content?: ComponentProps<typeof Fragment>;
+  fixedBlockStart?: ComponentProps<'div'>;
+  fixedBlockEnd?: ComponentProps<'div'>;
+}
+
+export interface PanelSidebarProviderProps {
+  inlineStart?: boolean;
+  slots?: PanelSidebarProviderSlots;
+}
+
+export const PanelSidebarProvider = ({ children, slots }: PropsWithChildren<PanelSidebarProviderProps>) => {
+  const { t } = useTranslation('os');
+  const [displayState, setInternalDisplayState] = useState<PanelSidebarState>('hide');
+  const [transitionShow, setTransitionShow] = useState(false);
+  const isOpen = displayState === 'show';
+
+  const [isLg] = useMediaQuery('lg');
+
+  const internalHide = () => {
+    setTransitionShow(false);
+    setTimeout(() => {
+      setInternalDisplayState('hide');
+    }, 200);
+  };
+
+  const internalShow = () => {
+    setInternalDisplayState('show');
+    setTimeout(() => {
+      setTransitionShow(true);
+      // todo (thure): this may be a race condition in certain situations
+    }, 0);
+  };
+
+  const setDisplayState = (displayState: SetStateAction<PanelSidebarState>) =>
+    displayState === 'show' ? internalShow() : internalHide();
+
+  return (
+    <PanelSidebarContext.Provider value={{ setDisplayState, displayState }}>
+      <DialogPrimitive.Root open={isOpen} modal={!isLg}>
+        <DialogPrimitive.Content
+          className={mx(
+            'fixed block-start-0 block-end-0 is-[272px] z-50 transition-[inset-inline-start,inset-inline-end] duration-200 ease-in-out',
+            'bg-neutral-50 dark:bg-neutral-950',
+            transitionShow ? 'inline-start-0' : `inline-start-[-${sidebarWidth}px]`
+          )}
+        >
+          <DialogPrimitive.Title className='sr-only'>{t('sidebar label')}</DialogPrimitive.Title>
+          <Fragment {...slots?.content} />
+        </DialogPrimitive.Content>
+        {slots?.fixedBlockStart && (
+          <div
+            role='none'
+            {...slots?.fixedBlockStart}
+            className={mx(
+              'fixed inline-end-0 block-start-0 z-[49] transition-[inset-inline-start,inset-inline-end] duration-200 ease-in-out',
+              transitionShow ? 'inline-start-[272px]' : 'inline-start-0',
+              slots?.fixedBlockStart?.className
+            )}
+          >
+            {slots?.fixedBlockStart?.children}
+          </div>
+        )}
+        {!isLg && (
+          <DialogPrimitive.Overlay
+            className={mx(
+              defaultOverlay,
+              'transition-opacity duration-200 ease-in-out',
+              transitionShow ? 'opacity-100' : 'opacity-0'
+            )}
+            onClick={internalHide}
+          />
+        )}
+        <div
+          role='none'
+          className={mx(
+            'bs-full transition-[padding-inline-start] duration-200 ease-in-out',
+            isLg && isOpen ? 'pis-[272px]' : 'pis-0'
+          )}
+        >
+          {children}
+        </div>
+      </DialogPrimitive.Root>
+    </PanelSidebarContext.Provider>
+  );
+};

package/src/layouts/PanelSidebar/index.ts

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

package/src/layouts/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './PanelPopover';
+export * from './PanelSidebar';

package/src/panels/IdentityPanel/IdentityPanel.tsx

@@ -0,0 +1,39 @@
+//
+// Copyright 2023 DXOS.org
+//
+import React from 'react';
+
+import type { Profile } from '@dxos/client';
+import { useClient } from '@dxos/react-client';
+import { Avatar, Button, ThemeContext, useTranslation } from '@dxos/react-components';
+
+export const IdentityPanel = ({
+  identity,
+  onClickManageProfile
+}: {
+  identity: Profile;
+  onClickManageProfile?: () => void;
+}) => {
+  const { t } = useTranslation('os');
+  const client = useClient();
+  const defaultManageProfile = () => {
+    const remoteSource = new URL(client?.config.get('runtime.client.remoteSource') || 'https://halo.dxos.org');
+    const tab = window.open(remoteSource.origin, '_blank');
+    tab?.focus();
+  };
+  return (
+    <ThemeContext.Provider value={{ themeVariant: 'os' }}>
+      <div className='flex flex-col gap-2 justify-center items-center'>
+        <Avatar
+          size={16}
+          variant='circle'
+          fallbackValue={identity.identityKey.toHex()}
+          label={identity.displayName ?? ''}
+        />
+        <Button compact onClick={onClickManageProfile ?? defaultManageProfile} className='is-full'>
+          {t('manage profile label')}
+        </Button>
+      </div>
+    </ThemeContext.Provider>
+  );
+};

package/src/panels/IdentityPanel/index.ts

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

package/src/panels/index.ts

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

package/src/styles/index.ts

@@ -1,15 +1,5 @@
 //
-// Copyright 2022 DXOS.org
+// Copyright 2023 DXOS.org
 //
 
-export * from './active';
-export * from './disabled';
-export * from './focus';
-export * from './group';
-export * from './hover';
-export * from './ornament';
-export * from './shimmer';
-export * from './size';
-export * from './text';
-export * from './valence';
-export * from './input';
+export * from './panelStyles';

package/src/styles/panelStyles.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export const defaultPanel = 'p-2 backdrop-blur-md bg-neutral-50/[.66] dark:bg-neutral-950/[.66]';
+export const defaultArrow = 'text-neutral-50/[.66] dark:text-neutral-950/[.66]';

package/src/testing/ClientProvider.tsx

@@ -0,0 +1,18 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import React, { PropsWithChildren } from 'react';
+
+import { Config, Defaults, Dynamics } from '@dxos/config';
+import { ClientProvider as NaturalClientProvider } from '@dxos/react-client';
+
+const configProvider = async () => new Config(await Dynamics(), Defaults());
+
+export const ClientProvider = ({ children }: PropsWithChildren<{}>) => {
+  return (
+    <NaturalClientProvider config={configProvider} fallback={<span>Starting client…</span>}>
+      {children}
+    </NaturalClientProvider>
+  );
+};