@refrakt-md/lumina 0.5.1 → 0.6.0

package/index.css

@@ -17,6 +17,7 @@
 @import './styles/layouts/default.css';
 @import './styles/layouts/docs.css';
 @import './styles/layouts/blog.css';
+@import './styles/layouts/on-this-page.css';
 
 /* Runes */
 @import './styles/runes/accordion.css';

package/manifest.json

@@ -9,5 +9,17 @@
     "attribute": "data-theme",
     "values": { "dark": "dark", "light": "light" },
     "systemPreference": true
+  },
+  "layouts": {
+    "default": {
+      "regions": ["header", "footer"]
+    },
+    "docs": {
+      "regions": ["header", "nav", "sidebar", "footer"],
+      "requiredRegions": ["nav"]
+    },
+    "blog": {
+      "regions": ["header", "sidebar", "footer"]
+    }
   }
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@refrakt-md/lumina",
   "description": "Lumina theme for refrakt.md — design tokens, CSS, identity transform, and framework adapters",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -46,10 +46,10 @@
     "build": "tsc"
   },
   "dependencies": {
-    "@refrakt-md/theme-base": "0.5.1",
-    "@refrakt-md/transform": "0.5.1",
-    "@refrakt-md/types": "0.5.1",
-    "@refrakt-md/svelte": "0.5.1"
+    "@refrakt-md/theme-base": "0.6.0",
+    "@refrakt-md/transform": "0.6.0",
+    "@refrakt-md/types": "0.6.0",
+    "@refrakt-md/svelte": "0.6.0"
   },
   "peerDependencies": {
     "svelte": "^5.0.0",

package/styles/layouts/docs.css

@@ -88,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 {
@@ -130,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 {

package/styles/layouts/mobile.css

@@ -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/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/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" },