@refrakt-md/lumina 0.5.0 → 0.6.0

package/styles/layouts/docs.css

@@ -14,7 +14,7 @@
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
-	padding: 0.875rem 1.5rem;
+	padding: 1.125rem 1.5rem;
 }
 .rf-docs-header p {
 	margin: 0;
@@ -28,9 +28,16 @@
 .rf-docs-header a:hover {
 	text-decoration: none;
 }
+.rf-docs-header p:first-child a {
+	display: inline-flex;
+	align-items: center;
+	gap: 0.5rem;
+	font-weight: 600;
+	font-size: 1.2rem;
+	letter-spacing: -0.02em;
+}
 .rf-docs-header img {
-	display: block;
-	height: 1.5rem;
+	height: 2rem;
 	width: auto;
 }
 .rf-docs-header__inner p ~ p {
@@ -43,12 +50,17 @@
 .rf-docs-header__inner p ~ p a:hover {
 	color: var(--rf-color-text);
 }
+.rf-docs-header__inner p ~ p a svg {
+	width: 1.1rem;
+	height: 1.1rem;
+	vertical-align: -0.15em;
+}
 
 /* ---- Fixed sidebar ---- */
 .rf-docs-sidebar {
 	position: fixed;
 	left: 0;
-	top: 3.375rem;
+	top: 4.125rem;
 	bottom: 0;
 	width: 240px;
 	overflow-y: auto;
@@ -63,7 +75,7 @@
 
 /* ---- Content area ---- */
 .rf-docs-content {
-	padding-top: 5rem;
+	padding-top: 5.75rem;
 	padding-bottom: 4rem;
 	container-type: inline-size;
 }
@@ -76,6 +88,41 @@
 	padding: 0 2.5rem;
 	--rf-content-padding: 2.5rem;
 }
+.rf-docs-content__inner--has-toc {
+	display: flex;
+	gap: 0;
+	max-width: calc(60rem + 220px);
+}
+.rf-docs-content__inner--has-toc .rf-docs-content__body {
+	flex: 1;
+	min-width: 0;
+}
+
+/* ---- "On this page" sidebar ---- */
+.rf-docs-toc {
+	width: 220px;
+	flex-shrink: 0;
+	position: sticky;
+	top: 5.75rem;
+	align-self: flex-start;
+	max-height: calc(100vh - 5.75rem);
+	overflow-y: auto;
+	padding: 0 1.25rem;
+}
+.rf-docs-toc::-webkit-scrollbar {
+	width: 0;
+}
+
+/* ---- Smooth scroll with fixed-header offset ---- */
+html:has(.rf-docs-header) {
+	scroll-behavior: smooth;
+	scroll-padding-top: 5rem;
+}
+@media (prefers-reduced-motion: reduce) {
+	html:has(.rf-docs-header) {
+		scroll-behavior: auto;
+	}
+}
 
 /* ---- Mobile toolbar (hidden on desktop) ---- */
 .rf-docs-toolbar {
@@ -118,6 +165,17 @@
 	font-weight: 500;
 }
 
+/* ---- Hide TOC on medium screens ---- */
+@media (max-width: 1100px) {
+	.rf-docs-toc {
+		display: none;
+	}
+	.rf-docs-content__inner--has-toc {
+		display: block;
+		max-width: 60rem;
+	}
+}
+
 /* ---- Mobile overrides ---- */
 @media (max-width: 768px) {
 	.rf-docs-header {
@@ -130,7 +188,7 @@
 		display: flex;
 	}
 	.rf-mobile-panel--nav {
-		top: 5.5rem;
+		top: 6.25rem;
 	}
 	.rf-docs-sidebar {
 		display: none;

package/styles/layouts/mobile.css

@@ -28,7 +28,7 @@
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
-	padding: 0.875rem 1.5rem;
+	padding: 1.125rem 1.5rem;
 	border-bottom: 1px solid var(--rf-color-border);
 }
 .rf-mobile-panel__title {
@@ -74,11 +74,13 @@
 	padding: 1rem 1.5rem;
 }
 
+/* Panel opens via data-open attribute (set by mobile-menu behavior) */
+.rf-mobile-panel[data-open] {
+	display: block;
+}
+
 @media (max-width: 768px) {
 	.rf-mobile-menu-btn {
 		display: block;
 	}
-	.rf-mobile-panel {
-		display: block;
-	}
 }

package/styles/layouts/on-this-page.css

@@ -0,0 +1,48 @@
+/* On This Page — TOC sidebar navigation */
+
+.rf-on-this-page {
+	font-size: 0.8rem;
+}
+
+.rf-on-this-page__title {
+	font-size: 0.7rem;
+	font-weight: 600;
+	text-transform: uppercase;
+	letter-spacing: 0.05em;
+	color: var(--rf-color-muted, #64748b);
+	margin: 0 0 0.75rem;
+}
+
+.rf-on-this-page__list {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+}
+
+.rf-on-this-page__item {
+	border-left: 2px solid transparent;
+}
+
+.rf-on-this-page__item[data-level="3"] {
+	padding-left: 0.75rem;
+}
+
+.rf-on-this-page__item a {
+	display: block;
+	padding: 0.25rem 0.75rem;
+	color: var(--rf-color-muted, #64748b);
+	text-decoration: none;
+	line-height: 1.4;
+}
+
+.rf-on-this-page__item a:hover {
+	color: var(--rf-color-text, #1a1a2e);
+}
+
+.rf-on-this-page__item[data-active] {
+	border-left-color: var(--rf-color-primary, #0ea5e9);
+}
+
+.rf-on-this-page__item[data-active] a {
+	color: var(--rf-color-primary, #0ea5e9);
+}

package/styles/runes/feature.css

@@ -51,6 +51,16 @@
 	letter-spacing: -0.01em;
 	color: var(--rf-color-text);
 }
+.rf-feature-definition dt:has(> .rf-icon) {
+	display: flex;
+	flex-direction: column;
+}
+.rf-feature-definition dt > .rf-icon {
+	width: 1.5rem;
+	height: 1.5rem;
+	margin-bottom: 0.5rem;
+	color: var(--rf-color-accent);
+}
 .rf-feature-definition dd {
 	margin: 0;
 	color: var(--rf-color-muted);

package/styles/runes/palette.css

@@ -84,3 +84,8 @@
 	margin-top: 0.25rem;
 	font-size: 0.8rem;
 }
+
+/* Context-aware: no outer margin when inside design-context */
+.rf-palette--in-design-context {
+	margin: 0;
+}

package/styles/runes/preview.css

@@ -139,7 +139,8 @@
 	margin: 0;
 	border-radius: 0;
 }
-.rf-preview__source .rf-codeblock {
+.rf-preview__source .rf-codeblock,
+.rf-preview__source .rf-code-wrapper {
 	border-radius: 0;
 }
 

package/styles/runes/spacing.css

@@ -103,3 +103,8 @@
 	font-weight: 500;
 	font-size: 0.8rem;
 }
+
+/* Context-aware: no outer margin when inside design-context */
+.rf-spacing--in-design-context {
+	margin: 0;
+}

package/styles/runes/steps.css

@@ -30,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;

package/styles/runes/symbol.css

@@ -1,17 +1,12 @@
 /* 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);
+	padding: 0.5rem 0;
 	flex-wrap: wrap;
 }
 .rf-symbol__kind-badge {
@@ -56,7 +51,7 @@
 	color: var(--rf-color-primary);
 }
 .rf-symbol__body {
-	padding: 1.25rem;
+	padding: 0;
 }
 .rf-symbol__body > header {
 	margin-bottom: 1rem;
@@ -100,6 +95,9 @@
 	border-radius: 0 var(--rf-radius-sm) var(--rf-radius-sm) 0;
 	font-size: 0.9375rem;
 }
+.rf-symbol__body blockquote::before {
+	content: none;
+}
 
 /* Deprecated symbol */
 [data-deprecated] .rf-symbol__body > header h2,
@@ -132,10 +130,7 @@
 /* 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);
+	padding: 0;
 }
 .rf-symbol-member h4 {
 	margin: 0 0 0.5rem;
@@ -162,3 +157,6 @@
 	border-radius: 0 var(--rf-radius-sm) var(--rf-radius-sm) 0;
 	font-size: 0.875rem;
 }
+.rf-symbol-member blockquote::before {
+	content: none;
+}

package/styles/runes/typography.css

@@ -89,3 +89,16 @@
 	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/components/OnThisPage.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+	interface Heading {
+		level: number;
+		text: string;
+		id: string;
+	}
+
+	interface Props {
+		headings: Heading[];
+	}
+
+	let { headings }: Props = $props();
+
+	// Filter to h2 and h3 only
+	const filtered = $derived(headings.filter(h => h.level >= 2 && h.level <= 3));
+</script>
+
+<nav class="rf-on-this-page" data-scrollspy>
+	<p class="rf-on-this-page__title">On this page</p>
+	<ul class="rf-on-this-page__list">
+		{#each filtered as heading}
+			<li class="rf-on-this-page__item" data-level={heading.level}>
+				<a href="#{heading.id}">{heading.text}</a>
+			</li>
+		{/each}
+	</ul>
+</nav>
+
+<style>
+	.rf-on-this-page {
+		font-size: 0.8rem;
+	}
+
+	.rf-on-this-page__title {
+		font-size: 0.7rem;
+		font-weight: 600;
+		text-transform: uppercase;
+		letter-spacing: 0.05em;
+		color: var(--rf-color-muted, #64748b);
+		margin: 0 0 0.75rem;
+	}
+
+	.rf-on-this-page__list {
+		list-style: none;
+		margin: 0;
+		padding: 0;
+	}
+
+	.rf-on-this-page__item {
+		border-left: 2px solid transparent;
+	}
+
+	.rf-on-this-page__item[data-level="3"] {
+		padding-left: 0.75rem;
+	}
+
+	.rf-on-this-page__item a {
+		display: block;
+		padding: 0.25rem 0.75rem;
+		color: var(--rf-color-muted, #64748b);
+		text-decoration: none;
+		line-height: 1.4;
+	}
+
+	.rf-on-this-page__item a:hover {
+		color: var(--rf-color-text, #1a1a2e);
+	}
+
+	.rf-on-this-page__item[data-active] {
+		border-left-color: var(--rf-color-primary, #0ea5e9);
+	}
+
+	.rf-on-this-page__item[data-active] a {
+		color: var(--rf-color-primary, #0ea5e9);
+	}
+</style>

package/svelte/index.ts

@@ -1,18 +1,35 @@
 import type { SvelteTheme } from '@refrakt-md/svelte';
-import manifest from './manifest.json';
+import adapterManifest from './manifest.json';
 import { registry } from './registry.js';
 import { elements } from './elements.js';
-import DocsLayout from './layouts/DocsLayout.svelte';
-import DefaultLayout from './layouts/DefaultLayout.svelte';
-import BlogLayout from './layouts/BlogLayout.svelte';
+import { defaultLayout, docsLayout, blogArticleLayout } from '@refrakt-md/theme-base';
 
-/** Re-export the raw manifest for server-side use (no Svelte imports) */
-export { default as manifest } from './manifest.json';
+// Layout region metadata from the base theme manifest (packages/lumina/manifest.json).
+// Merged with adapter manifest component paths to produce full LayoutDefinitions.
+const layoutRegions: Record<string, { regions: string[]; requiredRegions?: string[] }> = {
+	default: { regions: ['header', 'footer'] },
+	docs: { regions: ['header', 'nav', 'sidebar', 'footer'], requiredRegions: ['nav'] },
+	'blog-article': { regions: ['header', 'sidebar', 'footer'] },
+};
+
+const layouts: Record<string, any> = {};
+for (const [name, adapter] of Object.entries(adapterManifest.layouts)) {
+	layouts[name] = { ...layoutRegions[name], ...adapter };
+}
+
+const manifest = { ...adapterManifest, layouts };
+
+/** Re-export the merged manifest for server-side use (no Svelte imports) */
+export { manifest };
 
 /** The structured theme object consumed by ThemeShell */
 export const theme: SvelteTheme = {
 	manifest: manifest as any,
-	layouts: { default: DefaultLayout, docs: DocsLayout, blog: BlogLayout },
+	layouts: {
+		default: defaultLayout,
+		docs: docsLayout,
+		'blog-article': blogArticleLayout,
+	},
 	components: registry,
 	elements,
 };

package/svelte/layouts/DocsLayout.svelte

@@ -1,17 +1,24 @@
 <script lang="ts">
 	import { Renderer } from '@refrakt-md/svelte';
+	import OnThisPage from '../components/OnThisPage.svelte';
 
-	let { title, regions, renderable, url, pages }: {
+	let { title, regions, renderable, url, pages, headings, frontmatter }: {
 		title: string;
 		description: string;
 		regions: Record<string, { name: string; mode: string; content: any[] }>;
 		renderable: any;
 		url: string;
 		pages: Array<{ url: string; title: string; draft: boolean }>;
+		headings?: Array<{ level: number; text: string; id: string }>;
+		frontmatter?: Record<string, unknown>;
 	} = $props();
 
 	const hasNav = $derived(!!regions.nav);
 
+	// Show TOC when 2+ qualifying headings (h2/h3) and not opted out via frontmatter
+	const tocHeadings = $derived((headings ?? []).filter(h => h.level >= 2 && h.level <= 3));
+	const showToc = $derived(tocHeadings.length >= 2 && frontmatter?.toc !== false);
+
 	// Mobile panel state
 	let menuOpen = $state(false);
 	let navOpen = $state(false);
@@ -149,7 +156,14 @@
 {/if}
 
 <main class="rf-docs-content" class:rf-docs-content--has-nav={hasNav}>
-	<div class="rf-docs-content__inner">
-		<Renderer node={renderable} />
+	<div class="rf-docs-content__inner" class:rf-docs-content__inner--has-toc={showToc}>
+		<div class="rf-docs-content__body">
+			<Renderer node={renderable} />
+		</div>
+		{#if showToc}
+			<aside class="rf-docs-toc">
+				<OnThisPage headings={tocHeadings} />
+			</aside>
+		{/if}
 	</div>
 </main>

package/svelte/manifest.json

@@ -6,28 +6,11 @@
 	"designTokens": "tokens.css",
 
 	"layouts": {
-		"default": {
-			"component": "layouts/DefaultLayout.svelte",
-			"regions": ["header", "footer"]
-		},
-		"docs": {
-			"component": "layouts/DocsLayout.svelte",
-			"regions": ["header", "nav", "sidebar", "footer"],
-			"requiredRegions": ["nav"]
-		},
-		"blog": {
-			"component": "layouts/BlogLayout.svelte",
-			"regions": ["header", "sidebar", "footer"]
-		}
+		"default": { "component": "layouts/DefaultLayout.svelte" },
+		"docs": { "component": "layouts/DocsLayout.svelte" },
+		"blog": { "component": "layouts/BlogLayout.svelte" }
 	},
 
-	"routeRules": [
-		{ "pattern": "docs/**", "layout": "docs" },
-		{ "pattern": "blog", "layout": "blog" },
-		{ "pattern": "blog/**", "layout": "blog" },
-		{ "pattern": "**", "layout": "default" }
-	],
-
 	"components": {
 		"Hint": { "component": "components/Hint.svelte" },
 		"CallToAction": { "component": "components/CallToAction.svelte" },

package/dist/lib/engine.d.ts

@@ -1,13 +0,0 @@
-import type { ThemeConfig, RendererNode } from './types.js';
-/**
- * Create an identity transform function from a theme configuration.
- *
- * The returned function walks the serialized tag tree and enhances it:
- * - Adds BEM classes based on the rune config
- * - Reads and consumes meta tags for variant info
- * - Auto-labels children by tag name (e.g., summary → data-name="header")
- * - Injects structural elements (headers, icons, titles) from config
- * - Recurses into children for nested runes
- */
-export declare function createTransform(config: ThemeConfig): (tree: RendererNode) => RendererNode;
-//# sourceMappingURL=engine.d.ts.map

package/dist/lib/engine.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"engine.d.ts","sourceRoot":"","sources":["../../src/lib/engine.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAA6C,YAAY,EAAE,MAAM,YAAY,CAAC;AAkBvG;;;;;;;;;GASG;AACH,wBAAgB,eAAe,CAAC,MAAM,EAAE,WAAW,UAGjB,YAAY,KAAG,YAAY,CAgB5D"}