@riducms/admin 0.1.0

package/src/app.css

@@ -0,0 +1,467 @@
+:root {
+	color-scheme: dark;
+	--radius: 0.25rem;
+	--background: oklch(0.145 0 0);
+	--background-surface: oklch(0.18 0 0);
+	--background-layer: oklch(0.205 0 0);
+	--foreground: oklch(0.985 0 0);
+	--foreground-muted: oklch(0.708 0 0);
+	--foreground-sub: oklch(0.625 0 0);
+	--foreground-soft: oklch(0.556 0 0);
+	--card: oklch(0.205 0 0);
+	--card-foreground: oklch(0.985 0 0);
+	--popover: oklch(0.205 0 0);
+	--popover-foreground: oklch(0.985 0 0);
+	--primary: oklch(0.922 0 0);
+	--primary-foreground: oklch(0.205 0 0);
+	--secondary: oklch(0.269 0 0);
+	--secondary-foreground: oklch(0.985 0 0);
+	--muted: oklch(0.269 0 0);
+	--muted-foreground: oklch(0.708 0 0);
+	--accent: oklch(0.269 0 0);
+	--accent-foreground: oklch(0.985 0 0);
+	--destructive: oklch(0.704 0.191 22.216);
+	--destructive-foreground: oklch(0.985 0 0);
+	--destructive-hover: oklch(0.76 0.17 22.216);
+	--border: oklch(1 0 0 / 10%);
+	--input: oklch(1 0 0 / 15%);
+	--ring: oklch(0.708 0 0);
+	--control-surface: oklch(0.205 0 0);
+	--control-surface-hover: oklch(0.235 0 0);
+	--control-surface-disabled: oklch(0.18 0 0);
+	--control-border: oklch(1 0 0 / 15%);
+	--control-border-hover: oklch(1 0 0 / 24%);
+	--control-border-disabled: oklch(1 0 0 / 8%);
+	--stroke-soft: oklch(1 0 0 / 8%);
+	--brand-primary: oklch(0.922 0 0);
+	--brand-primary-foreground: oklch(0.205 0 0);
+	--brand-primary-soft: oklch(0.708 0 0);
+	--tabs-segment-surface: oklch(0.205 0 0);
+	--tabs-segment-active: oklch(0.269 0 0);
+	--tabs-segment-text-active: oklch(0.985 0 0);
+	--tabs-segment-text-inactive: oklch(0.708 0 0);
+	--sidebar: oklch(0.18 0 0);
+	--sidebar-foreground: oklch(0.708 0 0);
+	--sidebar-primary: oklch(0.922 0 0);
+	--sidebar-primary-foreground: oklch(0.205 0 0);
+	--sidebar-accent: oklch(0.269 0 0);
+	--sidebar-accent-foreground: oklch(0.985 0 0);
+	--sidebar-border: oklch(1 0 0 / 10%);
+	--sidebar-ring: oklch(0.708 0 0);
+	--warning: oklch(0.79 0.14 82);
+	--success: oklch(0.72 0.14 145);
+	--accent-hover: oklch(0.82 0 0);
+	--accent-soft: oklch(0.708 0 0);
+	--ink-strong: oklch(0.985 0 0);
+	--ink-body: oklch(0.922 0 0);
+	--ink-secondary: oklch(0.78 0 0);
+	--ink-muted: oklch(0.708 0 0);
+	--ink-faint: oklch(0.556 0 0);
+	--ink-placeholder: oklch(0.625 0 0);
+	--ink-label: oklch(0.82 0 0);
+	--ink-tag: oklch(0.625 0 0);
+	--surface-raised: oklch(0.18 0 0);
+	--surface-overlay: oklch(0.205 0 0);
+	--toast-surface: var(--background-layer);
+	--backdrop: oklch(0 0 0 / 68%);
+	--media-overlay: oklch(0 0 0 / 40%);
+	--media-foreground: oklch(1 0 0);
+	--preview-canvas: oklch(1 0 0);
+	--shadow-popover: 0 16px 48px oklch(0 0 0 / 50%);
+	--shadow-dialog: 0 24px 80px oklch(0 0 0 / 60%);
+	--syntax-property: oklch(0.72 0.1 30);
+	--syntax-number: oklch(0.76 0.07 85);
+	--syntax-string: oklch(0.76 0.09 135);
+	--syntax-operator: oklch(0.75 0.06 220);
+	--syntax-keyword: oklch(0.72 0.09 315);
+	--syntax-function: oklch(0.72 0.1 235);
+	--syntax-variable: oklch(0.72 0.11 70);
+	--font-sans: "Geist Variable", "Geist", ui-sans-serif, system-ui, sans-serif;
+	--font-serif: var(--font-sans);
+	--font-mono: "Spline Sans Mono Variable", "Spline Sans Mono", ui-monospace, monospace;
+}
+
+:root[data-theme="light"] {
+	color-scheme: light;
+	--background: oklch(1 0 0);
+	--background-surface: oklch(0.985 0 0);
+	--background-layer: oklch(0.97 0 0);
+	--foreground: oklch(0.145 0 0);
+	--foreground-muted: oklch(0.556 0 0);
+	--foreground-sub: oklch(0.485 0 0);
+	--foreground-soft: oklch(0.625 0 0);
+	--card: oklch(1 0 0);
+	--card-foreground: oklch(0.145 0 0);
+	--popover: oklch(1 0 0);
+	--popover-foreground: oklch(0.145 0 0);
+	--primary: oklch(0.205 0 0);
+	--primary-foreground: oklch(0.985 0 0);
+	--secondary: oklch(0.97 0 0);
+	--secondary-foreground: oklch(0.205 0 0);
+	--muted: oklch(0.97 0 0);
+	--muted-foreground: oklch(0.556 0 0);
+	--accent: oklch(0.97 0 0);
+	--accent-foreground: oklch(0.205 0 0);
+	--destructive: oklch(0.577 0.245 27.325);
+	--destructive-foreground: oklch(0.985 0 0);
+	--destructive-hover: oklch(0.52 0.23 27.325);
+	--border: oklch(0.922 0 0);
+	--input: oklch(0.922 0 0);
+	--ring: oklch(0.556 0 0);
+	--control-surface: oklch(0.985 0 0);
+	--control-surface-hover: oklch(0.97 0 0);
+	--control-surface-disabled: oklch(0.97 0 0);
+	--control-border: oklch(0.86 0 0);
+	--control-border-hover: oklch(0.72 0 0);
+	--control-border-disabled: oklch(0.922 0 0);
+	--stroke-soft: oklch(0.922 0 0);
+	--brand-primary: oklch(0.205 0 0);
+	--brand-primary-foreground: oklch(0.985 0 0);
+	--brand-primary-soft: oklch(0.556 0 0);
+	--tabs-segment-surface: oklch(0.97 0 0);
+	--tabs-segment-active: oklch(0.922 0 0);
+	--tabs-segment-text-active: oklch(0.145 0 0);
+	--tabs-segment-text-inactive: oklch(0.556 0 0);
+	--sidebar: oklch(0.985 0 0);
+	--sidebar-foreground: oklch(0.556 0 0);
+	--sidebar-primary: oklch(0.205 0 0);
+	--sidebar-primary-foreground: oklch(0.985 0 0);
+	--sidebar-accent: oklch(0.97 0 0);
+	--sidebar-accent-foreground: oklch(0.205 0 0);
+	--sidebar-border: oklch(0.922 0 0);
+	--sidebar-ring: oklch(0.556 0 0);
+	--warning: oklch(0.58 0.14 78);
+	--success: oklch(0.52 0.14 145);
+	--accent-hover: oklch(0.269 0 0);
+	--accent-soft: oklch(0.556 0 0);
+	--ink-strong: oklch(0.145 0 0);
+	--ink-body: oklch(0.205 0 0);
+	--ink-secondary: oklch(0.371 0 0);
+	--ink-muted: oklch(0.556 0 0);
+	--ink-faint: oklch(0.625 0 0);
+	--ink-placeholder: oklch(0.556 0 0);
+	--ink-label: oklch(0.371 0 0);
+	--ink-tag: oklch(0.556 0 0);
+	--surface-raised: oklch(0.985 0 0);
+	--surface-overlay: oklch(1 0 0);
+	--toast-surface: var(--background-layer);
+	--backdrop: oklch(0 0 0 / 46%);
+	--media-overlay: oklch(0 0 0 / 40%);
+	--media-foreground: oklch(1 0 0);
+	--preview-canvas: oklch(1 0 0);
+	--shadow-popover: 0 16px 48px oklch(0 0 0 / 18%);
+	--shadow-dialog: 0 24px 80px oklch(0 0 0 / 24%);
+	--syntax-property: oklch(0.5 0.13 30);
+	--syntax-number: oklch(0.5 0.1 80);
+	--syntax-string: oklch(0.5 0.12 140);
+	--syntax-operator: oklch(0.5 0.09 220);
+	--syntax-keyword: oklch(0.5 0.12 315);
+	--syntax-function: oklch(0.5 0.13 235);
+	--syntax-variable: oklch(0.52 0.14 70);
+}
+
+* {
+	--at-apply: border-border;
+	box-sizing: border-box;
+}
+
+html {
+	font-family: var(--font-sans);
+	font-synthesis: none;
+	text-rendering: optimizeLegibility;
+	scroll-behavior: smooth;
+}
+
+body {
+	margin: 0;
+	min-width: 20rem;
+	background: var(--background);
+	color: var(--foreground);
+	font-size: 0.90625rem;
+	line-height: 1.5;
+	-webkit-font-smoothing: antialiased;
+}
+
+button,
+input,
+select,
+textarea {
+	font: inherit;
+}
+
+button,
+a,
+input,
+select,
+textarea {
+	-webkit-tap-highlight-color: transparent;
+}
+
+a {
+	color: inherit;
+	text-decoration: none;
+}
+
+::selection {
+	background: color-mix(in oklab, var(--foreground) 18%, transparent);
+}
+
+::placeholder {
+	color: var(--ink-placeholder);
+	opacity: 1;
+}
+
+::-webkit-scrollbar {
+	width: 10px;
+	height: 12px;
+}
+
+::-webkit-scrollbar-thumb {
+	border: 3px solid var(--background);
+	border-radius: 5px;
+	background: color-mix(in oklab, var(--foreground) 12%, transparent);
+	background-clip: padding-box;
+}
+
+::-webkit-scrollbar-track {
+	background: transparent;
+}
+
+:focus-visible {
+	outline: 2px solid color-mix(in oklab, var(--ring) 72%, transparent);
+	outline-offset: 2px;
+}
+
+[data-slot="input"]:focus-visible,
+[data-slot="textarea"]:focus-visible,
+[data-slot="command-input"]:focus-visible,
+select:focus-visible {
+	border-color: color-mix(in oklab, var(--ring) 78%, transparent);
+	box-shadow: none;
+	outline: none;
+}
+
+.font-serif {
+	font-family: var(--font-serif);
+}
+
+.font-mono {
+	font-family: var(--font-mono);
+}
+
+.ridu-popover-enter[data-state="open"],
+.ridu-popover-enter:not([data-state]) {
+	animation: ridu-pop-in 0.16s ease both;
+}
+
+.ridu-dialog-enter[data-state="open"] {
+	animation: ridu-dialog-in 0.16s ease both;
+}
+
+.ridu-dialog-enter.ridu-command-dialog[data-state="open"] {
+	animation-name: ridu-command-dialog-in;
+}
+
+.ridu-surface-grid {
+	background-image:
+		linear-gradient(color-mix(in oklab, var(--foreground) 2%, transparent) 1px, transparent 1px),
+		linear-gradient(
+			90deg,
+			color-mix(in oklab, var(--foreground) 2%, transparent) 1px,
+			transparent 1px
+		);
+	background-size: 32px 32px;
+	background-position: -1px -1px;
+}
+
+.ridu-field-label {
+	color: var(--ink-label);
+	font-size: 0.8125rem;
+	font-weight: 550;
+}
+
+.ridu-field-required {
+	margin-inline-start: 0.2rem;
+	color: var(--destructive);
+	font-weight: 650;
+}
+
+.ridu-field-status {
+	border: 1px solid var(--border);
+	border-radius: 999px;
+	padding: 0.08rem 0.42rem;
+	font-family: var(--font-mono);
+	font-size: 0.625rem;
+	font-weight: 400;
+	color: var(--ink-muted);
+}
+
+.ridu-field-help {
+	color: var(--ink-muted);
+	font-size: 0.8125rem;
+	line-height: 1.5;
+}
+
+.ridu-field-error {
+	color: var(--destructive);
+	font-size: 0.8125rem;
+	line-height: 1.5;
+}
+
+/*
+ * Tone lives in the text and the wash, matching `banner`: no rails, chips, or icons.
+ * `--normal-*` are sonner's own theming variables; its dark-theme rules paint the
+ * close button from them at a specificity we cannot outrank, so we set them here
+ * per tone rather than fighting the selector.
+ */
+.ridu-toast {
+	--toast-title: var(--foreground);
+	--toast-body: var(--foreground-muted);
+	--toast-wash: var(--toast-surface);
+	--toast-edge: var(--border);
+	/*
+	 * Sonner's dark theme paints the close button from these; keep them tone-neutral
+	 * so the chip reads as a consistent dismiss affordance, not a decorative extension
+	 * of the tinted wash. Inverted fill gives it its own identity on any tone.
+	 */
+	--normal-bg: var(--foreground);
+	--normal-bg-hover: var(--ink-strong);
+	--normal-border: transparent;
+	--normal-border-hover: transparent;
+	--normal-text: var(--background);
+	position: relative;
+	border: 1px solid var(--toast-edge);
+	background: var(--toast-wash);
+	color: var(--toast-body);
+}
+
+/* Only the loading spinner keeps an icon; tone is carried by text and wash. */
+[data-sonner-toaster] .ridu-toast[data-sonner-toast]:not([data-type="loading"]) [data-icon] {
+	display: none;
+}
+
+[data-sonner-toaster] .ridu-toast[data-sonner-toast] [data-title] {
+	color: var(--toast-title);
+}
+
+[data-sonner-toaster] .ridu-toast[data-sonner-toast] [data-description] {
+	color: var(--toast-body);
+}
+
+/*
+ * The toaster mirrors with interface direction, so the dismiss control uses
+ * the matching logical corner. Colors come from the `--normal-*` variables
+ * above; only geometry is set here, since sonner skips its own geometry rules
+ * while `unstyled`.
+ */
+[data-sonner-toaster] .ridu-toast[data-sonner-toast] [data-close-button] {
+	position: absolute;
+	top: -0.4375rem;
+	inset-inline-start: -0.4375rem;
+	display: grid;
+	place-items: center;
+	width: 1.375rem;
+	height: 1.375rem;
+	padding: 0;
+	border-width: 1px;
+	border-style: solid;
+	border-radius: 999px;
+	cursor: pointer;
+	transition:
+		background-color 0.12s ease,
+		border-color 0.12s ease;
+}
+
+/* In a collapsed stack only the front toast is actionable, so only it shows one. */
+[data-sonner-toaster]
+	.ridu-toast[data-sonner-toast][data-front="false"]:not([data-expanded="true"])
+	[data-close-button] {
+	display: none;
+}
+
+.ridu-toast[data-type="success"] {
+	--toast-title: color-mix(in oklab, var(--success) 58%, var(--foreground));
+	--toast-body: color-mix(in oklab, var(--success) 34%, var(--foreground-muted));
+	--toast-edge: color-mix(in oklab, var(--success) 26%, transparent);
+	--toast-wash: color-mix(in oklab, var(--success) 8%, var(--toast-surface));
+}
+
+.ridu-toast[data-type="warning"] {
+	--toast-title: color-mix(in oklab, var(--warning) 58%, var(--foreground));
+	--toast-body: color-mix(in oklab, var(--warning) 34%, var(--foreground-muted));
+	--toast-edge: color-mix(in oklab, var(--warning) 26%, transparent);
+	--toast-wash: color-mix(in oklab, var(--warning) 9%, var(--toast-surface));
+}
+
+.ridu-toast[data-type="info"] {
+	--toast-edge: color-mix(in oklab, var(--ink-secondary) 16%, transparent);
+	--toast-wash: color-mix(in oklab, var(--ink-secondary) 4%, var(--toast-surface));
+}
+
+.ridu-toast[data-type="error"] {
+	--toast-title: color-mix(in oklab, var(--destructive) 62%, var(--foreground));
+	--toast-body: color-mix(in oklab, var(--destructive) 38%, var(--foreground-muted));
+	--toast-edge: color-mix(in oklab, var(--destructive) 30%, transparent);
+	--toast-wash: color-mix(in oklab, var(--destructive) 9%, var(--toast-surface));
+}
+
+@keyframes ridu-fade-up {
+	from {
+		opacity: 0;
+		transform: translateY(7px);
+	}
+	to {
+		opacity: 1;
+		transform: none;
+	}
+}
+
+@keyframes ridu-pop-in {
+	from {
+		opacity: 0;
+		scale: 0.985;
+		translate: 0 -6px;
+	}
+	to {
+		opacity: 1;
+		scale: 1;
+		translate: 0 0;
+	}
+}
+
+@keyframes ridu-dialog-in {
+	from {
+		opacity: 0;
+		scale: 0.985;
+	}
+	to {
+		opacity: 1;
+		scale: 1;
+	}
+}
+
+@keyframes ridu-command-dialog-in {
+	from {
+		opacity: 0;
+		scale: 0.985;
+	}
+	to {
+		opacity: 1;
+		scale: 1;
+	}
+}
+
+@media (prefers-reduced-motion: reduce) {
+	html {
+		scroll-behavior: auto;
+	}
+
+	*,
+	*::before,
+	*::after {
+		animation-duration: 0.01ms !important;
+		animation-iteration-count: 1 !important;
+		transition-duration: 0.01ms !important;
+		scroll-behavior: auto !important;
+	}
+}

package/src/app.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+	import { createBrowserRouter, RouterProvider } from "@hvniel/svelte-router";
+	import { setAdminI18n, type AdminPlugin, type FieldPlugin } from "@riducms/plugin";
+	import type { TranslationLanguage } from "@riducms/translations";
+	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 LoadingBoundary from "@admin/app/loading-boundary.svelte";
+	import { Toaster } from "@admin/components/ui/sonner";
+	import {
+		NotificationCenter,
+		setNotificationCenter,
+	} from "@admin/core/notifications/notification-center.svelte";
+	import { AdminRuntime, setAdminRuntime } from "@admin/core/runtime/admin-runtime.svelte";
+	import type { AdminClient } from "@admin/core/api/admin-client";
+	import DevelopmentTools from "@admin/features/development/development-tools.svelte";
+
+	interface Props {
+		clientFactory: () => AdminClient;
+		adminBasePath?: string;
+		plugins?: readonly AdminPlugin[];
+		fieldPlugins?: readonly FieldPlugin[];
+		languages?: readonly TranslationLanguage[];
+	}
+
+	let {
+		clientFactory,
+		adminBasePath = "/admin",
+		plugins = [],
+		fieldPlugins = [],
+		languages,
+	}: Props = $props();
+	// The runtime owns the client and plugin registry selected when this admin instance is mounted.
+	// svelte-ignore state_referenced_locally
+	const runtime = setAdminRuntime(
+		new AdminRuntime(clientFactory(), plugins, fieldPlugins, languages)
+	);
+	setAdminI18n(runtime.i18n);
+	const notifications = setNotificationCenter(new NotificationCenter());
+	const development = import.meta.hot !== undefined;
+	const notificationPosition = $derived(
+		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,
+	});
+
+	$effect(() => {
+		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);
+	});
+
+	$effect(() => {
+		void runtime.bootstrap();
+	});
+
+	$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());
+		});
+	});
+
+	$effect(() => () => notifications.destroy());
+</script>
+
+<TooltipProvider delayDuration={350}>
+	<AdminProviderLayer providers={runtime.providers} i18n={runtime.i18n}>
+		<LoadingBoundary>
+			<RouterProvider {router} />
+		</LoadingBoundary>
+	</AdminProviderLayer>
+
+	{#if development && !runtime.loading && runtime.error === undefined}<DevelopmentTools />{/if}
+	<Toaster theme={runtime.resolvedTheme} position={notificationPosition} />
+</TooltipProvider>

package/src/assets/ridu-logo-arch.svg

@@ -0,0 +1,3 @@
+<svg width="82" height="70" viewBox="0 0 82 70" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M81.3232 70H0V64.8525H81.3232V70ZM77.2061 60.7354H4.11719V55.5879H77.2061V60.7354ZM40.6621 0C57.7177 0.000248423 71.5439 13.8271 71.5439 30.8828V51.4707H66.3965V30.8828C66.3965 16.6698 54.8751 5.14771 40.6621 5.14746C26.449 5.14752 14.9268 16.6696 14.9268 30.8828V51.4707H9.7793V30.8828C9.7793 13.827 23.6063 6.18546e-05 40.6621 0ZM40.6611 10.2939C52.0315 10.2939 61.2497 19.5115 61.25 30.8818V51.4707H56.1025V30.8818C56.1022 22.3542 49.1889 15.4414 40.6611 15.4414C32.1337 15.4417 25.221 22.3544 25.2207 30.8818V51.4707H20.0732V30.8818C20.0735 19.5117 29.291 10.2943 40.6611 10.2939Z" fill="white"/>
+</svg>

package/src/assets/ridu-word-logo.svg

@@ -0,0 +1,7 @@
+<svg width="241" height="70" viewBox="0 0 241 70" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M81.3232 70H0V64.8525H81.3232V70ZM77.2061 60.7354H4.11719V55.5879H77.2061V60.7354ZM40.6621 0C57.7177 0.000248423 71.5439 13.8271 71.5439 30.8828V51.4707H66.3965V30.8828C66.3965 16.6698 54.8751 5.14771 40.6621 5.14746C26.449 5.14752 14.9268 16.6696 14.9268 30.8828V51.4707H9.7793V30.8828C9.7793 13.827 23.6063 6.18546e-05 40.6621 0ZM40.6611 10.2939C52.0315 10.2939 61.2497 19.5115 61.25 30.8818V51.4707H56.1025V30.8818C56.1022 22.3542 49.1889 15.4414 40.6611 15.4414C32.1337 15.4417 25.221 22.3544 25.2207 30.8818V51.4707H20.0732V30.8818C20.0735 19.5117 29.291 10.2943 40.6611 10.2939Z" fill="white"/>
+<path d="M121.099 12.9624C126.245 12.9625 130.36 14.3761 133.417 17.228C136.526 20.0825 138.073 23.9291 138.073 28.7378C138.073 31.9674 137.443 34.5707 136.157 36.5249L136.156 36.5239C134.935 38.4558 133.381 39.9364 131.492 40.9575L131.487 40.9595C129.734 41.8596 127.979 42.5355 126.222 42.9917L139.083 62.7261L139.335 63.1128H132.061L131.986 62.9956L120.06 44.062H103.198V63.1128H97.0732V12.9624H121.099ZM103.198 38.2378H120.123C121.897 38.2378 123.699 37.966 125.527 37.4224C127.334 36.8852 128.843 35.9351 130.062 34.5708H130.062C131.31 33.1794 131.948 31.2455 131.948 28.7378C131.948 25.6515 130.898 23.2507 128.812 21.5044L128.811 21.5015C126.716 19.6996 123.929 18.7876 120.423 18.7876H103.198V38.2378Z" fill="white" stroke="white" stroke-width="0.5"/>
+<path d="M151.498 24.3628V63.1128H145.748V24.3628H151.498ZM148.623 9.9624C149.735 9.9624 150.673 10.361 151.419 11.1548L151.565 11.2974C152.27 12.0217 152.623 12.9149 152.623 13.9624C152.623 15.0304 152.22 15.9648 151.43 16.7573L151.431 16.7583C150.682 17.5601 149.741 17.9624 148.623 17.9624C147.553 17.9624 146.615 17.5579 145.822 16.7642C145.028 15.9704 144.623 15.033 144.623 13.9624C144.623 12.8451 145.026 11.9033 145.827 11.1548C146.62 10.3649 147.555 9.9624 148.623 9.9624Z" fill="white" stroke="white" stroke-width="0.5"/>
+<path d="M198.399 6.88745V42.8376C198.399 47.122 197.516 50.7927 195.74 53.8386C193.967 56.8769 191.583 59.1839 188.59 60.7566L188.591 60.7576C185.652 62.3285 182.386 63.1121 178.798 63.1121C176.119 63.112 173.565 62.6576 171.136 61.7468L171.129 61.7439C168.75 60.7819 166.648 59.414 164.824 57.6414L164.822 57.6394C163.046 55.8634 161.652 53.7091 160.641 51.1804V51.1785C159.628 48.595 159.123 45.6886 159.123 42.4626C159.123 38.3279 159.98 34.7816 161.707 31.8357C163.428 28.8504 165.709 26.5436 168.549 24.9207L168.551 24.9197C171.44 23.2975 174.633 22.4871 178.123 22.4871C180.254 22.4871 182.285 22.8678 184.215 23.6296C186.142 24.3905 187.868 25.4567 189.391 26.8269H189.39C190.731 27.9896 191.818 29.3111 192.649 30.7917V6.88745H198.399ZM178.723 27.5623C176.267 27.5623 173.986 28.1764 171.874 29.4041L171.873 29.4031C169.816 30.6282 168.148 32.3945 166.867 34.7087L166.865 34.7107C165.591 36.9665 164.948 39.6474 164.948 42.7625C164.948 45.979 165.592 48.7358 166.867 51.0417H166.866C168.145 53.3038 169.839 55.0444 171.947 56.2703C174.109 57.4489 176.417 58.0378 178.873 58.0378C181.331 58.0378 183.589 57.4479 185.65 56.2703L185.652 56.2693C187.758 55.0938 189.425 53.3791 190.654 51.1179L190.656 51.114C191.93 48.8599 192.573 46.1049 192.573 42.8376C192.573 39.5702 191.93 36.8145 190.656 34.5603C189.376 32.2973 187.683 30.582 185.576 29.406L185.571 29.4021C183.511 28.1761 181.23 27.5623 178.723 27.5623Z" fill="white" stroke="white" stroke-width="0.5"/>
+<path d="M210.648 23.3875V45.6873C210.648 48.2985 211.214 50.5255 212.335 52.3787L212.559 52.7234C213.701 54.4207 215.121 55.7252 216.817 56.6423H216.816C218.629 57.5726 220.564 58.0378 222.623 58.0378C224.732 58.0378 226.692 57.5469 228.505 56.5671L228.507 56.5662C230.366 55.5876 231.858 54.1943 232.984 52.3826C234.106 50.5286 234.674 48.3004 234.674 45.6873V23.3875H240.424V45.9128C240.424 49.4012 239.64 52.4479 238.062 55.0427C236.489 57.6314 234.355 59.6374 231.665 61.0583L231.662 61.0603C228.973 62.4301 225.958 63.1121 222.623 63.1121C219.387 63.112 216.423 62.4294 213.735 61.0603L213.731 61.0583C211.042 59.6378 208.885 57.6325 207.262 55.0457L207.26 55.0427C205.682 52.4479 204.898 49.4012 204.898 45.9128V23.3875H210.648Z" fill="white" stroke="white" stroke-width="0.5"/>
+</svg>

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

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import archLogo from "@admin/assets/ridu-logo-arch.svg";
+	import wordLogo from "@admin/assets/ridu-word-logo.svg";
+
+	let {
+		variant = "word",
+		class: className,
+	}: {
+		variant?: "arch" | "word";
+		class?: string;
+	} = $props();
+
+	const source = $derived(variant === "arch" ? archLogo : wordLogo);
+</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,
+	]}
+	style={`--ridu-logo: url("${source}")`}
+	aria-hidden="true"
+></span>

package/src/components/code-block/code-block.svelte

@@ -0,0 +1,107 @@
+<script lang="ts">
+	import Prism from "prismjs";
+	import "prismjs/components/prism-bash";
+	import "prismjs/components/prism-javascript";
+	import "prismjs/components/prism-json";
+	import { getAdminI18n } from "@riducms/plugin";
+
+	let {
+		value,
+		language = "javascript",
+		class: className = "",
+	}: {
+		value: string;
+		language?: "javascript" | "bash" | "json";
+		class?: string;
+	} = $props();
+	const i18n = getAdminI18n();
+
+	const normalized = $derived(normalize(value));
+	const highlighted = $derived(
+		Prism.highlight(normalized, Prism.languages[language] ?? Prism.languages.javascript, language)
+	);
+
+	function normalize(source: string) {
+		const lines = source.replaceAll("\t", "  ").split("\n");
+		while (lines[0]?.trim() === "") lines.shift();
+		while (lines.at(-1)?.trim() === "") lines.pop();
+		const indentation = lines
+			.filter((line) => line.trim() !== "")
+			.map((line) => line.match(/^\s*/)?.[0].length ?? 0);
+		const minimum = indentation.length === 0 ? 0 : Math.min(...indentation);
+		return lines.map((line) => line.slice(minimum)).join("\n");
+	}
+</script>
+
+<!-- Keyboard focus lets users scroll long examples without a pointer. -->
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<pre
+	class={[
+		"overflow-x-auto bg-background p-4 font-mono text-[11.5px] leading-6 text-foreground-muted selection:bg-primary/25",
+		className,
+	]}
+	tabindex="0"
+	role="region"
+	aria-label={i18n.t("general:codeExample")}><code
+		class={`language-${language}`}>{@html highlighted}</code></pre>
+
+<style>
+	:global(.token.comment),
+	:global(.token.prolog),
+	:global(.token.doctype),
+	:global(.token.cdata) {
+		color: color-mix(in srgb, var(--foreground) 42%, transparent);
+		font-style: italic;
+	}
+
+	:global(.token.punctuation) {
+		color: color-mix(in srgb, var(--foreground) 62%, transparent);
+	}
+
+	:global(.token.property),
+	:global(.token.tag),
+	:global(.token.constant),
+	:global(.token.symbol),
+	:global(.token.deleted) {
+		color: var(--syntax-property);
+	}
+
+	:global(.token.boolean),
+	:global(.token.number) {
+		color: var(--syntax-number);
+	}
+
+	:global(.token.selector),
+	:global(.token.attr-name),
+	:global(.token.string),
+	:global(.token.char),
+	:global(.token.builtin),
+	:global(.token.inserted) {
+		color: var(--syntax-string);
+	}
+
+	:global(.token.operator),
+	:global(.token.entity),
+	:global(.token.url),
+	:global(.language-css .token.string),
+	:global(.style .token.string) {
+		color: var(--syntax-operator);
+	}
+
+	:global(.token.atrule),
+	:global(.token.attr-value),
+	:global(.token.keyword) {
+		color: var(--syntax-keyword);
+	}
+
+	:global(.token.function),
+	:global(.token.class-name) {
+		color: var(--syntax-function);
+	}
+
+	:global(.token.regex),
+	:global(.token.important),
+	:global(.token.variable) {
+		color: var(--syntax-variable);
+	}
+</style>