@riducms/admin 0.2.2 → 0.3.0

package/THIRD_PARTY_NOTICES.md

@@ -110,18 +110,10 @@ 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.
 
-## Geist
+## Martian Mono
 
-- Package: `@fontsource-variable/geist 5.3.0`
-- Copyright: 2024 The Geist Project Authors (<https://github.com/vercel/geist-font>)
-- Upstream attribution: Geist-Italic[wght].ttf, Copyright 2024 The Geist Project Authors
-- License: SIL Open Font License 1.1
-
-## Spline Sans Mono
-
-- Package: `@fontsource-variable/spline-sans-mono 5.3.0`
-- Copyright: 2022 The Spline Sans Mono Project Authors (<https://github.com/SorkinType/SplineSansMono>)
-- Upstream attribution: SplineSansMono-Italic[wght].ttf, Copyright 2022 The Spline Sans Mono Project Authors
+- Package: `@fontsource-variable/martian-mono 5.3.0`
+- Copyright: 2020 The Martian Mono Project Authors (<https://github.com/evilmartians/mono>)
 - License: SIL Open Font License 1.1
 
 ## SIL Open Font License 1.1
@@ -172,32 +164,32 @@ a copy of the Font Software, to use, study, copy, merge, embed, modify,
 redistribute, and sell modified and unmodified copies of the Font
 Software, subject to the following conditions:
 
-1) Neither the Font Software nor any of its individual components,
-in Original or Modified Versions, may be sold by itself.
-
-2) Original or Modified Versions of the Font Software may be bundled,
-redistributed and/or sold with any software, provided that each copy
-contains the above copyright notice and this license. These can be
-included either as stand-alone text files, human-readable headers or
-in the appropriate machine-readable metadata fields within text or
-binary files as long as those fields can be easily viewed by the user.
-
-3) No Modified Version of the Font Software may use the Reserved Font
-Name(s) unless explicit written permission is granted by the corresponding
-Copyright Holder. This restriction only applies to the primary font name as
-presented to the users.
-
-4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
-Software shall not be used to promote, endorse or advertise any
-Modified Version, except to acknowledge the contribution(s) of the
-Copyright Holder(s) and the Author(s) or with their explicit written
-permission.
-
-5) The Font Software, modified or unmodified, in part or in whole,
-must be distributed entirely under this license, and must not be
-distributed under any other license. The requirement for fonts to
-remain under this license does not apply to any document created
-using the Font Software.
+1. Neither the Font Software nor any of its individual components,
+   in Original or Modified Versions, may be sold by itself.
+
+2. Original or Modified Versions of the Font Software may be bundled,
+   redistributed and/or sold with any software, provided that each copy
+   contains the above copyright notice and this license. These can be
+   included either as stand-alone text files, human-readable headers or
+   in the appropriate machine-readable metadata fields within text or
+   binary files as long as those fields can be easily viewed by the user.
+
+3. No Modified Version of the Font Software may use the Reserved Font
+   Name(s) unless explicit written permission is granted by the corresponding
+   Copyright Holder. This restriction only applies to the primary font name as
+   presented to the users.
+
+4. The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+   Software shall not be used to promote, endorse or advertise any
+   Modified Version, except to acknowledge the contribution(s) of the
+   Copyright Holder(s) and the Author(s) or with their explicit written
+   permission.
+
+5. The Font Software, modified or unmodified, in part or in whole,
+   must be distributed entirely under this license, and must not be
+   distributed under any other license. The requirement for fonts to
+   remain under this license does not apply to any document created
+   using the Font Software.
 
 TERMINATION
 
@@ -215,3 +207,34 @@ INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
 DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
 FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
 OTHER DEALINGS IN THE FONT SOFTWARE.
+
+## Payload CMS assets
+
+- Source: `packages/ui/src/graphics/DefaultBlockImage/index.tsx`, Payload CMS revision
+  `fea6f8a47a50ff1330d8a5071b43e7dcffb97b22`.
+- Copied as `src/fields/nested/block-placeholder.svg`; JSX converted to SVG.
+- The expand/minimize paths in `src/components/json-tree/json-viewer.svelte` are from
+  `packages/ui/src/icons/MinimizeMaximize/index.tsx` in the same upstream checkout.
+
+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/package.json

@@ -3,30 +3,42 @@
 		"url": "https://github.com/riducms/ridu/issues"
 	},
 	"dependencies": {
+		"@codemirror/autocomplete": "^6.20.3",
+		"@codemirror/commands": "^6.11.1",
+		"@codemirror/lang-css": "^6.3.1",
+		"@codemirror/lang-html": "^6.4.12",
+		"@codemirror/lang-javascript": "^6.2.5",
+		"@codemirror/lang-json": "^6.0.2",
+		"@codemirror/language": "^6.12.4",
+		"@codemirror/state": "^6.7.5",
+		"@codemirror/view": "^6.43.12",
+		"@cropper/element-canvas": "2.2.0",
+		"@cropper/element-handle": "2.2.0",
+		"@cropper/element-selection": "2.2.0",
 		"@dnd-kit-svelte/svelte": "^0.1.6",
-		"@fontsource-variable/geist": "^5.3.0",
-		"@fontsource-variable/spline-sans-mono": "^5.3.0",
-		"@hvniel/svelte-router": "^0.0.6",
+		"@fontsource-variable/martian-mono": "5.3.0",
+		"@hvniel/svelte-router": "^0.1.0",
 		"@iconify/json": "^2.2.509",
 		"@internationalized/date": "^3.12.3",
-		"@riducms/plugin": "0.2.2",
-		"@riducms/protocol": "0.2.2",
-		"@riducms/sdk": "0.2.2",
-		"@riducms/translations": "0.2.2",
-		"@riducms/ui": "0.2.2",
-		"@types/prismjs": "^1.26.5",
+		"@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",
 		"bits-ui": "^2.18.1",
-		"prismjs": "^1.30.0",
+		"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.2.2",
-		"svelte": "^5.56.8"
+		"@riducms/build": "0.3.0",
+		"svelte": "^5.57.0"
 	},
 	"exports": {
-		".": "./src/index.ts"
+		".": "./src/index.ts",
+		"./routing": "./src/routing.ts"
 	},
 	"files": [
 		"src",
@@ -38,7 +50,7 @@
 	"license": "MIT",
 	"name": "@riducms/admin",
 	"peerDependencies": {
-		"svelte": "^5.56.8"
+		"svelte": "^5.57.0"
 	},
 	"publishConfig": {
 		"access": "public",
@@ -60,5 +72,5 @@
 		"test:unit": "bun test tests"
 	},
 	"type": "module",
-	"version": "0.2.2"
+	"version": "0.3.0"
 }

package/src/app/admin-core-view-route.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
 	import { useLocation, useParams } from "@hvniel/svelte-router";
-	import type { AdminCoreView, AdminCoreViewHost, AdminCoreViewSurface } from "@riducms/plugin";
-	import { untrack, type Component } from "svelte";
+	import type { AdminCoreViewHost, AdminCoreViewSurface } from "@riducms/plugin";
+	import type { Component } from "svelte";
 
+	import AdminViewHost from "@admin/core/loaders/admin-view-host.svelte";
+	import { resolveCoreView } from "@admin/core/routing/admin-view-selection";
 	import { getNotificationCenter } from "@admin/core/notifications/notification-center.svelte";
 	import { documentIDFromAdminPath } from "@admin/core/routing/admin-paths";
 	import { getAdminRuntime } from "@admin/core/runtime/admin-runtime.svelte";
@@ -15,75 +17,58 @@
 	let { surface, DefaultView }: Props = $props();
 	const runtime = getAdminRuntime();
 	const notifications = getNotificationCenter();
-	const params = $derived(useParams<"collection" | "document" | "global" | "view">());
-	const location = $derived(useLocation());
-	let documentID = $state(
-		untrack(() =>
-			params.document === undefined ? undefined : documentIDFromAdminPath(location.pathname)
-		)
+	const coreViews = runtime.config.extensions.coreViews;
+	const params = useParams<"collection" | "document" | "global" | "view">();
+	const location = useLocation();
+	const manifest = $derived(runtime.manifest);
+	const documentID = $derived(
+		surface === "collectionEdit" ? documentIDFromAdminPath(location.current.pathname) : undefined
 	);
-	$effect(() => {
-		if (params.document === undefined) {
-			documentID = undefined;
-			return;
-		}
-		const decoded = documentIDFromAdminPath(location.pathname);
-		if (decoded !== undefined) documentID = decoded;
-	});
 	const collection = $derived(
-		runtime.manifest?.collections.find((candidate) => candidate.slug === params.collection)
+		manifest?.collections.find((candidate) => candidate.slug === params.current.collection)
 	);
 	const global = $derived(
-		runtime.manifest?.globals?.find((candidate) => candidate.slug === params.global)
+		manifest?.globals?.find((candidate) => candidate.slug === params.current.global)
+	);
+	const resource = $derived(
+		surface === "global" ? params.current.global : params.current.collection
+	);
+	const resourceAvailable = $derived(
+		surface === "notFound" ||
+			(surface === "global" ? global !== undefined : collection !== undefined)
 	);
 	const replacement = $derived(
-		resolveCoreView(runtime.coreViews, surface, params.collection, params.global)
+		resourceAvailable ? resolveCoreView(coreViews, surface, resource) : undefined
 	);
 	const host: AdminCoreViewHost = {
 		refreshManifest: () => runtime.refreshManifest(),
 		documentsChanged: () => runtime.documentsChanged(),
 		notify: (tone, title, message) => notifications[tone]({ title, message }),
 	};
-
-	function resolveCoreView(
-		views: readonly AdminCoreView[],
-		viewSurface: AdminCoreViewSurface,
-		collectionSlug: string | undefined,
-		globalSlug: string | undefined
-	) {
-		const candidates = views.filter((view) => view.surface === viewSurface);
-		if (viewSurface === "global") {
-			return (
-				candidates.find((view) => "global" in view && view.global === globalSlug) ??
-				candidates.find((view) => "global" in view && view.global === undefined)
-			);
-		}
-		if (viewSurface !== "notFound") {
-			return (
-				candidates.find((view) => "collection" in view && view.collection === collectionSlug) ??
-				candidates.find((view) => "collection" in view && view.collection === undefined)
-			);
-		}
-		return candidates[0];
-	}
 </script>
 
 {#snippet defaultView()}
 	<DefaultView />
 {/snippet}
 
-{#if runtime.manifest !== undefined && replacement !== undefined}
-	<replacement.component
-		manifest={runtime.manifest}
-		user={runtime.session?.user}
-		{surface}
-		{collection}
-		{global}
-		{documentID}
-		{defaultView}
-		{host}
-		i18n={runtime.i18n}
-	/>
+{#if manifest !== undefined && replacement !== undefined}
+	{#key replacement}
+		<AdminViewHost
+			view={replacement}
+			ownsRoute
+			props={{
+				manifest,
+				user: runtime.session?.user,
+				surface,
+				collection,
+				global,
+				documentID,
+				defaultView,
+				host,
+				i18n: runtime.i18n,
+			}}
+		/>
+	{/key}
 {:else}
 	{@render defaultView()}
 {/if}

package/src/app/admin-extension-route.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import type { AdminRoute } from "@riducms/plugin";
+
+	import { getAdminRuntime } from "@admin/core/runtime/admin-runtime.svelte";
+	import AdminViewHost from "@admin/core/loaders/admin-view-host.svelte";
+
+	let { route }: { route: AdminRoute } = $props();
+	const runtime = getAdminRuntime();
+</script>
+
+{#if runtime.manifest !== undefined}
+	{#key route}
+		<AdminViewHost
+			view={route}
+			ownsRoute
+			props={{ manifest: runtime.manifest, user: runtime.session?.user, i18n: runtime.i18n }}
+		/>
+	{/key}
+{/if}

package/src/app/admin-layout.scss

@@ -0,0 +1,175 @@
+@use "@riducms/ui/styles.scss" as ui;
+
+@layer ridu.components {
+	.ridu-shell {
+		font-size: var(--font-size-body);
+		line-height: var(--line-height-body);
+		display: flex;
+		flex-direction: column;
+		min-height: 100dvh;
+		background: var(--background);
+		color: var(--foreground);
+	}
+	.ridu-shell__extension-header {
+		flex-shrink: 0;
+		min-height: 20px;
+		padding-inline: var(--admin-gutter);
+		display: flex;
+		align-items: center;
+		gap: 12px;
+	}
+	.ridu-shell__body {
+		position: relative;
+		flex: 1;
+		min-height: 0;
+	}
+	.ridu-shell__sidebar {
+		position: relative;
+		min-height: 0;
+		overflow: hidden;
+	}
+	.ridu-nav {
+		position: absolute;
+		inset-block: 0;
+		inset-inline-start: 0;
+		width: var(--admin-nav-width);
+		display: flex;
+		flex-direction: column;
+		border-inline-end: 1px solid var(--background-layer);
+		padding-top: var(--admin-header-height);
+		transition: opacity 150ms linear;
+	}
+	.ridu-shell:not(.ridu-shell--nav-open) .ridu-nav {
+		opacity: 0;
+		visibility: hidden;
+	}
+	.ridu-shell__toggle {
+		position: absolute;
+		inset-block-start: 0;
+		inset-inline-start: 0;
+		z-index: 30;
+		width: var(--admin-gutter);
+		height: var(--admin-header-height);
+		display: grid;
+		place-items: center;
+	}
+	.ridu-nav-toggle {
+		display: grid;
+		place-items: center;
+		flex-shrink: 0;
+		width: 24px;
+		height: 24px;
+		border: 0;
+		border-radius: 3px;
+		padding: 2px;
+		background: var(--background);
+		color: var(--foreground);
+		box-shadow: 0 0 0 1px var(--control-border);
+		cursor: pointer;
+
+		svg {
+			width: 20px;
+			height: 20px;
+			stroke-width: 1;
+		}
+
+		&:hover {
+			background: var(--background-layer);
+			box-shadow: 0 0 0 1px var(--ring);
+		}
+
+		&:focus-visible {
+			@include ui.focus-outline;
+		}
+	}
+	[dir="rtl"] .ridu-nav-toggle__collapse {
+		transform: rotate(180deg);
+	}
+	.ridu-shell__main {
+		position: relative;
+		min-width: 0;
+		background: var(--background);
+	}
+	.ridu-shell__header {
+		display: flex;
+		align-items: center;
+		gap: 10px;
+		flex-shrink: 0;
+		min-height: var(--admin-header-height);
+		padding-inline: var(--admin-gutter);
+	}
+	.ridu-shell__actions {
+		margin-inline-start: auto;
+		display: flex;
+		align-items: center;
+		justify-content: flex-end;
+		gap: 10px;
+	}
+	.ridu-shell__search {
+		display: grid;
+		place-items: center;
+		width: 24px;
+		height: 24px;
+		padding: 0;
+		border: 0;
+		background: transparent;
+		color: var(--foreground-muted);
+		cursor: pointer;
+
+		svg {
+			width: 16px;
+			height: 16px;
+		}
+
+		&:hover {
+			color: var(--foreground);
+		}
+
+		&:focus-visible {
+			@include ui.focus-outline;
+		}
+	}
+	@media (min-width: (ui.$small + 1px)) {
+		.ridu-shell {
+			height: 100dvh;
+		}
+		.ridu-shell__body {
+			display: grid;
+			grid-template-columns: 0 minmax(0, 1fr);
+			overflow: hidden;
+			transition: grid-template-columns 150ms linear;
+		}
+		.ridu-shell--nav-open .ridu-shell__body {
+			grid-template-columns: var(--admin-nav-width) minmax(0, 1fr);
+		}
+		.ridu-shell__main {
+			display: flex;
+			flex-direction: column;
+			height: 100%;
+			overflow-y: auto;
+		}
+		.ridu-shell__main--contained {
+			overflow: hidden;
+		}
+	}
+	@media (max-width: ui.$medium) {
+		.ridu-shell {
+			font-size: 12px;
+		}
+	}
+	@media (max-width: ui.$small) {
+		.ridu-shell__actions {
+			gap: 8px;
+		}
+		.ridu-shell__header {
+			flex-wrap: wrap;
+			padding-block: 10px;
+		}
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.ridu-shell__body,
+		.ridu-nav {
+			transition: none;
+		}
+	}
+}