@refrakt-md/lumina 0.6.0 → 0.7.0

package/styles/runes/realm.css

@@ -0,0 +1,82 @@
+/* Realm */
+.rf-realm {
+	border: 1px solid var(--rf-color-border);
+	border-radius: var(--rf-radius-lg);
+	padding: 2rem;
+	margin: 1.5rem 0;
+}
+.rf-realm__badge {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0.5rem;
+	margin-bottom: 1rem;
+}
+.rf-realm__type-badge {
+	display: inline-block;
+	padding: 0.25rem 0.75rem;
+	border-radius: var(--rf-radius-full);
+	font-size: 0.75rem;
+	font-weight: 600;
+	text-transform: uppercase;
+	letter-spacing: 0.05em;
+	background: var(--rf-color-muted-bg);
+	color: var(--rf-color-muted);
+}
+.rf-realm__scale-badge {
+	display: inline-block;
+	padding: 0.25rem 0.75rem;
+	border-radius: var(--rf-radius-full);
+	font-size: 0.75rem;
+	font-weight: 600;
+	text-transform: uppercase;
+	letter-spacing: 0.05em;
+	background: var(--rf-color-muted-bg);
+	color: var(--rf-color-muted);
+}
+.rf-realm__scene {
+	width: 100%;
+	margin-bottom: 1rem;
+	border-radius: var(--rf-radius-md);
+	overflow: hidden;
+	aspect-ratio: 16 / 9;
+}
+.rf-realm__scene img {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+}
+.rf-realm__sections {
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+}
+.rf-realm__content {
+	/* content wrapper */
+}
+.rf-realm__content ul,
+.rf-realm__content ol {
+	padding-left: 1.5rem;
+}
+.rf-realm > span[property="name"] {
+	display: block;
+	font-size: 1.5rem;
+	font-weight: 700;
+	margin-bottom: 0.5rem;
+	color: var(--rf-color-heading);
+}
+
+/* Realm Section */
+.rf-realm-section {
+	padding: 0.75rem 0;
+	border-top: 1px solid var(--rf-color-border);
+}
+.rf-realm-section__header {
+	font-size: 1.125rem;
+	font-weight: 600;
+	margin-bottom: 0.5rem;
+	color: var(--rf-color-heading);
+}
+.rf-realm-section__body ul,
+.rf-realm-section__body ol {
+	padding-left: 1.5rem;
+}

package/styles/runes/textblock.css

@@ -0,0 +1,64 @@
+/* TextBlock */
+.rf-textblock {
+	margin: 1.5rem 0;
+}
+.rf-textblock__body {
+	display: block;
+}
+
+/* Drop cap — decorative first letter */
+.rf-textblock--dropcap .rf-textblock__body > p:first-child::first-letter {
+	float: left;
+	font-size: 3.5em;
+	font-weight: 700;
+	line-height: 0.8;
+	padding-right: 0.1em;
+	margin-top: 0.05em;
+	color: var(--rf-color-primary);
+	font-family: Georgia, 'Times New Roman', serif;
+}
+
+/* Lead paragraph — emphasized opening text */
+.rf-textblock--lead .rf-textblock__body > p:first-child {
+	font-size: 1.25rem;
+	line-height: 1.6;
+	font-weight: 400;
+	color: var(--rf-color-text);
+}
+
+/* Multi-column text flow */
+.rf-textblock[data-columns="2"] .rf-textblock__body {
+	column-count: 2;
+	column-gap: 2rem;
+	column-rule: 1px solid var(--rf-color-border);
+}
+.rf-textblock[data-columns="3"] .rf-textblock__body {
+	column-count: 3;
+	column-gap: 2rem;
+	column-rule: 1px solid var(--rf-color-border);
+}
+.rf-textblock[data-columns="4"] .rf-textblock__body {
+	column-count: 4;
+	column-gap: 2rem;
+	column-rule: 1px solid var(--rf-color-border);
+}
+
+/* Text alignment */
+.rf-textblock--center .rf-textblock__body { text-align: center; }
+.rf-textblock--right .rf-textblock__body { text-align: right; }
+.rf-textblock--justify .rf-textblock__body { text-align: justify; }
+
+/* Responsive — columns collapse on smaller screens */
+@media (max-width: 768px) {
+	.rf-textblock[data-columns="3"] .rf-textblock__body,
+	.rf-textblock[data-columns="4"] .rf-textblock__body {
+		column-count: 2;
+	}
+}
+@media (max-width: 480px) {
+	.rf-textblock[data-columns="2"] .rf-textblock__body,
+	.rf-textblock[data-columns="3"] .rf-textblock__body,
+	.rf-textblock[data-columns="4"] .rf-textblock__body {
+		column-count: 1;
+	}
+}

package/svelte/elements.ts

@@ -1 +1 @@
-export { elements } from '@refrakt-md/theme-base/svelte/elements';
+export { elements } from '@refrakt-md/svelte';

package/svelte/index.ts

@@ -2,7 +2,7 @@ import type { SvelteTheme } from '@refrakt-md/svelte';
 import adapterManifest from './manifest.json';
 import { registry } from './registry.js';
 import { elements } from './elements.js';
-import { defaultLayout, docsLayout, blogArticleLayout } from '@refrakt-md/theme-base';
+import { defaultLayout, docsLayout, blogArticleLayout } from '@refrakt-md/transform';
 
 // Layout region metadata from the base theme manifest (packages/lumina/manifest.json).
 // Merged with adapter manifest component paths to produce full LayoutDefinitions.
@@ -34,8 +34,4 @@ export const theme: SvelteTheme = {
 	elements,
 };
 
-// Backward-compatible named exports
 export { registry };
-export { default as DocsLayout } from './layouts/DocsLayout.svelte';
-export { default as DefaultLayout } from './layouts/DefaultLayout.svelte';
-export { default as BlogLayout } from './layouts/BlogLayout.svelte';

package/svelte/manifest.json

@@ -6,29 +6,12 @@
 	"designTokens": "tokens.css",
 
 	"layouts": {
-		"default": { "component": "layouts/DefaultLayout.svelte" },
-		"docs": { "component": "layouts/DocsLayout.svelte" },
-		"blog": { "component": "layouts/BlogLayout.svelte" }
+		"default": {},
+		"docs": {},
+		"blog": {}
 	},
 
-	"components": {
-		"Hint": { "component": "components/Hint.svelte" },
-		"CallToAction": { "component": "components/CallToAction.svelte" },
-		"Feature": { "component": "components/Feature.svelte" },
-		"FeatureDefinition": { "component": "components/Feature.svelte" },
-		"Grid": { "component": "components/Grid.svelte" },
-		"Steps": { "component": "components/Steps.svelte" },
-		"Step": { "component": "components/Steps.svelte" },
-		"TabGroup": { "component": "components/Tabs.svelte" },
-		"Tab": { "component": "components/Tabs.svelte" },
-		"CodeGroup": { "component": "components/CodeGroup.svelte" },
-		"Pricing": { "component": "components/Pricing.svelte" },
-		"Tier": { "component": "components/Pricing.svelte" },
-		"PageSection": { "component": "components/PageSection.svelte" },
-		"Nav": { "component": "components/Nav.svelte" },
-		"NavGroup": { "component": "components/Nav.svelte" },
-		"NavItem": { "component": "components/Nav.svelte" }
-	},
+	"components": {},
 
 	"unsupportedRuneBehavior": "passthrough"
 }

package/svelte/registry.ts

@@ -1,2 +1,2 @@
 // Re-export base registry — lumina uses the same interactive components
-export { registry } from '@refrakt-md/theme-base/svelte/registry';
+export { registry } from '@refrakt-md/svelte';

package/svelte/components/OnThisPage.svelte

@@ -1,76 +0,0 @@
-<script lang="ts">
-	interface Heading {
-		level: number;
-		text: string;
-		id: string;
-	}
-
-	interface Props {
-		headings: Heading[];
-	}
-
-	let { headings }: Props = $props();
-
-	// Filter to h2 and h3 only
-	const filtered = $derived(headings.filter(h => h.level >= 2 && h.level <= 3));
-</script>
-
-<nav class="rf-on-this-page" data-scrollspy>
-	<p class="rf-on-this-page__title">On this page</p>
-	<ul class="rf-on-this-page__list">
-		{#each filtered as heading}
-			<li class="rf-on-this-page__item" data-level={heading.level}>
-				<a href="#{heading.id}">{heading.text}</a>
-			</li>
-		{/each}
-	</ul>
-</nav>
-
-<style>
-	.rf-on-this-page {
-		font-size: 0.8rem;
-	}
-
-	.rf-on-this-page__title {
-		font-size: 0.7rem;
-		font-weight: 600;
-		text-transform: uppercase;
-		letter-spacing: 0.05em;
-		color: var(--rf-color-muted, #64748b);
-		margin: 0 0 0.75rem;
-	}
-
-	.rf-on-this-page__list {
-		list-style: none;
-		margin: 0;
-		padding: 0;
-	}
-
-	.rf-on-this-page__item {
-		border-left: 2px solid transparent;
-	}
-
-	.rf-on-this-page__item[data-level="3"] {
-		padding-left: 0.75rem;
-	}
-
-	.rf-on-this-page__item a {
-		display: block;
-		padding: 0.25rem 0.75rem;
-		color: var(--rf-color-muted, #64748b);
-		text-decoration: none;
-		line-height: 1.4;
-	}
-
-	.rf-on-this-page__item a:hover {
-		color: var(--rf-color-text, #1a1a2e);
-	}
-
-	.rf-on-this-page__item[data-active] {
-		border-left-color: var(--rf-color-primary, #0ea5e9);
-	}
-
-	.rf-on-this-page__item[data-active] a {
-		color: var(--rf-color-primary, #0ea5e9);
-	}
-</style>

package/svelte/layouts/BlogLayout.svelte

@@ -1,173 +0,0 @@
-<script lang="ts">
-	import { Renderer } from '@refrakt-md/svelte';
-
-	let { title, frontmatter, regions, renderable, pages, url }: {
-		title: string;
-		description: string;
-		frontmatter?: Record<string, unknown>;
-		regions: Record<string, { name: string; mode: string; content: any[] }>;
-		renderable: any;
-		pages: Array<{
-			url: string;
-			title: string;
-			draft: boolean;
-			description?: string;
-			date?: string;
-			author?: string;
-			tags?: string[];
-			image?: string;
-		}>;
-		url: string;
-	} = $props();
-
-	const date = $derived(frontmatter?.date as string | undefined);
-	const author = $derived(frontmatter?.author as string | undefined);
-	const tags = $derived(frontmatter?.tags as string[] | undefined);
-
-	// Index page has no date; individual posts always have one
-	const isIndex = $derived(!date);
-
-	const posts = $derived(
-		isIndex
-			? pages
-				.filter(p => p.url.startsWith('/blog/') && p.url !== '/blog' && !p.draft && p.date)
-				.sort((a, b) => (b.date ?? '').localeCompare(a.date ?? ''))
-			: []
-	);
-
-	const hasSidebar = $derived(!!regions.sidebar);
-
-	let menuOpen = $state(false);
-
-	function onKeydown(e: KeyboardEvent) {
-		if (e.key === 'Escape') menuOpen = false;
-	}
-
-	$effect(() => {
-		url;
-		menuOpen = false;
-	});
-
-	// Lock body scroll when panel is open
-	$effect(() => {
-		document.body.style.overflow = menuOpen ? 'hidden' : '';
-	});
-
-	function formatDate(iso: string): string {
-		const d = new Date(iso + 'T00:00:00');
-		return d.toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' });
-	}
-</script>
-
-<svelte:window onkeydown={onKeydown} />
-
-{#if regions.header}
-	<header class="rf-blog-header">
-		<div class="rf-blog-header__inner">
-			<Renderer node={regions.header.content} />
-			<button class="rf-mobile-menu-btn" onclick={() => menuOpen = true} aria-label="Open menu">
-				<svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
-					<circle cx="10" cy="4" r="1.5"/>
-					<circle cx="10" cy="10" r="1.5"/>
-					<circle cx="10" cy="16" r="1.5"/>
-				</svg>
-			</button>
-		</div>
-	</header>
-{/if}
-
-{#if menuOpen}
-	<div class="rf-mobile-panel" role="dialog" aria-label="Navigation menu">
-		<div class="rf-mobile-panel__header">
-			<span class="rf-mobile-panel__title">Menu</span>
-			<button class="rf-mobile-panel__close" onclick={() => menuOpen = false} aria-label="Close menu">
-				<svg width="20" height="20" viewBox="0 0 20 20" stroke="currentColor" stroke-width="2" fill="none">
-					<line x1="4" y1="4" x2="16" y2="16"/><line x1="16" y1="4" x2="4" y2="16"/>
-				</svg>
-			</button>
-		</div>
-		<nav class="rf-mobile-panel__nav">
-			{#if regions.header}
-				<Renderer node={regions.header.content} />
-			{/if}
-		</nav>
-	</div>
-{/if}
-
-<div class="rf-blog" class:rf-blog--has-sidebar={hasSidebar}>
-	{#if isIndex}
-		<div class="rf-blog-index">
-			<h1 class="rf-blog-index__title">{title}</h1>
-
-			<div class="rf-blog-index__body">
-				<Renderer node={renderable} />
-			</div>
-
-			<div class="rf-blog-index__posts">
-				{#each posts as post}
-					<a href={post.url} class="rf-blog-card">
-						<h2 class="rf-blog-card__title">{post.title}</h2>
-						<div class="rf-blog-card__meta">
-							{#if post.date}
-								<time datetime={post.date}>{formatDate(post.date)}</time>
-							{/if}
-							{#if post.author}
-								<span class="rf-blog-card__author">{post.author}</span>
-							{/if}
-						</div>
-						{#if post.description}
-							<p class="rf-blog-card__desc">{post.description}</p>
-						{/if}
-						{#if post.tags && post.tags.length > 0}
-							<div class="rf-blog-card__tags">
-								{#each post.tags as tag}
-									<span class="rf-blog-article__tag">{tag}</span>
-								{/each}
-							</div>
-						{/if}
-						<span class="rf-blog-card__link">Read more &rarr;</span>
-					</a>
-				{/each}
-			</div>
-		</div>
-	{:else}
-		<article class="rf-blog-article">
-			<header class="rf-blog-article__header">
-				<h1 class="rf-blog-article__title">{title}</h1>
-				{#if date || author}
-					<div class="rf-blog-article__meta">
-						{#if date}
-							<time datetime={date}>{formatDate(date)}</time>
-						{/if}
-						{#if author}
-							<span class="rf-blog-article__author">{author}</span>
-						{/if}
-					</div>
-				{/if}
-				{#if tags && tags.length > 0}
-					<div class="rf-blog-article__tags">
-						{#each tags as tag}
-							<span class="rf-blog-article__tag">{tag}</span>
-						{/each}
-					</div>
-				{/if}
-			</header>
-
-			<div class="rf-blog-article__body">
-				<Renderer node={renderable} />
-			</div>
-		</article>
-
-		{#if regions.sidebar}
-			<aside class="rf-blog-sidebar">
-				<Renderer node={regions.sidebar.content} />
-			</aside>
-		{/if}
-	{/if}
-</div>
-
-{#if regions.footer}
-	<footer class="rf-blog-footer">
-		<Renderer node={regions.footer.content} />
-	</footer>
-{/if}

package/svelte/layouts/DefaultLayout.svelte

@@ -1,67 +0,0 @@
-<script lang="ts">
-	import { Renderer } from '@refrakt-md/svelte';
-
-	let { regions, renderable, url }: {
-		title: string;
-		description: string;
-		regions: Record<string, { name: string; mode: string; content: any[] }>;
-		renderable: any;
-		url: string;
-		pages: any[];
-	} = $props();
-
-	let menuOpen = $state(false);
-
-	function onKeydown(e: KeyboardEvent) {
-		if (e.key === 'Escape') menuOpen = false;
-	}
-
-	$effect(() => {
-		url;
-		menuOpen = false;
-	});
-
-	// Lock body scroll when panel is open
-	$effect(() => {
-		document.body.style.overflow = menuOpen ? 'hidden' : '';
-	});
-</script>
-
-<svelte:window onkeydown={onKeydown} />
-
-{#if regions.header}
-	<header class="rf-header">
-		<div class="rf-header__inner">
-			<Renderer node={regions.header.content} />
-			<button class="rf-mobile-menu-btn" onclick={() => menuOpen = true} aria-label="Open menu">
-				<svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
-					<circle cx="10" cy="4" r="1.5"/>
-					<circle cx="10" cy="10" r="1.5"/>
-					<circle cx="10" cy="16" r="1.5"/>
-				</svg>
-			</button>
-		</div>
-	</header>
-{/if}
-
-{#if menuOpen}
-	<div class="rf-mobile-panel" role="dialog" aria-label="Navigation menu">
-		<div class="rf-mobile-panel__header">
-			<span class="rf-mobile-panel__title">Menu</span>
-			<button class="rf-mobile-panel__close" onclick={() => menuOpen = false} aria-label="Close menu">
-				<svg width="20" height="20" viewBox="0 0 20 20" stroke="currentColor" stroke-width="2" fill="none">
-					<line x1="4" y1="4" x2="16" y2="16"/><line x1="16" y1="4" x2="4" y2="16"/>
-				</svg>
-			</button>
-		</div>
-		<nav class="rf-mobile-panel__nav">
-			{#if regions.header}
-				<Renderer node={regions.header.content} />
-			{/if}
-		</nav>
-	</div>
-{/if}
-
-<main class="rf-page-content">
-	<Renderer node={renderable} />
-</main>

package/svelte/layouts/DocsLayout.svelte

@@ -1,169 +0,0 @@
-<script lang="ts">
-	import { Renderer } from '@refrakt-md/svelte';
-	import OnThisPage from '../components/OnThisPage.svelte';
-
-	let { title, regions, renderable, url, pages, headings, frontmatter }: {
-		title: string;
-		description: string;
-		regions: Record<string, { name: string; mode: string; content: any[] }>;
-		renderable: any;
-		url: string;
-		pages: Array<{ url: string; title: string; draft: boolean }>;
-		headings?: Array<{ level: number; text: string; id: string }>;
-		frontmatter?: Record<string, unknown>;
-	} = $props();
-
-	const hasNav = $derived(!!regions.nav);
-
-	// Show TOC when 2+ qualifying headings (h2/h3) and not opted out via frontmatter
-	const tocHeadings = $derived((headings ?? []).filter(h => h.level >= 2 && h.level <= 3));
-	const showToc = $derived(tocHeadings.length >= 2 && frontmatter?.toc !== false);
-
-	// Mobile panel state
-	let menuOpen = $state(false);
-	let navOpen = $state(false);
-
-	// Helpers to walk the serialized nav tree (same patterns as Nav.svelte)
-	function isTag(node: any): node is { $$mdtype: 'Tag'; name: string; attributes: Record<string, any>; children: any[] } {
-		return node !== null && typeof node === 'object' && !Array.isArray(node) && node.$$mdtype === 'Tag';
-	}
-
-	function getTextContent(node: any): string {
-		if (typeof node === 'string') return node;
-		if (typeof node === 'number') return String(node);
-		if (isTag(node)) return node.children.map(getTextContent).join('');
-		if (Array.isArray(node)) return node.map(getTextContent).join('');
-		return '';
-	}
-
-	// Build slug → group title map from nav region
-	function buildNavMap(content: any[]): Map<string, string> {
-		const map = new Map<string, string>();
-		function walk(nodes: any[], groupTitle: string) {
-			for (const node of nodes) {
-				if (!isTag(node)) continue;
-				if (node.attributes.typeof === 'NavGroup') {
-					const heading = node.children.find((c: any) => isTag(c) && /^h[1-6]$/.test(c.name));
-					walk(node.children, heading ? getTextContent(heading) : '');
-				} else if (node.attributes.typeof === 'NavItem') {
-					const slugSpan = node.children.find((c: any) => isTag(c) && c.name === 'span' && c.attributes.property === 'slug');
-					if (slugSpan && groupTitle) map.set(getTextContent(slugSpan), groupTitle);
-				} else if (node.children) {
-					walk(node.children, groupTitle);
-				}
-			}
-		}
-		walk(content, '');
-		return map;
-	}
-
-	// Breadcrumb: look up current page slug in nav group headings
-	const pageSlug = $derived((url || '').split('/').filter(Boolean).pop() || '');
-	const navMap = $derived(regions.nav ? buildNavMap(regions.nav.content) : new Map());
-	const breadcrumbCategory = $derived(navMap.get(pageSlug) || '');
-
-	function closeMenu() { menuOpen = false; }
-
-	function onKeydown(e: KeyboardEvent) {
-		if (e.key === 'Escape') {
-			menuOpen = false;
-			navOpen = false;
-		}
-	}
-
-	// Close panels on navigation
-	$effect(() => {
-		url;
-		menuOpen = false;
-		navOpen = false;
-	});
-
-	// Lock body scroll when a panel is open
-	$effect(() => {
-		document.body.style.overflow = (menuOpen || navOpen) ? 'hidden' : '';
-	});
-</script>
-
-<svelte:window onkeydown={onKeydown} />
-
-{#if regions.header}
-	<header class="rf-docs-header">
-		<div class="rf-docs-header__inner">
-			<Renderer node={regions.header.content} />
-			<button class="rf-mobile-menu-btn" onclick={() => { navOpen = false; menuOpen = true; }} aria-label="Open menu">
-				<svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
-					<circle cx="10" cy="4" r="1.5"/>
-					<circle cx="10" cy="10" r="1.5"/>
-					<circle cx="10" cy="16" r="1.5"/>
-				</svg>
-			</button>
-		</div>
-	</header>
-{/if}
-
-<!-- Mobile header menu panel -->
-{#if menuOpen}
-	<div class="rf-mobile-panel" role="dialog" aria-label="Navigation menu">
-		<div class="rf-mobile-panel__header">
-			<span class="rf-mobile-panel__title">Menu</span>
-			<button class="rf-mobile-panel__close" onclick={closeMenu} aria-label="Close menu">
-				<svg width="20" height="20" viewBox="0 0 20 20" stroke="currentColor" stroke-width="2" fill="none">
-					<line x1="4" y1="4" x2="16" y2="16"/><line x1="16" y1="4" x2="4" y2="16"/>
-				</svg>
-			</button>
-		</div>
-		<nav class="rf-mobile-panel__nav">
-			{#if regions.header}
-				<Renderer node={regions.header.content} />
-			{/if}
-		</nav>
-	</div>
-{/if}
-
-<!-- Mobile docs toolbar with hamburger + breadcrumbs -->
-{#if hasNav}
-	<div class="rf-docs-toolbar">
-		<button class="rf-docs-toolbar__hamburger" onclick={() => { menuOpen = false; navOpen = !navOpen; }} aria-label="Toggle navigation">
-			<svg width="20" height="20" viewBox="0 0 20 20" stroke="currentColor" stroke-width="2" fill="none">
-				<line x1="3" y1="5" x2="17" y2="5"/><line x1="3" y1="10" x2="17" y2="10"/><line x1="3" y1="15" x2="17" y2="15"/>
-			</svg>
-		</button>
-		<div class="rf-docs-toolbar__breadcrumb">
-			{#if breadcrumbCategory}
-				<span class="rf-docs-breadcrumb-category">{breadcrumbCategory}</span>
-				<span class="rf-docs-breadcrumb-sep">&rsaquo;</span>
-			{/if}
-			<span class="rf-docs-breadcrumb-page">{title}</span>
-		</div>
-	</div>
-{/if}
-
-<!-- Mobile nav panel -->
-{#if navOpen}
-	<div class="rf-mobile-panel rf-mobile-panel--nav" role="dialog" aria-label="Page navigation">
-		<div class="rf-mobile-panel__body">
-			{#if regions.nav}
-				<Renderer node={regions.nav.content} />
-			{/if}
-		</div>
-	</div>
-{/if}
-
-{#if regions.nav}
-	<aside class="rf-docs-sidebar">
-		<Renderer node={regions.nav.content} />
-	</aside>
-{/if}
-
-<main class="rf-docs-content" class:rf-docs-content--has-nav={hasNav}>
-	<div class="rf-docs-content__inner" class:rf-docs-content__inner--has-toc={showToc}>
-		<div class="rf-docs-content__body">
-			<Renderer node={renderable} />
-		</div>
-		{#if showToc}
-			<aside class="rf-docs-toc">
-				<OnThisPage headings={tocHeadings} />
-			</aside>
-		{/if}
-	</div>
-</main>