@lapis-notes/bases 0.2.1 → 0.3.0

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

@@ -0,0 +1,13 @@
+import type { App, TFile } from "@lapis-notes/api";
+type $$ComponentProps = {
+    app: App;
+    file: TFile;
+    editing: boolean;
+    readOnly?: boolean;
+    onEditingChange: (editing: boolean) => void;
+};
+declare const MarkdownDetail: import("svelte").Component<$$ComponentProps, {
+    flush: () => Promise<boolean>;
+}, "">;
+type MarkdownDetail = ReturnType<typeof MarkdownDetail>;
+export default MarkdownDetail;

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

@@ -0,0 +1,87 @@
+<script lang="ts">
+  import PropertyPicker from "../components/property-picker.svelte";
+  import * as Select from "@lapismd/design-core/shadcn/select";
+  import * as Field from "@lapismd/design-core/shadcn/field";
+  import type { QueryController } from "../bases.svelte";
+  import type { KanbanBasesView } from "./index";
+  import { applyColumnOrder, toColumnSources } from "./mapping";
+
+  let { controller }: { controller: QueryController } = $props();
+  const board = $derived(controller.view as KanbanBasesView);
+  const ready = $derived(typeof board.setGrouping === "function");
+  const columns = $derived(
+    applyColumnOrder(
+      toColumnSources(board.data.groupedData, board.data.groupBy ?? ""),
+      board.columnOrder,
+    ),
+  );
+  const anchor = $derived(
+    board.anchorColumnId === null
+      ? "__none__"
+      : (board.anchorColumnId ?? "__automatic__"),
+  );
+  const anchorLabel = $derived(
+    anchor === "__none__"
+      ? "None"
+      : anchor === "__automatic__"
+        ? "Automatic (first column)"
+        : (columns.find((column) => column.id === anchor)?.label ??
+          "Selected column unavailable"),
+  );
+</script>
+
+{#if ready}
+  <Field.Field class="bases-view-setting">
+    <Field.Label>Group by</Field.Label>
+    <PropertyPicker
+      label="Group by"
+      columns={controller.getAllColumns()}
+      value={board.data.groupBy}
+      placeholder="None"
+      onChange={(value) => board.setGrouping(value)}
+    />
+  </Field.Field>
+  {#if board.type === "kanban"}
+    <Field.Field class="bases-view-setting">
+      <Field.Label>Always-open column</Field.Label>
+      <Select.Root
+        type="single"
+        value={anchor}
+        onValueChange={(value) =>
+          board.setAnchorColumn(
+            value === "__automatic__"
+              ? undefined
+              : value === "__none__"
+                ? null
+                : value,
+          )}
+      >
+        <Select.Trigger
+          class="bases-board-setting-trigger"
+          aria-label="Always-open column">{anchorLabel}</Select.Trigger
+        >
+        <Select.Content
+          ><Select.Group>
+            <Select.Item
+              value="__automatic__"
+              label="Automatic (first column)"
+            />
+            <Select.Item value="__none__" label="None" />
+            {#each columns as column (column.id)}
+              <Select.Item
+                value={column.id}
+                label={board.columnMeta[column.id]?.title ?? column.label}
+              />
+            {/each}
+          </Select.Group></Select.Content
+        >
+      </Select.Root>
+    </Field.Field>
+  {/if}
+{/if}
+
+<style>
+  :global(.bases-board-setting-trigger) {
+    width: 100%;
+  }
+</style>

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

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

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

@@ -1,7 +1,9 @@
 <script lang="ts">
   import type { MetadataType } from "@lapis-notes/api";
   import ChevronDown from "@lucide/svelte/icons/chevron-down";
+  import Circle from "@lucide/svelte/icons/circle";
   import ChevronRight from "@lucide/svelte/icons/chevron-right";
+  import * as ScrollArea from "@lapismd/design-core/shadcn/scroll-area";
   import Cell from "../cell.svelte";
   import type { BasesView } from "../bases.svelte";
   import SummaryStrip from "../components/summary-strip.svelte";
@@ -25,11 +27,7 @@
         if (id.startsWith("note.")) {
           const key = id.substring(5);
           acc[id] = {
-            type: getMetadataTypeInfo(
-              key,
-              "text",
-              view.controller.app,
-            ).type,
+            type: getMetadataTypeInfo(key, "text", view.controller.app).type,
           };
         } else {
           acc[id] = { type: "text" };
@@ -40,17 +38,8 @@
     );
   });
   let visibleProperties = $derived(view.config.getOrder());
-  let showsFileIdentity = $derived.by(() => {
-    return visibleProperties.some((id) =>
-      [
-        "file",
-        "file.name",
-        "file.basename",
-        "file.file",
-        "file.fullname",
-      ].includes(id),
-    );
-  });
+  let primaryProperty = $derived(visibleProperties[0] ?? "file.name");
+  let secondaryProperties = $derived(visibleProperties.slice(1));
   let collapsedGroups = $state<Record<string, boolean>>({});
 
   function groupId(
@@ -80,77 +69,88 @@
 </script>
 
 <div
-  class="bases-card-grid bases-style-h-full-668b21 bases-style-overflow-auto-73fc3f bases-style-px-4-f0faeb bases-style-pb-10-cbd82b"
+  class="bases-card-grid bases-record-view bases-list"
   data-layout="list"
   data-ui-component="bases-list-view"
   data-ui-part="viewport"
 >
-  <SummaryStrip
-    {view}
-    class="bases-card-grid__summary sticky bases-style-top-0-216740 bases-style-z-20-145745 bases-style-border-b-65fdba bases-style-px-1-d8e0e3 bases-style-py-3-1b2d54 backdrop-blur"
-  />
-  {#each groups as group, index (index)}
-    {#if groupBy}
-      <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"
-          data-ui-part="group-toggle"
-          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" />
+  <SummaryStrip {view} class="bases-list__summary" />
+  <ScrollArea.Root
+    class="bases-record-view__scroll"
+    orientation="vertical"
+    type="always"
+    viewportProps={{ "aria-label": "Records" }}
+  >
+    <div class="bases-list__groups">
+      {#each groups as group, index (groupId(group, index))}
+        <section class="bases-list__group" data-grouped={Boolean(groupBy)}>
+          {#if groupBy}
+            <div class="bases-card-grid__group-header bases-list__group-header">
+              <button
+                type="button"
+                data-ui-part="group-toggle"
+                class="bases-list__group-toggle"
+                aria-expanded={!isCollapsed(group, index)}
+                onclick={() => toggleGroup(group, index)}
+              >
+                {#if isCollapsed(group, index)}<ChevronRight
+                  />{:else}<ChevronDown />{/if}
+                <span>{groupLabel}</span>
+                <span class="bases-card-grid__group-value"
+                  >{group.hasKey() ? group.key?.toString() : "Ungrouped"}</span
+                >
+                <span class="bases-list__count">{group.entries.length}</span>
+              </button>
+            </div>
           {/if}
-          <span>{groupLabel}</span>
-          <span class="bases-card-grid__group-value">
-            {#if group.hasKey()}
-              {group.key?.toString()}
-            {:else}
-              Ungrouped
-            {/if}
-          </span>
-        </button>
-      </div>
-    {/if}
-
-    {#if !isCollapsed(group, index)}
-      <ul class="bases-style-marker-text-muted-foreground-ff5bf1 bases-style-list-disc-1f33b4 bases-style-space-y-2-6f7e01 bases-style-py-3-1b2d54 bases-style-pl-6-9079b6">
-        {#each group.entries as row (row.id)}
-          <li
-            class="bases-style-text-card-foreground-0474d7 bases-style-text-sm-fc7473 bases-style-leading-6-18550d"
-            data-ui-part="row"
-          >
-            {#if !showsFileIdentity}
-              <span class="bases-style-font-medium-2689f3">{row.file.basename}</span>
-              {#if visibleProperties.length > 0}
-                <span class="bases-style-text-muted-foreground-bfa603">, </span>
-              {/if}
-            {/if}
-
-            {#each visibleProperties as id, index (id)}
-              <span class="bases-style-inline-block-bb0c4b bases-style-align-baseline-8d378d">
-                <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-inline-block-bb0c4b bases-style-h-auto-b8f0a0 bases-style-w-auto-23e1f6 bases-style-align-baseline-8d378d"
-                />
-              </span>
-              {#if index < visibleProperties.length - 1}
-                <span class="bases-style-text-muted-foreground-bfa603">, </span>
-              {/if}
-            {/each}
-          </li>
-        {/each}
-      </ul>
-    {/if}
-  {/each}
+          {#if !isCollapsed(group, index)}
+            <ul class="bases-list__records">
+              {#each group.entries as row (row.id)}
+                <li class="bases-list__record" data-ui-part="row">
+                  {#if groupBy}<Circle
+                      class="bases-list__bullet"
+                      data-ui-part="record-bullet"
+                      aria-hidden="true"
+                    />{/if}
+                  <div class="bases-list__record-content">
+                    <div class="bases-list__identity">
+                      <Cell
+                        app={view.controller.app}
+                        name={primaryProperty}
+                        label={view.config.getDisplayName(primaryProperty)}
+                        file={row.file}
+                        readOnly={view.controller.readOnly}
+                        type={types[primaryProperty]?.type}
+                        value={row.getValue(primaryProperty)}
+                        editOnActivation
+                      />
+                    </div>
+                    <dl class="bases-list__properties">
+                      {#each secondaryProperties as id (id)}
+                        <div class="bases-list__property">
+                          <dt>{view.config.getDisplayName(id)}</dt>
+                          <dd>
+                            <Cell
+                              app={view.controller.app}
+                              name={id}
+                              label={view.config.getDisplayName(id)}
+                              file={row.file}
+                              readOnly={view.controller.readOnly}
+                              type={types[id]?.type}
+                              value={row.getValue(id)}
+                              editOnActivation
+                            />
+                          </dd>
+                        </div>
+                      {/each}
+                    </dl>
+                  </div>
+                </li>
+              {/each}
+            </ul>
+          {/if}
+        </section>
+      {/each}
+    </div>
+  </ScrollArea.Root>
 </div>

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

@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { BasesView } from "../bases.svelte";
+  import * as ScrollArea from "@lapismd/design-core/shadcn/scroll-area";
   import SummaryStrip from "../components/summary-strip.svelte";
 
   let {
@@ -10,11 +11,13 @@
 </script>
 
 <div
-  class="bases-style-flex-60fbb7 bases-style-h-full-668b21 bases-style-flex-col-8dddea bases-style-gap-3-1004c0 bases-style-border-t-b950dd bases-style-px-4-f0faeb bases-style-py-5-c9b99c bases-style-text-sm-fc7473"
+  class="bases-record-view"
   data-layout="map"
   data-ui-component="bases-map-view"
   data-ui-part="unavailable"
 >
+  <ScrollArea.Root class="bases-record-view__scroll" viewportProps={{ "aria-label": "Map view information" }}>
+  <div class="bases-map-view__content">
   <SummaryStrip {view} />
   <div class="bases-style-font-medium-2689f3">Map view is not available in this runtime yet.</div>
   <p class="bases-style-text-muted-foreground-bfa603">
@@ -25,4 +28,6 @@
   <p class="bases-style-text-muted-foreground-bfa603">
     Current result count: {view.data.data.length}
   </p>
+  </div>
+  </ScrollArea.Root>
 </div>

package/dist/bases-view/metadata-invalidation-core.d.ts

@@ -13,6 +13,7 @@ export type MetadataDependencySet = {
 type MetadataDependencyInput = {
     documentFilter: Filters;
     viewFilter: Filters | undefined;
+    additionalFilters?: Filters[];
     order: BasesPropertyId[];
     sort: SortColumn[];
     groupByProperty?: BasesPropertyId | null;

package/dist/bases-view/metadata-invalidation-core.js

@@ -27,8 +27,7 @@ function trackPropertyDependency(dependencies, propertyId) {
         dependencies.tags = true;
         return;
     }
-    if (propertyId === "file.links" ||
-        propertyId === "file.embeds") {
+    if (propertyId === "file.links" || propertyId === "file.embeds") {
         dependencies.links = true;
         return;
     }
@@ -107,6 +106,8 @@ export function collectMetadataDependencies(input) {
     const dependencies = createMetadataDependencySet();
     collectFilterDependencies(dependencies, input.documentFilter);
     collectFilterDependencies(dependencies, input.viewFilter);
+    for (const filter of input.additionalFilters ?? [])
+        collectFilterDependencies(dependencies, filter);
     for (const propertyId of input.order) {
         trackPropertyDependency(dependencies, propertyId);
     }

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

@@ -52,6 +52,8 @@ export interface BasesViewMap {
     table: TableView;
     cards: CardsView;
     list: ListView;
+    kanban: KanbanBasesViewDocument;
+    activity: ActivityBasesViewDocument;
     map: MapView;
 }
 export type BasesViewType = keyof BasesViewMap;
@@ -66,6 +68,30 @@ export interface TableView extends BasesView<"table"> {
 }
 export interface ListView extends BasesView<"list"> {
 }
+export interface MarkdownCardViewOptions {
+    chipProperty?: string;
+    /** Optional title property id used for card titles. */
+    titleProperty?: string;
+    descriptionProperty?: string;
+    tagsProperty?: string;
+    badgeProperty?: string;
+    badgeLabel?: string;
+    badgeColor?: string;
+    anchorColumnId?: string | null;
+    columnFilters?: Record<string, Filters>;
+    /** Persisted lane order for the reorderable columns. */
+    columnOrder?: string[];
+    /** Persisted per-lane title/colour overrides keyed by column id. */
+    columnMeta?: Record<string, {
+        title?: string;
+        color?: string;
+    }>;
+}
+export interface KanbanBasesViewDocument extends BasesView<"kanban">, MarkdownCardViewOptions {
+}
+export interface ActivityBasesViewDocument extends BasesView<"activity">, MarkdownCardViewOptions {
+    dateProperty?: string;
+}
 export interface CardsView extends BasesView<"cards"> {
     cardSize?: number;
     image?: string;

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

@@ -1,11 +1,18 @@
 <script lang="ts">
+  import LayoutTemplate from "@lucide/svelte/icons/layout-template";
+  import * as Empty from "@lapismd/design-core/shadcn/empty";
+  import * as ScrollArea from "@lapismd/design-core/shadcn/scroll-area";
   let { type }: { type: string } = $props();
 </script>
 
-<div
-  class="bases-view bases-error bases-style-w-full-6da6a3 bases-style-border-t-b950dd bases-style-px-2-d5eab2 bases-style-py-1-660d2e bases-style-text-sm-fc7473"
-  data-ui-component="bases-unknown-view"
-  data-ui-part="fallback"
->
-  <p>Base configured with an unknown view type: {type}</p>
+<div class="bases-record-view" data-ui-component="bases-unknown-view" data-ui-part="fallback">
+  <ScrollArea.Root class="bases-record-view__scroll" fillContent viewportProps={{ "aria-label": "Unsupported view" }}>
+    <Empty.Root class="bases-unknown-view__empty">
+      <Empty.Header>
+        <Empty.Media variant="icon"><LayoutTemplate /></Empty.Media>
+        <Empty.Title>Unsupported view</Empty.Title>
+        <Empty.Description>The configured view type <strong>{type}</strong> is not available. Choose another layout from the view menu.</Empty.Description>
+      </Empty.Header>
+    </Empty.Root>
+  </ScrollArea.Root>
 </div>

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

@@ -60,7 +60,9 @@
   data-ui-component="bases-toolbar"
   data-ui-part="root"
 >
-  <div class="bases-style-flex-60fbb7 bases-style-flex-wrap-1eb5c6 bases-style-gap-1-44ee8b">
+  <div
+    class="bases-style-flex-60fbb7 bases-style-flex-wrap-1eb5c6 bases-style-gap-1-44ee8b"
+  >
     <Views
       bind:show
       {controller}
@@ -83,7 +85,9 @@
       onExportCsv={exportCsv}
     />
   </div>
-  <div class="bases-style-flex-60fbb7 bases-style-flex-wrap-1eb5c6 bases-style-gap-1-44ee8b">
+  <div
+    class="bases-view__toolbar-controls bases-style-flex-60fbb7 bases-style-flex-wrap-1eb5c6 bases-style-gap-1-44ee8b"
+  >
     <Button
       variant="outline"
       size="sm"
@@ -97,6 +101,9 @@
       <span>Search</span>
     </Button>
     <Sort
+      showGrouping={!["kanban", "activity"].includes(
+        controller.selectedView.type,
+      )}
       bind:orderBy={
         () => controller.selectedView.sort,
         (orderBy) => (controller.selectedView.sort = orderBy)
@@ -134,9 +141,16 @@
       }
       {controller}
     />
-    <Button variant="outline" size="sm" class="bases-style-h-8-ed8a5d" onclick={createFile}>
-      <Plus />
-      <span>New</span>
-    </Button>
+    {#if !controller.readOnly}
+      <Button
+        variant="outline"
+        size="sm"
+        class="bases-style-h-8-ed8a5d"
+        onclick={createFile}
+      >
+        <Plus />
+        <span>New</span>
+      </Button>
+    {/if}
   </div>
 </div>

package/dist/bases-view/view-registration-inventory.d.ts

@@ -14,6 +14,14 @@ export declare const BUILT_IN_BASES_VIEW_ITEMS: readonly [{
     readonly id: "list";
     readonly name: "List";
     readonly icon: "lucide-list";
+}, {
+    readonly id: "kanban";
+    readonly name: "Kanban";
+    readonly icon: "lucide-kanban";
+}, {
+    readonly id: "activity";
+    readonly name: "Activity";
+    readonly icon: "lucide-activity";
 }, {
     readonly id: "map";
     readonly name: "Map";

package/dist/bases-view/view-registration-inventory.js

@@ -3,5 +3,7 @@ export const BUILT_IN_BASES_VIEW_ITEMS = [
     { id: "unknown", name: "Unknown", icon: "lucide-file" },
     { id: "cards", name: "Cards", icon: "lucide-layout-grid" },
     { id: "list", name: "List", icon: "lucide-list" },
+    { id: "kanban", name: "Kanban", icon: "lucide-kanban" },
+    { id: "activity", name: "Activity", icon: "lucide-activity" },
     { id: "map", name: "Map", icon: "lucide-map" },
 ];