@x33025/sveltely 0.1.23 → 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,12 +53,21 @@
 		columnHeaders = 'visible',
 		columnCustomization = $bindable<TableColumnCustomization>({}),
 		emptyLabel = 'No rows',
+		virtualized = false,
+		rowHeight = 42,
+		headerHeight = 38,
+		overscan = 160,
 		onSortOrderChange,
 		onSelectionChange,
 		...restProps
 	}: Props = $props();
 
 	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;
@@ -88,18 +102,7 @@
 		typeof value === 'number' ? `${value}px` : value;
 
 	const tableShellStyle = $derived.by(() => {
-		const hasExplicitHeight = layoutProps.height !== undefined || layoutProps.size !== undefined;
-		const fallbackHeight = hasExplicitHeight ? undefined : (layoutProps.maxHeight ?? '100%');
-
-		return [
-			layoutStyle(layoutProps),
-			rootStyle,
-			layoutProps.height === undefined ? '' : `height: ${toCssSize(layoutProps.height)};`,
-			layoutProps.maxHeight === undefined ? '' : `max-height: ${toCssSize(layoutProps.maxHeight)};`,
-			fallbackHeight === undefined ? '' : `height: ${toCssSize(fallbackHeight)};`
-		]
-			.filter(Boolean)
-			.join(' ');
+		return [layoutStyle(layoutProps), rootStyle].filter(Boolean).join(' ');
 	});
 
 	const headerSpan = (value: TableColumn<T>['colspan'] | TableColumn<T>['rowspan']) =>
@@ -214,7 +217,18 @@
 			(column, index) => !column.hidden && !hidden.has(columnKey(column, index))
 		);
 	});
+	const tableMinWidth = $derived.by(() => {
+		const widths = visibleColumns
+			.map((column) => toCssSize(column.width ?? column.minWidth))
+			.filter((width): width is string => Boolean(width));
 
+		if (widths.length === 0) return '100%';
+		return `max(100%, calc(${widths.join(' + ')}))`;
+	});
+	const tableWidthStyle = $derived(`width: ${tableMinWidth};`);
+	const headerStyle = $derived(
+		`${tableWidthStyle} transform: translate3d(${-scrollOffsetX}px, 0, 0);`
+	);
 	const sortedRows = $derived.by(() => {
 		if (tableSortOrder.length === 0) return data;
 
@@ -243,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);
@@ -391,6 +431,11 @@
 		if (selectionMode === 'multiple' || isInteractiveTarget(event.target)) return;
 		updateSelection(key);
 	};
+
+	const handleScroll = (geometry: ViewportGeometry) => {
+		viewport = geometry;
+		scrollOffsetX = geometry.offset.x;
+	};
 </script>
 
 {#if children}
@@ -403,22 +448,27 @@
 	onpointercancel={endDragSelection}
 />
 
-<div class="table-shell" style={tableShellStyle} {...forwardedProps}>
+<div
+	class="table-shell"
+	class:table-shell-engine={virtualized}
+	style={tableShellStyle}
+	{...forwardedProps}
+>
 	{#if columnHeaders === 'visible'}
-		<table
-			class="table-header-table table"
-			role={selectionMode === 'none' ? undefined : 'grid'}
-			aria-multiselectable={selectionMode === 'multiple' ? 'true' : undefined}
-		>
-			<thead class="table-header">
-				<tr>
+		<div class="table-header-frame">
+			{#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))}
-						<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)}
+						{@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'
@@ -432,7 +482,13 @@
 									class="table-sort-button"
 									onclick={() => updateSort(column, index)}
 								>
-									<span>{column.label}</span>
+									<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'}
@@ -445,61 +501,190 @@
 										/>
 									{/if}
 								</button>
+							{:else if column.header}
+								{@render column.header(column, index)}
 							{:else}
 								{column.label}
 							{/if}
-						</th>
+						</div>
 					{/each}
-				</tr>
-			</thead>
-		</table>
+				</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}
+								</th>
+							{/each}
+						</tr>
+					</thead>
+				</table>
+			{/if}
+		</div>
 	{/if}
 
-	<ScrollView axis="both" loader={bodyLoaderOptions} contentStyles={{ paddingX: 0, paddingY: 0 }}>
-		<table
-			class="table-body-table table"
-			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>
@@ -512,8 +697,10 @@
 		flex-direction: column;
 		flex: 1 1 auto;
 		align-self: stretch;
+		min-width: 0;
 		min-height: 0;
 		width: 100%;
+		max-width: 100%;
 		overflow: hidden;
 		border: 1px solid var(--sveltely-border-color);
 		border-radius: var(--sveltely-border-radius);
@@ -524,7 +711,7 @@
 
 	.table {
 		width: 100%;
-		min-width: max-content;
+		min-width: 100%;
 		border-collapse: separate;
 		border-spacing: 0;
 	}
@@ -537,19 +724,37 @@
 		);
 	}
 
+	.table-header-frame {
+		width: 100%;
+		min-width: 0;
+		overflow: hidden;
+		border-bottom: 1px solid var(--sveltely-border-color);
+	}
+
 	.table-header-table {
 		flex: 0 0 auto;
-		border-bottom: 1px solid var(--sveltely-border-color);
+		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-table + :global(.scroll-view) {
+	.table-header-frame + :global(.scroll-view) {
 		border-top-left-radius: 0;
 		border-top-right-radius: 0;
 	}
 
 	.table-shell > :global(.scroll-view) {
 		flex: 1 1 auto;
+		min-width: 0;
 		min-height: 0;
+		max-width: 100%;
 	}
 
 	.table-heading,
@@ -571,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

@@ -3,6 +3,7 @@ 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: {
@@ -15,6 +16,10 @@ 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;
     } & LayoutProps & StyleProps & LoaderProps & Record<string, unknown>;

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

@@ -18,6 +18,7 @@ export type TableColumnCustomization = {
 export type TableColumn<T> = {
     key?: string;
     label: string;
+    header?: Snippet<[column: TableColumn<T>, index: number]>;
     value?: keyof T | ((row: T) => unknown);
     cell?: Snippet<[row: T, index: number]>;
     width?: number | string;

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/TextShimmer/TextShimmer.demo.svelte

@@ -6,9 +6,10 @@
 </script>
 
 <script lang="ts">
+	import VStack from '../VStack';
 	import TextShimmer from './TextShimmer.svelte';
 </script>
 
-<div class="vstack gap-2">
+<VStack gap={5}>
 	<TextShimmer as="h2" text="Sveltely shimmer" />
-</div>
+</VStack>

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

@@ -8,19 +8,12 @@
 </script>
 
 <script lang="ts">
+	import VStack from '../VStack';
 	import TimePicker from './TimePicker.svelte';
 
 	let value = $state<Date | null>(new Date());
 </script>
 
-<div class="time-picker-demo vstack gap-4">
+<VStack width="100%" height="100%" gap={10}>
 	<TimePicker bind:value />
-</div>
-
-<style>
-	.time-picker-demo {
-		width: 100%;
-		height: 100%;
-		min-height: 0;
-	}
-</style>
+</VStack>

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

@@ -7,15 +7,16 @@
 </script>
 
 <script lang="ts">
+	import VStack from '../VStack';
 	import TokenSearchField from './TokenSearchField.svelte';
 
 	let tokens = $state(['svelte', 'ui']);
 	let value = $state('');
 </script>
 
-<div class="vstack w-full max-w-md gap-2">
+<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'}
 	</p>
-</div>
+</VStack>