@refrakt-md/lumina 0.4.0

package/styles/runes/storyboard.css

@@ -0,0 +1,65 @@
+/* Storyboard */
+.rf-storyboard {
+	margin: 1.5rem 0;
+}
+.rf-storyboard__panels {
+	display: grid;
+	grid-template-columns: repeat(var(--sb-columns, 3), 1fr);
+	gap: 1rem;
+}
+/* Clean style */
+.rf-storyboard--clean .rf-storyboard-panel {
+	border: 1px solid var(--rf-color-border);
+	border-radius: var(--rf-radius-md);
+	overflow: hidden;
+}
+.rf-storyboard--clean .rf-storyboard-panel__body {
+	padding: 0.75rem;
+}
+/* Comic style */
+.rf-storyboard--comic .rf-storyboard-panel {
+	border: 3px solid var(--rf-color-text);
+	border-radius: 0.25rem;
+	overflow: hidden;
+	transform: rotate(-0.5deg);
+}
+.rf-storyboard--comic .rf-storyboard-panel:nth-child(even) {
+	transform: rotate(0.5deg);
+}
+.rf-storyboard--comic .rf-storyboard-panel__body {
+	padding: 0.5rem;
+}
+.rf-storyboard--comic .rf-storyboard-panel__body p {
+	font-family: 'Comic Sans MS', 'Chalkboard SE', cursive;
+	font-size: 0.9375rem;
+	text-align: center;
+	margin: 0.5rem 0 0;
+}
+/* Polaroid style */
+.rf-storyboard--polaroid .rf-storyboard-panel {
+	background: white;
+	padding: 0.75rem 0.75rem 2.5rem;
+	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+	border-radius: 2px;
+}
+.rf-storyboard--polaroid .rf-storyboard-panel__body p {
+	font-size: 0.8125rem;
+	text-align: center;
+	color: var(--rf-color-muted);
+	margin: 0.5rem 0 0;
+}
+/* Shared image styles */
+.rf-storyboard-panel img {
+	width: 100%;
+	height: auto;
+	display: block;
+}
+.rf-storyboard-panel__body span[property],
+.rf-storyboard-panel__body meta { display: none; }
+.rf-storyboard-panel__body p:last-child { margin-bottom: 0; }
+@media (max-width: 768px) {
+	.rf-storyboard__panels { grid-template-columns: repeat(2, 1fr) !important; }
+}
+@media (max-width: 480px) {
+	.rf-storyboard__panels { grid-template-columns: 1fr !important; }
+}

package/styles/runes/tabs.css

@@ -0,0 +1,50 @@
+/* Tabs */
+.rf-tabs {
+	border: 1px solid var(--rf-color-border);
+	border-radius: var(--rf-radius-md);
+	overflow: hidden;
+	margin: 1.5rem 0;
+	background: var(--rf-color-bg);
+}
+.rf-tabs__bar {
+	display: flex;
+	background: var(--rf-color-surface);
+	border-bottom: 1px solid var(--rf-color-border);
+	overflow-x: auto;
+	overflow-y: hidden;
+	-webkit-overflow-scrolling: touch;
+}
+.rf-tabs__button {
+	flex: 0 0 auto;
+	padding: 0.625rem 1.25rem;
+	font-size: 0.85rem;
+	font-weight: 500;
+	color: var(--rf-color-muted);
+	background: none;
+	border: none;
+	border-bottom: 2px solid transparent;
+	cursor: pointer;
+	transition: color 200ms ease, border-color 200ms ease, background-color 200ms ease;
+	white-space: nowrap;
+	margin-bottom: -1px;
+	font-family: inherit;
+}
+.rf-tabs__button:hover {
+	color: var(--rf-color-text);
+	background: var(--rf-color-surface-hover);
+}
+.rf-tabs__button--active {
+	color: var(--rf-color-primary);
+	border-bottom-color: var(--rf-color-primary);
+	font-weight: 600;
+	background: var(--rf-color-bg);
+}
+.rf-tabs__panel {
+	padding: 1.25rem 1.5rem;
+}
+.rf-tabs__panel pre {
+	margin: 0;
+}
+.rf-tabs__panel p:last-child {
+	margin-bottom: 0;
+}

package/styles/runes/testimonial.css

@@ -0,0 +1,59 @@
+/* Testimonial */
+.rf-testimonial {
+	border: 1px solid var(--rf-color-border);
+	border-radius: var(--rf-radius-lg);
+	padding: 1.75rem 2rem;
+	margin: 1.5rem 0;
+	background: var(--rf-color-surface);
+}
+.rf-testimonial__rating {
+	display: flex;
+	gap: 0.125rem;
+	margin-bottom: 0.75rem;
+}
+.rf-testimonial__star {
+	font-size: 1.1rem;
+	color: var(--rf-color-border);
+	line-height: 1;
+}
+.rf-testimonial__star--filled {
+	color: var(--rf-color-warning);
+}
+.rf-testimonial blockquote,
+.rf-testimonial .rf-blockquote {
+	border: none;
+	padding: 0;
+	margin: 0 0 1rem;
+	font-size: 1.05rem;
+	font-style: italic;
+	line-height: 1.7;
+	color: var(--rf-color-text);
+	background: none;
+	border-radius: 0;
+}
+.rf-testimonial .rf-blockquote__quote-mark {
+	display: none;
+}
+.rf-testimonial blockquote p {
+	margin: 0;
+}
+.rf-testimonial span[property="authorName"] {
+	display: block;
+	font-weight: 700;
+	font-style: normal;
+	font-size: 0.925rem;
+	color: var(--rf-color-text);
+}
+.rf-testimonial span[property="authorRole"] {
+	display: block;
+	margin-top: 0.125rem;
+	font-size: 0.85rem;
+	color: var(--rf-color-muted);
+}
+.rf-testimonial img {
+	width: 48px;
+	height: 48px;
+	border-radius: 50%;
+	object-fit: cover;
+	margin-top: 0.75rem;
+}

package/styles/runes/timeline.css

@@ -0,0 +1,67 @@
+/* Timeline */
+.rf-timeline {
+	margin: 2rem 0;
+}
+.rf-timeline ol {
+	list-style: none;
+	padding: 0;
+	margin: 0;
+	position: relative;
+}
+.rf-timeline--vertical ol {
+	padding-left: 2rem;
+	border-left: 2px solid var(--rf-color-border);
+}
+.rf-timeline__entries {
+	display: contents;
+}
+.rf-timeline-entry {
+	position: relative;
+	padding: 0 0 2rem;
+}
+.rf-timeline-entry:last-child {
+	padding-bottom: 0;
+}
+.rf-timeline-entry::before {
+	content: '';
+	position: absolute;
+	left: -2.5625rem;
+	top: 0.35rem;
+	width: 12px;
+	height: 12px;
+	border-radius: 50%;
+	background: var(--rf-color-primary);
+	border: 2px solid var(--rf-color-bg);
+	box-shadow: 0 0 0 2px var(--rf-color-primary);
+}
+.rf-timeline-entry__body time {
+	display: block;
+	font-size: 0.8rem;
+	font-weight: 600;
+	color: var(--rf-color-primary);
+	letter-spacing: 0.02em;
+	margin-bottom: 0.25rem;
+}
+.rf-timeline-entry__body span {
+	display: block;
+	font-size: 1.05rem;
+	font-weight: 700;
+	color: var(--rf-color-text);
+	margin-bottom: 0.5rem;
+}
+.rf-timeline-entry__body {
+	font-size: 0.925rem;
+	line-height: 1.65;
+	color: var(--rf-color-muted);
+}
+.rf-timeline-entry__body p:last-child {
+	margin-bottom: 0;
+}
+.rf-timeline--horizontal ol {
+	display: flex;
+	gap: 2rem;
+	overflow-x: auto;
+	padding: 2rem 0 1rem;
+	border-left: none;
+	border-top: 2px solid var(--rf-color-border);
+}

package/styles/runes/toc.css

@@ -0,0 +1,43 @@
+/* Table of Contents */
+.rf-toc {
+	padding: 1.25rem 1.5rem;
+	border-left: 3px solid var(--rf-color-primary);
+	background: var(--rf-color-surface);
+	border-radius: 0 var(--rf-radius-md) var(--rf-radius-md) 0;
+	margin: 1.5rem 0;
+}
+.rf-toc__list {
+	font-weight: 650;
+	margin-bottom: 0.75rem;
+	font-size: 0.7rem;
+	text-transform: uppercase;
+	letter-spacing: 0.06em;
+	color: var(--rf-color-muted);
+}
+.rf-toc ul,
+.rf-toc ol {
+	list-style: none;
+	padding-left: 0;
+	margin: 0;
+}
+.rf-toc li {
+	margin: 0.125rem 0;
+}
+.rf-toc li[data-level="3"] {
+	padding-left: 1rem;
+}
+.rf-toc li[data-level="4"] {
+	padding-left: 2rem;
+}
+.rf-toc a {
+	color: var(--rf-color-text);
+	text-decoration: none;
+	font-size: 0.85rem;
+	display: inline-block;
+	padding: 0.2rem 0;
+	transition: color 150ms ease;
+}
+.rf-toc a:hover {
+	color: var(--rf-color-primary);
+	text-decoration: none;
+}

package/sveltekit/components/Accordion.svelte

@@ -0,0 +1,26 @@
+<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

@@ -0,0 +1,50 @@
+<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

@@ -0,0 +1,121 @@
+<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

@@ -0,0 +1,88 @@
+<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}