firstly 0.5.1 → 0.6.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # firstly
 
+## 0.6.0
+
+### Minor Changes
+
+- [#286](https://github.com/jycouet/firstly/pull/286) [`0de3038`](https://github.com/jycouet/firstly/commit/0de3038769bd30f7449f3185d9556bb5966eea6f) Thanks [@jycouet](https://github.com/jycouet)! - Add `<FF_Config>` (`firstly/svelte`): an SSR-safe, context-scoped provider for app-wide UI config, read by firstly components during init. First consumer is the dialog: set default `confirm` / `cancel` / `ok` labels once and your `shell` / `confirm` / `prompt` snippets in one place, instead of passing them on every `dialog.confirm(...)` / `<FF_DialogManager>`.
+
+  Precedence is explicit prop > `<FF_Config>` > built-in. Pass message **functions** (paraglide / i18next) for labels and they re-resolve on every render, so locale changes are picked up for free. `dialog.confirm` / `dialog.prompt` no longer bake `'Confirm'` / `'Cancel'` / `'OK'` at call time - omitted labels resolve at render via the nearest `<FF_Config>` (then the built-in). Also exports `ffConfig()` (read) and `setFFConfig()` (advanced).
+
+- [#286](https://github.com/jycouet/firstly/pull/286) [`d364fe2`](https://github.com/jycouet/firstly/commit/d364fe22211a2d7a7acbb58afc367bae1a7e911d) Thanks [@jycouet](https://github.com/jycouet)! - Add a headless async `dialog` layer (`firstly/svelte`): `dialog.show(body)`, `dialog.confirm(message)`, `dialog.prompt(opts)`, rendered through a single `<FF_DialogManager>` you mount once. Built-in defaults are theme-adaptive via semantic Tailwind tokens; pass `shell` / `confirm` / `prompt` snippets to fully restyle. Ships `ffAutofocus`, Escape/scroll-lock/stacking, and a `LocalizedMessage` (string or fn) for labels. `dialog.open(Component, { props })` opens a dialog from a component + props, inferring the result type from the component's `close: DialogClose<T>` prop (no call-site generic).
+
+  One result contract for all three: they resolve a `DialogResult` (`{ ok: true, data } | { ok: false }`). `confirm` carries no `data` (read `.ok`); `prompt`'s `data` is the trimmed string (so cancel vs empty-string is unambiguous - `{ ok: false }` vs `{ ok: true, data: '' }`); `show<T>` carries `T`. See `/docs/svelte/dialog`.
+
+- [#286](https://github.com/jycouet/firstly/pull/286) [`fcafe26`](https://github.com/jycouet/firstly/commit/fcafe26833a018aea9e5fe2313120173a112eb80) Thanks [@jycouet](https://github.com/jycouet)! - Replace `ffRepo` with a cleaner `ff` surface: `ff(E).many(getter, strategy?)` (a list + editing draft + writes) and `ff(E).one(getter)` (a single bound record). `load`/`listen`/`paginate` are now the `strategy`, not separate verbs. Imperative work moves to remult's `repo(E)` (no `.repo` on the handle); `.meta` stays. Adds an exported `DemoForm` alongside `DemoGrid`.
+
+### Patch Changes
+
+- [#288](https://github.com/jycouet/firstly/pull/288) [`7133d3c`](https://github.com/jycouet/firstly/commit/7133d3c31c276f2932a8c7efeaca3cd5e05a51b5) Thanks [@jycouet](https://github.com/jycouet)! - Add `many` action+confirm orchestration and a `toast` (`firstly/svelte`):
+  - `ff(E).many().confirmRemove(row, opts?)` (confirm → remove → auto error-toast, never re-throws), `editInDialog(row, body, opts?)` and `createInDialog(body, opts?)` (seed draft → `dialog.show` → cancel on close).
+  - `toast` + `<FF_ToastManager>` - a `LocalizedMessage`-aware wrapper over svelte-sonner (a new direct dependency). First arg is the **description** (HTML allowed); the bold **title** moves to `opts.title` and defaults per kind, localizable via `<FF_Config messages.toast>`. See `/docs/svelte/toast`.
+
 ## 0.5.1
 
 ### Patch Changes

package/esm/core/FF_Filter.d.ts

@@ -3,7 +3,7 @@
  *
  * `owner` / `ownerOr` are prefilters (for `apiPrefilter`, `backendPrefilter`) -
  * pair with `FF_Allow` (the equivalent for `allowApi*` row checks). `containsWords`
- * is a search-box helper (pairs with `ffRepo(...).load/paginate`).
+ * is a search-box helper (pairs with `ff(...).many`).
  *
  * Pass the entity type as a generic (`FF_Filter.owner<Task>('userId')`) to get
  * autocompletion and type-safety on the column name. Without a generic the
@@ -61,7 +61,7 @@ export declare const FF_Filter: {
      *
      * @example
      * ```ts
-     * const r = ffRepo(User).load(() => ({
+     * const r = ff(User).many(() => ({
      *   where: FF_Filter.containsWords([repo(User).fields.name, repo(User).fields.sesa], q),
      * }))
      * ```

package/esm/core/FF_Filter.js

@@ -5,7 +5,7 @@ import { containsWords } from './containsWords.js';
  *
  * `owner` / `ownerOr` are prefilters (for `apiPrefilter`, `backendPrefilter`) -
  * pair with `FF_Allow` (the equivalent for `allowApi*` row checks). `containsWords`
- * is a search-box helper (pairs with `ffRepo(...).load/paginate`).
+ * is a search-box helper (pairs with `ff(...).many`).
  *
  * Pass the entity type as a generic (`FF_Filter.owner<Task>('userId')`) to get
  * autocompletion and type-safety on the column name. Without a generic the
@@ -64,7 +64,7 @@ export const FF_Filter = {
      *
      * @example
      * ```ts
-     * const r = ffRepo(User).load(() => ({
+     * const r = ff(User).many(() => ({
      *   where: FF_Filter.containsWords([repo(User).fields.name, repo(User).fields.sesa], q),
      * }))
      * ```

package/esm/core/FF_Validators.d.ts

@@ -18,6 +18,8 @@ export type EmailMessages = {
 export type ValidatorMessages = {
     email?: EmailMessages;
 };
+/** Resolve a `LocalizedMessage` (literal, or a paraglide/i18next/lingui message fn) to its current string value. */
+export declare const resolveMessage: (m: LocalizedMessage) => string;
 /**
  * Build a project-localized set of validators. Override any subset of
  * messages; defaults are English.

package/esm/core/FF_Validators.js

@@ -24,10 +24,8 @@ const DEFAULT_EMAIL_MESSAGES = {
     blockedDomain: 'Test/example email not accepted',
     blockedTld: 'Test/example TLD not accepted',
 };
-/** Resolve a `LocalizedMessage` to its current string value. */
-function resolve(m) {
-    return typeof m === 'function' ? m() : m;
-}
+/** Resolve a `LocalizedMessage` (literal, or a paraglide/i18next/lingui message fn) to its current string value. */
+export const resolveMessage = (m) => (typeof m === 'function' ? m() : m);
 /**
  * Build a project-localized set of validators. Override any subset of
  * messages; defaults are English.
@@ -66,26 +64,26 @@ export function createValidators(messages = {}) {
         if (value === '')
             return true;
         if (!EMAIL_SHAPE_RE.test(value))
-            return resolve(m.invalid);
+            return resolveMessage(m.invalid);
         const at = value.lastIndexOf('@');
         const domain = value.slice(at + 1).toLowerCase();
         if (!domain || domain.includes('..') || domain.startsWith('.') || domain.endsWith('.')) {
-            return resolve(m.invalidDomain);
+            return resolveMessage(m.invalidDomain);
         }
         if (BLOCKED_EMAIL_DOMAINS.has(domain))
-            return resolve(m.blockedDomain);
+            return resolveMessage(m.blockedDomain);
         const tld = domain.split('.').pop() ?? '';
         if (BLOCKED_EMAIL_TLDS.has(tld))
-            return resolve(m.blockedTld);
+            return resolveMessage(m.blockedTld);
         if (!domain.includes('.') || tld.length < 2)
-            return resolve(m.invalidDomain);
+            return resolveMessage(m.invalidDomain);
         return true;
     }
     return {
         checkEmail,
         // Pass a function so the per-request locale is resolved when the
         // validator actually fires, not when the validator is built.
-        email: createValueValidator(checkEmail, () => resolve(m.invalid)),
+        email: createValueValidator(checkEmail, () => resolveMessage(m.invalid)),
     };
 }
 /**

package/esm/core/containsWords.d.ts

@@ -7,7 +7,7 @@ import type { EntityFilter, FieldMetadata } from 'remult';
  *   (name~dupont OR sesa~dupont) AND (name~marie OR sesa~marie)
  *
  * So word order and which field holds which word don't matter - handy for
- * "NOM Prénom" style search across several columns. Pairs with `ffRepo`:
- * `ffRepo(User).load(() => ({ where: containsWords([f.name, f.sesa], q) }))`.
+ * "NOM Prénom" style search across several columns. Pairs with `ff`:
+ * `ff(User).many(() => ({ where: containsWords([f.name, f.sesa], q) }))`.
  */
 export declare const containsWords: <Entity>(fields: FieldMetadata<unknown, Entity>[], search: string) => EntityFilter<Entity>;

package/esm/core/containsWords.js

@@ -6,8 +6,8 @@
  *   (name~dupont OR sesa~dupont) AND (name~marie OR sesa~marie)
  *
  * So word order and which field holds which word don't matter - handy for
- * "NOM Prénom" style search across several columns. Pairs with `ffRepo`:
- * `ffRepo(User).load(() => ({ where: containsWords([f.name, f.sesa], q) }))`.
+ * "NOM Prénom" style search across several columns. Pairs with `ff`:
+ * `ff(User).many(() => ({ where: containsWords([f.name, f.sesa], q) }))`.
  */
 export const containsWords = (fields, search) => {
     const words = (search ?? '').split(' ').filter((s) => s.length > 0);

package/esm/core/tailwind.d.ts

@@ -11,11 +11,10 @@ import { type ClassValue } from 'clsx';
  * import { tw } from './tailwind'
  *
  * const buttonClasses = tw(
- *   'btn btn-primary',
- *   isDisabled && 'btn-disabled',
- *   size === 'lg' && 'btn-lg'
+ *   'px-4 py-2 bg-primary text-primary-foreground',
+ *   isDisabled && 'opacity-50 pointer-events-none',
+ *   size === 'lg' && 'px-6 text-lg'
  * )
- * // Result: "btn btn-primary btn-disabled" (if isDisabled is true)
  * ```
  */
 export declare const tw: (...inputs: ClassValue[]) => string;

package/esm/core/tailwind.js

@@ -12,11 +12,10 @@ import { twMerge } from 'tailwind-merge';
  * import { tw } from './tailwind'
  *
  * const buttonClasses = tw(
- *   'btn btn-primary',
- *   isDisabled && 'btn-disabled',
- *   size === 'lg' && 'btn-lg'
+ *   'px-4 py-2 bg-primary text-primary-foreground',
+ *   isDisabled && 'opacity-50 pointer-events-none',
+ *   size === 'lg' && 'px-6 text-lg'
  * )
- * // Result: "btn btn-primary btn-disabled" (if isDisabled is true)
  * ```
  */
 export const tw = (...inputs) => twMerge(clsx(...inputs));

package/esm/svelte/DemoForm.svelte

@@ -0,0 +1,121 @@
+<script lang="ts" generics="T extends { id: string }">
+	import type { ClassType, EntityFilter } from 'remult'
+
+	import { ff } from './ff.svelte.js'
+
+	type Props = {
+		/** The remult entity class. */
+		entity: ClassType<T>
+		/** Fields to edit. Labels come from each field's `caption`. */
+		fields: (keyof T & string)[]
+		/** Which record (remult `EntityFilter`). Default: findFirst by `defaultOrderBy` (the latest). */
+		where?: EntityFilter<T>
+	}
+	let { entity, fields, where }: Props = $props()
+
+	// A single bound record: `where` (or findFirst by the entity's defaultOrderBy - the latest row).
+	const r = ff(entity).one(() => ({ where }))
+
+	const get = (row: T, f: keyof T & string) => (row as Record<string, unknown>)[f]
+	function setField(f: keyof T & string, value: string) {
+		if (r.item) (r.item as Record<string, unknown>)[f] = value
+	}
+</script>
+
+<div class="form">
+	{#if r.loading.init}
+		<p class="muted">Loading…</p>
+	{:else if r.item}
+		{#each fields as f (f)}
+			<label>
+				<span>{r.meta.fields.find(f)?.caption ?? f}</span>
+				<input
+					value={String(get(r.item, f) ?? '')}
+					oninput={(e) => setField(f, e.currentTarget.value)}
+				/>
+			</label>
+		{/each}
+		<div class="actions">
+			<button
+				disabled={r.isWriting ||
+					(r.item.id ? !r.meta.apiUpdateAllowed(r.item) : !r.meta.apiInsertAllowed(r.item))}
+				onclick={() => r.save()}
+			>
+				Save
+			</button>
+			{#if r.isWriting}<span class="busy">saving…</span>{/if}
+		</div>
+		{#if r.error}<p class="err">{r.error}</p>{/if}
+	{:else}
+		<p class="muted">No record yet.</p>
+		<button disabled={!r.meta.apiInsertAllowed()} onclick={() => r.create()}>+ New</button>
+	{/if}
+</div>
+
+<style>
+	.form {
+		display: flex;
+		flex-direction: column;
+		gap: 12px;
+		align-items: stretch;
+		font-size: 14px;
+	}
+	label {
+		display: flex;
+		flex-direction: column;
+		gap: 4px;
+	}
+	label span {
+		font-size: 12px;
+		opacity: 0.65;
+	}
+	input {
+		width: 100%;
+		box-sizing: border-box;
+		padding: 7px 10px;
+		font: inherit;
+		color: inherit;
+		background: transparent;
+		border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
+		border-radius: 8px;
+	}
+	input:focus-visible {
+		outline: none;
+		border-color: color-mix(in srgb, currentColor 55%, transparent);
+	}
+	.actions {
+		display: flex;
+		gap: 10px;
+		align-items: center;
+	}
+	.busy {
+		color: #d97706;
+		font-weight: 600;
+		font-size: 12px;
+	}
+	.err {
+		color: #dc2626;
+		margin: 0;
+		font-size: 13px;
+	}
+	button {
+		cursor: pointer;
+		font: inherit;
+		padding: 6px 14px;
+		color: inherit;
+		background: color-mix(in srgb, currentColor 8%, transparent);
+		border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
+		border-radius: 8px;
+		transition: background 0.14s ease;
+	}
+	button:hover {
+		background: color-mix(in srgb, currentColor 15%, transparent);
+	}
+	button:disabled {
+		opacity: 0.45;
+		cursor: not-allowed;
+	}
+	.muted {
+		opacity: 0.6;
+	}
+</style>

package/esm/svelte/DemoForm.svelte.d.ts

@@ -0,0 +1,42 @@
+import type { ClassType, EntityFilter } from 'remult';
+declare function $$render<T extends {
+    id: string;
+}>(): {
+    props: {
+        /** The remult entity class. */
+        entity: ClassType<T>;
+        /** Fields to edit. Labels come from each field's `caption`. */
+        fields: (keyof T & string)[];
+        /** Which record (remult `EntityFilter`). Default: findFirst by `defaultOrderBy` (the latest). */
+        where?: EntityFilter<T>;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends {
+    id: string;
+}> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends {
+        id: string;
+    }>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends {
+        id: string;
+    }>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const DemoForm: $$IsomorphicComponent;
+type DemoForm<T extends {
+    id: string;
+}> = InstanceType<typeof DemoForm<T>>;
+export default DemoForm;

package/esm/svelte/DemoGrid.svelte

@@ -1,50 +1,48 @@
 <script lang="ts" generics="T extends { id: string }">
-	import type { ClassType, EntityFilter, MembersOnly } from 'remult'
+	import { untrack } from 'svelte'
 
-	import { ffRepo } from './FF_Repo.svelte.js'
+	import type { ClassType, EntityFilter } from 'remult'
+
+	import { ff, type FF_Many, type ManyStrategy } from './ff.svelte.js'
 
 	type Props = {
 		/** The remult entity class to CRUD. */
 		entity: ClassType<T>
 		/** Fields to show as columns / edit inputs. Headers come from each field's `caption`. */
 		fields: (keyof T & string)[]
+		/** Filter the list (remult `EntityFilter`). Reactive: change it to re-fetch. */
+		where?: EntityFilter<T>
+		/** Fetch strategy: `paginate` (default), `listen` (live), or `load` (static one-shot). */
+		strategy?: ManyStrategy
+		/** When false the list query is skipped (no auto-load) until it flips true. */
+		enabled?: boolean
+		/** Rows per page (paginate strategy). */
+		pageSize?: number
 	}
-	let { entity, fields }: Props = $props()
+	let {
+		entity,
+		fields,
+		where,
+		strategy = 'paginate',
+		enabled = true,
+		pageSize = 25,
+	}: Props = $props()
 
-	// live list - any write re-emits it, so no reconcile code (entity is static config)
-	const list = ffRepo(entity).listen(() => ({}))
+	// ONE handle does it all: list (per strategy) + editing draft + writes.
+	// `entity` + `strategy` are init-only - the handle builds its `$effect` once; the
+	// reactive bits live in the getter (`where`/`enabled`/`pageSize`, read on each run).
+	// `untrack` says "read these once on purpose" so Svelte doesn't flag a stale capture.
+	// Cast to the paginate view so `more()`/`aggregates`/`refresh` are reachable; guarded below.
+	const m = untrack(() =>
+		ff(entity).many(() => ({ where, enabled, pageSize }), strategy),
+	) as unknown as FF_Many<T, 'paginate'>
 
-	// the row being edited (by id), or a fresh draft for "new" - one reactive slot
-	let editingId = $state<string | null>(null)
-	const editor = ffRepo(entity).one(() => ({
-		where: { id: editingId ?? '' } as EntityFilter<T>,
-		enabled: !!editingId,
-	}))
-	const creating = $derived(!!editor.item && !editor.item.id)
+	const creating = $derived(!!m.draft && !m.draft.id)
 
 	// dynamic read/write of a field by key (v1: inputs are text)
 	const get = (row: T, f: keyof T & string) => (row as Record<string, unknown>)[f]
 	function setField(f: keyof T & string, value: string) {
-		if (editor.item) (editor.item as Record<string, unknown>)[f] = value
-	}
-
-	function edit(id: string) {
-		editingId = id // → editor.item loads that row
-	}
-	function add() {
-		editingId = null
-		editor.create() // blank draft into editor.item
-	}
-	function cancel() {
-		editingId = null
-		editor.item = undefined // drop the draft / stop editing
-	}
-	async function save() {
-		await editor.save() // insert (a draft) or update (the loaded row); the live list self-syncs
-		cancel()
-	}
-	async function remove(row: T) {
-		await list.repo.delete(row as Partial<MembersOnly<T>>) // raw delete via .repo; the live list drops the row
+		if (m.draft) (m.draft as Record<string, unknown>)[f] = value
 	}
 </script>
 
@@ -52,51 +50,98 @@
 	{#each fields as f (f)}
 		<td>
 			<input
-				placeholder={list.meta.fields.find(f)?.caption ?? f}
+				placeholder={m.meta.fields.find(f)?.caption ?? f}
 				value={String(get(draft, f) ?? '')}
 				oninput={(e) => setField(f, e.currentTarget.value)}
 			/>
 		</td>
 	{/each}
 	<td class="actions">
-		<button disabled={editor.loading.saving} onclick={save}>Save</button>
-		<button onclick={cancel}>Cancel</button>
+		<button
+			disabled={m.isWriting ||
+				(draft.id ? !m.meta.apiUpdateAllowed(draft) : !m.meta.apiInsertAllowed(draft))}
+			onclick={() => m.save()}
+		>
+			Save
+		</button>
+		<button onclick={() => m.cancel()}>Cancel</button>
 	</td>
 {/snippet}
 
 <div class="crud">
-	<button class="new" onclick={add}>+ New</button>
+	<div class="bar">
+		<button disabled={!m.meta.apiInsertAllowed()} onclick={() => m.create()}>+ New</button>
+		{#if strategy !== 'listen'}
+			<button onclick={() => m.refresh()}>Refresh</button>
+		{/if}
+		{#if strategy === 'paginate' && m.aggregates}<span class="count">{m.aggregates.$count} rows</span
+			>{/if}
+		{#if m.isBusy}<span class="busy">busy…</span>{/if}
+	</div>
+
+	{#if m.error}<p class="err">{m.error}</p>{/if}
 
 	<table>
 		<thead>
 			<tr>
-				{#each fields as f (f)}<th>{list.meta.fields.find(f)?.caption ?? f}</th>{/each}
+				{#each fields as f (f)}<th>{m.meta.fields.find(f)?.caption ?? f}</th>{/each}
 				<th></th>
 			</tr>
 		</thead>
 		<tbody>
-			{#if creating && editor.item}
-				<tr class="editing">{@render editRow(editor.item)}</tr>
+			{#if creating && m.draft}
+				<tr class="editing">{@render editRow(m.draft)}</tr>
+			{/if}
+			{#if m.loading.init}
+				<!--
+					First-load placeholder. We know `fields`, so we render one shimmer cell per column
+					plus a button-sized cell in the actions column - that keeps each skeleton row the
+					same height as a real row, so the table doesn't jump when the data arrives.
+				-->
+				{#each Array(2) as _, i (i)}
+					<tr>
+						{#each fields as f (f)}<td><span class="sk"></span></td>{/each}
+						<td class="actions"><span class="sk sk-btn"></span></td>
+					</tr>
+				{/each}
+			{:else}
+				{#each m.items as row (row.id)}
+					<tr class:editing={m.draft?.id === row.id}>
+						{#if m.draft && m.draft.id === row.id}
+							{@render editRow(m.draft)}
+						{:else}
+							{#each fields as f (f)}<td>{get(row, f)}</td>{/each}
+							<td class="actions">
+								<button disabled={!m.meta.apiUpdateAllowed(row)} onclick={() => m.edit(row)}> Edit </button>
+								<button disabled={!m.meta.apiDeleteAllowed(row)} onclick={() => m.remove(row)}>
+									Delete
+								</button>
+							</td>
+						{/if}
+					</tr>
+				{/each}
 			{/if}
-			{#each list.items as row (row.id)}
-				<tr class:editing={editingId === row.id}>
-					{#if editingId === row.id && editor.item}
-						{@render editRow(editor.item)}
-					{:else}
-						{#each fields as f (f)}<td>{get(row, f)}</td>{/each}
-						<td class="actions">
-							<button onclick={() => edit(row.id)}>Edit</button>
-							<button onclick={() => remove(row)}>Delete</button>
-						</td>
-					{/if}
-				</tr>
-			{/each}
 		</tbody>
 	</table>
 
-	{#if list.loading.init}
-		<p class="muted">Loading…</p>
-	{:else if list.items.length === 0 && !creating}
+	{#if strategy === 'paginate' && m.hasNextPage}
+		<!--
+			Manual "More". To auto-load on scroll instead, use the `infiniteScroll` attachment
+			(also from 'firstly/svelte') on a bottom sentinel:
+			<div {@attach infiniteScroll({
+				hasMore: () => m.hasNextPage,
+				loading: () => m.loading.more,
+				onMore: () => m.more(),
+			})}></div>
+		-->
+		<button disabled={m.loading.more} onclick={() => m.more()}>
+			{m.loading.more ? 'Loading…' : 'More'}
+		</button>
+	{/if}
+
+	{#if !enabled}
+		<p class="muted">Not loaded (<code>enabled: false</code>) - flip it to fetch.</p>
+	{:else if !m.loading.init && m.items.length === 0 && !creating}
 		<p class="muted">Nothing yet - hit “+ New”.</p>
 	{/if}
 </div>
@@ -109,6 +154,27 @@
 		gap: 10px;
 		align-items: start;
 	}
+	.bar {
+		display: flex;
+		gap: 10px;
+		align-items: center;
+		flex-wrap: wrap;
+		width: 100%;
+	}
+	.count {
+		font-size: 12px;
+		font-variant-numeric: tabular-nums;
+		opacity: 0.85;
+	}
+	.busy {
+		font-size: 12px;
+		color: #f59e0b;
+		font-weight: 600;
+	}
+	.err {
+		color: #ef4444;
+		margin: 0;
+	}
 	table {
 		border-collapse: collapse;
 		width: 100%;
@@ -164,4 +230,29 @@
 	.muted {
 		opacity: 0.6;
 	}
+	.sk {
+		display: inline-block;
+		width: 70%;
+		height: 0.8em;
+		border-radius: 4px;
+		background: color-mix(in srgb, currentColor 16%, transparent);
+		animation: sk-pulse 1.2s ease-in-out infinite;
+	}
+	/* button-sized so a skeleton row matches a real (button-bearing) row's height */
+	.sk-btn {
+		width: 3.4em;
+		height: 1.9em;
+	}
+	@keyframes sk-pulse {
+		0%,
+		100% {
+			opacity: 0.45;
+		}
+		50% {
+			opacity: 0.85;
+		}
+	}
+	code {
+		font-size: 12px;
+	}
 </style>

package/esm/svelte/DemoGrid.svelte.d.ts

@@ -1,4 +1,5 @@
-import type { ClassType } from 'remult';
+import type { ClassType, EntityFilter } from 'remult';
+import { type ManyStrategy } from './ff.svelte.js';
 declare function $$render<T extends {
     id: string;
 }>(): {
@@ -7,6 +8,14 @@ declare function $$render<T extends {
         entity: ClassType<T>;
         /** Fields to show as columns / edit inputs. Headers come from each field's `caption`. */
         fields: (keyof T & string)[];
+        /** Filter the list (remult `EntityFilter`). Reactive: change it to re-fetch. */
+        where?: EntityFilter<T>;
+        /** Fetch strategy: `paginate` (default), `listen` (live), or `load` (static one-shot). */
+        strategy?: ManyStrategy;
+        /** When false the list query is skipped (no auto-load) until it flips true. */
+        enabled?: boolean;
+        /** Rows per page (paginate strategy). */
+        pageSize?: number;
     };
     exports: {};
     bindings: "";

package/esm/svelte/DialogOpenTest.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import type { DialogClose } from './dialog.svelte.js'
+
+	// `label` proves props pass through; `close` is injected by the manager and typed,
+	// so `open(DialogOpenTest)` resolves `DialogResult<number>`.
+	let { label, close }: { label: string; close: DialogClose<number> } = $props()
+</script>
+
+<p data-testid="open-label">{label}</p>
+<button data-testid="open-ok" onclick={() => close({ ok: true, data: 7 })}>ok</button>

package/esm/svelte/DialogOpenTest.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { DialogClose } from './dialog.svelte.js';
+type $$ComponentProps = {
+    label: string;
+    close: DialogClose<number>;
+};
+declare const DialogOpenTest: import("svelte").Component<$$ComponentProps, {}, "">;
+type DialogOpenTest = ReturnType<typeof DialogOpenTest>;
+export default DialogOpenTest;

package/esm/svelte/FF_Config.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte'
+
+	import { setFFConfig, type FF_ConfigValue } from './FF_Config.svelte.js'
+
+	let { children, messages, dialog, toast }: { children: Snippet } & FF_ConfigValue = $props()
+
+	// Hand context a getter over our (reactive) props, not a snapshot - so descendants re-read
+	// the latest values and locale-aware message functions resolve fresh on each render.
+	setFFConfig(() => ({ messages, dialog, toast }))
+</script>
+
+{@render children()}

package/esm/svelte/FF_Config.svelte.d.ts

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