@dxos/plugin-client 0.8.4-main.3a94e84 → 0.8.4-main.3c1ae3b

package/dist/lib/browser/{app-graph-builder-JNIES5L4.mjs → app-graph-builder-7LBCMPIW.mjs}

@@ -1,27 +1,28 @@
 import {
   ClientCapabilities
-} from "./chunk-3F2Q2RKC.mjs";
+} from "./chunk-UZTC5O5A.mjs";
 import {
   Account,
   ClientAction
-} from "./chunk-RMHBOY3Y.mjs";
+} from "./chunk-RDIG75CA.mjs";
 import {
-  CLIENT_PLUGIN
-} from "./chunk-GS3LDHYD.mjs";
+  meta
+} from "./chunk-ZRVMXLDR.mjs";
 
 // src/capabilities/app-graph-builder.ts
-import { Rx } from "@effect-rx/rx-react";
-import { Option, pipe } from "effect";
+import { Atom } from "@effect-atom/atom-react";
+import * as Function from "effect/Function";
+import * as Option from "effect/Option";
 import { createIntent } from "@dxos/app-framework";
 import { Capabilities, contributes } from "@dxos/app-framework";
-import { createExtension, rxFromObservable, ROOT_ID } from "@dxos/plugin-graph";
+import { ROOT_ID, atomFromObservable, createExtension } from "@dxos/plugin-graph";
 import { ConnectionState } from "@dxos/react-client/mesh";
-var app_graph_builder_default = (context) => contributes(Capabilities.AppGraphBuilder, createExtension({
-  id: CLIENT_PLUGIN,
-  actions: (node) => Rx.make((get) => pipe(get(node), Option.flatMap((node2) => node2.id === ROOT_ID ? Option.some(node2) : Option.none()), Option.map(() => {
+var app_graph_builder_default = ((context) => contributes(Capabilities.AppGraphBuilder, createExtension({
+  id: meta.id,
+  actions: (node) => Atom.make((get) => Function.pipe(get(node), Option.flatMap((node2) => node2.id === ROOT_ID ? Option.some(node2) : Option.none()), Option.map(() => {
     return [
       {
-        id: `${CLIENT_PLUGIN}/open-user-account`,
+        id: `${meta.id}/open-user-account`,
         data: async () => {
           const { dispatchPromise: dispatch } = context.getCapability(Capabilities.IntentDispatcher);
           await dispatch(createIntent(ClientAction.ShareIdentity));
@@ -30,7 +31,7 @@ var app_graph_builder_default = (context) => contributes(Capabilities.AppGraphBu
           label: [
             "open user account label",
             {
-              ns: CLIENT_PLUGIN
+              ns: meta.id
             }
           ],
           icon: "ph--user--regular",
@@ -45,19 +46,19 @@ var app_graph_builder_default = (context) => contributes(Capabilities.AppGraphBu
       }
     ];
   }), Option.getOrElse(() => []))),
-  connector: (node) => Rx.make((get) => pipe(get(node), Option.flatMap((node2) => node2.id === ROOT_ID ? Option.some(node2) : Option.none()), Option.map(() => {
+  connector: (node) => Atom.make((get) => Function.pipe(get(node), Option.flatMap((node2) => node2.id === ROOT_ID ? Option.some(node2) : Option.none()), Option.map(() => {
     const client = context.getCapability(ClientCapabilities.Client);
-    const identity = get(rxFromObservable(client.halo.identity));
-    const status = get(rxFromObservable(client.mesh.networkStatus));
+    const identity = get(atomFromObservable(client.halo.identity));
+    const status = get(atomFromObservable(client.mesh.networkStatus));
     return [
       {
         id: Account.id,
-        type: CLIENT_PLUGIN,
+        type: meta.id,
         properties: {
           label: [
             "account label",
             {
-              ns: CLIENT_PLUGIN
+              ns: meta.id
             }
           ],
           icon: "ph--user--regular",
@@ -72,12 +73,12 @@ var app_graph_builder_default = (context) => contributes(Capabilities.AppGraphBu
           {
             id: Account.Profile,
             data: Account.Profile,
-            type: CLIENT_PLUGIN,
+            type: meta.id,
             properties: {
               label: [
                 "profile label",
                 {
-                  ns: CLIENT_PLUGIN
+                  ns: meta.id
                 }
               ],
               icon: "ph--user--regular"
@@ -86,12 +87,12 @@ var app_graph_builder_default = (context) => contributes(Capabilities.AppGraphBu
           {
             id: Account.Devices,
             data: Account.Devices,
-            type: CLIENT_PLUGIN,
+            type: meta.id,
             properties: {
               label: [
                 "devices label",
                 {
-                  ns: CLIENT_PLUGIN
+                  ns: meta.id
                 }
               ],
               icon: "ph--devices--regular",
@@ -101,12 +102,12 @@ var app_graph_builder_default = (context) => contributes(Capabilities.AppGraphBu
           {
             id: Account.Security,
             data: Account.Security,
-            type: CLIENT_PLUGIN,
+            type: meta.id,
             properties: {
               label: [
                 "security label",
                 {
-                  ns: CLIENT_PLUGIN
+                  ns: meta.id
                 }
               ],
               icon: "ph--key--regular"
@@ -116,8 +117,8 @@ var app_graph_builder_default = (context) => contributes(Capabilities.AppGraphBu
       }
     ];
   }), Option.getOrElse(() => [])))
-}));
+})));
 export {
   app_graph_builder_default as default
 };
-//# sourceMappingURL=app-graph-builder-JNIES5L4.mjs.map
+//# sourceMappingURL=app-graph-builder-7LBCMPIW.mjs.map

package/dist/lib/browser/app-graph-builder-7LBCMPIW.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/capabilities/app-graph-builder.ts"],
+  "sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\nimport { Atom } from '@effect-atom/atom-react';\nimport * as Function from 'effect/Function';\nimport * as Option from 'effect/Option';\n\nimport { createIntent } from '@dxos/app-framework';\nimport { Capabilities, type PluginContext, contributes } from '@dxos/app-framework';\nimport { ROOT_ID, atomFromObservable, createExtension } from '@dxos/plugin-graph';\nimport { ConnectionState } from '@dxos/react-client/mesh';\n\nimport { meta } from '../meta';\nimport { Account, ClientAction } from '../types';\n\nimport { ClientCapabilities } from './capabilities';\n\nexport default (context: PluginContext) =>\n  contributes(\n    Capabilities.AppGraphBuilder,\n    createExtension({\n      id: meta.id,\n      actions: (node) =>\n        Atom.make((get) =>\n          Function.pipe(\n            get(node),\n            Option.flatMap((node) => (node.id === ROOT_ID ? Option.some(node) : Option.none())),\n            Option.map(() => {\n              return [\n                {\n                  id: `${meta.id}/open-user-account`,\n                  data: async () => {\n                    const { dispatchPromise: dispatch } = context.getCapability(Capabilities.IntentDispatcher);\n                    await dispatch(createIntent(ClientAction.ShareIdentity));\n                  },\n                  properties: {\n                    label: ['open user account label', { ns: meta.id }],\n                    icon: 'ph--user--regular',\n                    disposition: 'menu',\n                    keyBinding: {\n                      macos: 'meta+shift+.',\n                      // TODO(wittjosiah): Test on windows to see if it behaves the same as linux.\n                      windows: 'alt+shift+.',\n                      linux: 'alt+shift+>',\n                    },\n                  },\n                },\n              ];\n            }),\n            Option.getOrElse(() => []),\n          ),\n        ),\n      connector: (node) =>\n        Atom.make((get) =>\n          Function.pipe(\n            get(node),\n            Option.flatMap((node) => (node.id === ROOT_ID ? Option.some(node) : Option.none())),\n            Option.map(() => {\n              const client = context.getCapability(ClientCapabilities.Client);\n              const identity = get(atomFromObservable(client.halo.identity));\n              const status = get(atomFromObservable(client.mesh.networkStatus));\n\n              return [\n                {\n                  id: Account.id,\n                  type: meta.id,\n                  properties: {\n                    label: ['account label', { ns: meta.id }],\n                    icon: 'ph--user--regular',\n                    disposition: 'user-account',\n                    // NOTE: This currently needs to be the identity key because the fallback is generated from hex.\n                    userId: identity?.identityKey.toHex(),\n                    hue: identity?.profile?.data?.hue,\n                    emoji: identity?.profile?.data?.emoji,\n                    status: status.swarm === ConnectionState.OFFLINE ? 'error' : 'active',\n                  },\n                  nodes: [\n                    {\n                      id: Account.Profile,\n                      data: Account.Profile,\n                      type: meta.id,\n                      properties: {\n                        label: ['profile label', { ns: meta.id }],\n                        icon: 'ph--user--regular',\n                      },\n                    },\n                    {\n                      id: Account.Devices,\n                      data: Account.Devices,\n                      type: meta.id,\n                      properties: {\n                        label: ['devices label', { ns: meta.id }],\n                        icon: 'ph--devices--regular',\n                        testId: 'clientPlugin.devices',\n                      },\n                    },\n                    {\n                      id: Account.Security,\n                      data: Account.Security,\n                      type: meta.id,\n                      properties: {\n                        label: ['security label', { ns: meta.id }],\n                        icon: 'ph--key--regular',\n                      },\n                    },\n                  ],\n                },\n              ];\n            }),\n            Option.getOrElse(() => []),\n          ),\n        ),\n    }),\n  );\n"],
+  "mappings": ";;;;;;;;;;;;AAIA,SAASA,YAAY;AACrB,YAAYC,cAAc;AAC1B,YAAYC,YAAY;AAExB,SAASC,oBAAoB;AAC7B,SAASC,cAAkCC,mBAAmB;AAC9D,SAASC,SAASC,oBAAoBC,uBAAuB;AAC7D,SAASC,uBAAuB;AAOhC,IAAA,6BAAe,CAACC,YACdC,YACEC,aAAaC,iBACbC,gBAAgB;EACdC,IAAIC,KAAKD;EACTE,SAAS,CAACC,SACRC,KAAKC,KAAK,CAACC,QACAC,cACPD,IAAIH,IAAAA,GACGK,eAAQ,CAACL,UAAUA,MAAKH,OAAOS,UAAiBC,YAAKP,KAAAA,IAAeQ,YAAI,CAAA,GACxEC,WAAI,MAAA;AACT,WAAO;MACL;QACEZ,IAAI,GAAGC,KAAKD,EAAE;QACda,MAAM,YAAA;AACJ,gBAAM,EAAEC,iBAAiBC,SAAQ,IAAKpB,QAAQqB,cAAcnB,aAAaoB,gBAAgB;AACzF,gBAAMF,SAASG,aAAaC,aAAaC,aAAa,CAAA;QACxD;QACAC,YAAY;UACVC,OAAO;YAAC;YAA2B;cAAEC,IAAItB,KAAKD;YAAG;;UACjDwB,MAAM;UACNC,aAAa;UACbC,YAAY;YACVC,OAAO;;YAEPC,SAAS;YACTC,OAAO;UACT;QACF;MACF;;EAEJ,CAAA,GACOC,iBAAU,MAAM,CAAA,CAAE,CAAA,CAAA;EAG/BC,WAAW,CAAC5B,SACVC,KAAKC,KAAK,CAACC,QACAC,cACPD,IAAIH,IAAAA,GACGK,eAAQ,CAACL,UAAUA,MAAKH,OAAOS,UAAiBC,YAAKP,KAAAA,IAAeQ,YAAI,CAAA,GACxEC,WAAI,MAAA;AACT,UAAMoB,SAASrC,QAAQqB,cAAciB,mBAAmBC,MAAM;AAC9D,UAAMC,WAAW7B,IAAI8B,mBAAmBJ,OAAOK,KAAKF,QAAQ,CAAA;AAC5D,UAAMG,SAAShC,IAAI8B,mBAAmBJ,OAAOO,KAAKC,aAAa,CAAA;AAE/D,WAAO;MACL;QACExC,IAAIyC,QAAQzC;QACZ0C,MAAMzC,KAAKD;QACXqB,YAAY;UACVC,OAAO;YAAC;YAAiB;cAAEC,IAAItB,KAAKD;YAAG;;UACvCwB,MAAM;UACNC,aAAa;;UAEbkB,QAAQR,UAAUS,YAAYC,MAAAA;UAC9BC,KAAKX,UAAUY,SAASlC,MAAMiC;UAC9BE,OAAOb,UAAUY,SAASlC,MAAMmC;UAChCV,QAAQA,OAAOW,UAAUC,gBAAgBC,UAAU,UAAU;QAC/D;QACAC,OAAO;UACL;YACEpD,IAAIyC,QAAQY;YACZxC,MAAM4B,QAAQY;YACdX,MAAMzC,KAAKD;YACXqB,YAAY;cACVC,OAAO;gBAAC;gBAAiB;kBAAEC,IAAItB,KAAKD;gBAAG;;cACvCwB,MAAM;YACR;UACF;UACA;YACExB,IAAIyC,QAAQa;YACZzC,MAAM4B,QAAQa;YACdZ,MAAMzC,KAAKD;YACXqB,YAAY;cACVC,OAAO;gBAAC;gBAAiB;kBAAEC,IAAItB,KAAKD;gBAAG;;cACvCwB,MAAM;cACN+B,QAAQ;YACV;UACF;UACA;YACEvD,IAAIyC,QAAQe;YACZ3C,MAAM4B,QAAQe;YACdd,MAAMzC,KAAKD;YACXqB,YAAY;cACVC,OAAO;gBAAC;gBAAkB;kBAAEC,IAAItB,KAAKD;gBAAG;;cACxCwB,MAAM;YACR;UACF;;MAEJ;;EAEJ,CAAA,GACOM,iBAAU,MAAM,CAAA,CAAE,CAAA,CAAA;AAGjC,CAAA,CAAA;",
+  "names": ["Atom", "Function", "Option", "createIntent", "Capabilities", "contributes", "ROOT_ID", "atomFromObservable", "createExtension", "ConnectionState", "context", "contributes", "Capabilities", "AppGraphBuilder", "createExtension", "id", "meta", "actions", "node", "Atom", "make", "get", "pipe", "flatMap", "ROOT_ID", "some", "none", "map", "data", "dispatchPromise", "dispatch", "getCapability", "IntentDispatcher", "createIntent", "ClientAction", "ShareIdentity", "properties", "label", "ns", "icon", "disposition", "keyBinding", "macos", "windows", "linux", "getOrElse", "connector", "client", "ClientCapabilities", "Client", "identity", "atomFromObservable", "halo", "status", "mesh", "networkStatus", "Account", "type", "userId", "identityKey", "toHex", "hue", "profile", "emoji", "swarm", "ConnectionState", "OFFLINE", "nodes", "Profile", "Devices", "testId", "Security"]
+}

package/dist/lib/browser/chunk-4LRO3Y2O.mjs

@@ -0,0 +1,19 @@
+import {
+  meta
+} from "./chunk-ZRVMXLDR.mjs";
+
+// src/events.ts
+import { defineEvent } from "@dxos/app-framework";
+(function(ClientEvents2) {
+  ClientEvents2.ClientReady = defineEvent(`${meta.id}/event/client-ready`);
+  ClientEvents2.SetupSchema = defineEvent(`${meta.id}/event/setup-schema`);
+  ClientEvents2.SetupMigration = defineEvent(`${meta.id}/event/setup-migration`);
+  ClientEvents2.IdentityCreated = defineEvent(`${meta.id}/event/identity-created`);
+  ClientEvents2.SpacesReady = defineEvent(`${meta.id}/event/spaces-ready`);
+})(ClientEvents || (ClientEvents = {}));
+var ClientEvents;
+
+export {
+  ClientEvents
+};
+//# sourceMappingURL=chunk-4LRO3Y2O.mjs.map

package/dist/lib/browser/chunk-4LRO3Y2O.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/events.ts"],
+  "sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\nimport { defineEvent } from '@dxos/app-framework';\n\nimport { meta } from './meta';\n\nexport namespace ClientEvents {\n  export const ClientReady = defineEvent(`${meta.id}/event/client-ready`);\n  export const SetupSchema = defineEvent(`${meta.id}/event/setup-schema`);\n  export const SetupMigration = defineEvent(`${meta.id}/event/setup-migration`);\n  export const IdentityCreated = defineEvent(`${meta.id}/event/identity-created`);\n  export const SpacesReady = defineEvent(`${meta.id}/event/spaces-ready`);\n}\n"],
+  "mappings": ";;;;;AAIA,SAASA,mBAAmB;UAIXC,eAAAA;gBACFC,cAAcC,YAAY,GAAGC,KAAKC,EAAE,qBAAqB;gBACzDC,cAAcH,YAAY,GAAGC,KAAKC,EAAE,qBAAqB;gBACzDE,iBAAiBJ,YAAY,GAAGC,KAAKC,EAAE,wBAAwB;gBAC/DG,kBAAkBL,YAAY,GAAGC,KAAKC,EAAE,yBAAyB;gBACjEI,cAAcN,YAAY,GAAGC,KAAKC,EAAE,qBAAqB;AACxE,GANiBJ,iBAAAA,eAAAA,CAAAA,EAAAA;;",
+  "names": ["defineEvent", "ClientEvents", "ClientReady", "defineEvent", "meta", "id", "SetupSchema", "SetupMigration", "IdentityCreated", "SpacesReady"]
+}

package/dist/lib/browser/{chunk-SV3MHIKI.mjs → chunk-HZSIIWH5.mjs}

@@ -1,23 +1,23 @@
 import {
   ClientAction
-} from "./chunk-RMHBOY3Y.mjs";
+} from "./chunk-RDIG75CA.mjs";
 import {
-  CLIENT_PLUGIN
-} from "./chunk-GS3LDHYD.mjs";
+  meta
+} from "./chunk-ZRVMXLDR.mjs";
 
 // src/components/DevicesContainer.tsx
 import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
 import React, { useCallback, useEffect, useState } from "react";
 import { QR } from "react-qr-rounded";
-import { createIntent, useIntentDispatcher } from "@dxos/app-framework";
+import { createIntent } from "@dxos/app-framework";
+import { useIntentDispatcher } from "@dxos/app-framework/react";
 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, IconButton, List, useId, useTranslation, Icon } from "@dxos/react-ui";
+import { Button, Clipboard, Icon, IconButton, List, useId, useTranslation } from "@dxos/react-ui";
 import { ControlFrame, ControlFrameItem, ControlGroup, ControlItem, ControlPage, ControlSection } from "@dxos/react-ui-form";
-import { StackItem } from "@dxos/react-ui-stack";
 import { AuthCode, Centered, DeviceListItem, Emoji, Viewport } from "@dxos/shell/react";
 import { hexToEmoji } from "@dxos/util";
 var __dxlog_file = "/__w/dxos/dxos/packages/plugins/plugin-client/src/components/DevicesContainer.tsx";
@@ -41,18 +41,16 @@ var DevicesContainer = ({ createInvitationUrl }) => {
     })), [
       dispatch
     ]);
-    return /* @__PURE__ */ React.createElement(Clipboard.Provider, null, /* @__PURE__ */ React.createElement(StackItem.Content, {
-      classNames: "block overflow-y-auto"
-    }, /* @__PURE__ */ React.createElement(ControlPage, null, /* @__PURE__ */ React.createElement(ControlSection, {
+    return /* @__PURE__ */ React.createElement(Clipboard.Provider, null, /* @__PURE__ */ React.createElement(ControlPage, null, /* @__PURE__ */ React.createElement(ControlSection, {
       title: t("devices verbose label", {
-        ns: CLIENT_PLUGIN
+        ns: meta.id
       }),
       description: t("devices description", {
-        ns: CLIENT_PLUGIN
+        ns: meta.id
       })
     }, /* @__PURE__ */ React.createElement(ControlFrame, null, /* @__PURE__ */ React.createElement(ControlFrameItem, {
       title: t("devices label", {
-        ns: CLIENT_PLUGIN
+        ns: meta.id
       })
     }, /* @__PURE__ */ React.createElement(List, null, devices.map((device) => {
       return /* @__PURE__ */ React.createElement(DeviceListItem, {
@@ -66,15 +64,15 @@ var DevicesContainer = ({ createInvitationUrl }) => {
       createInvitationUrl
     })))), /* @__PURE__ */ React.createElement(ControlSection, {
       title: t("danger zone title", {
-        ns: CLIENT_PLUGIN
+        ns: meta.id
       }),
       description: t("danger zone description", {
-        ns: CLIENT_PLUGIN
+        ns: meta.id
       })
     }, /* @__PURE__ */ React.createElement(ControlGroup, null, /* @__PURE__ */ React.createElement(ControlItem, {
       title: t("reset device label"),
       description: t("reset device description", {
-        ns: CLIENT_PLUGIN
+        ns: meta.id
       })
     }, /* @__PURE__ */ React.createElement(Button, {
       variant: "destructive",
@@ -83,7 +81,7 @@ var DevicesContainer = ({ createInvitationUrl }) => {
     }, t("reset device label"))), /* @__PURE__ */ React.createElement(ControlItem, {
       title: t("recover identity label"),
       description: t("recover identity description", {
-        ns: CLIENT_PLUGIN
+        ns: meta.id
       })
     }, /* @__PURE__ */ React.createElement(Button, {
       variant: "destructive",
@@ -92,13 +90,13 @@ var DevicesContainer = ({ createInvitationUrl }) => {
     }, t("recover identity label"))), /* @__PURE__ */ React.createElement(ControlItem, {
       title: t("join new identity label"),
       description: t("join new identity description", {
-        ns: CLIENT_PLUGIN
+        ns: meta.id
       })
     }, /* @__PURE__ */ React.createElement(Button, {
       variant: "destructive",
       onClick: handleJoinNewIdentity,
       "data-testid": "devicesContainer.joinExisting"
-    }, t("join new identity label"))))))));
+    }, t("join new identity label")))))));
   } finally {
     _effect.f();
   }
@@ -119,7 +117,7 @@ var DeviceInvitation = (props) => {
               authCode: invitation3.authCode
             }), void 0, {
               F: __dxlog_file,
-              L: 139,
+              L: 126,
               S: void 0,
               C: (f, a) => f(...a)
             });
@@ -179,7 +177,7 @@ var InvitationSection = ({ state = -1, authCode, invitationId = "never", url = "
 } }) => {
   var _effect = _useSignals();
   try {
-    const { t } = useTranslation(CLIENT_PLUGIN);
+    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 mbe-2"
@@ -224,7 +222,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: CLIENT_PLUGIN
+      ns: meta.id
     })), /* @__PURE__ */ React.createElement("div", {
       role: "group",
       className: "grid grid-cols-[1fr_min-content] mlb-2 gap-2"
@@ -301,16 +299,17 @@ var InvitationComplete = ({ statusValue }) => {
 // src/components/JoinDialog.tsx
 import { useSignals as _useSignals2 } from "@preact-signals/safe-react/tracking";
 import React2, { useCallback as useCallback2 } from "react";
-import { createIntent as createIntent2, LayoutAction, useIntentDispatcher as useIntentDispatcher2 } from "@dxos/app-framework";
+import { LayoutAction, createIntent as createIntent2 } from "@dxos/app-framework";
+import { useIntentDispatcher as useIntentDispatcher2 } from "@dxos/app-framework/react";
 import { ObservabilityAction } from "@dxos/plugin-observability/types";
 import { Dialog, useTranslation as useTranslation2 } from "@dxos/react-ui";
 import { JoinPanel } from "@dxos/shell/react";
-var JOIN_DIALOG = `${CLIENT_PLUGIN}/JoinDialog`;
+var JOIN_DIALOG = `${meta.id}/JoinDialog`;
 var JoinDialog = (props) => {
   var _effect = _useSignals2();
   try {
     const { dispatchPromise: dispatch } = useIntentDispatcher2();
-    const { t } = useTranslation2(CLIENT_PLUGIN);
+    const { t } = useTranslation2(meta.id);
     const handleCancelResetStorage = useCallback2(() => dispatch(createIntent2(ClientAction.ShareIdentity)), [
       dispatch
     ]);
@@ -354,24 +353,37 @@ var JoinDialog = (props) => {
 
 // src/components/ProfileContainer.tsx
 import { useSignals as _useSignals3 } from "@preact-signals/safe-react/tracking";
-import { Schema } from "effect";
+import * as Schema from "effect/Schema";
 import React3, { useCallback as useCallback3, useMemo, useState as useState2 } from "react";
 import { debounce } from "@dxos/async";
 import { useClient as useClient2 } from "@dxos/react-client";
 import { useIdentity } from "@dxos/react-client/halo";
 import { ButtonGroup, Clipboard as Clipboard2, Input, useTranslation as useTranslation3 } from "@dxos/react-ui";
-import { Form, ControlItem as ControlItem2, ControlItemInput, ControlSection as ControlSection2, ControlPage as ControlPage2 } from "@dxos/react-ui-form";
+import { ControlItem as ControlItem2, ControlItemInput, ControlPage as ControlPage2, ControlSection as ControlSection2, Form } from "@dxos/react-ui-form";
 import { EmojiPickerBlock, HuePicker } from "@dxos/react-ui-pickers";
-import { StackItem as StackItem2 } from "@dxos/react-ui-stack";
-import { hexToHue, hexToEmoji as hexToEmoji2 } from "@dxos/util";
+import { hexToEmoji as hexToEmoji2, 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 getDefaultEmojiValue = (identity) => hexToEmoji2(identity?.identityKey.toHex() ?? "0");
 var getHueValue = (identity) => identity?.profile?.data?.hue || getDefaultHueValue(identity);
+var getDefaultEmojiValue = (identity) => hexToEmoji2(identity?.identityKey.toHex() ?? "0");
 var getEmojiValue = (identity) => identity?.profile?.data?.emoji || getDefaultEmojiValue(identity);
 var ProfileContainer = () => {
   var _effect = _useSignals3();
   try {
-    const { t } = useTranslation3(CLIENT_PLUGIN);
+    const { t } = useTranslation3(meta.id);
     const client = useClient2();
     const identity = useIdentity();
     const [displayName, setDisplayNameDirectly] = useState2(identity?.profile?.displayName ?? "");
@@ -393,17 +405,17 @@ var ProfileContainer = () => {
       identity
     ]);
     const values = useMemo(() => ({
+      did: identity?.did,
       displayName,
       emoji,
-      hue,
-      did: identity?.did
+      hue
     }), [
       identity,
       displayName,
       emoji,
       hue
     ]);
-    const customElements = useMemo(() => ({
+    const fieldMap = useMemo(() => ({
       displayName: ({ type, label, getValue, onValueChange }) => {
         const handleChange = useCallback3(({ target: { value } }) => onValueChange(type, value), [
           onValueChange,
@@ -451,12 +463,14 @@ var ProfileContainer = () => {
         return /* @__PURE__ */ React3.createElement(ControlItem2, {
           title: label,
           description: t("hue description")
+        }, /* @__PURE__ */ React3.createElement("div", {
+          role: "none",
+          className: "flex justify-self-end"
         }, /* @__PURE__ */ React3.createElement(HuePicker, {
           value: getValue(),
           onChange: handleChange,
-          onReset: handleHueReset,
-          classNames: "[--hue-preview-size:1.5rem] justify-self-end"
-        }));
+          onReset: handleHueReset
+        })));
       },
       // TODO(wittjosiah): We need text input annotations for disabled and copyable.
       did: ({ label, getValue }) => {
@@ -474,58 +488,42 @@ var ProfileContainer = () => {
     }), [
       t
     ]);
-    return /* @__PURE__ */ React3.createElement(StackItem2.Content, {
-      classNames: "block overflow-y-auto"
-    }, /* @__PURE__ */ React3.createElement(ControlPage2, null, /* @__PURE__ */ React3.createElement(Clipboard2.Provider, null, /* @__PURE__ */ React3.createElement(ControlSection2, {
+    return /* @__PURE__ */ React3.createElement(ControlPage2, null, /* @__PURE__ */ React3.createElement(Clipboard2.Provider, null, /* @__PURE__ */ React3.createElement(ControlSection2, {
       title: t("profile label"),
       description: t("profile description")
-    }, /* @__PURE__ */ React3.createElement(Form, {
-      schema: ProfileSchema,
+    }, /* @__PURE__ */ React3.createElement(Form.Root, {
+      schema: UserProfile,
       values,
+      fieldMap,
       autoSave: true,
-      onSave: handleSave,
-      Custom: customElements,
-      classNames: "container-max-width grid grid-cols-1 md:grid-cols-[1fr_min-content] gap-4",
-      outerSpacing: false
-    })))));
+      onSave: handleSave
+    }, /* @__PURE__ */ React3.createElement(Form.Content, null, /* @__PURE__ */ React3.createElement(Form.FieldSet, {
+      classNames: "container-max-width grid grid-cols-1 md:grid-cols-[1fr_min-content]"
+    }))))));
   } finally {
     _effect.f();
   }
 };
-var ProfileSchema = Schema.Struct({
-  displayName: Schema.String.annotations({
-    title: "Display name"
-  }),
-  emoji: Schema.String.annotations({
-    title: "Avatar"
-  }),
-  hue: Schema.String.annotations({
-    title: "Color"
-  }),
-  did: Schema.String.annotations({
-    title: "DID"
-  })
-});
 
 // src/components/RecoveryCodeDialog.tsx
 import { useSignals as _useSignals4 } from "@preact-signals/safe-react/tracking";
 import React4, { useCallback as useCallback4, useState as useState3 } from "react";
 import { AlertDialog, Button as Button2, Clipboard as Clipboard3, Input as Input2, useTranslation as useTranslation4 } from "@dxos/react-ui";
-var RECOVERY_CODE_DIALOG = `${CLIENT_PLUGIN}/RecoveryCodeDialog`;
+var RECOVERY_CODE_DIALOG = `${meta.id}/RecoveryCodeDialog`;
 var RecoveryCodeDialog = ({ code }) => {
   var _effect = _useSignals4();
   try {
-    const { t } = useTranslation4(CLIENT_PLUGIN);
+    const { t } = useTranslation4(meta.id);
     const [confirmation, setConfirmation] = useState3(false);
     const handleConfirmation = useCallback4((checked) => setConfirmation(checked), []);
     return /* @__PURE__ */ React4.createElement(AlertDialog.Content, {
       classNames: "bs-content min-bs-[15rem] max-bs-full md:max-is-[40rem] overflow-hidden"
     }, /* @__PURE__ */ React4.createElement(AlertDialog.Title, null, t("recovery code dialog title")), /* @__PURE__ */ React4.createElement("p", {
-      className: "py-4"
+      className: "plb-4"
     }, t("recovery code dialog description")), /* @__PURE__ */ React4.createElement(Clipboard3.Provider, null, /* @__PURE__ */ React4.createElement(Code, {
       code
     })), /* @__PURE__ */ React4.createElement("div", {
-      className: "flex flex-col py-4 gap-2"
+      className: "flex flex-col plb-4 gap-2"
     }, /* @__PURE__ */ React4.createElement("p", null, t("recovery code dialog warning 1")), /* @__PURE__ */ React4.createElement("p", null, t("recovery code dialog warning 2"))), /* @__PURE__ */ React4.createElement("div", {
       className: "flex items-center gap-2 pbe-4"
     }, /* @__PURE__ */ React4.createElement(Input2.Root, null, /* @__PURE__ */ React4.createElement(Input2.Checkbox, {
@@ -560,7 +558,7 @@ var Code = ({ code }) => {
       key: i,
       className: "flex items-center p-2 gap-2"
     }, /* @__PURE__ */ React4.createElement("div", {
-      className: "w-4 text-xs text-center text-subdued"
+      className: "is-4 text-xs text-center text-subdued"
     }, i + 1), /* @__PURE__ */ React4.createElement("div", {
       className: "text-sm"
     }, word)))));
@@ -572,22 +570,20 @@ var Code = ({ code }) => {
 // src/components/RecoveryCredentialsContainer.tsx
 import { useSignals as _useSignals5 } from "@preact-signals/safe-react/tracking";
 import React5 from "react";
-import { createIntent as createIntent3, useIntentDispatcher as useIntentDispatcher3 } from "@dxos/app-framework";
+import { createIntent as createIntent3 } from "@dxos/app-framework";
+import { useIntentDispatcher as useIntentDispatcher3 } from "@dxos/app-framework/react";
 import { useCredentials } from "@dxos/react-client/halo";
-import { Icon as Icon2, IconButton as IconButton2, List as List2, ListItem, useTranslation as useTranslation5, Message } from "@dxos/react-ui";
+import { Icon as Icon2, IconButton as IconButton2, List as List2, ListItem, Message, useTranslation as useTranslation5 } from "@dxos/react-ui";
 import { ControlGroup as ControlGroup2, ControlItem as ControlItem3, ControlPage as ControlPage3, ControlSection as ControlSection3 } from "@dxos/react-ui-form";
-import { StackItem as StackItem3 } from "@dxos/react-ui-stack";
-var MANAGE_CREDENTIALS_DIALOG = `${CLIENT_PLUGIN}/ManageCredentialsDialog`;
+var MANAGE_CREDENTIALS_DIALOG = `${meta.id}/ManageCredentialsDialog`;
 var RecoveryCredentialsContainer = () => {
   var _effect = _useSignals5();
   try {
-    const { t } = useTranslation5(CLIENT_PLUGIN);
+    const { t } = useTranslation5(meta.id);
     const { dispatchPromise: dispatch } = useIntentDispatcher3();
     const credentials = useCredentials();
     const recoveryCredentials = credentials.filter((credential) => credential.subject.assertion["@type"] === "dxos.halo.credentials.IdentityRecovery");
-    return /* @__PURE__ */ React5.createElement(StackItem3.Content, {
-      classNames: "block overflow-y-auto"
-    }, /* @__PURE__ */ React5.createElement(ControlPage3, null, /* @__PURE__ */ React5.createElement(ControlSection3, {
+    return /* @__PURE__ */ React5.createElement(ControlPage3, null, /* @__PURE__ */ React5.createElement(ControlSection3, {
       title: t("recovery setup dialog title"),
       description: t("recovery setup dialog description")
     }, /* @__PURE__ */ React5.createElement(ControlGroup2, null, /* @__PURE__ */ React5.createElement(ControlItem3, {
@@ -597,7 +593,6 @@ var RecoveryCredentialsContainer = () => {
       label: t("create passkey label"),
       icon: "ph--key--duotone",
       variant: "primary",
-      size: 5,
       onClick: () => dispatch(createIntent3(ClientAction.CreatePasskey))
     })), /* @__PURE__ */ React5.createElement(ControlItem3, {
       title: t("create recovery code label"),
@@ -606,7 +601,6 @@ var RecoveryCredentialsContainer = () => {
       label: t("create recovery code label"),
       icon: "ph--receipt--duotone",
       variant: "default",
-      size: 5,
       onClick: () => dispatch(createIntent3(ClientAction.CreateRecoveryCode))
     })))), /* @__PURE__ */ React5.createElement(ControlSection3, {
       title: t("credentials list label")
@@ -620,9 +614,8 @@ var RecoveryCredentialsContainer = () => {
     }, recoveryCredentials.map((credential) => /* @__PURE__ */ React5.createElement(ListItem.Root, {
       key: credential.id?.toHex()
     }, /* @__PURE__ */ React5.createElement(ListItem.Endcap, null, /* @__PURE__ */ React5.createElement(Icon2, {
-      icon: "ph--key--regular",
-      size: 5
-    })), /* @__PURE__ */ React5.createElement(ListItem.Heading, null, credential.issuanceDate.toLocaleString())))))));
+      icon: "ph--key--regular"
+    })), /* @__PURE__ */ React5.createElement(ListItem.Heading, null, credential.issuanceDate.toLocaleString()))))));
   } finally {
     _effect.f();
   }
@@ -631,15 +624,16 @@ var RecoveryCredentialsContainer = () => {
 // src/components/ResetDialog.tsx
 import { useSignals as _useSignals6 } from "@preact-signals/safe-react/tracking";
 import React6, { useCallback as useCallback5 } from "react";
-import { createIntent as createIntent4, LayoutAction as LayoutAction2, useIntentDispatcher as useIntentDispatcher4 } from "@dxos/app-framework";
+import { LayoutAction as LayoutAction2, createIntent as createIntent4 } from "@dxos/app-framework";
+import { useIntentDispatcher as useIntentDispatcher4 } from "@dxos/app-framework/react";
 import { useClient as useClient3 } from "@dxos/react-client";
 import { Dialog as Dialog2, useTranslation as useTranslation6 } from "@dxos/react-ui";
 import { ConfirmReset } from "@dxos/shell/react";
-var RESET_DIALOG = `${CLIENT_PLUGIN}/ResetDialog`;
+var RESET_DIALOG = `${meta.id}/ResetDialog`;
 var ResetDialog = ({ mode, onReset }) => {
   var _effect = _useSignals6();
   try {
-    const { t } = useTranslation6(CLIENT_PLUGIN);
+    const { t } = useTranslation6(meta.id);
     const { dispatchPromise: dispatch } = useIntentDispatcher4();
     const client = useClient3();
     const handleReset = useCallback5(async () => {
@@ -692,4 +686,4 @@ export {
   RESET_DIALOG,
   ResetDialog
 };
-//# sourceMappingURL=chunk-SV3MHIKI.mjs.map
+//# sourceMappingURL=chunk-HZSIIWH5.mjs.map