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

package/dist/lib/neutral/{RecoveryCredentialsContainer-IPBGDMIA.mjs → RecoveryCredentialsContainer-6BZ2IWX7.mjs}

@@ -4,48 +4,57 @@ import "./chunk-J5LGTIGS.mjs";
 import React from "react";
 import { useOperationInvoker } from "@dxos/app-framework/ui";
 import { useCredentials } from "@dxos/react-client/halo";
-import { Icon, IconButton, List, ListItem, Message, useTranslation } from "@dxos/react-ui";
-import { Settings } from "@dxos/react-ui-form";
+import { Icon, IconButton, Message, useTranslation } from "@dxos/react-ui";
+import { Form } from "@dxos/react-ui-form";
+import { Listbox } from "@dxos/react-ui-list";
 import { meta } from "#meta";
 import { ClientOperation } from "#operations";
-var MANAGE_CREDENTIALS_DIALOG = `${meta.id}.ManageCredentialsDialog`;
+var MANAGE_CREDENTIALS_DIALOG = `${meta.profile.key}.ManageCredentialsDialog`;
 var RecoveryCredentialsContainer = () => {
-  const { t } = useTranslation(meta.id);
+  const { t } = useTranslation(meta.profile.key);
   const { invokePromise } = useOperationInvoker();
   const credentials = useCredentials();
   const recoveryCredentials = credentials.filter((credential) => credential.subject.assertion["@type"] === "dxos.halo.credentials.IdentityRecovery");
-  return /* @__PURE__ */ React.createElement(Settings.Viewport, null, /* @__PURE__ */ React.createElement(Settings.Section, {
+  return /* @__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("recovery-setup-dialog.title"),
     description: t("recovery-setup-dialog.description")
-  }, /* @__PURE__ */ React.createElement(Settings.Item, {
-    title: t("create-passkey.label"),
+  }, /* @__PURE__ */ React.createElement(Form.Row, {
+    label: t("create-passkey.label"),
     description: t("create-passkey.description")
   }, /* @__PURE__ */ React.createElement(IconButton, {
     label: t("create-passkey.label"),
     icon: "ph--key--duotone",
     variant: "primary",
     onClick: () => invokePromise(ClientOperation.CreatePasskey)
-  })), /* @__PURE__ */ React.createElement(Settings.Item, {
-    title: t("create-recovery-code.label"),
+  })), /* @__PURE__ */ React.createElement(Form.Row, {
+    label: t("create-recovery-code.label"),
     description: t("create-recovery-code.description")
   }, /* @__PURE__ */ React.createElement(IconButton, {
     label: t("create-recovery-code.label"),
     icon: "ph--receipt--duotone",
     variant: "default",
     onClick: () => invokePromise(ClientOperation.CreateRecoveryCode)
-  }))), /* @__PURE__ */ React.createElement(Settings.Section, {
+  }))), /* @__PURE__ */ React.createElement(Form.Section, {
     title: t("credentials-list.label")
   }, recoveryCredentials.length < 1 ? /* @__PURE__ */ React.createElement(Message.Root, {
     valence: "error"
   }, /* @__PURE__ */ React.createElement(Message.Title, {
     icon: "ph--shield-warning--duotone"
-  }, t("no-credentials.title")), /* @__PURE__ */ React.createElement(Message.Content, null, t("no-credentials.message"))) : /* @__PURE__ */ React.createElement(List, null, recoveryCredentials.map((credential) => /* @__PURE__ */ React.createElement(ListItem.Root, {
-    key: credential.id?.toHex()
-  }, /* @__PURE__ */ React.createElement(ListItem.Endcap, null, /* @__PURE__ */ React.createElement(Icon, {
+  }, t("no-credentials.title")), /* @__PURE__ */ React.createElement(Message.Content, null, t("no-credentials.message"))) : /* @__PURE__ */ React.createElement(Listbox.Root, null, /* @__PURE__ */ React.createElement(Listbox.Content, {
+    classNames: "gap-1"
+  }, recoveryCredentials.map((credential, index) => /* @__PURE__ */ React.createElement(Listbox.Item, {
+    key: credential.id?.toHex() ?? index,
+    id: credential.id?.toHex() ?? `${index}`,
+    classNames: "gap-2"
+  }, /* @__PURE__ */ React.createElement(Icon, {
     icon: "ph--key--regular"
-  })), /* @__PURE__ */ React.createElement(ListItem.Heading, null, credential.issuanceDate.toLocaleString()))))));
+  }), /* @__PURE__ */ React.createElement(Listbox.ItemLabel, null, credential.issuanceDate.toLocaleString())))))))));
 };
 export {
   RecoveryCredentialsContainer as default
 };
-//# sourceMappingURL=RecoveryCredentialsContainer-IPBGDMIA.mjs.map
+//# sourceMappingURL=RecoveryCredentialsContainer-6BZ2IWX7.mjs.map

package/dist/lib/neutral/RecoveryCredentialsContainer-6BZ2IWX7.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/containers/RecoveryCredentialsContainer/RecoveryCredentialsContainer.tsx"],
+  "sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport React from 'react';\n\nimport { useOperationInvoker } from '@dxos/app-framework/ui';\nimport { useCredentials } from '@dxos/react-client/halo';\nimport { Icon, IconButton, Message, 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 { ClientOperation } from '#operations';\n\nexport const MANAGE_CREDENTIALS_DIALOG = `${meta.profile.key}.ManageCredentialsDialog`;\n\nexport const RecoveryCredentialsContainer = () => {\n  const { t } = useTranslation(meta.profile.key);\n  const { invokePromise } = useOperationInvoker();\n  const credentials = useCredentials();\n  const recoveryCredentials = credentials.filter(\n    (credential) => credential.subject.assertion['@type'] === 'dxos.halo.credentials.IdentityRecovery',\n  );\n\n  return (\n    <Form.Root variant='settings'>\n      <Form.Viewport scroll>\n        <Form.Content>\n          <Form.Section title={t('recovery-setup-dialog.title')} description={t('recovery-setup-dialog.description')}>\n            <Form.Row label={t('create-passkey.label')} description={t('create-passkey.description')}>\n              <IconButton\n                label={t('create-passkey.label')}\n                icon='ph--key--duotone'\n                variant='primary'\n                onClick={() => invokePromise(ClientOperation.CreatePasskey)}\n              />\n            </Form.Row>\n            <Form.Row label={t('create-recovery-code.label')} description={t('create-recovery-code.description')}>\n              <IconButton\n                label={t('create-recovery-code.label')}\n                icon='ph--receipt--duotone'\n                variant='default'\n                onClick={() => invokePromise(ClientOperation.CreateRecoveryCode)}\n              />\n            </Form.Row>\n          </Form.Section>\n          <Form.Section title={t('credentials-list.label')}>\n            {recoveryCredentials.length < 1 ? (\n              <Message.Root valence='error'>\n                <Message.Title icon='ph--shield-warning--duotone'>{t('no-credentials.title')}</Message.Title>\n                <Message.Content>{t('no-credentials.message')}</Message.Content>\n              </Message.Root>\n            ) : (\n              <Listbox.Root>\n                <Listbox.Content classNames='gap-1'>\n                  {recoveryCredentials.map((credential, index) => (\n                    <Listbox.Item\n                      key={credential.id?.toHex() ?? index}\n                      id={credential.id?.toHex() ?? `${index}`}\n                      classNames='gap-2'\n                    >\n                      <Icon icon='ph--key--regular' />\n                      <Listbox.ItemLabel>{credential.issuanceDate.toLocaleString()}</Listbox.ItemLabel>\n                    </Listbox.Item>\n                  ))}\n                </Listbox.Content>\n              </Listbox.Root>\n            )}\n          </Form.Section>\n        </Form.Content>\n      </Form.Viewport>\n    </Form.Root>\n  );\n};\n"],
+  "mappings": ";;;AAIA,OAAOA,WAAW;AAElB,SAASC,2BAA2B;AACpC,SAASC,sBAAsB;AAC/B,SAASC,MAAMC,YAAYC,SAASC,sBAAsB;AAC1D,SAASC,YAAY;AACrB,SAASC,eAAe;AAExB,SAASC,YAAY;AACrB,SAASC,uBAAuB;AAEzB,IAAMC,4BAA4B,GAAGF,KAAKG,QAAQC,GAAG;AAErD,IAAMC,+BAA+B,MAAA;AAC1C,QAAM,EAAEC,EAAC,IAAKT,eAAeG,KAAKG,QAAQC,GAAG;AAC7C,QAAM,EAAEG,cAAa,IAAKf,oBAAAA;AAC1B,QAAMgB,cAAcf,eAAAA;AACpB,QAAMgB,sBAAsBD,YAAYE,OACtC,CAACC,eAAeA,WAAWC,QAAQC,UAAU,OAAA,MAAa,wCAAA;AAG5D,SACE,sBAAA,cAACf,KAAKgB,MAAI;IAACC,SAAQ;KACjB,sBAAA,cAACjB,KAAKkB,UAAQ;IAACC,QAAAA;KACb,sBAAA,cAACnB,KAAKoB,SAAO,MACX,sBAAA,cAACpB,KAAKqB,SAAO;IAACC,OAAOd,EAAE,6BAAA;IAAgCe,aAAaf,EAAE,mCAAA;KACpE,sBAAA,cAACR,KAAKwB,KAAG;IAACC,OAAOjB,EAAE,sBAAA;IAAyBe,aAAaf,EAAE,4BAAA;KACzD,sBAAA,cAACX,YAAAA;IACC4B,OAAOjB,EAAE,sBAAA;IACTkB,MAAK;IACLT,SAAQ;IACRU,SAAS,MAAMlB,cAAcN,gBAAgByB,aAAa;OAG9D,sBAAA,cAAC5B,KAAKwB,KAAG;IAACC,OAAOjB,EAAE,4BAAA;IAA+Be,aAAaf,EAAE,kCAAA;KAC/D,sBAAA,cAACX,YAAAA;IACC4B,OAAOjB,EAAE,4BAAA;IACTkB,MAAK;IACLT,SAAQ;IACRU,SAAS,MAAMlB,cAAcN,gBAAgB0B,kBAAkB;QAIrE,sBAAA,cAAC7B,KAAKqB,SAAO;IAACC,OAAOd,EAAE,wBAAA;KACpBG,oBAAoBmB,SAAS,IAC5B,sBAAA,cAAChC,QAAQkB,MAAI;IAACe,SAAQ;KACpB,sBAAA,cAACjC,QAAQkC,OAAK;IAACN,MAAK;KAA+BlB,EAAE,sBAAA,CAAA,GACrD,sBAAA,cAACV,QAAQsB,SAAO,MAAEZ,EAAE,wBAAA,CAAA,CAAA,IAGtB,sBAAA,cAACP,QAAQe,MAAI,MACX,sBAAA,cAACf,QAAQmB,SAAO;IAACa,YAAW;KACzBtB,oBAAoBuB,IAAI,CAACrB,YAAYsB,UACpC,sBAAA,cAAClC,QAAQmC,MAAI;IACX9B,KAAKO,WAAWwB,IAAIC,MAAAA,KAAWH;IAC/BE,IAAIxB,WAAWwB,IAAIC,MAAAA,KAAW,GAAGH,KAAAA;IACjCF,YAAW;KAEX,sBAAA,cAACrC,MAAAA;IAAK8B,MAAK;MACX,sBAAA,cAACzB,QAAQsC,WAAS,MAAE1B,WAAW2B,aAAaC,eAAc,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA;AAWhF;",
+  "names": ["React", "useOperationInvoker", "useCredentials", "Icon", "IconButton", "Message", "useTranslation", "Form", "Listbox", "meta", "ClientOperation", "MANAGE_CREDENTIALS_DIALOG", "profile", "key", "RecoveryCredentialsContainer", "t", "invokePromise", "credentials", "recoveryCredentials", "filter", "credential", "subject", "assertion", "Root", "variant", "Viewport", "scroll", "Content", "Section", "title", "description", "Row", "label", "icon", "onClick", "CreatePasskey", "CreateRecoveryCode", "length", "valence", "Title", "classNames", "map", "index", "Item", "id", "toHex", "ItemLabel", "issuanceDate", "toLocaleString"]
+}

package/dist/lib/neutral/UsageContainer-2DWCVVE4.mjs

@@ -0,0 +1,241 @@
+import {
+  useHubHttpClient
+} from "./chunk-JY35S2CN.mjs";
+import "./chunk-J5LGTIGS.mjs";
+
+// src/containers/UsageContainer/UsageContainer.tsx
+import React2, { useCallback as useCallback2, useState as useState2 } from "react";
+import { Context } from "@dxos/context";
+import { log } from "@dxos/log";
+import { useAsyncEffect } from "@dxos/react-ui";
+
+// src/containers/UsageContainer/UsageView.tsx
+import * as Schema from "effect/Schema";
+import React, { useCallback, useMemo, useState } from "react";
+import { IconButton, Message, Status, ToggleIconButton, useTranslation } from "@dxos/react-ui";
+import { Form } from "@dxos/react-ui-form";
+import { JsonHighlighter } from "@dxos/react-ui-syntax-highlighter";
+import { meta } from "#meta";
+var usageMatchesLimit = (item, limit) => {
+  if (item.eventType !== limit.eventType || item.valueKey !== limit.valueKey) {
+    return false;
+  }
+  return limit.subtypePattern.every((pattern, index) => pattern === "*" || pattern === item.subtypePattern[index]);
+};
+var sumUsageForLimit = (usage, limit) => usage.reduce((total, item) => usageMatchesLimit(item, limit) ? total + item.amount : total, 0);
+var formatValueKey = (valueKey) => valueKey.replace(/([A-Z])/g, " $1").trim().toLowerCase();
+var formatLimitLabel = (limit, t) => {
+  const metric = formatValueKey(limit.valueKey);
+  const subtype = limit.subtypePattern.filter((segment) => segment && segment !== "*").join("/");
+  if (limit.eventType === "ai") {
+    return `${subtype || t("usage-all-models.label")} \xB7 ${metric}`;
+  }
+  return `${subtype ? `${limit.eventType}/${subtype}` : limit.eventType} \xB7 ${metric}`;
+};
+var formatAmount = (amount) => amount.toLocaleString();
+var SECONDS_PER_HOUR = 60 * 60;
+var formatWindow = (windowHours, t) => {
+  if (windowHours % (24 * 30) === 0) {
+    return t("usage-window-months.label", {
+      count: windowHours / (24 * 30)
+    });
+  }
+  if (windowHours % 24 === 0) {
+    return t("usage-window-days.label", {
+      count: windowHours / 24
+    });
+  }
+  return t("usage-window-hours.label", {
+    count: windowHours
+  });
+};
+var computeRows = (data, t) => data.limits.map((limit) => {
+  const used = sumUsageForLimit(data.usage, limit);
+  const label = formatLimitLabel(limit, t);
+  const windowHours = limit.windowDuration / SECONDS_PER_HOUR;
+  const window = formatWindow(windowHours, t);
+  const key = `${limit.eventType}/${limit.subtypePattern.join(",")}/${limit.valueKey}/${limit.windowDuration}/${limit.limit ?? "unlimited"}`;
+  if (limit.limit === null) {
+    return {
+      key,
+      label,
+      caption: t("usage-unlimited.description", {
+        used: formatAmount(used),
+        window
+      }),
+      windowHours
+    };
+  }
+  const percent = limit.limit > 0 ? Math.min(100, Math.round(used / limit.limit * 100)) : used > 0 ? 100 : 0;
+  return {
+    key,
+    label,
+    caption: `${t("usage-percent-used.label", {
+      percent
+    })} \xB7 ${t("usage-limit.description", {
+      used: formatAmount(used),
+      limit: formatAmount(limit.limit),
+      window
+    })}`,
+    percent,
+    windowHours
+  };
+}).sort((left, right) => left.windowHours - right.windowHours);
+var usageField = (title, description) => Schema.optional(Schema.Number.annotations({
+  title,
+  description
+}));
+var buildUsageForm = (rows) => {
+  const fields = {};
+  const values = {};
+  rows.forEach((row, index) => {
+    const field = `metric_${index}`;
+    fields[field] = usageField(row.label, row.caption);
+    if (row.percent !== void 0) {
+      values[field] = row.percent;
+    }
+  });
+  return {
+    schema: Schema.Struct(fields),
+    values
+  };
+};
+var STATE_MESSAGES = {
+  unavailable: {
+    valence: "warning",
+    icon: "ph--cloud-slash--duotone",
+    title: "usage-unavailable.title",
+    description: "usage-unavailable.description"
+  },
+  error: {
+    valence: "error",
+    icon: "ph--cloud-x--duotone",
+    title: "usage-offline.title",
+    description: "usage-offline.description"
+  },
+  empty: {
+    valence: "neutral",
+    icon: "ph--chart-bar--duotone",
+    title: "usage-empty.title",
+    description: "usage-empty.description"
+  }
+};
+var UsageView = ({ state, data, lastUpdated, onRefresh }) => {
+  const { t } = useTranslation(meta.profile.key);
+  const [rawExpanded, setRawExpanded] = useState(false);
+  const { schema, values, empty } = useMemo(() => {
+    const rows = data ? computeRows(data, t) : [];
+    return {
+      ...buildUsageForm(rows),
+      empty: rows.length === 0
+    };
+  }, [
+    data,
+    t
+  ]);
+  const message = state === "unavailable" ? STATE_MESSAGES.unavailable : state === "error" ? STATE_MESSAGES.error : state === "ready" && empty ? STATE_MESSAGES.empty : void 0;
+  const meterFieldProvider = useCallback(({ fieldProps: { label, description, getValue } }) => {
+    const percent = getValue();
+    return /* @__PURE__ */ React.createElement(Form.Row, {
+      label,
+      description
+    }, typeof percent === "number" ? /* @__PURE__ */ React.createElement(Status, {
+      progress: percent / 100,
+      "aria-label": t("usage-percent-used.label", {
+        percent
+      })
+    }) : t("usage-unlimited.label"));
+  }, [
+    t
+  ]);
+  return /* @__PURE__ */ React.createElement(Form.Root, {
+    variant: "settings",
+    layout: "static",
+    schema,
+    values
+  }, /* @__PURE__ */ React.createElement(Form.Viewport, {
+    scroll: true
+  }, /* @__PURE__ */ React.createElement(Form.Content, null, /* @__PURE__ */ React.createElement(Form.Section, {
+    title: t("usage-section.title"),
+    description: t("usage-section.description")
+  }, state === "loading" ? /* @__PURE__ */ React.createElement(Status, {
+    indeterminate: true,
+    "aria-label": t("usage-section.title")
+  }) : message ? /* @__PURE__ */ React.createElement(Message.Root, {
+    valence: message.valence
+  }, /* @__PURE__ */ React.createElement(Message.Title, {
+    icon: message.icon
+  }, t(message.title)), /* @__PURE__ */ React.createElement(Message.Content, null, t(message.description))) : /* @__PURE__ */ React.createElement(Form.FieldSet, {
+    fieldProvider: meterFieldProvider
+  })), state === "ready" && data && /* @__PURE__ */ React.createElement(Form.Section, null, /* @__PURE__ */ React.createElement(Form.Row, {
+    label: lastUpdated !== void 0 ? t("usage-last-updated.label", {
+      time: new Date(lastUpdated).toLocaleTimeString()
+    }) : t("usage-refresh.label")
+  }, onRefresh && /* @__PURE__ */ React.createElement(IconButton, {
+    iconOnly: true,
+    variant: "ghost",
+    icon: "ph--arrow-clockwise--regular",
+    label: t("usage-refresh.label"),
+    onClick: onRefresh
+  }))), state === "ready" && data && /* @__PURE__ */ React.createElement(Form.Section, null, /* @__PURE__ */ React.createElement(Form.Row, {
+    label: t("usage-raw-json.label")
+  }, /* @__PURE__ */ React.createElement(ToggleIconButton, {
+    iconOnly: true,
+    variant: "ghost",
+    active: rawExpanded,
+    icon: "ph--caret-right--regular",
+    label: t("usage-raw-json.label"),
+    onClick: () => setRawExpanded((value) => !value)
+  })), rawExpanded && /* @__PURE__ */ React.createElement(JsonHighlighter, {
+    data,
+    testId: "usage-raw-json"
+  })))));
+};
+
+// src/containers/UsageContainer/UsageContainer.tsx
+var __dxlog_file = "/__w/dxos/dxos/packages/plugins/plugin-client/src/containers/UsageContainer/UsageContainer.tsx";
+var UsageContainer = () => {
+  const hubHttp = useHubHttpClient();
+  const [fetchState, setFetchState] = useState2({
+    state: "loading"
+  });
+  const [lastUpdated, setLastUpdated] = useState2();
+  const [refreshCount, setRefreshCount] = useState2(0);
+  useAsyncEffect(async () => {
+    if (!hubHttp) {
+      setFetchState({
+        state: "unavailable"
+      });
+      return;
+    }
+    setFetchState((previous) => previous.state === "ready" ? previous : {
+      state: "loading"
+    });
+    try {
+      const result = await hubHttp.getProfileUsage(new Context(void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 32 }));
+      setFetchState({
+        state: "ready",
+        data: result
+      });
+      setLastUpdated(Date.now());
+    } catch (err) {
+      log.catch(err, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 39, S: void 0 });
+      setFetchState({
+        state: "error"
+      });
+    }
+  }, [
+    hubHttp,
+    refreshCount
+  ]);
+  const handleRefresh = useCallback2(() => setRefreshCount((count) => count + 1), []);
+  return /* @__PURE__ */ React2.createElement(UsageView, {
+    ...fetchState,
+    lastUpdated,
+    onRefresh: handleRefresh
+  });
+};
+export {
+  UsageContainer as default
+};
+//# sourceMappingURL=UsageContainer-2DWCVVE4.mjs.map

package/dist/lib/neutral/UsageContainer-2DWCVVE4.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/containers/UsageContainer/UsageContainer.tsx", "../../../src/containers/UsageContainer/UsageView.tsx"],
+  "sourcesContent": ["//\n// Copyright 2026 DXOS.org\n//\n\nimport React, { useCallback, useState } from 'react';\n\nimport { Context } from '@dxos/context';\nimport { log } from '@dxos/log';\nimport { type GetProfileUsageResponse } from '@dxos/protocols';\nimport { useAsyncEffect } from '@dxos/react-ui';\n\nimport { useHubHttpClient } from '../../hooks';\nimport { UsageView, type UsageViewState } from './UsageView';\n\n/** State + payload kept together so `ready` always carries data (mirrors the discriminated `UsageViewProps`). */\ntype UsageFetchState = { state: Exclude<UsageViewState, 'ready'> } | { state: 'ready'; data: GetProfileUsageResponse };\n\n/**\n * Fetches rolling-window profile usage from the hub service and renders it.\n * Connected wrapper around the presentational {@link UsageView}.\n */\nexport const UsageContainer = () => {\n  const hubHttp = useHubHttpClient();\n  const [fetchState, setFetchState] = useState<UsageFetchState>({ state: 'loading' });\n  const [lastUpdated, setLastUpdated] = useState<number | undefined>();\n  const [refreshCount, setRefreshCount] = useState(0);\n\n  useAsyncEffect(async () => {\n    if (!hubHttp) {\n      setFetchState({ state: 'unavailable' });\n      return;\n    }\n    // Keep prior data visible while refetching; only show the loading state on first load.\n    setFetchState((previous) => (previous.state === 'ready' ? previous : { state: 'loading' }));\n    try {\n      const result = await hubHttp.getProfileUsage(new Context());\n      setFetchState({ state: 'ready', data: result });\n      setLastUpdated(Date.now());\n    } catch (err) {\n      log.catch(err);\n      setFetchState({ state: 'error' });\n    }\n  }, [hubHttp, refreshCount]);\n\n  const handleRefresh = useCallback(() => setRefreshCount((count) => count + 1), []);\n\n  return <UsageView {...fetchState} lastUpdated={lastUpdated} onRefresh={handleRefresh} />;\n};\n", "//\n// Copyright 2026 DXOS.org\n//\n\nimport * as Schema from 'effect/Schema';\nimport React, { useCallback, useMemo, useState } from 'react';\n\nimport { type GetProfileUsageResponse, type MeteringLimit, type MeteringUsageItem } from '@dxos/protocols';\nimport { IconButton, Message, Status, ToggleIconButton, useTranslation } from '@dxos/react-ui';\nimport { Form, type FormFieldProvider } from '@dxos/react-ui-form';\nimport { JsonHighlighter } from '@dxos/react-ui-syntax-highlighter';\n\nimport { meta } from '#meta';\n\nexport type UsageViewState = 'loading' | 'ready' | 'error' | 'unavailable';\n\ntype UsageViewCommonProps = {\n  /** Epoch milliseconds of the last successful fetch. */\n  lastUpdated?: number;\n  /** Invoked when the user requests a refresh. */\n  onRefresh?: () => void;\n};\n\n/**\n * Discriminated on `state`: the payload is required (and only present) when `state` is `'ready'`, so a\n * missing payload can't be silently rendered as an empty plan.\n */\nexport type UsageViewProps =\n  | (UsageViewCommonProps & { state: Exclude<UsageViewState, 'ready'>; data?: undefined })\n  | (UsageViewCommonProps & { state: 'ready'; data: GetProfileUsageResponse });\n\ntype TFunction = (key: string, options?: Record<string, unknown>) => string;\n\n/**\n * Whether a usage row falls under a limit. Subtype segments are matched positionally against\n * `subtypePattern` where `*` matches any segment.\n */\nconst usageMatchesLimit = (item: MeteringUsageItem, limit: MeteringLimit): boolean => {\n  if (item.eventType !== limit.eventType || item.valueKey !== limit.valueKey) {\n    return false;\n  }\n  return limit.subtypePattern.every((pattern, index) => pattern === '*' || pattern === item.subtypePattern[index]);\n};\n\n/** Sum every usage item that falls under the limit. */\nconst sumUsageForLimit = (usage: GetProfileUsageResponse['usage'], limit: MeteringLimit): number =>\n  usage.reduce((total, item) => (usageMatchesLimit(item, limit) ? total + item.amount : total), 0);\n\n/** Humanize a camelCase value key, e.g. `outputTokens` → `output tokens`. */\nconst formatValueKey = (valueKey: string): string =>\n  valueKey\n    .replace(/([A-Z])/g, ' $1')\n    .trim()\n    .toLowerCase();\n\n/**\n * Human label for a limit: a scope followed by the value key, e.g.\n * `{ eventType: 'ai', valueKey: 'outputTokens', subtypePattern: ['*'] }` → `All models · output tokens`,\n * `{ eventType: 'ai', valueKey: 'inputTokens', subtypePattern: ['claude-opus-4'] }` → `claude-opus-4 · input tokens`.\n */\nconst formatLimitLabel = (limit: MeteringLimit, t: TFunction): string => {\n  const metric = formatValueKey(limit.valueKey);\n  const subtype = limit.subtypePattern.filter((segment) => segment && segment !== '*').join('/');\n  if (limit.eventType === 'ai') {\n    return `${subtype || t('usage-all-models.label')} · ${metric}`;\n  }\n  return `${subtype ? `${limit.eventType}/${subtype}` : limit.eventType} · ${metric}`;\n};\n\nconst formatAmount = (amount: number): string => amount.toLocaleString();\n\nconst SECONDS_PER_HOUR = 60 * 60;\n\n/** Render `windowHours` as a localized \"N months / days / hours\" string. */\nconst formatWindow = (windowHours: number, t: TFunction): string => {\n  if (windowHours % (24 * 30) === 0) {\n    return t('usage-window-months.label', { count: windowHours / (24 * 30) });\n  }\n  if (windowHours % 24 === 0) {\n    return t('usage-window-days.label', { count: windowHours / 24 });\n  }\n  return t('usage-window-hours.label', { count: windowHours });\n};\n\ntype UsageRow = {\n  key: string;\n  /** Field label (schema `title` annotation). */\n  label: string;\n  /** Field caption (schema `description` annotation). */\n  caption: string;\n  /** Consumption as a whole percentage (`0`–`100`); `undefined` for an unlimited limit. */\n  percent?: number;\n  windowHours: number;\n};\n\n/** One display row per limit, shorter windows first. A `null` limit is reported as unlimited. */\nconst computeRows = (data: GetProfileUsageResponse, t: TFunction): UsageRow[] =>\n  data.limits\n    .map((limit): UsageRow => {\n      const used = sumUsageForLimit(data.usage, limit);\n      const label = formatLimitLabel(limit, t);\n      const windowHours = limit.windowDuration / SECONDS_PER_HOUR;\n      const window = formatWindow(windowHours, t);\n      const key = `${limit.eventType}/${limit.subtypePattern.join(',')}/${limit.valueKey}/${limit.windowDuration}/${limit.limit ?? 'unlimited'}`;\n      if (limit.limit === null) {\n        return {\n          key,\n          label,\n          caption: t('usage-unlimited.description', { used: formatAmount(used), window }),\n          windowHours,\n        };\n      }\n      const percent = limit.limit > 0 ? Math.min(100, Math.round((used / limit.limit) * 100)) : used > 0 ? 100 : 0;\n      return {\n        key,\n        label,\n        caption: `${t('usage-percent-used.label', { percent })} · ${t('usage-limit.description', { used: formatAmount(used), limit: formatAmount(limit.limit), window })}`,\n        percent,\n        windowHours,\n      };\n    })\n    .sort((left, right) => left.windowHours - right.windowHours);\n\n/**\n * A single usage field: an optional number carrying its label/caption as `title`/`description`\n * annotations and the consumption percentage as its value. Optional so the form renders no required\n * markers; `Schema.Number` keeps the field context-free (`R = never`) so the struct stays assignable to `Form`.\n */\nconst usageField = (title: string, description: string) =>\n  Schema.optional(Schema.Number.annotations({ title, description }));\n\n/**\n * Build the Effect schema (one annotated field per limit) and matching values. Unlimited limits have no\n * value, so their field reads `undefined` and the renderer shows the \"Unlimited\" label instead of a meter.\n */\nconst buildUsageForm = (rows: UsageRow[]) => {\n  const fields: Record<string, ReturnType<typeof usageField>> = {};\n  const values: Record<string, number> = {};\n  rows.forEach((row, index) => {\n    const field = `metric_${index}`;\n    fields[field] = usageField(row.label, row.caption);\n    if (row.percent !== undefined) {\n      values[field] = row.percent;\n    }\n  });\n  return { schema: Schema.Struct(fields), values };\n};\n\n/** Non-data states shown as a single `Message`, keyed by message variant (translation keys for the copy). */\nconst STATE_MESSAGES = {\n  unavailable: {\n    valence: 'warning',\n    icon: 'ph--cloud-slash--duotone',\n    title: 'usage-unavailable.title',\n    description: 'usage-unavailable.description',\n  },\n  error: {\n    valence: 'error',\n    icon: 'ph--cloud-x--duotone',\n    title: 'usage-offline.title',\n    description: 'usage-offline.description',\n  },\n  empty: {\n    valence: 'neutral',\n    icon: 'ph--chart-bar--duotone',\n    title: 'usage-empty.title',\n    description: 'usage-empty.description',\n  },\n} as const;\n\n/**\n * Presentational view of profile usage: renders loading/error/unavailable/empty states, or a\n * schema-driven settings form (one read-only field per limit), plus a refresh control and a\n * collapsible raw-response viewer. Pure — all data via props.\n */\nexport const UsageView = ({ state, data, lastUpdated, onRefresh }: UsageViewProps) => {\n  const { t } = useTranslation(meta.profile.key);\n  const [rawExpanded, setRawExpanded] = useState(false);\n\n  const { schema, values, empty } = useMemo(() => {\n    const rows = data ? computeRows(data, t) : [];\n    return { ...buildUsageForm(rows), empty: rows.length === 0 };\n  }, [data, t]);\n\n  // Non-data states resolve to a `Message`; `loading` shows a spinner and `ready` with data shows the form.\n  const message =\n    state === 'unavailable'\n      ? STATE_MESSAGES.unavailable\n      : state === 'error'\n        ? STATE_MESSAGES.error\n        : state === 'ready' && empty\n          ? STATE_MESSAGES.empty\n          : undefined;\n\n  // Render each metric as a meter from its percentage value; unlimited limits (no value) show a label.\n  const meterFieldProvider = useCallback<FormFieldProvider>(\n    ({ fieldProps: { label, description, getValue } }) => {\n      const percent = getValue();\n      return (\n        <Form.Row label={label} description={description}>\n          {typeof percent === 'number' ? (\n            <Status progress={percent / 100} aria-label={t('usage-percent-used.label', { percent })} />\n          ) : (\n            t('usage-unlimited.label')\n          )}\n        </Form.Row>\n      );\n    },\n    [t],\n  );\n\n  return (\n    <Form.Root variant='settings' layout='static' schema={schema} values={values}>\n      <Form.Viewport scroll>\n        <Form.Content>\n          <Form.Section title={t('usage-section.title')} description={t('usage-section.description')}>\n            {state === 'loading' ? (\n              <Status indeterminate aria-label={t('usage-section.title')} />\n            ) : message ? (\n              <Message.Root valence={message.valence}>\n                <Message.Title icon={message.icon}>{t(message.title)}</Message.Title>\n                <Message.Content>{t(message.description)}</Message.Content>\n              </Message.Root>\n            ) : (\n              <Form.FieldSet fieldProvider={meterFieldProvider} />\n            )}\n          </Form.Section>\n\n          {state === 'ready' && data && (\n            <Form.Section>\n              <Form.Row\n                label={\n                  lastUpdated !== undefined\n                    ? t('usage-last-updated.label', { time: new Date(lastUpdated).toLocaleTimeString() })\n                    : t('usage-refresh.label')\n                }\n              >\n                {onRefresh && (\n                  <IconButton\n                    iconOnly\n                    variant='ghost'\n                    icon='ph--arrow-clockwise--regular'\n                    label={t('usage-refresh.label')}\n                    onClick={onRefresh}\n                  />\n                )}\n              </Form.Row>\n            </Form.Section>\n          )}\n\n          {state === 'ready' && data && (\n            <Form.Section>\n              <Form.Row label={t('usage-raw-json.label')}>\n                <ToggleIconButton\n                  iconOnly\n                  variant='ghost'\n                  active={rawExpanded}\n                  icon='ph--caret-right--regular'\n                  label={t('usage-raw-json.label')}\n                  onClick={() => setRawExpanded((value) => !value)}\n                />\n              </Form.Row>\n              {rawExpanded && <JsonHighlighter data={data} testId='usage-raw-json' />}\n            </Form.Section>\n          )}\n        </Form.Content>\n      </Form.Viewport>\n    </Form.Root>\n  );\n};\n"],
+  "mappings": "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",
+  "names": ["React", "useCallback", "useState", "Context", "log", "useAsyncEffect", "Schema", "React", "useCallback", "useMemo", "useState", "IconButton", "Message", "Status", "ToggleIconButton", "useTranslation", "Form", "JsonHighlighter", "meta", "usageMatchesLimit", "item", "limit", "eventType", "valueKey", "subtypePattern", "every", "pattern", "index", "sumUsageForLimit", "usage", "reduce", "total", "amount", "formatValueKey", "replace", "trim", "toLowerCase", "formatLimitLabel", "t", "metric", "subtype", "filter", "segment", "join", "formatAmount", "toLocaleString", "SECONDS_PER_HOUR", "formatWindow", "windowHours", "count", "computeRows", "data", "limits", "map", "used", "label", "windowDuration", "window", "key", "caption", "percent", "Math", "min", "round", "sort", "left", "right", "usageField", "title", "description", "optional", "Number", "annotations", "buildUsageForm", "rows", "fields", "values", "forEach", "row", "field", "undefined", "schema", "Struct", "STATE_MESSAGES", "unavailable", "valence", "icon", "error", "empty", "UsageView", "state", "lastUpdated", "onRefresh", "profile", "rawExpanded", "setRawExpanded", "length", "message", "meterFieldProvider", "fieldProps", "getValue", "Row", "progress", "aria-label", "Root", "variant", "layout", "Viewport", "scroll", "Content", "Section", "indeterminate", "Title", "FieldSet", "fieldProvider", "time", "Date", "toLocaleTimeString", "iconOnly", "onClick", "active", "value", "testId", "fetchState", "setFetchState", "state", "useState", "lastUpdated", "useAsyncEffect", "result", "setLastUpdated", "log", "err", "hubHttp", "useCallback", "onRefresh"]
+}

package/dist/lib/neutral/account-cache-YVQKLNV2.mjs

@@ -0,0 +1,16 @@
+import "./chunk-J5LGTIGS.mjs";
+
+// src/capabilities/account-cache.ts
+import * as Effect from "effect/Effect";
+import { Capability } from "@dxos/app-framework";
+import { createKvsStore } from "@dxos/effect";
+import { AccountCache, ClientCapabilities } from "#types";
+var account_cache_default = Capability.makeModule(() => Effect.succeed(Capability.contributes(ClientCapabilities.AccountCache, createKvsStore({
+  key: "composer.account",
+  schema: AccountCache,
+  defaultValue: () => ({})
+}))));
+export {
+  account_cache_default as default
+};
+//# sourceMappingURL=account-cache-YVQKLNV2.mjs.map

package/dist/lib/neutral/account-cache-YVQKLNV2.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/capabilities/account-cache.ts"],
+  "sourcesContent": ["//\n// Copyright 2026 DXOS.org\n//\n\nimport * as Effect from 'effect/Effect';\n\nimport { Capability } from '@dxos/app-framework';\nimport { createKvsStore } from '@dxos/effect';\n\nimport { AccountCache, ClientCapabilities } from '#types';\n\nexport default Capability.makeModule(() =>\n  Effect.succeed(\n    Capability.contributes(\n      ClientCapabilities.AccountCache,\n      createKvsStore<AccountCache>({\n        key: 'composer.account',\n        schema: AccountCache,\n        defaultValue: () => ({}),\n      }),\n    ),\n  ),\n);\n"],
+  "mappings": ";;;AAIA,YAAYA,YAAY;AAExB,SAASC,kBAAkB;AAC3B,SAASC,sBAAsB;AAE/B,SAASC,cAAcC,0BAA0B;AAEjD,IAAA,wBAAeH,WAAWI,WAAW,MAC5BC,eACLL,WAAWM,YACTH,mBAAmBD,cACnBD,eAA6B;EAC3BM,KAAK;EACLC,QAAQN;EACRO,cAAc,OAAO,CAAC;AACxB,CAAA,CAAA,CAAA,CAAA;",
+  "names": ["Effect", "Capability", "createKvsStore", "AccountCache", "ClientCapabilities", "makeModule", "succeed", "contributes", "key", "schema", "defaultValue"]
+}

package/dist/lib/neutral/{app-graph-builder-A74W7C36.mjs → app-graph-builder-RVXTD6OE.mjs}

@@ -22,7 +22,7 @@ var app_graph_builder_default = Capability.makeModule(Effect.fnUntraced(function
           label: [
             "open-user-account.label",
             {
-              ns: meta.id
+              ns: meta.profile.key
             }
           ],
           icon: "ph--user--regular",
@@ -36,19 +36,19 @@ var app_graph_builder_default = Capability.makeModule(Effect.fnUntraced(function
         }
       }
     ]),
-    connector: Effect.fnUntraced(function* (node, get) {
+    connector: (node, get) => Effect.gen(function* () {
       const client = yield* Capability.get(ClientCapabilities.Client);
       const identity = get(CreateAtom.fromObservable(client.halo.identity));
       const status = get(CreateAtom.fromObservable(client.mesh.networkStatus));
       return [
         Node.make({
           id: Account.id,
-          type: meta.id,
+          type: meta.profile.key,
           properties: {
             label: [
               "account.label",
               {
-                ns: meta.id
+                ns: meta.profile.key
               }
             ],
             icon: "ph--user--regular",
@@ -64,12 +64,12 @@ var app_graph_builder_default = Capability.makeModule(Effect.fnUntraced(function
             Node.make({
               id: Account.Profile,
               data: Account.Profile,
-              type: meta.id,
+              type: meta.profile.key,
               properties: {
                 label: [
                   "profile.label",
                   {
-                    ns: meta.id
+                    ns: meta.profile.key
                   }
                 ],
                 icon: "ph--user--regular"
@@ -78,12 +78,12 @@ var app_graph_builder_default = Capability.makeModule(Effect.fnUntraced(function
             Node.make({
               id: Account.Account,
               data: Account.Account,
-              type: meta.id,
+              type: meta.profile.key,
               properties: {
                 label: [
                   "account-panel.label",
                   {
-                    ns: meta.id
+                    ns: meta.profile.key
                   }
                 ],
                 icon: "ph--identification-card--regular"
@@ -92,12 +92,12 @@ var app_graph_builder_default = Capability.makeModule(Effect.fnUntraced(function
             Node.make({
               id: Account.Devices,
               data: Account.Devices,
-              type: meta.id,
+              type: meta.profile.key,
               properties: {
                 label: [
                   "devices.label",
                   {
-                    ns: meta.id
+                    ns: meta.profile.key
                   }
                 ],
                 icon: "ph--devices--regular",
@@ -107,12 +107,12 @@ var app_graph_builder_default = Capability.makeModule(Effect.fnUntraced(function
             Node.make({
               id: Account.Security,
               data: Account.Security,
-              type: meta.id,
+              type: meta.profile.key,
               properties: {
                 label: [
                   "security.label",
                   {
-                    ns: meta.id
+                    ns: meta.profile.key
                   }
                 ],
                 icon: "ph--key--regular"
@@ -121,25 +121,39 @@ var app_graph_builder_default = Capability.makeModule(Effect.fnUntraced(function
             Node.make({
               id: Account.Invitations,
               data: Account.Invitations,
-              type: meta.id,
+              type: meta.profile.key,
               properties: {
                 label: [
                   "invitations-panel.label",
                   {
-                    ns: meta.id
+                    ns: meta.profile.key
                   }
                 ],
                 icon: "ph--ticket--regular"
               }
+            }),
+            Node.make({
+              id: Account.Usage,
+              data: Account.Usage,
+              type: meta.profile.key,
+              properties: {
+                label: [
+                  "usage-panel.label",
+                  {
+                    ns: meta.profile.key
+                  }
+                ],
+                icon: "ph--chart-bar--regular"
+              }
             })
           ]
         })
       ];
-    })
+    }).pipe(Effect.orDie)
   });
   return Capability.contributes(AppCapabilities.AppGraphBuilder, extensions);
 }));
 export {
   app_graph_builder_default as default
 };
-//# sourceMappingURL=app-graph-builder-A74W7C36.mjs.map
+//# sourceMappingURL=app-graph-builder-RVXTD6OE.mjs.map

package/dist/lib/neutral/app-graph-builder-RVXTD6OE.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/capabilities/app-graph-builder.ts"],
+  "sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\nimport * as Effect from 'effect/Effect';\n\nimport { Capability } from '@dxos/app-framework';\nimport { AppCapabilities } from '@dxos/app-toolkit';\nimport { Operation } from '@dxos/compute';\nimport { CreateAtom, GraphBuilder, Node, NodeMatcher } from '@dxos/plugin-graph';\nimport { ConnectionState } from '@dxos/react-client/mesh';\n\nimport { meta } from '#meta';\nimport { ClientOperation } from '#operations';\nimport { Account, ClientCapabilities } from '#types';\n\nexport default Capability.makeModule(\n  Effect.fnUntraced(function* () {\n    const extensions = yield* GraphBuilder.createExtension({\n      id: 'root',\n      match: NodeMatcher.whenRoot,\n      actions: () =>\n        Effect.succeed([\n          {\n            id: 'openUserAccount',\n            data: () => Operation.invoke(ClientOperation.ShareIdentity),\n            properties: {\n              label: ['open-user-account.label', { ns: meta.profile.key }],\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      connector: (node, get) =>\n        Effect.gen(function* () {\n          const client = yield* Capability.get(ClientCapabilities.Client);\n          const identity = get(CreateAtom.fromObservable(client.halo.identity));\n          const status = get(CreateAtom.fromObservable(client.mesh.networkStatus));\n\n          return [\n            Node.make({\n              id: Account.id,\n              type: meta.profile.key,\n              properties: {\n                label: ['account.label', { ns: meta.profile.key }],\n                icon: 'ph--user--regular',\n                disposition: 'user-account',\n                testId: 'clientPlugin.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                Node.make({\n                  id: Account.Profile,\n                  data: Account.Profile,\n                  type: meta.profile.key,\n                  properties: {\n                    label: ['profile.label', { ns: meta.profile.key }],\n                    icon: 'ph--user--regular',\n                  },\n                }),\n                Node.make({\n                  id: Account.Account,\n                  data: Account.Account,\n                  type: meta.profile.key,\n                  properties: {\n                    label: ['account-panel.label', { ns: meta.profile.key }],\n                    icon: 'ph--identification-card--regular',\n                  },\n                }),\n                Node.make({\n                  id: Account.Devices,\n                  data: Account.Devices,\n                  type: meta.profile.key,\n                  properties: {\n                    label: ['devices.label', { ns: meta.profile.key }],\n                    icon: 'ph--devices--regular',\n                    testId: 'clientPlugin.devices',\n                  },\n                }),\n                Node.make({\n                  id: Account.Security,\n                  data: Account.Security,\n                  type: meta.profile.key,\n                  properties: {\n                    label: ['security.label', { ns: meta.profile.key }],\n                    icon: 'ph--key--regular',\n                  },\n                }),\n                Node.make({\n                  id: Account.Invitations,\n                  data: Account.Invitations,\n                  type: meta.profile.key,\n                  properties: {\n                    label: ['invitations-panel.label', { ns: meta.profile.key }],\n                    icon: 'ph--ticket--regular',\n                  },\n                }),\n                Node.make({\n                  id: Account.Usage,\n                  data: Account.Usage,\n                  type: meta.profile.key,\n                  properties: {\n                    label: ['usage-panel.label', { ns: meta.profile.key }],\n                    icon: 'ph--chart-bar--regular',\n                  },\n                }),\n              ],\n            }),\n          ];\n        }).pipe(Effect.orDie),\n    });\n\n    return Capability.contributes(AppCapabilities.AppGraphBuilder, extensions);\n  }),\n);\n"],
+  "mappings": "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",
+  "names": ["Effect", "Capability", "AppCapabilities", "Operation", "CreateAtom", "GraphBuilder", "Node", "NodeMatcher", "ConnectionState", "meta", "ClientOperation", "Account", "ClientCapabilities", "makeModule", "fnUntraced", "extensions", "createExtension", "id", "match", "whenRoot", "actions", "succeed", "data", "invoke", "ShareIdentity", "properties", "label", "ns", "profile", "key", "icon", "disposition", "keyBinding", "macos", "windows", "linux", "connector", "node", "get", "gen", "client", "Client", "identity", "fromObservable", "halo", "status", "mesh", "networkStatus", "make", "type", "testId", "userId", "identityKey", "toHex", "hue", "emoji", "swarm", "OFFLINE", "nodes", "Profile", "Devices", "Security", "Invitations", "Usage", "pipe", "orDie", "contributes", "AppGraphBuilder"]
+}

package/dist/lib/neutral/capabilities/index.mjs

@@ -5,18 +5,18 @@ import { Capability as Capability2 } from "@dxos/app-framework";
 
 // src/capabilities/navigation-handler/index.ts
 import { Capability } from "@dxos/app-framework";
-var NavigationHandler = Capability.lazy("NavigationHandler", () => import("../navigation-handler-LU26CDFR.mjs"));
+var NavigationHandler = Capability.lazy("NavigationHandler", () => import("../navigation-handler-MQ6MZXLX.mjs"));
 
 // src/capabilities/index.ts
-var AccountCache = Capability2.lazy("AccountCache", () => import("../account-cache-4EKGEUJI.mjs"));
-var AppGraphBuilder = Capability2.lazy("AppGraphBuilder", () => import("../app-graph-builder-A74W7C36.mjs"));
+var AccountCache = Capability2.lazy("AccountCache", () => import("../account-cache-YVQKLNV2.mjs"));
+var AppGraphBuilder = Capability2.lazy("AppGraphBuilder", () => import("../app-graph-builder-RVXTD6OE.mjs"));
 var HubHttpClient = Capability2.lazy("HubHttpClient", () => import("../hub-http-client-WOJUCDKV.mjs"));
 var Client = Capability2.lazy("Client", () => import("../client-7I5Y5SOA.mjs"));
-var LayerSpecs = Capability2.lazy("LayerSpecs", () => import("../layer-specs-CQLXQBQJ.mjs"));
+var LayerSpecs = Capability2.lazy("LayerSpecs", () => import("../layer-specs-YI7BVWKZ.mjs"));
 var Migrations = Capability2.lazy("Migrations", () => import("../migrations-7FTW55ER.mjs"));
 var OperationHandler = Capability2.lazy("OperationHandler", () => import("../operation-handler-E3HB7E2T.mjs"));
-var ReactContext = Capability2.lazy("ReactContext", () => import("../react-context-B5LXMHVM.mjs"));
-var ReactSurface = Capability2.lazy("ReactSurface", () => import("../react-surface-DEKGWTCD.mjs"));
+var ReactContext = Capability2.lazy("ReactContext", () => import("../react-context-V74T6JOJ.mjs"));
+var ReactSurface = Capability2.lazy("ReactSurface", () => import("../react-surface-HPXRA65U.mjs"));
 var SchemaDefs = Capability2.lazy("SchemaDefs", () => import("../schema-defs-IHBCKTMM.mjs"));
 export {
   AccountCache,

package/dist/lib/neutral/capabilities/node.mjs

@@ -2,11 +2,11 @@ import "../chunk-J5LGTIGS.mjs";
 
 // src/capabilities/node.ts
 import { Capability } from "@dxos/app-framework";
-var AppGraphBuilder = Capability.lazy("AppGraphBuilder", () => import("../app-graph-builder-A74W7C36.mjs"));
+var AppGraphBuilder = Capability.lazy("AppGraphBuilder", () => import("../app-graph-builder-RVXTD6OE.mjs"));
 var Client = Capability.lazy("Client", () => import("../client-7I5Y5SOA.mjs"));
-var LayerSpecs = Capability.lazy("LayerSpecs", () => import("../layer-specs-CQLXQBQJ.mjs"));
+var LayerSpecs = Capability.lazy("LayerSpecs", () => import("../layer-specs-YI7BVWKZ.mjs"));
 var Migrations = Capability.lazy("Migrations", () => import("../migrations-7FTW55ER.mjs"));
-var NavigationHandler = Capability.lazy("NavigationHandler", () => import("../navigation-handler-LU26CDFR.mjs"));
+var NavigationHandler = Capability.lazy("NavigationHandler", () => import("../navigation-handler-MQ6MZXLX.mjs"));
 var OperationHandler = Capability.lazy("OperationHandler", () => import("../operation-handler-E3HB7E2T.mjs"));
 var SchemaDefs = Capability.lazy("SchemaDefs", () => import("../schema-defs-IHBCKTMM.mjs"));
 export {