@dxos/plugin-client 0.8.4-staging.60fe92afc8 → 0.9.1-main.c7dcc2e112

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/containers/DevicesContainer/DevicesContainer.tsx"],
+  "sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\nimport React, { useCallback, useEffect, useState } from 'react';\nimport { QR } from 'react-qr-rounded';\n\nimport { useOperationInvoker } from '@dxos/app-framework/ui';\nimport { log } from '@dxos/log';\nimport { useClient, useMulticastObservable } from '@dxos/react-client';\nimport { type Device, useDevices } from '@dxos/react-client/halo';\nimport { type CancellableInvitationObservable, Invitation, InvitationEncoder } from '@dxos/react-client/invitations';\nimport { useNetworkStatus } from '@dxos/react-client/mesh';\nimport { Button, Clipboard, Icon, IconButton, List, useId, useTranslation } from '@dxos/react-ui';\nimport { Settings } from '@dxos/react-ui-form';\nimport { AuthCode, Centered, DeviceListItem, Emoji, Viewport } from '@dxos/shell/react';\nimport { osTranslations } from '@dxos/ui-theme';\nimport { hexToEmoji } from '@dxos/util';\n\nimport { meta } from '#meta';\nimport { ClientOperation } from '#operations';\n\nexport type DevicesContainerProps = {\n  createInvitationUrl?: (invitationCode: string) => string;\n};\n\nexport const DevicesContainer = ({ createInvitationUrl }: DevicesContainerProps) => {\n  const { t } = useTranslation(meta.profile.key);\n  const { invokePromise } = useOperationInvoker();\n  const devices = useDevices();\n  const { swarm: connectionState } = useNetworkStatus();\n\n  const handleResetStorage = useCallback(() => invokePromise(ClientOperation.ResetStorage, {}), [invokePromise]);\n\n  const handleRecover = useCallback(\n    () => invokePromise(ClientOperation.ResetStorage, { mode: 'recover' }),\n    [invokePromise],\n  );\n\n  const handleJoinNewIdentity = useCallback(\n    () => invokePromise(ClientOperation.ResetStorage, { mode: 'join-new-identity' }),\n    [invokePromise],\n  );\n\n  return (\n    <Clipboard.Provider>\n      <Settings.Viewport>\n        <Settings.Section\n          title={t('devices-verbose.label', { ns: meta.profile.key })}\n          description={t('devices.description', { ns: meta.profile.key })}\n        >\n          <Settings.Panel>\n            <div role='group' className='min-w-0'>\n              <h3 className='text-lg mb-2'>{t('devices.label', { ns: meta.profile.key })}</h3>\n              <List>\n                {devices.map((device: Device) => (\n                  <DeviceListItem key={device.deviceKey.toHex()} device={device} connectionState={connectionState} />\n                ))}\n              </List>\n            </div>\n            {createInvitationUrl && (\n              <div role='group' className='min-w-0'>\n                <h3 className='text-lg mb-2'>{t('add-device.label')}</h3>\n                <DeviceInvitation createInvitationUrl={createInvitationUrl} />\n              </div>\n            )}\n          </Settings.Panel>\n        </Settings.Section>\n        <Settings.Section\n          title={t('danger-zone.title', { ns: meta.profile.key })}\n          description={t('danger-zone.description', { ns: meta.profile.key })}\n        >\n          <Settings.Item\n            title={t('reset-device.label')}\n            description={t('reset-device.description', { ns: meta.profile.key })}\n          >\n            <Button variant='destructive' onClick={handleResetStorage} data-testid='devicesContainer.reset'>\n              {t('reset-device.label')}\n            </Button>\n          </Settings.Item>\n          <Settings.Item\n            title={t('recover-identity.label')}\n            description={t('recover-identity.description', { ns: meta.profile.key })}\n          >\n            <Button variant='destructive' onClick={handleRecover} data-testid='devicesContainer.recover'>\n              {t('recover-identity.label')}\n            </Button>\n          </Settings.Item>\n          <Settings.Item\n            title={t('join-new-identity.label')}\n            description={t('join-new-identity.description', { ns: meta.profile.key })}\n          >\n            <Button variant='destructive' onClick={handleJoinNewIdentity} data-testid='devicesContainer.joinExisting'>\n              {t('join-new-identity.label')}\n            </Button>\n          </Settings.Item>\n        </Settings.Section>\n      </Settings.Viewport>\n    </Clipboard.Provider>\n  );\n};\n\ntype DeviceInvitationProps = {\n  invitation?: CancellableInvitationObservable;\n  createInvitationUrl: (invitationCode: string) => string;\n  onInvitationDone: () => void;\n  onInvitationCreate: () => void;\n};\n\nconst DeviceInvitation = (props: Pick<DeviceInvitationProps, 'createInvitationUrl'>) => {\n  const client = useClient();\n  const [invitation, setInvitation] = useState<CancellableInvitationObservable>();\n\n  const onInvitationCreate = useCallback(() => {\n    const invitation = client.halo.share();\n    if (client.config.values.runtime?.app?.env?.DX_ENVIRONMENT !== 'production') {\n      const subscription = invitation.subscribe((invitation: Invitation) => {\n        const invitationCode = InvitationEncoder.encode(invitation);\n        if (invitation.state === Invitation.State.CONNECTING) {\n          log.info(JSON.stringify({ invitationCode, authCode: invitation.authCode }));\n          subscription.unsubscribe();\n        }\n      });\n    }\n    setInvitation(invitation);\n  }, [client]);\n\n  const onInvitationDone = useCallback(() => {\n    setInvitation(undefined);\n  }, []);\n\n  if (invitation) {\n    return <DeviceInvitationImpl {...props} {...{ invitation, onInvitationCreate, onInvitationDone }} />;\n  } else {\n    return <InvitationSection {...props} {...{ onInvitationCreate, onInvitationDone }} />;\n  }\n};\n\nconst DeviceInvitationImpl = ({\n  invitation: invitationObservable,\n  createInvitationUrl,\n  onInvitationDone,\n  onInvitationCreate,\n}: DeviceInvitationProps) => {\n  const invitation = useMulticastObservable(invitationObservable!);\n  const url = createInvitationUrl(InvitationEncoder.encode(invitation));\n\n  useEffect(() => {\n    if (invitation.state >= Invitation.State.SUCCESS) {\n      onInvitationDone();\n    }\n  }, [invitation.state]);\n\n  return <InvitationSection {...invitation} {...{ url, onInvitationDone, onInvitationCreate }} />;\n};\n\ntype InvitationComponentProps = Partial<\n  Pick<Invitation, 'authCode' | 'invitationId'> &\n    Pick<DeviceInvitationProps, 'onInvitationDone' | 'onInvitationCreate'> & {\n      state: number;\n      url: string;\n    }\n>;\n\nconst InvitationSection = ({\n  state = -1,\n  authCode,\n  invitationId = 'never',\n  url = 'never',\n  onInvitationDone = () => {},\n  onInvitationCreate = () => {},\n}: InvitationComponentProps) => {\n  const { t } = useTranslation(meta.profile.key);\n  const activeView =\n    state < 0\n      ? 'init'\n      : state >= Invitation.State.CANCELLED\n        ? 'complete'\n        : state >= Invitation.State.READY_FOR_AUTHENTICATION && authCode\n          ? 'auth-code'\n          : 'qr-code';\n\n  return activeView === 'init' ? (\n    <>\n      <p className='text-description mb-2'>{t('add-device.description')}</p>\n      <IconButton\n        icon='ph--plus--regular'\n        label={t('create-device-invitation.label')}\n        disabled={state >= 0}\n        classNames='w-full'\n        data-testid='devicesContainer.createInvitation'\n        onClick={onInvitationCreate}\n      />\n    </>\n  ) : (\n    <Viewport.Root activeView={activeView}>\n      <Viewport.Views>\n        <Viewport.View id='init'>\n          {/* This view intentionally left blank while conditionally rendering the viewport. */}\n        </Viewport.View>\n        <Viewport.View id='complete'>\n          <InvitationComplete statusValue={state} />\n        </Viewport.View>\n        <Viewport.View id='auth-code'>\n          <InvitationAuthCode id={invitationId} code={authCode ?? 'never'} onCancel={onInvitationDone} />\n        </Viewport.View>\n        <Viewport.View id='qr-code'>\n          <InvitationQR id={invitationId} url={url} onCancel={onInvitationDone} />\n        </Viewport.View>\n      </Viewport.Views>\n    </Viewport.Root>\n  );\n};\n\nconst InvitationQR = ({ id, url, onCancel }: { id: string; url: string; onCancel: () => void }) => {\n  const { t } = useTranslation(osTranslations);\n  const qrLabel = useId('devices-container__qr-code');\n  const emoji = hexToEmoji(id);\n  return (\n    <>\n      <p className='text-description'>{t('qr-code.description', { ns: meta.profile.key })}</p>\n      <div role='group' className='grid grid-cols-[1fr_min-content]'>\n        <div className='flex justify-center py-4'>\n          <div className='w-full md:max-w-80 aspect-square relative text-description'>\n            <QR\n              rounding={100}\n              backgroundColor='transparent'\n              color='currentColor'\n              aria-labelledby={qrLabel}\n              errorCorrectionLevel='Q'\n              cutout={true}\n            >\n              {url ?? 'never'}\n            </QR>\n            <Centered>\n              <Emoji text={emoji} />\n            </Centered>\n          </div>\n        </div>\n        <span id={qrLabel} className='sr-only'>\n          {t('qr.label')}\n        </span>\n      </div>\n      {/* TODO(burdon): Factor out button bar */}\n      <div className='flex justify-center'>\n        <div className='flex gap-2'>\n          <Clipboard.Button value={url ?? 'never'} />\n          <Button variant='ghost' onClick={onCancel}>\n            {t('cancel.label')}\n          </Button>\n        </div>\n      </div>\n    </>\n  );\n};\n\nconst InvitationAuthCode = ({ id, code, onCancel }: { id: string; code: string; onCancel: () => void }) => {\n  const { t } = useTranslation(osTranslations);\n  const emoji = hexToEmoji(id);\n\n  return (\n    <>\n      <p className='text-description'>{t('auth-other-device-emoji.message')}</p>\n      {emoji && <Emoji text={emoji} className='mx-auto my-2 text-center' />}\n      <p className='text-description'>{t('auth-code.message')}</p>\n      <AuthCode code={code} large classNames='mx-auto my-2 text-center grow' />\n      <Button variant='ghost' onClick={onCancel}>\n        {t('cancel.label')}\n      </Button>\n    </>\n  );\n};\n\nconst InvitationComplete = ({ statusValue }: { statusValue: number }) => {\n  return statusValue > 0 ? (\n    <Icon icon='ph--check--regular' size={6} classNames='m-1.5' />\n  ) : (\n    <Icon icon='ph--x--regular' size={6} classNames='m-1.5' />\n  );\n};\n"],
+  "mappings": "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",
+  "names": ["React", "useCallback", "useEffect", "useState", "QR", "useOperationInvoker", "log", "useClient", "useMulticastObservable", "useDevices", "Invitation", "InvitationEncoder", "useNetworkStatus", "Button", "Clipboard", "Icon", "IconButton", "List", "useId", "useTranslation", "Settings", "AuthCode", "Centered", "DeviceListItem", "Emoji", "Viewport", "osTranslations", "hexToEmoji", "meta", "ClientOperation", "DevicesContainer", "invokePromise", "devices", "swarm", "connectionState", "handleResetStorage", "profile", "key", "description", "t", "role", "className", "ns", "device", "deviceKey", "createInvitationUrl", "title", "variant", "data-testid", "handleRecover", "handleJoinNewIdentity", "DeviceInvitation", "props", "setInvitation", "onInvitationCreate", "invitation", "halo", "share", "values", "app", "env", "subscription", "subscribe", "invitationCode", "state", "State", "stringify", "authCode", "unsubscribe", "client", "onInvitationDone", "SUCCESS", "url", "CANCELLED", "READY_FOR_AUTHENTICATION", "activeView", "icon", "label", "disabled", "classNames", "onClick", "Views", "id", "InvitationComplete", "statusValue", "InvitationAuthCode", "invitationId", "onCancel", "InvitationQR", "emoji", "div", "rounding", "backgroundColor", "color", "aria-labelledby", "errorCorrectionLevel", "cutout", "text", "span", "qrLabel", "value", "code", "large", "size"]
+}

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

@@ -14,7 +14,7 @@ import { meta } from "#meta";
 import { ClientCapabilities } from "#types";
 var __dxlog_file = "/__w/dxos/dxos/packages/plugins/plugin-client/src/containers/InvitationsContainer/InvitationsContainer.tsx";
 var InvitationsContainer = () => {
-  const { t } = useTranslation(meta.id);
+  const { t } = useTranslation(meta.profile.key);
   const accountCacheAtom = useCapability(ClientCapabilities.AccountCache);
   const [cache] = useAtom(accountCacheAtom);
   const setCache = useAtomSet(accountCacheAtom);
@@ -129,4 +129,4 @@ var RedeemedInvitationItem = ({ row }) => {
 export {
   InvitationsContainer as default
 };
-//# sourceMappingURL=InvitationsContainer-ME722VKS.mjs.map
+//# sourceMappingURL=InvitationsContainer-OBBCJ7CJ.mjs.map

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

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

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

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

package/dist/lib/neutral/JoinDialog-4BWV4CYB.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/containers/JoinDialog/JoinDialog.tsx"],
+  "sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport React, { useCallback } from 'react';\n\nimport { useOperationInvoker } from '@dxos/app-framework/ui';\nimport { LayoutOperation } from '@dxos/app-toolkit';\nimport { ObservabilityOperation } from '@dxos/plugin-observability';\nimport { type InvitationResult } from '@dxos/react-client/invitations';\nimport { Dialog, useTranslation } from '@dxos/react-ui';\nimport { JoinPanel, type JoinPanelProps } from '@dxos/shell/react';\nimport { osTranslations } from '@dxos/ui-theme';\n\nimport { meta } from '#meta';\nimport { ClientOperation } from '#operations';\n\nexport const JoinDialog = (props: JoinPanelProps) => {\n  const { invokePromise } = useOperationInvoker();\n  const { t } = useTranslation(meta.profile.key);\n\n  const handleCancelResetStorage = useCallback(() => invokePromise(ClientOperation.ShareIdentity), [invokePromise]);\n\n  const handleDone = useCallback(\n    async (result: InvitationResult | null) => {\n      if (result?.identityKey) {\n        await Promise.all([\n          invokePromise(LayoutOperation.UpdateDialog, { state: false }),\n          invokePromise(ObservabilityOperation.SendEvent, {\n            name: props.initialDisposition === 'recover-identity' ? 'identity.recover' : 'identity.join',\n          }),\n        ]);\n      }\n    },\n    [invokePromise],\n  );\n\n  // TODO(burdon): Move JoinHeading into Dialog.Heading.\n  return (\n    <Dialog.Content>\n      <Dialog.Header>\n        <Dialog.Title classNames='sr-only'>{t('join-space.label', { ns: osTranslations })}</Dialog.Title>\n      </Dialog.Header>\n      <Dialog.Body>\n        <JoinPanel\n          {...props}\n          mode='halo-only'\n          exitActionParent={<Dialog.Close asChild />}\n          doneActionParent={<Dialog.Close asChild />}\n          onCancelResetStorage={handleCancelResetStorage}\n          onDone={handleDone}\n        />\n      </Dialog.Body>\n    </Dialog.Content>\n  );\n};\n"],
+  "mappings": ";;;AAIA,OAAOA,SAASC,mBAAmB;AAEnC,SAASC,2BAA2B;AACpC,SAASC,uBAAuB;AAChC,SAASC,8BAA8B;AAEvC,SAASC,QAAQC,sBAAsB;AACvC,SAASC,iBAAsC;AAC/C,SAASC,sBAAsB;AAE/B,SAASC,YAAY;AACrB,SAASC,uBAAuB;AAEzB,IAAMC,aAAa,CAACC,UAAAA;AACzB,QAAM,EAAEC,cAAa,IAAKX,oBAAAA;AAC1B,QAAM,EAAEY,EAAC,IAAKR,eAAeG,KAAKM,QAAQC,GAAG;AAE7C,QAAMC,2BAA2BhB,YAAY,MAAMY,cAAcH,gBAAgBQ,aAAa,GAAG;IAACL;GAAc;AAEhH,QAAMM,aAAalB,YACjB,OAAOmB,WAAAA;AACL,QAAIA,QAAQC,aAAa;AACvB,YAAMC,QAAQC,IAAI;QAChBV,cAAcV,gBAAgBqB,cAAc;UAAEC,OAAO;QAAM,CAAA;QAC3DZ,cAAcT,uBAAuBsB,WAAW;UAC9CC,MAAMf,MAAMgB,uBAAuB,qBAAqB,qBAAqB;QAC/E,CAAA;OACD;IACH;EACF,GACA;IAACf;GAAc;AAIjB,SACE,sBAAA,cAACR,OAAOwB,SAAO,MACb,sBAAA,cAACxB,OAAOyB,QAAM,MACZ,sBAAA,cAACzB,OAAO0B,OAAK;IAACC,YAAW;KAAWlB,EAAE,oBAAoB;IAAEmB,IAAIzB;EAAe,CAAA,CAAA,CAAA,GAEjF,sBAAA,cAACH,OAAO6B,MAAI,MACV,sBAAA,cAAC3B,WAAAA;IACE,GAAGK;IACJuB,MAAK;IACLC,kBAAkB,sBAAA,cAAC/B,OAAOgC,OAAK;MAACC,SAAAA;;IAChCC,kBAAkB,sBAAA,cAAClC,OAAOgC,OAAK;MAACC,SAAAA;;IAChCE,sBAAsBvB;IACtBwB,QAAQtB;;AAKlB;",
+  "names": ["React", "useCallback", "useOperationInvoker", "LayoutOperation", "ObservabilityOperation", "Dialog", "useTranslation", "JoinPanel", "osTranslations", "meta", "ClientOperation", "JoinDialog", "props", "invokePromise", "t", "profile", "key", "handleCancelResetStorage", "ShareIdentity", "handleDone", "result", "identityKey", "Promise", "all", "UpdateDialog", "state", "SendEvent", "name", "initialDisposition", "Content", "Header", "Title", "classNames", "ns", "Body", "mode", "exitActionParent", "Close", "asChild", "doneActionParent", "onCancelResetStorage", "onDone"]
+}

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

@@ -30,7 +30,7 @@ var getHueValue = (identity) => identity?.profile?.data?.hue || getDefaultHueVal
 var getDefaultEmojiValue = (identity) => hexToEmoji(identity?.identityKey.toHex() ?? "0");
 var getEmojiValue = (identity) => identity?.profile?.data?.emoji || getDefaultEmojiValue(identity);
 var ProfileContainer = () => {
-  const { t } = useTranslation(meta.id);
+  const { t } = useTranslation(meta.profile.key);
   const client = useClient();
   const identity = useIdentity();
   const [displayName, setDisplayNameDirectly] = useState(identity?.profile?.displayName ?? "");
@@ -165,4 +165,4 @@ var ProfileContainer = () => {
 export {
   ProfileContainer as default
 };
-//# sourceMappingURL=ProfileContainer-VPX3FPWG.mjs.map
+//# sourceMappingURL=ProfileContainer-FGS2MVWA.mjs.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/containers/ProfileContainer/ProfileContainer.tsx"],
+  "sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\nimport * as Schema from 'effect/Schema';\nimport React, { type ChangeEvent, useCallback, useMemo, useState } from 'react';\n\nimport { debounce } from '@dxos/async';\nimport { useClient } from '@dxos/react-client';\nimport { type Identity, useIdentity } from '@dxos/react-client/halo';\nimport { ButtonGroup, Clipboard, Input, useTranslation } from '@dxos/react-ui';\nimport { Form, type FormFieldMap, type FormUpdateMeta, 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.profile.key);\n  const client = useClient();\n  const identity = useIdentity();\n  const [displayName, setDisplayNameDirectly] = useState(identity?.profile?.displayName ?? '');\n  const [emoji, setEmojiDirectly] = useState<string>(getEmojiValue(identity));\n  const [hue, setHueDirectly] = useState<string>(getHueValue(identity));\n\n  const updateProfile = useMemo(\n    () =>\n      debounce(\n        (profile: Partial<UserProfile>) =>\n          client.halo.updateProfile({\n            displayName: profile.displayName,\n            data: {\n              emoji: profile.emoji,\n              hue: profile.hue,\n            },\n          }),\n        2_000,\n      ),\n    [],\n  );\n\n  const handleChange = useCallback(\n    (profile: Partial<UserProfile>, meta: FormUpdateMeta<UserProfile>) => {\n      for (const [path, changed] of Object.entries(meta.changed)) {\n        if (changed) {\n          switch (path) {\n            case 'displayName':\n              setDisplayNameDirectly(profile.displayName ?? '');\n              break;\n            case 'emoji':\n              setEmojiDirectly(profile.emoji ?? getDefaultEmojiValue(identity));\n              break;\n            case 'hue':\n              setHueDirectly(profile.hue ?? getDefaultHueValue(identity));\n              break;\n            default:\n              break;\n          }\n        }\n      }\n\n      void updateProfile(profile);\n    },\n    [identity],\n  );\n\n  const values = useMemo(\n    () => ({\n      did: identity?.did,\n      displayName,\n      emoji,\n      hue,\n    }),\n    [identity, displayName, emoji, hue],\n  );\n\n  // TODO(wittjosiah): Integrate descriptions with the form schema.\n  const fieldMap = useMemo<FormFieldMap>(\n    () => ({\n      displayName: ({ type, label, getValue, onValueChange }) => {\n        const handleChange = useCallback(\n          ({ target: { value } }: ChangeEvent<HTMLInputElement>) => onValueChange(type, value),\n          [onValueChange, type],\n        );\n\n        return (\n          <Settings.Item 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.Item>\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 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.Item 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.Item>\n        );\n      },\n    }),\n    [t],\n  );\n\n  return (\n    <Clipboard.Provider>\n      <Settings.Viewport>\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 classNames='gap-form-gap'>\n              <Form.FieldSet />\n            </Form.Content>\n          </Form.Root>\n        </Settings.Section>\n      </Settings.Viewport>\n    </Clipboard.Provider>\n  );\n};\n"],
+  "mappings": "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",
+  "names": ["Schema", "React", "useCallback", "useMemo", "useState", "debounce", "useClient", "useIdentity", "ButtonGroup", "Clipboard", "Input", "useTranslation", "Form", "Settings", "EmojiPickerBlock", "HuePicker", "hexToEmoji", "hexToHue", "meta", "UserProfile", "Struct", "did", "String", "annotations", "title", "displayName", "emoji", "hue", "getDefaultHueValue", "identity", "identityKey", "toHex", "getHueValue", "profile", "data", "getDefaultEmojiValue", "getEmojiValue", "ProfileContainer", "t", "key", "client", "setDisplayNameDirectly", "setEmojiDirectly", "setHueDirectly", "updateProfile", "halo", "handleChange", "path", "changed", "Object", "entries", "values", "fieldMap", "type", "label", "getValue", "onValueChange", "target", "value", "Item", "description", "TextInput", "onChange", "placeholder", "classNames", "nextEmoji", "handleEmojiReset", "triggerVariant", "onChangeEmoji", "onClickClear", "nextHue", "handleHueReset", "div", "className", "onReset", "disabled", "IconButton", "Provider", "Viewport", "Section", "Root", "schema", "onValuesChanged", "Content", "FieldSet"]
+}

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

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

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

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

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

@@ -8,9 +8,9 @@ import { Icon, IconButton, List, ListItem, Message, useTranslation } from "@dxos
 import { Settings } from "@dxos/react-ui-form";
 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");
@@ -48,4 +48,4 @@ var RecoveryCredentialsContainer = () => {
 export {
   RecoveryCredentialsContainer as default
 };
-//# sourceMappingURL=RecoveryCredentialsContainer-IPBGDMIA.mjs.map
+//# sourceMappingURL=RecoveryCredentialsContainer-SL4LYHBE.mjs.map

package/dist/lib/neutral/RecoveryCredentialsContainer-SL4LYHBE.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, List, ListItem, Message, useTranslation } from '@dxos/react-ui';\nimport { Settings } from '@dxos/react-ui-form';\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    <Settings.Viewport>\n      <Settings.Section title={t('recovery-setup-dialog.title')} description={t('recovery-setup-dialog.description')}>\n        <Settings.Item title={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        </Settings.Item>\n        <Settings.Item title={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        </Settings.Item>\n      </Settings.Section>\n      <Settings.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          <List>\n            {recoveryCredentials.map((credential) => (\n              <ListItem.Root key={credential.id?.toHex()}>\n                <ListItem.Endcap>\n                  <Icon icon='ph--key--regular' />\n                </ListItem.Endcap>\n                <ListItem.Heading>{credential.issuanceDate.toLocaleString()}</ListItem.Heading>\n              </ListItem.Root>\n            ))}\n          </List>\n        )}\n      </Settings.Section>\n    </Settings.Viewport>\n  );\n};\n"],
+  "mappings": ";;;AAIA,OAAOA,WAAW;AAElB,SAASC,2BAA2B;AACpC,SAASC,sBAAsB;AAC/B,SAASC,MAAMC,YAAYC,MAAMC,UAAUC,SAASC,sBAAsB;AAC1E,SAASC,gBAAgB;AAEzB,SAASC,YAAY;AACrB,SAASC,uBAAuB;AAEzB,IAAMC,4BAA4B,GAAGF,KAAKG,QAAQC,GAAG;AAErD,IAAMC,+BAA+B,MAAA;AAC1C,QAAM,EAAEC,EAAC,IAAKR,eAAeE,KAAKG,QAAQC,GAAG;AAC7C,QAAM,EAAEG,cAAa,IAAKhB,oBAAAA;AAC1B,QAAMiB,cAAchB,eAAAA;AACpB,QAAMiB,sBAAsBD,YAAYE,OACtC,CAACC,eAAeA,WAAWC,QAAQC,UAAU,OAAA,MAAa,wCAAA;AAG5D,SACE,sBAAA,cAACd,SAASe,UAAQ,MAChB,sBAAA,cAACf,SAASgB,SAAO;IAACC,OAAOV,EAAE,6BAAA;IAAgCW,aAAaX,EAAE,mCAAA;KACxE,sBAAA,cAACP,SAASmB,MAAI;IAACF,OAAOV,EAAE,sBAAA;IAAyBW,aAAaX,EAAE,4BAAA;KAC9D,sBAAA,cAACZ,YAAAA;IACCyB,OAAOb,EAAE,sBAAA;IACTc,MAAK;IACLC,SAAQ;IACRC,SAAS,MAAMf,cAAcN,gBAAgBsB,aAAa;OAG9D,sBAAA,cAACxB,SAASmB,MAAI;IAACF,OAAOV,EAAE,4BAAA;IAA+BW,aAAaX,EAAE,kCAAA;KACpE,sBAAA,cAACZ,YAAAA;IACCyB,OAAOb,EAAE,4BAAA;IACTc,MAAK;IACLC,SAAQ;IACRC,SAAS,MAAMf,cAAcN,gBAAgBuB,kBAAkB;QAIrE,sBAAA,cAACzB,SAASgB,SAAO;IAACC,OAAOV,EAAE,wBAAA;KACxBG,oBAAoBgB,SAAS,IAC5B,sBAAA,cAAC5B,QAAQ6B,MAAI;IAACC,SAAQ;KACpB,sBAAA,cAAC9B,QAAQ+B,OAAK;IAACR,MAAK;KAA+Bd,EAAE,sBAAA,CAAA,GACrD,sBAAA,cAACT,QAAQgC,SAAO,MAAEvB,EAAE,wBAAA,CAAA,CAAA,IAGtB,sBAAA,cAACX,MAAAA,MACEc,oBAAoBqB,IAAI,CAACnB,eACxB,sBAAA,cAACf,SAAS8B,MAAI;IAACtB,KAAKO,WAAWoB,IAAIC,MAAAA;KACjC,sBAAA,cAACpC,SAASqC,QAAM,MACd,sBAAA,cAACxC,MAAAA;IAAK2B,MAAK;OAEb,sBAAA,cAACxB,SAASsC,SAAO,MAAEvB,WAAWwB,aAAaC,eAAc,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA;AAQzE;",
+  "names": ["React", "useOperationInvoker", "useCredentials", "Icon", "IconButton", "List", "ListItem", "Message", "useTranslation", "Settings", "meta", "ClientOperation", "MANAGE_CREDENTIALS_DIALOG", "profile", "key", "RecoveryCredentialsContainer", "t", "invokePromise", "credentials", "recoveryCredentials", "filter", "credential", "subject", "assertion", "Viewport", "Section", "title", "description", "Item", "label", "icon", "variant", "onClick", "CreatePasskey", "CreateRecoveryCode", "length", "Root", "valence", "Title", "Content", "map", "id", "toHex", "Endcap", "Heading", "issuanceDate", "toLocaleString"]
+}

package/dist/lib/neutral/UsageContainer-HBPMLIK7.mjs

@@ -0,0 +1,226 @@
+import {
+  useHubHttpClient
+} from "./chunk-JEF2FQGB.mjs";
+import "./chunk-J5LGTIGS.mjs";
+
+// src/containers/UsageContainer/UsageContainer.tsx
+import React2, { useCallback, 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 React, { useMemo, useState } from "react";
+import { IconButton, Message, useTranslation } from "@dxos/react-ui";
+import { Settings } 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 UsageRow = ({ label, caption, percent, value }) => /* @__PURE__ */ React.createElement("div", {
+  className: "flex items-center gap-trim-lg py-trim-sm"
+}, /* @__PURE__ */ React.createElement("div", {
+  className: "flex flex-col min-w-0 w-1/3 shrink-0"
+}, /* @__PURE__ */ React.createElement("span", {
+  className: "truncate text-base-fg"
+}, label), caption && /* @__PURE__ */ React.createElement("span", {
+  className: "text-sm text-description"
+}, caption)), percent === void 0 ? /* @__PURE__ */ React.createElement("div", {
+  className: "flex-1"
+}) : /* @__PURE__ */ React.createElement("div", {
+  role: "progressbar",
+  "aria-label": label,
+  "aria-valuenow": percent,
+  "aria-valuemin": 0,
+  "aria-valuemax": 100,
+  className: "h-1.5 flex-1 rounded-full bg-separator overflow-hidden"
+}, /* @__PURE__ */ React.createElement("div", {
+  className: "h-full rounded-full bg-primary-500 transition-[width] duration-500",
+  style: {
+    width: `${percent}%`
+  }
+})), /* @__PURE__ */ React.createElement("span", {
+  className: "shrink-0 w-24 text-end text-sm text-description tabular-nums"
+}, value));
+var UsageSkeleton = () => /* @__PURE__ */ React.createElement("div", {
+  className: "flex flex-col"
+}, Array.from({
+  length: 3
+}).map((_, index) => /* @__PURE__ */ React.createElement("div", {
+  key: index,
+  className: "flex items-center gap-trim-lg py-trim-sm"
+}, /* @__PURE__ */ React.createElement("div", {
+  className: "flex flex-col gap-1 w-1/3 shrink-0"
+}, /* @__PURE__ */ React.createElement("div", {
+  className: "h-4 w-24 rounded bg-separator animate-pulse"
+}), /* @__PURE__ */ React.createElement("div", {
+  className: "h-3 w-32 rounded bg-separator animate-pulse"
+})), /* @__PURE__ */ React.createElement("div", {
+  className: "h-1.5 flex-1 rounded-full bg-separator animate-pulse"
+}), /* @__PURE__ */ React.createElement("div", {
+  className: "h-3 w-12 shrink-0 rounded bg-separator animate-pulse"
+}))));
+var UsageView = ({ state, data, lastUpdated, onRefresh }) => {
+  const { t } = useTranslation(meta.profile.key);
+  const [rawExpanded, setRawExpanded] = useState(false);
+  const limitRows = useMemo(() => {
+    if (!data) {
+      return [];
+    }
+    return 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
+          }),
+          percent: void 0,
+          value: t("usage-unlimited.label"),
+          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-limit.description", {
+          used: formatAmount(used),
+          limit: formatAmount(limit.limit),
+          window
+        }),
+        percent,
+        value: t("usage-percent-used.label", {
+          percent
+        }),
+        windowHours
+      };
+    }).sort((a, b) => a.windowHours - b.windowHours);
+  }, [
+    data,
+    t
+  ]);
+  return /* @__PURE__ */ React.createElement(Settings.Viewport, null, /* @__PURE__ */ React.createElement(Settings.Section, {
+    title: t("usage-section.title"),
+    description: t("usage-section.description")
+  }, state === "unavailable" ? /* @__PURE__ */ React.createElement(Message.Root, {
+    valence: "warning"
+  }, /* @__PURE__ */ React.createElement(Message.Title, {
+    icon: "ph--cloud-slash--duotone"
+  }, t("usage-unavailable.title")), /* @__PURE__ */ React.createElement(Message.Content, null, t("usage-unavailable.description"))) : state === "loading" ? /* @__PURE__ */ React.createElement(UsageSkeleton, null) : state === "error" ? /* @__PURE__ */ React.createElement(Message.Root, {
+    valence: "error"
+  }, /* @__PURE__ */ React.createElement(Message.Title, {
+    icon: "ph--cloud-x--duotone"
+  }, t("usage-offline.title")), /* @__PURE__ */ React.createElement(Message.Content, null, t("usage-offline.description"))) : limitRows.length === 0 ? /* @__PURE__ */ React.createElement(Message.Root, {
+    valence: "neutral"
+  }, /* @__PURE__ */ React.createElement(Message.Title, {
+    icon: "ph--chart-bar--duotone"
+  }, t("usage-empty.title")), /* @__PURE__ */ React.createElement(Message.Content, null, t("usage-empty.description"))) : /* @__PURE__ */ React.createElement("div", {
+    className: "flex flex-col"
+  }, limitRows.map((row) => /* @__PURE__ */ React.createElement(UsageRow, {
+    key: row.key,
+    label: row.label,
+    caption: row.caption,
+    percent: row.percent,
+    value: row.value
+  })), /* @__PURE__ */ React.createElement("div", {
+    className: "flex items-center gap-1 pt-trim-md text-sm text-description"
+  }, lastUpdated !== void 0 && /* @__PURE__ */ React.createElement("span", null, t("usage-last-updated.label", {
+    time: new Date(lastUpdated).toLocaleTimeString()
+  })), 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("div", {
+    className: "flex flex-col pt-trim-md"
+  }, /* @__PURE__ */ React.createElement(IconButton, {
+    variant: "ghost",
+    icon: "ph--caret-right--regular",
+    iconClassNames: rawExpanded ? "transition-transform rotate-90" : "transition-transform",
+    label: t("usage-raw-json.label"),
+    onClick: () => setRawExpanded((value) => !value),
+    classNames: "self-start"
+  }), rawExpanded && /* @__PURE__ */ React.createElement(JsonHighlighter, {
+    data,
+    classNames: "mt-trim-sm text-xs overflow-auto"
+  }))));
+};
+
+// 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 [state, setState] = useState2("loading");
+  const [data, setData] = useState2();
+  const [lastUpdated, setLastUpdated] = useState2();
+  const [refreshCount, setRefreshCount] = useState2(0);
+  useAsyncEffect(async () => {
+    if (!hubHttp) {
+      setState("unavailable");
+      return;
+    }
+    setState((previous) => previous === "ready" ? previous : "loading");
+    try {
+      const result = await hubHttp.getProfileUsage(new Context(void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 27 }));
+      setData(result);
+      setLastUpdated(Date.now());
+      setState("ready");
+    } catch (err) {
+      log.catch(err, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 32, S: void 0 });
+      setState("error");
+    }
+  }, [
+    hubHttp,
+    refreshCount
+  ]);
+  const handleRefresh = useCallback(() => setRefreshCount((count) => count + 1), []);
+  return /* @__PURE__ */ React2.createElement(UsageView, {
+    state,
+    data,
+    lastUpdated,
+    onRefresh: handleRefresh
+  });
+};
+export {
+  UsageContainer as default
+};
+//# sourceMappingURL=UsageContainer-HBPMLIK7.mjs.map

package/dist/lib/neutral/UsageContainer-HBPMLIK7.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 '../../state/use-hub-http';\nimport { UsageView, type UsageViewState } from './UsageView';\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 [state, setState] = useState<UsageViewState>('loading');\n  const [data, setData] = useState<GetProfileUsageResponse | undefined>();\n  const [lastUpdated, setLastUpdated] = useState<number | undefined>();\n  const [refreshCount, setRefreshCount] = useState(0);\n\n  useAsyncEffect(async () => {\n    if (!hubHttp) {\n      setState('unavailable');\n      return;\n    }\n    // Keep prior data visible while refetching; only show the skeleton on first load.\n    setState((previous) => (previous === 'ready' ? previous : 'loading'));\n    try {\n      const result = await hubHttp.getProfileUsage(new Context());\n      setData(result);\n      setLastUpdated(Date.now());\n      setState('ready');\n    } catch (err) {\n      log.catch(err);\n      setState('error');\n    }\n  }, [hubHttp, refreshCount]);\n\n  const handleRefresh = useCallback(() => setRefreshCount((count) => count + 1), []);\n\n  return <UsageView state={state} data={data} lastUpdated={lastUpdated} onRefresh={handleRefresh} />;\n};\n", "//\n// Copyright 2026 DXOS.org\n//\n\nimport React, { useMemo, useState } from 'react';\n\nimport { type GetProfileUsageResponse, type MeteringLimit, type MeteringUsageItem } from '@dxos/protocols';\nimport { IconButton, Message, useTranslation } from '@dxos/react-ui';\nimport { Settings } 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\nexport type UsageViewProps = {\n  /** Current fetch state; drives which content is shown. */\n  state: UsageViewState;\n  /** Profile usage payload; required when `state` is `'ready'`. */\n  data?: GetProfileUsageResponse;\n  /** Epoch milliseconds of the last successful fetch. */\n  lastUpdated?: number;\n  /** Invoked when the user requests a refresh. */\n  onRefresh?: () => void;\n};\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\n/**\n * A single usage row: label + caption on the left, a thin meter, and a value on the right.\n * Omitting `percent` (an unlimited limit) renders no meter.\n */\nconst UsageRow = ({\n  label,\n  caption,\n  percent,\n  value,\n}: {\n  label: string;\n  caption?: string;\n  percent?: number;\n  value: string;\n}) => (\n  <div className='flex items-center gap-trim-lg py-trim-sm'>\n    <div className='flex flex-col min-w-0 w-1/3 shrink-0'>\n      <span className='truncate text-base-fg'>{label}</span>\n      {caption && <span className='text-sm text-description'>{caption}</span>}\n    </div>\n    {percent === undefined ? (\n      <div className='flex-1' />\n    ) : (\n      <div\n        role='progressbar'\n        aria-label={label}\n        aria-valuenow={percent}\n        aria-valuemin={0}\n        aria-valuemax={100}\n        className='h-1.5 flex-1 rounded-full bg-separator overflow-hidden'\n      >\n        <div\n          className='h-full rounded-full bg-primary-500 transition-[width] duration-500'\n          style={{ width: `${percent}%` }}\n        />\n      </div>\n    )}\n    <span className='shrink-0 w-24 text-end text-sm text-description tabular-nums'>{value}</span>\n  </div>\n);\n\n/** Placeholder rows shown while the first fetch is in flight. */\nconst UsageSkeleton = () => (\n  <div className='flex flex-col'>\n    {Array.from({ length: 3 }).map((_, index) => (\n      <div key={index} className='flex items-center gap-trim-lg py-trim-sm'>\n        <div className='flex flex-col gap-1 w-1/3 shrink-0'>\n          <div className='h-4 w-24 rounded bg-separator animate-pulse' />\n          <div className='h-3 w-32 rounded bg-separator animate-pulse' />\n        </div>\n        <div className='h-1.5 flex-1 rounded-full bg-separator animate-pulse' />\n        <div className='h-3 w-12 shrink-0 rounded bg-separator animate-pulse' />\n      </div>\n    ))}\n  </div>\n);\n\n/**\n * Presentational view of profile usage: renders loading/error/unavailable/empty states, or one row\n * per limit with a usage meter, plus a 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  // One display row per limit, shorter windows first. A `null` amount means unlimited (rendered without a meter).\n  const limitRows = useMemo(() => {\n    if (!data) {\n      return [];\n    }\n    return data.limits\n      .map((limit) => {\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            percent: undefined,\n            value: t('usage-unlimited.label'),\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-limit.description', { used: formatAmount(used), limit: formatAmount(limit.limit), window }),\n          percent,\n          value: t('usage-percent-used.label', { percent }),\n          windowHours,\n        };\n      })\n      .sort((a, b) => a.windowHours - b.windowHours);\n  }, [data, t]);\n\n  return (\n    <Settings.Viewport>\n      <Settings.Section title={t('usage-section.title')} description={t('usage-section.description')}>\n        {state === 'unavailable' ? (\n          <Message.Root valence='warning'>\n            <Message.Title icon='ph--cloud-slash--duotone'>{t('usage-unavailable.title')}</Message.Title>\n            <Message.Content>{t('usage-unavailable.description')}</Message.Content>\n          </Message.Root>\n        ) : state === 'loading' ? (\n          <UsageSkeleton />\n        ) : state === 'error' ? (\n          <Message.Root valence='error'>\n            <Message.Title icon='ph--cloud-x--duotone'>{t('usage-offline.title')}</Message.Title>\n            <Message.Content>{t('usage-offline.description')}</Message.Content>\n          </Message.Root>\n        ) : limitRows.length === 0 ? (\n          <Message.Root valence='neutral'>\n            <Message.Title icon='ph--chart-bar--duotone'>{t('usage-empty.title')}</Message.Title>\n            <Message.Content>{t('usage-empty.description')}</Message.Content>\n          </Message.Root>\n        ) : (\n          <div className='flex flex-col'>\n            {limitRows.map((row) => (\n              <UsageRow key={row.key} label={row.label} caption={row.caption} percent={row.percent} value={row.value} />\n            ))}\n\n            <div className='flex items-center gap-1 pt-trim-md text-sm text-description'>\n              {lastUpdated !== undefined && (\n                <span>{t('usage-last-updated.label', { time: new Date(lastUpdated).toLocaleTimeString() })}</span>\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            </div>\n          </div>\n        )}\n        {state === 'ready' && data && (\n          <div className='flex flex-col pt-trim-md'>\n            <IconButton\n              variant='ghost'\n              icon='ph--caret-right--regular'\n              iconClassNames={rawExpanded ? 'transition-transform rotate-90' : 'transition-transform'}\n              label={t('usage-raw-json.label')}\n              onClick={() => setRawExpanded((value) => !value)}\n              classNames='self-start'\n            />\n            {rawExpanded && <JsonHighlighter data={data} classNames='mt-trim-sm text-xs overflow-auto' />}\n          </div>\n        )}\n      </Settings.Section>\n    </Settings.Viewport>\n  );\n};\n"],
+  "mappings": "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",
+  "names": ["React", "useCallback", "useState", "Context", "log", "useAsyncEffect", "React", "useMemo", "useState", "IconButton", "Message", "useTranslation", "Settings", "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", "UsageRow", "label", "caption", "percent", "value", "div", "className", "span", "undefined", "role", "aria-label", "aria-valuenow", "aria-valuemin", "aria-valuemax", "style", "width", "UsageSkeleton", "Array", "from", "length", "map", "_", "key", "UsageView", "state", "data", "lastUpdated", "onRefresh", "profile", "rawExpanded", "setRawExpanded", "limitRows", "limits", "used", "windowDuration", "window", "Math", "min", "round", "sort", "a", "b", "Viewport", "Section", "title", "description", "Root", "valence", "Title", "icon", "Content", "row", "time", "Date", "toLocaleTimeString", "iconOnly", "variant", "onClick", "iconClassNames", "classNames", "state", "useState", "setData", "lastUpdated", "setLastUpdated", "refreshCount", "setRefreshCount", "useAsyncEffect", "setState", "result", "getProfileUsage", "Context", "Date", "now", "log", "err", "hubHttp", "data", "onRefresh"]
+}