@warkypublic/svelix 0.1.44 → 0.1.46

package/dist/components/CardGrid/ImageCardStory.svelte

@@ -0,0 +1,257 @@
+<script lang="ts">
+	import CardGrid from './CardGrid.svelte';
+	import type { CardGridColumn, CardSortOption } from './cardGrid.js';
+
+	const columns: CardGridColumn[] = [
+		{ id: 'id',           title: 'ID',           disableSearch: true, disableFilter: true },
+		{ id: 'title',        title: 'Title' },
+		{ id: 'photographer', title: 'Photographer' },
+		{ id: 'category',     title: 'Category' },
+		{ id: 'likes',        title: 'Likes',        format: 'number' },
+		{ id: 'views',        title: 'Views',        format: 'number' },
+	];
+
+	const sortOptions: CardSortOption[] = [
+		{ columnId: 'title',        label: 'Title' },
+		{ columnId: 'photographer', label: 'Photographer' },
+		{ columnId: 'likes',        label: 'Likes' },
+	];
+
+	const CATEGORIES    = ['Architecture', 'Nature', 'People', 'Travel', 'Abstract', 'Animals'];
+	const PHOTOGRAPHERS = ['Alice Monroe', 'Ben Carter', 'Cara Lee', 'Daniel Park', 'Emma Rios', 'Felix Braun'];
+	const TITLES = [
+		'Golden Hour', 'Morning Mist', 'Urban Jungle', 'Still Waters', 'First Light',
+		'Hidden Path', 'City Pulse', 'Wild Plains', 'Quiet Corner', 'Storm Front',
+		'Desert Bloom', 'Arctic Echo', 'Neon Drift', 'Forest Floor', 'Tidal Wave',
+	];
+
+	const data = Array.from({ length: 60 }, (_, i) => ({
+		id:           i + 1,
+		title:        `${TITLES[i % TITLES.length]} ${Math.floor(i / TITLES.length) || ''}`.trim(),
+		photographer: PHOTOGRAPHERS[i % PHOTOGRAPHERS.length],
+		category:     CATEGORIES[i % CATEGORIES.length],
+		likes:        Math.floor(Math.random() * 4800 + 200),
+		views:        Math.floor(Math.random() * 48000 + 2000),
+		imageUrl:     `https://picsum.photos/seed/${i + 1}/400/260`,
+	}));
+</script>
+
+<!-- cardMaxFrontColumns=3 splits: front=[id,title,photographer], back=[category,likes,views] -->
+<CardGrid
+	{columns}
+	{sortOptions}
+	{data}
+	cardMinWidth={260}
+	cardMaxFrontColumns={3}
+	pageSize={20}
+	searchPlaceholder="Search photos…"
+>
+	{#snippet card(record, _i, selected, _focused)}
+		<article class="ic-card" class:ic-selected={selected}>
+			<div class="ic-image-wrap">
+				<img
+					src={record.imageUrl as string}
+					alt={record.title as string}
+					class="ic-image"
+					loading="lazy"
+				/>
+				<span class="ic-category">{record.category as string}</span>
+			</div>
+			<div class="ic-body">
+				<p class="ic-title">{record.title as string}</p>
+				<p class="ic-photographer">by {record.photographer as string}</p>
+			</div>
+		</article>
+	{/snippet}
+
+	{#snippet cardBack(record, _i, selected, _focused)}
+		<article class="ic-card ic-back" class:ic-selected={selected}>
+			<div class="ic-back-image-wrap">
+				<img
+					src={record.imageUrl as string}
+					alt={record.title as string}
+					class="ic-back-image"
+					loading="lazy"
+				/>
+				<div class="ic-back-overlay">
+					<p class="ic-back-title">{record.title as string}</p>
+					<p class="ic-back-photographer">by {record.photographer as string}</p>
+				</div>
+			</div>
+			<div class="ic-body ic-back-body">
+				<div class="ic-back-stat">
+					<svg width="14" height="14" viewBox="0 0 20 20" fill="none" aria-hidden="true">
+						<path d="M3 7h14M3 10h10M3 13h6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
+					</svg>
+					<span class="ic-back-label">Category</span>
+					<span class="ic-back-value">{record.category as string}</span>
+				</div>
+				<div class="ic-back-stat">
+					<svg width="14" height="14" viewBox="0 0 20 20" fill="none" aria-hidden="true">
+						<path d="M10 4C5 4 1 10 1 10s4 6 9 6 9-6 9-6-4-6-9-6Z" stroke="currentColor" stroke-width="1.6"/>
+						<circle cx="10" cy="10" r="3" stroke="currentColor" stroke-width="1.6"/>
+					</svg>
+					<span class="ic-back-label">Views</span>
+					<span class="ic-back-value">{(record.views as number).toLocaleString()}</span>
+				</div>
+				<div class="ic-back-stat">
+					<svg width="14" height="14" viewBox="0 0 20 20" fill="none" aria-hidden="true">
+						<path d="M10 17s-8-5-8-10a5 5 0 0 1 8-4 5 5 0 0 1 8 4c0 5-8 10-8 10Z" stroke="currentColor" stroke-width="1.6"/>
+					</svg>
+					<span class="ic-back-label">Likes</span>
+					<span class="ic-back-value">{(record.likes as number).toLocaleString()}</span>
+				</div>
+			</div>
+		</article>
+	{/snippet}
+</CardGrid>
+
+<style>
+	/* ── Shared ───────────────────────────────────────────────────────────── */
+
+	.ic-card {
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+		overflow: hidden;
+		border-radius: 10px;
+	}
+
+	.ic-body {
+		padding: 12px 14px 14px;
+		display: flex;
+		flex-direction: column;
+		gap: 3px;
+		flex: 1;
+	}
+
+	/* ── Front face ───────────────────────────────────────────────────────── */
+
+	.ic-image-wrap {
+		position: relative;
+		overflow: hidden;
+		aspect-ratio: 16 / 10;
+		background: var(--cg-border-subtle, #f4f6f9);
+		flex-shrink: 0;
+	}
+
+	.ic-image {
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+		display: block;
+		transition: transform 300ms ease;
+	}
+
+	.ic-card:hover .ic-image {
+		transform: scale(1.04);
+	}
+
+	.ic-category {
+		position: absolute;
+		top: 10px;
+		left: 10px;
+		background: rgba(0, 0, 0, 0.48);
+		color: #fff;
+		font-size: 0.7rem;
+		font-weight: 600;
+		letter-spacing: 0.04em;
+		text-transform: uppercase;
+		padding: 3px 8px;
+		border-radius: 999px;
+		backdrop-filter: blur(4px);
+	}
+
+	.ic-title {
+		font-size: 0.9rem;
+		font-weight: 600;
+		color: var(--cg-text, #0f172a);
+		margin: 0;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	.ic-photographer {
+		font-size: 0.78rem;
+		color: var(--cg-text-muted, #64748b);
+		margin: 0;
+	}
+
+	.ic-selected .ic-image-wrap::after {
+		content: '';
+		position: absolute;
+		inset: 0;
+		box-shadow: inset 0 0 0 3px var(--cg-accent, #6366f1);
+	}
+
+	/* ── Back face ────────────────────────────────────────────────────────── */
+
+	.ic-back-image-wrap {
+		position: relative;
+		overflow: hidden;
+		aspect-ratio: 16 / 10;
+		flex-shrink: 0;
+	}
+
+	.ic-back-image {
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+		display: block;
+		filter: brightness(0.45) saturate(0.7);
+	}
+
+	.ic-back-overlay {
+		position: absolute;
+		inset: 0;
+		display: flex;
+		flex-direction: column;
+		justify-content: flex-end;
+		padding: 12px 14px;
+	}
+
+	.ic-back-title {
+		font-size: 0.95rem;
+		font-weight: 700;
+		color: #fff;
+		margin: 0;
+		line-height: 1.3;
+	}
+
+	.ic-back-photographer {
+		font-size: 0.75rem;
+		color: rgba(255,255,255,.75);
+		margin: 0;
+	}
+
+	.ic-back-body {
+		gap: 10px;
+		justify-content: center;
+	}
+
+	.ic-back-stat {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		color: var(--cg-text-muted, #64748b);
+	}
+
+	.ic-back-label {
+		font-size: 0.78rem;
+		flex: 1;
+	}
+
+	.ic-back-value {
+		font-size: 0.82rem;
+		font-weight: 600;
+		color: var(--cg-text, #0f172a);
+	}
+
+	.ic-selected .ic-back-image-wrap::after {
+		content: '';
+		position: absolute;
+		inset: 0;
+		box-shadow: inset 0 0 0 3px var(--cg-accent, #6366f1);
+	}
+</style>

package/dist/components/CardGrid/ImageCardStory.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const ImageCardStory: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ImageCardStory = InstanceType<typeof ImageCardStory>;
+export default ImageCardStory;

package/dist/components/CardGrid/cardGrid.d.ts

@@ -0,0 +1,33 @@
+import type { GridColumnFormat } from '../Types/generic_grid.js';
+export type { GridColumnSortOrder, GridColumnFilters } from '../Types/generic_grid.js';
+export type { GridlerAdapterConfig, GridlerPageResult } from '../Gridler/types.js';
+export interface CardGridColumn {
+    id: string;
+    title: string;
+    /** Field path on the record; defaults to id. Supports dot notation. */
+    dataKey?: string;
+    format?: GridColumnFormat;
+    disableSort?: boolean;
+    disableFilter?: boolean;
+    disableSearch?: boolean;
+}
+export interface CardSortOption {
+    columnId: string;
+    label: string;
+}
+export interface CardGridContextMenuItem {
+    id: string;
+    label: string;
+    disabled?: boolean;
+    icon?: string;
+    kind?: 'item' | 'separator';
+    onselect?: (rowData?: Record<string, unknown>) => void;
+}
+/** Add or remove an item from the selection by uniqueID match. */
+export declare function toggleItemInSelection(items: Record<string, unknown>[], item: Record<string, unknown>, uniqueID: string): Record<string, unknown>[];
+/** Return all items between anchor and target indices, inclusive. */
+export declare function rangeSelect(allItems: Record<string, unknown>[], anchorIndex: number, targetIndex: number): Record<string, unknown>[];
+/** Returns true if item is in selectedItems by uniqueID. */
+export declare function isItemSelected(selectedItems: Record<string, unknown>[], item: Record<string, unknown>, uniqueID: string): boolean;
+/** Compute how many cards fit in a row given container width, min card width, and gap. */
+export declare function computeColumnsInRow(containerWidth: number, cardMinWidth: number, gap: number): number;

package/dist/components/CardGrid/cardGrid.js

@@ -0,0 +1,21 @@
+/** Add or remove an item from the selection by uniqueID match. */
+export function toggleItemInSelection(items, item, uniqueID) {
+    const idx = items.findIndex((i) => i[uniqueID] === item[uniqueID]);
+    if (idx === -1)
+        return [...items, item];
+    return items.filter((_, i) => i !== idx);
+}
+/** Return all items between anchor and target indices, inclusive. */
+export function rangeSelect(allItems, anchorIndex, targetIndex) {
+    const start = Math.min(anchorIndex, targetIndex);
+    const end = Math.max(anchorIndex, targetIndex);
+    return allItems.slice(start, end + 1);
+}
+/** Returns true if item is in selectedItems by uniqueID. */
+export function isItemSelected(selectedItems, item, uniqueID) {
+    return selectedItems.some((s) => s[uniqueID] === item[uniqueID]);
+}
+/** Compute how many cards fit in a row given container width, min card width, and gap. */
+export function computeColumnsInRow(containerWidth, cardMinWidth, gap) {
+    return Math.max(1, Math.floor((containerWidth + gap) / (cardMinWidth + gap)));
+}

package/dist/components/CardGrid/index.d.ts

@@ -0,0 +1,4 @@
+export { default as CardGrid } from './CardGrid.svelte';
+export { default as DefaultCard } from './DefaultCard.svelte';
+export { default as CardGridFilterPanel } from './CardGridFilterPanel.svelte';
+export * from './cardGrid.js';

package/dist/components/CardGrid/index.js

@@ -0,0 +1,4 @@
+export { default as CardGrid } from './CardGrid.svelte';
+export { default as DefaultCard } from './DefaultCard.svelte';
+export { default as CardGridFilterPanel } from './CardGridFilterPanel.svelte';
+export * from './cardGrid.js';

package/dist/components/index.d.ts

@@ -13,4 +13,5 @@ export * from "./GlobalStateStore/index";
 export * from "./Screenshot/index";
 export * from "./VTree/index";
 export * from "./ContentEditor/index";
+export * from "./CardGrid/index";
 export type * from "./Types/index";

package/dist/components/index.js

@@ -14,3 +14,4 @@ export * from "./GlobalStateStore/index";
 export * from "./Screenshot/index";
 export * from "./VTree/index";
 export * from "./ContentEditor/index";
+export * from "./CardGrid/index";

package/llm/COMPONENT_GUIDE.md

@@ -767,6 +767,246 @@ Story behavior worth preserving:
 - markdown, Monaco/text, media, and PDF flows are all real supported paths
 - office-document integrations expose `insertText` and `insertHtml` hooks for external automation
 
+### CardGrid: virtualized card-based data grid
+
+Based on:
+- [src/lib/components/CardGrid/CardGrid.svelte](/home/hein/dev/svelix/src/lib/components/CardGrid/CardGrid.svelte)
+- [src/lib/components/CardGrid/CardGrid.stories.ts](/home/hein/dev/svelix/src/lib/components/CardGrid/CardGrid.stories.ts)
+
+A responsive, virtualized card grid with search, sort, filter, multi-select, context menus, and optional flip mode. Renders a toolbar above a scrollable grid of cards. Supports local data, async local data, and server-side paging via ResolveSpec or HeaderSpec adapters — the same adapter layer used by `GridlerFull`.
+
+The grid requires a bounded height on its scroll container. Always place it inside an element that has an explicit height, or use the `height: 100%` + flex approach shown below.
+
+#### Minimal local-data example
+
+```svelte
+<script lang="ts">
+  import { CardGrid } from '@warkypublic/svelix';
+  import type { CardGridColumn } from '@warkypublic/svelix';
+
+  const columns: CardGridColumn[] = [
+    { id: 'id',   title: 'ID',   disableSearch: true },
+    { id: 'name', title: 'Name' },
+    { id: 'role', title: 'Role' },
+  ];
+
+  const data = [
+    { id: 1, name: 'Alice Smith', role: 'Admin' },
+    { id: 2, name: 'Bob Jones',   role: 'Viewer' },
+  ];
+</script>
+
+<div style="height: 600px; display: flex; flex-direction: column;">
+  <CardGrid {columns} {data} pageSize={20} searchPlaceholder="Search…" />
+</div>
+```
+
+#### Props reference
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `columns` | `CardGridColumn[]` | — | Column definitions. **Required.** |
+| `displayColumns` | `string[]` | — | Subset of column IDs to show; omit to show all. |
+| `cardMinWidth` | `number` | `280` | Minimum card width in px. Grid fills available columns using `auto-fill`. |
+| `cardGap` | `number` | `16` | Gap between cards in px. |
+| `cardMaxFrontColumns` | `number` | — | Enables flip mode: first N columns on the front face, the rest on the back. |
+| `card` | `Snippet` | — | Custom front-face card snippet. Receives `(record, index, selected, focused)`. |
+| `cardBack` | `Snippet` | — | Custom back-face snippet for flip mode. Same signature as `card`. |
+| `empty` | `Snippet` | — | Rendered when the data set is empty. |
+| `skeleton` | `Snippet` | — | Rendered while the initial load is in flight. |
+| `data` | `Record<string,unknown>[] \| (() => Promise<Record<string,unknown>[]>)` | — | Local array or async factory. Used when `dataSource` is `'local'`. |
+| `dataSource` | `'local' \| 'resolvespec' \| 'headerspec'` | `'local'` | Data source adapter. |
+| `dataSourceOptions` | `object` | — | Adapter config — see table below. |
+| `pageSize` | `number` | `20` | Rows per page / server fetch page size. |
+| `uniqueID` | `string` | `'id'` | Field used for identity in selection and cursor paging. Overridden by `dataSourceOptions.uniqueID`. |
+| `searchValue` | `string` | — | Controlled search string. |
+| `onSearchValueChange` | `(v: string) => void` | — | Fires on every search input change. |
+| `serverSideSearch` | `boolean` | `true` | When true, search sends `ilike` filters to the server instead of filtering locally. |
+| `searchColumns` | `string[]` | — | Column IDs to search. Defaults to all searchable columns. |
+| `searchPlaceholder` | `string` | `'Search…'` | Placeholder text in the search input. |
+| `sortOptions` | `CardSortOption[]` | — | Sort options shown in the toolbar sort menu. |
+| `sortOrder` | `GridColumnSortOrder` | — | Controlled sort state. |
+| `onSortOrderChange` | `(order: GridColumnSortOrder) => void` | — | Fires when sort changes. |
+| `filters` | `GridColumnFilters` | — | Controlled filter state. |
+| `onFilterChange` | `(filters: GridColumnFilters) => void` | — | Fires when filters are applied or cleared. |
+| `selectedItems` | `Record<string,unknown>[]` | — | Controlled selection. |
+| `onSelectedItemsChange` | `(items: Record<string,unknown>[]) => void` | — | Fires when selection changes. |
+| `multiSelect` | `boolean` | `true` | `false` = single-select mode. Arrow keys move the selection. |
+| `menuItems` | `CardGridContextMenuItem[]` | — | Custom context menu items appended to the built-in ones. |
+| `onCardClick` | `(record, index) => void` | — | Fires on single click. |
+| `onCardDblClick` | `(record, index) => void` | — | Fires on double click. |
+| `onCardContextMenu` | `(record, index, x, y) => void` | — | Fires on right-click. `x`/`y` are viewport coordinates. |
+| `total` | `number` | bindable | Server-reported total count. |
+| `loading` | `boolean` | bindable | `true` while any fetch is in flight. |
+| `onLoadError` | `(error: string) => void` | — | Fires on adapter fetch failure. |
+| `toolbarEnd` | `Snippet` | — | Extra content rendered at the right end of the toolbar. |
+| `class` | `string` | — | Extra CSS class on the root element. |
+
+#### `CardGridColumn` fields
+
+| Field | Type | Description |
+|---|---|---|
+| `id` | `string` | Unique column identifier. Also used as the field key unless `dataKey` is set. |
+| `title` | `string` | Display label. |
+| `dataKey` | `string` | Dot-notation path into the record (e.g. `'login.contact.email'`). Defaults to `id`. |
+| `format` | `'currency' \| 'number' \| 'percentage' \| 'date' \| 'datetime'` | Value formatter applied in the default card renderer. |
+| `disableSort` | `boolean` | Excludes this column from sort options. |
+| `disableFilter` | `boolean` | Excludes this column from the filter panel. |
+| `disableSearch` | `boolean` | Excludes this column from local/server search. |
+
+#### `dataSourceOptions` fields
+
+| Field | Description |
+|---|---|
+| `url` | API base URL. |
+| `authToken` | Bearer token sent in `Authorization` header. |
+| `schema` | Database schema (ResolveSpec). |
+| `entity` | Table / entity name (ResolveSpec). |
+| `uniqueID` | Unique field for cursor paging. |
+| `hotfields` | Extra fields fetched but not rendered. |
+| `extraOptions` | Passed through to the adapter as `Partial<Options>` — same shape as `GridlerFull`. |
+
+#### Server-side paging
+
+```svelte
+<CardGrid
+  {columns}
+  {sortOptions}
+  dataSource="resolvespec"
+  dataSourceOptions={{
+    url: 'https://api.example.com',
+    schema: 'public',
+    entity: 'employees',
+    uniqueID: 'id',
+  }}
+  pageSize={20}
+  serverSideSearch={true}
+  searchColumns={['name', 'email']}
+/>
+```
+
+Cards are loaded a page at a time. Scrolling to the bottom appends the next page automatically. `total` and `loading` are bindable and update after each fetch.
+
+#### Flip mode (default card renderer)
+
+Set `cardMaxFrontColumns` to split columns across front and back faces. A `+N` badge appears on cards that have overflow columns; clicking it flips the card to show the remaining fields.
+
+```svelte
+<CardGrid
+  {columns}
+  {data}
+  cardMaxFrontColumns={3}
+/>
+```
+
+The flip button and the back button are always in the same bottom-right position on their respective faces.
+
+#### Custom card snippets
+
+Use `card` and `cardBack` snippets to replace the default renderer with fully custom markup. Both receive `(record, index, selected, focused)`.
+
+```svelte
+<CardGrid {columns} {data} cardMaxFrontColumns={3} pageSize={20}>
+  {#snippet card(record, _i, selected)}
+    <article class:selected>
+      <img src={record.imageUrl as string} alt={record.title as string} />
+      <p>{record.title as string}</p>
+    </article>
+  {/snippet}
+
+  {#snippet cardBack(record, _i, selected)}
+    <article class:selected>
+      <p>Views: {(record.views as number).toLocaleString()}</p>
+      <p>Likes: {(record.likes as number).toLocaleString()}</p>
+    </article>
+  {/snippet}
+</CardGrid>
+```
+
+When `cardBack` is provided without `card`, the default renderer is used for the front face and the custom snippet for the back.
+
+#### Custom card snippets from a `.ts` story file
+
+Svelte snippets cannot be written directly in a `.ts` file. Wrap them in a `.svelte` wrapper component and render that component from the story:
+
+```typescript
+// MyStory.stories.ts
+import WrapperComponent from './WrapperComponent.svelte';
+
+export const Custom: Story = {
+  render: () => ({ Component: WrapperComponent }),
+};
+```
+
+```svelte
+<!-- WrapperComponent.svelte -->
+<script lang="ts">
+  import CardGrid from './CardGrid.svelte';
+  const data = [...];
+  const columns = [...];
+</script>
+
+<CardGrid {columns} {data} cardMaxFrontColumns={3}>
+  {#snippet card(record, _i, selected, focused)}
+    ...
+  {/snippet}
+</CardGrid>
+```
+
+#### Multi-select keyboard shortcuts
+
+| Key | Behaviour |
+|---|---|
+| `Space` / `Enter` | Toggle selection on the focused card. |
+| `Arrow keys` | Move focus. In `multiSelect: false` mode, also moves selection. |
+| `Ctrl+A` / `Cmd+A` | Select all loaded cards (multi-select only). |
+| `Shift+Click` | Range-select from the last anchor to the clicked card. |
+| `Ctrl+Click` | Toggle a single card without clearing others. |
+
+#### Storybook height decorator
+
+The virtualizer requires a bounded scroll container. In Storybook, apply this decorator to give the root element a height:
+
+```typescript
+const heightDecorator = (Story) => {
+  const root = document.getElementById('storybook-root');
+  if (root) root.style.cssText = 'height:calc(100vh - 40px);display:flex;flex-direction:column;';
+  document.body.style.margin = '0';
+  return Story();
+};
+
+const meta = {
+  decorators: [heightDecorator],
+  ...
+};
+```
+
+#### Large local datasets in stories
+
+Generate large datasets lazily to avoid crashing Storybook at module-load time:
+
+```typescript
+let rows: ReturnType<typeof makeRow>[] | null = null;
+function getRows() {
+  if (!rows) rows = Array.from({ length: 100_000 }, (_, i) => makeRow(i));
+  return rows;
+}
+
+export const HundredThousandRows: Story = {
+  render: (args) => ({ Component: CardGrid, props: { ...args, data: getRows() } }),
+};
+```
+
+Story behaviors worth preserving:
+- `StaticData`: local array, verifies rendering, context menu, and search
+- `ServerSideCursorPaging`: cursor-forward paging, verifies infinite scroll
+- `ServerSideSearch`: `ilike` filters sent on every keystroke
+- `ServerError`: `onLoadError` fires on non-2xx response
+- `MultiSelect` / `SingleSelect`: selection modes and keyboard shortcuts
+- `FlipMode`: `cardMaxFrontColumns` splits columns, flip/back buttons match position
+- `ImageCards`: fully custom `card` + `cardBack` snippets via a wrapper `.svelte` component
+- `HundredThousandRows`: virtualizer handles 100 000 rows; only visible rows are in the DOM
+
 ### BetterMenu: interaction-first menu behavior
 
 Based on: