@dxos/plugin-client 0.10.0 → 0.11.0

package/dist/lib/chunk-DevicesContainer.mjs

@@ -0,0 +1,275 @@
+import { hexToEmoji } from "@dxos/util";
+import { meta } from "#meta";
+import { ClientOperation } from "#operations";
+import { log } from "@dxos/log";
+import { useCallback, useEffect, useState } from "react";
+import { AuthCode, Centered, DeviceListItem, Emoji, Viewport } from "@dxos/shell/react";
+import { useOperationInvoker } from "@dxos/app-framework/ui";
+import { useClient, useMulticastObservable } from "@dxos/react-client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Button, Clipboard, Icon, IconButton, useId, useTranslation } from "@dxos/react-ui";
+import { Form } from "@dxos/react-ui-form";
+import { useDevices } from "@dxos/react-client/halo";
+import { QR } from "react-qr-rounded";
+import { Invitation, InvitationEncoder } from "@dxos/react-client/invitations";
+import { useNetworkStatus } from "@dxos/react-client/mesh";
+import { Listbox } from "@dxos/react-ui-list";
+import { osTranslations } from "@dxos/ui-theme";
+//#region src/containers/DevicesContainer/DevicesContainer.tsx
+var __dxlog_file = "/__w/dxos/dxos/packages/plugins/plugin-client/src/containers/DevicesContainer/DevicesContainer.tsx";
+var DevicesContainer = ({ createInvitationUrl }) => {
+	const { t } = useTranslation(meta.profile.key);
+	const { invokePromise } = useOperationInvoker();
+	const devices = useDevices();
+	const { swarm: connectionState } = useNetworkStatus();
+	const handleResetStorage = useCallback(() => invokePromise(ClientOperation.ResetStorage, {}), [invokePromise]);
+	const handleRecover = useCallback(() => invokePromise(ClientOperation.ResetStorage, { mode: "recover" }), [invokePromise]);
+	const handleJoinNewIdentity = useCallback(() => invokePromise(ClientOperation.ResetStorage, { mode: "join-new-identity" }), [invokePromise]);
+	return /* @__PURE__ */ jsx(Clipboard.Provider, { children: /* @__PURE__ */ jsx(Form.Root, {
+		variant: "settings",
+		children: /* @__PURE__ */ jsx(Form.Viewport, {
+			scroll: true,
+			children: /* @__PURE__ */ jsxs(Form.Content, { children: [/* @__PURE__ */ jsx(Form.Section, {
+				title: t("devices-verbose.label", { ns: meta.profile.key }),
+				description: t("devices.description", { ns: meta.profile.key }),
+				children: /* @__PURE__ */ jsxs(Form.Group, { children: [/* @__PURE__ */ jsxs("div", {
+					role: "group",
+					className: "min-w-0",
+					children: [/* @__PURE__ */ jsx("h3", {
+						className: "text-lg mb-2",
+						children: t("devices.label", { ns: meta.profile.key })
+					}), /* @__PURE__ */ jsx(Listbox.Root, { children: /* @__PURE__ */ jsx(Listbox.Content, {
+						"aria-label": t("devices.label", { ns: meta.profile.key }),
+						children: devices.map((device) => /* @__PURE__ */ jsx(DeviceListItem, {
+							device,
+							connectionState
+						}, device.deviceKey.toHex()))
+					}) })]
+				}), createInvitationUrl && /* @__PURE__ */ jsxs("div", {
+					role: "group",
+					className: "min-w-0",
+					children: [/* @__PURE__ */ jsx("h3", {
+						className: "text-lg mb-2",
+						children: t("add-device.label")
+					}), /* @__PURE__ */ jsx(DeviceInvitation, { createInvitationUrl })]
+				})] })
+			}), /* @__PURE__ */ jsxs(Form.Section, {
+				title: t("danger-zone.title", { ns: meta.profile.key }),
+				description: t("danger-zone.description", { ns: meta.profile.key }),
+				children: [
+					/* @__PURE__ */ jsx(Form.Row, {
+						label: t("reset-device.label"),
+						description: t("reset-device.description", { ns: meta.profile.key }),
+						children: /* @__PURE__ */ jsx(Button, {
+							variant: "destructive",
+							onClick: handleResetStorage,
+							"data-testid": "devicesContainer.reset",
+							children: t("reset-device.label")
+						})
+					}),
+					/* @__PURE__ */ jsx(Form.Row, {
+						label: t("recover-identity.label"),
+						description: t("recover-identity.description", { ns: meta.profile.key }),
+						children: /* @__PURE__ */ jsx(Button, {
+							variant: "destructive",
+							onClick: handleRecover,
+							"data-testid": "devicesContainer.recover",
+							children: t("recover-identity.label")
+						})
+					}),
+					/* @__PURE__ */ jsx(Form.Row, {
+						label: t("join-new-identity.label"),
+						description: t("join-new-identity.description", { ns: meta.profile.key }),
+						children: /* @__PURE__ */ jsx(Button, {
+							variant: "destructive",
+							onClick: handleJoinNewIdentity,
+							"data-testid": "devicesContainer.joinExisting",
+							children: t("join-new-identity.label")
+						})
+					})
+				]
+			})] })
+		})
+	}) });
+};
+var DeviceInvitation = (props) => {
+	const client = useClient();
+	const [invitation, setInvitation] = useState();
+	const onInvitationCreate = useCallback(() => {
+		const invitation = client.halo.share();
+		if (client.config.values.runtime?.app?.env?.DX_ENVIRONMENT !== "production") {
+			const subscription = invitation.subscribe((invitation) => {
+				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: 135,
+						S: void 0
+					});
+					subscription.unsubscribe();
+				}
+			});
+		}
+		setInvitation(invitation);
+	}, [client]);
+	const onInvitationDone = useCallback(() => {
+		setInvitation(void 0);
+	}, []);
+	if (invitation) return /* @__PURE__ */ jsx(DeviceInvitationImpl, {
+		...props,
+		invitation,
+		onInvitationCreate,
+		onInvitationDone
+	});
+	else return /* @__PURE__ */ jsx(InvitationSection, {
+		...props,
+		onInvitationCreate,
+		onInvitationDone
+	});
+};
+var DeviceInvitationImpl = ({ invitation: invitationObservable, createInvitationUrl, onInvitationDone, onInvitationCreate }) => {
+	const invitation = useMulticastObservable(invitationObservable);
+	const url = createInvitationUrl(InvitationEncoder.encode(invitation));
+	useEffect(() => {
+		if (invitation.state >= Invitation.State.SUCCESS) onInvitationDone();
+	}, [invitation.state]);
+	return /* @__PURE__ */ jsx(InvitationSection, {
+		...invitation,
+		url,
+		onInvitationDone,
+		onInvitationCreate
+	});
+};
+var InvitationSection = ({ state = -1, authCode, invitationId = "never", url = "never", onInvitationDone = () => {}, onInvitationCreate = () => {} }) => {
+	const { t } = useTranslation(meta.profile.key);
+	const activeView = state < 0 ? "init" : state >= Invitation.State.CANCELLED ? "complete" : state >= Invitation.State.READY_FOR_AUTHENTICATION && authCode ? "auth-code" : "qr-code";
+	return activeView === "init" ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("p", {
+		className: "text-description mb-2",
+		children: t("add-device.description")
+	}), /* @__PURE__ */ jsx(IconButton, {
+		icon: "ph--plus--regular",
+		label: t("create-device-invitation.label"),
+		disabled: state >= 0,
+		classNames: "w-full",
+		"data-testid": "devicesContainer.createInvitation",
+		onClick: onInvitationCreate
+	})] }) : /* @__PURE__ */ jsx(Viewport.Root, {
+		activeView,
+		children: /* @__PURE__ */ jsxs(Viewport.Views, { children: [
+			/* @__PURE__ */ jsx(Viewport.View, { id: "init" }),
+			/* @__PURE__ */ jsx(Viewport.View, {
+				id: "complete",
+				children: /* @__PURE__ */ jsx(InvitationComplete, { statusValue: state })
+			}),
+			/* @__PURE__ */ jsx(Viewport.View, {
+				id: "auth-code",
+				children: /* @__PURE__ */ jsx(InvitationAuthCode, {
+					id: invitationId,
+					code: authCode ?? "never",
+					onCancel: onInvitationDone
+				})
+			}),
+			/* @__PURE__ */ jsx(Viewport.View, {
+				id: "qr-code",
+				children: /* @__PURE__ */ jsx(InvitationQR, {
+					id: invitationId,
+					url,
+					onCancel: onInvitationDone
+				})
+			})
+		] })
+	});
+};
+var InvitationQR = ({ id, url, onCancel }) => {
+	const { t } = useTranslation(osTranslations);
+	const qrLabel = useId("devices-container__qr-code");
+	const emoji = hexToEmoji(id);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx("p", {
+			className: "text-description",
+			children: t("qr-code.description", { ns: meta.profile.key })
+		}),
+		/* @__PURE__ */ jsxs("div", {
+			role: "group",
+			className: "grid grid-cols-[1fr_min-content]",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "flex justify-center py-4",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "w-full md:max-w-80 aspect-square relative text-description",
+					children: [/* @__PURE__ */ jsx(QR, {
+						rounding: 100,
+						backgroundColor: "transparent",
+						color: "currentColor",
+						"aria-labelledby": qrLabel,
+						errorCorrectionLevel: "Q",
+						cutout: true,
+						children: url ?? "never"
+					}), /* @__PURE__ */ jsx(Centered, { children: /* @__PURE__ */ jsx(Emoji, { text: emoji }) })]
+				})
+			}), /* @__PURE__ */ jsx("span", {
+				id: qrLabel,
+				className: "sr-only",
+				children: t("qr.label")
+			})]
+		}),
+		/* @__PURE__ */ jsx("div", {
+			className: "flex justify-center",
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "flex gap-2",
+				children: [/* @__PURE__ */ jsx(Clipboard.Button, { value: url ?? "never" }), /* @__PURE__ */ jsx(Button, {
+					variant: "ghost",
+					onClick: onCancel,
+					children: t("cancel.label")
+				})]
+			})
+		})
+	] });
+};
+var InvitationAuthCode = ({ id, code, onCancel }) => {
+	const { t } = useTranslation(osTranslations);
+	const emoji = hexToEmoji(id);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx("p", {
+			className: "text-description",
+			children: t("auth-other-device-emoji.message")
+		}),
+		emoji && /* @__PURE__ */ jsx(Emoji, {
+			text: emoji,
+			className: "mx-auto my-2 text-center"
+		}),
+		/* @__PURE__ */ jsx("p", {
+			className: "text-description",
+			children: t("auth-code.message")
+		}),
+		/* @__PURE__ */ jsx(AuthCode, {
+			code,
+			large: true,
+			classNames: "mx-auto my-2 text-center grow"
+		}),
+		/* @__PURE__ */ jsx(Button, {
+			variant: "ghost",
+			onClick: onCancel,
+			children: t("cancel.label")
+		})
+	] });
+};
+var InvitationComplete = ({ statusValue }) => {
+	return statusValue > 0 ? /* @__PURE__ */ jsx(Icon, {
+		icon: "ph--check--regular",
+		size: 6,
+		classNames: "m-1.5"
+	}) : /* @__PURE__ */ jsx(Icon, {
+		icon: "ph--x--regular",
+		size: 6,
+		classNames: "m-1.5"
+	});
+};
+DevicesContainer.displayName = "DevicesContainer";
+//#endregion
+export { DevicesContainer as default };
+
+//# sourceMappingURL=chunk-DevicesContainer.mjs.map

package/dist/lib/chunk-DevicesContainer.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"chunk-DevicesContainer.mjs","names":[],"sources":["../../src/containers/DevicesContainer/DevicesContainer.tsx"],"sourcesContent":["//\n// Copyright 2025 DXOS.org\n//\n\nimport React, { useCallback, useEffect, useState } from 'react';\nimport { QR } from 'react-qr-rounded';\n\nimport { useOperationInvoker } from '@dxos/app-framework/ui';\nimport { log } from '@dxos/log';\nimport { useClient, useMulticastObservable } from '@dxos/react-client';\nimport { type Device, useDevices } from '@dxos/react-client/halo';\nimport { type CancellableInvitationObservable, Invitation, InvitationEncoder } from '@dxos/react-client/invitations';\nimport { useNetworkStatus } from '@dxos/react-client/mesh';\nimport { Button, Clipboard, Icon, IconButton, useId, useTranslation } from '@dxos/react-ui';\nimport { Form } from '@dxos/react-ui-form';\nimport { Listbox } from '@dxos/react-ui-list';\nimport { AuthCode, Centered, DeviceListItem, Emoji, Viewport } from '@dxos/shell/react';\nimport { osTranslations } from '@dxos/ui-theme';\nimport { hexToEmoji } from '@dxos/util';\n\nimport { meta } from '#meta';\nimport { ClientOperation } from '#operations';\n\nexport type DevicesContainerProps = {\n  createInvitationUrl?: (invitationCode: string) => string;\n};\n\nexport const DevicesContainer = ({ createInvitationUrl }: DevicesContainerProps) => {\n  const { t } = useTranslation(meta.profile.key);\n  const { invokePromise } = useOperationInvoker();\n  const devices = useDevices();\n  const { swarm: connectionState } = useNetworkStatus();\n\n  const handleResetStorage = useCallback(() => invokePromise(ClientOperation.ResetStorage, {}), [invokePromise]);\n\n  const handleRecover = useCallback(\n    () => invokePromise(ClientOperation.ResetStorage, { mode: 'recover' }),\n    [invokePromise],\n  );\n\n  const handleJoinNewIdentity = useCallback(\n    () => invokePromise(ClientOperation.ResetStorage, { mode: 'join-new-identity' }),\n    [invokePromise],\n  );\n\n  return (\n    <Clipboard.Provider>\n      <Form.Root variant='settings'>\n        <Form.Viewport scroll>\n          <Form.Content>\n            <Form.Section\n              title={t('devices-verbose.label', { ns: meta.profile.key })}\n              description={t('devices.description', { ns: meta.profile.key })}\n            >\n              <Form.Group>\n                <div role='group' className='min-w-0'>\n                  <h3 className='text-lg mb-2'>{t('devices.label', { ns: meta.profile.key })}</h3>\n                  <Listbox.Root>\n                    <Listbox.Content aria-label={t('devices.label', { ns: meta.profile.key })}>\n                      {devices.map((device: Device) => (\n                        <DeviceListItem\n                          key={device.deviceKey.toHex()}\n                          device={device}\n                          connectionState={connectionState}\n                        />\n                      ))}\n                    </Listbox.Content>\n                  </Listbox.Root>\n                </div>\n                {createInvitationUrl && (\n                  <div role='group' className='min-w-0'>\n                    <h3 className='text-lg mb-2'>{t('add-device.label')}</h3>\n                    <DeviceInvitation createInvitationUrl={createInvitationUrl} />\n                  </div>\n                )}\n              </Form.Group>\n            </Form.Section>\n            <Form.Section\n              title={t('danger-zone.title', { ns: meta.profile.key })}\n              description={t('danger-zone.description', { ns: meta.profile.key })}\n            >\n              <Form.Row\n                label={t('reset-device.label')}\n                description={t('reset-device.description', { ns: meta.profile.key })}\n              >\n                <Button variant='destructive' onClick={handleResetStorage} data-testid='devicesContainer.reset'>\n                  {t('reset-device.label')}\n                </Button>\n              </Form.Row>\n              <Form.Row\n                label={t('recover-identity.label')}\n                description={t('recover-identity.description', { ns: meta.profile.key })}\n              >\n                <Button variant='destructive' onClick={handleRecover} data-testid='devicesContainer.recover'>\n                  {t('recover-identity.label')}\n                </Button>\n              </Form.Row>\n              <Form.Row\n                label={t('join-new-identity.label')}\n                description={t('join-new-identity.description', { ns: meta.profile.key })}\n              >\n                <Button\n                  variant='destructive'\n                  onClick={handleJoinNewIdentity}\n                  data-testid='devicesContainer.joinExisting'\n                >\n                  {t('join-new-identity.label')}\n                </Button>\n              </Form.Row>\n            </Form.Section>\n          </Form.Content>\n        </Form.Viewport>\n      </Form.Root>\n    </Clipboard.Provider>\n  );\n};\n\ntype DeviceInvitationProps = {\n  invitation?: CancellableInvitationObservable;\n  createInvitationUrl: (invitationCode: string) => string;\n  onInvitationDone: () => void;\n  onInvitationCreate: () => void;\n};\n\nconst DeviceInvitation = (props: Pick<DeviceInvitationProps, 'createInvitationUrl'>) => {\n  const client = useClient();\n  const [invitation, setInvitation] = useState<CancellableInvitationObservable>();\n\n  const onInvitationCreate = useCallback(() => {\n    const invitation = client.halo.share();\n    if (client.config.values.runtime?.app?.env?.DX_ENVIRONMENT !== 'production') {\n      const subscription = invitation.subscribe((invitation: Invitation) => {\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    }\n    setInvitation(invitation);\n  }, [client]);\n\n  const onInvitationDone = useCallback(() => {\n    setInvitation(undefined);\n  }, []);\n\n  if (invitation) {\n    return <DeviceInvitationImpl {...props} {...{ invitation, onInvitationCreate, onInvitationDone }} />;\n  } else {\n    return <InvitationSection {...props} {...{ onInvitationCreate, onInvitationDone }} />;\n  }\n};\n\nconst DeviceInvitationImpl = ({\n  invitation: invitationObservable,\n  createInvitationUrl,\n  onInvitationDone,\n  onInvitationCreate,\n}: DeviceInvitationProps) => {\n  const invitation = useMulticastObservable(invitationObservable!);\n  const url = createInvitationUrl(InvitationEncoder.encode(invitation));\n\n  useEffect(() => {\n    if (invitation.state >= Invitation.State.SUCCESS) {\n      onInvitationDone();\n    }\n  }, [invitation.state]);\n\n  return <InvitationSection {...invitation} {...{ url, onInvitationDone, onInvitationCreate }} />;\n};\n\ntype InvitationComponentProps = Partial<\n  Pick<Invitation, 'authCode' | 'invitationId'> &\n    Pick<DeviceInvitationProps, 'onInvitationDone' | 'onInvitationCreate'> & {\n      state: number;\n      url: string;\n    }\n>;\n\nconst InvitationSection = ({\n  state = -1,\n  authCode,\n  invitationId = 'never',\n  url = 'never',\n  onInvitationDone = () => {},\n  onInvitationCreate = () => {},\n}: InvitationComponentProps) => {\n  const { t } = useTranslation(meta.profile.key);\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\n  return activeView === 'init' ? (\n    <>\n      <p className='text-description mb-2'>{t('add-device.description')}</p>\n      <IconButton\n        icon='ph--plus--regular'\n        label={t('create-device-invitation.label')}\n        disabled={state >= 0}\n        classNames='w-full'\n        data-testid='devicesContainer.createInvitation'\n        onClick={onInvitationCreate}\n      />\n    </>\n  ) : (\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={onInvitationDone} />\n        </Viewport.View>\n        <Viewport.View id='qr-code'>\n          <InvitationQR id={invitationId} url={url} onCancel={onInvitationDone} />\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(osTranslations);\n  const qrLabel = useId('devices-container__qr-code');\n  const emoji = hexToEmoji(id);\n  return (\n    <>\n      <p className='text-description'>{t('qr-code.description', { ns: meta.profile.key })}</p>\n      <div role='group' className='grid grid-cols-[1fr_min-content]'>\n        <div className='flex justify-center py-4'>\n          <div className='w-full md:max-w-80 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        </div>\n        <span id={qrLabel} className='sr-only'>\n          {t('qr.label')}\n        </span>\n      </div>\n      {/* TODO(burdon): Factor out button bar */}\n      <div className='flex justify-center'>\n        <div className='flex gap-2'>\n          <Clipboard.Button value={url ?? 'never'} />\n          <Button variant='ghost' onClick={onCancel}>\n            {t('cancel.label')}\n          </Button>\n        </div>\n      </div>\n    </>\n  );\n};\n\nconst InvitationAuthCode = ({ id, code, onCancel }: { id: string; code: string; onCancel: () => void }) => {\n  const { t } = useTranslation(osTranslations);\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\nDevicesContainer.displayName = 'DevicesContainer';\n"],"mappings":"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"}

package/dist/lib/chunk-InvitationsContainer.mjs

@@ -0,0 +1,149 @@
+import { t as useHubHttpClient } from "./chunk-hooks.mjs";
+import { meta } from "#meta";
+import { ClientCapabilities } from "#types";
+import { Context } from "@dxos/context";
+import { useCallback, useState } from "react";
+import { useCapability } from "@dxos/app-framework/ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useAtom, useAtomSet } from "@effect-atom/atom-react";
+import { Clipboard, Icon, IconButton, useAsyncEffect, useTranslation } from "@dxos/react-ui";
+import { Form } from "@dxos/react-ui-form";
+import { Listbox } from "@dxos/react-ui-list";
+//#region src/containers/InvitationsContainer/InvitationsContainer.tsx
+var __dxlog_file = "/__w/dxos/dxos/packages/plugins/plugin-client/src/containers/InvitationsContainer/InvitationsContainer.tsx";
+var InvitationsContainer = () => {
+	const { t } = useTranslation(meta.profile.key);
+	const accountCacheAtom = useCapability(ClientCapabilities.AccountCache);
+	const [cache] = useAtom(accountCacheAtom);
+	const setCache = useAtomSet(accountCacheAtom);
+	const [pending, setPending] = useState(false);
+	const hubClient = useHubHttpClient();
+	useAsyncEffect(async () => {
+		if (!hubClient) return;
+		try {
+			const result = await hubClient.listAccountInvitations(new Context(void 0, {
+				"~LogMeta": "~LogMeta",
+				F: __dxlog_file,
+				L: 35
+			}));
+			setCache((prev) => ({
+				...prev,
+				invitations: result.invitations,
+				fetchedAt: Date.now()
+			}));
+		} catch {}
+	}, [hubClient, setCache]);
+	const handleIssue = useCallback(async () => {
+		if (!hubClient) return;
+		setPending(true);
+		try {
+			const result = await hubClient.issueAccountInvitation(new Context(void 0, {
+				"~LogMeta": "~LogMeta",
+				F: __dxlog_file,
+				L: 48
+			}));
+			setCache((prev) => ({
+				...prev,
+				account: prev.account ? {
+					...prev.account,
+					invitationsRemaining: Math.max(0, prev.account.invitationsRemaining - 1)
+				} : prev.account,
+				invitations: [{
+					code: result.code,
+					createdAt: (/* @__PURE__ */ new Date()).toISOString()
+				}, ...prev.invitations ?? []]
+			}));
+		} finally {
+			setPending(false);
+		}
+	}, [hubClient, setCache]);
+	const remaining = cache.account?.invitationsRemaining ?? 0;
+	const list = cache.invitations ?? [];
+	const available = list.filter((row) => !row.redeemedByIdentityDid);
+	const redeemed = list.filter((row) => Boolean(row.redeemedByIdentityDid));
+	return /* @__PURE__ */ jsx(Clipboard.Provider, { children: /* @__PURE__ */ jsx(Form.Root, {
+		variant: "settings",
+		children: /* @__PURE__ */ jsx(Form.Viewport, {
+			scroll: true,
+			children: /* @__PURE__ */ jsxs(Form.Content, { children: [
+				/* @__PURE__ */ jsx(Form.Section, {
+					title: t("invitations-section.title"),
+					description: t("invitations-section.description"),
+					children: /* @__PURE__ */ jsx(Form.Row, {
+						label: t("generate-invitation.label"),
+						description: t("generate-invitation.description", { count: remaining }),
+						children: /* @__PURE__ */ jsx(IconButton, {
+							icon: "ph--plus--regular",
+							label: t("generate-invitation.label"),
+							variant: "primary",
+							onClick: handleIssue,
+							disabled: pending || remaining <= 0
+						})
+					})
+				}),
+				available.length > 0 ? /* @__PURE__ */ jsx(Form.Section, {
+					title: t("available-invitations.title"),
+					children: /* @__PURE__ */ jsx(Listbox.Root, { children: /* @__PURE__ */ jsx(Listbox.Content, {
+						classNames: "gap-1",
+						children: available.map((row) => /* @__PURE__ */ jsx(AvailableInvitationItem, { row }, row.code))
+					}) })
+				}) : null,
+				redeemed.length > 0 ? /* @__PURE__ */ jsx(Form.Section, {
+					title: t("redeemed-invitations.title"),
+					children: /* @__PURE__ */ jsx(Listbox.Root, { children: /* @__PURE__ */ jsx(Listbox.Content, {
+						classNames: "gap-1",
+						children: redeemed.map((row) => /* @__PURE__ */ jsx(RedeemedInvitationItem, { row }, row.code))
+					}) })
+				}) : null
+			] })
+		})
+	}) });
+};
+var AvailableInvitationItem = ({ row }) => /* @__PURE__ */ jsxs(Listbox.Item, {
+	id: row.code,
+	classNames: "grid grid-cols-[min-content_1fr_min-content] items-center gap-2",
+	children: [
+		/* @__PURE__ */ jsx(Icon, {
+			icon: "ph--paper-plane-tilt--duotone",
+			size: 5,
+			classNames: "text-description"
+		}),
+		/* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col min-w-0",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "font-mono truncate",
+				children: row.code
+			}), /* @__PURE__ */ jsx("p", {
+				className: "text-description text-xs",
+				children: new Date(row.createdAt).toLocaleString()
+			})]
+		}),
+		/* @__PURE__ */ jsx(Clipboard.IconButton, { value: row.code })
+	]
+});
+var RedeemedInvitationItem = ({ row }) => {
+	const date = row.redeemedAt ?? row.createdAt;
+	return /* @__PURE__ */ jsxs(Listbox.Item, {
+		id: row.code,
+		classNames: "grid grid-cols-[min-content_1fr] items-center gap-2",
+		children: [/* @__PURE__ */ jsx(Icon, {
+			icon: "ph--check-circle--duotone",
+			size: 5,
+			classNames: "text-success-text"
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col min-w-0",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "font-mono truncate",
+				children: row.code
+			}), /* @__PURE__ */ jsx("p", {
+				className: "text-description text-xs",
+				children: new Date(date).toLocaleString()
+			})]
+		})]
+	});
+};
+InvitationsContainer.displayName = "InvitationsContainer";
+//#endregion
+export { InvitationsContainer as default };
+
+//# sourceMappingURL=chunk-InvitationsContainer.mjs.map

package/dist/lib/chunk-InvitationsContainer.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"chunk-InvitationsContainer.mjs","names":[],"sources":["../../src/containers/InvitationsContainer/InvitationsContainer.tsx"],"sourcesContent":["//\n// Copyright 2026 DXOS.org\n//\n\nimport { useAtom, useAtomSet } from '@effect-atom/atom-react';\nimport React, { useCallback, useState } from 'react';\n\nimport { useCapability } from '@dxos/app-framework/ui';\nimport { Context } from '@dxos/context';\nimport { Clipboard, Icon, IconButton, useAsyncEffect, useTranslation } from '@dxos/react-ui';\nimport { Form } from '@dxos/react-ui-form';\nimport { Listbox } from '@dxos/react-ui-list';\n\nimport { meta } from '#meta';\nimport { type AccountCacheInvitation, ClientCapabilities } from '#types';\n\nimport { useHubHttpClient } from '../../hooks';\n\nexport const InvitationsContainer = () => {\n  const { t } = useTranslation(meta.profile.key);\n  const accountCacheAtom = useCapability(ClientCapabilities.AccountCache);\n  const [cache] = useAtom(accountCacheAtom);\n  const setCache = useAtomSet(accountCacheAtom);\n  const [pending, setPending] = useState(false);\n\n  // Account/invitation routes live on hub-service, not the edge worker.\n  const hubClient = useHubHttpClient();\n\n  useAsyncEffect(async () => {\n    if (!hubClient) {\n      return;\n    }\n\n    try {\n      const result = await hubClient.listAccountInvitations(new Context());\n      setCache((prev) => ({ ...prev, invitations: result.invitations, fetchedAt: Date.now() }));\n    } catch {\n      // Offline: keep cache.\n    }\n  }, [hubClient, setCache]);\n\n  const handleIssue = useCallback(async () => {\n    if (!hubClient) {\n      return;\n    }\n    setPending(true);\n    try {\n      const result = await hubClient.issueAccountInvitation(new Context());\n      // Optimistically push the new code and decrement the remaining quota; the\n      // server consumes one slot at issue time. Next refresh reconciles.\n      setCache((prev) => ({\n        ...prev,\n        account: prev.account\n          ? { ...prev.account, invitationsRemaining: Math.max(0, prev.account.invitationsRemaining - 1) }\n          : prev.account,\n        invitations: [{ code: result.code, createdAt: new Date().toISOString() }, ...(prev.invitations ?? [])],\n      }));\n    } finally {\n      setPending(false);\n    }\n  }, [hubClient, setCache]);\n\n  const remaining = cache.account?.invitationsRemaining ?? 0;\n  const list = cache.invitations ?? [];\n  const available = list.filter((row) => !row.redeemedByIdentityDid);\n  const redeemed = list.filter((row) => Boolean(row.redeemedByIdentityDid));\n\n  return (\n    <Clipboard.Provider>\n      <Form.Root variant='settings'>\n        <Form.Viewport scroll>\n          <Form.Content>\n            <Form.Section title={t('invitations-section.title')} description={t('invitations-section.description')}>\n              <Form.Row\n                label={t('generate-invitation.label')}\n                description={t('generate-invitation.description', { count: remaining })}\n              >\n                <IconButton\n                  icon='ph--plus--regular'\n                  label={t('generate-invitation.label')}\n                  variant='primary'\n                  onClick={handleIssue}\n                  disabled={pending || remaining <= 0}\n                />\n              </Form.Row>\n            </Form.Section>\n\n            {available.length > 0 ? (\n              <Form.Section title={t('available-invitations.title')}>\n                <Listbox.Root>\n                  <Listbox.Content classNames='gap-1'>\n                    {available.map((row) => (\n                      <AvailableInvitationItem key={row.code} row={row} />\n                    ))}\n                  </Listbox.Content>\n                </Listbox.Root>\n              </Form.Section>\n            ) : null}\n\n            {redeemed.length > 0 ? (\n              <Form.Section title={t('redeemed-invitations.title')}>\n                <Listbox.Root>\n                  <Listbox.Content classNames='gap-1'>\n                    {redeemed.map((row) => (\n                      <RedeemedInvitationItem key={row.code} row={row} />\n                    ))}\n                  </Listbox.Content>\n                </Listbox.Root>\n              </Form.Section>\n            ) : null}\n          </Form.Content>\n        </Form.Viewport>\n      </Form.Root>\n    </Clipboard.Provider>\n  );\n};\n\nconst AvailableInvitationItem = ({ row }: { row: AccountCacheInvitation }) => (\n  <Listbox.Item id={row.code} classNames='grid grid-cols-[min-content_1fr_min-content] items-center gap-2'>\n    <Icon icon='ph--paper-plane-tilt--duotone' size={5} classNames='text-description' />\n    <div className='flex flex-col min-w-0'>\n      <div className='font-mono truncate'>{row.code}</div>\n      <p className='text-description text-xs'>{new Date(row.createdAt).toLocaleString()}</p>\n    </div>\n    <Clipboard.IconButton value={row.code} />\n  </Listbox.Item>\n);\n\nconst RedeemedInvitationItem = ({ row }: { row: AccountCacheInvitation }) => {\n  const date = row.redeemedAt ?? row.createdAt;\n  return (\n    <Listbox.Item id={row.code} classNames='grid grid-cols-[min-content_1fr] items-center gap-2'>\n      <Icon icon='ph--check-circle--duotone' size={5} classNames='text-success-text' />\n      <div className='flex flex-col min-w-0'>\n        <div className='font-mono truncate'>{row.code}</div>\n        <p className='text-description text-xs'>{new Date(date).toLocaleString()}</p>\n      </div>\n    </Listbox.Item>\n  );\n};\n\nInvitationsContainer.displayName = 'InvitationsContainer';\n"],"mappings":"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"}

package/dist/lib/chunk-JoinDialog.mjs

@@ -0,0 +1,35 @@
+import { meta } from "#meta";
+import { LayoutOperation } from "@dxos/app-toolkit";
+import { ClientOperation } from "#operations";
+import { useCallback } from "react";
+import { JoinPanel } from "@dxos/shell/react";
+import { useOperationInvoker } from "@dxos/app-framework/ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Dialog, useTranslation } from "@dxos/react-ui";
+import { osTranslations } from "@dxos/ui-theme";
+import { ObservabilityOperation } from "@dxos/plugin-observability";
+//#region src/containers/JoinDialog/JoinDialog.tsx
+var JoinDialog = (props) => {
+	const { invokePromise } = useOperationInvoker();
+	const { t } = useTranslation(meta.profile.key);
+	const handleCancelResetStorage = useCallback(() => invokePromise(ClientOperation.ShareIdentity), [invokePromise]);
+	const handleDone = useCallback(async (result) => {
+		if (result?.identityKey) await Promise.all([invokePromise(LayoutOperation.UpdateDialog, { state: false }), invokePromise(ObservabilityOperation.SendEvent, { name: props.initialDisposition === "recover-identity" ? "identity.recover" : "identity.join" })]);
+	}, [invokePromise]);
+	return /* @__PURE__ */ jsxs(Dialog.Content, { children: [/* @__PURE__ */ jsx(Dialog.Header, { children: /* @__PURE__ */ jsx(Dialog.Title, {
+		classNames: "sr-only",
+		children: t("join-space.label", { ns: osTranslations })
+	}) }), /* @__PURE__ */ jsx(Dialog.Body, { children: /* @__PURE__ */ jsx(JoinPanel, {
+		...props,
+		mode: "halo-only",
+		exitActionParent: /* @__PURE__ */ jsx(Dialog.Close, { asChild: true }),
+		doneActionParent: /* @__PURE__ */ jsx(Dialog.Close, { asChild: true }),
+		onCancelResetStorage: handleCancelResetStorage,
+		onDone: handleDone
+	}) })] });
+};
+JoinDialog.displayName = "JoinDialog";
+//#endregion
+export { JoinDialog as default };
+
+//# sourceMappingURL=chunk-JoinDialog.mjs.map

package/dist/lib/chunk-JoinDialog.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"chunk-JoinDialog.mjs","names":[],"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 } from '@dxos/app-toolkit';\nimport { ObservabilityOperation } from '@dxos/plugin-observability';\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';\nimport { ClientOperation } from '#operations';\n\nexport const JoinDialog = (props: JoinPanelProps) => {\n  const { invokePromise } = useOperationInvoker();\n  const { t } = useTranslation(meta.profile.key);\n\n  const handleCancelResetStorage = useCallback(() => invokePromise(ClientOperation.ShareIdentity), [invokePromise]);\n\n  const handleDone = useCallback(\n    async (result: InvitationResult | null) => {\n      if (result?.identityKey) {\n        await Promise.all([\n          invokePromise(LayoutOperation.UpdateDialog, { state: false }),\n          invokePromise(ObservabilityOperation.SendEvent, {\n            name: props.initialDisposition === 'recover-identity' ? 'identity.recover' : 'identity.join',\n          }),\n        ]);\n      }\n    },\n    [invokePromise],\n  );\n\n  // TODO(burdon): Move JoinHeading into Dialog.Heading.\n  return (\n    <Dialog.Content>\n      <Dialog.Header>\n        <Dialog.Title classNames='sr-only'>{t('join-space.label', { ns: osTranslations })}</Dialog.Title>\n      </Dialog.Header>\n      <Dialog.Body>\n        <JoinPanel\n          {...props}\n          mode='halo-only'\n          exitActionParent={<Dialog.Close asChild />}\n          doneActionParent={<Dialog.Close asChild />}\n          onCancelResetStorage={handleCancelResetStorage}\n          onDone={handleDone}\n        />\n      </Dialog.Body>\n    </Dialog.Content>\n  );\n};\n\nJoinDialog.displayName = 'JoinDialog';\n"],"mappings":";;;;;;;;;;;AAiBA,IAAa,cAAc,UAA0B;CACnD,MAAM,EAAE,kBAAkB,oBAAoB;CAC9C,MAAM,EAAE,MAAM,eAAe,KAAK,QAAQ,GAAG;CAE7C,MAAM,2BAA2B,kBAAkB,cAAc,gBAAgB,aAAa,GAAG,CAAC,aAAa,CAAC;CAEhH,MAAM,aAAa,YACjB,OAAO,WAAoC;EACzC,IAAI,QAAQ,aACV,MAAM,QAAQ,IAAI,CAChB,cAAc,gBAAgB,cAAc,EAAE,OAAO,MAAM,CAAC,GAC5D,cAAc,uBAAuB,WAAW,EAC9C,MAAM,MAAM,uBAAuB,qBAAqB,qBAAqB,gBAC/E,CAAC,CACH,CAAC;CAEL,GACA,CAAC,aAAa,CAChB;CAGA,OACE,qBAAC,OAAO,SAAR,EAAA,UAAA,CACE,oBAAC,OAAO,QAAR,EAAA,UACE,oBAAC,OAAO,OAAR;EAAc,YAAW;YAAW,EAAE,oBAAoB,EAAE,IAAI,eAAe,CAAC;CAAgB,CAAA,EACnF,CAAA,GACf,oBAAC,OAAO,MAAR,EAAA,UACE,oBAAC,WAAD;EACE,GAAI;EACJ,MAAK;EACL,kBAAkB,oBAAC,OAAO,OAAR,EAAc,SAAA,KAAS,CAAA;EACzC,kBAAkB,oBAAC,OAAO,OAAR,EAAc,SAAA,KAAS,CAAA;EACzC,sBAAsB;EACtB,QAAQ;CACT,CAAA,EACU,CAAA,CACC,EAAA,CAAA;AAEpB;AAEA,WAAW,cAAc"}