@refrakt-md/lumina 0.4.0 → 0.5.1

package/styles/runes/steps.css

@@ -1,9 +1,12 @@
 /* Steps */
 .rf-steps {
 	counter-reset: step;
+	margin: 1.5rem 0;
+}
+.rf-steps ol {
 	list-style: none;
 	padding-left: 0;
-	margin: 1.5rem 0;
+	margin: 0;
 }
 .rf-step__main {
 	display: contents;
@@ -27,22 +30,34 @@
 	top: 0;
 	width: 1.875rem;
 	height: 1.875rem;
-	background: var(--rf-color-primary);
-	color: white;
+	background: var(--rf-color-border);
+	color: var(--rf-color-muted);
 	border-radius: var(--rf-radius-full);
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	font-weight: 650;
 	font-size: 0.8rem;
+	font-variant-numeric: tabular-nums;
 	box-shadow: 0 0 0 4px var(--rf-color-bg);
 }
+.rf-step h1,
+.rf-step h2,
 .rf-step h3,
+.rf-step h4,
+.rf-step h5,
+.rf-step h6,
 .rf-step strong {
 	display: block;
 	margin-top: 0;
 	margin-bottom: 0.375rem;
 }
+.rf-step pre {
+	margin-top: 0;
+}
+.rf-step > p:first-of-type {
+	margin-top: 0;
+}
 .rf-step p {
 	color: var(--rf-color-muted);
 	font-size: 0.925rem;
@@ -53,6 +68,9 @@
 	grid-template-columns: 1fr 1fr;
 	gap: 2rem;
 }
+.rf-step--mirror .rf-step__showcase {
+	order: -1;
+}
 .rf-step__showcase {
 	border-radius: var(--rf-radius-md);
 	overflow: hidden;

package/styles/runes/swatch.css

@@ -0,0 +1,28 @@
+/* Swatch — inline color chip */
+.rf-swatch {
+	display: inline-flex;
+	align-items: center;
+	gap: 0.375rem;
+	vertical-align: middle;
+	border: 1px solid rgba(0, 0, 0, 0.12);
+	border-radius: 9999px;
+	padding: 0.125em 0.625em 0.125em 0.375em;
+	margin: 0 0.15em;
+}
+.rf-swatch__chip {
+	display: inline-block;
+	width: 0.875em;
+	height: 0.875em;
+	border-radius: 50%;
+	border: 1px solid rgba(0, 0, 0, 0.1);
+	flex-shrink: 0;
+}
+.rf-swatch__label {
+	font-weight: 500;
+}
+.rf-swatch__value {
+	color: var(--rf-color-text-muted, #6b7280);
+	font-size: 0.75em;
+	font-family: var(--rf-font-mono, monospace);
+	vertical-align: middle;
+}

package/styles/runes/symbol.css

@@ -0,0 +1,164 @@
+/* Symbol */
+.rf-symbol {
+	border: 1px solid var(--rf-color-border);
+	border-radius: var(--rf-radius-lg);
+	margin: 1.5rem 0;
+	overflow: hidden;
+}
+.rf-symbol__header {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+	padding: 0.75rem 1.25rem;
+	background: var(--rf-color-surface-hover);
+	border-bottom: 1px solid var(--rf-color-border);
+	flex-wrap: wrap;
+}
+.rf-symbol__kind-badge {
+	font-size: 0.6875rem;
+	font-weight: 700;
+	text-transform: uppercase;
+	letter-spacing: 0.05em;
+	padding: 0.125rem 0.5rem;
+	border-radius: var(--rf-radius-sm);
+	color: var(--rf-color-primary);
+	background: var(--rf-color-primary-bg, rgba(14, 165, 233, 0.1));
+}
+.rf-symbol__lang-badge {
+	font-size: 0.6875rem;
+	font-weight: 500;
+	padding: 0.125rem 0.5rem;
+	border-radius: var(--rf-radius-sm);
+	color: var(--rf-color-muted);
+	background: var(--rf-color-surface-active);
+}
+.rf-symbol__since-badge {
+	font-size: 0.6875rem;
+	color: var(--rf-color-success);
+	background: var(--rf-color-success-bg);
+	padding: 0.125rem 0.5rem;
+	border-radius: var(--rf-radius-sm);
+}
+.rf-symbol__deprecated-badge {
+	font-size: 0.6875rem;
+	color: var(--rf-color-warning);
+	background: var(--rf-color-warning-bg);
+	padding: 0.125rem 0.5rem;
+	border-radius: var(--rf-radius-sm);
+}
+.rf-symbol__source-link {
+	margin-left: auto;
+	font-size: 0.75rem;
+	color: var(--rf-color-muted);
+	text-decoration: none;
+}
+.rf-symbol__source-link:hover {
+	color: var(--rf-color-primary);
+}
+.rf-symbol__body {
+	padding: 1.25rem;
+}
+.rf-symbol__body > header {
+	margin-bottom: 1rem;
+}
+.rf-symbol__body > header h2,
+.rf-symbol__body > header h3,
+.rf-symbol__body > header h4 {
+	margin-top: 0;
+}
+.rf-symbol__body pre {
+	border-radius: var(--rf-radius-md);
+	margin: 1rem 0;
+}
+.rf-symbol__body > div > ul {
+	list-style: none;
+	padding-left: 0;
+	margin: 1rem 0;
+}
+.rf-symbol__body > div > ul > li {
+	padding: 0.375rem 0;
+	border-bottom: 1px solid var(--rf-color-border);
+	font-size: 0.9375rem;
+}
+.rf-symbol__body > div > ul > li:last-child {
+	border-bottom: none;
+}
+.rf-symbol__body > div > ul > li > ul {
+	margin-top: 0.375rem;
+	padding-left: 1.25rem;
+	list-style: none;
+}
+.rf-symbol__body > div > ul > li > ul > li {
+	padding: 0.25rem 0;
+	font-size: 0.875rem;
+	color: var(--rf-color-muted);
+}
+.rf-symbol__body blockquote {
+	border-left: 3px solid var(--rf-color-border);
+	padding: 0.5rem 1rem;
+	margin: 0.75rem 0;
+	border-radius: 0 var(--rf-radius-sm) var(--rf-radius-sm) 0;
+	font-size: 0.9375rem;
+}
+
+/* Deprecated symbol */
+[data-deprecated] .rf-symbol__body > header h2,
+[data-deprecated] .rf-symbol__body > header h3,
+[data-deprecated] .rf-symbol__body > header h4 {
+	text-decoration: line-through;
+	opacity: 0.7;
+}
+
+/* SymbolGroup */
+.rf-symbol-group {
+	margin: 1.5rem 0 0;
+	padding-top: 1rem;
+	border-top: 1px solid var(--rf-color-border);
+}
+.rf-symbol-group:first-child {
+	margin-top: 0;
+	padding-top: 0;
+	border-top: none;
+}
+.rf-symbol-group h3 {
+	font-size: 0.75rem;
+	font-weight: 700;
+	text-transform: uppercase;
+	letter-spacing: 0.05em;
+	color: var(--rf-color-muted);
+	margin: 0 0 1rem;
+}
+
+/* SymbolMember */
+.rf-symbol-member {
+	margin: 1.25rem 0;
+	padding: 1rem;
+	border: 1px solid var(--rf-color-border);
+	border-radius: var(--rf-radius-md);
+	background: var(--rf-color-surface);
+}
+.rf-symbol-member h4 {
+	margin: 0 0 0.5rem;
+	font-family: var(--rf-font-mono);
+	font-size: 1rem;
+}
+.rf-symbol-member pre {
+	border-radius: var(--rf-radius-sm);
+	margin: 0.75rem 0;
+}
+.rf-symbol-member ul {
+	list-style: none;
+	padding-left: 0;
+	margin: 0.75rem 0;
+}
+.rf-symbol-member li {
+	padding: 0.25rem 0;
+	font-size: 0.875rem;
+}
+.rf-symbol-member blockquote {
+	border-left: 3px solid var(--rf-color-border);
+	padding: 0.375rem 0.75rem;
+	margin: 0.5rem 0;
+	border-radius: 0 var(--rf-radius-sm) var(--rf-radius-sm) 0;
+	font-size: 0.875rem;
+}

package/styles/runes/tabs.css

@@ -6,6 +6,12 @@
 	margin: 1.5rem 0;
 	background: var(--rf-color-bg);
 }
+.rf-tabs__tabs,
+.rf-tabs__panels {
+	list-style: none;
+	padding: 0;
+	margin: 0;
+}
 .rf-tabs__bar {
 	display: flex;
 	background: var(--rf-color-surface);

package/styles/runes/testimonial.css

@@ -19,8 +19,7 @@
 .rf-testimonial__star--filled {
 	color: var(--rf-color-warning);
 }
-.rf-testimonial blockquote,
-.rf-testimonial .rf-blockquote {
+.rf-testimonial blockquote {
 	border: none;
 	padding: 0;
 	margin: 0 0 1rem;
@@ -31,7 +30,7 @@
 	background: none;
 	border-radius: 0;
 }
-.rf-testimonial .rf-blockquote__quote-mark {
+.rf-testimonial blockquote::before {
 	display: none;
 }
 .rf-testimonial blockquote p {

package/styles/runes/timeline.css

@@ -6,35 +6,14 @@
 	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 {
+.rf-timeline-entry > time {
 	display: block;
 	font-size: 0.8rem;
 	font-weight: 600;
@@ -42,7 +21,7 @@
 	letter-spacing: 0.02em;
 	margin-bottom: 0.25rem;
 }
-.rf-timeline-entry__body span {
+.rf-timeline-entry > span {
 	display: block;
 	font-size: 1.05rem;
 	font-weight: 700;
@@ -57,11 +36,51 @@
 .rf-timeline-entry__body p:last-child {
 	margin-bottom: 0;
 }
+
+/* Vertical timeline */
+.rf-timeline--vertical .rf-timeline-entry {
+	padding-left: 2rem;
+	padding-bottom: 2rem;
+	border-left: 2px solid var(--rf-color-border);
+	margin-left: 0.375rem;
+}
+.rf-timeline--vertical .rf-timeline-entry:last-child {
+	border-left-color: transparent;
+}
+.rf-timeline--vertical .rf-timeline-entry::before {
+	content: '';
+	position: absolute;
+	left: -0.4375rem;
+	top: 0.25rem;
+	width: 0.75rem;
+	height: 0.75rem;
+	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);
+}
+
+/* Horizontal timeline */
 .rf-timeline--horizontal ol {
 	display: flex;
 	gap: 2rem;
 	overflow-x: auto;
 	padding: 2rem 0 1rem;
-	border-left: none;
+}
+.rf-timeline--horizontal .rf-timeline-entry {
+	min-width: 12rem;
+	padding-top: 1.5rem;
 	border-top: 2px solid var(--rf-color-border);
 }
+.rf-timeline--horizontal .rf-timeline-entry::before {
+	content: '';
+	position: absolute;
+	top: -0.4375rem;
+	left: 0.5rem;
+	width: 0.75rem;
+	height: 0.75rem;
+	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);
+}

package/styles/runes/typography.css

@@ -0,0 +1,104 @@
+/* Typography — font specimen display */
+.rf-typography {
+	margin: 1.5rem 0;
+}
+.rf-typography__title {
+	font-size: 1.125rem;
+	font-weight: 600;
+	margin-bottom: 1rem;
+}
+.rf-typography__specimens {
+	display: flex;
+	flex-direction: column;
+	gap: 2rem;
+}
+.rf-typography__specimen {
+	border: 1px solid var(--rf-color-border, #e5e7eb);
+	border-radius: var(--rf-radius-lg, 12px);
+	padding: 1.5rem;
+}
+.rf-typography__specimen-header {
+	display: flex;
+	align-items: baseline;
+	gap: 0.75rem;
+	margin-bottom: 1.25rem;
+	padding-bottom: 0.75rem;
+	border-bottom: 1px solid var(--rf-color-border, #e5e7eb);
+}
+.rf-typography__specimen-role {
+	font-size: 0.75rem;
+	font-weight: 600;
+	text-transform: uppercase;
+	letter-spacing: 0.05em;
+	color: var(--rf-color-primary, #0ea5e9);
+	background: var(--rf-color-primary-bg, rgba(14, 165, 233, 0.1));
+	padding: 0.125rem 0.5rem;
+	border-radius: var(--rf-radius-sm, 4px);
+}
+.rf-typography__specimen-family {
+	font-size: 0.9rem;
+	color: var(--rf-color-text-muted, #6b7280);
+}
+.rf-typography__sizes {
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
+	margin-bottom: 1rem;
+}
+.rf-typography__size-sample {
+	display: flex;
+	align-items: baseline;
+	gap: 1rem;
+	line-height: 1.3;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+.rf-typography__size-label {
+	flex-shrink: 0;
+	font-size: 0.7rem;
+	font-family: var(--rf-font-mono, monospace);
+	color: var(--rf-color-text-muted, #6b7280);
+	min-width: 3rem;
+	text-align: right;
+}
+.rf-typography__weights {
+	display: flex;
+	gap: 1.5rem;
+	flex-wrap: wrap;
+	padding-top: 1rem;
+	border-top: 1px solid var(--rf-color-border, #e5e7eb);
+}
+.rf-typography__weight-sample {
+	display: flex;
+	flex-direction: column;
+	gap: 0.25rem;
+}
+.rf-typography__weight-label {
+	font-size: 0.7rem;
+	font-family: var(--rf-font-mono, monospace);
+	color: var(--rf-color-text-muted, #6b7280);
+}
+.rf-typography__charset {
+	margin-top: 1rem;
+	padding-top: 1rem;
+	border-top: 1px solid var(--rf-color-border, #e5e7eb);
+	font-size: 0.875rem;
+	line-height: 1.8;
+	letter-spacing: 0.05em;
+	word-break: break-all;
+	color: var(--rf-color-text-muted, #6b7280);
+}
+
+/* Context-aware: no outer border when inside design-context (parent already has one) */
+.rf-typography--in-design-context {
+	margin: 0;
+}
+.rf-typography--in-design-context .rf-typography__specimen {
+	border: none;
+	border-radius: 0;
+	padding: 0;
+}
+.rf-typography--in-design-context .rf-typography__specimen + .rf-typography__specimen {
+	padding-top: 1.5rem;
+}

package/svelte/elements.ts

@@ -0,0 +1 @@
+export { elements } from '@refrakt-md/theme-base/svelte/elements';

package/{sveltekit → svelte}/index.ts

@@ -22,11 +22,3 @@ export { registry };
 export { default as DocsLayout } from './layouts/DocsLayout.svelte';
 export { default as DefaultLayout } from './layouts/DefaultLayout.svelte';
 export { default as BlogLayout } from './layouts/BlogLayout.svelte';
-
-// Interactive components for advanced usage
-export { default as Tabs } from './components/Tabs.svelte';
-export { default as DataTable } from './components/DataTable.svelte';
-export { default as Form } from './components/Form.svelte';
-export { default as Reveal } from './components/Reveal.svelte';
-export { default as Diagram } from './components/Diagram.svelte';
-export { default as Nav } from './components/Nav.svelte';

package/svelte/layouts/BlogLayout.svelte

@@ -0,0 +1,173 @@
+<script lang="ts">
+	import { Renderer } from '@refrakt-md/svelte';
+
+	let { title, frontmatter, regions, renderable, pages, url }: {
+		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;
+		}>;
+		url: 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);
+
+	let menuOpen = $state(false);
+
+	function onKeydown(e: KeyboardEvent) {
+		if (e.key === 'Escape') menuOpen = false;
+	}
+
+	$effect(() => {
+		url;
+		menuOpen = false;
+	});
+
+	// Lock body scroll when panel is open
+	$effect(() => {
+		document.body.style.overflow = menuOpen ? 'hidden' : '';
+	});
+
+	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>
+
+<svelte:window onkeydown={onKeydown} />
+
+{#if regions.header}
+	<header class="rf-blog-header">
+		<div class="rf-blog-header__inner">
+			<Renderer node={regions.header.content} />
+			<button class="rf-mobile-menu-btn" onclick={() => menuOpen = true} aria-label="Open menu">
+				<svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
+					<circle cx="10" cy="4" r="1.5"/>
+					<circle cx="10" cy="10" r="1.5"/>
+					<circle cx="10" cy="16" r="1.5"/>
+				</svg>
+			</button>
+		</div>
+	</header>
+{/if}
+
+{#if menuOpen}
+	<div class="rf-mobile-panel" role="dialog" aria-label="Navigation menu">
+		<div class="rf-mobile-panel__header">
+			<span class="rf-mobile-panel__title">Menu</span>
+			<button class="rf-mobile-panel__close" onclick={() => menuOpen = false} aria-label="Close menu">
+				<svg width="20" height="20" viewBox="0 0 20 20" stroke="currentColor" stroke-width="2" fill="none">
+					<line x1="4" y1="4" x2="16" y2="16"/><line x1="16" y1="4" x2="4" y2="16"/>
+				</svg>
+			</button>
+		</div>
+		<nav class="rf-mobile-panel__nav">
+			{#if regions.header}
+				<Renderer node={regions.header.content} />
+			{/if}
+		</nav>
+	</div>
+{/if}
+
+<div class="rf-blog" class:rf-blog--has-sidebar={hasSidebar}>
+	{#if isIndex}
+		<div class="rf-blog-index">
+			<h1 class="rf-blog-index__title">{title}</h1>
+
+			<div class="rf-blog-index__body">
+				<Renderer node={renderable} />
+			</div>
+
+			<div class="rf-blog-index__posts">
+				{#each posts as post}
+					<a href={post.url} class="rf-blog-card">
+						<h2 class="rf-blog-card__title">{post.title}</h2>
+						<div class="rf-blog-card__meta">
+							{#if post.date}
+								<time datetime={post.date}>{formatDate(post.date)}</time>
+							{/if}
+							{#if post.author}
+								<span class="rf-blog-card__author">{post.author}</span>
+							{/if}
+						</div>
+						{#if post.description}
+							<p class="rf-blog-card__desc">{post.description}</p>
+						{/if}
+						{#if post.tags && post.tags.length > 0}
+							<div class="rf-blog-card__tags">
+								{#each post.tags as tag}
+									<span class="rf-blog-article__tag">{tag}</span>
+								{/each}
+							</div>
+						{/if}
+						<span class="rf-blog-card__link">Read more &rarr;</span>
+					</a>
+				{/each}
+			</div>
+		</div>
+	{:else}
+		<article class="rf-blog-article">
+			<header class="rf-blog-article__header">
+				<h1 class="rf-blog-article__title">{title}</h1>
+				{#if date || author}
+					<div class="rf-blog-article__meta">
+						{#if date}
+							<time datetime={date}>{formatDate(date)}</time>
+						{/if}
+						{#if author}
+							<span class="rf-blog-article__author">{author}</span>
+						{/if}
+					</div>
+				{/if}
+				{#if tags && tags.length > 0}
+					<div class="rf-blog-article__tags">
+						{#each tags as tag}
+							<span class="rf-blog-article__tag">{tag}</span>
+						{/each}
+					</div>
+				{/if}
+			</header>
+
+			<div class="rf-blog-article__body">
+				<Renderer node={renderable} />
+			</div>
+		</article>
+
+		{#if regions.sidebar}
+			<aside class="rf-blog-sidebar">
+				<Renderer node={regions.sidebar.content} />
+			</aside>
+		{/if}
+	{/if}
+</div>
+
+{#if regions.footer}
+	<footer class="rf-blog-footer">
+		<Renderer node={regions.footer.content} />
+	</footer>
+{/if}