@joewinke/jatui 0.1.33 → 0.2.0

package/dist/components/shell/shell.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Sidebar context state — createSidebarState returns a reactive object
+ * driven by Svelte 5 runes. Pass it into Sidebar via setContext/getContext
+ * or prop drilling.
+ *
+ * Persistence: localStorage (fallback to cookie via document.cookie) keyed
+ * on `storageKey`. Set storageKey = '' to disable persistence.
+ */
+export type SidebarMode = 'expanded' | 'collapsed' | 'icon';
+export interface SidebarState {
+    /** Current sidebar display mode */
+    mode: SidebarMode;
+    /** ID of the currently active nav item */
+    activeId: string;
+    /** Whether the mobile drawer overlay is open */
+    mobileOpen: boolean;
+    /** Set the display mode (persisted) */
+    setMode(mode: SidebarMode): void;
+    /** Toggle between expanded and icon-collapse */
+    toggleCollapse(): void;
+    /** Set the active item ID */
+    setActive(id: string): void;
+    /** Open/close the mobile drawer */
+    setMobileOpen(open: boolean): void;
+}
+export declare function createSidebarState(options?: {
+    storageKey?: string;
+    defaultMode?: SidebarMode;
+    defaultActiveId?: string;
+}): SidebarState;

package/dist/components/shell/shell.js

@@ -0,0 +1,65 @@
+/**
+ * Sidebar context state — createSidebarState returns a reactive object
+ * driven by Svelte 5 runes. Pass it into Sidebar via setContext/getContext
+ * or prop drilling.
+ *
+ * Persistence: localStorage (fallback to cookie via document.cookie) keyed
+ * on `storageKey`. Set storageKey = '' to disable persistence.
+ */
+function readStorage(key) {
+    if (!key || typeof window === 'undefined')
+        return null;
+    try {
+        return localStorage.getItem(key);
+    }
+    catch (_a) {
+        return null;
+    }
+}
+function writeStorage(key, value) {
+    if (!key || typeof window === 'undefined')
+        return;
+    try {
+        localStorage.setItem(key, value);
+    }
+    catch (_a) {
+        // silently fail if storage unavailable
+    }
+}
+export function createSidebarState(options) {
+    var _a, _b, _c;
+    var storageKey = (_a = options === null || options === void 0 ? void 0 : options.storageKey) !== null && _a !== void 0 ? _a : 'jatui-sidebar';
+    var defaultMode = (_b = options === null || options === void 0 ? void 0 : options.defaultMode) !== null && _b !== void 0 ? _b : 'expanded';
+    var storedMode = readStorage(storageKey);
+    var validModes = ['expanded', 'collapsed', 'icon'];
+    var initialMode = storedMode && validModes.includes(storedMode) ? storedMode : defaultMode;
+    var mode = $state(initialMode);
+    var activeId = $state((_c = options === null || options === void 0 ? void 0 : options.defaultActiveId) !== null && _c !== void 0 ? _c : '');
+    var mobileOpen = $state(false);
+    return {
+        get mode() {
+            return mode;
+        },
+        get activeId() {
+            return activeId;
+        },
+        get mobileOpen() {
+            return mobileOpen;
+        },
+        setMode: function (m) {
+            mode = m;
+            writeStorage(storageKey, m);
+        },
+        toggleCollapse: function () {
+            var next = mode === 'expanded' ? 'icon' : 'expanded';
+            mode = next;
+            writeStorage(storageKey, next);
+        },
+        setActive: function (id) {
+            activeId = id;
+        },
+        setMobileOpen: function (open) {
+            mobileOpen = open;
+        }
+    };
+}

package/dist/components/table/DataTable.svelte

@@ -0,0 +1,364 @@
+<script lang="ts">
+	import {
+		createTable,
+		getCoreRowModel,
+		getSortedRowModel,
+		getPaginationRowModel,
+		type ColumnDef,
+		type SortingState,
+		type RowSelectionState,
+		type PaginationState,
+		type TableOptionsResolved,
+	} from '@tanstack/table-core';
+	import { flexRender } from './flexRender.js';
+	import type { DataTableProps } from './types.js';
+
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	type AnyData = any;
+
+	let {
+		data,
+		columns,
+		selectable = false,
+		paginated = false,
+		pageSize = 10,
+		sortable = false,
+		loading = false,
+		loadingRows = 5,
+		onSelectionChange,
+		class: className = '',
+	}: DataTableProps = $props();
+
+	// ── State ──────────────────────────────────────────────────────────────
+	let sorting = $state<SortingState>([]);
+	let rowSelection = $state<RowSelectionState>({});
+	let pagination = $state<PaginationState>({ pageIndex: 0, pageSize });
+
+	$effect(() => {
+		void data;
+		pagination = { pageIndex: 0, pageSize: pagination.pageSize };
+	});
+
+	const checkboxCol: ColumnDef<AnyData, unknown> = {
+		id: '__select',
+		header: () => null,
+		cell: () => null,
+		enableSorting: false,
+		size: 40,
+	};
+
+	const allColumns = $derived<ColumnDef<AnyData, unknown>[]>(
+		selectable ? [checkboxCol, ...(columns as ColumnDef<AnyData, unknown>[])] : (columns as ColumnDef<AnyData, unknown>[])
+	);
+
+	// ── Table instance ─────────────────────────────────────────────────────
+	const table = $derived.by(() => {
+		const opts: TableOptionsResolved<AnyData> = {
+			data,
+			columns: allColumns,
+			state: {
+				sorting,
+				rowSelection,
+				...(paginated ? { pagination } : {}),
+			},
+			enableRowSelection: selectable,
+			enableSorting: sortable,
+			onSortingChange: (updater) => {
+				sorting = typeof updater === 'function' ? updater(sorting) : updater;
+			},
+			onRowSelectionChange: (updater) => {
+				rowSelection = typeof updater === 'function' ? updater(rowSelection) : updater;
+			},
+			onPaginationChange: paginated
+				? (updater) => {
+						pagination = typeof updater === 'function' ? updater(pagination) : updater;
+					}
+				: () => {},
+			onStateChange: () => {},
+			getCoreRowModel: getCoreRowModel(),
+			getSortedRowModel: sortable ? getSortedRowModel() : undefined,
+			getPaginationRowModel: paginated ? getPaginationRowModel() : undefined,
+			renderFallbackValue: '',
+		};
+		return createTable(opts);
+	});
+
+	const headerGroups = $derived(table.getHeaderGroups());
+	const rows = $derived(table.getRowModel().rows);
+	const pageCount = $derived(table.getPageCount());
+	const canPrevPage = $derived(table.getCanPreviousPage());
+	const canNextPage = $derived(table.getCanNextPage());
+
+	$effect(() => {
+		if (!selectable || !onSelectionChange) return;
+		const selected = table.getSelectedRowModel().rows.map((r: AnyData) => r.original);
+		onSelectionChange(selected);
+	});
+
+	function sortDir(headerId: string): 'asc' | 'desc' | false {
+		const s = sorting.find((item) => item.id === headerId);
+		return s ? (s.desc ? 'desc' : 'asc') : false;
+	}
+
+	function renderHeader(header: ReturnType<typeof table.getHeaderGroups>[0]['headers'][0]) {
+		return flexRender(header.column.columnDef.header, header.getContext());
+	}
+
+	function renderCell(cell: ReturnType<ReturnType<typeof table.getRowModel>['rows'][0]['getVisibleCells']>[0]) {
+		return flexRender(cell.column.columnDef.cell, cell.getContext());
+	}
+</script>
+
+<div class="datatable-root {className}">
+	{#if loading}
+		<div class="overflow-x-auto">
+			<table class="table table-zebra w-full">
+				<thead>
+					<tr>
+						{#each allColumns as _}
+							<th><div class="skel-cell"></div></th>
+						{/each}
+					</tr>
+				</thead>
+				<tbody>
+					{#each { length: loadingRows } as _}
+						<tr>
+							{#each allColumns as _, ci}
+								<td>
+									<div class="skel-cell" style:width={ci === 0 && selectable ? '1.25rem' : '80%'}></div>
+								</td>
+							{/each}
+						</tr>
+					{/each}
+				</tbody>
+			</table>
+		</div>
+	{:else}
+		<div class="overflow-x-auto">
+			<table class="table table-zebra w-full">
+				<thead>
+					{#each headerGroups as headerGroup}
+						<tr>
+							{#each headerGroup.headers as header}
+								{#if header.column.id === '__select'}
+									<th class="dt-select-cell">
+										<input
+											type="checkbox"
+											class="checkbox checkbox-sm"
+											checked={table.getIsAllRowsSelected()}
+											indeterminate={table.getIsSomeRowsSelected()}
+											aria-label="Select all rows"
+											onchange={() => table.toggleAllRowsSelected()}
+										/>
+									</th>
+								{:else}
+									{@const isSortable = sortable && header.column.getCanSort()}
+									{@const dir = sortDir(header.column.id)}
+									{@const rendered = renderHeader(header)}
+									<th
+										style:width={header.getSize() !== 150 ? `${header.getSize()}px` : undefined}
+										class:dt-th-sortable={isSortable}
+										onclick={isSortable ? () => header.column.toggleSorting() : undefined}
+										aria-sort={dir === 'asc' ? 'ascending' : dir === 'desc' ? 'descending' : undefined}
+									>
+										<span class="dt-th-label">
+											{#if rendered.type === 'snippet'}
+												{@render rendered.snippet(rendered.props)}
+											{:else}
+												{rendered.value}
+											{/if}
+										</span>
+										{#if isSortable}
+											<span class="dt-sort-icon" class:dt-sort-active={dir !== false} aria-hidden="true">
+												{#if dir === 'asc'}
+													<svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M6 2L10 8H2L6 2Z" fill="currentColor"/></svg>
+												{:else if dir === 'desc'}
+													<svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M6 10L2 4H10L6 10Z" fill="currentColor"/></svg>
+												{:else}
+													<svg width="12" height="12" viewBox="0 0 12 12" fill="none">
+														<path d="M6 2L9 6H3L6 2Z" fill="currentColor" opacity="0.35"/>
+														<path d="M6 10L3 6H9L6 10Z" fill="currentColor" opacity="0.35"/>
+													</svg>
+												{/if}
+											</span>
+										{/if}
+									</th>
+								{/if}
+							{/each}
+						</tr>
+					{/each}
+				</thead>
+
+				<tbody>
+					{#if rows.length === 0}
+						<tr>
+							<td colspan={allColumns.length} class="dt-empty">No data</td>
+						</tr>
+					{:else}
+						{#each rows as row}
+							<tr class:dt-row-selected={row.getIsSelected()}>
+								{#each row.getVisibleCells() as cell}
+									{#if cell.column.id === '__select'}
+										<td class="dt-select-cell">
+											<input
+												type="checkbox"
+												class="checkbox checkbox-sm"
+												checked={row.getIsSelected()}
+												disabled={!row.getCanSelect()}
+												aria-label="Select row"
+												onchange={() => row.toggleSelected()}
+											/>
+										</td>
+									{:else}
+										{@const rendered = renderCell(cell)}
+										<td>
+											{#if rendered.type === 'snippet'}
+												{@render rendered.snippet(rendered.props)}
+											{:else}
+												{rendered.value}
+											{/if}
+										</td>
+									{/if}
+								{/each}
+							</tr>
+						{/each}
+					{/if}
+				</tbody>
+			</table>
+		</div>
+
+		{#if paginated && pageCount > 1}
+			<div class="dt-pagination">
+				<span class="dt-page-info">
+					Page {pagination.pageIndex + 1} of {pageCount}
+				</span>
+				<div class="dt-page-btns">
+					<button
+						type="button"
+						class="btn btn-sm btn-ghost"
+						disabled={!canPrevPage}
+						onclick={() => table.setPageIndex(0)}
+						aria-label="First page"
+					>«</button>
+					<button
+						type="button"
+						class="btn btn-sm btn-ghost"
+						disabled={!canPrevPage}
+						onclick={() => table.previousPage()}
+						aria-label="Previous page"
+					>‹</button>
+					<button
+						type="button"
+						class="btn btn-sm btn-ghost"
+						disabled={!canNextPage}
+						onclick={() => table.nextPage()}
+						aria-label="Next page"
+					>›</button>
+					<button
+						type="button"
+						class="btn btn-sm btn-ghost"
+						disabled={!canNextPage}
+						onclick={() => table.setPageIndex(pageCount - 1)}
+						aria-label="Last page"
+					>»</button>
+				</div>
+			</div>
+		{/if}
+	{/if}
+</div>
+
+<style>
+	.datatable-root {
+		width: 100%;
+	}
+
+	.dt-th-sortable {
+		cursor: pointer;
+		user-select: none;
+	}
+	.dt-th-sortable:hover {
+		background-color: oklch(var(--b2) / 0.6);
+	}
+
+	.dt-th-label {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--jatui-space-sm);
+	}
+
+	.dt-sort-icon {
+		display: inline-flex;
+		align-items: center;
+		margin-left: var(--jatui-space-xs);
+		color: oklch(var(--bc) / 0.35);
+		transition: color var(--motion-fast) var(--motion-glide),
+		            transform var(--motion-fast) var(--motion-glide);
+	}
+
+	.dt-sort-active {
+		color: oklch(var(--p) / 0.9);
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.dt-sort-icon { transition: none; }
+	}
+
+	.dt-row-selected {
+		background-color: oklch(var(--p) / 0.06) !important;
+	}
+
+	.dt-select-cell {
+		width: 2.5rem;
+		text-align: center;
+		vertical-align: middle;
+	}
+
+	.dt-empty {
+		text-align: center;
+		color: oklch(var(--bc) / 0.35);
+		padding: 2rem 1rem;
+		font-size: 0.875rem;
+	}
+
+	.dt-pagination {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: var(--jatui-space-base) var(--jatui-space-xs);
+		border-top: var(--jatui-border-w) solid oklch(var(--b3) / 1);
+		margin-top: var(--jatui-space-base);
+	}
+
+	.dt-page-info {
+		font-size: 0.8125rem;
+		color: oklch(var(--bc) / 0.5);
+	}
+
+	.dt-page-btns {
+		display: flex;
+		gap: var(--jatui-space-xs);
+	}
+
+	.skel-cell {
+		height: 0.875rem;
+		width: 80%;
+		border-radius: var(--jatui-radius-selector);
+		background: linear-gradient(
+			90deg,
+			oklch(var(--b2) / 1) 0%,
+			oklch(var(--b3) / 1) 25%,
+			oklch(var(--b2) / 1) 50%
+		);
+		background-size: 280% 100%;
+		animation: skel-shimmer 1.5s linear infinite;
+	}
+
+	@keyframes skel-shimmer {
+		0% { background-position: 140% 0; }
+		100% { background-position: -140% 0; }
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.skel-cell { animation: none; }
+	}
+</style>

package/dist/components/table/DataTable.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { DataTableProps } from './types.js';
+declare const DataTable: import("svelte").Component<DataTableProps<any>, {}, "">;
+type DataTable = ReturnType<typeof DataTable>;
+export default DataTable;

package/dist/components/table/flexRender.d.ts

@@ -0,0 +1,31 @@
+import type { Snippet } from 'svelte';
+/**
+ * Determines if a value is a Svelte snippet (function with _isSnippet marker
+ * or just a callable function — Svelte 5 snippets are tagged functions).
+ */
+export declare function isSnippet(value: unknown): value is Snippet;
+/**
+ * Cell render descriptor — returned from accessorFn / header / cell column
+ * definition fields. Can be a plain value, a Svelte snippet, or null/undefined.
+ */
+export type FlexRenderResult = {
+    type: 'snippet';
+    snippet: Snippet<[unknown]>;
+    props: unknown;
+} | {
+    type: 'value';
+    value: unknown;
+};
+/**
+ * Resolve a TanStack column `cell` or `header` definition to a renderable
+ * descriptor for use in Svelte templates.
+ *
+ * Usage in a .svelte template:
+ *   {@const cell = flexRender(column.columnDef.cell, cellCtx)}
+ *   {#if cell.type === 'snippet'}
+ *     {@render cell.snippet(cell.props)}
+ *   {:else}
+ *     {cell.value}
+ *   {/if}
+ */
+export declare function flexRender<TProps>(component: ((ctx: TProps) => unknown) | string | null | undefined, props: TProps): FlexRenderResult;

package/dist/components/table/flexRender.js

@@ -0,0 +1,32 @@
+/**
+ * Determines if a value is a Svelte snippet (function with _isSnippet marker
+ * or just a callable function — Svelte 5 snippets are tagged functions).
+ */
+export function isSnippet(value) {
+    return typeof value === 'function';
+}
+/**
+ * Resolve a TanStack column `cell` or `header` definition to a renderable
+ * descriptor for use in Svelte templates.
+ *
+ * Usage in a .svelte template:
+ *   {@const cell = flexRender(column.columnDef.cell, cellCtx)}
+ *   {#if cell.type === 'snippet'}
+ *     {@render cell.snippet(cell.props)}
+ *   {:else}
+ *     {cell.value}
+ *   {/if}
+ */
+export function flexRender(component, props) {
+    if (component == null) {
+        return { type: 'value', value: '' };
+    }
+    if (typeof component === 'string') {
+        return { type: 'value', value: component };
+    }
+    var result = component(props);
+    if (isSnippet(result)) {
+        return { type: 'snippet', snippet: result, props: props };
+    }
+    return { type: 'value', value: result };
+}

package/dist/components/table/types.d.ts

@@ -0,0 +1,28 @@
+import type { ColumnDef, Row } from '@tanstack/table-core';
+export type { ColumnDef, Row };
+export interface DataTableProps<TData = any> {
+    /** Row data array */
+    data: TData[];
+    /** TanStack column definitions */
+    columns: ColumnDef<TData, unknown>[];
+    /** Show a checkbox column for row selection */
+    selectable?: boolean;
+    /** Enable client-side pagination */
+    paginated?: boolean;
+    /** Rows per page (default 10) */
+    pageSize?: number;
+    /** Enable column sorting */
+    sortable?: boolean;
+    /** Show shimmer skeleton rows while loading */
+    loading?: boolean;
+    /** Number of skeleton rows to show while loading (default 5) */
+    loadingRows?: number;
+    /** Emitted when the selection set changes */
+    onSelectionChange?: (rows: TData[]) => void;
+    /** Additional table class */
+    class?: string;
+}
+export interface SelectionEvent<TData> {
+    rows: TData[];
+    ids: string[];
+}

package/dist/components/table/types.js

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

package/dist/components/toast/ToastHost.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { getToasts } from '../../stores/toast.svelte.js';
+	import ToastItem from './ToastItem.svelte';
+
+	const toasts = $derived(getToasts());
+</script>
+
+<!--
+	Mount once in your app root (e.g. +layout.svelte).
+	Fixed bottom-right, pointer-events only on the toast list.
+-->
+<div
+	aria-label="Notifications"
+	class="toast-host pointer-events-none fixed right-4 bottom-4 z-[9999] flex flex-col-reverse items-end gap-2 w-80 max-w-[calc(100vw-2rem)]"
+>
+	<ul class="contents">
+		{#each toasts as toast, i (toast.id)}
+			<ToastItem {toast} index={i} total={toasts.length} />
+		{/each}
+	</ul>
+</div>

package/dist/components/toast/ToastHost.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const ToastHost: import("svelte").Component<Record<string, never>, {}, "">;
+type ToastHost = ReturnType<typeof ToastHost>;
+export default ToastHost;