@refrakt-md/lumina 0.4.0 → 0.5.0

package/sveltekit/components/Tabs.svelte

@@ -1,75 +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 = $derived(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 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 '';
-	}
-
-	// For TabGroup: parse the ul/li structure from the transform
-	const { tabs, panels } = $derived.by(() => {
-		const tabs: { name: string }[] = [];
-		const panels: { children: RendererNode[] }[] = [];
-		if (typeName === 'TabGroup') {
-			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'
-						);
-						const name = nameNode ? getTextContent(nameNode) : getTextContent(item);
-						tabs.push({ name: name.trim() });
-					} else if (item.attributes?.typeof === 'TabPanel') {
-						panels.push({ children: item.children });
-					}
-				}
-			}
-		}
-		return { tabs, panels };
-	});
-
-	let activeIndex = $state(0);
-</script>
-
-{#if typeName === 'TabGroup' && tabs.length > 0}
-	<div class="rf-tabs">
-		<div class="rf-tabs__bar" role="tablist">
-			{#each tabs as tab, i}
-				<button
-					class="rf-tabs__button {i === activeIndex ? 'rf-tabs__button--active' : ''}"
-					role="tab"
-					aria-selected={i === activeIndex}
-					onclick={() => activeIndex = i}
-				>
-					{tab.name}
-				</button>
-			{/each}
-		</div>
-		<div class="rf-tabs__panels">
-			{#each panels as panel, i}
-				{#if i === activeIndex}
-					<div class="rf-tabs__panel" role="tabpanel">
-						<Renderer node={panel.children} />
-					</div>
-				{/if}
-			{/each}
-		</div>
-	</div>
-{:else}
-	{@render children()}
-{/if}

package/sveltekit/components/Testimonial.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 rating = $derived(tag.children
-		.find((c: any) => c?.name === 'meta' && c?.attributes?.property === 'rating')
-		?.attributes?.content);
-
-	const hasRating = $derived(rating !== undefined && rating !== null);
-	const stars = $derived(hasRating ? Math.min(5, Math.max(0, Number(rating))) : 0);
-</script>
-
-<article class="rf-testimonial">
-	{#if hasRating}
-		<div class="rf-testimonial__rating" aria-label="{stars} out of 5 stars">
-			{#each Array(5) as _, i}
-				<span class="rf-testimonial__star {i < stars ? 'rf-testimonial__star--filled' : ''}">&#9733;</span>
-			{/each}
-		</div>
-	{/if}
-	<div class="rf-testimonial__content">
-		{@render children()}
-	</div>
-</article>

package/sveltekit/elements/Blockquote.svelte

@@ -1,37 +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();
-</script>
-
-<blockquote class="themed-blockquote">
-	<svg class="quote-mark" width="24" height="24" viewBox="0 0 24 24" fill="none">
-		<path d="M10 8C10 5.79 8.21 4 6 4C3.79 4 2 5.79 2 8C2 10.21 3.79 12 6 12C6.67 12 7.31 11.83 7.88 11.54C7.63 14.08 5.55 16.09 3 16.34V18.36C6.68 18.09 9.64 15.13 9.93 11.45C9.98 10.99 10 10.5 10 10V8ZM22 8C22 5.79 20.21 4 18 4C15.79 4 14 5.79 14 8C14 10.21 15.79 12 18 12C18.67 12 19.31 11.83 19.88 11.54C19.63 14.08 17.55 16.09 15 16.34V18.36C18.68 18.09 21.64 15.13 21.93 11.45C21.98 10.99 22 10.5 22 10V8Z" fill="currentColor"/>
-	</svg>
-	{@render children()}
-</blockquote>
-
-<style>
-	.themed-blockquote {
-		position: relative;
-		border-left: 3px solid var(--color-primary);
-		margin: 1.5rem 0;
-		padding: 1rem 1.25rem 1rem 2.75rem;
-		color: var(--color-muted);
-		background: var(--color-surface);
-		border-radius: 0 var(--radius-md) var(--radius-md) 0;
-	}
-	.quote-mark {
-		position: absolute;
-		left: 0.75rem;
-		top: 1rem;
-		width: 18px;
-		height: 18px;
-		color: var(--color-primary);
-		opacity: 0.4;
-	}
-	.themed-blockquote :global(p:last-child) {
-		margin-bottom: 0;
-	}
-</style>

package/sveltekit/elements/Pre.svelte

@@ -1,77 +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 isCodeBlock = 'data-language' in (tag.attributes || {});
-
-	let preEl: HTMLPreElement;
-	let copied = $state(false);
-	let timer: ReturnType<typeof setTimeout>;
-
-	function copy() {
-		const text = preEl.textContent ?? '';
-		navigator.clipboard.writeText(text);
-		copied = true;
-		clearTimeout(timer);
-		timer = setTimeout(() => copied = false, 2000);
-	}
-</script>
-
-{#if isCodeBlock}
-	<div class="rf-codeblock">
-		<pre bind:this={preEl} {...tag.attributes}>{@render children()}</pre>
-		<button class="rf-codeblock__copy" class:rf-codeblock__copy--copied={copied} onclick={copy} aria-label="Copy code">
-			{#if copied}
-				<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-					<polyline points="20 6 9 17 4 12" />
-				</svg>
-			{:else}
-				<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-					<rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
-					<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
-				</svg>
-			{/if}
-		</button>
-	</div>
-{:else}
-	<pre {...tag.attributes}>{@render children()}</pre>
-{/if}
-
-<style>
-	.rf-codeblock {
-		position: relative;
-	}
-	.rf-codeblock :global(pre) {
-		margin: 0;
-	}
-	.rf-codeblock__copy {
-		position: absolute;
-		top: 0.5rem;
-		right: 0.5rem;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		width: 2rem;
-		height: 2rem;
-		border: none;
-		border-radius: var(--rf-radius-sm);
-		background: transparent;
-		color: var(--rf-color-code-text, #e2e8f0);
-		cursor: pointer;
-		opacity: 0;
-		transition: opacity 150ms ease, background-color 150ms ease;
-	}
-	.rf-codeblock:hover .rf-codeblock__copy {
-		opacity: 0.6;
-	}
-	.rf-codeblock__copy:hover {
-		opacity: 1 !important;
-		background: rgba(255, 255, 255, 0.1);
-	}
-	.rf-codeblock__copy--copied {
-		opacity: 1 !important;
-		color: var(--rf-color-success, #4ade80);
-	}
-</style>

package/sveltekit/elements/Table.svelte

@@ -1,40 +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();
-</script>
-
-<div class="table-wrapper">
-	<table {...tag.attributes}>
-		{@render children()}
-	</table>
-</div>
-
-<style>
-	.table-wrapper {
-		overflow-x: auto;
-		-webkit-overflow-scrolling: touch;
-		margin: 1.5rem 0;
-		border: 1px solid var(--color-border);
-		border-radius: var(--radius-md);
-	}
-	.table-wrapper :global(table) {
-		margin: 0;
-		border-collapse: collapse;
-		width: 100%;
-		min-width: 100%;
-	}
-	.table-wrapper :global(th) {
-		background: var(--color-surface);
-	}
-	.table-wrapper :global(th:first-child) {
-		border-top-left-radius: var(--radius-md);
-	}
-	.table-wrapper :global(th:last-child) {
-		border-top-right-radius: var(--radius-md);
-	}
-	.table-wrapper :global(tr:last-child td) {
-		border-bottom: none;
-	}
-</style>

package/sveltekit/elements.ts

@@ -1,11 +0,0 @@
-import type { ElementOverrides } from '@refrakt-md/svelte';
-import Table from './elements/Table.svelte';
-import Blockquote from './elements/Blockquote.svelte';
-import Pre from './elements/Pre.svelte';
-
-/** Maps HTML element names to Lumina theme override components */
-export const elements: ElementOverrides = {
-	'table': Table,
-	'blockquote': Blockquote,
-	'pre': Pre,
-};

package/sveltekit/layouts/BlogLayout.svelte

@@ -1,382 +0,0 @@
-<script lang="ts">
-	import { Renderer } from '@refrakt-md/svelte';
-
-	let { title, frontmatter, regions, renderable, pages }: {
-		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;
-		}>;
-	} = $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);
-
-	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>
-
-{#if regions.header}
-	<header class="site-header">
-		<div class="site-header-inner">
-			<Renderer node={regions.header.content} />
-		</div>
-	</header>
-{/if}
-
-<div class="blog-layout" class:has-sidebar={hasSidebar}>
-	{#if isIndex}
-		<div class="blog-index">
-			<h1 class="blog-index-title">{title}</h1>
-
-			<div class="blog-index-body">
-				<Renderer node={renderable} />
-			</div>
-
-			<div class="blog-index-posts">
-				{#each posts as post}
-					<a href={post.url} class="blog-post-card">
-						<h2 class="blog-post-card-title">{post.title}</h2>
-						<div class="blog-post-card-meta">
-							{#if post.date}
-								<time datetime={post.date}>{formatDate(post.date)}</time>
-							{/if}
-							{#if post.author}
-								<span class="blog-post-card-author">{post.author}</span>
-							{/if}
-						</div>
-						{#if post.description}
-							<p class="blog-post-card-desc">{post.description}</p>
-						{/if}
-						{#if post.tags && post.tags.length > 0}
-							<div class="blog-post-card-tags">
-								{#each post.tags as tag}
-									<span class="blog-article-tag">{tag}</span>
-								{/each}
-							</div>
-						{/if}
-						<span class="blog-post-card-link">Read more &rarr;</span>
-					</a>
-				{/each}
-			</div>
-		</div>
-	{:else}
-		<article class="blog-article">
-			<header class="blog-article-header">
-				<h1 class="blog-article-title">{title}</h1>
-				{#if date || author}
-					<div class="blog-article-meta">
-						{#if date}
-							<time datetime={date}>{formatDate(date)}</time>
-						{/if}
-						{#if author}
-							<span class="blog-article-author">{author}</span>
-						{/if}
-					</div>
-				{/if}
-				{#if tags && tags.length > 0}
-					<div class="blog-article-tags">
-						{#each tags as tag}
-							<span class="blog-article-tag">{tag}</span>
-						{/each}
-					</div>
-				{/if}
-			</header>
-
-			<div class="blog-article-body">
-				<Renderer node={renderable} />
-			</div>
-		</article>
-
-		{#if regions.sidebar}
-			<aside class="blog-sidebar">
-				<Renderer node={regions.sidebar.content} />
-			</aside>
-		{/if}
-	{/if}
-</div>
-
-{#if regions.footer}
-	<footer class="site-footer">
-		<Renderer node={regions.footer.content} />
-	</footer>
-{/if}
-
-<style>
-	/* ---- Site header (shared with other layouts) ---- */
-	.site-header {
-		border-bottom: 1px solid var(--color-border);
-	}
-	.site-header-inner {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		padding: 0.875rem 1.5rem;
-	}
-	.site-header :global(p) {
-		margin: 0;
-		line-height: 1;
-	}
-	.site-header :global(a) {
-		display: inline-block;
-		color: inherit;
-		text-decoration: none;
-	}
-	.site-header :global(a:hover) {
-		text-decoration: none;
-	}
-	.site-header :global(img) {
-		display: block;
-		height: 1.5rem;
-		width: auto;
-	}
-	.site-header-inner :global(p:last-child:not(:first-child)) {
-		font-size: 0.85rem;
-	}
-	.site-header-inner :global(p:last-child:not(:first-child) a) {
-		margin-left: 1.5rem;
-		color: var(--color-muted);
-	}
-	.site-header-inner :global(p:last-child:not(:first-child) a:hover) {
-		color: var(--color-text);
-	}
-
-	/* ---- Blog layout ---- */
-	.blog-layout {
-		max-width: 72rem;
-		margin: 0 auto;
-		padding: 2.5rem 1.5rem 4rem;
-	}
-	.blog-layout.has-sidebar {
-		display: grid;
-		grid-template-columns: 1fr 16rem;
-		gap: 3rem;
-		align-items: start;
-	}
-
-	/* ---- Blog index ---- */
-	.blog-index {
-		max-width: 42rem;
-	}
-	.blog-index-title {
-		font-size: 2.25rem;
-		font-weight: 800;
-		line-height: 1.15;
-		letter-spacing: -0.02em;
-		margin: 0 0 1rem;
-		color: var(--color-text);
-	}
-	.blog-index-body {
-		margin-bottom: 2rem;
-		line-height: 1.8;
-		color: var(--color-muted);
-	}
-	.blog-index-body:empty {
-		display: none;
-	}
-	.blog-index-posts {
-		display: flex;
-		flex-direction: column;
-		gap: 1.5rem;
-	}
-
-	/* ---- Post card ---- */
-	.blog-post-card {
-		display: block;
-		padding: 1.5rem;
-		border: 1px solid var(--color-border);
-		border-radius: var(--radius-md, 0.5rem);
-		text-decoration: none;
-		color: inherit;
-		transition: border-color 0.15s, box-shadow 0.15s;
-	}
-	.blog-post-card:hover {
-		border-color: var(--color-text);
-		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
-		text-decoration: none;
-	}
-	.blog-post-card-title {
-		font-size: 1.35rem;
-		font-weight: 700;
-		margin: 0 0 0.5rem;
-		color: var(--color-text);
-	}
-	.blog-post-card-meta {
-		display: flex;
-		align-items: center;
-		gap: 0.75rem;
-		font-size: 0.85rem;
-		color: var(--color-muted);
-		margin-bottom: 0.5rem;
-	}
-	.blog-post-card-author::before {
-		content: '\00b7';
-		margin-right: 0.75rem;
-	}
-	.blog-post-card-desc {
-		margin: 0 0 0.75rem;
-		font-size: 0.95rem;
-		line-height: 1.6;
-		color: var(--color-muted);
-	}
-	.blog-post-card-tags {
-		display: flex;
-		flex-wrap: wrap;
-		gap: 0.5rem;
-		margin-bottom: 0.75rem;
-	}
-	.blog-post-card-link {
-		font-size: 0.85rem;
-		font-weight: 600;
-		color: var(--color-primary, var(--color-text));
-	}
-
-	/* ---- Article ---- */
-	.blog-article {
-		max-width: 42rem;
-	}
-	.blog-article-header {
-		margin-bottom: 2.5rem;
-		padding-bottom: 1.5rem;
-		border-bottom: 1px solid var(--color-border);
-	}
-	.blog-article-title {
-		font-size: 2.25rem;
-		font-weight: 800;
-		line-height: 1.15;
-		letter-spacing: -0.02em;
-		margin: 0 0 1rem;
-		color: var(--color-text);
-	}
-	.blog-article-meta {
-		display: flex;
-		align-items: center;
-		gap: 0.75rem;
-		font-size: 0.9rem;
-		color: var(--color-muted);
-	}
-	.blog-article-meta time {
-		font-weight: 500;
-	}
-	.blog-article-author::before {
-		content: '\00b7';
-		margin-right: 0.75rem;
-	}
-	.blog-article-tags {
-		display: flex;
-		flex-wrap: wrap;
-		gap: 0.5rem;
-		margin-top: 0.75rem;
-	}
-	.blog-article-tag {
-		font-size: 0.75rem;
-		font-weight: 500;
-		padding: 0.2rem 0.6rem;
-		border-radius: 9999px;
-		background: var(--color-surface);
-		color: var(--color-muted);
-		border: 1px solid var(--color-border);
-	}
-
-	/* ---- Article body typography ---- */
-	.blog-article-body {
-		line-height: 1.8;
-	}
-	.blog-article-body :global(h2) {
-		margin-top: 2.5rem;
-	}
-	.blog-article-body :global(h3) {
-		margin-top: 2rem;
-	}
-	.blog-article-body :global(p) {
-		margin-bottom: 1.25rem;
-	}
-	.blog-article-body :global(img) {
-		border-radius: var(--radius-md);
-		margin: 1.5rem 0;
-	}
-
-	/* ---- Sidebar ---- */
-	.blog-sidebar {
-		position: sticky;
-		top: 2.5rem;
-		font-size: 0.85rem;
-		color: var(--color-muted);
-	}
-	.blog-sidebar :global(h2),
-	.blog-sidebar :global(h3),
-	.blog-sidebar :global(h4) {
-		font-size: 0.75rem;
-		font-weight: 600;
-		text-transform: uppercase;
-		letter-spacing: 0.05em;
-		color: var(--color-muted);
-		margin-top: 0;
-		margin-bottom: 0.5rem;
-	}
-	.blog-sidebar :global(ul) {
-		list-style: none;
-		padding: 0;
-		margin: 0;
-	}
-	.blog-sidebar :global(li) {
-		padding: 0.25rem 0;
-	}
-	.blog-sidebar :global(a) {
-		color: var(--color-muted);
-		text-decoration: none;
-	}
-	.blog-sidebar :global(a:hover) {
-		color: var(--color-text);
-	}
-
-	/* ---- Footer ---- */
-	.site-footer {
-		border-top: 1px solid var(--color-border);
-		padding: 2rem 1.5rem;
-		text-align: center;
-		font-size: 0.85rem;
-		color: var(--color-muted);
-	}
-
-	/* ---- Mobile ---- */
-	@media (max-width: 768px) {
-		.blog-layout.has-sidebar {
-			grid-template-columns: 1fr;
-		}
-		.blog-article-title {
-			font-size: 1.75rem;
-		}
-		.blog-sidebar {
-			position: static;
-			border-top: 1px solid var(--color-border);
-			padding-top: 1.5rem;
-		}
-	}
-</style>