@fuzdev/fuz_app 0.60.0 → 0.62.0

package/dist/ui/AdminOverview.svelte

@@ -89,10 +89,10 @@
 			<h3>accounts</h3>
 			<a href={resolve('/admin/accounts' as any)} class="text_50 font_size_sm">view all &rarr;</a>
 		</div>
-		{#if accounts.loading}
+		{#if accounts.list.loading}
 			<p class="text_50">loading...</p>
-		{:else if accounts.error}
-			<p class="color_c_50">{accounts.error}</p>
+		{:else if accounts.list.error}
+			<p class="color_c_50">{accounts.list.error}</p>
 		{:else}
 			<div class="baseline-row gap_xs">
 				<strong class="font_size_lg">{accounts.account_count}</strong>
@@ -131,10 +131,10 @@
 			<h3>sessions</h3>
 			<a href={resolve('/admin/sessions' as any)} class="text_50 font_size_sm">view all &rarr;</a>
 		</div>
-		{#if sessions.loading}
+		{#if sessions.list.loading}
 			<p class="text_50">loading...</p>
-		{:else if sessions.error}
-			<p class="color_c_50">{sessions.error}</p>
+		{:else if sessions.list.error}
+			<p class="color_c_50">{sessions.list.error}</p>
 		{:else}
 			<div class="baseline-row gap_xs">
 				<strong class="font_size_lg">{sessions.active_count}</strong>
@@ -161,10 +161,10 @@
 			<h3>invites</h3>
 			<a href={resolve('/admin/invites' as any)} class="text_50 font_size_sm">view all &rarr;</a>
 		</div>
-		{#if invites.loading}
+		{#if invites.list.loading}
 			<p class="text_50">loading...</p>
-		{:else if invites.error}
-			<p class="color_c_50">{invites.error}</p>
+		{:else if invites.list.error}
+			<p class="color_c_50">{invites.list.error}</p>
 		{:else}
 			<div class="baseline-row gap_sm">
 				<span class="text_50">public signup</span>
@@ -206,10 +206,10 @@
 			<h3>recent activity</h3>
 			<a href={resolve('/admin/audit-log' as any)} class="text_50 font_size_sm">view all &rarr;</a>
 		</div>
-		{#if audit_log.loading}
+		{#if audit_log.list.loading}
 			<p class="text_50">loading...</p>
-		{:else if audit_log.error}
-			<p class="color_c_50">{audit_log.error}</p>
+		{:else if audit_log.list.error}
+			<p class="color_c_50">{audit_log.list.error}</p>
 		{:else if recent_events.length === 0}
 			<p class="text_50">no events</p>
 		{:else}
@@ -234,10 +234,10 @@
 			<h3>security</h3>
 			<a href={resolve('/admin/audit-log' as any)} class="text_50 font_size_sm">audit log &rarr;</a>
 		</div>
-		{#if audit_log.loading}
+		{#if audit_log.list.loading}
 			<p class="text_50">loading...</p>
-		{:else if audit_log.error}
-			<p class="color_c_50">{audit_log.error}</p>
+		{:else if audit_log.list.error}
+			<p class="color_c_50">{audit_log.list.error}</p>
 		{:else}
 			<div class="baseline-row gap_xs">
 				<strong class="font_size_lg" class:color_c_50={failed_logins.length > 0}>
@@ -271,10 +271,10 @@
 		<div class="panel-header">
 			<h3>system</h3>
 		</div>
-		{#if app_settings.loading}
+		{#if app_settings.list.loading}
 			<p class="text_50">loading...</p>
-		{:else if app_settings.error}
-			<p class="color_c_50">{app_settings.error}</p>
+		{:else if app_settings.list.error}
+			<p class="color_c_50">{app_settings.list.error}</p>
 		{:else}
 			<div class="baseline-row gap_sm">
 				<span class="text_50">public signup</span>
@@ -308,10 +308,8 @@
 						await auth_state.logout();
 					}}
 					title="log out"
+					label="log out"
 				>
-					{#snippet children(_popover, _confirm)}
-						log out
-					{/snippet}
 					{#snippet popover_button_content()}
 						<span class="p_md"> log out </span>
 					{/snippet}

package/dist/ui/AdminOverview.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AdminOverview.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../../src/lib/ui/AdminOverview.svelte"],"names":[],"mappings":"AA4UA,QAAA,MAAM,aAAa,2DAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"AdminOverview.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../../src/lib/ui/AdminOverview.svelte"],"names":[],"mappings":"AA2UA,QAAA,MAAM,aAAa,2DAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/ui/AdminRoleGrantHistory.svelte

@@ -40,10 +40,10 @@
 <section>
 	<h1>role_grant history</h1>
 
-	{#if audit_log.loading}
+	{#if audit_log.role_grant_history.loading}
 		<p class="text_50">loading role_grant history...</p>
-	{:else if audit_log.error}
-		<p class="color_c_50">{audit_log.error}</p>
+	{:else if audit_log.role_grant_history.error}
+		<p class="color_c_50">{audit_log.role_grant_history.error}</p>
 	{:else}
 		<Datatable {columns} rows={audit_log.role_grant_history_events} height="400px" row_key="id">
 			{#snippet cell(column, row)}

package/dist/ui/AdminSessions.svelte

@@ -40,10 +40,10 @@
 		</p>
 	{/if}
 
-	{#if admin_sessions.loading}
+	{#if admin_sessions.list.loading}
 		<p class="text_50">loading sessions...</p>
-	{:else if admin_sessions.error}
-		<p class="color_c_50">{admin_sessions.error}</p>
+	{:else if admin_sessions.list.error}
+		<p class="color_c_50">{admin_sessions.list.error}</p>
 	{:else}
 		<Datatable {columns} rows={admin_sessions.sessions} height="400px">
 			{#snippet cell(column, row)}
@@ -63,30 +63,28 @@
 					</span>
 				{:else if column.key === 'account_id'}
 					{#if admin_sessions.has_rpc}
+						{@const revoke_sessions_error = admin_sessions.revoke_sessions.error(row.account_id)}
+						{@const revoke_tokens_error = admin_sessions.revoke_tokens.error(row.account_id)}
 						<ConfirmButton
-							onconfirm={() => admin_sessions.revoke_all_for_account(row.account_id)}
+							onconfirm={() => admin_sessions.submit_revoke_sessions(row.account_id)}
 							title="revoke all sessions for {row.username}"
 							class="sm"
-							disabled={admin_sessions.revoking_account_ids.has(row.account_id)}
-						>
-							{#snippet children(_popover, _confirm)}
-								{admin_sessions.revoking_account_ids.has(row.account_id)
-									? 'revoking…'
-									: 'revoke sessions'}
-							{/snippet}
-						</ConfirmButton>
+							label="revoke sessions"
+							pending={admin_sessions.revoke_sessions.loading(row.account_id)}
+						/>
+						{#if revoke_sessions_error}
+							<span class="color_c_50 font_size_sm">{revoke_sessions_error}</span>
+						{/if}
 						<ConfirmButton
-							onconfirm={() => admin_sessions.revoke_all_tokens_for_account(row.account_id)}
+							onconfirm={() => admin_sessions.submit_revoke_tokens(row.account_id)}
 							title="revoke all tokens for {row.username}"
 							class="sm"
-							disabled={admin_sessions.revoking_token_account_ids.has(row.account_id)}
-						>
-							{#snippet children(_popover, _confirm)}
-								{admin_sessions.revoking_token_account_ids.has(row.account_id)
-									? 'revoking…'
-									: 'revoke tokens'}
-							{/snippet}
-						</ConfirmButton>
+							label="revoke tokens"
+							pending={admin_sessions.revoke_tokens.loading(row.account_id)}
+						/>
+						{#if revoke_tokens_error}
+							<span class="color_c_50 font_size_sm">{revoke_tokens_error}</span>
+						{/if}
 					{/if}
 				{:else if column.format}
 					{column.format(row[column.key], row)}

package/dist/ui/AdminSessions.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AdminSessions.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../../src/lib/ui/AdminSessions.svelte"],"names":[],"mappings":"AAwGA,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IACtG,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,aAAa;;kBAA+E,CAAC;AACjF,KAAK,aAAa,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC;AAC1D,eAAe,aAAa,CAAC"}
+{"version":3,"file":"AdminSessions.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../../src/lib/ui/AdminSessions.svelte"],"names":[],"mappings":"AAoGA,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IACtG,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,aAAa;;kBAA+E,CAAC;AACjF,KAAK,aAAa,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC;AAC1D,eAAe,aAAa,CAAC"}

package/dist/ui/AdminSettings.svelte

@@ -30,10 +30,8 @@
 			await auth_state.logout();
 		}}
 		title="log out"
+		label="log out"
 	>
-		{#snippet children(_popover, _confirm)}
-			log out
-		{/snippet}
 		{#snippet popover_button_content()}
 			<span class="p_md"> log out </span>
 		{/snippet}

package/dist/ui/AdminSettings.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AdminSettings.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../../src/lib/ui/AdminSettings.svelte"],"names":[],"mappings":"AA+CA,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IACtG,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,aAAa;;kBAA+E,CAAC;AACjF,KAAK,aAAa,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC;AAC1D,eAAe,aAAa,CAAC"}
+{"version":3,"file":"AdminSettings.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../../src/lib/ui/AdminSettings.svelte"],"names":[],"mappings":"AA8CA,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IACtG,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,aAAa;;kBAA+E,CAAC;AACjF,KAAK,aAAa,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC;AAC1D,eAAe,aAAa,CAAC"}

package/dist/ui/CLAUDE.md

@@ -2,8 +2,12 @@
 
 Frontend subsystem — Svelte 5 components, reactive state classes, and DOM
 utilities. Cookie-based SPA auth; prerendered static HTML served by Hono
-(no SvelteKit SSR for sessions). State classes extend `Loadable` and
-hold `$state` fields exclusively via runes. Shared dependencies flow
+(no SvelteKit SSR for sessions). State classes hold one or more `AsyncSlot`s
+via composition (one per distinct async operation — e.g. `list` + `create` +
+`revoke`); per-row write ops use `KeyedAsyncSlot<K, T = void, E = string>`
+(supersedes the old `AsyncSlot` + `SvelteSet<id>` pair) so concurrent rows
+don't abort each other and failures surface per-row via `slot.error(key)`.
+Payload lives as `$state.raw` fields on the class. Shared dependencies flow
 through Svelte context, never through props — RPC adapters in particular
 are provisioned once at the admin shell and read by every `Admin*.svelte`.
 
@@ -128,14 +132,18 @@ destructive actions.
 - `AdminAccounts.svelte` — accounts + role_grants + pending offers.
   Consumes `admin_accounts_rpc_context`. Per-row actions: grant (+role
   chip with `ConfirmButton`), revoke (`actor_id` + `role_grant_id`),
-  retract pending offer. Tracks `granting_keys` / `revoking_ids` /
-  `retracting_ids` for per-action spinners.
+  retract pending offer. Reads per-row spinner + error state via
+  `state.grant.loading(key)` / `state.revoke.loading(role_grant_id)` /
+  `state.retract.loading(offer_id)` and their `.error(key)` siblings —
+  per-row error displays inline next to the failing button (no
+  top-level rollup).
 - `AdminAuditLog.svelte` — audit event stream. Consumes
   `audit_log_rpc_context`. Filter by `event_type`, manual refresh,
   toggle SSE streaming (via `EventSource` — not RPC).
 - `AdminInvites.svelte` — invite CRUD + embeds `OpenSignupToggle`.
-  Consumes `admin_invites_rpc_context`. Tracks `creating` +
-  `deleting_ids`.
+  Consumes `admin_invites_rpc_context`. Per-row delete reads
+  `state.remove.loading(invite_id)` / `state.remove.error(invite_id)`
+  with inline per-row error display.
 - `AdminOverview.svelte` — dashboard panels (accounts / sessions /
   invites / recent activity / security / system). Consumes all four
   RPC contexts plus `auth_state_context`; fetches in parallel on mount.
@@ -185,27 +193,56 @@ destructive actions.
   `format_scope?`, `format_role?`. Consumes
   `role_grant_offers_state_context`; caller seeds via
   `RoleGrantOffersState.fetch_history()`.
-- `role_grant_offers_state.svelte.ts` — `RoleGrantOffersState` (extends
-  `Loadable`) + `role_grant_offers_state_context`. Options:
-  `rpc: RoleGrantOffersRpc`, `account_id: () => string | null`,
-  `actor_id: () => string | null`. The narrow `RoleGrantOffersRpc`
-  interface has six methods: `list`, `history`, `create`, `accept`,
-  `decline`, `retract`. `$state.raw` Map keyed by offer id;
-  `$derived.by` views: `incoming` (recipient-side pending, soonest-
-  expiry first), `outgoing` (grantor-side pending, newest-created
-  first), `history` (all known, newest-created first). Reducer
-  `apply_notification` handles the six role-grant-offer notification
-  methods; `role_grant_revoke` is deliberately ignored here (auth/role_grants
-  concern). `reset()` clears the Map.
+- `role_grant_offers_state.svelte.ts` — `RoleGrantOffersState` +
+  `role_grant_offers_state_context`. Options: `rpc: RoleGrantOffersRpc`,
+  `account_id: () => string | null`, `actor_id: () => string | null`.
+  The narrow `RoleGrantOffersRpc` interface has six methods: `list`,
+  `history`, `create`, `accept`, `decline`, `retract`. Holds six
+  `AsyncSlot`s — five `AsyncSlot<void>` for status/error tracking
+  (`list` / `list_history` / `accept` / `decline` / `retract`) plus
+  one `AsyncSlot<RoleGrantOfferJson>` (`create`) that owns the
+  created offer so `submit_create` returns it via the slot's
+  supersession-safe `data` path. The `$state.raw` Map cache keyed by
+  offer id stays on the class (multiple ops + WS notifications merge
+  into it). Methods use the `submit_*` prefix to avoid slot-name
+  collisions (`submit_create` / `submit_accept` / `submit_decline` /
+  `submit_retract`); the fetch slot is named `list_history` so the
+  derived view stays natural as `history`. `$derived.by` views:
+  `incoming` (recipient-side pending, soonest-expiry first),
+  `outgoing` (grantor-side pending, newest-created first), `history`
+  (all known, newest-created first). Reducer `apply_notification`
+  handles the six role-grant-offer notification methods;
+  `role_grant_revoke` is deliberately ignored here (auth/role_grants
+  concern). `reset()` clears every slot + the Map.
 
 ## State primitives
 
-- `loadable.svelte.ts` — `Loadable<TError = string>` base class.
-  `loading`, `error`, `error_data` (raw caught value for programmatic
-  inspection). Protected `run(fn, map_error?)` wraps async operations
-  with loading + error handling; subclasses add `$state` fields and
-  call `run`. `reset()` clears state; subclasses override to clear
-  domain data.
+- `async_slot.svelte.ts` — `AsyncSlot<T = void, E = string>`. Composable
+  reactive container for one async operation. Surface: explicit
+  four-value `status` (`'initial' | 'pending' | 'success' | 'failure'`),
+  derived `initial` / `loading` / `succeeded` / `failed`, supersession
+  via internal `AbortController` (a second `run()` aborts the first
+  and silently drops its commit), `AbortSignal` threaded to the
+  callback + external-signal hookup via `RunOptions`, per-slot
+  `map_error` set once in the constructor, opt-in
+  `preserve_error_on_retry`, public `run()` / `abort()` / `set()` /
+  `reset()`. Slots are HELD by state classes via composition (one per
+  distinct async op), not subclassed. Payload typically lives on the
+  state class as `$state.raw` fields; `slot.data` is reserved for
+  cases where the slot owns the result.
+- `keyed_async_slot.svelte.ts` — `KeyedAsyncSlot<K, T = void, E = string>`.
+  Keyed sibling of `AsyncSlot` — lazily creates a child slot per key
+  in a `SvelteMap`, propagating `map_error` / `preserve_error_on_retry`
+  to each child. Replaces the `AsyncSlot` + `SvelteSet<id>` pair: each
+  key has its own `AbortController`, so a `run(b, ...)` does NOT abort
+  an in-flight `run(a, ...)`, and `error(key)` surfaces per-row.
+  Reactive sugar: `loading(key)`, `error(key)`, `failed(key)`,
+  `succeeded(key)`, `has(key)`, `size`, plus `get(key)` for full slot
+  access. Resolved entries persist (no auto-cleanup) so components can
+  render per-row error indicators after the run completes; call
+  `delete(key)` to dismiss an entry or `reset()` to wipe everything.
+  `abort(key)` / `abort_all()` cancel without removing entries.
+  `entries()` / `keys()` / `values()` iterate for cross-key views.
 - `auth_state.svelte.ts` — `AuthState`, `auth_state_context`.
   Fields: `verifying`, `verified`, `verify_error`, `account`, `actor`
   (the caller's own `ActorSummaryJson` — surfaced directly so consumers
@@ -214,11 +251,14 @@ destructive actions.
   `needs_bootstrap`. Methods: `check_session()`
   (GET `/api/account/status`), `login`, `bootstrap`, `signup`,
   `logout`. Handles 401/403/409/429 translations inline.
-- `table_state.svelte.ts` — `TableState` extends `Loadable`.
-  Paginated DB browser state: `table_name`, `columns`, `rows`,
-  `total`, `offset`, `limit` (capped by `TABLE_LIMIT_MAX = 1000`),
-  `primary_key`. Derived `showing_start`/`showing_end`/`has_prev`/
-  `has_next`. Methods: `fetch`, `go_prev`/`go_next`, `delete_row`.
+- `table_state.svelte.ts` — `TableState`. Paginated DB browser state.
+  Holds one `AsyncSlot` (`list`) + payload fields (`table_name`,
+  `columns`, `rows`, `total`, `offset`, `limit` capped by
+  `TABLE_LIMIT_MAX = 1000`, `primary_key`). Derived
+  `showing_start`/`showing_end`/`has_prev`/`has_next`. Methods:
+  `fetch`, `go_prev`/`go_next`, `delete_row`. `delete_row` uses
+  plain try/catch + scalar `deleting` / `delete_error` fields (no
+  slot — error must survive past `list.run()` retries).
 - `form_state.svelte.ts` — `FormState`. Enter-advance between
   focusable elements via `keydown`; per-field `touched` set via
   delegated `focusout`; form-level `attempted` set on submit attempt.
@@ -231,47 +271,61 @@ destructive actions.
 
 ## Per-domain state modules
 
-- `account_sessions_state.svelte.ts` — `AccountSessionsState` extends
-  `Loadable` + `account_sessions_rpc_context` + narrow
-  `AccountSessionsRpc` (`list`, `revoke`, `revoke_all`). Wraps the
-  `account_session_list` / `account_session_revoke` /
-  `account_session_revoke_all` RPC actions. Derived `active_count`.
-- `audit_log_state.svelte.ts` — `AuditLogState` extends `Loadable`
-  - `audit_log_rpc_context` + narrow `AuditLogRpc` (`list` +
-    `role_grant_history`). Fields: `events`, `role_grant_history_events`,
-    `connected`. Internal `#last_seq` for SSE gap fill on reconnect.
-    Methods: `fetch(options?)` (RPC), `fetch_role_grant_history`,
-    `subscribe()` (opens `EventSource` at `#stream_url`, default
-    `/api/admin/audit/stream`; prepends new events; refills gap
-    via `since_seq`), `disconnect()`. SSE stays on `EventSource` —
-    streaming is not an RPC concern.
-- `admin_accounts_state.svelte.ts` — `AdminAccountsState` extends
-  `Loadable` + `admin_accounts_rpc_context` + narrow
-  `AdminAccountsRpc` (six methods: `list_accounts`, `create_role_grant`,
+All state classes hold per-op `AsyncSlot`s for the fetch + singular
+write verbs, and `KeyedAsyncSlot`s for per-row write verbs (the
+`SvelteSet<id>` pattern is retired — per-row tracking lives on the
+keyed slot's `loading(key)` / `error(key)` accessors). Method names use
+the `submit_*` prefix where the verb collides with a slot name.
+
+- `account_sessions_state.svelte.ts` — `AccountSessionsState` +
+  `account_sessions_rpc_context` + narrow `AccountSessionsRpc`
+  (`list`, `revoke`, `revoke_all`). Slots: `list` (AsyncSlot),
+  `revoke` (`KeyedAsyncSlot<string, void>` keyed by `session_id` for
+  per-row independence), `revoke_all` (AsyncSlot). Methods: `fetch`,
+  `submit_revoke(id)`, `submit_revoke_all`. Derived `active_count`.
+- `audit_log_state.svelte.ts` — `AuditLogState` +
+  `audit_log_rpc_context` + narrow `AuditLogRpc` (`list` +
+  `role_grant_history`). Slots: `list`, `role_grant_history`. Fields:
+  `events`, `role_grant_history_events`, `connected`. Internal
+  `#last_seq` for SSE gap fill on reconnect. Methods:
+  `fetch(options?)` (RPC), `fetch_role_grant_history`, `subscribe()`
+  (opens `EventSource` at `#stream_url`, default
+  `/api/admin/audit/stream`; prepends new events to `events`; refills
+  gap via `since_seq`), `disconnect()`. SSE stays on `EventSource` —
+  streaming is not an RPC concern.
+- `admin_accounts_state.svelte.ts` — `AdminAccountsState` +
+  `admin_accounts_rpc_context` + narrow `AdminAccountsRpc` (seven
+  methods: `list_accounts`, `list_sessions`, `create_role_grant`,
   `revoke_role_grant`, `retract_offer`, `session_revoke_all`,
-  `token_revoke_all` — the last two are also reused by
-  `AdminSessionsState`). `SvelteSet`s for in-flight tracking:
-  `granting_keys` (`${account_id}:${role}` for the account-grain
-  default; `${account_id}:${role}:${to_actor_id}` when `create_role_grant`
-  is called with an actor-targeted offer), `revoking_ids` (role_grant id),
-  `retracting_ids` (offer id). `revoke_role_grant` keys on `actor_id`
-  (role_grants are actor-scoped — matches `row.actor.id` straight from the
-  listing) with optional `reason`.
-- `admin_invites_state.svelte.ts` — `AdminInvitesState` extends
-  `Loadable` + `admin_invites_rpc_context` + narrow
-  `AdminInvitesRpc` (`list`, `create`, `delete`). Fields:
-  `invites`, `creating`, `deleting_ids`; derived `invite_count`,
-  `unclaimed_count`.
-- `admin_sessions_state.svelte.ts` — `AdminSessionsState` extends
-  `Loadable`. **Reuses** `admin_accounts_rpc_context` /
-  `AdminAccountsRpc` for the listing (`list_sessions` wraps
-  `admin_session_list`) and the two revoke-all mutations. `SvelteSet`s:
-  `revoking_account_ids`, `revoking_token_account_ids`. `has_rpc`
-  gates the listing + both revoke controls.
-- `app_settings_state.svelte.ts` — `AppSettingsState` extends
-  `Loadable` + `app_settings_rpc_context` + narrow `AppSettingsRpc`
-  (`get`, `update`). Fields: `settings`, `updating`. Single mutation
-  `update_open_signup(boolean)`.
+  `token_revoke_all` — the last three are also reused by
+  `AdminSessionsState`). Slots: `list` (AsyncSlot), `grant`
+  (`KeyedAsyncSlot<string, RoleGrantOfferJson>` — slot owns the
+  created offer; key composed by exported
+  `grant_key(account_id, role, to_actor_id?)`, 2-segment for
+  account-grain, 3-segment when actor-targeted), `revoke`
+  (`KeyedAsyncSlot<Uuid, void>` keyed by `role_grant_id`), `retract`
+  (`KeyedAsyncSlot<Uuid, void>` keyed by `offer_id`). `submit_revoke`
+  takes `actor_id` as the first arg (role_grants are actor-scoped —
+  matches `row.actor.id` straight from the listing) with optional
+  `reason`.
+- `admin_invites_state.svelte.ts` — `AdminInvitesState` +
+  `admin_invites_rpc_context` + narrow `AdminInvitesRpc` (`list`,
+  `create`, `delete`). Slots: `list`, `create` (both AsyncSlot),
+  `remove` (`KeyedAsyncSlot<Uuid, void>` keyed by `invite_id`).
+  Field: `invites`; derived `invite_count`, `unclaimed_count`.
+  Methods: `fetch`, `submit_create`, `submit_delete`. (Slot `remove`
+  instead of `delete` to avoid keyword shadowing.)
+- `admin_sessions_state.svelte.ts` — `AdminSessionsState`. **Reuses**
+  `admin_accounts_rpc_context` / `AdminAccountsRpc` for the listing
+  (`list_sessions` wraps `admin_session_list`) and the two revoke-all
+  mutations. Slots: `list` (AsyncSlot), `revoke_sessions` /
+  `revoke_tokens` (`KeyedAsyncSlot<Uuid, void>` keyed by
+  `account_id`). `has_rpc` gates the listing + both revoke controls.
+  Methods: `fetch`, `submit_revoke_sessions`, `submit_revoke_tokens`.
+- `app_settings_state.svelte.ts` — `AppSettingsState` +
+  `app_settings_rpc_context` + narrow `AppSettingsRpc` (`get`,
+  `update`). Slots: `list`, `update`. Field: `settings`. Single
+  mutation `update_open_signup(boolean)`.
 - `admin_rpc_adapters.ts` (plain `.ts`, no reactive state) — bundled
   wiring for the four admin RPC contexts. `create_admin_rpc_adapters(api)`
   takes the typed throwing Proxy from `create_frontend_rpc_client` (or

package/dist/ui/ConfirmButton.svelte

@@ -6,19 +6,31 @@
 	 * On confirm, calls `onconfirm` and hides the popover (controlled
 	 * by `hide_on_confirm`). Defaults to `position="left"`.
 	 *
-	 * Snippets (`children`, `popover_content`, `popover_button_content`)
-	 * receive both the `Popover` instance and a `confirm` callback.
+	 * Trigger content: pass `label` for a simple string, or a `children`
+	 * snippet for custom content (the two are mutually exclusive — DEV
+	 * errors when both are set). `pending: boolean` overlays a spinner
+	 * and disables the trigger, mirroring `PendingButton` semantics so
+	 * the label stays put while an async operation runs.
 	 *
 	 * @example
 	 * ```svelte
 	 * <ConfirmButton
 	 * 	onconfirm={() => delete_item(item.id)}
 	 * 	title="delete item"
-	 * 	disabled={deleting}
+	 * 	label="delete"
+	 * 	pending={state.remove.loading(item.id)}
+	 * />
+	 * ```
+	 *
+	 * @example
+	 * ```svelte
+	 * <!-- custom trigger content via the children snippet -->
+	 * <ConfirmButton
+	 * 	onconfirm={() => grant(item.id, role)}
+	 * 	title="offer {role}"
+	 * 	pending={state.grant.loading(key)}
 	 * >
-	 * 	{#snippet children(_popover, _confirm)}
-	 * 		{deleting ? 'deleting…' : 'delete'}
-	 * 	{/snippet}
+	 * 	{#snippet children(_popover, _confirm)}+ {role}{/snippet}
 	 * </ConfirmButton>
 	 * ```
 	 *
@@ -34,10 +46,12 @@
 	 * @module
 	 */
 
+	import {DEV} from 'esm-env';
 	import type {SvelteHTMLElements} from 'svelte/elements';
 	import type {ComponentProps, Snippet} from 'svelte';
 	import type {OmitStrict} from '@fuzdev/fuz_util/types.js';
 	import Glyph from '@fuzdev/fuz_ui/Glyph.svelte';
+	import PendingAnimation from '@fuzdev/fuz_ui/PendingAnimation.svelte';
 
 	import PopoverButton from './PopoverButton.svelte';
 	import type {Popover} from './popover.svelte.js';
@@ -53,6 +67,9 @@
 		popover_button_content,
 		button,
 		children,
+		label,
+		pending = false,
+		disabled: disabled_prop,
 		...rest
 	}: OmitStrict<ComponentProps<typeof PopoverButton>, 'popover_content' | 'children'> &
 		OmitStrict<SvelteHTMLElements['button'], 'children'> & {
@@ -65,21 +82,34 @@
 			popover_button_content?: Snippet<[popover: Popover, confirm: () => void]> | undefined;
 			/** Unlike on `PopoverButton` this has a `confirm` arg */
 			children?: Snippet<[popover: Popover, confirm: () => void]> | undefined;
+			/** Simple string content for the trigger. Mutually exclusive with `children`. */
+			label?: string | undefined;
+			/**
+			 * When `true`, the trigger is disabled and a spinner overlays the
+			 * content (mirrors `PendingButton`). The label / children stay
+			 * rendered underneath so the button keeps its size.
+			 */
+			pending?: boolean | undefined;
 		} = $props();
 
 	// TODO @many type union instead of this pattern?
-	$effect(() => {
-		if (popover_content_prop && popover_button_attrs) {
-			console.error(
-				'ConfirmButton has both popover_content and popover_attrs defined - popover_content takes precedence',
-			);
-		}
-		if (popover_content_prop && popover_button_content) {
-			console.error(
-				'ConfirmButton has both popover_content and popover_button_content defined - popover_content takes precedence',
-			);
-		}
-	});
+	if (DEV) {
+		$effect(() => {
+			if (popover_content_prop && popover_button_attrs) {
+				console.error(
+					'ConfirmButton has both popover_content and popover_button_attrs defined - popover_content takes precedence',
+				);
+			}
+			if (popover_content_prop && popover_button_content) {
+				console.error(
+					'ConfirmButton has both popover_content and popover_button_content defined - popover_content takes precedence',
+				);
+			}
+			if (label !== undefined && children) {
+				console.error('ConfirmButton has both label and children defined - pick one');
+			}
+		});
+	}
 
 	const confirm = (popover: Popover): void => {
 		if (hide_on_confirm) popover.hide();
@@ -92,6 +122,7 @@
 	{position}
 	{button}
 	{...rest as any}
+	disabled={disabled_prop ?? pending}
 	children={button ? undefined : children_default}
 >
 	{#snippet popover_content(popover)}
@@ -103,7 +134,7 @@
 				class="color_c bg_100"
 				class:icon_button={!popover_button_content}
 				onclick={() => confirm(popover)}
-				title="confirm {rest.title || ''}"
+				title={rest.title ? `confirm ${rest.title}` : 'confirm'}
 				{...popover_button_attrs}
 			>
 				{#if popover_button_content}
@@ -117,9 +148,36 @@
 </PopoverButton>
 
 {#snippet children_default(popover: Popover)}
-	{#if children}
-		{@render children(popover, () => confirm(popover))}
-	{:else}
-		<Glyph glyph={GLYPH_REMOVE} />
-	{/if}
+	<span class="trigger" class:pending>
+		<span class="content">
+			{#if children}
+				{@render children(popover, () => confirm(popover))}
+			{:else if label !== undefined}
+				{label}
+			{:else}
+				<Glyph glyph={GLYPH_REMOVE} />
+			{/if}
+		</span>
+		{#if pending}
+			<span class="animation">
+				<PendingAnimation inline />
+			</span>
+		{/if}
+	</span>
 {/snippet}
+
+<style>
+	.trigger {
+		position: relative;
+	}
+	.pending .content {
+		visibility: hidden;
+	}
+	.animation {
+		position: absolute;
+		inset: 0;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+</style>