ripple 0.3.128 → 0.4.0

package/tests/hydration/compiled/client/html.js

@@ -2,1783 +2,2153 @@
 import * as _$_ from 'ripple/internal/client';
 
 var root = _$_.template(`<div></div>`, 0);
+
+function StaticHtml_render(__anchor, __block) {
+	const html = '<p><strong>Bold</strong> text</p>';
+	var div = root();
+
+	div.innerHTML = html ?? div.innerHTML;
+	_$_.append(__anchor, div);
+}
+
+StaticHtml[_$_.$r] = StaticHtml_render;
+
 var root_1 = _$_.template(`<div></div>`, 0);
+
+function DynamicHtml_render(__anchor, __block) {
+	const content = '<p>Dynamic <span>HTML</span> content</p>';
+	var div_1 = root_1();
+
+	div_1.innerHTML = content ?? div_1.innerHTML;
+	_$_.append(__anchor, div_1);
+}
+
+DynamicHtml[_$_.$r] = DynamicHtml_render;
+
 var root_2 = _$_.template(`<div></div>`, 0);
+
+function EmptyHtml_render(__anchor, __block) {
+	const html = '';
+	var div_2 = root_2();
+
+	div_2.innerHTML = html ?? div_2.innerHTML;
+	_$_.append(__anchor, div_2);
+}
+
+EmptyHtml[_$_.$r] = EmptyHtml_render;
+
 var root_3 = _$_.template(`<section></section>`, 0);
+
+function ComplexHtml_render(__anchor, __block) {
+	const html = '<div class="nested"><span>Nested <em>content</em></span></div>';
+	var section = root_3();
+
+	section.innerHTML = html ?? section.innerHTML;
+	_$_.append(__anchor, section);
+}
+
+ComplexHtml[_$_.$r] = ComplexHtml_render;
+
 var root_4 = _$_.template(`<div><!><!></div>`, 0);
+
+function render(__prev) {
+	_$_.html(__prev._node, () => __prev._html1);
+	_$_.html(__prev._node_1, () => __prev._html2);
+}
+
+function MultipleHtml_render(__anchor, __block) {
+	const html1 = '<p>First paragraph</p>';
+	const html2 = '<p>Second paragraph</p>';
+	var div_3 = root_4();
+
+	{
+		var node = _$_.hydrating ? _$_.hydrate_child() : div_3.firstChild;
+		var node_1 = _$_.hydrating ? _$_.hydrate_sibling() : node.nextSibling;
+
+		_$_.hydrating && _$_.pop(div_3);
+	}
+
+	_$_.render(render, { _node: node, _html1: html1, _node_1: node_1, _html2: html2 });
+	_$_.append(__anchor, div_3);
+}
+
+MultipleHtml[_$_.$r] = MultipleHtml_render;
+
 var root_5 = _$_.template(`<div><!><button>Increment</button></div>`, 0);
+
+function render_1(__prev) {
+	_$_.html(__prev._node_2, () => "<p>Count: 0</p>");
+}
+
+function HtmlWithReactivity_render(__anchor, __block) {
+	var div_4 = root_5();
+
+	{
+		var node_2 = _$_.hydrating ? _$_.hydrate_child() : div_4.firstChild;
+
+		_$_.hydrating && _$_.pop(div_4);
+	}
+
+	_$_.render(render_1, { _node_2: node_2 });
+	_$_.append(__anchor, div_4);
+}
+
+HtmlWithReactivity[_$_.$r] = HtmlWithReactivity_render;
+
 var root_6 = _$_.template(`<div class="wrapper"><div class="inner"><!></div></div>`, 0);
+
+function HtmlWrapper_render(__anchor, __block, { children }) {
+	var div_5 = root_6();
+
+	{
+		var div_6 = _$_.hydrating ? _$_.hydrate_child() : div_5.firstChild;
+
+		{
+			var expression = _$_.hydrating ? _$_.hydrate_child() : div_6.firstChild;
+
+			_$_.expression(expression, () => children);
+			_$_.hydrating && _$_.pop(div_6);
+		}
+	}
+
+	_$_.append(__anchor, div_5);
+}
+
+HtmlWrapper[_$_.$r] = HtmlWrapper_render;
+
 var root_7 = _$_.template(`<div class="vp-doc"></div>`, 0);
+
+function HtmlInChildren_render(__anchor, __block) {
+	const content = '<p><strong>Bold</strong> text</p>';
+
+	_$_.render_component(HtmlWrapper, __anchor, {
+		children: _$_.tsrx_element((__anchor, __block) => {
+			var div_7 = root_7();
+
+			div_7.innerHTML = content ?? div_7.innerHTML;
+			_$_.append(__anchor, div_7);
+		})
+	});
+}
+
+HtmlInChildren[_$_.$r] = HtmlInChildren_render;
+
 var root_8 = _$_.template(`<h1>Title</h1><div class="content"></div>`, 1, 2);
+
+function HtmlInChildrenWithSiblings_render(__anchor, __block) {
+	const content = '<p>Dynamic content</p>';
+
+	_$_.render_component(HtmlWrapper, __anchor, {
+		children: _$_.tsrx_element((__anchor, __block) => {
+			var fragment = root_8();
+			var h1 = _$_.first_child_frag(fragment);
+			var div_8 = _$_.hydrating ? _$_.hydrate_sibling() : h1.nextSibling;
+
+			div_8.innerHTML = content ?? div_8.innerHTML;
+			_$_.append(__anchor, fragment);
+		})
+	});
+}
+
+HtmlInChildrenWithSiblings[_$_.$r] = HtmlInChildrenWithSiblings_render;
+
 var root_9 = _$_.template(`<div class="doc"><!><!></div>`, 0);
+
+function render_2(__prev) {
+	_$_.html(__prev._node_3, () => __prev._html1);
+	_$_.html(__prev._node_4, () => __prev._html2);
+}
+
+function MultipleHtmlInChildren_render(__anchor, __block) {
+	const html1 = '<p>First</p>';
+	const html2 = '<p>Second</p>';
+
+	_$_.render_component(HtmlWrapper, __anchor, {
+		children: _$_.tsrx_element((__anchor, __block) => {
+			var div_9 = root_9();
+
+			{
+				var node_3 = _$_.hydrating ? _$_.hydrate_child() : div_9.firstChild;
+				var node_4 = _$_.hydrating ? _$_.hydrate_sibling() : node_3.nextSibling;
+
+				_$_.hydrating && _$_.pop(div_9);
+			}
+
+			_$_.render(render_2, {
+				_node_3: node_3,
+				_html1: html1,
+				_node_4: node_4,
+				_html2: html2
+			});
+
+			_$_.append(__anchor, div_9);
+		})
+	});
+}
+
+MultipleHtmlInChildren[_$_.$r] = MultipleHtmlInChildren_render;
+
 var root_10 = _$_.template(`<div></div>`, 0);
+
+function HtmlWithComments_render(__anchor, __block) {
+	const content = '<p>Before comment</p><!-- TODO: Elaborate --><p>After comment</p>';
+	var div_10 = root_10();
+
+	div_10.innerHTML = content ?? div_10.innerHTML;
+	_$_.append(__anchor, div_10);
+}
+
+HtmlWithComments[_$_.$r] = HtmlWithComments_render;
+
 var root_11 = _$_.template(`<div></div>`, 0);
+
+function HtmlWithEmptyComment_render(__anchor, __block) {
+	const content = '<p>Before</p><!----><p>After</p>';
+	var div_11 = root_11();
+
+	div_11.innerHTML = content ?? div_11.innerHTML;
+	_$_.append(__anchor, div_11);
+}
+
+HtmlWithEmptyComment[_$_.$r] = HtmlWithEmptyComment_render;
+
 var root_12 = _$_.template(`<div class="vp-doc"></div>`, 0);
+
+function HtmlWithCommentsInChildren_render(__anchor, __block) {
+	const content = '<h2 id="intro">Introduction</h2><p>Some text</p><!-- TODO --><p>More text</p>';
+
+	_$_.render_component(HtmlWrapper, __anchor, {
+		children: _$_.tsrx_element((__anchor, __block) => {
+			var div_12 = root_12();
+
+			div_12.innerHTML = content ?? div_12.innerHTML;
+			_$_.append(__anchor, div_12);
+		})
+	});
+}
+
+HtmlWithCommentsInChildren[_$_.$r] = HtmlWithCommentsInChildren_render;
+
 var root_13 = _$_.template(`<footer class="doc-footer">Footer content</footer>`, 0);
+
+function DocFooter_render(__anchor, __block) {
+	var footer = root_13();
+
+	_$_.append(__anchor, footer);
+}
+
+DocFooter[_$_.$r] = DocFooter_render;
+
 var root_15 = _$_.template(`<div class="edit-link"><a>Edit</a></div>`, 0);
+
+function consequent(__anchor, editPath) {
+	var div_16 = root_15();
+
+	{
+		var a = _$_.hydrating ? _$_.hydrate_child() : div_16.firstChild;
+
+		_$_.set_attribute(a, 'href', `https://github.com/edit/${editPath}`);
+	}
+
+	_$_.append(__anchor, div_16);
+}
+
+function if_1(editPath) {
+	if (editPath) return consequent;
+}
+
 var root_16 = _$_.template(`<nav class="prev-next"><a> </a></nav>`, 0);
+
+function render_3(__prev) {
+	var __a = __prev._nextLink.href;
+
+	if (__prev.a !== __a) {
+		_$_.set_attribute(__prev._a_1, 'href', __prev.a = __a);
+	}
+}
+
+function consequent_1(__anchor, nextLink) {
+	var nav = root_16();
+
+	{
+		var a_1 = _$_.hydrating ? _$_.hydrate_child() : nav.firstChild;
+
+		{
+			var expression_2 = _$_.hydrating ? _$_.hydrate_child() : a_1.firstChild;
+
+			_$_.expression(expression_2, () => nextLink.text);
+			_$_.hydrating && _$_.pop(a_1);
+		}
+	}
+
+	_$_.render(render_3, { a: void 0, _nextLink: nextLink, _a_1: a_1 });
+	_$_.append(__anchor, nav);
+}
+
+function if_2(nextLink) {
+	if (nextLink) return consequent_1;
+}
+
 var root_18 = _$_.template(`<li><a> </a></li>`, 0);
+
+function render_4(__prev) {
+	var __a = __prev._item.text;
+
+	if (__prev.a !== __a) {
+		_$_.set_text(__prev._expression_3, __prev.a = __a);
+	}
+
+	var __b = __prev._item.href;
+
+	if (__prev.b !== __b) {
+		_$_.set_attribute(__prev._a_2, 'href', __prev.b = __b);
+	}
+}
+
 var root_17 = _$_.template(`<div class="toc"><ul></ul></div>`, 0);
-var root_14 = _$_.template(`<div class="layout"><div class="content-container"><article><div><!></div></article><!><!><!></div><aside><!></aside></div>`, 0);
+
+function consequent_2(__anchor, toc) {
+	var div_17 = root_17();
+
+	{
+		var ul = _$_.hydrating ? _$_.hydrate_child() : div_17.firstChild;
+
+		{
+			_$_.for(
+				ul,
+				() => toc,
+				(__anchor, item) => {
+					var li = root_18();
+
+					{
+						var a_2 = _$_.hydrating ? _$_.hydrate_child() : li.firstChild;
+
+						{
+							var expression_3 = _$_.hydrating ? _$_.hydrate_text() : a_2.firstChild;
+						}
+					}
+
+					_$_.render(render_4, {
+						a: ' ',
+						b: void 0,
+						_item: item,
+						_expression_3: expression_3,
+						_a_2: a_2
+					});
+
+					_$_.append(__anchor, li);
+				},
+				4
+			);
+
+			_$_.hydrating && _$_.pop(ul);
+		}
+	}
+
+	_$_.append(__anchor, div_17);
+}
+
+function if_3(toc) {
+	if (toc.length > 0) return consequent_2;
+}
+
+var root_14 = _$_.template(`<div class="layout"><div class="content-container"><article><div><!></div></article><!><!></div><aside><!></aside></div>`, 0);
+
+function DocLayout_render(
+	__anchor,
+	__block,
+	{ children, editPath = '', nextLink = null, toc = [] }
+) {
+	var div_13 = root_14();
+
+	{
+		var div_14 = _$_.hydrating ? _$_.hydrate_child() : div_13.firstChild;
+
+		{
+			var article = _$_.hydrating ? _$_.hydrate_child() : div_14.firstChild;
+
+			{
+				var div_15 = _$_.hydrating ? _$_.hydrate_child() : article.firstChild;
+
+				{
+					var expression_1 = _$_.hydrating ? _$_.hydrate_child() : div_15.firstChild;
+
+					_$_.expression(expression_1, () => children);
+					_$_.hydrating && _$_.pop(div_15);
+				}
+			}
+
+			_$_.hydrating && _$_.pop(article);
+
+			var node_5 = _$_.hydrating ? _$_.hydrate_sibling() : article.nextSibling;
+
+			_$_.if(node_5, if_1, false, editPath);
+
+			var node_6 = _$_.hydrating ? _$_.hydrate_sibling() : node_5.nextSibling;
+
+			_$_.if(node_6, if_2, false, nextLink);
+
+			var node_7 = _$_.hydrating ? _$_.hydrate_sibling() : _$_.append_into(div_14);
+
+			_$_.render_component(DocFooter, node_7, {});
+			_$_.hydrating && _$_.pop(div_14);
+		}
+
+		var aside = _$_.hydrating ? _$_.hydrate_sibling() : div_14.nextSibling;
+
+		{
+			var node_8 = _$_.hydrating ? _$_.hydrate_child() : aside.firstChild;
+
+			_$_.if(node_8, if_3, false, toc);
+			_$_.hydrating && _$_.pop(aside);
+		}
+	}
+
+	_$_.append(__anchor, div_13);
+}
+
+DocLayout[_$_.$r] = DocLayout_render;
+
 var root_19 = _$_.template(`<div class="vp-doc"></div>`, 0);
+
+function HtmlWithServerData_render(__anchor, __block) {
+	const content = '<h1 id="intro" class="doc-h1">Introduction</h1><p>Ripple is a framework.</p>';
+
+	_$_.render_component(DocLayout, __anchor, {
+		editPath: "docs/introduction.md",
+		nextLink: { href: '/docs/quick-start', text: 'Quick Start' },
+		toc: [
+			{ href: '#intro', text: 'Introduction' },
+			{ href: '#features', text: 'Features' }
+		],
+
+		children: _$_.tsrx_element((__anchor, __block) => {
+			var div_18 = root_19();
+
+			div_18.innerHTML = content ?? div_18.innerHTML;
+			_$_.append(__anchor, div_18);
+		})
+	});
+}
+
+HtmlWithServerData[_$_.$r] = HtmlWithServerData_render;
+
 var root_20 = _$_.template(`<div class="vp-doc"></div>`, 0);
+
+function HtmlWithClientDefaults_render(__anchor, __block) {
+	const content = '<h1 id="intro" class="doc-h1">Introduction</h1><p>Ripple is a framework.</p>';
+
+	_$_.render_component(DocLayout, __anchor, {
+		children: _$_.tsrx_element((__anchor, __block) => {
+			var div_19 = root_20();
+
+			div_19.innerHTML = content ?? div_19.innerHTML;
+			_$_.append(__anchor, div_19);
+		})
+	});
+}
+
+HtmlWithClientDefaults[_$_.$r] = HtmlWithClientDefaults_render;
+
 var root_21 = _$_.template(`<div class="vp-doc"></div>`, 0);
+
+function HtmlWithUndefinedContent_render(__anchor, __block) {
+	const content = undefined;
+
+	_$_.render_component(DocLayout, __anchor, {
+		children: _$_.tsrx_element((__anchor, __block) => {
+			var div_20 = root_21();
+
+			div_20.innerHTML = content ?? div_20.innerHTML;
+			_$_.append(__anchor, div_20);
+		})
+	});
+}
+
+HtmlWithUndefinedContent[_$_.$r] = HtmlWithUndefinedContent_render;
+
 var root_22 = _$_.template(`<h1 class="heading"><!></h1>`, 0);
 var root_23 = _$_.template(`<h2 class="heading"><!></h2>`, 0);
-var root_24 = _$_.template(`<div class="code-block"><div class="header"><button>Copy</button><span class="lang">js</span></div><div class="content"></div></div>`, 0);
-var root_25 = _$_.template(`<div class="wrapper"><div class="inner"><!></div></div>`, 0);
-var root_26 = _$_.template(`<!><p>First paragraph</p><p>Second paragraph</p><!><p>After code</p>`, 1, 5);
-var root_27 = _$_.template(`<h1 class="heading"><!></h1>`, 0);
-var root_28 = _$_.template(`<h2 class="heading"><!></h2>`, 0);
-var root_29 = _$_.template(`<!><p>First paragraph</p><p>Second paragraph</p><!><p>After code</p>`, 1, 5);
-var root_30 = _$_.template(`<span class="for-item"> </span>`, 0);
-var root_31 = _$_.template(`<!><p>First paragraph</p><!><p>After code</p>`, 1, 4);
-var root_32 = _$_.template(`<div class="try-box"> </div>`, 0);
-var root_33 = _$_.template(`<span>error</span>`, 0);
-var root_34 = _$_.template(`<!><p>First paragraph</p><!><p>After code</p>`, 1, 4);
-var root_35 = _$_.template(`<span class="boxed"><!></span>`, 0);
-var root_36 = _$_.template(` `, 1, 1);
-var root_37 = _$_.template(`<!><p>First paragraph</p><!><p>After code</p>`, 1, 4);
-var root_39 = _$_.template(`<div class="indicator"></div>`, 0);
-var root_38 = _$_.template(`<div><!><a><span> </span></a></div>`, 0);
-var root_41 = _$_.template(`<div class="section-items"><!></div>`, 0);
-var root_40 = _$_.template(`<section class="sidebar-section"><div class="section-header"><h2> </h2><button>Toggle</button></div><!></section>`, 0);
-var root_43 = _$_.template(`<!><!>`, 1, 2);
-var root_44 = _$_.template(`<!><!>`, 1, 2);
-var root_42 = _$_.template(`<aside class="sidebar"><nav><div class="group"></div><div class="group"></div></nav></aside>`, 0);
-var root_45 = _$_.template(`<header class="page-header"><div class="logo">MyApp</div></header>`, 0);
-var root_47 = _$_.template(`<div class="edit-link"><a href="/edit">Edit</a></div>`, 0);
-var root_46 = _$_.template(`<div class="layout"><!><div class="content-wrapper"><!><main class="main-content"><div class="article"><div><h1>Introduction</h1><p>Welcome to the docs.</p></div></div><!><!></main></div></div>`, 0);
-var root_48 = _$_.template(`<article class="doc-content"><div><!></div></article>`, 0);
-var root_49 = _$_.template(`<footer class="doc-footer">Footer</footer>`, 0);
-var root_51 = _$_.template(`<h1>Title</h1><p>Content goes here.</p>`, 1, 2);
-var root_52 = _$_.template(`<div class="edit-link"><a href="/edit">Edit</a></div>`, 0);
-var root_53 = _$_.template(`<nav class="prev-next"><a href="/prev">Previous</a></nav>`, 0);
-var root_50 = _$_.template(`<div class="content-container"><!><!><!><!></div>`, 0);
-var root_55 = _$_.template(`<div class="doc-content"></div>`, 0);
-var root_56 = _$_.template(`<div class="edit-link"><a href="/edit">Edit</a></div>`, 0);
-var root_54 = _$_.template(`<div class="content-container"><!><!><!></div>`, 0);
-var root_58 = _$_.template(`<div class="edit-link"><a href="/edit">Edit</a></div>`, 0);
-var root_57 = _$_.template(`<div class="content-container"><article class="doc-content"><div><!></div></article><!><!></div>`, 0);
-var root_59 = _$_.template(`<div class="doc-content"></div>`, 0);
-var root_60 = _$_.template(`<header class="header">Header</header>`, 0);
-var root_61 = _$_.template(`<aside class="sidebar">Sidebar</aside>`, 0);
-var root_62 = _$_.template(`<footer class="footer">Footer</footer>`, 0);
-var root_64 = _$_.template(`<div class="edit-link"><a href="/edit">Edit on GitHub</a></div>`, 0);
-var root_65 = _$_.template(`<nav class="prev-next"><a> </a></nav>`, 0);
-var root_63 = _$_.template(`<div class="layout"><!><div class="docs-wrapper"><!><main class="docs-main"><div class="docs-container"><div class="content"><div class="content-container"><article class="doc-content"><div><!></div></article><!><!><!></div></div></div></main></div></div>`, 0);
-var root_66 = _$_.template(`<div class="doc-content"></div>`, 0);
-var root_67 = _$_.template(`<div class="doc-content"></div>`, 0);
-var root_69 = _$_.template(`<div class="edit-link"><a>Edit on GitHub</a></div>`, 0);
-var root_71 = _$_.template(`<a class="pager prev"><span class="title"> </span></a>`, 0);
-var root_72 = _$_.template(`<span></span>`, 0);
-var root_73 = _$_.template(`<a class="pager next"><span class="title"> </span></a>`, 0);
-var root_70 = _$_.template(`<nav class="prev-next"><!><!></nav>`, 0);
-var root_75 = _$_.template(`<a> </a>`, 0);
-var root_74 = _$_.template(`<div class="aside-content"><nav class="outline"></nav></div>`, 0);
-var root_68 = _$_.template(`<div class="layout"><!><div class="docs-wrapper"><!><main class="docs-main"><div class="docs-container"><div class="content"><div class="content-container"><article class="doc-content"><div><!></div></article><!><!><!></div></div><aside class="aside"><!></aside></div></main></div></div>`, 0);
-var root_76 = _$_.template(`<div class="doc-content"></div>`, 0);
-var root_77 = _$_.template(`<div class="doc-content"></div>`, 0);
-var root_78 = _$_.template(`<div><template id="t1"></template><p class="content">Main content</p></div>`, 0);
-var root_79 = _$_.template(`<div class="wrapper"><h1>Title</h1><template id="data-template"></template><p class="after-template">Content after template</p></div>`, 0);
-var root_80 = _$_.template(`<div class="layout"><template id="page-data"></template><main><!></main></div>`, 0);
-var root_81 = _$_.template(`<div class="doc-content"></div>`, 0);
-var root_82 = _$_.template(`<section class="readable-section"><p>Ergonomics</p><h2>Sibling traversal pattern</h2><p>Before first block</p><p>Before second block</p><pre class="code-block"><code></code></pre><p>Between one and two</p><pre class="code-block"><code></code></pre><p>Between two and three</p><pre class="code-block"><code></code></pre></section>`, 0);
 
-import { Fragment, track } from 'ripple';
+function switch_case_0(__anchor, { level, children }) {
+	var h1_1 = root_22();
 
-export function StaticHtml() {
-	return _$_.tsrx_element((__anchor, __block) => {
-		const html = '<p><strong>Bold</strong> text</p>';
-		var div = root();
+	{
+		var expression_4 = _$_.hydrating ? _$_.hydrate_child() : h1_1.firstChild;
 
-		div.innerHTML = html ?? div.innerHTML;
-		_$_.append(__anchor, div);
-	});
+		_$_.expression(expression_4, () => children);
+		_$_.hydrating && _$_.pop(h1_1);
+	}
+
+	_$_.append(__anchor, h1_1);
 }
 
-export function DynamicHtml() {
-	return _$_.tsrx_element((__anchor, __block) => {
-		const content = '<p>Dynamic <span>HTML</span> content</p>';
-		var div_1 = root_1();
+function switch_case_1(__anchor, { level, children }) {
+	var h2 = root_23();
 
-		div_1.innerHTML = content ?? div_1.innerHTML;
-		_$_.append(__anchor, div_1);
-	});
+	{
+		var expression_5 = _$_.hydrating ? _$_.hydrate_child() : h2.firstChild;
+
+		_$_.expression(expression_5, () => children);
+		_$_.hydrating && _$_.pop(h2);
+	}
+
+	_$_.append(__anchor, h2);
 }
 
-export function EmptyHtml() {
-	return _$_.tsrx_element((__anchor, __block) => {
-		const html = '';
-		var div_2 = root_2();
+function switch_1({ level, children }) {
+	switch (level) {
+		case 1:
+			return switch_case_0;
 
-		div_2.innerHTML = html ?? div_2.innerHTML;
-		_$_.append(__anchor, div_2);
-	});
+		case 2:
+			return switch_case_1;
+	}
 }
 
-export function ComplexHtml() {
-	return _$_.tsrx_element((__anchor, __block) => {
-		const html = '<div class="nested"><span>Nested <em>content</em></span></div>';
-		var section = root_3();
+function DynamicHeading_render(__anchor, __block, { level, children }) {
+	_$_.switch(__anchor, switch_1, true, { level, children });
+}
 
-		section.innerHTML = html ?? section.innerHTML;
-		_$_.append(__anchor, section);
-	});
+DynamicHeading[_$_.$r] = DynamicHeading_render;
+
+var root_24 = _$_.template(`<div class="code-block"><div class="header"><button>Copy</button><span class="lang">js</span></div><div class="content"></div></div>`, 0);
+
+function CodeBlock_render(__anchor, __block, { code }) {
+	const highlighted = `<pre class="shiki"><code>${code}</code></pre>`;
+	var div_21 = root_24();
+
+	{
+		var div_23 = _$_.hydrating ? _$_.hydrate_child() : div_21.firstChild;
+		var div_22 = _$_.hydrating ? _$_.hydrate_sibling() : div_23.nextSibling;
+
+		div_22.innerHTML = highlighted ?? div_22.innerHTML;
+	}
+
+	_$_.append(__anchor, div_21);
 }
 
-export function MultipleHtml() {
-	return _$_.tsrx_element((__anchor, __block) => {
-		const html1 = '<p>First paragraph</p>';
-		const html2 = '<p>Second paragraph</p>';
-		var div_3 = root_4();
+CodeBlock[_$_.$r] = CodeBlock_render;
+
+var root_25 = _$_.template(`<div class="wrapper"><div class="inner"><!></div></div>`, 0);
+
+function ContentWrapper_render(__anchor, __block, { children }) {
+	var div_24 = root_25();
+
+	{
+		var div_25 = _$_.hydrating ? _$_.hydrate_child() : div_24.firstChild;
 
 		{
-			var node = _$_.hydrating ? _$_.hydrate_child() : div_3.firstChild;
-			var node_1 = _$_.hydrating ? _$_.hydrate_sibling() : node.nextSibling;
+			var expression_6 = _$_.hydrating ? _$_.hydrate_child() : div_25.firstChild;
 
-			_$_.pop(div_3);
+			_$_.expression(expression_6, () => children);
+			_$_.hydrating && _$_.pop(div_25);
 		}
+	}
+
+	_$_.append(__anchor, div_24);
+}
+
+ContentWrapper[_$_.$r] = ContentWrapper_render;
+
+var root_26 = _$_.template(`<!><p>First paragraph</p><p>Second paragraph</p><!><p>After code</p>`, 1, 5);
+
+function HtmlAfterSwitchInChildren_render(__anchor, __block) {
+	_$_.render_component(ContentWrapper, __anchor, {
+		children: _$_.tsrx_element((__anchor, __block) => {
+			var fragment_1 = root_26();
+			var node_9 = _$_.first_child_frag(fragment_1);
 
-		_$_.render(
-			(__prev) => {
-				_$_.html(node, () => html1);
-				_$_.html(node_1, () => html2);
-			},
-			{}
-		);
+			_$_.render_component(DynamicHeading, node_9, {
+				level: 1,
+				children: _$_.tsrx_element((__anchor, __block) => {
+					var expression_7 = _$_.text('Title');
+
+					_$_.append(__anchor, expression_7);
+				})
+			});
 
-		_$_.append(__anchor, div_3);
+			var p_1 = _$_.hydrating ? _$_.hydrate_sibling() : node_9.nextSibling;
+			var p = _$_.hydrating ? _$_.hydrate_sibling() : p_1.nextSibling;
+			var node_10 = _$_.hydrating ? _$_.hydrate_sibling() : p.nextSibling;
+
+			_$_.render_component(CodeBlock, node_10, { code: "const x = 1;" });
+			_$_.next();
+			_$_.append(__anchor, fragment_1);
+		})
 	});
 }
 
-export function HtmlWithReactivity() {
-	return _$_.tsrx_element((__anchor, __block) => {
-		var div_4 = root_5();
+HtmlAfterSwitchInChildren[_$_.$r] = HtmlAfterSwitchInChildren_render;
 
-		{
-			var node_2 = _$_.hydrating ? _$_.hydrate_child() : div_4.firstChild;
+var root_27 = _$_.template(`<h1 class="heading"><!></h1>`, 0);
+var root_28 = _$_.template(`<h2 class="heading"><!></h2>`, 0);
 
-			_$_.pop(div_4);
-		}
+function consequent_3(__anchor, { primary, children }) {
+	var h1_2 = root_27();
 
-		_$_.render(() => {
-			_$_.html(node_2, () => "<p>Count: 0</p>");
-		});
+	{
+		var expression_8 = _$_.hydrating ? _$_.hydrate_child() : h1_2.firstChild;
+
+		_$_.expression(expression_8, () => children);
+		_$_.hydrating && _$_.pop(h1_2);
+	}
+
+	_$_.append(__anchor, h1_2);
+}
+
+function alternate(__anchor, { primary, children }) {
+	var h2_1 = root_28();
+
+	{
+		var expression_9 = _$_.hydrating ? _$_.hydrate_child() : h2_1.firstChild;
+
+		_$_.expression(expression_9, () => children);
+		_$_.hydrating && _$_.pop(h2_1);
+	}
+
+	_$_.append(__anchor, h2_1);
+}
+
+function if_4({ primary, children }) {
+	if (primary) return consequent_3; else return alternate;
+}
 
-		_$_.append(__anchor, div_4);
+function IfHeading_render(__anchor, __block, { primary, children }) {
+	_$_.if(__anchor, if_4, true, { primary, children });
+}
+
+IfHeading[_$_.$r] = IfHeading_render;
+
+var root_29 = _$_.template(`<!><p>First paragraph</p><p>Second paragraph</p><!><p>After code</p>`, 1, 5);
+
+function HtmlAfterIfInChildren_render(__anchor, __block) {
+	_$_.render_component(ContentWrapper, __anchor, {
+		children: _$_.tsrx_element((__anchor, __block) => {
+			var fragment_2 = root_29();
+			var node_11 = _$_.first_child_frag(fragment_2);
+
+			_$_.render_component(IfHeading, node_11, {
+				primary: true,
+				children: _$_.tsrx_element((__anchor, __block) => {
+					var expression_10 = _$_.text('Title');
+
+					_$_.append(__anchor, expression_10);
+				})
+			});
+
+			var p_3 = _$_.hydrating ? _$_.hydrate_sibling() : node_11.nextSibling;
+			var p_2 = _$_.hydrating ? _$_.hydrate_sibling() : p_3.nextSibling;
+			var node_12 = _$_.hydrating ? _$_.hydrate_sibling() : p_2.nextSibling;
+
+			_$_.render_component(CodeBlock, node_12, { code: "const x = 1;" });
+			_$_.next();
+			_$_.append(__anchor, fragment_2);
+		})
 	});
 }
 
-export function HtmlWrapper({ children }) {
-	return _$_.tsrx_element((__anchor, __block) => {
-		var div_5 = root_6();
+HtmlAfterIfInChildren[_$_.$r] = HtmlAfterIfInChildren_render;
 
-		{
-			var div_6 = _$_.hydrating ? _$_.hydrate_child() : div_5.firstChild;
+var root_30 = _$_.template(`<span class="for-item"> </span>`, 0);
+
+function ForList_render(__anchor, __block, { items }) {
+	_$_.for(
+		__anchor,
+		() => items,
+		(__anchor, item) => {
+			var span = root_30();
 
 			{
-				var expression = _$_.hydrating ? _$_.hydrate_child() : div_6.firstChild;
+				var expression_11 = _$_.hydrating ? _$_.hydrate_text() : span.firstChild;
 
-				_$_.expression(expression, () => children);
-				_$_.pop(div_6);
+				expression_11.nodeValue = item;
 			}
-		}
 
-		_$_.append(__anchor, div_5);
-	});
+			_$_.append(__anchor, span);
+		},
+		16
+	);
 }
 
-export function HtmlInChildren() {
-	return _$_.tsrx_element((__anchor, __block) => {
-		const content = '<p><strong>Bold</strong> text</p>';
+ForList[_$_.$r] = ForList_render;
 
-		_$_.render_component(HtmlWrapper, __anchor, {
-			children: _$_.tsrx_element((__anchor, __block) => {
-				var div_7 = root_7();
+var root_31 = _$_.template(`<!><p>First paragraph</p><!><p>After code</p>`, 1, 4);
 
-				div_7.innerHTML = content ?? div_7.innerHTML;
-				_$_.append(__anchor, div_7);
-			})
-		});
+function HtmlAfterForInChildren_render(__anchor, __block) {
+	_$_.render_component(ContentWrapper, __anchor, {
+		children: _$_.tsrx_element((__anchor, __block) => {
+			var fragment_3 = root_31();
+			var node_13 = _$_.first_child_frag(fragment_3);
+
+			_$_.render_component(ForList, node_13, { items: ['Title', 'Subtitle'] });
+
+			var p_4 = _$_.hydrating ? _$_.hydrate_sibling() : node_13.nextSibling;
+			var node_14 = _$_.hydrating ? _$_.hydrate_sibling() : p_4.nextSibling;
+
+			_$_.render_component(CodeBlock, node_14, { code: "const x = 1;" });
+			_$_.next();
+			_$_.append(__anchor, fragment_3);
+		})
 	});
 }
 
-export function HtmlInChildrenWithSiblings() {
-	return _$_.tsrx_element((__anchor, __block) => {
-		const content = '<p>Dynamic content</p>';
+HtmlAfterForInChildren[_$_.$r] = HtmlAfterForInChildren_render;
 
-		_$_.render_component(HtmlWrapper, __anchor, {
-			children: _$_.tsrx_element((__anchor, __block) => {
-				var fragment = root_8();
-				var h1 = _$_.first_child_frag(fragment);
-				var div_8 = _$_.hydrating ? _$_.hydrate_sibling() : h1.nextSibling;
+var root_32 = _$_.template(`<div class="try-box"> </div>`, 0);
+var root_33 = _$_.template(`<span>error</span>`, 0);
 
-				div_8.innerHTML = content ?? div_8.innerHTML;
-				_$_.next();
-				_$_.append(__anchor, fragment, true);
-			})
-		});
-	});
+function TryBox_render(__anchor, __block, { value }) {
+	_$_.try(
+		__anchor,
+		(__anchor) => {
+			var div_26 = root_32();
+
+			{
+				var expression_12 = _$_.hydrating ? _$_.hydrate_text() : div_26.firstChild;
+
+				expression_12.nodeValue = value;
+			}
+
+			_$_.append(__anchor, div_26);
+		},
+		(__anchor, e) => {
+			var span_1 = root_33();
+
+			_$_.append(__anchor, span_1);
+		},
+		null,
+		true
+	);
 }
 
-export function MultipleHtmlInChildren() {
-	return _$_.tsrx_element((__anchor, __block) => {
-		const html1 = '<p>First</p>';
-		const html2 = '<p>Second</p>';
+TryBox[_$_.$r] = TryBox_render;
 
-		_$_.render_component(HtmlWrapper, __anchor, {
-			children: _$_.tsrx_element((__anchor, __block) => {
-				var div_9 = root_9();
+var root_34 = _$_.template(`<!><p>First paragraph</p><!><p>After code</p>`, 1, 4);
 
-				{
-					var node_3 = _$_.hydrating ? _$_.hydrate_child() : div_9.firstChild;
-					var node_4 = _$_.hydrating ? _$_.hydrate_sibling() : node_3.nextSibling;
+function HtmlAfterTryInChildren_render(__anchor, __block) {
+	_$_.render_component(ContentWrapper, __anchor, {
+		children: _$_.tsrx_element((__anchor, __block) => {
+			var fragment_4 = root_34();
+			var node_15 = _$_.first_child_frag(fragment_4);
 
-					_$_.pop(div_9);
-				}
+			_$_.render_component(TryBox, node_15, { value: "Title" });
 
-				_$_.render(
-					(__prev) => {
-						_$_.html(node_3, () => html1);
-						_$_.html(node_4, () => html2);
-					},
-					{}
-				);
+			var p_5 = _$_.hydrating ? _$_.hydrate_sibling() : node_15.nextSibling;
+			var node_16 = _$_.hydrating ? _$_.hydrate_sibling() : p_5.nextSibling;
 
-				_$_.append(__anchor, div_9);
-			})
-		});
+			_$_.render_component(CodeBlock, node_16, { code: "const x = 1;" });
+			_$_.next();
+			_$_.append(__anchor, fragment_4);
+		})
 	});
 }
 
-export function HtmlWithComments() {
-	return _$_.tsrx_element((__anchor, __block) => {
-		const content = '<p>Before comment</p><!-- TODO: Elaborate --><p>After comment</p>';
-		var div_10 = root_10();
+HtmlAfterTryInChildren[_$_.$r] = HtmlAfterTryInChildren_render;
 
-		div_10.innerHTML = content ?? div_10.innerHTML;
-		_$_.append(__anchor, div_10);
-	});
+var root_35 = _$_.template(`<span class="boxed"><!></span>`, 0);
+
+function Boxed_render(__anchor, __block, { children }) {
+	var span_2 = root_35();
+
+	{
+		var expression_13 = _$_.hydrating ? _$_.hydrate_child() : span_2.firstChild;
+
+		_$_.expression(expression_13, () => children);
+		_$_.hydrating && _$_.pop(span_2);
+	}
+
+	_$_.append(__anchor, span_2);
 }
 
-export function HtmlWithEmptyComment() {
-	return _$_.tsrx_element((__anchor, __block) => {
-		const content = '<p>Before</p><!----><p>After</p>';
-		var div_11 = root_11();
+Boxed[_$_.$r] = Boxed_render;
 
-		div_11.innerHTML = content ?? div_11.innerHTML;
-		_$_.append(__anchor, div_11);
+var root_36 = _$_.template(` `, 1, 1);
+
+function IndirectHeading_render(__anchor, __block, { text }) {
+	_$_.render_component(Boxed, __anchor, {
+		children: _$_.tsrx_element((__anchor, __block) => {
+			var fragment_5 = root_36();
+			var expression_14 = _$_.first_child_frag(fragment_5, true);
+
+			expression_14.nodeValue = text;
+			_$_.append(__anchor, fragment_5);
+		})
 	});
 }
 
-export function HtmlWithCommentsInChildren() {
-	return _$_.tsrx_element((__anchor, __block) => {
-		const content = '<h2 id="intro">Introduction</h2><p>Some text</p><!-- TODO --><p>More text</p>';
+IndirectHeading[_$_.$r] = IndirectHeading_render;
 
-		_$_.render_component(HtmlWrapper, __anchor, {
-			children: _$_.tsrx_element((__anchor, __block) => {
-				var div_12 = root_12();
+var root_37 = _$_.template(`<!><p>First paragraph</p><!><p>After code</p>`, 1, 4);
 
-				div_12.innerHTML = content ?? div_12.innerHTML;
-				_$_.append(__anchor, div_12);
-			})
-		});
+function HtmlAfterComponentInChildren_render(__anchor, __block) {
+	_$_.render_component(ContentWrapper, __anchor, {
+		children: _$_.tsrx_element((__anchor, __block) => {
+			var fragment_6 = root_37();
+			var node_17 = _$_.first_child_frag(fragment_6);
+
+			_$_.render_component(IndirectHeading, node_17, { text: "Title" });
+
+			var p_6 = _$_.hydrating ? _$_.hydrate_sibling() : node_17.nextSibling;
+			var node_18 = _$_.hydrating ? _$_.hydrate_sibling() : p_6.nextSibling;
+
+			_$_.render_component(CodeBlock, node_18, { code: "const x = 1;" });
+			_$_.next();
+			_$_.append(__anchor, fragment_6);
+		})
 	});
 }
 
-function DocFooter() {
-	return _$_.tsrx_element((__anchor, __block) => {
-		var footer = root_13();
+HtmlAfterComponentInChildren[_$_.$r] = HtmlAfterComponentInChildren_render;
 
-		_$_.append(__anchor, footer);
-	});
+var root_39 = _$_.template(`<div class="indicator"></div>`, 0);
+
+function consequent_4(__anchor, active) {
+	var div_28 = root_39();
+
+	_$_.append(__anchor, div_28);
 }
 
-export function DocLayout(__props) {
-	return _$_.tsrx_element((__anchor, __block) => {
-		var div_13 = root_14();
+function if_5(active) {
+	if (active) return consequent_4;
+}
+
+var root_38 = _$_.template(`<div><!><a><span> </span></a></div>`, 0);
+
+function NavItem_render(__anchor, __block, { href, text: label, active = false }) {
+	var div_27 = root_38();
+
+	_$_.set_class(div_27, `nav-item${active ? ' active' : ''}`, void 0, true);
+
+	{
+		var node_19 = _$_.hydrating ? _$_.hydrate_child() : div_27.firstChild;
+
+		_$_.if(node_19, if_5, false, active);
+
+		var a_3 = _$_.hydrating ? _$_.hydrate_sibling() : node_19.nextSibling;
+
+		_$_.set_attribute(a_3, 'href', href);
 
 		{
-			var div_15 = _$_.hydrating ? _$_.hydrate_child() : div_13.firstChild;
+			var span_3 = _$_.hydrating ? _$_.hydrate_child() : a_3.firstChild;
 
 			{
-				var article = _$_.hydrating ? _$_.hydrate_child() : div_15.firstChild;
+				var expression_15 = _$_.hydrating ? _$_.hydrate_text() : span_3.firstChild;
 
-				{
-					var div_14 = _$_.hydrating ? _$_.hydrate_child() : article.firstChild;
+				expression_15.nodeValue = label;
+			}
+		}
 
-					{
-						var expression_1 = _$_.hydrating ? _$_.hydrate_child() : div_14.firstChild;
+		_$_.hydrating && _$_.pop(div_27);
+	}
 
-						_$_.expression(expression_1, () => __props.children);
-						_$_.pop(div_14);
-					}
-				}
+	_$_.append(__anchor, div_27);
+}
 
-				_$_.pop(article);
+NavItem[_$_.$r] = NavItem_render;
 
-				var node_5 = _$_.hydrating ? _$_.hydrate_sibling() : article.nextSibling;
+var root_41 = _$_.template(`<div class="section-items"><!></div>`, 0);
 
-				{
-					var consequent = (__anchor) => {
-						var div_16 = root_15();
+function consequent_5(__anchor, { expanded, children }) {
+	var div_30 = root_41();
 
-						{
-							var a = _$_.hydrating ? _$_.hydrate_child() : div_16.firstChild;
-						}
+	{
+		var expression_17 = _$_.hydrating ? _$_.hydrate_child() : div_30.firstChild;
 
-						_$_.render(() => {
-							_$_.set_attribute(a, 'href', `https://github.com/edit/${_$_.fallback(__props.editPath, '')}`);
-						});
+		_$_.expression(expression_17, () => children);
+		_$_.hydrating && _$_.pop(div_30);
+	}
 
-						_$_.append(__anchor, div_16);
-					};
+	_$_.append(__anchor, div_30);
+}
 
-					_$_.if(node_5, (__render) => {
-						if (_$_.fallback(__props.editPath, '')) __render(consequent);
-					});
-				}
+function if_6({ expanded, children }) {
+	if (expanded.value) return consequent_5;
+}
 
-				var node_6 = _$_.hydrating ? _$_.hydrate_sibling() : node_5.nextSibling;
+var root_40 = _$_.template(`<section class="sidebar-section"><div class="section-header"><h2> </h2><button>Toggle</button></div><!></section>`, 0);
 
-				{
-					var consequent_1 = (__anchor) => {
-						var nav = root_16();
+function SidebarSection_render(__anchor, __block, { title, children }) {
+	const expanded = _$_.track(true, __block, '6ac6906f');
+	var section_1 = root_40();
 
-						{
-							var a_1 = _$_.hydrating ? _$_.hydrate_child() : nav.firstChild;
+	{
+		var div_29 = _$_.hydrating ? _$_.hydrate_child() : section_1.firstChild;
 
-							{
-								var expression_2 = _$_.hydrating ? _$_.hydrate_child() : a_1.firstChild;
+		{
+			var h2_2 = _$_.hydrating ? _$_.hydrate_child() : div_29.firstChild;
 
-								_$_.expression(expression_2, () => _$_.fallback(__props.nextLink, null).text);
-								_$_.pop(a_1);
-							}
-						}
+			{
+				var expression_16 = _$_.hydrating ? _$_.hydrate_text() : h2_2.firstChild;
 
-						_$_.render(() => {
-							_$_.set_attribute(a_1, 'href', _$_.fallback(__props.nextLink, null).href);
-						});
+				expression_16.nodeValue = title;
+			}
 
-						_$_.append(__anchor, nav);
-					};
+			var button = _$_.hydrating ? _$_.hydrate_sibling() : h2_2.nextSibling;
 
-					_$_.if(node_6, (__render) => {
-						if (_$_.fallback(__props.nextLink, null)) __render(consequent_1);
-					});
-				}
+			button.__click = () => expanded.value = !expanded.value;
+		}
 
-				var node_7 = _$_.hydrating ? _$_.hydrate_sibling() : node_6.nextSibling;
+		_$_.hydrating && _$_.pop(div_29);
 
-				_$_.render_component(DocFooter, node_7, {});
-				_$_.pop(div_15);
-			}
+		var node_20 = _$_.hydrating ? _$_.hydrate_sibling() : div_29.nextSibling;
+
+		_$_.if(node_20, if_6, false, { expanded, children });
+		_$_.hydrating && _$_.pop(section_1);
+	}
+
+	_$_.append(__anchor, section_1);
+}
+
+SidebarSection[_$_.$r] = SidebarSection_render;
+
+var root_43 = _$_.template(`<!><!>`, 1, 2);
+var root_44 = _$_.template(`<!><!>`, 1, 2);
+var root_42 = _$_.template(`<aside class="sidebar"><nav><div class="group"></div><div class="group"></div></nav></aside>`, 0);
 
-			var aside = _$_.hydrating ? _$_.hydrate_sibling() : div_15.nextSibling;
+function SideNav_render(__anchor, __block, { currentPath }) {
+	var aside_1 = root_42();
+
+	{
+		var nav_1 = _$_.hydrating ? _$_.hydrate_child() : aside_1.firstChild;
+
+		{
+			var div_31 = _$_.hydrating ? _$_.hydrate_child() : nav_1.firstChild;
 
 			{
-				var node_8 = _$_.hydrating ? _$_.hydrate_child() : aside.firstChild;
+				var append_anchor = _$_.append_into(div_31);
 
-				{
-					var consequent_2 = (__anchor) => {
-						var div_17 = root_17();
+				_$_.render_component(SidebarSection, append_anchor, {
+					title: "Getting Started",
+					children: _$_.tsrx_element((__anchor, __block) => {
+						var fragment_7 = root_43();
+						var node_21 = _$_.first_child_frag(fragment_7);
 
-						{
-							var ul = _$_.hydrating ? _$_.hydrate_child() : div_17.firstChild;
+						_$_.render_component(NavItem, node_21, {
+							href: "/intro",
+							text: "Introduction",
+							active: currentPath === '/intro'
+						});
 
-							{
-								_$_.for(
-									ul,
-									() => _$_.fallback(__props.toc, []),
-									(__anchor, item) => {
-										var li = root_18();
+						var node_22 = _$_.hydrating ? _$_.hydrate_sibling() : node_21.nextSibling;
 
-										{
-											var a_2 = _$_.hydrating ? _$_.hydrate_child() : li.firstChild;
+						_$_.render_component(NavItem, node_22, {
+							href: "/start",
+							text: "Quick Start",
+							active: currentPath === '/start'
+						});
 
-											{
-												var expression_3 = _$_.hydrating ? _$_.hydrate_child() : a_2.firstChild;
+						_$_.append(__anchor, fragment_7);
+					})
+				});
 
-												_$_.expression(expression_3, () => item.text);
-												_$_.pop(a_2);
-											}
-										}
+				_$_.hydrating && _$_.pop(div_31);
+			}
 
-										_$_.render(() => {
-											_$_.set_attribute(a_2, 'href', item.href);
-										});
+			var div_32 = _$_.hydrating ? _$_.hydrate_sibling() : div_31.nextSibling;
 
-										_$_.append(__anchor, li);
-									},
-									4
-								);
+			{
+				var append_anchor_1 = _$_.append_into(div_32);
 
-								_$_.pop(ul);
-							}
-						}
+				_$_.render_component(SidebarSection, append_anchor_1, {
+					title: "Guide",
+					children: _$_.tsrx_element((__anchor, __block) => {
+						var fragment_8 = root_44();
+						var node_23 = _$_.first_child_frag(fragment_8);
+
+						_$_.render_component(NavItem, node_23, {
+							href: "/guide/app",
+							text: "Application",
+							active: currentPath === '/guide/app'
+						});
 
-						_$_.append(__anchor, div_17);
-					};
+						var node_24 = _$_.hydrating ? _$_.hydrate_sibling() : node_23.nextSibling;
 
-					_$_.if(node_8, (__render) => {
-						if (_$_.fallback(__props.toc, []).length > 0) __render(consequent_2);
-					});
-				}
+						_$_.render_component(NavItem, node_24, {
+							href: "/guide/syntax",
+							text: "Syntax",
+							active: currentPath === '/guide/syntax'
+						});
+
+						_$_.append(__anchor, fragment_8);
+					})
+				});
 
-				_$_.pop(aside);
+				_$_.hydrating && _$_.pop(div_32);
 			}
 		}
+	}
 
-		_$_.append(__anchor, div_13);
-	});
+	_$_.append(__anchor, aside_1);
 }
 
-export function HtmlWithServerData() {
-	return _$_.tsrx_element((__anchor, __block) => {
-		const content = '<h1 id="intro" class="doc-h1">Introduction</h1><p>Ripple is a framework.</p>';
+SideNav[_$_.$r] = SideNav_render;
 
-		_$_.render_component(DocLayout, __anchor, {
-			editPath: "docs/introduction.md",
-			nextLink: { href: '/docs/quick-start', text: 'Quick Start' },
-			toc: [
-				{ href: '#intro', text: 'Introduction' },
-				{ href: '#features', text: 'Features' }
-			],
+var root_45 = _$_.template(`<header class="page-header"><div class="logo">MyApp</div></header>`, 0);
 
-			children: _$_.tsrx_element((__anchor, __block) => {
-				var div_18 = root_19();
+function PageHeader_render(__anchor, __block) {
+	var header = root_45();
 
-				div_18.innerHTML = content ?? div_18.innerHTML;
-				_$_.append(__anchor, div_18);
-			})
-		});
-	});
+	_$_.append(__anchor, header);
 }
 
-export function HtmlWithClientDefaults() {
-	return _$_.tsrx_element((__anchor, __block) => {
-		const content = '<h1 id="intro" class="doc-h1">Introduction</h1><p>Ripple is a framework.</p>';
+PageHeader[_$_.$r] = PageHeader_render;
 
-		_$_.render_component(DocLayout, __anchor, {
-			children: _$_.tsrx_element((__anchor, __block) => {
-				var div_19 = root_20();
+var root_47 = _$_.template(`<div class="edit-link"><a href="/edit">Edit</a></div>`, 0);
 
-				div_19.innerHTML = content ?? div_19.innerHTML;
-				_$_.append(__anchor, div_19);
-			})
-		});
-	});
+function consequent_6(__anchor) {
+	var div_36 = root_47();
+
+	_$_.append(__anchor, div_36);
 }
 
-export function HtmlWithUndefinedContent() {
-	return _$_.tsrx_element((__anchor, __block) => {
-		const content = undefined;
+function if_7() {
+	if (true) return consequent_6;
+}
 
-		_$_.render_component(DocLayout, __anchor, {
-			children: _$_.tsrx_element((__anchor, __block) => {
-				var div_20 = root_21();
+var root_46 = _$_.template(`<div class="layout"><!><div class="content-wrapper"><!><main class="main-content"><div class="article"><div><h1>Introduction</h1><p>Welcome to the docs.</p></div></div><!></main></div></div>`, 0);
 
-				div_20.innerHTML = content ?? div_20.innerHTML;
-				_$_.append(__anchor, div_20);
-			})
-		});
-	});
-}
+function LayoutWithSidebarAndMain_render(__anchor, __block) {
+	var div_33 = root_46();
 
-function DynamicHeading({ level, children }) {
-	return _$_.tsrx_element((__anchor, __block) => {
-		{
-			var switch_case_0 = (__anchor) => {
-				var h1_1 = root_22();
+	{
+		var node_25 = _$_.hydrating ? _$_.hydrate_child() : div_33.firstChild;
 
-				{
-					var expression_4 = _$_.hydrating ? _$_.hydrate_child() : h1_1.firstChild;
+		_$_.render_component(PageHeader, node_25, {});
 
-					_$_.expression(expression_4, () => children);
-					_$_.pop(h1_1);
-				}
+		var div_34 = _$_.hydrating ? _$_.hydrate_sibling() : node_25.nextSibling;
 
-				_$_.append(__anchor, h1_1);
-			};
+		{
+			var node_26 = _$_.hydrating ? _$_.hydrate_child() : div_34.firstChild;
 
-			var switch_case_1 = (__anchor) => {
-				var h2 = root_23();
+			_$_.render_component(SideNav, node_26, { currentPath: "/intro" });
 
-				{
-					var expression_5 = _$_.hydrating ? _$_.hydrate_child() : h2.firstChild;
+			var main = _$_.hydrating ? _$_.hydrate_sibling() : node_26.nextSibling;
 
-					_$_.expression(expression_5, () => children);
-					_$_.pop(h2);
-				}
+			{
+				var div_35 = _$_.hydrating ? _$_.hydrate_child() : main.firstChild;
+				var node_27 = _$_.hydrating ? _$_.hydrate_sibling() : div_35.nextSibling;
 
-				_$_.append(__anchor, h2);
-			};
+				_$_.if(node_27, if_7);
 
-			_$_.switch(
-				__anchor,
-				() => {
-					var result = [];
+				var node_28 = _$_.hydrating ? _$_.hydrate_sibling() : _$_.append_into(main);
 
-					switch (level) {
-						case 1:
-							result.push(switch_case_0);
-							return result;
+				_$_.render_component(PageHeader, node_28, {});
+				_$_.hydrating && _$_.pop(main);
+			}
 
-						case 2:
-							result.push(switch_case_1);
-							return result;
-					}
-				},
-				true
-			);
+			_$_.hydrating && _$_.pop(div_34);
 		}
-	});
-}
 
-function CodeBlock({ code }) {
-	return _$_.tsrx_element((__anchor, __block) => {
-		const highlighted = `<pre class="shiki"><code>${code}</code></pre>`;
-		var div_21 = root_24();
+		_$_.hydrating && _$_.pop(div_33);
+	}
 
-		{
-			var div_22 = _$_.hydrating ? _$_.hydrate_child() : div_21.firstChild;
-
-			_$_.pop(div_22);
+	_$_.append(__anchor, div_33);
+}
 
-			var div_23 = _$_.hydrating ? _$_.hydrate_sibling() : div_22.nextSibling;
+LayoutWithSidebarAndMain[_$_.$r] = LayoutWithSidebarAndMain_render;
 
-			div_23.innerHTML = highlighted ?? div_23.innerHTML;
-		}
+var root_48 = _$_.template(`<article class="doc-content"><div><!></div></article>`, 0);
 
-		_$_.append(__anchor, div_21);
-	});
-}
+function ArticleWrapper_render(__anchor, __block, { children }) {
+	var article_1 = root_48();
 
-function ContentWrapper({ children }) {
-	return _$_.tsrx_element((__anchor, __block) => {
-		var div_24 = root_25();
+	{
+		var div_37 = _$_.hydrating ? _$_.hydrate_child() : article_1.firstChild;
 
 		{
-			var div_25 = _$_.hydrating ? _$_.hydrate_child() : div_24.firstChild;
-
-			{
-				var expression_6 = _$_.hydrating ? _$_.hydrate_child() : div_25.firstChild;
+			var expression_18 = _$_.hydrating ? _$_.hydrate_child() : div_37.firstChild;
 
-				_$_.expression(expression_6, () => children);
-				_$_.pop(div_25);
-			}
+			_$_.expression(expression_18, () => children);
+			_$_.hydrating && _$_.pop(div_37);
 		}
+	}
 
-		_$_.append(__anchor, div_24);
-	});
+	_$_.append(__anchor, article_1);
 }
 
-export function HtmlAfterSwitchInChildren() {
-	return _$_.tsrx_element((__anchor, __block) => {
-		_$_.render_component(ContentWrapper, __anchor, {
-			children: _$_.tsrx_element((__anchor, __block) => {
-				var fragment_1 = root_26();
-				var node_9 = _$_.first_child_frag(fragment_1);
-
-				_$_.render_component(DynamicHeading, node_9, {
-					level: 1,
-					children: _$_.tsrx_element((__anchor, __block) => {
-						var expression_7 = _$_.text('Title');
+ArticleWrapper[_$_.$r] = ArticleWrapper_render;
 
-						_$_.append(__anchor, expression_7);
-					})
-				});
+var root_49 = _$_.template(`<footer class="doc-footer">Footer</footer>`, 0);
 
-				var p_1 = _$_.hydrating ? _$_.hydrate_sibling() : node_9.nextSibling;
-				var p = _$_.hydrating ? _$_.hydrate_sibling() : p_1.nextSibling;
-				var node_10 = _$_.hydrating ? _$_.hydrate_sibling() : p.nextSibling;
+function SimpleFooter_render(__anchor, __block) {
+	var footer_1 = root_49();
 
-				_$_.render_component(CodeBlock, node_10, { code: "const x = 1;" });
-				_$_.append(__anchor, fragment_1);
-			})
-		});
-	});
+	_$_.append(__anchor, footer_1);
 }
 
-function IfHeading({ primary, children }) {
-	return _$_.tsrx_element((__anchor, __block) => {
-		{
-			var consequent_3 = (__anchor) => {
-				var h1_2 = root_27();
+SimpleFooter[_$_.$r] = SimpleFooter_render;
 
-				{
-					var expression_8 = _$_.hydrating ? _$_.hydrate_child() : h1_2.firstChild;
+var root_51 = _$_.template(`<h1>Title</h1><p>Content goes here.</p>`, 1, 2);
+var root_52 = _$_.template(`<div class="edit-link"><a href="/edit">Edit</a></div>`, 0);
 
-					_$_.expression(expression_8, () => children);
-					_$_.pop(h1_2);
-				}
+function consequent_7(__anchor) {
+	var div_39 = root_52();
 
-				_$_.append(__anchor, h1_2);
-			};
+	_$_.append(__anchor, div_39);
+}
 
-			var alternate = (__anchor) => {
-				var h2_1 = root_28();
+function if_8() {
+	if (true) return consequent_7;
+}
 
-				{
-					var expression_9 = _$_.hydrating ? _$_.hydrate_child() : h2_1.firstChild;
+var root_53 = _$_.template(`<nav class="prev-next"><a href="/prev">Previous</a></nav>`, 0);
 
-					_$_.expression(expression_9, () => children);
-					_$_.pop(h2_1);
-				}
+function consequent_8(__anchor) {
+	var nav_2 = root_53();
 
-				_$_.append(__anchor, h2_1);
-			};
+	_$_.append(__anchor, nav_2);
+}
 
-			_$_.if(
-				__anchor,
-				(__render) => {
-					if (primary) __render(consequent_3); else __render(alternate, false);
-				},
-				true
-			);
-		}
-	});
+function if_9() {
+	if (true) return consequent_8;
 }
 
-export function HtmlAfterIfInChildren() {
-	return _$_.tsrx_element((__anchor, __block) => {
-		_$_.render_component(ContentWrapper, __anchor, {
-			children: _$_.tsrx_element((__anchor, __block) => {
-				var fragment_2 = root_29();
-				var node_11 = _$_.first_child_frag(fragment_2);
+var root_50 = _$_.template(`<div class="content-container"><!><!><!></div>`, 0);
 
-				_$_.render_component(IfHeading, node_11, {
-					primary: true,
-					children: _$_.tsrx_element((__anchor, __block) => {
-						var expression_10 = _$_.text('Title');
+function ArticleWithChildrenThenSibling_render(__anchor, __block) {
+	var div_38 = root_50();
 
-						_$_.append(__anchor, expression_10);
-					})
-				});
+	{
+		var node_29 = _$_.hydrating ? _$_.hydrate_child() : div_38.firstChild;
 
-				var p_3 = _$_.hydrating ? _$_.hydrate_sibling() : node_11.nextSibling;
-				var p_2 = _$_.hydrating ? _$_.hydrate_sibling() : p_3.nextSibling;
-				var node_12 = _$_.hydrating ? _$_.hydrate_sibling() : p_2.nextSibling;
+		_$_.render_component(ArticleWrapper, node_29, {
+			children: _$_.tsrx_element((__anchor, __block) => {
+				var fragment_9 = root_51();
 
-				_$_.render_component(CodeBlock, node_12, { code: "const x = 1;" });
-				_$_.append(__anchor, fragment_2);
+				_$_.next();
+				_$_.append(__anchor, fragment_9);
 			})
 		});
-	});
-}
-
-function ForList({ items }) {
-	return _$_.tsrx_element((__anchor, __block) => {
-		_$_.for(
-			__anchor,
-			() => items,
-			(__anchor, item) => {
-				var span = root_30();
 
-				{
-					var expression_11 = _$_.hydrating ? _$_.hydrate_child(true) : span.firstChild;
+		var node_30 = _$_.hydrating ? _$_.hydrate_sibling() : node_29.nextSibling;
 
-					expression_11.nodeValue = item;
-					_$_.pop(span);
-				}
+		_$_.if(node_30, if_8);
 
-				_$_.append(__anchor, span);
-			},
-			16
-		);
-	});
-}
+		var node_31 = _$_.hydrating ? _$_.hydrate_sibling() : node_30.nextSibling;
 
-export function HtmlAfterForInChildren() {
-	return _$_.tsrx_element((__anchor, __block) => {
-		_$_.render_component(ContentWrapper, __anchor, {
-			children: _$_.tsrx_element((__anchor, __block) => {
-				var fragment_3 = root_31();
-				var node_13 = _$_.first_child_frag(fragment_3);
+		_$_.if(node_31, if_9);
 
-				_$_.render_component(ForList, node_13, { items: ['Title', 'Subtitle'] });
+		var node_32 = _$_.hydrating ? _$_.hydrate_sibling() : _$_.append_into(div_38);
 
-				var p_4 = _$_.hydrating ? _$_.hydrate_sibling() : node_13.nextSibling;
-				var node_14 = _$_.hydrating ? _$_.hydrate_sibling() : p_4.nextSibling;
+		_$_.render_component(SimpleFooter, node_32, {});
+		_$_.hydrating && _$_.pop(div_38);
+	}
 
-				_$_.render_component(CodeBlock, node_14, { code: "const x = 1;" });
-				_$_.append(__anchor, fragment_3);
-			})
-		});
-	});
+	_$_.append(__anchor, div_38);
 }
 
-function TryBox({ value }) {
-	return _$_.tsrx_element((__anchor, __block) => {
-		_$_.try(
-			__anchor,
-			(__anchor) => {
-				var div_26 = root_32();
+ArticleWithChildrenThenSibling[_$_.$r] = ArticleWithChildrenThenSibling_render;
 
-				{
-					var expression_12 = _$_.hydrating ? _$_.hydrate_child(true) : div_26.firstChild;
+var root_55 = _$_.template(`<div class="doc-content"></div>`, 0);
+var root_56 = _$_.template(`<div class="edit-link"><a href="/edit">Edit</a></div>`, 0);
 
-					expression_12.nodeValue = value;
-					_$_.pop(div_26);
-				}
+function consequent_9(__anchor) {
+	var div_42 = root_56();
 
-				_$_.append(__anchor, div_26);
-			},
-			(__anchor, e) => {
-				var span_1 = root_33();
+	_$_.append(__anchor, div_42);
+}
 
-				_$_.append(__anchor, span_1);
-			},
-			null,
-			true
-		);
-	});
+function if_10() {
+	if (true) return consequent_9;
 }
 
-export function HtmlAfterTryInChildren() {
-	return _$_.tsrx_element((__anchor, __block) => {
-		_$_.render_component(ContentWrapper, __anchor, {
-			children: _$_.tsrx_element((__anchor, __block) => {
-				var fragment_4 = root_34();
-				var node_15 = _$_.first_child_frag(fragment_4);
+var root_54 = _$_.template(`<div class="content-container"><!><!></div>`, 0);
+
+function ArticleWithHtmlChildThenSibling_render(__anchor, __block) {
+	const htmlContent = '<pre><code>const x = 1;</code></pre>';
+	var div_40 = root_54();
 
-				_$_.render_component(TryBox, node_15, { value: "Title" });
+	{
+		var node_33 = _$_.hydrating ? _$_.hydrate_child() : div_40.firstChild;
 
-				var p_5 = _$_.hydrating ? _$_.hydrate_sibling() : node_15.nextSibling;
-				var node_16 = _$_.hydrating ? _$_.hydrate_sibling() : p_5.nextSibling;
+		_$_.render_component(ArticleWrapper, node_33, {
+			children: _$_.tsrx_element((__anchor, __block) => {
+				var div_41 = root_55();
 
-				_$_.render_component(CodeBlock, node_16, { code: "const x = 1;" });
-				_$_.append(__anchor, fragment_4);
+				div_41.innerHTML = htmlContent ?? div_41.innerHTML;
+				_$_.append(__anchor, div_41);
 			})
 		});
-	});
-}
-
-function Boxed({ children }) {
-	return _$_.tsrx_element((__anchor, __block) => {
-		var span_2 = root_35();
 
-		{
-			var expression_13 = _$_.hydrating ? _$_.hydrate_child() : span_2.firstChild;
+		var node_34 = _$_.hydrating ? _$_.hydrate_sibling() : node_33.nextSibling;
 
-			_$_.expression(expression_13, () => children);
-			_$_.pop(span_2);
-		}
+		_$_.if(node_34, if_10);
 
-		_$_.append(__anchor, span_2);
-	});
-}
+		var node_35 = _$_.hydrating ? _$_.hydrate_sibling() : _$_.append_into(div_40);
 
-function IndirectHeading({ text }) {
-	return _$_.tsrx_element((__anchor, __block) => {
-		_$_.render_component(Boxed, __anchor, {
-			children: _$_.tsrx_element((__anchor, __block) => {
-				var fragment_5 = root_36();
-				var expression_14 = _$_.first_child_frag(fragment_5, true);
+		_$_.render_component(SimpleFooter, node_35, {});
+		_$_.hydrating && _$_.pop(div_40);
+	}
 
-				expression_14.nodeValue = text;
-				_$_.append(__anchor, fragment_5);
-			})
-		});
-	});
+	_$_.append(__anchor, div_40);
 }
 
-export function HtmlAfterComponentInChildren() {
-	return _$_.tsrx_element((__anchor, __block) => {
-		_$_.render_component(ContentWrapper, __anchor, {
-			children: _$_.tsrx_element((__anchor, __block) => {
-				var fragment_6 = root_37();
-				var node_17 = _$_.first_child_frag(fragment_6);
+ArticleWithHtmlChildThenSibling[_$_.$r] = ArticleWithHtmlChildThenSibling_render;
 
-				_$_.render_component(IndirectHeading, node_17, { text: "Title" });
+var root_58 = _$_.template(`<div class="edit-link"><a href="/edit">Edit</a></div>`, 0);
 
-				var p_6 = _$_.hydrating ? _$_.hydrate_sibling() : node_17.nextSibling;
-				var node_18 = _$_.hydrating ? _$_.hydrate_sibling() : p_6.nextSibling;
+function consequent_10(__anchor) {
+	var div_45 = root_58();
 
-				_$_.render_component(CodeBlock, node_18, { code: "const x = 1;" });
-				_$_.append(__anchor, fragment_6);
-			})
-		});
-	});
+	_$_.append(__anchor, div_45);
 }
 
-function NavItem(__props) {
-	return _$_.tsrx_element((__anchor, __block) => {
-		var div_27 = root_38();
+function if_11() {
+	if (true) return consequent_10;
+}
+
+var root_57 = _$_.template(`<div class="content-container"><article class="doc-content"><div><!></div></article><!></div>`, 0);
+
+function InlineArticleLayout_render(__anchor, __block, { children }) {
+	var div_43 = root_57();
+
+	{
+		var article_2 = _$_.hydrating ? _$_.hydrate_child() : div_43.firstChild;
 
 		{
-			var node_19 = _$_.hydrating ? _$_.hydrate_child() : div_27.firstChild;
+			var div_44 = _$_.hydrating ? _$_.hydrate_child() : article_2.firstChild;
 
 			{
-				var consequent_4 = (__anchor) => {
-					var div_28 = root_39();
-
-					_$_.append(__anchor, div_28);
-				};
+				var expression_19 = _$_.hydrating ? _$_.hydrate_child() : div_44.firstChild;
 
-				_$_.if(node_19, (__render) => {
-					if (_$_.fallback(__props.active, false)) __render(consequent_4);
-				});
+				_$_.expression(expression_19, () => children);
+				_$_.hydrating && _$_.pop(div_44);
 			}
+		}
 
-			var a_3 = _$_.hydrating ? _$_.hydrate_sibling() : node_19.nextSibling;
+		_$_.hydrating && _$_.pop(article_2);
 
-			{
-				var span_3 = _$_.hydrating ? _$_.hydrate_child() : a_3.firstChild;
+		var node_36 = _$_.hydrating ? _$_.hydrate_sibling() : article_2.nextSibling;
 
-				{
-					var expression_15 = _$_.hydrating ? _$_.hydrate_child() : span_3.firstChild;
+		_$_.if(node_36, if_11);
 
-					_$_.expression(expression_15, () => __props.text);
-					_$_.pop(span_3);
-				}
-			}
+		var node_37 = _$_.hydrating ? _$_.hydrate_sibling() : _$_.append_into(div_43);
 
-			_$_.pop(div_27);
-		}
+		_$_.render_component(SimpleFooter, node_37, {});
+		_$_.hydrating && _$_.pop(div_43);
+	}
+
+	_$_.append(__anchor, div_43);
+}
 
-		_$_.render(
-			(__prev) => {
-				var __a = __props.href;
+InlineArticleLayout[_$_.$r] = InlineArticleLayout_render;
 
-				if (__prev.a !== __a) {
-					_$_.set_attribute(a_3, 'href', __prev.a = __a);
-				}
+var root_59 = _$_.template(`<div class="doc-content"></div>`, 0);
 
-				var __b = `nav-item${_$_.fallback(__props.active, false) ? ' active' : ''}`;
+function InlineArticleWithHtmlChild_render(__anchor, __block) {
+	const htmlContent = '<pre><code>const x = 1;</code></pre>';
 
-				if (__prev.b !== __b) {
-					_$_.set_class(div_27, __prev.b = __b, void 0, true);
-				}
-			},
-			{ a: void 0, b: _$_.UNINITIALIZED }
-		);
+	_$_.render_component(InlineArticleLayout, __anchor, {
+		children: _$_.tsrx_element((__anchor, __block) => {
+			var div_46 = root_59();
 
-		_$_.append(__anchor, div_27);
+			div_46.innerHTML = htmlContent ?? div_46.innerHTML;
+			_$_.append(__anchor, div_46);
+		})
 	});
 }
 
-function SidebarSection({ title, children }) {
-	return _$_.tsrx_element((__anchor, __block) => {
-		let lazy = _$_.track(true, __block, '6ac6906f');
-		var section_1 = root_40();
+InlineArticleWithHtmlChild[_$_.$r] = InlineArticleWithHtmlChild_render;
 
-		{
-			var div_29 = _$_.hydrating ? _$_.hydrate_child() : section_1.firstChild;
+var root_60 = _$_.template(`<header class="header">Header</header>`, 0);
 
-			{
-				var h2_2 = _$_.hydrating ? _$_.hydrate_child() : div_29.firstChild;
+function HeaderStub_render(__anchor, __block) {
+	var header_1 = root_60();
 
-				{
-					var expression_16 = _$_.hydrating ? _$_.hydrate_child(true) : h2_2.firstChild;
+	_$_.append(__anchor, header_1);
+}
 
-					expression_16.nodeValue = title;
-					_$_.pop(h2_2);
-				}
+HeaderStub[_$_.$r] = HeaderStub_render;
 
-				var button = _$_.hydrating ? _$_.hydrate_sibling() : h2_2.nextSibling;
+var root_61 = _$_.template(`<aside class="sidebar">Sidebar</aside>`, 0);
 
-				button.__click = () => _$_.set(lazy, !lazy.value);
-			}
+function SidebarStub_render(__anchor, __block) {
+	var aside_2 = root_61();
 
-			_$_.pop(div_29);
+	_$_.append(__anchor, aside_2);
+}
 
-			var node_20 = _$_.hydrating ? _$_.hydrate_sibling() : div_29.nextSibling;
+SidebarStub[_$_.$r] = SidebarStub_render;
 
-			{
-				var consequent_5 = (__anchor) => {
-					var div_30 = root_41();
+var root_62 = _$_.template(`<footer class="footer">Footer</footer>`, 0);
 
-					{
-						var expression_17 = _$_.hydrating ? _$_.hydrate_child() : div_30.firstChild;
+function FooterStub_render(__anchor, __block) {
+	var footer_2 = root_62();
 
-						_$_.expression(expression_17, () => children);
-						_$_.pop(div_30);
-					}
+	_$_.append(__anchor, footer_2);
+}
 
-					_$_.append(__anchor, div_30);
-				};
+FooterStub[_$_.$r] = FooterStub_render;
 
-				_$_.if(node_20, (__render) => {
-					if (lazy.value) __render(consequent_5);
-				});
-			}
+var root_64 = _$_.template(`<div class="edit-link"><a href="/edit">Edit on GitHub</a></div>`, 0);
 
-			_$_.pop(section_1);
-		}
+function consequent_11(__anchor, editPath) {
+	var div_53 = root_64();
 
-		_$_.append(__anchor, section_1);
-	});
+	_$_.append(__anchor, div_53);
 }
 
-function SideNav({ currentPath }) {
-	return _$_.tsrx_element((__anchor, __block) => {
-		var aside_1 = root_42();
+function if_12(editPath) {
+	if (editPath) return consequent_11;
+}
 
-		{
-			var nav_1 = _$_.hydrating ? _$_.hydrate_child() : aside_1.firstChild;
+var root_65 = _$_.template(`<nav class="prev-next"><a> </a></nav>`, 0);
 
-			{
-				var div_31 = _$_.hydrating ? _$_.hydrate_child() : nav_1.firstChild;
+function render_5(__prev) {
+	var __a = __prev._nextLink.href;
 
-				{
-					var append_anchor = _$_.append_into(div_31);
-
-					_$_.render_component(SidebarSection, append_anchor, {
-						title: "Getting Started",
-						children: _$_.tsrx_element((__anchor, __block) => {
-							var fragment_7 = root_43();
-							var node_21 = _$_.first_child_frag(fragment_7);
-
-							_$_.render_component(NavItem, node_21, {
-								href: "/intro",
-								text: "Introduction",
-								active: currentPath === '/intro'
-							});
-
-							var node_22 = _$_.hydrating ? _$_.hydrate_sibling() : node_21.nextSibling;
-
-							_$_.render_component(NavItem, node_22, {
-								href: "/start",
-								text: "Quick Start",
-								active: currentPath === '/start'
-							});
-
-							_$_.append(__anchor, fragment_7);
-						})
-					});
+	if (__prev.a !== __a) {
+		_$_.set_attribute(__prev._a_4, 'href', __prev.a = __a);
+	}
+}
 
-					_$_.pop(div_31);
-				}
+function consequent_12(__anchor, nextLink) {
+	var nav_3 = root_65();
 
-				var div_32 = _$_.hydrating ? _$_.hydrate_sibling() : div_31.nextSibling;
+	{
+		var a_4 = _$_.hydrating ? _$_.hydrate_child() : nav_3.firstChild;
 
-				{
-					var append_anchor_1 = _$_.append_into(div_32);
-
-					_$_.render_component(SidebarSection, append_anchor_1, {
-						title: "Guide",
-						children: _$_.tsrx_element((__anchor, __block) => {
-							var fragment_8 = root_44();
-							var node_23 = _$_.first_child_frag(fragment_8);
-
-							_$_.render_component(NavItem, node_23, {
-								href: "/guide/app",
-								text: "Application",
-								active: currentPath === '/guide/app'
-							});
-
-							var node_24 = _$_.hydrating ? _$_.hydrate_sibling() : node_23.nextSibling;
-
-							_$_.render_component(NavItem, node_24, {
-								href: "/guide/syntax",
-								text: "Syntax",
-								active: currentPath === '/guide/syntax'
-							});
-
-							_$_.append(__anchor, fragment_8);
-						})
-					});
+		{
+			var expression_21 = _$_.hydrating ? _$_.hydrate_child() : a_4.firstChild;
 
-					_$_.pop(div_32);
-				}
-			}
+			_$_.expression(expression_21, () => nextLink.text);
+			_$_.hydrating && _$_.pop(a_4);
 		}
+	}
 
-		_$_.append(__anchor, aside_1);
-	});
+	_$_.render(render_5, { a: void 0, _nextLink: nextLink, _a_4: a_4 });
+	_$_.append(__anchor, nav_3);
 }
 
-function PageHeader() {
-	return _$_.tsrx_element((__anchor, __block) => {
-		var header = root_45();
-
-		_$_.append(__anchor, header);
-	});
+function if_13(nextLink) {
+	if (nextLink) return consequent_12;
 }
 
-export function LayoutWithSidebarAndMain() {
-	return _$_.tsrx_element((__anchor, __block) => {
-		var div_33 = root_46();
+var root_63 = _$_.template(`<div class="layout"><!><div class="docs-wrapper"><!><main class="docs-main"><div class="docs-container"><div class="content"><div class="content-container"><article class="doc-content"><div><!></div></article><!><!></div></div></div></main></div></div>`, 0);
+
+function DocsLayoutInner_render(
+	__anchor,
+	__block,
+	{ children, editPath = '', nextLink = null }
+) {
+	var div_47 = root_63();
+
+	{
+		var node_38 = _$_.hydrating ? _$_.hydrate_child() : div_47.firstChild;
+
+		_$_.render_component(HeaderStub, node_38, {});
+
+		var div_48 = _$_.hydrating ? _$_.hydrate_sibling() : node_38.nextSibling;
 
 		{
-			var node_25 = _$_.hydrating ? _$_.hydrate_child() : div_33.firstChild;
+			var node_39 = _$_.hydrating ? _$_.hydrate_child() : div_48.firstChild;
 
-			_$_.render_component(PageHeader, node_25, {});
+			_$_.render_component(SidebarStub, node_39, {});
 
-			var div_34 = _$_.hydrating ? _$_.hydrate_sibling() : node_25.nextSibling;
+			var main_1 = _$_.hydrating ? _$_.hydrate_sibling() : node_39.nextSibling;
 
 			{
-				var node_26 = _$_.hydrating ? _$_.hydrate_child() : div_34.firstChild;
+				var div_51 = _$_.hydrating ? _$_.hydrate_child() : main_1.firstChild;
 
-				_$_.render_component(SideNav, node_26, { currentPath: "/intro" });
+				{
+					var div_50 = _$_.hydrating ? _$_.hydrate_child() : div_51.firstChild;
 
-				var main = _$_.hydrating ? _$_.hydrate_sibling() : node_26.nextSibling;
+					{
+						var div_49 = _$_.hydrating ? _$_.hydrate_child() : div_50.firstChild;
 
-				{
-					var div_35 = _$_.hydrating ? _$_.hydrate_child() : main.firstChild;
+						{
+							var article_3 = _$_.hydrating ? _$_.hydrate_child() : div_49.firstChild;
 
-					_$_.pop(div_35);
+							{
+								var div_52 = _$_.hydrating ? _$_.hydrate_child() : article_3.firstChild;
 
-					var node_27 = _$_.hydrating ? _$_.hydrate_sibling() : div_35.nextSibling;
+								{
+									var expression_20 = _$_.hydrating ? _$_.hydrate_child() : div_52.firstChild;
 
-					{
-						var consequent_6 = (__anchor) => {
-							var div_36 = root_47();
+									_$_.expression(expression_20, () => children);
+									_$_.hydrating && _$_.pop(div_52);
+								}
+							}
 
-							_$_.append(__anchor, div_36);
-						};
+							_$_.hydrating && _$_.pop(article_3);
 
-						_$_.if(node_27, (__render) => {
-							if (true) __render(consequent_6);
-						});
-					}
+							var node_40 = _$_.hydrating ? _$_.hydrate_sibling() : article_3.nextSibling;
 
-					var node_28 = _$_.hydrating ? _$_.hydrate_sibling() : node_27.nextSibling;
+							_$_.if(node_40, if_12, false, editPath);
 
-					_$_.render_component(PageHeader, node_28, {});
-					_$_.pop(main);
-				}
+							var node_41 = _$_.hydrating ? _$_.hydrate_sibling() : node_40.nextSibling;
+
+							_$_.if(node_41, if_13, false, nextLink);
 
-				_$_.pop(div_34);
+							var node_42 = _$_.hydrating ? _$_.hydrate_sibling() : _$_.append_into(div_49);
+
+							_$_.render_component(FooterStub, node_42, {});
+							_$_.hydrating && _$_.pop(div_49);
+						}
+					}
+				}
 			}
 
-			_$_.pop(div_33);
+			_$_.hydrating && _$_.pop(div_48);
 		}
 
-		_$_.append(__anchor, div_33);
-	});
+		_$_.hydrating && _$_.pop(div_47);
+	}
+
+	_$_.append(__anchor, div_47);
 }
 
-function ArticleWrapper({ children }) {
-	return _$_.tsrx_element((__anchor, __block) => {
-		var article_1 = root_48();
+DocsLayoutInner[_$_.$r] = DocsLayoutInner_render;
 
-		{
-			var div_37 = _$_.hydrating ? _$_.hydrate_child() : article_1.firstChild;
+var root_66 = _$_.template(`<div class="doc-content"></div>`, 0);
 
-			{
-				var expression_18 = _$_.hydrating ? _$_.hydrate_child() : div_37.firstChild;
+function DocsLayoutWithData_render(__anchor, __block) {
+	const htmlContent = '<h1>Title</h1><p>Content</p>';
 
-				_$_.expression(expression_18, () => children);
-				_$_.pop(div_37);
-			}
-		}
+	_$_.render_component(DocsLayoutInner, __anchor, {
+		editPath: "docs/styling.md",
+		nextLink: { href: '/next', text: 'Next' },
+		children: _$_.tsrx_element((__anchor, __block) => {
+			var div_54 = root_66();
 
-		_$_.append(__anchor, article_1);
+			div_54.innerHTML = htmlContent ?? div_54.innerHTML;
+			_$_.append(__anchor, div_54);
+		})
 	});
 }
 
-function SimpleFooter() {
-	return _$_.tsrx_element((__anchor, __block) => {
-		var footer_1 = root_49();
+DocsLayoutWithData[_$_.$r] = DocsLayoutWithData_render;
+
+var root_67 = _$_.template(`<div class="doc-content"></div>`, 0);
 
-		_$_.append(__anchor, footer_1);
+function DocsLayoutWithoutData_render(__anchor, __block) {
+	const htmlContent = undefined;
+
+	_$_.render_component(DocsLayoutInner, __anchor, {
+		children: _$_.tsrx_element((__anchor, __block) => {
+			var div_55 = root_67();
+
+			div_55.innerHTML = htmlContent ?? div_55.innerHTML;
+			_$_.append(__anchor, div_55);
+		})
 	});
 }
 
-export function ArticleWithChildrenThenSibling() {
-	return _$_.tsrx_element((__anchor, __block) => {
-		var div_38 = root_50();
+DocsLayoutWithoutData[_$_.$r] = DocsLayoutWithoutData_render;
 
-		{
-			var node_29 = _$_.hydrating ? _$_.hydrate_child() : div_38.firstChild;
+var root_69 = _$_.template(`<div class="edit-link"><a>Edit on GitHub</a></div>`, 0);
 
-			_$_.render_component(ArticleWrapper, node_29, {
-				children: _$_.tsrx_element((__anchor, __block) => {
-					var fragment_9 = root_51();
+function consequent_13(__anchor, editPath) {
+	var div_62 = root_69();
 
-					_$_.append(__anchor, fragment_9);
-				})
-			});
+	{
+		var a_5 = _$_.hydrating ? _$_.hydrate_child() : div_62.firstChild;
 
-			var node_30 = _$_.hydrating ? _$_.hydrate_sibling() : node_29.nextSibling;
+		_$_.set_attribute(a_5, 'href', `/edit/${editPath}`);
+	}
 
-			{
-				var consequent_7 = (__anchor) => {
-					var div_39 = root_52();
+	_$_.append(__anchor, div_62);
+}
 
-					_$_.append(__anchor, div_39);
-				};
+function if_14(editPath) {
+	if (editPath) return consequent_13;
+}
 
-				_$_.if(node_30, (__render) => {
-					if (true) __render(consequent_7);
-				});
-			}
+var root_71 = _$_.template(`<a class="pager prev"><span class="title"> </span></a>`, 0);
 
-			var node_31 = _$_.hydrating ? _$_.hydrate_sibling() : node_30.nextSibling;
+function render_6(__prev) {
+	var __a = __prev._prevLink.href;
 
-			{
-				var consequent_8 = (__anchor) => {
-					var nav_2 = root_53();
+	if (__prev.a !== __a) {
+		_$_.set_attribute(__prev._a_6, 'href', __prev.a = __a);
+	}
+}
 
-					_$_.append(__anchor, nav_2);
-				};
+var root_72 = _$_.template(`<span></span>`, 0);
 
-				_$_.if(node_31, (__render) => {
-					if (true) __render(consequent_8);
-				});
-			}
+function consequent_14(__anchor, prevLink) {
+	var a_6 = root_71();
+
+	{
+		var span_4 = _$_.hydrating ? _$_.hydrate_child() : a_6.firstChild;
 
-			var node_32 = _$_.hydrating ? _$_.hydrate_sibling() : node_31.nextSibling;
+		{
+			var expression_23 = _$_.hydrating ? _$_.hydrate_child() : span_4.firstChild;
 
-			_$_.render_component(SimpleFooter, node_32, {});
-			_$_.pop(div_38);
+			_$_.expression(expression_23, () => prevLink.text);
+			_$_.hydrating && _$_.pop(span_4);
 		}
+	}
 
-		_$_.append(__anchor, div_38);
-	});
+	_$_.render(render_6, { a: void 0, _prevLink: prevLink, _a_6: a_6 });
+	_$_.append(__anchor, a_6);
 }
 
-export function ArticleWithHtmlChildThenSibling() {
-	return _$_.tsrx_element((__anchor, __block) => {
-		const htmlContent = '<pre><code>const x = 1;</code></pre>';
-		var div_40 = root_54();
+function alternate_1(__anchor, prevLink) {
+	var span_5 = root_72();
 
-		{
-			var node_33 = _$_.hydrating ? _$_.hydrate_child() : div_40.firstChild;
+	_$_.append(__anchor, span_5);
+}
 
-			_$_.render_component(ArticleWrapper, node_33, {
-				children: _$_.tsrx_element((__anchor, __block) => {
-					var div_41 = root_55();
+function if_15(prevLink) {
+	if (prevLink) return consequent_14; else return alternate_1;
+}
 
-					div_41.innerHTML = htmlContent ?? div_41.innerHTML;
-					_$_.append(__anchor, div_41);
-				})
-			});
+var root_73 = _$_.template(`<a class="pager next"><span class="title"> </span></a>`, 0);
 
-			var node_34 = _$_.hydrating ? _$_.hydrate_sibling() : node_33.nextSibling;
+function render_7(__prev) {
+	var __a = __prev._nextLink.href;
 
-			{
-				var consequent_9 = (__anchor) => {
-					var div_42 = root_56();
+	if (__prev.a !== __a) {
+		_$_.set_attribute(__prev._a_7, 'href', __prev.a = __a);
+	}
+}
 
-					_$_.append(__anchor, div_42);
-				};
+function consequent_15(__anchor, nextLink) {
+	var a_7 = root_73();
 
-				_$_.if(node_34, (__render) => {
-					if (true) __render(consequent_9);
-				});
-			}
+	{
+		var span_6 = _$_.hydrating ? _$_.hydrate_child() : a_7.firstChild;
 
-			var node_35 = _$_.hydrating ? _$_.hydrate_sibling() : node_34.nextSibling;
+		{
+			var expression_24 = _$_.hydrating ? _$_.hydrate_child() : span_6.firstChild;
 
-			_$_.render_component(SimpleFooter, node_35, {});
-			_$_.pop(div_40);
+			_$_.expression(expression_24, () => nextLink.text);
+			_$_.hydrating && _$_.pop(span_6);
 		}
+	}
 
-		_$_.append(__anchor, div_40);
-	});
+	_$_.render(render_7, { a: void 0, _nextLink: nextLink, _a_7: a_7 });
+	_$_.append(__anchor, a_7);
 }
 
-function InlineArticleLayout({ children }) {
-	return _$_.tsrx_element((__anchor, __block) => {
-		var div_43 = root_57();
+function if_16(nextLink) {
+	if (nextLink) return consequent_15;
+}
 
-		{
-			var article_2 = _$_.hydrating ? _$_.hydrate_child() : div_43.firstChild;
+var root_70 = _$_.template(`<nav class="prev-next"><!><!></nav>`, 0);
+
+function consequent_16(__anchor, { prevLink, nextLink }) {
+	var nav_4 = root_70();
+
+	{
+		var node_47 = _$_.hydrating ? _$_.hydrate_child() : nav_4.firstChild;
+
+		_$_.if(node_47, if_15, false, prevLink);
+
+		var node_48 = _$_.hydrating ? _$_.hydrate_sibling() : node_47.nextSibling;
+
+		_$_.if(node_48, if_16, false, nextLink);
+		_$_.hydrating && _$_.pop(nav_4);
+	}
+
+	_$_.append(__anchor, nav_4);
+}
+
+function if_17({ prevLink, nextLink }) {
+	if (prevLink || nextLink) return consequent_16;
+}
 
-			{
-				var div_44 = _$_.hydrating ? _$_.hydrate_child() : article_2.firstChild;
+var root_75 = _$_.template(`<a> </a>`, 0);
 
-				{
-					var expression_19 = _$_.hydrating ? _$_.hydrate_child() : div_44.firstChild;
+function render_8(__prev) {
+	var __a = __prev._item.text;
 
-					_$_.expression(expression_19, () => children);
-					_$_.pop(div_44);
-				}
-			}
+	if (__prev.a !== __a) {
+		_$_.set_text(__prev._expression_25, __prev.a = __a);
+	}
 
-			_$_.pop(article_2);
+	var __b = __prev._item.href;
 
-			var node_36 = _$_.hydrating ? _$_.hydrate_sibling() : article_2.nextSibling;
+	if (__prev.b !== __b) {
+		_$_.set_attribute(__prev._a_8, 'href', __prev.b = __b);
+	}
+}
 
-			{
-				var consequent_10 = (__anchor) => {
-					var div_45 = root_58();
+var root_74 = _$_.template(`<div class="aside-content"><nav class="outline"></nav></div>`, 0);
 
-					_$_.append(__anchor, div_45);
-				};
+function consequent_17(__anchor, toc) {
+	var div_63 = root_74();
 
-				_$_.if(node_36, (__render) => {
-					if (true) __render(consequent_10);
-				});
-			}
+	{
+		var nav_5 = _$_.hydrating ? _$_.hydrate_child() : div_63.firstChild;
 
-			var node_37 = _$_.hydrating ? _$_.hydrate_sibling() : node_36.nextSibling;
+		{
+			_$_.for(
+				nav_5,
+				() => toc,
+				(__anchor, item) => {
+					var a_8 = root_75();
 
-			_$_.render_component(SimpleFooter, node_37, {});
-			_$_.pop(div_43);
-		}
+					{
+						var expression_25 = _$_.hydrating ? _$_.hydrate_text() : a_8.firstChild;
+					}
 
-		_$_.append(__anchor, div_43);
-	});
-}
+					_$_.render(render_8, {
+						a: ' ',
+						b: void 0,
+						_item: item,
+						_expression_25: expression_25,
+						_a_8: a_8
+					});
 
-export function InlineArticleWithHtmlChild() {
-	return _$_.tsrx_element((__anchor, __block) => {
-		const htmlContent = '<pre><code>const x = 1;</code></pre>';
+					_$_.append(__anchor, a_8);
+				},
+				4
+			);
 
-		_$_.render_component(InlineArticleLayout, __anchor, {
-			children: _$_.tsrx_element((__anchor, __block) => {
-				var div_46 = root_59();
+			_$_.hydrating && _$_.pop(nav_5);
+		}
+	}
 
-				div_46.innerHTML = htmlContent ?? div_46.innerHTML;
-				_$_.append(__anchor, div_46);
-			})
-		});
-	});
+	_$_.append(__anchor, div_63);
 }
 
-function HeaderStub() {
-	return _$_.tsrx_element((__anchor, __block) => {
-		var header_1 = root_60();
-
-		_$_.append(__anchor, header_1);
-	});
+function if_18(toc) {
+	if (toc.length > 0) return consequent_17;
 }
 
-function SidebarStub() {
-	return _$_.tsrx_element((__anchor, __block) => {
-		var aside_2 = root_61();
+var root_68 = _$_.template(`<div class="layout"><!><div class="docs-wrapper"><!><main class="docs-main"><div class="docs-container"><div class="content"><div class="content-container"><article class="doc-content"><div><!></div></article><!><!></div></div><aside class="aside"><!></aside></div></main></div></div>`, 0);
 
-		_$_.append(__anchor, aside_2);
-	});
-}
+function DocsLayoutExact_render(
+	__anchor,
+	__block,
+	{
+		children,
+		editPath = '',
+		prevLink = null,
+		nextLink = null,
+		toc = []
+	}
+) {
+	var div_56 = root_68();
 
-function FooterStub() {
-	return _$_.tsrx_element((__anchor, __block) => {
-		var footer_2 = root_62();
+	{
+		var node_43 = _$_.hydrating ? _$_.hydrate_child() : div_56.firstChild;
 
-		_$_.append(__anchor, footer_2);
-	});
-}
+		_$_.render_component(HeaderStub, node_43, {});
 
-function DocsLayoutInner(__props) {
-	return _$_.tsrx_element((__anchor, __block) => {
-		var div_47 = root_63();
+		var div_57 = _$_.hydrating ? _$_.hydrate_sibling() : node_43.nextSibling;
 
 		{
-			var node_38 = _$_.hydrating ? _$_.hydrate_child() : div_47.firstChild;
+			var node_44 = _$_.hydrating ? _$_.hydrate_child() : div_57.firstChild;
 
-			_$_.render_component(HeaderStub, node_38, {});
+			_$_.render_component(SidebarStub, node_44, {});
 
-			var div_48 = _$_.hydrating ? _$_.hydrate_sibling() : node_38.nextSibling;
+			var main_2 = _$_.hydrating ? _$_.hydrate_sibling() : node_44.nextSibling;
 
 			{
-				var node_39 = _$_.hydrating ? _$_.hydrate_child() : div_48.firstChild;
-
-				_$_.render_component(SidebarStub, node_39, {});
-
-				var main_1 = _$_.hydrating ? _$_.hydrate_sibling() : node_39.nextSibling;
+				var div_60 = _$_.hydrating ? _$_.hydrate_child() : main_2.firstChild;
 
 				{
-					var div_52 = _$_.hydrating ? _$_.hydrate_child() : main_1.firstChild;
+					var div_59 = _$_.hydrating ? _$_.hydrate_child() : div_60.firstChild;
 
 					{
-						var div_51 = _$_.hydrating ? _$_.hydrate_child() : div_52.firstChild;
+						var div_58 = _$_.hydrating ? _$_.hydrate_child() : div_59.firstChild;
 
 						{
-							var div_50 = _$_.hydrating ? _$_.hydrate_child() : div_51.firstChild;
+							var article_4 = _$_.hydrating ? _$_.hydrate_child() : div_58.firstChild;
 
 							{
-								var article_3 = _$_.hydrating ? _$_.hydrate_child() : div_50.firstChild;
+								var div_61 = _$_.hydrating ? _$_.hydrate_child() : article_4.firstChild;
 
 								{
-									var div_49 = _$_.hydrating ? _$_.hydrate_child() : article_3.firstChild;
-
-									{
-										var expression_20 = _$_.hydrating ? _$_.hydrate_child() : div_49.firstChild;
+									var expression_22 = _$_.hydrating ? _$_.hydrate_child() : div_61.firstChild;
 
-										_$_.expression(expression_20, () => __props.children);
-										_$_.pop(div_49);
-									}
+									_$_.expression(expression_22, () => children);
+									_$_.hydrating && _$_.pop(div_61);
 								}
+							}
 
-								_$_.pop(article_3);
+							_$_.hydrating && _$_.pop(article_4);
 
-								var node_40 = _$_.hydrating ? _$_.hydrate_sibling() : article_3.nextSibling;
+							var node_45 = _$_.hydrating ? _$_.hydrate_sibling() : article_4.nextSibling;
 
-								{
-									var consequent_11 = (__anchor) => {
-										var div_53 = root_64();
+							_$_.if(node_45, if_14, false, editPath);
 
-										_$_.append(__anchor, div_53);
-									};
+							var node_46 = _$_.hydrating ? _$_.hydrate_sibling() : node_45.nextSibling;
 
-									_$_.if(node_40, (__render) => {
-										if (_$_.fallback(__props.editPath, '')) __render(consequent_11);
-									});
-								}
+							_$_.if(node_46, if_17, false, { prevLink, nextLink });
 
-								var node_41 = _$_.hydrating ? _$_.hydrate_sibling() : node_40.nextSibling;
+							var node_49 = _$_.hydrating ? _$_.hydrate_sibling() : _$_.append_into(div_58);
 
-								{
-									var consequent_12 = (__anchor) => {
-										var nav_3 = root_65();
+							_$_.render_component(FooterStub, node_49, {});
+							_$_.hydrating && _$_.pop(div_58);
+						}
+					}
 
-										{
-											var a_4 = _$_.hydrating ? _$_.hydrate_child() : nav_3.firstChild;
+					_$_.hydrating && _$_.pop(div_59);
 
-											{
-												var expression_21 = _$_.hydrating ? _$_.hydrate_child() : a_4.firstChild;
+					var aside_3 = _$_.hydrating ? _$_.hydrate_sibling() : div_59.nextSibling;
+
+					{
+						var node_50 = _$_.hydrating ? _$_.hydrate_child() : aside_3.firstChild;
+
+						_$_.if(node_50, if_18, false, toc);
+						_$_.hydrating && _$_.pop(aside_3);
+					}
+				}
+			}
 
-												_$_.expression(expression_21, () => _$_.fallback(__props.nextLink, null).text);
-												_$_.pop(a_4);
-											}
-										}
+			_$_.hydrating && _$_.pop(div_57);
+		}
 
-										_$_.render(() => {
-											_$_.set_attribute(a_4, 'href', _$_.fallback(__props.nextLink, null).href);
-										});
+		_$_.hydrating && _$_.pop(div_56);
+	}
 
-										_$_.append(__anchor, nav_3);
-									};
+	_$_.append(__anchor, div_56);
+}
 
-									_$_.if(node_41, (__render) => {
-										if (_$_.fallback(__props.nextLink, null)) __render(consequent_12);
-									});
-								}
+DocsLayoutExact[_$_.$r] = DocsLayoutExact_render;
 
-								var node_42 = _$_.hydrating ? _$_.hydrate_sibling() : node_41.nextSibling;
+var root_76 = _$_.template(`<div class="doc-content"></div>`, 0);
 
-								_$_.render_component(FooterStub, node_42, {});
-								_$_.pop(div_50);
-							}
-						}
-					}
-				}
+function DocsLayoutExactWithData_render(__anchor, __block) {
+	const htmlContent = '<h1>Styling Guide</h1><p>Content</p>';
 
-				_$_.pop(div_48);
-			}
+	_$_.render_component(DocsLayoutExact, __anchor, {
+		editPath: "docs/guide/styling.md",
+		prevLink: { href: '/prev', text: 'Previous' },
+		nextLink: { href: '/next', text: 'Next' },
+		toc: [
+			{ href: '#intro', text: 'Introduction' },
+			{ href: '#usage', text: 'Usage' }
+		],
 
-			_$_.pop(div_47);
-		}
+		children: _$_.tsrx_element((__anchor, __block) => {
+			var div_64 = root_76();
 
-		_$_.append(__anchor, div_47);
+			div_64.innerHTML = htmlContent ?? div_64.innerHTML;
+			_$_.append(__anchor, div_64);
+		})
 	});
 }
 
-export function DocsLayoutWithData() {
-	return _$_.tsrx_element((__anchor, __block) => {
-		const htmlContent = '<h1>Title</h1><p>Content</p>';
+DocsLayoutExactWithData[_$_.$r] = DocsLayoutExactWithData_render;
 
-		_$_.render_component(DocsLayoutInner, __anchor, {
-			editPath: "docs/styling.md",
-			nextLink: { href: '/next', text: 'Next' },
-			children: _$_.tsrx_element((__anchor, __block) => {
-				var div_54 = root_66();
+var root_77 = _$_.template(`<div class="doc-content"></div>`, 0);
 
-				div_54.innerHTML = htmlContent ?? div_54.innerHTML;
-				_$_.append(__anchor, div_54);
-			})
-		});
+function DocsLayoutExactWithoutData_render(__anchor, __block) {
+	const htmlContent = undefined;
+	const editPath = undefined;
+	const prevLink = undefined;
+	const nextLink = undefined;
+	const toc = undefined;
+
+	_$_.render_component(DocsLayoutExact, __anchor, {
+		editPath,
+		prevLink,
+		nextLink,
+		toc,
+		children: _$_.tsrx_element((__anchor, __block) => {
+			var div_65 = root_77();
+
+			div_65.innerHTML = htmlContent ?? div_65.innerHTML;
+			_$_.append(__anchor, div_65);
+		})
 	});
 }
 
-export function DocsLayoutWithoutData() {
-	return _$_.tsrx_element((__anchor, __block) => {
-		const htmlContent = undefined;
+DocsLayoutExactWithoutData[_$_.$r] = DocsLayoutExactWithoutData_render;
 
-		_$_.render_component(DocsLayoutInner, __anchor, {
-			children: _$_.tsrx_element((__anchor, __block) => {
-				var div_55 = root_67();
+var root_78 = _$_.template(`<div><template id="t1"></template><p class="content">Main content</p></div>`, 0);
 
-				div_55.innerHTML = htmlContent ?? div_55.innerHTML;
-				_$_.append(__anchor, div_55);
-			})
-		});
-	});
+function render_9(__prev) {
+	var __a = _$_.with_scope(__prev.___block, () => JSON.stringify(__prev._data));
+
+	if (__prev.a !== __a) {
+		__prev._template.innerHTML = (__prev.a = __a) ?? __prev._template.innerHTML;
+	}
 }
 
-function DocsLayoutExact(__props) {
-	return _$_.tsrx_element((__anchor, __block) => {
-		var div_56 = root_68();
+function TemplateWithHtmlContent_render(__anchor, __block) {
+	const data = { title: 'Test', value: 42 };
+	var div_66 = root_78();
 
-		{
-			var node_43 = _$_.hydrating ? _$_.hydrate_child() : div_56.firstChild;
+	{
+		var template = _$_.hydrating ? _$_.hydrate_child() : div_66.firstChild;
+	}
 
-			_$_.render_component(HeaderStub, node_43, {});
+	_$_.render(render_9, {
+		a: template.innerHTML,
+		___block: __block,
+		_data: data,
+		_template: template
+	});
 
-			var div_57 = _$_.hydrating ? _$_.hydrate_sibling() : node_43.nextSibling;
+	_$_.append(__anchor, div_66);
+}
 
-			{
-				var node_44 = _$_.hydrating ? _$_.hydrate_child() : div_57.firstChild;
+TemplateWithHtmlContent[_$_.$r] = TemplateWithHtmlContent_render;
 
-				_$_.render_component(SidebarStub, node_44, {});
+var root_79 = _$_.template(`<div class="wrapper"><h1>Title</h1><template id="data-template"></template><p class="after-template">Content after template</p></div>`, 0);
 
-				var main_2 = _$_.hydrating ? _$_.hydrate_sibling() : node_44.nextSibling;
+function render_10(__prev) {
+	var __a = _$_.with_scope(__prev.___block, () => JSON.stringify(__prev._data));
 
-				{
-					var div_61 = _$_.hydrating ? _$_.hydrate_child() : main_2.firstChild;
+	if (__prev.a !== __a) {
+		__prev._template_1.innerHTML = (__prev.a = __a) ?? __prev._template_1.innerHTML;
+	}
+}
 
-					{
-						var div_60 = _$_.hydrating ? _$_.hydrate_child() : div_61.firstChild;
+function TemplateWithHtmlAndSiblings_render(__anchor, __block) {
+	const data = { name: 'Ripple', version: '1.0' };
+	var div_67 = root_79();
 
-						{
-							var div_59 = _$_.hydrating ? _$_.hydrate_child() : div_60.firstChild;
+	{
+		var h1_3 = _$_.hydrating ? _$_.hydrate_child() : div_67.firstChild;
+		var template_1 = _$_.hydrating ? _$_.hydrate_sibling() : h1_3.nextSibling;
+	}
 
-							{
-								var article_4 = _$_.hydrating ? _$_.hydrate_child() : div_59.firstChild;
+	_$_.render(render_10, {
+		a: template_1.innerHTML,
+		___block: __block,
+		_data: data,
+		_template_1: template_1
+	});
 
-								{
-									var div_58 = _$_.hydrating ? _$_.hydrate_child() : article_4.firstChild;
+	_$_.append(__anchor, div_67);
+}
 
-									{
-										var expression_22 = _$_.hydrating ? _$_.hydrate_child() : div_58.firstChild;
+TemplateWithHtmlAndSiblings[_$_.$r] = TemplateWithHtmlAndSiblings_render;
 
-										_$_.expression(expression_22, () => __props.children);
-										_$_.pop(div_58);
-									}
-								}
+var root_80 = _$_.template(`<div class="layout"><template id="page-data"></template><main><!></main></div>`, 0);
 
-								_$_.pop(article_4);
+function render_11(__prev) {
+	var __a = _$_.with_scope(__prev.___block, () => JSON.stringify(__prev._data));
 
-								var node_45 = _$_.hydrating ? _$_.hydrate_sibling() : article_4.nextSibling;
+	if (__prev.a !== __a) {
+		__prev._template_2.innerHTML = (__prev.a = __a) ?? __prev._template_2.innerHTML;
+	}
+}
 
-								{
-									var consequent_13 = (__anchor) => {
-										var div_62 = root_69();
+function LayoutWithTemplate_render(__anchor, __block, { children, data }) {
+	var div_68 = root_80();
 
-										{
-											var a_5 = _$_.hydrating ? _$_.hydrate_child() : div_62.firstChild;
-										}
+	{
+		var template_2 = _$_.hydrating ? _$_.hydrate_child() : div_68.firstChild;
+		var main_3 = _$_.hydrating ? _$_.hydrate_sibling() : template_2.nextSibling;
 
-										_$_.render(() => {
-											_$_.set_attribute(a_5, 'href', `/edit/${_$_.fallback(__props.editPath, '')}`);
-										});
+		{
+			var expression_26 = _$_.hydrating ? _$_.hydrate_child() : main_3.firstChild;
 
-										_$_.append(__anchor, div_62);
-									};
+			_$_.expression(expression_26, () => children);
+			_$_.hydrating && _$_.pop(main_3);
+		}
+	}
 
-									_$_.if(node_45, (__render) => {
-										if (_$_.fallback(__props.editPath, '')) __render(consequent_13);
-									});
-								}
+	_$_.render(render_11, {
+		a: template_2.innerHTML,
+		___block: __block,
+		_data: data,
+		_template_2: template_2
+	});
 
-								var node_46 = _$_.hydrating ? _$_.hydrate_sibling() : node_45.nextSibling;
+	_$_.append(__anchor, div_68);
+}
 
-								{
-									var consequent_16 = (__anchor) => {
-										var nav_4 = root_70();
+LayoutWithTemplate[_$_.$r] = LayoutWithTemplate_render;
 
-										{
-											var node_47 = _$_.hydrating ? _$_.hydrate_child() : nav_4.firstChild;
+var root_81 = _$_.template(`<div class="doc-content"></div>`, 0);
 
-											{
-												var consequent_14 = (__anchor) => {
-													var a_6 = root_71();
+function render_12(__prev) {
+	var __a = __prev._doc.html;
 
-													{
-														var span_4 = _$_.hydrating ? _$_.hydrate_child() : a_6.firstChild;
+	if (__prev.a !== __a) {
+		__prev._div_69.innerHTML = (__prev.a = __a) ?? __prev._div_69.innerHTML;
+	}
+}
 
-														{
-															var expression_23 = _$_.hydrating ? _$_.hydrate_child() : span_4.firstChild;
+function NestedTemplateInLayout_render(__anchor, __block) {
+	const doc = { title: 'Comparison', html: '<p>Content</p>' };
 
-															_$_.expression(expression_23, () => _$_.fallback(__props.prevLink, null).text);
-															_$_.pop(span_4);
-														}
-													}
+	_$_.render_component(LayoutWithTemplate, __anchor, {
+		data: doc,
+		children: _$_.tsrx_element((__anchor, __block) => {
+			var div_69 = root_81();
 
-													_$_.render(() => {
-														_$_.set_attribute(a_6, 'href', _$_.fallback(__props.prevLink, null).href);
-													});
+			_$_.render(render_12, { a: div_69.innerHTML, _doc: doc, _div_69: div_69 });
+			_$_.append(__anchor, div_69);
+		})
+	});
+}
 
-													_$_.append(__anchor, a_6);
-												};
+NestedTemplateInLayout[_$_.$r] = NestedTemplateInLayout_render;
 
-												var alternate_1 = (__anchor) => {
-													var span_5 = root_72();
+var root_82 = _$_.template(`<section class="readable-section"><p>Ergonomics</p><h2>Sibling traversal pattern</h2><p>Before first block</p><p>Before second block</p><pre class="code-block"><code></code></pre><p>Between one and two</p><pre class="code-block"><code></code></pre><p>Between two and three</p><pre class="code-block"><code></code></pre></section>`, 0);
 
-													_$_.append(__anchor, span_5);
-												};
+function HtmlCodeBlocksWithSiblingChain_render(__anchor, __block) {
+	const html1 = '<span class="kw">const</span> <span class="id">a</span> = 1;';
+	const html2 = '<span class="kw">const</span> <span class="id">b</span> = 2;';
+	const html3 = '<span class="kw">const</span> <span class="id">c</span> = 3;';
+	var section_2 = root_82();
 
-												_$_.if(node_47, (__render) => {
-													if (_$_.fallback(__props.prevLink, null)) __render(consequent_14); else __render(alternate_1, false);
-												});
-											}
+	{
+		var p_9 = _$_.hydrating ? _$_.hydrate_child() : section_2.firstChild;
+		var h2_3 = _$_.hydrating ? _$_.hydrate_sibling() : p_9.nextSibling;
+		var p_8 = _$_.hydrating ? _$_.hydrate_sibling() : h2_3.nextSibling;
+		var p_7 = _$_.hydrating ? _$_.hydrate_sibling() : p_8.nextSibling;
+		var pre = _$_.hydrating ? _$_.hydrate_sibling() : p_7.nextSibling;
 
-											var node_48 = _$_.hydrating ? _$_.hydrate_sibling() : node_47.nextSibling;
+		{
+			var code_1 = _$_.hydrating ? _$_.hydrate_child() : pre.firstChild;
 
-											{
-												var consequent_15 = (__anchor) => {
-													var a_7 = root_73();
+			code_1.innerHTML = html1 ?? code_1.innerHTML;
+		}
 
-													{
-														var span_6 = _$_.hydrating ? _$_.hydrate_child() : a_7.firstChild;
+		_$_.hydrating && _$_.pop(pre);
 
-														{
-															var expression_24 = _$_.hydrating ? _$_.hydrate_child() : span_6.firstChild;
+		var p_10 = _$_.hydrating ? _$_.hydrate_sibling() : pre.nextSibling;
+		var pre_1 = _$_.hydrating ? _$_.hydrate_sibling() : p_10.nextSibling;
 
-															_$_.expression(expression_24, () => _$_.fallback(__props.nextLink, null).text);
-															_$_.pop(span_6);
-														}
-													}
+		{
+			var code_2 = _$_.hydrating ? _$_.hydrate_child() : pre_1.firstChild;
 
-													_$_.render(() => {
-														_$_.set_attribute(a_7, 'href', _$_.fallback(__props.nextLink, null).href);
-													});
+			code_2.innerHTML = html2 ?? code_2.innerHTML;
+		}
 
-													_$_.append(__anchor, a_7);
-												};
+		_$_.hydrating && _$_.pop(pre_1);
 
-												_$_.if(node_48, (__render) => {
-													if (_$_.fallback(__props.nextLink, null)) __render(consequent_15);
-												});
-											}
+		var p_11 = _$_.hydrating ? _$_.hydrate_sibling() : pre_1.nextSibling;
+		var pre_2 = _$_.hydrating ? _$_.hydrate_sibling() : p_11.nextSibling;
 
-											_$_.pop(nav_4);
-										}
+		{
+			var code_3 = _$_.hydrating ? _$_.hydrate_child() : pre_2.firstChild;
 
-										_$_.append(__anchor, nav_4);
-									};
+			code_3.innerHTML = html3 ?? code_3.innerHTML;
+		}
+	}
 
-									_$_.if(node_46, (__render) => {
-										if (_$_.fallback(__props.prevLink, null) || _$_.fallback(__props.nextLink, null)) __render(consequent_16);
-									});
-								}
+	_$_.append(__anchor, section_2);
+}
 
-								var node_49 = _$_.hydrating ? _$_.hydrate_sibling() : node_46.nextSibling;
+HtmlCodeBlocksWithSiblingChain[_$_.$r] = HtmlCodeBlocksWithSiblingChain_render;
 
-								_$_.render_component(FooterStub, node_49, {});
-								_$_.pop(div_59);
-							}
-						}
+import { Fragment, track } from 'ripple';
 
-						_$_.pop(div_60);
+export function StaticHtml() {
+	return _$_.tsrx_element(StaticHtml_render);
+}
 
-						var aside_3 = _$_.hydrating ? _$_.hydrate_sibling() : div_60.nextSibling;
+export function DynamicHtml() {
+	return _$_.tsrx_element(DynamicHtml_render);
+}
 
-						{
-							var node_50 = _$_.hydrating ? _$_.hydrate_child() : aside_3.firstChild;
+export function EmptyHtml() {
+	return _$_.tsrx_element(EmptyHtml_render);
+}
 
-							{
-								var consequent_17 = (__anchor) => {
-									var div_63 = root_74();
+export function ComplexHtml() {
+	return _$_.tsrx_element(ComplexHtml_render);
+}
+
+export function MultipleHtml() {
+	return _$_.tsrx_element(MultipleHtml_render);
+}
+
+export function HtmlWithReactivity() {
+	return _$_.tsrx_element(HtmlWithReactivity_render);
+}
 
-									{
-										var nav_5 = _$_.hydrating ? _$_.hydrate_child() : div_63.firstChild;
+export function HtmlWrapper(__props) {
+	return _$_.tsrx_element(HtmlWrapper_render, __props);
+}
 
-										{
-											_$_.for(
-												nav_5,
-												() => _$_.fallback(__props.toc, []),
-												(__anchor, item) => {
-													var a_8 = root_75();
+export function HtmlInChildren() {
+	return _$_.tsrx_element(HtmlInChildren_render);
+}
 
-													{
-														var expression_25 = _$_.hydrating ? _$_.hydrate_child() : a_8.firstChild;
+export function HtmlInChildrenWithSiblings() {
+	return _$_.tsrx_element(HtmlInChildrenWithSiblings_render);
+}
 
-														_$_.expression(expression_25, () => item.text);
-														_$_.pop(a_8);
-													}
+export function MultipleHtmlInChildren() {
+	return _$_.tsrx_element(MultipleHtmlInChildren_render);
+}
 
-													_$_.render(() => {
-														_$_.set_attribute(a_8, 'href', item.href);
-													});
+export function HtmlWithComments() {
+	return _$_.tsrx_element(HtmlWithComments_render);
+}
 
-													_$_.append(__anchor, a_8);
-												},
-												4
-											);
+export function HtmlWithEmptyComment() {
+	return _$_.tsrx_element(HtmlWithEmptyComment_render);
+}
 
-											_$_.pop(nav_5);
-										}
-									}
+export function HtmlWithCommentsInChildren() {
+	return _$_.tsrx_element(HtmlWithCommentsInChildren_render);
+}
 
-									_$_.append(__anchor, div_63);
-								};
+function DocFooter() {
+	return _$_.tsrx_element(DocFooter_render);
+}
 
-								_$_.if(node_50, (__render) => {
-									if (_$_.fallback(__props.toc, []).length > 0) __render(consequent_17);
-								});
-							}
+export function DocLayout(__props) {
+	return _$_.tsrx_element(DocLayout_render, __props);
+}
 
-							_$_.pop(aside_3);
-						}
-					}
-				}
+export function HtmlWithServerData() {
+	return _$_.tsrx_element(HtmlWithServerData_render);
+}
 
-				_$_.pop(div_57);
-			}
+export function HtmlWithClientDefaults() {
+	return _$_.tsrx_element(HtmlWithClientDefaults_render);
+}
 
-			_$_.pop(div_56);
-		}
+export function HtmlWithUndefinedContent() {
+	return _$_.tsrx_element(HtmlWithUndefinedContent_render);
+}
 
-		_$_.append(__anchor, div_56);
-	});
+function DynamicHeading(__props) {
+	return _$_.tsrx_element(DynamicHeading_render, __props);
 }
 
-export function DocsLayoutExactWithData() {
-	return _$_.tsrx_element((__anchor, __block) => {
-		const htmlContent = '<h1>Styling Guide</h1><p>Content</p>';
-
-		_$_.render_component(DocsLayoutExact, __anchor, {
-			editPath: "docs/guide/styling.md",
-			prevLink: { href: '/prev', text: 'Previous' },
-			nextLink: { href: '/next', text: 'Next' },
-			toc: [
-				{ href: '#intro', text: 'Introduction' },
-				{ href: '#usage', text: 'Usage' }
-			],
+function CodeBlock(__props) {
+	return _$_.tsrx_element(CodeBlock_render, __props);
+}
 
-			children: _$_.tsrx_element((__anchor, __block) => {
-				var div_64 = root_76();
+function ContentWrapper(__props) {
+	return _$_.tsrx_element(ContentWrapper_render, __props);
+}
 
-				div_64.innerHTML = htmlContent ?? div_64.innerHTML;
-				_$_.append(__anchor, div_64);
-			})
-		});
-	});
+export function HtmlAfterSwitchInChildren() {
+	return _$_.tsrx_element(HtmlAfterSwitchInChildren_render);
 }
 
-export function DocsLayoutExactWithoutData() {
-	return _$_.tsrx_element((__anchor, __block) => {
-		const htmlContent = undefined;
-		const editPath = undefined;
-		const prevLink = undefined;
-		const nextLink = undefined;
-		const toc = undefined;
-
-		_$_.render_component(DocsLayoutExact, __anchor, {
-			editPath,
-			prevLink,
-			nextLink,
-			toc,
-			children: _$_.tsrx_element((__anchor, __block) => {
-				var div_65 = root_77();
+function IfHeading(__props) {
+	return _$_.tsrx_element(IfHeading_render, __props);
+}
 
-				div_65.innerHTML = htmlContent ?? div_65.innerHTML;
-				_$_.append(__anchor, div_65);
-			})
-		});
-	});
+export function HtmlAfterIfInChildren() {
+	return _$_.tsrx_element(HtmlAfterIfInChildren_render);
 }
 
-export function TemplateWithHtmlContent() {
-	return _$_.tsrx_element((__anchor, __block) => {
-		const data = { title: 'Test', value: 42 };
-		var div_66 = root_78();
+function ForList(__props) {
+	return _$_.tsrx_element(ForList_render, __props);
+}
 
-		{
-			var template = _$_.hydrating ? _$_.hydrate_child() : div_66.firstChild;
-		}
+export function HtmlAfterForInChildren() {
+	return _$_.tsrx_element(HtmlAfterForInChildren_render);
+}
 
-		_$_.render(() => {
-			template.innerHTML = _$_.with_scope(__block, () => JSON.stringify(data)) ?? template.innerHTML;
-		});
+function TryBox(__props) {
+	return _$_.tsrx_element(TryBox_render, __props);
+}
 
-		_$_.append(__anchor, div_66);
-	});
+export function HtmlAfterTryInChildren() {
+	return _$_.tsrx_element(HtmlAfterTryInChildren_render);
 }
 
-export function TemplateWithHtmlAndSiblings() {
-	return _$_.tsrx_element((__anchor, __block) => {
-		const data = { name: 'Ripple', version: '1.0' };
-		var div_67 = root_79();
+function Boxed(__props) {
+	return _$_.tsrx_element(Boxed_render, __props);
+}
 
-		{
-			var h1_3 = _$_.hydrating ? _$_.hydrate_child() : div_67.firstChild;
-			var template_1 = _$_.hydrating ? _$_.hydrate_sibling() : h1_3.nextSibling;
-		}
+function IndirectHeading(__props) {
+	return _$_.tsrx_element(IndirectHeading_render, __props);
+}
 
-		_$_.render(() => {
-			template_1.innerHTML = _$_.with_scope(__block, () => JSON.stringify(data)) ?? template_1.innerHTML;
-		});
+export function HtmlAfterComponentInChildren() {
+	return _$_.tsrx_element(HtmlAfterComponentInChildren_render);
+}
 
-		_$_.append(__anchor, div_67);
-	});
+function NavItem(__props) {
+	return _$_.tsrx_element(NavItem_render, __props);
 }
 
-function LayoutWithTemplate({ children, data }) {
-	return _$_.tsrx_element((__anchor, __block) => {
-		var div_68 = root_80();
+function SidebarSection(__props) {
+	return _$_.tsrx_element(SidebarSection_render, __props);
+}
 
-		{
-			var template_2 = _$_.hydrating ? _$_.hydrate_child() : div_68.firstChild;
-			var main_3 = _$_.hydrating ? _$_.hydrate_sibling() : template_2.nextSibling;
+function SideNav(__props) {
+	return _$_.tsrx_element(SideNav_render, __props);
+}
 
-			{
-				var expression_26 = _$_.hydrating ? _$_.hydrate_child() : main_3.firstChild;
+function PageHeader() {
+	return _$_.tsrx_element(PageHeader_render);
+}
 
-				_$_.expression(expression_26, () => children);
-				_$_.pop(main_3);
-			}
-		}
+export function LayoutWithSidebarAndMain() {
+	return _$_.tsrx_element(LayoutWithSidebarAndMain_render);
+}
 
-		_$_.render(() => {
-			template_2.innerHTML = _$_.with_scope(__block, () => JSON.stringify(data)) ?? template_2.innerHTML;
-		});
+function ArticleWrapper(__props) {
+	return _$_.tsrx_element(ArticleWrapper_render, __props);
+}
 
-		_$_.append(__anchor, div_68);
-	});
+function SimpleFooter() {
+	return _$_.tsrx_element(SimpleFooter_render);
 }
 
-export function NestedTemplateInLayout() {
-	return _$_.tsrx_element((__anchor, __block) => {
-		const doc = { title: 'Comparison', html: '<p>Content</p>' };
+export function ArticleWithChildrenThenSibling() {
+	return _$_.tsrx_element(ArticleWithChildrenThenSibling_render);
+}
 
-		_$_.render_component(LayoutWithTemplate, __anchor, {
-			data: doc,
-			children: _$_.tsrx_element((__anchor, __block) => {
-				var div_69 = root_81();
+export function ArticleWithHtmlChildThenSibling() {
+	return _$_.tsrx_element(ArticleWithHtmlChildThenSibling_render);
+}
 
-				_$_.render(() => {
-					div_69.innerHTML = doc.html ?? div_69.innerHTML;
-				});
+function InlineArticleLayout(__props) {
+	return _$_.tsrx_element(InlineArticleLayout_render, __props);
+}
 
-				_$_.append(__anchor, div_69);
-			})
-		});
-	});
+export function InlineArticleWithHtmlChild() {
+	return _$_.tsrx_element(InlineArticleWithHtmlChild_render);
 }
 
-export function HtmlCodeBlocksWithSiblingChain() {
-	return _$_.tsrx_element((__anchor, __block) => {
-		const html1 = '<span class="kw">const</span> <span class="id">a</span> = 1;';
-		const html2 = '<span class="kw">const</span> <span class="id">b</span> = 2;';
-		const html3 = '<span class="kw">const</span> <span class="id">c</span> = 3;';
-		var section_2 = root_82();
+function HeaderStub() {
+	return _$_.tsrx_element(HeaderStub_render);
+}
 
-		{
-			var p_9 = _$_.hydrating ? _$_.hydrate_child() : section_2.firstChild;
-			var h2_3 = _$_.hydrating ? _$_.hydrate_sibling() : p_9.nextSibling;
-			var p_8 = _$_.hydrating ? _$_.hydrate_sibling() : h2_3.nextSibling;
-			var p_7 = _$_.hydrating ? _$_.hydrate_sibling() : p_8.nextSibling;
-			var pre = _$_.hydrating ? _$_.hydrate_sibling() : p_7.nextSibling;
+function SidebarStub() {
+	return _$_.tsrx_element(SidebarStub_render);
+}
 
-			{
-				var code_1 = _$_.hydrating ? _$_.hydrate_child() : pre.firstChild;
+function FooterStub() {
+	return _$_.tsrx_element(FooterStub_render);
+}
 
-				code_1.innerHTML = html1 ?? code_1.innerHTML;
-			}
+function DocsLayoutInner(__props) {
+	return _$_.tsrx_element(DocsLayoutInner_render, __props);
+}
 
-			_$_.pop(pre);
+export function DocsLayoutWithData() {
+	return _$_.tsrx_element(DocsLayoutWithData_render);
+}
 
-			var p_10 = _$_.hydrating ? _$_.hydrate_sibling() : pre.nextSibling;
-			var pre_1 = _$_.hydrating ? _$_.hydrate_sibling() : p_10.nextSibling;
+export function DocsLayoutWithoutData() {
+	return _$_.tsrx_element(DocsLayoutWithoutData_render);
+}
 
-			{
-				var code_2 = _$_.hydrating ? _$_.hydrate_child() : pre_1.firstChild;
+function DocsLayoutExact(__props) {
+	return _$_.tsrx_element(DocsLayoutExact_render, __props);
+}
 
-				code_2.innerHTML = html2 ?? code_2.innerHTML;
-			}
+export function DocsLayoutExactWithData() {
+	return _$_.tsrx_element(DocsLayoutExactWithData_render);
+}
 
-			_$_.pop(pre_1);
+export function DocsLayoutExactWithoutData() {
+	return _$_.tsrx_element(DocsLayoutExactWithoutData_render);
+}
 
-			var p_11 = _$_.hydrating ? _$_.hydrate_sibling() : pre_1.nextSibling;
-			var pre_2 = _$_.hydrating ? _$_.hydrate_sibling() : p_11.nextSibling;
+export function TemplateWithHtmlContent() {
+	return _$_.tsrx_element(TemplateWithHtmlContent_render);
+}
 
-			{
-				var code_3 = _$_.hydrating ? _$_.hydrate_child() : pre_2.firstChild;
+export function TemplateWithHtmlAndSiblings() {
+	return _$_.tsrx_element(TemplateWithHtmlAndSiblings_render);
+}
 
-				code_3.innerHTML = html3 ?? code_3.innerHTML;
-			}
-		}
+function LayoutWithTemplate(__props) {
+	return _$_.tsrx_element(LayoutWithTemplate_render, __props);
+}
 
-		_$_.append(__anchor, section_2);
-	});
+export function NestedTemplateInLayout() {
+	return _$_.tsrx_element(NestedTemplateInLayout_render);
+}
+
+export function HtmlCodeBlocksWithSiblingChain() {
+	return _$_.tsrx_element(HtmlCodeBlocksWithSiblingChain_render);
 }
 
 _$_.delegate(['click']);