@riducms/admin 0.2.2 → 0.3.0

package/src/features/{auth → account}/account-security-route.svelte

@@ -1,60 +1,67 @@
 <script lang="ts">
-	import { useNavigate } from "@hvniel/svelte-router";
 	import KeyIcon from "~icons/lucide/key-round";
 	import LaptopIcon from "~icons/lucide/laptop";
 	import LockIcon from "~icons/lucide/lock-keyhole";
 	import ShieldIcon from "~icons/lucide/shield-check";
 
 	import { Banner } from "@admin/components/ui/banner";
-	import { Button } from "@admin/components/ui/button";
-	import { DateValueControl } from "@admin/components/ui/date-value-control";
-	import { Input } from "@admin/components/ui/input";
 	import {
+		Button,
+		Input,
 		Dialog,
 		DialogContent,
 		DialogDescription,
 		DialogFooter,
 		DialogHeader,
 		DialogTitle,
-	} from "@admin/components/ui/dialog";
+	} from "@riducms/ui";
+	import { DateValueControl } from "@admin/components/ui/date-value-control";
+
 	import { adminRoutePatterns } from "@admin/core/routing/admin-paths";
 	import { getNotificationCenter } from "@admin/core/notifications/notification-center.svelte";
 	import { getAdminRuntime } from "@admin/core/runtime/admin-runtime.svelte";
-	import { AccountSecurityController } from "@admin/features/auth/account-security-controller.svelte";
-	import AccountNavigation from "@admin/features/auth/account-navigation.svelte";
+	import { AccountSecurityController } from "@admin/features/account/account-security-controller.svelte";
+	import AccountNavigation from "@admin/features/account/account-navigation.svelte";
+	import { getAdminBootstrapCoordinator } from "@admin/core/bootstrap/admin-bootstrap";
+	import { useLocation } from "@hvniel/svelte-router";
 
 	const runtime = getAdminRuntime();
+	const bootstrap = getAdminBootstrapCoordinator();
+	const location = useLocation();
 	const notifications = getNotificationCenter();
-	const navigate = useNavigate();
-	// The authenticated route table is remounted when the session changes, so this
-	// manifest capability is an intentional controller-lifetime snapshot.
+
+	// The manifest capability is stable for this mounted route. Session identity is
+	// synchronized separately because valid session replacements retain the route.
 	const controller = new AccountSecurityController(
 		runtime.client,
 		runtime.authCollection?.authSettings?.apiKeys === true,
 		runtime.i18n.t
 	);
+
+	let hostRequest: AbortController | undefined;
+
+	const sessionID = $derived(runtime.session?.id);
 	const { status, error, operation, sessions, apiKeys, createdAPIKey, apiKeysEnabled } =
 		$derived(controller);
+
 	let currentPassword = $state("");
 	let nextPassword = $state("");
 	let confirmPassword = $state("");
+
 	let apiKeyName = $state("");
 	let apiKeyExpiry = $state("");
+
 	let destructiveAction = $state<{ kind: "session" | "api-key" | "logout-all"; id?: string }>();
-	const accountComponents = $derived(
-		runtime.accountComponents.filter((component) => component.surface === "security")
-	);
-	const replacement = $derived(
-		accountComponents.find((component) => component.position === "replace")
-	);
-	const beforeComponents = $derived(
-		accountComponents.filter((component) => component.position === "before")
+
+	const accountComponents = runtime.config.extensions.account.filter(
+		(component) => component.surface === "security"
 	);
-	const afterComponents = $derived(
-		accountComponents.filter(
-			(component) => component.position === undefined || component.position === "after"
-		)
+	const replacement = accountComponents.find((component) => component.position === "replace");
+	const beforeComponents = accountComponents.filter((component) => component.position === "before");
+	const afterComponents = accountComponents.filter(
+		(component) => component.position === undefined || component.position === "after"
 	);
+
 	const host = {
 		refreshUser,
 		logout,
@@ -62,9 +69,20 @@
 			notifications[tone]({ title, message }),
 	};
 
-	$effect(() => {
-		controller.load();
-		return () => controller.destroy();
+	let activeSessionID: string | undefined;
+
+	$effect.pre(() => {
+		const owner = sessionID;
+		if (owner === undefined || owner === activeSessionID) return;
+
+		activeSessionID = owner;
+		const route = bootstrap.routeData(location.current.pathname, location.current.search);
+		controller.load(route?.kind === "security" ? route.security : undefined);
+	});
+
+	$effect(() => () => {
+		hostRequest?.abort();
+		controller.destroy();
 	});
 
 	async function changePassword(event: SubmitEvent) {
@@ -73,64 +91,138 @@
 			notifications.error({ title: runtime.i18n.t("account:passwordMismatch") });
 			return;
 		}
-		if (!(await controller.changePassword(currentPassword, nextPassword))) return;
-		runtime.session = undefined;
+
+		const owner = runtime.session?.id;
+		if (
+			owner === undefined ||
+			!(await controller.changePassword(currentPassword, nextPassword)) ||
+			runtime.session?.id !== owner
+		)
+			return;
+
 		notifications.success({ title: runtime.i18n.t("account:passwordUpdated") });
-		navigate(adminRoutePatterns.login, { replace: true });
+		await runtime.hardNavigate(adminRoutePatterns.login);
 	}
 
 	async function createAPIKey(event: SubmitEvent) {
 		event.preventDefault();
+		const owner = runtime.session?.id;
+		if (owner === undefined) return;
+
 		const expiry = apiKeyExpiry === "" ? undefined : new Date(apiKeyExpiry).toISOString();
-		if (!(await controller.createAPIKey(apiKeyName, expiry))) return;
+		if (!(await controller.createAPIKey(apiKeyName, expiry)) || runtime.session?.id !== owner)
+			return;
+
 		apiKeyName = "";
 		apiKeyExpiry = "";
 		notifications.success({ title: runtime.i18n.t("account:apiKeyCreated") });
 	}
 
 	async function revokeSession(id: string) {
-		if (!(await controller.revokeSession(id))) return;
+		const owner = runtime.session?.id;
+		if (
+			owner === undefined ||
+			!(await controller.revokeSession(id)) ||
+			runtime.session?.id !== owner
+		)
+			return;
+
 		notifications.success({ title: runtime.i18n.t("account:sessionRevoked") });
 	}
 
 	async function revokeAPIKey(id: string) {
-		if (!(await controller.revokeAPIKey(id))) return;
+		const owner = runtime.session?.id;
+		if (
+			owner === undefined ||
+			!(await controller.revokeAPIKey(id)) ||
+			runtime.session?.id !== owner
+		)
+			return;
+
 		notifications.success({ title: runtime.i18n.t("account:apiKeyRevoked") });
 	}
 
 	async function logoutAll() {
-		if (!(await controller.logoutAll())) return;
-		runtime.session = undefined;
+		const owner = runtime.session?.id;
+		if (owner === undefined || !(await controller.logoutAll()) || runtime.session?.id !== owner)
+			return;
+
 		notifications.success({ title: runtime.i18n.t("account:signedOutAll") });
-		navigate(adminRoutePatterns.login, { replace: true });
+		await runtime.hardNavigate(adminRoutePatterns.login);
 	}
 
 	async function refreshUser() {
 		const collection = runtime.authCollection;
 		const user = runtime.session?.user;
 		if (collection === undefined || user === undefined) return undefined;
-		const document = await runtime.client.find(collection.slug, user.id);
-		if (runtime.session !== undefined) runtime.session = { ...runtime.session, user: document };
-		return document;
+
+		const owner = runtime.session?.id;
+		if (owner === undefined) return undefined;
+
+		const request = new AbortController();
+		hostRequest?.abort();
+		hostRequest = request;
+
+		try {
+			const document = await runtime.client.find(collection.slug, user.id, {
+				signal: request.signal,
+			});
+			if (request.signal.aborted || runtime.session?.id !== owner) return undefined;
+
+			const activeSession = runtime.session;
+			if (activeSession === undefined) return undefined;
+
+			runtime.session = { ...activeSession, user: document };
+
+			return document;
+		} catch (cause) {
+			if (request.signal.aborted || runtime.session?.id !== owner) return undefined;
+
+			throw cause;
+		} finally {
+			if (hostRequest === request) hostRequest = undefined;
+		}
 	}
 
 	async function logout() {
-		await runtime.client.logout();
-		runtime.session = undefined;
-		navigate(adminRoutePatterns.login, { replace: true });
+		const user = runtime.session?.user;
+		const owner = runtime.session?.id;
+		if (user === undefined || owner === undefined) return;
+
+		const request = new AbortController();
+		hostRequest?.abort();
+		hostRequest = request;
+
+		try {
+			await runtime.client.logout({ signal: request.signal });
+			if (request.signal.aborted || runtime.session?.id !== owner) return;
+
+			await runtime.hardNavigate(adminRoutePatterns.login);
+		} catch (cause) {
+			if (request.signal.aborted || runtime.session?.id !== owner) return;
+
+			throw cause;
+		} finally {
+			if (hostRequest === request) hostRequest = undefined;
+		}
 	}
 
 	async function confirmDestructiveAction() {
 		const action = destructiveAction;
 		if (action === undefined) return;
+
 		if (action.kind === "session" && action.id !== undefined) await revokeSession(action.id);
+
 		if (action.kind === "api-key" && action.id !== undefined) await revokeAPIKey(action.id);
+
 		if (action.kind === "logout-all") await logoutAll();
+
 		destructiveAction = undefined;
 	}
 
 	async function copyAPIKey() {
 		if (createdAPIKey === undefined) return;
+
 		try {
 			await navigator.clipboard.writeText(createdAPIKey.key);
 			notifications.success({ title: runtime.i18n.t("account:apiKeyCopied") });
@@ -141,6 +233,7 @@
 
 	function formatDate(value: string | undefined) {
 		if (value === undefined || value === "") return runtime.i18n.t("account:never");
+
 		return runtime.i18n.formatDate(value, { dateStyle: "medium", timeStyle: "short" });
 	}
 </script>
@@ -264,7 +357,12 @@
 				)}
 
 				{#if sessionMessage !== undefined}
-					<p class="px-5 py-6 text-[13px] text-foreground-muted">{sessionMessage}</p>
+					<p
+						class="px-5 py-6 text-[13px] text-foreground-muted"
+						data-ridu-loading-surface={status === "loading" ? "security" : undefined}
+					>
+						{sessionMessage}
+					</p>
 				{:else}
 					{#each sessions as session (session.id)}
 						<div
@@ -426,7 +524,7 @@
 		}
 	}
 >
-	<DialogContent>
+	<DialogContent closeLabel={runtime.i18n.t("general:close")}>
 		<DialogHeader>
 			<p class="font-mono text-[10px] tracking-[0.13em] text-destructive uppercase">
 				{runtime.i18n.t("account:securityAction")}

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

@@ -0,0 +1,64 @@
+<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 "@fontsource-variable/martian-mono";
+
+	// 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],
+	});
+</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,
+		})
+	);
+</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>
+
+<style lang="scss">
+	@layer ridu.components {
+		.ridu-api-reference__code {
+			margin: 0;
+			padding: 18px 20px;
+			max-height: 430px;
+			overflow: auto;
+			color: var(--code-block-foreground);
+			border: 1px solid var(--border);
+			border-radius: var(--radius-sm);
+			font-family: "Martian Mono Variable", "Martian Mono", ui-monospace, monospace;
+			font-size: 14px;
+			font-variant-ligatures: none;
+			line-height: 1.56;
+			tab-size: 2;
+
+			code {
+				font: inherit;
+			}
+		}
+	}
+</style>

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

@@ -0,0 +1,258 @@
+<script lang="ts">
+	import type { SchemaCollection, SchemaManifest } from "@riducms/protocol";
+	import { getAdminI18n } from "@riducms/plugin";
+	import { Button } from "@riducms/ui";
+	import CopyIcon from "~icons/lucide/copy";
+	import CheckIcon from "~icons/lucide/check";
+
+	import { Tabs, TabsList, TabsTrigger, TabsContent } from "@admin/components/ui/tabs";
+	import APIReferenceCode from "@admin/features/api-reference/api-reference-code.svelte";
+	import JsonViewer from "@admin/components/json-tree/json-viewer.svelte";
+	import { CopyFeedback } from "@admin/core/clipboard/copy-feedback.svelte";
+	import { collectionReferenceSchema } from "@admin/features/api-reference/api-reference-schema";
+	import {
+		referenceCode,
+		referenceOperations,
+		referenceParameters,
+		referenceRequest,
+		referenceResponses,
+		type ReferenceLanguage,
+		type ReferenceOperation,
+	} from "@admin/features/api-reference/api-reference-examples";
+	import "@admin/features/api-reference/api-reference.scss";
+
+	let {
+		collection,
+		manifest,
+		documentID,
+	}: { collection: SchemaCollection; manifest: SchemaManifest; documentID?: string } = $props();
+
+	const i18n = getAdminI18n();
+	const languages: { value: ReferenceLanguage; label: string }[] = [
+		{ value: "typescript", label: "TypeScript SDK" },
+		{ value: "curl", label: "cURL" },
+		{ value: "go", label: "Go local API" },
+	];
+
+	let operation = $state<ReferenceOperation>("list");
+	let language = $state<ReferenceLanguage>("typescript");
+	let response = $state("success");
+	// svelte-ignore non_reactive_update
+	let body: HTMLDivElement;
+	const copyFeedback = new CopyFeedback(2_000);
+
+	const schema = $derived(collectionReferenceSchema(collection, manifest, i18n));
+	const context = $derived({
+		collection,
+		manifest,
+		schema,
+		documentID,
+		origin: window.location.origin,
+	});
+	const request = $derived(referenceRequest(context, operation));
+	const code = $derived(referenceCode(context, operation, language));
+	const responses = $derived(referenceResponses(context, operation));
+	const parameters = $derived(referenceParameters(context, operation, i18n));
+	const mutation = $derived(operation === "create" || operation === "update");
+	const fields = $derived(schema.fields.filter((field) => !mutation || field.writable));
+	const currentCopy = $derived(
+		copyFeedback.result?.source === code ? copyFeedback.result : undefined
+	);
+	const selectedResponse = $derived(
+		response === "success"
+			? responses[0]
+			: (responses.find((item) => String(item.status) === response) ?? responses[0])
+	);
+
+	function selectOperation(next: ReferenceOperation) {
+		operation = next;
+		response = "success";
+		body?.scrollTo({ top: 0 });
+	}
+</script>
+
+<div class="ridu-api-reference">
+	<nav class="ridu-api-reference__operations" aria-label={i18n.t("apiReference:operations")}>
+		{#each referenceOperations as item (item)}
+			<button
+				type="button"
+				aria-current={operation === item ? "page" : undefined}
+				onclick={() => selectOperation(item)}
+			>
+				{i18n.t(`apiReference:${item}`)}
+			</button>
+		{/each}
+	</nav>
+
+	<div class="ridu-api-reference__body" bind:this={body}>
+		<section class="ridu-api-reference__section">
+			<h2>
+				{i18n.t(`apiReference:${operation}`)}
+				<span>({collection.slug})</span>
+			</h2>
+			<div class="ridu-api-reference__endpoint" dir="ltr">
+				<strong>{request.method}</strong>
+				<code>{request.url}</code>
+			</div>
+			<p>{i18n.t("apiReference:guidance")}</p>
+			{#if operation === "delete"}
+				<p>
+					{i18n.t(
+						collection.capabilities.trash ? "apiReference:trashNote" : "apiReference:deleteNote"
+					)}
+				</p>
+			{/if}
+			{#if operation === "update"}
+				<p>{i18n.t("apiReference:updateNote")}</p>
+			{/if}
+			{#if mutation && collection.capabilities.upload}
+				<p>
+					{i18n.t("apiReference:uploadNote")}
+				</p>
+			{/if}
+			{#if operation === "create" && collection.authSettings}
+				<p>
+					{i18n.t("apiReference:authNote", { value: collection.authSettings.passwordMinLength })}
+				</p>
+			{/if}
+		</section>
+
+		<section class="ridu-api-reference__section" aria-label={i18n.t("apiReference:examples")}>
+			<Tabs bind:value={language}>
+				<div class="ridu-api-reference__code-toolbar">
+					<TabsList variant="line" aria-label={i18n.t("apiReference:languages")}>
+						{#each languages as item}
+							<TabsTrigger value={item.value}>
+								{item.label}
+							</TabsTrigger>
+						{/each}
+					</TabsList>
+					<Button
+						variant="ghost"
+						size="icon-sm"
+						onclick={() => copyFeedback.copy(code)}
+						aria-label={i18n.t("apiReference:copy")}
+					>
+						{#if currentCopy?.copied}
+							<CheckIcon />
+						{:else}
+							<CopyIcon />
+						{/if}
+					</Button>
+				</div>
+				<TabsContent value={language}>
+					<APIReferenceCode {code} {language} />
+				</TabsContent>
+			</Tabs>
+			<span class="ridu-api-reference__copy-status" role="status">
+				{currentCopy
+					? i18n.t(currentCopy.copied ? "general:copied" : "general:copyUnavailable")
+					: ""}
+			</span>
+			{#if language !== "curl"}
+				<p>
+					{i18n.t(language === "go" ? "apiReference:goOptions" : "apiReference:credentials")}
+				</p>
+			{/if}
+			{#if mutation && schema.omitted.length}
+				<p class="ridu-api-reference__notice">
+					{i18n.t("apiReference:omitted", { fields: schema.omitted.join(", ") })}
+				</p>
+			{/if}
+		</section>
+
+		{#if parameters.length}
+			<section class="ridu-api-reference__section">
+				<h3>{i18n.t("apiReference:query")}</h3>
+				<dl class="ridu-api-reference__parameters">
+					{#each parameters as parameter (parameter.name)}
+						<div>
+							<dt><code>{parameter.name}</code></dt>
+							<dd>{parameter.description}</dd>
+						</div>
+					{/each}
+				</dl>
+			</section>
+		{/if}
+
+		{#if operation !== "delete"}
+			<section class="ridu-api-reference__section">
+				<h3>{i18n.t("apiReference:fields")}</h3>
+				<p>{i18n.t("apiReference:metadata")}</p>
+				{#if fields.length}
+					<!-- svelte-ignore a11y_no_noninteractive_tabindex (Wide schema tables must be keyboard-scrollable.) -->
+					<div
+						class="ridu-api-reference__table-scroll"
+						tabindex="0"
+						role="region"
+						aria-label={i18n.t("apiReference:fields")}
+					>
+						<table>
+							<thead>
+								<tr>
+									<th>{i18n.t("apiReference:field")}</th>
+									<th>{i18n.t("apiReference:type")}</th>
+									<th>{i18n.t("apiReference:details")}</th>
+								</tr>
+							</thead>
+							<tbody>
+								{#each fields as field (field.path)}
+									<tr>
+										<td><code>{field.path}</code></td>
+										<td><code>{mutation ? field.type : field.outputType}</code></td>
+										<td>
+											<div class="ridu-api-reference__badges">
+												{#if field.requiredOnCreate && field.writable}
+													<span>
+														{i18n.t("apiReference:required")}
+													</span>
+												{/if}
+												{#if !field.writable}
+													<span>{i18n.t("apiReference:readOnly")}</span>
+												{/if}
+												{#if field.localized}
+													<span>{i18n.t("apiReference:localized")}</span>
+												{/if}
+											</div>
+											{#if field.description}
+												<p>{field.description}</p>
+											{/if}
+											{#each field.constraints as constraint}
+												<p>{constraint}</p>
+											{/each}
+											{#if field.jsonSchema !== undefined}
+												<details>
+													<summary>{i18n.t("apiReference:jsonSchema")}</summary>
+													<pre dir="ltr">{JSON.stringify(field.jsonSchema, null, 2)}</pre>
+												</details>
+											{/if}
+										</td>
+									</tr>
+								{/each}
+							</tbody>
+						</table>
+					</div>
+				{:else}
+					<p>{i18n.t("apiReference:noFields")}</p>
+				{/if}
+			</section>
+		{/if}
+
+		<section class="ridu-api-reference__section">
+			<h3>{i18n.t("apiReference:responses")}</h3>
+			<p>{i18n.t("apiReference:responseNote")}</p>
+			<Tabs bind:value={response}>
+				<TabsList variant="line" aria-label={i18n.t("apiReference:responses")}>
+					{#each responses as item, index}
+						<TabsTrigger value={index === 0 ? "success" : String(item.status)}>
+							{item.status}
+						</TabsTrigger>
+					{/each}
+				</TabsList>
+				<TabsContent value={response}>
+					<JsonViewer value={selectedResponse?.value} />
+				</TabsContent>
+			</Tabs>
+		</section>
+	</div>
+</div>

package/src/features/api-reference/api-reference-drawer.scss

@@ -0,0 +1,74 @@
+@layer ridu.components {
+	.ridu-api-reference-overlay {
+		position: fixed;
+		inset: 0;
+		z-index: 50;
+		background: var(--media-overlay);
+	}
+
+	.ridu-api-reference-drawer {
+		position: fixed;
+		inset-block: 0;
+		inset-inline-end: 0;
+		z-index: 50;
+		display: flex;
+		flex-direction: column;
+		width: min(1100px, 100vw);
+		background: var(--background);
+		color: var(--foreground);
+		border-inline-start: 1px solid var(--border);
+		font-size: var(--font-size-body);
+		line-height: var(--line-height-body);
+		outline: none;
+		animation: ridu-api-reference-in 200ms ease-out;
+
+		&[dir="rtl"] {
+			--api-reference-slide: -40px;
+		}
+		&__header {
+			display: flex;
+			justify-content: space-between;
+			align-items: flex-start;
+			gap: 20px;
+			padding: 24px 30px;
+			border-bottom: 1px solid var(--border);
+			.ridu-api-reference-drawer__title {
+				margin: 0 0 8px;
+				font-size: 24px;
+				font-weight: 500;
+			}
+			code {
+				margin-inline-start: 8px;
+				font-size: 15px;
+				color: var(--muted-foreground);
+			}
+			.ridu-api-reference-drawer__description {
+				margin: 0;
+				color: var(--muted-foreground);
+			}
+			svg {
+				width: 20px;
+				height: 20px;
+			}
+		}
+		&__message {
+			padding: 30px;
+		}
+	}
+
+	@keyframes ridu-api-reference-in {
+		from {
+			opacity: 0;
+			transform: translateX(var(--api-reference-slide, 40px));
+		}
+		to {
+			opacity: 1;
+			transform: translateX(0);
+		}
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.ridu-api-reference-drawer {
+			animation: none;
+		}
+	}
+}