@refrakt-md/lumina 0.4.0 → 0.5.1

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}

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>