@lapis-notes/bases 0.1.0

package/dist/bases-view/cell.svelte

@@ -0,0 +1,132 @@
+<script lang="ts">
+  import { DateTime } from "luxon";
+  import { type DType } from "peaql";
+  import type { HTMLAttributes } from "svelte/elements";
+  import DatetimeWidget from "./components/datetime.svelte";
+  import { cn, TFile, type App, type MetadataType } from "@lapis-notes/api";
+  import { normalizeMetadataValue } from "@lapis-notes/api/metadata-value";
+  import CellEditor from "./cell-editor.svelte";
+  import { set, unset } from "lodash-es";
+  import { untrack } from "svelte";
+  import { Icon } from "./functions";
+  import { Icon as IconComponent } from "@lapis-notes/api/icon";
+  import File from "./components/file.svelte";
+  import Tag from "./components/tag-chip.svelte";
+  import type { Value } from "@lapis-notes/api";
+  let {
+    app,
+    file,
+    type,
+    name,
+    value: cellValue,
+    readOnly = false,
+    class: className,
+    meta,
+    ...rest
+  }: HTMLAttributes<HTMLDivElement> & {
+    name: string;
+    app: App;
+    type: string | DType;
+    value: Value | null | unknown;
+    file: TFile;
+    readOnly?: boolean;
+    meta?: unknown;
+  } = $props();
+
+  let displayType = $derived(String(type ?? ""));
+  let value = $derived(
+    cellValue instanceof Object && "value" in cellValue
+      ? (cellValue as Value).value
+      : (cellValue ?? ""),
+  );
+
+  function focusElement(evt: Event) {
+    const target = evt.target;
+    if (!(target instanceof HTMLElement) || target.closest("button")) return;
+    const cell = evt.currentTarget;
+    if (!(cell instanceof HTMLElement)) return;
+    cell.querySelector("input")?.focus();
+  }
+
+  function metadataTypeFromDisplayType(displayType: string): MetadataType {
+    switch (displayType.toLowerCase()) {
+      case "boolean":
+      case "checkbox":
+        return "checkbox";
+      case "number":
+        return "number";
+      case "date":
+        return "date";
+      case "datetime":
+      case "timestamp":
+        return "datetime";
+      case "multitext":
+        return "multitext";
+      case "tags":
+        return "tags";
+      case "aliases":
+        return "aliases";
+      case "array":
+        return "array";
+      case "object":
+        return "object";
+      default:
+        return "text";
+    }
+  }
+
+  function onValueChange(name: string, value: any) {
+    if (name.startsWith("file.") || name.startsWith("formula.")) return;
+    untrack(() => {
+      if (file) {
+        const id = name.startsWith("note.") ? name.substring(5) : name;
+        const declaredType =
+          app.metadataTypeManager.types[id]?.type ??
+          metadataTypeFromDisplayType(displayType);
+        const normalized = normalizeMetadataValue(declaredType, value);
+        const existing =
+          cellValue instanceof Object && "value" in cellValue
+            ? (cellValue as Value).value
+            : "";
+        if (existing === normalized) return;
+        app.fileManager.processFrontMatter(file, (data) => {
+          if (normalized === null || normalized === undefined) {
+            unset(data, id);
+          } else {
+            set(data, id, normalized);
+          }
+        });
+      }
+    });
+  }
+</script>
+
+<div
+  {...rest}
+  class={cn("bases-style-h-full-668b21 bases-style-w-full-6da6a3", className)}
+  onclick={(evt) => focusElement(evt)}
+  data-ui-component="bases-cell"
+  data-ui-part="root"
+  data-type={displayType}
+  data-property={name}
+>
+  {#if !readOnly && !(name.startsWith("file.") || name.startsWith("formula.") || name === "file")}
+    <CellEditor {app} {onValueChange} {value} {name} type={displayType} />
+  {:else if file && name === "file.name"}
+    <File {app} {file} />
+  {:else if name === "file.tags"}
+    <div class="markdown-rendered bases-style-flex-60fbb7 bases-style-h-full-668b21 bases-style-w-full-6da6a3 bases-style-gap-2-77a2a2">
+      {#each Array.isArray(value) ? value : [] as tag}
+        <Tag name={tag} />
+      {/each}
+    </div>
+  {:else if value instanceof TFile}
+    <File {app} file={value} />
+  {:else if value instanceof DateTime}
+    <DatetimeWidget {value} />
+  {:else if value instanceof Icon}
+    <IconComponent name={[value.name, "circle-question-mark"]} />
+  {:else}
+    <div class="bases-style-h-full-668b21 bases-style-w-full-6da6a3">{value}</div>
+  {/if}
+</div>

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

@@ -0,0 +1,16 @@
+import { type DType } from "peaql";
+import type { HTMLAttributes } from "svelte/elements";
+import { TFile, type App } from "@lapis-notes/api";
+import type { Value } from "@lapis-notes/api";
+type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
+    name: string;
+    app: App;
+    type: string | DType;
+    value: Value | null | unknown;
+    file: TFile;
+    readOnly?: boolean;
+    meta?: unknown;
+};
+declare const Cell: import("svelte").Component<$$ComponentProps, {}, "">;
+type Cell = ReturnType<typeof Cell>;
+export default Cell;

package/dist/bases-view/column-definition.d.ts

@@ -0,0 +1,22 @@
+import type { App, MetadataType } from "@lapis-notes/api";
+import { type DType } from "peaql";
+import type { VaultRecord } from ".";
+export type SortDirection = "ASC" | "DESC";
+export type ColumnMeta = {
+    displayName: string;
+    icon: string;
+    type: MetadataType;
+    frontmatter?: boolean;
+};
+export type ColumnDef = {
+    id: string;
+    meta: ColumnMeta;
+    colSpan?: number | null | undefined;
+    size?: number;
+};
+export declare function columnsFor(rows: VaultRecord[], properties: Record<string, {
+    displayName: string;
+}> | undefined, formulas: Record<string, string>, app?: Pick<App, "metadataTypeManager">): {
+    columns: ColumnDef[];
+    frontmatter: Record<string, DType>;
+};

package/dist/bases-view/column-definition.js

@@ -0,0 +1,149 @@
+import { TimeStamp } from "peaql";
+import { getMetadataTypeInfo } from "./metadata-type-info";
+export function columnsFor(rows, properties = {}, formulas, app) {
+    const columns = [
+        {
+            id: "file",
+            meta: {
+                displayName: properties["file"]?.displayName || "file",
+                icon: "lucide-file",
+                type: "file",
+            },
+        },
+        {
+            id: "file.name",
+            meta: {
+                displayName: properties["file.name"]?.displayName || "file name",
+                icon: "lucide-text",
+                type: "text",
+            },
+        },
+        {
+            id: "file.basename",
+            meta: {
+                displayName: properties["file.basename"]?.displayName || "file base name",
+                icon: "lucide-text",
+                type: "text",
+            },
+        },
+        {
+            id: "file.folder",
+            meta: {
+                displayName: properties["file.folder"]?.displayName || "folder",
+                icon: "lucide-text",
+                type: "text",
+            },
+        },
+        {
+            id: "file.fullname",
+            meta: {
+                displayName: properties["file.fullname"]?.displayName || "file full name",
+                icon: "lucide-text",
+                type: "text",
+            },
+        },
+        {
+            id: "file.path",
+            meta: {
+                displayName: properties["file.path"]?.displayName || "file path",
+                icon: "lucide-text",
+                type: "text",
+            },
+        },
+        {
+            id: "file.ext",
+            meta: {
+                displayName: properties["file.ext"]?.displayName || "file extension",
+                icon: "lucide-text",
+                type: "text",
+            },
+        },
+        {
+            id: "file.ctime",
+            meta: {
+                displayName: properties["file.ctime"]?.displayName || "created time",
+                icon: "lucide-clock",
+                type: "datetime",
+            },
+        },
+        {
+            id: "file.mtime",
+            meta: {
+                displayName: properties["file.mtime"]?.displayName || "modified time",
+                icon: "lucide-clock",
+                type: "datetime",
+            },
+        },
+        {
+            id: "file.size",
+            meta: {
+                displayName: properties["file.size"]?.displayName || "file size",
+                icon: "lucide-binary",
+                type: "number",
+            },
+        },
+    ];
+    const metadata = {};
+    rows.forEach((row) => {
+        if (row.cache && row.cache.frontmatter) {
+            Object.keys(row.cache.frontmatter).forEach((key) => {
+                metadata[key] ||= 0;
+                metadata[key] += 1;
+            });
+        }
+    });
+    for (const key of Object.keys(formulas)) {
+        const id = key.match(/^[a-zA-Z0-9_]+$/)
+            ? "formula." + key
+            : `formula["${key.replaceAll('"', '"')}"]`;
+        columns.push({
+            id,
+            meta: {
+                displayName: properties[id]?.displayName || key,
+                icon: "lucide-square-function",
+                type: "text",
+            },
+        });
+    }
+    const frontmatter = {};
+    Object.keys(metadata)
+        .sort((a, b) => metadata[b] - metadata[a])
+        .forEach((key) => {
+        const name = key.replaceAll(/[^a-zA-Z0-9]/g, " ");
+        const { type, icon } = getMetadataTypeInfo(key, "unknown", app);
+        frontmatter[key] = metadataType(type);
+        columns.push({
+            id: key,
+            meta: {
+                frontmatter: true,
+                displayName: properties[key]?.displayName || name,
+                icon,
+                type,
+            },
+        });
+    });
+    return { columns, frontmatter };
+}
+function metadataType(type) {
+    switch (type) {
+        case "text":
+            return String;
+        case "checkbox":
+            return Boolean;
+        case "number":
+            return Number;
+        case "date":
+        case "datetime":
+            return TimeStamp;
+        case "tags":
+        case "multitext":
+        case "aliases":
+            return [String];
+        case "array":
+            return [Object];
+        case "object":
+            return Object;
+        default:
+            return Object;
+    }
+}

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

@@ -0,0 +1,15 @@
+import type { App, MetadataType } from "@lapis-notes/api";
+import { type DType } from "peaql";
+import type { BasesPropertyId } from "@lapis-notes/api";
+import type { VaultRecord } from ".";
+export type ColumnDefinition = {
+    id: BasesPropertyId;
+    displayName: string;
+    type: MetadataType;
+    icon: string;
+};
+export declare function columnsFor(rows: VaultRecord[], properties: Record<string, {
+    displayName: string;
+}> | undefined, formulas: Record<string, string>, app?: Pick<App, "metadataTypeManager">): Record<string, ColumnDefinition>;
+export declare function frontMatterTypesForColumns(columns: Record<string, ColumnDefinition>): Record<string, DType>;
+export declare function metadataType(type: MetadataType): DType;

package/dist/bases-view/columns.js

@@ -0,0 +1,103 @@
+import { inferMetadataPropertyType } from "@lapis-notes/api/metadata-value";
+import { TimeStamp } from "peaql";
+import { buildFileColumns } from "./file-fields-core";
+import { getMetadataTypeInfo } from "./metadata-type-info";
+export function columnsFor(rows, properties = {}, formulas, app) {
+    const columns = buildFileColumns(properties).map((column) => ({
+        id: column.id,
+        displayName: column.displayName,
+        icon: column.icon,
+        type: column.type,
+    }));
+    const metadata = {};
+    const observedMetadataTypes = {};
+    rows.forEach((row) => {
+        if (row.cache && row.cache.frontmatter) {
+            Object.entries(row.cache.frontmatter).forEach(([key, value]) => {
+                metadata[key] ||= 0;
+                metadata[key] += 1;
+                observedMetadataTypes[key] ??= inferMetadataTypeFromValue(key, value, app);
+            });
+        }
+    });
+    for (const key of Object.keys(formulas)) {
+        const id = ("formula." + key);
+        columns.push({
+            id,
+            displayName: properties[id]?.displayName || key,
+            icon: "lucide-square-function",
+            type: "text",
+        });
+    }
+    Object.entries(properties).forEach(([id, property]) => {
+        if (!id.startsWith("note.")) {
+            return;
+        }
+        if (columns.some((column) => column.id === id)) {
+            return;
+        }
+        const key = id.slice("note.".length);
+        const name = key.replaceAll(/[^a-zA-Z0-9-_]/g, " ");
+        const { type, icon } = getMetadataTypeInfo(key, "unknown", app);
+        columns.push({
+            id: id,
+            displayName: property.displayName || name,
+            icon,
+            type,
+        });
+    });
+    Object.keys(metadata)
+        .sort((a, b) => metadata[b] - metadata[a])
+        .forEach((key) => {
+        const name = key.replaceAll(/[^a-zA-Z0-9-_]/g, " ");
+        const { type, icon } = getMetadataTypeInfo(key, observedMetadataTypes[key] ?? "unknown", app);
+        columns.push({
+            id: key,
+            displayName: properties[key]?.displayName || name,
+            icon,
+            type,
+        });
+    });
+    return columns.reduce((acc, value) => {
+        acc[value.id] = value;
+        return acc;
+    }, {});
+}
+export function frontMatterTypesForColumns(columns) {
+    const types = {};
+    for (const [id, column] of Object.entries(columns)) {
+        if (id === "file" || id.startsWith("file.") || id.startsWith("formula.")) {
+            continue;
+        }
+        const noteId = id.startsWith("note.") ? id : `note.${id}`;
+        types[noteId] ??= metadataType(column.type);
+    }
+    return types;
+}
+export function metadataType(type) {
+    switch (type) {
+        case "text":
+            return String;
+        case "checkbox":
+            return Boolean;
+        case "number":
+            return Number;
+        case "date":
+        case "datetime":
+            return TimeStamp;
+        case "tags":
+        case "multitext":
+        case "aliases":
+            return [String];
+        case "array":
+            return [Object];
+        case "object":
+            return Object;
+        default:
+            return Object;
+    }
+}
+function inferMetadataTypeFromValue(key, value, app) {
+    return (app?.metadataTypeManager?.determinePropertyType?.(key, value) ??
+        inferMetadataPropertyType(key, value));
+}

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

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import Tag from "./tag-chip.svelte";
+
+  let {
+    class: className,
+    name,
+    ...props
+  }: {
+    class?: string;
+    name: string;
+  } = $props();
+</script>
+
+<Tag class={className} {name} {...props} />

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

@@ -0,0 +1,8 @@
+import Tag from "./tag-chip.svelte";
+type $$ComponentProps = {
+    class?: string;
+    name: string;
+};
+declare const Tag: import("svelte").Component<$$ComponentProps, {}, "">;
+type Tag = ReturnType<typeof Tag>;
+export default Tag;

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

@@ -0,0 +1,45 @@
+<script lang="ts">
+  import { cn } from "@lapis-notes/api";
+  import AutocompleteInput from "@lapismd/design-core/forms/AutocompleteInput.svelte";
+
+  type Options = { label: string; value: string; icon?: string };
+
+  let {
+    value = $bindable(""),
+    options,
+    placeholder = "Find or create",
+    class: className,
+    onSelect,
+    id,
+    "aria-label": ariaLabel,
+  }: {
+    value: string;
+    options: Array<Options> | (() => Array<Options>);
+    placeholder?: string;
+    class?: string;
+    onSelect?: (value: string) => void;
+    id?: string;
+    "aria-label"?: string;
+  } = $props();
+
+  let suggestions = $derived.by(() => {
+    const opts = Array.isArray(options) ? options : options();
+    return [...new Set(opts.map((option) => option.value).filter(Boolean))];
+  });
+</script>
+
+<div
+  class={cn("bases-autocomplete", className)}
+  data-ui-component="bases-autocomplete"
+  data-ui-part="root"
+>
+  <AutocompleteInput
+    {id}
+    bind:value
+    {suggestions}
+    {placeholder}
+    ariaLabel={ariaLabel ?? placeholder ?? "Autocomplete"}
+    commitOnBlur
+    onCommit={(committedValue) => onSelect?.(committedValue)}
+  />
+</div>

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

@@ -0,0 +1,17 @@
+type Options = {
+    label: string;
+    value: string;
+    icon?: string;
+};
+type $$ComponentProps = {
+    value: string;
+    options: Array<Options> | (() => Array<Options>);
+    placeholder?: string;
+    class?: string;
+    onSelect?: (value: string) => void;
+    id?: string;
+    "aria-label"?: string;
+};
+declare const Autocomplete: import("svelte").Component<$$ComponentProps, {}, "value">;
+type Autocomplete = ReturnType<typeof Autocomplete>;
+export default Autocomplete;

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

@@ -0,0 +1,121 @@
+<script lang="ts">
+  import { TFile, type App } from "@lapis-notes/api";
+  import { loadBasesResourceUrl } from "../resource-url";
+
+  const IMAGE_EXTENSIONS = new Set([
+    "apng",
+    "avif",
+    "bmp",
+    "gif",
+    "ico",
+    "jpeg",
+    "jpg",
+    "png",
+    "svg",
+    "tif",
+    "tiff",
+    "webp",
+  ]);
+
+  let {
+    app,
+    value,
+    sourceFile = null,
+    height,
+    fit = "contain",
+  }: {
+    app: App;
+    value: unknown;
+    sourceFile?: TFile | null;
+    height: number;
+    fit?: string;
+  } = $props();
+
+  let resourceUrl = $state("");
+  let imageFile = $derived(resolveImageFile(value, sourceFile));
+
+  function unwrapValue(value: unknown): unknown {
+    if (value instanceof TFile) {
+      return value;
+    }
+
+    if (value && typeof value === "object") {
+      const candidate = value as { file?: unknown; value?: unknown };
+      if (candidate.file instanceof TFile) {
+        return candidate.file;
+      }
+
+      if ("value" in candidate) {
+        return candidate.value;
+      }
+    }
+
+    return value;
+  }
+
+  function imagePathFromText(value: string): string {
+    const trimmed = value.trim();
+    const embedMatch = /^!?\[\[([^\]|]+)(?:\|[^\]]*)?\]\]$/u.exec(trimmed);
+    if (embedMatch) {
+      return embedMatch[1].trim();
+    }
+
+    const markdownImageMatch = /^!\[[^\]]*\]\(([^)]+)\)$/u.exec(trimmed);
+    if (markdownImageMatch) {
+      return markdownImageMatch[1].trim();
+    }
+
+    return trimmed;
+  }
+
+  function isImagePath(path: string): boolean {
+    const extensionIndex = path.lastIndexOf(".");
+    if (extensionIndex === -1) {
+      return false;
+    }
+    return IMAGE_EXTENSIONS.has(path.slice(extensionIndex + 1).toLowerCase());
+  }
+
+  function resolveImageFile(
+    value: unknown,
+    sourceFile: TFile | null,
+  ): TFile | null {
+    const unwrapped = unwrapValue(value);
+    if (unwrapped instanceof TFile) {
+      return isImagePath(unwrapped.path) ? unwrapped : null;
+    }
+
+    if (typeof unwrapped !== "string") {
+      return null;
+    }
+
+    const imagePath = imagePathFromText(unwrapped);
+    if (!isImagePath(imagePath)) {
+      return null;
+    }
+
+    return (
+      app.metadataCache.getFirstLinkpathDest(
+        imagePath,
+        sourceFile?.path ?? "",
+      ) ?? app.vault.getFileByPath(imagePath)
+    );
+  }
+
+  $effect(() => {
+    resourceUrl = "";
+
+    if (!imageFile) {
+      return;
+    }
+
+    return loadBasesResourceUrl(app, imageFile, (url) => {
+      resourceUrl = url;
+    });
+  });
+</script>
+
+<div
+  class="bases-card__image bases-style-rounded-t-lg-bc0d7f"
+  style={`height: ${height}px; background-size: ${fit}; background-image: ${resourceUrl ? `url("${resourceUrl}")` : "none"}; background-position: center; background-repeat: no-repeat;`}
+></div>

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

@@ -0,0 +1,11 @@
+import { TFile, type App } from "@lapis-notes/api";
+type $$ComponentProps = {
+    app: App;
+    value: unknown;
+    sourceFile?: TFile | null;
+    height: number;
+    fit?: string;
+};
+declare const CardImage: import("svelte").Component<$$ComponentProps, {}, "">;
+type CardImage = ReturnType<typeof CardImage>;
+export default CardImage;