@riducms/admin 0.3.0 → 0.4.0

package/package.json

@@ -21,19 +21,21 @@
 		"@iconify/json": "^2.2.509",
 		"@internationalized/date": "^3.12.3",
 		"@lezer/highlight": "^1.2.3",
-		"@riducms/plugin": "0.3.0",
-		"@riducms/protocol": "0.3.0",
-		"@riducms/sdk": "0.3.0",
-		"@riducms/translations": "0.3.0",
-		"@riducms/ui": "0.3.0",
+		"@riducms/plugin": "0.4.0",
+		"@riducms/protocol": "0.4.0",
+		"@riducms/sdk": "0.4.0",
+		"@riducms/translations": "0.4.0",
+		"@riducms/ui": "0.4.0",
+		"@twinkleplop/bash": "0.1.5",
+		"@twinkleplop/go": "0.1.5",
+		"@twinkleplop/typescript": "0.1.5",
 		"bits-ui": "^2.18.1",
-		"shiki": "4.4.3",
 		"svelte-sonner": "^1.1.1"
 	},
 	"description": "Framework-owned Svelte 5 authoring application embedded by Ridu servers.",
 	"devDependencies": {
 		"@hvniel/lexical-svelte": "^0.1.1",
-		"@riducms/build": "0.3.0",
+		"@riducms/build": "0.4.0",
 		"svelte": "^5.57.0"
 	},
 	"exports": {
@@ -72,5 +74,5 @@
 		"test:unit": "bun test tests"
 	},
 	"type": "module",
-	"version": "0.3.0"
+	"version": "0.4.0"
 }

package/src/core/runtime/admin-runtime.svelte.ts

@@ -455,7 +455,7 @@ export class AdminRuntime {
 		const accessAuthoritative = await this.refreshAccess(this.contentLocale);
 		if (!accessAuthoritative || this.session === undefined || this.adminAccessAllowed) return;
 		try {
-			await this.client.logout();
+			await this.client.auth.logout();
 		} catch {
 			// The local session is still denied even if server cleanup fails.
 		}
@@ -471,21 +471,18 @@ export class AdminRuntime {
 			if (request !== this.#manifestRequest) return;
 			const admin = this.#installManifest(manifest);
 			if (admin !== undefined) {
-				const bootstrap = await this.client.authBootstrap(admin.userCollectionSlug);
+				const bootstrap = await this.client.auth.bootstrap({
+					collection: admin.userCollectionSlug,
+				});
 				if (request !== this.#manifestRequest) return;
 				this.authBootstrapAvailable = bootstrap.available;
 				if (bootstrap.available) {
 					this.session = undefined;
 				} else {
-					try {
-						const session = await this.client.session();
-						if (request !== this.#manifestRequest) return;
-						this.session = session.collection === admin.userCollectionSlug ? session : undefined;
-					} catch (error) {
-						if (request !== this.#manifestRequest) return;
-						if (!(error instanceof RiduError) || error.code !== "access_denied") throw error;
-						this.session = undefined;
-					}
+					// getSession resolves null without a session and rejects on an outage.
+					const session = await this.client.auth.getSession();
+					if (request !== this.#manifestRequest) return;
+					this.session = session?.collection === admin.userCollectionSlug ? session : undefined;
 				}
 			} else {
 				this.session = undefined;
@@ -513,7 +510,9 @@ export class AdminRuntime {
 				this.session = undefined;
 			}
 			if (admin !== undefined && this.session === undefined) {
-				const bootstrap = await this.client.authBootstrap(admin.userCollectionSlug);
+				const bootstrap = await this.client.auth.bootstrap({
+					collection: admin.userCollectionSlug,
+				});
 				if (request !== this.#manifestRequest) return;
 				this.authBootstrapAvailable = bootstrap.available;
 			} else {

package/src/features/account/account-route.svelte

@@ -336,7 +336,7 @@
 		const request = beginProfileRequest();
 
 		try {
-			await runtime.client.logout({ signal: request.signal });
+			await runtime.client.auth.logout({ signal: request.signal });
 			if (!ownsProfileRequest(request, owner)) return;
 
 			await runtime.hardNavigate(adminRoutePatterns.login);

package/src/features/account/account-security-controller.svelte.ts

@@ -47,8 +47,10 @@ export class AccountSecurityController {
 		this.error = undefined;
 		try {
 			const [sessions, apiKeys] = await Promise.all([
-				this.client.sessions({ signal: request.signal }),
-				this.apiKeysEnabled ? this.client.apiKeys({ signal: request.signal }) : Promise.resolve([]),
+				this.client.auth.sessions({ signal: request.signal }),
+				this.apiKeysEnabled
+					? this.client.auth.apiKeys({ signal: request.signal })
+					: Promise.resolve([]),
 			]);
 			if (request.signal.aborted || generation !== this.#generation) return;
 			this.sessions = sessions;
@@ -64,7 +66,7 @@ export class AccountSecurityController {
 	revokeSession = async (id: string) => {
 		return this.#run(
 			"session:" + id,
-			(signal) => this.client.revokeSession(id, { signal }),
+			(signal) => this.client.auth.revokeSession(id, { signal }),
 			() => (this.sessions = this.sessions.filter((session) => session.id !== id))
 		);
 	};
@@ -72,7 +74,7 @@ export class AccountSecurityController {
 	logoutAll = async () => {
 		return this.#run(
 			"logout-all",
-			(signal) => this.client.logoutAll({ signal }),
+			(signal) => this.client.auth.logoutAll({ signal }),
 			() => (this.sessions = [])
 		);
 	};
@@ -80,7 +82,7 @@ export class AccountSecurityController {
 	createAPIKey = async (name: string, expiresAt?: string) => {
 		return this.#run(
 			"api-key:create",
-			(signal) => this.client.createAPIKey({ name, expiresAt }, { signal }),
+			(signal) => this.client.auth.createAPIKey({ name, expiresAt }, { signal }),
 			(created) => {
 				this.createdAPIKey = created;
 				this.apiKeys = [
@@ -103,7 +105,7 @@ export class AccountSecurityController {
 	revokeAPIKey = async (id: string) => {
 		return this.#run(
 			"api-key:" + id,
-			(signal) => this.client.revokeAPIKey(id, { signal }),
+			(signal) => this.client.auth.revokeAPIKey(id, { signal }),
 			() => {
 				this.apiKeys = this.apiKeys.filter((key) => key.id !== id);
 				if (this.createdAPIKey?.id === id) this.createdAPIKey = undefined;
@@ -113,7 +115,7 @@ export class AccountSecurityController {
 
 	changePassword = async (currentPassword: string, password: string) => {
 		return this.#run("password", (signal) =>
-			this.client.changePassword(currentPassword, password, { signal })
+			this.client.auth.changePassword({ currentPassword, password }, { signal })
 		);
 	};
 

package/src/features/account/account-security-route.svelte

@@ -194,7 +194,7 @@
 		hostRequest = request;
 
 		try {
-			await runtime.client.logout({ signal: request.signal });
+			await runtime.client.auth.logout({ signal: request.signal });
 			if (request.signal.aborted || runtime.session?.id !== owner) return;
 
 			await runtime.hardNavigate(adminRoutePatterns.login);

package/src/features/api-reference/api-reference-code.svelte

@@ -1,44 +1,43 @@
 <script lang="ts" module>
-	import { createHighlighterCoreSync } from "shiki/core";
-	import { createJavaScriptRegexEngine } from "shiki/engine/javascript";
-	import typescript from "shiki/langs/typescript.mjs";
-	import shell from "shiki/langs/shellscript.mjs";
-	import go from "shiki/langs/go.mjs";
-	import { riduCodeTheme } from "@riducms/ui/code-theme";
+	import { tokenize as tokenizeTypeScript } from "@twinkleplop/typescript";
+	import { tokenize as tokenizeBash } from "@twinkleplop/bash";
+	import { tokenize as tokenizeGo } from "@twinkleplop/go";
 	import "@fontsource-variable/martian-mono";
+	import type { ReferenceLanguage } from "@admin/features/api-reference/api-reference-examples";
+
+	// Keep the grammars in the drawer's lazy chunk and reuse their tokenizers across examples.
+	const tokenizers = {
+		typescript: tokenizeTypeScript(),
+		curl: tokenizeBash(),
+		go: tokenizeGo(),
+	};
 
-	// This module belongs to the drawer's lazy chunk. Reuse one tokenizer across examples.
-	const highlighter = createHighlighterCoreSync({
-		engine: createJavaScriptRegexEngine(),
-		themes: [riduCodeTheme],
-		langs: [typescript, shell, go],
-	});
+	function highlightedTokens(code: string, language: ReferenceLanguage) {
+		const { tokens, token_types } = tokenizers[language](code);
+		const parts: { content: string; type?: string }[] = [];
+		let offset = 0;
+
+		for (let index = 0; index < tokens.length; index += 3) {
+			const start = tokens[index + 1];
+			const end = tokens[index + 2];
+			if (start > offset) parts.push({ content: code.slice(offset, start) });
+			parts.push({ content: code.slice(start, end), type: token_types[tokens[index]] });
+			offset = end;
+		}
+
+		if (offset < code.length) parts.push({ content: code.slice(offset) });
+		return parts;
+	}
 </script>
 
 <script lang="ts">
-	import type { ReferenceLanguage } from "@admin/features/api-reference/api-reference-examples";
-
 	let { code, language }: { code: string; language: ReferenceLanguage } = $props();
-
-	const highlighted = $derived(
-		highlighter.codeToTokens(code, {
-			lang: language === "curl" ? "shellscript" : language,
-			theme: riduCodeTheme.name,
-		})
-	);
+	const highlighted = $derived(highlightedTokens(code, language));
 </script>
 
 <!-- svelte-ignore a11y_no_noninteractive_tabindex (Scrollable examples need a keyboard scroll target.) -->
-<pre
-	class="ridu-api-reference__code"
-	dir="ltr"
-	tabindex="0"
-	style:--code-block-foreground={highlighted.fg}><code>{#each highlighted.tokens as line, index}{#if index > 0}{"\n"}{/if}{#each line as token}<span
-					style:color={token.color}
-					style:font-style={token.fontStyle && token.fontStyle & 1 ? "italic" : undefined}
-					style:font-weight={token.fontStyle && token.fontStyle & 2
-						? "700"
-						: undefined}>{token.content}</span>{/each}{/each}</code></pre>
+<pre class="ridu-api-reference__code" dir="ltr" tabindex="0"><code>{#each highlighted as token}<span
+				class={token.type}>{token.content}</span>{/each}</code></pre>
 
 <style lang="scss">
 	@layer ridu.components {
@@ -47,7 +46,8 @@
 			padding: 18px 20px;
 			max-height: 430px;
 			overflow: auto;
-			color: var(--code-block-foreground);
+			background: #0d0a0c;
+			color: #e9e6e1;
 			border: 1px solid var(--border);
 			border-radius: var(--radius-sm);
 			font-family: "Martian Mono Variable", "Martian Mono", ui-monospace, monospace;
@@ -59,6 +59,56 @@
 			code {
 				font: inherit;
 			}
+
+			:global(.comment) {
+				color: #7d7a8c;
+				font-style: italic;
+			}
+
+			:global(.keyword),
+			:global(.decorator) {
+				color: #ff7eb6;
+			}
+
+			:global(.string),
+			:global(.string_escape),
+			:global(.template),
+			:global(.regex) {
+				color: #b5e48c;
+			}
+
+			:global(.number),
+			:global(.boolean),
+			:global(.constant),
+			:global(.property) {
+				color: #c4a5ff;
+			}
+
+			:global(.function) {
+				color: #8fb4ff;
+				font-weight: 700;
+			}
+
+			:global(.type),
+			:global(.class_name) {
+				color: #7fdbec;
+				font-style: italic;
+			}
+
+			:global(.parameter) {
+				color: #ffb977;
+				font-style: italic;
+			}
+
+			:global(.builtin),
+			:global(.namespace) {
+				color: #8fb4ff;
+			}
+
+			:global(.punctuation),
+			:global(.operator) {
+				color: #80807e;
+			}
 		}
 	}
 </style>

package/src/features/api-reference/api-reference-examples.ts

@@ -127,7 +127,7 @@ export function referenceCode(
 			break;
 		case "create":
 			if (request.authCreate)
-				call = `const doc = await ridu.createAuthUser(${slug}, ${data}, "REPLACE_WITH_A_PASSWORD");`;
+				call = `const doc = await ridu.auth.createUser({\n  collection: ${slug},\n  data: ${data},\n  password: "REPLACE_WITH_A_PASSWORD",\n});`;
 			else if (request.uploadCreate)
 				call = `async function createUpload(file: File) {\n  const data: RiduConfig["collections"][${slug}]["create"] = ${data};\n  return ridu.upload(${slug}, file, { data });\n}`;
 			else call = `const doc = await ridu.create(${slug}, ${data});`;

package/src/features/auth/create-first-user-controller.svelte.ts

@@ -77,9 +77,10 @@ export class CreateFirstUserController {
 		let accountCreated = false;
 		try {
 			await this.form.submit(this.fields, true, (values) =>
-				this.options.runtime.client.createAuthUser(collection.slug, values, this.password, {
-					signal: request.signal,
-				})
+				this.options.runtime.client.auth.createUser(
+					{ collection: collection.slug, data: values, password: this.password },
+					{ signal: request.signal }
+				)
 			);
 			accountCreated = true;
 			if (!this.#current(generation, request)) return undefined;
@@ -88,9 +89,8 @@ export class CreateFirstUserController {
 			if (typeof identity !== "string" || identity.trim() === "") {
 				throw new Error(this.options.runtime.i18n.t("auth:firstAccountIdentityUnavailable"));
 			}
-			await this.options.runtime.client.login(
-				collection.slug,
-				{ email: identity, password: this.password },
+			await this.options.runtime.client.auth.login(
+				{ collection: collection.slug, email: identity, password: this.password },
 				{ signal: request.signal }
 			);
 			if (!this.#current(generation, request)) return undefined;
@@ -101,7 +101,7 @@ export class CreateFirstUserController {
 				this.options.runtime.collectionOperations[collection.slug]?.admin !== true
 			) {
 				try {
-					await this.options.runtime.client.logout({ signal: request.signal });
+					await this.options.runtime.client.auth.logout({ signal: request.signal });
 				} catch {
 					// The setup route remains closed even if cookie cleanup fails.
 				}
@@ -133,9 +133,10 @@ export class CreateFirstUserController {
 			}
 
 			try {
-				const bootstrap = await this.options.runtime.client.authBootstrap(collection.slug, {
-					signal: request.signal,
-				});
+				const bootstrap = await this.options.runtime.client.auth.bootstrap(
+					{ collection: collection.slug },
+					{ signal: request.signal }
+				);
 				if (!this.#current(generation, request)) return undefined;
 				if (!bootstrap.available) {
 					await this.#continueToLogin("completed");

package/src/features/auth/forgot-password-route.svelte

@@ -25,7 +25,7 @@
 		error = undefined;
 
 		try {
-			await runtime.client.requestPasswordReset(authCollection.slug, email);
+			await runtime.client.auth.requestPasswordReset({ collection: authCollection.slug, email });
 			sent = true;
 		} catch (cause) {
 			error =

package/src/features/auth/login-route.svelte

@@ -50,7 +50,7 @@
 			throw new Error(runtime.i18n.t("auth:configuredCollectionUnavailable"));
 		}
 
-		await runtime.client.login(authCollection.slug, credentials);
+		await runtime.client.auth.login({ collection: authCollection.slug, ...credentials });
 		const destinationLocale = runtime.contentLocaleForPath(postLoginPath);
 		const destinationAccessAuthoritative = await runtime.refreshAccess(
 			destinationLocale ?? runtime.contentLocale
@@ -60,7 +60,7 @@
 			runtime.collectionOperations[authCollection.slug]?.admin !== true
 		) {
 			try {
-				await runtime.client.logout();
+				await runtime.client.auth.logout();
 			} catch {
 				// The shell remains denied even if server cleanup fails.
 			}

package/src/features/auth/logout-button.svelte

@@ -18,7 +18,7 @@
 		error = undefined;
 
 		try {
-			await runtime.client.logout();
+			await runtime.client.auth.logout();
 			await runtime.hardNavigate(adminRoutePatterns.login);
 		} catch (cause) {
 			error = cause instanceof Error ? cause.message : runtime.i18n.t("account:signOutFailed");

package/src/features/auth/request-verification-route.svelte

@@ -25,7 +25,7 @@
 		error = undefined;
 
 		try {
-			await runtime.client.requestVerification(authCollection.slug, email);
+			await runtime.client.auth.requestVerification({ collection: authCollection.slug, email });
 			sent = true;
 		} catch (cause) {
 			error =

package/src/features/auth/reset-password-route.svelte

@@ -67,9 +67,12 @@
 		pending = true;
 
 		try {
-			await runtime.client.resetPassword(authCollection.slug, token, password, {
-				signal: activeRequest.signal,
-			});
+			await runtime.client.auth.resetPassword(
+				{ collection: authCollection.slug, token, password },
+				{
+					signal: activeRequest.signal,
+				}
+			);
 			if (!current()) return;
 			complete = true;
 			password = "";

package/src/features/auth/verify-email-route.svelte

@@ -43,9 +43,12 @@
 		error = undefined;
 
 		try {
-			await runtime.client.verifyEmail(authCollection.slug, token, {
-				signal: activeRequest.signal,
-			});
+			await runtime.client.auth.verifyEmail(
+				{ collection: authCollection.slug, token },
+				{
+					signal: activeRequest.signal,
+				}
+			);
 			if (!current()) return;
 			complete = true;
 		} catch (cause) {

package/src/features/documents/document-controller.svelte.ts

@@ -395,9 +395,10 @@ export class DocumentController {
 		this.#forceUnlockRequest = request;
 		this.unlockOperation = true;
 		try {
-			await runtime.client.forceUnlock(this.collection.slug, this.currentDocument.id, {
-				signal: request.signal,
-			});
+			await runtime.client.auth.forceUnlock(
+				{ collection: this.collection.slug, id: this.currentDocument.id },
+				{ signal: request.signal }
+			);
 			if (request.signal.aborted) return;
 			notifications.success({ title: runtime.i18n.t("documents:accountUnlocked") });
 		} catch (cause) {
@@ -545,10 +546,10 @@ export class DocumentController {
 				if (this.collection?.capabilities.auth) {
 					if (password === undefined)
 						throw new Error(this.options.runtime.i18n.t("documents:enterNewAccountPassword"));
-					return this.options.runtime.client.createAuthUser(collectionSlug, values, password, {
-						signal: request.signal,
-						locale: this.contentLocale,
-					});
+					return this.options.runtime.client.auth.createUser(
+						{ collection: collectionSlug, data: values, password },
+						{ signal: request.signal, locale: this.contentLocale }
+					);
 				}
 				if (!this.uploadCollection) {
 					return this.options.runtime.client.create(collectionSlug, values, {

package/src/features/reference-browser/reference-browser-workflow.svelte.ts

@@ -485,10 +485,8 @@ export class ReferenceBrowserWorkflow {
 					);
 				}
 				if (this.collection.capabilities.auth) {
-					return this.options.runtime.client.createAuthUser(
-						this.collection.slug,
-						values,
-						this.newUserPassword,
+					return this.options.runtime.client.auth.createUser(
+						{ collection: this.collection.slug, data: values, password: this.newUserPassword },
 						{ signal: request.signal, locale: this.options.locale }
 					);
 				}

package/src/fields/select/select-field.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { flushSync } from "svelte";
 	import {
 		Combobox,
 		ComboboxInput,
@@ -33,13 +34,16 @@
 	const values = $derived(selectManyValues(form.get(field.path)));
 	const options = $derived(field.select?.options ?? []);
 	const filtered = $derived(
-		options.filter((option) =>
-			option.label
-				.toLocaleLowerCase(runtime.i18n.language)
-				.includes(query.toLocaleLowerCase(runtime.i18n.language))
+		options.filter(
+			(option) =>
+				(!hasMany || !values.includes(option.value)) &&
+				option.label
+					.toLocaleLowerCase(runtime.i18n.language)
+					.includes(query.toLocaleLowerCase(runtime.i18n.language))
 		)
 	);
 	const selectedLabel = $derived(options.find((option) => option.value === value)?.label ?? "");
+	const inputValue = $derived(open || hasMany ? query : selectedLabel);
 	const placeholder = $derived(
 		field.admin.placeholder ?? runtime.i18n.t("fields:select", { label: field.admin.label })
 	);
@@ -58,6 +62,7 @@
 
 	function setValues(next: string[]) {
 		if (!editingBlocked) form.set(field.path, [...next]);
+		query = "";
 	}
 
 	function setValue(next: string) {
@@ -80,7 +85,7 @@
 					if (!next) query = "";
 				}
 			}
-			inputValue={open || hasMany ? query : selectedLabel}
+			{inputValue}
 		>
 			<div
 				bind:this={anchor}
@@ -114,17 +119,26 @@
 						autocorrect="off"
 						autocapitalize="none"
 						spellcheck={false}
-						{placeholder}
+						placeholder={hasMany && values.length > 0 ? "" : placeholder}
 						{...controlARIA}
 						aria-label={field.admin.label}
 						aria-required={field.required}
 						clearOnDeselect
 						onpointerdown={() => (open = true)}
 						oninput={(event) => {
-							query = event.currentTarget.value;
-							open = true;
+							const next = event.currentTarget.value;
+							// Filter before Bits chooses its keyboard highlight from the rendered options.
+							flushSync(() => {
+								query = next;
+								open = true;
+							});
 						}}
-					/>
+					>
+						{#snippet child({ props })}
+							<!-- Bits writes the picked label internally; tags already display it. -->
+							<input {...props} value={inputValue} />
+						{/snippet}
+					</ComboboxInput>
 				</div>
 				{#if !hasMany && value}
 					<button
@@ -158,9 +172,11 @@
 								{option.label}
 							</ComboboxItem>
 						{:else}
-							<p class="ridu-combobox-message">
-								{runtime.i18n.t("fields:noMatch", { label: field.admin.label })}
-							</p>
+							{#if query.trim()}
+								<p class="ridu-combobox-message">
+									{runtime.i18n.t("fields:noMatch", { label: field.admin.label })}
+								</p>
+							{/if}
 						{/each}
 					</ComboboxViewport>
 				</ComboboxContent>