@lapis-notes/bases 0.2.1 → 0.3.0

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

@@ -0,0 +1,284 @@
+<script lang="ts">
+  import {
+    KanbanBoard,
+    KanbanCardDetail,
+    KanbanActivityView,
+    type KanbanColumnData,
+    type KanbanDetailBodyContext,
+  } from "@lapismd/design-core/workspace/kanban";
+  import { Button } from "@lapismd/design-core/shadcn/button";
+  import * as Popover from "@lapismd/design-core/shadcn/popover";
+  import FilterIcon from "@lucide/svelte/icons/list-filter";
+  import type { BasesEntry } from "../bases.svelte";
+  import type { KanbanBasesView } from "./index";
+  import FilterGroup from "../components/filters/filter-group.svelte";
+  import MarkdownDetail from "./markdown-detail.svelte";
+  import { buildKanbanColumns, toCardData, valueToText } from "./mapping";
+  import { markdownExcerpt } from "./configuration";
+
+  let { view }: { view: KanbanBasesView } = $props();
+  let summaryById = $state<Record<string, string>>({});
+  const cachedBodies = new Map<string, { mtime: number; summary: string }>();
+  let selectedEntry = $state<BasesEntry | null>(null);
+  let selectedColumnId = $state("");
+  let detailOpen = $state(false);
+  let markdownDetail = $state<{ flush(): Promise<boolean> } | null>(null);
+  let openingError = $state("");
+
+  const fields = $derived({
+    titleProperty: view.titleProperty,
+    chipProperty: view.chipProperty,
+    displayProperties: view.displayProperties,
+    descriptionProperty: view.descriptionProperty,
+    tagsProperty: view.tagsProperty,
+    badgeProperty: view.badgeProperty,
+    badgeLabel: view.badgeLabel,
+    badgeColor: view.badgeColor,
+    propertyLabels: view.propertyLabels,
+    propertyTypes: view.propertyTypes,
+    summaries: summaryById,
+  });
+  const filtered = $derived.by(() => {
+    try {
+      return { ...view.filterGroups(), error: "" };
+    } catch (error) {
+      return {
+        groups: [],
+        totals: {},
+        error: error instanceof Error ? error.message : String(error),
+      };
+    }
+  });
+  const built = $derived(
+    buildKanbanColumns({
+      ...fields,
+      groups: filtered.groups,
+      groupProperty: view.data.groupBy ?? "",
+      columnOrder: view.columnOrder,
+      columnMeta: view.columnMeta,
+      columnTotals: filtered.totals,
+    }),
+  );
+  const hasGrouping = $derived(Boolean(view.data.groupBy));
+  const activityEntries = $derived(
+    built.columns.flatMap((column) =>
+      column.cards.map((card) => ({
+        card,
+        columnId: column.id,
+        date: view.dateProperty
+          ? valueToText(view.findEntry(card.id)?.getValue(view.dateProperty))
+          : null,
+      })),
+    ),
+  );
+  const selected = $derived.by(() => {
+    if (!selectedEntry) return null;
+    const entry = view.findEntry(selectedEntry.file.path) ?? selectedEntry;
+    const column =
+      built.columns.find((column) =>
+        column.cards.some((card) => card.id === entry.id),
+      ) ?? built.columns.find((column) => column.id === selectedColumnId);
+    return {
+      entry,
+      column,
+      card: toCardData(entry, column?.color ?? "#0e7490", fields),
+    };
+  });
+
+  $effect(() => {
+    const entries = view.data.data;
+    const description = view.descriptionProperty;
+    const files = entries
+      .filter(
+        (entry) => !description || !valueToText(entry.getValue(description)),
+      )
+      .map((entry) => ({
+        id: entry.id,
+        file: entry.file,
+        mtime: entry.file.stat.mtime,
+      }));
+    let cancelled = false;
+    void (async () => {
+      let cursor = 0;
+      const summaries: Record<string, string> = {};
+      await Promise.all(
+        Array.from({ length: Math.min(4, files.length) }, async () => {
+          while (cursor < files.length) {
+            const { id, file, mtime } = files[cursor++];
+            const cached = cachedBodies.get(id);
+            try {
+              const summary =
+                cached?.mtime === mtime
+                  ? cached.summary
+                  : markdownExcerpt(
+                      await view.controller.app.vault.cachedRead(file),
+                    );
+              if (cancelled) return;
+              cachedBodies.set(id, { mtime, summary });
+              summaries[id] = summary;
+            } catch {
+              if (!cancelled) cachedBodies.delete(id);
+            }
+          }
+        }),
+      );
+      if (!cancelled) summaryById = summaries;
+    })();
+    return () => {
+      cancelled = true;
+    };
+  });
+
+  async function handleCardOpen(
+    cardId: string,
+    columnId: string,
+  ): Promise<void> {
+    openingError = "";
+    try {
+      if (detailOpen && !((await markdownDetail?.flush()) ?? true)) return;
+      const entry = view.findEntry(cardId);
+      if (!entry) return;
+      selectedEntry = entry;
+      selectedColumnId = columnId;
+      detailOpen = true;
+    } catch (error) {
+      openingError = error instanceof Error ? error.message : String(error);
+    }
+  }
+
+  async function handleMoveCardToColumn(
+    cardId: string,
+    columnId: string,
+  ): Promise<void> {
+    const property = view.data.groupBy;
+    if (!property || !view.canMoveCards) return;
+    const entry = view.findEntry(cardId);
+    if (entry)
+      await view.setGroupValue(
+        entry,
+        property,
+        built.groupValues[columnId] ?? null,
+      );
+  }
+</script>
+
+<div class="kanban-view-host">
+  {#if openingError || filtered.error}<p role="alert">
+      {openingError || filtered.error}
+    </p>{/if}
+  {#if view.type === "activity" && !view.dateProperty}<p role="status">
+      Choose a date property to arrange activity. Notes without dates are shown
+      under Undated.
+    </p>{/if}
+  <div class="bases-kanban-canvas">
+    {#if view.type === "activity"}
+      <KanbanActivityView
+        entries={activityEntries}
+        columns={hasGrouping ? built.columns : []}
+        onCardOpen={handleCardOpen}
+      />
+    {:else}
+      <KanbanBoard
+        columns={hasGrouping ? built.columns : []}
+        movesEnabled={view.canMoveCards}
+        anchorColumnId={view.anchorColumnId}
+        onCardOpen={handleCardOpen}
+        onMoveCardToColumn={handleMoveCardToColumn}
+        onReorderColumns={(ids) => view.setColumnOrder(ids)}
+        onEditColumn={(id, meta) => view.setColumnMeta(id, meta)}
+        {columnActions}
+        ariaLabel="Kanban board"
+        emptyTitle={hasGrouping
+          ? "No notes match this board"
+          : "Group this view to see a board"}
+        emptyDescription={hasGrouping
+          ? "Change the active filters to surface notes on this board."
+          : "Choose a group-by property in the view settings to arrange notes into kanban columns."}
+      />
+    {/if}
+  </div>
+</div>
+
+{#snippet columnActions(column: KanbanColumnData)}
+  <Popover.Root
+    onOpenChange={(open) => {
+      if (open) view.ensureColumnFilter(column.id);
+    }}
+  >
+    <Popover.Trigger
+      >{#snippet child({ props })}<Button
+          {...props}
+          variant="ghost"
+          size="icon"
+          aria-label={`Filter ${column.label} column`}><FilterIcon /></Button
+        >{/snippet}</Popover.Trigger
+    >
+    <Popover.Content style="width: min(90vw, 36rem)">
+      <p>Filter cards in {column.label}</p>
+      <FilterGroup
+        controller={view.controller}
+        bind:filter={
+          () => view.columnFilters[column.id] ?? { and: [] },
+          (filter) => view.setColumnFilter(column.id, filter)
+        }
+      />
+    </Popover.Content>
+  </Popover.Root>
+{/snippet}
+
+{#if selected}
+  <KanbanCardDetail
+    card={selected.card}
+    columns={built.columns}
+    columnId={selected.column?.id ?? selectedColumnId}
+    columnLabel={selected.column?.label ?? ""}
+    bind:open={detailOpen}
+    movesEnabled={view.canMoveCards}
+    closeOnMove={false}
+    onClose={() => {
+      selectedEntry = null;
+    }}
+    beforeClose={async () => (await markdownDetail?.flush()) ?? true}
+    onMoveToColumn={(id) => handleMoveCardToColumn(selected!.entry.id, id)}
+    onSaveTitle={view.canEditTitle
+      ? async (title) => {
+          if (!((await markdownDetail?.flush()) ?? true))
+            throw new Error("Save the body before editing its title.");
+          return await view.saveTitle(selected!.entry, title);
+        }
+      : undefined}
+    body={detailBody}
+    brandLabel="Notes"
+  />
+{/if}
+
+{#snippet detailBody(context: KanbanDetailBodyContext)}
+  {#if selected}
+    <MarkdownDetail
+      bind:this={markdownDetail}
+      app={view.controller.app}
+      file={selected.entry.file}
+      editing={context.editing}
+      readOnly={view.controller.readOnly}
+      onEditingChange={context.setEditing}
+    />
+  {/if}
+{/snippet}
+
+<style>
+  .kanban-view-host {
+    min-width: 0;
+    width: 100%;
+    height: 100%;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+  .bases-kanban-canvas {
+    flex: 1;
+    min-height: 0;
+    min-width: 0;
+    --kanban-board-height: 100%;
+  }
+</style>

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

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

package/dist/bases-view/kanban-view/mapping.d.ts

@@ -0,0 +1,77 @@
+/**
+ * Pure mapping helpers turning Bases query results into Design Core Kanban
+ * Board data. Kept DOM-free so the grouping, ordering, colour and card-field
+ * rules are unit-testable without mounting the view.
+ */
+import type { KanbanCardData, KanbanColumnData } from "@lapismd/design-core/workspace/kanban";
+import type { BasesEntry, BasesEntryGroup, BasesPropertyId } from "../bases.svelte";
+/** Column id used for the group holding entries without a groupBy value. */
+export declare const UNGROUPED_COLUMN_ID = "__bases_kanban_ungrouped__";
+/** Fallback label for the ungrouped column. */
+export declare const UNGROUPED_COLUMN_LABEL = "Ungrouped";
+/** Per-column presentation persisted in the view document. */
+export interface KanbanColumnMeta {
+    title?: string;
+    color?: string;
+}
+export type KanbanColumnMetaMap = Record<string, KanbanColumnMeta>;
+/**
+ * AA-contrast lane palette (the Design Core kanban swatch hues). Columns
+ * without an explicit `columnMeta` colour cycle through this list.
+ */
+export declare const KANBAN_LANE_COLORS: string[];
+/** Renders any Bases value (Value instances, arrays, tag objects) as text. */
+export declare function valueToText(value: unknown): string;
+/** Renders a multi-value Bases field (tags, multitext) as string items. */
+export declare function valueToStrings(value: unknown): string[];
+export interface KanbanColumnSource {
+    /** Group key text; empty for the ungrouped bucket. */
+    id: string;
+    label: string;
+    /** Raw group value written back to the groupBy property on move. */
+    groupValue: unknown;
+    entries: BasesEntry[];
+}
+/** Converts Bases entry groups into ordered column sources. */
+export declare function rawGroupValue(value: unknown): unknown;
+export declare function groupIdentity(property: string, value: unknown): string;
+export declare function toColumnSources(groups: BasesEntryGroup[], groupProperty?: string): KanbanColumnSource[];
+/** Applies the persisted column order, keeping unknown/new columns at the end. */
+export declare function applyColumnOrder(sources: KanbanColumnSource[], columnOrder: string[]): KanbanColumnSource[];
+export interface KanbanCardFields {
+    titleProperty: BasesPropertyId;
+    /** Visible property columns rendered in the card meta cells. */
+    displayProperties: BasesPropertyId[];
+    chipProperty?: BasesPropertyId | null;
+    descriptionProperty?: BasesPropertyId | null;
+    tagsProperty?: BasesPropertyId;
+    badgeProperty?: BasesPropertyId | null;
+    badgeLabel?: string;
+    badgeColor?: string;
+    propertyLabels?: Record<string, string>;
+    propertyTypes?: Record<string, string>;
+    summaries?: Record<string, string>;
+}
+/** Formats a date (epoch ms, Date, ISO string) as card meta text (e.g. "Sep 12"). */
+export declare function formatDateText(value: unknown): string;
+/** Renders a display-property value, shortening ISO dates for the meta cells. */
+export declare function formatDisplayText(value: unknown): string;
+export declare function propertyText(value: unknown, type?: string): string;
+/** Maps one Bases entry onto kanban card data for a given lane colour. */
+export declare function toCardData(entry: BasesEntry, color: string, fields: KanbanCardFields): KanbanCardData;
+export interface BuildKanbanColumnsInput extends KanbanCardFields {
+    groupProperty?: string;
+    columnTotals?: Record<string, number>;
+    groups: BasesEntryGroup[];
+    titleProperty: BasesPropertyId;
+    displayProperties: BasesPropertyId[];
+    columnOrder: string[];
+    columnMeta: KanbanColumnMetaMap;
+}
+export interface BuiltKanbanColumns {
+    columns: KanbanColumnData[];
+    /** Column id → raw group value for frontmatter writes on move. */
+    groupValues: Record<string, unknown>;
+}
+/** Builds Design Core kanban columns (and the move-target value map). */
+export declare function buildKanbanColumns(input: BuildKanbanColumnsInput): BuiltKanbanColumns;

package/dist/bases-view/kanban-view/mapping.js

@@ -0,0 +1,206 @@
+/** Column id used for the group holding entries without a groupBy value. */
+export const UNGROUPED_COLUMN_ID = "__bases_kanban_ungrouped__";
+/** Fallback label for the ungrouped column. */
+export const UNGROUPED_COLUMN_LABEL = "Ungrouped";
+/**
+ * AA-contrast lane palette (the Design Core kanban swatch hues). Columns
+ * without an explicit `columnMeta` colour cycle through this list.
+ */
+export const KANBAN_LANE_COLORS = [
+    "#1d4ed8",
+    "#64748b",
+    "#a16207",
+    "#b45309",
+    "#4d7c0f",
+    "#0e7490",
+    "#6d28d9",
+    "#7e22ce",
+    "#a21caf",
+];
+/** Renders any Bases value (Value instances, arrays, tag objects) as text. */
+export function valueToText(value) {
+    if (value === null || value === undefined)
+        return "";
+    if (Array.isArray(value)) {
+        return value
+            .map((item) => valueToText(item))
+            .filter(Boolean)
+            .join(", ");
+    }
+    if (typeof value === "object") {
+        const record = value;
+        if (typeof record.tag === "string") {
+            return record.tag.replace(/^#/, "");
+        }
+        if ("value" in record && record.value !== undefined) {
+            return valueToText(record.value);
+        }
+    }
+    const text = String(value);
+    return text.trim();
+}
+/** Renders a multi-value Bases field (tags, multitext) as string items. */
+export function valueToStrings(value) {
+    if (value === null || value === undefined)
+        return [];
+    if (typeof value === "object" && "value" in value)
+        return valueToStrings(value.value);
+    if (Array.isArray(value)) {
+        return value
+            .map((item) => valueToText(item))
+            .filter((text) => text.length > 0);
+    }
+    const text = valueToText(value);
+    return text.length > 0 ? [text] : [];
+}
+/** Converts Bases entry groups into ordered column sources. */
+export function rawGroupValue(value) {
+    if (value === null || value === undefined)
+        return null;
+    if (typeof value === "object" && "value" in value)
+        return rawGroupValue(value.value);
+    if (typeof value === "object" &&
+        "toISO" in value &&
+        typeof value.toISO === "function")
+        return value.toISO();
+    if (Array.isArray(value))
+        return value.map(rawGroupValue);
+    if (typeof value === "object") {
+        const text = valueToText(value);
+        return !text ? null : text === "[object Object]" ? value : text;
+    }
+    return value;
+}
+export function groupIdentity(property, value) {
+    return (encodeURIComponent(property) +
+        ":" +
+        encodeURIComponent(JSON.stringify(rawGroupValue(value)) ?? "null"));
+}
+export function toColumnSources(groups, groupProperty) {
+    return groups.map((group) => {
+        const keyText = valueToText(group.key ?? null);
+        return {
+            id: groupProperty
+                ? groupIdentity(groupProperty, group.key)
+                : keyText || UNGROUPED_COLUMN_ID,
+            label: keyText || UNGROUPED_COLUMN_LABEL,
+            groupValue: rawGroupValue(group.key),
+            entries: group.entries,
+        };
+    });
+}
+/** Applies the persisted column order, keeping unknown/new columns at the end. */
+export function applyColumnOrder(sources, columnOrder) {
+    if (!Array.isArray(columnOrder) || columnOrder.length === 0)
+        return sources;
+    const byId = new Map(sources.map((source) => [source.id, source]));
+    const ordered = [];
+    const seen = new Set();
+    for (const id of columnOrder) {
+        const source = byId.get(id) ?? sources.find((candidate) => candidate.label === id);
+        if (source && !seen.has(source.id)) {
+            ordered.push(source);
+            seen.add(source.id);
+        }
+    }
+    for (const source of sources) {
+        if (!seen.has(source.id))
+            ordered.push(source);
+    }
+    return ordered;
+}
+/** Formats a date (epoch ms, Date, ISO string) as card meta text (e.g. "Sep 12"). */
+export function formatDateText(value) {
+    const text = valueToText(value);
+    if (!text)
+        return "";
+    const parsed = /^\d{4}-\d{2}-\d{2}$/.test(text)
+        ? new Date(Number(text.slice(0, 4)), Number(text.slice(5, 7)) - 1, Number(text.slice(8, 10)))
+        : /^\d+$/.test(text)
+            ? new Date(Number(text))
+            : new Date(text);
+    return Number.isNaN(parsed.getTime())
+        ? text
+        : parsed.toLocaleDateString(undefined, { month: "short", day: "numeric" });
+}
+const ISO_DATE_PATTERN = /^\d{4}-\d{2}-\d{2}(?:[T ].*)?$/;
+/** Renders a display-property value, shortening ISO dates for the meta cells. */
+export function formatDisplayText(value) {
+    const text = valueToText(value);
+    return ISO_DATE_PATTERN.test(text) ? formatDateText(text) : text;
+}
+export function propertyText(value, type) {
+    if (type === "date" || type === "datetime")
+        return formatDateText(value);
+    return valueToText(value);
+}
+/** Maps one Bases entry onto kanban card data for a given lane colour. */
+export function toCardData(entry, color, fields) {
+    const title = valueToText(entry.getValue(fields.titleProperty)) || entry.file.basename;
+    const display = fields.displayProperties
+        .map((propertyId) => formatDisplayText(entry.getValue(propertyId)))
+        .filter((text) => text.length > 0);
+    const stat = entry.file.stat;
+    return {
+        id: entry.id,
+        title,
+        tabLabel: fields.chipProperty
+            ? propertyText(entry.getValue(fields.chipProperty), fields.propertyTypes?.[fields.chipProperty]) || title
+            : title,
+        color,
+        tags: valueToStrings(entry.getValue(fields.tagsProperty ?? "file.tags")),
+        summary: (fields.descriptionProperty
+            ? valueToText(entry.getValue(fields.descriptionProperty))
+            : "") ||
+            fields.summaries?.[entry.id] ||
+            "",
+        metadata: fields.displayProperties.map((id) => ({
+            id,
+            label: fields.propertyLabels?.[id] ?? id.replace(/^(note|file)\./, ""),
+            value: propertyText(entry.getValue(id), fields.propertyTypes?.[id]) || "—",
+        })),
+        badge: fields.badgeProperty &&
+            valueToText(entry.getValue(fields.badgeProperty)) !== ""
+            ? {
+                label: fields.badgeLabel?.trim() ||
+                    fields.propertyLabels?.[fields.badgeProperty] ||
+                    fields.badgeProperty.replace(/^(note|file)\./, ""),
+                value: propertyText(entry.getValue(fields.badgeProperty), fields.propertyTypes?.[fields.badgeProperty]),
+                color: fields.badgeColor || undefined,
+            }
+            : null,
+        createdAt: formatDateText(stat?.ctime ?? null),
+        updatedAt: formatDateText(stat?.mtime ?? null),
+        statusText: display[0] ?? "",
+        // Roll every remaining visible property into the second meta cell so
+        // adding a property to the view always surfaces on the card; "" keeps
+        // the family's legacy "No priority" placeholder from leaking through.
+        priorityText: display.slice(1).join(" · "),
+    };
+}
+/** Builds Design Core kanban columns (and the move-target value map). */
+export function buildKanbanColumns(input) {
+    const ordered = applyColumnOrder(toColumnSources(input.groups, input.groupProperty), input.columnOrder);
+    const groupValues = {};
+    const columns = ordered.map((source, index) => {
+        const meta = input.columnMeta[source.id] ?? input.columnMeta[source.label] ?? {};
+        const colorIndex = input.groupProperty
+            ? [...source.id].reduce((hash, character) => (Math.imul(hash, 31) + character.charCodeAt(0)) >>> 0, 0)
+            : index;
+        const color = meta.color ?? KANBAN_LANE_COLORS[colorIndex % KANBAN_LANE_COLORS.length];
+        groupValues[source.id] = source.groupValue;
+        return {
+            id: source.id,
+            label: meta.title?.trim() || source.label,
+            color,
+            primary: index === 0,
+            totalCount: input.columnTotals?.[source.id],
+            cards: source.entries.map((entry) => toCardData(entry, color, {
+                ...input,
+                titleProperty: input.titleProperty,
+                displayProperties: input.displayProperties,
+            })),
+        };
+    });
+    return { columns, groupValues };
+}

package/dist/bases-view/kanban-view/markdown-detail.svelte

@@ -0,0 +1,123 @@
+<script lang="ts">
+  import { untrack } from "svelte";
+  import type { App, TFile, MarkdownFileSurfaceHandle } from "@lapis-notes/api";
+  import { ScrollArea } from "@lapismd/design-core/shadcn/scroll-area";
+
+  let {
+    app,
+    file,
+    editing,
+    readOnly = false,
+    onEditingChange,
+  }: {
+    app: App;
+    file: TFile;
+    editing: boolean;
+    readOnly?: boolean;
+    onEditingChange: (editing: boolean) => void;
+  } = $props();
+  let container = $state<HTMLDivElement>();
+  let handle = $state<MarkdownFileSurfaceHandle | null>(null);
+  let error = $state("");
+  let pending: Promise<MarkdownFileSurfaceHandle> | null = null;
+  const sourcePath = $derived(file.path);
+
+  export async function flush(): Promise<boolean> {
+    const mounted = await pending;
+    return (await mounted?.flush()) ?? true;
+  }
+
+  $effect(() => {
+    if (!container || !app.markdownFileSurfaces.available) return;
+    const host = container;
+    const path = sourcePath;
+    const source = untrack(() => app.vault.getFileByPath(path) ?? file);
+    const owner = app;
+    const editable = !readOnly;
+    let cancelled = false;
+    error = "";
+    const mounted = Promise.resolve(
+      untrack(() =>
+        owner.markdownFileSurfaces.mount({
+          containerEl: host,
+          file: source,
+          editable,
+          activation: "click",
+          returnToPreviewOnBlur: true,
+          surface: { id: "bases-card-detail", context: { path: source.path } },
+          onEditingChange: (next) => onEditingChange(next),
+        }),
+      ),
+    );
+    pending = mounted;
+    void mounted
+      .then(async (surface) => {
+        if (cancelled) return;
+        handle = surface;
+      })
+      .catch((reason) => {
+        if (!cancelled)
+          error = reason instanceof Error ? reason.message : String(reason);
+      });
+    return () => {
+      cancelled = true;
+      handle = null;
+      void mounted
+        .then(async (surface) => {
+          await surface.flush();
+          await surface.dispose();
+        })
+        .catch(console.error);
+    };
+  });
+
+  $effect(() => {
+    const surface = handle;
+    if (!surface) return;
+    const shouldEdit = editing && !readOnly;
+    untrack(() => {
+      if (shouldEdit)
+        void Promise.resolve(surface.enter()).catch(
+          (reason) => (error = String(reason)),
+        );
+      else
+        void surface
+          .exit()
+          .then((saved) => {
+            if (!saved) onEditingChange(true);
+          })
+          .catch((reason) => (error = String(reason)));
+    });
+  });
+</script>
+
+{#if error}<p role="alert">{error}</p>{/if}
+{#if !app.markdownFileSurfaces.available}
+  <p role="status">Markdown preview is unavailable.</p>
+  <button type="button" onclick={() => app.openFile(file)}>Open file</button>
+{:else}
+  <ScrollArea class="bases-note-detail-scroll" orientation="vertical">
+    <div
+      bind:this={container}
+      class="bases-note-detail-surface"
+      data-ui-part="markdown-detail"
+      data-editing-requested={editing ? "true" : "false"}
+    ></div>
+  </ScrollArea>
+{/if}
+
+<style>
+  :global(.bases-note-detail-scroll) {
+    height: 28rem;
+    min-height: 0;
+  }
+  .bases-note-detail-surface {
+    --ui-markdown-file-surface-background: var(
+      --ui-kanban-detail-surface,
+      transparent
+    );
+    height: 100%;
+    min-height: 0;
+    min-width: 0;
+  }
+</style>