@lapis-notes/bases 0.2.1 → 0.3.0

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

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import * as Alert from "@lapismd/design-core/shadcn/alert";
+  import CircleAlert from "@lucide/svelte/icons/circle-alert";
+
+  let { message }: { message: string } = $props();
+</script>
+
+<div class="bases-view-error-container">
+  <Alert.Root variant="destructive" class="bases-view-error">
+    <CircleAlert aria-hidden="true" />
+    <Alert.Title>Unable to render base</Alert.Title>
+    <Alert.Description>
+      <p class="bases-view-error__message">{message}</p>
+    </Alert.Description>
+  </Alert.Root>
+</div>
+
+<style>
+  .bases-view-error-container {
+    margin: 1rem;
+  }
+  .bases-view-error__message {
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+  }
+</style>

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

@@ -0,0 +1,6 @@
+type $$ComponentProps = {
+    message: string;
+};
+declare const BasesError: import("svelte").Component<$$ComponentProps, {}, "">;
+type BasesError = ReturnType<typeof BasesError>;
+export default BasesError;

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

@@ -4,8 +4,10 @@
 
   let {
     value,
+    label,
   }: {
     value: number | DateTime | string;
+    label: string;
   } = $props();
 
   let date = $derived.by(() => {
@@ -26,6 +28,7 @@
 
 <div class="bases-table-cell bases-rendered-value">
   <input
+    aria-label={label}
     class="metadata-input metadata-input-text mod-datetime !static !ps-0"
     value={date}
     step="any"

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

@@ -1,6 +1,7 @@
 import { DateTime } from "luxon";
 type $$ComponentProps = {
     value: number | DateTime | string;
+    label: string;
 };
 declare const Datetime: import("svelte").Component<$$ComponentProps, {}, "">;
 type Datetime = ReturnType<typeof Datetime>;

package/dist/bases-view/components/file-preview.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+  import { untrack } from "svelte";
+  import type { App, TFile } from "@lapis-notes/api";
+  import { ScrollArea } from "@lapismd/design-core/shadcn/scroll-area";
+
+  let { app, file }: { app: App; file: TFile } = $props();
+  let container = $state<HTMLDivElement>();
+  let error = $state("");
+
+  $effect(() => {
+    if (!container) return;
+    const owner = app;
+    const source = file;
+    const host = container;
+    error = "";
+    let cancelled = false;
+    // Defer invocation so synchronous and asynchronous provider errors share
+    // the same fallback and late mounts still get disposed after dismissal.
+    const mounted = Promise.resolve().then(() =>
+      untrack(() =>
+        owner.markdownFileSurfaces.mount({
+          containerEl: host,
+          file: source,
+          editable: false,
+          surface: {
+            id: "bases-file-link-preview",
+            context: { path: source.path },
+          },
+        }),
+      ),
+    );
+    void mounted.catch((reason) => {
+      if (!cancelled)
+        error = reason instanceof Error ? reason.message : String(reason);
+    });
+    return () => {
+      cancelled = true;
+      void mounted
+        .then(
+          (surface) => surface.dispose(),
+          () => undefined,
+        )
+        .catch(console.error);
+    };
+  });
+</script>
+
+<section
+  aria-label={`Preview of ${file.name}`}
+  data-ui-component="bases-file-preview"
+>
+  <div class="bases-file-preview__title">{file.name}</div>
+  <ScrollArea class="bases-file-preview__scroll" orientation="vertical">
+    {#if error}<p role="status">Preview unavailable: {error}</p>{/if}
+    <div bind:this={container} class="bases-file-preview__surface"></div>
+  </ScrollArea>
+</section>

package/dist/bases-view/components/file-preview.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { App, TFile } from "@lapis-notes/api";
+type $$ComponentProps = {
+    app: App;
+    file: TFile;
+};
+declare const FilePreview: import("svelte").Component<$$ComponentProps, {}, "">;
+type FilePreview = ReturnType<typeof FilePreview>;
+export default FilePreview;

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

@@ -1,5 +1,7 @@
 <script lang="ts">
   import type { App, TFile } from "@lapis-notes/api";
+  import * as HoverCard from "@lapismd/design-core/shadcn/hover-card";
+  import FilePreview from "./file-preview.svelte";
   let {
     app,
     file,
@@ -7,8 +9,14 @@
     app: App;
     file: TFile;
   } = $props();
+  let open = $state(false);
+  const previewable = $derived(
+    ["md", "markdown"].includes(file.extension.toLowerCase()) &&
+      app.markdownFileSurfaces.available,
+  );
 
   function openFile(evt: MouseEvent) {
+    open = false;
     if (evt.metaKey || evt.ctrlKey) {
       const leaf = app.workspace.getLeaf("tab");
       leaf.openFile(file).then(() => {
@@ -24,8 +32,17 @@
   }
 </script>
 
-<a
-  href="#/"
-  class="bases-style-text-var-text-accent-69c994 underline"
-  onclick={(evt) => openFile(evt)}>{file.name}</a
->
+{#if previewable}
+  <HoverCard.Root bind:open openDelay={350} closeDelay={150}>
+    <HoverCard.Trigger href="#/" onclick={openFile}>
+      {#snippet child({ props })}
+        <a {...props} role="link" class="bases-file-link">{file.name}</a>
+      {/snippet}
+    </HoverCard.Trigger>
+    <HoverCard.Content class="bases-file-preview" align="start">
+      <FilePreview {app} {file} />
+    </HoverCard.Content>
+  </HoverCard.Root>
+{:else}
+  <a href="#/" class="bases-file-link" onclick={openFile}>{file.name}</a>
+{/if}

package/dist/bases-view/components/property-picker.svelte

@@ -0,0 +1,147 @@
+<script lang="ts">
+  import { tick } from "svelte";
+  import { Icon } from "@lapis-notes/api/icon";
+  import type { BasesPropertyId } from "@lapis-notes/api";
+  import { Button } from "@lapismd/design-core/shadcn/button";
+  import * as Popover from "@lapismd/design-core/shadcn/popover";
+  import * as Command from "@lapismd/design-core/shadcn/command";
+  import ArrowUpDown from "@lucide/svelte/icons/chevrons-up-down";
+  import X from "@lucide/svelte/icons/x";
+  import Check from "@lucide/svelte/icons/check";
+  import type { ColumnDefinition } from "../columns";
+
+  let {
+    id,
+    label,
+    columns,
+    value,
+    placeholder = "Property",
+    onChange,
+  }: {
+    id?: string;
+    label: string;
+    columns: ColumnDefinition[];
+    value?: BasesPropertyId | null;
+    placeholder?: string;
+    onChange: (value: BasesPropertyId | "") => void;
+  } = $props();
+  let open = $state(false);
+  let trigger = $state<HTMLButtonElement>(null!);
+  const selected = $derived(columns.find((column) => column.id === value));
+  const listId = $props.id();
+  async function choose(next: BasesPropertyId | "") {
+    onChange(next);
+    open = false;
+    await tick();
+    trigger?.focus();
+  }
+</script>
+
+<div class="bases-property-setting">
+  <Popover.Root bind:open>
+    <Popover.Trigger>
+      {#snippet child({ props })}
+        <Button
+          {...props}
+          bind:ref={trigger}
+          {id}
+          variant="outline"
+          role="combobox"
+          aria-label={label}
+          aria-expanded={open}
+          class="bases-property-setting__trigger"
+        >
+          <Icon name={selected?.icon ?? "lucide-file"} />
+          <span>{selected?.displayName ?? placeholder}</span>
+          <ArrowUpDown />
+        </Button>
+      {/snippet}
+    </Popover.Trigger>
+    <Popover.Content
+      class="bases-style-w-310px-8357f2 bases-style-p-0-8a539c"
+      align="start"
+    >
+      <Command.Root label="Find property">
+        <Command.Input
+          aria-label="Find property"
+          aria-controls={listId}
+          placeholder="Find property"
+        />
+        <Command.List id={listId}>
+          <Command.Empty>No properties found.</Command.Empty>
+          <Command.Group>
+            {#each columns as column (column.id)}
+              <Command.Item
+                class="bases-property-setting-option"
+                value={`${column.displayName} ${column.id}`}
+                onSelect={() => choose(column.id)}
+              >
+                <span
+                  class="bases-property-setting__check"
+                  class:is-selected={value === column.id}><Check /></span
+                >
+                <Icon name={column.icon ?? "lucide-info"} />
+                <span>{column.displayName}</span>
+                <span class="bases-property-setting__id">{column.id}</span>
+              </Command.Item>
+            {/each}
+          </Command.Group>
+        </Command.List>
+      </Command.Root>
+    </Popover.Content>
+  </Popover.Root>
+  {#if value}
+    <Button
+      variant="ghost"
+      size="icon-xs"
+      class="bases-property-setting__clear"
+      aria-label={`Clear ${label.toLowerCase()}`}
+      onclick={() => choose("")}><X /></Button
+    >
+  {/if}
+</div>
+
+<style>
+  .bases-property-setting {
+    position: relative;
+    min-width: 0;
+    width: 100%;
+  }
+  .bases-property-setting :global(.bases-property-setting__trigger) {
+    width: 100%;
+    justify-content: space-between;
+    padding-inline-end: 0.75rem;
+  }
+  .bases-property-setting :global(.bases-property-setting__trigger > span) {
+    min-width: 0;
+    flex: 1;
+    text-align: left;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    padding-inline-end: 1.5rem;
+  }
+  .bases-property-setting :global(.bases-property-setting__clear) {
+    position: absolute;
+    inset-inline-end: 1.65rem;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+  .bases-property-setting__check {
+    visibility: hidden;
+  }
+  .bases-property-setting__check.is-selected {
+    visibility: visible;
+  }
+  .bases-property-setting__id {
+    margin-inline-start: auto;
+    color: var(--ui-workspace-muted-foreground);
+    font-size: 0.75rem;
+  }
+  /* The leading check reflects the saved mapping, independently of search focus. */
+  :global(
+      .bases-property-setting-option > [data-ui-part="command-check-icon"]
+    ) {
+    display: none;
+  }
+</style>

package/dist/bases-view/components/property-picker.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { BasesPropertyId } from "@lapis-notes/api";
+import type { ColumnDefinition } from "../columns";
+type $$ComponentProps = {
+    id?: string;
+    label: string;
+    columns: ColumnDefinition[];
+    value?: BasesPropertyId | null;
+    placeholder?: string;
+    onChange: (value: BasesPropertyId | "") => void;
+};
+declare const PropertyPicker: import("svelte").Component<$$ComponentProps, {}, "">;
+type PropertyPicker = ReturnType<typeof PropertyPicker>;
+export default PropertyPicker;

package/dist/bases-view/components/sort/sort-root.svelte

@@ -21,12 +21,14 @@
   import { getSortDirectionLabels } from "./sort-direction-labels";
 
   let {
+    showGrouping = true,
     class: className,
     orderBy = $bindable(),
     table,
     controller = table as QueryController,
   }: {
     orderBy: Array<SortColumn>;
+    showGrouping?: boolean;
     class?: string;
     controller?: QueryController;
     table?: any;
@@ -106,7 +108,10 @@
         {...props}
         variant="outline"
         size="sm"
-        class={cn("bases-style-h-8-ed8a5d bases-style-border-dashed-a29b7a", className)}
+        class={cn(
+          "bases-style-h-8-ed8a5d bases-style-border-dashed-a29b7a",
+          className,
+        )}
       >
         <SortIcon /> Sort
       </Button>
@@ -117,99 +122,113 @@
     data-bases-popover="sort"
     align="start"
   >
-    <div class="bases-style-mb-2-a77ed4 bases-style-grid-f3c543 bases-style-gap-2-77a2a2">
+    {#if showGrouping}
       <div
-        class="bases-style-text-muted-foreground-bfa603 bases-style-px-1-d8e0e3 bases-style-text-xs-359090 bases-style-font-semibold-e83a70 bases-style-tracking-0-18em-a82f6f uppercase"
+        class="bases-style-mb-2-a77ed4 bases-style-grid-f3c543 bases-style-gap-2-77a2a2"
       >
-        Group by
-      </div>
-      <div class="bases-style-flex-60fbb7 bases-style-h-9-e7a768 bases-style-items-center-3960ff bases-style-rounded-md-421ac2 bases-style-border-2-65935d">
-        <Popover.Root>
-          <Popover.Trigger>
-            {#snippet child({ props }: { props: Record<string, any> })}
-              <Button
-                {...props}
-                variant="outline"
-                size="sm"
-                class="bases-style-h-8-ed8a5d grow bases-style-rounded-none-0c5e91 bases-style-rounded-l-md-9b2e91 bases-style-border-none-4a5f0e bases-style-shadow-none-ad47d1 bases-style-outline-none-df37b1"
-              >
-                {#if selectedGroupColumn}
-                  <Icon name={[selectedGroupColumn.icon ?? "lucide-file"]} />
-                  {selectedGroupColumn.displayName}
-                {:else}
-                  <span class="bases-style-opacity-50-0b8c50">Property</span>
-                {/if}
-                <SortIcon />
-              </Button>
-            {/snippet}
-          </Popover.Trigger>
-          <Popover.Content class="bases-style-w-max-2f935d bases-style-p-0-8a539c" align="start">
-            <Command.Root>
-              <Command.Input aria-controls={commandListId} placeholder="Group by property" />
-              <Command.List id={commandListId} class="bases-style-p-1-eb6a3c">
-                <Command.Empty>No results found.</Command.Empty>
-                {#each controller.getAllColumns() as column (column.id)}
-                  <Command.Item onSelect={() => setGroupBy(column.id)}>
-                    <div
-                      data-ui-part="bases-option-indicator"
-                      data-selected={groupBy?.property === column.id}
-                      class={cn(
-                        "bases-style-mr-2-d2347e bases-style-flex-60fbb7 bases-style-size-4-f7b5fa bases-style-items-center-3960ff bases-style-justify-center-86843c bases-style-rounded-sm-36d446 border bases-style-border-var-interactive-accent-f46c93",
-                        groupBy?.property === column.id
-                          ? "bases-style-ring-ring-3e1868 bases-style-border-none-4a5f0e bases-style-bg-var-interactive-accent-c58cc0 bases-style-text-var-text-on-accent-22b2b1 hover:ring"
-                          : "bases-style-opacity-50-0b8c50 [&_svg]:invisible",
-                      )}
-                    >
-                      <CheckIcon class="bases-style-size-4-f7b5fa" />
-                    </div>
-                    <Icon name={[column.icon ?? "lucide-info"]} />
-                    <span class="bases-style-overflow-hidden-2cd02d bases-style-text-ellipsis-6e2e11"
-                      >{column.displayName}</span
-                    >
-                    {#if !column.id.startsWith("note.")}
-                      <Command.Shortcut class="bases-style-font-mono-0e6570 bases-style-text-0-75em-c425cc"
-                        >{column.id}</Command.Shortcut
-                      >
-                    {/if}
-                  </Command.Item>
-                {/each}
-              </Command.List>
-            </Command.Root>
-          </Popover.Content>
-        </Popover.Root>
-        <Select.Root
-          type="single"
-          bind:value={getGroupDirection, setGroupDirection}
+        <div
+          class="bases-style-text-muted-foreground-bfa603 bases-style-px-1-d8e0e3 bases-style-text-xs-359090 bases-style-font-semibold-e83a70 bases-style-tracking-0-18em-a82f6f uppercase"
         >
-          <Select.Trigger
-            aria-label="Group sort direction"
+          Group by
+        </div>
+        <div
+          class="bases-style-flex-60fbb7 bases-style-h-9-e7a768 bases-style-items-center-3960ff bases-style-rounded-md-421ac2 bases-style-border-2-65935d"
+        >
+          <Popover.Root>
+            <Popover.Trigger>
+              {#snippet child({ props }: { props: Record<string, any> })}
+                <Button
+                  {...props}
+                  variant="outline"
+                  size="sm"
+                  class="bases-style-h-8-ed8a5d grow bases-style-rounded-none-0c5e91 bases-style-rounded-l-md-9b2e91 bases-style-border-none-4a5f0e bases-style-shadow-none-ad47d1 bases-style-outline-none-df37b1"
+                >
+                  {#if selectedGroupColumn}
+                    <Icon name={[selectedGroupColumn.icon ?? "lucide-file"]} />
+                    {selectedGroupColumn.displayName}
+                  {:else}
+                    <span class="bases-style-opacity-50-0b8c50">Property</span>
+                  {/if}
+                  <SortIcon />
+                </Button>
+              {/snippet}
+            </Popover.Trigger>
+            <Popover.Content
+              class="bases-style-w-max-2f935d bases-style-p-0-8a539c"
+              align="start"
+            >
+              <Command.Root>
+                <Command.Input
+                  aria-controls={commandListId}
+                  placeholder="Group by property"
+                />
+                <Command.List id={commandListId} class="bases-style-p-1-eb6a3c">
+                  <Command.Empty>No results found.</Command.Empty>
+                  {#each controller.getAllColumns() as column (column.id)}
+                    <Command.Item onSelect={() => setGroupBy(column.id)}>
+                      <div
+                        data-ui-part="bases-option-indicator"
+                        data-selected={groupBy?.property === column.id}
+                        class={cn(
+                          "bases-style-mr-2-d2347e bases-style-flex-60fbb7 bases-style-size-4-f7b5fa bases-style-items-center-3960ff bases-style-justify-center-86843c bases-style-rounded-sm-36d446 border bases-style-border-var-interactive-accent-f46c93",
+                          groupBy?.property === column.id
+                            ? "bases-style-ring-ring-3e1868 bases-style-border-none-4a5f0e bases-style-bg-var-interactive-accent-c58cc0 bases-style-text-var-text-on-accent-22b2b1 hover:ring"
+                            : "bases-style-opacity-50-0b8c50 [&_svg]:invisible",
+                        )}
+                      >
+                        <CheckIcon class="bases-style-size-4-f7b5fa" />
+                      </div>
+                      <Icon name={[column.icon ?? "lucide-info"]} />
+                      <span
+                        class="bases-style-overflow-hidden-2cd02d bases-style-text-ellipsis-6e2e11"
+                        >{column.displayName}</span
+                      >
+                      {#if !column.id.startsWith("note.")}
+                        <Command.Shortcut
+                          class="bases-style-font-mono-0e6570 bases-style-text-0-75em-c425cc"
+                          >{column.id}</Command.Shortcut
+                        >
+                      {/if}
+                    </Command.Item>
+                  {/each}
+                </Command.List>
+              </Command.Root>
+            </Popover.Content>
+          </Popover.Root>
+          <Select.Root
+            type="single"
+            bind:value={getGroupDirection, setGroupDirection}
+          >
+            <Select.Trigger
+              aria-label="Group sort direction"
+              size="sm"
+              class="bases-style-bg-background-e6f9e3 bases-style-h-8-ed8a5d bases-style-rounded-none-0c5e91 bases-style-border-none-4a5f0e bases-style-shadow-none-ad47d1 bases-style-outline-none-df37b1"
+            >
+              {groupDirectionLabel}
+              <SortIcon />
+            </Select.Trigger>
+            <Select.Content>
+              {#each groupDirections as direction (direction.value)}
+                <Select.Item value={direction.value} label={direction.label}
+                  >{direction.label}</Select.Item
+                >
+              {/each}
+            </Select.Content>
+          </Select.Root>
+          <Button
+            variant="ghost"
             size="sm"
-            class="bases-style-bg-background-e6f9e3 bases-style-h-8-ed8a5d bases-style-rounded-none-0c5e91 bases-style-border-none-4a5f0e bases-style-shadow-none-ad47d1 bases-style-outline-none-df37b1"
+            aria-label="Clear grouping"
+            class="bases-style-bg-background-e6f9e3 bases-style-h-8-ed8a5d bases-style-rounded-none-0c5e91 bases-style-rounded-r-md-d4eb07 bases-style-border-none-4a5f0e bases-style-shadow-none-ad47d1 bases-style-outline-none-df37b1"
+            disabled={!selectedGroupColumn}
+            onclick={() => (controller.selectedView.groupBy = undefined)}
           >
-            {groupDirectionLabel}
-            <SortIcon />
-          </Select.Trigger>
-          <Select.Content>
-            {#each groupDirections as direction (direction.value)}
-              <Select.Item value={direction.value} label={direction.label}
-                >{direction.label}</Select.Item
-              >
-            {/each}
-          </Select.Content>
-        </Select.Root>
-        <Button
-          variant="ghost"
-          size="sm"
-          aria-label="Clear grouping"
-          class="bases-style-bg-background-e6f9e3 bases-style-h-8-ed8a5d bases-style-rounded-none-0c5e91 bases-style-rounded-r-md-d4eb07 bases-style-border-none-4a5f0e bases-style-shadow-none-ad47d1 bases-style-outline-none-df37b1"
-          disabled={!selectedGroupColumn}
-          onclick={() => (controller.selectedView.groupBy = undefined)}
-        >
-          <Trash />
-        </Button>
+            <Trash />
+          </Button>
+        </div>
       </div>
-    </div>
-    <div class="bases-style-mb-2-a77ed4 bases-style-border-t-b950dd"></div>
+      <div class="bases-style-mb-2-a77ed4 bases-style-border-t-b950dd"></div>
+    {/if}
     <div
       class="bases-style-text-muted-foreground-bfa603 bases-style-mb-2-a77ed4 bases-style-px-1-d8e0e3 bases-style-text-xs-359090 bases-style-font-semibold-e83a70 bases-style-tracking-0-18em-a82f6f uppercase"
     >

package/dist/bases-view/components/sort/sort-root.svelte.d.ts

@@ -2,6 +2,7 @@ import type { SortColumn } from "../..";
 import type { QueryController } from "../../bases.svelte";
 type $$ComponentProps = {
     orderBy: Array<SortColumn>;
+    showGrouping?: boolean;
     class?: string;
     controller?: QueryController;
     table?: any;