Mark demo HTML sections with BEGIN/END comments (#2741)

docs/components/DocsMenu.astro

@@ -31,6 +31,7 @@ const { url } = Astro.props;
 const menu = docs.menu as MenuSection[];
 ---
 
+<!-- BEGIN DOCS MENU -->
 <nav class="space-y space-y-5" id="menu">
 	{
 		menu.map((level1) => (
@@ -86,3 +87,4 @@ const menu = docs.menu as MenuSection[];
 		))
 	}
 </nav>
+<!-- END DOCS MENU -->

docs/components/DocsNavbar.astro

@@ -9,6 +9,7 @@ const previewUrl = 'https://preview.tabler.io';
 const changelogUrl = 'https://tabler.io/changelog';
 ---
 
+<!-- BEGIN DOCS NAVBAR -->
 <div class="navbar navbar-expand sticky-top">
 	<div class="container">
 		<div class="row flex-fill align-items-md-center">
@@ -59,3 +60,4 @@ const changelogUrl = 'https://tabler.io/changelog';
 		</div>
 	</div>
 </div>
+<!-- END DOCS NAVBAR -->

docs/components/DocsPagination.astro

@@ -61,6 +61,7 @@ const { prev, next, found } = findPage(docs.menu as MenuNode[]) ?? {
 };
 ---
 
+<!-- BEGIN DOCS PAGINATION -->
 {
 	children.length > 0 && (
 		<div class="mt-6 pt-6">
@@ -116,3 +117,4 @@ const { prev, next, found } = findPage(docs.menu as MenuNode[]) ?? {
 		</div>
 	)
 }
+<!-- END DOCS PAGINATION -->

docs/components/DocsToc.astro

@@ -21,6 +21,7 @@ const { toc = [] } = Astro.props;
 const illustrationsCount = 100;
 ---
 
+<!-- BEGIN DOCS TOC -->
 {
 	toc.length > 0 && (
 		<Fragment>
@@ -43,3 +44,4 @@ const illustrationsCount = 100;
 		<h4>{illustrationsCount} sleek illustrations for your startup's visual identity.</h4>
 	</div>
 </a>
+<!-- END DOCS TOC -->

preview/pages/2-step-verification-code.astro

@@ -57,6 +57,7 @@ import ButtonList from '@ui/ButtonList.astro';
 		</div>
 	</form>
 
+	<!-- BEGIN CODE INPUT SCRIPT -->
 	<script>
 		const inputs = document.querySelectorAll('[data-code-input]');
 
@@ -77,6 +78,7 @@ import ButtonList from '@ui/ButtonList.astro';
 			});
 		});
 	</script>
+	<!-- END CODE INPUT SCRIPT -->
 
 	<div class="text-center text-secondary mt-3">
 		It may take a minute to receive your code. Haven't received it? <a href="./"

preview/pages/colors.astro

@@ -209,6 +209,7 @@ const gradientColors = [...Object.keys(site.colors), 'inverted', 'white', 'trans
 		</div>
 	</div>
 
+	<!-- BEGIN GRADIENT SCRIPT -->
 	<script is:inline>
 		document.addEventListener('DOMContentLoaded', function () {
 			var gradientPreview = document.getElementById('gradient-preview');
@@ -242,4 +243,5 @@ const gradientColors = [...Object.keys(site.colors), 'inverted', 'white', 'trans
 			updateGradient();
 		});
 	</script>
+	<!-- END GRADIENT SCRIPT -->
 </DefaultLayout>

preview/pages/emails.astro

@@ -82,6 +82,7 @@ const emailEntries = Object.entries(emails);
 			</div>
 		</div>
 	</div>
+	<!-- BEGIN EMAIL MODAL SCRIPT -->
 	<script>
 		const emailModal = document.getElementById('email-modal');
 		if (emailModal) {
@@ -101,4 +102,5 @@ const emailEntries = Object.entries(emails);
 			});
 		}
 	</script>
+	<!-- END EMAIL MODAL SCRIPT -->
 </DefaultLayout>

preview/pages/illustrations.astro

@@ -174,6 +174,7 @@ const illustrationsData = Object.fromEntries(
 			</div>
 		</div>
 	</div>
+	<!-- BEGIN ILLUSTRATIONS SCRIPT -->
 	<script define:vars={{ illustrationsData }}>
 		let skinColor = 'var()',
 			primaryColor = 'var()';
@@ -202,4 +203,5 @@ const illustrationsData = Object.fromEntries(
 			});
 		});
 	</script>
+	<!-- END ILLUSTRATIONS SCRIPT -->
 </DefaultLayout>

preview/pages/map-fullsize.astro

@@ -27,6 +27,7 @@ import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
 		FormElements1.astro for why a processed (module) script here would run too
 		early and find window.google undefined.
 	-->
+	<!-- BEGIN MAP SCRIPT -->
 	<script is:inline>
 		window.tabler_map ??= {};
 
@@ -41,4 +42,5 @@ import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
 
 		document.readyState !== 'loading' ? initMap() : document.addEventListener('DOMContentLoaded', initMap, { once: true });
 	</script>
+	<!-- END MAP SCRIPT -->
 </DefaultLayout>

preview/pages/progress.astro

@@ -132,6 +132,7 @@ import ProgressDescription from '@ui/ProgressDescription.astro';
 						<button class="btn btn-sm ms-3" id="progress-animated-minus-10">-10%</button>
 						<button class="btn btn-sm" id="progress-animated-add-10">+10%</button>
 					</ButtonList>
+					<!-- BEGIN SCRIPT OF ANIMATION -->
 					<script>
 						/*
 						This script is for animation of the last progress bar.
@@ -162,6 +163,7 @@ import ProgressDescription from '@ui/ProgressDescription.astro';
 						document.getElementById('progress-animated-minus-10').addEventListener('click', () => setWidth(width - 10));
 						document.getElementById('progress-animated-100').addEventListener('click', () => setWidth(100));
 					</script>
+					<!-- END SCRIPT OF ANIMATION -->
 				</CardBody>
 			</Card>
 		</div>

preview/pages/tour.astro

@@ -141,6 +141,7 @@ import Icon from '@ui/Icon.astro';
 		</div>
 	</div>
 
+	<!-- BEGIN TOUR SCRIPT -->
 	<script is:inline>
 	   document.addEventListener('DOMContentLoaded', function () {
 	      const driverObj = driver.js.driver({
@@ -223,4 +224,5 @@ import Icon from '@ui/Icon.astro';
 	      }
 	   });
 	</script>
+	<!-- END TOUR SCRIPT -->
 </DefaultLayout>

shared/components/forms/FormElements1.astro

@@ -160,6 +160,7 @@ const states = (selects as { states: { options: Record<string, { name: string; s
 	synchronously at parse time, so the readyState/DOMContentLoaded guard below
 	actually delays until after the library has loaded.
 -->
+<!-- BEGIN SELECT STATES -->
 <script is:inline>
 	function initSelectStates() {
 		window.tabler_select ??= {};
@@ -185,3 +186,4 @@ const states = (selects as { states: { options: Record<string, { name: string; s
 
 	document.readyState !== 'loading' ? initSelectStates() : document.addEventListener('DOMContentLoaded', initSelectStates, { once: true });
 </script>
+<!-- END SELECT STATES -->

shared/components/js/TablerList.astro

@@ -11,6 +11,7 @@ const { id = 'default', valueNames } = Astro.props;
 const listId = `table-${id}`;
 ---
 
+<!-- BEGIN TABLER LIST -->
 <script define:vars={{ listId, valueNames }}>
 	function initTablerList() {
 		window.tabler_list ??= {};
@@ -23,3 +24,4 @@ const listId = `table-${id}`;
 
 	document.readyState !== 'loading' ? initTablerList() : document.addEventListener('DOMContentLoaded', initTablerList, { once: true });
 </script>
+<!-- END TABLER LIST -->

shared/components/layout/HeaderActionsAddBoard.astro

@@ -2,4 +2,6 @@
 import Button from '@ui/Button.astro';
 ---
 
+<!-- BEGIN HEADER ACTIONS -->
 <Button color="primary" icon="plus" text="Add board" />
+<!-- END HEADER ACTIONS -->

shared/components/layout/HeaderActionsAddJob.astro

@@ -2,4 +2,6 @@
 import Button from '@ui/Button.astro';
 ---
 
+<!-- BEGIN HEADER ACTIONS -->
 <Button color="primary" icon="plus" text="Post a job" />
+<!-- END HEADER ACTIONS -->

shared/components/layout/HeaderActionsBreadcrumb.astro

@@ -6,6 +6,8 @@
 import Breadcrumb from '@ui/Breadcrumb.astro';
 ---
 
+<!-- BEGIN HEADER ACTIONS -->
 <div class="d-flex">
 	<Breadcrumb pages={['Tabler', 'Pages']} class="breadcrumb-arrows" />
 </div>
+<!-- END HEADER ACTIONS -->

shared/components/layout/HeaderActionsButtons.astro

@@ -13,6 +13,7 @@ interface Props {
 const { dark } = Astro.props;
 ---
 
+<!-- BEGIN HEADER ACTIONS -->
 <ButtonList>
 	<span class="d-none d-sm-inline">
 		<Button text="New view" color={dark ? 'dark' : undefined} />
@@ -38,6 +39,7 @@ const { dark } = Astro.props;
 		<Icon name="plus" />
 	</a>
 </ButtonList>
+<!-- END HEADER ACTIONS -->
 
 <!-- BEGIN MODAL -->
 <Modal modalId="report" size="lg" top>

shared/components/layout/HeaderActionsPhotos.astro

@@ -9,6 +9,7 @@ import Icon from '@ui/Icon.astro';
 import Button from '@ui/Button.astro';
 ---
 
+<!-- BEGIN HEADER ACTIONS -->
 <div class="d-flex">
 	<div class="me-3">
 		<div class="input-icon">
@@ -21,3 +22,4 @@ import Button from '@ui/Button.astro';
 	</div>
 	<Button text="Add event" color="primary" icon="plus" />
 </div>
+<!-- END HEADER ACTIONS -->

shared/components/layout/HeaderActionsPrint.astro

@@ -2,6 +2,8 @@
 import Icon from '@ui/Icon.astro';
 ---
 
+<!-- BEGIN HEADER ACTIONS -->
 <button type="button" class="btn btn-primary" onclick="javascript:window.print();">
 	<Icon name="printer" /> Print Invoice
 </button>
+<!-- END HEADER ACTIONS -->

shared/components/layout/HeaderActionsUsers.astro

@@ -2,7 +2,9 @@
 import Button from '@ui/Button.astro';
 ---
 
+<!-- BEGIN HEADER ACTIONS -->
 <div class="d-flex">
 	<input type="search" class="form-control d-inline-block w-9 me-3" placeholder="Search user…" />
 	<Button text="New user" color="primary" icon="plus" />
 </div>
+<!-- END HEADER ACTIONS -->

shared/components/layout/HeaderProfile.astro

@@ -8,6 +8,7 @@ import people from '@data/people.json';
 const person = people[3];
 ---
 
+<!-- BEGIN HEADER PROFILE -->
 <div class="page-header">
 	<div class="container">
 		<div class="row align-items-center">
@@ -45,3 +46,4 @@ const person = people[3];
 		</div>
 	</div>
 </div>
+<!-- END HEADER PROFILE -->

shared/components/layout/HeaderUptime.astro

@@ -5,6 +5,7 @@ import Button from '@ui/Button.astro';
 import ButtonList from '@ui/ButtonList.astro';
 ---
 
+<!-- BEGIN HEADER UPTIME -->
 <div class="page-header d-print-none">
 	<div class="container">
 		<div class="row g-3 align-items-center">
@@ -37,3 +38,4 @@ import ButtonList from '@ui/ButtonList.astro';
 		</div>
 	</div>
 </div>
+<!-- END HEADER UPTIME -->

shared/components/layout/PageHeader.astro

@@ -35,7 +35,6 @@ interface Props {
 const { title, pretitle, description, actions, class: className, icon, file, textWhite } = Astro.props;
 ---
 
-<!-- BEGIN PAGE HEADER -->
 {file === 'profile' && <HeaderProfile />}
 {file === 'uptime' && <HeaderUptime />}
 {
@@ -77,4 +76,3 @@ const { title, pretitle, description, actions, class: className, icon, file, tex
 		</div>
 	)
 }
-<!-- END PAGE HEADER -->

shared/components/marketing/MarketingNavbar.astro

@@ -7,6 +7,7 @@ import NavbarLogo from '../navbar/NavbarLogo.astro';
 const base = '..';
 ---
 
+<!-- BEGIN MARKETING NAVBAR -->
 <header class="navbar navbar-expand-lg navbar-transparent py-3">
 	<div class="container">
 		<NavbarLogo href={base} />
@@ -53,3 +54,4 @@ const base = '..';
 		</div>
 	</div>
 </header>
+<!-- END MARKETING NAVBAR -->

shared/components/marketing/hero/Browser.astro

@@ -6,6 +6,7 @@ import Icon from '@ui/Icon.astro';
 import { site } from '@shared/lib/site';
 ---
 
+<!-- BEGIN HERO -->
 <header class="hero pb-0">
 	<div class="container">
 		<h1 class="hero-title">Develop beautiful web apps with&nbsp;Tabler</h1>
@@ -50,3 +51,4 @@ import { site } from '@shared/lib/site';
 		</div>
 	</div>
 </header>
+<!-- END HERO -->

shared/components/marketing/hero/Side.astro

@@ -10,6 +10,7 @@ const strings = ['more effective', 'more efficient', 'more productive'];
 const typedId = 'typed';
 ---
 
+<!-- BEGIN HERO -->
 <header class="hero">
 	<div class="container">
 		<div class="row g-lg-8 align-items-center">
@@ -55,6 +56,8 @@ const typedId = 'typed';
 		</div>
 	</div>
 </header>
+<!-- END HERO -->
+<!-- BEGIN TYPED -->
 <script define:vars={{ typedId, strings }}>
 	function initTyped() {
 		const typed = new Typed(`#${typedId}`, {
@@ -72,3 +75,4 @@ const typedId = 'typed';
 	// finishes — this inline script (positioned mid-body) would otherwise run first.
 	document.readyState !== 'loading' ? initTyped() : document.addEventListener('DOMContentLoaded', initTyped, { once: true });
 </script>
+<!-- END TYPED -->

shared/components/modals/ChangePasswordModalContent.astro

@@ -41,6 +41,7 @@ import FormGroup from '@ui/FormGroup.astro';
 		<Button type="submit" text="Update password" color="primary" block class="mt-4" />
 	</form>
 </div>
+<!-- BEGIN CHANGE PASSWORD -->
 <script>
 	function setupPasswordToggle(inputId) {
 		const input = document.getElementById(inputId);
@@ -119,3 +120,4 @@ import FormGroup from '@ui/FormGroup.astro';
 		confirmPasswordInput.addEventListener('input', validateMatch);
 	}
 </script>
+<!-- END CHANGE PASSWORD -->

shared/components/modals/ConfirmDeleteModalContent.astro

@@ -45,6 +45,7 @@ import ModalClose from './ModalClose.astro';
 		</div>
 	</div>
 </div>
+<!-- BEGIN CONFIRM DELETE -->
 <script>
 	const checkbox = document.getElementById('confirm-delete-checkbox');
 	const deleteButton = document.getElementById('confirm-delete-button');
@@ -55,3 +56,4 @@ import ModalClose from './ModalClose.astro';
 		});
 	}
 </script>
+<!-- END CONFIRM DELETE -->

shared/components/modals/Modal.astro

@@ -38,13 +38,15 @@ const dialogClass = [
 addPageModal(
 	Astro.slots.render('default').then(
 		(content) =>
-			`<div class="${modalClass}"${style ? ` style="${style}"` : ''} id="modal-${modalId}" tabindex="-1" role="dialog" aria-hidden="${show ? 'false' : 'true'}">
+			`<!-- BEGIN MODAL -->
+<div class="${modalClass}"${style ? ` style="${style}"` : ''} id="modal-${modalId}" tabindex="-1" role="dialog" aria-hidden="${show ? 'false' : 'true'}">
 	<div class="${dialogClass}" role="document">
 		<div class="modal-content">
 ${content}
 		</div>
 	</div>
-</div>`,
+</div>
+<!-- END MODAL -->`,
 	),
 );
 ---

shared/components/navbar/Navbar.astro

@@ -89,6 +89,7 @@ const headerClass = [
 
 {sticky && <Fragment set:html="<div class='sticky-top'>" />}
 
+<!-- BEGIN NAVBAR -->
 <header
 	class:list={headerClass}
 	style={backgroundColor ? `background: ${backgroundColor}` : undefined}
@@ -129,11 +130,11 @@ const headerClass = [
 				<div class="collapse navbar-collapse" id="navbar-menu">
 					{hideSearch ? (
 						<Fragment>
-							<!-- BEGIN NAVBAR MENU -->
+							<Fragment set:html={'<!-- BEGIN NAVBAR MENU -->'} />
 							<nav aria-label="Primary">
 								<NavbarMenu sample={sample} hideIcons={hideIcons} pageMenu={pageMenu} />
 							</nav>
-							<!-- END NAVBAR MENU -->
+							<Fragment set:html={'<!-- END NAVBAR MENU -->'} />
 						</Fragment>
 					) : (
 						<div class="d-flex flex-column flex-md-row flex-fill align-items-stretch align-items-md-center">
@@ -201,5 +202,6 @@ const headerClass = [
 		</div>
 	)
 }
+<!-- END NAVBAR -->
 
 {sticky && <Fragment set:html="</div>" />}

shared/components/navbar/NavbarLogo.astro

@@ -41,17 +41,21 @@ const logoSvg = smallLogo
 {
 	header ? (
 		<Fragment>
-			<!-- BEGIN NAVBAR LOGO --><div class:list={brandClasses}>
+			<Fragment set:html={'<!-- BEGIN NAVBAR LOGO -->'} />
+			<div class:list={brandClasses}>
 				<a href={href} aria-label={site.title}>{!hideLogo && <Fragment set:html={logoSvg} />}{showTitle && 'Dashboard'}</a>
-			</div><!-- END NAVBAR LOGO -->
+			</div>
+			<Fragment set:html={'<!-- END NAVBAR LOGO -->'} />
 		</Fragment>
 	) : (
 		<Fragment>
-			<!-- BEGIN NAVBAR LOGO --><a
+			<Fragment set:html={'<!-- BEGIN NAVBAR LOGO -->'} />
+			<a
 				href={href}
 				aria-label={site.title}
 				class:list={brandClasses}
-				>{!hideLogo && <Fragment set:html={logoSvg} />}{showTitle && 'Dashboard'}</a><!-- END NAVBAR LOGO -->
+				>{!hideLogo && <Fragment set:html={logoSvg} />}{showTitle && 'Dashboard'}</a>
+			<Fragment set:html={'<!-- END NAVBAR LOGO -->'} />
 		</Fragment>
 	)
 }

shared/components/navbar/NavbarMenu.astro

@@ -65,64 +65,68 @@ const chunk = <T,>(arr: T[], size: number): T[][] => {
 			const title = longTitles ? (item['title-long'] ?? item.title) : item.title;
 
 			return (
-				<li class:list={['nav-item', active && 'active', hasChildren && 'dropdown']}>
-					<a
-						class:list={['nav-link', hasChildren && 'dropdown-toggle', item.disabled && 'disabled']}
-						href={hasChildren ? `#navbar-${key}` : `./${item.url}`}
-						data-bs-toggle={hasChildren ? 'dropdown' : undefined}
-						data-bs-auto-close={hasChildren ? (keepOpen ? 'false' : 'outside') : undefined}
-						role={hasChildren ? 'button' : undefined}
-						aria-haspopup={hasChildren ? 'true' : undefined}
-						aria-expanded={hasChildren ? (autoOpen && key === currentPage[0] ? 'true' : 'false') : undefined}
-						aria-current={active ? 'page' : undefined}
-					>
-						{!hideIcons && (
-							<span class="nav-link-icon d-md-none d-lg-inline-block">{item.icon && <Icon name={item.icon} />}</span>
-						)}
-
-						<span class="nav-link-title">{title}</span>
-
-						{item.badge && <span class="badge badge-sm bg-red text-red-fg">{item.badge}</span>}
-					</a>
-
-					{hasChildren && (
-						<div
-							class:list={[
-								'dropdown-menu',
-								item.right && 'dropdown-menu-end',
-								autoOpen && key === currentPage[0] && 'show',
-							]}
+				<Fragment>
+					<Fragment set:html={'<!-- BEGIN NAVBAR ITEM -->'} />
+					<li class:list={['nav-item', active && 'active', hasChildren && 'dropdown']}>
+						<a
+							class:list={['nav-link', hasChildren && 'dropdown-toggle', item.disabled && 'disabled']}
+							href={hasChildren ? `#navbar-${key}` : `./${item.url}`}
+							data-bs-toggle={hasChildren ? 'dropdown' : undefined}
+							data-bs-auto-close={hasChildren ? (keepOpen ? 'false' : 'outside') : undefined}
+							role={hasChildren ? 'button' : undefined}
+							aria-haspopup={hasChildren ? 'true' : undefined}
+							aria-expanded={hasChildren ? (autoOpen && key === currentPage[0] ? 'true' : 'false') : undefined}
+							aria-current={active ? 'page' : undefined}
 						>
-							{columns ? (
-								<div class="dropdown-menu-columns">
-									{columns.map((column) => (
-										<div class="dropdown-menu-column">
-											{column.map(([childKey, child]) => (
-												<NavbarMenuItem
-													level1Key={key}
-													itemKey={childKey}
-													item={child as any}
-													currentPage={currentPage}
-													keepOpen={keepOpen}
-												/>
-											))}
-										</div>
-									))}
-								</div>
-							) : (
-								children.map(([childKey, child]) => (
-									<NavbarMenuItem
-										level1Key={key}
-										itemKey={childKey}
-										item={child as any}
-										currentPage={currentPage}
-										keepOpen={keepOpen}
-									/>
-								))
+							{!hideIcons && (
+								<span class="nav-link-icon d-md-none d-lg-inline-block">{item.icon && <Icon name={item.icon} />}</span>
 							)}
-						</div>
-					)}
-				</li>
+
+							<span class="nav-link-title">{title}</span>
+
+							{item.badge && <span class="badge badge-sm bg-red text-red-fg">{item.badge}</span>}
+						</a>
+
+						{hasChildren && (
+							<div
+								class:list={[
+									'dropdown-menu',
+									item.right && 'dropdown-menu-end',
+									autoOpen && key === currentPage[0] && 'show',
+								]}
+							>
+								{columns ? (
+									<div class="dropdown-menu-columns">
+										{columns.map((column) => (
+											<div class="dropdown-menu-column">
+												{column.map(([childKey, child]) => (
+													<NavbarMenuItem
+														level1Key={key}
+														itemKey={childKey}
+														item={child as any}
+														currentPage={currentPage}
+														keepOpen={keepOpen}
+													/>
+												))}
+											</div>
+										))}
+									</div>
+								) : (
+									children.map(([childKey, child]) => (
+										<NavbarMenuItem
+											level1Key={key}
+											itemKey={childKey}
+											item={child as any}
+											currentPage={currentPage}
+											keepOpen={keepOpen}
+										/>
+									))
+								)}
+							</div>
+						)}
+					</li>
+					<Fragment set:html={'<!-- END NAVBAR ITEM -->'} />
+				</Fragment>
 			);
 		})
 	}

shared/components/navbar/NavbarMenuItem.astro

@@ -39,6 +39,7 @@ const itemClasses = [
 ]
 ---
 
+<!-- BEGIN NAVBAR ITEM -->
 {
 	hasChildren ? (
 		<div class="dropend">
@@ -85,3 +86,4 @@ const itemClasses = [
 		</a>
 	)
 }
+<!-- END NAVBAR ITEM -->

shared/components/navbar/NavbarSearch.astro

@@ -13,8 +13,10 @@ interface Props {
 const { class: className, rounded = false } = Astro.props;
 ---
 
+<!-- BEGIN NAVBAR SEARCH -->
 <div class={className}>
 	<form action="./" method="get" autocomplete="off" novalidate role="search">
 		<InputIcon prepend rounded={rounded} ariaLabel="Search in website" />
 	</form>
 </div>
+<!-- END NAVBAR SEARCH -->

shared/components/navbar/NavbarSide.astro

@@ -43,6 +43,7 @@ const {
 const githubSponsorsUrl = 'https://github.com/sponsors/codecalm';
 ---
 
+<!-- BEGIN NAVBAR ACTIONS -->
 <div class:list={['navbar-nav flex-row', className]}>
 	{
 		!condensed && (
@@ -67,3 +68,4 @@ const githubSponsorsUrl = 'https://github.com/sponsors/codecalm';
 
 	{showUser && <NavbarSideUser personId={personId} hideUsername={hideUsername} dark={dark} />}
 </div>
+<!-- END NAVBAR ACTIONS -->

shared/components/navbar/Sidebar.astro

@@ -33,6 +33,7 @@ const asideClass = [
 	.join(' ');
 ---
 
+<!-- BEGIN SIDEBAR -->
 <aside class={asideClass} data-bs-theme={dark ? 'dark' : undefined}>
 	<div class="container-fluid">
 		<NavbarToggler target="sidebar-menu" />
@@ -47,3 +48,4 @@ const asideClass = [
 		</div>
 	</div>
 </aside>
+<!-- END SIDEBAR -->

shared/layouts/BaseLayout.astro

@@ -48,6 +48,7 @@ const libJsFiles = (head: boolean) =>
 <!doctype html>
 <html lang="en" dir={rtl ? 'rtl' : undefined}>
 	<head>
+		<!-- BEGIN META -->
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
 		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
@@ -56,15 +57,16 @@ const libJsFiles = (head: boolean) =>
 
 		<link rel="icon" href={`${base}/favicon-dev.ico`} type="image/x-icon" />
 		<link rel="shortcut icon" href={`${base}/favicon-dev.ico`} type="image/x-icon" />
+		<!-- END META -->
 
 		{
 			libCssFiles.length > 0 && (
 				<Fragment>
-					<!-- BEGIN PAGE LEVEL STYLES -->
+					<Fragment set:html={'<!-- BEGIN PAGE LEVEL STYLES -->'} />
 					{libCssFiles.map((href) => (
 						<link href={href} rel="stylesheet" />
 					))}
-					<!-- END PAGE LEVEL STYLES -->
+					<Fragment set:html={'<!-- END PAGE LEVEL STYLES -->'} />
 				</Fragment>
 			)
 		}
@@ -84,11 +86,11 @@ const libJsFiles = (head: boolean) =>
 		{
 			libJsFiles(true).length > 0 && (
 				<Fragment>
-					<!-- BEGIN PAGE LIBRARIES -->
+					<Fragment set:html={'<!-- BEGIN PAGE LIBRARIES -->'} />
 					{libJsFiles(true).map((src) => (
 						<script is:inline src={src} defer />
 					))}
-					<!-- END PAGE LIBRARIES -->
+					<Fragment set:html={'<!-- END PAGE LIBRARIES -->'} />
 				</Fragment>
 			)
 		}
@@ -118,11 +120,11 @@ const libJsFiles = (head: boolean) =>
 		{
 			libJsFiles(false).length > 0 && (
 				<Fragment>
-					<!-- BEGIN PAGE LIBRARIES -->
+					<Fragment set:html={'<!-- BEGIN PAGE LIBRARIES -->'} />
 					{libJsFiles(false).map((src) => (
 						<script is:inline src={src} defer />
 					))}
-					<!-- END PAGE LIBRARIES -->
+					<Fragment set:html={'<!-- END PAGE LIBRARIES -->'} />
 				</Fragment>
 			)
 		}

shared/layouts/DefaultLayout.astro

@@ -92,7 +92,7 @@ const {
 		{
 			sidebar && (
 				<Fragment>
-					<!--  BEGIN SIDEBAR  -->
+					<Fragment set:html={'<!--  BEGIN SIDEBAR  -->'} />
 					<Sidebar
 						dark={sidebarDark}
 						end={sidebarEnd}
@@ -100,7 +100,7 @@ const {
 						breakpoint="lg"
 						pageMenu={pageMenu}
 					/>
-					<!--  END SIDEBAR  -->
+					<Fragment set:html={'<!--  END SIDEBAR  -->'} />
 				</Fragment>
 			)
 		}
@@ -108,7 +108,7 @@ const {
 		{
 			!hideTopbar && (
 				<Fragment>
-					<!-- BEGIN NAVBAR  -->
+					<Fragment set:html={'<!-- BEGIN NAVBAR  -->'} />
 					<Navbar
 						hideSearch
 						pageMenu={pageMenu}
@@ -119,7 +119,7 @@ const {
 						hideBrand={navbarHideBrand}
 						class={navbarClass}
 					/>
-					<!-- END NAVBAR  -->
+					<Fragment set:html={'<!-- END NAVBAR  -->'} />
 				</Fragment>
 			)
 		}

shared/layouts/DocsLayout.astro

@@ -123,6 +123,7 @@ const docsLinks = docs.links as DocsLink[];
 <!doctype html>
 <html lang="en">
 	<head>
+		<!-- BEGIN META -->
 		<meta charset="UTF-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
@@ -155,19 +156,40 @@ const docsLinks = docs.links as DocsLink[];
 				</Fragment>
 			)
 		}
+		<!-- END META -->
 
+		<!-- BEGIN GLOBAL MANDATORY STYLES -->
 		<link rel="stylesheet" href="/dist/css/tabler.css" />
-		{site.cssPlugins.map((plugin) => <link href={`/dist/css/tabler-${plugin}.css`} rel="stylesheet" />)}
+		<!-- END GLOBAL MANDATORY STYLES -->
 
-		{docsLibCss.map((href) => <link href={href} rel="stylesheet" />)}
+		<!-- BEGIN PLUGINS STYLES -->
+		{site.cssPlugins.map((plugin) => <link href={`/dist/css/tabler-${plugin}.css`} rel="stylesheet" />)}
+		<!-- END PLUGINS STYLES -->
+
+		{
+			docsLibCss.length > 0 && (
+				<Fragment>
+					<Fragment set:html={'<!-- BEGIN PAGE LEVEL STYLES -->'} />
+					{docsLibCss.map((href) => <link href={href} rel="stylesheet" />)}
+					<Fragment set:html={'<!-- END PAGE LEVEL STYLES -->'} />
+				</Fragment>
+			)
+		}
 
 		{/* is:inline — see MIGRATION.md (without it Astro adds data-astro-cid-*) */}
+		<!-- BEGIN CUSTOM FONT -->
 		<style is:inline>@import url('https://rsms.me/inter/inter.css');</style>
+		<!-- END CUSTOM FONT -->
+
+		<!-- BEGIN DOCS STYLES -->
 		<link rel="stylesheet" href="/css/docs.css" />
+		<!-- END DOCS STYLES -->
 	</head>
 
 	<body class="d-flex flex-column" style="background: var(--tblr-bg-surface)">
+		<!-- BEGIN GLOBAL THEME SCRIPT -->
 		<script is:inline src="/dist/js/tabler-theme.js"></script>
+		<!-- END GLOBAL THEME SCRIPT -->
 		<!-- BEGIN NAVBAR  -->
 		<header role="banner">
 			<DocsNavbar />
@@ -177,6 +199,7 @@ const docsLinks = docs.links as DocsLink[];
 		<main id="content" class="flex-fill">
 			<div class="container">
 				<div class="row g-0">
+					<!-- BEGIN DOCS MENU -->
 					<div class="col-docs d-none d-lg-block border-end">
 						<div class="py-4">
 							<div class="space-y space-y-5">
@@ -198,6 +221,7 @@ const docsLinks = docs.links as DocsLink[];
 							</div>
 						</div>
 					</div>
+					<!-- END DOCS MENU -->
 					<div class="col bg-docs-gradient">
 						<div class="py-lg-5 ps-lg-5">
 							<div class="py-6 ps-lg-6 p-xxl-6">
@@ -260,18 +284,29 @@ const docsLinks = docs.links as DocsLink[];
 							</div>
 						</div>
 					</div>
+					<!-- BEGIN DOCS TOC -->
 					<div class="col-2 d-none d-xxl-block">
 						<div class="py-6 sticky-top">
 							<DocsToc toc={toc} />
 						</div>
 					</div>
+					<!-- END DOCS TOC -->
 				</div>
 			</div>
 		</main>
 		<!-- END PAGE BODY -->
 
-		{docsLibJs.map((src) => <script is:inline src={src} />)}
+		{
+			docsLibJs.length > 0 && (
+				<Fragment>
+					<Fragment set:html={'<!-- BEGIN PAGE LIBRARIES -->'} />
+					{docsLibJs.map((src) => <script is:inline src={src} />)}
+					<Fragment set:html={'<!-- END PAGE LIBRARIES -->'} />
+				</Fragment>
+			)
+		}
 
+		<!-- BEGIN PAGE SCRIPTS -->
 		<script is:inline>
 			document.addEventListener('DOMContentLoaded', function () {
 				const elements = document.querySelectorAll('[data-clipboard-text]');
@@ -305,8 +340,14 @@ const docsLinks = docs.links as DocsLink[];
 				});
 			})
 		</script>
+		<!-- END PAGE SCRIPTS -->
 
+		<!-- BEGIN GLOBAL MANDATORY SCRIPTS -->
 		<script is:inline src="/dist/js/tabler.js"></script>
+		<!-- END GLOBAL MANDATORY SCRIPTS -->
+
+		<!-- BEGIN DOCS SCRIPTS -->
 		<script is:inline src="/js/docs.js" defer></script>
+		<!-- END DOCS SCRIPTS -->
 	</body>
 </html>

shared/layouts/ErrorLayout.astro

@@ -27,6 +27,7 @@ const header = error.header ?? 'Oops… You just found an error page';
 ---
 
 <BaseLayout title={title} bodyClass="border-top-wide border-primary">
+	<!-- BEGIN PAGE BODY -->
 	<div class="page page-center">
 		<div class="container-tight py-4">
 			<Empty
@@ -40,4 +41,5 @@ const header = error.header ?? 'Oops… You just found an error page';
 			/>
 		</div>
 	</div>
+	<!-- END PAGE BODY -->
 </BaseLayout>

shared/layouts/PayLayout.astro

@@ -15,6 +15,7 @@ const { title, pageLibs, bodyClass } = Astro.props;
 ---
 
 <BaseLayout title={title} pageLibs={pageLibs} bodyClass={bodyClass}>
+	<!-- BEGIN NAVBAR  -->
 	<header class="navbar">
 		<div class="container-fluid">
 			<NavbarLogo smallLogo />
@@ -24,8 +25,11 @@ const { title, pageLibs, bodyClass } = Astro.props;
 			</div>
 		</div>
 	</header>
+	<!-- END NAVBAR  -->
 
+	<!-- BEGIN PAGE BODY -->
 	<div class="page">
 		<slot />
 	</div>
+	<!-- END PAGE BODY -->
 </BaseLayout>

shared/layouts/ProseLayout.astro

@@ -16,6 +16,7 @@ const { title, pageHeader, pageMenu } = Astro.props;
 ---
 
 <DefaultLayout title={title} pageHeader={pageHeader} pageMenu={pageMenu}>
+	<!-- BEGIN PROSE -->
 	<div class="row justify-content-center">
 		<div class="col-lg-10 col-xl-9">
 			<Card size="lg">
@@ -25,4 +26,5 @@ const { title, pageHeader, pageMenu } = Astro.props;
 			</Card>
 		</div>
 	</div>
+	<!-- END PROSE -->
 </DefaultLayout>

shared/layouts/RedirectLayout.astro

@@ -29,13 +29,17 @@ const target = isAbsolute ? url : `${base}${url}`;
 
 <!doctype html>
 <html lang="en-US">
+	<!-- BEGIN META -->
 	<meta charset="utf-8" />
 	<title>Redirecting…</title>
 	<link rel="canonical" href={target} />
 	<meta http-equiv="refresh" content={`0; url=${target}`} />
 	<meta name="robots" content="noindex" />
+	<!-- END META -->
 	<noscript><a href={target}>Click here if you are not redirected.</a></noscript>
+	<!-- BEGIN REDIRECT -->
 	<script define:vars={{ target }}>
 		location = target;
 	</script>
+	<!-- END REDIRECT -->
 </html>

shared/layouts/SettingsLayout.astro

@@ -16,9 +16,9 @@ const { active } = Astro.props;
 ---
 
 <DefaultLayout title="Settings" pageHeader="Account Settings">
-	<!-- BEGIN PAGE BODY -->
 	<div class="card">
 		<div class="row g-0">
+			<!-- BEGIN SETTINGS NAV -->
 			<div class="col-12 col-md-3 border-end">
 				<div class="card-body">
 					<Subheader as="h4">Business settings</Subheader>
@@ -50,10 +50,10 @@ const { active } = Astro.props;
 					</ListGroup>
 				</div>
 			</div>
+			<!-- END SETTINGS NAV -->
 			<div class="col-12 col-md-9 d-flex flex-column">
 				<slot />
 			</div>
 		</div>
 	</div>
-	<!-- END PAGE BODY -->
 </DefaultLayout>

shared/layouts/SingleLayout.astro

@@ -12,6 +12,7 @@ const { title, containerSize = 'tight', hideLogo } = Astro.props;
 ---
 
 <BaseLayout title={title}>
+	<!-- BEGIN PAGE BODY -->
 	<div class="page page-center">
 		<div class={`container container-${containerSize} py-4`}>
 			{
@@ -25,4 +26,5 @@ const { title, containerSize = 'tight', hideLogo } = Astro.props;
 			<slot />
 		</div>
 	</div>
+	<!-- END PAGE BODY -->
 </BaseLayout>

shared/ui/AdvancedTable.astro

@@ -171,6 +171,7 @@ const perPageDefault = perPage[1];
 	</div>
 </div>
 
+<!-- BEGIN ADVANCED TABLE -->
 <script define:vars={{ tableId, advancedTable, perPageDefault }}>
 	// Astro wraps define:vars scripts in an IIFE, so this needs an explicit window
 	// assignment to stay reachable from the onclick="setPageListItems(event)" markup below.
@@ -203,3 +204,4 @@ const perPageDefault = perPage[1];
 
 	document.readyState !== 'loading' ? initAdvancedTable() : document.addEventListener('DOMContentLoaded', initAdvancedTable, { once: true });
 </script>
+<!-- END ADVANCED TABLE -->

shared/ui/Chart.astro

@@ -43,6 +43,7 @@ const elementId = `chart-${id}`;
 		<Fragment>
 			<div id={elementId} class:list={['position-relative', className]} />
 			<Fragment set:html={style} />
+			<!-- BEGIN CHART -->
 			<script define:vars={{ chartKey, elementId, config, xFormatterExpr }}>
 				window.tabler_chart ??= {};
 
@@ -60,6 +61,7 @@ const elementId = `chart-${id}`;
 
 				document.readyState !== 'loading' ? initChart() : document.addEventListener('DOMContentLoaded', initChart, { once: true });
 			</script>
+			<!-- END CHART -->
 		</Fragment>
 	)
 }

shared/ui/ChartRadial.astro

@@ -16,6 +16,7 @@ const fixedTitle = title.toUpperCase();
 ---
 
 <div id={chartId} class={`position-relative ${className}`}></div>
+<!-- BEGIN CHART RADIAL -->
 <script define:vars={{ chartId, height, value, fixedTitle }}>
 	function initRadialChart() {
 		window.tabler_chart ??= {};
@@ -65,4 +66,5 @@ const fixedTitle = title.toUpperCase();
 	}
 
 	document.readyState !== 'loading' ? initRadialChart() : document.addEventListener('DOMContentLoaded', initRadialChart, { once: true });
-</script>
+</script>
+<!-- END CHART RADIAL -->

shared/ui/ChartSparkline.astro

@@ -74,6 +74,8 @@ const chartOptions = id
 {id && <div class:list={classes} id={chartKey} />}
 {
 	id && (
+		<Fragment>
+		<Fragment set:html={'<!-- BEGIN CHART SPARKLINE -->'} />
 		<script define:vars={{ chartKey, chartOptions }}>
 			function initSparkline() {
 				window.tabler_chart ??= {};
@@ -82,5 +84,7 @@ const chartOptions = id
 
 			document.readyState !== 'loading' ? initSparkline() : document.addEventListener('DOMContentLoaded', initSparkline, { once: true });
 		</script>
+		<Fragment set:html={'<!-- END CHART SPARKLINE -->'} />
+		</Fragment>
 	)
 }

shared/ui/Colorpicker.astro

@@ -36,6 +36,7 @@ const colorpickerSelector = `#colorpicker-${id}`;
 	id={colorpickerId}
 	value={value}
 />
+<!-- BEGIN COLORPICKER -->
 <script define:vars={{ colorpickerId, colorpickerSelector, alpha, format, swatchesOnly, swatchProps }}>
 	function initColorpicker() {
 		window.tabler_colorpicker ??= {};
@@ -55,3 +56,4 @@ const colorpickerSelector = `#colorpicker-${id}`;
 
 	document.readyState !== 'loading' ? initColorpicker() : document.addEventListener('DOMContentLoaded', initColorpicker, { once: true });
 </script>
+<!-- END COLORPICKER -->

shared/ui/Datepicker.astro

@@ -68,6 +68,8 @@ const datepickerId = id ? `datepicker-${id}` : undefined;
 }
 {
 	id && (
+		<Fragment>
+		<Fragment set:html={'<!-- BEGIN DATEPICKER -->'} />
 		<script define:vars={{ datepickerId, chevronLeft, chevronRight, inline }}>
 			function initDatepicker() {
 				window.tabler_datepicker ??= {};
@@ -85,5 +87,7 @@ const datepickerId = id ? `datepicker-${id}` : undefined;
 
 			document.readyState !== 'loading' ? initDatepicker() : document.addEventListener('DOMContentLoaded', initDatepicker, { once: true });
 		</script>
+		<Fragment set:html={'<!-- END DATEPICKER -->'} />
+		</Fragment>
 	)
 }

shared/ui/Dropzone.astro

@@ -31,6 +31,7 @@ const dropzoneSelector = `#dropzone-${id}`;
 		)
 	}
 </form>
+<!-- BEGIN DROPZONE -->
 <script define:vars={{ dropzoneId, dropzoneSelector }}>
 	window.tabler_dropzone ??= {};
 
@@ -40,3 +41,4 @@ const dropzoneSelector = `#dropzone-${id}`;
 
 	document.readyState !== 'loading' ? initDropzone() : document.addEventListener('DOMContentLoaded', initDropzone, { once: true });
 </script>
+<!-- END DROPZONE -->

shared/ui/Fullcalendar.astro

@@ -37,6 +37,7 @@ const sampleEventData = sampleEvents
 ---
 
 <div id={calendarId}></div>
+<!-- BEGIN FULLCALENDAR -->
 <script define:vars={{ calendarId, sampleEventData }}>
 	function initCalendar() {
 		const calendarEl = document.getElementById(calendarId);
@@ -55,3 +56,4 @@ const sampleEventData = sampleEvents
 
 	document.readyState !== 'loading' ? initCalendar() : document.addEventListener('DOMContentLoaded', initCalendar, { once: true });
 </script>
+<!-- END FULLCALENDAR -->

shared/ui/Illustration.astro

@@ -25,4 +25,6 @@ let illustration = source.replaceAll('<svg ', replaceTo);
 illustration = illustration.replaceAll('width="800" height="600"', `height="${height}"`);
 ---
 
+<!-- BEGIN ILLUSTRATION -->
 <Fragment set:html={illustration} />
+<!-- END ILLUSTRATION -->

shared/ui/InlinePlayer.astro

@@ -24,6 +24,8 @@ const playerSelector = `#player-${id}`;
 }
 {
 	enabled && (
+		<Fragment>
+		<Fragment set:html={'<!-- BEGIN PLAYER -->'} />
 		<script define:vars={{ playerId, playerSelector }}>
 			window.tabler_player ??= {};
 
@@ -33,5 +35,7 @@ const playerSelector = `#player-${id}`;
 
 			document.readyState !== 'loading' ? initPlayer() : document.addEventListener('DOMContentLoaded', initPlayer, { once: true });
 		</script>
+		<Fragment set:html={'<!-- END PLAYER -->'} />
+		</Fragment>
 	)
 }

shared/ui/Map.astro

@@ -47,6 +47,8 @@ const ratioClass = data?.ratio ?? ratio ?? '16x9';
 }
 {
 	data && (
+		<Fragment>
+		<Fragment set:html={'<!-- BEGIN MAP -->'} />
 		<script define:vars={{ mapboxKey: site.mapboxKey, mapContainerId, style, zoom, center, markers }}>
 			window.tabler_map ??= {};
 
@@ -68,5 +70,7 @@ const ratioClass = data?.ratio ?? ratio ?? '16x9';
 
 			document.readyState !== 'loading' ? initMap() : document.addEventListener('DOMContentLoaded', initMap, { once: true });
 		</script>
+		<Fragment set:html={'<!-- END MAP -->'} />
+		</Fragment>
 	)
 }

shared/ui/MapVector.astro

@@ -95,6 +95,7 @@ const mapOptions = data
 					<div id={mapKey} class="w-100 h-100" />
 				</div>
 			</div>
+			<!-- BEGIN MAP VECTOR -->
 			<script define:vars={{ mapKey, mapSelector, mapName: data.map, mapOptions }}>
 				window.tabler_map_vector ??= {};
 
@@ -115,6 +116,7 @@ const mapOptions = data
 
 				document.readyState !== 'loading' ? initMapVector() : document.addEventListener('DOMContentLoaded', initMapVector, { once: true });
 			</script>
+			<!-- END MAP VECTOR -->
 		</Fragment>
 	)
 }

shared/ui/Offcanvas.astro

@@ -17,9 +17,11 @@ interface Props {
 const { direction, size, narrow, show, class: className, ...rest } = Astro.props;
 ---
 
+<!-- BEGIN OFFCANVAS -->
 <div
 	class:list={[size ? `offcanvas-${size}` : 'offcanvas', direction && `offcanvas-${direction}`, narrow && 'offcanvas-narrow', show && 'show', className]}
 	{...rest}
 >
 	<slot />
 </div>
+<!-- END OFFCANVAS -->

shared/ui/Range.astro

@@ -38,6 +38,8 @@ const rangeId = `range-${id}`;
 }
 {
 	id && (
+		<Fragment>
+		<Fragment set:html={'<!-- BEGIN RANGE -->'} />
 		<script define:vars={{ rangeId, startValue, connectValue, step, min, max }}>
 			function initRange() {
 				window.noUiSlider &&
@@ -51,5 +53,7 @@ const rangeId = `range-${id}`;
 
 			document.readyState !== 'loading' ? initRange() : document.addEventListener('DOMContentLoaded', initRange, { once: true });
 		</script>
+		<Fragment set:html={'<!-- END RANGE -->'} />
+		</Fragment>
 	)
 }

shared/ui/Rating.astro

@@ -44,6 +44,7 @@ const ratingKey = `rating-${id}`;
 	<option value="2" selected={value === 2}>Poor</option>
 	<option value="1" selected={value === 1}>Terrible</option>
 </select>
+<!-- BEGIN RATING -->
 <script define:vars={{ ratingSelector, ratingKey, star }}>
 	window.tabler_rating ??= {};
 
@@ -61,3 +62,4 @@ const ratingKey = `rating-${id}`;
 
 	document.readyState !== 'loading' ? initRating() : document.addEventListener('DOMContentLoaded', initRating, { once: true });
 </script>
+<!-- END RATING -->

shared/ui/Select.astro

@@ -124,6 +124,8 @@ const selectId = id ? `select-${id}` : undefined;
 }
 {
 	id && (
+		<Fragment>
+		<Fragment set:html={'<!-- BEGIN SELECT -->'} />
 		<script define:vars={{ selectId, showSearch }}>
 			function initSelect() {
 				window.tabler_select ??= {};
@@ -149,5 +151,7 @@ const selectId = id ? `select-${id}` : undefined;
 
 			document.readyState !== 'loading' ? initSelect() : document.addEventListener('DOMContentLoaded', initSelect, { once: true });
 		</script>
+		<Fragment set:html={'<!-- END SELECT -->'} />
+		</Fragment>
 	)
 }

shared/ui/Signature.astro

@@ -71,7 +71,8 @@ ${clearSnippet}
 ${extraSnippet}
     }
   });
-</script>`;
+</script>
+<!-- END SIGNATURE PAD -->`;
 ---
 
 <div class:list={signatureClass}>

shared/ui/ThemeSettings.astro

@@ -16,6 +16,7 @@ const defaults = {
 };
 ---
 
+<!-- BEGIN THEME SETTINGS -->
 <div class="settings">
 	<a
 		href="#"
@@ -174,4 +175,5 @@ const defaults = {
 		</div>
 	</form>
 </div>
+<!-- END THEME SETTINGS -->
 

shared/ui/Wysiwyg.astro

@@ -12,6 +12,7 @@ const selector = `#hugerte-${id}`;
 <form method="post">
 	<textarea id={`hugerte-${id}`}>Hello, <b>Tabler</b>!</textarea>
 </form>
+<!-- BEGIN WYSIWYG -->
 <script define:vars={{ selector }}>
 	function initWysiwyg() {
 		const options = {
@@ -45,3 +46,4 @@ const selector = `#hugerte-${id}`;
 
 	document.readyState !== 'loading' ? initWysiwyg() : document.addEventListener('DOMContentLoaded', initWysiwyg, { once: true });
 </script>
+<!-- END WYSIWYG -->

turbo.json

@@ -23,6 +23,10 @@
       "dependsOn": [
         "^build"
       ],
+      "inputs": [
+        "$TURBO_DEFAULT$",
+        "$TURBO_ROOT$/shared/**"
+      ],
       "outputs": [
         "dist/**",
         "demo/**",
@@ -30,6 +34,19 @@
       ],
       "cache": true
     },
+    "@tabler/docs#build": {
+      "dependsOn": [
+        "^build"
+      ],
+      "inputs": [
+        "$TURBO_DEFAULT$",
+        "$TURBO_ROOT$/shared/**"
+      ],
+      "outputs": [
+        "dist/**"
+      ],
+      "cache": true
+    },
     "dev": {
       "cache": false,
       "persistent": true