@dxos/plugin-space 0.8.4-main.7ace549 → 0.8.4-main.8360d9e660

package/dist/lib/browser/chunk-2WHUSAHE.mjs

@@ -0,0 +1,579 @@
+import {
+  useInputSurfaceLookup
+} from "./chunk-ICXESMDI.mjs";
+import {
+  getSpaceDisplayName
+} from "./chunk-6OA75CWN.mjs";
+import {
+  SpaceOperation
+} from "./chunk-6IT5IBB5.mjs";
+import {
+  meta
+} from "./chunk-CBWGVOJE.mjs";
+
+// src/components/AwaitingObject/AwaitingObject.tsx
+import React, { useCallback, useEffect, useState } from "react";
+import { useOperationInvoker } from "@dxos/app-framework/ui";
+import { LayoutOperation } from "@dxos/app-toolkit";
+import { useLayout } from "@dxos/app-toolkit/ui";
+import { Obj } from "@dxos/echo";
+import { useClient } from "@dxos/react-client";
+import { Filter, useQuery } from "@dxos/react-client/echo";
+import { Button, Icon, Toast, useTranslation } from "@dxos/react-ui";
+import { osTranslations } from "@dxos/ui-theme";
+var WAIT_FOR_OBJECT_TIMEOUT = 3 * 60 * 1e3;
+var TOAST_TIMEOUT = 4 * 60 * 1e3;
+var AwaitingObject = ({ id }) => {
+  const { t } = useTranslation(meta.id);
+  const { invokePromise } = useOperationInvoker();
+  const [open, setOpen] = useState(true);
+  const [waiting, setWaiting] = useState(true);
+  const [found, setFound] = useState(false);
+  const layout = useLayout();
+  const client = useClient();
+  const objects = useQuery(client.spaces, Filter.everything());
+  useEffect(() => {
+    if (!id) {
+      return;
+    }
+    const timeout = setTimeout(() => setWaiting(false), WAIT_FOR_OBJECT_TIMEOUT);
+    return () => clearTimeout(timeout);
+  }, [
+    id
+  ]);
+  useEffect(() => {
+    if (objects.findIndex((object) => Obj.getDXN(object).toString() === id) > -1) {
+      setFound(true);
+      if (layout.active.includes(id)) {
+        setOpen(false);
+      }
+    }
+  }, [
+    id,
+    objects,
+    layout
+  ]);
+  const handleClose = useCallback(async () => invokePromise(SpaceOperation.WaitForObject, {
+    id: void 0
+  }), [
+    invokePromise
+  ]);
+  const handleNavigate = useCallback(() => {
+    void invokePromise(LayoutOperation.Open, {
+      subject: [
+        id
+      ]
+    });
+    void handleClose();
+  }, [
+    id,
+    handleClose,
+    invokePromise
+  ]);
+  return /* @__PURE__ */ React.createElement(Toast.Root, {
+    open,
+    duration: TOAST_TIMEOUT,
+    onOpenChange: setOpen
+  }, /* @__PURE__ */ React.createElement(Toast.Body, null, /* @__PURE__ */ React.createElement(Toast.Title, {
+    classNames: "flex items-center gap-2"
+  }, found ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Icon, {
+    icon: "ph--check-circle--regular",
+    size: 5
+  }), /* @__PURE__ */ React.createElement("span", null, t("found object label"))) : waiting ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Icon, {
+    icon: "ph--circle-notch--regular",
+    size: 5,
+    classNames: "animate-spin"
+  }), /* @__PURE__ */ React.createElement("span", null, t("waiting for object label"))) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Icon, {
+    icon: "ph--circle-dashed--regular",
+    size: 5
+  }), /* @__PURE__ */ React.createElement("span", null, t("object not found label")))), /* @__PURE__ */ React.createElement(Toast.Description, null, t(found ? "found object description" : waiting ? "waiting for object description" : "object not found description"))), /* @__PURE__ */ React.createElement(Toast.Actions, null, found ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Toast.Action, {
+    altText: t("go to object alt"),
+    asChild: true
+  }, /* @__PURE__ */ React.createElement(Button, {
+    variant: "primary",
+    onClick: handleNavigate
+  }, t("go to object label"))), /* @__PURE__ */ React.createElement(Toast.Close, {
+    asChild: true
+  }, /* @__PURE__ */ React.createElement(Button, {
+    onClick: handleClose
+  }, t("close label", {
+    ns: osTranslations
+  })))) : /* @__PURE__ */ React.createElement(Toast.Close, {
+    asChild: true
+  }, /* @__PURE__ */ React.createElement(Button, {
+    onClick: handleClose
+  }, t(waiting ? "close label" : "confirm label", {
+    ns: osTranslations
+  })))));
+};
+
+// src/components/CreateDialog/CreateObjectPanel.tsx
+import React2, { useCallback as useCallback2, useMemo } from "react";
+import { Obj as Obj2 } from "@dxos/echo";
+import { toLocalizedString, useDefaultValue, useTranslation as useTranslation2 } from "@dxos/react-ui";
+import { Form, omitId } from "@dxos/react-ui-form";
+import { SearchList, useSearchListResults } from "@dxos/react-ui-searchlist";
+var CreateObjectPanel = ({ options, spaces, typename, target, initialFormValues: initialFormValuesProp, defaultSpaceId, resolve, onTargetChange, onTypenameChange, onCreateObject }) => {
+  const initialFormValues = useDefaultValue(initialFormValuesProp, () => ({}));
+  const metadata = typename && resolve?.(typename);
+  const sortedOptions = useMemo(() => [
+    ...options
+  ].sort((a, b) => a.label.localeCompare(b.label)), [
+    options
+  ]);
+  const handleCreateObject = useCallback2(async (props) => {
+    if (!metadata) {
+      return;
+    }
+    await onCreateObject?.({
+      metadata,
+      data: props
+    });
+  }, [
+    onCreateObject,
+    metadata
+  ]);
+  const handleSelectOption = useCallback2(async (id) => {
+    const metadata2 = resolve?.(id);
+    if (metadata2 && !metadata2.inputSchema) {
+      await onCreateObject?.({
+        metadata: metadata2
+      });
+    } else {
+      onTypenameChange?.(id);
+    }
+  }, [
+    resolve,
+    onCreateObject
+  ]);
+  const inputSchema = useMemo(() => metadata && typeof metadata === "object" && metadata.inputSchema ? omitId(metadata.inputSchema) : void 0, [
+    metadata
+  ]);
+  const inputSurfaceLookup = useInputSurfaceLookup({
+    target
+  });
+  if (!metadata) {
+    return /* @__PURE__ */ React2.createElement(SelectType, {
+      options: sortedOptions,
+      onChange: handleSelectOption
+    });
+  }
+  if (!target) {
+    return /* @__PURE__ */ React2.createElement(SelectSpace, {
+      spaces,
+      defaultSpaceId,
+      onChange: onTargetChange
+    });
+  }
+  if (metadata.inputSchema) {
+    return /* @__PURE__ */ React2.createElement(Form.Root, {
+      testId: "create-object-form",
+      autoFocus: true,
+      schema: inputSchema,
+      defaultValues: initialFormValues,
+      db: Obj2.isObject(target) ? Obj2.getDatabase(target) : target,
+      fieldProvider: inputSurfaceLookup,
+      onSave: handleCreateObject
+    }, /* @__PURE__ */ React2.createElement(Form.Viewport, null, /* @__PURE__ */ React2.createElement(Form.Content, null, /* @__PURE__ */ React2.createElement(Form.FieldSet, null), /* @__PURE__ */ React2.createElement(Form.Submit, null))));
+  }
+  return null;
+};
+CreateObjectPanel.displayName = "CreateObjectPanel";
+var SelectSpace = ({ spaces, defaultSpaceId, onChange }) => {
+  const { t } = useTranslation2(meta.id);
+  const sortedSpaces = useMemo(() => [
+    ...spaces
+  ].sort((a, b) => {
+    const labelA = toLocalizedString(getSpaceDisplayName(a, {
+      personal: a.id === defaultSpaceId
+    }), t);
+    const labelB = toLocalizedString(getSpaceDisplayName(b, {
+      personal: b.id === defaultSpaceId
+    }), t);
+    return labelA.localeCompare(labelB);
+  }), [
+    spaces,
+    defaultSpaceId,
+    t
+  ]);
+  const { results, handleSearch } = useSearchListResults({
+    items: sortedSpaces,
+    extract: (space) => toLocalizedString(getSpaceDisplayName(space, {
+      personal: space.id === defaultSpaceId
+    }), t)
+  });
+  return /* @__PURE__ */ React2.createElement(SearchList.Root, {
+    onSearch: handleSearch
+  }, /* @__PURE__ */ React2.createElement(SearchList.Content, null, /* @__PURE__ */ React2.createElement(SearchList.Input, {
+    autoFocus: true,
+    "data-testid": "create-object-form.space-input",
+    placeholder: t("space input placeholder")
+  }), /* @__PURE__ */ React2.createElement(SearchList.Viewport, null, results.map((space) => /* @__PURE__ */ React2.createElement(SearchList.Item, {
+    key: space.id,
+    value: space.id,
+    label: toLocalizedString(getSpaceDisplayName(space, {
+      personal: space.id === defaultSpaceId
+    }), t),
+    onSelect: () => onChange?.(space.db),
+    classNames: "flex items-center gap-2"
+  })))));
+};
+var SelectType = ({ options, onChange }) => {
+  const { t } = useTranslation2(meta.id);
+  const { results, handleSearch } = useSearchListResults({
+    items: options,
+    extract: (option) => option.label
+  });
+  return /* @__PURE__ */ React2.createElement(SearchList.Root, {
+    onSearch: handleSearch
+  }, /* @__PURE__ */ React2.createElement(SearchList.Content, null, /* @__PURE__ */ React2.createElement(SearchList.Input, {
+    autoFocus: true,
+    "data-testid": "create-object-form.schema-input",
+    placeholder: t("schema input placeholder")
+  }), /* @__PURE__ */ React2.createElement(SearchList.Viewport, null, results.map((option) => /* @__PURE__ */ React2.createElement(SearchList.Item, {
+    key: option.id,
+    value: option.id,
+    label: option.label,
+    icon: option.icon ?? "ph--placeholder--regular",
+    classNames: "flex items-center gap-2",
+    onSelect: () => onChange(option.id)
+  })))));
+};
+
+// src/components/ObjectDetails/BaseObjectSettings.tsx
+import * as Function from "effect/Function";
+import * as Option from "effect/Option";
+import * as Schema from "effect/Schema";
+import React3, { useCallback as useCallback3, useMemo as useMemo2 } from "react";
+import { DXN, Obj as Obj3, Ref, Tag, Type } from "@dxos/echo";
+import { splitJsonPath } from "@dxos/echo/internal";
+import { invariant } from "@dxos/invariant";
+import { Form as Form2, omitId as omitId2 } from "@dxos/react-ui-form";
+import { isNonNullable } from "@dxos/util";
+var __dxlog_file = "/__w/dxos/dxos/packages/plugins/plugin-space/src/components/ObjectDetails/BaseObjectSettings.tsx";
+var BaseSchema = Schema.Struct({
+  tags: Schema.Array(Ref.Ref(Tag.Tag)).pipe(Schema.optional)
+});
+var BaseObjectSettings = ({ classNames, children, object }) => {
+  const db = Obj3.getDatabase(object);
+  const formSchema = useMemo2(() => {
+    return Function.pipe(Obj3.getSchema(object), Option.fromNullable, Option.map((schema) => omitId2(BaseSchema.pipe(Schema.extend(schema)))), Option.getOrUndefined);
+  }, [
+    object
+  ]);
+  const meta2 = Obj3.getMeta(object);
+  const tags = (meta2.tags ?? []).map((tag) => db?.makeRef(DXN.parse(tag))).filter(isNonNullable);
+  const values = useMemo2(() => ({
+    tags,
+    ...object
+  }), [
+    object,
+    tags
+  ]);
+  const handleCreate = useCallback3((schema, values2) => {
+    invariant(db, void 0, {
+      F: __dxlog_file,
+      L: 54,
+      S: void 0,
+      A: [
+        "db",
+        ""
+      ]
+    });
+    invariant(Type.isObjectSchema(schema), void 0, {
+      F: __dxlog_file,
+      L: 55,
+      S: void 0,
+      A: [
+        "Type.isObjectSchema(schema)",
+        ""
+      ]
+    });
+    const newObject = db.add(Obj3.make(schema, values2));
+    if (Obj3.instanceOf(Tag.Tag, newObject)) {
+      Obj3.change(object, (obj) => {
+        Obj3.getMeta(obj).tags = [
+          ...Obj3.getMeta(obj).tags ?? [],
+          Obj3.getDXN(newObject).toString()
+        ];
+      });
+    }
+  }, []);
+  const handleChange = useCallback3(({ tags: tags2, ...values2 }, { isValid, changed }) => {
+    if (!isValid) {
+      return;
+    }
+    const changedPaths = Object.keys(changed).filter((path) => changed[path]);
+    const hasTagsChange = changedPaths.some((path) => splitJsonPath(path)[0] === "tags");
+    if (hasTagsChange) {
+      Obj3.change(object, (obj) => {
+        Obj3.getMeta(obj).tags = tags2?.map((tag) => tag.dxn.toString()) ?? [];
+      });
+    }
+    const nonTagPaths = changedPaths.filter((path) => splitJsonPath(path)[0] !== "tags");
+    if (nonTagPaths.length > 0) {
+      Obj3.change(object, () => {
+        for (const path of nonTagPaths) {
+          const parts = splitJsonPath(path);
+          const value = Obj3.getValue(values2, parts);
+          Obj3.setValue(object, parts, value);
+        }
+      });
+    }
+  }, [
+    object
+  ]);
+  if (!formSchema) {
+    return null;
+  }
+  return /* @__PURE__ */ React3.createElement(Form2.Root, {
+    schema: formSchema,
+    defaultValues: values,
+    createOptionIcon: "ph--plus--regular",
+    createOptionLabel: [
+      "add tag label",
+      {
+        ns: meta.id
+      }
+    ],
+    createInitialValuePath: "label",
+    db,
+    onValuesChanged: handleChange,
+    onCreate: handleCreate
+  }, /* @__PURE__ */ React3.createElement(Form2.Viewport, null, /* @__PURE__ */ React3.createElement(Form2.Content, {
+    classNames
+  }, /* @__PURE__ */ React3.createElement(Form2.FieldSet, null), children)));
+};
+
+// src/components/ObjectDetails/ForeignKeys.tsx
+import React4, { useCallback as useCallback4 } from "react";
+import { IconButton, List, ListItem, useTranslation as useTranslation3 } from "@dxos/react-ui";
+var ForeignKeys = ({ keys, onDelete }) => {
+  return /* @__PURE__ */ React4.createElement(List, {
+    classNames: "flex flex-col gap-2"
+  }, keys.map((key) => /* @__PURE__ */ React4.createElement(KeyItem, {
+    key: key.id,
+    forignKey: key,
+    onDelete
+  })));
+};
+var KeyItem = ({ forignKey, onDelete }) => {
+  const { t } = useTranslation3(meta.id);
+  const handleDelete = useCallback4(() => {
+    onDelete?.(forignKey);
+  }, [
+    forignKey,
+    onDelete
+  ]);
+  return /* @__PURE__ */ React4.createElement(ListItem.Root, {
+    classNames: "px-2"
+  }, /* @__PURE__ */ React4.createElement(ListItem.Heading, {
+    classNames: "flex flex-col grow truncate"
+  }, /* @__PURE__ */ React4.createElement("div", null, forignKey.source), /* @__PURE__ */ React4.createElement("div", {
+    className: "text-description text-sm truncate"
+  }, forignKey.id)), /* @__PURE__ */ React4.createElement(ListItem.Endcap, null, /* @__PURE__ */ React4.createElement(IconButton, {
+    iconOnly: true,
+    icon: "ph--x--regular",
+    variant: "ghost",
+    label: t("delete key"),
+    onClick: handleDelete
+  })));
+};
+
+// src/components/ObjectForm/ObjectForm.tsx
+import * as Schema2 from "effect/Schema";
+import React5, { useCallback as useCallback5, useMemo as useMemo3 } from "react";
+import { DXN as DXN2, Obj as Obj4, Ref as Ref2, Tag as Tag2, Type as Type2 } from "@dxos/echo";
+import { splitJsonPath as splitJsonPath2 } from "@dxos/echo/internal";
+import { invariant as invariant2 } from "@dxos/invariant";
+import { Form as Form3, omitId as omitId3 } from "@dxos/react-ui-form";
+import { isNonNullable as isNonNullable2 } from "@dxos/util";
+var __dxlog_file2 = "/__w/dxos/dxos/packages/plugins/plugin-space/src/components/ObjectForm/ObjectForm.tsx";
+var ObjectForm = ({ object, schema }) => {
+  const db = Obj4.getDatabase(object);
+  const formSchema = useMemo3(() => omitId3(Schema2.Struct({
+    tags: Schema2.Array(Ref2.Ref(Tag2.Tag)).pipe(Schema2.optional)
+  }).pipe(Schema2.extend(schema))), [
+    schema
+  ]);
+  const meta2 = Obj4.getMeta(object);
+  const tags = (meta2.tags ?? []).map((tag) => db?.makeRef(DXN2.parse(tag))).filter(isNonNullable2);
+  const values = useMemo3(() => ({
+    tags,
+    ...object
+  }), [
+    object,
+    tags
+  ]);
+  const handleCreate = useCallback5((schema2, values2) => {
+    invariant2(db, void 0, {
+      F: __dxlog_file2,
+      L: 39,
+      S: void 0,
+      A: [
+        "db",
+        ""
+      ]
+    });
+    invariant2(Type2.isObjectSchema(schema2), void 0, {
+      F: __dxlog_file2,
+      L: 40,
+      S: void 0,
+      A: [
+        "Type.isObjectSchema(schema)",
+        ""
+      ]
+    });
+    const newObject = db.add(Obj4.make(schema2, values2));
+    if (Obj4.instanceOf(Tag2.Tag, newObject)) {
+      Obj4.change(object, (obj) => {
+        Obj4.getMeta(obj).tags = [
+          ...Obj4.getMeta(obj).tags ?? [],
+          Obj4.getDXN(newObject).toString()
+        ];
+      });
+    }
+  }, []);
+  const handleChange = useCallback5(({ tags: tags2, ...values2 }, { isValid, changed }) => {
+    if (!isValid) {
+      return;
+    }
+    const changedPaths = Object.keys(changed).filter((path) => changed[path]);
+    const hasTagsChange = changedPaths.some((path) => splitJsonPath2(path)[0] === "tags");
+    if (hasTagsChange) {
+      Obj4.change(object, (obj) => {
+        Obj4.getMeta(obj).tags = tags2?.map((tag) => tag.dxn.toString()) ?? [];
+      });
+    }
+    const nonTagPaths = changedPaths.filter((path) => splitJsonPath2(path)[0] !== "tags");
+    if (nonTagPaths.length > 0) {
+      Obj4.change(object, () => {
+        for (const path of nonTagPaths) {
+          const parts = splitJsonPath2(path);
+          const value = Obj4.getValue(values2, parts);
+          Obj4.setValue(object, parts, value);
+        }
+      });
+    }
+  }, [
+    object
+  ]);
+  return /* @__PURE__ */ React5.createElement(Form3.Root, {
+    schema: formSchema,
+    defaultValues: values,
+    createOptionIcon: "ph--plus--regular",
+    createOptionLabel: [
+      "add tag label",
+      {
+        ns: meta.id
+      }
+    ],
+    createInitialValuePath: "label",
+    db,
+    onValuesChanged: handleChange,
+    onCreate: handleCreate
+  }, /* @__PURE__ */ React5.createElement(Form3.Viewport, null, /* @__PURE__ */ React5.createElement(Form3.Content, null, /* @__PURE__ */ React5.createElement(Form3.FieldSet, null))));
+};
+
+// src/components/SyncStatus/save-tracker.ts
+import { Context } from "@dxos/context";
+var __dxlog_file3 = "/__w/dxos/dxos/packages/plugins/plugin-space/src/components/SyncStatus/save-tracker.ts";
+var createClientSaveTracker = (client, cb) => {
+  const CleanupFns = {};
+  const state = {};
+  const install = (spaces) => {
+    for (const space of spaces) {
+      if (state[space.id]) {
+        continue;
+      }
+      state[space.id] = "saved";
+      CleanupFns[space.id] = createSpaceSaveTracker(space, (s) => {
+        state[space.id] = s;
+        cb(Object.values(state).some((s2) => s2 === "saving") ? "saving" : "saved");
+      });
+    }
+  };
+  client.spaces.subscribe((spaces) => {
+    install(spaces);
+  });
+  install(client.spaces.get());
+  return () => {
+    for (const unsubscribe of Object.values(CleanupFns)) {
+      unsubscribe();
+    }
+  };
+};
+var createSpaceSaveTracker = (space, cb) => {
+  const ctx = new Context(void 0, {
+    F: __dxlog_file3,
+    L: 40
+  });
+  void space.waitUntilReady().then(() => {
+    if (ctx.disposed) {
+      return;
+    }
+    let hasUnsavedChanges = false;
+    let lastFlushPromise;
+    space.internal.db.saveStateChanged.on(ctx, ({ unsavedDocuments }) => {
+      hasUnsavedChanges = unsavedDocuments.length > 0;
+    });
+    space.internal.db.saveStateChanged.debounce(500).on(ctx, () => {
+      if (hasUnsavedChanges) {
+        lastFlushPromise = void 0;
+        cb("saving");
+      } else {
+        const flushPromise = space.db.flush();
+        lastFlushPromise = flushPromise;
+        void flushPromise.then(() => {
+          if (lastFlushPromise === flushPromise) {
+            cb("saved");
+          }
+        });
+      }
+    });
+  });
+  return () => {
+    void ctx.dispose();
+  };
+};
+
+// src/components/SyncStatus/status.ts
+var getStatus = ({ offline, saved, needsToUpload, needsToDownload }) => {
+  if (!saved) {
+    return "saving locally";
+  } else if (!offline && needsToDownload) {
+    return "downloading";
+  } else if (!offline && needsToUpload) {
+    return "uploading";
+  } else if (offline && !needsToUpload && !needsToDownload) {
+    return "offline persisted";
+  } else {
+    return "remote synced";
+  }
+};
+var getIcon = (status) => {
+  switch (status) {
+    case "saving locally":
+      return "ph--download--regular";
+    case "downloading":
+      return "ph--cloud-arrow-down--regular";
+    case "uploading":
+      return "ph--cloud-arrow-up--regular";
+    case "offline persisted":
+      return "ph--check-circle--regular";
+    case "remote synced":
+      return "ph--cloud-check--regular";
+  }
+};
+
+export {
+  AwaitingObject,
+  CreateObjectPanel,
+  BaseObjectSettings,
+  ForeignKeys,
+  ObjectForm,
+  createClientSaveTracker,
+  getStatus,
+  getIcon
+};
+//# sourceMappingURL=chunk-2WHUSAHE.mjs.map