@humanspeak/svelte-headless-table 6.0.2 → 6.0.4

package/dist/plugins/addVirtualScroll.js

@@ -0,0 +1,302 @@
+import { derived, get, readable, writable } from 'svelte/store';
+import { HeightManager } from '../utils/HeightManager.js';
+/**
+ * Default configuration values for virtual scroll.
+ */
+const DEFAULTS = {
+    estimatedRowHeight: 40,
+    bufferSize: 10,
+    loadMoreThreshold: 200
+};
+/**
+ * Creates a virtual scroll plugin that enables virtualized table rendering.
+ * Only renders rows that are visible in the viewport plus a buffer, dramatically
+ * improving performance for large datasets.
+ *
+ * @template Item - The type of data items in the table.
+ * @param config - Configuration options for virtual scrolling.
+ * @returns A TablePlugin that provides virtualization functionality.
+ *
+ * @example
+ * ```typescript
+ * const table = createTable(data, {
+ *   virtualScroll: addVirtualScroll({
+ *     estimatedRowHeight: 48,
+ *     bufferSize: 5,
+ *     onLoadMore: async () => {
+ *       const more = await fetchMoreItems()
+ *       data.update(d => [...d, ...more])
+ *     },
+ *     hasMore: hasMoreStore
+ *   })
+ * })
+ *
+ * const {
+ *   virtualScroll,
+ *   topSpacerHeight,
+ *   bottomSpacerHeight,
+ *   visibleRange
+ * } = table.pluginStates.virtualScroll
+ * ```
+ */
+export const addVirtualScroll = ({ onLoadMore, hasMore: hasMoreConfig, loadMoreThreshold = DEFAULTS.loadMoreThreshold, estimatedRowHeight = DEFAULTS.estimatedRowHeight, bufferSize = DEFAULTS.bufferSize, getRowHeight } = {}) => () => {
+    // Height management
+    const heightManager = new HeightManager(estimatedRowHeight);
+    // Scroll state
+    const scrollTop = writable(0);
+    const viewportHeight = writable(0);
+    // Row IDs array (set by derivePageRows, used for calculations)
+    // This is a simple array, not derived from rows to avoid circular deps
+    const rowIds = writable([]);
+    // Loading state
+    const isLoading = writable(false);
+    const hasMoreStore = typeof hasMoreConfig === 'object' && hasMoreConfig !== null
+        ? hasMoreConfig
+        : writable(hasMoreConfig ?? false);
+    // Track whether we've already triggered a load to prevent duplicates
+    let loadMorePending = false;
+    // Scroll container reference (set by the action)
+    let scrollContainer = null;
+    // Cache for row lookup (set by derivePageRows)
+    let allRowsCache = [];
+    // Visible range calculation
+    const visibleRange = derived([rowIds, scrollTop, viewportHeight], ([$rowIds, $scrollTop, $viewportHeight]) => {
+        return heightManager.getVisibleRange($rowIds, $scrollTop, $viewportHeight, bufferSize);
+    });
+    // Total height of all rows
+    const totalHeight = derived(rowIds, ($rowIds) => {
+        return heightManager.getTotalHeight($rowIds);
+    });
+    // Spacer heights
+    const topSpacerHeight = derived([rowIds, visibleRange], ([$rowIds, $range]) => {
+        return heightManager.getOffsetForIndex($rowIds, $range.start);
+    });
+    const bottomSpacerHeight = derived([rowIds, visibleRange, totalHeight], ([$rowIds, $range, $total]) => {
+        const endOffset = heightManager.getOffsetForIndex($rowIds, $range.end);
+        return Math.max(0, $total - endOffset);
+    });
+    // Total and rendered row counts
+    const totalRows = derived(rowIds, ($rowIds) => $rowIds.length);
+    const renderedRows = derived(visibleRange, ($range) => $range.end - $range.start);
+    /**
+     * Check if we should load more data and trigger the callback.
+     */
+    const checkLoadMore = () => {
+        if (!onLoadMore || loadMorePending || !get(hasMoreStore)) {
+            return;
+        }
+        const $scrollTop = get(scrollTop);
+        const $viewportHeight = get(viewportHeight);
+        const $totalHeight = get(totalHeight);
+        const distanceFromBottom = $totalHeight - ($scrollTop + $viewportHeight);
+        if (distanceFromBottom <= loadMoreThreshold) {
+            loadMorePending = true;
+            isLoading.set(true);
+            const result = onLoadMore();
+            if (result instanceof Promise) {
+                result.finally(() => {
+                    loadMorePending = false;
+                    isLoading.set(false);
+                });
+            }
+            else {
+                loadMorePending = false;
+                isLoading.set(false);
+            }
+        }
+    };
+    /**
+     * Handle scroll events from the container.
+     */
+    const handleScroll = (event) => {
+        const target = event.target;
+        const newScrollTop = target.scrollTop;
+        scrollTop.set(newScrollTop);
+        checkLoadMore();
+    };
+    /**
+     * Svelte action to attach to the scroll container.
+     */
+    const virtualScroll = (node) => {
+        scrollContainer = node;
+        // Set initial viewport height
+        const initialHeight = node.clientHeight;
+        viewportHeight.set(initialHeight);
+        // Create ResizeObserver to track viewport size changes
+        const resizeObserver = new ResizeObserver((entries) => {
+            for (const entry of entries) {
+                viewportHeight.set(entry.contentRect.height);
+            }
+        });
+        resizeObserver.observe(node);
+        // Attach scroll listener
+        node.addEventListener('scroll', handleScroll, { passive: true });
+        // Check if we need to load more initially
+        checkLoadMore();
+        return {
+            destroy() {
+                scrollContainer = null;
+                node.removeEventListener('scroll', handleScroll);
+                resizeObserver.disconnect();
+            }
+        };
+    };
+    /**
+     * Scroll to a specific row index.
+     */
+    const scrollToIndex = (index, options = {}) => {
+        if (!scrollContainer) {
+            return;
+        }
+        const { align = 'start', behavior = 'auto' } = options;
+        const $rowIds = get(rowIds);
+        if (index < 0 || index >= $rowIds.length) {
+            return;
+        }
+        const targetOffset = heightManager.getOffsetForIndex($rowIds, index);
+        const rowHeight = heightManager.getHeight($rowIds[index]);
+        const $viewportHeight = get(viewportHeight);
+        let scrollPosition;
+        switch (align) {
+            case 'center':
+                scrollPosition = targetOffset - ($viewportHeight - rowHeight) / 2;
+                break;
+            case 'end':
+                scrollPosition = targetOffset - $viewportHeight + rowHeight;
+                break;
+            case 'auto': {
+                // Check if already visible
+                const $scrollTop = get(scrollTop);
+                const visibleStart = $scrollTop;
+                const visibleEnd = $scrollTop + $viewportHeight;
+                const rowStart = targetOffset;
+                const rowEnd = targetOffset + rowHeight;
+                if (rowStart >= visibleStart && rowEnd <= visibleEnd) {
+                    // Already fully visible
+                    return;
+                }
+                else if (rowStart < visibleStart) {
+                    scrollPosition = rowStart;
+                }
+                else {
+                    scrollPosition = rowEnd - $viewportHeight;
+                }
+                break;
+            }
+            case 'start':
+            default:
+                scrollPosition = targetOffset;
+                break;
+        }
+        scrollContainer.scrollTo({
+            top: Math.max(0, scrollPosition),
+            behavior
+        });
+    };
+    /**
+     * Notify the plugin that a row has been measured.
+     */
+    const measureRow = (rowId, height) => {
+        // If getRowHeight is provided, prefer that
+        if (getRowHeight) {
+            const row = allRowsCache.find((r) => r.id === rowId);
+            if (row?.isData() && row.original) {
+                const specifiedHeight = getRowHeight(row.original);
+                if (specifiedHeight !== height) {
+                    height = specifiedHeight;
+                }
+            }
+        }
+        const changed = heightManager.setHeight(rowId, height);
+        if (changed) {
+            // Force recalculation of derived stores by updating rowIds
+            // (touching it with the same value)
+            rowIds.update((v) => v);
+        }
+    };
+    /**
+     * Svelte action to automatically measure row height.
+     * Attach to each <tr> element: <tr use:measureRowAction={row.id}>
+     */
+    const measureRowAction = (node, rowId) => {
+        // Measure initial height
+        const measure = () => {
+            const height = node.getBoundingClientRect().height;
+            if (height > 0) {
+                measureRow(rowId, height);
+            }
+        };
+        // Measure on mount
+        measure();
+        // Use ResizeObserver to track height changes
+        const resizeObserver = new ResizeObserver(() => {
+            measure();
+        });
+        resizeObserver.observe(node);
+        return {
+            update(newRowId) {
+                rowId = newRowId;
+                measure();
+            },
+            destroy() {
+                resizeObserver.disconnect();
+            }
+        };
+    };
+    // Plugin state
+    const pluginState = {
+        scrollTop: { subscribe: scrollTop.subscribe },
+        viewportHeight: { subscribe: viewportHeight.subscribe },
+        visibleRange,
+        totalHeight,
+        topSpacerHeight,
+        bottomSpacerHeight,
+        isLoading: { subscribe: isLoading.subscribe },
+        hasMore: { subscribe: hasMoreStore.subscribe },
+        virtualScroll,
+        scrollToIndex,
+        measureRow,
+        measureRowAction,
+        totalRows,
+        renderedRows
+    };
+    /**
+     * Derive visible rows from all page rows.
+     * Re-runs when rows, scroll position, or viewport height changes.
+     */
+    const derivePageRows = (rows) => {
+        return derived([rows, scrollTop, viewportHeight], ([$rows, $scrollTop, $viewportHeight], set) => {
+            // Cache rows for lookup in measureRow and hooks
+            allRowsCache = $rows;
+            // Extract row IDs and update the store (only if changed)
+            const ids = $rows.map((r) => r.id);
+            const currentIds = get(rowIds);
+            if (ids.length !== currentIds.length ||
+                ids.some((id, i) => id !== currentIds[i])) {
+                rowIds.set(ids);
+            }
+            // Calculate visible range
+            const range = heightManager.getVisibleRange(ids, $scrollTop, $viewportHeight, bufferSize);
+            // Return only the visible subset
+            const visibleRows = $rows.slice(range.start, range.end);
+            set(visibleRows);
+        });
+    };
+    // Hooks to add virtual index props to rows
+    const hooks = {
+        'tbody.tr': (row) => {
+            const virtualIndex = allRowsCache.findIndex((r) => r.id === row.id);
+            return {
+                props: readable({
+                    virtualIndex: virtualIndex >= 0 ? virtualIndex : 0,
+                    isVirtual: true
+                })
+            };
+        }
+    };
+    return {
+        pluginState,
+        derivePageRows,
+        hooks
+    };
+};

package/dist/plugins/addVirtualScroll.types.d.ts

@@ -0,0 +1,139 @@
+import type { Action } from 'svelte/action';
+import type { Readable, Writable } from 'svelte/store';
+/**
+ * Configuration options for the addVirtualScroll plugin.
+ *
+ * @template Item - The type of data items in the table.
+ */
+export interface VirtualScrollConfig<Item> {
+    /**
+     * Callback fired when more data should be loaded (infinite scroll).
+     * Return a promise to indicate when loading is complete.
+     */
+    onLoadMore?: () => void | Promise<void>;
+    /**
+     * Whether there is more data available to load.
+     * Can be a boolean or a Writable store.
+     */
+    hasMore?: Writable<boolean> | boolean;
+    /**
+     * Number of pixels from the bottom to trigger onLoadMore.
+     * @default 200
+     */
+    loadMoreThreshold?: number;
+    /**
+     * Estimated height of each row in pixels.
+     * Used for initial calculations before rows are measured.
+     * @default 40
+     */
+    estimatedRowHeight?: number;
+    /**
+     * Number of rows to render above and below the visible area.
+     * Higher values reduce flicker during fast scrolling but render more DOM nodes.
+     * @default 10
+     */
+    bufferSize?: number;
+    /**
+     * Optional function to get the height of a specific row.
+     * If provided, enables variable row heights.
+     */
+    getRowHeight?: (_item: Item) => number;
+}
+/**
+ * Visible range of rows.
+ */
+export interface VisibleRange {
+    /** Index of the first visible row (0-based). */
+    start: number;
+    /** Index of the last visible row (exclusive). */
+    end: number;
+}
+/**
+ * Options for scrollToIndex method.
+ */
+export interface ScrollToIndexOptions {
+    /** Alignment of the target row within the viewport. */
+    align?: 'start' | 'center' | 'end' | 'auto';
+    /** Scroll behavior. */
+    behavior?: ScrollBehavior;
+}
+/**
+ * State exposed by the addVirtualScroll plugin.
+ *
+ * @template Item - The type of data items in the table.
+ */
+export interface VirtualScrollState<Item> {
+    /**
+     * Current scroll position of the container.
+     */
+    scrollTop: Readable<number>;
+    /**
+     * Height of the scroll container viewport.
+     */
+    viewportHeight: Readable<number>;
+    /**
+     * Range of currently visible row indices.
+     */
+    visibleRange: Readable<VisibleRange>;
+    /**
+     * Total height of all rows (for scroll container sizing).
+     */
+    totalHeight: Readable<number>;
+    /**
+     * Height of the top spacer element.
+     */
+    topSpacerHeight: Readable<number>;
+    /**
+     * Height of the bottom spacer element.
+     */
+    bottomSpacerHeight: Readable<number>;
+    /**
+     * Whether more data is currently being loaded.
+     */
+    isLoading: Readable<boolean>;
+    /**
+     * Whether there is more data available to load.
+     */
+    hasMore: Readable<boolean>;
+    /**
+     * Svelte action to attach to the scroll container.
+     * Handles scroll event listeners and viewport tracking.
+     */
+    virtualScroll: Action<HTMLElement>;
+    /**
+     * Scroll to a specific row index.
+     */
+    scrollToIndex: (_index: number, _options?: ScrollToIndexOptions) => void;
+    /**
+     * Notify the plugin that a row has been measured.
+     * Called automatically when rows are rendered.
+     * @internal
+     */
+    measureRow: (_rowId: string, _height: number) => void;
+    /**
+     * Svelte action to attach to each table row for automatic height measurement.
+     * Usage: <tr use:measureRowAction={row.id}>
+     */
+    measureRowAction: Action<HTMLElement, string>;
+    /**
+     * Total number of rows (before virtualization).
+     */
+    totalRows: Readable<number>;
+    /**
+     * Number of rows currently rendered in the DOM.
+     */
+    renderedRows: Readable<number>;
+}
+/**
+ * Props added to body rows by the virtual scroll plugin.
+ */
+export interface VirtualScrollRowProps {
+    /**
+     * Index of this row in the full dataset.
+     */
+    virtualIndex: number;
+    /**
+     * Whether this row is currently in the visible range.
+     */
+    isVirtual: boolean;
+}

package/dist/plugins/addVirtualScroll.types.js

@@ -0,0 +1 @@
+export {};

package/dist/plugins/index.d.ts

@@ -12,4 +12,5 @@ export * from './addSelectedRows';
 export * from './addSortBy';
 export * from './addSubRows';
 export * from './addTableFilter';
+export * from './addVirtualScroll';
 export * from '../types/TablePlugin';

package/dist/plugins/index.js

@@ -12,5 +12,6 @@ export * from './addSelectedRows';
 export * from './addSortBy';
 export * from './addSubRows';
 export * from './addTableFilter';
+export * from './addVirtualScroll';
 // plugin helper types
 export * from '../types/TablePlugin';

package/dist/tableComponent.d.ts

@@ -2,18 +2,59 @@ import type { TableState } from './createViewModel.js';
 import type { AnyPlugins, ComponentKeys, ElementHook, PluginTablePropSet } from './types/TablePlugin.js';
 import type { Clonable } from './utils/clone.js';
 import { type Readable } from 'svelte/store';
+/**
+ * Initialization options for a TableComponent.
+ */
 export interface TableComponentInit {
+    /** Unique identifier for the component. */
     id: string;
 }
+/**
+ * Abstract base class for all table components (rows, cells, etc.).
+ * Provides common functionality for state injection, hook application, and attribute merging.
+ *
+ * @template Item - The type of data items in the table.
+ * @template Plugins - The plugins used by the table.
+ * @template Key - The component key type (e.g., 'tbody.tr', 'tbody.tr.td').
+ */
 export declare abstract class TableComponent<Item, Plugins extends AnyPlugins, Key extends ComponentKeys> implements Clonable<TableComponent<Item, Plugins, Key>> {
+    /** Unique identifier for the component. */
     id: string;
+    /**
+     * Creates a new TableComponent.
+     *
+     * @param init - Initialization options.
+     */
     constructor({ id }: TableComponentInit);
     private attrsForName;
+    /**
+     * Gets the merged HTML attributes from all applied plugins.
+     *
+     * @returns A readable store of merged attributes.
+     */
     attrs(): Readable<Record<string, unknown>>;
     private propsForName;
+    /**
+     * Gets the merged props from all applied plugins.
+     *
+     * @returns A readable store of plugin props keyed by plugin name.
+     */
     props(): Readable<PluginTablePropSet<Plugins>[Key]>;
+    /** Reference to the table state, injected after creation. */
     state?: TableState<Item, Plugins>;
+    /**
+     * Injects the table state reference into this component.
+     *
+     * @param state - The table state to inject.
+     */
     injectState(state: TableState<Item, Plugins>): void;
+    /**
+     * Applies a plugin hook to this component.
+     * Hooks can provide both props and attributes.
+     *
+     * @param pluginName - The name of the plugin.
+     * @param hook - The element hook containing props and/or attrs.
+     */
     applyHook(pluginName: string, hook: ElementHook<Record<string, unknown>, Record<string, unknown>>): void;
     abstract clone(): TableComponent<Item, Plugins, Key>;
 }

package/dist/tableComponent.js

@@ -1,12 +1,31 @@
 import { finalizeAttributes, mergeAttributes } from './utils/attributes.js';
 import { derivedKeys } from '@humanspeak/svelte-subscribe';
 import { derived } from 'svelte/store';
+/**
+ * Abstract base class for all table components (rows, cells, etc.).
+ * Provides common functionality for state injection, hook application, and attribute merging.
+ *
+ * @template Item - The type of data items in the table.
+ * @template Plugins - The plugins used by the table.
+ * @template Key - The component key type (e.g., 'tbody.tr', 'tbody.tr.td').
+ */
 export class TableComponent {
+    /** Unique identifier for the component. */
     id;
+    /**
+     * Creates a new TableComponent.
+     *
+     * @param init - Initialization options.
+     */
     constructor({ id }) {
         this.id = id;
     }
     attrsForName = {};
+    /**
+     * Gets the merged HTML attributes from all applied plugins.
+     *
+     * @returns A readable store of merged attributes.
+     */
     attrs() {
         return derived(Object.values(this.attrsForName), ($attrsArray) => {
             let $mergedAttrs = {};
@@ -17,13 +36,31 @@ export class TableComponent {
         });
     }
     propsForName = {};
+    /**
+     * Gets the merged props from all applied plugins.
+     *
+     * @returns A readable store of plugin props keyed by plugin name.
+     */
     props() {
         return derivedKeys(this.propsForName);
     }
+    /** Reference to the table state, injected after creation. */
     state;
+    /**
+     * Injects the table state reference into this component.
+     *
+     * @param state - The table state to inject.
+     */
     injectState(state) {
         this.state = state;
     }
+    /**
+     * Applies a plugin hook to this component.
+     * Hooks can provide both props and attributes.
+     *
+     * @param pluginName - The name of the plugin.
+     * @param hook - The element hook containing props and/or attrs.
+     */
     applyHook(pluginName, hook) {
         if (hook.props !== undefined) {
             this.propsForName[pluginName] = hook.props;

package/dist/types/Action.d.ts

@@ -1,5 +1,19 @@
+/**
+ * Return type for Svelte actions.
+ * Contains optional lifecycle methods for updating and destroying the action.
+ *
+ * @template Props - The type of props passed to the action.
+ */
 export type ActionReturnType<Props = any> = {
-    update?: (newProps: Props) => void;
+    /** Called when props change. */
+    update?: (_newProps: Props) => void;
+    /** Called when the element is removed from the DOM. */
     destroy?: () => void;
 };
-export type Action<Props> = (node: Element, props?: Props) => ActionReturnType<Props> | void;
+/**
+ * A Svelte action function that can be applied to DOM elements.
+ * Actions receive an element and optional props, returning lifecycle methods.
+ *
+ * @template Props - The type of props passed to the action.
+ */
+export type Action<Props> = (_node: Element, _props?: Props) => ActionReturnType<Props> | void;

package/dist/types/Entries.d.ts

@@ -1,3 +1,9 @@
+/**
+ * Converts an object type to its entries type (array of [key, value] tuples).
+ * Similar to the return type of Object.entries() but with stronger typing.
+ *
+ * @template Obj - The object type to convert.
+ */
 export type Entries<Obj> = NonNullable<{
     [K in keyof Obj]: [K, NonNullable<Obj[K]>];
 }[keyof Obj]>[];

package/dist/types/KeyPath.d.ts

@@ -1,6 +1,26 @@
+/**
+ * Generates a union of all valid dot-notation key paths for an object type.
+ * Useful for type-safe property access with nested objects.
+ *
+ * @template T - The object type to extract paths from.
+ * @template D - Maximum depth to traverse (default 3 to avoid infinite recursion).
+ * @example
+ * ```typescript
+ * type Person = { name: string; address: { city: string } }
+ * type Paths = KeyPath<Person> // 'name' | 'address' | 'address.city'
+ * ```
+ */
 export type KeyPath<T, D extends number = 3> = KeyPath_<T, D, []>;
+/**
+ * Internal recursive helper for KeyPath.
+ * @internal
+ */
 type KeyPath_<T, D extends number, S extends unknown[]> = D extends S['length'] ? never : T extends object ? {
     [K in keyof T]-?: K extends string ? `${K}` | Join<K, KeyPath_<T[K], D, [never, ...S]>> : K extends number ? `[${K}]` | Join<`[${K}]`, KeyPath_<T[K], D, [never, ...S]>> : never;
 }[keyof T] : '';
+/**
+ * Internal helper for joining path segments with dots.
+ * @internal
+ */
 type Join<K, P> = K extends string | number ? P extends string | number ? P extends `[${string}` ? `${K}${P}` : `${K}${'' extends P ? '' : '.'}${P}` : never : never;
 export {};

package/dist/types/Label.d.ts

@@ -3,6 +3,29 @@ import type { DataBodyCell, DisplayBodyCell } from '../bodyCells.js';
 import type { TableState } from '../createViewModel.js';
 import type { HeaderCell } from '../headerCells.js';
 import type { AnyPlugins } from './TablePlugin.js';
-export type DataLabel<Item, Plugins extends AnyPlugins = AnyPlugins, Value = any> = (cell: DataBodyCell<Item, AnyPlugins, Value>, state: TableState<Item, Plugins>) => RenderConfig;
-export type DisplayLabel<Item, Plugins extends AnyPlugins = AnyPlugins> = (cell: DisplayBodyCell<Item>, state: TableState<Item, Plugins>) => RenderConfig;
-export type HeaderLabel<Item, Plugins extends AnyPlugins = AnyPlugins> = RenderConfig | ((cell: HeaderCell<Item, Plugins>, state: TableState<Item, Plugins>) => RenderConfig);
+/**
+ * A render function for data body cells.
+ * Receives the cell and table state, returns content to render.
+ *
+ * @template Item - The type of data items in the table.
+ * @template Plugins - The plugins used by the table.
+ * @template Value - The type of the cell value.
+ */
+export type DataLabel<Item, Plugins extends AnyPlugins = AnyPlugins, Value = any> = (_cell: DataBodyCell<Item, AnyPlugins, Value>, _state: TableState<Item, Plugins>) => RenderConfig;
+/**
+ * A render function for display body cells.
+ * Receives the cell and table state, returns content to render.
+ *
+ * @template Item - The type of data items in the table.
+ * @template Plugins - The plugins used by the table.
+ */
+export type DisplayLabel<Item, Plugins extends AnyPlugins = AnyPlugins> = (_cell: DisplayBodyCell<Item>, _state: TableState<Item, Plugins>) => RenderConfig;
+/**
+ * A label for header cells. Can be static content or a render function.
+ * If the function type is removed from the union, generics will not be
+ * inferred for subtypes.
+ *
+ * @template Item - The type of data items in the table.
+ * @template Plugins - The plugins used by the table.
+ */
+export type HeaderLabel<Item, Plugins extends AnyPlugins = AnyPlugins> = RenderConfig | ((_cell: HeaderCell<Item, Plugins>, _state: TableState<Item, Plugins>) => RenderConfig);

package/dist/types/Matrix.d.ts

@@ -1 +1,7 @@
+/**
+ * A two-dimensional array (matrix) type.
+ * Used for header row/column matrices and other grid-like structures.
+ *
+ * @template T - The type of elements in the matrix.
+ */
 export type Matrix<T> = T[][];