@dxos/shell 0.4.4-main.c5da621 → 0.4.4-main.d035bb3

package/dist/lib/browser/react.mjs

@@ -50,17 +50,15 @@ var CopyButton = ({ value, classNames, iconProps, ...props }) => {
   }, /* @__PURE__ */ React2.createElement("span", {
     className: "pli-1"
   }, t("copy invitation code label")), /* @__PURE__ */ React2.createElement(Copy, {
-    className: getSize(4),
-    weight: "bold",
+    className: getSize(5),
     ...iconProps
   })), /* @__PURE__ */ React2.createElement("div", {
     role: "none",
     className: mx("flex gap-1 items-center", !isCopied && inactiveLabelStyles)
   }, /* @__PURE__ */ React2.createElement("span", {
     className: "pli-1"
-  }, t("copy invitation code success label")), /* @__PURE__ */ React2.createElement(Check, {
-    className: getSize(4),
-    weight: "bold",
+  }, t("copy success label")), /* @__PURE__ */ React2.createElement(Check, {
+    className: getSize(5),
     ...iconProps
   })));
 };
@@ -68,7 +66,7 @@ var CopyButtonIconOnly = ({ value, classNames, iconProps, variant, ...props }) =
   const { t } = useTranslation("os");
   const { textValue, setTextValue } = useClipboardContext();
   const isCopied = textValue === value;
-  const label = isCopied ? t("copy invitation code success label") : t("copy invitation code label");
+  const label = isCopied ? t("copy success label") : t("copy invitation code label");
   const [open, setOpen] = useState2(false);
   return /* @__PURE__ */ React2.createElement(Tooltip.Root, {
     delayDuration: 1500,
@@ -92,7 +90,6 @@ var CopyButtonIconOnly = ({ value, classNames, iconProps, variant, ...props }) =
     ]
   }, /* @__PURE__ */ React2.createElement(Copy, {
     className: getSize(5),
-    weight: "bold",
     ...iconProps
   }))));
 };
@@ -154,13 +151,14 @@ import { generateName } from "@dxos/display-name";
 import { SpaceMember } from "@dxos/react-client/echo";
 import { ListItem, Avatar, useJdenticonHref, useId as useId2 } from "@dxos/react-ui";
 import { mx as mx3 } from "@dxos/react-ui-theme";
-var IdentityListItem = /* @__PURE__ */ forwardRef(({ identity, presence, onClick }, forwardedRef) => {
+var IdentityListItem = /* @__PURE__ */ forwardRef(({ identity, presence, onClick, classNames, ...props }, forwardedRef) => {
   const fallbackValue = identity.identityKey.toHex();
   const labelId = useId2("identityListItem__label");
   const jdenticon = useJdenticonHref(fallbackValue ?? "", 12);
   const displayName = identity.profile?.displayName ?? generateName(identity.identityKey.toHex());
   return /* @__PURE__ */ React4.createElement(ListItem.Root, {
-    classNames: mx3("flex gap-2 pis-3 pie-1 items-center", onClick && "cursor-pointer"),
+    ...props,
+    classNames: mx3("flex gap-2 pis-3 pie-1 items-center", onClick && "cursor-pointer", classNames),
     onClick: () => onClick?.(),
     "data-testid": "identity-list-item",
     labelId,
@@ -168,7 +166,9 @@ var IdentityListItem = /* @__PURE__ */ forwardRef(({ identity, presence, onClick
   }, /* @__PURE__ */ React4.createElement(Avatar.Root, {
     status: presence === SpaceMember.PresenceState.ONLINE ? "active" : "inactive",
     labelId
-  }, /* @__PURE__ */ React4.createElement(Avatar.Frame, null, /* @__PURE__ */ React4.createElement(Avatar.Fallback, {
+  }, /* @__PURE__ */ React4.createElement(Avatar.Frame, {
+    classNames: "place-self-center"
+  }, /* @__PURE__ */ React4.createElement(Avatar.Fallback, {
     href: jdenticon
   })), /* @__PURE__ */ React4.createElement(Avatar.Label, {
     classNames: "text-sm truncate pli-2"
@@ -335,11 +335,11 @@ var avatarProps = {
   size: 10,
   variant: "circle"
 };
-var AvatarStackEffect = ({ animation, status }) => {
+var AvatarStackEffect = ({ animation, status, reverseEffects }) => {
   const { tx } = useThemeContext2();
   return /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement("span", {
     role: "none",
-    className: mx7("absolute inline-start-1 inline-end-auto opacity-20", getSize2(avatarProps.size))
+    className: mx7("absolute inline-end-auto opacity-20", reverseEffects ? "inline-start-3" : "inline-start-1", getSize2(avatarProps.size))
   }, /* @__PURE__ */ React8.createElement("span", {
     role: "none",
     className: tx("avatar.ring", "avatar__ring", {
@@ -352,7 +352,7 @@ var AvatarStackEffect = ({ animation, status }) => {
     }
   })), /* @__PURE__ */ React8.createElement("span", {
     role: "none",
-    className: mx7("absolute inline-start-2 inline-end-auto opacity-50", getSize2(avatarProps.size))
+    className: mx7("absolute inline-end-auto opacity-50", reverseEffects ? "inline-start-2" : "inline-start-2", getSize2(avatarProps.size))
   }, /* @__PURE__ */ React8.createElement("span", {
     role: "none",
     className: tx("avatar.ring", "avatar__ring", {
@@ -365,7 +365,7 @@ var AvatarStackEffect = ({ animation, status }) => {
     }
   })));
 };
-var InvitationListItemImpl = ({ invitation, invitationStatus: propsInvitationStatus, send, onClickRemove, createInvitationUrl }) => {
+var InvitationListItemImpl = ({ invitation, invitationStatus: propsInvitationStatus, send, onClickRemove, createInvitationUrl, reverseEffects, ...props }) => {
   const { t } = useTranslation4("os");
   const { cancel, status: invitationStatus, invitationCode, authCode, type } = propsInvitationStatus;
   const isCancellable = !([
@@ -406,12 +406,17 @@ var InvitationListItemImpl = ({ invitation, invitationStatus: propsInvitationSta
   const avatarStatus = avatarError ? "error" : avatarGreen ? "active" : "inactive";
   return /* @__PURE__ */ React8.createElement(ListItem2.Root, {
     id: invitationCode,
-    classNames: "flex gap-2 pis-3 pie-1 items-center relative"
+    ...props,
+    classNames: [
+      "flex gap-2 pis-3 pie-1 items-center relative",
+      props.classNames
+    ]
   }, /* @__PURE__ */ React8.createElement(ListItem2.Heading, {
     classNames: "sr-only"
   }, t(type === Invitation2.Type.MULTIUSE ? "invite many list item label" : "invite one list item label")), type === Invitation2.Type.MULTIUSE && /* @__PURE__ */ React8.createElement(AvatarStackEffect, {
     status: avatarStatus,
-    animation: avatarAnimation
+    animation: avatarAnimation,
+    reverseEffects
   }), /* @__PURE__ */ React8.createElement(Tooltip2.Root, null, /* @__PURE__ */ React8.createElement(Avatar2.Root, {
     ...avatarProps,
     animation: avatarAnimation,
@@ -422,7 +427,7 @@ var InvitationListItemImpl = ({ invitation, invitationStatus: propsInvitationSta
     tabIndex: 0,
     classNames: [
       focusRing,
-      "relative rounded-full"
+      "relative rounded-full place-self-center"
     ]
   }, /* @__PURE__ */ React8.createElement(Avatar2.Fallback, {
     text: toEmoji(invitationId)
@@ -457,24 +462,22 @@ var InvitationListItemImpl = ({ invitation, invitationStatus: propsInvitationSta
     className: "grow"
   }, " "), isCancellable ? /* @__PURE__ */ React8.createElement(Button2, {
     variant: "ghost",
-    classNames: "flex gap-1",
+    classNames: "flex gap-1 pli-0",
     onClick: cancel,
     "data-testid": "cancel-invitation"
   }, /* @__PURE__ */ React8.createElement("span", {
     className: "sr-only"
   }, t("cancel invitation label")), /* @__PURE__ */ React8.createElement(X, {
-    className: getSize2(5),
-    weight: "bold"
+    className: getSize2(4)
   })) : /* @__PURE__ */ React8.createElement(Button2, {
     variant: "ghost",
-    classNames: "flex gap-1",
+    classNames: "flex gap-1 pli-0",
     onClick: handleClickRemove,
     "data-testid": "remove-invitation"
   }, /* @__PURE__ */ React8.createElement("span", {
     className: "sr-only"
   }, t("remove invitation label")), /* @__PURE__ */ React8.createElement(X, {
-    className: getSize2(5),
-    weight: "bold"
+    className: getSize2(4)
   })));
 };
 
@@ -554,7 +557,9 @@ var BifurcatedAction = /* @__PURE__ */ forwardRef2((props, forwardedRef) => {
     ref: forwardedRef,
     variant,
     onClick: activeAction.onClick
-  }, activeAction.icon && /* @__PURE__ */ React11.createElement(activeAction.icon, null), /* @__PURE__ */ React11.createElement("span", null, activeAction.label)), /* @__PURE__ */ React11.createElement(DropdownMenu.Root, null, /* @__PURE__ */ React11.createElement(DropdownMenu.Trigger, {
+  }, activeAction.icon && /* @__PURE__ */ React11.createElement(activeAction.icon, {
+    className: getSize3(5)
+  }), /* @__PURE__ */ React11.createElement("span", null, activeAction.label)), /* @__PURE__ */ React11.createElement(DropdownMenu.Root, null, /* @__PURE__ */ React11.createElement(DropdownMenu.Trigger, {
     asChild: true
   }, /* @__PURE__ */ React11.createElement(Button3, {
     classNames: [
@@ -563,7 +568,9 @@ var BifurcatedAction = /* @__PURE__ */ forwardRef2((props, forwardedRef) => {
     ]
   }, /* @__PURE__ */ React11.createElement("span", {
     className: "sr-only"
-  }, t("invite options label")), /* @__PURE__ */ React11.createElement(CaretDown, null))), /* @__PURE__ */ React11.createElement(DropdownMenu.Content, null, /* @__PURE__ */ React11.createElement(DropdownMenu.Viewport, null, Object.entries(actions).map(([id, action]) => {
+  }, t("invite options label")), /* @__PURE__ */ React11.createElement(CaretDown, {
+    className: getSize3(4)
+  }))), /* @__PURE__ */ React11.createElement(DropdownMenu.Content, null, /* @__PURE__ */ React11.createElement(DropdownMenu.Viewport, null, Object.entries(actions).map(([id, action]) => {
     return /* @__PURE__ */ React11.createElement(DropdownMenu.CheckboxItem, {
       key: id,
       "aria-labelledby": `${id}__label`,
@@ -583,7 +590,10 @@ var BifurcatedAction = /* @__PURE__ */ forwardRef2((props, forwardedRef) => {
       className: descriptionText4
     }, action.description)), /* @__PURE__ */ React11.createElement(DropdownMenu.ItemIndicator, {
       asChild: true
-    }, /* @__PURE__ */ React11.createElement(Check2, null)));
+    }, /* @__PURE__ */ React11.createElement(Check2, {
+      weight: "bold",
+      className: getSize3(4)
+    })));
   })), /* @__PURE__ */ React11.createElement(DropdownMenu.Arrow, null))));
 });
 var Action = /* @__PURE__ */ forwardRef2((props, forwardedRef) => {
@@ -1143,10 +1153,14 @@ var ProfileForm = (props) => {
   });
 };
 var ProfileFormImpl = (props) => {
-  const { active, profile, send, onUpdateProfile, validationMessage } = props;
+  const { active, identity, send, onUpdateProfile, validationMessage } = props;
+  const profile = identity?.profile;
   const disabled = !active;
   const { t } = useTranslation10("os");
   const [inputValue, setInputValue] = useState3(profile?.displayName ?? "");
+  const { textValue, setTextValue } = useClipboardContext();
+  const identityHex = identity?.identityKey.toHex();
+  const copied = textValue === identityHex;
   return /* @__PURE__ */ React24.createElement(React24.Fragment, null, /* @__PURE__ */ React24.createElement("div", {
     role: "none",
     className: "grow flex flex-col justify-center"
@@ -1162,6 +1176,15 @@ var ProfileFormImpl = (props) => {
       displayName: inputValue
     })
   })), /* @__PURE__ */ React24.createElement(Actions, null, /* @__PURE__ */ React24.createElement(Action, {
+    variant: "ghost",
+    disabled,
+    onClick: () => {
+      if (identityHex) {
+        void setTextValue(identityHex);
+      }
+    },
+    "data-testid": "update-profile-form-copy-key"
+  }, t(copied ? "copy success label" : "copy self public key label")), /* @__PURE__ */ React24.createElement(Action, {
     variant: "ghost",
     disabled,
     onClick: () => send?.({
@@ -1476,7 +1499,7 @@ var IdentityPanelImpl = (props) => {
   }, /* @__PURE__ */ React27.createElement(ProfileForm, {
     send: rest.send,
     active: activeView === "update profile form",
-    profile: identity.profile,
+    identity,
     onUpdateProfile
   })), /* @__PURE__ */ React27.createElement(Viewport.View, {
     classNames: viewStyles,
@@ -3292,7 +3315,8 @@ var SpacePanelHeading = ({ titleId, space, onDone }) => {
     role: "none",
     className: "flex gap-4 items-center justify-center mlb-4"
   }, /* @__PURE__ */ React39.createElement(Planet, {
-    size: 32
+    size: 32,
+    weight: "light"
   }), /* @__PURE__ */ React39.createElement("div", {
     className: "block text-start font-light text-xl"
   }, name ?? space.key.truncate())));
@@ -3592,7 +3616,8 @@ var os = {
   "identity offline description": "Offline",
   "sidebar label": "DXOS sidebar",
   "copy invitation code label": "Copy URL",
-  "copy invitation code success label": "Copied",
+  "copy success label": "Copied",
+  "copy self public key label": "Copy public key",
   "open share panel label": "View QR code",
   "joining space heading": "Joining space",
   "join space heading": "Enter space invitation",
@@ -3897,6 +3922,7 @@ export {
   InvitationListContainer,
   InvitationListItem,
   InvitationListItemImpl,
+  InvitationManager,
   JoinDialog,
   JoinPanel,
   JoinPanelImpl,