@refrakt-md/svelte 0.5.1 → 0.7.0

package/package.json

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

package/src/Renderer.svelte

@@ -79,7 +79,7 @@
 	{: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;
@@ -33,9 +36,12 @@
 			author?: string;
 			tags?: string[];
 			image?: string;
+			version?: string;
+			versionGroup?: string;
 		}>;
 		url: string;
 		seo?: PageSeo;
+		headings?: Array<{ level: number; text: string; id: string }>;
 	}
 
 	let { theme, page }: { theme: SvelteTheme; page: PageData } = $props();
@@ -47,25 +53,47 @@
 	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']);
+
+	// Keep RfContext in sync for web components BEFORE DOM updates.
+	// $effect.pre runs before {#key page.url} recreates the DOM, so
+	// RfNav.connectedCallback sees the new URL when it fires.
+	$effect.pre(() => {
+		RfContext.pages = page.pages;
+		RfContext.currentUrl = page.url;
+	});
 
-	// 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;
+		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 +129,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 +141,7 @@
 			renderable={page.renderable}
 			pages={page.pages}
 			url={page.url}
+			headings={page.headings}
 		/>
 	{/if}
 {/key}

package/src/behaviors.ts

@@ -0,0 +1,15 @@
+import { initRuneBehaviors } from '@refrakt-md/behaviors';
+
+/** Svelte action that initializes rune behaviors on mounted content. */
+export function behaviors(node: HTMLElement) {
+	let cleanup = initRuneBehaviors(node);
+	return {
+		update() {
+			cleanup();
+			cleanup = initRuneBehaviors(node);
+		},
+		destroy() {
+			cleanup();
+		},
+	};
+}

package/src/elements/Pre.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+	import type { SerializedTag } from '../types.js';
+	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/src/elements/Table.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+	import type { SerializedTag } from '../types.js';
+	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(--rf-color-border);
+		border-radius: var(--rf-radius-md);
+	}
+	.table-wrapper :global(table) {
+		margin: 0;
+		border-collapse: collapse;
+		width: 100%;
+		min-width: 100%;
+	}
+	.table-wrapper :global(th) {
+		background: var(--rf-color-surface);
+	}
+	.table-wrapper :global(th:first-child) {
+		border-top-left-radius: var(--rf-radius-md);
+	}
+	.table-wrapper :global(th:last-child) {
+		border-top-right-radius: var(--rf-radius-md);
+	}
+	.table-wrapper :global(tr:last-child td) {
+		border-bottom: none;
+	}
+</style>

package/src/elements.ts

@@ -0,0 +1,9 @@
+import type { ElementOverrides } from './context.js';
+import Table from './elements/Table.svelte';
+import Pre from './elements/Pre.svelte';
+
+/** Base element overrides — functional enhancements for HTML elements */
+export const elements: ElementOverrides = {
+	'table': Table,
+	'pre': Pre,
+};

package/src/index.ts

@@ -5,4 +5,8 @@ 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';
+export { registry } from './registry.js';
+export { elements } from './elements.js';
+export { behaviors } from './behaviors.js';

package/src/registry.ts

@@ -0,0 +1,22 @@
+import type { ComponentRegistry } from './context.js';
+
+/** Maps typeof attribute values to base theme Svelte components.
+ *
+ *  All runes are now rendered purely through the identity transform engine:
+ *
+ *  - Interactive runes requiring client-side lifecycle (Diagram, Map, Nav, Sandbox)
+ *    are framework-neutral web components in @refrakt-md/behaviors, initialized
+ *    via custom elements. Their postTransform hooks produce custom element tags.
+ *
+ *  - Data rendering runes (Chart, Comparison, Embed, Testimonial, DesignContext)
+ *    use postTransform hooks to generate their complete HTML structure.
+ *
+ *  - Behavior-driven runes (tabs, accordion, datatable, form, reveal, preview, details)
+ *    use BEM classes from the identity transform + @refrakt-md/behaviors.
+ *
+ *  - Layout runes (grid, bento, storyboard, pricing) are fully handled by
+ *    identity transform + CSS attribute selectors / custom properties.
+ *
+ *  The registry is empty but preserved for user-defined component overrides.
+ */
+export const registry: ComponentRegistry = {};

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'
+	);
+}