@dxos/shell 0.8.1-main.ae460ac → 0.8.1-staging.31c3ee1

package/dist/lib/browser/react.mjs

@@ -3,7 +3,7 @@ import {
 } from "./chunk-J5LGTIGS.mjs";
 
 // packages/sdk/shell/src/components/AgentConfig.tsx
-import { ArrowsClockwise, Database, Plus, Power } from "@phosphor-icons/react";
+import { ArrowsClockwise, Plus, Power } from "@phosphor-icons/react";
 import React from "react";
 import { Avatar, Button, Link, Tooltip, Trans, useTranslation } from "@dxos/react-ui";
 import { descriptionText, getSize, mx, valenceColorText } from "@dxos/react-ui-theme";
@@ -21,21 +21,15 @@ var AgentConfig = ({ agentStatus, validationMessage, onAgentDestroy, onAgentCrea
     role: "group",
     className: "mlb-2 flex gap-2 items-center",
     "aria-describedby": "devices-panel.create-agent.description"
-  }, /* @__PURE__ */ React.createElement(Avatar.Root, {
+  }, /* @__PURE__ */ React.createElement(Avatar.Root, null, /* @__PURE__ */ React.createElement(Avatar.Content, {
     status: agentStatus === "created" ? "warning" : "inactive",
-    variant: "square"
-  }, /* @__PURE__ */ React.createElement(Avatar.Frame, {
-    classNames: "place-self-center"
-  }, /* @__PURE__ */ React.createElement(Database, {
-    weight: "duotone",
-    width: 24,
-    height: 24,
-    x: 8,
-    y: 8,
-    ...agentStatus !== "created" && {
-      className: "opacity-50"
-    }
-  })), /* @__PURE__ */ React.createElement(Avatar.Label, {
+    variant: "square",
+    classNames: [
+      "place-self-center",
+      agentStatus !== "created" && "opactiy-50"
+    ],
+    icon: "ph--database--duotone"
+  }), /* @__PURE__ */ React.createElement(Avatar.Label, {
     classNames: "flex-1 text-sm truncate"
   }, t(agentStatus === "created" ? "agent requested label" : agentStatus === "creating" ? "creating agent label" : agentStatus === "destroying" ? "destroying agent label" : "getting agent label"))), agentStatus === "created" && /* @__PURE__ */ React.createElement(Tooltip.Root, null, /* @__PURE__ */ React.createElement(Tooltip.Trigger, {
     asChild: true
@@ -154,14 +148,13 @@ var IdentityListItem = /* @__PURE__ */ forwardRef(({ identity, presence, onClick
     labelId,
     ref: forwardedRef
   }, /* @__PURE__ */ React3.createElement(Avatar2.Root, {
+    labelId
+  }, /* @__PURE__ */ React3.createElement(Avatar2.Content, {
     status: presence === SpaceMember.PresenceState.ONLINE ? "active" : "inactive",
-    labelId,
-    hue: identity.profile?.data?.hue || fallbackValue.hue
-  }, /* @__PURE__ */ React3.createElement(Avatar2.Frame, {
+    hue: identity.profile?.data?.hue || fallbackValue.hue,
+    fallback: identity.profile?.data?.emoji || fallbackValue.emoji,
     classNames: "place-self-center"
-  }, /* @__PURE__ */ React3.createElement(Avatar2.Fallback, {
-    text: identity.profile?.data?.emoji || fallbackValue.emoji
-  })), /* @__PURE__ */ React3.createElement(Avatar2.Label, {
+  }), /* @__PURE__ */ React3.createElement(Avatar2.Label, {
     classNames: "text-sm truncate pli-2"
   }, displayName)));
 });
@@ -211,7 +204,7 @@ import { Button as Button3, List as List2, useTranslation as useTranslation4 } f
 import { descriptionText as descriptionText4, getSize as getSize3, mx as mx5 } from "@dxos/react-ui-theme";
 
 // packages/sdk/shell/src/components/DeviceList/DeviceListItem.tsx
-import { Compass, Desktop, DeviceMobile, Devices, DotsThree, ShareFat, Power as Power2, Robot, Database as Database2, FirstAidKit } from "@phosphor-icons/react";
+import { DotsThree, ShareFat, Power as Power2, FirstAidKit } from "@phosphor-icons/react";
 import React5, { forwardRef as forwardRef2 } from "react";
 import { generateName as generateName2 } from "@dxos/display-name";
 import { Device, DeviceType, DeviceKind } from "@dxos/react-client/halo";
@@ -219,13 +212,6 @@ import { ConnectionState } from "@dxos/react-client/mesh";
 import { ListItem as ListItem2, Avatar as Avatar3, useId as useId3, Tag, useTranslation as useTranslation3, DropdownMenu, Button as Button2 } from "@dxos/react-ui";
 import { getSize as getSize2 } from "@dxos/react-ui-theme";
 import { keyToFallback as keyToFallback2 } from "@dxos/util";
-var iconProps = {
-  weight: "duotone",
-  width: 24,
-  height: 24,
-  x: 8,
-  y: 8
-};
 var DeviceListItem = /* @__PURE__ */ forwardRef2(({ device, onClickAdd, onClickEdit, onClickReset, onClickRecover, onClickJoinExisting, classNames, connectionState, onAgentDestroy: _, ...props }, forwardedRef) => {
   const { t } = useTranslation3("os");
   const fallbackValue = keyToFallback2(device.deviceKey);
@@ -245,22 +231,25 @@ var DeviceListItem = /* @__PURE__ */ forwardRef2(({ device, onClickAdd, onClickE
     labelId,
     ref: forwardedRef
   }, /* @__PURE__ */ React5.createElement(Avatar3.Root, {
+    labelId
+  }, /* @__PURE__ */ React5.createElement(Avatar3.Content, {
     status: isCurrent && connectionState === ConnectionState.OFFLINE ? "error" : device.presence === Device.PresenceState.ONLINE ? "active" : "inactive",
-    labelId,
     hue: fallbackValue.hue,
-    variant: "square"
-  }, /* @__PURE__ */ React5.createElement(Avatar3.Frame, {
-    classNames: "place-self-center"
-  }, device.profile?.type ? device.profile.type === DeviceType.AGENT_MANAGED ? /* @__PURE__ */ React5.createElement(Database2, iconProps) : device.profile.type === DeviceType.BROWSER ? /* @__PURE__ */ React5.createElement(Compass, iconProps) : device.profile.type === DeviceType.NATIVE ? /* @__PURE__ */ React5.createElement(Desktop, iconProps) : [
-    DeviceType.AGENT,
-    DeviceType.AGENT_MANAGED
-  ].includes(device.profile.type) ? /* @__PURE__ */ React5.createElement(Robot, iconProps) : device.profile.type === DeviceType.MOBILE ? /* @__PURE__ */ React5.createElement(DeviceMobile, iconProps) : /* @__PURE__ */ React5.createElement(Devices, iconProps) : /* @__PURE__ */ React5.createElement(Avatar3.Fallback, {
-    text: fallbackValue.emoji
-  })), /* @__PURE__ */ React5.createElement(Avatar3.Label, {
+    variant: "square",
+    classNames: "place-self-center",
+    ...device.profile?.type ? {
+      icon: device.profile.type === DeviceType.AGENT_MANAGED ? "ph--database--regular" : device.profile.type === DeviceType.BROWSER ? "ph--compass--regular" : device.profile.type === DeviceType.NATIVE ? "ph--desktop--regular" : [
+        DeviceType.AGENT,
+        DeviceType.AGENT_MANAGED
+      ].includes(device.profile.type) ? "ph--robot--regular" : device.profile.type === DeviceType.MOBILE ? "ph--device-mobile--regular" : "ph--devices--regular"
+    } : {
+      fallback: fallbackValue.emoji
+    }
+  }), /* @__PURE__ */ React5.createElement(Avatar3.Label, {
     classNames: "flex-1 text-sm truncate"
   }, displayName), isCurrent && /* @__PURE__ */ React5.createElement(Tag, {
     color: "primary"
-  }, t("current device tag label")), device.kind === DeviceKind.CURRENT && /* @__PURE__ */ React5.createElement(DropdownMenu.Root, null, /* @__PURE__ */ React5.createElement(DropdownMenu.Trigger, {
+  }, t("current device tag label")), device.kind === DeviceKind.CURRENT && (onClickJoinExisting || onClickRecover || onClickReset) && /* @__PURE__ */ React5.createElement(DropdownMenu.Root, null, /* @__PURE__ */ React5.createElement(DropdownMenu.Trigger, {
     asChild: true
   }, /* @__PURE__ */ React5.createElement(Button2, {
     variant: "ghost",
@@ -270,7 +259,7 @@ var DeviceListItem = /* @__PURE__ */ forwardRef2(({ device, onClickAdd, onClickE
     className: "sr-only"
   }, t("more options label")), /* @__PURE__ */ React5.createElement(DotsThree, {
     className: getSize2(5)
-  }))), /* @__PURE__ */ React5.createElement(DropdownMenu.Content, null, /* @__PURE__ */ React5.createElement(DropdownMenu.Viewport, null, /* @__PURE__ */ React5.createElement(DropdownMenu.Item, {
+  }))), /* @__PURE__ */ React5.createElement(DropdownMenu.Content, null, /* @__PURE__ */ React5.createElement(DropdownMenu.Viewport, null, onClickJoinExisting && /* @__PURE__ */ React5.createElement(DropdownMenu.Item, {
     "data-testid": "device-list-item-current.join-existing",
     onClick: onClickJoinExisting
   }, /* @__PURE__ */ React5.createElement(ShareFat, {
@@ -280,7 +269,7 @@ var DeviceListItem = /* @__PURE__ */ forwardRef2(({ device, onClickAdd, onClickE
     onClick: onClickRecover
   }, /* @__PURE__ */ React5.createElement(FirstAidKit, {
     className: getSize2(5)
-  }), t("choose recover identity label")), /* @__PURE__ */ React5.createElement(DropdownMenu.Item, {
+  }), t("choose recover identity label")), onClickReset && /* @__PURE__ */ React5.createElement(DropdownMenu.Item, {
     "data-testid": "device-list-item-current.reset",
     onClick: onClickReset
   }, /* @__PURE__ */ React5.createElement(Power2, {
@@ -462,21 +451,19 @@ var InvitationListItemImpl = ({ invitation, invitationStatus: propsInvitationSta
     status: avatarStatus,
     animation: avatarAnimation,
     reverseEffects
-  }), /* @__PURE__ */ React8.createElement(Tooltip2.Root, null, /* @__PURE__ */ React8.createElement(Avatar4.Root, {
+  }), /* @__PURE__ */ React8.createElement(Tooltip2.Root, null, /* @__PURE__ */ React8.createElement(Avatar4.Root, null, /* @__PURE__ */ React8.createElement(Tooltip2.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ React8.createElement(Avatar4.Content, {
     ...avatarProps,
     animation: avatarAnimation,
-    status: avatarStatus
-  }, /* @__PURE__ */ React8.createElement(Tooltip2.Trigger, {
-    asChild: true
-  }, /* @__PURE__ */ React8.createElement(Avatar4.Frame, {
+    status: avatarStatus,
+    fallback: hexToEmoji(invitationId),
     tabIndex: 0,
     classNames: [
       focusRing,
       "relative rounded-full place-self-center"
     ]
-  }, /* @__PURE__ */ React8.createElement(Avatar4.Fallback, {
-    text: hexToEmoji(invitationId)
-  })))), /* @__PURE__ */ React8.createElement(Tooltip2.Portal, null, /* @__PURE__ */ React8.createElement(Tooltip2.Content, {
+  }))), /* @__PURE__ */ React8.createElement(Tooltip2.Portal, null, /* @__PURE__ */ React8.createElement(Tooltip2.Content, {
     side: "left"
   }, t(multiUse ? "invite many qr label" : "invite one qr label"), /* @__PURE__ */ React8.createElement(Tooltip2.Arrow, null)))), showShare && invitationUrl ? /* @__PURE__ */ React8.createElement(Tooltip2.Root, null, /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement(Tooltip2.Trigger, {
     asChild: true
@@ -862,9 +849,9 @@ var SpaceListItem = /* @__PURE__ */ forwardRef8(({ space, onClick }, ref) => {
     "data-testid": "space-list-item"
   }, /* @__PURE__ */ React20.createElement(Avatar5.Root, {
     labelId
-  }, /* @__PURE__ */ React20.createElement(Avatar5.Frame, null, /* @__PURE__ */ React20.createElement(Avatar5.Fallback, {
-    text: fallbackValue
-  })), /* @__PURE__ */ React20.createElement(Avatar5.Label, {
+  }, /* @__PURE__ */ React20.createElement(Avatar5.Content, {
+    fallback: fallbackValue
+  }), /* @__PURE__ */ React20.createElement(Avatar5.Label, {
     classNames: "text-sm truncate"
   }, displayName)));
 });
@@ -1558,18 +1545,16 @@ var IdentityHeading = ({ titleId, title, identity, onDone, onUpdateProfile, conn
     corner: /* @__PURE__ */ React25.createElement(CloseButton, {
       onDone
     })
-  }, /* @__PURE__ */ React25.createElement(Avatar6.Root, {
+  }, /* @__PURE__ */ React25.createElement(Avatar6.Root, null, /* @__PURE__ */ React25.createElement(Toolbar.Root, {
+    classNames: "flex justify-center"
+  }, /* @__PURE__ */ React25.createElement(Avatar6.Content, {
     size: 16,
     variant: "circle",
     status: isConnected ? "active" : "error",
-    hue: hue || fallbackValue.hue
-  }, /* @__PURE__ */ React25.createElement(Toolbar.Root, {
-    classNames: "flex justify-center"
-  }, /* @__PURE__ */ React25.createElement(Avatar6.Frame, {
+    hue: hue || fallbackValue.hue,
+    fallback: emoji || fallbackValue.emoji,
     classNames: "relative z-[2] -mli-4 chromatic-ignore"
-  }, /* @__PURE__ */ React25.createElement(Avatar6.Fallback, {
-    text: emoji || fallbackValue.emoji
-  }))), /* @__PURE__ */ React25.createElement(Avatar6.Label, {
+  })), /* @__PURE__ */ React25.createElement(Avatar6.Label, {
     classNames: "sr-only",
     "data-testid": "identityHeading.displayName"
   }, identity.profile?.displayName ?? generateName3(identity.identityKey.toHex())), /* @__PURE__ */ React25.createElement(Input2.Root, null, /* @__PURE__ */ React25.createElement(Input2.Label, {
@@ -1591,7 +1576,8 @@ var IdentityHeading = ({ titleId, title, identity, onDone, onUpdateProfile, conn
     value: hue,
     onChange: setHue,
     onReset: () => setHue(void 0),
-    classNames: "bs-[--rail-action]"
+    classNames: "bs-[--rail-action]",
+    rootVariant: "toolbar-button"
   }), /* @__PURE__ */ React25.createElement(Clipboard3.IconButton, {
     classNames: "bs-[--rail-action]",
     "data-testid": "update-profile-form-copy-key",
@@ -1717,7 +1703,7 @@ var IdentityPanel = ({ titleId: propsTitleId, createInvitationUrl = (code) => co
   if (!identity) {
     log7.error("IdentityPanel rendered with no active identity.", void 0, {
       F: __dxlog_file6,
-      L: 272,
+      L: 283,
       S: void 0,
       C: (f, a) => f(...a)
     });
@@ -1734,7 +1720,7 @@ var IdentityPanel = ({ titleId: propsTitleId, createInvitationUrl = (code) => co
     const subscription = identityService.subscribe((state) => {
       log7("[state]", state, {
         F: __dxlog_file6,
-        L: 285,
+        L: 296,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -2513,12 +2499,12 @@ var IdentityAdded = (props) => {
     role: "none",
     className: "grow flex flex-col items-center justify-center text-center gap-2"
   }, /* @__PURE__ */ React28.createElement(Avatar7.Root, {
+    labelId
+  }, /* @__PURE__ */ React28.createElement(Avatar7.Content, {
     status: "active",
-    labelId,
-    hue: addedIdentity?.profile?.data?.hue || fallbackValue.hue
-  }, /* @__PURE__ */ React28.createElement(Avatar7.Frame, null, /* @__PURE__ */ React28.createElement(Avatar7.Fallback, {
-    text: addedIdentity?.profile?.data?.emoji || fallbackValue.emoji
-  })), /* @__PURE__ */ React28.createElement(Avatar7.Label, {
+    hue: addedIdentity?.profile?.data?.hue || fallbackValue.hue,
+    fallback: addedIdentity?.profile?.data?.emoji || fallbackValue.emoji
+  }), /* @__PURE__ */ React28.createElement(Avatar7.Label, {
     classNames: mx21("text-lg truncate", !addedIdentity?.profile?.displayName && "font-mono")
   }, displayName))), /* @__PURE__ */ React28.createElement(Actions, null, mode === "halo-only" ? doneActionParent ? /* @__PURE__ */ cloneElement2(doneActionParent, {}, doneAction) : doneAction : /* @__PURE__ */ React28.createElement(Action, {
     variant: "primary",
@@ -4083,15 +4069,15 @@ var os = {
   "device list heading": "Devices",
   "space member list heading": "Members",
   "space panel heading": "Space membership",
-  "auth code message": "Enter the following auth code on the joining device.",
-  "auth other device emoji message": "Be sure the other device shows the following symbol:",
+  "auth code message": "Enter the following auth code on the joining device. Click the code to copy\xA0it.",
+  "auth other device emoji message": "Be sure the other device shows the following\xA0emoji.",
   "display name input label": "Display name",
   "display name input placeholder": "Enter a display name",
-  "invite one label": "Single-use invitation",
+  "invite one label": "Create single-use invitation",
   "invite one description": "Only one user may join.",
   "invite one qr label": "Single-use invitation",
   "invite one list item label": "Active single-use invitation",
-  "invite many label": "Multi-use invitation",
+  "invite many label": "Create multi-use invitation",
   "invite many description": "Anyone with the link can join.",
   "invite many qr label": "Multi-use invitation",
   "invite many list item label": "Active multi-use invitation",
@@ -4105,7 +4091,7 @@ var os = {
   "confirmation placeholder": "Enter {{confirmationValue}} to continue.",
   "sign out chooser title": "Danger zone",
   "sign out chooser message": "Proceeding with the action below will erase all data on this device.",
-  "join new identity label": "Join a new identity",
+  "join new identity label": "Join an existing identity",
   "reset device label": "Reset storage",
   "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",
@@ -4386,6 +4372,7 @@ export {
   ConfirmReset,
   ConfirmResetImpl,
   DeviceList,
+  DeviceListItem,
   Emoji,
   Heading,
   IdentityDialog,