@refrakt-md/svelte 0.5.0 → 0.6.0

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@refrakt-md/svelte",
 	"description": "Svelte renderer for refrakt.md content",
-	"version": "0.5.0",
+	"version": "0.6.0",
 	"type": "module",
 	"license": "MIT",
 	"repository": {
@@ -27,8 +27,9 @@
 	],
 	"dependencies": {
 		"@markdoc/markdoc": "0.4.0",
-		"@refrakt-md/behaviors": "0.5.0",
-		"@refrakt-md/types": "0.5.0"
+		"@refrakt-md/behaviors": "0.6.0",
+		"@refrakt-md/transform": "0.6.0",
+		"@refrakt-md/types": "0.6.0"
 	},
 	"peerDependencies": {
 		"svelte": "^5.0.0"

package/src/Renderer.svelte

@@ -24,6 +24,25 @@
 		return result;
 	}
 
+	function escapeAttr(str: string): string {
+		return str.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+	}
+
+	/** Serialize an SVG tag tree to HTML string. Using {@html} avoids SVG namespace
+	 *  issues that occur when <svelte:element> creates child SVG elements (path, circle, etc.)
+	 *  outside the SVG namespace context during client-side navigation. */
+	function svgToHtml(tag: SerializedTag): string {
+		const attrs = Object.entries(htmlAttrs(tag.attributes))
+			.map(([k, v]) => ` ${k}="${escapeAttr(v)}"`)
+			.join('');
+		const children = tag.children.map(child => {
+			if (typeof child === 'string') return escapeAttr(child);
+			if (isTag(child)) return svgToHtml(child);
+			return '';
+		}).join('');
+		return `<${tag.name}${attrs}>${children}</${tag.name}>`;
+	}
+
 	const globalOverrides = getElementOverrides();
 	const merged = $derived(overrides
 		? { ...globalOverrides, ...overrides }
@@ -55,10 +74,12 @@
 				<Renderer node={child} overrides={merged} />
 			{/each}
 		</ElementOverride>
+	{:else if node.name === 'svg'}
+		{@html svgToHtml(node)}
 	{:else}
 		<svelte:element this={node.name} {...htmlAttrs(node.attributes)}>
 			{#each node.children as child}
-				{#if node.attributes?.['data-codeblock'] && typeof child === 'string'}
+				{#if (node.attributes?.['data-codeblock'] || node.attributes?.['data-raw-html']) && typeof child === 'string'}
 					{@html child}
 				{:else}
 					<Renderer node={child} overrides={merged} />

package/src/ThemeShell.svelte

@@ -1,9 +1,12 @@
 <script lang="ts">
 	import type { SvelteTheme } from './theme.js';
+	import { isLayoutConfig } from './theme.js';
 	import { setRegistry, setElementOverrides } from './context.js';
 	import { setContext, tick } from 'svelte';
 	import { matchRouteRule } from './route-rules.js';
-	import { initRuneBehaviors } from '@refrakt-md/behaviors';
+	import { initRuneBehaviors, initLayoutBehaviors, registerElements, RfContext } from '@refrakt-md/behaviors';
+	import { layoutTransform } from '@refrakt-md/transform';
+	import Renderer from './Renderer.svelte';
 
 	interface OgMeta {
 		title?: string;
@@ -36,6 +39,7 @@
 		}>;
 		url: string;
 		seo?: PageSeo;
+		headings?: Array<{ level: number; text: string; id: string }>;
 	}
 
 	let { theme, page }: { theme: SvelteTheme; page: PageData } = $props();
@@ -47,25 +51,42 @@
 	if (theme.elements) setElementOverrides(theme.elements);
 	// svelte-ignore state_referenced_locally
 	setContext('pages', page.pages);
+	// svelte-ignore state_referenced_locally
+	setContext('currentUrl', page.url);
+
+	// Populate RfContext for framework-neutral web components (Nav, Sandbox, etc.)
+	// svelte-ignore state_referenced_locally
+	RfContext.pages = page.pages;
+	// svelte-ignore state_referenced_locally
+	RfContext.currentUrl = page.url;
+	registerElements();
 
 	// Pick layout via route rules (reactive so layout updates on client-side navigation)
-	const layoutName = $derived(matchRouteRule(page.url, theme.manifest.routeRules));
-	const Layout = $derived(theme.layouts[layoutName] ?? theme.layouts['default']);
+	const layoutName = $derived(matchRouteRule(page.url, theme.manifest.routeRules ?? []));
+	const layoutEntry = $derived(theme.layouts[layoutName] ?? theme.layouts['default']);
 
-	// Initialize rune behaviors after render, re-run on navigation.
+	// Initialize rune + layout behaviors after render, re-run on navigation.
 	// The {#key page.url} block in the template ensures full DOM recreation on
 	// navigation, so behaviors always run on fresh DOM and old behavior-modified
 	// elements are simply discarded (no cleanup/restore conflicts with Svelte).
 	$effect(() => {
 		void page.url; // re-run when page changes
-		let cleanup: (() => void) | undefined;
+		// Keep RfContext in sync for web components on client-side navigation
+		RfContext.pages = page.pages;
+		RfContext.currentUrl = page.url;
+		let cleanupRunes: (() => void) | undefined;
+		let cleanupLayout: (() => void) | undefined;
 		let active = true;
 		tick().then(() => {
-			if (active) cleanup = initRuneBehaviors();
+			if (active) {
+				cleanupRunes = initRuneBehaviors();
+				cleanupLayout = initLayoutBehaviors();
+			}
 		});
 		return () => {
 			active = false;
-			cleanup?.();
+			cleanupRunes?.();
+			cleanupLayout?.();
 		};
 	});
 </script>
@@ -101,8 +122,11 @@
 </svelte:head>
 
 {#key page.url}
-	{#if Layout}
-		<Layout
+	{#if isLayoutConfig(layoutEntry)}
+		{@const tree = layoutTransform(layoutEntry, page, 'rf')}
+		<Renderer node={tree} />
+	{:else if layoutEntry}
+		<svelte:component this={layoutEntry}
 			title={page.title}
 			description={page.description}
 			frontmatter={page.frontmatter}
@@ -110,6 +134,7 @@
 			renderable={page.renderable}
 			pages={page.pages}
 			url={page.url}
+			headings={page.headings}
 		/>
 	{/if}
 {/key}

package/src/index.ts

@@ -5,4 +5,5 @@ export { serialize, serializeTree } from './serialize.js';
 export { setRegistry, getComponent, setElementOverrides, getElementOverrides } from './context.js';
 export type { ComponentRegistry, ElementOverrides } from './context.js';
 export type { SvelteTheme } from './theme.js';
+export { isLayoutConfig } from './theme.js';
 export { matchRouteRule } from './route-rules.js';

package/src/theme.ts

@@ -1,4 +1,5 @@
 import type { ThemeManifest } from '@refrakt-md/types';
+import type { LayoutConfig } from '@refrakt-md/transform';
 import type { Component } from 'svelte';
 
 /**
@@ -7,10 +8,20 @@ import type { Component } from 'svelte';
  */
 export interface SvelteTheme {
 	manifest: ThemeManifest;
-	/** Layout name → Svelte component */
-	layouts: Record<string, Component<any>>;
+	/** Layout name → declarative LayoutConfig or Svelte component (legacy) */
+	layouts: Record<string, Component<any> | LayoutConfig>;
 	/** typeof name → Svelte component (the component registry) */
 	components: Record<string, Component<any>>;
 	/** HTML element name → Svelte component (element-level overrides) */
 	elements?: Record<string, Component<any>>;
 }
+
+/** Runtime check: LayoutConfig has a `block` string + `slots` object */
+export function isLayoutConfig(value: unknown): value is LayoutConfig {
+	return (
+		value !== null &&
+		typeof value === 'object' &&
+		typeof (value as any).block === 'string' &&
+		typeof (value as any).slots === 'object'
+	);
+}