@dxos/shell 0.4.10-main.f68a1ca → 0.4.10-main.f937af6

package/dist/types/src/translations/locales/en-US.js

@@ -47,8 +47,6 @@ exports.os = {
     'connected status label': 'Enter confirmation PIN',
     'authenticating status label': 'Enter confirmation PIN',
     'success status label': 'Success',
-    'connect label': 'Connect',
-    'reconnect label': 'Reconnect',
     'cancel label': 'Cancel',
     'done label': 'Done',
     'reset label': 'Start over',
@@ -131,5 +129,17 @@ exports.os = {
     'fuchsia label': 'Fuchsia',
     'pink label': 'Pink',
     'rose label': 'Rose',
+    'current device tag label': 'This device',
+    'device name placeholder': '{{platform}} on {{os}}',
+    'more options label': 'More options',
+    'disconnect label': 'Currently online. Click to go offline.',
+    'connect label': 'Currently offline. Click to go online.',
+    'edit device label': 'Edit device name & avatar',
+    'agent heading': 'Agent',
+    'agent message title': 'About creating an agent',
+    'agent message body': 'Creating an agent helps keep your devices and peers in-sync. An agent is like any other device, but since it’s always online your changes will sync even when all your physical devices are asleep.',
+    'create agent label': 'Start an agent',
+    'destroy agent label': 'Shut down agent',
+    'agent device label': 'Your agent',
 };
 //# sourceMappingURL=en-US.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"en-US.js","sourceRoot":"","sources":["../../../../../src/translations/locales/en-US.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"en-US.js","sourceRoot":"","sources":["../../../../../src/translations/locales/en-US.ts"],"names":[],"mappings":"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"}

package/dist/types/src/types/index.js

@@ -19,4 +19,5 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./FailReason"), exports);
 __exportStar(require("./IInvitation"), exports);
+// This comment is here to bust NX cache. Remove it after the code changes.
 //# sourceMappingURL=index.js.map

package/dist/types/src/types/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/types/index.ts"],"names":[],"mappings":";AAAA,EAAE;AACF,0BAA0B;AAC1B,EAAE;;;;;;;;;;;;;;;;AAEF,+CAA6B;AAC7B,gDAA8B"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/types/index.ts"],"names":[],"mappings":";AAAA,EAAE;AACF,0BAA0B;AAC1B,EAAE;;;;;;;;;;;;;;;;AAEF,+CAA6B;AAC7B,gDAA8B;AAE9B,2EAA2E"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/shell",
-  "version": "0.4.10-main.f68a1ca",
+  "version": "0.4.10-main.f937af6",
   "description": "DXOS’s OS experiences",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -42,34 +42,35 @@
     "react-qr-rounded": "^1.0.0",
     "url-join": "^5.0.0",
     "xstate": "^4.37.0",
-    "@dxos/async": "0.4.10-main.f68a1ca",
-    "@dxos/client-services": "0.4.10-main.f68a1ca",
-    "@dxos/client-protocol": "0.4.10-main.f68a1ca",
-    "@dxos/debug": "0.4.10-main.f68a1ca",
-    "@dxos/display-name": "0.4.10-main.f68a1ca",
-    "@dxos/invariant": "0.4.10-main.f68a1ca",
-    "@dxos/react-client": "0.4.10-main.f68a1ca",
-    "@dxos/react-ui-theme": "0.4.10-main.f68a1ca",
-    "@dxos/log": "0.4.10-main.f68a1ca",
-    "@dxos/react-ui": "0.4.10-main.f68a1ca",
-    "@dxos/rpc-tunnel": "0.4.10-main.f68a1ca",
-    "@dxos/util": "0.4.10-main.f68a1ca",
-    "@dxos/react-ui-types": "0.4.10-main.f68a1ca"
+    "@dxos/async": "0.4.10-main.f937af6",
+    "@dxos/client-protocol": "0.4.10-main.f937af6",
+    "@dxos/client-services": "0.4.10-main.f937af6",
+    "@dxos/display-name": "0.4.10-main.f937af6",
+    "@dxos/debug": "0.4.10-main.f937af6",
+    "@dxos/invariant": "0.4.10-main.f937af6",
+    "@dxos/react-client": "0.4.10-main.f937af6",
+    "@dxos/log": "0.4.10-main.f937af6",
+    "@dxos/react-ui-theme": "0.4.10-main.f937af6",
+    "@dxos/react-ui": "0.4.10-main.f937af6",
+    "@dxos/react-ui-types": "0.4.10-main.f937af6",
+    "@dxos/util": "0.4.10-main.f937af6",
+    "@dxos/rpc-tunnel": "0.4.10-main.f937af6"
   },
   "devDependencies": {
-    "@phosphor-icons/react": "^2.0.5",
+    "@phosphor-icons/react": "^2.1.5",
     "@types/react": "^18.0.21",
     "@types/react-dom": "^18.0.6",
     "@vitejs/plugin-react": "^4.2.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "vite": "^5.1.5",
+    "vite": "^5.2.9",
     "vite-plugin-turbosnap": "^1.0.2",
-    "@dxos/config": "0.4.10-main.f68a1ca",
-    "@dxos/random": "0.4.10-main.f68a1ca",
-    "@dxos/storybook-utils": "0.4.10-main.f68a1ca",
-    "@dxos/react-async": "0.4.10-main.f68a1ca",
-    "@dxos/react-ui-theme": "0.4.10-main.f68a1ca"
+    "@dxos/config": "0.4.10-main.f937af6",
+    "@dxos/protocols": "0.4.10-main.f937af6",
+    "@dxos/random": "0.4.10-main.f937af6",
+    "@dxos/storybook-utils": "0.4.10-main.f937af6",
+    "@dxos/react-async": "0.4.10-main.f937af6",
+    "@dxos/react-ui-theme": "0.4.10-main.f937af6"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.0.5",

package/src/components/AgentConfig.tsx

@@ -0,0 +1,66 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { Database, Plus, Power } from '@phosphor-icons/react';
+import React from 'react';
+
+import { Avatar, Button, Tooltip, useTranslation } from '@dxos/react-ui';
+import { descriptionText, getSize, mx } from '@dxos/react-ui-theme';
+
+import { type AgentFormProps } from './DeviceList';
+
+export const AgentConfig = ({ agentActive, agentStatus, onAgentDestroy, onAgentCreate }: AgentFormProps) => {
+  const { t } = useTranslation('os');
+  return (
+    <>
+      <h2 className={mx(descriptionText, 'text-center mbs-4')}>{t('agent heading')}</h2>
+      {agentActive ? (
+        <div role='group' className='flex gap-2 items-center'>
+          <Avatar.Root status={agentStatus ? 'active' : 'inactive'} variant='square'>
+            <Avatar.Frame classNames='place-self-center'>
+              <Database weight='duotone' width={24} height={24} x={8} y={8} />
+            </Avatar.Frame>
+            <Avatar.Label classNames='flex-1 text-sm truncate'>{t('agent device label')}</Avatar.Label>
+          </Avatar.Root>
+          <Tooltip.Root>
+            <Tooltip.Trigger asChild>
+              <Button
+                variant='ghost'
+                classNames='pli-0 is-[--rail-action] bs-[--rail-action]'
+                data-testid='agent.destroy'
+                onClick={onAgentDestroy}
+              >
+                <span className='sr-only'>{t('destroy agent label')}</span>
+                <Power className={getSize(5)} />
+              </Button>
+            </Tooltip.Trigger>
+            <Tooltip.Portal>
+              <Tooltip.Content side='bottom' classNames='z-50'>
+                {t('destroy agent label')}
+              </Tooltip.Content>
+            </Tooltip.Portal>
+          </Tooltip.Root>
+        </div>
+      ) : (
+        <>
+          <Button
+            variant='ghost'
+            classNames='mlb-2 is-full justify-start gap-2 !pis-0 !pie-3'
+            data-testid='devices-panel.create-agent'
+            onClick={onAgentCreate}
+            aria-describedby='devices-panel.create-agent.description'
+          >
+            <div role='img' className={mx(getSize(8), 'm-1 rounded-sm surface-input grid place-items-center')}>
+              <Plus weight='light' className={getSize(6)} />
+            </div>
+            <span className='grow font-medium text-start'>{t('create agent label')}</span>
+          </Button>
+          <p id='devices-panel.create-agent.description' className={descriptionText}>
+            {t('agent message body')}
+          </p>
+        </>
+      )}
+    </>
+  );
+};

package/src/components/DeviceList/DeviceList.tsx

@@ -0,0 +1,54 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { CaretRight, Plus } from '@phosphor-icons/react';
+import React from 'react';
+
+import { type Device } from '@dxos/react-client/halo';
+import { Button, List, useTranslation } from '@dxos/react-ui';
+import { descriptionText, getSize, mx } from '@dxos/react-ui-theme';
+
+import { DeviceListItem } from './DeviceListItem';
+import { type DeviceListProps } from './DeviceListProps';
+
+export const DeviceList = ({
+  devices,
+  onClickAdd,
+  onClickEdit,
+  onClickReset,
+  onClickJoinExisting,
+}: DeviceListProps) => {
+  const { t } = useTranslation('os');
+  return (
+    <>
+      <h2 className={mx(descriptionText, 'text-center mbs-4')}>{t('devices heading')}</h2>
+      {devices.length > 0 && (
+        <List>
+          {devices.map((device: Device) => {
+            return (
+              <DeviceListItem
+                key={device.deviceKey.toHex()}
+                device={device}
+                onClickEdit={() => onClickEdit?.(device)}
+                {...{ onClickReset, onClickJoinExisting }}
+              />
+            );
+          })}
+        </List>
+      )}
+      <Button
+        variant='ghost'
+        classNames='justify-start gap-2 !pis-0 !pie-3'
+        data-testid='devices-panel.create-invitation'
+        onClick={onClickAdd}
+      >
+        <div role='img' className={mx(getSize(8), 'm-1 rounded-sm surface-input grid place-items-center')}>
+          <Plus weight='light' className={getSize(6)} />
+        </div>
+        <span className='grow font-medium text-start'>{t('choose add device label')}</span>
+        <CaretRight weight='bold' className={getSize(4)} />
+      </Button>
+    </>
+  );
+};

package/src/components/DeviceList/DeviceListItem.tsx

@@ -0,0 +1,120 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import {
+  Compass,
+  Desktop,
+  DeviceMobile,
+  Devices,
+  DotsThree,
+  type IconProps,
+  Intersect,
+  Power,
+  Robot,
+} from '@phosphor-icons/react';
+import React, { type ComponentPropsWithoutRef, forwardRef } from 'react';
+
+import { generateName } from '@dxos/display-name';
+import { Device, DeviceType, DeviceKind } from '@dxos/react-client/halo';
+import {
+  ListItem,
+  Avatar,
+  useId,
+  type ThemedClassName,
+  Tag,
+  useTranslation,
+  DropdownMenu,
+  Button,
+} from '@dxos/react-ui';
+import { getSize } from '@dxos/react-ui-theme';
+import { keyToFallback } from '@dxos/util';
+
+import { type DeviceListItemProps } from './DeviceListProps';
+
+const iconProps: IconProps = {
+  weight: 'duotone',
+  width: 24,
+  height: 24,
+  x: 8,
+  y: 8,
+};
+
+export const DeviceListItem = forwardRef<
+  HTMLLIElement,
+  ThemedClassName<ComponentPropsWithoutRef<'li'>> & DeviceListItemProps
+>(({ device, onClickAdd, onClickEdit, onClickReset, onClickJoinExisting, classNames, ...props }, forwardedRef) => {
+  const { t } = useTranslation('os');
+  const fallbackValue = keyToFallback(device.deviceKey);
+  const labelId = useId('identityListItem__label');
+  const displayName = device.profile
+    ? t('device name placeholder', { os: device.profile.os, platform: device.profile.platform })
+    : generateName(device.deviceKey.toHex());
+  const isCurrent = device.kind === DeviceKind.CURRENT;
+  return (
+    <ListItem.Root
+      {...props}
+      classNames={['flex gap-2 items-center mlb-2', classNames]}
+      data-testid={`device-list-item${isCurrent ? '-current' : ''}`}
+      labelId={labelId}
+      ref={forwardedRef}
+    >
+      <Avatar.Root
+        status={device.presence === Device.PresenceState.ONLINE ? 'active' : 'inactive'}
+        labelId={labelId}
+        hue={fallbackValue.hue}
+        variant='square'
+      >
+        <Avatar.Frame classNames='place-self-center'>
+          {device.profile?.type ? (
+            device.profile.type === DeviceType.BROWSER ? (
+              <Compass {...iconProps} />
+            ) : device.profile.type === DeviceType.NATIVE ? (
+              <Desktop {...iconProps} />
+            ) : [DeviceType.AGENT, DeviceType.AGENT_MANAGED].includes(device.profile.type) ? (
+              <Robot {...iconProps} />
+            ) : device.profile.type === DeviceType.MOBILE ? (
+              <DeviceMobile {...iconProps} />
+            ) : (
+              <Devices {...iconProps} />
+            )
+          ) : (
+            <Avatar.Fallback text={fallbackValue.emoji} />
+          )}
+        </Avatar.Frame>
+        {isCurrent && <Tag color='primary'>{t('current device tag label')}</Tag>}
+        <Avatar.Label classNames='flex-1 text-sm truncate'>{displayName}</Avatar.Label>
+        {device.kind === DeviceKind.CURRENT && (
+          <DropdownMenu.Root>
+            <DropdownMenu.Trigger asChild>
+              <Button
+                variant='ghost'
+                classNames='pli-0 is-[--rail-action] bs-[--rail-action]'
+                data-testid={`device-list-item${isCurrent ? '-current' : ''}.options`}
+              >
+                <span className='sr-only'>{t('more options label')}</span>
+                <DotsThree className={getSize(5)} />
+              </Button>
+            </DropdownMenu.Trigger>
+            <DropdownMenu.Content>
+              <DropdownMenu.Viewport>
+                {/* <DropdownMenu.Item disabled onClick={onClickEdit}> */}
+                {/*  <PencilSimpleLine className={getSize(5)} /> */}
+                {/*  {t('edit device label')} */}
+                {/* </DropdownMenu.Item> */}
+                <DropdownMenu.Item data-testid='device-list-item-current.join-existing' onClick={onClickJoinExisting}>
+                  <Intersect className={getSize(5)} />
+                  {t('choose join new identity label')}
+                </DropdownMenu.Item>
+                <DropdownMenu.Item data-testid='device-list-item-current.reset' onClick={onClickReset}>
+                  <Power className={getSize(5)} />
+                  {t('reset device label')}
+                </DropdownMenu.Item>
+              </DropdownMenu.Viewport>
+            </DropdownMenu.Content>
+          </DropdownMenu.Root>
+        )}
+      </Avatar.Root>
+    </ListItem.Root>
+  );
+});

package/src/components/DeviceList/DeviceListProps.ts

@@ -0,0 +1,33 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type SpaceMember } from '@dxos/react-client/echo';
+import { type Device } from '@dxos/react-client/halo';
+
+export type DeviceListProps = {
+  devices: Device[];
+  onClickAdd?: () => void;
+  onClickEdit?: (device: Device) => void;
+  onClickReset?: () => void;
+  onClickJoinExisting?: () => void;
+};
+
+export type AgentFormProps = {
+  onAgentCreate?: () => Promise<void>;
+  onAgentDestroy?: () => Promise<void>;
+  agentStatus?: string;
+  agentActive?: boolean;
+  agentProviderDisabled?: boolean;
+  validationMessage?: string;
+  agentHostingEnabled?: boolean;
+};
+
+export type DeviceListItemProps = {
+  device: Device;
+  presence?: SpaceMember['presence'];
+  onClickAdd?: () => void;
+  onClickEdit?: () => void;
+  onClickReset?: () => void;
+  onClickJoinExisting?: () => void;
+};

package/src/components/DeviceList/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export * from './DeviceList';
+export * from './DeviceListProps';

package/src/components/EmojiPicker.tsx

@@ -3,11 +3,20 @@
 //
 import emojiData from '@emoji-mart/data';
 import EmojiMart from '@emoji-mart/react';
-import { ArrowCounterClockwise, CaretDown } from '@phosphor-icons/react';
+import { ArrowCounterClockwise, CaretDown, ImageSquare } from '@phosphor-icons/react';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
-import React, { type Dispatch, type SetStateAction, useState } from 'react';
+import React, { type Dispatch, type SetStateAction, useRef, useState } from 'react';
 
-import { Button, Popover, useTranslation, Tooltip, type ButtonProps, useMediaQuery } from '@dxos/react-ui';
+import {
+  Button,
+  Popover,
+  useTranslation,
+  Tooltip,
+  type ButtonProps,
+  Toolbar,
+  useMediaQuery,
+  type ThemedClassName,
+} from '@dxos/react-ui';
 import { getSize } from '@dxos/react-ui-theme';
 
 export type EmojiPickerProps = {
@@ -18,7 +27,95 @@ export type EmojiPickerProps = {
   onClickClear?: ButtonProps['onClick'];
 };
 
-export const EmojiPicker = ({ disabled, defaultEmoji, emoji, onChangeEmoji, onClickClear }: EmojiPickerProps) => {
+/**
+ * A toolbar button for picking an emoji. Use only in `role=toolbar` elements. Unable to unset the value.
+ */
+export const EmojiPickerToolbarButton = ({
+  disabled,
+  defaultEmoji,
+  emoji,
+  onChangeEmoji,
+  classNames,
+}: ThemedClassName<Omit<EmojiPickerProps, 'onClickClear'>>) => {
+  const { t } = useTranslation('os');
+
+  const [_emojiValue, setEmojiValue] = useControllableState<string>({
+    prop: emoji,
+    onChange: onChangeEmoji,
+    defaultProp: defaultEmoji,
+  });
+
+  const [emojiPickerOpen, setEmojiPickerOpen] = useState<boolean>(false);
+
+  const suppressNextTooltip = useRef<boolean>(false);
+  const [triggerTooltipOpen, setTriggerTooltipOpen] = useState(false);
+
+  return (
+    <Tooltip.Root
+      open={triggerTooltipOpen}
+      onOpenChange={(nextOpen) => {
+        if (suppressNextTooltip.current) {
+          setTriggerTooltipOpen(false);
+          suppressNextTooltip.current = false;
+        } else {
+          setTriggerTooltipOpen(nextOpen);
+        }
+      }}
+    >
+      <Popover.Root
+        open={emojiPickerOpen}
+        onOpenChange={(nextOpen) => {
+          setEmojiPickerOpen(nextOpen);
+          suppressNextTooltip.current = true;
+        }}
+      >
+        <Tooltip.Trigger asChild>
+          <Popover.Trigger asChild>
+            <Toolbar.Button classNames={['gap-2 text-2xl plb-1', classNames]} disabled={disabled}>
+              <span className='sr-only'>{t('select emoji label')}</span>
+              <ImageSquare className={getSize(5)} />
+            </Toolbar.Button>
+          </Popover.Trigger>
+        </Tooltip.Trigger>
+        <Tooltip.Portal>
+          <Tooltip.Content side='bottom' classNames='z-50'>
+            {t('select emoji label')}
+            <Tooltip.Arrow />
+          </Tooltip.Content>
+        </Tooltip.Portal>
+        <Popover.Content
+          side='bottom'
+          onKeyDownCapture={(event) => {
+            if (event.key === 'Escape') {
+              event.stopPropagation();
+              setEmojiPickerOpen(false);
+              suppressNextTooltip.current = true;
+            }
+          }}
+        >
+          <EmojiMart
+            data={emojiData}
+            onEmojiSelect={({ native }: { native?: string }) => {
+              if (native) {
+                setEmojiValue(native);
+                setEmojiPickerOpen(false);
+              }
+            }}
+            autoFocus={true}
+            maxFrequentRows={0}
+            noCountryFlags={true}
+          />
+          <Popover.Arrow />
+        </Popover.Content>
+      </Popover.Root>
+    </Tooltip.Root>
+  );
+};
+
+/**
+ * A button for picking an emoji alongside a button for unsetting it.
+ */
+export const EmojiPickerBlock = ({ disabled, defaultEmoji, emoji, onChangeEmoji, onClickClear }: EmojiPickerProps) => {
   const { t } = useTranslation('os');
   const [isMd] = useMediaQuery('md', { ssr: false });
 

package/src/components/HuePicker.tsx

@@ -1,12 +1,21 @@
 //
 // Copyright 2024 DXOS.org
 //
-import { ArrowCounterClockwise, CaretDown, Check } from '@phosphor-icons/react';
+import { ArrowCounterClockwise, CaretDown, Check, Palette } from '@phosphor-icons/react';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
-import React, { type Dispatch, type SetStateAction } from 'react';
+import React, { type Dispatch, type SetStateAction, useRef, useState } from 'react';
 
-import { Button, useTranslation, Tooltip, DropdownMenu, useThemeContext, type ButtonProps } from '@dxos/react-ui';
-import { getSize, hueTokenThemes } from '@dxos/react-ui-theme';
+import {
+  Button,
+  useTranslation,
+  Tooltip,
+  DropdownMenu,
+  useThemeContext,
+  type ButtonProps,
+  Toolbar,
+  type ThemedClassName,
+} from '@dxos/react-ui';
+import { getSize, hueTokenThemes, mx } from '@dxos/react-ui-theme';
 
 const HuePreview = ({ hue }: { hue: string }) => {
   const { tx } = useThemeContext();
@@ -25,7 +34,92 @@ export type HuePickerProps = {
   onClickClear?: ButtonProps['onClick'];
 };
 
-export const HuePicker = ({ disabled, hue, onChangeHue, defaultHue, onClickClear }: HuePickerProps) => {
+/**
+ * A toolbar button for picking hue. Use only in `role=toolbar` elements. Unable to unset the value.
+ */
+export const HuePickerToolbarButton = ({
+  disabled,
+  hue,
+  onChangeHue,
+  classNames,
+  defaultHue,
+}: ThemedClassName<Omit<HuePickerProps, 'onClickClear'>>) => {
+  const { t } = useTranslation('os');
+
+  const [hueValue, setHueValue] = useControllableState<string>({
+    prop: hue,
+    onChange: onChangeHue,
+    defaultProp: defaultHue,
+  });
+
+  const [huePickerOpen, setHuePickerOpen] = useState<boolean>(false);
+
+  const suppressNextTooltip = useRef<boolean>(false);
+  const [triggerTooltipOpen, setTriggerTooltipOpen] = useState(false);
+
+  return (
+    <Tooltip.Root
+      open={triggerTooltipOpen}
+      onOpenChange={(nextOpen) => {
+        if (suppressNextTooltip.current) {
+          setTriggerTooltipOpen(false);
+          suppressNextTooltip.current = false;
+        } else {
+          setTriggerTooltipOpen(nextOpen);
+        }
+      }}
+    >
+      <DropdownMenu.Root
+        modal={false}
+        open={huePickerOpen}
+        onOpenChange={(nextOpen) => {
+          setHuePickerOpen(nextOpen);
+          suppressNextTooltip.current = true;
+        }}
+      >
+        <Tooltip.Trigger asChild>
+          <DropdownMenu.Trigger asChild>
+            <Toolbar.Button classNames={mx('gap-2 plb-1', classNames)} disabled={disabled}>
+              <span className='sr-only'>{t('select hue label')}</span>
+              <Palette className={getSize(5)} />
+            </Toolbar.Button>
+          </DropdownMenu.Trigger>
+        </Tooltip.Trigger>
+        <Tooltip.Portal>
+          <Tooltip.Content side='bottom' classNames='z-50'>
+            {t('select hue label')}
+            <Tooltip.Arrow />
+          </Tooltip.Content>
+        </Tooltip.Portal>
+        <DropdownMenu.Content side='bottom'>
+          <DropdownMenu.Viewport>
+            {Object.keys(hueTokenThemes).map((hue) => {
+              return (
+                <DropdownMenu.CheckboxItem
+                  key={hue}
+                  checked={hue === hueValue}
+                  onCheckedChange={() => setHueValue(hue)}
+                >
+                  <HuePreview hue={hue} />
+                  <span className='grow'>{t(`${hue} label`)}</span>
+                  <DropdownMenu.ItemIndicator>
+                    <Check />
+                  </DropdownMenu.ItemIndicator>
+                </DropdownMenu.CheckboxItem>
+              );
+            })}
+          </DropdownMenu.Viewport>
+          <DropdownMenu.Arrow />
+        </DropdownMenu.Content>
+      </DropdownMenu.Root>
+    </Tooltip.Root>
+  );
+};
+
+/**
+ * A button for picking hue alongside a button for unsetting it.
+ */
+export const HuePickerBlock = ({ disabled, hue, onChangeHue, defaultHue, onClickClear }: HuePickerProps) => {
   const { t } = useTranslation('os');
 
   const [hueValue, setHueValue] = useControllableState<string>({

package/src/components/IdentityList/index.ts

@@ -2,6 +2,5 @@
 // Copyright 2023 DXOS.org
 //
 
-export * from './DeviceList';
 export * from './IdentityListItem';
 export * from './SpaceMemberList';