@dxos/plugin-client 0.9.0 → 0.9.1-staging.ee54ba693a

package/dist/lib/neutral/{DevicesContainer-6MWNUC3I.mjs → DevicesContainer-PRWIN36N.mjs}

@@ -9,8 +9,9 @@ import { useClient, useMulticastObservable } from "@dxos/react-client";
 import { useDevices } from "@dxos/react-client/halo";
 import { Invitation, InvitationEncoder } from "@dxos/react-client/invitations";
 import { useNetworkStatus } from "@dxos/react-client/mesh";
-import { Button, Clipboard, Icon, IconButton, List, useId, useTranslation } from "@dxos/react-ui";
-import { Settings } from "@dxos/react-ui-form";
+import { Button, Clipboard, Icon, IconButton, useId, useTranslation } from "@dxos/react-ui";
+import { Form } from "@dxos/react-ui-form";
+import { Listbox } from "@dxos/react-ui-list";
 import { AuthCode, Centered, DeviceListItem, Emoji, Viewport } from "@dxos/shell/react";
 import { osTranslations } from "@dxos/ui-theme";
 import { hexToEmoji } from "@dxos/util";
@@ -18,7 +19,7 @@ import { meta } from "#meta";
 import { ClientOperation } from "#operations";
 var __dxlog_file = "/__w/dxos/dxos/packages/plugins/plugin-client/src/containers/DevicesContainer/DevicesContainer.tsx";
 var DevicesContainer = ({ createInvitationUrl }) => {
-  const { t } = useTranslation(meta.id);
+  const { t } = useTranslation(meta.profile.key);
   const { invokePromise } = useOperationInvoker();
   const devices = useDevices();
   const { swarm: connectionState } = useNetworkStatus();
@@ -35,66 +36,74 @@ var DevicesContainer = ({ createInvitationUrl }) => {
   }), [
     invokePromise
   ]);
-  return /* @__PURE__ */ React.createElement(Clipboard.Provider, null, /* @__PURE__ */ React.createElement(Settings.Viewport, null, /* @__PURE__ */ React.createElement(Settings.Section, {
+  return /* @__PURE__ */ React.createElement(Clipboard.Provider, null, /* @__PURE__ */ React.createElement(Form.Root, {
+    variant: "settings"
+  }, /* @__PURE__ */ React.createElement(Form.Viewport, {
+    scroll: true
+  }, /* @__PURE__ */ React.createElement(Form.Content, null, /* @__PURE__ */ React.createElement(Form.Section, {
     title: t("devices-verbose.label", {
-      ns: meta.id
+      ns: meta.profile.key
     }),
     description: t("devices.description", {
-      ns: meta.id
+      ns: meta.profile.key
     })
-  }, /* @__PURE__ */ React.createElement(Settings.Panel, null, /* @__PURE__ */ React.createElement("div", {
+  }, /* @__PURE__ */ React.createElement(Form.Group, null, /* @__PURE__ */ React.createElement("div", {
     role: "group",
     className: "min-w-0"
   }, /* @__PURE__ */ React.createElement("h3", {
     className: "text-lg mb-2"
   }, t("devices.label", {
-    ns: meta.id
-  })), /* @__PURE__ */ React.createElement(List, null, devices.map((device) => /* @__PURE__ */ React.createElement(DeviceListItem, {
+    ns: meta.profile.key
+  })), /* @__PURE__ */ React.createElement(Listbox.Root, null, /* @__PURE__ */ React.createElement(Listbox.Content, {
+    "aria-label": t("devices.label", {
+      ns: meta.profile.key
+    })
+  }, devices.map((device) => /* @__PURE__ */ React.createElement(DeviceListItem, {
     key: device.deviceKey.toHex(),
     device,
     connectionState
-  })))), createInvitationUrl && /* @__PURE__ */ React.createElement("div", {
+  }))))), createInvitationUrl && /* @__PURE__ */ React.createElement("div", {
     role: "group",
     className: "min-w-0"
   }, /* @__PURE__ */ React.createElement("h3", {
     className: "text-lg mb-2"
   }, t("add-device.label")), /* @__PURE__ */ React.createElement(DeviceInvitation, {
     createInvitationUrl
-  })))), /* @__PURE__ */ React.createElement(Settings.Section, {
+  })))), /* @__PURE__ */ React.createElement(Form.Section, {
     title: t("danger-zone.title", {
-      ns: meta.id
+      ns: meta.profile.key
     }),
     description: t("danger-zone.description", {
-      ns: meta.id
+      ns: meta.profile.key
     })
-  }, /* @__PURE__ */ React.createElement(Settings.Item, {
-    title: t("reset-device.label"),
+  }, /* @__PURE__ */ React.createElement(Form.Row, {
+    label: t("reset-device.label"),
     description: t("reset-device.description", {
-      ns: meta.id
+      ns: meta.profile.key
     })
   }, /* @__PURE__ */ React.createElement(Button, {
     variant: "destructive",
     onClick: handleResetStorage,
     "data-testid": "devicesContainer.reset"
-  }, t("reset-device.label"))), /* @__PURE__ */ React.createElement(Settings.Item, {
-    title: t("recover-identity.label"),
+  }, t("reset-device.label"))), /* @__PURE__ */ React.createElement(Form.Row, {
+    label: t("recover-identity.label"),
     description: t("recover-identity.description", {
-      ns: meta.id
+      ns: meta.profile.key
     })
   }, /* @__PURE__ */ React.createElement(Button, {
     variant: "destructive",
     onClick: handleRecover,
     "data-testid": "devicesContainer.recover"
-  }, t("recover-identity.label"))), /* @__PURE__ */ React.createElement(Settings.Item, {
-    title: t("join-new-identity.label"),
+  }, t("recover-identity.label"))), /* @__PURE__ */ React.createElement(Form.Row, {
+    label: t("join-new-identity.label"),
     description: t("join-new-identity.description", {
-      ns: meta.id
+      ns: meta.profile.key
     })
   }, /* @__PURE__ */ React.createElement(Button, {
     variant: "destructive",
     onClick: handleJoinNewIdentity,
     "data-testid": "devicesContainer.joinExisting"
-  }, t("join-new-identity.label"))))));
+  }, t("join-new-identity.label"))))))));
 };
 var DeviceInvitation = (props) => {
   const client = useClient();
@@ -108,7 +117,7 @@ var DeviceInvitation = (props) => {
           log.info(JSON.stringify({
             invitationCode,
             authCode: invitation3.authCode
-          }), void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 107, S: void 0 });
+          }), void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 116, S: void 0 });
           subscription.unsubscribe();
         }
       });
@@ -155,7 +164,7 @@ var DeviceInvitationImpl = ({ invitation: invitationObservable, createInvitation
 var InvitationSection = ({ state = -1, authCode, invitationId = "never", url = "never", onInvitationDone = () => {
 }, onInvitationCreate = () => {
 } }) => {
-  const { t } = useTranslation(meta.id);
+  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__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("p", {
     className: "text-description mb-2"
@@ -195,7 +204,7 @@ var InvitationQR = ({ id, url, onCancel }) => {
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("p", {
     className: "text-description"
   }, t("qr-code.description", {
-    ns: meta.id
+    ns: meta.profile.key
   })), /* @__PURE__ */ React.createElement("div", {
     role: "group",
     className: "grid grid-cols-[1fr_min-content]"
@@ -259,4 +268,4 @@ var InvitationComplete = ({ statusValue }) => {
 export {
   DevicesContainer as default
 };
-//# sourceMappingURL=DevicesContainer-6MWNUC3I.mjs.map
+//# sourceMappingURL=DevicesContainer-PRWIN36N.mjs.map

package/dist/lib/neutral/DevicesContainer-PRWIN36N.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "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"],
+  "mappings": "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",
+  "names": ["React", "useCallback", "useEffect", "useState", "QR", "useOperationInvoker", "log", "useClient", "useMulticastObservable", "useDevices", "Invitation", "InvitationEncoder", "useNetworkStatus", "Button", "Clipboard", "Icon", "IconButton", "useId", "useTranslation", "Form", "Listbox", "AuthCode", "Centered", "DeviceListItem", "Emoji", "Viewport", "osTranslations", "hexToEmoji", "meta", "ClientOperation", "DevicesContainer", "invokePromise", "devices", "swarm", "connectionState", "handleResetStorage", "scroll", "Content", "title", "t", "profile", "description", "role", "className", "ns", "aria-label", "key", "map", "device", "createInvitationUrl", "Section", "label", "variant", "data-testid", "handleRecover", "handleJoinNewIdentity", "DeviceInvitation", "props", "setInvitation", "onInvitationCreate", "invitation", "halo", "share", "values", "app", "env", "subscription", "subscribe", "invitationCode", "state", "State", "stringify", "authCode", "unsubscribe", "client", "onInvitationDone", "SUCCESS", "url", "CANCELLED", "READY_FOR_AUTHENTICATION", "activeView", "icon", "disabled", "classNames", "onClick", "Views", "id", "InvitationComplete", "statusValue", "InvitationAuthCode", "invitationId", "onCancel", "InvitationQR", "emoji", "div", "rounding", "backgroundColor", "color", "aria-labelledby", "errorCorrectionLevel", "cutout", "text", "span", "qrLabel", "value", "code", "large", "size"]
+}

package/dist/lib/neutral/{InvitationsContainer-ME722VKS.mjs → InvitationsContainer-BI5RAWET.mjs}

@@ -1,6 +1,6 @@
 import {
   useHubHttpClient
-} from "./chunk-JEF2FQGB.mjs";
+} from "./chunk-JY35S2CN.mjs";
 import "./chunk-J5LGTIGS.mjs";
 
 // src/containers/InvitationsContainer/InvitationsContainer.tsx
@@ -8,24 +8,25 @@ import { useAtom, useAtomSet } from "@effect-atom/atom-react";
 import React, { useCallback, useState } from "react";
 import { useCapability } from "@dxos/app-framework/ui";
 import { Context } from "@dxos/context";
-import { Clipboard, Icon, IconButton, List, ListItem, useAsyncEffect, useTranslation } from "@dxos/react-ui";
-import { Settings } from "@dxos/react-ui-form";
+import { Clipboard, Icon, IconButton, useAsyncEffect, useTranslation } from "@dxos/react-ui";
+import { Form } from "@dxos/react-ui-form";
+import { Listbox } from "@dxos/react-ui-list";
 import { meta } from "#meta";
 import { ClientCapabilities } from "#types";
 var __dxlog_file = "/__w/dxos/dxos/packages/plugins/plugin-client/src/containers/InvitationsContainer/InvitationsContainer.tsx";
 var InvitationsContainer = () => {
-  const { t } = useTranslation(meta.id);
+  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 hubHttp = useHubHttpClient();
+  const hubClient = useHubHttpClient();
   useAsyncEffect(async () => {
-    if (!hubHttp) {
+    if (!hubClient) {
       return;
     }
     try {
-      const result = await hubHttp.listAccountInvitations(new Context(void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 26 }));
+      const result = await hubClient.listAccountInvitations(new Context(void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 27 }));
       setCache((prev) => ({
         ...prev,
         invitations: result.invitations,
@@ -34,16 +35,16 @@ var InvitationsContainer = () => {
     } catch {
     }
   }, [
-    hubHttp,
+    hubClient,
     setCache
   ]);
   const handleIssue = useCallback(async () => {
-    if (!hubHttp) {
+    if (!hubClient) {
       return;
     }
     setPending(true);
     try {
-      const result = await hubHttp.issueAccountInvitation(new Context(void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 45 }));
+      const result = await hubClient.issueAccountInvitation(new Context(void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 46 }));
       setCache((prev) => ({
         ...prev,
         account: prev.account ? {
@@ -62,18 +63,22 @@ var InvitationsContainer = () => {
       setPending(false);
     }
   }, [
-    hubHttp,
+    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__ */ React.createElement(Clipboard.Provider, null, /* @__PURE__ */ React.createElement(Settings.Viewport, null, /* @__PURE__ */ React.createElement(Settings.Section, {
+  return /* @__PURE__ */ React.createElement(Clipboard.Provider, null, /* @__PURE__ */ React.createElement(Form.Root, {
+    variant: "settings"
+  }, /* @__PURE__ */ React.createElement(Form.Viewport, {
+    scroll: true
+  }, /* @__PURE__ */ React.createElement(Form.Content, null, /* @__PURE__ */ React.createElement(Form.Section, {
     title: t("invitations-section.title"),
     description: t("invitations-section.description")
-  }, /* @__PURE__ */ React.createElement(Settings.Item, {
-    title: t("generate-invitation.label"),
+  }, /* @__PURE__ */ React.createElement(Form.Row, {
+    label: t("generate-invitation.label"),
     description: t("generate-invitation.description", {
       count: remaining
     })
@@ -83,45 +88,51 @@ var InvitationsContainer = () => {
     variant: "primary",
     onClick: handleIssue,
     disabled: pending || remaining <= 0
-  }))), available.length > 0 ? /* @__PURE__ */ React.createElement(Settings.Section, {
+  }))), available.length > 0 ? /* @__PURE__ */ React.createElement(Form.Section, {
     title: t("available-invitations.title")
-  }, /* @__PURE__ */ React.createElement(List, null, available.map((row) => /* @__PURE__ */ React.createElement(AvailableInvitationItem, {
+  }, /* @__PURE__ */ React.createElement(Listbox.Root, null, /* @__PURE__ */ React.createElement(Listbox.Content, {
+    classNames: "gap-1"
+  }, available.map((row) => /* @__PURE__ */ React.createElement(AvailableInvitationItem, {
     key: row.code,
     row
-  })))) : null, redeemed.length > 0 ? /* @__PURE__ */ React.createElement(Settings.Section, {
+  }))))) : null, redeemed.length > 0 ? /* @__PURE__ */ React.createElement(Form.Section, {
     title: t("redeemed-invitations.title")
-  }, /* @__PURE__ */ React.createElement(List, null, redeemed.map((row) => /* @__PURE__ */ React.createElement(RedeemedInvitationItem, {
+  }, /* @__PURE__ */ React.createElement(Listbox.Root, null, /* @__PURE__ */ React.createElement(Listbox.Content, {
+    classNames: "gap-1"
+  }, redeemed.map((row) => /* @__PURE__ */ React.createElement(RedeemedInvitationItem, {
     key: row.code,
     row
-  })))) : null));
+  }))))) : null))));
 };
-var AvailableInvitationItem = ({ row }) => /* @__PURE__ */ React.createElement(ListItem.Root, {
+var AvailableInvitationItem = ({ row }) => /* @__PURE__ */ React.createElement(Listbox.Item, {
+  id: row.code,
   classNames: "grid grid-cols-[min-content_1fr_min-content] items-center gap-2"
-}, /* @__PURE__ */ React.createElement(ListItem.Endcap, null, /* @__PURE__ */ React.createElement(Icon, {
+}, /* @__PURE__ */ React.createElement(Icon, {
   icon: "ph--paper-plane-tilt--duotone",
   size: 5,
   classNames: "text-description"
-})), /* @__PURE__ */ React.createElement("div", {
+}), /* @__PURE__ */ React.createElement("div", {
   className: "flex flex-col min-w-0"
-}, /* @__PURE__ */ React.createElement(ListItem.Heading, {
-  classNames: "font-mono truncate"
+}, /* @__PURE__ */ React.createElement("div", {
+  className: "font-mono truncate"
 }, row.code), /* @__PURE__ */ React.createElement("p", {
   className: "text-description text-xs"
-}, new Date(row.createdAt).toLocaleString())), /* @__PURE__ */ React.createElement(ListItem.Endcap, null, /* @__PURE__ */ React.createElement(Clipboard.IconButton, {
+}, new Date(row.createdAt).toLocaleString())), /* @__PURE__ */ React.createElement(Clipboard.IconButton, {
   value: row.code
-})));
+}));
 var RedeemedInvitationItem = ({ row }) => {
   const date = row.redeemedAt ?? row.createdAt;
-  return /* @__PURE__ */ React.createElement(ListItem.Root, {
+  return /* @__PURE__ */ React.createElement(Listbox.Item, {
+    id: row.code,
     classNames: "grid grid-cols-[min-content_1fr] items-center gap-2"
-  }, /* @__PURE__ */ React.createElement(ListItem.Endcap, null, /* @__PURE__ */ React.createElement(Icon, {
+  }, /* @__PURE__ */ React.createElement(Icon, {
     icon: "ph--check-circle--duotone",
     size: 5,
     classNames: "text-success-text"
-  })), /* @__PURE__ */ React.createElement("div", {
+  }), /* @__PURE__ */ React.createElement("div", {
     className: "flex flex-col min-w-0"
-  }, /* @__PURE__ */ React.createElement(ListItem.Heading, {
-    classNames: "font-mono truncate"
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: "font-mono truncate"
   }, row.code), /* @__PURE__ */ React.createElement("p", {
     className: "text-description text-xs"
   }, new Date(date).toLocaleString())));
@@ -129,4 +140,4 @@ var RedeemedInvitationItem = ({ row }) => {
 export {
   InvitationsContainer as default
 };
-//# sourceMappingURL=InvitationsContainer-ME722VKS.mjs.map
+//# sourceMappingURL=InvitationsContainer-BI5RAWET.mjs.map

package/dist/lib/neutral/InvitationsContainer-BI5RAWET.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "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"],
+  "mappings": "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",
+  "names": ["useAtom", "useAtomSet", "React", "useCallback", "useState", "useCapability", "Context", "Clipboard", "Icon", "IconButton", "useAsyncEffect", "useTranslation", "Form", "Listbox", "meta", "ClientCapabilities", "InvitationsContainer", "accountCacheAtom", "useCapability", "cache", "setCache", "useAtomSet", "pending", "setPending", "hubClient", "useHubHttpClient", "invitations", "fetchedAt", "result", "account", "prev", "invitationsRemaining", "code", "available", "list", "filter", "row", "redeemedByIdentityDid", "redeemed", "Clipboard", "variant", "Form", "scroll", "Content", "title", "t", "label", "count", "remaining", "icon", "onClick", "handleIssue", "disabled", "Listbox", "classNames", "AvailableInvitationItem", "RedeemedInvitationItem", "className", "div", "Date", "toLocaleString", "value", "id"]
+}

package/dist/lib/neutral/{JoinDialog-2NXAKPLP.mjs → JoinDialog-4BWV4CYB.mjs}

@@ -12,7 +12,7 @@ import { meta } from "#meta";
 import { ClientOperation } from "#operations";
 var JoinDialog = (props) => {
   const { invokePromise } = useOperationInvoker();
-  const { t } = useTranslation(meta.id);
+  const { t } = useTranslation(meta.profile.key);
   const handleCancelResetStorage = useCallback(() => invokePromise(ClientOperation.ShareIdentity), [
     invokePromise
   ]);
@@ -50,4 +50,4 @@ var JoinDialog = (props) => {
 export {
   JoinDialog as default
 };
-//# sourceMappingURL=JoinDialog-2NXAKPLP.mjs.map
+//# sourceMappingURL=JoinDialog-4BWV4CYB.mjs.map

package/dist/lib/neutral/JoinDialog-4BWV4CYB.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 } 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"],
+  "mappings": ";;;AAIA,OAAOA,SAASC,mBAAmB;AAEnC,SAASC,2BAA2B;AACpC,SAASC,uBAAuB;AAChC,SAASC,8BAA8B;AAEvC,SAASC,QAAQC,sBAAsB;AACvC,SAASC,iBAAsC;AAC/C,SAASC,sBAAsB;AAE/B,SAASC,YAAY;AACrB,SAASC,uBAAuB;AAEzB,IAAMC,aAAa,CAACC,UAAAA;AACzB,QAAM,EAAEC,cAAa,IAAKX,oBAAAA;AAC1B,QAAM,EAAEY,EAAC,IAAKR,eAAeG,KAAKM,QAAQC,GAAG;AAE7C,QAAMC,2BAA2BhB,YAAY,MAAMY,cAAcH,gBAAgBQ,aAAa,GAAG;IAACL;GAAc;AAEhH,QAAMM,aAAalB,YACjB,OAAOmB,WAAAA;AACL,QAAIA,QAAQC,aAAa;AACvB,YAAMC,QAAQC,IAAI;QAChBV,cAAcV,gBAAgBqB,cAAc;UAAEC,OAAO;QAAM,CAAA;QAC3DZ,cAAcT,uBAAuBsB,WAAW;UAC9CC,MAAMf,MAAMgB,uBAAuB,qBAAqB,qBAAqB;QAC/E,CAAA;OACD;IACH;EACF,GACA;IAACf;GAAc;AAIjB,SACE,sBAAA,cAACR,OAAOwB,SAAO,MACb,sBAAA,cAACxB,OAAOyB,QAAM,MACZ,sBAAA,cAACzB,OAAO0B,OAAK;IAACC,YAAW;KAAWlB,EAAE,oBAAoB;IAAEmB,IAAIzB;EAAe,CAAA,CAAA,CAAA,GAEjF,sBAAA,cAACH,OAAO6B,MAAI,MACV,sBAAA,cAAC3B,WAAAA;IACE,GAAGK;IACJuB,MAAK;IACLC,kBAAkB,sBAAA,cAAC/B,OAAOgC,OAAK;MAACC,SAAAA;;IAChCC,kBAAkB,sBAAA,cAAClC,OAAOgC,OAAK;MAACC,SAAAA;;IAChCE,sBAAsBvB;IACtBwB,QAAQtB;;AAKlB;",
+  "names": ["React", "useCallback", "useOperationInvoker", "LayoutOperation", "ObservabilityOperation", "Dialog", "useTranslation", "JoinPanel", "osTranslations", "meta", "ClientOperation", "JoinDialog", "props", "invokePromise", "t", "profile", "key", "handleCancelResetStorage", "ShareIdentity", "handleDone", "result", "identityKey", "Promise", "all", "UpdateDialog", "state", "SendEvent", "name", "initialDisposition", "Content", "Header", "Title", "classNames", "ns", "Body", "mode", "exitActionParent", "Close", "asChild", "doneActionParent", "onCancelResetStorage", "onDone"]
+}

package/dist/lib/neutral/{ProfileContainer-VPX3FPWG.mjs → ProfileContainer-YEAYOTX5.mjs}

@@ -7,7 +7,7 @@ import { debounce } from "@dxos/async";
 import { useClient } from "@dxos/react-client";
 import { useIdentity } from "@dxos/react-client/halo";
 import { ButtonGroup, Clipboard, Input, useTranslation } from "@dxos/react-ui";
-import { Form, Settings } from "@dxos/react-ui-form";
+import { Form } from "@dxos/react-ui-form";
 import { EmojiPickerBlock, HuePicker } from "@dxos/react-ui-pickers";
 import { hexToEmoji, hexToHue } from "@dxos/util";
 import { meta } from "#meta";
@@ -30,7 +30,7 @@ var getHueValue = (identity) => identity?.profile?.data?.hue || getDefaultHueVal
 var getDefaultEmojiValue = (identity) => hexToEmoji(identity?.identityKey.toHex() ?? "0");
 var getEmojiValue = (identity) => identity?.profile?.data?.emoji || getDefaultEmojiValue(identity);
 var ProfileContainer = () => {
-  const { t } = useTranslation(meta.id);
+  const { t } = useTranslation(meta.profile.key);
   const client = useClient();
   const identity = useIdentity();
   const [displayName, setDisplayNameDirectly] = useState(identity?.profile?.displayName ?? "");
@@ -82,15 +82,15 @@ var ProfileContainer = () => {
         onValueChange,
         type
       ]);
-      return /* @__PURE__ */ React.createElement(Settings.Item, {
-        title: label,
+      return /* @__PURE__ */ React.createElement(Form.Row, {
+        label,
         description: t("display-name.description")
-      }, /* @__PURE__ */ React.createElement(Input.TextInput, {
+      }, /* @__PURE__ */ React.createElement(Input.Root, null, /* @__PURE__ */ React.createElement(Input.TextInput, {
         value: getValue(),
         onChange: handleChange2,
         placeholder: t("display-name-input.placeholder"),
         classNames: "min-w-64"
-      }));
+      })));
     },
     emoji: ({ type, label, getValue, onValueChange }) => {
       const handleChange2 = useCallback((nextEmoji) => onValueChange(type, nextEmoji), [
@@ -101,8 +101,8 @@ var ProfileContainer = () => {
         onValueChange,
         type
       ]);
-      return /* @__PURE__ */ React.createElement(Settings.Item, {
-        title: label,
+      return /* @__PURE__ */ React.createElement(Form.Row, {
+        label,
         description: t("icon.description")
       }, /* @__PURE__ */ React.createElement(EmojiPickerBlock, {
         triggerVariant: "default",
@@ -121,8 +121,8 @@ var ProfileContainer = () => {
         onValueChange,
         type
       ]);
-      return /* @__PURE__ */ React.createElement(Settings.Item, {
-        title: label,
+      return /* @__PURE__ */ React.createElement(Form.Row, {
+        label,
         description: t("hue.description")
       }, /* @__PURE__ */ React.createElement("div", {
         className: "flex justify-self-end"
@@ -134,10 +134,10 @@ var ProfileContainer = () => {
     },
     // TODO(wittjosiah): We need text input annotations for disabled and copyable.
     did: ({ label, getValue }) => {
-      return /* @__PURE__ */ React.createElement(Settings.Item, {
-        title: label,
+      return /* @__PURE__ */ React.createElement(Form.Row, {
+        label,
         description: t("did.description")
-      }, /* @__PURE__ */ React.createElement(ButtonGroup, {
+      }, /* @__PURE__ */ React.createElement(Input.Root, null, /* @__PURE__ */ React.createElement(ButtonGroup, {
         classNames: "w-full"
       }, /* @__PURE__ */ React.createElement(Input.TextInput, {
         value: getValue(),
@@ -145,24 +145,25 @@ var ProfileContainer = () => {
         classNames: "min-w-64"
       }), /* @__PURE__ */ React.createElement(Clipboard.IconButton, {
         value: getValue() ?? ""
-      })));
+      }))));
     }
   }), [
     t
   ]);
-  return /* @__PURE__ */ React.createElement(Clipboard.Provider, null, /* @__PURE__ */ React.createElement(Settings.Viewport, null, /* @__PURE__ */ React.createElement(Settings.Section, {
-    title: t("profile.label"),
-    description: t("profile.description")
-  }, /* @__PURE__ */ React.createElement(Form.Root, {
+  return /* @__PURE__ */ React.createElement(Clipboard.Provider, null, /* @__PURE__ */ React.createElement(Form.Root, {
+    variant: "settings",
     schema: UserProfile,
     values,
     fieldMap,
     onValuesChanged: handleChange
-  }, /* @__PURE__ */ React.createElement(Form.Content, {
-    classNames: "gap-form-gap"
+  }, /* @__PURE__ */ React.createElement(Form.Viewport, {
+    scroll: true
+  }, /* @__PURE__ */ React.createElement(Form.Content, null, /* @__PURE__ */ React.createElement(Form.Section, {
+    title: t("profile.label"),
+    description: t("profile.description")
   }, /* @__PURE__ */ React.createElement(Form.FieldSet, null))))));
 };
 export {
   ProfileContainer as default
 };
-//# sourceMappingURL=ProfileContainer-VPX3FPWG.mjs.map
+//# sourceMappingURL=ProfileContainer-YEAYOTX5.mjs.map

package/dist/lib/neutral/ProfileContainer-YEAYOTX5.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/containers/ProfileContainer/ProfileContainer.tsx"],
+  "sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\nimport * as Schema from 'effect/Schema';\nimport React, { type ChangeEvent, useCallback, useMemo, useState } from 'react';\n\nimport { debounce } from '@dxos/async';\nimport { useClient } from '@dxos/react-client';\nimport { type Identity, useIdentity } from '@dxos/react-client/halo';\nimport { ButtonGroup, Clipboard, Input, useTranslation } from '@dxos/react-ui';\nimport { Form, type FormFieldMap, type FormUpdateMeta } from '@dxos/react-ui-form';\nimport { EmojiPickerBlock, HuePicker } from '@dxos/react-ui-pickers';\nimport { hexToEmoji, hexToHue } from '@dxos/util';\n\nimport { meta } from '#meta';\n\n// TOOD(burdon): Factor out?\n// TODO(wittjosiah): Integrate annotations with translations.\nconst UserProfile = Schema.Struct({\n  did: Schema.String.annotations({ title: 'DID' }),\n  displayName: Schema.String.annotations({ title: 'Display name' }),\n  emoji: Schema.String.annotations({ title: 'Avatar' }),\n  hue: Schema.String.annotations({ title: 'Color' }),\n});\n\ntype UserProfile = Schema.Schema.Type<typeof UserProfile>;\n\n// TODO(thure): Factor out?\nconst getDefaultHueValue = (identity: Identity | null) => hexToHue(identity?.identityKey.toHex() ?? '0');\nconst getHueValue = (identity: Identity | null) => identity?.profile?.data?.hue || getDefaultHueValue(identity);\nconst getDefaultEmojiValue = (identity: Identity | null) => hexToEmoji(identity?.identityKey.toHex() ?? '0');\nconst getEmojiValue = (identity: Identity | null) => identity?.profile?.data?.emoji || getDefaultEmojiValue(identity);\n\nexport const ProfileContainer = () => {\n  const { t } = useTranslation(meta.profile.key);\n  const client = useClient();\n  const identity = useIdentity();\n  const [displayName, setDisplayNameDirectly] = useState(identity?.profile?.displayName ?? '');\n  const [emoji, setEmojiDirectly] = useState<string>(getEmojiValue(identity));\n  const [hue, setHueDirectly] = useState<string>(getHueValue(identity));\n\n  const updateProfile = useMemo(\n    () =>\n      debounce(\n        (profile: Partial<UserProfile>) =>\n          client.halo.updateProfile({\n            displayName: profile.displayName,\n            data: {\n              emoji: profile.emoji,\n              hue: profile.hue,\n            },\n          }),\n        2_000,\n      ),\n    [],\n  );\n\n  const handleChange = useCallback(\n    (profile: Partial<UserProfile>, meta: FormUpdateMeta<UserProfile>) => {\n      for (const [path, changed] of Object.entries(meta.changed)) {\n        if (changed) {\n          switch (path) {\n            case 'displayName':\n              setDisplayNameDirectly(profile.displayName ?? '');\n              break;\n            case 'emoji':\n              setEmojiDirectly(profile.emoji ?? getDefaultEmojiValue(identity));\n              break;\n            case 'hue':\n              setHueDirectly(profile.hue ?? getDefaultHueValue(identity));\n              break;\n            default:\n              break;\n          }\n        }\n      }\n\n      void updateProfile(profile);\n    },\n    [identity],\n  );\n\n  const values = useMemo(\n    () => ({\n      did: identity?.did,\n      displayName,\n      emoji,\n      hue,\n    }),\n    [identity, displayName, emoji, hue],\n  );\n\n  // TODO(wittjosiah): Integrate descriptions with the form schema.\n  const fieldMap = useMemo<FormFieldMap>(\n    () => ({\n      displayName: ({ type, label, getValue, onValueChange }) => {\n        const handleChange = useCallback(\n          ({ target: { value } }: ChangeEvent<HTMLInputElement>) => onValueChange(type, value),\n          [onValueChange, type],\n        );\n\n        return (\n          <Form.Row label={label} description={t('display-name.description')}>\n            <Input.Root>\n              <Input.TextInput\n                value={getValue()}\n                onChange={handleChange}\n                placeholder={t('display-name-input.placeholder')}\n                classNames='min-w-64'\n              />\n            </Input.Root>\n          </Form.Row>\n        );\n      },\n      emoji: ({ type, label, getValue, onValueChange }) => {\n        const handleChange = useCallback((nextEmoji: string) => onValueChange(type, nextEmoji), [onValueChange, type]);\n        const handleEmojiReset = useCallback(\n          () => onValueChange(type, getDefaultEmojiValue(identity)),\n          [onValueChange, type],\n        );\n\n        return (\n          <Form.Row label={label} description={t('icon.description')}>\n            <EmojiPickerBlock\n              triggerVariant='default'\n              emoji={getValue()}\n              onChangeEmoji={handleChange}\n              onClickClear={handleEmojiReset}\n              classNames='justify-self-end'\n            />\n          </Form.Row>\n        );\n      },\n      hue: ({ type, label, getValue, onValueChange }) => {\n        const handleChange = useCallback((nextHue: string) => onValueChange(type, nextHue), [onValueChange, type]);\n        const handleHueReset = useCallback(\n          () => onValueChange(type, getDefaultHueValue(identity)),\n          [onValueChange, type],\n        );\n\n        return (\n          <Form.Row label={label} description={t('hue.description')}>\n            <div className='flex justify-self-end'>\n              <HuePicker value={getValue()} onChange={handleChange} onReset={handleHueReset} />\n            </div>\n          </Form.Row>\n        );\n      },\n      // TODO(wittjosiah): We need text input annotations for disabled and copyable.\n      did: ({ label, getValue }) => {\n        return (\n          <Form.Row label={label} description={t('did.description')}>\n            <Input.Root>\n              <ButtonGroup classNames='w-full'>\n                <Input.TextInput value={getValue()} disabled classNames='min-w-64' />\n                <Clipboard.IconButton value={getValue() ?? ''} />\n              </ButtonGroup>\n            </Input.Root>\n          </Form.Row>\n        );\n      },\n    }),\n    [t],\n  );\n\n  return (\n    <Clipboard.Provider>\n      <Form.Root\n        variant='settings'\n        schema={UserProfile}\n        values={values}\n        fieldMap={fieldMap}\n        onValuesChanged={handleChange}\n      >\n        <Form.Viewport scroll>\n          <Form.Content>\n            <Form.Section title={t('profile.label')} description={t('profile.description')}>\n              <Form.FieldSet />\n            </Form.Section>\n          </Form.Content>\n        </Form.Viewport>\n      </Form.Root>\n    </Clipboard.Provider>\n  );\n};\n"],
+  "mappings": "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",
+  "names": ["Schema", "React", "useCallback", "useMemo", "useState", "debounce", "useClient", "useIdentity", "ButtonGroup", "Clipboard", "Input", "useTranslation", "Form", "EmojiPickerBlock", "HuePicker", "hexToEmoji", "hexToHue", "meta", "UserProfile", "Struct", "did", "String", "annotations", "title", "displayName", "emoji", "hue", "getDefaultHueValue", "identity", "identityKey", "toHex", "getHueValue", "profile", "data", "getDefaultEmojiValue", "getEmojiValue", "ProfileContainer", "t", "key", "client", "setDisplayNameDirectly", "setEmojiDirectly", "setHueDirectly", "updateProfile", "halo", "handleChange", "path", "changed", "Object", "entries", "values", "fieldMap", "type", "label", "getValue", "onValueChange", "target", "value", "Row", "description", "Root", "TextInput", "onChange", "placeholder", "classNames", "nextEmoji", "handleEmojiReset", "triggerVariant", "onChangeEmoji", "onClickClear", "nextHue", "handleHueReset", "div", "className", "onReset", "disabled", "IconButton", "Provider", "variant", "schema", "onValuesChanged", "Viewport", "scroll", "Content", "Section", "FieldSet"]
+}

package/dist/lib/neutral/{RecoveryCodeDialog-EWHB6U5T.mjs → RecoveryCodeDialog-7EPNKCLB.mjs}

@@ -5,7 +5,7 @@ import React, { useCallback, useState } from "react";
 import { AlertDialog, Button, Clipboard, Input, useTranslation } from "@dxos/react-ui";
 import { meta } from "#meta";
 var RecoveryCodeDialog = ({ code }) => {
-  const { t } = useTranslation(meta.id);
+  const { t } = useTranslation(meta.profile.key);
   const [confirmation, setConfirmation] = useState(false);
   const handleConfirmation = useCallback((checked) => setConfirmation(checked), []);
   return /* @__PURE__ */ React.createElement(AlertDialog.Content, {
@@ -56,4 +56,4 @@ export {
   RecoveryCodeDialog,
   RecoveryCodeDialog_default as default
 };
-//# sourceMappingURL=RecoveryCodeDialog-EWHB6U5T.mjs.map
+//# sourceMappingURL=RecoveryCodeDialog-7EPNKCLB.mjs.map

package/dist/lib/neutral/RecoveryCodeDialog-7EPNKCLB.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/containers/RecoveryCodeDialog/RecoveryCodeDialog.tsx", "../../../src/containers/RecoveryCodeDialog/index.ts"],
+  "sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport React, { useCallback, useState } from 'react';\n\nimport { AlertDialog, Button, Clipboard, Input, useTranslation } from '@dxos/react-ui';\n\nimport { meta } from '#meta';\n\nexport type RecoveryCodeDialogProps = {\n  code: string;\n};\n\n// TODO(burdon): Should have cancel button.\nexport const RecoveryCodeDialog = ({ code }: RecoveryCodeDialogProps) => {\n  const { t } = useTranslation(meta.profile.key);\n  const [confirmation, setConfirmation] = useState(false);\n\n  const handleConfirmation = useCallback((checked: boolean) => setConfirmation(checked), []);\n\n  return (\n    <AlertDialog.Content size='md' classNames='min-h-[15rem]'>\n      <AlertDialog.Body>\n        <AlertDialog.Title>{t('recovery-code-dialog.title')}</AlertDialog.Title>\n        <AlertDialog.Description classNames='py-4'>{t('recovery-code-dialog.description')}</AlertDialog.Description>\n        <Clipboard.Provider>\n          <Code code={code} />\n        </Clipboard.Provider>\n        <div className='flex flex-col py-4 gap-2'>\n          <p>{t('recovery-code-dialog-warning-1.message')}</p>\n          <p>{t('recovery-code-dialog-warning-2.message')}</p>\n        </div>\n        <div className='flex items-center gap-2 pb-4'>\n          <Input.Root>\n            <Input.Checkbox\n              data-testid='recoveryCode.confirm'\n              checked={confirmation}\n              onCheckedChange={handleConfirmation}\n            />\n            <Input.Label>{t('recovery-code-confirmation.label')}</Input.Label>\n          </Input.Root>\n        </div>\n      </AlertDialog.Body>\n      <AlertDialog.ActionBar>\n        <AlertDialog.Action asChild>\n          <Button data-testid='recoveryCode.continue' variant='primary' disabled={!confirmation}>\n            {t('continue.label')}\n          </Button>\n        </AlertDialog.Action>\n      </AlertDialog.ActionBar>\n    </AlertDialog.Content>\n  );\n};\n\nconst Code = ({ code }: { code: string }) => {\n  const words = code.split(' ');\n  return (\n    <div className='relative p-2 border border-separator rounded-sm group'>\n      <Clipboard.IconButton value={code} classNames='absolute top-2 right-2 invisible group-hover:visible' />\n      <div className='grid grid-cols-4'>\n        {words.map((word, i) => (\n          <div key={i} className='flex items-center p-2 gap-2'>\n            <div className='w-4 text-xs text-center text-subdued'>{i + 1}</div>\n            <div className='text-sm'>{word}</div>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n};\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport { RecoveryCodeDialog } from './RecoveryCodeDialog';\n\nexport * from './RecoveryCodeDialog';\nexport default RecoveryCodeDialog;\n"],
+  "mappings": ";;;AAIA,OAAOA,SAASC,aAAaC,gBAAgB;AAE7C,SAASC,aAAaC,QAAQC,WAAWC,OAAOC,sBAAsB;AAEtE,SAASC,YAAY;AAOd,IAAMC,qBAAqB,CAAC,EAAEC,KAAI,MAA2B;AAClE,QAAM,EAAEC,EAAC,IAAKJ,eAAeC,KAAKI,QAAQC,GAAG;AAC7C,QAAM,CAACC,cAAcC,eAAAA,IAAmBb,SAAS,KAAA;AAEjD,QAAMc,qBAAqBf,YAAY,CAACgB,YAAqBF,gBAAgBE,OAAAA,GAAU,CAAA,CAAE;AAEzF,SACE,sBAAA,cAACd,YAAYe,SAAO;IAACC,MAAK;IAAKC,YAAW;KACxC,sBAAA,cAACjB,YAAYkB,MAAI,MACf,sBAAA,cAAClB,YAAYmB,OAAK,MAAEX,EAAE,4BAAA,CAAA,GACtB,sBAAA,cAACR,YAAYoB,aAAW;IAACH,YAAW;KAAQT,EAAE,kCAAA,CAAA,GAC9C,sBAAA,cAACN,UAAUmB,UAAQ,MACjB,sBAAA,cAACC,MAAAA;IAAKf;OAER,sBAAA,cAACgB,OAAAA;IAAIC,WAAU;KACb,sBAAA,cAACC,KAAAA,MAAGjB,EAAE,wCAAA,CAAA,GACN,sBAAA,cAACiB,KAAAA,MAAGjB,EAAE,wCAAA,CAAA,CAAA,GAER,sBAAA,cAACe,OAAAA;IAAIC,WAAU;KACb,sBAAA,cAACrB,MAAMuB,MAAI,MACT,sBAAA,cAACvB,MAAMwB,UAAQ;IACbC,eAAY;IACZd,SAASH;IACTkB,iBAAiBhB;MAEnB,sBAAA,cAACV,MAAM2B,OAAK,MAAEtB,EAAE,kCAAA,CAAA,CAAA,CAAA,CAAA,GAItB,sBAAA,cAACR,YAAY+B,WAAS,MACpB,sBAAA,cAAC/B,YAAYgC,QAAM;IAACC,SAAAA;KAClB,sBAAA,cAAChC,QAAAA;IAAO2B,eAAY;IAAwBM,SAAQ;IAAUC,UAAU,CAACxB;KACtEH,EAAE,gBAAA,CAAA,CAAA,CAAA,CAAA;AAMf;AAEA,IAAMc,OAAO,CAAC,EAAEf,KAAI,MAAoB;AACtC,QAAM6B,QAAQ7B,KAAK8B,MAAM,GAAA;AACzB,SACE,sBAAA,cAACd,OAAAA;IAAIC,WAAU;KACb,sBAAA,cAACtB,UAAUoC,YAAU;IAACC,OAAOhC;IAAMU,YAAW;MAC9C,sBAAA,cAACM,OAAAA;IAAIC,WAAU;KACZY,MAAMI,IAAI,CAACC,MAAMC,MAChB,sBAAA,cAACnB,OAAAA;IAAIb,KAAKgC;IAAGlB,WAAU;KACrB,sBAAA,cAACD,OAAAA;IAAIC,WAAU;KAAwCkB,IAAI,CAAA,GAC3D,sBAAA,cAACnB,OAAAA;IAAIC,WAAU;KAAWiB,IAAAA,CAAAA,CAAAA,CAAAA,CAAAA;AAMtC;;;AC/DA,IAAA,6BAAeE;",
+  "names": ["React", "useCallback", "useState", "AlertDialog", "Button", "Clipboard", "Input", "useTranslation", "meta", "RecoveryCodeDialog", "code", "t", "profile", "key", "confirmation", "setConfirmation", "handleConfirmation", "checked", "Content", "size", "classNames", "Body", "Title", "Description", "Provider", "Code", "div", "className", "p", "Root", "Checkbox", "data-testid", "onCheckedChange", "Label", "ActionBar", "Action", "asChild", "variant", "disabled", "words", "split", "IconButton", "value", "map", "word", "i", "RecoveryCodeDialog"]
+}