@refrakt-md/lumina 0.4.0 → 0.5.1

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>

package/sveltekit/layouts/DefaultLayout.svelte

@@ -1,70 +0,0 @@
-<script lang="ts">
-	import { Renderer } from '@refrakt-md/svelte';
-
-	let { regions, renderable }: {
-		title: string;
-		description: string;
-		regions: Record<string, { name: string; mode: string; content: any[] }>;
-		renderable: any;
-		pages: any[];
-	} = $props();
-</script>
-
-{#if regions.header}
-	<header class="site-header">
-		<div class="site-header-inner">
-			<Renderer node={regions.header.content} />
-		</div>
-	</header>
-{/if}
-
-<main class="page-content">
-	<Renderer node={renderable} />
-</main>
-
-<style>
-	.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);
-	}
-	.page-content {
-		padding-top: 2.5rem;
-		padding-bottom: 4rem;
-		max-width: 64rem;
-		margin: 0 auto;
-		padding-left: 1.5rem;
-		padding-right: 1.5rem;
-	}
-</style>

package/sveltekit/layouts/DocsLayout.svelte

@@ -1,133 +0,0 @@
-<script lang="ts">
-	import { Renderer } from '@refrakt-md/svelte';
-
-	let { regions, renderable }: {
-		title: string;
-		description: string;
-		regions: Record<string, { name: string; mode: string; content: any[] }>;
-		renderable: any;
-		pages: any[];
-	} = $props();
-
-	const hasNav = $derived(!!regions.nav);
-</script>
-
-{#if regions.header}
-	<header class="site-header">
-		<div class="site-header-inner">
-			<Renderer node={regions.header.content} />
-		</div>
-	</header>
-{/if}
-
-{#if regions.nav}
-	<aside class="sidebar">
-		<Renderer node={regions.nav.content} />
-	</aside>
-{/if}
-
-<main class="page-content" class:has-nav={hasNav}>
-	<div class="page-content-inner">
-		<Renderer node={renderable} />
-	</div>
-</main>
-
-<style>
-	/* ---- Fixed header ---- */
-	.site-header {
-		position: fixed;
-		top: 0;
-		left: 0;
-		right: 0;
-		z-index: 10;
-		background: var(--color-bg, #fff);
-		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);
-	}
-
-	/* ---- Fixed sidebar ---- */
-	.sidebar {
-		position: fixed;
-		left: 0;
-		top: 3.375rem; /* header height */
-		bottom: 0;
-		width: 240px;
-		overflow-y: auto;
-		padding: 1.5rem;
-		border-right: 1px solid var(--color-border);
-		background: var(--color-bg, #fff);
-		z-index: 5;
-	}
-	.sidebar::-webkit-scrollbar {
-		width: 0;
-	}
-
-	/* ---- Content area ---- */
-	.page-content {
-		padding-top: 5rem; /* clears fixed header */
-		padding-bottom: 4rem;
-	}
-	.page-content.has-nav {
-		margin-left: 240px;
-	}
-	.page-content-inner {
-		max-width: 60rem;
-		margin: 0 auto;
-		padding: 0 2.5rem;
-	}
-
-	/* ---- Mobile ---- */
-	@media (max-width: 768px) {
-		.site-header {
-			position: static;
-		}
-		.sidebar {
-			position: static;
-			width: auto;
-			border-right: none;
-			border-bottom: 1px solid var(--color-border);
-			padding: 1rem 1.5rem;
-		}
-		.page-content {
-			padding-top: 2rem;
-		}
-		.page-content.has-nav {
-			margin-left: 0;
-		}
-		.page-content-inner {
-			padding: 0 1.5rem;
-		}
-	}
-</style>