@lapis-notes/bases 0.1.0

package/dist/bases-view/card-view/components/card-placeholder.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+  import { Skeleton } from "@lapismd/design-core/shadcn/skeleton";
+  import type { BasesView } from "../../bases.svelte";
+  import { toNumber } from "..";
+
+  let {
+    view,
+  }: {
+    view: BasesView;
+  } = $props();
+  let queryResults = $derived(view.data);
+  let cardSize: number = $derived(toNumber(view.config.get("cardSize")) || 0);
+  let imageAspectRatio: number = $derived(
+    toNumber(view.config.get("imageAspectRatio")) || 1,
+  );
+  let imageFit = $derived(view.config.get("imageFit") || "contain");
+  let imageSize: number = $derived.by(() => {
+    if (!view.config.get("image")) {
+      return 0;
+    }
+    return cardSize * imageAspectRatio;
+  });
+
+  let cardHeight = $derived.by(() => {
+    return view.config.getOrder().length * 56 + 17 + imageSize + 28;
+  });
+</script>
+
+<div
+  class="bases-card-grid bases-style-h-full-668b21 bases-style-w-full-6da6a3 bases-style-flex-grow-95a3df bases-style-overflow-auto-73fc3f bases-style-pb-16-db15dd bases-style-pl-5-151215"
+  style={`scrollbar-gutter: stable; transform: translate3d(0,0,0);`}
+>
+  <div class="bases-style-flex-60fbb7 bases-style-w-full-6da6a3 bases-style-items-center-3960ff bases-style-justify-center-86843c">
+    <div class="loader"></div>
+  </div>
+  <div class="bases-style-flex-60fbb7 bases-style-flex-wrap-1eb5c6 bases-style-gap-2-77a2a2">
+    {#each queryResults.data as record}
+      <div
+        style={`width: ${cardSize}}px; height: ${cardHeight}px;`}
+        class="bases-card-placeholder bases-style-w-full-6da6a3 bases-style-overflow-hidden-2cd02d bases-style-rounded-lg-5f22e6 border bases-style-text-sm-fc7473 bases-style-whitespace-nowrap-e82ae8"
+      >
+        <div class="bases-style-h-full-668b21 bases-style-w-full-6da6a3">
+          {#if imageSize}
+            <div
+              class="bases-card__image bases-style-rounded-t-lg-bc0d7f"
+              style={`height: ${imageSize}px; background-size: ${imageFit}`}
+            ></div>
+          {/if}
+
+          {#each view.config.getOrder() as o}
+            <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-2-f46b61">
+              <div
+                class="bases-card-placeholder__label bases-style-overflow-hidden-2cd02d bases-style-text-ellipsis-6e2e11 bases-style-whitespace-nowrap-e82ae8"
+              >
+                <Skeleton class="bases-style-h-20px-fa9795 bases-style-w-full-6da6a3" />
+              </div>
+              <div
+                class="bases-style-h-full-668b21 bases-style-w-full-6da6a3 bases-style-overflow-hidden-2cd02d bases-style-text-ellipsis-6e2e11 bases-style-whitespace-nowrap-e82ae8"
+              >
+                <Skeleton class="bases-style-h-28px-d8acda bases-style-w-full-6da6a3" />
+              </div>
+            </div>
+          {/each}
+        </div>
+      </div>
+    {/each}
+  </div>
+</div>

package/dist/bases-view/card-view/components/card-placeholder.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { BasesView } from "../../bases.svelte";
+type $$ComponentProps = {
+    view: BasesView;
+};
+declare const CardPlaceholder: import("svelte").Component<$$ComponentProps, {}, "">;
+type CardPlaceholder = ReturnType<typeof CardPlaceholder>;
+export default CardPlaceholder;

package/dist/bases-view/card-view/components/card.svelte

@@ -0,0 +1,289 @@
+<script lang="ts">
+  import type { BasesEntry, BasesView } from "../../bases.svelte";
+  import ChevronDown from "@lucide/svelte/icons/chevron-down";
+  import ChevronRight from "@lucide/svelte/icons/chevron-right";
+  import { useResizeObserver } from "../../hooks/useResizeObserver.svelte";
+  import throttle from "lodash-es/throttle";
+  import { createVirtualizer, type MetadataType } from "@lapis-notes/api";
+  import { toNumber } from "..";
+  import { ScrollArea } from "@lapismd/design-core/shadcn/scroll-area";
+  import Cell from "../../cell.svelte";
+  import SummaryStrip from "../../components/summary-strip.svelte";
+  import { getMetadataTypeInfo } from "../../metadata-type-info";
+  import { onMount } from "svelte";
+  import CardPlaceholder from "./card-placeholder.svelte";
+  import CardImage from "../../components/card-image.svelte";
+
+  let {
+    view,
+  }: {
+    view: BasesView;
+  } = $props();
+  let queryResults = $derived(view.data);
+  let groups = $derived(queryResults.groupedData);
+  let groupBy = $derived(queryResults.groupBy);
+  let groupLabel = $derived.by(() => {
+    if (!groupBy) return "";
+    return view.config.getDisplayName(groupBy) || groupBy;
+  });
+  let cardSize: number = $derived(toNumber(view.config.get("cardSize")) || 0);
+  let imageAspectRatio: number = $derived(
+    toNumber(view.config.get("imageAspectRatio")) || 1,
+  );
+
+  let imageSize: number = $derived.by(() => {
+    if (!view.config.get("image")) {
+      return 0;
+    }
+    return cardSize * imageAspectRatio;
+  });
+  let types = $derived.by(() => {
+    return queryResults.properties
+      .filter((it) => !(it.startsWith("file.") || it.startsWith("formula.")))
+      .reduce<Record<string, { type: MetadataType; icon: string }>>(
+        (acc, id) => {
+          const key = id.startsWith("note.") ? id.substring(5) : id;
+          const { type, icon } = getMetadataTypeInfo(
+            key,
+            "text",
+            view.controller.app,
+          );
+
+          acc[id] = { type, icon };
+          acc[key] = { type, icon };
+          return acc;
+        },
+        {},
+      );
+  });
+
+  let containerSize = useResizeObserver();
+  let containerEl: HTMLDivElement = $state()!;
+  let cardHeight = $derived.by(() => {
+    return view.config.getOrder().length * 56 + 17 + imageSize + 28;
+  });
+  let imageFit = $derived(String(view.config.get("imageFit") || "contain"));
+  let imageColumn = $derived(String(view.config.get("image") || ""));
+
+  let gap = $state({ x: 10, y: 10 });
+  let columns = $state(3);
+  let rows = $derived(Math.ceil(queryResults.data.length / columns));
+  let collapsedGroups = $state<Record<string, boolean>>({});
+
+  function groupId(
+    group: { key?: { toString(): string } | null },
+    index: number,
+  ) {
+    return `${groupBy || "ungrouped"}:${group.key?.toString() ?? `ungrouped_${index}`}`;
+  }
+
+  function isCollapsed(
+    group: { key?: { toString(): string } | null },
+    index: number,
+  ) {
+    return !!collapsedGroups[groupId(group, index)];
+  }
+
+  function toggleGroup(
+    group: { key?: { toString(): string } | null },
+    index: number,
+  ) {
+    const key = groupId(group, index);
+    collapsedGroups = {
+      ...collapsedGroups,
+      [key]: !collapsedGroups[key],
+    };
+  }
+
+  const handleResize = throttle(() => {
+    const size = Math.floor(containerSize.size.width / (cardSize + gap.x));
+    columns = size;
+  }, 200);
+
+  $effect(() => {
+    if (!containerSize.size.width) return;
+    if (!cardSize) return;
+    handleResize();
+  });
+
+  let rowVirtualizer = createVirtualizer({
+    get count() {
+      return rows;
+    },
+    getScrollElement: () => containerEl,
+    estimateSize: () => cardHeight + gap.y,
+    measureElement:
+      typeof window !== "undefined" &&
+      navigator.userAgent.indexOf("Firefox") === -1
+        ? (element) => element?.getBoundingClientRect().height
+        : undefined,
+    overscan: 2,
+  });
+  $effect(() => {
+    rowVirtualizer.setOptions({ count: rows });
+  });
+
+  let columnVirtualizer = createVirtualizer({
+    horizontal: true,
+    get count() {
+      return columns;
+    },
+    getScrollElement: () => containerEl,
+    estimateSize: () => cardSize + gap.x,
+    measureElement:
+      typeof window !== "undefined" &&
+      navigator.userAgent.indexOf("Firefox") === -1
+        ? (element) => element?.getBoundingClientRect().height
+        : undefined,
+    overscan: 2,
+  });
+  $effect(() => {
+    columnVirtualizer.setOptions({ count: columns });
+  });
+
+  $effect(() => {
+    const _ = [cardHeight, columns];
+    rowVirtualizer.measure();
+    columnVirtualizer.measure();
+  });
+
+  let show = $state(false);
+  onMount(() => {
+    setTimeout(() => {
+      show = true;
+    });
+  });
+</script>
+
+{#snippet cardBody(row: BasesEntry)}
+  <ScrollArea class="bases-style-h-full-668b21 bases-style-w-full-6da6a3">
+    {#if imageSize}
+      <CardImage
+        app={view.controller.app}
+        value={imageColumn ? row.getValue(imageColumn) : null}
+        sourceFile={row.file}
+        height={imageSize}
+        fit={imageFit || "contain"}
+      />
+    {/if}
+
+    {#each view.config.getOrder() as id}
+      <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-2-f46b61">
+        <div
+          class="bases-card__label bases-style-overflow-hidden-2cd02d bases-style-text-ellipsis-6e2e11 bases-style-whitespace-nowrap-e82ae8"
+        >
+          {view.config.getDisplayName(id)}
+        </div>
+        <div
+          class="bases-style-h-full-668b21 bases-style-w-full-6da6a3 bases-style-overflow-hidden-2cd02d bases-style-text-ellipsis-6e2e11 bases-style-whitespace-nowrap-e82ae8"
+        >
+          <Cell
+            app={view.controller.app}
+            name={id}
+            file={row.file}
+            readOnly={view.controller.readOnly}
+            type={types[id]?.type}
+            value={row.getValue(id)}
+            class="bases-style-z-1-0bcb04 bases-style-h-full-668b21 bases-style-w-full-6da6a3 bases-style-min-w-full-a1e7a8 bases-style-overflow-hidden-2cd02d bases-style-text-nowrap-621d3b bases-style-overflow-ellipsis-5b2ef5"
+          />
+        </div>
+      </div>
+    {/each}
+  </ScrollArea>
+{/snippet}
+
+{#if show}
+  <div
+    class="bases-card-grid bases-style-h-full-668b21 bases-style-w-full-6da6a3 bases-style-flex-grow-95a3df bases-style-overflow-auto-73fc3f bases-style-pb-16-db15dd bases-style-pl-5-151215"
+    data-layout="cards"
+    data-ui-component="bases-card-view"
+    data-ui-part="viewport"
+    bind:this={
+      () => containerEl,
+      (value) => {
+        containerEl = value;
+        containerSize.ref = value;
+      }
+    }
+    style={`scrollbar-gutter: stable; transform: translate3d(0,0,0);`}
+  >
+    <SummaryStrip
+      {view}
+      class="bases-card-grid__summary sticky bases-style-top-0-216740 bases-style-left-0-c78fac bases-style-z-90-3d4b39 bases-style-mb-4-da0198 bases-style-py-3-1b2d54 bases-style-pr-5-752a63 backdrop-blur"
+    />
+    {#if groupBy}
+      <div class="bases-style-space-y-6-b3542e bases-style-pr-5-752a63">
+        {#each groups as group, index (`${index}_${group.key?.toString() ?? "ungrouped"}`)}
+          <section class="bases-style-space-y-3-6ed543">
+            <div
+              class="bases-card-grid__group-header sticky bases-style-top-0-216740 bases-style-z-10-236812 bases-style-border-b-65fdba bases-style-px-1-d8e0e3 bases-style-py-3-1b2d54 bases-style-text-xs-359090 bases-style-font-semibold-e83a70 bases-style-tracking-0-18em-a82f6f uppercase backdrop-blur"
+            >
+              <button
+                type="button"
+                class="bases-style-flex-60fbb7 bases-style-w-full-6da6a3 bases-style-items-center-3960ff bases-style-gap-2-77a2a2 bases-style-text-left-2eba0d"
+                aria-expanded={!isCollapsed(group, index)}
+                onclick={() => toggleGroup(group, index)}
+              >
+                {#if isCollapsed(group, index)}
+                  <ChevronRight class="bases-style-size-4-f7b5fa bases-style-shrink-0-012fbd" />
+                {:else}
+                  <ChevronDown class="bases-style-size-4-f7b5fa bases-style-shrink-0-012fbd" />
+                {/if}
+                <span>{groupLabel}</span>
+                <span class="bases-card-grid__group-value">
+                  {#if group.hasKey()}
+                    {group.key?.toString()}
+                  {:else}
+                    Ungrouped
+                  {/if}
+                </span>
+              </button>
+            </div>
+            {#if !isCollapsed(group, index)}
+              <div
+                class="bases-style-grid-f3c543 bases-style-justify-start-4b5cc1"
+                style={`grid-template-columns: repeat(auto-fill, minmax(${cardSize}px, ${cardSize}px)); gap: ${gap.y}px ${gap.x}px;`}
+              >
+                {#each group.entries as row (row.id)}
+                  <div
+                    class="bases-card bases-style-overflow-hidden-2cd02d bases-style-rounded-lg-5f22e6 border bases-style-text-sm-fc7473 bases-style-whitespace-nowrap-e82ae8"
+                    data-ui-part="card"
+                    style={`width: ${cardSize}px; height: ${cardHeight}px;`}
+                  >
+                    {@render cardBody(row)}
+                  </div>
+                {/each}
+              </div>
+            {/if}
+          </section>
+        {/each}
+      </div>
+    {:else}
+      <div
+        class="relative"
+        style={`height: ${rowVirtualizer.getTotalSize() + cardHeight}px; width: ${columnVirtualizer.getTotalSize()}px;`}
+      >
+        {#each rowVirtualizer.getVirtualItems() as virtualRow (virtualRow.key)}
+          {#each columnVirtualizer.getVirtualItems() as virtualColumn (virtualColumn.key)}
+            {@const row =
+              queryResults.data[
+                virtualRow.index * columns + virtualColumn.index
+              ]}
+            {#if row}
+              <div
+                data-coord={`${virtualRow.index},${virtualColumn.index}`}
+                data-ui-part="card"
+                style={`width: ${cardSize}px; height: ${cardHeight}px;transform: translateX(${virtualColumn.start}px) translateY(${virtualRow.start}px)`}
+                class="bases-card absolute bases-style-top-0-216740 bases-style-left-0-c78fac bases-style-w-full-6da6a3 bases-style-overflow-hidden-2cd02d bases-style-rounded-lg-5f22e6 border bases-style-text-sm-fc7473 bases-style-whitespace-nowrap-e82ae8"
+              >
+                {@render cardBody(row)}
+              </div>
+            {/if}
+          {/each}
+        {/each}
+      </div>
+    {/if}
+  </div>
+{:else}
+  <CardPlaceholder {view} />
+{/if}

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

@@ -0,0 +1,7 @@
+import type { BasesView } from "../../bases.svelte";
+type $$ComponentProps = {
+    view: BasesView;
+};
+declare const Card: import("svelte").Component<$$ComponentProps, {}, "">;
+type Card = ReturnType<typeof Card>;
+export default Card;

package/dist/bases-view/card-view/index.d.ts

@@ -0,0 +1,11 @@
+import type { BasesOptions } from "@lapis-notes/api";
+import { BasesView, QueryController } from "../bases.svelte";
+export declare function toNumber(value: unknown): number;
+export declare class CardView extends BasesView {
+    readonly controller: QueryController;
+    readonly scrollEl: HTMLElement;
+    type: string;
+    constructor(controller: QueryController, scrollEl: HTMLElement);
+    onDataUpdated(): void;
+    static getViewOptions(): BasesOptions[];
+}

package/dist/bases-view/card-view/index.js

@@ -0,0 +1,55 @@
+import { BasesView, QueryController } from "../bases.svelte";
+import CardViewComponent from "./components/card.svelte";
+export function toNumber(value) {
+    if (typeof value === "number")
+        return value;
+    const n = Number(value);
+    return Number.isFinite(n) ? n : 0;
+}
+export class CardView extends BasesView {
+    controller;
+    scrollEl;
+    type = "cards";
+    constructor(controller, scrollEl) {
+        super(controller);
+        this.controller = controller;
+        this.scrollEl = scrollEl;
+        this.mountViewComponent(CardViewComponent, { view: this }, scrollEl);
+    }
+    onDataUpdated() { }
+    static getViewOptions() {
+        return [
+            {
+                key: "cardSize",
+                type: "slider",
+                displayName: "Card size",
+                min: 50,
+                max: 800,
+                step: 1,
+            },
+            {
+                key: "image",
+                type: "property",
+                displayName: "Image",
+            },
+            {
+                key: "imageFit",
+                displayName: "Image fit",
+                type: "dropdown",
+                default: "contain",
+                options: {
+                    contain: "Contain",
+                    cover: "Cover",
+                },
+            },
+            {
+                key: "imageAspectRatio",
+                type: "slider",
+                displayName: "image aspect ration",
+                min: 0.25,
+                max: 2.5,
+                step: 0.05,
+            },
+        ];
+    }
+}

package/dist/bases-view/cell-editor-options.d.ts

@@ -0,0 +1,2 @@
+export declare function metadataPropertyKey(propertyId: string): string;
+export declare function collectMetadataSuggestions(values: readonly unknown[], splitDelimited?: boolean): string[];

package/dist/bases-view/cell-editor-options.js

@@ -0,0 +1,26 @@
+export function metadataPropertyKey(propertyId) {
+    return propertyId.startsWith("note.")
+        ? propertyId.slice("note.".length)
+        : propertyId;
+}
+export function collectMetadataSuggestions(values, splitDelimited = false) {
+    const suggestions = new Set();
+    function add(value) {
+        if (Array.isArray(value)) {
+            value.forEach(add);
+            return;
+        }
+        if (value === null || value === undefined || value === "")
+            return;
+        const candidates = splitDelimited && typeof value === "string"
+            ? value.split(/[,;]+/u)
+            : [String(value)];
+        for (const candidate of candidates) {
+            const normalized = candidate.trim();
+            if (normalized)
+                suggestions.add(normalized);
+        }
+    }
+    values.forEach(add);
+    return [...suggestions];
+}

package/dist/bases-view/cell-editor.svelte

@@ -0,0 +1,206 @@
+<script lang="ts">
+  import { cn, type App } from "@lapis-notes/api";
+  import Autocomplete from "./components/autocomplete.svelte";
+  import ChipAutocomplete from "@lapismd/design-core/forms/ChipAutocomplete.svelte";
+  import { Input } from "@lapismd/design-core/shadcn/input";
+  import { DateTime } from "luxon";
+  import {
+    collectMetadataSuggestions,
+    metadataPropertyKey,
+  } from "./cell-editor-options";
+
+  let {
+    app,
+    type,
+    name,
+    value = $bindable(),
+    class: className,
+    onValueChange,
+  }: {
+    app: App;
+    type: string;
+    name: string;
+    value: any;
+    class?: string;
+    onValueChange?: (name: string, value: any) => void;
+  } = $props();
+
+  function fileOptions() {
+    return app.vault.getFiles().map((f) => {
+      return { label: f.path, value: f.path };
+    });
+  }
+
+  function folderOptions() {
+    return app.vault.getAllFolders().map((f) => {
+      return { label: f.path || "/", value: f.path || "/" };
+    });
+  }
+
+  function onChange(event: FocusEvent) {
+    const target = event.target as HTMLInputElement;
+    if (target.type === "checkbox") {
+      value = target.checked;
+    } else if (target.type === "number") {
+      const trimmed = target.value.trim();
+      value = trimmed === "" ? null : +trimmed;
+    } else {
+      value = target.value;
+    }
+    onValueChange?.(name, value);
+  }
+
+  function onDateChange(event: Event) {
+    value = (event.target as HTMLInputElement).value;
+    if (value) {
+      onValueChange?.(name, value);
+    } else {
+      onValueChange?.(name, null);
+    }
+  }
+
+  function metadataSuggestions(key: string, splitDelimited = false) {
+    return collectMetadataSuggestions(
+      app.metadataTypeManager.getValues(metadataPropertyKey(key)),
+      splitDelimited,
+    );
+  }
+
+  function metadataOptions(key: string) {
+    return metadataSuggestions(key).map((suggestion) => ({
+      label: suggestion,
+      value: suggestion,
+    }));
+  }
+
+  function currentTagValues() {
+    return collectMetadataSuggestions([value], true);
+  }
+
+  function onTagsChange(values: string[]) {
+    value = values;
+    onValueChange?.(name, values);
+  }
+
+  function toDateTime(value: unknown) {
+    if (value instanceof DateTime) {
+      return value.toISO()?.substring(0, 16);
+    } else if (value instanceof Date) {
+      return value.toISOString().substring(0, 16);
+    } else if (typeof value === "number") {
+      return DateTime.fromMillis(value)?.toISO()?.substring(0, 16);
+    }
+    return value;
+  }
+
+  function toDate(value: unknown) {
+    if (value instanceof DateTime) {
+      return value.toISODate();
+    } else if (value instanceof Date) {
+      return DateTime.fromJSDate(value).toISODate();
+    } else if (typeof value === "number") {
+      return DateTime.fromMillis(value).toISODate();
+    }
+    return value;
+  }
+
+  const editorLabel = $derived(
+    name.startsWith("note.") ? name.slice("note.".length) : name,
+  );
+</script>
+
+<div
+  class="bases-cell-editor"
+  data-ui-component="bases-cell-editor"
+  data-ui-part="root"
+  data-type={type}
+>
+  {#if type === "file"}
+    <Autocomplete
+      placeholder="—"
+      aria-label={editorLabel}
+      bind:value
+      options={fileOptions()}
+      class={className}
+      onSelect={(selectedValue) => onValueChange?.(name, selectedValue)}
+    />
+  {:else if type === "folder"}
+    <Autocomplete
+      placeholder="—"
+      aria-label={editorLabel}
+      bind:value
+      options={folderOptions()}
+      class={className}
+      onSelect={(selectedValue) => onValueChange?.(name, selectedValue)}
+    />
+  {:else if type === "none"}
+    <span class="bases-cell-editor__empty"></span>
+  {:else if type === "datetime"}
+    <Input
+      type="datetime-local"
+      placeholder="—"
+      aria-label={editorLabel}
+      value={toDateTime(value)}
+      onblur={(evt) => onDateChange(evt)}
+      onchange={(evt) => onDateChange(evt)}
+      class={cn("bases-cell-editor__control", className)}
+      data-ui-part="control"
+    />
+  {:else if type === "date"}
+    <Input
+      type="date"
+      placeholder="—"
+      aria-label={editorLabel}
+      value={toDate(value)}
+      onblur={(evt) => onDateChange(evt)}
+      onchange={(evt) => onDateChange(evt)}
+      class={cn("bases-cell-editor__control", className)}
+      data-ui-part="control"
+    />
+  {:else if type === "number"}
+    <Input
+      type="number"
+      placeholder="—"
+      aria-label={editorLabel}
+      {value}
+      onblur={(evt) => onChange(evt)}
+      class={cn("bases-cell-editor__control", className)}
+      data-ui-part="control"
+    />
+  {:else if type === "checkbox"}
+    <span class="bases-cell-editor__checkbox-wrap">
+      <input
+        type="checkbox"
+        placeholder="—"
+        aria-label={editorLabel}
+        data-indeterminate={value === null ||
+          value === undefined ||
+          value === ""}
+        bind:checked={value}
+        onblur={(evt) => onChange(evt)}
+        class={cn("metadata-input-checkbox bases-cell-editor__checkbox", className)}
+        data-ui-part="checkbox"
+      />
+    </span>
+  {:else if type === "multitext" || type === "tags"}
+    <ChipAutocomplete
+      placeholder="—"
+      label={editorLabel}
+      showLabel={false}
+      embedded
+      uppercase={false}
+      value={currentTagValues()}
+      suggestions={metadataSuggestions(name, true)}
+      onChange={onTagsChange}
+    />
+  {:else}
+    <Autocomplete
+      onSelect={(value) => onValueChange?.(name, value)}
+      placeholder=""
+      aria-label={editorLabel}
+      class={cn("bases-cell-editor__control", className)}
+      bind:value
+      options={metadataOptions(name)}
+    />
+  {/if}
+</div>

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

@@ -0,0 +1,12 @@
+import { type App } from "@lapis-notes/api";
+type $$ComponentProps = {
+    app: App;
+    type: string;
+    name: string;
+    value: any;
+    class?: string;
+    onValueChange?: (name: string, value: any) => void;
+};
+declare const CellEditor: import("svelte").Component<$$ComponentProps, {}, "value">;
+type CellEditor = ReturnType<typeof CellEditor>;
+export default CellEditor;