@refrakt-md/lumina 0.4.0 → 0.5.0

package/sveltekit/components/DataTable.svelte

@@ -1,154 +0,0 @@
-<script lang="ts">
-	import { onMount } from 'svelte';
-	import type { Snippet } from 'svelte';
-	import type { SerializedTag } from '@refrakt-md/svelte';
-
-	let { tag, children }: { tag: SerializedTag; children: Snippet } = $props();
-
-	const sortable = (tag.children.find((c: any) => c?.name === 'meta' && c?.attributes?.property === 'sortable')?.attributes?.content || '').split(',').map((s: string) => s.trim()).filter(Boolean);
-	const searchable = tag.children.find((c: any) => c?.name === 'meta' && c?.attributes?.property === 'searchable')?.attributes?.content === 'true';
-	const pageSize = parseInt(tag.children.find((c: any) => c?.name === 'meta' && c?.attributes?.property === 'pageSize')?.attributes?.content || '0', 10);
-	const defaultSort = tag.children.find((c: any) => c?.name === 'meta' && c?.attributes?.property === 'defaultSort')?.attributes?.content || '';
-
-	let searchQuery = $state('');
-	let sortColumn = $state(defaultSort);
-	let sortDirection = $state<'asc' | 'desc'>('asc');
-	let currentPage = $state(0);
-
-	let contentEl: HTMLDivElement;
-	let headers: string[] = [];
-	let allRows: { el: HTMLTableRowElement; cells: string[] }[] = [];
-	let totalFiltered = $state(0);
-
-	function toggleSort(column: string) {
-		if (!sortable.includes(column)) return;
-		if (sortColumn === column) {
-			sortDirection = sortDirection === 'asc' ? 'desc' : 'asc';
-		} else {
-			sortColumn = column;
-			sortDirection = 'asc';
-		}
-		currentPage = 0;
-	}
-
-	onMount(() => {
-		const table = contentEl?.querySelector('table');
-		if (!table) return;
-
-		const thEls = table.querySelectorAll('th');
-		headers = Array.from(thEls).map(th => th.textContent?.trim() || '');
-
-		thEls.forEach((th) => {
-			const name = th.textContent?.trim() || '';
-			if (sortable.includes(name)) {
-				th.style.cursor = 'pointer';
-				th.style.userSelect = 'none';
-				th.addEventListener('click', () => toggleSort(name));
-			}
-		});
-
-		const bodyRows = table.querySelectorAll('tbody tr');
-		const rows = bodyRows.length > 0 ? bodyRows : table.querySelectorAll('tr:not(:first-child)');
-		allRows = Array.from(rows).map(tr => ({
-			el: tr as HTMLTableRowElement,
-			cells: Array.from(tr.querySelectorAll('td')).map(td => td.textContent?.trim() || ''),
-		}));
-
-		totalFiltered = allRows.length;
-	});
-
-	$effect(() => {
-		if (!allRows.length) return;
-
-		let filtered = [...allRows];
-
-		if (searchQuery) {
-			const q = searchQuery.toLowerCase();
-			filtered = filtered.filter(r => r.cells.some(c => c.toLowerCase().includes(q)));
-		}
-
-		if (sortColumn) {
-			const idx = headers.indexOf(sortColumn);
-			if (idx >= 0) {
-				filtered.sort((a, b) => {
-					const cmp = a.cells[idx].localeCompare(b.cells[idx], undefined, { numeric: true });
-					return sortDirection === 'asc' ? cmp : -cmp;
-				});
-			}
-		}
-
-		totalFiltered = filtered.length;
-
-		const visible = pageSize > 0
-			? filtered.slice(currentPage * pageSize, (currentPage + 1) * pageSize)
-			: filtered;
-
-		const tbody = contentEl?.querySelector('tbody') || contentEl?.querySelector('table');
-		if (!tbody) return;
-
-		allRows.forEach(r => r.el.style.display = 'none');
-		visible.forEach(r => {
-			r.el.style.display = '';
-			tbody.appendChild(r.el);
-		});
-
-		const thEls = contentEl?.querySelectorAll('th');
-		thEls?.forEach(th => {
-			const name = th.textContent?.replace(/[▲▼]/g, '').trim() || '';
-			const indicator = th.querySelector('.sort-indicator');
-			if (sortable.includes(name)) {
-				if (sortColumn === name) {
-					if (indicator) {
-						indicator.textContent = sortDirection === 'asc' ? ' ▲' : ' ▼';
-					} else {
-						const span = document.createElement('span');
-						span.className = 'sort-indicator';
-						span.textContent = sortDirection === 'asc' ? ' ▲' : ' ▼';
-						th.appendChild(span);
-					}
-				} else {
-					if (indicator) indicator.remove();
-				}
-			}
-		});
-	});
-
-	const totalPages = $derived(pageSize > 0 ? Math.ceil(totalFiltered / pageSize) : 1);
-</script>
-
-<div class="rf-datatable" typeof="DataTable">
-	{#if searchable}
-		<div class="rf-datatable__toolbar">
-			<input
-				type="search"
-				placeholder="Filter rows..."
-				bind:value={searchQuery}
-				class="rf-datatable__input"
-			/>
-		</div>
-	{/if}
-	<div class="rf-datatable__content" bind:this={contentEl}>
-		{@render children()}
-	</div>
-	{#if pageSize > 0 && totalPages > 1}
-		<div class="rf-datatable__pagination">
-			<button
-				class="rf-datatable__page-btn"
-				disabled={currentPage === 0}
-				onclick={() => currentPage--}
-			>
-				&larr; Prev
-			</button>
-			<span class="rf-datatable__page-info">
-				{currentPage + 1} / {totalPages}
-			</span>
-			<button
-				class="rf-datatable__page-btn"
-				disabled={currentPage >= totalPages - 1}
-				onclick={() => currentPage++}
-			>
-				Next &rarr;
-			</button>
-		</div>
-	{/if}
-</div>

package/sveltekit/components/Details.svelte

@@ -1,23 +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 summary = $derived(tag.children
-		.find((c: any) => c?.name === 'span' && c?.attributes?.property === 'summary')
-		?.children?.[0] ?? 'Details');
-
-	const isOpen = $derived(tag.children
-		.find((c: any) => c?.name === 'meta' && c?.attributes?.property === 'open')
-		?.attributes?.content ?? false);
-</script>
-
-<details class="rf-details" open={isOpen || undefined}>
-	<summary class="rf-details__summary">
-		<span>{summary}</span>
-	</summary>
-	<div class="rf-details__body">
-		{@render children()}
-	</div>
-</details>

package/sveltekit/components/Diagram.svelte

@@ -1,45 +0,0 @@
-<script lang="ts">
-	import { onMount } from 'svelte';
-	import type { Snippet } from 'svelte';
-	import type { SerializedTag } from '@refrakt-md/svelte';
-
-	let { tag, children }: { tag: SerializedTag; children: Snippet } = $props();
-
-	const language = tag.children.find((c: any) => c?.name === 'meta' && c?.attributes?.property === 'language')?.attributes?.content || 'mermaid';
-	const title = tag.children.find((c: any) => c?.name === 'meta' && c?.attributes?.property === 'title')?.attributes?.content || '';
-	const source = tag.children.find((c: any) => c?.name === 'meta' && c?.attributes?.['data-name'] === 'source')?.attributes?.content || '';
-
-	let container: HTMLDivElement;
-	let rendered = $state(false);
-
-	onMount(async () => {
-		if (language === 'mermaid' && source) {
-			try {
-				const cdn = 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
-				const mermaid = (await import(/* @vite-ignore */ cdn)).default;
-				mermaid.initialize({ startOnLoad: false, theme: 'default' });
-				const { svg } = await mermaid.render('mermaid-' + Math.random().toString(36).slice(2), source);
-				container.innerHTML = svg;
-				rendered = true;
-			} catch (e) {
-				container.textContent = source;
-			}
-		} else if (language === 'ascii' && source) {
-			container.textContent = source;
-			container.style.fontFamily = 'var(--rf-font-mono)';
-			container.style.whiteSpace = 'pre';
-			rendered = true;
-		}
-	});
-</script>
-
-<figure class="rf-diagram" typeof="Diagram">
-	{#if title}
-		<figcaption class="rf-diagram__title">{title}</figcaption>
-	{/if}
-	<div class="rf-diagram__container" bind:this={container}>
-		{#if !rendered}
-			<pre class="rf-diagram__source"><code>{source}</code></pre>
-		{/if}
-	</div>
-</figure>

package/sveltekit/components/Embed.svelte

@@ -1,36 +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 getMeta = (prop: string) => tag.children
-		.find((c: any) => c?.name === 'meta' && c?.attributes?.property === prop)
-		?.attributes?.content;
-
-	const embedUrl = getMeta('embedUrl') || getMeta('url') || '';
-	const title = getMeta('title') || 'Embedded content';
-	const aspect = getMeta('aspect') || '16:9';
-	const provider = getMeta('provider') || '';
-
-	const [w, h] = aspect.split(':').map(Number);
-	const paddingPercent = h && w ? (h / w) * 100 : 56.25;
-</script>
-
-<figure class="rf-embed" data-provider={provider || undefined}>
-	{#if embedUrl}
-		<div class="rf-embed__wrapper" style="padding-bottom: {paddingPercent}%">
-			<iframe
-				src={embedUrl}
-				{title}
-				frameborder="0"
-				allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-				allowfullscreen
-				loading="lazy"
-			></iframe>
-		</div>
-	{/if}
-	<div class="rf-embed__fallback">
-		{@render children()}
-	</div>
-</figure>

package/sveltekit/components/Form.svelte

@@ -1,194 +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 isForm = tag.attributes.typeof === 'Form';
-
-	// Form-level properties
-	const action = isForm
-		? tag.children.find((c: any) => c?.name === 'meta' && c?.attributes?.property === 'action')?.attributes?.content || ''
-		: '';
-	const method = isForm
-		? tag.children.find((c: any) => c?.name === 'meta' && c?.attributes?.property === 'method')?.attributes?.content || 'POST'
-		: 'POST';
-	const success = isForm
-		? tag.children.find((c: any) => c?.name === 'meta' && c?.attributes?.property === 'success')?.attributes?.content || ''
-		: '';
-	const errorMsg = isForm
-		? tag.children.find((c: any) => c?.name === 'meta' && c?.attributes?.property === 'error')?.attributes?.content || ''
-		: '';
-	const formStyle = isForm
-		? tag.attributes['data-style'] || 'stacked'
-		: 'stacked';
-	const honeypot = isForm
-		? tag.children.find((c: any) => c?.name === 'meta' && c?.attributes?.property === 'honeypot')?.attributes?.content !== 'false'
-		: true;
-
-	// FormField properties
-	const fieldName = !isForm
-		? tag.children.find((c: any) => c?.name === 'span' && c?.attributes?.property === 'name')?.children?.[0] || ''
-		: '';
-	const fieldType = !isForm
-		? tag.attributes['data-field-type'] || 'text'
-		: '';
-	const required = !isForm
-		? tag.children.find((c: any) => c?.name === 'meta' && c?.attributes?.property === 'required')?.attributes?.content === 'true'
-		: false;
-	const placeholder = !isForm
-		? tag.children.find((c: any) => c?.name === 'meta' && c?.attributes?.property === 'placeholder')?.attributes?.content || ''
-		: '';
-	const options = !isForm
-		? (tag.children.find((c: any) => c?.name === 'meta' && c?.attributes?.property === 'options')?.attributes?.content || '')
-			.split(',')
-			.map((o: string) => o.trim())
-			.filter(Boolean)
-		: [];
-
-	const fieldId = !isForm ? `field-${fieldName.toLowerCase().replace(/\s+/g, '-')}` : '';
-
-	// Form submission state
-	let status = $state<'idle' | 'submitting' | 'success' | 'error'>('idle');
-	let statusMessage = $state('');
-
-	async function handleSubmit(e: SubmitEvent) {
-		e.preventDefault();
-		if (!action) return;
-
-		status = 'submitting';
-		const formData = new FormData(e.target as HTMLFormElement);
-
-		try {
-			const response = await fetch(action, {
-				method: method,
-				body: formData,
-				headers: { 'Accept': 'application/json' },
-			});
-
-			if (response.ok) {
-				status = 'success';
-				statusMessage = success || 'Form submitted successfully.';
-				(e.target as HTMLFormElement).reset();
-			} else {
-				status = 'error';
-				statusMessage = errorMsg || 'Something went wrong. Please try again.';
-			}
-		} catch {
-			status = 'error';
-			statusMessage = errorMsg || 'Something went wrong. Please try again.';
-		}
-	}
-</script>
-
-{#if isForm}
-	<form
-		class="rf-form {formStyle !== 'stacked' ? `rf-form--${formStyle}` : ''}"
-		action={action}
-		method={method}
-		onsubmit={handleSubmit}
-	>
-		{#if honeypot}
-			<div class="rf-form__hp" aria-hidden="true">
-				<input type="text" name="_gotcha" autocomplete="off" tabindex={-1} />
-			</div>
-		{/if}
-		{@render children()}
-		{#if status === 'submitting'}
-			<div class="rf-form__status rf-form__status--submitting" role="status">Submitting...</div>
-		{:else if status === 'success'}
-			<div class="rf-form__status rf-form__status--success" role="alert">{statusMessage}</div>
-		{:else if status === 'error'}
-			<div class="rf-form__status rf-form__status--error" role="alert">{statusMessage}</div>
-		{/if}
-	</form>
-{:else if fieldType === 'group'}
-	<fieldset class="rf-form-fieldset">
-		<legend>{fieldName}</legend>
-		{@render children()}
-	</fieldset>
-{:else if fieldType === 'submit'}
-	<button type="submit" class="rf-form__submit">{fieldName}</button>
-{:else if fieldType === 'separator'}
-	<hr class="rf-form__separator" />
-{:else if fieldType === 'help'}
-	<p class="rf-form__help">{fieldName}</p>
-{:else if fieldType === 'description'}
-	<p class="rf-form__text">{fieldName}</p>
-{:else if fieldType === 'textarea'}
-	<div class="rf-form-field">
-		<label for={fieldId}>
-			{fieldName}
-			{#if required}<span class="rf-form-field__required" aria-hidden="true">*</span>{/if}
-		</label>
-		<textarea
-			id={fieldId}
-			name={fieldId}
-			placeholder={placeholder}
-			required={required}
-			rows={4}
-		></textarea>
-	</div>
-{:else if fieldType === 'select'}
-	<div class="rf-form-field">
-		<label for={fieldId}>
-			{fieldName}
-			{#if required}<span class="rf-form-field__required" aria-hidden="true">*</span>{/if}
-		</label>
-		<select id={fieldId} name={fieldId} required={required}>
-			<option value="" disabled selected>Select an option</option>
-			{#each options as option}
-				<option value={option}>{option}</option>
-			{/each}
-		</select>
-	</div>
-{:else if fieldType === 'radio'}
-	<fieldset class="rf-form-field rf-form-choice-group">
-		<legend>
-			{fieldName}
-			{#if required}<span class="rf-form-field__required" aria-hidden="true">*</span>{/if}
-		</legend>
-		{#each options as option, i}
-			<label class="rf-form-choice">
-				<input
-					type="radio"
-					name={fieldId}
-					value={option}
-					required={required && i === 0}
-				/>
-				<span>{option}</span>
-			</label>
-		{/each}
-	</fieldset>
-{:else if fieldType === 'checkbox'}
-	<fieldset class="rf-form-field rf-form-choice-group">
-		<legend>
-			{fieldName}
-			{#if required}<span class="rf-form-field__required" aria-hidden="true">*</span>{/if}
-		</legend>
-		{#each options as option}
-			<label class="rf-form-choice">
-				<input
-					type="checkbox"
-					name={fieldId}
-					value={option}
-				/>
-				<span>{option}</span>
-			</label>
-		{/each}
-	</fieldset>
-{:else}
-	<div class="rf-form-field">
-		<label for={fieldId}>
-			{fieldName}
-			{#if required}<span class="rf-form-field__required" aria-hidden="true">*</span>{/if}
-		</label>
-		<input
-			type={fieldType}
-			id={fieldId}
-			name={fieldId}
-			placeholder={placeholder}
-			required={required}
-		/>
-	</div>
-{/if}

package/sveltekit/components/Grid.svelte

@@ -1,42 +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';
-	}
-
-	const layoutDiv = $derived(tag.children.find(
-		(c): c is SerializedTag => isTag(c) && c.attributes?.['data-layout'] === 'grid'
-	));
-	const columns = $derived(layoutDiv?.attributes?.['data-columns']);
-	const flow = $derived(layoutDiv?.attributes?.['data-flow']);
-	const gridItems = $derived(layoutDiv?.children?.filter((c): c is SerializedTag => isTag(c)) ?? []);
-</script>
-
-{#if gridItems.length > 0}
-	<div
-		class="rf-grid"
-		style:grid-template-columns={columns ? `repeat(${columns}, 1fr)` : undefined}
-		style:grid-auto-flow={flow || undefined}
-	>
-		{#each gridItems as item}
-			{@const colspan = Number(item.attributes?.['data-colspan']) || 1}
-			{@const rowspan = Number(item.attributes?.['data-rowspan']) || 1}
-			<div
-				class="rf-grid__item"
-				style:grid-column={colspan > 1 ? `span ${colspan}` : undefined}
-				style:grid-row={rowspan > 1 ? `span ${rowspan}` : undefined}
-			>
-				<Renderer node={item.children} />
-			</div>
-		{/each}
-	</div>
-{:else}
-	<div class="rf-grid">
-		{@render children()}
-	</div>
-{/if}

package/sveltekit/components/Nav.svelte

@@ -1,62 +0,0 @@
-<script lang="ts">
-	import type { SerializedTag, RendererNode } from '@refrakt-md/svelte';
-	import type { Snippet } from 'svelte';
-	import { getContext } from 'svelte';
-	import { page } from '$app/state';
-
-	interface PageEntry {
-		url: string;
-		title: string;
-		draft: boolean;
-	}
-
-	let { tag, children }: { tag: SerializedTag; children: Snippet } = $props();
-	const typeName = $derived(tag.attributes.typeof);
-	const pages = getContext<PageEntry[]>('pages');
-
-	function getSlug(tag: SerializedTag): string | null {
-		for (const child of tag.children) {
-			if (isTag(child) && child.name === 'span' && child.attributes.property === 'slug') {
-				return getTextContent(child);
-			}
-		}
-		return null;
-	}
-
-	function isTag(node: RendererNode): node is SerializedTag {
-		return node !== null && typeof node === 'object' && !Array.isArray(node) && (node 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 '';
-	}
-
-	function resolvePage(slug: string): PageEntry | undefined {
-		return pages?.find(p => p.url.endsWith('/' + slug) || p.url === '/' + slug);
-	}
-
-	const slug = $derived(typeName === 'NavItem' ? getSlug(tag) : null);
-	const linkedPage = $derived(slug ? resolvePage(slug) : null);
-</script>
-
-{#if typeName === 'Nav'}
-	<nav class="rf-nav">
-		{@render children()}
-	</nav>
-{:else if typeName === 'NavGroup'}
-	<div class="rf-nav-group">
-		{@render children()}
-	</div>
-{:else if typeName === 'NavItem' && linkedPage}
-	<a href={linkedPage.url} class="rf-nav-item__link" class:rf-nav-item__link--active={page.url.pathname === linkedPage.url}>
-		{linkedPage.title}
-	</a>
-{:else}
-	<div class="rf-nav-item">
-		{@render children()}
-	</div>
-{/if}

package/sveltekit/components/Pricing.svelte

@@ -1,20 +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 typeName = tag.attributes.typeof;
-	const isTier = typeName === 'Tier' || typeName === 'FeaturedTier';
-	const isFeatured = typeName === 'FeaturedTier';
-</script>
-
-{#if typeName === 'Pricing'}
-	<section class="rf-pricing">
-		{@render children()}
-	</section>
-{:else if isTier}
-	<li class="rf-tier {isFeatured ? 'rf-tier--featured' : ''}">
-		{@render children()}
-	</li>
-{/if}

package/sveltekit/components/Reveal.svelte

@@ -1,62 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-	import type { SerializedTag } from '@refrakt-md/svelte';
-	import { Renderer } from '@refrakt-md/svelte';
-
-	let { tag, children }: { tag: SerializedTag; children: Snippet } = $props();
-
-	const isGroup = tag.attributes.typeof === 'Reveal';
-
-	const stepName = !isGroup
-		? tag.children.find((c: any) => c?.name === 'span' && c?.attributes?.property === 'name')?.children?.[0] || ''
-		: '';
-
-	const mode = isGroup
-		? tag.children.find((c: any) => c?.name === 'meta')?.attributes?.content || 'click'
-		: 'click';
-
-	const stepsDiv = isGroup
-		? tag.children.find((c: any) => c?.name === 'div' && c?.attributes?.['data-name'] === 'steps')
-		: null;
-
-	const totalSteps = isGroup && stepsDiv
-		? (stepsDiv as any).children?.filter((c: any) => c?.attributes?.typeof === 'RevealStep')?.length ?? 0
-		: 0;
-
-	let visibleCount = $state(1);
-</script>
-
-{#if isGroup}
-	<section class="rf-reveal">
-		{#if stepsDiv}
-			<div class="rf-reveal__steps">
-				{#each (stepsDiv as any).children?.filter((c: any) => c?.attributes?.typeof === 'RevealStep') ?? [] as step, i}
-					<div class="rf-reveal-step {i < visibleCount ? 'rf-reveal-step--visible' : 'rf-reveal-step--hidden'}">
-						<Renderer node={step} />
-					</div>
-				{/each}
-			</div>
-		{:else}
-			{@render children()}
-		{/if}
-		{#if mode === 'click' && visibleCount < totalSteps}
-			<button class="rf-reveal__next" onclick={() => visibleCount++}>
-				Continue
-			</button>
-		{/if}
-		{#if mode === 'click' && visibleCount >= totalSteps && totalSteps > 1}
-			<button class="rf-reveal__reset" onclick={() => visibleCount = 1}>
-				Start over
-			</button>
-		{/if}
-	</section>
-{:else}
-	<div class="rf-reveal-step__content">
-		{#if stepName}
-			<h3 class="rf-reveal-step__title">{stepName}</h3>
-		{/if}
-		<div class="rf-reveal-step__body">
-			{@render children()}
-		</div>
-	</div>
-{/if}

package/sveltekit/components/Storyboard.svelte

@@ -1,41 +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(n: RendererNode): n is SerializedTag {
-		return n !== null && typeof n === 'object' && !Array.isArray(n) && (n as any).$$mdtype === 'Tag';
-	}
-
-	const isGroup = $derived(tag.attributes.typeof === 'Storyboard');
-
-	// Style modifier is consumed by engine; read from data attribute
-	const styleName = $derived(isGroup
-		? tag.attributes['data-style'] || 'clean'
-		: 'clean');
-	const columns = $derived(isGroup
-		? parseInt(tag.children.find((c: any) => c?.name === 'meta' && c?.attributes?.property === 'columns')?.attributes?.content || '3', 10)
-		: 3);
-
-	const panelsEl = $derived(isGroup
-		? tag.children.find((c): c is SerializedTag => isTag(c) && c.attributes?.['data-name'] === 'panels')
-		: undefined);
-</script>
-
-{#if isGroup}
-	<div class="rf-storyboard rf-storyboard--{styleName}" style="--sb-columns: {columns};">
-		<div class="rf-storyboard__panels">
-			{#if panelsEl}
-				<Renderer node={panelsEl.children} />
-			{/if}
-		</div>
-	</div>
-{:else}
-	<div class="rf-storyboard-panel">
-		<div class="rf-storyboard-panel__body">
-			{@render children()}
-		</div>
-	</div>
-{/if}