@refrakt-md/lumina 0.4.0 → 0.5.0

package/svelte/layouts/DocsLayout.svelte

@@ -0,0 +1,155 @@
+<script lang="ts">
+	import { Renderer } from '@refrakt-md/svelte';
+
+	let { title, regions, renderable, url, pages }: {
+		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 }>;
+	} = $props();
+
+	const hasNav = $derived(!!regions.nav);
+
+	// 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">
+		<Renderer node={renderable} />
+	</div>
+</main>

package/{sveltekit → svelte}/manifest.json

@@ -2,7 +2,7 @@
 	"name": "lumina",
 	"version": "0.1.0",
 	"description": "A clean, light documentation theme for refrakt.md",
-	"target": "sveltekit",
+	"target": "svelte",
 	"designTokens": "tokens.css",
 
 	"layouts": {

package/svelte/registry.ts

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

package/svelte/tokens.css

@@ -0,0 +1,6 @@
+/* ──────────────────────────────────────────────
+   Lumina Theme — Token Bridge
+   Imports identity tokens + global styles (--rf-* prefix).
+   ────────────────────────────────────────────── */
+
+@import '../index.css';

package/sveltekit/components/Accordion.svelte

@@ -1,26 +0,0 @@
-<script lang="ts">
-	import type { SerializedTag } from '@refrakt-md/svelte';
-	import type { Snippet } from 'svelte';
-
-	let { tag, children }: { tag: SerializedTag; children: Snippet } = $props();
-
-	const isGroup = $derived(tag.attributes.typeof === 'Accordion');
-</script>
-
-{#if isGroup}
-	<div class="rf-accordion">
-		{@render children()}
-	</div>
-{:else}
-	{@const name = tag.children
-		.find((c) => c?.name === 'span' && c?.attributes?.property === 'name')
-		?.children?.[0] ?? ''}
-	<details class="rf-accordion-item">
-		<summary class="rf-accordion-item__header">
-			<span class="rf-accordion-item__title">{name}</span>
-		</summary>
-		<div class="rf-accordion-item__body">
-			{@render children()}
-		</div>
-	</details>
-{/if}

package/sveltekit/components/Bento.svelte

@@ -1,50 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-	import type { SerializedTag, RendererNode } from '@refrakt-md/svelte';
-	import { Renderer } from '@refrakt-md/svelte';
-
-	let { tag, children }: { tag: SerializedTag; children: Snippet } = $props();
-
-	function isTag(c: RendererNode): c is SerializedTag {
-		return typeof c === 'object' && c !== null && 'name' in c;
-	}
-
-	const isGroup = tag.attributes.typeof === 'Bento';
-
-	// For Bento container
-	const metas = isGroup ? tag.children.filter((c: any) => c?.name === 'meta') : [];
-	const gap = isGroup ? metas[0]?.attributes?.content || '1rem' : '1rem';
-	const columns = isGroup ? parseInt(metas[1]?.attributes?.content || '4', 10) : 4;
-
-	// Find the grid container in tag.children
-	const gridEl = isGroup
-		? tag.children.find((c): c is SerializedTag => isTag(c) && c.attributes?.['data-name'] === 'grid')
-		: undefined;
-
-	// For BentoCell
-	const cellName = !isGroup
-		? tag.children.find((c: any) => c?.name === 'span' && c?.attributes?.property === 'name')?.children?.[0] || ''
-		: '';
-	const cellSize = !isGroup
-		? tag.attributes['data-size'] || 'small'
-		: 'small';
-</script>
-
-{#if isGroup}
-	<section class="rf-bento">
-		<div class="rf-bento__grid" style:grid-template-columns="repeat({columns}, 1fr)" style:gap={gap}>
-			{#if gridEl}
-				<Renderer node={gridEl.children} />
-			{/if}
-		</div>
-	</section>
-{:else}
-	<div class="rf-bento-cell rf-bento-cell--{cellSize}">
-		{#if cellName}
-			<h3 class="rf-bento-cell__title">{cellName}</h3>
-		{/if}
-		<div class="rf-bento-cell__body">
-			{@render children()}
-		</div>
-	</div>
-{/if}

package/sveltekit/components/Chart.svelte

@@ -1,121 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-	import type { SerializedTag } from '@refrakt-md/svelte';
-
-	let { tag, children }: { tag: SerializedTag; children: Snippet } = $props();
-
-	const chartType = tag.children.find((c: any) => c?.name === 'meta' && c?.attributes?.property === 'type')?.attributes?.content || 'bar';
-	const title = tag.children.find((c: any) => c?.name === 'meta' && c?.attributes?.property === 'title')?.attributes?.content || '';
-	const stacked = tag.children.find((c: any) => c?.name === 'meta' && c?.attributes?.property === 'stacked')?.attributes?.content === 'true';
-
-	const dataJson = tag.children.find((c: any) => c?.name === 'meta' && c?.attributes?.['data-name'] === 'data')?.attributes?.content || '{}';
-	let chartData: { headers: string[]; rows: string[][] } = { headers: [], rows: [] };
-	try {
-		chartData = JSON.parse(dataJson);
-	} catch {}
-
-	const colors = [
-		'var(--rf-color-info)',
-		'var(--rf-color-success)',
-		'var(--rf-color-warning)',
-		'var(--rf-color-danger)',
-		'#7c3aed',
-		'#0891b2',
-	];
-
-	const svgWidth = 600;
-	const svgHeight = 300;
-	const padding = { top: 30, right: 20, bottom: 40, left: 50 };
-	const chartWidth = svgWidth - padding.left - padding.right;
-	const chartHeight = svgHeight - padding.top - padding.bottom;
-
-	const labels = chartData.rows.map(r => r[0] || '');
-	const series = chartData.headers.slice(1);
-	const values = chartData.rows.map(r => r.slice(1).map(v => parseFloat(v) || 0));
-
-	const allValues = values.flat();
-	const maxValue = Math.max(...allValues, 1);
-
-	const barGroupWidth = chartWidth / Math.max(labels.length, 1);
-	const barWidth = barGroupWidth / Math.max(series.length + 1, 2);
-</script>
-
-<figure class="rf-chart" typeof="Chart">
-	{#if title}
-		<figcaption class="rf-chart__title">{title}</figcaption>
-	{/if}
-	<div class="rf-chart__container">
-		<svg viewBox="0 0 {svgWidth} {svgHeight}" class="rf-chart__svg">
-			<line
-				x1={padding.left} y1={padding.top}
-				x2={padding.left} y2={svgHeight - padding.bottom}
-				stroke="var(--rf-color-border)" stroke-width="1"
-			/>
-			<line
-				x1={padding.left} y1={svgHeight - padding.bottom}
-				x2={svgWidth - padding.right} y2={svgHeight - padding.bottom}
-				stroke="var(--rf-color-border)" stroke-width="1"
-			/>
-
-			{#if chartType === 'bar'}
-				{#each labels as label, i}
-					{#each series as _, si}
-						<rect
-							x={padding.left + i * barGroupWidth + si * barWidth + barWidth * 0.25}
-							y={padding.top + chartHeight - (values[i][si] / maxValue) * chartHeight}
-							width={barWidth * 0.75}
-							height={(values[i][si] / maxValue) * chartHeight}
-							style="fill: {colors[si % colors.length]}"
-							rx="2"
-						/>
-					{/each}
-					<text
-						x={padding.left + i * barGroupWidth + barGroupWidth / 2}
-						y={svgHeight - padding.bottom + 20}
-						text-anchor="middle"
-						font-size="12"
-						fill="var(--rf-color-muted)"
-					>{label}</text>
-				{/each}
-			{:else if chartType === 'line'}
-				{#each series as _, si}
-					<polyline
-						points={labels.map((_, i) =>
-							`${padding.left + i * barGroupWidth + barGroupWidth / 2},${padding.top + chartHeight - (values[i][si] / maxValue) * chartHeight}`
-						).join(' ')}
-						fill="none"
-						style="stroke: {colors[si % colors.length]}"
-						stroke-width="2"
-					/>
-					{#each labels as _, i}
-						<circle
-							cx={padding.left + i * barGroupWidth + barGroupWidth / 2}
-							cy={padding.top + chartHeight - (values[i][si] / maxValue) * chartHeight}
-							r="4"
-							style="fill: {colors[si % colors.length]}"
-						/>
-					{/each}
-				{/each}
-				{#each labels as label, i}
-					<text
-						x={padding.left + i * barGroupWidth + barGroupWidth / 2}
-						y={svgHeight - padding.bottom + 20}
-						text-anchor="middle"
-						font-size="12"
-						fill="var(--rf-color-muted)"
-					>{label}</text>
-				{/each}
-			{/if}
-		</svg>
-	</div>
-	{#if series.length > 1}
-		<div class="rf-chart__legend">
-			{#each series as name, i}
-				<span class="rf-chart__legend-item">
-					<span class="rf-chart__legend-color" style="background: {colors[i % colors.length]};"></span>
-					{name}
-				</span>
-			{/each}
-		</div>
-	{/if}
-</figure>

package/sveltekit/components/CodeGroup.svelte

@@ -1,88 +0,0 @@
-<script lang="ts">
-	import type { SerializedTag, RendererNode } from '@refrakt-md/svelte';
-	import { Renderer } from '@refrakt-md/svelte';
-	import type { Snippet } from 'svelte';
-
-	let { tag, children }: { tag: SerializedTag; children: Snippet } = $props();
-
-	function isTag(n: RendererNode): n is SerializedTag {
-		return n !== null && typeof n === 'object' && !Array.isArray(n) && (n as any).$$mdtype === 'Tag';
-	}
-
-	function getTextContent(node: RendererNode): 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 '';
-	}
-
-	const title = $derived.by(() => {
-		for (const child of tag.children) {
-			if (isTag(child) && child.attributes?.property === 'title') {
-				return getTextContent(child);
-			}
-		}
-		return '';
-	});
-
-	const { tabs, panels } = $derived.by(() => {
-		const tabs: { name: string }[] = [];
-		const panels: { children: RendererNode[] }[] = [];
-		for (const child of tag.children) {
-			if (!isTag(child) || child.name !== 'ul') continue;
-			for (const item of child.children) {
-				if (!isTag(item)) continue;
-				if (item.attributes?.typeof === 'Tab') {
-					const nameNode = item.children.find(
-						(c): c is SerializedTag => isTag(c) && c.attributes?.property === 'name'
-					);
-					tabs.push({ name: (nameNode ? getTextContent(nameNode) : getTextContent(item)).trim() });
-				} else if (item.attributes?.typeof === 'TabPanel') {
-					panels.push({ children: item.children });
-				}
-			}
-		}
-		return { tabs, panels };
-	});
-
-	let activeIndex = $state(0);
-</script>
-
-{#if tabs.length > 0}
-	<div class="rf-codegroup">
-		<div class="rf-codegroup__topbar">
-			<span class="rf-codegroup__dot"></span>
-			<span class="rf-codegroup__dot"></span>
-			<span class="rf-codegroup__dot"></span>
-			{#if title}
-				<span class="rf-codegroup__title">{title}</span>
-			{/if}
-		</div>
-		{#if tabs.length > 1}
-			<div class="rf-codegroup__tabs" role="tablist">
-				{#each tabs as tab, i}
-					<button
-						class="rf-codegroup__tab {i === activeIndex ? 'rf-codegroup__tab--active' : ''}"
-						role="tab"
-						aria-selected={i === activeIndex}
-						onclick={() => activeIndex = i}
-					>
-						{tab.name}
-					</button>
-				{/each}
-			</div>
-		{/if}
-		<div class="rf-codegroup__content">
-			{#each panels as panel, i}
-				{#if i === activeIndex}
-					<div class="rf-codegroup__panel" role="tabpanel">
-						<Renderer node={panel.children} />
-					</div>
-				{/if}
-			{/each}
-		</div>
-	</div>
-{:else}
-	{@render children()}
-{/if}

package/sveltekit/components/Comparison.svelte

@@ -1,209 +0,0 @@
-<script lang="ts">
-	import type { SerializedTag, RendererNode } from '@refrakt-md/svelte';
-	import { Renderer } from '@refrakt-md/svelte';
-	import type { Snippet } from 'svelte';
-
-	let { tag, children }: { tag: SerializedTag; children: Snippet } = $props();
-
-	const typeName = tag.attributes.typeof;
-
-	function isTag(n: RendererNode): n is SerializedTag {
-		return n !== null && typeof n === 'object' && !Array.isArray(n) && (n as any).$$mdtype === 'Tag';
-	}
-
-	function meta(node: SerializedTag, prop: string): string {
-		const child = node.children.find(
-			(c): c is SerializedTag => isTag(c) && c.name === 'meta' && c.attributes?.property === prop
-		);
-		return child?.attributes?.content ?? '';
-	}
-
-	function propText(node: SerializedTag, prop: string): string {
-		const child = node.children.find(
-			(c): c is SerializedTag => isTag(c) && c.attributes?.property === prop
-		);
-		if (!child) return '';
-		return child.children.filter((c): c is string => typeof c === 'string').join('');
-	}
-
-	function findByType(node: SerializedTag, type: string): SerializedTag[] {
-		const results: SerializedTag[] = [];
-		function walk(children: RendererNode[]) {
-			for (const c of children) {
-				if (isTag(c)) {
-					if (c.attributes?.typeof === type) {
-						results.push(c);
-					} else {
-						walk(c.children);
-					}
-				} else if (Array.isArray(c)) {
-					walk(c);
-				}
-			}
-		}
-		walk(node.children);
-		return results;
-	}
-
-	function findRef(node: SerializedTag, name: string): SerializedTag | undefined {
-		for (const c of node.children) {
-			if (isTag(c) && c.attributes?.['data-name'] === name) return c;
-		}
-		return undefined;
-	}
-
-	const isComparison = typeName === 'Comparison';
-	const layout = isComparison ? (meta(tag, 'layout') || 'table') : '';
-	const verdict = isComparison ? meta(tag, 'verdict') : '';
-	const highlightedName = isComparison ? meta(tag, 'highlighted') : '';
-	const labelsPosition = isComparison ? (meta(tag, 'labels') || 'left') : '';
-	const rowLabelsJson = isComparison ? meta(tag, 'rowLabels') : '[]';
-	const rowLabels: string[] = isComparison ? (() => { try { return JSON.parse(rowLabelsJson); } catch { return []; } })() : [];
-	const columns = isComparison ? findByType(tag, 'ComparisonColumn') : [];
-
-	const titleTag = isComparison ? tag.children.find(
-		(c): c is SerializedTag => isTag(c) && /^h[1-6]$/.test(c.name)
-	) : undefined;
-	const titleText = titleTag ? titleTag.children.filter((c): c is string => typeof c === 'string').join('') : '';
-
-	interface ColumnData {
-		name: string;
-		highlighted: boolean;
-		rows: SerializedTag[];
-	}
-
-	const columnData: ColumnData[] = isComparison ? columns.map(col => ({
-		name: propText(col, 'name'),
-		highlighted: meta(col, 'highlighted') === 'true',
-		rows: findByType(col, 'ComparisonRow'),
-	})) : [];
-
-	const isColumn = typeName === 'ComparisonColumn';
-	const colName = isColumn ? propText(tag, 'name') : '';
-	const colHighlighted = isColumn ? meta(tag, 'highlighted') === 'true' : false;
-
-	const isRow = typeName === 'ComparisonRow';
-	const rowLabel = isRow ? propText(tag, 'label') : '';
-	const rowType = isRow ? meta(tag, 'rowType') : '';
-	const rowBody = isRow ? findRef(tag, 'body') : undefined;
-</script>
-
-{#if isComparison}
-	<section class="rf-comparison rf-comparison--{layout}">
-		{#if titleText}
-			<h2 class="rf-comparison__title">{titleText}</h2>
-		{/if}
-
-		{#if layout === 'cards'}
-			<div class="rf-comparison__cards">
-				{#each columnData as col}
-					<div class="rf-comparison-card {col.highlighted ? 'rf-comparison-card--highlighted' : ''}">
-						{#if col.highlighted}
-							<div class="rf-comparison-card__badge">Recommended</div>
-						{/if}
-						<h3 class="rf-comparison-card__name">{col.name}</h3>
-						<ul class="rf-comparison-card__rows">
-							{#each col.rows as row}
-								{@const rType = meta(row, 'rowType')}
-								{@const rLabel = propText(row, 'label')}
-								{@const rBody = findRef(row, 'body')}
-								{#if rType !== 'empty'}
-									<li class="rf-comparison-card__row {rType === 'negative' ? 'rf-comparison-card__row--negative' : ''} {rType === 'callout' ? 'rf-comparison-card__row--callout' : ''}">
-										{#if rType === 'check'}
-											<span class="rf-comparison__row-icon rf-comparison__row-icon--check" aria-label="Supported">&#10003;</span>
-											{#if rLabel}<strong>{rLabel}</strong>{/if}
-											{#if rBody}<Renderer node={rBody.children} />{/if}
-										{:else if rType === 'cross'}
-											<span class="rf-comparison__row-icon rf-comparison__row-icon--cross" aria-label="Not supported">&#10007;</span>
-											{#if rLabel}<strong>{rLabel}</strong>{/if}
-											{#if rBody}<Renderer node={rBody.children} />{/if}
-										{:else if rType === 'negative'}
-											{#if rLabel}<strong>{rLabel}</strong>{/if}
-											{#if rBody}<span class="rf-comparison__negative"><Renderer node={rBody.children} /></span>{/if}
-										{:else if rType === 'callout'}
-											<div class="rf-comparison__callout-badge">
-												{#if rBody}<Renderer node={rBody.children} />{/if}
-											</div>
-										{:else}
-											{#if rLabel}<strong>{rLabel}</strong>{/if}
-											{#if rBody}<Renderer node={rBody.children} />{/if}
-										{/if}
-									</li>
-								{/if}
-							{/each}
-						</ul>
-					</div>
-				{/each}
-			</div>
-		{:else}
-			<div class="rf-comparison__table-wrapper">
-				<table class="rf-comparison__table">
-					<thead>
-						<tr>
-							{#if labelsPosition !== 'hidden'}
-								<th class="rf-comparison__label-col"></th>
-							{/if}
-							{#each columnData as col}
-								<th class="{col.highlighted ? 'rf-comparison__col-header--highlighted' : ''}">
-									{col.name}
-									{#if col.highlighted}
-										<span class="rf-comparison__recommended-badge">Recommended</span>
-									{/if}
-								</th>
-							{/each}
-						</tr>
-					</thead>
-					<tbody>
-						{#each rowLabels as label, i}
-							<tr>
-								{#if labelsPosition !== 'hidden'}
-									<th class="rf-comparison__row-label" scope="row">{label}</th>
-								{/if}
-								{#each columnData as col}
-									{@const row = col.rows[i]}
-									{@const rType = row ? meta(row, 'rowType') : 'empty'}
-									{@const rBody = row ? findRef(row, 'body') : undefined}
-									<td class="rf-comparison__cell {col.highlighted ? 'rf-comparison__cell--highlighted' : ''} {rType === 'empty' ? 'rf-comparison__cell--empty' : ''}">
-										{#if rType === 'check'}
-											<span class="rf-comparison__row-icon rf-comparison__row-icon--check" aria-label="Supported">&#10003;</span>
-										{:else if rType === 'cross'}
-											<span class="rf-comparison__row-icon rf-comparison__row-icon--cross" aria-label="Not supported">&#10007;</span>
-										{:else if rType === 'negative'}
-											{#if rBody}
-												<span class="rf-comparison__negative"><Renderer node={rBody.children} /></span>
-											{/if}
-										{:else if rType === 'empty'}
-											<span class="rf-comparison__cell--empty" aria-label="Not applicable">&mdash;</span>
-										{:else if rType === 'callout'}
-											{#if rBody}
-												<span class="rf-comparison__callout-badge"><Renderer node={rBody.children} /></span>
-											{/if}
-										{:else}
-											{#if rBody}
-												<Renderer node={rBody.children} />
-											{/if}
-										{/if}
-									</td>
-								{/each}
-							</tr>
-						{/each}
-					</tbody>
-				</table>
-			</div>
-		{/if}
-
-		{#if verdict}
-			<p class="rf-comparison__verdict">{verdict}</p>
-		{/if}
-	</section>
-{:else if isColumn}
-	<div class="rf-comparison-column {colHighlighted ? 'rf-comparison-column--highlighted' : ''}">
-		<h3>{colName}</h3>
-		{@render children()}
-	</div>
-{:else if isRow}
-	<div class="rf-comparison-row rf-comparison-row--{rowType}">
-		{#if rowLabel}<strong>{rowLabel}</strong>{/if}
-		{@render children()}
-	</div>
-{/if}