@dxos/shell 0.5.1-next.2ad6c47 → 0.5.1-next.5e6b3f6

package/dist/lib/browser/react.mjs

@@ -1178,7 +1178,7 @@ import { CopySimple, Plugs, PlugsConnected } from "@phosphor-icons/react";
 import React29, { useEffect as useEffect3, useMemo as useMemo3, useState as useState8 } from "react";
 import { generateName as generateName3 } from "@dxos/display-name";
 import { log as log6 } from "@dxos/log";
-import { useClient as useClient3 } from "@dxos/react-client";
+import { useClient as useClient4 } from "@dxos/react-client";
 import { useIdentity, useDevices, useHaloInvitations as useHaloInvitations2 } from "@dxos/react-client/halo";
 import { useInvitationStatus as useInvitationStatus2 } from "@dxos/react-client/invitations";
 import { useNetworkStatus, ConnectionState } from "@dxos/react-client/mesh";
@@ -1296,7 +1296,7 @@ var useIdentityMachine = (client, options) => {
 // packages/sdk/shell/src/panels/IdentityPanel/steps/IdentityActionChooser.tsx
 import React25, { useCallback as useCallback4 } from "react";
 import { log as log2 } from "@dxos/log";
-import { useAgentHostingProviderClient, useClient as useClient2 } from "@dxos/react-client";
+import { useAgentHostingClient, useClient as useClient2 } from "@dxos/react-client";
 import { useHaloInvitations } from "@dxos/react-client/halo";
 import { Invitation as Invitation2, InvitationEncoder } from "@dxos/react-client/invitations";
 var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/sdk/shell/src/panels/IdentityPanel/steps/IdentityActionChooser.tsx";
@@ -1304,7 +1304,7 @@ var IdentityActionChooser = (props) => {
   const { send } = props;
   const client = useClient2();
   const invitations = useHaloInvitations();
-  const agentHostingProviderClient = useAgentHostingProviderClient(client.config);
+  const agentHostingProviderClient = useAgentHostingClient();
   const onInvitationEvent = useCallback4((invitation) => {
     const invitationCode = InvitationEncoder.encode(invitation);
     if (invitation.state === Invitation2.State.CONNECTING) {
@@ -1364,14 +1364,15 @@ import { hexToEmoji as hexToEmoji2, hexToHue } from "@dxos/util";
 import { useCallback as useCallback5, useEffect as useEffect2, useState as useState6 } from "react";
 import { invariant } from "@dxos/invariant";
 import { log as log4 } from "@dxos/log";
-import { useAgentHostingProviderClient as useAgentHostingProviderClient2 } from "@dxos/react-client";
+import { useAgentHostingClient as useAgentHostingClient2, useClient as useClient3 } from "@dxos/react-client";
 import { Invitation as Invitation3, InvitationEncoder as InvitationEncoder2 } from "@dxos/react-client/invitations";
 var __dxlog_file3 = "/home/runner/work/dxos/dxos/packages/sdk/shell/src/panels/IdentityPanel/useAgentHandlers.ts";
-var useAgentHandlers = ({ client, invitations, identity }) => {
+var useAgentHandlers = ({ invitations, identity }) => {
   const [validationMessage, setValidationMessage] = useState6("");
   const [agentStatus, setAgentStatus] = useState6("");
   const [agentActive, setAgentActive] = useState6(false);
-  const agentHostingProviderClient = useAgentHostingProviderClient2(client.config);
+  const agentHostingProviderClient = useAgentHostingClient2();
+  const client = useClient3();
   useEffect2(() => {
     const fetchAgentStatus = async () => {
       if (agentHostingProviderClient) {
@@ -1397,13 +1398,13 @@ var useAgentHandlers = ({ client, invitations, identity }) => {
         authCode: invitation.authCode
       }), void 0, {
         F: __dxlog_file3,
-        L: 50,
+        L: 49,
         S: void 0,
         C: (f, a) => f(...a)
       });
       invariant(identity, "Identity not found", {
         F: __dxlog_file3,
-        L: 51,
+        L: 50,
         S: void 0,
         A: [
           "identity",
@@ -1435,7 +1436,7 @@ var useAgentHandlers = ({ client, invitations, identity }) => {
     const identity2 = client.halo.identity.get();
     invariant(identity2, "Identity not found", {
       F: __dxlog_file3,
-      L: 81,
+      L: 80,
       S: void 0,
       A: [
         "identity",
@@ -1833,12 +1834,11 @@ var IdentityPanelWithInvitationImpl = ({ invitation, ...props }) => {
 };
 var IdentityPanel = ({ titleId: propsTitleId, createInvitationUrl = (code) => code, initialDisposition = "default", ...props }) => {
   const titleId = useId6("identityPanel__heading", propsTitleId);
-  const client = useClient3();
+  const client = useClient4();
   const devices = useDevices();
   const identity = useIdentity();
   const invitations = useHaloInvitations2();
   const agentProps = useAgentHandlers({
-    client,
     identity,
     invitations
   });
@@ -1915,7 +1915,7 @@ var IdentityPanel = ({ titleId: propsTitleId, createInvitationUrl = (code) => co
 // packages/sdk/shell/src/panels/JoinPanel/JoinPanel.tsx
 import React38, { useCallback as useCallback7, useEffect as useEffect5, useMemo as useMemo4 } from "react";
 import { log as log10 } from "@dxos/log";
-import { useClient as useClient5, useMulticastObservable } from "@dxos/react-client";
+import { useClient as useClient6, useMulticastObservable } from "@dxos/react-client";
 import { useIdentity as useIdentity2 } from "@dxos/react-client/halo";
 import { DensityProvider as DensityProvider2, useId as useId8, useThemeContext as useThemeContext4 } from "@dxos/react-ui";
 
@@ -2654,13 +2654,13 @@ var IdentityAdded = (props) => {
 // packages/sdk/shell/src/panels/JoinPanel/steps/IdentityInput.tsx
 import React33, { useState as useState9 } from "react";
 import { log as log8 } from "@dxos/log";
-import { useClient as useClient4 } from "@dxos/react-client";
+import { useClient as useClient5 } from "@dxos/react-client";
 import { useTranslation as useTranslation18 } from "@dxos/react-ui";
 var __dxlog_file7 = "/home/runner/work/dxos/dxos/packages/sdk/shell/src/panels/JoinPanel/steps/IdentityInput.tsx";
 var IdentityInput = (props) => {
   const { send, method } = props;
   const isRecover = method === "recover identity";
-  const client = useClient4();
+  const client = useClient5();
   const { t } = useTranslation18("os");
   const [validationMessage, setValidationMessage] = useState9("");
   const createIdentity = (displayName) => {
@@ -3102,7 +3102,7 @@ var JoinPanelImpl = (props) => {
   })))));
 };
 var JoinPanel = ({ titleId: propsTitleId, mode = "default", initialDisposition = "default", initialInvitationCode, exitActionParent, onExit, doneActionParent, onDone: propsOnDone, onCancelResetStorage }) => {
-  const client = useClient5();
+  const client = useClient6();
   const identity = useIdentity2();
   const { hasIosKeyboard } = useThemeContext4();
   const titleId = useId8("joinPanel__heading", propsTitleId);
@@ -3746,15 +3746,15 @@ 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 { 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";
 
 // packages/sdk/shell/src/composites/Shell/Shell.tsx
 import React46, { useEffect as useEffect7, useState as useState13 } from "react";
 import { log as log14 } from "@dxos/log";
-import { ShellDisplay, ShellLayout, useClient as useClient6 } from "@dxos/react-client";
+import { ShellDisplay, ShellLayout, useClient as useClient7 } from "@dxos/react-client";
 import { useSpace as useSpace2 } from "@dxos/react-client/echo";
 
 // packages/sdk/shell/src/composites/SpaceDialog/SpaceDialog.tsx
@@ -3799,7 +3799,7 @@ var Shell = ({ runtime, origin }) => {
     spaceKey: runtime.spaceKey,
     target: runtime.target
   });
-  const client = useClient6();
+  const client = useClient7();
   const space = useSpace2(spaceKey);
   useEffect7(() => {
     return runtime.layoutUpdate.on((request) => setLayout(request));
@@ -4067,7 +4067,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 +4078,63 @@ 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(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,
+      origin: location.origin
+    }))))))));
+  } 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 useClient7 } 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";
 
@@ -4147,14 +4172,14 @@ var MemoryShellRuntime = class {
 // packages/sdk/shell/src/composites/Shell/ShellContext.tsx
 var ShellContext = /* @__PURE__ */ createContext2({});
 var useShell = () => {
-  const client = useClient7();
+  const client = useClient8();
   const { runtime, setDisplay } = useContext2(ShellContext);
   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,
@@ -4168,9 +4193,9 @@ var useShell = () => {
   };
 };
 var ShellProvider = ({ space, deviceInvitationCode, spaceInvitationCode, onJoinedSpace, children }) => {
-  const client = useClient7();
+  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 +4230,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,7 +4266,7 @@ 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