@riducms/admin 0.2.2 → 0.3.0

package/src/app.svelte

@@ -1,11 +1,9 @@
 <script lang="ts">
-	import { createBrowserRouter, RouterProvider } from "@hvniel/svelte-router";
 	import { setAdminI18n } from "@riducms/plugin";
 	import { TooltipProvider } from "@riducms/ui";
-	import { untrack } from "svelte";
 
-	import AdminRouterRoot from "@admin/app/admin-router-root.svelte";
 	import AdminProviderLayer from "@admin/app/admin-provider-layer.svelte";
+	import AdminRouterProvider from "@admin/app/admin-router-provider.svelte";
 	import LoadingBoundary from "@admin/app/loading-boundary.svelte";
 	import { Toaster } from "@admin/components/ui/sonner";
 	import {
@@ -13,19 +11,41 @@
 		setNotificationCenter,
 	} from "@admin/core/notifications/notification-center.svelte";
 	import { AdminRuntime, setAdminRuntime } from "@admin/core/runtime/admin-runtime.svelte";
+	import {
+		AdminBootstrapCoordinator,
+		setAdminBootstrapCoordinator,
+	} from "@admin/core/bootstrap/admin-bootstrap";
 	import type { AdminClient } from "@admin/core/api/admin-client";
 	import DevelopmentTools from "@admin/features/development/development-tools.svelte";
 
 	import type { AdminConfig } from "@riducms/plugin/admin";
+
 	interface Props {
 		adminConfig?: AdminConfig;
 		clientFactory: () => AdminClient;
 		adminBasePath?: string;
 	}
+
 	let { clientFactory, adminBasePath = "/admin", adminConfig = {} }: Props = $props();
-	// The runtime owns the client and plugin registry selected when this admin instance is mounted.
+	const coordinator = setAdminBootstrapCoordinator(new AdminBootstrapCoordinator());
+
+	// The runtime owns the client factory, config, and base path selected when this admin instance
+	// is mounted. Those inputs intentionally remain stable for the instance lifetime.
 	// svelte-ignore state_referenced_locally
-	const runtime = setAdminRuntime(new AdminRuntime(clientFactory(), adminConfig));
+	const runtime = setAdminRuntime(new AdminRuntime(clientFactory(), adminConfig, adminBasePath));
+	coordinator.configure(runtime);
+
+	let preparedRuntimeAdopted = false;
+	if (coordinator.initialState?.runtime !== undefined) {
+		try {
+			runtime.adoptPrepared(coordinator.initialState.runtime);
+			preparedRuntimeAdopted = true;
+		} catch {
+			// An invalid embedded snapshot must fall back to the ordinary client bootstrap.
+			preparedRuntimeAdopted = false;
+		}
+	}
+
 	setAdminI18n(runtime.i18n);
 	const notifications = setNotificationCenter(new NotificationCenter());
 	const development = import.meta.hot !== undefined;
@@ -33,45 +53,59 @@
 		development ? (runtime.i18n.direction === "rtl" ? "top-left" : "top-right") : undefined
 	);
 	let schemaRefreshQueued = $state(false);
-	// The router owns the base path selected when this admin instance is mounted.
-	// svelte-ignore state_referenced_locally
-	const router = createBrowserRouter([{ path: "*", Component: AdminRouterRoot }], {
-		basename: adminBasePath,
-	});
+	let startupReady = $state(false);
 
 	$effect(() => {
+		let active = true;
 		const hot = import.meta.hot;
-		if (hot === undefined) return;
 		const queueSchemaRefresh = () => {
 			schemaRefreshQueued = true;
 		};
-		hot.on("ridu:schema-update", queueSchemaRefresh);
-		return () => hot.off("ridu:schema-update", queueSchemaRefresh);
-	});
+		hot?.on("ridu:schema-update", queueSchemaRefresh);
 
-	$effect(() => {
-		void runtime.bootstrap();
+		async function start() {
+			if (!preparedRuntimeAdopted) await runtime.bootstrap();
+			await coordinator.prepareInitial({ stageRoute: preparedRuntimeAdopted });
+			if (!active) return;
+			startupReady = true;
+		}
+
+		start().catch(() => {
+			if (!active) return;
+			// Runtime and route controllers own their visible failures; the shell must still mount
+			// so their fallback state can render.
+			startupReady = true;
+		});
+
+		return () => {
+			active = false;
+			hot?.off("ridu:schema-update", queueSchemaRefresh);
+			runtime.dispose();
+			notifications.destroy();
+		};
 	});
 
 	$effect(() => {
 		if (!schemaRefreshQueued || runtime.loading || runtime.refreshingManifest) return;
 		const bootstrap = runtime.error !== undefined || runtime.manifest === undefined;
 		schemaRefreshQueued = false;
-		untrack(() => {
-			void (bootstrap ? runtime.bootstrap() : runtime.refreshManifest());
-		});
+		void (bootstrap ? runtime.bootstrap() : runtime.refreshManifest());
 	});
-
-	$effect(() => () => notifications.destroy());
 </script>
 
 <TooltipProvider delayDuration={350}>
-	<AdminProviderLayer providers={runtime.providers} i18n={runtime.i18n}>
-		<LoadingBoundary>
-			<RouterProvider {router} />
-		</LoadingBoundary>
+	<AdminProviderLayer providers={runtime.config.extensions.providers} i18n={runtime.i18n}>
+		{#if startupReady}
+			<LoadingBoundary>
+				<AdminRouterProvider {coordinator} {adminBasePath} />
+			</LoadingBoundary>
+			{#if development && !runtime.loading && runtime.error === undefined}
+				<DevelopmentTools />
+			{/if}
+		{:else}
+			<main class="ridu-surface-grid min-h-screen" aria-busy="true"></main>
+		{/if}
 	</AdminProviderLayer>
 
-	{#if development && !runtime.loading && runtime.error === undefined}<DevelopmentTools />{/if}
 	<Toaster theme={runtime.resolvedTheme} position={notificationPosition} />
 </TooltipProvider>

package/src/components/brand/ridu-logo.svelte

@@ -14,11 +14,25 @@
 </script>
 
 <span
-	class={[
-		"inline-block shrink-0 bg-current [mask:var(--ridu-logo)_center/contain_no-repeat] [-webkit-mask:var(--ridu-logo)_center/contain_no-repeat]",
-		variant === "arch" ? "aspect-[82/70]" : "aspect-[234/70]",
-		className,
-	]}
+	class={["ridu-logo", variant === "arch" ? "ridu-logo--arch" : "ridu-logo--word", className]}
 	style={`--ridu-logo: url("${source}")`}
 	aria-hidden="true"
 ></span>
+
+<style lang="scss">
+	@use "@riducms/ui/layers.css";
+	@layer ridu.components {
+		.ridu-logo {
+			display: inline-block;
+			flex-shrink: 0;
+			background: currentColor;
+			mask: var(--ridu-logo) center / contain no-repeat;
+		}
+		.ridu-logo--arch {
+			aspect-ratio: 82 / 70;
+		}
+		.ridu-logo--word {
+			aspect-ratio: 234 / 70;
+		}
+	}
+</style>

package/src/components/data/list-table.scss

@@ -0,0 +1,63 @@
+@layer ridu.components {
+	.ridu-list-table {
+		width: 100%;
+		border-collapse: separate;
+		border-spacing: 0;
+		font-size: 13px;
+		line-height: 20px;
+		text-align: start;
+
+		th,
+		td {
+			min-width: 150px;
+			padding: 12px;
+			text-align: start;
+			vertical-align: middle;
+			font-weight: 400;
+		}
+
+		th {
+			color: var(--foreground-muted);
+			height: 54px;
+		}
+
+		td {
+			color: var(--foreground);
+		}
+
+		th:first-child,
+		td:first-child {
+			padding-inline-start: 16px;
+		}
+
+		th:last-child,
+		td:last-child {
+			padding-inline-end: 16px;
+		}
+
+		.ridu-list-table__selection {
+			width: 48px;
+			min-width: 48px;
+		}
+
+		tbody tr:nth-child(odd) {
+			background: var(--background-surface);
+		}
+
+		tbody td:first-child {
+			border-start-start-radius: 3px;
+			border-end-start-radius: 3px;
+		}
+
+		tbody td:last-child {
+			border-start-end-radius: 3px;
+			border-end-end-radius: 3px;
+		}
+
+		td a {
+			color: inherit;
+			text-decoration: underline;
+			text-underline-offset: 2px;
+		}
+	}
+}

package/src/components/icons/LICENSE.md

@@ -0,0 +1,24 @@
+SVG paths adapted from Payload CMS packages/ui/src/icons.
+
+MIT License
+
+Copyright (c) 2018-2025 Payload CMS, Inc. <info@payloadcms.com>
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+'Software'), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/src/components/icons/chevron.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+	import type { SVGAttributes } from "svelte/elements";
+	let { ...props }: SVGAttributes<SVGSVGElement> = $props();
+</script>
+
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" aria-hidden="true" {...props}>
+	<path d="M14 8L10 12L6 8" stroke="currentColor" stroke-linecap="square" />
+</svg>

package/src/components/icons/plus.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import type { SVGAttributes } from "svelte/elements";
+	let { ...props }: SVGAttributes<SVGSVGElement> = $props();
+</script>
+
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" aria-hidden="true" {...props}>
+	<path
+		d="M5.33333 9.99998H14.6667M9.99999 5.33331V14.6667"
+		stroke="currentColor"
+		stroke-linecap="square"
+	/>
+</svg>

package/src/components/icons/search.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import type { SVGAttributes } from "svelte/elements";
+	let { ...props }: SVGAttributes<SVGSVGElement> = $props();
+</script>
+
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" aria-hidden="true" {...props}>
+	<path
+		d="M16 16L13.1333 13.1333M14.6667 9.33333C14.6667 12.2789 12.2789 14.6667 9.33333 14.6667C6.38781 14.6667 4 12.2789 4 9.33333C4 6.38781 6.38781 4 9.33333 4C12.2789 4 14.6667 6.38781 14.6667 9.33333Z"
+		stroke="currentColor"
+		stroke-linecap="square"
+	/>
+</svg>

package/src/components/icons/x.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+	import type { SVGAttributes } from "svelte/elements";
+	let { ...props }: SVGAttributes<SVGSVGElement> = $props();
+</script>
+
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" aria-hidden="true" {...props}>
+	<path d="M14 6L6 14M6 6L14 14" stroke="currentColor" stroke-linecap="square" />
+</svg>

package/src/components/json-tree/json-tree-node.svelte

@@ -1,77 +1,71 @@
 <script lang="ts">
-	import ChevronRightIcon from "~icons/lucide/chevron-right";
-
+	import { isRecord } from "@riducms/protocol";
+	import ChevronIcon from "@admin/components/icons/chevron.svelte";
 	import JsonTreeNode from "@admin/components/json-tree/json-tree-node.svelte";
 
-	let { name, value, last = true }: { name?: string; value: unknown; last?: boolean } = $props();
+	let {
+		name,
+		value,
+		last = true,
+		root = false,
+		disclosureLabel,
+	}: {
+		name?: string;
+		value: unknown;
+		last?: boolean;
+		root?: boolean;
+		disclosureLabel?: string;
+	} = $props();
+
+	let open = $state(true);
+	const array = $derived(Array.isArray(value));
 	const entries = $derived(
-		Array.isArray(value)
-			? value.map((item, index) => [String(index), item] as const)
-			: isRecord(value)
-				? Object.entries(value)
-				: []
+		array ? Object.entries(value as unknown[]) : isRecord(value) ? Object.entries(value) : []
 	);
-	const container = $derived(Array.isArray(value) || isRecord(value));
-	const opening = $derived(Array.isArray(value) ? "[" : "{");
-	const closing = $derived(Array.isArray(value) ? "]" : "}");
-	const countLabel = $derived(
-		Array.isArray(value)
-			? entries.length === 1
-				? "item"
-				: "items"
-			: entries.length === 1
-				? "key"
-				: "keys"
-	);
-
-	function isRecord(candidate: unknown): candidate is Record<string, unknown> {
-		return typeof candidate === "object" && candidate !== null && !Array.isArray(candidate);
-	}
-
-	function primitive(candidate: unknown) {
-		if (typeof candidate === "string") return JSON.stringify(candidate);
-		if (candidate === undefined) return "undefined";
-		return String(candidate);
-	}
-
-	function tone(candidate: unknown) {
-		if (typeof candidate === "string") return "text-[#b7c89a]";
-		if (typeof candidate === "number") return "text-[#c9b38b]";
-		if (typeof candidate === "boolean") return "text-[#9fb9d8]";
-		return "text-foreground-faint";
-	}
+	const container = $derived(array || isRecord(value));
+	const opening = $derived(array ? "[" : "{");
+	const closing = $derived(array ? "]" : "}");
+	const property = $derived(name === undefined ? "" : `${JSON.stringify(name)}: `);
 </script>
 
-{#if container}
-	<details class="group/json" open>
-		<summary
-			class="flex cursor-pointer list-none items-center gap-1 rounded px-0.5 hover:bg-control-hover focus-visible:outline-1 focus-visible:outline-primary/60"
-			aria-label={name === undefined
-				? `${entries.length} ${countLabel}`
-				: `${name}, ${entries.length} ${countLabel}`}
+<li class={["ridu-json-node", root && "ridu-json-node--root"]}>
+	{#if container && entries.length > 0}
+		<button
+			type="button"
+			class="ridu-json-node__toggle"
+			aria-label={disclosureLabel ?? name ?? (root ? "JSON" : opening + closing)}
+			aria-expanded={open}
+			onclick={() => (open = !open)}
 		>
-			<ChevronRightIcon
-				class="size-3 shrink-0 text-foreground-faint transition-transform group-open/json:rotate-90"
-			/>
-			{#if name !== undefined}<span class="text-[#9db5cd]">{JSON.stringify(name)}</span>
-				<span class="text-foreground-faint">:</span>{/if}
-			<span class="text-foreground-muted">{opening}</span>
-			<span class="text-[10px] text-foreground-faint">
-				{entries.length}
-				{countLabel}
+			<ChevronIcon class="ridu-json-node__chevron" />
+			<span>{property}{opening}</span>
+		</button>
+
+		{#if open}
+			<ul class="ridu-json-node__children">
+				{#each entries as [key, child], index (key)}
+					<JsonTreeNode
+						name={array ? undefined : key}
+						disclosureLabel={array ? `[${key}]` : undefined}
+						value={child}
+						last={index === entries.length - 1}
+					/>
+				{/each}
+			</ul>
+		{/if}
+		<div class="ridu-json-node__closing">{closing}{last ? "" : ","}</div>
+	{:else}
+		<div class="ridu-json-node__line">
+			<span>{property}</span>
+			<span
+				class={{
+					"ridu-json-node__string": typeof value === "string",
+					"ridu-json-node__number": typeof value === "number",
+				}}
+			>
+				{container ? `${opening}${closing}` : (JSON.stringify(value) ?? "undefined")}
 			</span>
-			<span class="text-foreground-muted">{closing}{last ? "" : ","}</span>
-		</summary>
-		<div class="ms-3.5 border-s border-control-border ps-3">
-			{#each entries as [key, child], index (key)}
-				<JsonTreeNode name={key} value={child} last={index === entries.length - 1} />
-			{/each}
+			{last ? "" : ","}
 		</div>
-	</details>
-{:else}
-	<div class="flex gap-1 rounded px-0.5 hover:bg-control-hover">
-		{#if name !== undefined}<span class="text-[#9db5cd]">{JSON.stringify(name)}</span>
-			<span class="text-foreground-faint">:</span>{/if}
-		<span class={tone(value)}>{primitive(value)}{last ? "" : ","}</span>
-	</div>
-{/if}
+	{/if}
+</li>

package/src/components/json-tree/json-viewer.scss

@@ -0,0 +1,153 @@
+@layer ridu.components {
+	.ridu-json-viewer {
+		min-width: 0;
+		background: var(--background-surface);
+	}
+
+	.ridu-json-viewer__toolbar {
+		position: sticky;
+		top: 0;
+		z-index: 1;
+	}
+
+	.ridu-json-viewer__actions {
+		position: absolute;
+		top: 10px;
+		right: 10px;
+		display: flex;
+		gap: 4px;
+
+		button {
+			display: grid;
+			place-items: center;
+			width: 30px;
+			height: 30px;
+			padding: 5px;
+			border: 0;
+			border-radius: 3px;
+			background: var(--background);
+			color: var(--control-border-hover);
+			cursor: pointer;
+
+			&:hover {
+				color: var(--foreground-muted);
+			}
+			&:focus-visible {
+				outline: var(--focus-outline);
+				outline-offset: var(--focus-outline-offset);
+			}
+		}
+		svg {
+			width: 20px;
+			height: 20px;
+		}
+	}
+
+	.ridu-json-viewer__copy {
+		opacity: 0;
+		.ridu-json-viewer:hover &,
+		&:focus-visible {
+			opacity: 1;
+		}
+	}
+
+	.ridu-json-viewer__data {
+		padding: 10px 0 10px 10px;
+		overflow: auto;
+		font: var(--font-size-body) / var(--line-height-body) var(--font-mono);
+		color: var(--foreground);
+		ul {
+			list-style: none;
+			margin: 0;
+		}
+	}
+
+	.ridu-json-viewer__tree {
+		padding: 0;
+	}
+
+	.ridu-json-node {
+		padding-left: 8px;
+		white-space: nowrap;
+	}
+
+	.ridu-json-node__toggle {
+		display: flex;
+		align-items: center;
+		gap: 14px;
+		width: calc(100% + 3px);
+		margin-left: -34px;
+		padding: 0;
+		border: 0;
+		border-radius: 3px 0 0 3px;
+		background: var(--background-surface);
+		color: inherit;
+		font: inherit;
+		text-align: left;
+		cursor: pointer;
+
+		&:hover {
+			background: var(--background-layer);
+		}
+		&:focus-visible {
+			outline: var(--focus-outline);
+			outline-offset: -2px;
+		}
+		&[aria-expanded="false"] > svg {
+			transform: rotate(-90deg);
+		}
+	}
+
+	.ridu-json-node__chevron {
+		flex-shrink: 0;
+		color: var(--control-disabled-foreground);
+	}
+
+	.ridu-json-node__children {
+		position: relative;
+		padding-left: 24px;
+
+		&:before {
+			content: "";
+			position: absolute;
+			inset-block: 0;
+			border-left: 1px dashed var(--control-border);
+		}
+	}
+
+	.ridu-json-node__line {
+		display: flex;
+		> span:first-child {
+			white-space: pre;
+		}
+	}
+
+	.ridu-json-node__closing {
+		padding-left: 2px;
+	}
+	.ridu-json-node__string {
+		color: var(--json-string);
+	}
+	.ridu-json-node__number {
+		color: var(--json-number);
+	}
+
+	.ridu-json-node--root {
+		position: relative;
+		left: -3px;
+		padding-left: 0;
+		> .ridu-json-node__toggle {
+			margin-left: 0;
+			gap: 6px;
+		}
+		> .ridu-json-node__toggle > svg {
+			margin-left: -4px;
+		}
+		> .ridu-json-node__children {
+			padding-left: 20px;
+		}
+		> .ridu-json-node__closing {
+			padding-left: 18px;
+		}
+	}
+}