@lapis-notes/bases 0.1.3 → 0.2.0

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # Bases changelog
 
+## 0.2.0
+
+### Minor Changes
+
+- [#28](https://github.com/lapismd/lapis-plugins/pull/28) [`964ecbb`](https://github.com/lapismd/lapis-plugins/commit/964ecbb28d31430028eb9aaaa826e51711c9a5f5) Thanks [@stevejuma](https://github.com/stevejuma)! - Contribute the Bases file icon for .base and .bases files through the public Plugin.registerIcon lifecycle and editor-view metadata.
+
+  Before publication, raise the API peer minimum to the release containing the file-icon contract. Development qualification uses its explicitly checksummed public archive.
+
+### Patch Changes
+
+- [#28](https://github.com/lapismd/lapis-plugins/pull/28) [`d27467e`](https://github.com/lapismd/lapis-plugins/commit/d27467ee80c273011b7eb6ae792fa8e0330a11c1) Thanks [@stevejuma](https://github.com/stevejuma)! - Align shared presentation dependencies with the Design Core 0.6 public boundary used by current Notes hosts.
+
+- [#28](https://github.com/lapismd/lapis-plugins/pull/28) [`75be47e`](https://github.com/lapismd/lapis-plugins/commit/75be47e24af491ffc0226e923ea79825493e31c4) Thanks [@stevejuma](https://github.com/stevejuma)! - Name filter, grouping, sorting, summary and view-settings comboboxes explicitly
+  for assistive technology, including the selected property in operator and sort
+  direction names.
+
+- [#28](https://github.com/lapismd/lapis-plugins/pull/28) [`56b5d6c`](https://github.com/lapismd/lapis-plugins/commit/56b5d6c1a016ef9bca43703b5fecf57f8234d1af) Thanks [@stevejuma](https://github.com/stevejuma)! - Consume published Design Core 0.4.0 with prepared browser CSS and bundled font assets through normal npm ranges.
+
+  Restore Bases picker input/list accessibility relationships and name property actions.
+
+- [#28](https://github.com/lapismd/lapis-plugins/pull/28) [`c9febb1`](https://github.com/lapismd/lapis-plugins/commit/c9febb1c8b431db30ecdcf7507cfff8f727bc4ed) Thanks [@stevejuma](https://github.com/stevejuma)! - Consume the published Notes next packages, Mira 0.1.4, and Design Core 0.7.4. The semver floors require those published versions. Markdown dependents accept ^0.2.0. History keeps its public repository entrypoints, and Bases keeps the file-icon contract on API 0.2.0.
+
+## 0.1.4
+
+### Patch Changes
+
+- Restore property-picker accessibility with unique search/result associations, named independent visibility/edit controls in grid rows, and readable hidden-property labels. Preserve keyboard activation without toggling visibility while opening an editor.
+
+- [#16](https://github.com/lapismd/lapis-plugins/pull/16) [`a6f080e`](https://github.com/lapismd/lapis-plugins/commit/a6f080e9e09197dc883968bbd8e15cbec55a6b8e) Thanks [@stevejuma](https://github.com/stevejuma)! - Preserve theme contrast for the results-limit label in the query menu.
+
 ## 0.1.3
 
 ### 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.1.3.lapis-plugin` archive is attached to the
+`bases-0.2.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-file-icon.d.ts

@@ -0,0 +1,2 @@
+/** Distinct stacked property cards for the Bases file type. */
+export declare const BASES_FILE_ICON = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linejoin=\"round\">\n  <path d=\"M3 7h18v13H3zM6 4h12M8 1h8\"/>\n  <path d=\"M3 11h18M9 11v9\"/>\n</svg>";

package/dist/bases-file-icon.js

@@ -0,0 +1,5 @@
+/** Distinct stacked property cards for the Bases file type. */
+export const BASES_FILE_ICON = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round">
+  <path d="M3 7h18v13H3zM6 4h12M8 1h8"/>
+  <path d="M3 11h18M9 11v9"/>
+</svg>`;

package/dist/bases-plugin.js

@@ -1,3 +1,4 @@
+import { BASES_FILE_ICON } from "./bases-file-icon";
 import { MarkdownRenderChild, Plugin, } from "@lapis-notes/api";
 import { markupEditor } from "@lapis-notes/api/editor/core";
 import { yaml } from "@codemirror/lang-yaml";
@@ -10,12 +11,14 @@ export class BasesPlugin extends Plugin {
         super(app, manifest);
     }
     async onload() {
+        const fileIcon = this.registerIcon("file", BASES_FILE_ICON);
         this.registerView(BasesViewType, (leaf) => new BasesView(leaf), {
             kind: "file",
         });
         this.registerEditorView({
             id: BasesViewType,
             label: "Bases",
+            fileIcon,
             filenamePatterns: ["*.bases", "*.base"],
             priority: "default",
         });

package/dist/bases-view/components/column-visibility.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  const commandListId = $props.id();
   import * as Popover from "@lapismd/design-core/shadcn/popover";
   import * as Command from "@lapismd/design-core/shadcn/command";
   import * as DropdownMenu from "@lapismd/design-core/shadcn/dropdown-menu";
@@ -220,7 +221,7 @@
             <DropdownMenu.Root>
               <DropdownMenu.Trigger>
                 {#snippet child({ props }: { props: Record<string, unknown> })}
-                  <Button {...props} size="sm" variant="ghost"
+                  <Button {...props} size="sm" variant="ghost" aria-label={`${name} property actions`}
                     ><Ellipsis /></Button
                   >
                 {/snippet}
@@ -282,6 +283,7 @@
               bind:value={getBaseSummary, setBaseSummary}
             >
               <Select.Trigger
+                aria-label="Summary in all views"
                 size="sm"
                 class="bases-style-bg-background-e6f9e3 bases-style-h-8-ed8a5d bases-style-justify-between-8ef226"
               >
@@ -305,6 +307,7 @@
               bind:value={getViewSummary, setViewSummary}
             >
               <Select.Trigger
+                aria-label="Summary in this view"
                 size="sm"
                 class="bases-style-bg-background-e6f9e3 bases-style-h-8-ed8a5d bases-style-justify-between-8ef226"
               >
@@ -324,9 +327,11 @@
         </div>
       </Command.Root>
     {:else}
-      <Command.Root>
-        <Command.Input placeholder="Find or create" />
-        <Command.List class="bases-style-p-1-eb6a3c">
+      <Command.Root label="Filter properties">
+        <Command.Input aria-controls={commandListId} aria-haspopup="grid" placeholder="Find or create" />
+        <Command.List id={commandListId} class="bases-style-p-1-eb6a3c">
+          {#snippet child({ props })}
+          <div {...props} role="grid" aria-label="Properties">
           <Command.Empty>No results found.</Command.Empty>
           {#each sortedColumns as column (column.id)}
             <Command.Item
@@ -334,33 +339,58 @@
                 controller.toggleVisibility(column.id);
               }}
             >
-              <div
-                data-ui-part="bases-option-indicator"
-                data-selected={controller.isVisible(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",
-                  controller.isVisible(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-hover-ring-2-8a0edf"
-                    : "bases-style-opacity-50-0b8c50 [&_svg]:invisible",
-                )}
-              >
-                <CheckIcon class="bases-style-size-4-f7b5fa" />
+              {#snippet child({ props })}
+              <div {...props} role="row">
+              <div role="gridcell" class="bases-property-picker__visibility">
+                <button
+                  type="button"
+                  class="bases-property-picker__toggle"
+                  aria-label={`Toggle ${column.displayName ?? normalizeName(column.id)} visibility`}
+                  aria-pressed={controller.isVisible(column.id)}
+                  onkeydown={(event) => event.stopPropagation()}
+                  onclick={(event) => {
+                    event.stopPropagation();
+                    controller.toggleVisibility(column.id);
+                  }}
+                >
+                  <div
+                    data-ui-part="bases-option-indicator"
+                    data-selected={controller.isVisible(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",
+                      controller.isVisible(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-hover-ring-2-8a0edf"
+                        : "bases-style-opacity-50-0b8c50 [&_svg]:invisible",
+                    )}
+                  >
+                    <CheckIcon class="bases-style-size-4-f7b5fa" />
+                  </div>
+                  <Icon name={[column.icon ?? "lucide-info"]} />
+                  <span
+                    class={cn({ "bases-style-text-muted-foreground-bfa603": !controller.isVisible(column.id) })}
+                    >{column.displayName ?? normalizeName(column.id)}</span
+                  >
+                </button>
               </div>
-              <Icon name={[column.icon ?? "lucide-info"]} />
-              <span
-                class={cn({ "bases-style-opacity-40-2a2db4": !controller.isVisible(column.id) })}
-                >{column.displayName ?? normalizeName(column.id)}</span
-              >
+              <div role="gridcell">
               <Command.Shortcut>
                 <button
                   class="bases-style-hover-bg-border-2e3f11 bases-style-rounded-sm-36d446 bases-style-p-1-eb6a3c"
+                  type="button"
+                  aria-label={`Edit ${column.displayName ?? normalizeName(column.id)}`}
+                  onkeydown={(event) => event.stopPropagation()}
                   onclick={(evt) => editColumn(evt, column)}
                 >
                   <ChevronRight />
                 </button>
               </Command.Shortcut>
+              </div>
+              </div>
+              {/snippet}
             </Command.Item>
           {/each}
+          </div>
+          {/snippet}
         </Command.List>
       </Command.Root>
     {/if}
@@ -386,3 +416,24 @@
     {/if}
   </Popover.Content>
 </Popover.Root>
+
+<style>
+  .bases-property-picker__visibility {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .bases-property-picker__toggle {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing, 0.25rem);
+    width: 100%;
+    border: 0;
+    padding: 0;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    text-align: start;
+    cursor: pointer;
+  }
+</style>

package/dist/bases-view/components/filters/filter-group.svelte

@@ -75,7 +75,10 @@
 <div class={cn("filter-group", className)}>
   <div class="filter-group-header bases-style-flex-60fbb7 bases-style-items-center-3960ff bases-style-justify-between-8ef226">
     <Select.Root type="single" bind:value={getFilterType, setFilterType}>
-      <Select.Trigger data-bases-filter-control="group-type-trigger">
+      <Select.Trigger
+        aria-label="Filter group match"
+        data-bases-filter-control="group-type-trigger"
+      >
         {triggerContent}
       </Select.Trigger>
       <Select.Content

package/dist/bases-view/components/filters/filter-properties.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  const commandListId = $props.id();
   import * as Popover from "@lapismd/design-core/shadcn/popover";
   import { Button } from "@lapismd/design-core/shadcn/button";
   import * as Command from "@lapismd/design-core/shadcn/command";
@@ -47,8 +48,8 @@
   </Popover.Trigger>
   <Popover.Content class="bases-style-w-310px-8357f2 bases-style-p-0-8a539c" align="start">
     <Command.Root>
-      <Command.Input placeholder="Find or create" />
-      <Command.List class="bases-style-p-1-eb6a3c">
+      <Command.Input aria-controls={commandListId} placeholder="Find or create" />
+      <Command.List id={commandListId} class="bases-style-p-1-eb6a3c">
         <Command.Empty>No results found.</Command.Empty>
         {#each controller
           .getAllColumns()

package/dist/bases-view/components/filters/filter-row.svelte

@@ -3,6 +3,7 @@
 </script>
 
 <script lang="ts">
+  const commandListId = $props.id();
   import type { Table } from "@tanstack/table-core";
   import * as Popover from "@lapismd/design-core/shadcn/popover";
   import * as Command from "@lapismd/design-core/shadcn/command";
@@ -235,8 +236,8 @@
         </Popover.Trigger>
         <Popover.Content class="bases-style-w-max-2f935d bases-style-p-0-8a539c" align="start">
           <Command.Root>
-            <Command.Input placeholder="Find or create" />
-            <Command.List class="bases-style-p-1-eb6a3c">
+            <Command.Input aria-controls={commandListId} placeholder="Find or create" />
+            <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
@@ -271,6 +272,7 @@
       <Select.Root type="single" bind:value={filter.op}>
         <Select.Trigger
           size="sm"
+          aria-label={`${column?.displayName ?? "Property"} filter operator`}
           data-bases-filter-control="operator-trigger"
           class="bases-style-bg-background-e6f9e3 bases-style-min-h-inherit-05c993 bases-style-h-auto-b8f0a0 bases-style-self-stretch-18069a bases-style-rounded-none-0c5e91 bases-style-border-none-4a5f0e bases-style-shadow-none-ad47d1 bases-style-outline-none-df37b1"
         >

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

@@ -1,4 +1,5 @@
 <script lang="ts">
+  const commandListId = $props.id();
   import * as Command from "@lapismd/design-core/shadcn/command";
   import * as Popover from "@lapismd/design-core/shadcn/popover";
   import * as Select from "@lapismd/design-core/shadcn/select";
@@ -66,8 +67,8 @@
   </Popover.Trigger>
   <Popover.Content class="bases-style-w-320px-57f3af bases-style-p-0-8a539c" align="start">
     <Command.Root>
-      <Command.Input placeholder="Group by property" />
-      <Command.List class="bases-style-p-1-eb6a3c">
+      <Command.Input aria-controls={commandListId} placeholder="Group by property" />
+      <Command.List id={commandListId} class="bases-style-p-1-eb6a3c">
         <Command.Empty>No properties found.</Command.Empty>
         {#each controller.getAllColumns() as column (column.id)}
           <Command.Item onSelect={() => setGroupBy(column.id)}>
@@ -91,7 +92,7 @@
       <div class="bases-style-border-t-b950dd bases-style-p-2-7660b4">
         <div class="bases-style-grid-f3c543 bases-style-grid-cols-1-d7c833 bases-style-gap-2-77a2a2">
           <Select.Root type="single" bind:value={getDirection, setDirection}>
-            <Select.Trigger size="sm" class="bases-style-bg-background-e6f9e3 bases-style-h-8-ed8a5d bases-style-justify-between-8ef226">
+            <Select.Trigger aria-label="Group sort direction" size="sm" class="bases-style-bg-background-e6f9e3 bases-style-h-8-ed8a5d bases-style-justify-between-8ef226">
               {directions.find(
                 (direction) => direction.value === getDirection(),
               )?.label}

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

@@ -55,9 +55,7 @@
     <Command.Root>
       <div class="bases-style-p-2-7660b4">
         <div class="bases-style-grid-f3c543 bases-style-grid-cols-1-d7c833 bases-style-items-center-3960ff bases-style-gap-2-77a2a2 bases-style-px-2-d5eab2 bases-style-pt-1-6b7d6e">
-          <Label for="column_name" class="bases-style-text-sm-fc7473 bases-style-opacity-50-0b8c50"
-            >Limit number of results</Label
-          >
+          <Label for="column_name">Limit number of results</Label>
           <Input
             type="number"
             placeholder="e.g 10"

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

@@ -1,4 +1,5 @@
 <script lang="ts">
+  const commandListId = $props.id();
   import { DragDropProvider } from "@dnd-kit/svelte";
   import type { DragEndEvent } from "@dnd-kit/dom";
   import { arrayMove } from "@dnd-kit/helpers";
@@ -144,8 +145,8 @@
           </Popover.Trigger>
           <Popover.Content class="bases-style-w-max-2f935d bases-style-p-0-8a539c" align="start">
             <Command.Root>
-              <Command.Input placeholder="Group by property" />
-              <Command.List class="bases-style-p-1-eb6a3c">
+              <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)}>
@@ -181,6 +182,7 @@
           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"
           >

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

@@ -1,4 +1,5 @@
 <script lang="ts">
+  const commandListId = $props.id();
   import { createDraggable, createDroppable } from "@dnd-kit/svelte";
   import * as Popover from "@lapismd/design-core/shadcn/popover";
   import * as Command from "@lapismd/design-core/shadcn/command";
@@ -124,8 +125,8 @@
         </Popover.Trigger>
         <Popover.Content class="bases-style-w-max-2f935d bases-style-p-0-8a539c" align="start">
           <Command.Root>
-            <Command.Input placeholder="Find or create" />
-            <Command.List class="bases-style-p-1-eb6a3c">
+            <Command.Input aria-controls={commandListId} placeholder="Find or create" />
+            <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
@@ -162,6 +163,7 @@
       </Popover.Root>
       <Select.Root type="single" bind:value={sort.direction}>
         <Select.Trigger
+          aria-label={`${column?.displayName ?? "Property"} 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"
         >

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

@@ -1,4 +1,5 @@
 <script lang="ts">
+  const commandListId = $props.id();
   import { Icon } from "@lapis-notes/api/icon";
   import { Label } from "@lapismd/design-core/shadcn/label";
   import { Input } from "@lapismd/design-core/shadcn/input";
@@ -78,7 +79,7 @@
         }
       }
     >
-      <Select.Trigger class="bases-style-w-full-6da6a3">
+      <Select.Trigger aria-label="Layout" class="bases-style-w-full-6da6a3">
         <Icon name={selectedLayout.icon} />
         {selectedLayout.label}
       </Select.Trigger>
@@ -127,7 +128,7 @@
             }
           }
         >
-          <Select.Trigger class="bases-style-w-full-6da6a3">
+          <Select.Trigger aria-label={option.displayName} class="bases-style-w-full-6da6a3">
             {selectedOption.label}
           </Select.Trigger>
           <Select.Content>
@@ -297,8 +298,8 @@
           </Popover.Trigger>
           <Popover.Content class="bases-style-w-310px-8357f2 bases-style-p-0-8a539c" align="start">
             <Command.Root>
-              <Command.Input placeholder="Find or create" />
-              <Command.List class="bases-style-p-1-eb6a3c">
+              <Command.Input aria-controls={`${commandListId}-${option.key}`} placeholder="Find or create" />
+              <Command.List id={`${commandListId}-${option.key}`} class="bases-style-p-1-eb6a3c">
                 <Command.Empty>No results found.</Command.Empty>
                 {#each controller
                   .getAllColumns()

package/manifest.json

@@ -1,12 +1,12 @@
 {
   "id": "bases",
   "name": "Bases",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "minAppVersion": "0.1.0",
   "description": "Build table, card, and grouped views from Markdown properties",
   "author": "Lapis Notes Bases",
   "authorUrl": "https://app.lapis.md",
-  "authorAvatarUrl": "https://www.gravatar.com/avatar/1df68d9ff087b0dd72fd8626056fca7f?s=128&d=404",
+  "authorAvatarUrl": "https://gravatar.com/avatar/f7226d5f9cf07af2a6a60d3ab11413abb9d2e2eb60f2d5cce17356845a166155?size=256&d=initials",
   "isDesktopOnly": false,
   "lapis": {
     "manifestVersion": 1,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lapis-notes/bases",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "description": "Lapis Notes Bases plugin",
   "license": "Apache-2.0",
   "type": "module",
@@ -38,7 +38,7 @@
     "@dnd-kit/dom": "^0.4.0",
     "@dnd-kit/helpers": "^0.4.0",
     "@dnd-kit/svelte": "^0.4.0",
-    "@lapismd/design-core": "^0.3.2",
+    "@lapismd/design-core": "^0.7.4",
     "@lucide/svelte": "^0.523.0",
     "@tanstack/table-core": "^8.21.3",
     "js-yaml": "^4.1.0",
@@ -51,7 +51,7 @@
     "@codemirror/language": "^6.11.3",
     "@codemirror/state": "^6.6.0",
     "@codemirror/view": "^6.42.1",
-    "@lapis-notes/api": "^0.1.2",
+    "@lapis-notes/api": "^0.2.0",
     "@lezer/common": "^1.5.2",
     "@lezer/highlight": "^1.2.3",
     "@lezer/lr": "^1.4.2",
@@ -69,8 +69,8 @@
     "svelte": "^5.38.2",
     "svelte-check": "^4.3.1",
     "typescript": "~5.8.3",
-    "vite": "^6.4.2",
-    "vitest": "^4.1.8"
+    "vite": "^6.4.4",
+    "vitest": "^4.1.12"
   },
   "repository": {
     "type": "git",