@dxos/plugin-space 0.10.0 → 0.11.1

package/dist/lib/chunk-SpacePresence.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"chunk-SpacePresence.mjs","names":[],"sources":["../../src/containers/SpacePresence/SpacePresence.tsx"],"sourcesContent":["//\n// Copyright 2023 DXOS.org\n//\n\nimport React, { forwardRef, useCallback, useEffect, useState } from 'react';\n\nimport { useAtomCapability } from '@dxos/app-framework/ui';\nimport { generateName } from '@dxos/display-name';\nimport { type Key, Obj } from '@dxos/echo';\nimport { type Space } from '@dxos/halo';\nimport { useIdentity, useMembers } from '@dxos/halo-react';\nimport { PublicKey } from '@dxos/keys';\nimport { useSpace } from '@dxos/react-client/echo';\nimport {\n  Avatar,\n  type AvatarContentProps,\n  type DxAvatar,\n  Popover,\n  type Size,\n  type ThemedClassName,\n  Tooltip,\n  useDefaultValue,\n  useTranslation,\n} from '@dxos/react-ui';\nimport { AttentionGlyph, type AttentionGlyphProps, useAttention } from '@dxos/react-ui-attention';\nimport { Listbox } from '@dxos/react-ui-list';\nimport { ComplexMap, hexToFallback } from '@dxos/util';\n\nimport { meta } from '#meta';\nimport { type ObjectViewerProps, SpaceCapabilities } from '#types';\n\n// TODO(thure): Get/derive these values from protocol\nconst REFRESH_INTERVAL = 5000;\nconst ACTIVITY_DURATION = 30_000;\n\n// TODO(thure): This is chiefly meant to satisfy TS & provide an empty map after `deepSignal` interactions.\nconst noViewers = new ComplexMap<PublicKey, ObjectViewerProps>(PublicKey.hash);\n\n// TODO(wittjosiah): Factor out?\nconst getName = (member: Space.Member) => member.displayName ?? generateName(member.identityKey ?? '0');\n\nexport type SpacePresenceProps = {\n  object: Obj.Unknown;\n  spaceId?: Key.SpaceId;\n};\n\nexport const SpacePresence = ({ object, spaceId }: SpacePresenceProps) => {\n  const ephemeral = useAtomCapability(SpaceCapabilities.EphemeralState);\n  const identity = useIdentity();\n  const db = Obj.getDatabase(object);\n  const space = useSpace(spaceId ?? db?.spaceId);\n  const spaceMembers = useMembers(spaceId ?? db?.spaceId);\n\n  const [_moment, setMoment] = useState(Date.now());\n\n  // NOTE(thure): This is necessary so Presence updates without any underlying data updating.\n  useEffect(() => {\n    const interval = setInterval(() => setMoment(Date.now()), REFRESH_INTERVAL);\n    return () => clearInterval(interval);\n  }, []);\n\n  const memberOnline = useCallback((member: Space.Member) => member.online, []);\n  const memberIsNotSelf = useCallback(\n    (member: Space.Member) => identity?.identityKey !== member.identityKey,\n    [identity?.identityKey],\n  );\n\n  // TODO(thure): Could it be a smell to return early when there are interactions with `deepSignal` later, since it\n  //  prevents reactivity?\n  if (!identity || !ephemeral || !space) {\n    return null;\n  }\n\n  const currentObjectViewers = ephemeral.viewersByObject[Obj.getURI(object)] ?? noViewers;\n\n  const membersForObject = spaceMembers\n    .filter((member) => memberOnline(member) && memberIsNotSelf(member))\n    .flatMap((member) => {\n      // Presence viewers are keyed by `PublicKey`; the HALO member carries a hex identity key.\n      const memberKey = member.identityKey ? PublicKey.fromHex(member.identityKey) : undefined;\n      const objectView = memberKey ? currentObjectViewers.get(memberKey) : undefined;\n      if (!objectView) {\n        return [];\n      }\n      return [\n        {\n          ...member,\n          currentlyAttended: objectView.currentlyAttended ?? false,\n          lastSeen: objectView.lastSeen ?? -Infinity,\n        },\n      ];\n    })\n    .toSorted((a, b) => a.lastSeen - b.lastSeen);\n\n  return <FullPresence members={membersForObject} />;\n};\n\nexport type Member = Space.Member & {\n  /**\n   * Last time a member was seen on this object.\n   */\n  lastSeen: number;\n  currentlyAttended: boolean;\n};\n\nexport type MemberPresenceProps = ThemedClassName<{\n  size?: Size;\n  members?: Member[];\n  showCount?: boolean;\n  onMemberClick?: (member: Member) => void;\n}>;\n\nexport const FullPresence = (props: MemberPresenceProps) => {\n  const { size = 9, onMemberClick } = props;\n  const members = useDefaultValue(props.members, () => []);\n\n  if (members.length === 0) {\n    return null;\n  }\n\n  return (\n    <div className='dx-avatar-group' data-testid='spacePlugin.presence'>\n      {members.slice(0, 3).map((member, i) => (\n        <Tooltip.Trigger\n          key={member.identityKey}\n          side='bottom'\n          content={getName(member)}\n          className='grid focus:outline-hidden'\n        >\n          <PresenceAvatar\n            member={member}\n            match={member.currentlyAttended} // TODO(Zan): Match always true now we're showing 'members viewing current object'.\n            index={members.length - i}\n            onClick={() => onMemberClick?.(member)}\n            size={size}\n          />\n        </Tooltip.Trigger>\n      ))}\n\n      {members.length > 3 && (\n        <Popover.Root>\n          <Popover.Trigger className='grid focus:outline-hidden'>\n            <Avatar.Root>\n              {/* TODO(wittjosiah): Make text fit. */}\n              <Avatar.Content\n                status='inactive'\n                style={{ zIndex: members.length - 4 }}\n                fallback={`+${members.length - 3}`}\n                size={size}\n              />\n            </Avatar.Root>\n          </Popover.Trigger>\n          <Popover.Portal>\n            <Popover.Content side='bottom'>\n              <Popover.Arrow />\n              <Popover.Viewport classNames='max-h-56'>\n                <Listbox.Root>\n                  <Listbox.Content aria-label='members'>\n                    {members.map((member) => (\n                      <Listbox.Item\n                        key={member.identityKey}\n                        id={member.identityKey ?? ''}\n                        classNames='flex gap-2 items-center cursor-pointer mb-2'\n                        onClick={() => onMemberClick?.(member)}\n                        data-testid='identity-list-item'\n                      >\n                        {/* TODO(Zan): Match always true now we're showing 'members viewing current object'. */}\n                        <PresenceAvatar member={member} size={size} showName match={member.currentlyAttended} />\n                      </Listbox.Item>\n                    ))}\n                  </Listbox.Content>\n                </Listbox.Root>\n              </Popover.Viewport>\n            </Popover.Content>\n          </Popover.Portal>\n        </Popover.Root>\n      )}\n    </div>\n  );\n};\n\ntype PresenceAvatarProps = Pick<AvatarContentProps, 'size'> & {\n  member: Space.Member;\n  showName?: boolean;\n  match?: boolean;\n  index?: number;\n  onClick?: () => void;\n};\n\nconst PresenceAvatar = forwardRef<DxAvatar, PresenceAvatarProps>(\n  ({ member, showName, match, index, onClick, size }, forwardedRef) => {\n    const status = match ? 'current' : 'active';\n    const fallbackValue = hexToFallback(member.identityKey ?? '0');\n    return (\n      <Avatar.Root>\n        <Avatar.Content\n          status={status}\n          hue={member.data?.hue || fallbackValue.hue}\n          data-testid='spacePlugin.presence.member'\n          data-status={status}\n          size={size}\n          {...(index ? { style: { zIndex: index } } : {})}\n          onClick={onClick}\n          fallback={member.data?.emoji || fallbackValue.emoji}\n          ref={forwardedRef}\n        />\n        <Avatar.Label classNames={showName ? 'text-sm truncate px-2' : 'sr-only'}>{getName(member)}</Avatar.Label>\n      </Avatar.Root>\n    );\n  },\n);\n\nexport type SmallPresenceLiveProps = {\n  id?: string;\n  open?: boolean;\n  viewers?: ComplexMap<PublicKey, ObjectViewerProps>;\n};\n\nexport const SmallPresenceLive = ({ id, open, viewers }: SmallPresenceLiveProps) => {\n  const { hasAttention, isAncestor, isRelated } = useAttention(id);\n  const attended = hasAttention || isRelated;\n  const containsAttended = isAncestor && !open;\n  const getActiveViewers = (viewers: ComplexMap<PublicKey, ObjectViewerProps>): ObjectViewerProps[] => {\n    const moment = Date.now();\n    return Array.from<ObjectViewerProps>(viewers.values()).filter(\n      (viewer) => moment - viewer.lastSeen < ACTIVITY_DURATION,\n    );\n  };\n\n  const [activeViewers, setActiveViewers] = useState(viewers ? getActiveViewers(viewers) : []);\n\n  useEffect(() => {\n    if (viewers) {\n      setActiveViewers(getActiveViewers(viewers));\n      const interval = setInterval(() => {\n        setActiveViewers(getActiveViewers(viewers));\n      }, REFRESH_INTERVAL);\n      return () => clearInterval(interval);\n    }\n  }, [viewers]);\n\n  return <SmallPresence count={activeViewers.length} attended={attended} containsAttended={containsAttended} />;\n};\n\nexport type SmallPresenceProps = {\n  count?: number;\n} & Pick<AttentionGlyphProps, 'attended' | 'containsAttended'>;\n\nexport const SmallPresence = ({ count = 0, attended, containsAttended }: SmallPresenceProps) => {\n  const { t } = useTranslation(meta.profile.key);\n\n  return (\n    <Tooltip.Trigger asChild content={t('presence.label', { count })} side='bottom'>\n      <AttentionGlyph\n        attended={attended}\n        containsAttended={containsAttended}\n        presence={count > 1 ? 'many' : count === 1 ? 'one' : 'none'}\n        classNames='self-center mx-1'\n      />\n    </Tooltip.Trigger>\n  );\n};\n\nSpacePresence.displayName = 'SpacePresence';\n"],"mappings":"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"}

package/dist/lib/chunk-SpaceSettings.mjs

@@ -0,0 +1,63 @@
+import { n as getSpaceDisplayName } from "./chunk-util.mjs";
+import { meta } from "#meta";
+import { AppSpace } from "@dxos/app-toolkit";
+import "react";
+import { IconButton, Input, toLocalizedString, useTranslation } from "@dxos/react-ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Form } from "@dxos/react-ui-form";
+import { Listbox } from "@dxos/react-ui-list";
+//#region src/containers/SpaceSettings/SpaceSettings.tsx
+var SpaceSettings = ({ spaces, onOpenSpaceSettings, settings, onSettingsChange }) => {
+	const { t } = useTranslation(meta.profile.key);
+	return /* @__PURE__ */ jsx(Form.Root, {
+		variant: "settings",
+		children: /* @__PURE__ */ jsx(Form.Viewport, {
+			scroll: true,
+			children: /* @__PURE__ */ jsxs(Form.Content, { children: [/* @__PURE__ */ jsx(Form.Section, {
+				title: t("plugin.name"),
+				children: /* @__PURE__ */ jsx(Form.Row, {
+					label: t("settings.show-hidden.label"),
+					description: t("settings.show-hidden.description"),
+					children: /* @__PURE__ */ jsx(Input.Root, { children: /* @__PURE__ */ jsx(Input.Switch, {
+						disabled: !onSettingsChange,
+						checked: settings?.showHidden,
+						onCheckedChange: (checked) => onSettingsChange?.((s) => ({
+							...s,
+							showHidden: !!checked
+						}))
+					}) })
+				})
+			}), /* @__PURE__ */ jsx(Form.Section, {
+				title: t("space-settings.label"),
+				description: t("space-settings.description"),
+				children: /* @__PURE__ */ jsx(Form.Row, {
+					label: t("settings.space-list.label"),
+					description: t("settings.space-list.description"),
+					children: /* @__PURE__ */ jsx(Listbox.Root, { children: /* @__PURE__ */ jsx(Listbox.Content, {
+						"aria-label": t("settings.space-list.label"),
+						classNames: "w-full gap-trim-sm",
+						children: spaces?.map((space) => /* @__PURE__ */ jsxs(Listbox.Item, {
+							id: space.id,
+							classNames: "w-full gap-2 items-center",
+							children: [/* @__PURE__ */ jsx(Listbox.ItemLabel, {
+								classNames: "min-h-0!",
+								children: toLocalizedString(getSpaceDisplayName(space, { personal: AppSpace.isPersonalSpace(space) }), t)
+							}), /* @__PURE__ */ jsx(IconButton, {
+								icon: "ph--faders--regular",
+								iconOnly: true,
+								label: t("settings.open-settings.label"),
+								disabled: !onOpenSpaceSettings,
+								onClick: () => onOpenSpaceSettings?.(space)
+							})]
+						}, space.id))
+					}) })
+				})
+			})] })
+		})
+	});
+};
+SpaceSettings.displayName = "SpaceSettings";
+//#endregion
+export { SpaceSettings as default };
+
+//# sourceMappingURL=chunk-SpaceSettings.mjs.map

package/dist/lib/chunk-SpaceSettings.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"chunk-SpaceSettings.mjs","names":[],"sources":["../../src/containers/SpaceSettings/SpaceSettings.tsx"],"sourcesContent":["//\n// Copyright 2023 DXOS.org\n//\n\nimport React from 'react';\n\nimport { AppSpace } from '@dxos/app-toolkit';\nimport { type Space } from '@dxos/react-client/echo';\nimport { IconButton, Input, toLocalizedString, useTranslation } from '@dxos/react-ui';\nimport { Form } from '@dxos/react-ui-form';\nimport { Listbox } from '@dxos/react-ui-list';\n\nimport { meta } from '#meta';\nimport { type Settings } from '#types';\n\nimport { getSpaceDisplayName } from '../../util';\n\nexport type SpaceSettingsProps = {\n  spaces?: Space[];\n  onOpenSpaceSettings?: (space: Space) => void;\n  settings?: Settings.Settings;\n  onSettingsChange?: (updater: (prev: Settings.Settings) => Settings.Settings) => void;\n};\n\nexport const SpaceSettings = ({ spaces, onOpenSpaceSettings, settings, onSettingsChange }: SpaceSettingsProps) => {\n  const { t } = useTranslation(meta.profile.key);\n\n  return (\n    <Form.Root variant='settings'>\n      <Form.Viewport scroll>\n        <Form.Content>\n          <Form.Section title={t('plugin.name')}>\n            <Form.Row label={t('settings.show-hidden.label')} description={t('settings.show-hidden.description')}>\n              <Input.Root>\n                <Input.Switch\n                  disabled={!onSettingsChange}\n                  checked={settings?.showHidden}\n                  onCheckedChange={(checked) => onSettingsChange?.((s) => ({ ...s, showHidden: !!checked }))}\n                />\n              </Input.Root>\n            </Form.Row>\n          </Form.Section>\n          <Form.Section title={t('space-settings.label')} description={t('space-settings.description')}>\n            <Form.Row label={t('settings.space-list.label')} description={t('settings.space-list.description')}>\n              <Listbox.Root>\n                <Listbox.Content aria-label={t('settings.space-list.label')} classNames='w-full gap-trim-sm'>\n                  {spaces?.map((space) => (\n                    <Listbox.Item key={space.id} id={space.id} classNames='w-full gap-2 items-center'>\n                      {/* TODO(burdon): Should auto center and truncate; NOTE truncate doesn't work with flex grow. */}\n                      <Listbox.ItemLabel classNames='min-h-0!'>\n                        {toLocalizedString(\n                          getSpaceDisplayName(space, {\n                            personal: AppSpace.isPersonalSpace(space),\n                          }),\n                          t,\n                        )}\n                      </Listbox.ItemLabel>\n                      <IconButton\n                        icon='ph--faders--regular'\n                        iconOnly\n                        label={t('settings.open-settings.label')}\n                        disabled={!onOpenSpaceSettings}\n                        onClick={() => onOpenSpaceSettings?.(space)}\n                      />\n                    </Listbox.Item>\n                  ))}\n                </Listbox.Content>\n              </Listbox.Root>\n            </Form.Row>\n          </Form.Section>\n        </Form.Content>\n      </Form.Viewport>\n    </Form.Root>\n  );\n};\n\nSpaceSettings.displayName = 'SpaceSettings';\n"],"mappings":";;;;;;;;;AAwBA,IAAa,iBAAiB,EAAE,QAAQ,qBAAqB,UAAU,uBAA2C;CAChH,MAAM,EAAE,MAAM,eAAe,KAAK,QAAQ,GAAG;CAE7C,OACE,oBAAC,KAAK,MAAN;EAAW,SAAQ;YACjB,oBAAC,KAAK,UAAN;GAAe,QAAA;aACb,qBAAC,KAAK,SAAN,EAAA,UAAA,CACE,oBAAC,KAAK,SAAN;IAAc,OAAO,EAAE,aAAa;cAClC,oBAAC,KAAK,KAAN;KAAU,OAAO,EAAE,4BAA4B;KAAG,aAAa,EAAE,kCAAkC;eACjG,oBAAC,MAAM,MAAP,EAAA,UACE,oBAAC,MAAM,QAAP;MACE,UAAU,CAAC;MACX,SAAS,UAAU;MACnB,kBAAkB,YAAY,oBAAoB,OAAO;OAAE,GAAG;OAAG,YAAY,CAAC,CAAC;MAAQ,EAAE;KAC1F,CAAA,EACS,CAAA;IACJ,CAAA;GACE,CAAA,GACd,oBAAC,KAAK,SAAN;IAAc,OAAO,EAAE,sBAAsB;IAAG,aAAa,EAAE,4BAA4B;cACzF,oBAAC,KAAK,KAAN;KAAU,OAAO,EAAE,2BAA2B;KAAG,aAAa,EAAE,iCAAiC;eAC/F,oBAAC,QAAQ,MAAT,EAAA,UACE,oBAAC,QAAQ,SAAT;MAAiB,cAAY,EAAE,2BAA2B;MAAG,YAAW;gBACrE,QAAQ,KAAK,UACZ,qBAAC,QAAQ,MAAT;OAA6B,IAAI,MAAM;OAAI,YAAW;iBAAtD,CAEE,oBAAC,QAAQ,WAAT;QAAmB,YAAW;kBAC3B,kBACC,oBAAoB,OAAO,EACzB,UAAU,SAAS,gBAAgB,KAAK,EAC1C,CAAC,GACD,CACF;OACiB,CAAA,GACnB,oBAAC,YAAD;QACE,MAAK;QACL,UAAA;QACA,OAAO,EAAE,8BAA8B;QACvC,UAAU,CAAC;QACX,eAAe,sBAAsB,KAAK;OAC3C,CAAA,CACW;SAjBK,MAAM,EAiBX,CACf;KACc,CAAA,EACL,CAAA;IACN,CAAA;GACE,CAAA,CACF,EAAA,CAAA;EACD,CAAA;CACN,CAAA;AAEf;AAEA,cAAc,cAAc"}

package/dist/lib/chunk-SpaceSettingsContainer.mjs

@@ -0,0 +1,278 @@
+import { meta } from "#meta";
+import { AppSpace, GraphPath, LayoutOperation } from "@dxos/app-toolkit";
+import { Obj } from "@dxos/echo";
+import { SpaceOperation } from "#operations";
+import { SpaceArchive } from "@dxos/protocols/proto/dxos/client/services";
+import { SpaceCapabilities, SpaceForm } from "#types";
+import { useCallback, useMemo, useState } from "react";
+import { useCapabilities, useOperationInvoker } from "@dxos/app-framework/ui";
+import { useClient } from "@dxos/react-client";
+import { Button, Dialog, DropdownMenu, Icon, IconButton, Input, useTranslation } from "@dxos/react-ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Form } from "@dxos/react-ui-form";
+import { log } from "@dxos/log";
+import { EdgeReplicationSetting } from "@dxos/protocols/proto/dxos/echo/metadata";
+import { HuePicker, IconPicker } from "@dxos/react-ui-pickers";
+//#region src/containers/SpaceSettingsContainer/SpaceSettingsContainer.tsx
+var __dxlog_file = "/__w/dxos/dxos/packages/plugins/plugin-space/src/containers/SpaceSettingsContainer/SpaceSettingsContainer.tsx";
+var SpaceFormSchema = SpaceForm;
+var SpaceSettingsContainer = ({ space }) => {
+	const { t } = useTranslation(meta.profile.key);
+	const { invokePromise } = useOperationInvoker();
+	const client = useClient();
+	const [edgeReplication, setEdgeReplication] = useState(space.internal.data.edgeReplication === EdgeReplicationSetting.ENABLED);
+	const toggleEdgeReplication = useCallback(async (next) => {
+		setEdgeReplication(next);
+		await space?.internal.setEdgeReplicationPreference(next ? EdgeReplicationSetting.ENABLED : EdgeReplicationSetting.DISABLED).catch((err) => {
+			log.catch(err, void 0, {
+				"~LogMeta": "~LogMeta",
+				F: __dxlog_file,
+				L: 40,
+				S: void 0
+			});
+			setEdgeReplication(!next);
+		});
+	}, [space]);
+	const handleValuesChanged = useCallback((newValues, meta) => {
+		const changed = meta.changed ?? {};
+		if (changed["edgeReplication"]) toggleEdgeReplication(newValues.edgeReplication ?? false);
+		if (changed["name"] || changed["icon"] || changed["hue"]) Obj.update(space.properties, (obj) => {
+			if (changed["name"] && newValues.name !== void 0) obj.name = newValues.name;
+			if (changed["icon"]) obj.icon = newValues.icon;
+			if (changed["hue"]) obj.hue = newValues.hue;
+		});
+	}, [space, toggleEdgeReplication]);
+	const defaultValues = useMemo(() => ({
+		name: space.properties.name,
+		icon: space.properties.icon,
+		hue: space.properties.hue,
+		edgeReplication
+	}), [
+		space.properties.name,
+		space.properties.icon,
+		space.properties.hue,
+		edgeReplication
+	]);
+	const personal = AppSpace.isPersonalSpace(space);
+	const fieldMap = useMemo(() => ({
+		name: personal ? () => null : ({ type, label, getValue, onValueChange }) => {
+			const handleChange = useCallback(({ target: { value } }) => onValueChange(type, value), [onValueChange, type]);
+			return /* @__PURE__ */ jsx(Form.Row, {
+				label,
+				description: t("display-name.description"),
+				children: /* @__PURE__ */ jsx(Input.Root, { children: /* @__PURE__ */ jsx(Input.TextInput, {
+					value: getValue(),
+					onChange: handleChange,
+					placeholder: t("display-name-input.placeholder"),
+					classNames: "min-w-64"
+				}) })
+			});
+		},
+		icon: personal ? () => null : ({ type, label, getValue, onValueChange }) => {
+			const handleChange = useCallback((icon) => onValueChange(type, icon), [onValueChange, type]);
+			const handleReset = useCallback(() => onValueChange(type, void 0), [onValueChange, type]);
+			return /* @__PURE__ */ jsx(Form.Row, {
+				label,
+				description: t("icon.description"),
+				children: /* @__PURE__ */ jsx(IconPicker, {
+					value: getValue(),
+					onChange: handleChange,
+					onReset: handleReset,
+					classNames: "justify-self-end"
+				})
+			});
+		},
+		hue: ({ type, label, getValue, onValueChange }) => {
+			const handleChange = useCallback((nextHue) => onValueChange(type, nextHue), [onValueChange, type]);
+			const handleReset = useCallback(() => onValueChange(type, void 0), [onValueChange, type]);
+			return /* @__PURE__ */ jsx(Form.Row, {
+				label,
+				description: t("hue.description"),
+				children: /* @__PURE__ */ jsx(HuePicker, {
+					value: getValue(),
+					onChange: handleChange,
+					onReset: handleReset,
+					classNames: "justify-self-end"
+				})
+			});
+		},
+		edgeReplication: ({ type, label, getValue, onValueChange }) => {
+			const handleChange = useCallback((checked) => onValueChange(type, checked), [onValueChange, type]);
+			return /* @__PURE__ */ jsx(Form.Row, {
+				label,
+				description: t("edge-replication.description"),
+				children: /* @__PURE__ */ jsx(Input.Root, { children: /* @__PURE__ */ jsx(Input.Switch, {
+					checked: getValue(),
+					onCheckedChange: handleChange,
+					classNames: "justify-self-end"
+				}) })
+			});
+		}
+	}), [
+		t,
+		space,
+		personal
+	]);
+	const handleBackupBinary = useCallback(async () => {
+		await invokePromise(SpaceOperation.ExportSpace, {
+			space,
+			format: SpaceArchive.Format.BINARY
+		});
+	}, [space, invokePromise]);
+	const handleBackupJson = useCallback(async () => {
+		await invokePromise(SpaceOperation.ExportSpace, {
+			space,
+			format: SpaceArchive.Format.JSON
+		});
+	}, [space, invokePromise]);
+	const repairs = useCapabilities(SpaceCapabilities.Repair);
+	const handleRepair = useCallback(async () => {
+		await Promise.all(repairs.map((repair) => repair({
+			space,
+			isDefault: AppSpace.isPersonalSpace(space)
+		})));
+	}, [space, repairs]);
+	const handleResetHome = useCallback(() => AppSpace.resetHomeVisibility(space), [space]);
+	const [deleteConfirmOpen, setDeleteConfirmOpen] = useState(false);
+	const handleDelete = useCallback(async () => {
+		try {
+			await invokePromise(SpaceOperation.Delete, { space });
+			setDeleteConfirmOpen(false);
+			const personalSpace = AppSpace.getPersonalSpace(client);
+			if (personalSpace) invokePromise(LayoutOperation.SwitchWorkspace, { subject: GraphPath.getSpacePath(personalSpace.id) });
+		} catch (err) {
+			log.catch(err, {
+				stage: "delete: invocation rejected",
+				spaceId: space.id
+			}, {
+				"~LogMeta": "~LogMeta",
+				F: __dxlog_file,
+				L: 169,
+				S: void 0
+			});
+			setDeleteConfirmOpen(false);
+			invokePromise(LayoutOperation.AddToast, {
+				id: `${space.id}-delete-failed`,
+				title: t("delete-space-failed.message"),
+				icon: "ph--warning--regular"
+			});
+		}
+	}, [
+		space,
+		client,
+		invokePromise,
+		t
+	]);
+	return /* @__PURE__ */ jsx(Form.Root, {
+		variant: "settings",
+		fieldMap,
+		schema: SpaceFormSchema,
+		defaultValues,
+		onValuesChanged: handleValuesChanged,
+		children: /* @__PURE__ */ jsx(Form.Viewport, {
+			scroll: true,
+			children: /* @__PURE__ */ jsxs(Form.Content, { children: [
+				/* @__PURE__ */ jsx(Form.Section, {
+					title: t("space-properties-settings-verbose.label"),
+					description: t("space-properties-settings.description", { ns: meta.profile.key }),
+					children: /* @__PURE__ */ jsx(Form.FieldSet, {})
+				}),
+				/* @__PURE__ */ jsxs(Form.Section, {
+					title: t("space-controls.title"),
+					description: t("space-controls.description"),
+					children: [
+						/* @__PURE__ */ jsx(Form.Row, {
+							label: t("space-id.title"),
+							description: t("space-id.description"),
+							children: /* @__PURE__ */ jsxs("div", {
+								className: "flex items-center gap-2",
+								children: [/* @__PURE__ */ jsx(Input.Root, { children: /* @__PURE__ */ jsx(Input.TextInput, {
+									value: space.id,
+									disabled: true,
+									classNames: "flex-1 font-mono text-xs"
+								}) }), /* @__PURE__ */ jsx(IconButton, {
+									icon: "ph--copy--regular",
+									iconOnly: true,
+									label: t("copy-space-id.label"),
+									onClick: () => {
+										navigator.clipboard.writeText(space.id);
+									}
+								})]
+							})
+						}),
+						/* @__PURE__ */ jsx(Form.Row, {
+							label: t("backup-space.title"),
+							description: t("backup-space.description"),
+							children: /* @__PURE__ */ jsxs(DropdownMenu.Root, { children: [/* @__PURE__ */ jsx(DropdownMenu.Trigger, {
+								asChild: true,
+								children: /* @__PURE__ */ jsxs(Button, { children: [t("download-backup.label"), /* @__PURE__ */ jsx(Icon, {
+									icon: "ph--caret-down--regular",
+									size: 4,
+									classNames: "mis-2"
+								})] })
+							}), /* @__PURE__ */ jsx(DropdownMenu.Content, { children: /* @__PURE__ */ jsxs(DropdownMenu.Viewport, { children: [/* @__PURE__ */ jsx(DropdownMenu.Item, {
+								onClick: handleBackupBinary,
+								children: t("download-backup-binary.label")
+							}), /* @__PURE__ */ jsx(DropdownMenu.Item, {
+								onClick: handleBackupJson,
+								children: t("download-backup-json.label")
+							})] }) })] })
+						}),
+						/* @__PURE__ */ jsx(Form.Row, {
+							label: t("repair-space.title"),
+							description: t("repair-space.description"),
+							children: /* @__PURE__ */ jsx(Button, {
+								onClick: handleRepair,
+								children: t("repair-space.label")
+							})
+						}),
+						/* @__PURE__ */ jsx(Form.Row, {
+							label: t("reset-home.title"),
+							description: t("reset-home.description"),
+							children: /* @__PURE__ */ jsx(Button, {
+								onClick: handleResetHome,
+								children: t("reset-home.label")
+							})
+						})
+					]
+				}),
+				!personal && /* @__PURE__ */ jsx(Form.Section, {
+					title: t("danger-zone.title"),
+					description: t("danger-zone.description"),
+					children: /* @__PURE__ */ jsx(Form.Row, {
+						label: t("delete-space.title"),
+						description: t("delete-space.description"),
+						children: /* @__PURE__ */ jsxs(Dialog.Root, {
+							open: deleteConfirmOpen,
+							onOpenChange: setDeleteConfirmOpen,
+							children: [/* @__PURE__ */ jsx(Dialog.Trigger, {
+								asChild: true,
+								children: /* @__PURE__ */ jsx(Button, {
+									variant: "destructive",
+									"data-testid": "spaceSettings.deleteSpace",
+									children: t("delete-space.label")
+								})
+							}), /* @__PURE__ */ jsx(Dialog.Portal, { children: /* @__PURE__ */ jsx(Dialog.Overlay, { children: /* @__PURE__ */ jsxs(Dialog.Content, { children: [/* @__PURE__ */ jsx(Dialog.Header, { children: /* @__PURE__ */ jsx(Dialog.Title, { children: t("delete-space-confirm.title") }) }), /* @__PURE__ */ jsxs(Dialog.Body, { children: [/* @__PURE__ */ jsx(Dialog.Description, { children: t("delete-space-confirm.description") }), /* @__PURE__ */ jsxs("div", {
+								className: "flex justify-end gap-2 mbs-4",
+								children: [/* @__PURE__ */ jsx(Dialog.Close, {
+									asChild: true,
+									children: /* @__PURE__ */ jsx(Button, { children: t("cancel.label") })
+								}), /* @__PURE__ */ jsx(Button, {
+									variant: "destructive",
+									onClick: handleDelete,
+									"data-testid": "spaceSettings.deleteSpaceConfirm",
+									children: t("delete-space.label")
+								})]
+							})] })] }) }) })]
+						})
+					})
+				})
+			] })
+		})
+	}, space.id);
+};
+SpaceSettingsContainer.displayName = "SpaceSettingsContainer";
+//#endregion
+export { SpaceSettingsContainer as default };
+
+//# sourceMappingURL=chunk-SpaceSettingsContainer.mjs.map

package/dist/lib/chunk-SpaceSettingsContainer.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"chunk-SpaceSettingsContainer.mjs","names":[],"sources":["../../src/containers/SpaceSettingsContainer/SpaceSettingsContainer.tsx"],"sourcesContent":["//\n// Copyright 2024 DXOS.org\n//\n\nimport * as Schema from 'effect/Schema';\nimport React, { type ChangeEvent, useCallback, useMemo, useState } from 'react';\n\nimport { useCapabilities, useOperationInvoker } from '@dxos/app-framework/ui';\nimport { AppSpace, GraphPath, LayoutOperation } from '@dxos/app-toolkit';\nimport { AppSurface } from '@dxos/app-toolkit/ui';\nimport { Obj } from '@dxos/echo';\nimport { log } from '@dxos/log';\nimport { SpaceArchive } from '@dxos/protocols/proto/dxos/client/services';\nimport { EdgeReplicationSetting } from '@dxos/protocols/proto/dxos/echo/metadata';\nimport { useClient } from '@dxos/react-client';\nimport { Button, Dialog, DropdownMenu, Icon, IconButton, Input, useTranslation } from '@dxos/react-ui';\nimport { Form, type FormFieldMap } from '@dxos/react-ui-form';\nimport { HuePicker, IconPicker } from '@dxos/react-ui-pickers';\n\nimport { meta } from '#meta';\nimport { SpaceOperation } from '#operations';\nimport { SpaceCapabilities, SpaceForm } from '#types';\n\nconst SpaceFormSchema = SpaceForm;\n\n// TODO(wittjosiah): Handle space migrations here?\nexport const SpaceSettingsContainer = ({ space }: AppSurface.SpaceArticleProps) => {\n  const { t } = useTranslation(meta.profile.key);\n  const { invokePromise } = useOperationInvoker();\n  const client = useClient();\n  const [edgeReplication, setEdgeReplication] = useState(\n    space.internal.data.edgeReplication === EdgeReplicationSetting.ENABLED,\n  );\n  const toggleEdgeReplication = useCallback(\n    async (next: boolean) => {\n      setEdgeReplication(next);\n      await space?.internal\n        .setEdgeReplicationPreference(next ? EdgeReplicationSetting.ENABLED : EdgeReplicationSetting.DISABLED)\n        .catch((err: unknown) => {\n          log.catch(err);\n          setEdgeReplication(!next);\n        });\n    },\n    [space],\n  );\n\n  const handleValuesChanged = useCallback(\n    (newValues: Partial<Schema.Schema.Type<typeof SpaceFormSchema>>, meta: { changed?: Record<string, boolean> }) => {\n      const changed = meta.changed ?? {};\n      if (changed['edgeReplication']) {\n        void toggleEdgeReplication(newValues.edgeReplication ?? false);\n      }\n\n      if (changed['name'] || changed['icon'] || changed['hue']) {\n        Obj.update(space.properties, (obj) => {\n          if (changed['name'] && newValues.name !== undefined) {\n            obj.name = newValues.name;\n          }\n          if (changed['icon']) {\n            obj.icon = newValues.icon;\n          }\n          if (changed['hue']) {\n            obj.hue = newValues.hue;\n          }\n        });\n      }\n    },\n    [space, toggleEdgeReplication],\n  );\n\n  const defaultValues = useMemo(\n    () => ({\n      name: space.properties.name,\n      icon: space.properties.icon,\n      hue: space.properties.hue,\n      edgeReplication,\n    }),\n    [space.properties.name, space.properties.icon, space.properties.hue, edgeReplication],\n  );\n\n  const personal = AppSpace.isPersonalSpace(space);\n\n  const fieldMap = useMemo<FormFieldMap>(\n    () => ({\n      name: personal\n        ? () => null\n        : ({ type, label, getValue, onValueChange }) => {\n            const handleChange = useCallback(\n              ({ target: { value } }: ChangeEvent<HTMLInputElement>) => onValueChange(type, value),\n              [onValueChange, type],\n            );\n            return (\n              <Form.Row label={label} description={t('display-name.description')}>\n                <Input.Root>\n                  <Input.TextInput\n                    value={getValue()}\n                    onChange={handleChange}\n                    placeholder={t('display-name-input.placeholder')}\n                    classNames='min-w-64'\n                  />\n                </Input.Root>\n              </Form.Row>\n            );\n          },\n      icon: personal\n        ? () => null\n        : ({ type, label, getValue, onValueChange }) => {\n            const handleChange = useCallback((icon: string) => onValueChange(type, icon), [onValueChange, type]);\n            const handleReset = useCallback(() => onValueChange(type, undefined), [onValueChange, type]);\n            return (\n              <Form.Row label={label} description={t('icon.description')}>\n                <IconPicker\n                  value={getValue()}\n                  onChange={handleChange}\n                  onReset={handleReset}\n                  classNames='justify-self-end'\n                />\n              </Form.Row>\n            );\n          },\n      hue: ({ type, label, getValue, onValueChange }) => {\n        const handleChange = useCallback((nextHue: string) => onValueChange(type, nextHue), [onValueChange, type]);\n        const handleReset = useCallback(() => onValueChange(type, undefined), [onValueChange, type]);\n        return (\n          <Form.Row label={label} description={t('hue.description')}>\n            <HuePicker value={getValue()} onChange={handleChange} onReset={handleReset} classNames='justify-self-end' />\n          </Form.Row>\n        );\n      },\n      edgeReplication: ({ type, label, getValue, onValueChange }) => {\n        const handleChange = useCallback((checked: boolean) => onValueChange(type, checked), [onValueChange, type]);\n        return (\n          <Form.Row label={label} description={t('edge-replication.description')}>\n            <Input.Root>\n              <Input.Switch checked={getValue()} onCheckedChange={handleChange} classNames='justify-self-end' />\n            </Input.Root>\n          </Form.Row>\n        );\n      },\n    }),\n    [t, space, personal],\n  );\n\n  const handleBackupBinary = useCallback(async () => {\n    await invokePromise(SpaceOperation.ExportSpace, { space, format: SpaceArchive.Format.BINARY });\n  }, [space, invokePromise]);\n  const handleBackupJson = useCallback(async () => {\n    await invokePromise(SpaceOperation.ExportSpace, { space, format: SpaceArchive.Format.JSON });\n  }, [space, invokePromise]);\n\n  const repairs = useCapabilities(SpaceCapabilities.Repair);\n  const handleRepair = useCallback(async () => {\n    await Promise.all(repairs.map((repair) => repair({ space, isDefault: AppSpace.isPersonalSpace(space) })));\n  }, [space, repairs]);\n\n  const handleResetHome = useCallback(() => AppSpace.resetHomeVisibility(space), [space]);\n\n  const [deleteConfirmOpen, setDeleteConfirmOpen] = useState(false);\n  // Wired to an onClick handler: must resolve (never reject) so it can't trigger an unhandled rejection.\n  const handleDelete = useCallback(async () => {\n    try {\n      await invokePromise(SpaceOperation.Delete, { space });\n      setDeleteConfirmOpen(false);\n      const personalSpace = AppSpace.getPersonalSpace(client);\n      if (personalSpace) {\n        void invokePromise(LayoutOperation.SwitchWorkspace, { subject: GraphPath.getSpacePath(personalSpace.id) });\n      }\n    } catch (err) {\n      log.catch(err, { stage: 'delete: invocation rejected', spaceId: space.id });\n      setDeleteConfirmOpen(false);\n      void invokePromise(LayoutOperation.AddToast, {\n        id: `${space.id}-delete-failed`,\n        title: t('delete-space-failed.message'),\n        icon: 'ph--warning--regular',\n      });\n    }\n  }, [space, client, invokePromise, t]);\n\n  return (\n    <Form.Root\n      variant='settings'\n      key={space.id}\n      fieldMap={fieldMap}\n      schema={SpaceFormSchema}\n      defaultValues={defaultValues}\n      onValuesChanged={handleValuesChanged}\n    >\n      <Form.Viewport scroll>\n        <Form.Content>\n          <Form.Section\n            title={t('space-properties-settings-verbose.label')}\n            description={t('space-properties-settings.description', { ns: meta.profile.key })}\n          >\n            <Form.FieldSet />\n          </Form.Section>\n\n          <Form.Section title={t('space-controls.title')} description={t('space-controls.description')}>\n            <Form.Row label={t('space-id.title')} description={t('space-id.description')}>\n              <div className='flex items-center gap-2'>\n                <Input.Root>\n                  <Input.TextInput value={space.id} disabled classNames='flex-1 font-mono text-xs' />\n                </Input.Root>\n                <IconButton\n                  icon='ph--copy--regular'\n                  iconOnly\n                  label={t('copy-space-id.label')}\n                  onClick={() => {\n                    void navigator.clipboard.writeText(space.id);\n                  }}\n                />\n              </div>\n            </Form.Row>\n            <Form.Row label={t('backup-space.title')} description={t('backup-space.description')}>\n              <DropdownMenu.Root>\n                <DropdownMenu.Trigger asChild>\n                  <Button>\n                    {t('download-backup.label')}\n                    <Icon icon='ph--caret-down--regular' size={4} classNames='mis-2' />\n                  </Button>\n                </DropdownMenu.Trigger>\n                <DropdownMenu.Content>\n                  <DropdownMenu.Viewport>\n                    <DropdownMenu.Item onClick={handleBackupBinary}>\n                      {t('download-backup-binary.label')}\n                    </DropdownMenu.Item>\n                    <DropdownMenu.Item onClick={handleBackupJson}>{t('download-backup-json.label')}</DropdownMenu.Item>\n                  </DropdownMenu.Viewport>\n                </DropdownMenu.Content>\n              </DropdownMenu.Root>\n            </Form.Row>\n            <Form.Row label={t('repair-space.title')} description={t('repair-space.description')}>\n              <Button onClick={handleRepair}>{t('repair-space.label')}</Button>\n            </Form.Row>\n            <Form.Row label={t('reset-home.title')} description={t('reset-home.description')}>\n              <Button onClick={handleResetHome}>{t('reset-home.label')}</Button>\n            </Form.Row>\n          </Form.Section>\n\n          {!personal && (\n            <Form.Section title={t('danger-zone.title')} description={t('danger-zone.description')}>\n              <Form.Row label={t('delete-space.title')} description={t('delete-space.description')}>\n                <Dialog.Root open={deleteConfirmOpen} onOpenChange={setDeleteConfirmOpen}>\n                  <Dialog.Trigger asChild>\n                    <Button variant='destructive' data-testid='spaceSettings.deleteSpace'>\n                      {t('delete-space.label')}\n                    </Button>\n                  </Dialog.Trigger>\n                  <Dialog.Portal>\n                    <Dialog.Overlay>\n                      <Dialog.Content>\n                        <Dialog.Header>\n                          <Dialog.Title>{t('delete-space-confirm.title')}</Dialog.Title>\n                        </Dialog.Header>\n                        <Dialog.Body>\n                          <Dialog.Description>{t('delete-space-confirm.description')}</Dialog.Description>\n                          <div className='flex justify-end gap-2 mbs-4'>\n                            <Dialog.Close asChild>\n                              <Button>{t('cancel.label')}</Button>\n                            </Dialog.Close>\n                            <Button\n                              variant='destructive'\n                              onClick={handleDelete}\n                              data-testid='spaceSettings.deleteSpaceConfirm'\n                            >\n                              {t('delete-space.label')}\n                            </Button>\n                          </div>\n                        </Dialog.Body>\n                      </Dialog.Content>\n                    </Dialog.Overlay>\n                  </Dialog.Portal>\n                </Dialog.Root>\n              </Form.Row>\n            </Form.Section>\n          )}\n        </Form.Content>\n      </Form.Viewport>\n    </Form.Root>\n  );\n};\n\nSpaceSettingsContainer.displayName = 'SpaceSettingsContainer';\n"],"mappings":"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"}

package/dist/lib/chunk-SyncStatus.mjs

@@ -0,0 +1,166 @@
+import { Unit } from "@dxos/util";
+import { meta } from "#meta";
+import { EdgeStatus } from "@dxos/protocols/proto/dxos/client/services";
+import { useEffect, useState } from "react";
+import { useClient } from "@dxos/react-client";
+import { getSyncSummary, useSyncState } from "@dxos/react-client/echo";
+import { Icon, IconButton, Popover, useTranslation } from "@dxos/react-ui";
+import { iconSize, mx } from "@dxos/ui-theme";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEdgeStatus, useStalled } from "#hooks";
+import { createClientSaveTracker, getIcon, getStatus } from "#components";
+import { StatusBar } from "@dxos/plugin-status-bar/components";
+//#region src/containers/SyncStatus/SyncStatus.tsx
+var SyncStatus = () => {
+	const client = useClient();
+	const state = useSyncState();
+	const edgeStatus = useEdgeStatus();
+	const [saved, setSaved] = useState(true);
+	useEffect(() => createClientSaveTracker(client, (state) => setSaved(state === "saved")), []);
+	return /* @__PURE__ */ jsx(SyncStatusIndicator, {
+		state,
+		saved,
+		edgeStatus
+	});
+};
+var SyncStatusIndicator = ({ state, saved, edgeStatus }) => {
+	const { t } = useTranslation(meta.profile.key);
+	const summary = getSyncSummary(state);
+	const offline = edgeStatus.state !== EdgeStatus.ConnectionState.CONNECTED || Object.values(state).length === 0;
+	const needsToUpload = summary.differentDocuments > 0 || summary.missingOnRemote > 0;
+	const needsToDownload = summary.differentDocuments > 0 || summary.missingOnLocal > 0;
+	const outstanding = summary.differentDocuments + summary.missingOnLocal + summary.missingOnRemote;
+	const transferring = edgeStatus.rateBytesUp + edgeStatus.rateBytesDown > 0;
+	const status = getStatus({
+		offline,
+		saved,
+		stalled: useStalled({
+			active: !offline && outstanding > 0 && !transferring,
+			progress: outstanding
+		}),
+		needsToUpload,
+		needsToDownload
+	});
+	const icon = getIcon(status);
+	return /* @__PURE__ */ jsxs(Popover.Root, { children: [/* @__PURE__ */ jsx(Popover.Trigger, {
+		asChild: true,
+		children: /* @__PURE__ */ jsx(StatusBar.Item, { children: /* @__PURE__ */ jsx(IconButton, {
+			variant: "ghost",
+			icon,
+			iconOnly: true,
+			label: t(`${status}.label`)
+		}) })
+	}), /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsxs(Popover.Content, {
+		side: "left",
+		children: [/* @__PURE__ */ jsx(EdgeConnectionPopover, { status: edgeStatus }), /* @__PURE__ */ jsx(Popover.Arrow, {})]
+	}) })] });
+};
+var EdgeConnectionPopover = ({ status }) => {
+	const { t } = useTranslation(meta.profile.key);
+	const client = useClient();
+	const isConnected = status.state === EdgeStatus.ConnectionState.CONNECTED;
+	const edgeUrl = client.config.get("runtime.services.edge.url");
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-2 w-[240px] p-2",
+		style: iconSize(4),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2 mb-2",
+				children: [/* @__PURE__ */ jsx(Icon, {
+					icon: isConnected ? "ph--check-circle--regular" : "ph--warning-circle--regular",
+					classNames: mx(isConnected ? "text-success-text" : "text-error-text animate-pulse")
+				}), /* @__PURE__ */ jsx("span", {
+					className: "font-medium text-sm truncate",
+					title: edgeUrl,
+					children: isConnected ? edgeUrl ?? t("sync-edge-connected.label") : t("sync-edge-disconnected.label")
+				})]
+			}),
+			!isConnected && /* @__PURE__ */ jsxs("div", {
+				className: "grid grid-cols-[min-content_1fr_min-content_min-content] gap-2",
+				children: [/* @__PURE__ */ jsx(Icon, { icon: "ph--cloud-x--regular" }), /* @__PURE__ */ jsx("span", {
+					className: "text-description",
+					children: t("sync-no-connection.label")
+				})]
+			}),
+			isConnected && /* @__PURE__ */ jsxs("div", {
+				className: "grid grid-cols-[min-content_1fr_min-content_min-content] gap-2 gap-y-1",
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: "col-span-full grid grid-cols-subgrid gap-2 items-center text-sm",
+						children: [
+							/* @__PURE__ */ jsx(Icon, { icon: "ph--timer--regular" }),
+							/* @__PURE__ */ jsx("span", {
+								className: "text-description",
+								children: t("sync-latency.label")
+							}),
+							/* @__PURE__ */ jsx("div", {}),
+							/* @__PURE__ */ jsx(UnitValue, {
+								value: status.rtt,
+								format: Unit.Millisecond
+							})
+						]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "col-span-full grid grid-cols-subgrid gap-2 items-center text-sm",
+						children: [
+							/* @__PURE__ */ jsx(Icon, {
+								icon: "ph--arrow-up--regular",
+								classNames: "text-green-500"
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "text-description",
+								children: t("sync-upload.label")
+							}),
+							/* @__PURE__ */ jsx(UnitValue, {
+								value: status.messagesSent,
+								format: Unit.Thousand
+							}),
+							/* @__PURE__ */ jsx(UnitValue, {
+								value: status.rateBytesUp,
+								format: Unit.Kilobyte,
+								suffix: "/s"
+							})
+						]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "col-span-full grid grid-cols-subgrid gap-2 items-center text-sm",
+						children: [
+							/* @__PURE__ */ jsx(Icon, {
+								icon: "ph--arrow-down--regular",
+								classNames: "text-orange-500"
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "text-description",
+								children: t("sync-download.label")
+							}),
+							/* @__PURE__ */ jsx(UnitValue, {
+								value: status.messagesReceived,
+								format: Unit.Thousand
+							}),
+							/* @__PURE__ */ jsx(UnitValue, {
+								value: status.rateBytesDown,
+								format: Unit.Kilobyte,
+								suffix: "/s"
+							})
+						]
+					})
+				]
+			})
+		]
+	});
+};
+var UnitValue = ({ value: input, format, suffix }) => {
+	const { formattedValue, unit } = format(input);
+	return /* @__PURE__ */ jsxs("span", {
+		className: "font-mono",
+		children: [formattedValue, /* @__PURE__ */ jsxs("span", {
+			className: "ms-1 text-subdued",
+			children: [unit.symbol, suffix]
+		})]
+	});
+};
+SyncStatus.displayName = "SyncStatus";
+//#endregion
+export { SyncStatus as default };
+
+//# sourceMappingURL=chunk-SyncStatus.mjs.map

package/dist/lib/chunk-SyncStatus.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"chunk-SyncStatus.mjs","names":[],"sources":["../../src/containers/SyncStatus/SyncStatus.tsx"],"sourcesContent":["//\n// Copyright 2024 DXOS.org\n//\n\nimport React, { useEffect, useState } from 'react';\n\nimport { StatusBar } from '@dxos/plugin-status-bar/components';\nimport { EdgeStatus } from '@dxos/protocols/proto/dxos/client/services';\nimport { useClient } from '@dxos/react-client';\nimport { type SpaceSyncStateMap, getSyncSummary, useSyncState } from '@dxos/react-client/echo';\nimport { Icon, IconButton, Popover, useTranslation } from '@dxos/react-ui';\nimport { iconSize, mx } from '@dxos/ui-theme';\nimport { Unit, type UnitFormat } from '@dxos/util';\n\nimport { createClientSaveTracker, getIcon, getStatus } from '#components';\nimport { useEdgeStatus, useStalled } from '#hooks';\nimport { meta } from '#meta';\n\nexport const SyncStatus = () => {\n  const client = useClient();\n  const state = useSyncState();\n  const edgeStatus = useEdgeStatus();\n  const [saved, setSaved] = useState(true);\n  useEffect(() => createClientSaveTracker(client, (state) => setSaved(state === 'saved')), []);\n\n  return <SyncStatusIndicator state={state} saved={saved} edgeStatus={edgeStatus} />;\n};\n\nexport const SyncStatusIndicator = ({\n  state,\n  saved,\n  edgeStatus,\n}: {\n  state: SpaceSyncStateMap;\n  saved: boolean;\n  edgeStatus: EdgeStatus;\n}) => {\n  const { t } = useTranslation(meta.profile.key);\n  const summary = getSyncSummary(state);\n  // Absent peer sync state is indistinguishable from having no connection.\n  const offline = edgeStatus.state !== EdgeStatus.ConnectionState.CONNECTED || Object.values(state).length === 0;\n  const needsToUpload = summary.differentDocuments > 0 || summary.missingOnRemote > 0;\n  const needsToDownload = summary.differentDocuments > 0 || summary.missingOnLocal > 0;\n\n  // Documents left to reconcile; a change means replication advanced, so the stall timer restarts.\n  const outstanding = summary.differentDocuments + summary.missingOnLocal + summary.missingOnRemote;\n  // Bytes on the wire prove liveness while the document counts hold steady (e.g. one large document).\n  const transferring = edgeStatus.rateBytesUp + edgeStatus.rateBytesDown > 0;\n  const stalled = useStalled({ active: !offline && outstanding > 0 && !transferring, progress: outstanding });\n\n  const status = getStatus({ offline, saved, stalled, needsToUpload, needsToDownload });\n  const icon = getIcon(status);\n\n  return (\n    <Popover.Root>\n      <Popover.Trigger asChild>\n        <StatusBar.Item>\n          {/* The icon and label carry the status; the indicator keeps a single colour in every state. */}\n          <IconButton variant='ghost' icon={icon} iconOnly label={t(`${status}.label`)} />\n        </StatusBar.Item>\n      </Popover.Trigger>\n      <Popover.Portal>\n        <Popover.Content side='left'>\n          <EdgeConnectionPopover status={edgeStatus} />\n          <Popover.Arrow />\n        </Popover.Content>\n      </Popover.Portal>\n    </Popover.Root>\n  );\n};\n\nconst EdgeConnectionPopover = ({ status }: { status: EdgeStatus }) => {\n  const { t } = useTranslation(meta.profile.key);\n  const client = useClient();\n\n  const isConnected = status.state === EdgeStatus.ConnectionState.CONNECTED;\n  const edgeUrl = client.config.get('runtime.services.edge.url');\n\n  return (\n    <div className='flex flex-col gap-2 w-[240px] p-2' style={iconSize(4)}>\n      {/* Connection Status Header */}\n      <div className='flex items-center gap-2 mb-2'>\n        <Icon\n          icon={isConnected ? 'ph--check-circle--regular' : 'ph--warning-circle--regular'}\n          classNames={mx(isConnected ? 'text-success-text' : 'text-error-text animate-pulse')}\n        />\n        <span className='font-medium text-sm truncate' title={edgeUrl}>\n          {isConnected ? (edgeUrl ?? t('sync-edge-connected.label')) : t('sync-edge-disconnected.label')}\n        </span>\n      </div>\n\n      {/* Connection Details */}\n      {!isConnected && (\n        <div className='grid grid-cols-[min-content_1fr_min-content_min-content] gap-2'>\n          <Icon icon='ph--cloud-x--regular' />\n          <span className='text-description'>{t('sync-no-connection.label')}</span>\n        </div>\n      )}\n\n      {isConnected && (\n        <div className='grid grid-cols-[min-content_1fr_min-content_min-content] gap-2 gap-y-1'>\n          {/* Latency */}\n          <div className='col-span-full grid grid-cols-subgrid gap-2 items-center text-sm'>\n            <Icon icon='ph--timer--regular' />\n            <span className='text-description'>{t('sync-latency.label')}</span>\n            <div />\n            <UnitValue value={status.rtt} format={Unit.Millisecond} />\n          </div>\n\n          {/* Upload Speed */}\n          <div className='col-span-full grid grid-cols-subgrid gap-2 items-center text-sm'>\n            <Icon icon='ph--arrow-up--regular' classNames='text-green-500' />\n            <span className='text-description'>{t('sync-upload.label')}</span>\n            <UnitValue value={status.messagesSent} format={Unit.Thousand} />\n            <UnitValue value={status.rateBytesUp} format={Unit.Kilobyte} suffix='/s' />\n          </div>\n\n          {/* Download Speed */}\n          <div className='col-span-full grid grid-cols-subgrid gap-2 items-center text-sm'>\n            <Icon icon='ph--arrow-down--regular' classNames='text-orange-500' />\n            <span className='text-description'>{t('sync-download.label')}</span>\n            <UnitValue value={status.messagesReceived} format={Unit.Thousand} />\n            <UnitValue value={status.rateBytesDown} format={Unit.Kilobyte} suffix='/s' />\n          </div>\n        </div>\n      )}\n    </div>\n  );\n};\n\n// TODO(burdon): Factor out.\nconst UnitValue = ({ value: input, format, suffix }: { value: number; format: UnitFormat; suffix?: string }) => {\n  const { formattedValue, unit } = format(input);\n  return (\n    <span className='font-mono'>\n      {formattedValue}\n      <span className='ms-1 text-subdued'>\n        {unit.symbol}\n        {suffix}\n      </span>\n    </span>\n  );\n};\n\nSyncStatus.displayName = 'SyncStatus';\n"],"mappings":"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"}