firstly 0.11.0 → 0.12.0

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';

package/esm/svelte/query/index.svelte.d.ts

@@ -0,0 +1,40 @@
+import { type ClassType, type EntityFilter, type FindOptions } from 'remult';
+import type { RemoteQuery, RemoteResource } from '$app/server';
+/** No `set` or `withOverride`: they would hold rows, not entities. */
+export type RepoQuery<T> = RemoteResource<T> & Pick<RemoteQuery<T>, 'refresh'>;
+/**
+ * `repo(E)` for reactive reads: SSR goes through the API (rules apply, as the
+ * current user) and hydration sends no query.
+ *
+ * ```svelte
+ * <script lang="ts">
+ * 	import { repo } from 'remult'
+ *
+ * 	import { queryRepo } from 'firstly/svelte/query'
+ *
+ * 	let { params } = $props()
+ *
+ * 	let tasks = $derived(await queryRepo(Task).find({ where: { slug: params.slug } }))
+ * </script>
+ *
+ * {#each tasks as task (task.id)}
+ * 	<button onclick={() => repo(Task).update(task.id, { done: true })}>{task.title}</button>
+ * {/each}
+ * ```
+ *
+ * Plain `repo(E)` writes in the browser refresh the queries of `E` on screen.
+ * To do so, importing this wraps `remult.dataProvider` in the browser. Call
+ * `.refresh()` for what it can't see: BackendMethods, `include`d entities and
+ * other users' writes.
+ *
+ * A failed refresh reaches the error page, like any `.refresh()` in Kit.
+ * Long filters can exceed the URL limit: arguments travel in a GET.
+ *
+ * @experimental Needs `experimental.remoteFunctions` and
+ * `compilerOptions.experimental.async`.
+ */
+export declare const queryRepo: <T>(entity: ClassType<T>) => {
+    find: (options?: FindOptions<T>) => RepoQuery<T[]>;
+    findFirst: (where?: EntityFilter<T>, options?: FindOptions<T>) => RepoQuery<T | undefined>;
+    count: (where?: EntityFilter<T>) => RepoQuery<number>;
+};

package/esm/svelte/query/index.svelte.js

@@ -0,0 +1,112 @@
+import { BROWSER } from 'esm-env';
+import { Filter, remult, repo, } from 'remult';
+import { read } from './read.remote.js';
+const WRITES = new Set([
+    'insert',
+    'update',
+    'delete',
+    'deleteMany',
+    'updateMany',
+    'upsertMany',
+]);
+/** Entity key -> args of the queries on screen. */
+const live = new Map();
+const track = (arg) => {
+    const id = JSON.stringify(arg);
+    try {
+        $effect.pre(() => {
+            const args = live.get(arg.key) ?? live.set(arg.key, new Map()).get(arg.key);
+            const entry = args.get(id) ?? args.set(id, { arg, count: 0 }).get(id);
+            entry.count++;
+            return () => {
+                if (--entry.count === 0)
+                    args.delete(id);
+            };
+        });
+    }
+    catch {
+        // not in a reactive context: nothing on screen to refresh
+    }
+};
+// allSettled: a failed refresh must not fail the write that triggered it
+const refreshLive = (key) => Promise.allSettled([...(live.get(key)?.values() ?? [])].map(({ arg }) => read(arg).refresh()));
+const withRefresh = (dp) => new Proxy(dp, {
+    get(t, p) {
+        if (p !== 'getEntityDataProvider')
+            return Reflect.get(t, p);
+        return (entity) => new Proxy(t.getEntityDataProvider(entity), {
+            get(edp, m) {
+                const v = Reflect.get(edp, m);
+                if (typeof v !== 'function')
+                    return v;
+                if (!WRITES.has(m))
+                    return v.bind(edp);
+                return async (...args) => {
+                    const result = await v.apply(edp, args);
+                    await refreshLive(entity.key);
+                    return result;
+                };
+            },
+        });
+    },
+});
+if (BROWSER)
+    remult.dataProvider = withRefresh(remult.dataProvider);
+const mapped = (inner, arg, map) => new Proxy(inner, {
+    get(t, p) {
+        if (p === 'then') {
+            track(arg);
+            // read now: Kit pins the query in the reactive context of this getter
+            const then = t.then;
+            return (ok, err) => then.call(t, map).then(ok, err);
+        }
+        if (p === 'current')
+            return t.current === undefined ? undefined : map(t.current);
+        const v = Reflect.get(t, p);
+        return typeof v === 'function' ? v.bind(t) : v;
+    },
+});
+/**
+ * `repo(E)` for reactive reads: SSR goes through the API (rules apply, as the
+ * current user) and hydration sends no query.
+ *
+ * ```svelte
+ * <script lang="ts">
+ * 	import { repo } from 'remult'
+ *
+ * 	import { queryRepo } from 'firstly/svelte/query'
+ *
+ * 	let { params } = $props()
+ *
+ * 	let tasks = $derived(await queryRepo(Task).find({ where: { slug: params.slug } }))
+ * </script>
+ *
+ * {#each tasks as task (task.id)}
+ * 	<button onclick={() => repo(Task).update(task.id, { done: true })}>{task.title}</button>
+ * {/each}
+ * ```
+ *
+ * Plain `repo(E)` writes in the browser refresh the queries of `E` on screen.
+ * To do so, importing this wraps `remult.dataProvider` in the browser. Call
+ * `.refresh()` for what it can't see: BackendMethods, `include`d entities and
+ * other users' writes.
+ *
+ * A failed refresh reaches the error page, like any `.refresh()` in Kit.
+ * Long filters can exceed the URL limit: arguments travel in a GET.
+ *
+ * @experimental Needs `experimental.remoteFunctions` and
+ * `compilerOptions.experimental.async`.
+ */
+export const queryRepo = (entity) => {
+    const r = repo(entity);
+    const run = (method, options, map) => {
+        const where = options?.where && Filter.entityFilterToJson(r.metadata, options.where);
+        const arg = { key: r.metadata.key, method, options: { ...options, where } };
+        return mapped(read(arg), arg, map);
+    };
+    return {
+        find: (options) => run('find', options, (rows) => r.fromJson(rows)),
+        findFirst: (where, options) => run('find', { ...options, where, limit: 1 }, (rows) => r.fromJson(rows)[0]),
+        count: (where) => run('count', { where }, (n) => n),
+    };
+};

package/esm/svelte/query/read.remote.d.ts

@@ -0,0 +1,7 @@
+import { type FindOptions } from 'remult';
+export type RepoRead = {
+    key: string;
+    method: 'find' | 'count';
+    options?: FindOptions<any>;
+};
+export declare const read: import("$app/server").RemoteQueryFunction<RepoRead, any, RepoRead>;

package/esm/svelte/query/read.remote.js

@@ -0,0 +1,27 @@
+import { error } from '@sveltejs/kit';
+import { Filter, repo } from 'remult';
+import { getRequestEvent, query } from '$app/server';
+import { repoFetch } from '../remultApiLoad.js';
+const READS = new Set(['find', 'count']);
+let byKey;
+// TODO(remult): needs a public way to resolve an entity by key
+const allEntities = () => globalThis[Symbol.for('remult-static1')]?.allEntities ?? [];
+export const read = query('unchecked', async ({ key, method, options }) => {
+    byKey ??= new Map(allEntities().map((e) => [repo(e).metadata.key, e]));
+    const entity = byKey.get(key);
+    // reachable by anyone: only known entities, only reads
+    if (!entity || !READS.has(method))
+        error(404);
+    // never `repo()`: on the server it reads the DB without API rules
+    const r = repoFetch(getRequestEvent().fetch)(entity);
+    const where = options?.where && Filter.entityFilterFromJson(r.metadata, options.where);
+    try {
+        if (method === 'count')
+            return await r.count(where);
+        // toJson keeps included relations as class instances
+        return JSON.parse(JSON.stringify(r.toJson(await r.find({ ...options, where }))));
+    }
+    catch (e) {
+        error(e?.status ?? e?.httpStatusCode ?? 500, e?.message ?? 'Error');
+    }
+});

package/esm/svelte/remultApiLoad.d.ts

@@ -10,8 +10,16 @@ export type Repo = typeof globalRepo;
  *
  * Name the result so the intent shows at every query:
  * ```ts
- * const repoClient = repoFetch(event.fetch)
- * await repoClient(Task).find()
+ * // +page.ts
+ * import { repoFetch } from 'firstly/svelte'
+ *
+ * import type { PageLoad } from './$types'
+ *
+ * export const load: PageLoad = async (event) => {
+ * 	const repoClient = repoFetch(event.fetch)
+ * 	const tasks = await repoClient(Task).find()
+ * 	return { tasks }
+ * }
  * ```
  *
  * TODO(remult): framework-agnostic (only needs a fetch) - candidate to live in
@@ -22,16 +30,20 @@ export declare function repoFetch(fetch: typeof globalThis.fetch, options?: {
 }): Repo;
 /**
  * Wrap a load: the callback receives a repo bound to `event.fetch`, then the event.
- * Works for universal (`+page.ts`) AND server (`+page.server.ts`) loads.
+ * Works for universal (`+page.ts`) AND server (`+page.server.ts`) loads:
+ * `satisfies` types the event, including `cookies` and `locals` in a server load.
  *
  * ```ts
- * export const load = loadRepo(async (repoClient, { params }) => ({
- * 	task: await repoClient(Task).findFirst({ id: params.id }),
- * })) satisfies PageLoad // or PageServerLoad
- * ```
+ * // +page.ts
+ * import { loadRepo } from 'firstly/svelte'
  *
- * For server-only event members (`cookies`, `locals`, ...) annotate the event:
- * `loadRepo(async (repoClient, event: ServerLoadEvent) => ...)`.
+ * import type { PageLoad } from './$types'
+ *
+ * export const load = loadRepo(async (repoClient, { params }) => {
+ * 	const task = await repoClient(Task).findFirst({ id: params.id })
+ * 	return { task }
+ * }) satisfies PageLoad // or PageServerLoad
+ * ```
  *
  * TODO(remult): candidate to live in remult - only the event default is
  * SvelteKit-specific, the constraint itself is structural (`{ fetch }`).

package/esm/svelte/remultApiLoad.js

@@ -8,8 +8,16 @@ import { repo as globalRepo, remult, RestDataProvider } from 'remult';
  *
  * Name the result so the intent shows at every query:
  * ```ts
- * const repoClient = repoFetch(event.fetch)
- * await repoClient(Task).find()
+ * // +page.ts
+ * import { repoFetch } from 'firstly/svelte'
+ *
+ * import type { PageLoad } from './$types'
+ *
+ * export const load: PageLoad = async (event) => {
+ * 	const repoClient = repoFetch(event.fetch)
+ * 	const tasks = await repoClient(Task).find()
+ * 	return { tasks }
+ * }
  * ```
  *
  * TODO(remult): framework-agnostic (only needs a fetch) - candidate to live in
@@ -25,16 +33,20 @@ export function repoFetch(fetch, options) {
 }
 /**
  * Wrap a load: the callback receives a repo bound to `event.fetch`, then the event.
- * Works for universal (`+page.ts`) AND server (`+page.server.ts`) loads.
+ * Works for universal (`+page.ts`) AND server (`+page.server.ts`) loads:
+ * `satisfies` types the event, including `cookies` and `locals` in a server load.
  *
  * ```ts
- * export const load = loadRepo(async (repoClient, { params }) => ({
- * 	task: await repoClient(Task).findFirst({ id: params.id }),
- * })) satisfies PageLoad // or PageServerLoad
- * ```
+ * // +page.ts
+ * import { loadRepo } from 'firstly/svelte'
  *
- * For server-only event members (`cookies`, `locals`, ...) annotate the event:
- * `loadRepo(async (repoClient, event: ServerLoadEvent) => ...)`.
+ * import type { PageLoad } from './$types'
+ *
+ * export const load = loadRepo(async (repoClient, { params }) => {
+ * 	const task = await repoClient(Task).findFirst({ id: params.id })
+ * 	return { task }
+ * }) satisfies PageLoad // or PageServerLoad
+ * ```
  *
  * TODO(remult): candidate to live in remult - only the event default is
  * SvelteKit-specific, the constraint itself is structural (`{ fetch }`).

package/esm/svelte/server/handleCaching.d.ts

@@ -1,4 +1,4 @@
-import type { Handle } from '@sveltejs/kit';
+import type { Handle } from '@sveltejs/kit/hooks';
 /**
  * `hooks.server.js` handle that sets `Cache-Control` so browsers and CDNs cache
  * correctly across deploys - the server-side twin of `withStaleDeployReload`.
@@ -16,7 +16,7 @@ import type { Handle } from '@sveltejs/kit';
  * ```js
  * // src/hooks.server.js
  * import { sequence } from '@sveltejs/kit/hooks'
- * import { handleCaching } from './'
+ * import { handleCaching } from 'firstly/svelte/server'
  *
  * export const handle = sequence(handleCaching, ...rest)
  * ```

package/esm/svelte/server/handleCaching.js

@@ -17,7 +17,7 @@ const STATIC_ASSET_RE = /\.(js|css|ico|png|jpg|jpeg|gif|svg|webp|avif|woff2?|ttf
  * ```js
  * // src/hooks.server.js
  * import { sequence } from '@sveltejs/kit/hooks'
- * import { handleCaching } from './'
+ * import { handleCaching } from 'firstly/svelte/server'
  *
  * export const handle = sequence(handleCaching, ...rest)
  * ```

package/esm/svelte/ui/Icon.svelte

@@ -2,7 +2,6 @@
 	import { BROWSER } from 'esm-env'
 
 	import './LibIcon'
-
 	import { LibIcon_Empty } from './LibIcon'
 
 	/**

package/esm/vite/index.js

@@ -25,6 +25,11 @@ export function firstly(options) {
     // 		})
     // 	},
     // })
+    p.push({
+        name: 'vite-plugin-firstly',
+        // Oxc leaves remult's decorators raw unless it finds experimentalDecorators in a tsconfig
+        config: () => ({ oxc: { decorator: { legacy: true } } }),
+    });
     p.push(kitRoutes({
         ...(options?.kitRoutes ?? {}),
         ...{
@@ -50,7 +55,12 @@ export function firstly(options) {
             },
         ],
         debug: options?.stripper?.debug ?? false,
-        nullify: options?.stripper?.nullify ?? ['$env/static/private', '$env/dynamic/private'],
+        nullify: options?.stripper?.nullify ?? [
+            '$app/env/private',
+            // deprecated by Kit 3, but still resolvable
+            '$env/static/private',
+            '$env/dynamic/private',
+        ],
     }));
     return p;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "firstly",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "type": "module",
   "description": "Firstly, an opinionated Remult setup!",
   "bin": {
@@ -15,10 +15,10 @@
   },
   "license": "MIT",
   "engines": {
-    "node": ">=18"
+    "node": ">=22.17"
   },
   "peerDependencies": {
-    "@sveltejs/kit": ">=1.0.0 <4.0.0 || ^3.0.0-next.0",
+    "@sveltejs/kit": "^3.0.0",
     "remult": ">=3.3.7",
     "svelte": ">=5"
   },
@@ -59,6 +59,11 @@
       "svelte": "./esm/svelte/index.js",
       "default": "./esm/svelte/index.js"
     },
+    "./svelte/query": {
+      "types": "./esm/svelte/query/index.svelte.d.ts",
+      "svelte": "./esm/svelte/query/index.svelte.js",
+      "default": "./esm/svelte/query/index.svelte.js"
+    },
     "./svelte/server": {
       "types": "./esm/svelte/server/index.d.ts",
       "default": "./esm/svelte/server/index.js"