sveltacular 0.0.77 → 1.0.1

package/dist/tables/table-cell.svelte

@@ -1,28 +1,59 @@
-<script>export let colspan = 1;
-export let type = void 0;
-export let width = void 0;
-$: styleProperties = [`width: ${width ? width : "auto"}`];
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	let {
+		colspan = 1,
+		type = undefined,
+		width = undefined,
+		align = undefined,
+		children
+	}: {
+		colspan?: number;
+		type?: string;
+		width?: number | string;
+		align?: 'left' | 'center' | 'right';
+		children?: Snippet;
+	} = $props();
+
+	let styleProperties = $derived([`width: ${width ? width : 'auto'}`]);
+
+	// Determine alignment based on type or explicit align prop
+	let textAlign = $derived(
+		align ||
+			(type === 'currency' || type === 'number'
+				? 'right'
+				: type === 'check' || type === 'boolean'
+					? 'center'
+					: type === 'actions'
+						? 'right'
+						: 'left')
+	);
 </script>
 
-<td {colspan} class={type} style={styleProperties.join('; ')}>
-	<slot />
+<td {colspan} class="{type} {textAlign}" style={styleProperties.join('; ')}>
+	{#if children}
+		{@render children?.()}
+	{/if}
 </td>
 
 <style>td {
-  padding-left: 0.5rem;
+  padding: 0.5rem;
   font-size: 0.9rem;
   line-height: 1.5rem;
+  vertical-align: middle;
 }
-td.currency, td.number {
-  text-align: right;
+td.left {
+  text-align: left;
 }
-td.check, td.boolean {
+td.center {
   text-align: center;
-  text-transform: uppercase;
 }
-td.actions {
+td.right {
   text-align: right;
 }
-td:last-child {
-  padding-right: 0.5rem;
+td.boolean, td.check {
+  font-size: 1rem;
+}
+td.actions {
+  white-space: nowrap;
 }</style>

package/dist/tables/table-cell.svelte.d.ts

@@ -1,22 +1,11 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        colspan?: number;
-        type?: string | undefined;
-        width?: number | string | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-    exports?: {} | undefined;
-    bindings?: string | undefined;
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    colspan?: number;
+    type?: string;
+    width?: number | string;
+    align?: 'left' | 'center' | 'right';
+    children?: Snippet;
 };
-export type TableCellProps = typeof __propDef.props;
-export type TableCellEvents = typeof __propDef.events;
-export type TableCellSlots = typeof __propDef.slots;
-export default class TableCell extends SvelteComponent<TableCellProps, TableCellEvents, TableCellSlots> {
-}
-export {};
+declare const TableCell: import("svelte").Component<$$ComponentProps, {}, "">;
+type TableCell = ReturnType<typeof TableCell>;
+export default TableCell;

package/dist/tables/table-context.svelte.d.ts

@@ -0,0 +1,32 @@
+import type { JsonObject, SortDirection, SortState } from '../types/data.js';
+export interface TableContextConfig<T extends JsonObject = JsonObject> {
+    enableSorting?: boolean;
+    enableSelection?: boolean;
+    selectionMode?: 'single' | 'multi';
+    rowIdKey?: keyof T & string;
+    onSort?: (column: string, direction: SortDirection) => void;
+    onSelectionChange?: (selectedIds: Set<string | number>) => void;
+}
+export declare class TableContext<T extends JsonObject = JsonObject> {
+    sortColumn: string | null;
+    sortDirection: SortDirection;
+    selectedIds: Set<string | number>;
+    lastSelectedIndex: number | null;
+    config: TableContextConfig<T>;
+    constructor(config?: TableContextConfig<T>);
+    toggleSort(columnKey: string): void;
+    setSortColumn(columnKey: string | null, direction?: SortDirection): void;
+    clearSort(): void;
+    getSortState(): SortState;
+    toggleRow(id: string | number, index: number, shiftKey?: boolean): void;
+    selectRange(startIndex: number, endIndex: number, rows?: T[]): void;
+    selectAll(rows: T[]): void;
+    deselectAll(): void;
+    isRowSelected(id: string | number): boolean;
+    isAllSelected(rows: T[]): boolean;
+    isSomeSelected(rows: T[]): boolean;
+    getSelectedCount(): number;
+    getSelectedRows(rows: T[]): T[];
+}
+export declare function createTableContext<T extends JsonObject = JsonObject>(config?: TableContextConfig<T>): TableContext<T>;
+export declare function getTableContext<T extends JsonObject = JsonObject>(): TableContext<T> | undefined;

package/dist/tables/table-context.svelte.js

@@ -0,0 +1,160 @@
+import { getContext, setContext } from 'svelte';
+const TABLE_CONTEXT_KEY = Symbol('table-context');
+export class TableContext {
+    // Sort state
+    sortColumn = $state(null);
+    sortDirection = $state('asc');
+    // Selection state
+    selectedIds = $state(new Set());
+    lastSelectedIndex = $state(null);
+    // Configuration
+    config;
+    constructor(config = {}) {
+        this.config = {
+            enableSorting: true,
+            enableSelection: false,
+            selectionMode: 'multi',
+            rowIdKey: 'id',
+            ...config
+        };
+    }
+    // Sorting methods
+    toggleSort(columnKey) {
+        if (!this.config.enableSorting)
+            return;
+        if (this.sortColumn === columnKey) {
+            // Toggle direction or clear
+            if (this.sortDirection === 'asc') {
+                this.sortDirection = 'desc';
+            }
+            else {
+                this.sortColumn = null;
+                this.sortDirection = 'asc';
+            }
+        }
+        else {
+            this.sortColumn = columnKey;
+            this.sortDirection = 'asc';
+        }
+        this.config.onSort?.(this.sortColumn ?? '', this.sortDirection);
+    }
+    setSortColumn(columnKey, direction = 'asc') {
+        this.sortColumn = columnKey;
+        this.sortDirection = direction;
+        if (columnKey) {
+            this.config.onSort?.(columnKey, direction);
+        }
+    }
+    clearSort() {
+        this.sortColumn = null;
+        this.sortDirection = 'asc';
+    }
+    getSortState() {
+        return {
+            column: this.sortColumn,
+            direction: this.sortDirection
+        };
+    }
+    // Selection methods
+    toggleRow(id, index, shiftKey = false) {
+        if (!this.config.enableSelection)
+            return;
+        if (this.config.selectionMode === 'single') {
+            // Single selection mode
+            if (this.selectedIds.has(id)) {
+                this.selectedIds.delete(id);
+            }
+            else {
+                this.selectedIds.clear();
+                this.selectedIds.add(id);
+            }
+            this.lastSelectedIndex = index;
+        }
+        else {
+            // Multi selection mode
+            if (shiftKey && this.lastSelectedIndex !== null) {
+                // Range selection
+                this.selectRange(this.lastSelectedIndex, index);
+            }
+            else {
+                // Toggle single row
+                if (this.selectedIds.has(id)) {
+                    this.selectedIds.delete(id);
+                }
+                else {
+                    this.selectedIds.add(id);
+                }
+                this.lastSelectedIndex = index;
+            }
+        }
+        this.config.onSelectionChange?.(new Set(this.selectedIds));
+    }
+    selectRange(startIndex, endIndex, rows) {
+        if (!rows)
+            return;
+        const start = Math.min(startIndex, endIndex);
+        const end = Math.max(startIndex, endIndex);
+        for (let i = start; i <= end; i++) {
+            const row = rows[i];
+            if (row) {
+                const id = row[this.config.rowIdKey];
+                if (id !== undefined) {
+                    this.selectedIds.add(id);
+                }
+            }
+        }
+        this.config.onSelectionChange?.(new Set(this.selectedIds));
+    }
+    selectAll(rows) {
+        if (!this.config.enableSelection)
+            return;
+        rows.forEach((row) => {
+            const id = row[this.config.rowIdKey];
+            if (id !== undefined) {
+                this.selectedIds.add(id);
+            }
+        });
+        this.config.onSelectionChange?.(new Set(this.selectedIds));
+    }
+    deselectAll() {
+        this.selectedIds.clear();
+        this.lastSelectedIndex = null;
+        this.config.onSelectionChange?.(new Set(this.selectedIds));
+    }
+    isRowSelected(id) {
+        return this.selectedIds.has(id);
+    }
+    isAllSelected(rows) {
+        if (!rows.length)
+            return false;
+        return rows.every((row) => {
+            const id = row[this.config.rowIdKey];
+            return id !== undefined && this.selectedIds.has(id);
+        });
+    }
+    isSomeSelected(rows) {
+        if (!rows.length)
+            return false;
+        return rows.some((row) => {
+            const id = row[this.config.rowIdKey];
+            return id !== undefined && this.selectedIds.has(id);
+        });
+    }
+    getSelectedCount() {
+        return this.selectedIds.size;
+    }
+    getSelectedRows(rows) {
+        return rows.filter((row) => {
+            const id = row[this.config.rowIdKey];
+            return id !== undefined && this.selectedIds.has(id);
+        });
+    }
+}
+export function createTableContext(config) {
+    const context = new TableContext(config);
+    setContext(TABLE_CONTEXT_KEY, context);
+    return context;
+}
+export function getTableContext() {
+    return getContext(TABLE_CONTEXT_KEY);
+}

package/dist/tables/table-header-cell.svelte

@@ -1,35 +1,175 @@
-<script>export let colspan = 1;
-export let type = void 0;
-export let width = void 0;
-$: styleProperties = [
-  "text-overflow: ellipsis",
-  "overflow: hidden",
-  `width: ${width ? width : "auto"}`
-];
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	let {
+		colspan = 1,
+		type = undefined,
+		width = undefined,
+		sortable = false,
+		sortKey = undefined,
+		align = undefined,
+		isSorted = false,
+		sortDirection = undefined,
+		onSort = undefined,
+		children
+	}: {
+		colspan?: number;
+		type?: string;
+		width?: number | string;
+		sortable?: boolean;
+		sortKey?: string;
+		align?: 'left' | 'center' | 'right';
+		isSorted?: boolean;
+		sortDirection?: 'asc' | 'desc';
+		onSort?: (column: string, direction: 'asc' | 'desc') => void;
+		children: Snippet;
+	} = $props();
+
+	let canSort = $derived(sortable && sortKey && onSort);
+
+	let styleProperties = $derived([
+		'text-overflow: ellipsis',
+		'overflow: hidden',
+		`width: ${width ? width : 'auto'}`
+	]);
+
+	// Determine alignment
+	let textAlign = $derived(
+		align ||
+			(type === 'currency' || type === 'number'
+				? 'right'
+				: type === 'check' || type === 'boolean'
+					? 'center'
+					: 'left')
+	);
+
+	// Determine aria-sort value
+	let ariaSort = $derived<'ascending' | 'descending' | 'none' | 'other' | undefined>(
+		isSorted ? (sortDirection === 'asc' ? 'ascending' : 'descending') : undefined
+	);
+
+	function handleClick() {
+		if (canSort && sortKey && onSort) {
+			// Cycle through: null -> asc -> desc -> null
+			let newDirection: 'asc' | 'desc';
+			if (!isSorted) {
+				newDirection = 'asc';
+			} else if (sortDirection === 'asc') {
+				newDirection = 'desc';
+			} else {
+				// Clear sort by passing empty string
+				onSort('', 'asc');
+				return;
+			}
+			onSort(sortKey, newDirection);
+		}
+	}
+
+	function handleKeyDown(event: KeyboardEvent) {
+		if (canSort && (event.key === 'Enter' || event.key === ' ')) {
+			event.preventDefault();
+			if (sortKey && onSort && sortDirection) {
+				onSort(sortKey, sortDirection === 'asc' ? 'desc' : 'asc');
+			}
+		}
+	}
 </script>
 
-<th {colspan} class={type} style={styleProperties.join('; ')}>
-	<slot />
+<th
+	{colspan}
+	class="{type} {textAlign}"
+	class:sortable={canSort}
+	class:sorted={isSorted}
+	style={styleProperties.join('; ')}
+	aria-sort={ariaSort}
+	role={canSort ? 'columnheader button' : 'columnheader'}
+	tabindex={canSort ? 0 : undefined}
+	onclick={handleClick}
+	onkeydown={handleKeyDown}
+>
+	<div class="header-content">
+		<span class="header-text">
+			{@render children?.()}
+		</span>
+		{#if canSort}
+			<span class="sort-indicator" aria-hidden="true">
+				{#if isSorted}
+					{#if sortDirection === 'asc'}
+						<span class="sort-arrow">▲</span>
+					{:else}
+						<span class="sort-arrow">▼</span>
+					{/if}
+				{:else}
+					<span class="sort-arrow unsorted">⇅</span>
+				{/if}
+			</span>
+		{/if}
+	</div>
 </th>
 
 <style>th {
-  padding-left: 0.5rem;
+  padding: 0.5rem;
   font-size: 0.8rem;
   font-weight: 500;
   font-family: sans-serif;
   line-height: 1.5rem;
-  text-align: left;
   letter-spacing: 0.015em;
   text-transform: uppercase;
-  text-shadow: 1px 1px 1px black;
+  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5);
+  position: relative;
+}
+th.left {
   text-align: left;
 }
-th.currency, th.number {
+th.center {
+  text-align: center;
+}
+th.right {
   text-align: right;
 }
-th.check, th.boolean {
-  text-align: center;
+th.sortable {
+  cursor: pointer;
+  user-select: none;
+}
+th.sortable:hover {
+  background: var(--table-header-hover-bg, rgba(0, 0, 0, 0.05));
 }
-th:last-child {
-  padding-right: 0.5rem;
+th.sortable:focus {
+  outline: 2px solid var(--focus-color, #0066cc);
+  outline-offset: -2px;
+}
+th.sorted {
+  background: var(--table-header-sorted-bg, rgba(0, 0, 0, 0.08));
+}
+
+.header-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+}
+
+.header-text {
+  flex: 1;
+  min-width: 0;
+}
+
+.sort-indicator {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  font-size: 0.75rem;
+  opacity: 0.7;
+}
+
+.sort-arrow {
+  display: inline-block;
+  transition: opacity 0.2s;
+}
+.sort-arrow.unsorted {
+  opacity: 0.3;
+}
+
+th.sortable:hover .sort-arrow.unsorted {
+  opacity: 0.6;
 }</style>

package/dist/tables/table-header-cell.svelte.d.ts

@@ -1,22 +1,16 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        colspan?: number;
-        type?: string | undefined;
-        width?: number | string | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-    exports?: {} | undefined;
-    bindings?: string | undefined;
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    colspan?: number;
+    type?: string;
+    width?: number | string;
+    sortable?: boolean;
+    sortKey?: string;
+    align?: 'left' | 'center' | 'right';
+    isSorted?: boolean;
+    sortDirection?: 'asc' | 'desc';
+    onSort?: (column: string, direction: 'asc' | 'desc') => void;
+    children: Snippet;
 };
-export type TableHeaderCellProps = typeof __propDef.props;
-export type TableHeaderCellEvents = typeof __propDef.events;
-export type TableHeaderCellSlots = typeof __propDef.slots;
-export default class TableHeaderCell extends SvelteComponent<TableHeaderCellProps, TableHeaderCellEvents, TableHeaderCellSlots> {
-}
-export {};
+declare const TableHeaderCell: import("svelte").Component<$$ComponentProps, {}, "">;
+type TableHeaderCell = ReturnType<typeof TableHeaderCell>;
+export default TableHeaderCell;

package/dist/tables/table-header.svelte

@@ -1,14 +1,39 @@
-<thead>
-	<slot />
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	let {
+		children,
+		sticky = false
+	}: {
+		children?: Snippet;
+		sticky?: boolean;
+	} = $props();
+</script>
+
+<thead class:sticky>
+	{@render children?.()}
 </thead>
 
 <style>
 	thead {
 		display: table-header-group;
 		vertical-align: middle;
-		background: var(--table-header-bg, #333);
-		color: var(--table-header-fg, #fff);
-		border-top: solid 0.1rem var(--table-header-border, #000);
-		border-bottom: solid 0.1rem var(--table-header-border, #000);
+		background: var(--table-header-bg);
+		color: var(--table-header-fg);
+		border-top: solid var(--border-thin) var(--table-header-border);
+		border-bottom: solid var(--border-thin) var(--table-header-border);
+	}
+
+	thead.sticky {
+		position: sticky;
+		top: 0;
+		z-index: 10;
+	}
+
+	thead.sticky :global(th) {
+		position: sticky;
+		top: 0;
+		background: var(--table-header-bg);
+		box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1);
 	}
 </style>

package/dist/tables/table-header.svelte.d.ts

@@ -1,29 +1,8 @@
-/** @typedef {typeof __propDef.props}  TableHeaderProps */
-/** @typedef {typeof __propDef.events}  TableHeaderEvents */
-/** @typedef {typeof __propDef.slots}  TableHeaderSlots */
-export default class TableHeader extends SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
-}
-export type TableHeaderProps = typeof __propDef.props;
-export type TableHeaderEvents = typeof __propDef.events;
-export type TableHeaderSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: never;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-    exports?: undefined;
-    bindings?: undefined;
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    children?: Snippet;
+    sticky?: boolean;
 };
-export {};
+declare const TableHeader: import("svelte").Component<$$ComponentProps, {}, "">;
+type TableHeader = ReturnType<typeof TableHeader>;
+export default TableHeader;