@dxos/shell 0.5.1-main.d514f85 → 0.5.1-main.e46fa49

package/dist/lib/browser/react.mjs

@@ -582,11 +582,11 @@ var DeviceListItem = /* @__PURE__ */ forwardRef2(({ device, onClickAdd, onClickE
     DeviceType.AGENT_MANAGED
   ].includes(device.profile.type) ? /* @__PURE__ */ React9.createElement(Robot, iconProps) : device.profile.type === DeviceType.MOBILE ? /* @__PURE__ */ React9.createElement(DeviceMobile, iconProps) : /* @__PURE__ */ React9.createElement(Devices, iconProps) : /* @__PURE__ */ React9.createElement(Avatar3.Fallback, {
     text: fallbackValue.emoji
-  })), isCurrent && /* @__PURE__ */ React9.createElement(Tag, {
-    color: "primary"
-  }, t("current device tag label")), /* @__PURE__ */ React9.createElement(Avatar3.Label, {
+  })), /* @__PURE__ */ React9.createElement(Avatar3.Label, {
     classNames: "flex-1 text-sm truncate"
-  }, displayName), device.kind === DeviceKind.CURRENT && /* @__PURE__ */ React9.createElement(DropdownMenu2.Root, null, /* @__PURE__ */ React9.createElement(DropdownMenu2.Trigger, {
+  }, displayName), isCurrent && /* @__PURE__ */ React9.createElement(Tag, {
+    color: "primary"
+  }, t("current device tag label")), device.kind === DeviceKind.CURRENT && /* @__PURE__ */ React9.createElement(DropdownMenu2.Root, null, /* @__PURE__ */ React9.createElement(DropdownMenu2.Trigger, {
     asChild: true
   }, /* @__PURE__ */ React9.createElement(Button5, {
     variant: "ghost",
@@ -1524,6 +1524,9 @@ var InvitationManager = ({ invitationUrl, active, send, status, multiUse, authCo
   const showAuthCode = statusValue === 3;
   const emoji = hexToEmoji3(id);
   const activeView = useMemo2(() => {
+    if (multiUse) {
+      return "showing qr";
+    }
     switch (true) {
       case statusValue === 5:
       case statusValue < 0:
@@ -1641,7 +1644,9 @@ var ConfirmResetImpl = ({ disabled, pending, validationMessage, onConfirm, onCan
     })),
     disabled,
     "data-testid": `${testIdAffix}.reset-identity-input`,
-    placeholder: confirmationValue,
+    placeholder: t("confirmation placeholder", {
+      confirmationValue
+    }),
     onChange: ({ target: { value } }) => setInputValue(value)
   })), /* @__PURE__ */ React28.createElement(Actions, null, onCancel && /* @__PURE__ */ React28.createElement(Action, {
     disabled,
@@ -2983,7 +2988,7 @@ var JoinPanelImpl = (props) => {
     id: "reset storage confirmation"
   }, /* @__PURE__ */ React38.createElement(ConfirmResetComponent, {
     send,
-    active: activeView === "reset identity confirmation",
+    active: activeView === "reset storage confirmation",
     onCancel: onCancelResetStorage,
     onConfirm: onConfirmResetStorage
   })), /* @__PURE__ */ React38.createElement(Viewport.View, {
@@ -3150,7 +3155,7 @@ var JoinPanel = ({ titleId: propsTitleId, mode = "default", initialDisposition =
       }):
         return "addition method chooser";
       case joinState.matches("resettingIdentity"):
-        return "reset identity confirmation";
+        return "reset storage confirmation";
       case joinState.matches({
         choosingIdentity: "creatingIdentity"
       }):
@@ -3505,8 +3510,8 @@ var SpaceManager = (props) => {
       icon: UsersThree,
       onClick: useCallback8(() => {
         const invitation = space.share?.({
-          type: Invitation7.Type.INTERACTIVE,
-          authMethod: Invitation7.AuthMethod.NONE,
+          type: Invitation7.Type.DELEGATED,
+          authMethod: Invitation7.AuthMethod.KNOWN_PUBLIC_KEY,
           multiUse: true,
           target
         });
@@ -3746,8 +3751,8 @@ import React47, { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import { DEFAULT_CLIENT_CHANNEL, DEFAULT_SHELL_CHANNEL } from "@dxos/client-protocol";
 import { ShellRuntimeImpl } from "@dxos/client-services";
-import { AgentHostingProvider, Client, ClientContext, ClientServicesProxy, Config, SystemStatus } from "@dxos/react-client";
-import { ThemeProvider, Tooltip as Tooltip7 } from "@dxos/react-ui";
+import { AgentHostingProvider, Client, ClientContext, ClientServicesProxy, Config, ShellDisplay as ShellDisplay2, SystemStatus } from "@dxos/react-client";
+import { Button as Button11, Dialog as Dialog3, ThemeProvider, Tooltip as Tooltip7, useTranslation as useTranslation26 } from "@dxos/react-ui";
 import { defaultTx } from "@dxos/react-ui-theme";
 import { createIFramePort } from "@dxos/rpc-tunnel";
 
@@ -3792,17 +3797,37 @@ var StatusDialog = () => {
 
 // packages/sdk/shell/src/composites/Shell/Shell.tsx
 var __dxlog_file13 = "/home/runner/work/dxos/dxos/packages/sdk/shell/src/composites/Shell/Shell.tsx";
-var Shell = ({ runtime, origin }) => {
+var Shell = ({ runtime }) => {
   const [{ layout, invitationCode, spaceKey, target }, setLayout] = useState13({
     layout: runtime.layout,
     invitationCode: runtime.invitationCode,
     spaceKey: runtime.spaceKey,
     target: runtime.target
   });
+  const [{ invitationUrl, deviceInvitationParam, spaceInvitationParam }, setInvitationUrl] = useState13({
+    invitationUrl: runtime.invitationUrl,
+    deviceInvitationParam: runtime.deviceInvitationParam,
+    spaceInvitationParam: runtime.spaceInvitationParam
+  });
   const client = useClient7();
   const space = useSpace2(spaceKey);
+  const createDeviceInvitationUrl = (invitationCode2) => {
+    const baseUrl = new URL(invitationUrl);
+    baseUrl.searchParams.set(deviceInvitationParam, invitationCode2);
+    return baseUrl.toString();
+  };
+  const createSpaceInvitationUrl = (invitationCode2) => {
+    const baseUrl = new URL(invitationUrl);
+    baseUrl.searchParams.set(spaceInvitationParam, invitationCode2);
+    return baseUrl.toString();
+  };
   useEffect7(() => {
-    return runtime.layoutUpdate.on((request) => setLayout(request));
+    const unsubscribeLayout = runtime.layoutUpdate.on((request) => setLayout(request));
+    const unsubscribeInvitationUrl = runtime.invitationUrlUpdate.on((request) => setInvitationUrl(request));
+    return () => {
+      unsubscribeLayout();
+      unsubscribeInvitationUrl();
+    };
   }, [
     runtime
   ]);
@@ -3810,7 +3835,7 @@ var Shell = ({ runtime, origin }) => {
     if (layout === ShellLayout.SPACE && !space) {
       log14.warn("No space found for shell space invitations.", void 0, {
         F: __dxlog_file13,
-        L: 33,
+        L: 64,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -3854,7 +3879,7 @@ var Shell = ({ runtime, origin }) => {
     case ShellLayout.SHARE_IDENTITY:
     case ShellLayout.EDIT_PROFILE:
       return /* @__PURE__ */ React46.createElement(IdentityDialog, {
-        createInvitationUrl: (invitationCode2) => `${origin}?deviceInvitationCode=${invitationCode2}`,
+        createInvitationUrl: createDeviceInvitationUrl,
         onResetStorage: async () => {
           runtime.setLayout({
             layout: ShellLayout.STATUS
@@ -3888,7 +3913,7 @@ var Shell = ({ runtime, origin }) => {
       return space ? /* @__PURE__ */ React46.createElement(SpaceDialog, {
         space,
         target,
-        createInvitationUrl: (invitationCode2) => `${origin}?spaceInvitationCode=${invitationCode2}`,
+        createInvitationUrl: createSpaceInvitationUrl,
         onDone: async () => {
           await runtime.setAppContext({
             display: ShellDisplay.NONE
@@ -4014,21 +4039,22 @@ var os = {
   "auth code message": "Enter the following auth code on the joining device.",
   "display name input label": "Display name",
   "display name input placeholder": "Enter a display name",
-  "invite one label": "Invite one",
+  "invite one label": "Single-use invitation",
   "invite one description": "Only one user may join.",
-  "invite one qr label": "Single-use",
+  "invite one qr label": "Single-use invitation",
   "invite one list item label": "Active single-use invitation",
-  "invite many label": "Invite many",
+  "invite many label": "Standing invitation",
   "invite many description": "Anyone with the link can join.",
-  "invite many qr label": "Multiple-use",
-  "invite many list item label": "Active multiple-use invitation",
+  "invite many qr label": "Standing invitation",
+  "invite many list item label": "Active standing invitation",
   "invite options label": "Change the active invite option.",
   "reset in progress label": "Resetting...",
   "confirm label": "Confirm",
-  "reset storage input label": "This will clear this device and all associated data. Type {{confirmationValue}} and confirm to continue.",
-  "join new identity input label": "In order to join an existing device, storage on this device must be cleared first. Type {{confirmationValue}} to continue.",
+  "reset storage input label": "WARNING: This will delete all data on this device. Type {{confirmationValue}} to continue.",
+  "join new identity input label": "WARNING: To join an existing device all data on this device will be deleted. Type {{confirmationValue}} to continue.",
   "failed to reset identity message": "Failed to reset identity.",
-  "confirmation value": "CONFIRM",
+  "confirmation value": "RESET",
+  "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",
@@ -4038,7 +4064,7 @@ var os = {
   "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",
-  "resetting message": "One moment while things are reset\u2026",
+  "resetting message": "One moment while the device is reset\u2026",
   "red label": "Red",
   "orange label": "Orange",
   "amber label": "Amber",
@@ -4067,7 +4093,8 @@ var os = {
   "agent message body": "Creating an agent helps keep your devices and peers in-sync. An agent is like any other device, but since it\u2019s always online your changes will sync even when all your physical devices are\xA0asleep.",
   "create agent label": "Start an agent",
   "destroy agent label": "Shut down agent",
-  "agent device label": "Your agent"
+  "agent device label": "Your agent",
+  "shell fallback title": "Shell failed to connect"
 };
 
 // packages/sdk/shell/src/translations/index.ts
@@ -4077,39 +4104,62 @@ var osTranslations = {
 
 // packages/sdk/shell/src/composites/Shell/run-shell.tsx
 var runShell = async (config = new Config()) => {
-  const services = new ClientServicesProxy(createIFramePort({
-    channel: DEFAULT_CLIENT_CHANNEL
-  }));
-  const client = new Client({
-    config,
-    services
-  });
   const runtime = new ShellRuntimeImpl(createIFramePort({
     channel: DEFAULT_SHELL_CHANNEL
   }));
-  await Promise.all([
-    runtime.open(),
-    client.initialize()
-  ]);
-  createRoot(document.getElementById("root")).render(/* @__PURE__ */ React47.createElement(StrictMode, null, /* @__PURE__ */ React47.createElement(ThemeProvider, {
-    tx: defaultTx,
-    resourceExtensions: [
-      osTranslations
-    ]
-  }, /* @__PURE__ */ React47.createElement(ClientContext.Provider, {
-    value: {
-      client,
-      status: SystemStatus.ACTIVE
-    }
-  }, /* @__PURE__ */ React47.createElement(ClipboardProvider, null, /* @__PURE__ */ React47.createElement(Tooltip7.Provider, null, /* @__PURE__ */ React47.createElement(AgentHostingProvider, null, /* @__PURE__ */ React47.createElement(Shell, {
-    runtime,
-    origin: location.origin
-  }))))))));
+  await runtime.open();
+  try {
+    const services = new ClientServicesProxy(createIFramePort({
+      channel: DEFAULT_CLIENT_CHANNEL
+    }));
+    const client = new Client({
+      config,
+      services
+    });
+    await client.initialize();
+    createRoot(document.getElementById("root")).render(/* @__PURE__ */ React47.createElement(StrictMode, null, /* @__PURE__ */ React47.createElement(ThemeProvider, {
+      tx: defaultTx,
+      resourceExtensions: [
+        osTranslations
+      ]
+    }, /* @__PURE__ */ React47.createElement(ClientContext.Provider, {
+      value: {
+        client,
+        status: SystemStatus.ACTIVE
+      }
+    }, /* @__PURE__ */ React47.createElement(ClipboardProvider, null, /* @__PURE__ */ React47.createElement(Tooltip7.Provider, null, /* @__PURE__ */ React47.createElement(AgentHostingProvider, null, /* @__PURE__ */ React47.createElement(Shell, {
+      runtime
+    }))))))));
+  } catch {
+    createRoot(document.getElementById("root")).render(/* @__PURE__ */ React47.createElement(StrictMode, null, /* @__PURE__ */ React47.createElement(ThemeProvider, {
+      tx: defaultTx,
+      resourceExtensions: [
+        osTranslations
+      ]
+    }, /* @__PURE__ */ React47.createElement(Fallback, {
+      onClose: () => runtime.setAppContext({
+        display: ShellDisplay2.NONE
+      })
+    }))));
+  }
+};
+var Fallback = ({ onClose }) => {
+  const { t } = useTranslation26("os");
+  return /* @__PURE__ */ React47.createElement(Dialog3.Root, {
+    modal: true,
+    open: true,
+    onOpenChange: () => onClose?.()
+  }, /* @__PURE__ */ React47.createElement(Dialog3.Overlay, null, /* @__PURE__ */ React47.createElement(Dialog3.Content, null, /* @__PURE__ */ React47.createElement(Dialog3.Title, null, t("shell fallback title")), /* @__PURE__ */ React47.createElement(Dialog3.Close, {
+    asChild: true,
+    onClick: () => onClose?.()
+  }, /* @__PURE__ */ React47.createElement(Button11, {
+    variant: "primary"
+  }, t("close label"))))));
 };
 
 // packages/sdk/shell/src/composites/Shell/ShellContext.tsx
 import React48, { createContext as createContext2, useCallback as useCallback9, useContext as useContext2, useEffect as useEffect8, useMemo as useMemo6, useState as useState14 } from "react";
-import { ShellDisplay as ShellDisplay2, ShellLayout as ShellLayout3, useClient as useClient8 } from "@dxos/react-client";
+import { ShellDisplay as ShellDisplay3, ShellLayout as ShellLayout3, useClient as useClient8 } from "@dxos/react-client";
 import { useIdentity as useIdentity3 } from "@dxos/react-client/halo";
 import { mx as mx25 } from "@dxos/react-ui-theme";
 
@@ -4117,12 +4167,16 @@ import { mx as mx25 } from "@dxos/react-ui-theme";
 import { Event } from "@dxos/async";
 import { ShellLayout as ShellLayout2 } from "@dxos/react-client";
 var MemoryShellRuntime = class {
-  constructor({ layout, invitationCode, spaceKey } = {}) {
+  constructor({ layout, invitationCode, spaceKey, invitationUrl, deviceInvitationParam, spaceInvitationParam } = {}) {
     this.layoutUpdate = new Event();
+    this.invitationUrlUpdate = new Event();
     this.contextUpdate = new Event();
     this._layout = layout ?? ShellLayout2.DEFAULT;
     this._invitationCode = invitationCode;
     this._spaceKey = spaceKey;
+    this._invitationUrl = invitationUrl ?? window.location.origin;
+    this._deviceInvitationParam = deviceInvitationParam ?? "deviceInvitationCode";
+    this._spaceInvitationParam = spaceInvitationParam ?? "spaceInvitationCode";
   }
   get layout() {
     return this._layout;
@@ -4133,12 +4187,27 @@ var MemoryShellRuntime = class {
   get spaceKey() {
     return this._spaceKey;
   }
+  get invitationUrl() {
+    return this._invitationUrl;
+  }
+  get deviceInvitationParam() {
+    return this._deviceInvitationParam;
+  }
+  get spaceInvitationParam() {
+    return this._spaceInvitationParam;
+  }
   setLayout(request) {
     this._layout = request.layout;
     this._invitationCode = request.invitationCode;
     this._spaceKey = request.spaceKey;
     this.layoutUpdate.emit(request);
   }
+  setInvitationUrl(request) {
+    this._invitationUrl = request.invitationUrl;
+    this._deviceInvitationParam = request.deviceInvitationParam;
+    this._spaceInvitationParam = request.spaceInvitationParam;
+    this.invitationUrlUpdate.emit(request);
+  }
   async setAppContext(context) {
     this.contextUpdate.emit(context);
   }
@@ -4152,9 +4221,9 @@ var useShell = () => {
   const setLayout = async (layout, options) => {
     if (runtime) {
       if (layout === ShellLayout3.DEFAULT) {
-        setDisplay?.(ShellDisplay2.NONE);
+        setDisplay?.(ShellDisplay3.NONE);
       } else {
-        setDisplay?.(ShellDisplay2.FULLSCREEN);
+        setDisplay?.(ShellDisplay3.FULLSCREEN);
       }
       runtime.setLayout({
         layout,
@@ -4170,7 +4239,7 @@ var useShell = () => {
 var ShellProvider = ({ space, deviceInvitationCode, spaceInvitationCode, onJoinedSpace, children }) => {
   const client = useClient8();
   const identity = useIdentity3();
-  const [display, setDisplay] = useState14(!identity || spaceInvitationCode || deviceInvitationCode ? ShellDisplay2.FULLSCREEN : ShellDisplay2.NONE);
+  const [display, setDisplay] = useState14(!identity || spaceInvitationCode || deviceInvitationCode ? ShellDisplay3.FULLSCREEN : ShellDisplay3.NONE);
   const shellRuntime = useMemo6(() => {
     if (client.config.get("runtime.app.env.DX_VAULT") !== "false") {
       return;
@@ -4205,13 +4274,13 @@ var ShellProvider = ({ space, deviceInvitationCode, spaceInvitationCode, onJoine
       shellRuntime.setLayout({
         layout: ShellLayout3.SHARE_IDENTITY
       });
-      setDisplay(ShellDisplay2.FULLSCREEN);
+      setDisplay(ShellDisplay3.FULLSCREEN);
     } else if (event.key === "." && modifier) {
       shellRuntime.setLayout({
         layout: ShellLayout3.SPACE,
         spaceKey: space.key
       });
-      setDisplay(ShellDisplay2.FULLSCREEN);
+      setDisplay(ShellDisplay3.FULLSCREEN);
     }
   }, [
     space,
@@ -4241,10 +4310,9 @@ var ShellProvider = ({ space, deviceInvitationCode, spaceInvitationCode, onJoine
     shellRuntime
   ]);
   return /* @__PURE__ */ React48.createElement(React48.Fragment, null, shellRuntime && /* @__PURE__ */ React48.createElement("div", {
-    className: mx25(display === ShellDisplay2.NONE ? "hidden" : "")
+    className: mx25(display === ShellDisplay3.NONE ? "hidden" : "")
   }, /* @__PURE__ */ React48.createElement(Shell, {
-    runtime: shellRuntime,
-    origin: window.location.origin
+    runtime: shellRuntime
   })), /* @__PURE__ */ React48.createElement(ShellContext.Provider, {
     value: {
       runtime: shellRuntime,