@lapis-notes/bases 0.1.2 → 0.1.4

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Bases changelog
 
+## 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
+
+- Add official author avatars and deterministic split, light, and dark registry media for plugin banners, overviews, and galleries.
+
 ## 0.1.2
 
 - Initial independent public package extracted from Lapis Notes without changing

package/LICENSE.md

@@ -1,8 +1,4 @@
-# License
+Apache-2.0
 
-Copyright (c) LapisMD contributors.
-
-This software is licensed under the GNU Affero General Public License, version
-3 or (at your option) any later version (`AGPL-3.0-or-later`). The complete
-license text is available from the
-[GNU Project](https://www.gnu.org/licenses/agpl-3.0.html).
+This project is licensed under the Apache License 2.0.
+See <https://www.apache.org/licenses/LICENSE-2.0>.

package/README.md

@@ -1,6 +1,6 @@
 # Bases
 
-Bases
+Build table, card, and grouped views from Markdown properties
 
 ## Install for static composition
 
@@ -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.2.lapis-plugin` archive is attached to the
+`bases-0.1.4.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-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}
@@ -324,9 +325,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 +337,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 +414,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/column-visibility.svelte.d.ts

@@ -8,6 +8,6 @@ type $$ComponentProps = {
     formulas: Record<string, string>;
     order: Array<string>;
 };
-declare const ColumnVisibility: import("svelte").Component<$$ComponentProps, {}, "order" | "properties" | "formulas">;
+declare const ColumnVisibility: import("svelte").Component<$$ComponentProps, {}, "properties" | "order" | "formulas">;
 type ColumnVisibility = ReturnType<typeof ColumnVisibility>;
 export default ColumnVisibility;

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

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)}>

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)}>
@@ -198,6 +199,7 @@
         <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)}

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";
@@ -96,6 +97,7 @@
     <Button
       {@attach draggable.attachHandle}
       size="sm"
+      aria-label={`Reorder ${column?.displayName ?? "sort"}`}
       class="drag-handle bases-style-mr-0-5-1caf26"
       variant="ghost"
     >
@@ -123,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
@@ -179,6 +181,7 @@
         <Button
           variant="ghost"
           size="sm"
+          aria-label={`Remove ${column?.displayName ?? "sort"}`}
           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"
           onclick={() => deleteSort()}
         >

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

@@ -7,6 +7,6 @@ type $$ComponentProps = {
     table?: any;
     show: boolean;
 };
-declare const Views: import("svelte").Component<$$ComponentProps, {}, "value" | "show" | "views">;
+declare const Views: import("svelte").Component<$$ComponentProps, {}, "views" | "value" | "show">;
 type Views = ReturnType<typeof Views>;
 export default Views;

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";
@@ -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,11 +1,12 @@
 {
   "id": "bases",
   "name": "Bases",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "minAppVersion": "0.1.0",
-  "description": "Bases",
+  "description": "Build table, card, and grouped views from Markdown properties",
   "author": "Lapis Notes Bases",
   "authorUrl": "https://app.lapis.md",
+  "authorAvatarUrl": "https://gravatar.com/avatar/f7226d5f9cf07af2a6a60d3ab11413abb9d2e2eb60f2d5cce17356845a166155?size=256&d=initials",
   "isDesktopOnly": false,
   "lapis": {
     "manifestVersion": 1,
@@ -23,7 +24,21 @@
             "@lapis-notes/api/editor/core",
             "@lapis-notes/api/editor/extensions/class-highlighter",
             "@lapis-notes/api/icon",
-            "@lapis-notes/api/metadata-value"
+            "@lapis-notes/api/metadata-value",
+            "@codemirror/autocomplete",
+            "@codemirror/language",
+            "@codemirror/state",
+            "@codemirror/view",
+            "@lezer/common",
+            "@lezer/highlight",
+            "@lezer/lr",
+            "svelte/renderer/5.56.10",
+            "svelte/renderer/5.56.10/attachments",
+            "svelte/renderer/5.56.10/events",
+            "svelte/renderer/5.56.10/internal/client",
+            "svelte/renderer/5.56.10/internal/disclose-version",
+            "svelte/renderer/5.56.10/internal/flags/legacy",
+            "svelte/renderer/5.56.10/reactivity"
           ],
           "requiresReloadOnUpdate": false
         }

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@lapis-notes/bases",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "Lapis Notes Bases plugin",
-  "license": "AGPL-3.0-or-later",
+  "license": "Apache-2.0",
   "type": "module",
   "files": [
     "dist",
     "manifest.json",
     "registry.json",
+    "registry-content",
     "styles.css",
     "README.md",
     "CHANGELOG.md",
@@ -32,16 +33,12 @@
     "./registry.json": "./registry.json"
   },
   "dependencies": {
-    "@codemirror/autocomplete": "^6.18.6",
     "@codemirror/lang-sql": "^6.9.1",
     "@codemirror/lang-yaml": "^6.1.2",
-    "@codemirror/language": "^6.11.3",
-    "@codemirror/state": "^6.6.0",
-    "@codemirror/view": "^6.42.1",
     "@dnd-kit/dom": "^0.4.0",
     "@dnd-kit/helpers": "^0.4.0",
     "@dnd-kit/svelte": "^0.4.0",
-    "@lapismd/design-core": "^0.1.0",
+    "@lapismd/design-core": "^0.3.2",
     "@lucide/svelte": "^0.523.0",
     "@tanstack/table-core": "^8.21.3",
     "js-yaml": "^4.1.0",
@@ -50,7 +47,14 @@
     "peaql": "^0.1.25"
   },
   "peerDependencies": {
-    "@lapis-notes/api": "^0.1.0",
+    "@codemirror/autocomplete": "^6.18.6",
+    "@codemirror/language": "^6.11.3",
+    "@codemirror/state": "^6.6.0",
+    "@codemirror/view": "^6.42.1",
+    "@lapis-notes/api": "^0.1.2",
+    "@lezer/common": "^1.5.2",
+    "@lezer/highlight": "^1.2.3",
+    "@lezer/lr": "^1.4.2",
     "svelte": "^5.0.0"
   },
   "devDependencies": {

package/registry-content/overview.md

@@ -0,0 +1,11 @@
+# Bases
+
+Bases turns ordinary Markdown notes and front matter into live, structured
+collections without moving the source into a separate database. A `.base`
+file describes which notes belong, which properties appear, and how the result
+should be filtered, sorted, limited, or grouped.
+
+Use tables for detailed review, visual cards for portfolios with cover images,
+or grouped lists for faster scanning. Changes to supported properties still
+flow through normal vault files, so the same notes remain portable and usable
+everywhere else in Lapis.

package/registry.json

@@ -1,6 +1,6 @@
 {
   "$schema": "https://registry.lapis.md/schemas/plugin-source.schema.json",
-  "schemaVersion": 1,
+  "schemaVersion": 2,
   "categories": ["data", "database", "editor"],
   "highlights": [
     "Create structured views over notes and front matter.",
@@ -8,5 +8,178 @@
     "Keep editable views backed by ordinary Lapis content."
   ],
   "documentationUrl": "https://github.com/lapismd/lapis-plugins/tree/main/packages/bases#readme",
-  "content": { "overview": "README.md", "changelog": "CHANGELOG.md" }
+  "appearance": {
+    "icon": "table-2",
+    "accent": "#14B8A6"
+  },
+  "media": {
+    "banner": {
+      "alt": "Lapis Bases showing a populated project cover-card view with real artwork and useful properties.",
+      "images": {
+        "preview": {
+          "path": "registry-assets/banner.preview.webp"
+        },
+        "full": {
+          "path": "registry-assets/banner.full.webp"
+        },
+        "light": {
+          "path": "registry-assets/banner.light.webp"
+        },
+        "dark": {
+          "path": "registry-assets/banner.dark.webp"
+        }
+      },
+      "capture": {
+        "storyId": "plugins-bases-registry-screenshots--overview",
+        "focus": "full-shell"
+      }
+    },
+    "overview": {
+      "alt": "Lapis Bases grouped list view with populated project records and grouping controls open.",
+      "images": {
+        "preview": {
+          "path": "registry-assets/overview.preview.webp"
+        },
+        "full": {
+          "path": "registry-assets/overview.full.webp"
+        },
+        "light": {
+          "path": "registry-assets/overview.light.webp"
+        },
+        "dark": {
+          "path": "registry-assets/overview.dark.webp"
+        }
+      },
+      "capture": {
+        "storyId": "plugins-bases-registry-screenshots--grouped-list",
+        "focus": "full-shell"
+      }
+    }
+  },
+  "gallery": [
+    {
+      "id": "table",
+      "alt": "Focused projects table with the Filter panel open to an Active status rule.",
+      "images": {
+        "preview": {
+          "path": "registry-assets/gallery/table.preview.webp"
+        },
+        "full": {
+          "path": "registry-assets/gallery/table.full.webp"
+        },
+        "light": {
+          "path": "registry-assets/gallery/table.light.webp"
+        },
+        "dark": {
+          "path": "registry-assets/gallery/table.dark.webp"
+        }
+      },
+      "capture": {
+        "storyId": "plugins-bases-registry-screenshots--filter-options",
+        "focus": "full-shell"
+      },
+      "card": {
+        "headline": [
+          {
+            "text": "Filter the work",
+            "tone": "neutral"
+          },
+          {
+            "text": "to what matters now",
+            "tone": "cyan"
+          }
+        ],
+        "description": [
+          {
+            "text": "Combine property rules across one view or every view while the source stays",
+            "tone": "neutral"
+          },
+          {
+            "text": "ordinary Markdown.",
+            "tone": "green"
+          }
+        ]
+      }
+    },
+    {
+      "id": "cards",
+      "alt": "Focused projects base displayed as visual cards with actual cover artwork, owner, status, and score.",
+      "images": {
+        "preview": {
+          "path": "registry-assets/gallery/cards.preview.webp"
+        },
+        "full": {
+          "path": "registry-assets/gallery/cards.full.webp"
+        },
+        "light": {
+          "path": "registry-assets/gallery/cards.light.webp"
+        },
+        "dark": {
+          "path": "registry-assets/gallery/cards.dark.webp"
+        }
+      },
+      "capture": {
+        "storyId": "plugins-bases-registry-screenshots--cover-cards",
+        "focus": "full-shell"
+      },
+      "card": {
+        "headline": [
+          {
+            "text": "See the work",
+            "tone": "neutral"
+          },
+          {
+            "text": "at a glance",
+            "tone": "violet"
+          }
+        ],
+        "description": [
+          {
+            "text": "Use cover images and selected properties to build a compact project portfolio.",
+            "tone": "neutral"
+          }
+        ]
+      }
+    },
+    {
+      "id": "grouped-list",
+      "alt": "Focused projects list grouped into Active and Planning sections with the Group by controls open.",
+      "images": {
+        "preview": {
+          "path": "registry-assets/gallery/grouped-list.preview.webp"
+        },
+        "full": {
+          "path": "registry-assets/gallery/grouped-list.full.webp"
+        },
+        "light": {
+          "path": "registry-assets/gallery/grouped-list.light.webp"
+        },
+        "dark": {
+          "path": "registry-assets/gallery/grouped-list.dark.webp"
+        }
+      },
+      "capture": {
+        "storyId": "plugins-bases-registry-screenshots--grouped-list",
+        "focus": "full-shell"
+      },
+      "card": {
+        "headline": [
+          {
+            "text": "Group related notes",
+            "tone": "neutral"
+          },
+          {
+            "text": "around the next decision",
+            "tone": "green"
+          }
+        ],
+        "description": [
+          {
+            "text": "Shape the same source data into a grouped list when a table is more than you need.",
+            "tone": "neutral"
+          }
+        ]
+      }
+    }
+  ]
 }