@x33025/sveltely 0.1.18 → 0.1.21

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

@@ -0,0 +1,624 @@
+<script module lang="ts">
+	export { default as Column } from './Column.svelte';
+</script>
+
+<script lang="ts" generics="T extends Record<string, unknown>">
+	import { ArrowDownIcon, ArrowUpDownIcon, ArrowUpIcon } from '@lucide/svelte';
+	import { setContext, type Snippet } from 'svelte';
+	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 ScrollView from '../ScrollView';
+	import { TABLE_CONTEXT } from './context';
+	import type {
+		TableColumn,
+		TableColumnCustomization,
+		TableColumnHeaderVisibility,
+		TableContext,
+		TableRowKey,
+		TableSelection,
+		TableSelectionMode,
+		TableSortDescriptor
+	} from './types';
+
+	type Props = {
+		data: T[];
+		children?: Snippet;
+		columns?: TableColumn<T>[];
+		selection?: TableSelection;
+		selectionMode?: TableSelectionMode;
+		sortOrder?: TableSortDescriptor<T>[];
+		columnHeaders?: TableColumnHeaderVisibility;
+		columnCustomization?: TableColumnCustomization;
+		emptyLabel?: string;
+		onSortOrderChange?: (sortOrder: TableSortDescriptor<T>[]) => void;
+		onSelectionChange?: (selection: TableSelection) => void;
+	} & LayoutProps &
+		StyleProps &
+		LoaderProps &
+		Record<string, unknown>;
+
+	let {
+		data,
+		children,
+		columns = [],
+		selection = $bindable<TableSelection>(null),
+		selectionMode = 'none',
+		sortOrder = $bindable<TableSortDescriptor<T>[]>([]),
+		columnHeaders = 'visible',
+		columnCustomization = $bindable<TableColumnCustomization>({}),
+		emptyLabel = 'No rows',
+		onSortOrderChange,
+		onSelectionChange,
+		...restProps
+	}: Props = $props();
+
+	let tableSortOrder = $state<TableSortDescriptor<T>[]>(sortOrder);
+	let dragSelection = $state<{
+		active: boolean;
+		pointerId: number;
+		shouldSelect: boolean;
+		keys: Set<TableRowKey>;
+		visited: Set<TableRowKey>;
+		lastKey: TableRowKey;
+	} | null>(null);
+	let nextSyntheticRowKey = 0;
+	const syntheticRowKeys = new WeakMap<T, TableRowKey>();
+
+	const extractedLoaderProps = $derived.by(() => extractLoaderProps(restProps));
+	const loaderProps = $derived(extractedLoaderProps.loaderProps);
+	const afterLoaderProps = $derived(extractedLoaderProps.restProps);
+	const providedLoaderOptions = $derived.by(() => resolveLoaderOptions(loaderProps));
+	const bodyLoaderOptions = $derived.by(() => {
+		if (loaderProps.loader !== undefined) return providedLoaderOptions;
+		return {
+			text: '',
+			loading: data.length === 0
+		};
+	});
+	const extractedLayoutProps = $derived.by(() => extractLayoutProps(afterLoaderProps));
+	const layoutProps = $derived(extractedLayoutProps.layoutProps);
+	const afterLayoutProps = $derived(extractedLayoutProps.restProps);
+	const extractedStyleProps = $derived.by(() => extractStyleProps(afterLayoutProps));
+	const styleProps = $derived(extractedStyleProps.styleProps);
+	const forwardedProps = $derived(extractedStyleProps.restProps);
+	const rootStyle = $derived.by(() => surfaceStyle(styleProps, 'table'));
+
+	const toCssSize = (value: number | string | undefined) =>
+		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(' ');
+	});
+
+	const headerSpan = (value: TableColumn<T>['colspan'] | TableColumn<T>['rowspan']) =>
+		typeof value === 'number' ? value : undefined;
+
+	const bodySpan = (
+		value: TableColumn<T>['colspan'] | TableColumn<T>['rowspan'],
+		row: T,
+		index: number
+	) => (typeof value === 'function' ? value(row, index) : value);
+
+	let registeredColumns = $state<Array<{ id: symbol; column: TableColumn<T> }>>([]);
+
+	const registerColumn: TableContext<T>['registerColumn'] = (column) => {
+		const id = Symbol(column.label);
+		registeredColumns = [...registeredColumns, { id, column }];
+		return id;
+	};
+
+	const updateColumn: TableContext<T>['updateColumn'] = (id, column) => {
+		registeredColumns = registeredColumns.map((registered) =>
+			registered.id === id ? { id, column } : registered
+		);
+	};
+
+	const unregisterColumn: TableContext<T>['unregisterColumn'] = (id) => {
+		registeredColumns = registeredColumns.filter((registered) => registered.id !== id);
+	};
+
+	setContext<TableContext<T>>(TABLE_CONTEXT, {
+		registerColumn,
+		updateColumn,
+		unregisterColumn
+	});
+
+	const columnKey = (column: TableColumn<T>, index = 0) => {
+		if (column.key) return column.key;
+		if (typeof column.value === 'string') return column.value;
+		if (typeof column.sortKey === 'string') return column.sortKey;
+		return `${column.label}-${index}`;
+	};
+
+	const columnSortKey = (column: TableColumn<T>, index = 0) =>
+		String(column.sortKey ?? columnKey(column, index));
+
+	const stableRowKey = (row: T) => {
+		const implicitId = row.id;
+		if (typeof implicitId === 'string' || typeof implicitId === 'number') return implicitId;
+
+		const implicitKey = row.key;
+		if (typeof implicitKey === 'string' || typeof implicitKey === 'number') return implicitKey;
+
+		const syntheticKey = syntheticRowKeys.get(row);
+		if (syntheticKey !== undefined) return syntheticKey;
+
+		const nextKey = `row-${nextSyntheticRowKey++}`;
+		syntheticRowKeys.set(row, nextKey);
+		return nextKey;
+	};
+
+	const rowKey = (row: T, _index: number): TableRowKey => stableRowKey(row);
+
+	const columnValue = (column: TableColumn<T>, row: T) => {
+		if (typeof column.value === 'function') return column.value(row);
+		if (column.value !== undefined) return row[column.value];
+		if (typeof column.sortKey === 'string') return row[column.sortKey];
+		const key = column.key;
+		return key === undefined ? undefined : row[key];
+	};
+
+	const displayValue = (value: unknown) => {
+		if (value === null || value === undefined) return '';
+		if (value instanceof Date) return value.toLocaleDateString();
+		return String(value);
+	};
+
+	const fallbackCompare = (column: TableColumn<T>, a: T, b: T) => {
+		const first = columnValue(column, a);
+		const second = columnValue(column, b);
+
+		if (typeof first === 'number' && typeof second === 'number') {
+			return first - second;
+		}
+
+		if (first instanceof Date && second instanceof Date) {
+			return first.getTime() - second.getTime();
+		}
+
+		return displayValue(first).localeCompare(displayValue(second), undefined, {
+			numeric: true,
+			sensitivity: 'base'
+		});
+	};
+
+	const visibleColumns = $derived.by(() => {
+		const hidden = new Set(columnCustomization.hidden ?? []);
+		const availableColumns = [
+			...columns,
+			...registeredColumns.map((registered) => registered.column)
+		];
+		const byKey = new Map(
+			availableColumns.map((column, index) => [columnKey(column, index), column])
+		);
+		const ordered = [
+			...(columnCustomization.order ?? []).map((key) => byKey.get(key)).filter(Boolean),
+			...availableColumns.filter(
+				(column, index) => !(columnCustomization.order ?? []).includes(columnKey(column, index))
+			)
+		] as TableColumn<T>[];
+
+		return ordered.filter(
+			(column, index) => !column.hidden && !hidden.has(columnKey(column, index))
+		);
+	});
+
+	const sortedRows = $derived.by(() => {
+		if (tableSortOrder.length === 0) return data;
+
+		const availableColumns = [
+			...columns,
+			...registeredColumns.map((registered) => registered.column)
+		];
+		const columnByKey = new Map<string, TableColumn<T>>();
+		availableColumns.forEach((column, index) => {
+			columnByKey.set(columnKey(column, index), column);
+			columnByKey.set(columnSortKey(column, index), column);
+		});
+
+		return [...data].sort((a, b) => {
+			for (const descriptor of tableSortOrder) {
+				const column = columnByKey.get(descriptor.key);
+				if (!column) continue;
+				const compare =
+					descriptor.compare ?? column.compare ?? ((x: T, y: T) => fallbackCompare(column, x, y));
+				const result = compare(a, b);
+				if (result !== 0) {
+					return descriptor.direction === 'ascending' ? result : result * -1;
+				}
+			}
+
+			return 0;
+		});
+	});
+
+	const selectedKeys = $derived.by(() => {
+		if (selection instanceof Set) return new Set<TableRowKey>(selection);
+		if (Array.isArray(selection)) return new Set<TableRowKey>(selection);
+		return selection === null ? new Set<TableRowKey>() : new Set<TableRowKey>([selection]);
+	});
+
+	const isSelected = (key: TableRowKey) => selectedKeys.has(key);
+
+	const selectionFromKeys = (keys: Set<TableRowKey>): TableSelection => {
+		if (Array.isArray(selection)) return [...keys];
+		if (selection instanceof Set || selectionMode === 'multiple') return new Set(keys);
+		const [first] = keys;
+		return first ?? null;
+	};
+
+	const publishSelection = (keys: Set<TableRowKey>) => {
+		const next = selectionFromKeys(keys);
+		selection = next;
+		onSelectionChange?.(next);
+	};
+
+	const activeSortDirection = (column: TableColumn<T>, index: number) =>
+		tableSortOrder.find((descriptor) => descriptor.key === columnSortKey(column, index))?.direction;
+
+	const updateSort = (column: TableColumn<T>, index = 0) => {
+		if (!column.sortable) return;
+
+		const key = columnSortKey(column, index);
+		const active = tableSortOrder.find((descriptor) => descriptor.key === key);
+		const next: TableSortDescriptor<T>[] =
+			active?.direction === 'ascending'
+				? [{ key, direction: 'descending', compare: column.compare }]
+				: [{ key, direction: 'ascending', compare: column.compare }];
+
+		tableSortOrder = next;
+		sortOrder = next;
+		onSortOrderChange?.(next);
+	};
+
+	const updateSelection = (key: TableRowKey) => {
+		if (selectionMode === 'none') return;
+
+		let next: TableSelection;
+
+		if (selectionMode === 'single') {
+			next = isSelected(key) ? null : key;
+		} else {
+			const keys = new Set(selectedKeys);
+			if (keys.has(key)) {
+				keys.delete(key);
+			} else {
+				keys.add(key);
+			}
+			next = Array.isArray(selection) ? [...keys] : keys;
+		}
+
+		selection = next;
+		onSelectionChange?.(next);
+	};
+
+	const isInteractiveTarget = (target: EventTarget | null) =>
+		target instanceof Element &&
+		Boolean(target.closest('button, a, input, textarea, select, [contenteditable="true"]'));
+
+	const applyDragSelection = (key: TableRowKey) => {
+		if (!dragSelection || dragSelection.visited.has(key)) return;
+
+		const nextKeys = new Set(dragSelection.keys);
+		if (dragSelection.shouldSelect) {
+			nextKeys.add(key);
+		} else {
+			nextKeys.delete(key);
+		}
+
+		dragSelection = {
+			...dragSelection,
+			keys: nextKeys,
+			visited: new Set([...dragSelection.visited, key]),
+			lastKey: key
+		};
+		publishSelection(nextKeys);
+	};
+
+	const rowFromPoint = (event: PointerEvent) => {
+		const element = document.elementFromPoint(event.clientX, event.clientY);
+		const row = element?.closest<HTMLTableRowElement>('[data-table-row-key]');
+		return row?.dataset.tableRowKey;
+	};
+
+	const keyFromDomValue = (value: string | undefined) => {
+		if (value === undefined) return undefined;
+		for (const [index, row] of sortedRows.entries()) {
+			const key = rowKey(row, index);
+			if (String(key) === value) return key;
+		}
+		return undefined;
+	};
+
+	const applyDragSelectionAtPoint = (event: PointerEvent) => {
+		if (!dragSelection?.active || dragSelection.pointerId !== event.pointerId) return;
+		const key = keyFromDomValue(rowFromPoint(event));
+		if (key === undefined || key === dragSelection.lastKey) return;
+		applyDragSelection(key);
+	};
+
+	const startDragSelection = (event: PointerEvent, key: TableRowKey) => {
+		if (selectionMode !== 'multiple' || event.button !== 0 || isInteractiveTarget(event.target))
+			return;
+
+		const shouldSelect = !isSelected(key);
+		const nextKeys = new Set(selectedKeys);
+		if (shouldSelect) {
+			nextKeys.add(key);
+		} else {
+			nextKeys.delete(key);
+		}
+
+		event.preventDefault();
+		dragSelection = {
+			active: true,
+			pointerId: event.pointerId,
+			shouldSelect,
+			keys: nextKeys,
+			visited: new Set([key]),
+			lastKey: key
+		};
+		publishSelection(nextKeys);
+	};
+
+	const continueDragSelection = (event: PointerEvent, key: TableRowKey) => {
+		if (!dragSelection?.active || dragSelection.pointerId !== event.pointerId) return;
+		applyDragSelection(key);
+	};
+
+	const continueDragSelectionAtPoint = (event: PointerEvent) => {
+		applyDragSelectionAtPoint(event);
+	};
+
+	const endDragSelection = (event: PointerEvent) => {
+		if (dragSelection?.pointerId !== event.pointerId) return;
+		dragSelection = null;
+	};
+
+	const handleRowClick = (event: MouseEvent, key: TableRowKey) => {
+		if (selectionMode === 'multiple' || isInteractiveTarget(event.target)) return;
+		updateSelection(key);
+	};
+</script>
+
+{#if children}
+	{@render children()}
+{/if}
+
+<svelte:window
+	onpointermove={continueDragSelectionAtPoint}
+	onpointerup={endDragSelection}
+	onpointercancel={endDragSelection}
+/>
+
+<div class="table-shell" 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>
+					{#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>{column.label}</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}
+								{column.label}
+							{/if}
+						</th>
+					{/each}
+				</tr>
+			</thead>
+		</table>
+	{/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}
+		>
+			<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>
+</div>
+
+<style>
+	.table-shell {
+		--table-font-size: calc(var(--sveltely-font-size) * 0.875);
+		--table-scale: calc(var(--table-font-size) / 0.875rem);
+		--table-padding-x: calc(var(--sveltely-padding-x) * 0.75 * var(--table-scale));
+		--table-padding-y: calc(var(--sveltely-padding-y) * 0.58 * var(--table-scale));
+		display: flex;
+		flex-direction: column;
+		flex: 1 1 auto;
+		align-self: stretch;
+		min-height: 0;
+		width: 100%;
+		overflow: hidden;
+		border: 1px solid var(--sveltely-border-color);
+		border-radius: var(--sveltely-border-radius);
+		background: var(--sveltely-background-color);
+		color: var(--sveltely-text-primary-color);
+		font-size: var(--table-font-size);
+	}
+
+	.table {
+		width: 100%;
+		min-width: max-content;
+		border-collapse: separate;
+		border-spacing: 0;
+	}
+
+	.table-header {
+		background: color-mix(
+			in oklab,
+			var(--sveltely-background-color) 92%,
+			var(--sveltely-control-active-color)
+		);
+	}
+
+	.table-header-table {
+		flex: 0 0 auto;
+		border-bottom: 1px solid var(--sveltely-border-color);
+	}
+
+	.table-header-table + :global(.scroll-view) {
+		border-top-left-radius: 0;
+		border-top-right-radius: 0;
+	}
+
+	.table-shell > :global(.scroll-view) {
+		flex: 1 1 auto;
+		min-height: 0;
+	}
+
+	.table-heading,
+	.table-cell {
+		border-bottom: 1px solid var(--sveltely-border-color);
+		padding: var(--table-padding-y) var(--table-padding-x);
+		vertical-align: middle;
+		white-space: nowrap;
+	}
+
+	.table-heading {
+		border-bottom: 0;
+		color: var(--sveltely-text-secondary-color);
+		font-weight: 600;
+		text-align: left;
+	}
+
+	.table-cell {
+		color: inherit;
+	}
+
+	.table-row:last-child .table-cell {
+		border-bottom: 0;
+	}
+
+	.table-row-selected {
+		background: color-mix(in oklab, var(--sveltely-control-active-color) 14%, transparent);
+	}
+
+	.table-sort-button {
+		display: inline-flex;
+		align-items: center;
+		justify-content: inherit;
+		width: 100%;
+		gap: calc(var(--sveltely-gap) * 0.5);
+		border-radius: var(--sveltely-border-radius-nested);
+		text-align: inherit;
+	}
+
+	.table-sort-button:hover {
+		color: var(--sveltely-text-primary-color);
+	}
+
+	.table-sort-icon {
+		width: 0.75rem;
+		height: 0.75rem;
+		flex: 0 0 auto;
+		stroke-width: 2.25;
+	}
+
+	.table-sort-icon-muted {
+		opacity: 0.45;
+	}
+
+	.table-align-leading {
+		text-align: left;
+	}
+
+	.table-align-center {
+		text-align: center;
+	}
+
+	.table-align-trailing {
+		text-align: right;
+	}
+
+	.table-empty {
+		padding: calc(var(--table-padding-y) * 2) var(--table-padding-x);
+		color: var(--sveltely-text-secondary-color);
+		text-align: center;
+	}
+</style>

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

@@ -0,0 +1,42 @@
+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 { TableColumn, TableColumnCustomization, TableColumnHeaderVisibility, TableSelection, TableSelectionMode, TableSortDescriptor } from './types';
+declare function $$render<T extends Record<string, unknown>>(): {
+    props: {
+        data: T[];
+        children?: Snippet;
+        columns?: TableColumn<T>[];
+        selection?: TableSelection;
+        selectionMode?: TableSelectionMode;
+        sortOrder?: TableSortDescriptor<T>[];
+        columnHeaders?: TableColumnHeaderVisibility;
+        columnCustomization?: TableColumnCustomization;
+        emptyLabel?: string;
+        onSortOrderChange?: (sortOrder: TableSortDescriptor<T>[]) => void;
+        onSelectionChange?: (selection: TableSelection) => void;
+    } & LayoutProps & StyleProps & LoaderProps & Record<string, unknown>;
+    exports: {};
+    bindings: "selection" | "sortOrder" | "columnCustomization";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends Record<string, unknown>> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "selection" | "sortOrder" | "columnCustomization";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends Record<string, unknown>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends Record<string, unknown>>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Table: $$IsomorphicComponent;
+type Table<T extends Record<string, unknown>> = InstanceType<typeof Table<T>>;
+export default Table;

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

@@ -0,0 +1,5 @@
+import type { TableContext } from './types';
+export declare const TABLE_CONTEXT: unique symbol;
+export declare const tableContext: <T>() => symbol & {
+    __table?: TableContext<T>;
+};

package/dist/components/Library/Table/context.js

@@ -0,0 +1,2 @@
+export const TABLE_CONTEXT = Symbol('sveltely-table');
+export const tableContext = () => TABLE_CONTEXT;

package/dist/components/Library/Table/index.js

@@ -0,0 +1,5 @@
+import Root from './Table.svelte';
+import Column from './Column.svelte';
+const Table = Object.assign(Root, { Column });
+export { Column };
+export default Table;