@dxos/plugin-space 0.8.4-main.fffef41 → 0.8.4-staging.60fe92afc8

package/dist/lib/neutral/SpaceSettingsContainer-IB34TEOB.mjs

@@ -0,0 +1,276 @@
+import "./chunk-J5LGTIGS.mjs";
+
+// src/containers/SpaceSettingsContainer/SpaceSettingsContainer.tsx
+import React, { useCallback, useMemo, useState } from "react";
+import { useCapabilities, useOperationInvoker } from "@dxos/app-framework/ui";
+import { getPersonalSpace, getSpacePath, isPersonalSpace, LayoutOperation } from "@dxos/app-toolkit";
+import { Obj } from "@dxos/echo";
+import { log } from "@dxos/log";
+import { SpaceArchive } from "@dxos/protocols/proto/dxos/client/services";
+import { EdgeReplicationSetting } from "@dxos/protocols/proto/dxos/echo/metadata";
+import { useClient } from "@dxos/react-client";
+import { Button, Dialog, DropdownMenu, Icon, IconButton, Input, useTranslation } from "@dxos/react-ui";
+import { Form, Settings } from "@dxos/react-ui-form";
+import { HuePicker, IconPicker } from "@dxos/react-ui-pickers";
+import { meta } from "#meta";
+import { SpaceOperation } from "#operations";
+import { SpaceCapabilities, SpaceForm } from "#types";
+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.id);
+  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: 28, S: void 0 });
+      setEdgeReplication(!next);
+    });
+  }, [
+    space
+  ]);
+  const handleValuesChanged = useCallback((newValues, meta2) => {
+    const changed = meta2.changed ?? {};
+    if (changed["edgeReplication"]) {
+      void 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 = isPersonalSpace(space);
+  const fieldMap = useMemo(() => ({
+    name: personal ? () => null : ({ type, label, getValue, onValueChange }) => {
+      const handleChange = useCallback(({ target: { value } }) => onValueChange(type, value), [
+        onValueChange,
+        type
+      ]);
+      return /* @__PURE__ */ React.createElement(Settings.Item, {
+        title: label,
+        description: t("display-name.description")
+      }, /* @__PURE__ */ React.createElement(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__ */ React.createElement(Settings.Item, {
+        title: label,
+        description: t("icon.description")
+      }, /* @__PURE__ */ React.createElement(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__ */ React.createElement(Settings.Item, {
+        title: label,
+        description: t("hue.description")
+      }, /* @__PURE__ */ React.createElement(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__ */ React.createElement(Settings.Item, {
+        title: label,
+        description: t("edge-replication.description")
+      }, /* @__PURE__ */ React.createElement(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: isPersonalSpace(space)
+    })));
+  }, [
+    space,
+    repairs
+  ]);
+  const [deleteConfirmOpen, setDeleteConfirmOpen] = useState(false);
+  const handleDelete = useCallback(async () => {
+    try {
+      await invokePromise(SpaceOperation.Delete, {
+        space
+      });
+      setDeleteConfirmOpen(false);
+      const personalSpace = getPersonalSpace(client);
+      if (personalSpace) {
+        void invokePromise(LayoutOperation.SwitchWorkspace, {
+          subject: getSpacePath(personalSpace.id)
+        });
+      }
+    } catch (err) {
+      log.catch(err, {
+        stage: "delete: invocation rejected",
+        spaceId: space.id
+      }, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 184, S: void 0 });
+      setDeleteConfirmOpen(false);
+      void invokePromise(LayoutOperation.AddToast, {
+        id: `${space.id}-delete-failed`,
+        title: t("delete-space-failed.message"),
+        icon: "ph--warning--regular"
+      });
+    }
+  }, [
+    space,
+    client,
+    invokePromise,
+    t
+  ]);
+  return /* @__PURE__ */ React.createElement(Settings.Viewport, null, /* @__PURE__ */ React.createElement(Settings.Section, {
+    title: t("space-properties-settings-verbose.label"),
+    description: t("space-properties-settings.description", {
+      ns: meta.id
+    })
+  }, /* @__PURE__ */ React.createElement(Form.Root, {
+    key: space.id,
+    fieldMap,
+    schema: SpaceFormSchema,
+    defaultValues,
+    onValuesChanged: handleValuesChanged
+  }, /* @__PURE__ */ React.createElement(Form.FieldSet, null))), /* @__PURE__ */ React.createElement(Settings.Section, {
+    title: t("space-controls.title"),
+    description: t("space-controls.description")
+  }, /* @__PURE__ */ React.createElement(Settings.Item, {
+    title: t("space-key.title"),
+    description: t("space-key.description")
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: "flex items-center gap-2"
+  }, /* @__PURE__ */ React.createElement(Input.Root, null, /* @__PURE__ */ React.createElement(Input.TextInput, {
+    value: space.key.toHex(),
+    disabled: true,
+    classNames: "flex-1 font-mono text-xs"
+  })), /* @__PURE__ */ React.createElement(IconButton, {
+    icon: "ph--copy--regular",
+    iconOnly: true,
+    label: t("copy-space-key.label"),
+    onClick: () => {
+      void navigator.clipboard.writeText(space.key.toHex());
+    }
+  }))), /* @__PURE__ */ React.createElement(Settings.Item, {
+    title: t("backup-space.title"),
+    description: t("backup-space.description")
+  }, /* @__PURE__ */ React.createElement(DropdownMenu.Root, null, /* @__PURE__ */ React.createElement(DropdownMenu.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ React.createElement(Button, null, t("download-backup.label"), /* @__PURE__ */ React.createElement(Icon, {
+    icon: "ph--caret-down--regular",
+    size: 4,
+    classNames: "mis-2"
+  }))), /* @__PURE__ */ React.createElement(DropdownMenu.Content, null, /* @__PURE__ */ React.createElement(DropdownMenu.Viewport, null, /* @__PURE__ */ React.createElement(DropdownMenu.Item, {
+    onClick: handleBackupBinary
+  }, t("download-backup-binary.label")), /* @__PURE__ */ React.createElement(DropdownMenu.Item, {
+    onClick: handleBackupJson
+  }, t("download-backup-json.label")))))), /* @__PURE__ */ React.createElement(Settings.Item, {
+    title: t("repair-space.title"),
+    description: t("repair-space.description")
+  }, /* @__PURE__ */ React.createElement(Button, {
+    onClick: handleRepair
+  }, t("repair-space.label")))), /* @__PURE__ */ React.createElement(Settings.Section, {
+    title: t("danger-zone.title"),
+    description: t("danger-zone.description")
+  }, !personal && /* @__PURE__ */ React.createElement(Settings.Item, {
+    title: t("delete-space.title"),
+    description: t("delete-space.description")
+  }, /* @__PURE__ */ React.createElement(Dialog.Root, {
+    open: deleteConfirmOpen,
+    onOpenChange: setDeleteConfirmOpen
+  }, /* @__PURE__ */ React.createElement(Dialog.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ React.createElement(Button, {
+    variant: "destructive",
+    "data-testid": "spaceSettings.deleteSpace"
+  }, t("delete-space.label"))), /* @__PURE__ */ React.createElement(Dialog.Portal, null, /* @__PURE__ */ React.createElement(Dialog.Overlay, null, /* @__PURE__ */ React.createElement(Dialog.Content, null, /* @__PURE__ */ React.createElement(Dialog.Header, null, /* @__PURE__ */ React.createElement(Dialog.Title, null, t("delete-space-confirm.title"))), /* @__PURE__ */ React.createElement(Dialog.Body, null, /* @__PURE__ */ React.createElement(Dialog.Description, null, t("delete-space-confirm.description")), /* @__PURE__ */ React.createElement("div", {
+    className: "flex justify-end gap-2 mbs-4"
+  }, /* @__PURE__ */ React.createElement(Dialog.Close, {
+    asChild: true
+  }, /* @__PURE__ */ React.createElement(Button, null, t("cancel.label"))), /* @__PURE__ */ React.createElement(Button, {
+    variant: "destructive",
+    onClick: handleDelete,
+    "data-testid": "spaceSettings.deleteSpaceConfirm"
+  }, t("delete-space.label")))))))))));
+};
+SpaceSettingsContainer.displayName = "SpaceSettingsContainer";
+export {
+  SpaceSettingsContainer as default
+};
+//# sourceMappingURL=SpaceSettingsContainer-IB34TEOB.mjs.map

package/dist/lib/neutral/SpaceSettingsContainer-IB34TEOB.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "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 { getPersonalSpace, getSpacePath, isPersonalSpace, 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, Settings } 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.id);\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 = 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              <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      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              <Settings.Item title={label} description={t('icon.description')}>\n                <IconPicker\n                  value={getValue()}\n                  onChange={handleChange}\n                  onReset={handleReset}\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 handleReset = useCallback(() => onValueChange(type, undefined), [onValueChange, type]);\n        return (\n          <Settings.Item title={label} description={t('hue.description')}>\n            <HuePicker value={getValue()} onChange={handleChange} onReset={handleReset} classNames='justify-self-end' />\n          </Settings.Item>\n        );\n      },\n      edgeReplication: ({ type, label, getValue, onValueChange }) => {\n        const handleChange = useCallback((checked: boolean) => onValueChange(type, checked), [onValueChange, type]);\n        return (\n          <Settings.Item title={label} description={t('edge-replication.description')}>\n            <Input.Switch checked={getValue()} onCheckedChange={handleChange} classNames='justify-self-end' />\n          </Settings.Item>\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: isPersonalSpace(space) })));\n  }, [space, repairs]);\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 = getPersonalSpace(client);\n      if (personalSpace) {\n        void invokePromise(LayoutOperation.SwitchWorkspace, { subject: 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    <Settings.Viewport>\n      <Settings.Section\n        title={t('space-properties-settings-verbose.label')}\n        description={t('space-properties-settings.description', { ns: meta.id })}\n      >\n        <Form.Root\n          key={space.id}\n          fieldMap={fieldMap}\n          schema={SpaceFormSchema}\n          defaultValues={defaultValues}\n          onValuesChanged={handleValuesChanged}\n        >\n          <Form.FieldSet />\n        </Form.Root>\n      </Settings.Section>\n\n      <Settings.Section title={t('space-controls.title')} description={t('space-controls.description')}>\n        <Settings.Item title={t('space-key.title')} description={t('space-key.description')}>\n          <div className='flex items-center gap-2'>\n            <Input.Root>\n              <Input.TextInput value={space.key.toHex()} 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-key.label')}\n              onClick={() => {\n                void navigator.clipboard.writeText(space.key.toHex());\n              }}\n            />\n          </div>\n        </Settings.Item>\n        <Settings.Item title={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}>{t('download-backup-binary.label')}</DropdownMenu.Item>\n                <DropdownMenu.Item onClick={handleBackupJson}>{t('download-backup-json.label')}</DropdownMenu.Item>\n              </DropdownMenu.Viewport>\n            </DropdownMenu.Content>\n          </DropdownMenu.Root>\n        </Settings.Item>\n        <Settings.Item title={t('repair-space.title')} description={t('repair-space.description')}>\n          <Button onClick={handleRepair}>{t('repair-space.label')}</Button>\n        </Settings.Item>\n      </Settings.Section>\n\n      <Settings.Section title={t('danger-zone.title')} description={t('danger-zone.description')}>\n        {!personal && (\n          <Settings.Item title={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          </Settings.Item>\n        )}\n      </Settings.Section>\n    </Settings.Viewport>\n  );\n};\n\nSpaceSettingsContainer.displayName = 'SpaceSettingsContainer';\n"],
+  "mappings": "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",
+  "names": ["React", "useCallback", "useMemo", "useState", "useCapabilities", "useOperationInvoker", "getPersonalSpace", "getSpacePath", "isPersonalSpace", "LayoutOperation", "Obj", "log", "SpaceArchive", "EdgeReplicationSetting", "useClient", "Button", "Dialog", "DropdownMenu", "Icon", "IconButton", "Input", "useTranslation", "Form", "Settings", "HuePicker", "IconPicker", "meta", "SpaceOperation", "SpaceCapabilities", "SpaceForm", "SpaceFormSchema", "SpaceSettingsContainer", "invokePromise", "client", "edgeReplication", "setEdgeReplication", "toggleEdgeReplication", "next", "setEdgeReplicationPreference", "err", "space", "newValues", "changed", "name", "undefined", "obj", "properties", "hue", "personal", "handleChange", "onValueChange", "type", "value", "getValue", "placeholder", "classNames", "icon", "onReset", "handleReset", "checked", "onCheckedChange", "t", "format", "BINARY", "JSON", "Promise", "map", "repair", "isDefault", "handleDelete", "Delete", "setDeleteConfirmOpen", "SwitchWorkspace", "stage", "spaceId", "AddToast", "title", "ns", "key", "fieldMap", "schema", "defaultValues", "onValuesChanged", "className", "Root", "disabled", "iconOnly", "label", "onClick", "navigator", "writeText", "Item", "asChild", "handleBackupBinary", "handleBackupJson", "description", "handleRepair", "open", "deleteConfirmOpen", "onOpenChange", "variant", "data-testid", "Close", "displayName"]
+}

package/dist/lib/neutral/SyncStatus-CWOXWDDZ.mjs

@@ -0,0 +1,147 @@
+import "./chunk-J5LGTIGS.mjs";
+
+// src/containers/SyncStatus/SyncStatus.tsx
+import React, { useEffect, useState } from "react";
+import { log } from "@dxos/log";
+import { StatusBar } from "@dxos/plugin-status-bar/components";
+import { EdgeStatus } from "@dxos/protocols/proto/dxos/client/services";
+import { useClient } from "@dxos/react-client";
+import { useStream } from "@dxos/react-client/devtools";
+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 { Unit } from "@dxos/util";
+import { createClientSaveTracker, getIcon, getStatus } from "#components";
+import { meta } from "#meta";
+var __dxlog_file = "/__w/dxos/dxos/packages/plugins/plugin-space/src/containers/SyncStatus/SyncStatus.tsx";
+var SYNC_STALLED_TIMEOUT = 5e3;
+var SyncStatus = () => {
+  const client = useClient();
+  const state = useSyncState();
+  const [saved, setSaved] = useState(true);
+  useEffect(() => createClientSaveTracker(client, (state2) => setSaved(state2 === "saved")), []);
+  return /* @__PURE__ */ React.createElement(SyncStatusIndicator, {
+    state,
+    saved
+  });
+};
+var SyncStatusIndicator = ({ state, saved }) => {
+  const { t } = useTranslation(meta.id);
+  const summary = getSyncSummary(state);
+  const offline = Object.values(state).length === 0;
+  const needsToUpload = summary.differentDocuments > 0 || summary.missingOnRemote > 0;
+  const needsToDownload = summary.differentDocuments > 0 || summary.missingOnLocal > 0;
+  const status = getStatus({
+    offline,
+    saved,
+    needsToUpload,
+    needsToDownload
+  });
+  const [classNames, setClassNames] = useState();
+  useEffect(() => {
+    setClassNames(void 0);
+    if (offline || !needsToUpload && !needsToDownload) {
+      return;
+    }
+    const t2 = setTimeout(() => {
+      log.warn("sync stalled", {
+        state
+      }, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 46, S: void 0 });
+      setClassNames("text-error-text");
+    }, SYNC_STALLED_TIMEOUT);
+    return () => {
+      clearTimeout(t2);
+      setClassNames(void 0);
+    };
+  }, [
+    offline,
+    needsToUpload,
+    needsToDownload
+  ]);
+  return /* @__PURE__ */ React.createElement(Popover.Root, null, /* @__PURE__ */ React.createElement(Popover.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ React.createElement(StatusBar.Item, null, /* @__PURE__ */ React.createElement(IconButton, {
+    variant: "ghost",
+    icon: getIcon(status),
+    iconOnly: true,
+    label: t(`${status}.label`),
+    classNames
+  }))), /* @__PURE__ */ React.createElement(Popover.Portal, null, /* @__PURE__ */ React.createElement(Popover.Content, {
+    side: "left",
+    classNames: ""
+  }, /* @__PURE__ */ React.createElement(EdgeConnectionPopover, null), /* @__PURE__ */ React.createElement(Popover.Arrow, null))));
+};
+var EdgeConnectionPopover = () => {
+  const { t } = useTranslation(meta.id);
+  const client = useClient();
+  const { status } = useStream(() => client.services.services.EdgeAgentService.queryEdgeStatus(), {});
+  const isConnected = status?.state === EdgeStatus.ConnectionState.CONNECTED;
+  return /* @__PURE__ */ React.createElement("div", {
+    className: "flex flex-col gap-2 w-[240px] p-2",
+    style: iconSize(4)
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: "flex items-center gap-2 mb-2"
+  }, /* @__PURE__ */ React.createElement(Icon, {
+    icon: isConnected ? "ph--check-circle--regular" : "ph--warning-circle--regular",
+    classNames: mx(isConnected ? "text-success-text" : "text-error-text animate-pulse")
+  }), /* @__PURE__ */ React.createElement("span", {
+    className: "font-medium text-sm"
+  }, isConnected ? t("sync-edge-connected.label") : t("sync-edge-disconnected.label"))), status?.state === EdgeStatus.ConnectionState.NOT_CONNECTED && /* @__PURE__ */ React.createElement("div", {
+    className: "grid grid-cols-[min-content_1fr_min-content_min-content] gap-2"
+  }, /* @__PURE__ */ React.createElement(Icon, {
+    icon: "ph--cloud-x--regular"
+  }), /* @__PURE__ */ React.createElement("span", {
+    className: "text-description"
+  }, t("sync-no-connection.label"))), status?.state === EdgeStatus.ConnectionState.CONNECTED && /* @__PURE__ */ React.createElement("div", {
+    className: "grid grid-cols-[min-content_1fr_min-content_min-content] gap-2 gap-y-1"
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: "col-span-full grid grid-cols-subgrid gap-2 items-center text-sm"
+  }, /* @__PURE__ */ React.createElement(Icon, {
+    icon: "ph--timer--regular"
+  }), /* @__PURE__ */ React.createElement("span", {
+    className: "text-description"
+  }, t("sync-latency.label")), /* @__PURE__ */ React.createElement("div", null), /* @__PURE__ */ React.createElement(UnitValue, {
+    value: status.rtt,
+    format: Unit.Millisecond
+  })), /* @__PURE__ */ React.createElement("div", {
+    className: "col-span-full grid grid-cols-subgrid gap-2 items-center text-sm"
+  }, /* @__PURE__ */ React.createElement(Icon, {
+    icon: "ph--arrow-up--regular",
+    classNames: "text-green-500"
+  }), /* @__PURE__ */ React.createElement("span", {
+    className: "text-description"
+  }, t("sync-upload.label")), /* @__PURE__ */ React.createElement(UnitValue, {
+    value: status.messagesSent,
+    format: Unit.Thousand
+  }), /* @__PURE__ */ React.createElement(UnitValue, {
+    value: status.rateBytesUp,
+    format: Unit.Kilobyte,
+    suffix: "/s"
+  })), /* @__PURE__ */ React.createElement("div", {
+    className: "col-span-full grid grid-cols-subgrid gap-2 items-center text-sm"
+  }, /* @__PURE__ */ React.createElement(Icon, {
+    icon: "ph--arrow-down--regular",
+    classNames: "text-orange-500"
+  }), /* @__PURE__ */ React.createElement("span", {
+    className: "text-description"
+  }, t("sync-download.label")), /* @__PURE__ */ React.createElement(UnitValue, {
+    value: status.messagesReceived,
+    format: Unit.Thousand
+  }), /* @__PURE__ */ React.createElement(UnitValue, {
+    value: status.rateBytesDown,
+    format: Unit.Kilobyte,
+    suffix: "/s"
+  }))));
+};
+var UnitValue = ({ value: input, format, suffix }) => {
+  const { formattedValue, unit } = format(input);
+  return /* @__PURE__ */ React.createElement("span", {
+    className: "font-mono"
+  }, formattedValue, /* @__PURE__ */ React.createElement("span", {
+    className: "ms-1 text-subdued"
+  }, unit.symbol, suffix));
+};
+export {
+  SyncStatus as default
+};
+//# sourceMappingURL=SyncStatus-CWOXWDDZ.mjs.map

package/dist/lib/neutral/SyncStatus-CWOXWDDZ.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/containers/SyncStatus/SyncStatus.tsx"],
+  "sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport React, { useEffect, useState } from 'react';\n\nimport { log } from '@dxos/log';\nimport { StatusBar } from '@dxos/plugin-status-bar/components';\nimport { EdgeStatus } from '@dxos/protocols/proto/dxos/client/services';\nimport { type QueryEdgeStatusResponse } from '@dxos/protocols/proto/dxos/client/services';\nimport { useClient } from '@dxos/react-client';\nimport { useStream } from '@dxos/react-client/devtools';\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 { meta } from '#meta';\n\nconst SYNC_STALLED_TIMEOUT = 5_000;\n\nexport const SyncStatus = () => {\n  const client = useClient();\n  const state = useSyncState();\n  const [saved, setSaved] = useState(true);\n  useEffect(() => createClientSaveTracker(client, (state) => setSaved(state === 'saved')), []);\n\n  return <SyncStatusIndicator state={state} saved={saved} />;\n};\n\nexport const SyncStatusIndicator = ({ state, saved }: { state: SpaceSyncStateMap; saved: boolean }) => {\n  const { t } = useTranslation(meta.id);\n  const summary = getSyncSummary(state);\n  const offline = Object.values(state).length === 0;\n  const needsToUpload = summary.differentDocuments > 0 || summary.missingOnRemote > 0;\n  const needsToDownload = summary.differentDocuments > 0 || summary.missingOnLocal > 0;\n  const status = getStatus({ offline, saved, needsToUpload, needsToDownload });\n\n  const [classNames, setClassNames] = useState<string>();\n  useEffect(() => {\n    setClassNames(undefined);\n    if (offline || (!needsToUpload && !needsToDownload)) {\n      return;\n    }\n\n    const t = setTimeout(() => {\n      log.warn('sync stalled', { state });\n      setClassNames('text-error-text');\n    }, SYNC_STALLED_TIMEOUT);\n\n    return () => {\n      clearTimeout(t);\n      setClassNames(undefined);\n    };\n  }, [offline, needsToUpload, needsToDownload]);\n\n  return (\n    <Popover.Root>\n      <Popover.Trigger asChild>\n        <StatusBar.Item>\n          <IconButton\n            variant='ghost'\n            icon={getIcon(status)}\n            iconOnly\n            label={t(`${status}.label`)}\n            classNames={classNames}\n          />\n        </StatusBar.Item>\n      </Popover.Trigger>\n      <Popover.Portal>\n        <Popover.Content side='left' classNames=''>\n          <EdgeConnectionPopover />\n          <Popover.Arrow />\n        </Popover.Content>\n      </Popover.Portal>\n    </Popover.Root>\n  );\n};\n\nconst EdgeConnectionPopover = () => {\n  const { t } = useTranslation(meta.id);\n  const client = useClient();\n  const { status } = useStream(\n    () => client.services.services.EdgeAgentService!.queryEdgeStatus(),\n    {} as QueryEdgeStatusResponse,\n  );\n\n  const isConnected = status?.state === EdgeStatus.ConnectionState.CONNECTED;\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'>\n          {isConnected ? t('sync-edge-connected.label') : t('sync-edge-disconnected.label')}\n        </span>\n      </div>\n\n      {/* Connection Details */}\n      {status?.state === EdgeStatus.ConnectionState.NOT_CONNECTED && (\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      {status?.state === EdgeStatus.ConnectionState.CONNECTED && (\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"],
+  "mappings": "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",
+  "names": ["React", "useEffect", "useState", "log", "StatusBar", "EdgeStatus", "useClient", "useStream", "getSyncSummary", "useSyncState", "Icon", "IconButton", "Popover", "useTranslation", "iconSize", "mx", "Unit", "createClientSaveTracker", "getIcon", "getStatus", "meta", "SYNC_STALLED_TIMEOUT", "state", "setSaved", "saved", "summary", "offline", "needsToUpload", "differentDocuments", "needsToDownload", "status", "setClassNames", "undefined", "t", "Item", "variant", "iconOnly", "label", "classNames", "side", "EdgeConnectionPopover", "client", "isConnected", "div", "className", "icon", "span", "value", "format", "Millisecond", "Thousand", "Kilobyte", "suffix", "formattedValue", "unit"]
+}

package/dist/lib/neutral/ViewEditor-QXRUOKXR.mjs

@@ -0,0 +1,101 @@
+import "./chunk-J5LGTIGS.mjs";
+
+// src/containers/ViewEditor/ViewEditor.tsx
+import React, { useCallback, useState } from "react";
+import { useOperationInvoker } from "@dxos/app-framework/ui";
+import { resolveSchemaWithRegistry } from "@dxos/app-toolkit/query";
+import { useTypeOptions } from "@dxos/app-toolkit/ui";
+import { Filter, Obj, Query, Scope, Tag, Type } from "@dxos/echo";
+import { useClient } from "@dxos/react-client";
+import { useQuery } from "@dxos/react-client/echo";
+import { useAsyncEffect } from "@dxos/react-ui";
+import { ViewEditor as NaturalViewEditor } from "@dxos/react-ui-form";
+import { ViewModel } from "@dxos/schema";
+import { SpaceOperation } from "#operations";
+var ViewEditor = ({ view }) => {
+  const { invokePromise } = useOperationInvoker();
+  const client = useClient();
+  const db = Obj.getDatabase(view);
+  const [type, setType] = useState();
+  const tags = useQuery(db, Filter.type(Tag.Tag));
+  const types = useTypeOptions({
+    db,
+    annotation: {
+      location: [
+        "database",
+        "runtime"
+      ],
+      kind: [
+        "user"
+      ]
+    }
+  });
+  useAsyncEffect(async () => {
+    if (!view?.query || !db) {
+      return;
+    }
+    const foundType = await resolveSchemaWithRegistry(db, view.query.ast);
+    if (foundType && foundType !== type) {
+      setType(() => foundType);
+    }
+  }, [
+    client,
+    db,
+    view,
+    type
+  ]);
+  const handleQueryChanged = useCallback(async (newQuery, target) => {
+    if (!view || !db) {
+      return;
+    }
+    const queue = target;
+    const query = queue ? Query.fromAst(newQuery).from([
+      Scope.feed(queue)
+    ]) : Query.fromAst(newQuery);
+    Obj.update(view, (view2) => {
+      view2.query.ast = query.ast;
+    });
+    const newType = await resolveSchemaWithRegistry(db, query.ast);
+    if (!newType) {
+      return;
+    }
+    const newView = ViewModel.make({
+      query,
+      jsonSchema: newType.jsonSchema
+    });
+    Obj.update(view, (view2) => {
+      view2.projection = Obj.getSnapshot(newView).projection;
+    });
+    setType(() => newType);
+  }, [
+    view,
+    type
+  ]);
+  const handleDelete = useCallback((fieldId) => {
+    void invokePromise(SpaceOperation.DeleteField, {
+      view,
+      fieldId
+    });
+  }, [
+    invokePromise,
+    view
+  ]);
+  if (!db || !type) {
+    return null;
+  }
+  return /* @__PURE__ */ React.createElement(NaturalViewEditor, {
+    registry: db.graph.registry,
+    type,
+    view,
+    mode: "tag",
+    db,
+    tags,
+    types,
+    onQueryChanged: handleQueryChanged,
+    onDelete: Type.getDatabase(type) != null ? handleDelete : void 0
+  });
+};
+export {
+  ViewEditor as default
+};
+//# sourceMappingURL=ViewEditor-QXRUOKXR.mjs.map

package/dist/lib/neutral/ViewEditor-QXRUOKXR.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/containers/ViewEditor/ViewEditor.tsx"],
+  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport React, { useCallback, useState } from 'react';\n\nimport { useOperationInvoker } from '@dxos/app-framework/ui';\nimport { resolveSchemaWithRegistry } from '@dxos/app-toolkit/query';\nimport { useTypeOptions } from '@dxos/app-toolkit/ui';\nimport { EID, Filter, Obj, Query, type QueryAST, Scope, Tag, Type, type View } from '@dxos/echo';\nimport { type Mutable } from '@dxos/echo/Obj';\nimport { useClient } from '@dxos/react-client';\nimport { useQuery } from '@dxos/react-client/echo';\nimport { useAsyncEffect } from '@dxos/react-ui';\nimport { ViewEditor as NaturalViewEditor } from '@dxos/react-ui-form';\nimport { ViewModel } from '@dxos/schema';\n\nimport { SpaceOperation } from '#operations';\n\nexport type ViewEditorProps = { view: View.View };\n\nexport const ViewEditor = ({ view }: ViewEditorProps) => {\n  const { invokePromise } = useOperationInvoker();\n  const client = useClient();\n  const db = Obj.getDatabase(view);\n  const [type, setType] = useState<Type.AnyEntity>();\n  const tags = useQuery(db, Filter.type(Tag.Tag));\n  const types = useTypeOptions({\n    db,\n    annotation: {\n      location: ['database', 'runtime'],\n      kind: ['user'],\n    },\n  });\n\n  useAsyncEffect(async () => {\n    if (!view?.query || !db) {\n      return;\n    }\n\n    const foundType = await resolveSchemaWithRegistry(db, view.query.ast);\n    if (foundType && foundType !== type) {\n      setType(() => foundType);\n    }\n  }, [client, db, view, type]);\n\n  const handleQueryChanged = useCallback(\n    async (newQuery: QueryAST.Query, target?: EID.EID) => {\n      if (!view || !db) {\n        return;\n      }\n\n      const queue = target;\n      const query = queue ? Query.fromAst(newQuery).from([Scope.feed(queue)]) : Query.fromAst(newQuery);\n      Obj.update(view, (view) => {\n        view.query.ast = query.ast as Mutable<typeof query.ast>;\n      });\n      const newType = await resolveSchemaWithRegistry(db, query.ast);\n      if (!newType) {\n        return;\n      }\n\n      const newView = ViewModel.make({\n        query,\n        jsonSchema: newType.jsonSchema,\n      });\n      Obj.update(view, (view) => {\n        view.projection = Obj.getSnapshot(newView).projection as Mutable<typeof view.projection>;\n      });\n\n      setType(() => newType);\n    },\n    [view, type],\n  );\n\n  const handleDelete = useCallback(\n    (fieldId: string) => {\n      void invokePromise(SpaceOperation.DeleteField, { view, fieldId });\n    },\n    [invokePromise, view],\n  );\n\n  if (!db || !type) {\n    return null;\n  }\n\n  return (\n    <NaturalViewEditor\n      registry={db.graph.registry}\n      type={type}\n      view={view}\n      mode='tag'\n      db={db}\n      tags={tags}\n      types={types}\n      onQueryChanged={handleQueryChanged}\n      onDelete={Type.getDatabase(type) != null ? handleDelete : undefined}\n    />\n  );\n};\n"],
+  "mappings": ";;;AAIA,OAAOA,SAASC,aAAaC,gBAAgB;AAE7C,SAASC,2BAA2B;AACpC,SAASC,iCAAiC;AAC1C,SAASC,sBAAsB;AAC/B,SAAcC,QAAQC,KAAKC,OAAsBC,OAAOC,KAAKC,YAAuB;AAEpF,SAASC,iBAAiB;AAC1B,SAASC,gBAAgB;AACzB,SAASC,sBAAsB;AAC/B,SAASC,cAAcC,yBAAyB;AAChD,SAASC,iBAAiB;AAE1B,SAASC,sBAAsB;AAIxB,IAAMH,aAAa,CAAC,EAAEI,KAAI,MAAmB;AAClD,QAAM,EAAEC,cAAa,IAAKjB,oBAAAA;AAC1B,QAAMkB,SAAST,UAAAA;AACf,QAAMU,KAAKf,IAAIgB,YAAYJ,IAAAA;AAC3B,QAAM,CAACK,MAAMC,OAAAA,IAAWvB,SAAAA;AACxB,QAAMwB,OAAOb,SAASS,IAAIhB,OAAOkB,KAAKd,IAAIA,GAAG,CAAA;AAC7C,QAAMiB,QAAQtB,eAAe;IAC3BiB;IACAM,YAAY;MACVC,UAAU;QAAC;QAAY;;MACvBC,MAAM;QAAC;;IACT;EACF,CAAA;AAEAhB,iBAAe,YAAA;AACb,QAAI,CAACK,MAAMY,SAAS,CAACT,IAAI;AACvB;IACF;AAEA,UAAMU,YAAY,MAAM5B,0BAA0BkB,IAAIH,KAAKY,MAAME,GAAG;AACpE,QAAID,aAAaA,cAAcR,MAAM;AACnCC,cAAQ,MAAMO,SAAAA;IAChB;EACF,GAAG;IAACX;IAAQC;IAAIH;IAAMK;GAAK;AAE3B,QAAMU,qBAAqBjC,YACzB,OAAOkC,UAA0BC,WAAAA;AAC/B,QAAI,CAACjB,QAAQ,CAACG,IAAI;AAChB;IACF;AAEA,UAAMe,QAAQD;AACd,UAAML,QAAQM,QAAQ7B,MAAM8B,QAAQH,QAAAA,EAAUI,KAAK;MAAC9B,MAAM+B,KAAKH,KAAAA;KAAO,IAAI7B,MAAM8B,QAAQH,QAAAA;AACxF5B,QAAIkC,OAAOtB,MAAM,CAACA,UAAAA;AAChBA,MAAAA,MAAKY,MAAME,MAAMF,MAAME;IACzB,CAAA;AACA,UAAMS,UAAU,MAAMtC,0BAA0BkB,IAAIS,MAAME,GAAG;AAC7D,QAAI,CAACS,SAAS;AACZ;IACF;AAEA,UAAMC,UAAU1B,UAAU2B,KAAK;MAC7Bb;MACAc,YAAYH,QAAQG;IACtB,CAAA;AACAtC,QAAIkC,OAAOtB,MAAM,CAACA,UAAAA;AAChBA,MAAAA,MAAK2B,aAAavC,IAAIwC,YAAYJ,OAAAA,EAASG;IAC7C,CAAA;AAEArB,YAAQ,MAAMiB,OAAAA;EAChB,GACA;IAACvB;IAAMK;GAAK;AAGd,QAAMwB,eAAe/C,YACnB,CAACgD,YAAAA;AACC,SAAK7B,cAAcF,eAAegC,aAAa;MAAE/B;MAAM8B;IAAQ,CAAA;EACjE,GACA;IAAC7B;IAAeD;GAAK;AAGvB,MAAI,CAACG,MAAM,CAACE,MAAM;AAChB,WAAO;EACT;AAEA,SACE,sBAAA,cAACR,mBAAAA;IACCmC,UAAU7B,GAAG8B,MAAMD;IACnB3B;IACAL;IACAkC,MAAK;IACL/B;IACAI;IACAC;IACA2B,gBAAgBpB;IAChBqB,UAAU5C,KAAKY,YAAYC,IAAAA,KAAS,OAAOwB,eAAeQ;;AAGhE;",
+  "names": ["React", "useCallback", "useState", "useOperationInvoker", "resolveSchemaWithRegistry", "useTypeOptions", "Filter", "Obj", "Query", "Scope", "Tag", "Type", "useClient", "useQuery", "useAsyncEffect", "ViewEditor", "NaturalViewEditor", "ViewModel", "SpaceOperation", "view", "invokePromise", "client", "db", "getDatabase", "type", "setType", "tags", "types", "annotation", "location", "kind", "query", "foundType", "ast", "handleQueryChanged", "newQuery", "target", "queue", "fromAst", "from", "feed", "update", "newType", "newView", "make", "jsonSchema", "projection", "getSnapshot", "handleDelete", "fieldId", "DeleteField", "registry", "graph", "mode", "onQueryChanged", "onDelete", "undefined"]
+}