@dxos/shell 0.4.7-main.ea67fec → 0.4.7-main.f9d3866

package/dist/types/src/util/toEmoji.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toEmoji.js","sourceRoot":"","sources":["../../../../src/util/toEmoji.ts"],"names":[],"mappings":";AAAA,EAAE;AACF,0BAA0B;AAC1B,EAAE;;;;;;AAEF,oEAAqC;AAErC,MAAM,KAAK,GAAG,IAAA,wBAAO;AACnB,kIAAkI;AAClI,iLAAiL;AACjL,kGAAkG;AAClG,iDAAiD;AACjD,cAAc;AACd,gCAAgC;AAChC,6BAA6B;AAC7B,uDAAuD;AACvD,gDAAgD;AAChD,gFAAgF;AAChF,qCAAqC;AACrC,mRAAmR,CACpR,CAAC;AAEK,MAAM,OAAO,GAAG,CAAC,QAAgB,EAAE,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,EAAE,EAAE,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;AAA7E,QAAA,OAAO,WAAsE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/shell",
-  "version": "0.4.7-main.ea67fec",
+  "version": "0.4.7-main.f9d3866",
   "description": "DXOS’s OS experiences",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -28,8 +28,6 @@
     "src"
   ],
   "dependencies": {
-    "@emoji-mart/data": "^1.1.2",
-    "@emoji-mart/react": "^1.1.1",
     "@fluentui/react-tabster": "^9.19.0",
     "@radix-ui/react-accordion": "^1.1.1",
     "@radix-ui/react-context": "^1.0.0",
@@ -37,26 +35,27 @@
     "@radix-ui/react-use-controllable-state": "^1.0.0",
     "@react-hook/async": "^3.1.1",
     "@xstate/react": "^3.2.1",
-    "emoji-mart": "^5.5.2",
+    "lodash.toarray": "^4.4.0",
     "react-qr-rounded": "^1.0.0",
     "url-join": "^5.0.0",
     "xstate": "^4.37.0",
-    "@dxos/async": "0.4.7-main.ea67fec",
-    "@dxos/client-services": "0.4.7-main.ea67fec",
-    "@dxos/debug": "0.4.7-main.ea67fec",
-    "@dxos/display-name": "0.4.7-main.ea67fec",
-    "@dxos/client-protocol": "0.4.7-main.ea67fec",
-    "@dxos/invariant": "0.4.7-main.ea67fec",
-    "@dxos/react-client": "0.4.7-main.ea67fec",
-    "@dxos/react-ui": "0.4.7-main.ea67fec",
-    "@dxos/react-ui-theme": "0.4.7-main.ea67fec",
-    "@dxos/react-ui-types": "0.4.7-main.ea67fec",
-    "@dxos/rpc-tunnel": "0.4.7-main.ea67fec",
-    "@dxos/log": "0.4.7-main.ea67fec",
-    "@dxos/util": "0.4.7-main.ea67fec"
+    "@dxos/client-protocol": "0.4.7-main.f9d3866",
+    "@dxos/client-services": "0.4.7-main.f9d3866",
+    "@dxos/async": "0.4.7-main.f9d3866",
+    "@dxos/debug": "0.4.7-main.f9d3866",
+    "@dxos/invariant": "0.4.7-main.f9d3866",
+    "@dxos/react-client": "0.4.7-main.f9d3866",
+    "@dxos/react-ui-theme": "0.4.7-main.f9d3866",
+    "@dxos/display-name": "0.4.7-main.f9d3866",
+    "@dxos/log": "0.4.7-main.f9d3866",
+    "@dxos/react-ui-types": "0.4.7-main.f9d3866",
+    "@dxos/react-ui": "0.4.7-main.f9d3866",
+    "@dxos/rpc-tunnel": "0.4.7-main.f9d3866",
+    "@dxos/util": "0.4.7-main.f9d3866"
   },
   "devDependencies": {
     "@phosphor-icons/react": "^2.0.5",
+    "@types/lodash.toarray": "^4.4.7",
     "@types/react": "^18.0.21",
     "@types/react-dom": "^18.0.6",
     "@vitejs/plugin-react": "^4.2.1",
@@ -64,11 +63,11 @@
     "react-dom": "^18.2.0",
     "vite": "^5.1.3",
     "vite-plugin-turbosnap": "^1.0.2",
-    "@dxos/config": "0.4.7-main.ea67fec",
-    "@dxos/react-async": "0.4.7-main.ea67fec",
-    "@dxos/react-ui-theme": "0.4.7-main.ea67fec",
-    "@dxos/storybook-utils": "0.4.7-main.ea67fec",
-    "@dxos/random": "0.4.7-main.ea67fec"
+    "@dxos/config": "0.4.7-main.f9d3866",
+    "@dxos/react-async": "0.4.7-main.f9d3866",
+    "@dxos/random": "0.4.7-main.f9d3866",
+    "@dxos/react-ui-theme": "0.4.7-main.f9d3866",
+    "@dxos/storybook-utils": "0.4.7-main.f9d3866"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.0.5",

package/src/components/IdentityList/IdentityListItem.tsx

@@ -7,9 +7,8 @@ import React, { type ComponentPropsWithoutRef, forwardRef } from 'react';
 import { generateName } from '@dxos/display-name';
 import { SpaceMember } from '@dxos/react-client/echo';
 import { type Identity } from '@dxos/react-client/halo';
-import { ListItem, Avatar, useId, type ThemedClassName } from '@dxos/react-ui';
+import { ListItem, Avatar, useJdenticonHref, useId, type ThemedClassName } from '@dxos/react-ui';
 import { mx } from '@dxos/react-ui-theme';
-import { keyToFallback } from '@dxos/util';
 
 type IdentityListItemProps = {
   identity: Identity;
@@ -21,8 +20,9 @@ export const IdentityListItem = forwardRef<
   HTMLLIElement,
   ThemedClassName<ComponentPropsWithoutRef<'li'>> & IdentityListItemProps
 >(({ identity, presence, onClick, classNames, ...props }, forwardedRef) => {
-  const fallbackValue = keyToFallback(identity.identityKey);
+  const fallbackValue = identity.identityKey.toHex();
   const labelId = useId('identityListItem__label');
+  const jdenticon = useJdenticonHref(fallbackValue ?? '', 12);
   const displayName = identity.profile?.displayName ?? generateName(identity.identityKey.toHex());
   return (
     <ListItem.Root
@@ -33,13 +33,9 @@ export const IdentityListItem = forwardRef<
       labelId={labelId}
       ref={forwardedRef}
     >
-      <Avatar.Root
-        status={presence === SpaceMember.PresenceState.ONLINE ? 'active' : 'inactive'}
-        labelId={labelId}
-        hue={identity.profile?.hue || fallbackValue.hue}
-      >
+      <Avatar.Root status={presence === SpaceMember.PresenceState.ONLINE ? 'active' : 'inactive'} labelId={labelId}>
         <Avatar.Frame classNames='place-self-center'>
-          <Avatar.Fallback text={identity.profile?.emoji || fallbackValue.emoji} />
+          <Avatar.Fallback href={jdenticon} />
         </Avatar.Frame>
         <Avatar.Label classNames='text-sm truncate pli-2'>{displayName}</Avatar.Label>
       </Avatar.Root>

package/src/components/InvitationList/InvitationListItem.tsx

@@ -21,9 +21,9 @@ import {
   type ThemedClassName,
 } from '@dxos/react-ui';
 import { focusRing, getSize, mx } from '@dxos/react-ui-theme';
-import { hexToEmoji } from '@dxos/util';
 
 import { type SharedInvitationListProps } from './InvitationListProps';
+import { toEmoji } from '../../util';
 import { AuthCode } from '../AuthCode';
 import { CopyButtonIconOnly } from '../Clipboard';
 
@@ -151,7 +151,7 @@ export const InvitationListItemImpl = ({
         <Avatar.Root {...avatarProps} animation={avatarAnimation} status={avatarStatus}>
           <Tooltip.Trigger asChild>
             <Avatar.Frame tabIndex={0} classNames={[focusRing, 'relative rounded-full place-self-center']}>
-              <Avatar.Fallback text={hexToEmoji(invitationId)} />
+              <Avatar.Fallback text={toEmoji(invitationId)} />
             </Avatar.Frame>
           </Tooltip.Trigger>
         </Avatar.Root>

package/src/components/SpaceListItem.tsx

@@ -5,14 +5,15 @@
 import React, { type ForwardedRef, forwardRef } from 'react';
 
 import type { Space } from '@dxos/react-client/echo';
-import { Avatar, useId } from '@dxos/react-ui';
+import { Avatar, useId, useJdenticonHref } from '@dxos/react-ui';
 import { mx } from '@dxos/react-ui-theme';
-import { humanize, keyToEmoji } from '@dxos/util';
+import { humanize } from '@dxos/util';
 
 export const SpaceListItem = forwardRef(
   ({ space, onClick }: { space: Space; onClick?: () => void }, ref: ForwardedRef<HTMLLIElement>) => {
-    const fallbackValue = keyToEmoji(space.key);
+    const fallbackValue = space.key.toHex();
     const labelId = useId('identityListItem__label');
+    const jdenticon = useJdenticonHref(fallbackValue ?? '', 12);
     const displayName = space.properties.name ?? humanize(space.key.toHex());
 
     return (
@@ -24,7 +25,7 @@ export const SpaceListItem = forwardRef(
       >
         <Avatar.Root labelId={labelId}>
           <Avatar.Frame>
-            <Avatar.Fallback text={fallbackValue} />
+            <Avatar.Fallback href={jdenticon} />
           </Avatar.Frame>
           <Avatar.Label classNames='text-sm truncate'>{displayName}</Avatar.Label>
         </Avatar.Root>

package/src/components/index.ts

@@ -4,8 +4,6 @@
 
 export * from './Clipboard';
 export * from './CompoundButton';
-export * from './EmojiPicker';
-export * from './HuePicker';
 export * from './IdentityList';
 export * from './InvitationList';
 export * from './Panel';

package/src/panels/IdentityPanel/IdentityPanel.tsx

@@ -9,8 +9,7 @@ import { useClient } from '@dxos/react-client';
 import { type Identity, useIdentity, useDevices, useHaloInvitations } from '@dxos/react-client/halo';
 import { useInvitationStatus } from '@dxos/react-client/invitations';
 import type { CancellableInvitationObservable } from '@dxos/react-client/invitations';
-import { Avatar, DensityProvider, useId, useTranslation } from '@dxos/react-ui';
-import { keyToFallback } from '@dxos/util';
+import { Avatar, DensityProvider, useId, useJdenticonHref, useTranslation } from '@dxos/react-ui';
 
 import {
   type IdentityPanelHeadingProps,
@@ -26,12 +25,12 @@ import { InvitationManager } from '../../steps';
 const viewStyles = 'pbs-1 pbe-3 pli-3';
 
 const IdentityHeading = ({ titleId, title, identity, onDone }: IdentityPanelHeadingProps) => {
-  const fallbackValue = keyToFallback(identity.identityKey);
+  const fallbackHref = useJdenticonHref(identity.identityKey.toHex(), 12);
   return (
     <Heading titleId={titleId} title={title} corner={<CloseButton onDone={onDone} />}>
-      <Avatar.Root size={12} variant='circle' status='active' hue={identity.profile?.hue || fallbackValue.hue}>
+      <Avatar.Root size={12} variant='circle' status='active'>
         <Avatar.Frame classNames='block mbs-4 mbe-2 mli-auto chromatic-ignore'>
-          <Avatar.Fallback text={identity.profile?.emoji || fallbackValue.emoji} />
+          <Avatar.Fallback href={fallbackHref} />
         </Avatar.Frame>
         <Avatar.Label classNames='block text-center font-light text-xl' data-testid='identityHeading.displayName'>
           {identity.profile?.displayName ?? generateName(identity.identityKey.toHex())}

package/src/panels/IdentityPanel/steps/ProfileForm.tsx

@@ -8,9 +8,8 @@ import { type Event, type SingleOrArray } from 'xstate';
 import { log } from '@dxos/log';
 import { type Identity } from '@dxos/react-client/halo';
 import { useTranslation } from '@dxos/react-ui';
-import { hexToEmoji, hexToHue } from '@dxos/util';
 
-import { Action, Actions, StepHeading, Input, useClipboardContext, EmojiPicker, HuePicker } from '../../../components';
+import { Action, Actions, StepHeading, Input, useClipboardContext } from '../../../components';
 import { type IdentityPanelStepProps } from '../IdentityPanelProps';
 import { type IdentityEvent } from '../identityMachine';
 
@@ -37,19 +36,13 @@ export const ProfileForm = (props: ProfileFormProps) => {
   return <ProfileFormImpl {...props} onUpdateProfile={handleUpdateProfile} validationMessage={validationMessage} />;
 };
 
-const getHueValue = (identity?: Identity) => identity?.profile?.hue || hexToHue(identity?.identityKey.toHex() ?? '0');
-const getEmojiValue = (identity?: Identity) =>
-  identity?.profile?.emoji || hexToEmoji(identity?.identityKey.toHex() ?? '0');
-
 // TODO(zhenyasav): impl shouldn't need send()
 const ProfileFormImpl = (props: ProfileFormImplProps) => {
   const { active, identity, send, onUpdateProfile, validationMessage } = props;
   const profile = identity?.profile;
   const disabled = !active;
   const { t } = useTranslation('os');
-  const [displayName, setDisplayName] = useState(profile?.displayName ?? '');
-  const [hue, setHue] = useState<string>(getHueValue(identity));
-  const [emoji, setEmoji] = useState<string>(getEmojiValue(identity));
+  const [inputValue, setInputValue] = useState(profile?.displayName ?? '');
   const { textValue, setTextValue } = useClipboardContext();
   const identityHex = identity?.identityKey.toHex();
   const copied = textValue === identityHex;
@@ -58,28 +51,14 @@ const ProfileFormImpl = (props: ProfileFormImplProps) => {
       <div role='none' className='grow flex flex-col justify-center'>
         <Input
           {...{ validationMessage }}
-          label={<StepHeading className='m-0'>{t('display name input label')}</StepHeading>}
+          label={<StepHeading>{t('display name input label')}</StepHeading>}
           disabled={disabled}
           data-testid='display-name-input'
           placeholder={t('display name input placeholder')}
-          value={displayName}
-          onChange={({ target: { value } }) => setDisplayName(value)}
+          value={inputValue}
+          onChange={({ target: { value } }) => setInputValue(value)}
+          onKeyDown={({ key }) => key === 'Enter' && onUpdateProfile?.({ displayName: inputValue })}
         />
-        <StepHeading className='mbe-2'>{t('emoji and color label')}</StepHeading>
-        <div role='none' className='grid grid-cols-[1fr_min-content] gap-y-2'>
-          <EmojiPicker
-            emoji={emoji}
-            onChangeEmoji={setEmoji}
-            disabled={disabled}
-            onClickClear={() => setEmoji(getEmojiValue(identity))}
-          />
-          <HuePicker
-            hue={hue}
-            onChangeHue={setHue}
-            disabled={disabled}
-            onClickClear={() => setHue(getHueValue(identity))}
-          />
-        </div>
       </div>
       <Actions>
         <Action
@@ -105,7 +84,7 @@ const ProfileFormImpl = (props: ProfileFormImplProps) => {
         <Action
           variant='primary'
           disabled={disabled}
-          onClick={() => onUpdateProfile?.({ displayName, emoji, hue })}
+          onClick={() => onUpdateProfile?.({ displayName: inputValue })}
           data-testid='update-profile-form-continue'
         >
           {t('done label')}

package/src/panels/JoinPanel/steps/IdentityAdded.tsx

@@ -6,9 +6,8 @@ import React, { cloneElement } from 'react';
 
 import { generateName } from '@dxos/display-name';
 import type { Identity } from '@dxos/react-client/halo';
-import { Avatar, useId, useTranslation } from '@dxos/react-ui';
+import { Avatar, useId, useJdenticonHref, useTranslation } from '@dxos/react-ui';
 import { mx } from '@dxos/react-ui-theme';
-import { hexToFallback } from '@dxos/util';
 
 import { Action, Actions, StepHeading } from '../../../components';
 import { type JoinPanelMode, type JoinStepProps } from '../JoinPanelProps';
@@ -23,10 +22,11 @@ export const IdentityAdded = (props: IdentityAddedProps) => {
   const disabled = !active;
   const { t } = useTranslation('os');
 
-  const addedIdentityHex = addedIdentity?.identityKey.toHex() ?? '0';
-  const fallbackValue = hexToFallback(addedIdentityHex);
+  const fallbackValue = addedIdentity?.identityKey.toHex();
   const labelId = useId('identityListItem__label');
-  const displayName = addedIdentity?.profile?.displayName ?? (addedIdentity && generateName(addedIdentityHex));
+  const jdenticon = useJdenticonHref(fallbackValue ?? '', 12);
+  const displayName =
+    addedIdentity?.profile?.displayName ?? (addedIdentity && generateName(addedIdentity?.identityKey.toHex()));
 
   const doneAction = (
     <Action
@@ -43,9 +43,9 @@ export const IdentityAdded = (props: IdentityAddedProps) => {
     <>
       <StepHeading>{t('identity added label')}</StepHeading>
       <div role='none' className='grow flex flex-col items-center justify-center text-center gap-2'>
-        <Avatar.Root status='active' labelId={labelId} hue={addedIdentity?.profile?.hue || fallbackValue.hue}>
+        <Avatar.Root status='active' labelId={labelId}>
           <Avatar.Frame>
-            <Avatar.Fallback text={addedIdentity?.profile?.emoji || fallbackValue.emoji} />
+            <Avatar.Fallback href={jdenticon} />
           </Avatar.Frame>
           <Avatar.Label classNames={mx('text-lg truncate', !addedIdentity?.profile?.displayName && 'font-mono')}>
             {displayName}

package/src/panels/JoinPanel/steps/InvitationAuthenticator.tsx

@@ -5,9 +5,9 @@
 import React, { type ChangeEvent, useState } from 'react';
 
 import { Input, useTranslation } from '@dxos/react-ui';
-import { hexToEmoji } from '@dxos/util';
 
 import { Actions, Action, Emoji, StepHeading } from '../../../components';
+import { toEmoji } from '../../../util';
 import { type JoinStepProps } from '../JoinPanelProps';
 
 const pinLength = 6;
@@ -45,7 +45,7 @@ export const InvitationAuthenticator = ({
   return (
     <>
       <div role='none' className='grow flex flex-col justify-center'>
-        {invitationId && <Emoji text={hexToEmoji(invitationId)} />}
+        {invitationId && <Emoji text={toEmoji(invitationId)} />}
         <Input.Root
           {...(failed && {
             validationValence: 'error',

package/src/steps/InvitationManager.tsx

@@ -9,7 +9,6 @@ import { QR } from 'react-qr-rounded';
 import { type InvitationStatus, Invitation } from '@dxos/react-client/invitations';
 import { useId, useTranslation } from '@dxos/react-ui';
 import { descriptionText, getSize, mx } from '@dxos/react-ui-theme';
-import { hexToEmoji } from '@dxos/util';
 
 import { type StepProps } from './StepProps';
 import {
@@ -23,7 +22,7 @@ import {
   CopyButton,
   Centered,
 } from '../components';
-import { invitationStatusValue } from '../util';
+import { invitationStatusValue, toEmoji } from '../util';
 
 export type InvitationManagerProps = StepProps &
   Partial<InvitationStatus> & {
@@ -45,13 +44,13 @@ export const InvitationManager = ({
   status,
   type,
   authCode,
-  id = '0',
+  id,
 }: InvitationManagerProps) => {
   const { t } = useTranslation('os');
   const qrLabel = useId('invitation-manager__qr-code');
   const statusValue = type === Invitation.Type.MULTIUSE ? 0 : invitationStatusValue.get(status!) ?? 0;
   const showAuthCode = statusValue === 3;
-  const emoji = hexToEmoji(id);
+  const emoji = toEmoji(id ?? '');
   const activeView = useMemo(() => {
     switch (true) {
       case statusValue === 5:

package/src/translations/locales/en-US.ts

@@ -106,25 +106,4 @@ export const os = {
   'join new identity label': 'Join a new identity',
   'reset device label': 'Reset device',
   'reset device confirm message': 'Are you sure you want to reset your device? All data will be lost.',
-  'emoji and color label': 'Emoji and color',
-  'clear label': 'Use default',
-  'select emoji label': 'Choose an emoji to use in your avatar',
-  'select hue label': 'Choose a hue to use in your avatar',
-  'red label': 'Red',
-  'orange label': 'Orange',
-  'amber label': 'Amber',
-  'yellow label': 'Yellow',
-  'lime label': 'Lime',
-  'green label': 'Green',
-  'emerald label': 'Emerald',
-  'teal label': 'Teal',
-  'cyan label': 'Cyan',
-  'sky label': 'Sky',
-  'blue label': 'Blue',
-  'indigo label': 'Indigo',
-  'violet label': 'Violet',
-  'purple label': 'Purple',
-  'fuchsia label': 'Fuchsia',
-  'pink label': 'Pink',
-  'rose label': 'Rose',
 };

package/src/util/index.ts

@@ -3,3 +3,4 @@
 //
 
 export * from './invitationStatusValue';
+export * from './toEmoji';

package/src/util/toEmoji.ts

@@ -0,0 +1,22 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import toArray from 'lodash.toarray';
+
+const emoji = toArray(
+  // When changing this set, please check the result in a console or e.g. RunKit (https://runkit.com/thure/642214441dd6ae000855a8de)
+  // Emoji sometimes use a combination of code points, and some code points aren't visible on their own, so by adding or deleting you may unintentionally create non-visible items.
+  // This set was chosen from the characters in Unicode Emoji v15.0 based on the following criteria:
+  // – not people or isolated anthropomorphic faces
+  // – not flags
+  // – more concrete than abstract
+  // – less culturally specific
+  // – less easily confused with another emoji in the set
+  // – requires less special knowledge to identify
+  // – less likely to evoke negative feelings (no meat, no drugs, no weapons, etc)
+  // – less common as a signifier in UX
+  '👹👻👽🤖🎃🦾🦿🦷👣👁️🧶👑🐒🦆🦉🐴🦄🐝🦋🐞🪲🐢🦎🦕🦑🦀🐠🐬🐋🦭🐅🐆🦓🦍🦧🐘🐫🦒🦘🦬🐖🐏🦌🐕🐈🐓🦚🦜🦢🦩🦦🐁🐿️🌵🌲🌳🪵🌱🍁🪺🍄🐚🪸🪨🌾🌷🌻☀️🌙🪐⭐️⚡️☄️🔥🌈☁️💧⛱️🌊🍎🍋🍉🍇🫐🍈🍒🍑🥭🍍🥥🥝🥑🌶️🌽🥕🍬🥜🫖☕️🍵🧊🧂🏔️⚓️🛟🏝️🛶🚀🛰️⛲️🏰🚲⛺️🎙️🧲⚙️🔩🔮🔭🔬🧬🌡️🧺🛎️🔑🪑🧸🎈🎀🎊♻️🎵',
+);
+
+export const toEmoji = (keyAsHex: string) => emoji[parseInt(keyAsHex, 16) % emoji.length];

package/dist/types/src/components/EmojiPicker.d.ts

@@ -1,11 +0,0 @@
-import { type Dispatch, type SetStateAction } from 'react';
-import { type ButtonProps } from '@dxos/react-ui';
-export type EmojiPickerProps = {
-    disabled?: boolean;
-    defaultEmoji?: string;
-    emoji?: string;
-    onChangeEmoji?: Dispatch<SetStateAction<string>>;
-    onClickClear?: ButtonProps['onClick'];
-};
-export declare const EmojiPicker: ({ disabled, defaultEmoji, emoji, onChangeEmoji, onClickClear }: EmojiPickerProps) => JSX.Element;
-//# sourceMappingURL=EmojiPicker.d.ts.map

package/dist/types/src/components/EmojiPicker.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"EmojiPicker.d.ts","sourceRoot":"","sources":["../../../../src/components/EmojiPicker.tsx"],"names":[],"mappings":"AAOA,OAAc,EAAE,KAAK,QAAQ,EAAE,KAAK,cAAc,EAAY,MAAM,OAAO,CAAC;AAE5E,OAAO,EAA4C,KAAK,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAG5F,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC;IACjD,YAAY,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;CACvC,CAAC;AAEF,eAAO,MAAM,WAAW,mEAAoE,gBAAgB,gBA6D3G,CAAC"}

package/dist/types/src/components/EmojiPicker.js

@@ -1,79 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.EmojiPicker = void 0;
-//
-// Copyright 2024 DXOS.org
-//
-const data_1 = __importDefault(require("@emoji-mart/data"));
-const react_1 = __importDefault(require("@emoji-mart/react"));
-const react_2 = require("@phosphor-icons/react");
-const react_use_controllable_state_1 = require("@radix-ui/react-use-controllable-state");
-const react_3 = __importStar(require("react"));
-const react_ui_1 = require("@dxos/react-ui");
-const react_ui_theme_1 = require("@dxos/react-ui-theme");
-const EmojiPicker = ({ disabled, defaultEmoji, emoji, onChangeEmoji, onClickClear }) => {
-    const { t } = (0, react_ui_1.useTranslation)('os');
-    const [emojiValue, setEmojiValue] = (0, react_use_controllable_state_1.useControllableState)({
-        prop: emoji,
-        onChange: onChangeEmoji,
-        defaultProp: defaultEmoji,
-    });
-    const [emojiPickerOpen, setEmojiPickerOpen] = (0, react_3.useState)(false);
-    return (react_3.default.createElement(react_3.default.Fragment, null,
-        react_3.default.createElement(react_ui_1.Popover.Root, { open: emojiPickerOpen, onOpenChange: setEmojiPickerOpen },
-            react_3.default.createElement(react_ui_1.Popover.Trigger, { asChild: true },
-                react_3.default.createElement(react_ui_1.Button, { variant: 'ghost', classNames: 'gap-2 text-2xl plb-1', disabled: disabled },
-                    react_3.default.createElement("span", { className: 'sr-only' }, t('select emoji label')),
-                    react_3.default.createElement("span", { className: 'grow pis-14' }, emojiValue),
-                    react_3.default.createElement(react_2.CaretDown, { className: (0, react_ui_theme_1.getSize)(4) }))),
-            react_3.default.createElement(react_ui_1.Popover.Content, { side: 'right', onKeyDownCapture: (event) => {
-                    if (event.key === 'Escape') {
-                        event.stopPropagation();
-                        setEmojiPickerOpen(false);
-                    }
-                } },
-                react_3.default.createElement(react_1.default, { data: data_1.default, onEmojiSelect: ({ native }) => {
-                        if (native) {
-                            setEmojiValue(native);
-                            setEmojiPickerOpen(false);
-                        }
-                    }, autoFocus: true, maxFrequentRows: 0, noCountryFlags: true }),
-                react_3.default.createElement(react_ui_1.Popover.Arrow, null))),
-        react_3.default.createElement(react_ui_1.Tooltip.Root, null,
-            react_3.default.createElement(react_ui_1.Tooltip.Trigger, { asChild: true },
-                react_3.default.createElement(react_ui_1.Button, { variant: 'ghost', onClick: onClickClear, disabled: disabled },
-                    react_3.default.createElement("span", { className: 'sr-only' }, t('clear label')),
-                    react_3.default.createElement(react_2.ArrowCounterClockwise, null))),
-            react_3.default.createElement(react_ui_1.Tooltip.Portal, null,
-                react_3.default.createElement(react_ui_1.Tooltip.Content, { style: { zIndex: 70 }, side: 'right' },
-                    t('clear label'),
-                    react_3.default.createElement(react_ui_1.Tooltip.Arrow, null))))));
-};
-exports.EmojiPicker = EmojiPicker;
-//# sourceMappingURL=EmojiPicker.js.map

package/dist/types/src/components/EmojiPicker.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"EmojiPicker.js","sourceRoot":"","sources":["../../../../src/components/EmojiPicker.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,EAAE;AACF,0BAA0B;AAC1B,EAAE;AACF,4DAAyC;AACzC,8DAA0C;AAC1C,iDAAyE;AACzE,yFAA8E;AAC9E,+CAA4E;AAE5E,6CAA4F;AAC5F,yDAA+C;AAUxC,MAAM,WAAW,GAAG,CAAC,EAAE,QAAQ,EAAE,YAAY,EAAE,KAAK,EAAE,aAAa,EAAE,YAAY,EAAoB,EAAE,EAAE;IAC9G,MAAM,EAAE,CAAC,EAAE,GAAG,IAAA,yBAAc,EAAC,IAAI,CAAC,CAAC;IAEnC,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,IAAA,mDAAoB,EAAS;QAC/D,IAAI,EAAE,KAAK;QACX,QAAQ,EAAE,aAAa;QACvB,WAAW,EAAE,YAAY;KAC1B,CAAC,CAAC;IAEH,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,IAAA,gBAAQ,EAAU,KAAK,CAAC,CAAC;IAEvE,OAAO,CACL;QACE,8BAAC,kBAAO,CAAC,IAAI,IAAC,IAAI,EAAE,eAAe,EAAE,YAAY,EAAE,kBAAkB;YACnE,8BAAC,kBAAO,CAAC,OAAO,IAAC,OAAO;gBACtB,8BAAC,iBAAM,IAAC,OAAO,EAAC,OAAO,EAAC,UAAU,EAAC,sBAAsB,EAAC,QAAQ,EAAE,QAAQ;oBAC1E,wCAAM,SAAS,EAAC,SAAS,IAAE,CAAC,CAAC,oBAAoB,CAAC,CAAQ;oBAC1D,wCAAM,SAAS,EAAC,aAAa,IAAE,UAAU,CAAQ;oBACjD,8BAAC,iBAAS,IAAC,SAAS,EAAE,IAAA,wBAAO,EAAC,CAAC,CAAC,GAAI,CAC7B,CACO;YAClB,8BAAC,kBAAO,CAAC,OAAO,IACd,IAAI,EAAC,OAAO,EACZ,gBAAgB,EAAE,CAAC,KAAK,EAAE,EAAE;oBAC1B,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE;wBAC1B,KAAK,CAAC,eAAe,EAAE,CAAC;wBACxB,kBAAkB,CAAC,KAAK,CAAC,CAAC;qBAC3B;gBACH,CAAC;gBAED,8BAAC,eAAS,IACR,IAAI,EAAE,cAAS,EACf,aAAa,EAAE,CAAC,EAAE,MAAM,EAAuB,EAAE,EAAE;wBACjD,IAAI,MAAM,EAAE;4BACV,aAAa,CAAC,MAAM,CAAC,CAAC;4BACtB,kBAAkB,CAAC,KAAK,CAAC,CAAC;yBAC3B;oBACH,CAAC,EACD,SAAS,EAAE,IAAI,EACf,eAAe,EAAE,CAAC,EAClB,cAAc,EAAE,IAAI,GACpB;gBACF,8BAAC,kBAAO,CAAC,KAAK,OAAG,CACD,CACL;QACf,8BAAC,kBAAO,CAAC,IAAI;YACX,8BAAC,kBAAO,CAAC,OAAO,IAAC,OAAO;gBACtB,8BAAC,iBAAM,IAAC,OAAO,EAAC,OAAO,EAAC,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,QAAQ;oBAC/D,wCAAM,SAAS,EAAC,SAAS,IAAE,CAAC,CAAC,aAAa,CAAC,CAAQ;oBACnD,8BAAC,6BAAqB,OAAG,CAClB,CACO;YAClB,8BAAC,kBAAO,CAAC,MAAM;gBACb,8BAAC,kBAAO,CAAC,OAAO,IAAC,KAAK,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,IAAI,EAAC,OAAO;oBACjD,CAAC,CAAC,aAAa,CAAC;oBACjB,8BAAC,kBAAO,CAAC,KAAK,OAAG,CACD,CACH,CACJ,CACd,CACJ,CAAC;AACJ,CAAC,CAAC;AA7DW,QAAA,WAAW,eA6DtB"}

package/dist/types/src/components/HuePicker.d.ts

@@ -1,11 +0,0 @@
-import { type Dispatch, type SetStateAction } from 'react';
-import { type ButtonProps } from '@dxos/react-ui';
-export type HuePickerProps = {
-    disabled?: boolean;
-    defaultHue?: string;
-    hue?: string;
-    onChangeHue?: Dispatch<SetStateAction<string>>;
-    onClickClear?: ButtonProps['onClick'];
-};
-export declare const HuePicker: ({ disabled, hue, onChangeHue, defaultHue, onClickClear }: HuePickerProps) => JSX.Element;
-//# sourceMappingURL=HuePicker.d.ts.map

package/dist/types/src/components/HuePicker.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"HuePicker.d.ts","sourceRoot":"","sources":["../../../../src/components/HuePicker.tsx"],"names":[],"mappings":"AAKA,OAAc,EAAE,KAAK,QAAQ,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAElE,OAAO,EAAkE,KAAK,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAYlH,MAAM,MAAM,cAAc,GAAG;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC;IAC/C,YAAY,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;CACvC,CAAC;AAEF,eAAO,MAAM,SAAS,6DAA8D,cAAc,gBA2DjG,CAAC"}

package/dist/types/src/components/HuePicker.js

@@ -1,56 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.HuePicker = void 0;
-//
-// Copyright 2024 DXOS.org
-//
-const react_1 = require("@phosphor-icons/react");
-const react_use_controllable_state_1 = require("@radix-ui/react-use-controllable-state");
-const react_2 = __importDefault(require("react"));
-const react_ui_1 = require("@dxos/react-ui");
-const react_ui_theme_1 = require("@dxos/react-ui-theme");
-const HuePreview = ({ hue }) => {
-    const { tx } = (0, react_ui_1.useThemeContext)();
-    return (react_2.default.createElement("svg", { width: 12, height: 12, viewBox: '0 0 12 12' },
-        react_2.default.createElement("rect", { x: 0, y: 0, width: 12, height: 12, className: tx('hue.fill', 'select--hue__preview', { hue }) })));
-};
-const HuePicker = ({ disabled, hue, onChangeHue, defaultHue, onClickClear }) => {
-    const { t } = (0, react_ui_1.useTranslation)('os');
-    const [hueValue, setHueValue] = (0, react_use_controllable_state_1.useControllableState)({
-        prop: hue,
-        onChange: onChangeHue,
-        defaultProp: defaultHue,
-    });
-    return (react_2.default.createElement(react_2.default.Fragment, null,
-        react_2.default.createElement(react_ui_1.DropdownMenu.Root, { modal: false },
-            react_2.default.createElement(react_ui_1.DropdownMenu.Trigger, { asChild: true },
-                react_2.default.createElement(react_ui_1.Button, { variant: 'ghost', classNames: 'gap-2 plb-1', disabled: disabled },
-                    react_2.default.createElement("span", { className: 'sr-only' }, t('select hue label')),
-                    react_2.default.createElement("div", { role: 'none', className: 'pis-14 grow flex items-center justify-center gap-2' },
-                        react_2.default.createElement(HuePreview, { hue: hueValue }),
-                        react_2.default.createElement("span", null, t(`${hueValue} label`))),
-                    react_2.default.createElement(react_1.CaretDown, { className: (0, react_ui_theme_1.getSize)(4) }))),
-            react_2.default.createElement(react_ui_1.DropdownMenu.Content, { side: 'right' },
-                react_2.default.createElement(react_ui_1.DropdownMenu.Viewport, null, Object.keys(react_ui_theme_1.hueTokenThemes).map((hue) => {
-                    return (react_2.default.createElement(react_ui_1.DropdownMenu.CheckboxItem, { key: hue, checked: hue === hueValue, onCheckedChange: () => setHueValue(hue) },
-                        react_2.default.createElement(HuePreview, { hue: hue }),
-                        react_2.default.createElement("span", { className: 'grow' }, t(`${hue} label`)),
-                        react_2.default.createElement(react_ui_1.DropdownMenu.ItemIndicator, null,
-                            react_2.default.createElement(react_1.Check, null))));
-                })),
-                react_2.default.createElement(react_ui_1.DropdownMenu.Arrow, null))),
-        react_2.default.createElement(react_ui_1.Tooltip.Root, null,
-            react_2.default.createElement(react_ui_1.Tooltip.Trigger, { asChild: true },
-                react_2.default.createElement(react_ui_1.Button, { variant: 'ghost', onClick: onClickClear, disabled: disabled },
-                    react_2.default.createElement("span", { className: 'sr-only' }, t('clear label')),
-                    react_2.default.createElement(react_1.ArrowCounterClockwise, null))),
-            react_2.default.createElement(react_ui_1.Tooltip.Portal, null,
-                react_2.default.createElement(react_ui_1.Tooltip.Content, { style: { zIndex: 70 }, side: 'right' },
-                    t('clear label'),
-                    react_2.default.createElement(react_ui_1.Tooltip.Arrow, null))))));
-};
-exports.HuePicker = HuePicker;
-//# sourceMappingURL=HuePicker.js.map

package/dist/types/src/components/HuePicker.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"HuePicker.js","sourceRoot":"","sources":["../../../../src/components/HuePicker.tsx"],"names":[],"mappings":"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"}