@lapis-notes/bases 0.2.1 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # Bases changelog
 
+## 0.3.0
+
+### Minor Changes
+
+- [#66](https://github.com/lapismd/lapis-plugins/pull/66) [`e6263f6`](https://github.com/lapismd/lapis-plugins/commit/e6263f6d8fa4f24de9af42b5b701fbfd55972299) Thanks [@stevejuma](https://github.com/stevejuma)! - Modernise compact List records with on-demand editing, use bounded Shadcn scrolling and body-surface Cards, add shared file-link hover previews and hover/focus underlines, improve unsupported views, and add populated Kanban and Activity registry examples.
+
+- [#62](https://github.com/lapismd/lapis-plugins/pull/62) [`fe8e1d7`](https://github.com/lapismd/lapis-plugins/commit/fe8e1d757b51a15118983727880343042f0c07d3) Thanks [@stevejuma](https://github.com/stevejuma)! - Add configurable Markdown Kanban and Activity layouts, inline file editing, property grids, generic stamp badges, column filters and optional anchoring. Derive summaries from Markdown bodies or mapped properties, preserve the host background in embedded editors and start embedded editing with collapsed properties. Keep dated Activity headings sticky with visible column borders. Admit the released Core 0.12 cohort in History so its settings component shares the host controller type.
+
+### Patch Changes
+
+- [#68](https://github.com/lapismd/lapis-plugins/pull/68) [`5a54841`](https://github.com/lapismd/lapis-plugins/commit/5a54841a08814a8ead6bc6c55adc01cb174e72a6) Thanks [@stevejuma](https://github.com/stevejuma)! - Give file and fenced Markdown embeds a bounded host, compact Bases toolbar, working Search and Filter controls, and a filename chip on hover or focus. Preserve read-only behaviour, present invalid content in a Shadcn error alert, name read-only dates for assistive technology, and add Kanban/Activity embed examples. Keep Table/List edges flush and table scrollbar tracks on the body surface. Wrap additional List properties within the available width, retain label/value alignment, and keep group counts and full-width separators visible.
+
+  Require Design Core ^0.12.3 so repeated Kanban and Activity embeds retain independent accessible landmarks and IDs.
+
+- [#72](https://github.com/lapismd/lapis-plugins/pull/72) [`bb8229a`](https://github.com/lapismd/lapis-plugins/commit/bb8229abead6278c12f15b4708810120af3387de) Thanks [@stevejuma](https://github.com/stevejuma)! - Inset embedded grouped List headings before the expand chevron while preserving full-width separators and visible counts.
+
+  Show automatic Table column sizing in the ordinary Embed example while retaining realistic data and narrow-pane scroll acceptance.
+
+- [#61](https://github.com/lapismd/lapis-plugins/pull/61) [`9210719`](https://github.com/lapismd/lapis-plugins/commit/921071900dc14f6ffdcd09080a33cf330135955f) Thanks [@lapismd-dependency-bot](https://github.com/apps/lapismd-dependency-bot)! - Refresh first-party Lapis dependencies to the published versions recorded in this pull request.
+
 ## 0.2.1
 
 ### Patch Changes

package/README.md

@@ -13,7 +13,7 @@ Register the exported plugin class in the application's `PluginProfile`. Import
 registration so the host owns its lifecycle.
 
 The runtime plugin ID is `bases`. A matching signed
-`bases-0.2.1.lapis-plugin` archive is attached to the
+`bases-0.3.0.lapis-plugin` archive is attached to the
 package-scoped GitHub release for manual or registry installation.
 
 See the [repository README](https://github.com/lapismd/lapis-plugins#readme) for

package/dist/bases-plugin.js

@@ -3,7 +3,8 @@ import { MarkdownRenderChild, Plugin, } from "@lapis-notes/api";
 import { markupEditor } from "@lapis-notes/api/editor/core";
 import { yaml } from "@codemirror/lang-yaml";
 import { mount, unmount } from "svelte";
-import BasesComponent from "./bases-view/view.svelte";
+import BasesEmbed from "./bases-view/components/bases-embed.svelte";
+import BasesError from "./bases-view/components/bases-error.svelte";
 import { BasesView, BasesViewType, createBasesViewRegistrations, parseBasesDocument, } from "./bases-view";
 import manifestSpec from "@lapis-notes/bases/manifest.json";
 export class BasesPlugin extends Plugin {
@@ -43,13 +44,13 @@ export class BasesPlugin extends Plugin {
                 if (disposed) {
                     return;
                 }
-                activeHandle = this.mountReadOnlyBases(containerEl, content);
+                activeHandle = this.mountReadOnlyBases(containerEl, content, file.name);
             })
                 .catch((error) => {
                 if (disposed) {
                     return;
                 }
-                this.renderError(containerEl, error instanceof Error
+                activeHandle = this.renderError(containerEl, error instanceof Error
                     ? `Unable to render this embedded base: ${error.message}`
                     : `Unable to render this embedded base: ${String(error)}`);
             });
@@ -73,31 +74,24 @@ export class BasesPlugin extends Plugin {
             ctx.addChild(child);
         });
     }
-    mountReadOnlyBases(containerEl, content) {
+    mountReadOnlyBases(containerEl, content, fileName) {
         containerEl.replaceChildren();
         let document;
         try {
             document = parseBasesDocument(content);
         }
         catch (error) {
-            this.renderError(containerEl, error instanceof Error
+            return this.renderError(containerEl, error instanceof Error
                 ? `Unable to render this base: ${error.message}`
                 : `Unable to render this base: ${String(error)}`);
-            return {
-                destroy: () => {
-                    containerEl.replaceChildren();
-                },
-            };
         }
-        const component = mount(BasesComponent, {
+        const component = mount(BasesEmbed, {
             target: containerEl,
             props: {
                 app: this.app,
                 document,
                 registrations: createBasesViewRegistrations(this.app),
-                onChange: () => { },
-                readOnly: true,
-                showHeader: false,
+                fileName,
             },
         });
         return {
@@ -109,13 +103,16 @@ export class BasesPlugin extends Plugin {
     }
     renderError(containerEl, message) {
         containerEl.replaceChildren();
-        const wrapper = document.createElement("div");
-        wrapper.className = "bases-view-error";
-        const messageEl = document.createElement("p");
-        messageEl.className = "bases-view-error__message";
-        messageEl.textContent = message;
-        wrapper.appendChild(messageEl);
-        containerEl.appendChild(wrapper);
+        const component = mount(BasesError, {
+            target: containerEl,
+            props: { message },
+        });
+        return {
+            destroy: () => {
+                void unmount(component);
+                containerEl.replaceChildren();
+            },
+        };
     }
 }
 export default BasesPlugin;

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

@@ -415,6 +415,7 @@ export declare class QueryController extends Component {
     selectedView: BasesViewBase;
     private prevDoc;
     private lastViewResults;
+    get requiredProperties(): BasesPropertyId[];
     query: string;
     metadataDependencies: import("./metadata-invalidation-core").MetadataDependencySet;
     reloadSignature: string;
@@ -426,6 +427,8 @@ export declare class QueryController extends Component {
     private syncViewData;
     get viewConfig(): BasesViewRegistration;
     getRecords(qs: string): [Array<Record<string, unknown>>, Record<string, DType>];
+    /** Apply a lane predicate to the already selected result without changing global filters. */
+    filterEntries(entries: BasesEntry[], filter: import("./models").Filters): BasesEntry[];
     getAllColumns(): ColumnDefinition[];
     isVisible(id: BasesPropertyId): boolean;
     toggleVisibility(id: BasesPropertyId): void;
@@ -531,6 +534,10 @@ export interface BasesViewRegistration {
      * @public
      */
     options?: (config: SharedBasesViewConfig) => BasesAllOptions[];
+    /** Hidden presentation fields that this layout needs in its result projection. */
+    requiredProperties?: (view: BasesViewBase, columns: readonly import("./columns").ColumnDefinition[]) => BasesPropertyId[];
+    /** Additional layout-owned predicates whose metadata dependencies must stay live. */
+    columnFilters?: (view: BasesViewBase) => import("./models").Filters[];
 }
 /**
  * A group of BasesEntry objects for a given value of the groupBy key. If there

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

@@ -8,7 +8,7 @@ import { generateQuery } from "./filter-parser";
 import { isEqual } from "lodash-es";
 import { groupEntries } from "./query-result-core";
 import { filterEntriesBySearch } from "./search-core";
-import { collectMetadataDependencies, } from "./metadata-invalidation-core";
+import { collectMetadataDependencies } from "./metadata-invalidation-core";
 import { appDatabaseRowsToVaultRecords, buildBasesAppDatabaseQuery, queryBasesAppDatabaseRows, } from "./app-database-query-source";
 import { mount, unmount } from "svelte";
 export { BasesViewConfig } from "@lapis-notes/api";
@@ -545,12 +545,23 @@ export class QueryController extends Component {
     #view = $state();
     prevDoc = "";
     lastViewResults = new WeakMap();
-    query = $derived(generateQuery(this.selectedView, this.formulas, this.doc.filters));
+    get requiredProperties() {
+        return (this.views
+            .get(this.selectedView?.type)
+            ?.requiredProperties?.(this.selectedView, this.getAllColumns()) ?? []);
+    }
+    query = $derived(generateQuery(this.selectedView, this.formulas, this.doc.filters, this.requiredProperties));
     metadataDependencies = $derived.by(() => {
         return collectMetadataDependencies({
             documentFilter: this.doc.filters,
             viewFilter: this.selectedView?.filter,
-            order: (this.selectedView?.order ?? []),
+            order: [
+                ...(this.selectedView?.order ?? []),
+                ...this.requiredProperties,
+            ],
+            additionalFilters: this.views
+                .get(this.selectedView?.type)
+                ?.columnFilters?.(this.selectedView) ?? [],
             sort: this.selectedView?.sort ?? [],
             groupByProperty: this.selectedView?.groupBy?.property ?? null,
             imageProperty: typeof this.selectedView?.image === "string"
@@ -572,8 +583,10 @@ export class QueryController extends Component {
         {},
     ]);
     queryResult = $derived.by(() => {
-        const visibleProperties = (this.selectedView?.order ??
-            []);
+        const configuredProperties = this.selectedView?.order ?? [];
+        const visibleProperties = (this.selectedView?.type === "list" && configuredProperties.length === 0
+            ? ["file.name"]
+            : configuredProperties);
         const entries = filterEntriesBySearch(convertEntries(this.dataset), visibleProperties, this.searchQuery);
         return new BasesQueryResult(entries, this.getAllColumns().map((it) => it.id), this.selectedView?.groupBy?.property);
     });
@@ -617,7 +630,7 @@ export class QueryController extends Component {
             void this.reload();
         });
         $effect(() => {
-            this.dataset = this.getRecords(this.query);
+            this.dataset = this.data.length ? this.getRecords(this.query) : [[], {}];
         });
         this.registerEvent(this.app.metadataCache.on("index-changed", (change) => {
             if (change.reset || change.domains.includes("metadata"))
@@ -664,6 +677,21 @@ export class QueryController extends Component {
             return [[], types];
         }
     }
+    /** Apply a lane predicate to the already selected result without changing global filters. */
+    filterEntries(entries, filter) {
+        const query = generateQuery({
+            ...this.selectedView,
+            order: [],
+            sort: [],
+            groupBy: undefined,
+            limit: 0,
+            filter,
+        }, this.formulas);
+        const [columns, rows] = this.db.execute(query);
+        const position = columns.findIndex((column) => column.name.description === "$rowId");
+        const ids = new Set(rows.map((row) => row[position].id));
+        return entries.filter((entry) => ids.has(entry.id));
+    }
     getAllColumns() {
         return Object.values(this.columns);
     }
@@ -713,7 +741,9 @@ export class QueryController extends Component {
                 for (let offset = 0; offset < records.length; offset += 400) {
                     const links = await this.app.metadataCache.queryLinks({
                         direction: "incoming",
-                        paths: records.slice(offset, offset + 400).map((record) => record.id),
+                        paths: records
+                            .slice(offset, offset + 400)
+                            .map((record) => record.id),
                         resolution: "resolved",
                         limit: 100_000,
                     });

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

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import * as ScrollArea from "@lapismd/design-core/shadcn/scroll-area";
   import { Skeleton } from "@lapismd/design-core/shadcn/skeleton";
   import type { BasesView } from "../../bases.svelte";
   import { toNumber } from "..";
@@ -27,16 +28,17 @@
 </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);`}
+  class="bases-card-grid bases-record-view"
 >
+  <ScrollArea.Root class="bases-record-view__scroll" viewportProps={{ "aria-label": "Loading cards" }}>
+  <div class="bases-card-grid__content">
   <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;`}
+        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">
@@ -65,4 +67,6 @@
       </div>
     {/each}
   </div>
+  </div>
+  </ScrollArea.Root>
 </div>

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

@@ -6,7 +6,7 @@
   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 * as 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";
@@ -58,7 +58,7 @@
   });
 
   let containerSize = useResizeObserver();
-  let containerEl: HTMLDivElement = $state()!;
+  let containerEl = $state<HTMLElement | null>(null);
   let cardHeight = $derived.by(() => {
     return view.config.getOrder().length * 56 + 17 + imageSize + 28;
   });
@@ -97,7 +97,7 @@
 
   const handleResize = throttle(() => {
     const size = Math.floor(containerSize.size.width / (cardSize + gap.x));
-    columns = size;
+    columns = Math.max(1, size);
   }, 200);
 
   $effect(() => {
@@ -156,7 +156,7 @@
 </script>
 
 {#snippet cardBody(row: BasesEntry)}
-  <ScrollArea class="bases-style-h-full-668b21 bases-style-w-full-6da6a3">
+  <div class="bases-card__body">
     {#if imageSize}
       <CardImage
         app={view.controller.app}
@@ -189,28 +189,34 @@
         </div>
       </div>
     {/each}
-  </ScrollArea>
+  </div>
 {/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"
+    class="bases-card-grid bases-record-view"
     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"
     />
+    <ScrollArea.Root
+      class="bases-record-view__scroll"
+      orientation="both"
+      type="always"
+      bind:viewportRef={
+        () => containerEl,
+        (value) => {
+          containerEl = value;
+          if (value) containerSize.ref = value;
+        }
+      }
+      viewportProps={{ "aria-label": "Cards" }}
+    >
+    <div class="bases-card-grid__content">
     {#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"}`)}
@@ -261,7 +267,7 @@
     {:else}
       <div
         class="relative"
-        style={`height: ${rowVirtualizer.getTotalSize() + cardHeight}px; width: ${columnVirtualizer.getTotalSize()}px;`}
+        style={`height: ${rowVirtualizer.getTotalSize()}px; width: ${columnVirtualizer.getTotalSize()}px;`}
       >
         {#each rowVirtualizer.getVirtualItems() as virtualRow (virtualRow.key)}
           {#each columnVirtualizer.getVirtualItems() as virtualColumn (virtualColumn.key)}
@@ -283,6 +289,8 @@
         {/each}
       </div>
     {/if}
+    </div>
+    </ScrollArea.Root>
   </div>
 {:else}
   <CardPlaceholder {view} />

package/dist/bases-view/cell.svelte

@@ -5,9 +5,13 @@
   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 { TagList } from "@lapismd/design-core/shadcn/tag-list";
+  import { Button } from "@lapismd/design-core/shadcn/button";
+  import Pencil from "@lucide/svelte/icons/pencil";
+  import { collectMetadataSuggestions } from "./cell-editor-options";
   import CellEditor from "./cell-editor.svelte";
   import { set, unset } from "lodash-es";
-  import { untrack } from "svelte";
+  import { tick, untrack } from "svelte";
   import { Icon } from "./functions";
   import { Icon as IconComponent } from "@lapis-notes/api/icon";
   import File from "./components/file.svelte";
@@ -20,6 +24,8 @@
     name,
     value: cellValue,
     readOnly = false,
+    editOnActivation = false,
+    label = name.startsWith("note.") ? name.slice(5) : name,
     class: className,
     meta,
     ...rest
@@ -30,6 +36,8 @@
     value: Value | null | unknown;
     file: TFile;
     readOnly?: boolean;
+    editOnActivation?: boolean;
+    label?: string;
     meta?: unknown;
   } = $props();
 
@@ -40,6 +48,80 @@
       : (cellValue ?? ""),
   );
 
+  const descriptionId = $props.id();
+  let editing = $state(false);
+  let cancelled = false;
+  let cellElement = $state<HTMLDivElement>();
+  let activateButton = $state<HTMLButtonElement>();
+  const writable = $derived(
+    !readOnly &&
+      !(
+        name.startsWith("file.") ||
+        name.startsWith("formula.") ||
+        name === "file"
+      ),
+  );
+
+  const tagItems = $derived(
+    collectMetadataSuggestions([value], true).map((tag) => ({
+      id: tag,
+      label: tag.startsWith("#") ? tag : `#${tag}`,
+      tone: "accent" as const,
+      onClick: writable
+        ? () => {
+            void activate();
+          }
+        : undefined,
+    })),
+  );
+
+  async function activate() {
+    cancelled = false;
+    editing = true;
+    await tick();
+    const input = cellElement?.querySelector<HTMLInputElement>(
+      'input, textarea, [contenteditable="true"]',
+    );
+    input?.focus();
+    if (input?.type === "text") input.select();
+  }
+
+  function cancelDraft(event: KeyboardEvent) {
+    if (!editOnActivation || !editing || event.key !== "Escape") return;
+    event.preventDefault();
+    event.stopPropagation();
+    cancelled = true;
+    editing = false;
+    void tick().then(() => activateButton?.focus());
+  }
+
+  function finishEditing(event: FocusEvent) {
+    if (!editOnActivation || !editing) return;
+    // Replacing the focused activation button is not an editor dismissal.
+    if (
+      !(event.target instanceof Element) ||
+      !event.target.closest('[data-ui-component="bases-cell-editor"]')
+    )
+      return;
+    const next = event.relatedTarget;
+    if (
+      next instanceof Element &&
+      (cellElement?.contains(next) ||
+        next.closest('[role="listbox"], [role="option"]'))
+    )
+      return;
+    // Child blur handlers keep their existing per-type commit semantics.
+    queueMicrotask(() => {
+      editing = false;
+    });
+  }
+
+  function displayValue() {
+    if (value === null || value === undefined || value === "") return "—";
+    if (typeof value === "boolean") return value ? "Yes" : "No";
+    if (Array.isArray(value)) return value.join(", ") || "—";
+    return String(value);
+  }
   function focusElement(evt: Event) {
     const target = evt.target;
     if (!(target instanceof HTMLElement) || target.closest("button")) return;
@@ -76,6 +158,7 @@
   }
 
   function onValueChange(name: string, value: any) {
+    if (editOnActivation && cancelled) return;
     if (name.startsWith("file.") || name.startsWith("formula.")) return;
     untrack(() => {
       if (file) {
@@ -101,21 +184,13 @@
   }
 </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"}
+{#snippet renderedValue()}
+  {#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">
+    <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}
@@ -123,10 +198,66 @@
   {:else if value instanceof TFile}
     <File {app} file={value} />
   {:else if value instanceof DateTime}
-    <DatetimeWidget {value} />
+    <DatetimeWidget {value} {label} />
   {: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>
+    <div
+      class={cn(
+        "bases-style-h-full-668b21 bases-style-w-full-6da6a3",
+        editOnActivation && "bases-cell__display",
+      )}
+    >
+      {editOnActivation ? displayValue() : value}
+    </div>
+  {/if}
+{/snippet}
+
+<div
+  {...rest}
+  bind:this={cellElement}
+  onkeydowncapture={cancelDraft}
+  onfocusout={finishEditing}
+  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 writable && (!editOnActivation || editing)}
+    <CellEditor {app} {onValueChange} {value} {name} type={displayType} />
+  {:else if editOnActivation && (displayType === "tags" || name === "file.tags")}
+    <div class="bases-cell__tags">
+      <TagList tags={tagItems} {label} class="bases-cell__tag-list" />
+      {#if writable}
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon-xs"
+          aria-label={`Edit ${label}`}
+          onclick={activate}><Pencil aria-hidden="true" /></Button
+        >
+      {/if}
+    </div>
+  {:else if writable && editOnActivation}
+    <button
+      bind:this={activateButton}
+      type="button"
+      class="bases-cell__activate"
+      aria-label={`Edit ${label}`}
+      aria-describedby={descriptionId}
+      title={displayValue()}
+      onclick={activate}
+    >
+      <span class="bases-cell__display"
+        >{value instanceof DateTime
+          ? value.toLocaleString(DateTime.DATE_MED)
+          : displayValue()}</span
+      >
+    </button>
+    <span id={descriptionId} hidden>{displayValue()}</span>
+  {:else}
+    {@render renderedValue()}
   {/if}
 </div>

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

@@ -9,6 +9,8 @@ type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
     value: Value | null | unknown;
     file: TFile;
     readOnly?: boolean;
+    editOnActivation?: boolean;
+    label?: string;
     meta?: unknown;
 };
 declare const Cell: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/bases-view/columns.js

@@ -51,9 +51,10 @@ export function columnsFor(rows, properties = {}, formulas, app) {
         .forEach((key) => {
         const name = key.replaceAll(/[^a-zA-Z0-9-_]/g, " ");
         const { type, icon } = getMetadataTypeInfo(key, observedMetadataTypes[key] ?? "unknown", app);
+        const id = `note.${key}`;
         columns.push({
-            id: key,
-            displayName: properties[key]?.displayName || name,
+            id,
+            displayName: properties[id]?.displayName || properties[key]?.displayName || name,
             icon,
             type,
         });

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

@@ -0,0 +1,28 @@
+<script lang="ts">
+  import type { App } from "@lapis-notes/api";
+  import { Badge } from "@lapismd/design-core/shadcn/badge";
+  import BasesComponent from "../view.svelte";
+  import type { BasesDocument } from "../models";
+  import type { BasesViewRegistration } from "../bases.svelte";
+
+  let {
+    app,
+    document,
+    registrations,
+    fileName,
+  }: {
+    app: App;
+    document: BasesDocument;
+    registrations: ReadonlyMap<string, BasesViewRegistration>;
+    fileName?: string;
+  } = $props();
+</script>
+
+<div class="bases-embed">
+  <BasesComponent {app} {document} {registrations} readOnly showHeader />
+  {#if fileName}
+    <Badge variant="secondary" class="bases-embed__file-chip">
+      <span class="bases-embed__file-name">{fileName}</span>
+    </Badge>
+  {/if}
+</div>

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

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