@dxos/plugin-space 0.8.4-main.e8ec1fe → 0.8.4-main.effb148878

package/dist/lib/neutral/ImportSpaceDialog-7GKV4OTF.mjs

@@ -0,0 +1,64 @@
+import "./chunk-J5LGTIGS.mjs";
+
+// src/containers/ImportSpaceDialog/ImportSpaceDialog.tsx
+import React, { useCallback } from "react";
+import { FileUploader } from "react-drag-drop-files";
+import { useOperationInvoker } from "@dxos/app-framework/ui";
+import { LayoutOperation, getSpacePath } from "@dxos/app-toolkit";
+import { Button, Dialog, Icon, useTranslation } from "@dxos/react-ui";
+import { meta } from "#meta";
+import { SpaceOperation } from "#operations";
+var ImportSpaceDialog = () => {
+  const { t } = useTranslation(meta.id);
+  const { invokePromise } = useOperationInvoker();
+  const handleFile = useCallback(async (file) => {
+    const contents = new Uint8Array(await file.arrayBuffer());
+    const { data: result } = await invokePromise(SpaceOperation.ImportSpace, {
+      archive: {
+        filename: file.name,
+        contents
+      }
+    });
+    await invokePromise(LayoutOperation.UpdateDialog, {
+      state: false
+    });
+    if (result?.space) {
+      await invokePromise(LayoutOperation.SwitchWorkspace, {
+        subject: getSpacePath(result.space.id)
+      });
+    }
+  }, [
+    invokePromise
+  ]);
+  return /* @__PURE__ */ React.createElement(Dialog.Content, null, /* @__PURE__ */ React.createElement(Dialog.Header, null, /* @__PURE__ */ React.createElement(Dialog.Title, null, t("import-space-dialog.title")), /* @__PURE__ */ React.createElement(Dialog.Close, {
+    asChild: true
+  }, /* @__PURE__ */ React.createElement(Dialog.ActionIconButton, {
+    action: "close"
+  }))), /* @__PURE__ */ React.createElement(Dialog.Body, null, /* @__PURE__ */ React.createElement("p", {
+    className: "my-4"
+  }, t("import-space-dialog.description")), /* @__PURE__ */ React.createElement(FileUploader, {
+    types: [
+      "json",
+      "tar"
+    ],
+    classes: "block my-4 p-8 border-2 border-dashed border-neutral-500/50 rounded-sm flex items-center justify-center gap-2 cursor-pointer",
+    dropMessageStyle: {
+      border: "none",
+      backgroundColor: "#EEE"
+    },
+    handleChange: (file) => {
+      void handleFile(file);
+    }
+  }, /* @__PURE__ */ React.createElement(Icon, {
+    icon: "ph--file-plus--duotone",
+    size: 8
+  }), /* @__PURE__ */ React.createElement("span", null, t("import-space-dialog.upload.label")))), /* @__PURE__ */ React.createElement(Dialog.ActionBar, null, /* @__PURE__ */ React.createElement(Dialog.Close, {
+    asChild: true
+  }, /* @__PURE__ */ React.createElement(Button, {
+    variant: "primary"
+  }, t("cancel.label")))));
+};
+export {
+  ImportSpaceDialog as default
+};
+//# sourceMappingURL=ImportSpaceDialog-7GKV4OTF.mjs.map

package/dist/lib/neutral/ImportSpaceDialog-7GKV4OTF.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/containers/ImportSpaceDialog/ImportSpaceDialog.tsx"],
+  "sourcesContent": ["//\n// Copyright 2026 DXOS.org\n//\n\nimport React, { useCallback } from 'react';\nimport { FileUploader } from 'react-drag-drop-files';\n\nimport { useOperationInvoker } from '@dxos/app-framework/ui';\nimport { LayoutOperation, getSpacePath } from '@dxos/app-toolkit';\nimport { Button, Dialog, Icon, useTranslation } from '@dxos/react-ui';\n\nimport { meta } from '#meta';\nimport { SpaceOperation } from '#operations';\n\nexport const ImportSpaceDialog = () => {\n  const { t } = useTranslation(meta.id);\n  const { invokePromise } = useOperationInvoker();\n\n  const handleFile = useCallback(\n    async (file: File) => {\n      const contents = new Uint8Array(await file.arrayBuffer());\n      const { data: result } = await invokePromise(SpaceOperation.ImportSpace, {\n        archive: { filename: file.name, contents },\n      });\n      await invokePromise(LayoutOperation.UpdateDialog, { state: false });\n      if (result?.space) {\n        await invokePromise(LayoutOperation.SwitchWorkspace, { subject: getSpacePath(result.space.id) });\n      }\n    },\n    [invokePromise],\n  );\n\n  return (\n    <Dialog.Content>\n      <Dialog.Header>\n        <Dialog.Title>{t('import-space-dialog.title')}</Dialog.Title>\n        <Dialog.Close asChild>\n          <Dialog.ActionIconButton action='close' />\n        </Dialog.Close>\n      </Dialog.Header>\n      <Dialog.Body>\n        <p className='my-4'>{t('import-space-dialog.description')}</p>\n        <FileUploader\n          types={['json', 'tar']}\n          classes='block my-4 p-8 border-2 border-dashed border-neutral-500/50 rounded-sm flex items-center justify-center gap-2 cursor-pointer'\n          dropMessageStyle={{ border: 'none', backgroundColor: '#EEE' }}\n          handleChange={(file: File) => {\n            void handleFile(file);\n          }}\n        >\n          <Icon icon='ph--file-plus--duotone' size={8} />\n          <span>{t('import-space-dialog.upload.label')}</span>\n        </FileUploader>\n      </Dialog.Body>\n      <Dialog.ActionBar>\n        <Dialog.Close asChild>\n          <Button variant='primary'>{t('cancel.label')}</Button>\n        </Dialog.Close>\n      </Dialog.ActionBar>\n    </Dialog.Content>\n  );\n};\n"],
+  "mappings": ";;;AAIA,OAAOA,SAASC,mBAAmB;AACnC,SAASC,oBAAoB;AAE7B,SAASC,2BAA2B;AACpC,SAASC,iBAAiBC,oBAAoB;AAC9C,SAASC,QAAQC,QAAQC,MAAMC,sBAAsB;AAErD,SAASC,YAAY;AACrB,SAASC,sBAAsB;AAExB,IAAMC,oBAAoB,MAAA;AAC/B,QAAM,EAAEC,EAAC,IAAKJ,eAAeC,KAAKI,EAAE;AACpC,QAAM,EAAEC,cAAa,IAAKZ,oBAAAA;AAE1B,QAAMa,aAAaf,YACjB,OAAOgB,SAAAA;AACL,UAAMC,WAAW,IAAIC,WAAW,MAAMF,KAAKG,YAAW,CAAA;AACtD,UAAM,EAAEC,MAAMC,OAAM,IAAK,MAAMP,cAAcJ,eAAeY,aAAa;MACvEC,SAAS;QAAEC,UAAUR,KAAKS;QAAMR;MAAS;IAC3C,CAAA;AACA,UAAMH,cAAcX,gBAAgBuB,cAAc;MAAEC,OAAO;IAAM,CAAA;AACjE,QAAIN,QAAQO,OAAO;AACjB,YAAMd,cAAcX,gBAAgB0B,iBAAiB;QAAEC,SAAS1B,aAAaiB,OAAOO,MAAMf,EAAE;MAAE,CAAA;IAChG;EACF,GACA;IAACC;GAAc;AAGjB,SACE,sBAAA,cAACR,OAAOyB,SAAO,MACb,sBAAA,cAACzB,OAAO0B,QAAM,MACZ,sBAAA,cAAC1B,OAAO2B,OAAK,MAAErB,EAAE,2BAAA,CAAA,GACjB,sBAAA,cAACN,OAAO4B,OAAK;IAACC,SAAAA;KACZ,sBAAA,cAAC7B,OAAO8B,kBAAgB;IAACC,QAAO;QAGpC,sBAAA,cAAC/B,OAAOgC,MAAI,MACV,sBAAA,cAACC,KAAAA;IAAEC,WAAU;KAAQ5B,EAAE,iCAAA,CAAA,GACvB,sBAAA,cAACX,cAAAA;IACCwC,OAAO;MAAC;MAAQ;;IAChBC,SAAQ;IACRC,kBAAkB;MAAEC,QAAQ;MAAQC,iBAAiB;IAAO;IAC5DC,cAAc,CAAC9B,SAAAA;AACb,WAAKD,WAAWC,IAAAA;IAClB;KAEA,sBAAA,cAACT,MAAAA;IAAKwC,MAAK;IAAyBC,MAAM;MAC1C,sBAAA,cAACC,QAAAA,MAAMrC,EAAE,kCAAA,CAAA,CAAA,CAAA,GAGb,sBAAA,cAACN,OAAO4C,WAAS,MACf,sBAAA,cAAC5C,OAAO4B,OAAK;IAACC,SAAAA;KACZ,sBAAA,cAAC9B,QAAAA;IAAO8C,SAAQ;KAAWvC,EAAE,cAAA,CAAA,CAAA,CAAA,CAAA;AAKvC;",
+  "names": ["React", "useCallback", "FileUploader", "useOperationInvoker", "LayoutOperation", "getSpacePath", "Button", "Dialog", "Icon", "useTranslation", "meta", "SpaceOperation", "ImportSpaceDialog", "t", "id", "invokePromise", "handleFile", "file", "contents", "Uint8Array", "arrayBuffer", "data", "result", "ImportSpace", "archive", "filename", "name", "UpdateDialog", "state", "space", "SwitchWorkspace", "subject", "Content", "Header", "Title", "Close", "asChild", "ActionIconButton", "action", "Body", "p", "className", "types", "classes", "dropMessageStyle", "border", "backgroundColor", "handleChange", "icon", "size", "span", "ActionBar", "variant"]
+}

package/dist/lib/neutral/InlineSyncStatus-TBJKZCH7.mjs

@@ -0,0 +1,49 @@
+import "./chunk-J5LGTIGS.mjs";
+
+// src/containers/InlineSyncStatus/InlineSyncStatus.tsx
+import React, { useEffect, useState } from "react";
+import { getSpacePath } from "@dxos/app-toolkit";
+import { EdgeStatus } from "@dxos/protocols/proto/dxos/client/services";
+import { EdgeReplicationSetting } from "@dxos/protocols/proto/dxos/echo/metadata";
+import { useClient } from "@dxos/react-client";
+import { useSpaceSyncState } from "@dxos/react-client/echo";
+import { Tooltip, useTranslation } from "@dxos/react-ui";
+import { AttentionGlyph, useAttention } from "@dxos/react-ui-attention";
+import { meta } from "#meta";
+var useEdgeStatus = () => {
+  const [status, setStatus] = useState(EdgeStatus.ConnectionState.NOT_CONNECTED);
+  const client = useClient();
+  useEffect(() => {
+    client.services.services.EdgeAgentService?.queryEdgeStatus().subscribe(({ status: status2 }) => {
+      setStatus(status2.state);
+    });
+  }, [
+    client
+  ]);
+  return status;
+};
+var InlineSyncStatus = ({ space, open }) => {
+  const { t } = useTranslation(meta.id);
+  const qualifiedId = getSpacePath(space.id);
+  const { hasAttention, isAncestor, isRelated } = useAttention(qualifiedId);
+  const attended = hasAttention || isRelated;
+  const containsAttended = isAncestor && !open;
+  const connectedToEdge = useEdgeStatus() === EdgeStatus.ConnectionState.CONNECTED;
+  const edgeSyncEnabled = space.internal.data.edgeReplication === EdgeReplicationSetting.ENABLED;
+  const syncState = useSpaceSyncState(space);
+  const syncing = connectedToEdge && edgeSyncEnabled && syncState && syncState.missingOnLocal > 0;
+  return /* @__PURE__ */ React.createElement(Tooltip.Trigger, {
+    asChild: true,
+    content: t("syncing.label"),
+    side: "bottom"
+  }, /* @__PURE__ */ React.createElement(AttentionGlyph, {
+    syncing,
+    attended,
+    containsAttended,
+    classNames: "self-center mx-1"
+  }));
+};
+export {
+  InlineSyncStatus as default
+};
+//# sourceMappingURL=InlineSyncStatus-TBJKZCH7.mjs.map

package/dist/lib/neutral/InlineSyncStatus-TBJKZCH7.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/containers/InlineSyncStatus/InlineSyncStatus.tsx"],
+  "sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport React, { useEffect, useState } from 'react';\n\nimport { getSpacePath } from '@dxos/app-toolkit';\nimport { EdgeStatus } from '@dxos/protocols/proto/dxos/client/services';\nimport { EdgeReplicationSetting } from '@dxos/protocols/proto/dxos/echo/metadata';\nimport { useClient } from '@dxos/react-client';\nimport { type Space, useSpaceSyncState } from '@dxos/react-client/echo';\nimport { Tooltip, useTranslation } from '@dxos/react-ui';\nimport { AttentionGlyph, useAttention } from '@dxos/react-ui-attention';\n\nimport { meta } from '#meta';\n\nconst useEdgeStatus = (): EdgeStatus.ConnectionState => {\n  const [status, setStatus] = useState(EdgeStatus.ConnectionState.NOT_CONNECTED);\n  const client = useClient();\n  useEffect(() => {\n    client.services.services.EdgeAgentService?.queryEdgeStatus().subscribe(({ status }) => {\n      setStatus(status.state);\n    });\n  }, [client]);\n\n  return status;\n};\n\nexport const InlineSyncStatus = ({ space, open }: { space: Space; open?: boolean }) => {\n  const { t } = useTranslation(meta.id);\n  const qualifiedId = getSpacePath(space.id);\n  const { hasAttention, isAncestor, isRelated } = useAttention(qualifiedId);\n  const attended = hasAttention || isRelated;\n  const containsAttended = isAncestor && !open;\n  const connectedToEdge = useEdgeStatus() === EdgeStatus.ConnectionState.CONNECTED;\n  // TODO(wittjosiah): This is not reactive.\n  const edgeSyncEnabled = space.internal.data.edgeReplication === EdgeReplicationSetting.ENABLED;\n  const syncState = useSpaceSyncState(space);\n  const syncing = connectedToEdge && edgeSyncEnabled && syncState && syncState.missingOnLocal > 0;\n\n  return (\n    <Tooltip.Trigger asChild content={t('syncing.label')} side='bottom'>\n      <AttentionGlyph\n        syncing={syncing}\n        attended={attended}\n        containsAttended={containsAttended}\n        classNames='self-center mx-1'\n      />\n    </Tooltip.Trigger>\n  );\n};\n"],
+  "mappings": ";;;AAIA,OAAOA,SAASC,WAAWC,gBAAgB;AAE3C,SAASC,oBAAoB;AAC7B,SAASC,kBAAkB;AAC3B,SAASC,8BAA8B;AACvC,SAASC,iBAAiB;AAC1B,SAAqBC,yBAAyB;AAC9C,SAASC,SAASC,sBAAsB;AACxC,SAASC,gBAAgBC,oBAAoB;AAE7C,SAASC,YAAY;AAErB,IAAMC,gBAAgB,MAAA;AACpB,QAAM,CAACC,QAAQC,SAAAA,IAAab,SAASE,WAAWY,gBAAgBC,aAAa;AAC7E,QAAMC,SAASZ,UAAAA;AACfL,YAAU,MAAA;AACRiB,WAAOC,SAASA,SAASC,kBAAkBC,gBAAAA,EAAkBC,UAAU,CAAC,EAAER,QAAAA,QAAM,MAAE;AAChFC,gBAAUD,QAAOS,KAAK;IACxB,CAAA;EACF,GAAG;IAACL;GAAO;AAEX,SAAOJ;AACT;AAEO,IAAMU,mBAAmB,CAAC,EAAEC,OAAOC,KAAI,MAAoC;AAChF,QAAM,EAAEC,EAAC,IAAKlB,eAAeG,KAAKgB,EAAE;AACpC,QAAMC,cAAc1B,aAAasB,MAAMG,EAAE;AACzC,QAAM,EAAEE,cAAcC,YAAYC,UAAS,IAAKrB,aAAakB,WAAAA;AAC7D,QAAMI,WAAWH,gBAAgBE;AACjC,QAAME,mBAAmBH,cAAc,CAACL;AACxC,QAAMS,kBAAkBtB,cAAAA,MAAoBT,WAAWY,gBAAgBoB;AAEvE,QAAMC,kBAAkBZ,MAAMa,SAASC,KAAKC,oBAAoBnC,uBAAuBoC;AACvF,QAAMC,YAAYnC,kBAAkBkB,KAAAA;AACpC,QAAMkB,UAAUR,mBAAmBE,mBAAmBK,aAAaA,UAAUE,iBAAiB;AAE9F,SACE,sBAAA,cAACpC,QAAQqC,SAAO;IAACC,SAAAA;IAAQC,SAASpB,EAAE,eAAA;IAAkBqB,MAAK;KACzD,sBAAA,cAACtC,gBAAAA;IACCiC;IACAV;IACAC;IACAe,YAAW;;AAInB;",
+  "names": ["React", "useEffect", "useState", "getSpacePath", "EdgeStatus", "EdgeReplicationSetting", "useClient", "useSpaceSyncState", "Tooltip", "useTranslation", "AttentionGlyph", "useAttention", "meta", "useEdgeStatus", "status", "setStatus", "ConnectionState", "NOT_CONNECTED", "client", "services", "EdgeAgentService", "queryEdgeStatus", "subscribe", "state", "InlineSyncStatus", "space", "open", "t", "id", "qualifiedId", "hasAttention", "isAncestor", "isRelated", "attended", "containsAttended", "connectedToEdge", "CONNECTED", "edgeSyncEnabled", "internal", "data", "edgeReplication", "ENABLED", "syncState", "syncing", "missingOnLocal", "Trigger", "asChild", "content", "side", "classNames"]
+}

package/dist/lib/neutral/JoinDialog-SSFKRFTJ.mjs

@@ -0,0 +1,114 @@
+import "./chunk-J5LGTIGS.mjs";
+
+// src/containers/JoinDialog/JoinDialog.tsx
+import React, { useCallback } from "react";
+import { useOperationInvoker } from "@dxos/app-framework/ui";
+import { LayoutOperation, getSpacePath } from "@dxos/app-toolkit";
+import { useAppGraph } from "@dxos/app-toolkit/ui";
+import { Trigger } from "@dxos/async";
+import { Graph } from "@dxos/plugin-graph";
+import { ObservabilityOperation } from "@dxos/plugin-observability";
+import { useClient } from "@dxos/react-client";
+import { Dialog, useTranslation } from "@dxos/react-ui";
+import { JoinPanel } from "@dxos/shell/react";
+import { osTranslations } from "@dxos/ui-theme";
+import { meta } from "#meta";
+var JOIN_DIALOG = `${meta.id}.JoinDialog`;
+var JoinDialog = ({ navigableCollections, onDone, ...props }) => {
+  const { invokePromise } = useOperationInvoker();
+  const client = useClient();
+  const { graph } = useAppGraph();
+  const { t } = useTranslation(meta.id);
+  const handleDone = useCallback(async (result) => {
+    const spaceKey = result?.spaceKey;
+    if (!spaceKey) {
+      return;
+    }
+    await Promise.all([
+      invokePromise(LayoutOperation.AddToast, {
+        id: `${meta.id}.join-success`,
+        duration: 5e3,
+        title: [
+          "join-success.label",
+          {
+            ns: meta.id
+          }
+        ],
+        closeLabel: [
+          "dismiss.label",
+          {
+            ns: meta.id
+          }
+        ]
+      }),
+      invokePromise(LayoutOperation.UpdateDialog, {
+        state: false
+      })
+    ]);
+    let space = client.spaces.get(spaceKey);
+    if (!space) {
+      const trigger = new Trigger();
+      client.spaces.subscribe(() => {
+        const space2 = client.spaces.get(spaceKey);
+        if (space2) {
+          trigger.wake(space2);
+        }
+      });
+      space = await trigger.wait();
+    }
+    await invokePromise(LayoutOperation.SwitchWorkspace, {
+      subject: getSpacePath(space.id)
+    });
+    const target = result?.target || (navigableCollections ? space?.id : void 0);
+    if (target) {
+      await Graph.waitForPath(graph, {
+        target
+      }).catch(() => {
+      });
+      await Promise.all([
+        invokePromise(LayoutOperation.Open, {
+          subject: [
+            target
+          ]
+        }),
+        invokePromise(LayoutOperation.Expose, {
+          subject: target
+        })
+      ]);
+    }
+    onDone?.(result);
+    if (space) {
+      await invokePromise(ObservabilityOperation.SendEvent, {
+        name: "space.join",
+        properties: {
+          spaceId: space.id
+        }
+      });
+    }
+  }, [
+    invokePromise,
+    client,
+    graph,
+    navigableCollections,
+    onDone
+  ]);
+  return /* @__PURE__ */ React.createElement(Dialog.Content, null, /* @__PURE__ */ React.createElement(Dialog.Title, {
+    classNames: "sr-only"
+  }, t("join-space.label", {
+    ns: osTranslations
+  })), /* @__PURE__ */ React.createElement(Dialog.Body, null, /* @__PURE__ */ React.createElement(JoinPanel, {
+    ...props,
+    exitActionParent: /* @__PURE__ */ React.createElement(Dialog.Close, {
+      asChild: true
+    }),
+    doneActionParent: /* @__PURE__ */ React.createElement(Dialog.Close, {
+      asChild: true
+    }),
+    onDone: handleDone
+  })));
+};
+export {
+  JoinDialog,
+  JoinDialog as default
+};
+//# sourceMappingURL=JoinDialog-SSFKRFTJ.mjs.map

package/dist/lib/neutral/JoinDialog-SSFKRFTJ.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/containers/JoinDialog/JoinDialog.tsx"],
+  "sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport React, { useCallback } from 'react';\n\nimport { useOperationInvoker } from '@dxos/app-framework/ui';\nimport { LayoutOperation, getSpacePath } from '@dxos/app-toolkit';\nimport { useAppGraph } from '@dxos/app-toolkit/ui';\nimport { Trigger } from '@dxos/async';\nimport { Graph } from '@dxos/plugin-graph';\nimport { ObservabilityOperation } from '@dxos/plugin-observability';\nimport { useClient } from '@dxos/react-client';\nimport { type Space } from '@dxos/react-client/echo';\nimport { type InvitationResult } from '@dxos/react-client/invitations';\nimport { Dialog, useTranslation } from '@dxos/react-ui';\nimport { JoinPanel, type JoinPanelProps } from '@dxos/shell/react';\nimport { osTranslations } from '@dxos/ui-theme';\n\nimport { meta } from '#meta';\n\nexport const JOIN_DIALOG = `${meta.id}.JoinDialog`;\n\nexport type JoinDialogProps = JoinPanelProps & {\n  navigableCollections?: boolean;\n};\n\nexport const JoinDialog = ({ navigableCollections, onDone, ...props }: JoinDialogProps) => {\n  const { invokePromise } = useOperationInvoker();\n  const client = useClient();\n  const { graph } = useAppGraph();\n  const { t } = useTranslation(meta.id);\n\n  const handleDone = useCallback(\n    async (result: InvitationResult | null) => {\n      const spaceKey = result?.spaceKey;\n      if (!spaceKey) {\n        return;\n      }\n\n      await Promise.all([\n        invokePromise(LayoutOperation.AddToast, {\n          id: `${meta.id}.join-success`,\n          duration: 5_000,\n          title: ['join-success.label', { ns: meta.id }],\n          closeLabel: ['dismiss.label', { ns: meta.id }],\n        }),\n        invokePromise(LayoutOperation.UpdateDialog, { state: false }),\n      ]);\n\n      let space = client.spaces.get(spaceKey);\n      if (!space) {\n        // TODO(wittjosiah): Add api to wait for a space.\n        const trigger = new Trigger<Space>();\n        client.spaces.subscribe(() => {\n          const space = client.spaces.get(spaceKey);\n          if (space) {\n            trigger.wake(space);\n          }\n        });\n        space = await trigger.wait();\n      }\n\n      await invokePromise(LayoutOperation.SwitchWorkspace, { subject: getSpacePath(space.id) });\n\n      // TODO(wittjosiah): If navigableCollections is false and there's no target,\n      //   should try to navigate to the first object of the space replicates.\n      //   Potentially this could also be done on the inviters side to ensure there's always a target.\n      const target = result?.target || (navigableCollections ? space?.id : undefined);\n      if (target) {\n        // Wait before navigating to the target node.\n        // If the target has not yet replicated, this will trigger a loading toast.\n        await Graph.waitForPath(graph, { target }).catch(() => {});\n        await Promise.all([\n          invokePromise(LayoutOperation.Open, { subject: [target] }),\n          invokePromise(LayoutOperation.Expose, { subject: target }),\n        ]);\n      }\n\n      onDone?.(result);\n\n      if (space) {\n        await invokePromise(ObservabilityOperation.SendEvent, {\n          name: 'space.join',\n          properties: {\n            spaceId: space.id,\n          },\n        });\n      }\n    },\n    [invokePromise, client, graph, navigableCollections, onDone],\n  );\n\n  // TODO(burdon): Move JoinHeading into Dialog.Heading.\n  return (\n    <Dialog.Content>\n      <Dialog.Title classNames='sr-only'>{t('join-space.label', { ns: osTranslations })}</Dialog.Title>\n      <Dialog.Body>\n        <JoinPanel\n          {...props}\n          exitActionParent={<Dialog.Close asChild />}\n          doneActionParent={<Dialog.Close asChild />}\n          onDone={handleDone}\n        />\n      </Dialog.Body>\n    </Dialog.Content>\n  );\n};\n"],
+  "mappings": ";;;AAIA,OAAOA,SAASC,mBAAmB;AAEnC,SAASC,2BAA2B;AACpC,SAASC,iBAAiBC,oBAAoB;AAC9C,SAASC,mBAAmB;AAC5B,SAASC,eAAe;AACxB,SAASC,aAAa;AACtB,SAASC,8BAA8B;AACvC,SAASC,iBAAiB;AAG1B,SAASC,QAAQC,sBAAsB;AACvC,SAASC,iBAAsC;AAC/C,SAASC,sBAAsB;AAE/B,SAASC,YAAY;AAEd,IAAMC,cAAc,GAAGD,KAAKE,EAAE;AAM9B,IAAMC,aAAa,CAAC,EAAEC,sBAAsBC,QAAQ,GAAGC,MAAAA,MAAwB;AACpF,QAAM,EAAEC,cAAa,IAAKnB,oBAAAA;AAC1B,QAAMoB,SAASb,UAAAA;AACf,QAAM,EAAEc,MAAK,IAAKlB,YAAAA;AAClB,QAAM,EAAEmB,EAAC,IAAKb,eAAeG,KAAKE,EAAE;AAEpC,QAAMS,aAAaxB,YACjB,OAAOyB,WAAAA;AACL,UAAMC,WAAWD,QAAQC;AACzB,QAAI,CAACA,UAAU;AACb;IACF;AAEA,UAAMC,QAAQC,IAAI;MAChBR,cAAclB,gBAAgB2B,UAAU;QACtCd,IAAI,GAAGF,KAAKE,EAAE;QACde,UAAU;QACVC,OAAO;UAAC;UAAsB;YAAEC,IAAInB,KAAKE;UAAG;;QAC5CkB,YAAY;UAAC;UAAiB;YAAED,IAAInB,KAAKE;UAAG;;MAC9C,CAAA;MACAK,cAAclB,gBAAgBgC,cAAc;QAAEC,OAAO;MAAM,CAAA;KAC5D;AAED,QAAIC,QAAQf,OAAOgB,OAAOC,IAAIZ,QAAAA;AAC9B,QAAI,CAACU,OAAO;AAEV,YAAMG,UAAU,IAAIlC,QAAAA;AACpBgB,aAAOgB,OAAOG,UAAU,MAAA;AACtB,cAAMJ,SAAQf,OAAOgB,OAAOC,IAAIZ,QAAAA;AAChC,YAAIU,QAAO;AACTG,kBAAQE,KAAKL,MAAAA;QACf;MACF,CAAA;AACAA,cAAQ,MAAMG,QAAQG,KAAI;IAC5B;AAEA,UAAMtB,cAAclB,gBAAgByC,iBAAiB;MAAEC,SAASzC,aAAaiC,MAAMrB,EAAE;IAAE,CAAA;AAKvF,UAAM8B,SAASpB,QAAQoB,WAAW5B,uBAAuBmB,OAAOrB,KAAK+B;AACrE,QAAID,QAAQ;AAGV,YAAMvC,MAAMyC,YAAYzB,OAAO;QAAEuB;MAAO,CAAA,EAAGG,MAAM,MAAA;MAAO,CAAA;AACxD,YAAMrB,QAAQC,IAAI;QAChBR,cAAclB,gBAAgB+C,MAAM;UAAEL,SAAS;YAACC;;QAAQ,CAAA;QACxDzB,cAAclB,gBAAgBgD,QAAQ;UAAEN,SAASC;QAAO,CAAA;OACzD;IACH;AAEA3B,aAASO,MAAAA;AAET,QAAIW,OAAO;AACT,YAAMhB,cAAcb,uBAAuB4C,WAAW;QACpDC,MAAM;QACNC,YAAY;UACVC,SAASlB,MAAMrB;QACjB;MACF,CAAA;IACF;EACF,GACA;IAACK;IAAeC;IAAQC;IAAOL;IAAsBC;GAAO;AAI9D,SACE,sBAAA,cAACT,OAAO8C,SAAO,MACb,sBAAA,cAAC9C,OAAO+C,OAAK;IAACC,YAAW;KAAWlC,EAAE,oBAAoB;IAAES,IAAIpB;EAAe,CAAA,CAAA,GAC/E,sBAAA,cAACH,OAAOiD,MAAI,MACV,sBAAA,cAAC/C,WAAAA;IACE,GAAGQ;IACJwC,kBAAkB,sBAAA,cAAClD,OAAOmD,OAAK;MAACC,SAAAA;;IAChCC,kBAAkB,sBAAA,cAACrD,OAAOmD,OAAK;MAACC,SAAAA;;IAChC3C,QAAQM;;AAKlB;",
+  "names": ["React", "useCallback", "useOperationInvoker", "LayoutOperation", "getSpacePath", "useAppGraph", "Trigger", "Graph", "ObservabilityOperation", "useClient", "Dialog", "useTranslation", "JoinPanel", "osTranslations", "meta", "JOIN_DIALOG", "id", "JoinDialog", "navigableCollections", "onDone", "props", "invokePromise", "client", "graph", "t", "handleDone", "result", "spaceKey", "Promise", "all", "AddToast", "duration", "title", "ns", "closeLabel", "UpdateDialog", "state", "space", "spaces", "get", "trigger", "subscribe", "wake", "wait", "SwitchWorkspace", "subject", "target", "undefined", "waitForPath", "catch", "Open", "Expose", "SendEvent", "name", "properties", "spaceId", "Content", "Title", "classNames", "Body", "exitActionParent", "Close", "asChild", "doneActionParent"]
+}

package/dist/lib/neutral/MembersContainer-SZLUEJWT.mjs

@@ -0,0 +1,225 @@
+import "./chunk-J5LGTIGS.mjs";
+
+// src/containers/MembersContainer/MembersContainer.tsx
+import React, { useMemo, useState } from "react";
+import { QR } from "react-qr-rounded";
+import { useOperationInvoker } from "@dxos/app-framework/ui";
+import { Collection, Obj, Type } from "@dxos/echo";
+import { log } from "@dxos/log";
+import { useConfig } from "@dxos/react-client";
+import { useSpaceInvitations } from "@dxos/react-client/echo";
+import { Invitation, InvitationEncoder } from "@dxos/react-client/invitations";
+import { Button, Clipboard, Icon, useId, useTranslation } from "@dxos/react-ui";
+import { Settings } from "@dxos/react-ui-form";
+import { AuthCode, BifurcatedAction, Centered, Emoji, InvitationList, SpaceMemberList, Viewport, translationKey as shellTranslationKey } from "@dxos/shell/react";
+import { hexToEmoji } from "@dxos/util";
+import { meta } from "#meta";
+import { SpaceOperation } from "#operations";
+var __dxlog_file = "/__w/dxos/dxos/packages/plugins/plugin-space/src/containers/MembersContainer/MembersContainer.tsx";
+var activeActionKey = "dxos:react-shell/space-manager/active-action";
+var handleInvitationEvent = (invitation, subscription) => {
+  const invitationCode = InvitationEncoder.encode(invitation);
+  if (invitation.state === Invitation.State.CONNECTING) {
+    log.info(JSON.stringify({
+      invitationCode,
+      authCode: invitation.authCode
+    }), void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 23, S: void 0 });
+    subscription.unsubscribe();
+  }
+};
+var MembersContainer = ({ space, createInvitationUrl }) => {
+  const { t } = useTranslation(meta.id);
+  const config = useConfig();
+  const { invokePromise } = useOperationInvoker();
+  const invitations = useSpaceInvitations(space.key);
+  const visibleInvitations = invitations?.filter((invitation) => ![
+    Invitation.State.CANCELLED
+  ].includes(invitation.get().state));
+  const [activeAction, setInternalActiveAction] = useState(localStorage.getItem(activeActionKey) ?? "inviteMany");
+  const setActiveAction = (nextAction) => {
+    setInternalActiveAction(nextAction);
+    localStorage.setItem(activeActionKey, nextAction);
+  };
+  const target = space.properties[Type.getTypename(Collection.Collection)]?.target?.objects[0]?.target;
+  const inviteActions = useMemo(() => ({
+    inviteOne: {
+      label: t("invite-one.label", {
+        ns: shellTranslationKey
+      }),
+      description: t("invite-one.description", {
+        ns: shellTranslationKey
+      }),
+      icon: "ph--user-plus--regular",
+      testId: "membersContainer.inviteOne",
+      onClick: async () => {
+        const { data: invitation } = await invokePromise(SpaceOperation.Share, {
+          space,
+          type: Invitation.Type.INTERACTIVE,
+          authMethod: Invitation.AuthMethod.SHARED_SECRET,
+          multiUse: false,
+          target: target && Obj.getURI(target)
+        });
+        if (invitation && config.values.runtime?.app?.env?.DX_ENVIRONMENT !== "production") {
+          const subscription = invitation.subscribe((invitation2) => handleInvitationEvent(invitation2, subscription));
+        }
+      }
+    },
+    inviteMany: {
+      label: t("invite-many.label", {
+        ns: shellTranslationKey
+      }),
+      description: t("invite-many.description", {
+        ns: shellTranslationKey
+      }),
+      icon: "ph--users-three--regular",
+      testId: "membersContainer.inviteMany",
+      onClick: async () => {
+        const { data: invitation } = await invokePromise(SpaceOperation.Share, {
+          space,
+          type: Invitation.Type.DELEGATED,
+          authMethod: Invitation.AuthMethod.KNOWN_PUBLIC_KEY,
+          multiUse: true,
+          target: target && Obj.getURI(target)
+        });
+        if (invitation && config.values.runtime?.app?.env?.DX_ENVIRONMENT !== "production") {
+          const subscription = invitation.subscribe((invitation2) => handleInvitationEvent(invitation2, subscription));
+        }
+      }
+    }
+  }), [
+    t,
+    space,
+    target,
+    invokePromise
+  ]);
+  const [selectedInvitation, setSelectedInvitation] = useState(null);
+  const handleSend = (event) => {
+    setSelectedInvitation(event.invitation);
+  };
+  const handleBack = () => {
+    setSelectedInvitation(null);
+  };
+  return /* @__PURE__ */ React.createElement(Clipboard.Provider, null, /* @__PURE__ */ React.createElement(Settings.Viewport, null, /* @__PURE__ */ React.createElement(Settings.Section, {
+    title: t("members-verbose.label"),
+    description: t("members.description")
+  }, /* @__PURE__ */ React.createElement(Settings.Panel, null, /* @__PURE__ */ React.createElement("div", {
+    role: "group",
+    className: "min-w-0"
+  }, /* @__PURE__ */ React.createElement("h3", {
+    className: "text-lg mb-2"
+  }, t("members.label")), /* @__PURE__ */ React.createElement(SpaceMemberList, {
+    spaceKey: space.key,
+    includeSelf: true
+  })), /* @__PURE__ */ React.createElement("div", {
+    role: "group",
+    className: "min-w-0"
+  }, /* @__PURE__ */ React.createElement("h3", {
+    className: "text-lg mb-2"
+  }, t("invitations.label")), selectedInvitation && /* @__PURE__ */ React.createElement(InvitationSection, {
+    ...selectedInvitation,
+    onBack: handleBack
+  }), !selectedInvitation && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("p", {
+    className: "text-description mb-2"
+  }, t("space-invitation.description")), /* @__PURE__ */ React.createElement(InvitationList, {
+    className: "mb-2",
+    send: handleSend,
+    invitations: visibleInvitations ?? [],
+    onClickRemove: (invitation) => invitation.cancel(),
+    createInvitationUrl
+  }), /* @__PURE__ */ React.createElement(BifurcatedAction, {
+    actions: inviteActions,
+    activeAction,
+    onChangeActiveAction: setActiveAction,
+    "data-testid": "membersContainer.createInvitation"
+  })))))));
+};
+var InvitationSection = ({ state = Invitation.State.INIT, authCode, invitationId = "never", url = "never", onBack }) => {
+  const activeView = state < 0 ? "init" : state >= Invitation.State.CANCELLED ? "complete" : state >= Invitation.State.READY_FOR_AUTHENTICATION && authCode ? "auth-code" : "qr-code";
+  return /* @__PURE__ */ React.createElement(Viewport.Root, {
+    activeView
+  }, /* @__PURE__ */ React.createElement(Viewport.Views, null, /* @__PURE__ */ React.createElement(Viewport.View, {
+    id: "init"
+  }), /* @__PURE__ */ React.createElement(Viewport.View, {
+    id: "complete"
+  }, /* @__PURE__ */ React.createElement(InvitationComplete, {
+    statusValue: state
+  })), /* @__PURE__ */ React.createElement(Viewport.View, {
+    id: "auth-code"
+  }, /* @__PURE__ */ React.createElement(InvitationAuthCode, {
+    id: invitationId,
+    code: authCode ?? "never",
+    onCancel: onBack
+  })), /* @__PURE__ */ React.createElement(Viewport.View, {
+    id: "qr-code"
+  }, /* @__PURE__ */ React.createElement(InvitationQR, {
+    id: invitationId,
+    url,
+    onCancel: onBack
+  }))));
+};
+var InvitationQR = ({ id, url, onCancel }) => {
+  const { t } = useTranslation(shellTranslationKey);
+  const qrLabel = useId("members-container__qr-code");
+  const emoji = hexToEmoji(id);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("p", {
+    className: "text-description"
+  }, t("qr-code.description", {
+    ns: meta.id
+  })), /* @__PURE__ */ React.createElement("div", {
+    role: "group",
+    className: "grid grid-cols-[1fr_min-content] my-2 gap-2"
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: "w-full aspect-square relative text-description"
+  }, /* @__PURE__ */ React.createElement(QR, {
+    rounding: 100,
+    backgroundColor: "transparent",
+    color: "currentColor",
+    "aria-labelledby": qrLabel,
+    errorCorrectionLevel: "Q",
+    cutout: true
+  }, url ?? "never"), /* @__PURE__ */ React.createElement(Centered, null, /* @__PURE__ */ React.createElement(Emoji, {
+    text: emoji
+  }))), /* @__PURE__ */ React.createElement("span", {
+    id: qrLabel,
+    className: "sr-only"
+  }, t("qr.label")), /* @__PURE__ */ React.createElement(Clipboard.Button, {
+    value: url ?? "never"
+  })), /* @__PURE__ */ React.createElement(Button, {
+    variant: "ghost",
+    onClick: onCancel
+  }, t("cancel.label")));
+};
+var InvitationAuthCode = ({ id, code, onCancel }) => {
+  const { t } = useTranslation(shellTranslationKey);
+  const emoji = hexToEmoji(id);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("p", {
+    className: "text-description"
+  }, t("auth-other-device-emoji.message")), emoji && /* @__PURE__ */ React.createElement(Emoji, {
+    text: emoji,
+    className: "mx-auto my-2 text-center"
+  }), /* @__PURE__ */ React.createElement("p", {
+    className: "text-description"
+  }, t("auth-code.message")), /* @__PURE__ */ React.createElement(AuthCode, {
+    code,
+    large: true,
+    classNames: "mx-auto my-2 text-center grow"
+  }), /* @__PURE__ */ React.createElement(Button, {
+    variant: "ghost",
+    onClick: onCancel
+  }, t("cancel.label")));
+};
+var InvitationComplete = ({ statusValue }) => {
+  return statusValue > 0 ? /* @__PURE__ */ React.createElement(Icon, {
+    icon: "ph--check--regular",
+    size: 6,
+    classNames: "m-1.5"
+  }) : /* @__PURE__ */ React.createElement(Icon, {
+    icon: "ph--x--regular",
+    size: 6,
+    classNames: "m-1.5"
+  });
+};
+export {
+  MembersContainer as default
+};
+//# sourceMappingURL=MembersContainer-SZLUEJWT.mjs.map

package/dist/lib/neutral/MembersContainer-SZLUEJWT.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/containers/MembersContainer/MembersContainer.tsx"],
+  "sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\nimport React, { type Dispatch, type SetStateAction, useMemo, useState } from 'react';\nimport { QR } from 'react-qr-rounded';\n\nimport { useOperationInvoker } from '@dxos/app-framework/ui';\nimport { AppSurface } from '@dxos/app-toolkit/ui';\nimport { Collection, Obj, Type } from '@dxos/echo';\nimport { log } from '@dxos/log';\nimport { useConfig } from '@dxos/react-client';\nimport { useSpaceInvitations } from '@dxos/react-client/echo';\nimport { type CancellableInvitationObservable, Invitation, InvitationEncoder } from '@dxos/react-client/invitations';\nimport { Button, Clipboard, Icon, useId, useTranslation } from '@dxos/react-ui';\nimport { Settings } from '@dxos/react-ui-form';\nimport {\n  type ActionMenuItem,\n  AuthCode,\n  BifurcatedAction,\n  Centered,\n  Emoji,\n  InvitationList,\n  SpaceMemberList,\n  Viewport,\n  translationKey as shellTranslationKey,\n} from '@dxos/shell/react';\nimport { hexToEmoji } from '@dxos/util';\n\nimport { meta } from '#meta';\nimport { SpaceOperation } from '#operations';\n\n// TODO(wittjosiah): Copied from Shell.\nconst activeActionKey = 'dxos:react-shell/space-manager/active-action';\n\nconst handleInvitationEvent = (invitation: Invitation, subscription: ZenObservable.Subscription) => {\n  const invitationCode = InvitationEncoder.encode(invitation);\n  if (invitation.state === Invitation.State.CONNECTING) {\n    log.info(JSON.stringify({ invitationCode, authCode: invitation.authCode }));\n    subscription.unsubscribe();\n  }\n};\n\nexport type MembersContainerProps = AppSurface.SpaceArticleProps<{\n  createInvitationUrl: (invitationCode: string) => string;\n}>;\n\nexport const MembersContainer = ({ space, createInvitationUrl }: MembersContainerProps) => {\n  const { t } = useTranslation(meta.id);\n  const config = useConfig();\n  const { invokePromise } = useOperationInvoker();\n  const invitations = useSpaceInvitations(space.key);\n  const visibleInvitations = invitations?.filter(\n    (invitation) => ![Invitation.State.CANCELLED].includes(invitation.get().state),\n  );\n\n  const [activeAction, setInternalActiveAction] = useState(localStorage.getItem(activeActionKey) ?? 'inviteMany');\n\n  const setActiveAction = (nextAction: string) => {\n    setInternalActiveAction(nextAction);\n    localStorage.setItem(activeActionKey, nextAction);\n  };\n\n  // TODO(wittjosiah): Track which was the most recently viewed object.\n  const target = space.properties[Type.getTypename(Collection.Collection)]?.target?.objects[0]?.target;\n\n  const inviteActions = useMemo(\n    (): Record<string, ActionMenuItem> => ({\n      inviteOne: {\n        label: t('invite-one.label', { ns: shellTranslationKey }),\n        description: t('invite-one.description', { ns: shellTranslationKey }),\n        icon: 'ph--user-plus--regular',\n        testId: 'membersContainer.inviteOne',\n        onClick: async () => {\n          const { data: invitation } = await invokePromise(SpaceOperation.Share, {\n            space,\n            type: Invitation.Type.INTERACTIVE,\n            authMethod: Invitation.AuthMethod.SHARED_SECRET,\n            multiUse: false,\n            target: target && Obj.getURI(target),\n          });\n          if (invitation && config.values.runtime?.app?.env?.DX_ENVIRONMENT !== 'production') {\n            const subscription: ZenObservable.Subscription = (invitation as CancellableInvitationObservable).subscribe(\n              (invitation: Invitation) => handleInvitationEvent(invitation, subscription),\n            );\n          }\n        },\n      },\n      inviteMany: {\n        label: t('invite-many.label', { ns: shellTranslationKey }),\n        description: t('invite-many.description', { ns: shellTranslationKey }),\n        icon: 'ph--users-three--regular',\n        testId: 'membersContainer.inviteMany',\n        onClick: async () => {\n          const { data: invitation } = await invokePromise(SpaceOperation.Share, {\n            space,\n            type: Invitation.Type.DELEGATED,\n            authMethod: Invitation.AuthMethod.KNOWN_PUBLIC_KEY,\n            multiUse: true,\n            target: target && Obj.getURI(target),\n          });\n          if (invitation && config.values.runtime?.app?.env?.DX_ENVIRONMENT !== 'production') {\n            const subscription: ZenObservable.Subscription = (invitation as CancellableInvitationObservable).subscribe(\n              (invitation: Invitation) => handleInvitationEvent(invitation, subscription),\n            );\n          }\n        },\n      },\n    }),\n    [t, space, target, invokePromise],\n  );\n\n  const [selectedInvitation, setSelectedInvitation] = useState<CancellableInvitationObservable | null>(null);\n  const handleSend = (event: { type: 'selectInvitation'; invitation: CancellableInvitationObservable }) => {\n    setSelectedInvitation(event.invitation);\n  };\n  const handleBack = () => {\n    setSelectedInvitation(null);\n  };\n\n  return (\n    <Clipboard.Provider>\n      <Settings.Viewport>\n        <Settings.Section title={t('members-verbose.label')} description={t('members.description')}>\n          <Settings.Panel>\n            <div role='group' className='min-w-0'>\n              <h3 className='text-lg mb-2'>{t('members.label')}</h3>\n              <SpaceMemberList spaceKey={space.key} includeSelf />\n            </div>\n            <div role='group' className='min-w-0'>\n              <h3 className='text-lg mb-2'>{t('invitations.label')}</h3>\n              {selectedInvitation && <InvitationSection {...selectedInvitation} onBack={handleBack} />}\n              {!selectedInvitation && (\n                <>\n                  <p className='text-description mb-2'>{t('space-invitation.description')}</p>\n                  <InvitationList\n                    className='mb-2'\n                    send={handleSend}\n                    invitations={visibleInvitations ?? []}\n                    onClickRemove={(invitation) => invitation.cancel()}\n                    createInvitationUrl={createInvitationUrl}\n                  />\n                  <BifurcatedAction\n                    actions={inviteActions}\n                    activeAction={activeAction}\n                    onChangeActiveAction={setActiveAction as Dispatch<SetStateAction<string>>}\n                    data-testid='membersContainer.createInvitation'\n                  />\n                </>\n              )}\n            </div>\n          </Settings.Panel>\n        </Settings.Section>\n      </Settings.Viewport>\n    </Clipboard.Provider>\n  );\n};\n\n// TODO(wittjosiah): Reconcile the below components with DevicesContainer in @dxos/plugin-client.\n\ntype InvitationComponentProps = Partial<\n  Pick<Invitation, 'authCode' | 'invitationId'> & {\n    state: Invitation.State;\n    url: string;\n    onBack: () => void;\n  }\n>;\n\nconst InvitationSection = ({\n  state = Invitation.State.INIT,\n  authCode,\n  invitationId = 'never',\n  url = 'never',\n  onBack,\n}: InvitationComponentProps) => {\n  const activeView =\n    state < 0\n      ? 'init'\n      : state >= Invitation.State.CANCELLED\n        ? 'complete'\n        : state >= Invitation.State.READY_FOR_AUTHENTICATION && authCode\n          ? 'auth-code'\n          : 'qr-code';\n  return (\n    <Viewport.Root activeView={activeView}>\n      <Viewport.Views>\n        <Viewport.View id='init'>\n          {/* This view intentionally left blank while conditionally rendering the viewport. */}\n        </Viewport.View>\n        <Viewport.View id='complete'>\n          <InvitationComplete statusValue={state} />\n        </Viewport.View>\n        <Viewport.View id='auth-code'>\n          <InvitationAuthCode id={invitationId} code={authCode ?? 'never'} onCancel={onBack} />\n        </Viewport.View>\n        <Viewport.View id='qr-code'>\n          <InvitationQR id={invitationId} url={url} onCancel={onBack} />\n        </Viewport.View>\n      </Viewport.Views>\n    </Viewport.Root>\n  );\n};\n\nconst InvitationQR = ({ id, url, onCancel }: { id: string; url: string; onCancel?: () => void }) => {\n  const { t } = useTranslation(shellTranslationKey);\n  const qrLabel = useId('members-container__qr-code');\n  const emoji = hexToEmoji(id);\n  return (\n    <>\n      <p className='text-description'>{t('qr-code.description', { ns: meta.id })}</p>\n      <div role='group' className='grid grid-cols-[1fr_min-content] my-2 gap-2'>\n        <div className='w-full aspect-square relative text-description'>\n          <QR\n            rounding={100}\n            backgroundColor='transparent'\n            color='currentColor'\n            aria-labelledby={qrLabel}\n            errorCorrectionLevel='Q'\n            cutout={true}\n          >\n            {url ?? 'never'}\n          </QR>\n          <Centered>\n            <Emoji text={emoji} />\n          </Centered>\n        </div>\n        <span id={qrLabel} className='sr-only'>\n          {t('qr.label')}\n        </span>\n        <Clipboard.Button value={url ?? 'never'} />\n      </div>\n      <Button variant='ghost' onClick={onCancel}>\n        {t('cancel.label')}\n      </Button>\n    </>\n  );\n};\n\nconst InvitationAuthCode = ({ id, code, onCancel }: { id: string; code: string; onCancel?: () => void }) => {\n  const { t } = useTranslation(shellTranslationKey);\n  const emoji = hexToEmoji(id);\n\n  return (\n    <>\n      <p className='text-description'>{t('auth-other-device-emoji.message')}</p>\n      {emoji && <Emoji text={emoji} className='mx-auto my-2 text-center' />}\n      <p className='text-description'>{t('auth-code.message')}</p>\n      <AuthCode code={code} large classNames='mx-auto my-2 text-center grow' />\n      <Button variant='ghost' onClick={onCancel}>\n        {t('cancel.label')}\n      </Button>\n    </>\n  );\n};\n\nconst InvitationComplete = ({ statusValue }: { statusValue: number }) => {\n  return statusValue > 0 ? (\n    <Icon icon='ph--check--regular' size={6} classNames='m-1.5' />\n  ) : (\n    <Icon icon='ph--x--regular' size={6} classNames='m-1.5' />\n  );\n};\n"],
+  "mappings": "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",
+  "names": ["React", "useMemo", "useState", "QR", "useOperationInvoker", "Collection", "Obj", "Type", "log", "useConfig", "useSpaceInvitations", "Invitation", "InvitationEncoder", "Button", "Clipboard", "Icon", "useId", "useTranslation", "Settings", "AuthCode", "BifurcatedAction", "Centered", "Emoji", "InvitationList", "SpaceMemberList", "Viewport", "translationKey", "shellTranslationKey", "hexToEmoji", "meta", "SpaceOperation", "invitationCode", "State", "stringify", "authCode", "invitation", "subscription", "unsubscribe", "config", "invokePromise", "invitations", "visibleInvitations", "filter", "includes", "get", "activeAction", "setInternalActiveAction", "setActiveAction", "nextAction", "localStorage", "activeActionKey", "inviteOne", "ns", "description", "icon", "testId", "onClick", "space", "type", "INTERACTIVE", "authMethod", "multiUse", "target", "getURI", "values", "runtime", "inviteMany", "DELEGATED", "t", "setSelectedInvitation", "event", "role", "className", "spaceKey", "includeSelf", "selectedInvitation", "onBack", "handleBack", "send", "handleSend", "onClickRemove", "createInvitationUrl", "actions", "onChangeActiveAction", "data-testid", "InvitationSection", "Root", "activeView", "Views", "id", "InvitationComplete", "statusValue", "InvitationAuthCode", "invitationId", "onCancel", "InvitationQR", "url", "emoji", "rounding", "backgroundColor", "color", "aria-labelledby", "errorCorrectionLevel", "cutout", "text", "span", "qrLabel", "value", "variant", "code", "large", "classNames", "size"]
+}

package/dist/lib/neutral/MenuFooter-CSICF4R5.mjs

@@ -0,0 +1,33 @@
+import {
+  getSpaceDisplayName
+} from "./chunk-2DHCIE27.mjs";
+import "./chunk-7QCZBJ2H.mjs";
+import "./chunk-J5LGTIGS.mjs";
+
+// src/containers/MenuFooter/MenuFooter.tsx
+import React from "react";
+import { isPersonalSpace } from "@dxos/app-toolkit";
+import { getSpace } from "@dxos/client/echo";
+import { DropdownMenu, Icon, toLocalizedString, useTranslation } from "@dxos/react-ui";
+import { meta } from "#meta";
+var MenuFooter = ({ object }) => {
+  const { t } = useTranslation(meta.id);
+  const space = getSpace(object);
+  const spaceName = space ? getSpaceDisplayName(space, {
+    personal: isPersonalSpace(space)
+  }) : "";
+  return space ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(DropdownMenu.Separator, null), /* @__PURE__ */ React.createElement(DropdownMenu.GroupLabel, null, t("menu-footer.label")), /* @__PURE__ */ React.createElement("dl", {
+    className: "ps-2 mb-2 text-xs grid grid-cols-[max-content_1fr] gap-2"
+  }, /* @__PURE__ */ React.createElement("dt", {
+    className: "uppercase text-[.75em] tracking-wide font-medium mt-px self-start"
+  }, t("location.label")), /* @__PURE__ */ React.createElement("dd", {
+    className: "line-clamp-3"
+  }, /* @__PURE__ */ React.createElement(Icon, {
+    icon: "ph--planet--regular",
+    classNames: "inline-block me-1"
+  }), toLocalizedString(spaceName, t)))) : null;
+};
+export {
+  MenuFooter as default
+};
+//# sourceMappingURL=MenuFooter-CSICF4R5.mjs.map

package/dist/lib/neutral/MenuFooter-CSICF4R5.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/containers/MenuFooter/MenuFooter.tsx"],
+  "sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport React from 'react';\n\nimport { isPersonalSpace } from '@dxos/app-toolkit';\nimport { getSpace } from '@dxos/client/echo';\nimport { type Obj } from '@dxos/echo';\nimport { DropdownMenu, Icon, toLocalizedString, useTranslation } from '@dxos/react-ui';\n\nimport { meta } from '#meta';\n\nimport { getSpaceDisplayName } from '../../util';\n\nexport const MenuFooter = ({ object }: { object: Obj.Unknown }) => {\n  const { t } = useTranslation(meta.id);\n  const space = getSpace(object);\n  const spaceName = space ? getSpaceDisplayName(space, { personal: isPersonalSpace(space) }) : '';\n  return space ? (\n    <>\n      <DropdownMenu.Separator />\n      <DropdownMenu.GroupLabel>{t('menu-footer.label')}</DropdownMenu.GroupLabel>\n      <dl className='ps-2 mb-2 text-xs grid grid-cols-[max-content_1fr] gap-2'>\n        <dt className='uppercase text-[.75em] tracking-wide font-medium mt-px self-start'>{t('location.label')}</dt>\n        <dd className='line-clamp-3'>\n          <Icon icon='ph--planet--regular' classNames='inline-block me-1' />\n          {toLocalizedString(spaceName, t)}\n        </dd>\n      </dl>\n    </>\n  ) : null;\n};\n"],
+  "mappings": ";;;;;;;AAIA,OAAOA,WAAW;AAElB,SAASC,uBAAuB;AAChC,SAASC,gBAAgB;AAEzB,SAASC,cAAcC,MAAMC,mBAAmBC,sBAAsB;AAEtE,SAASC,YAAY;AAId,IAAMC,aAAa,CAAC,EAAEC,OAAM,MAA2B;AAC5D,QAAM,EAAEC,EAAC,IAAKC,eAAeC,KAAKC,EAAE;AACpC,QAAMC,QAAQC,SAASN,MAAAA;AACvB,QAAMO,YAAYF,QAAQG,oBAAoBH,OAAO;IAAEI,UAAUC,gBAAgBL,KAAAA;EAAO,CAAA,IAAK;AAC7F,SAAOA,QACL,sBAAA,cAAA,MAAA,UAAA,MACE,sBAAA,cAACM,aAAaC,WAAS,IAAA,GACvB,sBAAA,cAACD,aAAaE,YAAU,MAAEZ,EAAE,mBAAA,CAAA,GAC5B,sBAAA,cAACa,MAAAA;IAAGC,WAAU;KACZ,sBAAA,cAACC,MAAAA;IAAGD,WAAU;KAAqEd,EAAE,gBAAA,CAAA,GACrF,sBAAA,cAACgB,MAAAA;IAAGF,WAAU;KACZ,sBAAA,cAACG,MAAAA;IAAKC,MAAK;IAAsBC,YAAW;MAC3CC,kBAAkBd,WAAWN,CAAAA,CAAAA,CAAAA,CAAAA,IAIlC;AACN;",
+  "names": ["React", "isPersonalSpace", "getSpace", "DropdownMenu", "Icon", "toLocalizedString", "useTranslation", "meta", "MenuFooter", "object", "t", "useTranslation", "meta", "id", "space", "getSpace", "spaceName", "getSpaceDisplayName", "personal", "isPersonalSpace", "DropdownMenu", "Separator", "GroupLabel", "dl", "className", "dt", "dd", "Icon", "icon", "classNames", "toLocalizedString"]
+}