@x33025/sveltely 0.1.24 → 0.1.25

package/dist/components/Library/Table/Table.svelte

@@ -8,6 +8,7 @@
 	import { extractLoaderProps, resolveLoaderOptions, type LoaderProps } from '../../../style/loader';
 	import { extractLayoutProps, layoutStyle, type LayoutProps } from '../../../style/layout';
 	import { extractStyleProps, surfaceStyle, type StyleProps } from '../../../style/surface';
+	import { tableViewportLayout, type ViewportGeometry, type ViewportOverscan } from '../../../viewport';
 	import ScrollView from '../ScrollView';
 	import { TABLE_CONTEXT } from './context';
 	import type {
@@ -31,6 +32,10 @@
 		columnHeaders?: TableColumnHeaderVisibility;
 		columnCustomization?: TableColumnCustomization;
 		emptyLabel?: string;
+		virtualized?: boolean;
+		rowHeight?: number;
+		headerHeight?: number;
+		overscan?: ViewportOverscan;
 		onSortOrderChange?: (sortOrder: TableSortDescriptor<T>[]) => void;
 		onSelectionChange?: (selection: TableSelection) => void;
 	} & LayoutProps &
@@ -48,6 +53,10 @@
 		columnHeaders = 'visible',
 		columnCustomization = $bindable<TableColumnCustomization>({}),
 		emptyLabel = 'No rows',
+		virtualized = false,
+		rowHeight = 42,
+		headerHeight = 38,
+		overscan = 160,
 		onSortOrderChange,
 		onSelectionChange,
 		...restProps
@@ -55,6 +64,10 @@
 
 	let tableSortOrder = $state<TableSortDescriptor<T>[]>(sortOrder);
 	let scrollOffsetX = $state(0);
+	let viewport = $state<ViewportGeometry>({
+		offset: { x: 0, y: 0 },
+		viewport: { width: 0, height: 0 }
+	});
 	let dragSelection = $state<{
 		active: boolean;
 		pointerId: number;
@@ -89,12 +102,7 @@
 		typeof value === 'number' ? `${value}px` : value;
 
 	const tableShellStyle = $derived.by(() => {
-		return [
-			layoutStyle(layoutProps),
-			rootStyle
-		]
-			.filter(Boolean)
-			.join(' ');
+		return [layoutStyle(layoutProps), rootStyle].filter(Boolean).join(' ');
 	});
 
 	const headerSpan = (value: TableColumn<T>['colspan'] | TableColumn<T>['rowspan']) =>
@@ -221,7 +229,6 @@
 	const headerStyle = $derived(
 		`${tableWidthStyle} transform: translate3d(${-scrollOffsetX}px, 0, 0);`
 	);
-
 	const sortedRows = $derived.by(() => {
 		if (tableSortOrder.length === 0) return data;
 
@@ -250,6 +257,32 @@
 			return 0;
 		});
 	});
+	const engineColumns = $derived.by(() =>
+		visibleColumns.map((column, index) => ({
+			key: String(columnKey(column, index)),
+			width:
+				typeof column.width === 'number'
+					? column.width
+					: typeof column.minWidth === 'number'
+						? column.minWidth
+						: 160
+		}))
+	);
+	const engineLayout = $derived.by(() =>
+		tableViewportLayout({
+			rows: sortedRows,
+			columns: engineColumns,
+			viewport,
+			rowHeight,
+			headerHeight: 0,
+			overscan,
+			rowKey
+		})
+	);
+	const engineHeaderStyle = $derived.by(() => {
+		const width = `${engineLayout.content.width}px`;
+		return `width: ${width}; min-width: ${width}; height: ${headerHeight}px; transform: translate3d(${-scrollOffsetX}px, 0, 0);`;
+	});
 
 	const selectedKeys = $derived.by(() => {
 		if (selection instanceof Set) return new Set<TableRowKey>(selection);
@@ -399,7 +432,8 @@
 		updateSelection(key);
 	};
 
-	const handleScroll = (geometry: { offset: { x: number } }) => {
+	const handleScroll = (geometry: ViewportGeometry) => {
+		viewport = geometry;
 		scrollOffsetX = geometry.offset.x;
 	};
 </script>
@@ -414,122 +448,243 @@
 	onpointercancel={endDragSelection}
 />
 
-<div class="table-shell" style={tableShellStyle} {...forwardedProps}>
+<div
+	class="table-shell"
+	class:table-shell-engine={virtualized}
+	style={tableShellStyle}
+	{...forwardedProps}
+>
 	{#if columnHeaders === 'visible'}
 		<div class="table-header-frame">
-			<table
-				class="table-header-table table"
-				style={headerStyle}
-				role={selectionMode === 'none' ? undefined : 'grid'}
-				aria-multiselectable={selectionMode === 'multiple' ? 'true' : undefined}
-			>
-				<thead class="table-header">
-					<tr>
-						{#each visibleColumns as column, index (columnKey(column, index))}
-							<th
-								class={`table-heading table-align-${column.alignment ?? 'leading'}`}
-								colspan={headerSpan(column.colspan)}
-								rowspan={headerSpan(column.rowspan)}
-								style:min-width={toCssSize(column.minWidth)}
-								style:width={toCssSize(column.width)}
-								aria-sort={tableSortOrder[0]?.key === columnSortKey(column, index)
-									? tableSortOrder[0].direction === 'ascending'
-										? 'ascending'
-										: 'descending'
-									: undefined}
-							>
-								{#if column.sortable}
-									{@const sortDirection = activeSortDirection(column, index)}
-									<button
-										type="button"
-										class="table-sort-button"
-										onclick={() => updateSort(column, index)}
-									>
-										<span>
-											{#if column.header}
-												{@render column.header(column, index)}
-											{:else}
-												{column.label}
-											{/if}
-										</span>
-										{#if sortDirection === 'ascending'}
-											<ArrowUpIcon class="table-sort-icon" size={12} strokeWidth={2.25} />
-										{:else if sortDirection === 'descending'}
-											<ArrowDownIcon class="table-sort-icon" size={12} strokeWidth={2.25} />
+			{#if virtualized}
+				<div
+					class="table-header-table table-engine-header"
+					style={engineHeaderStyle}
+					role={selectionMode === 'none' ? undefined : 'row'}
+				>
+					{#each visibleColumns as column, index (columnKey(column, index))}
+						{@const layoutColumn = engineColumns[index]}
+						<div
+							class={`table-heading table-engine-heading table-align-${column.alignment ?? 'leading'}`}
+							style:width={`${layoutColumn.width}px`}
+							style:height={`${headerHeight}px`}
+							role={selectionMode === 'none' ? 'columnheader' : 'gridcell'}
+							aria-sort={tableSortOrder[0]?.key === columnSortKey(column, index)
+								? tableSortOrder[0].direction === 'ascending'
+									? 'ascending'
+									: 'descending'
+								: undefined}
+						>
+							{#if column.sortable}
+								{@const sortDirection = activeSortDirection(column, index)}
+								<button
+									type="button"
+									class="table-sort-button"
+									onclick={() => updateSort(column, index)}
+								>
+									<span>
+										{#if column.header}
+											{@render column.header(column, index)}
 										{:else}
-											<ArrowUpDownIcon
-												class="table-sort-icon table-sort-icon-muted"
-												size={12}
-												strokeWidth={2.25}
-											/>
+											{column.label}
 										{/if}
-									</button>
-								{:else}
-									{#if column.header}
+									</span>
+									{#if sortDirection === 'ascending'}
+										<ArrowUpIcon class="table-sort-icon" size={12} strokeWidth={2.25} />
+									{:else if sortDirection === 'descending'}
+										<ArrowDownIcon class="table-sort-icon" size={12} strokeWidth={2.25} />
+									{:else}
+										<ArrowUpDownIcon
+											class="table-sort-icon table-sort-icon-muted"
+											size={12}
+											strokeWidth={2.25}
+										/>
+									{/if}
+								</button>
+							{:else if column.header}
+								{@render column.header(column, index)}
+							{:else}
+								{column.label}
+							{/if}
+						</div>
+					{/each}
+				</div>
+			{:else}
+				<table
+					class="table-header-table table"
+					style={headerStyle}
+					role={selectionMode === 'none' ? undefined : 'grid'}
+					aria-multiselectable={selectionMode === 'multiple' ? 'true' : undefined}
+				>
+					<thead class="table-header">
+						<tr>
+							{#each visibleColumns as column, index (columnKey(column, index))}
+								<th
+									class={`table-heading table-align-${column.alignment ?? 'leading'}`}
+									colspan={headerSpan(column.colspan)}
+									rowspan={headerSpan(column.rowspan)}
+									style:min-width={toCssSize(column.minWidth)}
+									style:width={toCssSize(column.width)}
+									aria-sort={tableSortOrder[0]?.key === columnSortKey(column, index)
+										? tableSortOrder[0].direction === 'ascending'
+											? 'ascending'
+											: 'descending'
+										: undefined}
+								>
+									{#if column.sortable}
+										{@const sortDirection = activeSortDirection(column, index)}
+										<button
+											type="button"
+											class="table-sort-button"
+											onclick={() => updateSort(column, index)}
+										>
+											<span>
+												{#if column.header}
+													{@render column.header(column, index)}
+												{:else}
+													{column.label}
+												{/if}
+											</span>
+											{#if sortDirection === 'ascending'}
+												<ArrowUpIcon class="table-sort-icon" size={12} strokeWidth={2.25} />
+											{:else if sortDirection === 'descending'}
+												<ArrowDownIcon class="table-sort-icon" size={12} strokeWidth={2.25} />
+											{:else}
+												<ArrowUpDownIcon
+													class="table-sort-icon table-sort-icon-muted"
+													size={12}
+													strokeWidth={2.25}
+												/>
+											{/if}
+										</button>
+									{:else if column.header}
 										{@render column.header(column, index)}
 									{:else}
 										{column.label}
 									{/if}
-								{/if}
-							</th>
-						{/each}
-					</tr>
-				</thead>
-			</table>
+								</th>
+							{/each}
+						</tr>
+					</thead>
+				</table>
+			{/if}
 		</div>
 	{/if}
 
-	<ScrollView
-		axis="both"
-		loader={bodyLoaderOptions}
-		contentStyles={{ paddingX: 0, paddingY: 0 }}
-		onScroll={handleScroll}
-	>
-		<table
-			class="table-body-table table"
-			style={tableWidthStyle}
-			role={selectionMode === 'none' ? undefined : 'grid'}
-			aria-multiselectable={selectionMode === 'multiple' ? 'true' : undefined}
+	{#if virtualized}
+		{#snippet layout()}
+			{#each engineLayout.rows as placedRow (placedRow.key)}
+				{@const key = rowKey(placedRow.item, placedRow.index)}
+				<div
+					data-table-row-key={String(key)}
+					class="table-engine-row table-row"
+					class:table-row-selectable={selectionMode !== 'none'}
+					class:table-row-selected={isSelected(key)}
+					style:width={`${placedRow.rect.width}px`}
+					style:height={`${placedRow.rect.height}px`}
+					style:transform={`translate3d(${placedRow.rect.x}px, ${placedRow.rect.y}px, 0)`}
+					aria-selected={selectionMode === 'none' ? undefined : isSelected(key)}
+					role={selectionMode === 'none' ? 'row' : 'row'}
+					onclick={(event) => handleRowClick(event, key)}
+					onpointerdown={(event) => startDragSelection(event, key)}
+					onpointerenter={(event) => continueDragSelection(event, key)}
+					onpointerup={endDragSelection}
+					onpointercancel={endDragSelection}
+				></div>
+			{/each}
+			{#each engineLayout.cells as placedCell (placedCell.key)}
+				{@const column = visibleColumns[placedCell.item.columnIndex]}
+				{@const row = placedCell.item.row}
+				{@const index = placedCell.item.rowIndex}
+				{@const key = rowKey(row, index)}
+				<div
+					data-table-row-key={String(key)}
+					class={`table-engine-cell table-cell table-align-${column.alignment ?? 'leading'}`}
+					class:table-row-selectable={selectionMode !== 'none'}
+					style:width={`${placedCell.rect.width}px`}
+					style:height={`${placedCell.rect.height}px`}
+					style:transform={`translate3d(${placedCell.rect.x}px, ${placedCell.rect.y}px, 0)`}
+					aria-selected={selectionMode === 'none' ? undefined : isSelected(key)}
+					role={selectionMode === 'none' ? 'cell' : 'gridcell'}
+					onclick={(event) => handleRowClick(event, key)}
+					onpointerdown={(event) => startDragSelection(event, key)}
+					onpointerenter={(event) => continueDragSelection(event, key)}
+					onpointerup={endDragSelection}
+					onpointercancel={endDragSelection}
+				>
+					{#if column.cell}
+						{@render column.cell(row, index)}
+					{:else}
+						{displayValue(columnValue(column, row))}
+					{/if}
+				</div>
+			{/each}
+			{#if sortedRows.length === 0}
+				<div class="table-empty table-engine-empty">{emptyLabel}</div>
+			{/if}
+		{/snippet}
+
+		<ScrollView
+			axis="both"
+			loader={bodyLoaderOptions}
+			contentSize={engineLayout.content}
+			contentStyles={{ paddingX: 0, paddingY: 0 }}
+			onScroll={handleScroll}
+			{layout}
+		/>
+	{:else}
+		<ScrollView
+			axis="both"
+			loader={bodyLoaderOptions}
+			contentStyles={{ paddingX: 0, paddingY: 0 }}
+			onScroll={handleScroll}
 		>
-			<tbody>
-				{#each sortedRows as row, index (rowKey(row, index))}
-					{@const key = rowKey(row, index)}
-					<tr
-						data-table-row-key={String(key)}
-						class="table-row"
-						class:table-row-selectable={selectionMode !== 'none'}
-						class:table-row-selected={isSelected(key)}
-						aria-selected={selectionMode === 'none' ? undefined : isSelected(key)}
-						onclick={(event) => handleRowClick(event, key)}
-						onpointerdown={(event) => startDragSelection(event, key)}
-						onpointerenter={(event) => continueDragSelection(event, key)}
-						onpointerup={endDragSelection}
-						onpointercancel={endDragSelection}
-					>
-						{#each visibleColumns as column, columnIndex (columnKey(column, columnIndex))}
-							<td
-								class={`table-cell table-align-${column.alignment ?? 'leading'}`}
-								colspan={bodySpan(column.colspan, row, index)}
-								rowspan={bodySpan(column.rowspan, row, index)}
-								style:min-width={toCssSize(column.minWidth)}
-								style:width={toCssSize(column.width)}
-							>
-								{#if column.cell}
-									{@render column.cell(row, index)}
-								{:else}
-									{displayValue(columnValue(column, row))}
-								{/if}
-							</td>
-						{/each}
-					</tr>
-				{:else}
-					<tr>
-						<td class="table-empty" colspan={Math.max(visibleColumns.length, 1)}>{emptyLabel}</td>
-					</tr>
-				{/each}
-			</tbody>
-		</table>
-	</ScrollView>
+			<table
+				class="table-body-table table"
+				style={tableWidthStyle}
+				role={selectionMode === 'none' ? undefined : 'grid'}
+				aria-multiselectable={selectionMode === 'multiple' ? 'true' : undefined}
+			>
+				<tbody>
+					{#each sortedRows as row, index (rowKey(row, index))}
+						{@const key = rowKey(row, index)}
+						<tr
+							data-table-row-key={String(key)}
+							class="table-row"
+							class:table-row-selectable={selectionMode !== 'none'}
+							class:table-row-selected={isSelected(key)}
+							aria-selected={selectionMode === 'none' ? undefined : isSelected(key)}
+							onclick={(event) => handleRowClick(event, key)}
+							onpointerdown={(event) => startDragSelection(event, key)}
+							onpointerenter={(event) => continueDragSelection(event, key)}
+							onpointerup={endDragSelection}
+							onpointercancel={endDragSelection}
+						>
+							{#each visibleColumns as column, columnIndex (columnKey(column, columnIndex))}
+								<td
+									class={`table-cell table-align-${column.alignment ?? 'leading'}`}
+									colspan={bodySpan(column.colspan, row, index)}
+									rowspan={bodySpan(column.rowspan, row, index)}
+									style:min-width={toCssSize(column.minWidth)}
+									style:width={toCssSize(column.width)}
+								>
+									{#if column.cell}
+										{@render column.cell(row, index)}
+									{:else}
+										{displayValue(columnValue(column, row))}
+									{/if}
+								</td>
+							{/each}
+						</tr>
+					{:else}
+						<tr>
+							<td class="table-empty" colspan={Math.max(visibleColumns.length, 1)}>{emptyLabel}</td>
+						</tr>
+					{/each}
+				</tbody>
+			</table>
+		</ScrollView>
+	{/if}
 </div>
 
 <style>
@@ -581,6 +736,15 @@
 		will-change: transform;
 	}
 
+	.table-engine-header {
+		display: flex;
+		background: color-mix(
+			in oklab,
+			var(--sveltely-background-color) 92%,
+			var(--sveltely-control-active-color)
+		);
+	}
+
 	.table-header-frame + :global(.scroll-view) {
 		border-top-left-radius: 0;
 		border-top-right-radius: 0;
@@ -612,6 +776,45 @@
 		color: inherit;
 	}
 
+	.table-engine-heading,
+	.table-engine-cell {
+		display: flex;
+		align-items: center;
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	.table-engine-cell {
+		position: absolute;
+		left: 0;
+		top: 0;
+		z-index: 1;
+		background: transparent;
+	}
+
+	.table-engine-row {
+		position: absolute;
+		left: 0;
+		top: 0;
+		z-index: 0;
+		border-bottom: 1px solid var(--sveltely-border-color);
+	}
+
+	.table-engine-row.table-row-selectable {
+		cursor: default;
+	}
+
+	.table-engine-row.table-row-selectable:hover {
+		background: color-mix(in oklab, var(--sveltely-control-active-color) 8%, transparent);
+	}
+
+	.table-engine-empty {
+		position: absolute;
+		inset: 0 auto auto 0;
+		width: 100%;
+	}
+
 	.table-row:last-child .table-cell {
 		border-bottom: 0;
 	}

package/dist/components/Library/Table/Table.svelte.d.ts

@@ -1,7 +1,9 @@
 export { default as Column } from './Column.svelte';
 import { type Snippet } from 'svelte';
 import { type LoaderProps } from '../../../style/loader';
+import { type LayoutProps } from '../../../style/layout';
 import { type StyleProps } from '../../../style/surface';
+import { type ViewportOverscan } from '../../../viewport';
 import type { TableColumn, TableColumnCustomization, TableColumnHeaderVisibility, TableSelection, TableSelectionMode, TableSortDescriptor } from './types';
 declare function $$render<T extends Record<string, unknown>>(): {
     props: {
@@ -14,9 +16,13 @@ declare function $$render<T extends Record<string, unknown>>(): {
         columnHeaders?: TableColumnHeaderVisibility;
         columnCustomization?: TableColumnCustomization;
         emptyLabel?: string;
+        virtualized?: boolean;
+        rowHeight?: number;
+        headerHeight?: number;
+        overscan?: ViewportOverscan;
         onSortOrderChange?: (sortOrder: TableSortDescriptor<T>[]) => void;
         onSelectionChange?: (selection: TableSelection) => void;
-    } & import("../../../style/layout").FrameProps & import("../../../style/layout").StackProps & StyleProps & LoaderProps & Record<string, unknown>;
+    } & LayoutProps & StyleProps & LoaderProps & Record<string, unknown>;
     exports: {};
     bindings: "selection" | "sortOrder" | "columnCustomization";
     slots: {};

package/dist/components/Library/TextField/TextField.svelte

@@ -76,20 +76,22 @@
 	data-disabled={disabled ? 'true' : 'false'}
 	data-error={error ? 'true' : 'false'}
 >
-	<input
-		bind:value
-		{type}
-		{disabled}
-		{name}
-		{autocomplete}
-		{required}
-		{readonly}
-		{inputmode}
-		{placeholder}
-		aria-invalid={error ? 'true' : undefined}
-		aria-describedby={describedBy}
-		class="text-field-input"
-	/>
+	<div class="text-field-control">
+		<input
+			bind:value
+			{type}
+			{disabled}
+			{name}
+			{autocomplete}
+			{required}
+			{readonly}
+			{inputmode}
+			{placeholder}
+			aria-invalid={error ? 'true' : undefined}
+			aria-describedby={describedBy}
+			class="text-field-input"
+		/>
+	</div>
 
 	{#if help}
 		<span id="text-field-message" class="text-field-message">{help}</span>
@@ -107,6 +109,10 @@
 		font-size: var(--text-field-font-size, var(--sveltely-font-size));
 	}
 
+	.text-field-control {
+		display: contents;
+	}
+
 	.text-field-input {
 		width: 100%;
 		min-width: 0;

package/dist/components/Library/TokenSearchField/TokenSearchField.demo.svelte

@@ -14,7 +14,7 @@
 	let value = $state('');
 </script>
 
-<VStack width="100%" maxWidth="28rem" gap={5}>
+<VStack width="28rem" gap={5}>
 	<TokenSearchField bind:tokens bind:value placeholder="Search keywords" />
 	<p class="text-xs text-[var(--sveltely-text-secondary-color)]">
 		Tokens: {tokens.join(', ') || 'empty'}