@dxos/plugin-space 0.8.4-main.72ec0f3 → 0.8.4-main.7996785055

package/dist/lib/node-esm/SpaceSettingsContainer-7X5UKBIH.mjs

@@ -0,0 +1,248 @@
+import { createRequire } from 'node:module';const require = createRequire(import.meta.url);
+import "./chunk-GSBONFAB.mjs";
+import {
+  SpaceOperation
+} from "./chunk-LOAND6M6.mjs";
+import {
+  SpaceCapabilities,
+  SpaceForm
+} from "./chunk-QAL755T4.mjs";
+import {
+  meta
+} from "./chunk-63N5JJXI.mjs";
+
+// src/containers/SpaceSettingsContainer/SpaceSettingsContainer.tsx
+import * as Schema from "effect/Schema";
+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 { EdgeReplicationSetting } from "@dxos/protocols/proto/dxos/echo/metadata";
+import { useClient } from "@dxos/react-client";
+import { SpaceState } from "@dxos/react-client/echo";
+import { Button, Input, useFileDownload, useMulticastObservable, useTranslation } from "@dxos/react-ui";
+import { Form, Settings } from "@dxos/react-ui-form";
+import { HuePicker, IconPicker } from "@dxos/react-ui-pickers";
+var __dxlog_file = "/__w/dxos/dxos/packages/plugins/plugin-space/src/containers/SpaceSettingsContainer/SpaceSettingsContainer.tsx";
+var SpaceFormSchema = SpaceForm.pipe(Schema.extend(Schema.Struct({
+  archived: Schema.Boolean.annotations({
+    title: "Archive Space"
+  })
+})));
+var SpaceSettingsContainer = ({ space }) => {
+  const { t } = useTranslation(meta.id);
+  const { invokePromise } = useOperationInvoker();
+  const client = useClient();
+  const archived = useMulticastObservable(space.state) === SpaceState.SPACE_INACTIVE;
+  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, {
+        F: __dxlog_file,
+        L: 50,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
+      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.change(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;
+        }
+      });
+    }
+    if (changed["archived"]) {
+      if (newValues.archived && !archived) {
+        void invokePromise(SpaceOperation.Close, {
+          space
+        });
+        const personalSpace = getPersonalSpace(client);
+        if (personalSpace) {
+          void invokePromise(LayoutOperation.SwitchWorkspace, {
+            subject: getSpacePath(personalSpace.id)
+          });
+        }
+      } else if (!newValues.archived && archived) {
+        void invokePromise(SpaceOperation.Open, {
+          space
+        });
+      }
+    }
+  }, [
+    space,
+    client,
+    archived,
+    invokePromise,
+    toggleEdgeReplication
+  ]);
+  const values = useMemo(() => ({
+    name: space.properties.name,
+    icon: space.properties.icon,
+    hue: space.properties.hue,
+    edgeReplication,
+    archived
+  }), [
+    space.properties.name,
+    space.properties.icon,
+    space.properties.hue,
+    edgeReplication,
+    archived
+  ]);
+  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.ItemInput, {
+        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.ItemInput, {
+        title: label,
+        description: t("edge replication description")
+      }, /* @__PURE__ */ React.createElement(Input.Switch, {
+        checked: getValue(),
+        onCheckedChange: handleChange,
+        classNames: "justify-self-end"
+      }));
+    },
+    archived: personal ? () => null : ({ type, label, getValue, onValueChange }) => {
+      const handleChange = useCallback(() => onValueChange(type, !getValue()), [
+        onValueChange,
+        type,
+        getValue
+      ]);
+      return /* @__PURE__ */ React.createElement(Settings.ItemInput, {
+        title: label,
+        description: t("archive space description")
+      }, /* @__PURE__ */ React.createElement(Button, {
+        variant: getValue() ? "default" : "destructive",
+        onClick: handleChange
+      }, getValue() ? t("unarchive space label") : t("archive space label")));
+    }
+  }), [
+    t,
+    space,
+    personal
+  ]);
+  const download = useFileDownload();
+  const handleBackup = useCallback(async () => {
+    const archive = await space.internal.export();
+    download(new Blob([
+      archive.contents
+    ]), archive.filename);
+  }, [
+    space,
+    download
+  ]);
+  const repairs = useCapabilities(SpaceCapabilities.Repair);
+  const handleRepair = useCallback(async () => {
+    await Promise.all(repairs.map((repair) => repair({
+      space,
+      isDefault: isPersonalSpace(space)
+    })));
+  }, [
+    space,
+    repairs
+  ]);
+  return /* @__PURE__ */ React.createElement(Settings.Root, 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, {
+    fieldMap,
+    schema: SpaceFormSchema,
+    values,
+    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.ItemInput, {
+    title: t("backup space title"),
+    description: t("backup space description")
+  }, /* @__PURE__ */ React.createElement(Button, {
+    onClick: handleBackup
+  }, t("download backup label"))), /* @__PURE__ */ React.createElement(Settings.ItemInput, {
+    title: t("repair space title"),
+    description: t("repair space description")
+  }, /* @__PURE__ */ React.createElement(Button, {
+    onClick: handleRepair
+  }, t("repair space label")))));
+};
+SpaceSettingsContainer.displayName = "SpaceSettingsContainer";
+
+// src/containers/SpaceSettingsContainer/index.ts
+var SpaceSettingsContainer_default = SpaceSettingsContainer;
+export {
+  SpaceSettingsContainer_default as default
+};
+//# sourceMappingURL=SpaceSettingsContainer-7X5UKBIH.mjs.map

package/dist/lib/node-esm/SpaceSettingsContainer-7X5UKBIH.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/containers/SpaceSettingsContainer/SpaceSettingsContainer.tsx", "../../../src/containers/SpaceSettingsContainer/index.ts"],
+  "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 { Obj } from '@dxos/echo';\nimport { log } from '@dxos/log';\nimport { EdgeReplicationSetting } from '@dxos/protocols/proto/dxos/echo/metadata';\nimport { useClient } from '@dxos/react-client';\nimport { type Space, SpaceState } from '@dxos/react-client/echo';\nimport { Button, Input, useFileDownload, useMulticastObservable, 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.pipe(\n  Schema.extend(\n    Schema.Struct({\n      archived: Schema.Boolean.annotations({ title: 'Archive Space' }),\n    }),\n  ),\n);\n\nexport type SpaceSettingsContainerProps = {\n  space: Space;\n};\n\n// TODO(wittjosiah): Handle space migrations here?\nexport const SpaceSettingsContainer = ({ space }: SpaceSettingsContainerProps) => {\n  const { t } = useTranslation(meta.id);\n  const { invokePromise } = useOperationInvoker();\n  const client = useClient();\n  const archived = useMulticastObservable(space.state) === SpaceState.SPACE_INACTIVE;\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.change(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      if (changed['archived']) {\n        if (newValues.archived && !archived) {\n          void invokePromise(SpaceOperation.Close, { space });\n          const personalSpace = getPersonalSpace(client);\n          if (personalSpace) {\n            void invokePromise(LayoutOperation.SwitchWorkspace, {\n              subject: getSpacePath(personalSpace.id),\n            });\n          }\n        } else if (!newValues.archived && archived) {\n          void invokePromise(SpaceOperation.Open, { space });\n        }\n      }\n    },\n    [space, client, archived, invokePromise, toggleEdgeReplication],\n  );\n\n  const values = useMemo(\n    () => ({\n      name: space.properties.name,\n      icon: space.properties.icon,\n      hue: space.properties.hue,\n      edgeReplication,\n      archived,\n    }),\n    [space.properties.name, space.properties.icon, space.properties.hue, edgeReplication, archived],\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.ItemInput 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.ItemInput>\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.ItemInput title={label} description={t('edge replication description')}>\n            <Input.Switch checked={getValue()} onCheckedChange={handleChange} classNames='justify-self-end' />\n          </Settings.ItemInput>\n        );\n      },\n      archived: personal\n        ? () => null\n        : ({ type, label, getValue, onValueChange }) => {\n            const handleChange = useCallback(() => onValueChange(type, !getValue()), [onValueChange, type, getValue]);\n            return (\n              <Settings.ItemInput title={label} description={t('archive space description')}>\n                <Button variant={getValue() ? 'default' : 'destructive'} onClick={handleChange}>\n                  {getValue() ? t('unarchive space label') : t('archive space label')}\n                </Button>\n              </Settings.ItemInput>\n            );\n          },\n    }),\n    [t, space, personal],\n  );\n\n  const download = useFileDownload();\n  const handleBackup = useCallback(async () => {\n    const archive = await space.internal.export();\n    download(new Blob([archive.contents as Uint8Array<ArrayBuffer>]), archive.filename);\n  }, [space, download]);\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  return (\n    <Settings.Root>\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 fieldMap={fieldMap} schema={SpaceFormSchema} values={values} onValuesChanged={handleValuesChanged}>\n          <Form.FieldSet />\n        </Form.Root>\n      </Settings.Section>\n      <Settings.Section title={t('space controls title')} description={t('space controls description')}>\n        <Settings.ItemInput title={t('backup space title')} description={t('backup space description')}>\n          <Button onClick={handleBackup}>{t('download backup label')}</Button>\n        </Settings.ItemInput>\n        <Settings.ItemInput title={t('repair space title')} description={t('repair space description')}>\n          <Button onClick={handleRepair}>{t('repair space label')}</Button>\n        </Settings.ItemInput>\n      </Settings.Section>\n    </Settings.Root>\n  );\n};\n\nSpaceSettingsContainer.displayName = 'SpaceSettingsContainer';\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { SpaceSettingsContainer } from './SpaceSettingsContainer';\n\nexport default SpaceSettingsContainer;\n"],
+  "mappings": "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",
+  "names": ["Schema", "React", "useCallback", "useMemo", "useState", "useCapabilities", "useOperationInvoker", "getPersonalSpace", "getSpacePath", "isPersonalSpace", "LayoutOperation", "Obj", "log", "EdgeReplicationSetting", "useClient", "SpaceState", "Button", "Input", "useFileDownload", "useMulticastObservable", "useTranslation", "Form", "Settings", "HuePicker", "IconPicker", "SpaceFormSchema", "SpaceForm", "pipe", "extend", "Struct", "archived", "Boolean", "annotations", "title", "SpaceSettingsContainer", "space", "t", "useTranslation", "meta", "id", "invokePromise", "useOperationInvoker", "client", "useClient", "useMulticastObservable", "state", "SpaceState", "SPACE_INACTIVE", "edgeReplication", "setEdgeReplication", "useState", "internal", "data", "EdgeReplicationSetting", "ENABLED", "toggleEdgeReplication", "useCallback", "next", "setEdgeReplicationPreference", "DISABLED", "catch", "err", "log", "handleValuesChanged", "newValues", "changed", "Obj", "change", "properties", "obj", "name", "undefined", "icon", "hue", "SpaceOperation", "Close", "personalSpace", "getPersonalSpace", "LayoutOperation", "SwitchWorkspace", "subject", "getSpacePath", "Open", "values", "useMemo", "personal", "isPersonalSpace", "fieldMap", "type", "label", "getValue", "onValueChange", "handleChange", "target", "value", "Settings", "ItemInput", "description", "Input", "TextInput", "onChange", "placeholder", "classNames", "handleReset", "Item", "IconPicker", "onReset", "nextHue", "HuePicker", "checked", "Switch", "onCheckedChange", "Button", "variant", "onClick", "download", "useFileDownload", "handleBackup", "archive", "export", "Blob", "contents", "filename", "repairs", "useCapabilities", "SpaceCapabilities", "Repair", "handleRepair", "Promise", "all", "map", "repair", "isDefault", "Root", "Section", "ns", "Form", "schema", "onValuesChanged", "FieldSet", "displayName", "SpaceSettingsContainer"]
+}

package/dist/lib/node-esm/SyncStatus-K4WTAPDX.mjs

@@ -0,0 +1,161 @@
+import { createRequire } from 'node:module';const require = createRequire(import.meta.url);
+import {
+  createClientSaveTracker,
+  getIcon,
+  getStatus
+} from "./chunk-2KMG423O.mjs";
+import "./chunk-UYYUEDNH.mjs";
+import "./chunk-GKKWLSK3.mjs";
+import "./chunk-GSBONFAB.mjs";
+import "./chunk-LOAND6M6.mjs";
+import "./chunk-QAL755T4.mjs";
+import {
+  meta
+} from "./chunk-63N5JJXI.mjs";
+
+// src/containers/SyncStatus/SyncStatus.tsx
+import React, { useEffect, useState } from "react";
+import { StatusBar } from "@dxos/plugin-status-bar";
+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 { log } from "@dxos/log";
+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
+      }, {
+        F: __dxlog_file,
+        L: 48,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
+    }, SYNC_STALLED_TIMEOUT);
+    return () => clearTimeout(t2);
+  }, [
+    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, {
+    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));
+};
+
+// src/containers/SyncStatus/index.ts
+var SyncStatus_default = SyncStatus;
+export {
+  SyncStatus_default as default
+};
+//# sourceMappingURL=SyncStatus-K4WTAPDX.mjs.map

package/dist/lib/node-esm/SyncStatus-K4WTAPDX.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/containers/SyncStatus/SyncStatus.tsx", "../../../src/containers/SyncStatus/index.ts"],
+  "sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport React, { useEffect, useState } from 'react';\n\nimport { StatusBar } from '@dxos/plugin-status-bar';\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';\nimport { log } from '@dxos/log';\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    return () => clearTimeout(t);\n  }, [offline, needsToUpload, needsToDownload]);\n\n  return (\n    <Popover.Root>\n      <Popover.Trigger asChild>\n        <StatusBar.Item>\n          <IconButton icon={getIcon(status)} iconOnly label={t(`${status} label`)} classNames={classNames} />\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", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { SyncStatus } from './SyncStatus';\n\nexport default SyncStatus;\n"],
+  "mappings": "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",
+  "names": ["React", "useEffect", "useState", "StatusBar", "EdgeStatus", "useClient", "useStream", "getSyncSummary", "useSyncState", "Icon", "IconButton", "Popover", "useTranslation", "iconSize", "mx", "Unit", "log", "SYNC_STALLED_TIMEOUT", "SyncStatus", "client", "useClient", "state", "useSyncState", "saved", "setSaved", "useState", "useEffect", "createClientSaveTracker", "SyncStatusIndicator", "t", "useTranslation", "meta", "id", "summary", "getSyncSummary", "offline", "Object", "values", "length", "needsToUpload", "differentDocuments", "missingOnRemote", "needsToDownload", "missingOnLocal", "status", "getStatus", "classNames", "setClassNames", "undefined", "setTimeout", "warn", "clearTimeout", "Popover", "Root", "Trigger", "asChild", "StatusBar", "Item", "IconButton", "icon", "getIcon", "iconOnly", "label", "Portal", "Content", "side", "EdgeConnectionPopover", "Arrow", "useStream", "services", "EdgeAgentService", "queryEdgeStatus", "isConnected", "EdgeStatus", "ConnectionState", "CONNECTED", "div", "className", "style", "iconSize", "Icon", "mx", "span", "NOT_CONNECTED", "UnitValue", "value", "rtt", "format", "Unit", "Millisecond", "messagesSent", "Thousand", "rateBytesUp", "Kilobyte", "suffix", "messagesReceived", "rateBytesDown", "input", "formattedValue", "unit", "symbol", "SyncStatus"]
+}

package/dist/lib/node-esm/ViewEditor-WEK2BN6J.mjs

@@ -0,0 +1,116 @@
+import { createRequire } from 'node:module';const require = createRequire(import.meta.url);
+import {
+  resolveSchemaWithRegistry
+} from "./chunk-QOYEZLA5.mjs";
+import {
+  useTypeOptions
+} from "./chunk-UYYUEDNH.mjs";
+import "./chunk-GSBONFAB.mjs";
+import {
+  SpaceOperation
+} from "./chunk-LOAND6M6.mjs";
+import "./chunk-QAL755T4.mjs";
+import "./chunk-63N5JJXI.mjs";
+
+// src/containers/ViewEditor/ViewEditor.tsx
+import * as Schema from "effect/Schema";
+import React, { useCallback, useState } from "react";
+import { useOperationInvoker } from "@dxos/app-framework/ui";
+import { DXN, Filter, JsonSchema, Obj, Query, Tag, Type } from "@dxos/echo";
+import { useClient } from "@dxos/react-client";
+import { getSpace, 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";
+var ViewEditor = ({ view }) => {
+  const { invokePromise } = useOperationInvoker();
+  const client = useClient();
+  const space = getSpace(view);
+  const [schema, setSchema] = useState(() => Schema.Struct({}));
+  const tags = useQuery(space?.db, Filter.type(Tag.Tag));
+  const types = useTypeOptions({
+    space,
+    annotation: {
+      location: [
+        "database",
+        "runtime"
+      ],
+      kind: [
+        "user"
+      ]
+    }
+  });
+  useAsyncEffect(async () => {
+    if (!view?.query || !space) {
+      return;
+    }
+    const foundSchema = await resolveSchemaWithRegistry(space.db.schemaRegistry, view.query.ast);
+    if (foundSchema && foundSchema !== schema) {
+      setSchema(() => foundSchema);
+    }
+  }, [
+    client,
+    space,
+    view,
+    schema
+  ]);
+  const handleQueryChanged = useCallback(async (newQuery, target) => {
+    if (!view || !space) {
+      return;
+    }
+    const queue = target && DXN.tryParse(target) ? target : void 0;
+    const query = queue ? Query.fromAst(newQuery).from({
+      queues: [
+        queue
+      ]
+    }) : Query.fromAst(newQuery);
+    Obj.change(view, (obj) => {
+      obj.query.ast = query.ast;
+    });
+    const newSchema = await resolveSchemaWithRegistry(space.db.schemaRegistry, query.ast);
+    if (!newSchema) {
+      return;
+    }
+    const newView = ViewModel.make({
+      query,
+      jsonSchema: JsonSchema.toJsonSchema(newSchema)
+    });
+    Obj.change(view, (obj) => {
+      obj.projection = Obj.getSnapshot(newView).projection;
+    });
+    setSchema(() => newSchema);
+  }, [
+    view,
+    schema
+  ]);
+  const handleDelete = useCallback((fieldId) => {
+    void invokePromise(SpaceOperation.DeleteField, {
+      view,
+      fieldId
+    });
+  }, [
+    invokePromise,
+    view
+  ]);
+  if (!space || !schema) {
+    return null;
+  }
+  return /* @__PURE__ */ React.createElement(NaturalViewEditor, {
+    registry: space.db.schemaRegistry,
+    schema,
+    view,
+    mode: "tag",
+    db: space.db,
+    tags,
+    types,
+    onQueryChanged: handleQueryChanged,
+    onDelete: Type.isMutable(schema) ? handleDelete : void 0
+  });
+};
+
+// src/containers/ViewEditor/index.ts
+var ViewEditor_default = ViewEditor;
+export {
+  ViewEditor_default as default
+};
+//# sourceMappingURL=ViewEditor-WEK2BN6J.mjs.map

package/dist/lib/node-esm/ViewEditor-WEK2BN6J.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/containers/ViewEditor/ViewEditor.tsx", "../../../src/containers/ViewEditor/index.ts"],
+  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport * as Schema from 'effect/Schema';\nimport React, { useCallback, useState } from 'react';\n\nimport { useOperationInvoker } from '@dxos/app-framework/ui';\nimport { DXN, Filter, JsonSchema, Obj, Query, type QueryAST, Tag, Type } from '@dxos/echo';\nimport { type View } from '@dxos/echo';\nimport { type Mutable } from '@dxos/echo/internal';\nimport { useClient } from '@dxos/react-client';\nimport { getSpace, 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 { resolveSchemaWithRegistry } from '../../helpers';\nimport { useTypeOptions } from '../../hooks';\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 space = getSpace(view);\n  const [schema, setSchema] = useState<Schema.Schema.AnyNoContext>(() => Schema.Struct({}));\n  const tags = useQuery(space?.db, Filter.type(Tag.Tag));\n  const types = useTypeOptions({\n    space,\n    annotation: {\n      location: ['database', 'runtime'],\n      kind: ['user'],\n    },\n  });\n\n  useAsyncEffect(async () => {\n    if (!view?.query || !space) {\n      return;\n    }\n\n    const foundSchema = await resolveSchemaWithRegistry(space.db.schemaRegistry, view.query.ast);\n    if (foundSchema && foundSchema !== schema) {\n      setSchema(() => foundSchema);\n    }\n  }, [client, space, view, schema]);\n\n  const handleQueryChanged = useCallback(\n    async (newQuery: QueryAST.Query, target?: string) => {\n      if (!view || !space) {\n        return;\n      }\n\n      const queue = target && DXN.tryParse(target) ? target : undefined;\n      const query = queue ? Query.fromAst(newQuery).from({ queues: [queue] }) : Query.fromAst(newQuery);\n      Obj.change(view, (obj) => {\n        obj.query.ast = query.ast as Mutable<typeof query.ast>;\n      });\n      const newSchema = await resolveSchemaWithRegistry(space.db.schemaRegistry, query.ast);\n      if (!newSchema) {\n        return;\n      }\n\n      const newView = ViewModel.make({\n        query,\n        jsonSchema: JsonSchema.toJsonSchema(newSchema),\n      });\n      Obj.change(view, (obj) => {\n        obj.projection = Obj.getSnapshot(newView).projection as Mutable<typeof obj.projection>;\n      });\n\n      setSchema(() => newSchema);\n    },\n    [view, schema],\n  );\n\n  const handleDelete = useCallback(\n    (fieldId: string) => {\n      void invokePromise(SpaceOperation.DeleteField, { view, fieldId });\n    },\n    [invokePromise, view],\n  );\n\n  if (!space || !schema) {\n    return null;\n  }\n\n  return (\n    <NaturalViewEditor\n      registry={space.db.schemaRegistry}\n      schema={schema}\n      view={view}\n      mode='tag'\n      db={space.db}\n      tags={tags}\n      types={types}\n      onQueryChanged={handleQueryChanged}\n      onDelete={Type.isMutable(schema) ? handleDelete : undefined}\n    />\n  );\n};\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { ViewEditor } from './ViewEditor';\n\nexport default ViewEditor;\n"],
+  "mappings": ";;;;;;;;;;;;;;;AAIA,YAAYA,YAAY;AACxB,OAAOC,SAASC,aAAaC,gBAAgB;AAE7C,SAASC,2BAA2B;AACpC,SAASC,KAAKC,QAAQC,YAAYC,KAAKC,OAAsBC,KAAKC,YAAY;AAG9E,SAASC,iBAAiB;AAC1B,SAASC,UAAUC,gBAAgB;AACnC,SAASC,sBAAsB;AAC/B,SAASC,cAAcC,yBAAyB;AAChD,SAASC,iBAAiB;AAQnB,IAAMC,aAAa,CAAC,EAAEC,KAAI,MAAmB;AAClD,QAAM,EAAEC,cAAa,IAAKC,oBAAAA;AAC1B,QAAMC,SAASC,UAAAA;AACf,QAAMC,QAAQC,SAASN,IAAAA;AACvB,QAAM,CAACO,QAAQC,SAAAA,IAAaC,SAAqC,MAAaC,cAAO,CAAC,CAAA,CAAA;AACtF,QAAMC,OAAOC,SAASP,OAAOQ,IAAIC,OAAOC,KAAKC,IAAIA,GAAG,CAAA;AACpD,QAAMC,QAAQC,eAAe;IAC3Bb;IACAc,YAAY;MACVC,UAAU;QAAC;QAAY;;MACvBC,MAAM;QAAC;;IACT;EACF,CAAA;AAEAC,iBAAe,YAAA;AACb,QAAI,CAACtB,MAAMuB,SAAS,CAAClB,OAAO;AAC1B;IACF;AAEA,UAAMmB,cAAc,MAAMC,0BAA0BpB,MAAMQ,GAAGa,gBAAgB1B,KAAKuB,MAAMI,GAAG;AAC3F,QAAIH,eAAeA,gBAAgBjB,QAAQ;AACzCC,gBAAU,MAAMgB,WAAAA;IAClB;EACF,GAAG;IAACrB;IAAQE;IAAOL;IAAMO;GAAO;AAEhC,QAAMqB,qBAAqBC,YACzB,OAAOC,UAA0BC,WAAAA;AAC/B,QAAI,CAAC/B,QAAQ,CAACK,OAAO;AACnB;IACF;AAEA,UAAM2B,QAAQD,UAAUE,IAAIC,SAASH,MAAAA,IAAUA,SAASI;AACxD,UAAMZ,QAAQS,QAAQI,MAAMC,QAAQP,QAAAA,EAAUQ,KAAK;MAAEC,QAAQ;QAACP;;IAAO,CAAA,IAAKI,MAAMC,QAAQP,QAAAA;AACxFU,QAAIC,OAAOzC,MAAM,CAAC0C,QAAAA;AAChBA,UAAInB,MAAMI,MAAMJ,MAAMI;IACxB,CAAA;AACA,UAAMgB,YAAY,MAAMlB,0BAA0BpB,MAAMQ,GAAGa,gBAAgBH,MAAMI,GAAG;AACpF,QAAI,CAACgB,WAAW;AACd;IACF;AAEA,UAAMC,UAAUC,UAAUC,KAAK;MAC7BvB;MACAwB,YAAYC,WAAWC,aAAaN,SAAAA;IACtC,CAAA;AACAH,QAAIC,OAAOzC,MAAM,CAAC0C,QAAAA;AAChBA,UAAIQ,aAAaV,IAAIW,YAAYP,OAAAA,EAASM;IAC5C,CAAA;AAEA1C,cAAU,MAAMmC,SAAAA;EAClB,GACA;IAAC3C;IAAMO;GAAO;AAGhB,QAAM6C,eAAevB,YACnB,CAACwB,YAAAA;AACC,SAAKpD,cAAcqD,eAAeC,aAAa;MAAEvD;MAAMqD;IAAQ,CAAA;EACjE,GACA;IAACpD;IAAeD;GAAK;AAGvB,MAAI,CAACK,SAAS,CAACE,QAAQ;AACrB,WAAO;EACT;AAEA,SACE,sBAAA,cAACiD,mBAAAA;IACCC,UAAUpD,MAAMQ,GAAGa;IACnBnB;IACAP;IACA0D,MAAK;IACL7C,IAAIR,MAAMQ;IACVF;IACAM;IACA0C,gBAAgB/B;IAChBgC,UAAUC,KAAKC,UAAUvD,MAAAA,IAAU6C,eAAejB;;AAGxD;;;AC/FA,IAAA,qBAAe4B;",
+  "names": ["Schema", "React", "useCallback", "useState", "useOperationInvoker", "DXN", "Filter", "JsonSchema", "Obj", "Query", "Tag", "Type", "useClient", "getSpace", "useQuery", "useAsyncEffect", "ViewEditor", "NaturalViewEditor", "ViewModel", "ViewEditor", "view", "invokePromise", "useOperationInvoker", "client", "useClient", "space", "getSpace", "schema", "setSchema", "useState", "Struct", "tags", "useQuery", "db", "Filter", "type", "Tag", "types", "useTypeOptions", "annotation", "location", "kind", "useAsyncEffect", "query", "foundSchema", "resolveSchemaWithRegistry", "schemaRegistry", "ast", "handleQueryChanged", "useCallback", "newQuery", "target", "queue", "DXN", "tryParse", "undefined", "Query", "fromAst", "from", "queues", "Obj", "change", "obj", "newSchema", "newView", "ViewModel", "make", "jsonSchema", "JsonSchema", "toJsonSchema", "projection", "getSnapshot", "handleDelete", "fieldId", "SpaceOperation", "DeleteField", "NaturalViewEditor", "registry", "mode", "onQueryChanged", "onDelete", "Type", "isMutable", "ViewEditor"]
+}