firstly 0.8.1 → 0.9.1

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # firstly
 
+## 0.9.1
+
+### Patch Changes
+
+- [#344](https://github.com/jycouet/firstly/pull/344) [`857d7b3`](https://github.com/jycouet/firstly/commit/857d7b3b272ae6bc6b0ca7ccff7d838c4f463bc6) Thanks [@jycouet](https://github.com/jycouet)! - - BackendMethods of `mail`, `sqlAdmin`, `feedback` and `carbone` now carry an `apiPrefix` (`/api/ff/mail/sendTest`, `/api/ff/sqlAdmin/exec`, ...) so a host app method with the same name (e.g. its own `sendTest`) can no longer shadow them.
+  - `WriteMail` / `LastMails` read the semantic theme tokens (`bg-card`, `border-border`, `text-primary`, ...) like `SqlAdmin` instead of a hardcoded slate palette.
+  - `SqlAdmin`: the write toggle is a static "Allow writes" checkbox; the label no longer flips with the state.
+
+## 0.9.0
+
+### Minor Changes
+
+- [#341](https://github.com/jycouet/firstly/pull/341) [`ea9b4b6`](https://github.com/jycouet/firstly/commit/ea9b4b67544dc755374b3178c22082dac986472e) Thanks [@jycouet](https://github.com/jycouet)! - svelte: added `repoFetch(fetch)` and `loadRepo(loadFn)` - bind a repo to a load's `event.fetch` so API rules apply on SSR, hydration reuses the SSR response (one query), and parallel `+layout.ts`/`+page.ts` loads can't leak into each other. Removed `remultApiUniversalLoad`, `remultApiServerLoad`, `withRemultFetch`; migrate to `loadRepo` (works for universal AND server loads) or the `repoFetch(event.fetch)` primitive.
+
 ## 0.8.1
 
 ### Patch Changes

package/esm/carbone/CarboneController.js

@@ -133,24 +133,24 @@ export class CarboneController {
 __decorate([
     BackendMethod({
         allowed: [Roles_Carbon.Carbon_Admin, Roles_Carbon.Carbon_UploadTemplate],
-        apiPrefix: 'carbone',
+        apiPrefix: 'ff/carbone',
     })
 ], CarboneController, "uploadTemplate", null);
 __decorate([
     BackendMethod({
         allowed: [Roles_Carbon.Carbon_Admin, Roles_Carbon.Carbon_DownloadTemplate],
-        apiPrefix: 'carbone',
+        apiPrefix: 'ff/carbone',
     })
 ], CarboneController, "downloadTemplate", null);
 __decorate([
     BackendMethod({
         allowed: [Roles_Carbon.Carbon_Admin, Roles_Carbon.Carbon_DeleteTemplate],
-        apiPrefix: 'carbone',
+        apiPrefix: 'ff/carbone',
     })
 ], CarboneController, "deleteTemplate", null);
 __decorate([
     BackendMethod({
         allowed: [Roles_Carbon.Carbon_Admin, Roles_Carbon.Carbon_Render],
-        apiPrefix: 'carbone',
+        apiPrefix: 'ff/carbone',
     })
 ], CarboneController, "render", null);

package/esm/feedback/FeedbackController.js

@@ -370,23 +370,23 @@ repository(name: $repository, owner: $owner) {
     }
 }
 __decorate([
-    BackendMethod({ allowed: Allow.authenticated })
+    BackendMethod({ allowed: Allow.authenticated, apiPrefix: 'ff/feedback' })
 ], FeedbackController, "getMilestones", null);
 __decorate([
-    BackendMethod({ allowed: Allow.authenticated })
+    BackendMethod({ allowed: Allow.authenticated, apiPrefix: 'ff/feedback' })
 ], FeedbackController, "getIssues", null);
 __decorate([
-    BackendMethod({ allowed: Allow.authenticated })
+    BackendMethod({ allowed: Allow.authenticated, apiPrefix: 'ff/feedback' })
 ], FeedbackController, "getIssue", null);
 __decorate([
-    BackendMethod({ allowed: Allow.authenticated })
+    BackendMethod({ allowed: Allow.authenticated, apiPrefix: 'ff/feedback' })
 ], FeedbackController, "createIssue", null);
 __decorate([
-    BackendMethod({ allowed: Allow.authenticated })
+    BackendMethod({ allowed: Allow.authenticated, apiPrefix: 'ff/feedback' })
 ], FeedbackController, "addCommentOnIssue", null);
 __decorate([
-    BackendMethod({ allowed: Allow.authenticated })
+    BackendMethod({ allowed: Allow.authenticated, apiPrefix: 'ff/feedback' })
 ], FeedbackController, "close", null);
 __decorate([
-    BackendMethod({ allowed: Allow.authenticated })
+    BackendMethod({ allowed: Allow.authenticated, apiPrefix: 'ff/feedback' })
 ], FeedbackController, "reOpen", null);

package/esm/mail/MailController.js

@@ -64,5 +64,5 @@ export class MailController {
     }
 }
 __decorate([
-    BackendMethod({ allowed: Roles_Mail.Mail_Admin })
+    BackendMethod({ allowed: Roles_Mail.Mail_Admin, apiPrefix: 'ff/mail' })
 ], MailController, "sendTest", null);

package/esm/mail/ui/LastMails.svelte

@@ -75,25 +75,25 @@
 	}
 
 	function badgeClass(status: Mail['status']): string {
-		if (status === 'sent') return 'bg-emerald-500/10 border-emerald-500/40 text-emerald-300'
+		if (status === 'sent') return 'bg-emerald-500/10 border-emerald-500/40 text-emerald-700'
 		if (status === 'transport_not_configured')
-			return 'bg-amber-500/10 border-amber-500/40 text-amber-300'
-		return 'bg-red-500/10 border-red-500/40 text-red-300'
+			return 'bg-amber-500/10 border-amber-500/40 text-amber-700'
+		return 'bg-destructive/10 border-destructive text-destructive'
 	}
 </script>
 
-<div class="border border-slate-700 bg-slate-800 text-slate-200">
-	<header class="flex flex-wrap items-center gap-3 border-b border-slate-700 px-5 py-4">
+<div class="border border-border bg-card text-card-foreground">
+	<header class="flex flex-wrap items-center gap-3 border-b border-border px-5 py-4">
 		<div class="flex flex-col">
-			<h2 class="text-lg font-semibold text-slate-100">Last mails</h2>
-			<p class="text-sm text-slate-400">Recent mails sent through this app.</p>
+			<h2 class="text-lg font-semibold text-foreground">Last mails</h2>
+			<p class="text-sm text-muted-foreground">Recent mails sent through this app.</p>
 		</div>
 		{#if hasAccess}
 			<button
 				type="button"
 				onclick={refresh}
 				disabled={isLoading}
-				class="ml-auto inline-flex items-center gap-2 border border-slate-600 bg-slate-700 px-3 py-1.5 text-sm font-medium text-slate-100 hover:bg-slate-600 disabled:opacity-50"
+				class="ml-auto inline-flex items-center gap-2 border border-border bg-secondary px-3 py-1.5 text-sm font-medium text-secondary-foreground hover:bg-accent hover:text-accent-foreground disabled:opacity-50"
 			>
 				{#if isLoading}
 					<svg
@@ -111,24 +111,26 @@
 				{/if}
 				Refresh
 			</button>
-			<span class="text-xs text-slate-500">
+			<span class="text-xs text-muted-foreground">
 				{mails.length} mail{mails.length === 1 ? '' : 's'}
-				{#if live}<span class="text-indigo-400">· live</span>{/if}
+				{#if live}<span class="text-primary">· live</span>{/if}
 			</span>
 		{/if}
 	</header>
 
 	<div class="p-5">
 		{#if !hasAccess}
-			<div class="border border-amber-500/40 bg-amber-500/10 p-3 text-sm text-amber-200">
+			<div class="border border-amber-500/40 bg-amber-500/10 p-3 text-sm text-amber-700">
 				You need the
-				<code class="bg-amber-500/20 px-1 py-0.5 text-xs text-amber-100">Mail.Admin</code>
+				<code class="bg-amber-500/20 px-1 py-0.5 text-xs text-amber-800">Mail.Admin</code>
 				role to use this.
 			</div>
 		{:else if error}
-			<div class="border border-red-500/40 bg-red-500/10 p-3 text-sm text-red-200">{error}</div>
+			<div class="border border-destructive bg-destructive/10 p-3 text-sm text-destructive">
+				{error}
+			</div>
 		{:else if mails.length === 0}
-			<div class="border border-slate-700 bg-slate-900 p-3 text-sm text-slate-400">No mails yet.</div>
+			<div class="border border-border bg-muted p-3 text-sm text-muted-foreground">No mails yet.</div>
 		{:else}
 			<div class="flex flex-col gap-3">
 				{#each mails as m (m.id)}
@@ -137,24 +139,24 @@
 					{@const bcc = formatList(m.metadata?.bcc)}
 					{@const messageId = m.metadata?.transport?.messageId as string | undefined}
 					{@const preview = m.metadata?.transport?.preview as string | undefined}
-					<article class="flex flex-col gap-2 border border-slate-700 bg-slate-900 p-4">
+					<article class="flex flex-col gap-2 border border-border bg-background p-4">
 						<div class="flex flex-wrap items-center gap-2">
 							<span class="border px-2 py-0.5 text-xs font-medium {badgeClass(m.status)}">{m.status}</span>
 							<span
-								class="border border-slate-600 bg-slate-700/50 px-2 py-0.5 text-xs font-medium text-slate-200"
+								class="border border-border bg-secondary px-2 py-0.5 text-xs font-medium text-secondary-foreground"
 								>{m.topic}</span
 							>
-							<span class="text-xs text-slate-400">{parseTo(m.to)}</span>
-							<span class="ml-auto text-xs text-slate-500">{formatDate(m.createdAt)}</span>
+							<span class="text-xs text-muted-foreground">{parseTo(m.to)}</span>
+							<span class="ml-auto text-xs text-muted-foreground">{formatDate(m.createdAt)}</span>
 						</div>
 
-						<div class="text-base font-medium text-slate-100">{subject || '(no subject)'}</div>
+						<div class="text-base font-medium text-foreground">{subject || '(no subject)'}</div>
 
 						{#if cc}
-							<div class="text-xs text-slate-500">cc: {cc}</div>
+							<div class="text-xs text-muted-foreground">cc: {cc}</div>
 						{/if}
 						{#if bcc}
-							<div class="text-xs text-slate-500">bcc: {bcc}</div>
+							<div class="text-xs text-muted-foreground">bcc: {bcc}</div>
 						{/if}
 
 						{#if preview}
@@ -163,18 +165,18 @@
 									href={preview}
 									target="_blank"
 									rel="noopener noreferrer"
-									class="text-indigo-400 underline hover:text-indigo-300">preview (mail not really sent)</a
+									class="text-primary underline hover:opacity-80">preview (mail not really sent)</a
 								>
 							</div>
 						{/if}
 
 						{#if messageId}
-							<div class="text-xs break-all text-slate-500">id: <code>{messageId}</code></div>
+							<div class="text-xs break-all text-muted-foreground">id: <code>{messageId}</code></div>
 						{/if}
 
 						{#if m.status === 'error' && m.errorInfo}
 							<pre
-								class="border border-red-500/40 bg-red-500/10 p-2 text-xs whitespace-pre-wrap text-red-200">{m.errorInfo}</pre>
+								class="border border-destructive bg-destructive/10 p-2 text-xs whitespace-pre-wrap text-destructive">{m.errorInfo}</pre>
 						{/if}
 					</article>
 				{/each}

package/esm/mail/ui/WriteMail.svelte

@@ -47,24 +47,27 @@
 	}
 </script>
 
-<div class="border border-slate-700 bg-slate-800 text-slate-200">
-	<header class="border-b border-slate-700 px-5 py-4">
-		<h2 class="text-lg font-semibold text-slate-100">Write mail</h2>
-		<p class="mt-1 text-sm text-slate-400">Send a test mail through the configured transport.</p>
+<div class="border border-border bg-card text-card-foreground">
+	<header class="border-b border-border px-5 py-4">
+		<h2 class="text-lg font-semibold text-foreground">Write mail</h2>
+		<p class="mt-1 text-sm text-muted-foreground">
+			Send a test mail through the configured transport.
+		</p>
 	</header>
 
 	<div class="p-5">
 		{#if !hasAccess}
-			<div class="border border-amber-500/40 bg-amber-500/10 p-3 text-sm text-amber-200">
+			<div class="border border-amber-500/40 bg-amber-500/10 p-3 text-sm text-amber-700">
 				You need the
-				<code class="bg-amber-500/20 px-1 py-0.5 text-xs text-amber-100">Mail.Admin</code>
+				<code class="bg-amber-500/20 px-1 py-0.5 text-xs text-amber-800">Mail.Admin</code>
 				role to use this.
 			</div>
 		{:else}
 			<form onsubmit={handleSubmit} class="flex flex-col gap-4">
 				<div class="flex flex-col gap-1">
-					<label for="write-mail-to" class="text-xs font-medium tracking-wide text-slate-400 uppercase"
-						>To</label
+					<label
+						for="write-mail-to"
+						class="text-xs font-medium tracking-wide text-muted-foreground uppercase">To</label
 					>
 					<input
 						id="write-mail-to"
@@ -72,14 +75,15 @@
 						bind:value={to}
 						disabled={isLoading}
 						placeholder="someone@example.com, other@example.com"
-						class="border border-slate-700 bg-slate-900 px-3 py-2 text-sm text-slate-100 placeholder-slate-500 focus:border-indigo-400 focus:outline-none disabled:opacity-50"
+						class="border border-input bg-background px-3 py-2 text-sm text-foreground placeholder-muted-foreground focus:border-ring focus:outline-none disabled:opacity-50"
 					/>
 				</div>
 
 				<div class="grid grid-cols-2 gap-4 max-md:grid-cols-1">
 					<div class="flex flex-col gap-1">
-						<label for="write-mail-cc" class="text-xs font-medium tracking-wide text-slate-400 uppercase"
-							>Cc</label
+						<label
+							for="write-mail-cc"
+							class="text-xs font-medium tracking-wide text-muted-foreground uppercase">Cc</label
 						>
 						<input
 							id="write-mail-cc"
@@ -87,12 +91,13 @@
 							bind:value={cc}
 							disabled={isLoading}
 							placeholder="optional, comma-separated"
-							class="border border-slate-700 bg-slate-900 px-3 py-2 text-sm text-slate-100 placeholder-slate-500 focus:border-indigo-400 focus:outline-none disabled:opacity-50"
+							class="border border-input bg-background px-3 py-2 text-sm text-foreground placeholder-muted-foreground focus:border-ring focus:outline-none disabled:opacity-50"
 						/>
 					</div>
 					<div class="flex flex-col gap-1">
-						<label for="write-mail-bcc" class="text-xs font-medium tracking-wide text-slate-400 uppercase"
-							>Bcc</label
+						<label
+							for="write-mail-bcc"
+							class="text-xs font-medium tracking-wide text-muted-foreground uppercase">Bcc</label
 						>
 						<input
 							id="write-mail-bcc"
@@ -100,7 +105,7 @@
 							bind:value={bcc}
 							disabled={isLoading}
 							placeholder="optional, comma-separated"
-							class="border border-slate-700 bg-slate-900 px-3 py-2 text-sm text-slate-100 placeholder-slate-500 focus:border-indigo-400 focus:outline-none disabled:opacity-50"
+							class="border border-input bg-background px-3 py-2 text-sm text-foreground placeholder-muted-foreground focus:border-ring focus:outline-none disabled:opacity-50"
 						/>
 					</div>
 				</div>
@@ -108,7 +113,7 @@
 				<div class="flex flex-col gap-1">
 					<label
 						for="write-mail-subject"
-						class="text-xs font-medium tracking-wide text-slate-400 uppercase">Subject</label
+						class="text-xs font-medium tracking-wide text-muted-foreground uppercase">Subject</label
 					>
 					<input
 						id="write-mail-subject"
@@ -117,28 +122,29 @@
 						disabled={isLoading}
 						required
 						placeholder="Subject"
-						class="border border-slate-700 bg-slate-900 px-3 py-2 text-sm text-slate-100 placeholder-slate-500 focus:border-indigo-400 focus:outline-none disabled:opacity-50"
+						class="border border-input bg-background px-3 py-2 text-sm text-foreground placeholder-muted-foreground focus:border-ring focus:outline-none disabled:opacity-50"
 					/>
 				</div>
 
 				<div class="flex flex-col gap-1">
-					<label for="write-mail-body" class="text-xs font-medium tracking-wide text-slate-400 uppercase"
-						>Body</label
+					<label
+						for="write-mail-body"
+						class="text-xs font-medium tracking-wide text-muted-foreground uppercase">Body</label
 					>
 					<textarea
 						id="write-mail-body"
 						bind:value={body}
 						disabled={isLoading}
 						placeholder="Write your message..."
-						class="h-40 w-full border border-slate-700 bg-slate-900 px-3 py-2 text-sm text-slate-100 placeholder-slate-500 focus:border-indigo-400 focus:outline-none disabled:opacity-50"
+						class="h-40 w-full border border-input bg-background px-3 py-2 text-sm text-foreground placeholder-muted-foreground focus:border-ring focus:outline-none disabled:opacity-50"
 					></textarea>
 				</div>
 
-				<div class="flex items-center gap-4 border-t border-slate-700 pt-4">
+				<div class="flex items-center gap-4 border-t border-border pt-4">
 					<button
 						type="submit"
 						disabled={isLoading || !canSend}
-						class="inline-flex items-center gap-2 bg-indigo-500 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-400 disabled:opacity-50"
+						class="inline-flex items-center gap-2 bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:opacity-90 disabled:opacity-50"
 					>
 						{#if isLoading}
 							<svg
@@ -158,12 +164,12 @@
 					</button>
 
 					{#if !canSend && !result && !error}
-						<span class="text-xs text-slate-500"> Add a subject and at least one recipient. </span>
+						<span class="text-xs text-muted-foreground"> Add a subject and at least one recipient. </span>
 					{/if}
 
 					{#if result}
 						<div
-							class="flex flex-1 items-center gap-2 border border-emerald-500/40 bg-emerald-500/10 px-3 py-1.5 text-sm text-emerald-200"
+							class="flex flex-1 items-center gap-2 border border-emerald-500/40 bg-emerald-500/10 px-3 py-1.5 text-sm text-emerald-700"
 						>
 							<span class="font-medium">Sent</span>
 							{#if result.messageId}
@@ -174,7 +180,7 @@
 
 					{#if error}
 						<pre
-							class="flex-1 overflow-auto border border-red-500/40 bg-red-500/10 px-3 py-1.5 text-xs whitespace-pre-wrap text-red-200">{error}</pre>
+							class="flex-1 overflow-auto border border-destructive bg-destructive/10 px-3 py-1.5 text-xs whitespace-pre-wrap text-destructive">{error}</pre>
 					{/if}
 				</div>
 			</form>

package/esm/sqlAdmin/SqlAdminController.js

@@ -37,5 +37,8 @@ export class SqlAdminController {
     }
 }
 __decorate([
-    BackendMethod({ allowed: [Roles_SqlAdmin.SqlAdmin_Admin, FF_Role.FF_Role_Admin] })
+    BackendMethod({
+        allowed: [Roles_SqlAdmin.SqlAdmin_Admin, FF_Role.FF_Role_Admin],
+        apiPrefix: 'ff/sqlAdmin',
+    })
 ], SqlAdminController, "exec", null);

package/esm/sqlAdmin/ui/SqlAdmin.svelte

@@ -21,7 +21,7 @@ LIMIT 10`
 	let result: { rows: any[]; rowCount: number; took: number } | undefined = $state()
 	let error = $state('')
 	let isLoading = $state(false)
-	let notReadOnly = $state(false)
+	let allowWrites = $state(false)
 	let copied = $state(false)
 
 	const queries = {
@@ -64,7 +64,7 @@ ORDER BY tablename, indexname`,
 		try {
 			error = ''
 			isLoading = true
-			result = await SqlAdminController.exec(sqlInput, notReadOnly)
+			result = await SqlAdminController.exec(sqlInput, allowWrites)
 			log.info('for AI:', JSON.stringify(result.rows))
 			log.info('for humans:', result)
 		} catch (e) {
@@ -159,14 +159,16 @@ ORDER BY tablename, indexname`,
 					Execute SQL
 				</button>
 
+				<!-- Static label: the checkbox state is the signal, the text never
+					 flips so the user always knows what ticking it does. -->
 				<label
 					class="inline-flex items-center gap-2 text-sm font-medium select-none"
-					class:text-destructive={notReadOnly}
-					class:text-muted-foreground={!notReadOnly}
-					title="Read-only runs your query in a READ ONLY transaction so the database rejects any write. Tick this only when you know what you are doing."
+					class:text-destructive={allowWrites}
+					class:text-muted-foreground={!allowWrites}
+					title="Unchecked: the query runs in a READ ONLY transaction, so the database rejects any write. Tick only when you know what you are doing."
 				>
-					<input type="checkbox" bind:checked={notReadOnly} class="accent-destructive" />
-					{notReadOnly ? 'Writes enabled (I know what I am doing)' : 'Read-only'}
+					<input type="checkbox" bind:checked={allowWrites} class="accent-destructive" />
+					Allow writes
 				</label>
 
 				{#if error}

package/esm/svelte/index.d.ts

@@ -18,7 +18,7 @@ export { default as FF_ToastManager } from './FF_ToastManager.svelte';
 export { SP } from './class/SP.svelte';
 export type { ParamDefinition } from './class/SP.svelte';
 export { initRemultSvelteReactivity } from './initRemultSvelteReactivity';
-export { remultApiUniversalLoad } from './remultApiLoad.js';
+export { loadRepo, repoFetch, type Repo } from './remultApiLoad.js';
 export { FF_Cell, FF_CellValue, FF_Grid, GroupFields, DefaultInput, buildCells, displayCell, resolveCellComponent, getFieldMetaType, getInputType, getStyle, getCellElementConfig, defaultConfig, } from './grid/index.js';
 export type { Cell, CellInput, CellComponent, CellUI, MetaKind, CellConfig, CellElementConfig, CellProps, CellContentProps, CellElementProps, CellMode, HubConfig, ActionConfig, } from './grid/index.js';
 export { default as Icon } from './ui/Icon.svelte';

package/esm/svelte/index.js

@@ -10,7 +10,7 @@ export { toast } from './toast.js';
 export { default as FF_ToastManager } from './FF_ToastManager.svelte';
 export { SP } from './class/SP.svelte';
 export { initRemultSvelteReactivity } from './initRemultSvelteReactivity';
-export { remultApiUniversalLoad } from './remultApiLoad.js';
+export { loadRepo, repoFetch } from './remultApiLoad.js';
 // Headless cell primitives (FF_Grid / FF_Group are boutique-only — copy from src/boutique/grid).
 export { FF_Cell, FF_CellValue, FF_Grid, GroupFields, DefaultInput, buildCells, displayCell, resolveCellComponent, getFieldMetaType, getInputType, getStyle, getCellElementConfig, defaultConfig, } from './grid/index.js';
 export { default as Icon } from './ui/Icon.svelte';

package/esm/svelte/remultApiLoad.d.ts

@@ -1,25 +1,41 @@
-import type { LoadEvent } from '@sveltejs/kit';
+import type { LoadEvent, ServerLoadEvent } from '@sveltejs/kit';
+import { repo as globalRepo } from 'remult';
+export type Repo = typeof globalRepo;
 /**
- * Run `body` in a scoped `withRemult` whose reads go through the API via `fetch`
- * (`allowApiRead` / `apiPrefilter` apply); a concurrent load keeps its own
- * provider. `remult.user` is carried in so the body can read it.
+ * A `repo` whose data access goes through the API via the given fetch:
+ * API rules apply on SSR (as the current user), hydration replays the SSR
+ * responses in the browser (one single query), nothing global is mutated
+ * (safe when `+layout.ts` and `+page.ts` run in parallel), and the ambient
+ * remult (user, context) stays in charge. Inherits `remult.apiClient` config.
+ *
+ * Name the result so the intent shows at every query:
+ * ```ts
+ * const repoClient = repoFetch(event.fetch)
+ * await repoClient(Task).find()
+ * ```
  *
  * TODO(remult): framework-agnostic (only needs a fetch) - candidate to live in
  * remult directly.
  */
-export declare function withRemultFetch<T>(fetch: typeof globalThis.fetch, body: () => Promise<T>): Promise<T>;
+export declare function repoFetch(fetch: typeof globalThis.fetch, options?: {
+    url?: string;
+}): Repo;
 /**
- * Wrap a SvelteKit UNIVERSAL load (`+page.ts` / `+layout.ts`) so plain global
- * `repo()` / `ff()` reads through the API (so `allowApiRead` / `apiPrefilter`
- * apply), on both SSR and CSR.
+ * 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.
+ *
+ * ```ts
+ * export const load = loadRepo(async (repoClient, { params }) => ({
+ * 	task: await repoClient(Task).findFirst({ id: params.id }),
+ * })) satisfies PageLoad // or PageServerLoad
+ * ```
  *
- * - SSR: runs the body in a scoped `withRemult` bound to `event.fetch` - gated,
- *   and a concurrent `+page.server.ts` keeps its own provider. SvelteKit inlines
- *   the response.
- * - CSR / hydration: points the client `remult` at this page's `event.fetch` so the
- *   inlined SSR response is reused, then runs the body.
+ * For server-only event members (`cookies`, `locals`, ...) annotate the event:
+ * `loadRepo(async (repoClient, event: ServerLoadEvent) => ...)`.
  *
- * (A universal load runs on the client too, so it must use `event.fetch`. For a
- * server-only load see `remultApiServerLoad` from `firstly/svelte/server`.)
+ * TODO(remult): candidate to live in remult - only the event default is
+ * SvelteKit-specific, the constraint itself is structural (`{ fetch }`).
  */
-export declare function remultApiUniversalLoad<T>(body: (event: LoadEvent) => Promise<T>): (event: LoadEvent) => Promise<T>;
+export declare function loadRepo<R, Ev extends {
+    fetch: typeof globalThis.fetch;
+} = LoadEvent | ServerLoadEvent>(loadFn: (repoClient: Repo, event: Ev) => R): (event: Ev) => R;

package/esm/svelte/remultApiLoad.js

@@ -1,39 +1,44 @@
-import { isBackend, remult, RestDataProvider, withRemult } from 'remult';
+import { repo as globalRepo, remult, RestDataProvider } from 'remult';
 /**
- * Run `body` in a scoped `withRemult` whose reads go through the API via `fetch`
- * (`allowApiRead` / `apiPrefilter` apply); a concurrent load keeps its own
- * provider. `remult.user` is carried in so the body can read it.
+ * A `repo` whose data access goes through the API via the given fetch:
+ * API rules apply on SSR (as the current user), hydration replays the SSR
+ * responses in the browser (one single query), nothing global is mutated
+ * (safe when `+layout.ts` and `+page.ts` run in parallel), and the ambient
+ * remult (user, context) stays in charge. Inherits `remult.apiClient` config.
+ *
+ * Name the result so the intent shows at every query:
+ * ```ts
+ * const repoClient = repoFetch(event.fetch)
+ * await repoClient(Task).find()
+ * ```
  *
  * TODO(remult): framework-agnostic (only needs a fetch) - candidate to live in
  * remult directly.
  */
-export function withRemultFetch(fetch, body) {
-    const user = remult.user;
-    return withRemult(async () => {
-        remult.user = user;
-        return body();
-    }, { dataProvider: new RestDataProvider(() => ({ httpClient: fetch })) });
+export function repoFetch(fetch, options) {
+    const dp = new RestDataProvider(() => ({
+        ...remult.apiClient,
+        httpClient: fetch,
+        ...(options?.url ? { url: options.url } : {}),
+    }));
+    return (entity, dataProvider) => globalRepo(entity, dataProvider ?? dp);
 }
 /**
- * Wrap a SvelteKit UNIVERSAL load (`+page.ts` / `+layout.ts`) so plain global
- * `repo()` / `ff()` reads through the API (so `allowApiRead` / `apiPrefilter`
- * apply), on both SSR and CSR.
+ * 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.
+ *
+ * ```ts
+ * export const load = loadRepo(async (repoClient, { params }) => ({
+ * 	task: await repoClient(Task).findFirst({ id: params.id }),
+ * })) satisfies PageLoad // or PageServerLoad
+ * ```
  *
- * - SSR: runs the body in a scoped `withRemult` bound to `event.fetch` - gated,
- *   and a concurrent `+page.server.ts` keeps its own provider. SvelteKit inlines
- *   the response.
- * - CSR / hydration: points the client `remult` at this page's `event.fetch` so the
- *   inlined SSR response is reused, then runs the body.
+ * For server-only event members (`cookies`, `locals`, ...) annotate the event:
+ * `loadRepo(async (repoClient, event: ServerLoadEvent) => ...)`.
  *
- * (A universal load runs on the client too, so it must use `event.fetch`. For a
- * server-only load see `remultApiServerLoad` from `firstly/svelte/server`.)
+ * TODO(remult): candidate to live in remult - only the event default is
+ * SvelteKit-specific, the constraint itself is structural (`{ fetch }`).
  */
-export function remultApiUniversalLoad(body) {
-    return (event) => {
-        if (!isBackend()) {
-            remult.apiClient.httpClient = event.fetch;
-            return body(event);
-        }
-        return withRemultFetch(event.fetch, () => body(event));
-    };
+export function loadRepo(loadFn) {
+    return (event) => loadFn(repoFetch(event.fetch), event);
 }

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

@@ -1,14 +1 @@
-import type { ServerLoadEvent } from '@sveltejs/kit';
 export { handleCaching } from './handleCaching.js';
-/**
- * Wrap a SvelteKit SERVER load (`+page.server.ts`) so plain global `repo()` reads
- * apply the API gate (as the current user) instead of the privileged DB provider.
- *
- * Reads go through `event.fetch`: SvelteKit dispatches same-origin server fetch
- * in-process (no network) and forwards cookies, so the app's real auth/hooks run
- * for each read. Use it only when a server load should see exactly what the API
- * exposes; otherwise a server load keeps the DB provider (gate rows with
- * `backendPrefilter`). Gates direct `repo()` reads; BackendMethods keep their own
- * `allowed` gate.
- */
-export declare function remultApiServerLoad<T>(body: (event: ServerLoadEvent) => Promise<T>): (event: ServerLoadEvent) => Promise<T>;

package/esm/svelte/server/index.js

@@ -1,16 +1 @@
-import { withRemultFetch } from '../remultApiLoad.js';
 export { handleCaching } from './handleCaching.js';
-/**
- * Wrap a SvelteKit SERVER load (`+page.server.ts`) so plain global `repo()` reads
- * apply the API gate (as the current user) instead of the privileged DB provider.
- *
- * Reads go through `event.fetch`: SvelteKit dispatches same-origin server fetch
- * in-process (no network) and forwards cookies, so the app's real auth/hooks run
- * for each read. Use it only when a server load should see exactly what the API
- * exposes; otherwise a server load keeps the DB provider (gate rows with
- * `backendPrefilter`). Gates direct `repo()` reads; BackendMethods keep their own
- * `allowed` gate.
- */
-export function remultApiServerLoad(body) {
-    return (event) => withRemultFetch(event.fetch, () => body(event));
-}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "firstly",
-  "version": "0.8.1",
+  "version": "0.9.1",
   "type": "module",
   "description": "Firstly, an opinionated Remult setup!",
   "funding": "https://github.com/sponsors/jycouet",