@dxos/plugin-client 0.8.4-main.70d3990 → 0.8.4-main.7996785055

package/dist/lib/browser/DevicesContainer-6AMXWDQC.mjs

@@ -0,0 +1,270 @@
+import "./chunk-RGQBPDPU.mjs";
+import {
+  definitions_exports
+} from "./chunk-5JMLFUGB.mjs";
+import {
+  meta
+} from "./chunk-JHSBBOCI.mjs";
+import "./chunk-J5LGTIGS.mjs";
+
+// src/containers/DevicesContainer/DevicesContainer.tsx
+import React, { useCallback, useEffect, useState } from "react";
+import { QR } from "react-qr-rounded";
+import { useOperationInvoker } from "@dxos/app-framework/ui";
+import { log } from "@dxos/log";
+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 { AuthCode, Centered, DeviceListItem, Emoji, Viewport, translationKey } from "@dxos/shell/react";
+import { osTranslations } from "@dxos/ui-theme";
+import { hexToEmoji } from "@dxos/util";
+var __dxlog_file = "/__w/dxos/dxos/packages/plugins/plugin-client/src/containers/DevicesContainer/DevicesContainer.tsx";
+var DevicesContainer = ({ createInvitationUrl }) => {
+  const { t } = useTranslation(translationKey);
+  const { invokePromise } = useOperationInvoker();
+  const devices = useDevices();
+  const { swarm: connectionState } = useNetworkStatus();
+  const handleResetStorage = useCallback(() => invokePromise(definitions_exports.ResetStorage, {}), [
+    invokePromise
+  ]);
+  const handleRecover = useCallback(() => invokePromise(definitions_exports.ResetStorage, {
+    mode: "recover"
+  }), [
+    invokePromise
+  ]);
+  const handleJoinNewIdentity = useCallback(() => invokePromise(definitions_exports.ResetStorage, {
+    mode: "join new identity"
+  }), [
+    invokePromise
+  ]);
+  return /* @__PURE__ */ React.createElement(Clipboard.Provider, null, /* @__PURE__ */ React.createElement(Settings.Root, null, /* @__PURE__ */ React.createElement(Settings.Section, {
+    title: t("devices verbose label", {
+      ns: meta.id
+    }),
+    description: t("devices description", {
+      ns: meta.id
+    })
+  }, /* @__PURE__ */ React.createElement(Settings.Frame, null, /* @__PURE__ */ React.createElement(Settings.FrameItem, {
+    title: t("devices label", {
+      ns: meta.id
+    })
+  }, /* @__PURE__ */ React.createElement(List, null, devices.map((device) => /* @__PURE__ */ React.createElement(DeviceListItem, {
+    key: device.deviceKey.toHex(),
+    device,
+    connectionState
+  })))), createInvitationUrl && /* @__PURE__ */ React.createElement(Settings.FrameItem, {
+    title: "Add device"
+  }, /* @__PURE__ */ React.createElement(DeviceInvitation, {
+    createInvitationUrl
+  })))), /* @__PURE__ */ React.createElement(Settings.Section, {
+    title: t("danger zone title", {
+      ns: meta.id
+    }),
+    description: t("danger zone description", {
+      ns: meta.id
+    })
+  }, /* @__PURE__ */ React.createElement(Settings.Group, null, /* @__PURE__ */ React.createElement(Settings.Item, {
+    title: t("reset device label"),
+    description: t("reset device description", {
+      ns: meta.id
+    })
+  }, /* @__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"),
+    description: t("recover identity description", {
+      ns: meta.id
+    })
+  }, /* @__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"),
+    description: t("join new identity description", {
+      ns: meta.id
+    })
+  }, /* @__PURE__ */ React.createElement(Button, {
+    variant: "destructive",
+    onClick: handleJoinNewIdentity,
+    "data-testid": "devicesContainer.joinExisting"
+  }, t("join new identity label")))))));
+};
+var DeviceInvitation = (props) => {
+  const client = useClient();
+  const [invitation, setInvitation] = useState();
+  const onInvitationCreate = useCallback(() => {
+    const invitation2 = client.halo.share();
+    if (client.config.values.runtime?.app?.env?.DX_ENVIRONMENT !== "production") {
+      const subscription = invitation2.subscribe((invitation3) => {
+        const invitationCode = InvitationEncoder.encode(invitation3);
+        if (invitation3.state === Invitation.State.CONNECTING) {
+          log.info(JSON.stringify({
+            invitationCode,
+            authCode: invitation3.authCode
+          }), void 0, {
+            F: __dxlog_file,
+            L: 117,
+            S: void 0,
+            C: (f, a) => f(...a)
+          });
+          subscription.unsubscribe();
+        }
+      });
+    }
+    setInvitation(invitation2);
+  }, [
+    client
+  ]);
+  const onInvitationDone = useCallback(() => {
+    setInvitation(void 0);
+  }, []);
+  if (invitation) {
+    return /* @__PURE__ */ React.createElement(DeviceInvitationImpl, {
+      ...props,
+      invitation,
+      onInvitationCreate,
+      onInvitationDone
+    });
+  } else {
+    return /* @__PURE__ */ React.createElement(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__ */ React.createElement(InvitationSection, {
+    ...invitation,
+    url,
+    onInvitationDone,
+    onInvitationCreate
+  });
+};
+var InvitationSection = ({ state = -1, authCode, invitationId = "never", url = "never", onInvitationDone = () => {
+}, onInvitationCreate = () => {
+} }) => {
+  const { t } = useTranslation(meta.id);
+  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"
+  }, t("add device description")), /* @__PURE__ */ React.createElement(IconButton, {
+    icon: "ph--plus--regular",
+    label: t("create device invitation label"),
+    disabled: state >= 0,
+    classNames: "w-full",
+    "data-testid": "devicesContainer.createInvitation",
+    onClick: onInvitationCreate
+  })) : /* @__PURE__ */ React.createElement(Viewport.Root, {
+    activeView
+  }, /* @__PURE__ */ React.createElement(Viewport.Views, null, /* @__PURE__ */ React.createElement(Viewport.View, {
+    id: "init"
+  }), /* @__PURE__ */ React.createElement(Viewport.View, {
+    id: "complete"
+  }, /* @__PURE__ */ React.createElement(InvitationComplete, {
+    statusValue: state
+  })), /* @__PURE__ */ React.createElement(Viewport.View, {
+    id: "auth-code"
+  }, /* @__PURE__ */ React.createElement(InvitationAuthCode, {
+    id: invitationId,
+    code: authCode ?? "never",
+    onCancel: onInvitationDone
+  })), /* @__PURE__ */ React.createElement(Viewport.View, {
+    id: "qr-code"
+  }, /* @__PURE__ */ React.createElement(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__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("p", {
+    className: "text-description"
+  }, t("qr code description", {
+    ns: meta.id
+  })), /* @__PURE__ */ React.createElement("div", {
+    role: "group",
+    className: "grid grid-cols-[1fr_min-content]"
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: "flex justify-center py-4"
+  }, /* @__PURE__ */ React.createElement("div", {
+    role: "none",
+    className: "w-full md:max-w-80 aspect-square relative text-description"
+  }, /* @__PURE__ */ React.createElement(QR, {
+    rounding: 100,
+    backgroundColor: "transparent",
+    color: "currentColor",
+    "aria-labelledby": qrLabel,
+    errorCorrectionLevel: "Q",
+    cutout: true
+  }, url ?? "never"), /* @__PURE__ */ React.createElement(Centered, null, /* @__PURE__ */ React.createElement(Emoji, {
+    text: emoji
+  })))), /* @__PURE__ */ React.createElement("span", {
+    id: qrLabel,
+    className: "sr-only"
+  }, t("qr label"))), /* @__PURE__ */ React.createElement("div", {
+    className: "flex justify-center"
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: "flex gap-2"
+  }, /* @__PURE__ */ React.createElement(Clipboard.Button, {
+    value: url ?? "never"
+  }), /* @__PURE__ */ React.createElement(Button, {
+    variant: "ghost",
+    onClick: onCancel
+  }, t("cancel label")))));
+};
+var InvitationAuthCode = ({ id, code, onCancel }) => {
+  const { t } = useTranslation(osTranslations);
+  const emoji = hexToEmoji(id);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("p", {
+    className: "text-description"
+  }, t("auth other device emoji message")), emoji && /* @__PURE__ */ React.createElement(Emoji, {
+    text: emoji,
+    className: "mx-auto my-2 text-center"
+  }), /* @__PURE__ */ React.createElement("p", {
+    className: "text-description"
+  }, t("auth code message")), /* @__PURE__ */ React.createElement(AuthCode, {
+    code,
+    large: true,
+    classNames: "mx-auto my-2 text-center grow"
+  }), /* @__PURE__ */ React.createElement(Button, {
+    variant: "ghost",
+    onClick: onCancel
+  }, t("cancel label")));
+};
+var InvitationComplete = ({ statusValue }) => {
+  return statusValue > 0 ? /* @__PURE__ */ React.createElement(Icon, {
+    icon: "ph--check--regular",
+    size: 6,
+    classNames: "m-1.5"
+  }) : /* @__PURE__ */ React.createElement(Icon, {
+    icon: "ph--x--regular",
+    size: 6,
+    classNames: "m-1.5"
+  });
+};
+
+// src/containers/DevicesContainer/index.ts
+var DevicesContainer_default = DevicesContainer;
+export {
+  DevicesContainer_default as default
+};
+//# sourceMappingURL=DevicesContainer-6AMXWDQC.mjs.map

package/dist/lib/browser/DevicesContainer-6AMXWDQC.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/containers/DevicesContainer/DevicesContainer.tsx", "../../../src/containers/DevicesContainer/index.ts"],
+  "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, List, useId, useTranslation } from '@dxos/react-ui';\nimport { Settings } from '@dxos/react-ui-form';\nimport { AuthCode, Centered, DeviceListItem, Emoji, Viewport, translationKey } 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(translationKey);\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      <Settings.Root>\n        <Settings.Section\n          title={t('devices verbose label', { ns: meta.id })}\n          description={t('devices description', { ns: meta.id })}\n        >\n          <Settings.Frame>\n            <Settings.FrameItem title={t('devices label', { ns: meta.id })}>\n              <List>\n                {devices.map((device: Device) => (\n                  <DeviceListItem key={device.deviceKey.toHex()} device={device} connectionState={connectionState} />\n                ))}\n              </List>\n            </Settings.FrameItem>\n            {createInvitationUrl && (\n              <Settings.FrameItem title='Add device'>\n                <DeviceInvitation createInvitationUrl={createInvitationUrl} />\n              </Settings.FrameItem>\n            )}\n          </Settings.Frame>\n        </Settings.Section>\n        <Settings.Section\n          title={t('danger zone title', { ns: meta.id })}\n          description={t('danger zone description', { ns: meta.id })}\n        >\n          <Settings.Group>\n            <Settings.Item title={t('reset device label')} description={t('reset device description', { ns: meta.id })}>\n              <Button variant='destructive' onClick={handleResetStorage} data-testid='devicesContainer.reset'>\n                {t('reset device label')}\n              </Button>\n            </Settings.Item>\n            <Settings.Item\n              title={t('recover identity label')}\n              description={t('recover identity description', { ns: meta.id })}\n            >\n              <Button variant='destructive' onClick={handleRecover} data-testid='devicesContainer.recover'>\n                {t('recover identity label')}\n              </Button>\n            </Settings.Item>\n            <Settings.Item\n              title={t('join new identity label')}\n              description={t('join new identity description', { ns: meta.id })}\n            >\n              <Button variant='destructive' onClick={handleJoinNewIdentity} data-testid='devicesContainer.joinExisting'>\n                {t('join new identity label')}\n              </Button>\n            </Settings.Item>\n          </Settings.Group>\n        </Settings.Section>\n      </Settings.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.id);\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.id })}</p>\n      <div role='group' className='grid grid-cols-[1fr_min-content]'>\n        <div className='flex justify-center py-4'>\n          <div role='none' 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", "//\n// Copyright 2025 DXOS.org\n//\n\nimport { DevicesContainer } from './DevicesContainer';\n\nexport default DevicesContainer;\n"],
+  "mappings": "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",
+  "names": ["React", "useCallback", "useEffect", "useState", "QR", "useOperationInvoker", "log", "useClient", "useMulticastObservable", "useDevices", "Invitation", "InvitationEncoder", "useNetworkStatus", "Button", "Clipboard", "Icon", "IconButton", "List", "useId", "useTranslation", "Settings", "AuthCode", "Centered", "DeviceListItem", "Emoji", "Viewport", "translationKey", "osTranslations", "hexToEmoji", "DevicesContainer", "createInvitationUrl", "t", "useTranslation", "translationKey", "invokePromise", "useOperationInvoker", "devices", "useDevices", "swarm", "connectionState", "useNetworkStatus", "handleResetStorage", "useCallback", "ClientOperation", "ResetStorage", "handleRecover", "mode", "handleJoinNewIdentity", "Clipboard", "Provider", "Settings", "Root", "Section", "title", "ns", "meta", "id", "description", "Frame", "FrameItem", "List", "map", "device", "DeviceListItem", "key", "deviceKey", "toHex", "DeviceInvitation", "Group", "Item", "Button", "variant", "onClick", "data-testid", "props", "client", "useClient", "invitation", "setInvitation", "useState", "onInvitationCreate", "halo", "share", "config", "values", "runtime", "app", "env", "DX_ENVIRONMENT", "subscription", "subscribe", "invitationCode", "InvitationEncoder", "encode", "state", "Invitation", "State", "CONNECTING", "log", "info", "JSON", "stringify", "authCode", "unsubscribe", "onInvitationDone", "undefined", "DeviceInvitationImpl", "InvitationSection", "invitationObservable", "useMulticastObservable", "url", "useEffect", "SUCCESS", "invitationId", "activeView", "CANCELLED", "READY_FOR_AUTHENTICATION", "p", "className", "IconButton", "icon", "label", "disabled", "classNames", "Viewport", "Views", "View", "InvitationComplete", "statusValue", "InvitationAuthCode", "code", "onCancel", "InvitationQR", "osTranslations", "qrLabel", "useId", "emoji", "hexToEmoji", "div", "role", "QR", "rounding", "backgroundColor", "color", "aria-labelledby", "errorCorrectionLevel", "cutout", "Centered", "Emoji", "text", "span", "value", "AuthCode", "large", "Icon", "size", "DevicesContainer"]
+}

package/dist/lib/browser/JoinDialog-V6E5PRDR.mjs

@@ -0,0 +1,61 @@
+import "./chunk-RGQBPDPU.mjs";
+import {
+  definitions_exports
+} from "./chunk-5JMLFUGB.mjs";
+import {
+  meta
+} from "./chunk-JHSBBOCI.mjs";
+import "./chunk-J5LGTIGS.mjs";
+
+// src/containers/JoinDialog/JoinDialog.tsx
+import React, { useCallback } from "react";
+import { useOperationInvoker } from "@dxos/app-framework/ui";
+import { LayoutOperation } from "@dxos/app-toolkit";
+import { ObservabilityOperation } from "@dxos/plugin-observability/operations";
+import { Dialog, useTranslation } from "@dxos/react-ui";
+import { JoinPanel } from "@dxos/shell/react";
+import { osTranslations } from "@dxos/ui-theme";
+var JoinDialog = (props) => {
+  const { invokePromise } = useOperationInvoker();
+  const { t } = useTranslation(meta.id);
+  const handleCancelResetStorage = useCallback(() => invokePromise(definitions_exports.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__ */ React.createElement(Dialog.Content, null, /* @__PURE__ */ React.createElement(Dialog.Header, null, /* @__PURE__ */ React.createElement(Dialog.Title, {
+    classNames: "sr-only"
+  }, t("join space label", {
+    ns: osTranslations
+  }))), /* @__PURE__ */ React.createElement(Dialog.Body, null, /* @__PURE__ */ React.createElement(JoinPanel, {
+    ...props,
+    mode: "halo-only",
+    exitActionParent: /* @__PURE__ */ React.createElement(Dialog.Close, {
+      asChild: true
+    }),
+    doneActionParent: /* @__PURE__ */ React.createElement(Dialog.Close, {
+      asChild: true
+    }),
+    onCancelResetStorage: handleCancelResetStorage,
+    onDone: handleDone
+  })));
+};
+
+// src/containers/JoinDialog/index.ts
+var JoinDialog_default = JoinDialog;
+export {
+  JoinDialog_default as default
+};
+//# sourceMappingURL=JoinDialog-V6E5PRDR.mjs.map

package/dist/lib/browser/JoinDialog-V6E5PRDR.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/containers/JoinDialog/JoinDialog.tsx", "../../../src/containers/JoinDialog/index.ts"],
+  "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/operations';\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.id);\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", "//\n// Copyright 2025 DXOS.org\n//\n\nimport { JoinDialog } from './JoinDialog';\n\nexport default JoinDialog;\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;AAKxB,IAAMC,aAAa,CAACC,UAAAA;AACzB,QAAM,EAAEC,cAAa,IAAKC,oBAAAA;AAC1B,QAAM,EAAEC,EAAC,IAAKC,eAAeC,KAAKC,EAAE;AAEpC,QAAMC,2BAA2BC,YAAY,MAAMP,cAAcQ,oBAAgBC,aAAa,GAAG;IAACT;GAAc;AAEhH,QAAMU,aAAaH,YACjB,OAAOI,WAAAA;AACL,QAAIA,QAAQC,aAAa;AACvB,YAAMC,QAAQC,IAAI;QAChBd,cAAce,gBAAgBC,cAAc;UAAEC,OAAO;QAAM,CAAA;QAC3DjB,cAAckB,uBAAuBC,WAAW;UAC9CC,MAAMrB,MAAMsB,uBAAuB,qBAAqB,qBAAqB;QAC/E,CAAA;OACD;IACH;EACF,GACA;IAACrB;GAAc;AAIjB,SACE,sBAAA,cAACsB,OAAOC,SAAO,MACb,sBAAA,cAACD,OAAOE,QAAM,MACZ,sBAAA,cAACF,OAAOG,OAAK;IAACC,YAAW;KAAWxB,EAAE,oBAAoB;IAAEyB,IAAIC;EAAe,CAAA,CAAA,CAAA,GAEjF,sBAAA,cAACN,OAAOO,MAAI,MACV,sBAAA,cAACC,WAAAA;IACE,GAAG/B;IACJgC,MAAK;IACLC,kBAAkB,sBAAA,cAACV,OAAOW,OAAK;MAACC,SAAAA;;IAChCC,kBAAkB,sBAAA,cAACb,OAAOW,OAAK;MAACC,SAAAA;;IAChCE,sBAAsB9B;IACtB+B,QAAQ3B;;AAKlB;;;ACjDA,IAAA,qBAAe4B;",
+  "names": ["React", "useCallback", "useOperationInvoker", "LayoutOperation", "ObservabilityOperation", "Dialog", "useTranslation", "JoinPanel", "osTranslations", "JoinDialog", "props", "invokePromise", "useOperationInvoker", "t", "useTranslation", "meta", "id", "handleCancelResetStorage", "useCallback", "ClientOperation", "ShareIdentity", "handleDone", "result", "identityKey", "Promise", "all", "LayoutOperation", "UpdateDialog", "state", "ObservabilityOperation", "SendEvent", "name", "initialDisposition", "Dialog", "Content", "Header", "Title", "classNames", "ns", "osTranslations", "Body", "JoinPanel", "mode", "exitActionParent", "Close", "asChild", "doneActionParent", "onCancelResetStorage", "onDone", "JoinDialog"]
+}

package/dist/lib/browser/ProfileContainer-NY67SRMY.mjs

@@ -0,0 +1,172 @@
+import {
+  meta
+} from "./chunk-JHSBBOCI.mjs";
+import "./chunk-J5LGTIGS.mjs";
+
+// src/containers/ProfileContainer/ProfileContainer.tsx
+import * as Schema from "effect/Schema";
+import React, { useCallback, useMemo, useState } from "react";
+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 { EmojiPickerBlock, HuePicker } from "@dxos/react-ui-pickers";
+import { hexToEmoji, hexToHue } from "@dxos/util";
+var UserProfile = Schema.Struct({
+  did: Schema.String.annotations({
+    title: "DID"
+  }),
+  displayName: Schema.String.annotations({
+    title: "Display name"
+  }),
+  emoji: Schema.String.annotations({
+    title: "Avatar"
+  }),
+  hue: Schema.String.annotations({
+    title: "Color"
+  })
+});
+var getDefaultHueValue = (identity) => hexToHue(identity?.identityKey.toHex() ?? "0");
+var getHueValue = (identity) => identity?.profile?.data?.hue || getDefaultHueValue(identity);
+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 client = useClient();
+  const identity = useIdentity();
+  const [displayName, setDisplayNameDirectly] = useState(identity?.profile?.displayName ?? "");
+  const [emoji, setEmojiDirectly] = useState(getEmojiValue(identity));
+  const [hue, setHueDirectly] = useState(getHueValue(identity));
+  const updateProfile = useMemo(() => debounce((profile) => client.halo.updateProfile({
+    displayName: profile.displayName,
+    data: {
+      emoji: profile.emoji,
+      hue: profile.hue
+    }
+  }), 2e3), []);
+  const handleChange = useCallback((profile, meta2) => {
+    for (const [path, changed] of Object.entries(meta2.changed)) {
+      if (changed) {
+        switch (path) {
+          case "displayName":
+            setDisplayNameDirectly(profile.displayName ?? "");
+            break;
+          case "emoji":
+            setEmojiDirectly(profile.emoji ?? getDefaultEmojiValue(identity));
+            break;
+          case "hue":
+            setHueDirectly(profile.hue ?? getDefaultHueValue(identity));
+            break;
+          default:
+            break;
+        }
+      }
+    }
+    void updateProfile(profile);
+  }, [
+    identity
+  ]);
+  const values = useMemo(() => ({
+    did: identity?.did,
+    displayName,
+    emoji,
+    hue
+  }), [
+    identity,
+    displayName,
+    emoji,
+    hue
+  ]);
+  const fieldMap = useMemo(() => ({
+    displayName: ({ type, label, getValue, onValueChange }) => {
+      const handleChange2 = useCallback(({ target: { value } }) => onValueChange(type, value), [
+        onValueChange,
+        type
+      ]);
+      return /* @__PURE__ */ React.createElement(Settings.ItemInput, {
+        title: label,
+        description: t("display name description")
+      }, /* @__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), [
+        onValueChange,
+        type
+      ]);
+      const handleEmojiReset = useCallback(() => onValueChange(type, getDefaultEmojiValue(identity)), [
+        onValueChange,
+        type
+      ]);
+      return /* @__PURE__ */ React.createElement(Settings.Item, {
+        title: label,
+        description: t("icon description")
+      }, /* @__PURE__ */ React.createElement(EmojiPickerBlock, {
+        triggerVariant: "default",
+        emoji: getValue(),
+        onChangeEmoji: handleChange2,
+        onClickClear: handleEmojiReset,
+        classNames: "justify-self-end"
+      }));
+    },
+    hue: ({ type, label, getValue, onValueChange }) => {
+      const handleChange2 = useCallback((nextHue) => onValueChange(type, nextHue), [
+        onValueChange,
+        type
+      ]);
+      const handleHueReset = useCallback(() => onValueChange(type, getDefaultHueValue(identity)), [
+        onValueChange,
+        type
+      ]);
+      return /* @__PURE__ */ React.createElement(Settings.Item, {
+        title: label,
+        description: t("hue description")
+      }, /* @__PURE__ */ React.createElement("div", {
+        role: "none",
+        className: "flex justify-self-end"
+      }, /* @__PURE__ */ React.createElement(HuePicker, {
+        value: getValue(),
+        onChange: handleChange2,
+        onReset: handleHueReset
+      })));
+    },
+    // TODO(wittjosiah): We need text input annotations for disabled and copyable.
+    did: ({ label, getValue }) => {
+      return /* @__PURE__ */ React.createElement(Settings.ItemInput, {
+        title: label,
+        description: t("did description")
+      }, /* @__PURE__ */ React.createElement(ButtonGroup, {
+        classNames: "w-full"
+      }, /* @__PURE__ */ React.createElement(Input.TextInput, {
+        value: getValue(),
+        disabled: true,
+        classNames: "min-w-64"
+      }), /* @__PURE__ */ React.createElement(Clipboard.IconButton, {
+        value: getValue() ?? ""
+      })));
+    }
+  }), [
+    t
+  ]);
+  return /* @__PURE__ */ React.createElement(Clipboard.Provider, null, /* @__PURE__ */ React.createElement(Settings.Root, null, /* @__PURE__ */ React.createElement(Settings.Section, {
+    title: t("profile label"),
+    description: t("profile description")
+  }, /* @__PURE__ */ React.createElement(Form.Root, {
+    schema: UserProfile,
+    values,
+    fieldMap,
+    onValuesChanged: handleChange
+  }, /* @__PURE__ */ React.createElement(Form.Content, null, /* @__PURE__ */ React.createElement(Form.FieldSet, null))))));
+};
+
+// src/containers/ProfileContainer/index.ts
+var ProfileContainer_default = ProfileContainer;
+export {
+  ProfileContainer_default as default
+};
+//# sourceMappingURL=ProfileContainer-NY67SRMY.mjs.map

package/dist/lib/browser/ProfileContainer-NY67SRMY.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/containers/ProfileContainer/ProfileContainer.tsx", "../../../src/containers/ProfileContainer/index.ts"],
+  "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, Settings } 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.id);\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          <Settings.ItemInput title={label} description={t('display name description')}>\n            <Input.TextInput\n              value={getValue()}\n              onChange={handleChange}\n              placeholder={t('display name input placeholder')}\n              classNames='min-w-64'\n            />\n          </Settings.ItemInput>\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          <Settings.Item title={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          </Settings.Item>\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          <Settings.Item title={label} description={t('hue description')}>\n            <div role='none' className='flex justify-self-end'>\n              <HuePicker value={getValue()} onChange={handleChange} onReset={handleHueReset} />\n            </div>\n          </Settings.Item>\n        );\n      },\n      // TODO(wittjosiah): We need text input annotations for disabled and copyable.\n      did: ({ label, getValue }) => {\n        return (\n          <Settings.ItemInput title={label} description={t('did description')}>\n            <ButtonGroup classNames='w-full'>\n              <Input.TextInput value={getValue()} disabled classNames='min-w-64' />\n              <Clipboard.IconButton value={getValue() ?? ''} />\n            </ButtonGroup>\n          </Settings.ItemInput>\n        );\n      },\n    }),\n    [t],\n  );\n\n  return (\n    <Clipboard.Provider>\n      <Settings.Root>\n        <Settings.Section title={t('profile label')} description={t('profile description')}>\n          <Form.Root schema={UserProfile} values={values} fieldMap={fieldMap} onValuesChanged={handleChange}>\n            <Form.Content>\n              <Form.FieldSet />\n            </Form.Content>\n          </Form.Root>\n        </Settings.Section>\n      </Settings.Root>\n    </Clipboard.Provider>\n  );\n};\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport { ProfileContainer } from './ProfileContainer';\n\nexport default ProfileContainer;\n"],
+  "mappings": "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",
+  "names": ["Schema", "React", "useCallback", "useMemo", "useState", "debounce", "useClient", "useIdentity", "ButtonGroup", "Clipboard", "Input", "useTranslation", "Form", "Settings", "EmojiPickerBlock", "HuePicker", "hexToEmoji", "hexToHue", "UserProfile", "Struct", "did", "String", "annotations", "title", "displayName", "emoji", "hue", "getDefaultHueValue", "identity", "hexToHue", "identityKey", "toHex", "getHueValue", "profile", "data", "getDefaultEmojiValue", "hexToEmoji", "getEmojiValue", "ProfileContainer", "t", "useTranslation", "meta", "id", "client", "useClient", "useIdentity", "setDisplayNameDirectly", "useState", "setEmojiDirectly", "setHueDirectly", "updateProfile", "useMemo", "debounce", "halo", "handleChange", "useCallback", "path", "changed", "Object", "entries", "values", "fieldMap", "type", "label", "getValue", "onValueChange", "target", "value", "Settings", "ItemInput", "description", "Input", "TextInput", "onChange", "placeholder", "classNames", "nextEmoji", "handleEmojiReset", "Item", "EmojiPickerBlock", "triggerVariant", "onChangeEmoji", "onClickClear", "nextHue", "handleHueReset", "div", "role", "className", "HuePicker", "onReset", "ButtonGroup", "disabled", "Clipboard", "IconButton", "Provider", "Root", "Section", "Form", "schema", "onValuesChanged", "Content", "FieldSet", "ProfileContainer"]
+}