firstly 0.10.8 → 0.12.0

package/esm/sqlAdmin/ui/SqlDrift.svelte

@@ -188,7 +188,7 @@
 		type="button"
 		{onclick}
 		disabled={loading}
-		class="bg-secondary text-secondary-foreground hover:bg-secondary/80 px-3 py-1.5 text-sm font-medium disabled:opacity-50"
+		class="bg-secondary px-3 py-1.5 text-sm font-medium text-secondary-foreground hover:bg-secondary/80 disabled:opacity-50"
 	>
 		{loading ? 'Running…' : label}
 	</button>
@@ -199,19 +199,19 @@
 		type="button"
 		{onclick}
 		{disabled}
-		class="bg-primary text-primary-foreground hover:bg-primary/90 px-3 py-1.5 text-sm font-medium disabled:opacity-50"
+		class="bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50"
 	>
 		{label}
 	</button>
 {/snippet}
 
 {#snippet resultTable(headers: string[], children: import('svelte').Snippet)}
-	<div class="border-border overflow-auto border">
+	<div class="overflow-auto border border-border">
 		<table class="w-full border-collapse text-sm">
 			<thead class="bg-muted">
 				<tr>
 					{#each headers as h (h)}
-						<th class="border-border border-b px-3 py-2 text-left font-semibold">{h}</th>
+						<th class="border-b border-border px-3 py-2 text-left font-semibold">{h}</th>
 					{/each}
 				</tr>
 			</thead>
@@ -222,18 +222,18 @@
 	</div>
 {/snippet}
 
-<div class="border-border bg-card text-card-foreground border">
+<div class="border border-border bg-card text-card-foreground">
 	<header class="px-5 py-4">
 		<h2 class="text-lg font-semibold">Schema drift</h2>
-		<p class="text-muted-foreground mt-1 text-sm">
+		<p class="mt-1 text-sm text-muted-foreground">
 			Remult creates tables and adds columns, but never revisits them. Each check below is a dry run
 			first; applying runs in one transaction.
 		</p>
 		{#if flagsError}
 			<pre
-				class="border-destructive/40 bg-destructive/10 text-destructive mt-3 overflow-auto border p-3 text-sm">{flagsError}</pre>
+				class="mt-3 overflow-auto border border-destructive/40 bg-destructive/10 p-3 text-sm text-destructive">{flagsError}</pre>
 		{:else if flags && !Object.values(flags).some(Boolean)}
-			<p class="text-muted-foreground mt-3 text-sm">
+			<p class="mt-3 text-sm text-muted-foreground">
 				No check enabled. Opt in with <code class="font-mono"
 					>sqlAdmin(&#123; drift: &#123; entities, relationIndexes: true, ... &#125; &#125;)</code
 				>.
@@ -243,9 +243,9 @@
 
 	<!-- Flow 1: primary keys -->
 	{#if flags?.primaryKeys}
-		<section class="border-border border-t p-5">
+		<section class="border-t border-border p-5">
 			<h3 class="text-sm font-semibold">Primary key drift</h3>
-			<p class="text-muted-foreground mt-1 mb-4 max-w-[80ch] text-sm">
+			<p class="mt-1 mb-4 max-w-[80ch] text-sm text-muted-foreground">
 				Postgres only sets a PK on first table creation and never ALTERs it, so a later
 				<code class="font-mono">id</code> change is silently ignored. Applying runs every migration atomically.
 			</p>
@@ -261,12 +261,12 @@
 
 			{#if pkError}
 				<pre
-					class="border-destructive/40 bg-destructive/10 text-destructive mb-4 overflow-auto border p-3 text-sm">{pkError}</pre>
+					class="mb-4 overflow-auto border border-destructive/40 bg-destructive/10 p-3 text-sm text-destructive">{pkError}</pre>
 			{/if}
 
 			{#if pkResult}
 				{#if pkResult.applied}
-					<p class="border-primary/30 bg-primary/10 text-primary mb-3 border p-2 text-sm">
+					<p class="mb-3 border border-primary/30 bg-primary/10 p-2 text-sm text-primary">
 						Applied · {pkDrift} table{pkDrift === 1 ? '' : 's'} migrated
 					</p>
 				{/if}
@@ -274,15 +274,15 @@
 				{#snippet pkRows()}
 					{#each pkPlans as p (p.table)}
 						<tr class="even:bg-muted/40" class:opacity-50={p.action === 'ok'}>
-							<td class="border-border border-b px-3 py-2 font-mono">{p.table}</td>
-							<td class="border-border text-muted-foreground border-b px-3 py-2 font-mono">
+							<td class="border-b border-border px-3 py-2 font-mono">{p.table}</td>
+							<td class="border-b border-border px-3 py-2 font-mono text-muted-foreground">
 								{p.before.join(', ') || '-'}
 							</td>
-							<td class="border-border text-muted-foreground border-b px-3 py-2 font-mono">
+							<td class="border-b border-border px-3 py-2 font-mono text-muted-foreground">
 								{p.after.join(', ')}
 							</td>
 							<td
-								class="border-border border-b px-3 py-2 font-mono"
+								class="border-b border-border px-3 py-2 font-mono"
 								class:text-primary={p.action === 'migrate' || p.action === 'create'}
 								class:text-muted-foreground={p.action === 'missing'}
 							>
@@ -298,9 +298,9 @@
 
 	<!-- Flow 2: relation indexes -->
 	{#if flags?.relationIndexes}
-		<section class="border-border border-t p-5">
+		<section class="border-t border-border p-5">
 			<h3 class="text-sm font-semibold">Relation indexes</h3>
-			<p class="text-muted-foreground mt-1 mb-4 max-w-[80ch] text-sm">
+			<p class="mt-1 mb-4 max-w-[80ch] text-sm text-muted-foreground">
 				Postgres doesn't auto-index foreign keys. This indexes the FK columns of
 				<code class="font-mono">toOne</code> relations - unless they're already a leftmost prefix of an
 				existing index (the PK counts), so <code class="font-mono">a</code> on a
@@ -320,12 +320,12 @@
 
 			{#if relError}
 				<pre
-					class="border-destructive/40 bg-destructive/10 text-destructive mb-4 overflow-auto border p-3 text-sm">{relError}</pre>
+					class="mb-4 overflow-auto border border-destructive/40 bg-destructive/10 p-3 text-sm text-destructive">{relError}</pre>
 			{/if}
 
 			{#if relResult}
 				{#if relResult.applied}
-					<p class="border-primary/30 bg-primary/10 text-primary mb-3 border p-2 text-sm">
+					<p class="mb-3 border border-primary/30 bg-primary/10 p-2 text-sm text-primary">
 						Created · {relMissing} index{relMissing === 1 ? '' : 'es'}
 					</p>
 				{/if}
@@ -333,12 +333,12 @@
 				{#snippet relRows()}
 					{#each relPlans as p (p.name)}
 						<tr class="even:bg-muted/40" class:opacity-50={p.action === 'ok'}>
-							<td class="border-border border-b px-3 py-2 font-mono">{p.name}</td>
-							<td class="border-border text-muted-foreground border-b px-3 py-2 font-mono">
+							<td class="border-b border-border px-3 py-2 font-mono">{p.name}</td>
+							<td class="border-b border-border px-3 py-2 font-mono text-muted-foreground">
 								{p.table} ({p.columns.join(', ')})
 							</td>
 							<td
-								class="border-border border-b px-3 py-2 font-mono"
+								class="border-b border-border px-3 py-2 font-mono"
 								class:text-primary={p.action === 'create'}
 							>
 								{p.action === 'ok'
@@ -357,9 +357,9 @@
 
 	<!-- Flow 3: drop orphan columns -->
 	{#if flags?.orphanColumns}
-		<section class="border-border border-t p-5">
+		<section class="border-t border-border p-5">
 			<h3 class="text-sm font-semibold">Orphan columns</h3>
-			<p class="text-muted-foreground mt-1 mb-4 max-w-[80ch] text-sm">
+			<p class="mt-1 mb-4 max-w-[80ch] text-sm text-muted-foreground">
 				Remult only ever ADDs columns, never drops them, so a field removed from an entity leaves its
 				column behind. This lists live columns no entity field declares - e.g. a
 				<code class="font-mono">createdAt</code> now covered by the changelog. Destructive, so nothing
@@ -377,23 +377,23 @@
 
 			{#if dropError}
 				<pre
-					class="border-destructive/40 bg-destructive/10 text-destructive mb-4 overflow-auto border p-3 text-sm">{dropError}</pre>
+					class="mb-4 overflow-auto border border-destructive/40 bg-destructive/10 p-3 text-sm text-destructive">{dropError}</pre>
 			{/if}
 
 			{#if dropResult}
 				{#if dropResult.applied}
-					<p class="border-primary/30 bg-primary/10 text-primary mb-3 border p-2 text-sm">
+					<p class="mb-3 border border-primary/30 bg-primary/10 p-2 text-sm text-primary">
 						Dropped · {dropResult.dropped.length} column{dropResult.dropped.length === 1 ? '' : 's'}
 					</p>
 				{/if}
 
 				{#if dropPlans.length === 0}
-					<p class="text-muted-foreground text-sm">No orphan columns - every column maps to a field.</p>
+					<p class="text-sm text-muted-foreground">No orphan columns - every column maps to a field.</p>
 				{:else}
 					{#snippet dropRows()}
 						{#each dropPlans as p (keyOf(p))}
 							<tr class="even:bg-muted/40">
-								<td class="border-border border-b px-3 py-2">
+								<td class="border-b border-border px-3 py-2">
 									<input
 										type="checkbox"
 										checked={selected.has(keyOf(p))}
@@ -401,8 +401,8 @@
 										aria-label={`Drop ${keyOf(p)}`}
 									/>
 								</td>
-								<td class="border-border border-b px-3 py-2 font-mono">{p.table}</td>
-								<td class="border-border text-primary border-b px-3 py-2 font-mono">{p.column}</td>
+								<td class="border-b border-border px-3 py-2 font-mono">{p.table}</td>
+								<td class="border-b border-border px-3 py-2 font-mono text-primary">{p.column}</td>
 							</tr>
 						{/each}
 					{/snippet}
@@ -414,9 +414,9 @@
 
 	<!-- Flow 4: nullability drift -->
 	{#if flags?.nullable}
-		<section class="border-border border-t p-5">
+		<section class="border-t border-border p-5">
 			<h3 class="text-sm font-semibold">Nullability drift</h3>
-			<p class="text-muted-foreground mt-1 mb-4 max-w-[80ch] text-sm">
+			<p class="mt-1 mb-4 max-w-[80ch] text-sm text-muted-foreground">
 				A field that is not <code class="font-mono">allowNull</code> makes Remult create the column
 				<code class="font-mono">default '' not null</code>, and it never relaxes that afterwards. So a
 				column added before its field learned <code class="font-mono">allowNull</code> still hands every
@@ -439,25 +439,25 @@
 
 			{#if nullError}
 				<pre
-					class="border-destructive/40 bg-destructive/10 text-destructive mb-4 overflow-auto border p-3 text-sm">{nullError}</pre>
+					class="mb-4 overflow-auto border border-destructive/40 bg-destructive/10 p-3 text-sm text-destructive">{nullError}</pre>
 			{/if}
 
 			{#if nullResult}
 				{#if nullResult.applied}
-					<p class="border-primary/30 bg-primary/10 text-primary mb-3 border p-2 text-sm">
+					<p class="mb-3 border border-primary/30 bg-primary/10 p-2 text-sm text-primary">
 						Fixed · {nullResult.fixed.length} column{nullResult.fixed.length === 1 ? '' : 's'}
 					</p>
 				{/if}
 
 				{#if nullPlans.length === 0}
-					<p class="text-muted-foreground text-sm">
+					<p class="text-sm text-muted-foreground">
 						No drift - every nullable field has a plain nullable column.
 					</p>
 				{:else}
 					{#snippet nullRows()}
 						{#each nullPlans as p (keyOf(p))}
 							<tr class="even:bg-muted/40">
-								<td class="border-border border-b px-3 py-2">
+								<td class="border-b border-border px-3 py-2">
 									<input
 										type="checkbox"
 										checked={nullSelected.has(keyOf(p))}
@@ -465,14 +465,14 @@
 										aria-label={`Fix ${keyOf(p)}`}
 									/>
 								</td>
-								<td class="border-border border-b px-3 py-2 font-mono">{p.table}</td>
-								<td class="border-border text-primary border-b px-3 py-2 font-mono">{p.column}</td>
-								<td class="border-border border-b px-3 py-2 text-sm">
+								<td class="border-b border-border px-3 py-2 font-mono">{p.table}</td>
+								<td class="border-b border-border px-3 py-2 font-mono text-primary">{p.column}</td>
+								<td class="border-b border-border px-3 py-2 text-sm">
 									{[p.dropDefault && 'drop default', p.dropNotNull && 'drop not null']
 										.filter(Boolean)
 										.join(' · ')}
 								</td>
-								<td class="border-border border-b px-3 py-2 text-sm">
+								<td class="border-b border-border px-3 py-2 text-sm">
 									{p.blankToNull ? "'' → NULL" : 'rows kept'}
 								</td>
 							</tr>

package/esm/svelte/FF_DialogManager.svelte

@@ -196,7 +196,7 @@
 			role="dialog"
 			aria-modal="true"
 			tabindex="-1"
-			class="bg-background text-foreground border-border relative z-[1] max-h-[90vh] w-full {widthClass[
+			class="relative z-[1] max-h-[90vh] w-full border-border bg-background text-foreground {widthClass[
 				width
 			]} overflow-auto rounded-lg border p-5 shadow-xl"
 		>
@@ -207,7 +207,7 @@
 				<button
 					type="button"
 					aria-label="Close"
-					class="text-muted-foreground hover:text-foreground absolute top-3 right-3 inline-flex size-7 items-center justify-center rounded-md"
+					class="absolute top-3 right-3 inline-flex size-7 items-center justify-center rounded-md text-muted-foreground hover:text-foreground"
 					onclick={dismiss}
 				>
 					✕
@@ -242,7 +242,7 @@
 			aria-labelledby={title ? `ff-dlg-title-${id}` : undefined}
 			aria-label={title ? undefined : message}
 			aria-describedby="ff-dlg-desc-{id}"
-			class="bg-background text-foreground border-border relative z-[1] w-full max-w-sm rounded-lg border p-5 shadow-xl"
+			class="relative z-[1] w-full max-w-sm rounded-lg border border-border bg-background p-5 text-foreground shadow-xl"
 		>
 			{#if title}
 				<h2 id="ff-dlg-title-{id}" class="mb-2 text-lg font-semibold">{title}</h2>
@@ -251,7 +251,7 @@
 			<div class="mt-5 flex justify-end gap-2">
 				<button
 					type="button"
-					class="border-border hover:bg-muted rounded-md border px-3 py-1.5 text-sm"
+					class="rounded-md border border-border px-3 py-1.5 text-sm hover:bg-muted"
 					onclick={cancel}
 				>
 					{cancelLabel}

package/esm/svelte/FF_PromptDefault.svelte

@@ -38,7 +38,7 @@
 		tabindex="-1"
 		aria-labelledby={item.title ? `ff-prompt-title-${item.id}` : undefined}
 		aria-label={item.title ? undefined : item.label ? resolveMessage(item.label) : undefined}
-		class="bg-background text-foreground border-border relative z-[1] w-full max-w-sm rounded-lg border p-5 shadow-xl"
+		class="relative z-[1] w-full max-w-sm rounded-lg border border-border bg-background p-5 text-foreground shadow-xl"
 	>
 		<form
 			onsubmit={(e) => {
@@ -52,7 +52,7 @@
 				</h2>
 			{/if}
 			{#if item.label}
-				<label class="text-muted-foreground mb-1 block text-sm" for="ff-prompt-{item.id}">
+				<label class="mb-1 block text-sm text-muted-foreground" for="ff-prompt-{item.id}">
 					{resolveMessage(item.label)}
 				</label>
 			{/if}
@@ -60,22 +60,22 @@
 				id="ff-prompt-{item.id}"
 				bind:value
 				placeholder={item.placeholder}
-				class="border-border bg-card focus-visible:ring-ring w-full rounded-md border px-3 py-2 text-sm focus-visible:ring-2 focus-visible:outline-none"
+				class="w-full rounded-md border border-border bg-card px-3 py-2 text-sm focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none"
 			/>
 			{#if item.hint}
-				<p class="text-muted-foreground mt-1 text-xs">{item.hint(value)}</p>
+				<p class="mt-1 text-xs text-muted-foreground">{item.hint(value)}</p>
 			{/if}
 			<div class="mt-5 flex justify-end gap-2">
 				<button
 					type="button"
-					class="border-border hover:bg-muted rounded-md border px-3 py-1.5 text-sm"
+					class="rounded-md border border-border px-3 py-1.5 text-sm hover:bg-muted"
 					onclick={oncancel}
 				>
 					{resolveMessage(item.cancelLabel ?? cfg.messages.cancel)}
 				</button>
 				<button
 					type="submit"
-					class="bg-primary text-primary-foreground hover:bg-primary/90 rounded-md px-3 py-1.5 text-sm font-medium"
+					class="rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground hover:bg-primary/90"
 				>
 					{resolveMessage(item.confirmLabel ?? cfg.messages.ok)}
 				</button>

package/esm/svelte/class/SP.svelte.d.ts

@@ -22,6 +22,7 @@ export declare class SP<T extends Record<string, any>> {
     private debouncedValues;
     computing: boolean;
     private debouncedToURL;
+    private lastNavigation;
     private sharedDebouncePending;
     private activeDebounces;
     private longestDebounceTime;

package/esm/svelte/class/SP.svelte.js

@@ -1,9 +1,4 @@
-// FIXME
-// Why packages/ui pnpm check fails with goto and page?
-//   - OK it's not a sveltekit project... But this is never used! So why is it checking it ?!
-// @ts-ignore
 import { goto } from '$app/navigation';
-// @ts-ignore
 import { page } from '$app/state';
 import { debounce } from '../helpers/debounce.js';
 const CONFIG_DELIMITER = ';';
@@ -23,6 +18,7 @@ export class SP {
     computing = $state(false);
     // Store debounced toURL functions for each parameter
     debouncedToURL = {};
+    lastNavigation;
     // Shared debounce mechanism for all parameters
     sharedDebouncePending = $state(false);
     activeDebounces = $state({});
@@ -37,9 +33,8 @@ export class SP {
         for (const key of Object.keys(this.paramValues)) {
             this.debouncedValues[key] = this.paramValues[key];
         }
-        // Update URL and reset flags
+        // `computing` stays on until toURL's navigation lands
         this.sharedDebouncePending = false;
-        this.computing = false;
         this.longestDebounceTime = 0;
         this.toURL();
     };
@@ -393,16 +388,21 @@ export class SP {
         }
         const strSearch = params.toString() ? '?' + params.toString() : '';
         // Don't do the goto if the search params haven't changed!
-        if (strSearch === window.location.search)
+        if (strSearch === window.location.search) {
+            this.computing = false;
             return;
-        goto(`${window.location.pathname}${strSearch}`, {
-            keepFocus: true,
-            replaceState: true,
-            noScroll: true,
+        }
+        const navigation = goto(`${window.location.pathname}${strSearch}`, {
+            replace: true,
+            reset: false,
             ...this.options.gotoOpts,
         });
-        // Reset computing flag after URL update is complete
-        this.computing = false;
+        this.lastNavigation = navigation;
+        // A newer navigation or a pending debounce keeps `computing` on
+        void navigation.finally(() => {
+            if (this.lastNavigation === navigation && !this.sharedDebouncePending)
+                this.computing = false;
+        });
     }
     /**
      * Reset all parameters to their default values
@@ -418,7 +418,6 @@ export class SP {
         this.sharedDebouncePending = false;
         this.longestDebounceTime = 0;
         // Update URL immediately without debounce
-        this.computing = false;
         this.toURL();
     }
 }

package/esm/svelte/dialog.svelte.d.ts

@@ -15,7 +15,7 @@ export { resolveMessage } from '../core/FF_Validators.js';
  * cancelled/dismissed - no per-method `boolean` / `null` special-casing.
  *
  * ```svelte
- * import { dialog } from './'
+ * import { dialog } from 'firstly/svelte'
  *
  * {#snippet body(close)}
  *   <input bind:value={name} />

package/esm/svelte/grid/FF_Grid.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" generics="T extends object">
-	// PUBLISHED batteries-included grid — `import { FF_Grid } from '..'` and go, zero setup:
+	// PUBLISHED batteries-included grid — `import { FF_Grid } from 'firstly/svelte'` and go, zero setup:
 	// it bundles a default input + a neutral default skin. Reads the entity `hub` (every prop overrides).
 	// For full control over markup + look, copy the boutique <App_Grid> instead (degit src/boutique/grid).
 	import { untrack } from 'svelte'
@@ -9,10 +9,10 @@
 
 	import { errorMessage } from '../../core/helper.js'
 	import type { DialogClose } from '../dialog.svelte.js'
-	import FF_Config from '../FF_Config.svelte'
-	import { ffConfig } from '../FF_Config.svelte.js'
 	import { ff } from '../ff.svelte.js'
 	import type { FF_Many, ManyStrategy } from '../ff.svelte.js'
+	import FF_Config from '../FF_Config.svelte'
+	import { ffConfig } from '../FF_Config.svelte.js'
 	import Icon from '../ui/Icon.svelte'
 	import { LibIcon_Add, LibIcon_Edit } from '../ui/LibIcon.js'
 	import { buildCells } from './buildCells.js'
@@ -61,7 +61,10 @@
 	const strategy = untrack(() => strategyProp ?? hub.strategy ?? 'paginate')
 	const pageSize = untrack(() => pageSizeProp ?? hub.pageSize ?? 25)
 
-	let sort = $state<EntityOrderBy<T> | undefined>(untrack(() => orderBy ?? hub.orderBy))
+	// fall back to the entity default so the header arrow shows what remult applies on landing
+	let sort = $state<EntityOrderBy<T> | undefined>(
+		untrack(() => orderBy ?? hub.orderBy ?? repo(entity).metadata.options.defaultOrderBy),
+	)
 
 	const m = untrack(() =>
 		ff(entity).many(
@@ -101,9 +104,9 @@
 	const newIcon = $derived(insertCfg !== false ? (insertCfg.icon ?? LibIcon_Add) : LibIcon_Add)
 	const editIcon = $derived(updateCfg !== false ? (updateCfg.icon ?? LibIcon_Edit) : LibIcon_Edit)
 
-	function toggleSort(key: string) {
+	function toggleSort(key: string, first: 'asc' | 'desc') {
 		const cur = (sort as Record<string, 'asc' | 'desc'> | undefined)?.[key]
-		sort = { [key]: cur === 'asc' ? 'desc' : 'asc' } as EntityOrderBy<T>
+		sort = { [key]: cur ? (cur === 'asc' ? 'desc' : 'asc') : first } as EntityOrderBy<T>
 	}
 	const sortDir = (key: string) => (sort as Record<string, string> | undefined)?.[key]
 
@@ -185,9 +188,9 @@
 						data-sortable={cell.sortable || undefined}
 						style:text-align={cell.align}
 						class={cell.class}
-						onclick={() => cell.sortable && cell.col && toggleSort(cell.col)}
+						onclick={() => cell.sortable && cell.col && toggleSort(cell.col, cell.firstSort)}
 					>
-						{cell.caption}{#if cell.col && sortDir(cell.col)}<span data-sort
+						{cell.caption}{#if cell.sortable && cell.col && sortDir(cell.col)}<span data-sort
 								>{sortDir(cell.col) === 'asc' ? ' ▲' : ' ▼'}</span
 							>{/if}
 					</th>

package/esm/svelte/grid/buildCells.js

@@ -15,6 +15,11 @@ function alignFor(field, ui) {
         return 'right';
     return 'left';
 }
+// newest / biggest first is the useful first view for dates + numbers
+function firstSortFor(field) {
+    const t = field?.valueType;
+    return t === Date || t === Number ? 'desc' : 'asc';
+}
 /** Resolve the render kind: explicit > href(field_link) > metaKind(relation/enum) > field. */
 function resolveKind(field, explicit) {
     if (explicit)
@@ -58,6 +63,7 @@ export function buildCells(meta, cells, opts) {
             inputType: field ? getInputType(field, ui) : 'text',
             align: alignFor(field, ui),
             sortable,
+            firstSort: (isObj && item.firstSort) || firstSortFor(field),
             class: isObj ? item.class : undefined,
             cellSnippet: isObj ? item.cellSnippet : undefined,
             component: isObj ? item.component : undefined,

package/esm/svelte/grid/cellTypes.d.ts

@@ -41,6 +41,8 @@ export interface Cell<E = any> {
     align: 'left' | 'center' | 'right';
     /** Whether this column is sortable by header click (resolved; opt in via `sortable: true`). */
     sortable: boolean;
+    /** Direction of the first header click on an unsorted column. */
+    firstSort: 'asc' | 'desc';
     /** Tailwind/CSS passthrough (e.g. 'col-span-2'). */
     class?: string;
     cellSnippet?: Snippet<[{
@@ -62,6 +64,8 @@ export type CellInput<E> = (keyof E & string) | {
     class?: string;
     /** Set true to make this column sortable by header click (default: not sortable). */
     sortable?: boolean;
+    /** First header click direction. Default: `desc` for Date/Number fields, else `asc`. */
+    firstSort?: 'asc' | 'desc';
     cellSnippet?: Snippet<[{
         row: E;
         cell: Cell<E>;

package/esm/svelte/handleError.d.ts

@@ -1,4 +1,4 @@
-import type { HandleClientError } from '@sveltejs/kit';
+import type { HandleClientError } from '@sveltejs/kit/hooks';
 export type HandleClientErrorMiddleware = (next: HandleClientError) => HandleClientError;
 /**
  * Compose `handleError` middlewares into a single `hooks.client.js` handler.
@@ -8,7 +8,7 @@ export type HandleClientErrorMiddleware = (next: HandleClientError) => HandleCli
  *
  * ```js
  * // src/hooks.client.js
- * import { stackHandleClientError, withStaleDeployReload } from './'
+ * import { stackHandleClientError, withStaleDeployReload } from 'firstly/svelte'
  *
  * export const handleError = stackHandleClientError(
  *   withStaleDeployReload(),
@@ -29,3 +29,9 @@ export declare function stackHandleClientError(...middlewares: HandleClientError
  * falls through to `next`.
  */
 export declare function withStaleDeployReload(): HandleClientErrorMiddleware;
+/**
+ * Recovers what Kit leaves out after a deploy: a lazy `import()` inside a component. Reloads
+ * only when `updated.check()` confirms a new version, so a flaky network can't loop. Call it
+ * at the top of `hooks.client.js`.
+ */
+export declare function reloadOnStaleChunk(): void;

package/esm/svelte/handleError.js

@@ -1,3 +1,4 @@
+import { navigating, updated } from '$app/state';
 /**
  * Compose `handleError` middlewares into a single `hooks.client.js` handler.
  * Middlewares run outermost-first (the first argument wraps the rest). A middleware
@@ -6,7 +7,7 @@
  *
  * ```js
  * // src/hooks.client.js
- * import { stackHandleClientError, withStaleDeployReload } from './'
+ * import { stackHandleClientError, withStaleDeployReload } from 'firstly/svelte'
  *
  * export const handleError = stackHandleClientError(
  *   withStaleDeployReload(),
@@ -22,6 +23,8 @@ export function stackHandleClientError(...middlewares) {
 }
 // Errors SvelteKit/Vite throw when a lazy chunk 404s after a deploy.
 const CHUNK_LOAD_RE = /Failed to fetch dynamically imported module|error loading dynamically imported module|Importing a module script failed/;
+// Kit recovers route chunks itself, and one failing on hover must not reload the page.
+const ROUTE_CHUNK_RE = /\/immutable\/nodes\//;
 const STORAGE_KEY = 'ff-reload';
 // A URL that failed again within this window is a genuine break, not a stale deploy.
 const RETRY_WINDOW_MS = 10_000;
@@ -35,12 +38,19 @@ const RETRY_WINDOW_MS = 10_000;
  */
 export function withStaleDeployReload() {
     return (next) => (input) => {
-        if (CHUNK_LOAD_RE.test(String(input.message)) && reloadOnce(input.event.url.href)) {
+        if (input.kind === 'unknown' &&
+            CHUNK_LOAD_RE.test(String(input.error)) &&
+            isVisited(input.event.url) &&
+            reloadOnce(input.event.url.href)) {
             return; // page is unloading; no error surfaces
         }
         return next(input);
     };
 }
+// A hovered link preloads through handleError too, and must not navigate on its own.
+function isVisited(url) {
+    return url.href === location.href || url.href === navigating.to?.url.href;
+}
 /** Hard-reload `href` unless it already failed within the guard window. Returns true if reloading. */
 function reloadOnce(href) {
     try {
@@ -60,3 +70,15 @@ function reloadOnce(href) {
         return false; // no sessionStorage (private mode) -> don't risk a loop
     }
 }
+/**
+ * Recovers what Kit leaves out after a deploy: a lazy `import()` inside a component. Reloads
+ * only when `updated.check()` confirms a new version, so a flaky network can't loop. Call it
+ * at the top of `hooks.client.js`.
+ */
+export function reloadOnStaleChunk() {
+    addEventListener('vite:preloadError', (event) => {
+        if (ROUTE_CHUNK_RE.test(String(event.payload)))
+            return;
+        void updated.check().then((stale) => stale && location.reload());
+    });
+}

package/esm/svelte/index.d.ts

@@ -3,7 +3,7 @@ export { ff } from './ff.svelte.js';
 export type { FF_Many, FF_One, FF_Builder, FF_RepoOptions, FF_OneOptions, FF_RepoLoading, FF_Issue, ManyStrategy, AggregateOptions, QueryOptionsHelper, } from './ff.svelte.js';
 export { infiniteScroll } from './infiniteScroll.js';
 export type { InfiniteScrollOptions } from './infiniteScroll.js';
-export { stackHandleClientError, withStaleDeployReload } from './handleError.js';
+export { reloadOnStaleChunk, stackHandleClientError, withStaleDeployReload } from './handleError.js';
 export type { HandleClientErrorMiddleware } from './handleError.js';
 export { dialog, ffAutofocus, ffTrapFocus, resolveMessage } from './dialog.svelte.js';
 export type { DialogResult, DialogClose, DialogOptions, DialogItem, DialogRender, ConfirmItem, PromptItem, DialogShellArgs, DialogConfirmArgs, DialogPromptArgs, } from './dialog.svelte.js';

package/esm/svelte/index.js

@@ -1,7 +1,7 @@
 export { errorMessage, isError } from '../core/helper.js';
 export { ff } from './ff.svelte.js';
 export { infiniteScroll } from './infiniteScroll.js';
-export { stackHandleClientError, withStaleDeployReload } from './handleError.js';
+export { reloadOnStaleChunk, stackHandleClientError, withStaleDeployReload } from './handleError.js';
 export { dialog, ffAutofocus, ffTrapFocus, resolveMessage } from './dialog.svelte.js';
 export { default as FF_DialogManager } from './FF_DialogManager.svelte';
 export { default as FF_Config } from './FF_Config.svelte';