The host's own screens, in the same frame

An App section is a Dashboard section the host supplies: a store, a redirects screen, a newsletter list, anything the site's admins need beside Pages, Media and Globals. It joins the Dashboard's nav, so all admin work starts in one place. An App section is one of two kinds:

• Slotted: the host's own markup, shown inside the Dashboard frame.

• Linked: a nav link out to a route the host already has.

Declare them with the appSections option, an array of { id, label, href? }. A section with an href is linked; one without is slotted.

Slotted sections

A slotted section shows the element's child with slot set to the section's id, when the Dashboard's hash is #/app/<id>:

<!-- src/routes/uncial/+page.svelte -->
<script lang="ts">
	import { onMount } from 'svelte';
	import { base } from '$app/paths';
	import 'uncial-cms/dashboard';
	import { blocks, schema, site } from '../site.js';

	const appSections = [{ id: 'redirects', label: 'Redirects' }];

	let mounted = $state(false);
	onMount(() => (mounted = true));
</script>

{#if mounted}
	<uncial-dashboard config={site} {blocks} {schema} {appSections} basePath={base}>
		<div slot="redirects">
			<p>Redirects the site serves:</p>
			<ul>
				<li><code>/blog/</code> → <code>/news/</code></li>
			</ul>
		</div>
	</uncial-dashboard>
{/if}

The slotted markup stays in your page's light DOM and is only projected into the frame, so your own styles and your own components work in it unchanged. The Dashboard shows it once the editor is signed in, as it does its own sections, and the section's label becomes the page heading.

Linked sections

A linked section is a plain nav link to a host route, for a screen that is already a page of its own:

import { resolve } from '$app/paths';

const appSections = [
	{ id: 'redirects', label: 'Redirects' },
	{ id: 'orders', label: 'Orders', href: resolve('/admin/orders') }
];

The Dashboard uses the href exactly as given, so resolve it against the site's base path yourself. Following the link leaves the Dashboard, and the browser's Back button returns to it.

Choosing between them

Slot a screen that is small and belongs in the frame: it sits in the Dashboard's nav, behind its sign-in, with nothing else to build. Link a screen that is a full application already, or that needs its own route, its own data loading or a server round trip of its own. Either way, the host owns the screen's permissions. The Dashboard's can covers only the Dashboard's own actions, so a host that shows an App section only to some editors leaves it out of appSections for the others.