@lapis-notes/bases 0.1.0

package/dist/bases-view/view-settings.svelte

@@ -0,0 +1,350 @@
+<script lang="ts">
+  import { Icon } from "@lapis-notes/api/icon";
+  import { Label } from "@lapismd/design-core/shadcn/label";
+  import { Input } from "@lapismd/design-core/shadcn/input";
+  import { Textarea } from "@lapismd/design-core/shadcn/textarea";
+  import * as Select from "@lapismd/design-core/shadcn/select";
+  import { Slider } from "@lapismd/design-core/shadcn/slider";
+  import { Switch } from "@lapismd/design-core/shadcn/switch";
+  import * as Popover from "@lapismd/design-core/shadcn/popover";
+  import * as Command from "@lapismd/design-core/shadcn/command";
+  import { Button } from "@lapismd/design-core/shadcn/button";
+  import ArrowUpDown from "@lucide/svelte/icons/chevrons-up-down";
+  import X from "@lucide/svelte/icons/x";
+  import CheckIcon from "@lucide/svelte/icons/check";
+  import { cn } from "@lapis-notes/api";
+  import type {
+    BasesAllOptions,
+    BasesOptions,
+    BasesPropertyId,
+  } from "@lapis-notes/api";
+  import type { QueryController } from "./bases.svelte";
+  import type { BasesViewBase } from "./models";
+
+  let {
+    controller,
+    view = $bindable(),
+  }: { controller: QueryController; view: BasesViewBase } = $props();
+  let layoutOptions = $derived.by(() => {
+    return [...controller.views.entries()].map(([key, view]) => {
+      return { value: key, label: view.name, icon: view.icon };
+    });
+  });
+  let options = $derived(
+    controller.views.get(view.type)?.options?.(controller.view.config) || [],
+  );
+  type OptionEntry =
+    | { kind: "group"; key: string; displayName: string }
+    | { kind: "option"; key: string; option: BasesOptions };
+  function flattenOptions(
+    items: BasesAllOptions[],
+    path = "options",
+  ): OptionEntry[] {
+    return items.flatMap((item, index) => {
+      const key = `${path}-${index}`;
+      if (item.type !== "group") {
+        return [{ kind: "option", key, option: item } satisfies OptionEntry];
+      }
+      if (item.shouldHide?.()) return [];
+      return [
+        { kind: "group", key, displayName: item.displayName } satisfies OptionEntry,
+        ...flattenOptions(item.items, key),
+      ];
+    });
+  }
+  let optionEntries = $derived.by(() => flattenOptions(options));
+  const selectedLayout = $derived(
+    layoutOptions.find((f) => f.value === view.type) ?? layoutOptions[0],
+  );
+  let openPropertyKey = $state<string | null>(null);
+
+  function dropDownOptions(data: Record<string, string>) {
+    return Object.entries(data).map(([value, label]) => {
+      return { label, value };
+    });
+  }
+</script>
+
+<div class="bases-style-pb-6-fe985c">
+  <div class="bases-style-grid-f3c543 bases-style-grid-cols-1-d7c833 bases-style-items-center-3960ff bases-style-gap-2-77a2a2 bases-style-px-2-d5eab2 bases-style-pt-1-6b7d6e">
+    <Label for="layout" class="bases-style-text-sm-fc7473 bases-style-opacity-50-0b8c50">Layout</Label>
+    <Select.Root
+      type="single"
+      name="layout"
+      bind:value={
+        () => view.type,
+        (value) => {
+          view.type = value;
+        }
+      }
+    >
+      <Select.Trigger class="bases-style-w-full-6da6a3">
+        <Icon name={selectedLayout.icon} />
+        {selectedLayout.label}
+      </Select.Trigger>
+      <Select.Content>
+        <Select.Group>
+          <Select.Label>Layouts</Select.Label>
+          {#each layoutOptions as option (option.value)}
+            <Select.Item value={option.value} label={option.label}>
+              <Icon name={option.icon} />
+              {option.label}
+            </Select.Item>
+          {/each}
+        </Select.Group>
+      </Select.Content>
+    </Select.Root>
+  </div>
+  {#each optionEntries as entry (entry.key)}
+    {#if entry.kind === "group"}
+      <h3 class="bases-view-settings__group" data-ui-part="option-group">
+        {entry.displayName}
+      </h3>
+    {:else}
+      {@const option = entry.option}
+    {#if option.type === "dropdown"}
+      {@const selectOptions = dropDownOptions(option.options)}
+      {@const selectedOption =
+        selectOptions.find(
+          (it) =>
+            it.value ===
+            (controller.view.config.get(option.key) ?? option.default),
+        ) ?? selectOptions[0]}
+      <div class="bases-style-grid-f3c543 bases-style-grid-cols-1-d7c833 bases-style-items-center-3960ff bases-style-gap-2-77a2a2 bases-style-px-2-d5eab2 bases-style-pt-1-6b7d6e" data-ui-part="view-option" data-option-type="dropdown">
+        <Label for={option.key} class="bases-style-text-sm-fc7473 bases-style-opacity-50-0b8c50"
+          >{option.displayName}</Label
+        >
+        <Select.Root
+          type="single"
+          name={option.key}
+          bind:value={
+            () => {
+              return (controller.view.config.get(option.key) ||
+                option.default) as string;
+            },
+            (value) => {
+              controller.view.config.set(option.key, value);
+            }
+          }
+        >
+          <Select.Trigger class="bases-style-w-full-6da6a3">
+            {selectedOption.label}
+          </Select.Trigger>
+          <Select.Content>
+            <Select.Group>
+              <Select.Label>{option.displayName}</Select.Label>
+              {#each selectOptions as opt (opt.value)}
+                <Select.Item value={opt.value} label={opt.label}>
+                  {opt.label}
+                </Select.Item>
+              {/each}
+            </Select.Group>
+          </Select.Content>
+        </Select.Root>
+      </div>
+    {:else if option.type === "slider"}
+      <div class="bases-style-grid-f3c543 bases-style-grid-cols-1-d7c833 bases-style-items-center-3960ff bases-style-gap-2-77a2a2 bases-style-px-2-d5eab2 bases-style-py-2-03b4dd" data-ui-part="view-option" data-option-type="slider">
+        <Label for={option.key} class="bases-style-text-sm-fc7473 bases-style-opacity-50-0b8c50"
+          >{option.displayName}</Label
+        >
+        <Slider
+          data-tooltip={controller.view.config.get(option.key)}
+          type="single"
+          bind:value={
+            () => {
+              return (controller.view.config.get(option.key) ||
+                option.default) as number;
+            },
+            (value) => {
+              controller.view.config.set(option.key, value);
+            }
+          }
+          min={option.min}
+          max={option.max}
+          step={option.step}
+          class="bases-style-w-full-6da6a3"
+        />
+      </div>
+    {:else if option.type === "text"}
+      <div class="bases-style-grid-f3c543 bases-style-grid-cols-1-d7c833 bases-style-items-center-3960ff bases-style-gap-2-77a2a2 bases-style-px-2-d5eab2 bases-style-pt-1-6b7d6e" data-ui-part="view-option" data-option-type="text">
+        <Label for={option.key} class="bases-style-text-sm-fc7473 bases-style-opacity-50-0b8c50"
+          >{option.displayName}</Label
+        >
+        <Input
+          bind:value={
+            () => {
+              return (controller.view.config.get(option.key) ??
+                option.default ??
+                "") as string;
+            },
+            (value) => {
+              controller.view.config.set(option.key, value);
+            }
+          }
+          id={option.key}
+          placeholder={option.placeholder}
+        />
+      </div>
+    {:else if option.type === "multitext"}
+      <div class="bases-style-grid-f3c543 bases-style-grid-cols-1-d7c833 bases-style-items-center-3960ff bases-style-gap-2-77a2a2 bases-style-px-2-d5eab2 bases-style-pt-1-6b7d6e" data-ui-part="view-option" data-option-type="multitext">
+        <Label for={option.key} class="bases-style-text-sm-fc7473 bases-style-opacity-50-0b8c50">{option.displayName}</Label>
+        <Input
+          id={option.key}
+          value={((controller.view.config.get(option.key) ?? option.default ?? []) as string[]).join(", ")}
+          onblur={(event) => {
+            controller.view.config.set(
+              option.key,
+              event.currentTarget.value
+                .split(",")
+                .map((value) => value.trim())
+                .filter(Boolean),
+            );
+          }}
+        />
+      </div>
+    {:else if option.type === "toggle"}
+      <div class="bases-style-grid-f3c543 bases-style-grid-cols-1-d7c833 bases-style-items-center-3960ff bases-style-gap-2-77a2a2 bases-style-px-2-d5eab2 bases-style-pt-1-6b7d6e" data-ui-part="view-option" data-option-type="toggle">
+        <Label for={option.key} class="bases-style-text-sm-fc7473 bases-style-opacity-50-0b8c50"
+          >{option.displayName}</Label
+        >
+        <Switch
+          bind:checked={
+            () => {
+              return Boolean(
+                controller.view.config.get(option.key) ?? option.default,
+              );
+            },
+            (value) => {
+              controller.view.config.set(option.key, value);
+            }
+          }
+          id={option.key}
+        />
+      </div>
+    {:else if option.type === "file" || option.type === "folder"}
+      <div class="bases-style-grid-f3c543 bases-style-grid-cols-1-d7c833 bases-style-items-center-3960ff bases-style-gap-2-77a2a2 bases-style-px-2-d5eab2 bases-style-pt-1-6b7d6e" data-ui-part="view-option" data-option-type={option.type}>
+        <Label for={option.key} class="bases-style-text-sm-fc7473 bases-style-opacity-50-0b8c50">{option.displayName}</Label>
+        <Input
+          id={option.key}
+          placeholder={option.placeholder}
+          bind:value={
+            () => (controller.view.config.get(option.key) ?? option.default ?? "") as string,
+            (value) => controller.view.config.set(option.key, value)
+          }
+        />
+      </div>
+    {:else if option.type === "formula"}
+      <div class="bases-style-grid-f3c543 bases-style-grid-cols-1-d7c833 bases-style-items-center-3960ff bases-style-gap-2-77a2a2 bases-style-px-2-d5eab2 bases-style-pt-1-6b7d6e" data-ui-part="view-option" data-option-type="formula">
+        <Label for={option.key} class="bases-style-text-sm-fc7473 bases-style-opacity-50-0b8c50">{option.displayName}</Label>
+        <Textarea
+          id={option.key}
+          placeholder={option.placeholder}
+          bind:value={
+            () => (controller.view.config.get(option.key) ?? option.default ?? "") as string,
+            (value) => controller.view.config.set(option.key, value)
+          }
+        />
+      </div>
+    {:else if option.type === "property"}
+      <div class="bases-style-grid-f3c543 bases-style-grid-cols-1-d7c833 bases-style-items-center-3960ff bases-style-gap-2-77a2a2 bases-style-px-2-d5eab2 bases-style-pt-1-6b7d6e" data-ui-part="view-option" data-option-type="property">
+        <Label for={option.key} class="bases-style-text-sm-fc7473 bases-style-opacity-50-0b8c50"
+          >{option.displayName}</Label
+        >
+        <Popover.Root
+          bind:open={
+            () => openPropertyKey === option.key,
+            (value) => {
+              openPropertyKey = value ? option.key : null;
+            }
+          }
+        >
+          <Popover.Trigger>
+            {#snippet child({ props }: { props: Record<string, any> })}
+              {@const selectedProperty = (controller.view.config.get(
+                option.key,
+              ) ?? option.default) as BasesPropertyId | undefined}
+              {@const column = selectedProperty
+                ? controller.getColumn(selectedProperty)
+                : undefined}
+              <div class="relative bases-style-flex-60fbb7">
+                <Button
+                  {...props}
+                  id={option.key}
+                  variant="outline"
+                  size="sm"
+                  class="bases-style-h-8-ed8a5d grow bases-style-justify-between-8ef226 bases-style-rounded-none-0c5e91 bases-style-border-none-4a5f0e bases-style-shadow-none-ad47d1 bases-style-outline-none-df37b1"
+                >
+                  <Icon name={[column?.icon ?? "lucide-file"]} />
+                  {#if column?.displayName}
+                    {column.displayName}
+                  {:else}
+                    <span class="bases-style-text-muted-foreground-bfa603"
+                      >{option.placeholder ?? "Property"}</span
+                    >{/if}
+                  <ArrowUpDown />
+                </Button>
+                <X
+                  onclick={(event) => {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    controller.view.config.set(option.key, "");
+                    openPropertyKey = null;
+                  }}
+                  class="absolute bases-style-top-2-9a2db8 bases-style-right-6-82d7e5 bases-style-size-4-f7b5fa"
+                />
+              </div>
+            {/snippet}
+          </Popover.Trigger>
+          <Popover.Content class="bases-style-w-310px-8357f2 bases-style-p-0-8a539c" align="start">
+            <Command.Root>
+              <Command.Input placeholder="Find or create" />
+              <Command.List class="bases-style-p-1-eb6a3c">
+                <Command.Empty>No results found.</Command.Empty>
+                {#each controller
+                  .getAllColumns()
+                  .filter((p) => !option.filter || option.filter(p.id)) as column (column.id)}
+                  <Command.Item
+                    onSelect={() => {
+                      controller.view.config.set(option.key, column.id);
+                      openPropertyKey = null;
+                    }}
+                  >
+                    <div
+                      class={cn(
+                        "bases-style-mr-2-d2347e bases-style-flex-60fbb7 bases-style-size-4-f7b5fa bases-style-items-center-3960ff bases-style-justify-center-86843c",
+                        (controller.view.config.get(option.key) ??
+                          option.default) === column.id
+                          ? ""
+                          : "bases-style-opacity-50-0b8c50 [&_svg]:invisible",
+                      )}
+                    >
+                      <CheckIcon class="bases-style-size-4-f7b5fa" />
+                    </div>
+                    <Icon name={[column?.icon ?? "lucide-info"]} />
+                    <span>{column?.displayName ?? column.id}</span>
+                    <Command.Shortcut class="bases-style-font-mono-0e6570 bases-style-text-0-75em-c425cc"
+                      >{column.id}</Command.Shortcut
+                    >
+                  </Command.Item>
+                {/each}
+              </Command.List>
+            </Command.Root>
+          </Popover.Content>
+        </Popover.Root>
+      </div>
+    {/if}
+    {/if}
+  {/each}
+</div>
+
+<style>
+  .bases-view-settings__group {
+    margin: 0.75rem 0 0.25rem;
+    padding: 0 0.5rem;
+    color: var(--ui-workspace-muted-foreground);
+    font-size: 0.75rem;
+    font-weight: 600;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+  }
+</style>

package/dist/bases-view/view-settings.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { QueryController } from "./bases.svelte";
+import type { BasesViewBase } from "./models";
+type $$ComponentProps = {
+    controller: QueryController;
+    view: BasesViewBase;
+};
+declare const ViewSettings: import("svelte").Component<$$ComponentProps, {}, "view">;
+type ViewSettings = ReturnType<typeof ViewSettings>;
+export default ViewSettings;

package/dist/bases-view/view.svelte

@@ -0,0 +1,192 @@
+<script lang="ts">
+  import { type App, type Component } from "@lapis-notes/api";
+  import type { BasesDocument } from "./models";
+  import { Input } from "@lapismd/design-core/shadcn/input";
+  import { onMount, untrack } from "svelte";
+  import {
+    BasesViewConfig,
+    type BasesViewRegistration,
+    QueryController,
+  } from "./bases.svelte";
+  import { createBasesViewRegistrations } from ".";
+  import ViewHeader from "./view-header.svelte";
+  import Search from "@lucide/svelte/icons/search";
+  import X from "@lucide/svelte/icons/x";
+
+  let {
+    registrations,
+    app,
+    document,
+    onChange,
+    host = null,
+    readOnly = false,
+    showHeader = true,
+  }: {
+    app: App;
+    registrations?: ReadonlyMap<string, BasesViewRegistration>;
+    document: BasesDocument;
+    onChange?: (doc: BasesDocument) => void;
+    host?: Component | null;
+    readOnly?: boolean;
+    showHeader?: boolean;
+  } = $props();
+
+  let contentEl: HTMLElement = $state()!;
+  let searchInput: HTMLInputElement | null = $state(null);
+
+  let queryController: QueryController = $state(
+    untrack(
+      () =>
+        new QueryController(
+          app,
+          document,
+          createBasesViewRegistrations(app, registrations),
+          onChange ?? (() => {}),
+          readOnly,
+        ),
+    ),
+  );
+  let controllerLoaded = $state(false);
+  let componentHost = $derived(host ?? queryController);
+  let basesView: BasesViewRegistration | null | undefined = $derived(
+    queryController.viewConfig,
+  );
+
+  $effect(() => {
+    if (
+      !controllerLoaded ||
+      !basesView ||
+      !contentEl ||
+      !queryController.selectedView
+    ) {
+      return;
+    }
+
+    const renderer = basesView.factory(queryController, contentEl);
+    queryController.view = renderer;
+    componentHost.addChild(renderer);
+
+    return () => {
+      componentHost.removeChild(renderer);
+      renderer.unload();
+    };
+  });
+
+  $effect(() => {
+    if (!queryController.view || !queryController.selectedView) {
+      return;
+    }
+
+    queryController.view.config = new BasesViewConfig(
+      queryController.selectedView,
+      queryController.columns,
+    );
+  });
+
+  let show = $state(false);
+  onMount(() => {
+    queryController.load();
+    controllerLoaded = true;
+    setTimeout(() => {
+      show = true;
+    });
+
+    return () => {
+      controllerLoaded = false;
+      queryController.unload();
+    };
+  });
+
+  $effect(() => {
+    if (!queryController.searchPanelOpen || !searchInput) return;
+    searchInput.focus();
+    searchInput.select();
+  });
+
+  let activeSearchQuery = $derived(queryController.searchQuery.trim());
+
+  function clearSearch() {
+    queryController.searchQuery = "";
+    searchInput?.focus();
+  }
+</script>
+
+<div
+  class="bases-view bases-style-flex-60fbb7 bases-style-h-full-668b21 bases-style-min-h-0-fb7302 bases-style-w-full-6da6a3 bases-style-flex-col-8dddea"
+  data-ui-component="bases-view"
+  data-ui-part="root"
+  data-slot="bases-view"
+  data-type={queryController.selectedView?.type}
+  data-read-only={readOnly ? "true" : "false"}
+>
+  {#if showHeader}
+    <ViewHeader bind:controller={queryController} />
+  {/if}
+  {#if queryController.searchPanelOpen}
+    <div class="bases-view__search-panel bases-style-border-b-65fdba bases-style-px-2-d5eab2 bases-style-pb-2-f4cc51">
+      <div class="relative">
+        <Search
+          class="bases-view__search-icon absolute bases-style-top-1-2-d694ba bases-style-left-3-22e59b bases-style-size-4-f7b5fa -translate-y-1/2"
+        />
+        <Input
+          bind:ref={searchInput}
+          bind:value={queryController.searchQuery}
+          class="bases-style-h-10-426b8b bases-style-w-full-6da6a3 bases-style-pr-36-180815 bases-style-pl-9-9e83b2"
+          placeholder="Find..."
+        />
+        {#if activeSearchQuery}
+          <div
+            class="bases-view__search-summary absolute bases-style-top-1-2-d694ba bases-style-right-2-7b2d63 bases-style-flex-60fbb7 -translate-y-1/2 bases-style-items-center-3960ff bases-style-gap-3-1004c0 bases-style-rounded-full-ac204c border bases-style-px-3-0e17f2 bases-style-py-1-660d2e bases-style-text-sm-fc7473"
+          >
+            <span>Showing {queryController.searchCount}</span>
+            <button
+              type="button"
+              class="bases-view__search-clear bases-style-inline-flex-52083e bases-style-size-5-add63b bases-style-items-center-3960ff bases-style-justify-center-86843c bases-style-rounded-full-ac204c bases-style-transition-colors-ceb69a"
+              aria-label="Clear search"
+              onclick={clearSearch}
+            >
+              <X class="bases-style-size-4-f7b5fa" />
+            </button>
+          </div>
+        {/if}
+      </div>
+    </div>
+  {/if}
+  {#if queryController.loadError}
+    <div class="bases-view__query-error" role="alert">
+      <p>Unable to load indexed metadata: {queryController.loadError}</p>
+      <button type="button" onclick={() => void queryController.reload()}>
+        Retry
+      </button>
+    </div>
+  {:else if show}
+    <div
+      class="bases-view__content bases-style-min-h-0-fb7302 bases-style-w-full-6da6a3 bases-style-flex-1-36e579"
+      bind:this={contentEl}
+    ></div>
+  {:else}
+    <div class="bases-view__loading bases-style-flex-60fbb7 bases-style-flex-1-36e579 bases-style-items-center-3960ff bases-style-justify-center-86843c">
+      <div class="loader"></div>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .bases-view__query-error {
+    align-items: center;
+    color: var(--destructive, currentColor);
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    gap: 0.75rem;
+    justify-content: center;
+    padding: 1rem;
+    text-align: center;
+  }
+
+  .bases-view__query-error button {
+    border: 1px solid currentColor;
+    border-radius: 0.375rem;
+    padding: 0.375rem 0.75rem;
+  }
+</style>

package/dist/bases-view/view.svelte.d.ts

@@ -0,0 +1,15 @@
+import { type App, type Component } from "@lapis-notes/api";
+import type { BasesDocument } from "./models";
+import { type BasesViewRegistration } from "./bases.svelte";
+type $$ComponentProps = {
+    app: App;
+    registrations?: ReadonlyMap<string, BasesViewRegistration>;
+    document: BasesDocument;
+    onChange?: (doc: BasesDocument) => void;
+    host?: Component | null;
+    readOnly?: boolean;
+    showHeader?: boolean;
+};
+declare const View: import("svelte").Component<$$ComponentProps, {}, "">;
+type View = ReturnType<typeof View>;
+export default View;

package/dist/bases-view-surface.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import type { App } from "@lapis-notes/api";
+  import InternalBasesView from "./bases-view/view.svelte";
+  import type { BasesViewRegistration } from "./bases-view/bases.svelte";
+  import type { BasesDocument } from "./bases-view/models";
+
+  let {
+    app,
+    document,
+    onChange,
+    readOnly = false,
+    showHeader = true,
+    registrations,
+  }: {
+    app: App;
+    document: BasesDocument;
+    onChange?: (document: BasesDocument) => void;
+    readOnly?: boolean;
+    showHeader?: boolean;
+    registrations?: ReadonlyMap<string, BasesViewRegistration>;
+  } = $props();
+</script>
+
+<InternalBasesView
+  {app}
+  {document}
+  {onChange}
+  {readOnly}
+  {showHeader}
+  {registrations}
+/>

package/dist/bases-view-surface.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { App } from "@lapis-notes/api";
+import type { BasesViewRegistration } from "./bases-view/bases.svelte";
+import type { BasesDocument } from "./bases-view/models";
+type $$ComponentProps = {
+    app: App;
+    document: BasesDocument;
+    onChange?: (document: BasesDocument) => void;
+    readOnly?: boolean;
+    showHeader?: boolean;
+    registrations?: ReadonlyMap<string, BasesViewRegistration>;
+};
+declare const BasesViewSurface: import("svelte").Component<$$ComponentProps, {}, "">;
+type BasesViewSurface = ReturnType<typeof BasesViewSurface>;
+export default BasesViewSurface;

package/dist/index.d.ts

@@ -0,0 +1,10 @@
+import "./bases-view/functions";
+import { BasesPlugin } from "./bases-plugin";
+import "./styles.css";
+export { default as manifest } from "../../manifest.json";
+export { BasesPlugin };
+export { default as BasesViewSurface } from "./bases-view-surface.svelte";
+export { BasesViewType, parseBasesDocument, serializeBasesDocument, } from "./bases-view";
+export type { AnyBasesView, BasesDocument, BasesViewBase, CardsView, CustomBasesView, FilterLine, Filters, ListView, MapView, SortColumn, TableView, } from "./bases-view/models";
+export type { BasesViewRegistration } from "./bases-view/bases.svelte";
+export default BasesPlugin;

package/dist/index.js

@@ -0,0 +1,8 @@
+import "./bases-view/functions";
+import { BasesPlugin } from "./bases-plugin";
+import "./styles.css";
+export { default as manifest } from "../../manifest.json";
+export { BasesPlugin };
+export { default as BasesViewSurface } from "./bases-view-surface.svelte";
+export { BasesViewType, parseBasesDocument, serializeBasesDocument, } from "./bases-view";
+export default BasesPlugin;

package/dist/serialized-write-queue.d.ts

@@ -0,0 +1,10 @@
+export declare class SerializedWriteQueue<T> {
+    private readonly write;
+    private latest;
+    private running;
+    constructor(write: (value: T) => Promise<void>);
+    enqueue(value: T): void;
+    flush(): Promise<void>;
+    private start;
+    private drain;
+}

package/dist/serialized-write-queue.js

@@ -0,0 +1,36 @@
+const EMPTY = Symbol("empty");
+export class SerializedWriteQueue {
+    write;
+    latest = EMPTY;
+    running = null;
+    constructor(write) {
+        this.write = write;
+    }
+    enqueue(value) {
+        this.latest = value;
+        void this.start().catch(() => { });
+    }
+    async flush() {
+        while (this.latest !== EMPTY || this.running) {
+            await this.start();
+        }
+    }
+    start() {
+        if (!this.running) {
+            this.running = this.drain().finally(() => {
+                this.running = null;
+                if (this.latest !== EMPTY) {
+                    void this.start().catch(() => { });
+                }
+            });
+        }
+        return this.running;
+    }
+    async drain() {
+        while (this.latest !== EMPTY) {
+            const value = this.latest;
+            this.latest = EMPTY;
+            await this.write(value);
+        }
+    }
+}