@warkypublic/svelix 0.1.43 → 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/Gridler/components/GridlerCanvas.svelte

@@ -1137,6 +1137,7 @@
   style:--gridler-bg-header-focus={mergedTheme.bgHeaderHasFocus}
   style:--gridler-bg-search-result={mergedTheme.bgSearchResult}
   style:--gridler-header-height={`${headerHeight}px`}
+  style:--gridler-row-marker-width={`${rowMarkerWidth}px`}
   onfocusin={handleFocusIn}
   onfocusout={handleFocusOut}
   onmouseenter={onGridEnter}

package/dist/components/Gridler/components/GridlerFull.svelte

@@ -970,7 +970,10 @@
   .gf-loading,
   .gf-error {
     position: absolute;
-    inset: 0;
+    top: var(--gridler-header-height, 36px);
+    left: var(--gridler-row-marker-width, 0px);
+    right: 0;
+    bottom: 0;
     display: flex;
     align-items: center;
     justify-content: center;

package/dist/components/Gridler/components/GridlerSearch.svelte

@@ -9,11 +9,11 @@
 
   const { value, onValueChange, onClose }: Props = $props();
 
-  let inputRef: HTMLInputElement | undefined = $state();
+  let inputRef: HTMLInputElement | undefined;
 
-  $effect(() => {
+  export function focus() {
     inputRef?.focus();
-  });
+  }
 </script>
 
 <div class="gridler-search" role="search">

package/dist/components/Gridler/components/GridlerSearch.svelte.d.ts

@@ -3,6 +3,8 @@ interface Props {
     onValueChange: (v: string) => void;
     onClose?: () => void;
 }
-declare const GridlerSearch: import("svelte").Component<Props, {}, "">;
+declare const GridlerSearch: import("svelte").Component<Props, {
+    focus: () => void;
+}, "">;
 type GridlerSearch = ReturnType<typeof GridlerSearch>;
 export default GridlerSearch;

package/dist/components/Gridler/components/GridlerSearchToggle.svelte

@@ -11,6 +11,12 @@
   }
 
   const { show, value, onToggle, onValueChange, onClose }: Props = $props();
+
+  let search: GridlerSearch | undefined = $state();
+
+  $effect(() => {
+    if (show) search?.focus();
+  });
 </script>
 
 <button
@@ -25,6 +31,7 @@
 
 {#if show}
   <GridlerSearch
+    bind:this={search}
     {value}
     {onValueChange}
     {onClose}

package/dist/components/Gridler/types.d.ts

@@ -1,4 +1,4 @@
-import type { GridColumn, GridCommonProps, GridColumnSortOrder, GridColumnFilters } from '../Types/generic_grid';
+import type { GridColumn, GridCommonProps, GridColumnSortOrder, GridColumnFilters, GridContextMenuItem } from '../Types/generic_grid';
 import type { Options } from '@warkypublic/resolvespec-js';
 export type { GridColumnSortOrder, GridColumnFilters };
 export type Item = [col: number, row: number];
@@ -60,8 +60,6 @@ export interface GridlerColumn extends GridColumn<Record<string, unknown>> {
     width: number;
     /** Per-column theme overrides applied during canvas rendering. */
     themeOverride?: Partial<GridlerTheme>;
-    /** Show a context-menu trigger button on this column's header. */
-    hasMenu?: boolean;
 }
 export interface GridlerCellFormatOptions {
     /** Currency code for 'currency' cells (default: 'ZAR'). */
@@ -166,14 +164,6 @@ export interface GridlerProps extends GridCommonProps<Record<string, unknown>> {
     /** Show the built-in search bar. Also settable via settings.showSearch. */
     showSearch?: boolean;
 }
-export interface GridlerContextMenuItem {
-    id: string;
-    label: string;
-    disabled?: boolean;
-    icon?: string;
-    /** Use 'separator' to render a divider line. */
-    kind?: 'item' | 'separator';
-    onselect?: (rowData?: Record<string, unknown>) => void;
-}
+export type GridlerContextMenuItem = GridContextMenuItem<Record<string, unknown>>;
 export declare const DEFAULT_THEME: GridlerTheme;
 export declare const DEFAULT_THEME_DARK: GridlerTheme;

package/dist/components/Gridler/utils/cellContent.js

@@ -1,8 +1,9 @@
+import { getNestedValue } from "@warkypublic/artemis-kit/object";
 export function rowToCell(row, key) {
     if (row === undefined) {
         return { kind: "text", data: null, displayData: "", allowOverlay: false, allowEditing: false };
     }
-    const raw = key ? row[key] : undefined;
+    const raw = key ? getNestedValue(key, row) : undefined;
     const display = raw == null ? "" : String(raw);
     if (typeof raw === "number") {
         return { kind: "number", data: raw, displayData: display, allowOverlay: true, allowEditing: true };

package/dist/components/Gridler/utils/filters.js

@@ -1,3 +1,4 @@
+import { getNestedValue } from "@warkypublic/artemis-kit/object";
 export function gridColumnFiltersToFilterOptions(f) {
     return Object.entries(f).map(([id, filter]) => ({
         column: filter.dataKey ?? id,
@@ -15,8 +16,7 @@ export function applyLocalFilter(data, filters, columns) {
         for (const [colId, filter] of entries) {
             const colDef = columns.find((c) => c.id === colId);
             const key = colDef?.dataKey ?? colId;
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            const rawVal = row[key];
+            const rawVal = getNestedValue(key, row);
             const cellStr = rawVal == null ? "" : String(rawVal).toLowerCase();
             const filterVal = filter.value?.toLowerCase() ?? "";
             const op = filter.op ?? "contains";

package/dist/components/Gridler/utils/sort.js

@@ -1,3 +1,4 @@
+import { getNestedValue } from "@warkypublic/artemis-kit/object";
 export function compareValues(a, b) {
     if (a == null && b == null)
         return 0;
@@ -27,7 +28,7 @@ export function applyLocalSort(data, sortOptions, columns) {
         for (const { column, direction } of sortOptions) {
             const colDef = columns.find((c) => c.id === column);
             const key = colDef?.dataKey ?? column;
-            const cmp = compareValues(a[key], b[key]);
+            const cmp = compareValues(getNestedValue(key, a), getNestedValue(key, b));
             if (cmp !== 0)
                 return direction === "asc" ? cmp : -cmp;
         }

package/dist/components/Types/generic_grid.d.ts

@@ -25,6 +25,8 @@ export interface GridColumn<RowDataType = unknown, CellType = unknown> {
     disableSearch?: boolean | ((item: RowDataType) => boolean);
     span?: [startRow: number, endRow: number];
     renderCell?: (item: RowDataType) => CellType;
+    /** Show a context-menu trigger button on this column's header. */
+    hasMenu?: boolean;
 }
 export interface GridColumnSortOrder {
     [id: string]: "asc" | "desc" | "none";
@@ -44,34 +46,74 @@ export interface GridEventCoords {
     code?: string;
 }
 export type GridEventDetail = Record<string, unknown>;
+/** Generic context-menu item. Implementations (e.g. GridlerContextMenuItem) extend this. */
+export interface GridContextMenuItem<RowDataType = unknown> {
+    id: string;
+    label: string;
+    disabled?: boolean;
+    icon?: string;
+    /** Use 'separator' to render a divider line. */
+    kind?: 'item' | 'separator';
+    onselect?: (rowData?: RowDataType) => void;
+}
 export interface GridCommonProps<RowDataType = unknown, CellType = unknown> {
     columns: Array<GridColumn<RowDataType, CellType>>;
     width?: string | number;
     height?: string | number;
     rowHeight?: number;
     headerHeight?: number;
-    onCellEvent?: (type: GridCellEventType, item: RowDataType, column: GridColumn<RowDataType, CellType>, coords?: GridEventCoords, // For keyboard/mouse events, code represents the key code of the pressed key
-    detail?: GridEventDetail) => void;
-    onGridEvent?: (type: GridEventType, item?: RowDataType, column?: GridColumn<RowDataType, CellType>, coords?: GridEventCoords, // For keyboard/mouse events, code represents the key code of the pressed key
-    detail?: GridEventDetail) => void;
+    /** Number of columns pinned to the left. */
+    fixedColumns?: number;
+    /** When true, the grid manages column reordering internally on drag. */
+    manageColumns?: boolean;
+    /** Called when the internal column order changes (only fires when manageColumns is true). */
+    onColumnsChange?: (columns: GridColumn<RowDataType, CellType>[]) => void;
+    onCellEvent?: (type: GridCellEventType, item: RowDataType, column: GridColumn<RowDataType, CellType>, coords?: GridEventCoords, detail?: GridEventDetail) => void;
+    onGridEvent?: (type: GridEventType, item?: RowDataType, column?: GridColumn<RowDataType, CellType>, coords?: GridEventCoords, detail?: GridEventDetail) => void;
     onMenuClick?: (item?: RowDataType, column?: GridColumn<RowDataType, CellType>, coords?: GridEventCoords) => Promise<void>;
+    /** Called when a body row is clicked. */
+    onRowClick?: (row: number, rowData?: RowDataType) => void;
+    /** Called when a body row is double-clicked. */
+    onRowDblClick?: (row: number, rowData?: RowDataType) => void;
+    /** Called when a body row receives a context-menu event. */
+    onRowContextMenu?: (row: number, rowData?: RowDataType, x?: number, y?: number) => void;
+    /** Called when a cell is double-clicked. */
+    onCellDblClick?: (row: number, column: GridColumn<RowDataType, CellType>, rowData?: RowDataType) => void;
     onColumnMoved?: (startIndex: number, endIndex: number) => void;
     onSortOrderChange?: (sortOrder: GridColumnSortOrder) => void;
     sortOrder?: GridColumnSortOrder;
     onFilterChange?: (filters: GridColumnFilters) => void;
     filters?: GridColumnFilters;
-    onSearchValueChange?: (value: string) => void;
     searchValue?: string;
+    /** Uncontrolled initial search value (only used when searchValue is undefined). */
+    defaultSearchValue?: string;
+    onSearchValueChange?: (value: string) => void;
+    /**
+     * When true, the search input value is translated into server-side filters
+     * instead of only being used for client-side highlighting.
+     */
+    serverSideSearch?: boolean;
+    /** Columns searched when serverSideSearch is true. Defaults to all columns. */
+    searchColumns?: string[];
     selectedItems?: RowDataType[];
     onSelectedItemsChange?: (items: RowDataType[]) => void;
+    /** Extra items appended to the built-in context menu. */
+    menuItems?: GridContextMenuItem<RowDataType>[];
+    /** Called when any context menu item is selected (built-in or custom). */
+    onMenuItemSelect?: (item: GridContextMenuItem<RowDataType>, rowData?: RowDataType) => void;
     dataSource?: "local" | "resolvespec" | "headerspec" | "websockspec" | "custom";
     dataSourceOptions?: {
         url?: string;
         authToken?: string;
         schema?: string;
         entity?: string;
+        /**
+         * Row field whose value is used as the cursor for subsequent page requests.
+         * Defaults to 'id'. Can also be set via the top-level uniqueID shorthand.
+         */
         uniqueID?: string;
         headers?: Record<string, string>;
+        /** Fields to fetch in addition to column fields (for filters, sort, relations). */
         hotfields?: string[];
         /**
          * Default ResolveSpec options sent with every request. Grid-controlled sort, filters, limit,
@@ -93,6 +135,32 @@ export interface GridCommonProps<RowDataType = unknown, CellType = unknown> {
     };
     data?: RowDataType[] | (() => Promise<RowDataType[]>);
     onDataChange?: (data: RowDataType[]) => Promise<void>;
+    /** Rows per cursor-forward page. Defaults to 200. */
+    pageSize?: number;
+    /**
+     * Shorthand for dataSourceOptions.uniqueID.
+     * Row field whose value is passed as cursor_forward on subsequent requests.
+     */
+    uniqueID?: string;
+    /** Called when a server fetch fails. */
+    onLoadError?: (error: string) => void;
+    /**
+     * Bindable. Reflects the server-reported total row count.
+     * Updated after every successful page fetch; 0 until the first response.
+     */
+    total?: number;
+    /**
+     * Bindable. true while any server fetch is in flight.
+     */
+    loading?: boolean;
+    /** When true, all cells are read-only. Also settable via settings.readonly. */
+    readonly?: boolean;
+    /** Allow users to drag column edges to resize. Also settable via settings.resizableColumns. */
+    resizableColumns?: boolean;
+    /** Show the built-in search bar. Also settable via settings.showSearch. */
+    showSearch?: boolean;
+    /** Row-marker style shown in the leading column. Also settable via settings.rowMarkerType. */
+    rowMarkers?: "checkbox" | "number" | "none";
     settings?: {
         hideHeader?: boolean;
         showRowMarkers?: boolean;

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";