trying to port web app starter from PHP

site/examples/uce-starter/README.md

@@ -0,0 +1,21 @@
+# UCE Starter
+
+`site/examples/uce-starter/` is a UCE-native port of the PHP `web-app-starter/`.
+
+It keeps the PHP starter around as reference while mirroring the same broad structure:
+
+- `index.uce` as the front controller
+- `views/` for routed page content
+- `components/` for reusable UI building blocks
+- `themes/`, `js/`, and `img/` for static assets
+
+This port intentionally leans on UCE's component layer rather than treating components as a compatibility shim. The page shell, nav/footer chrome, theme switcher, dashboard blocks, workspace primitives, and marketing sections are all rendered through `component()`.
+
+The example uses query-string routing in the same style as the PHP starter:
+
+- `index.uce`
+- `index.uce?page1`
+- `index.uce?themes&theme=portal-dark`
+- `index.uce?workspace/projects`
+
+The demo account pages use a small file-backed user store under `/tmp/uce-starter-data/` with session-based login state.

site/examples/uce-starter/components/auth/oauth-client.uce

@@ -0,0 +1,100 @@
+#load "../../lib/app.uce"
+
+RENDER(Request& context)
+{
+	String title = first(context.call["title"].to_string(), "Sign in with OAuth");
+	String subtitle = first(context.call["subtitle"].to_string(), "Choose your preferred authentication method");
+	String callback_url = first(context.call["callback_url"].to_string(), starter_link("auth/callback", context));
+
+	DTree services = context.call["services"];
+	if(services.get_type_name() != "array" || services["google"]["name"].to_string() == "")
+	{
+		services["google"]["name"] = "Google";
+		services["google"]["color"] = "#4285f4";
+		services["google"]["icon"] = "fab fa-google";
+		services["google"]["scope"] = "openid email profile";
+		services["google"]["auth_url"] = "https://accounts.google.com/o/oauth2/v2/auth";
+
+		services["github"]["name"] = "GitHub";
+		services["github"]["color"] = "#333333";
+		services["github"]["icon"] = "fab fa-github";
+		services["github"]["scope"] = "user:email";
+		services["github"]["auth_url"] = "https://github.com/login/oauth/authorize";
+
+		services["discord"]["name"] = "Discord";
+		services["discord"]["color"] = "#5865f2";
+		services["discord"]["icon"] = "fab fa-discord";
+		services["discord"]["scope"] = "identify email";
+		services["discord"]["auth_url"] = "https://discord.com/api/oauth2/authorize";
+
+		services["twitch"]["name"] = "Twitch";
+		services["twitch"]["color"] = "#9146ff";
+		services["twitch"]["icon"] = "fab fa-twitch";
+		services["twitch"]["scope"] = "user:read:email";
+		services["twitch"]["auth_url"] = "https://id.twitch.tv/oauth2/authorize";
+	}
+
+	<>
+		<form class="card">
+			<div>
+				<h2><?= title ?></h2>
+				<label><?= subtitle ?></label>
+			</div>
+			<? services.each([&](DTree service, String service_key) {
+				String client_id = context.call[service_key + "_client_id"].to_string();
+				String handler_name = starter_safe_name(service_key);
+				String service_name = service["name"].to_string();
+				String scope = service["scope"].to_string();
+				String auth_url = service["auth_url"].to_string();
+				String store_url = starter_link("auth/store-oauth-session", context);
+				?><div data-service="<?= service_key ?>">
+					<button type="button" class="btn" onclick='initiateOAuth_<?= handler_name ?>()'>
+						<i class="<?= service["icon"].to_string() ?>" style="color: <?= service["color"].to_string() ?>"></i>
+						Continue with <?= service_name ?>
+					</button>
+					<div class="loading" style="display: none;"><span>Connecting...</span></div>
+					<label>Secure authentication via <?= service_name ?></label>
+					<script>
+						window.initiateOAuth_<?= handler_name ?> = function () {
+							const wrapper = document.querySelector('[data-service="<?= service_key ?>"]');
+							if (!wrapper) return;
+							const button = wrapper.querySelector('.btn');
+							const loading = wrapper.querySelector('.loading');
+							if (button) button.style.display = 'none';
+							if (loading) loading.style.display = 'block';
+
+							const clientId = <?: starter_json_string(client_id) ?>;
+							if (!clientId || clientId.indexOf('YOUR_') === 0) {
+								alert('<?= service_name ?> OAuth is not configured yet.');
+								if (button) button.style.display = '';
+								if (loading) loading.style.display = 'none';
+								return;
+							}
+
+							const state = btoa(Math.random().toString(36).substring(2) + Math.random().toString(36).substring(2)).replace(/[^a-zA-Z0-9]/g, '');
+							const params = new URLSearchParams({
+								client_id: clientId,
+								redirect_uri: <?: starter_json_string(callback_url) ?>,
+								scope: <?: starter_json_string(scope) ?>,
+								response_type: 'code',
+								state: state
+							});
+
+							sessionStorage.setItem('oauth_state', state);
+							sessionStorage.setItem('oauth_service', <?: starter_json_string(service_key) ?>);
+
+							fetch(<?: starter_json_string(store_url) ?>, {
+								method: 'POST',
+								headers: {'Content-Type': 'application/json'},
+								body: JSON.stringify({oauth_service: <?: starter_json_string(service_key) ?>, oauth_state: state})
+							}).catch(console.error).finally(() => {
+								window.location.href = <?: starter_json_string(auth_url) ?> + '?' + params.toString();
+							});
+						};
+					</script>
+				</div><?
+			}); ?>
+			<div class="banner" id="oauth-status" style="display: none;"></div>
+		</form>
+	</>
+}

site/examples/uce-starter/components/basic/cookie-consent.uce

@@ -0,0 +1,114 @@
+#load "../../lib/app.uce"
+
+RENDER(Request& context)
+{
+	starter_boot(context);
+
+	<>
+		<div id="cookie-consent" style="
+			position: fixed;
+			bottom: 0;
+			left: 0;
+			right: 0;
+			background: var(--surface);
+			border-top: 1px solid var(--border);
+			box-shadow: var(--shadow-xl);
+			z-index: 9998;
+			padding: 1.5rem;
+			transform: translateY(100%);
+			transition: transform 0.3s ease;
+			backdrop-filter: blur(10px);
+			-webkit-backdrop-filter: blur(10px);
+		" aria-live="polite">
+			<div style="
+				max-width: 1200px;
+				margin: 0 auto;
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				gap: 1.5rem;
+				flex-wrap: wrap;
+			">
+				<div style="flex: 1; min-width: 300px;">
+					<div style="
+						display: flex;
+						align-items: center;
+						gap: 0.75rem;
+						margin-bottom: 0.5rem;
+					">
+						<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke='var(--primary)' stroke-width="2" style="flex-shrink: 0;">
+							<path d="M12 2C13.1 2 14 2.9 14 4C14 5.1 13.1 6 12 6C10.9 6 10 5.1 10 4C10 2.9 10.9 2 12 2M21 9V7L15 1L13 3L15 5H3V21A2 2 0 0 0 5 23H19A2 2 0 0 0 21 21V11L19 13V20H5V7H21M9 11V13H7V11H9M13 11V13H11V11H13M17 11V13H15V11H17M9 15V17H7V15H9M13 15V17H11V15H13M17 15V17H15V15H17Z"/>
+						</svg>
+						<h3 style="margin: 0; font-size: 1.1rem; font-weight: 600; color: var(--text-primary);">Cookie Notice</h3>
+					</div>
+					<p style="margin: 0; color: var(--text-secondary); font-size: 0.9rem; line-height: 1.5;">
+						We use cookies to enhance your browsing experience, serve personalized content, and analyze our traffic.
+						<a href="#" id="cookie-policy-link" style="color: var(--primary); text-decoration: none;">Learn more</a>
+					</p>
+				</div>
+				<div style="display: flex; gap: 0.75rem; flex-shrink: 0; align-items: center;">
+					<button id="cookie-reject" style="padding: 0.75rem 1.5rem; border: 1px solid var(--border); background: transparent; color: var(--text-secondary); border-radius: 0.5rem; cursor: pointer;">Reject All</button>
+					<button id="cookie-accept" style="padding: 0.75rem 1.5rem; border: 1px solid var(--primary); background: var(--primary); color: white; border-radius: 0.5rem; cursor: pointer;">Accept All</button>
+				</div>
+			</div>
+		</div>
+		<script>
+		(function() {
+			let cookieConsent = document.getElementById('cookie-consent');
+			let acceptButton = document.getElementById('cookie-accept');
+			let rejectButton = document.getElementById('cookie-reject');
+			let policyLink = document.getElementById('cookie-policy-link');
+			if (!cookieConsent) return;
+
+			let COOKIE_NAME = 'cookie_consent';
+			let COOKIE_EXPIRY_DAYS = 365;
+
+			function setCookie(name, value, days) {
+				let expires = new Date();
+				expires.setTime(expires.getTime() + (days * 24 * 60 * 60 * 1000));
+				document.cookie = name + '=' + value + ';expires=' + expires.toUTCString() + ';path=/;SameSite=Lax';
+			}
+
+			function getCookie(name) {
+				let nameEQ = name + '=';
+				let ca = document.cookie.split(';');
+				for (let i = 0; i < ca.length; i++) {
+					let c = ca[i];
+					while (c.charAt(0) === ' ') c = c.substring(1, c.length);
+					if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
+				}
+				return null;
+			}
+
+			function hideBanner() {
+				cookieConsent.style.transform = 'translateY(100%)';
+				setTimeout(() => {
+					cookieConsent.style.display = 'none';
+				}, 300);
+			}
+
+			let existingConsent = getCookie(COOKIE_NAME);
+			if (!existingConsent) {
+				setTimeout(() => {
+					cookieConsent.style.transform = 'translateY(0)';
+				}, 1);
+			}
+
+			acceptButton.addEventListener('click', function() {
+				setCookie(COOKIE_NAME, 'accepted', COOKIE_EXPIRY_DAYS);
+				hideBanner();
+			});
+
+			rejectButton.addEventListener('click', function() {
+				setCookie(COOKIE_NAME, 'rejected', COOKIE_EXPIRY_DAYS);
+				hideBanner();
+			});
+
+			policyLink.addEventListener('click', function(e) {
+				e.preventDefault();
+				window.open('https://example.com/privacy-policy', '_blank');
+			});
+		}());
+		</script>
+	</>
+}

site/examples/uce-starter/components/data/widgets.uce

@@ -0,0 +1,276 @@
+#load "../../lib/app.uce"
+
+String data_format_bytes(String raw, bool disk = false)
+{
+	if(trim(raw) == "")
+		return("--");
+	StringList units;
+	units.push_back("B");
+	units.push_back("KB");
+	units.push_back("MB");
+	units.push_back("GB");
+	units.push_back("TB");
+	units.push_back("PB");
+	f64 value = atof(raw.c_str());
+	u32 unit_index = 0;
+	while((value >= 1024.0 || value <= -1024.0) && unit_index < units.size() - 1)
+	{
+		value /= 1024.0;
+		unit_index += 1;
+	}
+	u32 decimals = disk ? (unit_index >= 4 ? 2 : (unit_index >= 1 ? 1 : 0)) : (unit_index == 0 ? 0 : 1);
+	char buf[64];
+	snprintf(buf, sizeof(buf), ("%." + std::to_string(decimals) + "f").c_str(), value);
+	return(String(buf) + " " + units[unit_index]);
+}
+
+DTree data_format_value(DTree value, DTree row, DTree column)
+{
+	DTree result;
+	String format = column["format"].to_string();
+	String raw = value.to_string();
+	String sort_value = raw;
+	String display_value = raw;
+	if(format == "number")
+	{
+		display_value = raw;
+	}
+	else if(format == "bytes")
+	{
+		display_value = data_format_bytes(raw, false);
+	}
+	else if(format == "disk-bytes")
+	{
+		display_value = data_format_bytes(raw, true);
+	}
+	else if(format == "percent")
+	{
+		display_value = raw + "%";
+	}
+	else if(format == "duration-ms")
+	{
+		f64 number = atof(raw.c_str());
+		if(number >= 1000.0)
+		{
+			char buf[64];
+			snprintf(buf, sizeof(buf), number >= 10000.0 ? "%.0f s" : "%.1f s", number / 1000.0);
+			display_value = buf;
+		}
+		else
+		{
+			char buf[64];
+			snprintf(buf, sizeof(buf), number >= 100.0 ? "%.0f ms" : "%.1f ms", number);
+			display_value = buf;
+		}
+	}
+	else if(format == "bool")
+	{
+		bool on = raw == "1" || to_lower(raw) == "true" || to_lower(raw) == "yes";
+		display_value = on ? "Yes" : "No";
+		sort_value = on ? "1" : "0";
+	}
+	result["display"] = display_value;
+	result["sort"] = sort_value;
+	return(result);
+}
+
+RENDER:SUMMARY_METRICS(Request& context)
+{
+	String title = context.call["title"].to_string();
+	String subtitle = context.call["subtitle"].to_string();
+
+	<>
+		<div class="dashboard-panel">
+			<? if(title != "" || subtitle != "") { ?>
+				<div class="dashboard-panel-header">
+					<? if(title != "") { ?><h2><?= title ?></h2><? } ?>
+					<? if(subtitle != "") { ?><p><?= subtitle ?></p><? } ?>
+				</div>
+			<? } ?>
+			<div class="dashboard-stat-grid">
+				<? context.call["items"].each([&](DTree item, String key) {
+					String tone = first(item["tone"].to_string(), "info");
+					String href = item["href"].to_string();
+					String tag = href != "" ? "a" : "div";
+					?><<?= tag ?> class="dashboard-stat-card tone-<?= tone ?>"<?= href != "" ? " href=\"" + html_escape(href) + "\"" : "" ?>>
+						<div class="dashboard-stat-label"><?= first(item["label"].to_string(), "Metric") ?></div>
+						<div class="dashboard-stat-value"><?= first(item["value"].to_string(), "--") ?></div>
+						<? if(item["meta"].to_string() != "") { ?><div class="dashboard-stat-meta"><?= item["meta"].to_string() ?></div><? } ?>
+					</<?= tag ?>><?
+				}); ?>
+			</div>
+		</div>
+	</>
+}
+
+RENDER:TIMESERIES_CHART(Request& context)
+{
+	starter_register_js("js/u-format.js", context);
+	starter_register_js("js/u-timeseries-chart.js", context);
+
+	String chart_id = first(context.call["id"].to_string(), "ts-chart-" + std::to_string((u64)time()));
+	String canvas_id = chart_id + "-canvas";
+	String title = context.call["title"].to_string();
+	String subtitle = context.call["subtitle"].to_string();
+	s32 height = std::max(180, (s32)int_val(first(context.call["height"].to_string(), "320")));
+	String x_axis_label = first(context.call["x_axis_label"].to_string(), "Time");
+	String y_axis_left_label = first(context.call["y_axis_left_label"].to_string(), "Value");
+	String y_axis_right_label = context.call["y_axis_right_label"].to_string();
+	String y_axis_left_format = first(context.call["y_axis_left_format"].to_string(), "number");
+	String y_axis_right_format = first(context.call["y_axis_right_format"].to_string(), "number");
+
+	<>
+		<div class="dashboard-panel">
+			<? if(title != "" || subtitle != "") { ?>
+				<div class="dashboard-panel-header">
+					<? if(title != "") { ?><h2><?= title ?></h2><? } ?>
+					<? if(subtitle != "") { ?><p><?= subtitle ?></p><? } ?>
+				</div>
+			<? } ?>
+			<canvas id="<?= canvas_id ?>" class="dashboard-chart-canvas" style="height: <?= std::to_string(height) ?>px"></canvas>
+		</div>
+		<script>
+		(function () {
+			if (typeof UTimeSeriesChart === 'undefined') return;
+			var chart = new UTimeSeriesChart(<?: starter_json_string(canvas_id) ?>, {
+				xAxisLabel: <?: starter_json_string(x_axis_label) ?>,
+				yAxisLeftLabel: <?: starter_json_string(y_axis_left_label) ?>,
+				yAxisRightLabel: <?: starter_json_string(y_axis_right_label) ?>,
+				yAxisLeftFormat: <?: starter_json_string(y_axis_left_format) ?>,
+				yAxisRightFormat: <?: starter_json_string(y_axis_right_format) ?>
+			});
+			chart.setData(<?= json_encode(context.call["series"]) ?>, <?= json_encode(context.call["x_labels"]) ?>);
+			window[<?: starter_json_string("chart_" + chart_id) ?>] = chart;
+		}());
+		</script>
+	</>
+}
+
+RENDER:SORTABLE_TABLE(Request& context)
+{
+	starter_register_js("js/u-format.js", context);
+	starter_register_js("js/u-sortable-table.js", context);
+
+	String table_id = first(context.call["id"].to_string(), "sortable-table-" + std::to_string((u64)time()));
+	String title = context.call["title"].to_string();
+	String subtitle = context.call["subtitle"].to_string();
+	String empty_label = first(context.call["empty_label"].to_string(), "No data available");
+
+	DTree init_options;
+	init_options["storageKey"] = first(context.call["storage_key"].to_string(), "starter.sort." + table_id);
+	if(context.call["sort"]["column"].to_string() != "")
+	{
+		init_options["initialSort"]["column"] = context.call["sort"]["column"];
+		init_options["initialSort"]["direction"] = first(context.call["sort"]["direction"].to_string(), "asc");
+	}
+
+	<>
+		<div class="dashboard-panel">
+			<? if(title != "" || subtitle != "") { ?>
+				<div class="dashboard-panel-header">
+					<? if(title != "") { ?><h2><?= title ?></h2><? } ?>
+					<? if(subtitle != "") { ?><p><?= subtitle ?></p><? } ?>
+				</div>
+			<? } ?>
+			<div class="dashboard-table-wrap">
+				<table id="<?= table_id ?>" class="u-sortable-table">
+					<thead>
+						<tr>
+							<? context.call["columns"].each([&](DTree column, String key) {
+								String align = first(column["align"].to_string(), "left");
+								bool sortable = column["sortable"].to_string() == "" || column["sortable"].to_string() == "1";
+								?><th scope="col" class="align-<?= align ?>"<?= sortable ? "" : " data-sortable=\"false\"" ?>><?= first(column["label"].to_string(), column["key"].to_string(), "Column") ?></th><?
+							}); ?>
+						</tr>
+					</thead>
+					<tbody>
+						<? if(context.call["rows"].get_type_name() != "array" || context.call["rows"]["0"].get_type_name() != "array") { ?>
+							<tr data-empty-row="1"><td colspan="<?= context.call["columns"]._map.size() == 0 ? "1" : std::to_string(context.call["columns"]._map.size()) ?>" class="muted"><?= empty_label ?></td></tr>
+						<? } ?>
+						<? context.call["rows"].each([&](DTree row, String key) {
+							if(row.get_type_name() != "array")
+								return;
+							?><tr><?
+							context.call["columns"].each([&](DTree column, String ckey) {
+								String col_key = column["key"].to_string();
+								DTree formatted = data_format_value(row[col_key], row, column);
+								?><td class="align-<?= first(column["align"].to_string(), "left") ?>" data-sort-value="<?= formatted["sort"].to_string() ?>"><?= formatted["display"].to_string() ?></td><?
+							});
+							?></tr><?
+						}); ?>
+					</tbody>
+				</table>
+			</div>
+		</div>
+		<script>
+		(function () {
+			if (typeof USortableTable === 'undefined') return;
+			USortableTable.init(<?: starter_json_string(table_id) ?>, <?= json_encode(init_options) ?>);
+		}());
+		</script>
+	</>
+}
+
+RENDER:DATA_TABLE(Request& context)
+{
+	String table_id = first(context.call["id"].to_string(), "data-grid-" + std::to_string((u64)time()));
+	starter_register_js("js/ag-grid/ag-grid-community.min.js", context);
+	starter_register_css("js/ag-grid/ag-grid.css", context);
+	starter_register_css("js/ag-grid/ag-theme-alpine.css", context);
+
+	DTree columns = context.call["columns"];
+	if((columns.get_type_name() != "array" || columns["0"]["field"].to_string() == "") &&
+		context.call["items"]["0"].get_type_name() == "array")
+	{
+		context.call["items"]["0"].each([&](DTree value, String key) {
+			DTree col;
+			col["field"] = key;
+			col["headerName"] = key;
+			col["sortable"].set_bool(true);
+			col["filter"].set_bool(true);
+			col["resizable"].set_bool(true);
+			columns.push(col);
+		});
+	}
+
+	DTree grid_options;
+	grid_options["pagination"].set_bool(true);
+	grid_options["paginationPageSize"] = first(context.call["options"]["paginationPageSize"].to_string(), "20");
+	grid_options["suppressMenuHide"].set_bool(true);
+	grid_options["animateRows"].set_bool(true);
+	grid_options["columnDefs"] = columns;
+	grid_options["rowData"] = context.call["items"];
+
+	<>
+		<div class="ag-grid-container" style="margin: 1rem 0;">
+			<div class="ag-grid-toolbar" style="display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;padding:0.75rem;background:var(--surface-elevated);border:1px solid var(--border);border-radius:0.5rem 0.5rem 0 0;border-bottom:none;">
+				<div style="display:flex;gap:1rem;align-items:center;flex:1;">
+					<span style="color: var(--text-secondary); font-size: 0.875rem; font-weight: 500;"><?= std::to_string(context.call["items"]._map.size()) ?> rows</span>
+					<input type="text" id="<?= table_id ?>-search" placeholder="Search all columns..." style="padding:0.5rem 0.75rem;border:1px solid var(--border);border-radius:0.375rem;background:var(--surface);color:var(--text-primary);font-size:0.875rem;width:250px;" />
+				</div>
+				<div style="display:flex;gap:0.5rem;">
+					<button id="<?= table_id ?>-export-csv" class="btn btn-outline">Export CSV</button>
+					<button id="<?= table_id ?>-clear-filters" class="btn btn-outline">Clear Filters</button>
+				</div>
+			</div>
+			<div id="<?= table_id ?>" class="ag-theme-alpine-dark" style="height: <?= first(context.call["height"].to_string(), "400px") ?>; width: 100%; border: 1px solid var(--border); border-radius: 0 0 0.5rem 0.5rem; overflow: hidden;"></div>
+		</div>
+		<script>
+		(function () {
+			if (typeof agGrid === 'undefined') return;
+			const gridOptions = <?= json_encode(grid_options) ?>;
+			new agGrid.Grid(document.getElementById(<?: starter_json_string(table_id) ?>), gridOptions);
+			document.getElementById(<?: starter_json_string(table_id + "-search") ?>)?.addEventListener('input', function () {
+				gridOptions.api.setQuickFilter(this.value);
+			});
+			document.getElementById(<?: starter_json_string(table_id + "-clear-filters") ?>)?.addEventListener('click', function () {
+				gridOptions.api.setFilterModel(null);
+				gridOptions.api.setQuickFilter('');
+			});
+			document.getElementById(<?: starter_json_string(table_id + "-export-csv") ?>)?.addEventListener('click', function () {
+				gridOptions.api.exportDataAsCsv();
+			});
+		}());
+		</script>
+	</>
+}

site/examples/uce-starter/components/example/marketing_blocks.uce

@@ -0,0 +1,604 @@
+#load "../../lib/app.uce"
+
+void marketing_default_features(DTree& features)
+{
+	if(features.get_type_name() == "array" && features["0"]["title"].to_string() != "")
+		return;
+	DTree item;
+
+	item["icon"] = "⚡";
+	item["title"] = "Lightning Fast";
+	item["description"] = "Optimized for speed and performance with modern web technologies.";
+	features.push(item);
+	item.clear();
+
+	item["icon"] = "🎨";
+	item["title"] = "Beautiful Design";
+	item["description"] = "Carefully crafted components with attention to detail and user experience.";
+	features.push(item);
+	item.clear();
+
+	item["icon"] = "📱";
+	item["title"] = "Mobile First";
+	item["description"] = "Fully responsive design that works perfectly on all devices.";
+	features.push(item);
+	item.clear();
+
+	item["icon"] = "🔧";
+	item["title"] = "Easy to Use";
+	item["description"] = "Simple and intuitive component system for rapid development.";
+	features.push(item);
+	item.clear();
+
+	item["icon"] = "🛡️";
+	item["title"] = "Secure";
+	item["description"] = "Built with security best practices and server-side rendering first.";
+	features.push(item);
+	item.clear();
+
+	item["icon"] = "🚀";
+	item["title"] = "Scalable";
+	item["description"] = "Architecture designed to grow with your application needs.";
+	features.push(item);
+}
+
+RENDER:HERO_SECTION(Request& context)
+{
+	String title = first(context.call["title"].to_string(), "Welcome to the Present");
+	String subtitle = first(context.call["subtitle"].to_string(), "Experience no-quite-modern web development with our cutting-edge framework");
+	String cta_text = first(context.call["cta_text"].to_string(), "Get Started");
+	String cta_link = first(context.call["cta_link"].to_string(), "#");
+
+	<>
+		<div class="hero-section">
+			<div class="hero-content">
+				<h1 class="hero-title"><?= title ?></h1>
+				<p class="hero-subtitle"><?= subtitle ?></p>
+				<div class="hero-actions">
+					<a href="<?= cta_link ?>" class="btn btn-large hero-cta"><?= cta_text ?></a>
+					<a href="#features" class="btn btn-outline btn-large">Learn More</a>
+				</div>
+			</div>
+			<div class="hero-visual">
+				<div class="floating-card">
+					<div class="card-header"></div>
+					<div class="card-content">
+						<div class="line"></div>
+						<div class="line short"></div>
+						<div class="line"></div>
+					</div>
+				</div>
+				<div class="floating-elements">
+					<div class="element element-1"></div>
+					<div class="element element-2"></div>
+					<div class="element element-3"></div>
+				</div>
+			</div>
+		</div>
+		<style>
+			.hero-section {
+				display: grid;
+				grid-template-columns: 1fr 1fr;
+				gap: 4rem;
+				align-items: center;
+				min-height: 70vh;
+				padding: 4rem 2rem;
+				background: var(--bg-gradient);
+				color: var(--text-primary);
+				border-radius: var(--radius-xl);
+				margin-bottom: 4rem;
+				position: relative;
+				overflow: hidden;
+			}
+			.hero-section::before {
+				content: '';
+				position: absolute;
+				inset: 0;
+				background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox=\"0 0 100 100\"><defs><pattern id=\"grain\" width=\"100\" height=\"100\" patternUnits=\"userSpaceOnUse\"><circle cx=\"25\" cy=\"25\" r=\"1\" fill=\"white\" opacity=\"0.1\"/><circle cx=\"75\" cy=\"75\" r=\"1\" fill=\"white\" opacity=\"0.1\"/><circle cx=\"50\" cy=\"10\" r=\"0.5\" fill=\"white\" opacity=\"0.1\"/><circle cx=\"10\" cy=\"90\" r=\"0.5\" fill=\"white\" opacity=\"0.1\"/></pattern></defs><rect width=\"100%\" height=\"100%\" fill=\"url(%23grain)\"/></svg>');
+			}
+			.hero-content { position: relative; z-index: 2; }
+			.hero-title {
+				font-size: 3.5rem;
+				font-weight: 800;
+				margin-bottom: 1.5rem;
+				line-height: 1.1;
+				background: none;
+				color: var(--text-primary);
+			}
+			.hero-subtitle {
+				font-size: 1.25rem;
+				margin-bottom: 2rem;
+				opacity: 0.9;
+				line-height: 1.6;
+			}
+			.hero-actions {
+				display: flex;
+				gap: 1rem;
+				flex-wrap: wrap;
+			}
+			.hero-cta {
+				background: var(--surface);
+				color: var(--primary);
+				border: none;
+			}
+			.hero-visual {
+				position: relative;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				height: 400px;
+			}
+			.floating-card {
+				background: rgba(255, 255, 255, 0.1);
+				backdrop-filter: blur(10px);
+				border: 1px solid rgba(255, 255, 255, 0.2);
+				border-radius: 16px;
+				padding: 2rem;
+				width: 280px;
+				animation: float 6s ease-in-out infinite;
+				box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+			}
+			.card-header {
+				height: 60px;
+				background: linear-gradient(90deg, rgba(255,255,255,0.3), rgba(255,255,255,0.1));
+				border-radius: 8px;
+				margin-bottom: 1rem;
+			}
+			.card-content .line {
+				height: 12px;
+				background: rgba(255, 255, 255, 0.2);
+				border-radius: 6px;
+				margin-bottom: 8px;
+			}
+			.card-content .line.short { width: 60%; }
+			.floating-elements { position: absolute; width: 100%; height: 100%; }
+			.element {
+				position: absolute;
+				border-radius: 50%;
+				background: rgba(255, 255, 255, 0.1);
+				backdrop-filter: blur(5px);
+			}
+			.element-1 { width: 60px; height: 60px; top: 20%; left: 10%; animation: float 4s ease-in-out infinite; }
+			.element-2 { width: 40px; height: 40px; top: 60%; right: 15%; animation: float 5s ease-in-out infinite reverse; }
+			.element-3 { width: 80px; height: 80px; bottom: 20%; left: 20%; animation: float 7s ease-in-out infinite; }
+			@keyframes float {
+				0%, 100% { transform: translateY(0px) rotate(0deg); }
+				50% { transform: translateY(-20px) rotate(10deg); }
+			}
+			@media (max-width: 768px) {
+				.hero-section { grid-template-columns: 1fr; text-align: center; padding: 3rem 1rem; gap: 2rem; }
+				.hero-title { font-size: 2.5rem; }
+				.hero-subtitle { font-size: 1.1rem; }
+				.hero-visual { height: 300px; }
+				.floating-card { width: 240px; padding: 1.5rem; }
+			}
+		</style>
+		<script>
+			$.ready(() => {
+				const heroTitle = document.querySelector('.hero-title');
+				if (!heroTitle || heroTitle.dataset.typed === '1') return;
+				heroTitle.dataset.typed = '1';
+				const text = heroTitle.textContent;
+				heroTitle.textContent = '';
+				let i = 0;
+				const typeWriter = () => {
+					heroTitle.textContent += text.charAt(i);
+					i += 1;
+					if (i < text.length) setTimeout(typeWriter, 24);
+				};
+				typeWriter();
+			});
+		</script>
+	</>
+}
+
+RENDER:FEATURES_GRID(Request& context)
+{
+	DTree features = context.call["features"];
+	marketing_default_features(features);
+
+	<>
+		<div class="features-section" id="features">
+			<div class="features-header">
+				<h2>Why Choose Our Framework?</h2>
+				<p>Discover the powerful features that make development a breeze</p>
+			</div>
+			<div class="features-grid">
+				<? features.each([&](DTree feature, String key) {
+					?><div class="feature-card">
+						<div class="feature-icon"><?: feature["icon"].to_string() ?></div>
+						<h3 class="feature-title"><?= feature["title"].to_string() ?></h3>
+						<p class="feature-description"><?= feature["description"].to_string() ?></p>
+						<div class="feature-overlay"></div>
+					</div><?
+				}); ?>
+			</div>
+		</div>
+		<style>
+			.features-section { padding: 4rem 0; background: var(--bg-color); }
+			.features-header { text-align: center; margin-bottom: 4rem; }
+			.features-header h2 {
+				font-size: 2.5rem;
+				margin-bottom: 1rem;
+				background: linear-gradient(135deg, var(--primary), var(--secondary));
+				-webkit-background-clip: text;
+				-webkit-text-fill-color: transparent;
+				background-clip: text;
+			}
+			.features-header p { font-size: 1.25rem; color: var(--text-secondary); max-width: 600px; margin: 0 auto; }
+			.features-grid {
+				display: grid;
+				grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+				gap: 2rem;
+				max-width: 1200px;
+				margin: 0 auto;
+				padding: 0 1rem;
+			}
+			.feature-card {
+				background: var(--surface);
+				padding: 2.5rem 2rem;
+				border-radius: var(--radius-xl);
+				text-align: center;
+				position: relative;
+				overflow: hidden;
+				border: 1px solid var(--border);
+				transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+			}
+			.feature-card:hover { transform: translateY(-8px) scale(1.02); box-shadow: var(--shadow-xl); border-color: var(--primary); }
+			.feature-card::before {
+				content: '';
+				position: absolute;
+				top: 0;
+				left: 0;
+				right: 0;
+				height: 4px;
+				background: linear-gradient(90deg, var(--primary), var(--secondary));
+				transform: scaleX(0);
+				transition: transform 0.3s ease;
+			}
+			.feature-card:hover::before { transform: scaleX(1); }
+			.feature-icon {
+				font-size: 3rem;
+				margin-bottom: 1.5rem;
+				display: inline-block;
+				padding: 1rem;
+				background: linear-gradient(135deg, var(--primary), var(--secondary));
+				border-radius: 50%;
+				color: white;
+				box-shadow: var(--shadow-lg);
+			}
+			.feature-title { font-size: 1.5rem; font-weight: 600; margin-bottom: 1rem; color: var(--text-primary); }
+			.feature-description { color: var(--text-secondary); line-height: 1.6; }
+			.feature-overlay {
+				position: absolute;
+				inset: 0;
+				background: linear-gradient(135deg, var(--primary), var(--secondary));
+				opacity: 0;
+				transition: opacity 0.3s ease;
+			}
+			.feature-card:hover .feature-overlay { opacity: 0.05; }
+			@media (max-width: 768px) {
+				.features-grid { grid-template-columns: 1fr; gap: 1.5rem; padding: 0 0.5rem; }
+				.features-header h2 { font-size: 2rem; }
+				.feature-card { padding: 2rem 1.5rem; }
+			}
+		</style>
+	</>
+}
+
+RENDER:STATS_SECTION(Request& context)
+{
+	DTree stats = context.call["stats"];
+	if(stats.get_type_name() != "array" || stats["0"]["label"].to_string() == "")
+	{
+		DTree item;
+		item["number"] = "99.9%"; item["label"] = "Uptime"; stats.push(item); item.clear();
+		item["number"] = "500ms"; item["label"] = "Average Response"; stats.push(item); item.clear();
+		item["number"] = "50K+"; item["label"] = "Active Users"; stats.push(item); item.clear();
+		item["number"] = "24/7"; item["label"] = "Support"; stats.push(item);
+	}
+
+	<>
+		<div class="stats-section">
+			<div class="stats-container">
+				<div class="stats-header">
+					<h2>Trusted by Developers Worldwide</h2>
+					<p>Join thousands of developers who have chosen our framework</p>
+				</div>
+				<div class="stats-grid">
+					<? stats.each([&](DTree stat, String key) {
+						?><div class="stat-item">
+							<div class="stat-number"><?= stat["number"].to_string() ?></div>
+							<div class="stat-label"><?= stat["label"].to_string() ?></div>
+							<div class="stat-bar"><div class="stat-fill"></div></div>
+						</div><?
+					}); ?>
+				</div>
+			</div>
+		</div>
+		<style>
+			.stats-section {
+				background: linear-gradient(135deg, var(--surface) 0%, var(--surface-elevated) 100%);
+				color: var(--text-primary);
+				padding: 4rem 0;
+				position: relative;
+				overflow: hidden;
+				border-top: 1px solid var(--border);
+				border-bottom: 1px solid var(--border);
+			}
+			.stats-container { max-width: 1200px; margin: 0 auto; padding: 0 1rem; position: relative; z-index: 2; }
+			.stats-header { text-align: center; margin-bottom: 4rem; }
+			.stats-header h2 { font-size: 2.5rem; margin-bottom: 1rem; font-weight: 700; }
+			.stats-header p { font-size: 1.25rem; opacity: 0.8; }
+			.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 3rem; }
+			.stat-item {
+				text-align: center;
+				padding: 2rem;
+				background: var(--glass-bg);
+				backdrop-filter: blur(10px);
+				border: 1px solid var(--glass-border);
+				border-radius: var(--radius-xl);
+			}
+			.stat-number {
+				font-size: 3rem;
+				font-weight: 800;
+				margin-bottom: 0.5rem;
+				background: linear-gradient(135deg, var(--primary), var(--accent));
+				-webkit-background-clip: text;
+				-webkit-text-fill-color: transparent;
+				background-clip: text;
+			}
+			.stat-label { font-size: 1.1rem; color: var(--text-secondary); margin-bottom: 1rem; font-weight: 500; }
+			.stat-bar { height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; }
+			.stat-fill { height: 100%; background: linear-gradient(90deg, var(--primary), var(--accent)); width: 100%; }
+			@media (max-width: 768px) {
+				.stats-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
+				.stats-header h2 { font-size: 2rem; }
+			}
+			@media (max-width: 480px) {
+				.stats-grid { grid-template-columns: 1fr; }
+			}
+		</style>
+	</>
+}
+
+RENDER:BRANDS_SHOWCASE(Request& context)
+{
+	DTree logos = context.call["logos"];
+	if(logos.get_type_name() != "array" || logos["0"]["name"].to_string() == "")
+	{
+		DTree item;
+		for(s32 i = 1; i <= 6; i++)
+		{
+			item["name"] = "Brand " + std::to_string(i);
+			item["url"] = "img/cat0" + std::to_string(i) + ".jpg";
+			logos.push(item);
+			item.clear();
+		}
+	}
+	String title = first(context.call["title"].to_string(), "Trusted by Leading Companies");
+
+	<>
+		<div class="brands-section">
+			<div class="brands-container">
+				<h3 class="brands-title"><?= title ?></h3>
+				<div class="brands-grid">
+					<? logos.each([&](DTree logo, String key) {
+						?><div class="brand-item">
+							<img src="<?= logo["url"].to_string() ?>" alt="<?= logo["name"].to_string() ?>" />
+						</div><?
+					}); ?>
+				</div>
+			</div>
+		</div>
+		<style>
+			.brands-section { padding: 3rem 0; background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
+			.brands-container { max-width: 1200px; margin: 0 auto; padding: 0 1rem; text-align: center; }
+			.brands-title { font-size: 1.125rem; color: var(--text-secondary); margin-bottom: 2rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; }
+			.brands-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 2rem; align-items: center; }
+			.brand-item { display: flex; align-items: center; justify-content: center; padding: 1rem; border-radius: var(--radius); transition: all 0.3s ease; }
+			.brand-item:hover { transform: scale(1.05); background: var(--surface-hover); }
+			.brand-item img { max-width: 100%; height: auto; opacity: 0.6; transition: opacity 0.3s ease; filter: grayscale(100%); }
+			.brand-item:hover img { opacity: 1; filter: grayscale(0%); }
+			@media (max-width: 768px) {
+				.brands-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
+				.brands-section { padding: 2rem 0; }
+			}
+		</style>
+	</>
+}
+
+RENDER:TESTIMONIALS(Request& context)
+{
+	DTree testimonials = context.call["testimonials"];
+	if(testimonials.get_type_name() != "array" || testimonials["0"]["name"].to_string() == "")
+	{
+		DTree item;
+		item["name"] = "Sarah Johnson"; item["role"] = "Senior Developer at TechCorp"; item["avatar"] = "img/cat01.jpg"; item["content"] = "This framework has revolutionized our development process."; item["rating"] = "5"; testimonials.push(item); item.clear();
+		item["name"] = "Michael Chen"; item["role"] = "CTO at StartupX"; item["avatar"] = "img/cat02.jpg"; item["content"] = "We switched from our legacy system and saw immediate improvements."; item["rating"] = "5"; testimonials.push(item); item.clear();
+		item["name"] = "Emily Rodriguez"; item["role"] = "Full Stack Developer"; item["avatar"] = "img/cat03.jpg"; item["content"] = "The documentation is excellent and the learning curve is gentle."; item["rating"] = "5"; testimonials.push(item);
+	}
+
+	<>
+		<div class="testimonials-section">
+			<div class="testimonials-container">
+				<div class="testimonials-header">
+					<h2>What Developers Say</h2>
+					<p>Don't just take our word for it - hear from the community</p>
+				</div>
+				<div class="testimonials-grid">
+					<? testimonials.each([&](DTree testimonial, String key) {
+						?><div class="testimonial-card">
+							<div class="testimonial-content">
+								<div class="quote-icon">"</div>
+								<p><?= testimonial["content"].to_string() ?></p>
+								<div class="stars"><? for(s32 i = 0; i < int_val(first(testimonial["rating"].to_string(), "5")); i++) { ?><span class="star">★</span><? } ?></div>
+							</div>
+							<div class="testimonial-author">
+								<img src="<?= testimonial["avatar"].to_string() ?>" alt="<?= testimonial["name"].to_string() ?>" class="avatar">
+								<div class="author-info">
+									<div class="author-name"><?= testimonial["name"].to_string() ?></div>
+									<div class="author-role"><?= testimonial["role"].to_string() ?></div>
+								</div>
+							</div>
+						</div><?
+					}); ?>
+				</div>
+			</div>
+		</div>
+		<style>
+			.testimonials-section { padding: 4rem 0; background: var(--bg-color); }
+			.testimonials-container { max-width: 1200px; margin: 0 auto; padding: 0 1rem; }
+			.testimonials-header { text-align: center; margin-bottom: 4rem; }
+			.testimonials-header h2 { font-size: 2.5rem; margin-bottom: 1rem; background: linear-gradient(135deg, var(--primary), var(--secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
+			.testimonials-header p { font-size: 1.25rem; color: var(--text-secondary); }
+			.testimonials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 2rem; }
+			.testimonial-card { background: var(--surface); border-radius: var(--radius-xl); padding: 2.5rem 2rem; border: 1px solid var(--border); box-shadow: var(--shadow-md); }
+			.quote-icon { font-size: 4rem; color: var(--primary); opacity: 0.3; line-height: 1; margin-bottom: 1rem; font-family: serif; }
+			.testimonial-content p { font-size: 1.1rem; line-height: 1.7; color: var(--text-primary); margin-bottom: 1.5rem; }
+			.stars { display: flex; gap: 0.25rem; }
+			.star { color: #fbbf24; font-size: 1.25rem; }
+			.testimonial-author { display: flex; align-items: center; gap: 1rem; }
+			.avatar { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; border: 3px solid var(--border); }
+			.author-name { font-weight: 600; color: var(--text-primary); margin-bottom: 0.25rem; }
+			.author-role { color: var(--text-secondary); font-size: 0.9rem; }
+			@media (max-width: 768px) {
+				.testimonials-grid { grid-template-columns: 1fr; gap: 1.5rem; }
+				.testimonial-card { padding: 2rem 1.5rem; }
+				.testimonials-header h2 { font-size: 2rem; }
+			}
+		</style>
+	</>
+}
+
+RENDER:PRICING_TABLE(Request& context)
+{
+	DTree plans = context.call["plans"];
+	if(plans.get_type_name() != "array" || plans["0"]["name"].to_string() == "")
+	{
+		DTree plan;
+		DTree feature;
+
+		plan["name"] = "Starter"; plan["price"] = "Free"; plan["period"] = ""; plan["description"] = "Perfect for small projects and learning"; plan["cta"] = "Start Free"; feature = "Up to 3 projects"; plan["features"].push(feature); feature = "Community support"; plan["features"].push(feature); feature = "Basic components"; plan["features"].push(feature); plans.push(plan); plan.clear();
+		plan["name"] = "Pro"; plan["price"] = "$24"; plan["period"] = "/mo"; plan["description"] = "For serious products and teams"; plan["cta"] = "Choose Pro"; plan["popular"].set_bool(true); feature = "Unlimited projects"; plan["features"].push(feature); feature = "Priority support"; plan["features"].push(feature); feature = "Advanced components"; plan["features"].push(feature); plans.push(plan); plan.clear();
+		plan["name"] = "Enterprise"; plan["price"] = "$99"; plan["period"] = "/mo"; plan["description"] = "For larger teams and custom deployments"; plan["cta"] = "Contact Sales"; feature = "Custom integrations"; plan["features"].push(feature); feature = "Dedicated support"; plan["features"].push(feature); feature = "Architecture help"; plan["features"].push(feature); plans.push(plan);
+	}
+
+	<>
+		<div class="pricing-section">
+			<div class="pricing-container">
+				<div class="pricing-header">
+					<h2>Simple Pricing</h2>
+					<p>Choose the plan that fits your product stage.</p>
+				</div>
+				<div class="pricing-grid">
+					<? plans.each([&](DTree plan, String key) {
+						bool popular = plan["popular"].to_string() != "";
+						?><div class="pricing-card<?= popular ? " popular" : "" ?>">
+							<? if(popular) { ?><div class="popular-badge">Most Popular</div><? } ?>
+							<div class="plan-header">
+								<div class="plan-name"><?= plan["name"].to_string() ?></div>
+								<div class="plan-price">
+									<span class="price"><?= plan["price"].to_string() ?></span>
+									<span class="period"><?= plan["period"].to_string() ?></span>
+								</div>
+								<p class="plan-description"><?= plan["description"].to_string() ?></p>
+							</div>
+							<ul class="plan-features">
+								<? plan["features"].each([&](DTree feature, String feature_key) { ?><li><?= feature.to_string() ?></li><? }); ?>
+							</ul>
+							<div class="plan-footer">
+								<button class="btn <?= popular ? "btn-primary" : "btn-outline" ?> btn-large plan-cta"><?= first(plan["cta"].to_string(), "Choose Plan") ?></button>
+							</div>
+						</div><?
+					}); ?>
+				</div>
+				<div class="pricing-footer">
+					<p>All plans include a 30-day money-back guarantee. No setup fees.</p>
+				</div>
+			</div>
+		</div>
+		<style>
+			.pricing-section { padding: 5rem 0; background: var(--bg-color); }
+			.pricing-container { max-width: 1200px; margin: 0 auto; padding: 0 1rem; }
+			.pricing-header { text-align: center; margin-bottom: 4rem; }
+			.pricing-header h2 { font-size: 2.5rem; margin-bottom: 1rem; background: linear-gradient(135deg, var(--primary), var(--secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
+			.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; margin-bottom: 3rem; }
+			.pricing-card { background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius-xl); padding: 2.5rem 2rem; position: relative; }
+			.pricing-card.popular { border-color: var(--primary); box-shadow: var(--shadow-lg); transform: scale(1.05); }
+			.popular-badge { position: absolute; top: -1rem; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, var(--primary), var(--secondary)); color: white; padding: 0.5rem 1.5rem; border-radius: 50px; font-size: 0.875rem; font-weight: 600; }
+			.plan-header { text-align: center; margin-bottom: 2rem; padding-bottom: 2rem; border-bottom: 1px solid var(--border); }
+			.plan-name { font-size: 1.5rem; font-weight: 600; margin-bottom: 1rem; color: var(--text-primary); }
+			.price { font-size: 3rem; font-weight: 800; color: var(--primary); }
+			.period { font-size: 1.125rem; color: var(--text-secondary); margin-left: 0.25rem; }
+			.plan-description { color: var(--text-secondary); line-height: 1.6; }
+			.plan-features { list-style: none; padding: 0; margin: 0 0 2rem; display: grid; gap: 0.75rem; }
+			.plan-features li { color: var(--text-primary); }
+			.plan-footer { text-align: center; }
+			.pricing-footer { text-align: center; color: var(--text-secondary); }
+			@media (max-width: 768px) {
+				.pricing-grid { grid-template-columns: 1fr; }
+				.pricing-card.popular { transform: none; }
+			}
+		</style>
+	</>
+}
+
+RENDER:CTA_SECTION(Request& context)
+{
+	String title = first(context.call["title"].to_string(), "Ready to Get Started?");
+	String subtitle = first(context.call["subtitle"].to_string(), "Join thousands of developers building amazing applications with our framework.");
+	String cta_text = first(context.call["cta_text"].to_string(), "Start Building Now");
+	String cta_link = first(context.call["cta_link"].to_string(), "#");
+	String secondary_text = first(context.call["secondary_text"].to_string(), "View Documentation");
+	String secondary_link = first(context.call["secondary_link"].to_string(), "#");
+
+	<>
+		<div class="cta-section">
+			<div class="cta-container">
+				<div class="cta-content">
+					<h2 class="cta-title"><?= title ?></h2>
+					<p class="cta-subtitle"><?= subtitle ?></p>
+					<div class="cta-actions">
+						<a href="<?= cta_link ?>" class="btn btn-large cta-primary"><?= cta_text ?></a>
+						<a href="<?= secondary_link ?>" class="btn btn-outline btn-large cta-secondary"><?= secondary_text ?></a>
+					</div>
+				</div>
+				<div class="cta-visual">
+					<div class="floating-shapes">
+						<div class="shape shape-1"></div>
+						<div class="shape shape-2"></div>
+						<div class="shape shape-3"></div>
+						<div class="shape shape-4"></div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<style>
+			.cta-section { background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); color: white; padding: 5rem 0; position: relative; overflow: hidden; }
+			.cta-container { max-width: 1200px; margin: 0 auto; padding: 0 1rem; display: grid; grid-template-columns: 2fr 1fr; gap: 4rem; align-items: center; position: relative; z-index: 2; }
+			.cta-title { font-size: 3rem; font-weight: 800; margin-bottom: 1.5rem; line-height: 1.1; }
+			.cta-subtitle { font-size: 1.25rem; margin-bottom: 2.5rem; opacity: 0.9; line-height: 1.6; }
+			.cta-actions { display: flex; gap: 1.5rem; flex-wrap: wrap; }
+			.cta-primary { background: white; color: var(--primary); border: 2px solid white; }
+			.cta-secondary { border-color: rgba(255, 255, 255, 0.5); color: white; }
+			.cta-visual { position: relative; height: 300px; display: flex; align-items: center; justify-content: center; }
+			.floating-shapes { position: relative; width: 200px; height: 200px; }
+			.shape { position: absolute; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(5px); border: 1px solid rgba(255, 255, 255, 0.2); }
+			.shape-1 { width: 80px; height: 80px; border-radius: 20px; top: 0; left: 0; }
+			.shape-2 { width: 60px; height: 60px; border-radius: 50%; top: 20px; right: 0; }
+			.shape-3 { width: 100px; height: 40px; border-radius: 20px; bottom: 40px; left: 20px; }
+			.shape-4 { width: 50px; height: 50px; border-radius: 10px; bottom: 0; right: 30px; transform: rotate(45deg); }
+			@media (max-width: 968px) {
+				.cta-container { grid-template-columns: 1fr; text-align: center; gap: 2rem; }
+				.cta-title { font-size: 2.5rem; }
+			}
+			@media (max-width: 768px) {
+				.cta-section { padding: 3rem 0; }
+				.cta-title { font-size: 2rem; }
+				.cta-subtitle { font-size: 1.1rem; }
+				.cta-actions { justify-content: center; }
+			}
+		</style>
+	</>
+}

site/examples/uce-starter/components/example/theme-switcher.uce

@@ -0,0 +1,153 @@
+#load "../../lib/app.uce"
+
+RENDER(Request& context)
+{
+	starter_boot(context);
+	String current_theme = starter_theme_value("key", context);
+	String current_label = first(starter_theme_value("label", context), current_theme);
+	String route_path = context.var["starter"]["route"]["l_path"].to_string();
+
+	<>
+		<div id="theme-switcher" style="position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 9999; font-family: inherit;">
+			<style>
+				#theme-switcher .theme-launcher {
+					min-width: 56px;
+					height: 56px;
+					padding: 0 1rem;
+					border-radius: 999px;
+					background: var(--surface, #fff);
+					border: 1px solid var(--border, rgba(0,0,0,0.15));
+					box-shadow: var(--shadow-lg, 0 14px 32px rgba(0,0,0,0.18));
+					cursor: pointer;
+					transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
+					display: inline-flex;
+					align-items: center;
+					justify-content: center;
+					gap: 0.65rem;
+					color: var(--text-primary, #111827);
+					backdrop-filter: blur(10px);
+					-webkit-backdrop-filter: blur(10px);
+					font: inherit;
+					font-size: 0.9rem;
+					font-weight: 700;
+				}
+				#theme-switcher .theme-launcher:hover {
+					transform: translateY(-2px);
+					box-shadow: var(--shadow-xl, 0 22px 42px rgba(0,0,0,0.22));
+					border-color: var(--primary, #2563eb);
+					background: var(--surface-elevated, var(--surface, #fff));
+				}
+				#theme-switcher .theme-launcher-label {
+					display: none;
+					white-space: nowrap;
+				}
+				#theme-switcher .theme-menu {
+					position: absolute;
+					right: 0;
+					bottom: 68px;
+					width: min(280px, calc(100vw - 2rem));
+					padding: 0.6rem;
+					border-radius: 14px;
+					border: 1px solid var(--border, rgba(0,0,0,0.15));
+					background: color-mix(in srgb, var(--surface, #fff) 92%, transparent 8%);
+					box-shadow: var(--shadow-xl, 0 22px 42px rgba(0,0,0,0.22));
+				}
+				#theme-switcher .theme-menu[hidden] {
+					display: none;
+				}
+				#theme-switcher .theme-menu-title {
+					margin: 0 0 0.45rem;
+					padding: 0.1rem 0.25rem 0.35rem;
+					color: var(--text-secondary, #6b7280);
+					font-size: 0.74rem;
+					font-weight: 700;
+					letter-spacing: 0.06em;
+					text-transform: uppercase;
+				}
+				#theme-switcher .theme-menu-list {
+					display: grid;
+					gap: 0.35rem;
+				}
+				#theme-switcher .theme-option {
+					display: flex;
+					align-items: center;
+					justify-content: space-between;
+					gap: 0.75rem;
+					padding: 0.7rem 0.8rem;
+					border-radius: 10px;
+					border: 1px solid transparent;
+					color: var(--text-primary, #111827);
+					text-decoration: none;
+					font-size: 0.9rem;
+					font-weight: 600;
+				}
+				#theme-switcher .theme-option:hover {
+					background: color-mix(in srgb, var(--primary, #2563eb) 10%, transparent 90%);
+					border-color: color-mix(in srgb, var(--primary, #2563eb) 22%, transparent 78%);
+					text-decoration: none;
+				}
+				#theme-switcher .theme-option.is-active {
+					background: color-mix(in srgb, var(--primary, #2563eb) 16%, transparent 84%);
+					border-color: color-mix(in srgb, var(--primary, #2563eb) 28%, transparent 72%);
+				}
+				#theme-switcher .theme-option small {
+					color: var(--text-secondary, #6b7280);
+					font-size: 0.76rem;
+					font-weight: 600;
+				}
+				@media (min-width: 860px) {
+					#theme-switcher .theme-launcher-label {
+						display: inline;
+					}
+				}
+			</style>
+			<button id="theme-toggle" class="theme-launcher" aria-haspopup="true" aria-expanded="false" aria-label="Switch theme" title="Switch Theme" type="button">
+				<i class="fas fa-palette" aria-hidden="true"></i>
+				<span class="theme-launcher-label"><?= current_label ?></span>
+			</button>
+			<div id="theme-menu" class="theme-menu" hidden>
+				<div class="theme-menu-title">Available Themes</div>
+				<div class="theme-menu-list">
+					<? starter_cfg("theme/options", context).each([&](DTree theme_info, String theme_key) {
+						StringMap params;
+						params["theme"] = theme_key;
+						String href = starter_link(route_path == "index" ? "" : route_path, params, context);
+						?><a class="theme-option<?= theme_key == current_theme ? " is-active" : "" ?>" href="<?= href ?>">
+							<span><?= theme_info["label"].to_string() ?></span>
+							<? if(theme_key == current_theme) { ?><small>Active</small><? } ?>
+						</a><?
+					}); ?>
+				</div>
+			</div>
+		</div>
+
+		<script>
+		(function() {
+			const themeToggle = document.getElementById('theme-toggle');
+			const themeMenu = document.getElementById('theme-menu');
+
+			if (!themeToggle || !themeMenu) return;
+
+			themeToggle.addEventListener('click', function() {
+				const isOpen = !themeMenu.hasAttribute('hidden');
+				themeMenu.toggleAttribute('hidden', isOpen);
+				themeToggle.setAttribute('aria-expanded', isOpen ? 'false' : 'true');
+			});
+
+			document.addEventListener('click', function(event) {
+				if (!themeMenu.hasAttribute('hidden') && !document.getElementById('theme-switcher').contains(event.target)) {
+					themeMenu.setAttribute('hidden', 'hidden');
+					themeToggle.setAttribute('aria-expanded', 'false');
+				}
+			});
+
+			document.addEventListener('keydown', function(event) {
+				if (event.key === 'Escape' && !themeMenu.hasAttribute('hidden')) {
+					themeMenu.setAttribute('hidden', 'hidden');
+					themeToggle.setAttribute('aria-expanded', 'false');
+				}
+			});
+		}());
+		</script>
+	</>
+}

site/examples/uce-starter/components/gauges/gauges.uce

@@ -0,0 +1,231 @@
+#load "../../lib/app.uce"
+
+RENDER:PROGRESSBAR(Request& context)
+{
+	starter_register_js("components/gauges/common.js", context);
+	starter_register_css("themes/common/css/gauges.css", context);
+
+	String gauge_id = first(context.call["id"].to_string(), "progressbar-" + std::to_string((u64)time()));
+	String layout = first(context.call["layout"].to_string(), "horizontal");
+	String style = context.call["style"].to_string();
+	String item_style = context.call["item-style"].to_string();
+	String value_style = context.call["value-style"].to_string();
+	String bar_style = context.call["bar-style"].to_string();
+	String title = context.call["title"].to_string();
+	String subtitle = context.call["subtitle"].to_string();
+
+	<>
+		<section class="gauge-set progressbar-set progressbar-set-<?= layout ?>" id="<?= gauge_id ?>" style="<?= style ?>">
+			<? if(title != "") { ?>
+				<div class="gauge-set-header">
+					<h3><?= title ?></h3>
+					<? if(subtitle != "") { ?><p><?= subtitle ?></p><? } ?>
+				</div>
+			<? } ?>
+			<? if(layout == "horizontal") { ?>
+				<div class="progressbar-grid progressbar-grid-horizontal">
+					<? context.call["items"].each([&](DTree bar, String bar_id) {
+						DTree merged = context.call["scale"];
+						bar.each([&](DTree item, String key) { merged[key] = item; });
+						String label = first(merged["label"].to_string(), bar_id);
+						String tooltip = merged["tooltip"].to_string();
+						String unit = merged["unit"].to_string();
+						f64 min_value = atof(first(merged["min"].to_string(), "0").c_str());
+						f64 max_value = atof(first(merged["max"].to_string(), "100").c_str());
+						f64 value = atof(first(merged["value"].to_string(), "0").c_str());
+						f64 vrange = max_value - min_value;
+						if(vrange == 0) vrange = 1;
+						s32 pct = (s32)std::max(0.0, std::min(100.0, ((value - min_value) / vrange) * 100.0));
+						String color = first(merged["color"].to_string(), "var(--primary)");
+						?><section class="gauge-card progressbar-card progressbar-card-horizontal" title="<?= tooltip ?>" style="<?= item_style ?>">
+							<div class="progressbar-card-head">
+								<div class="gauge-metric-label progressbar-label"><?= label ?></div>
+								<div class="gauge-metric-value progressbar-value" style="<?= value_style ?>" id="<?= gauge_id ?>-<?= bar_id ?>-value"><?= merged["value"].to_string() + unit ?></div>
+							</div>
+							<div class="progressbar-background progressbar-background-horizontal">
+								<div class="progressbar-bar" id="<?= gauge_id ?>-<?= bar_id ?>-bar" style="background-color: <?= color ?>; <?= bar_style ?> width: <?= std::to_string(pct) ?>%;"></div>
+							</div>
+							<? if(tooltip != "") { ?><div class="gauge-metric-meta progressbar-meta"><?= tooltip ?></div><? } ?>
+						</section><?
+					}); ?>
+				</div>
+			<? } else { ?>
+				<div class="progressbar-grid progressbar-grid-vertical" style="--progressbar-height: <?= first(context.call["height"].to_string(), "240") ?>px;">
+					<? context.call["items"].each([&](DTree bar, String bar_id) {
+						DTree merged = context.call["scale"];
+						bar.each([&](DTree item, String key) { merged[key] = item; });
+						String label = first(merged["label"].to_string(), bar_id);
+						String tooltip = merged["tooltip"].to_string();
+						String unit = merged["unit"].to_string();
+						f64 min_value = atof(first(merged["min"].to_string(), "0").c_str());
+						f64 max_value = atof(first(merged["max"].to_string(), "100").c_str());
+						f64 value = atof(first(merged["value"].to_string(), "0").c_str());
+						f64 vrange = max_value - min_value;
+						if(vrange == 0) vrange = 1;
+						s32 pct = (s32)std::max(0.0, std::min(100.0, ((value - min_value) / vrange) * 100.0));
+						String color = first(merged["color"].to_string(), "var(--primary)");
+						?><section class="gauge-card progressbar-card progressbar-card-vertical" title="<?= tooltip ?>" style="<?= item_style ?>">
+							<div class="gauge-metric-label progressbar-label"><?= label ?></div>
+							<div class="progressbar-background progressbar-background-vertical">
+								<div class="progressbar-bar" id="<?= gauge_id ?>-<?= bar_id ?>-bar" style="background-color: <?= color ?>; <?= bar_style ?> height: <?= std::to_string(pct) ?>%;"></div>
+							</div>
+							<div class="gauge-metric-value progressbar-value" style="<?= value_style ?>" id="<?= gauge_id ?>-<?= bar_id ?>-value"><?= merged["value"].to_string() + unit ?></div>
+							<? if(tooltip != "") { ?><div class="gauge-metric-meta progressbar-meta"><?= tooltip ?></div><? } ?>
+						</section><?
+					}); ?>
+				</div>
+			<? } ?>
+		</section>
+		<? if(context.call["listen"].to_string() != "") { ?>
+			<script>
+			window.ProgressbarComponents = window.ProgressbarComponents || {
+				start_listen : function(prop) {
+					$.events.on('value-broadcast', function(data) {
+						if(!prop.items || !prop.items[data.name]) return;
+						let bar = Object.assign({}, prop.scale || {}, prop.items[data.name]);
+						let vrange = (Number(bar.max || 100) - Number(bar.min || 0));
+						if (!vrange) vrange = 1;
+						let pct = Math.min(100, Math.max(0, (Number(data.value) - Number(bar.min || 0)) / vrange * 100));
+						let barEl = document.getElementById(prop.id + '-' + data.name + '-bar');
+						let valueEl = document.getElementById(prop.id + '-' + data.name + '-value');
+						if (valueEl) valueEl.textContent = data.value + (bar.unit || '');
+						if (barEl) {
+							if (prop.layout === 'vertical') barEl.style.height = pct + '%';
+							else barEl.style.width = pct + '%';
+						}
+					});
+				}
+			};
+			ProgressbarComponents.start_listen(<?= json_encode(context.call) ?>);
+			</script>
+		<? } ?>
+	</>
+}
+
+RENDER:NEEDLEGAUGE(Request& context)
+{
+	starter_register_css("themes/common/css/gauges.css", context);
+	String gauge_id = first(context.call["id"].to_string(), "needlegauge-" + std::to_string((u64)time()));
+	String style = context.call["style"].to_string();
+	String title = context.call["title"].to_string();
+	String subtitle = context.call["subtitle"].to_string();
+	s32 size = (s32)int_val(first(context.call["size"].to_string(), "200"));
+
+	<>
+		<section class="gauge-set needlegauge-set" id="<?= gauge_id ?>" style="<?= style ?>">
+			<? if(title != "") { ?><div class="gauge-set-header"><h3><?= title ?></h3><? if(subtitle != "") { ?><p><?= subtitle ?></p><? } ?></div><? } ?>
+			<div class="needlegauge-grid">
+				<? context.call["items"].each([&](DTree item, String item_id) {
+					String label = first(item["label"].to_string(), item_id);
+					String tooltip = item["tooltip"].to_string();
+					String unit = item["unit"].to_string();
+					f64 min_value = atof(first(item["min"].to_string(), "0").c_str());
+					f64 max_value = atof(first(item["max"].to_string(), "100").c_str());
+					f64 value = atof(first(item["value"].to_string(), "0").c_str());
+					f64 pct = (value - min_value) / (max_value - min_value == 0 ? 1.0 : (max_value - min_value));
+					pct = std::max(0.0, std::min(1.0, pct));
+					f64 angle = -2.6 + pct * 2.2;
+					?><section class="gauge-card needlegauge-card">
+						<div class="gauge-metric-label needlegauge-label-head"><?= label ?></div>
+						<div class="needlegauge-visual">
+							<svg width="<?= std::to_string(size) ?>" height="<?= std::to_string(size / 1.8) ?>" viewBox="0 0 200 120" class="needlegauge-svg">
+								<path d="M 20 100 A 80 80 0 0 1 180 100" fill="none" stroke='var(--border)' stroke-width="10" opacity="0.3"/>
+								<line id="<?= gauge_id ?>-<?= item_id ?>-needle" class="needle" x1="100" y1="100" x2="40" y2="100" stroke='var(--primary)' stroke-width="4" stroke-linecap="round" style="transform-origin: 100px 100px; transform: rotate(<?= std::to_string(angle) ?>rad); transition: transform 0.3s ease;"/>
+								<circle cx="100" cy="100" r="7" fill='var(--primary)'/>
+							</svg>
+						</div>
+						<div class="needlegauge-info">
+							<div class="gauge-metric-value needlegauge-value" id="<?= gauge_id ?>-<?= item_id ?>-value"><?= item["value"].to_string() + unit ?></div>
+							<? if(tooltip != "") { ?><div class="gauge-metric-meta needlegauge-meta"><?= tooltip ?></div><? } ?>
+						</div>
+					</section><?
+				}); ?>
+			</div>
+		</section>
+		<? if(context.call["listen"].to_string() != "") { ?>
+			<script>
+			window.NeedlegaugeComponents = window.NeedlegaugeComponents || {
+				start_listen : function(prop) {
+					$.events.on('value-broadcast', function(data) {
+						if(!prop.items || !prop.items[data.name]) return;
+						let item = Object.assign({}, prop.scale || {}, prop.items[data.name]);
+						let min = Number(item.min || 0);
+						let max = Number(item.max || 100);
+						let pct = (Number(data.value) - min) / ((max - min) || 1);
+						pct = Math.min(1, Math.max(0, pct));
+						let angle = -2.6 + pct * 2.2;
+						let needle = document.getElementById(prop.id + '-' + data.name + '-needle');
+						let valueEl = document.getElementById(prop.id + '-' + data.name + '-value');
+						if (needle) needle.style.transform = 'rotate(' + angle + 'rad)';
+						if (valueEl) valueEl.textContent = data.value + (item.unit || '');
+					});
+				}
+			};
+			NeedlegaugeComponents.start_listen(<?= json_encode(context.call) ?>);
+			</script>
+		<? } ?>
+	</>
+}
+
+RENDER:ARCGAUGE(Request& context)
+{
+	starter_register_js("components/gauges/common.js", context);
+	starter_register_css("themes/common/css/gauges.css", context);
+	String gauge_id = first(context.call["id"].to_string(), "arcgauge-" + std::to_string((u64)time()));
+	String title = context.call["title"].to_string();
+	String subtitle = context.call["subtitle"].to_string();
+	String style = context.call["style"].to_string();
+
+	<>
+		<div class="arcgauge-set" id="<?= gauge_id ?>" style="<?= style ?>">
+			<? if(title != "") { ?><div class="arcgauge-set-header"><h3><?= title ?></h3><? if(subtitle != "") { ?><p><?= subtitle ?></p><? } ?></div><? } ?>
+			<div class="arcgauge-grid">
+				<? context.call["items"].each([&](DTree item, String item_id) {
+					f64 value = atof(first(item["value"].to_string(), "0").c_str());
+					f64 max_value = atof(first(item["max"].to_string(), "100").c_str());
+					s32 precision = (s32)int_val(first(item["precision"].to_string(), "1"));
+					f64 pct = max_value > 0.0 ? std::max(0.0, std::min(100.0, (value / max_value) * 100.0)) : 0.0;
+					f64 arc_length = (pct / 100.0) * 157.08;
+					char buf[64];
+					snprintf(buf, sizeof(buf), ("%." + std::to_string(precision) + "f").c_str(), value);
+					?><section class="arcgauge-card">
+						<div class="arcgauge-label"><?= first(item["label"].to_string(), item_id) ?></div>
+						<svg class="arcgauge-svg" viewBox="0 0 120 68" aria-hidden="true">
+							<path class="arcgauge-track" d="M 10 60 A 50 50 0 0 1 110 60" fill="none" stroke-width="5" stroke-linecap="round"/>
+							<path id="<?= gauge_id ?>-<?= item_id ?>-arc" class="arcgauge-arc-dyn" d="M 10 60 A 50 50 0 0 1 110 60" fill="none" stroke='var(--success, #10b981)' stroke-width="5" stroke-linecap="round" stroke-dasharray="<?= std::to_string(arc_length) ?> 157.08"/>
+							<text id="<?= gauge_id ?>-<?= item_id ?>-text" class="arcgauge-value" x="60" y="47" text-anchor="middle"><?= String(buf) + item["unit"].to_string() ?></text>
+							<text class="arcgauge-caption" x="60" y="62" text-anchor="middle"><?= first(item["caption"].to_string(), "") ?></text>
+						</svg>
+						<div class="arcgauge-meta" id="<?= gauge_id ?>-<?= item_id ?>-meta"><?= first(item["meta"].to_string(), "--") ?></div>
+					</section><?
+				}); ?>
+			</div>
+		</div>
+		<? if(context.call["listen"].to_string() != "") { ?>
+			<script>
+			window.ArcgaugeComponents = window.ArcgaugeComponents || {
+				start_listen : function(prop) {
+					$.events.on('value-broadcast', function(data) {
+						if(!prop.items || !prop.items[data.name]) return;
+						const item = Object.assign({}, prop.items[data.name]);
+						if (typeof GaugeComponents !== 'undefined') {
+							GaugeComponents.updateArcGauge({
+								arcId: prop.id + '-' + data.name + '-arc',
+								textId: prop.id + '-' + data.name + '-text',
+								metaId: prop.id + '-' + data.name + '-meta',
+								value: Number(data.value),
+								max: Number(item.max || 100),
+								suffix: item.unit || '',
+								precision: item.precision,
+								color: item.color,
+								meta: data.meta != null ? data.meta : null
+							});
+						}
+					});
+				}
+			};
+			ArcgaugeComponents.start_listen(<?= json_encode(context.call) ?>);
+			</script>
+		<? } ?>
+	</>
+}

site/examples/uce-starter/components/theme/account_links.uce

@@ -0,0 +1,30 @@
+#load "../../lib/app.uce"
+
+RENDER(Request& context)
+{
+	starter_boot(context);
+	DTree user = starter_current_user(context);
+	bool signed_in = user["email"].to_string() != "";
+	String wrapper_class = starter_theme_value("key", context) == "localfirst" ? "admin-account-card" : "nav-account nav-menu";
+	String links_class = starter_theme_value("key", context) == "localfirst" ? "admin-account-links" : "";
+	String name_class = starter_theme_value("key", context) == "localfirst" ? "admin-account-name" : "account-name";
+
+	<>
+		<div class="<?= wrapper_class ?>">
+			<? if(signed_in) { ?>
+				<span class="<?= name_class ?>"><?= first(user["username"].to_string(), user["email"].to_string(), "Account") ?></span>
+				<? if(links_class != "") { ?><div class="<?= links_class ?>"><? } ?>
+				<a href="<?= starter_link("account/profile", context) ?>">Profile</a>
+				<a href="<?= starter_link("account/logout", context) ?>">Logout</a>
+				<? if(links_class != "") { ?></div><? } ?>
+			<? } else { ?>
+				<? if(links_class != "") { ?><div class="<?= links_class ?>"><? } ?>
+				<a href="<?= starter_link("account/login", context) ?>">Login</a>
+				<? if(starter_cfg("users/enable_signup", context).to_string() != "") { ?>
+					<a href="<?= starter_link("account/register", context) ?>">Register</a>
+				<? } ?>
+				<? if(links_class != "") { ?></div><? } ?>
+			<? } ?>
+		</div>
+	</>
+}

site/examples/uce-starter/components/theme/footer.uce

@@ -0,0 +1,21 @@
+#load "../../lib/app.uce"
+
+RENDER(Request& context)
+{
+	starter_boot(context);
+	if(context.var["starter"]["embed_mode"].to_string() != "")
+		return;
+
+	String text = first(starter_theme_value("footer_text", context), starter_cfg_string("site/name", context));
+	String inner_class = starter_theme_value("key", context) == "portal-light" ? "footer-inner" : "";
+
+	<>
+		<footer>
+			<? if(inner_class != "") { ?>
+				<div class="<?= inner_class ?>"><p><?= text ?></p></div>
+			<? } else { ?>
+				<div style="max-width: 1200px; margin: 0 auto; padding: 0 1rem;"><p><?= text ?></p></div>
+			<? } ?>
+		</footer>
+	</>
+}

site/examples/uce-starter/components/theme/page_shell.uce

@@ -0,0 +1,117 @@
+#load "../../lib/app.uce"
+
+RENDER(Request& context)
+{
+	starter_boot(context);
+
+	String page_type = first(context.var["starter"]["page_type"].to_string(), "html");
+	if(context.flags.status >= 300 && context.flags.status < 400)
+		return;
+
+	if(page_type == "blank")
+	{
+		print(context.call["main_html"].to_string());
+		return;
+	}
+
+	if(page_type == "json")
+	{
+		context.header["Content-Type"] = "application/json";
+		context.header["Cache-Control"] = "no-cache, no-store, must-revalidate";
+		if(context.var["starter"]["json"].get_type_name() == "array")
+		{
+			print(json_encode(context.var["starter"]["json"]));
+		}
+		else
+		{
+			print(context.call["main_html"].to_string());
+		}
+		return;
+	}
+
+	String theme_key = starter_theme_value("key", context);
+	bool embed_mode = context.var["starter"]["embed_mode"].to_string() == "1";
+	String body_class = embed_mode ? "embed-mode" : "";
+	if(theme_key == "portal-dark")
+		body_class = "portal-theme portal-dark-theme dark-theme" + String(embed_mode ? " embed-mode" : "");
+	else if(theme_key == "portal-light")
+		body_class = "portal-theme portal-light-theme" + String(embed_mode ? " embed-mode" : "");
+	else if(theme_key == "localfirst")
+		body_class = "admin-page localfirst-theme dark-theme" + String(embed_mode ? " embed-mode" : "");
+	else if(theme_key == "retro-gaming")
+		body_class = embed_mode ? "embed-mode" : "";
+
+	<>
+		<!doctype html>
+		<html class="<?= starter_html_class(context) ?>" lang="en" data-theme-key="<?= starter_theme_value("key", context) ?>">
+		<head>
+			<? render_component("page_shell:HEAD", context.call, context); ?>
+		</head>
+		<body<?: body_class != "" ? " class=\"" + html_escape(body_class) + "\"" : "" ?>>
+			<? if(theme_key == "retro-gaming") { ?><div class="retro-stars"></div><? } ?>
+			<? if(!embed_mode) { ?>
+				<?: component("../example/theme-switcher", context) ?>
+				<? if(theme_key != "localfirst") { ?>
+					<?: component("../basic/cookie-consent", context) ?>
+				<? } ?>
+			<? } ?>
+
+			<? if(theme_key == "localfirst") { ?>
+				<div class="admin-shell">
+					<nav class="admin-nav">
+						<div class="admin-nav-header">
+							<a class="admin-nav-title" href="<?= starter_link("", context) ?>">
+								<img class="admin-nav-logo-img" src="<?= starter_asset_url("themes/localfirst/img/local_first_logo.png", context) ?>" alt="<?= starter_cfg_string("site/name", context) ?>" />
+							</a>
+						</div>
+						<? starter_cfg("menu", context).each([&](DTree menu_item, String menu_key) {
+							if(menu_item["hidden"].to_string() == "1")
+								return;
+							String current_path = context.var["starter"]["route"]["l_path"].to_string();
+							bool active = menu_key != "" && (current_path == menu_key || current_path.rfind(menu_key + "/", 0) == 0);
+							?><a class="admin-nav-item<?= active ? " active" : "" ?>" href="<?= starter_menu_href(menu_key, menu_item, context) ?>"><?= menu_item["title"].to_string() ?></a><?
+						}); ?>
+					</nav>
+					<div class="admin-main">
+						<? if(!embed_mode) { ?>
+							<div class="admin-toolbar">
+								<?: component("account_links", context) ?>
+							</div>
+						<? } ?>
+						<div id="content" class="admin-content">
+							<?: context.call["main_html"].to_string() ?>
+						</div>
+					</div>
+				</div>
+			<? } else { ?>
+				<?: component("standard_nav", context) ?>
+				<div id="content"<?: embed_mode ? " class=\"embed-content\"" : "" ?>>
+					<?: context.call["main_html"].to_string() ?>
+				</div>
+				<?: component("footer", context) ?>
+			<? } ?>
+		</body>
+		</html>
+	</>
+}
+
+RENDER:HEAD(Request& context)
+{
+	starter_boot(context);
+	String title = first(context.var["starter"]["page_title"].to_string(), starter_cfg_string("site/default_page_title", context));
+	String description = first(starter_theme_value("meta_description", context), "UCE starter example");
+	String theme_color = first(starter_theme_value("theme_color", context), "#0f172a");
+	String icon = starter_asset_url(starter_theme_value("path", context) + "icon.png", context);
+
+	<>
+		<meta charset="utf-8">
+		<title><?= title + " | " + starter_cfg_string("site/name", context) ?></title>
+		<meta name="description" content="<?= description ?>">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<meta name="theme-color" content="<?= theme_color ?>">
+		<link rel="apple-touch-icon" href="<?= icon ?>" />
+		<link rel="icon" type="image/png" sizes="32x32" href="<?= icon ?>" />
+		<? starter_render_registered_css(context); ?>
+		<? starter_render_registered_js(context); ?>
+	</>
+}

site/examples/uce-starter/components/theme/standard_nav.uce

@@ -0,0 +1,20 @@
+#load "../../lib/app.uce"
+
+RENDER(Request& context)
+{
+	starter_boot(context);
+
+	<>
+		<nav<?: starter_theme_value("key", context) == "portal-dark" || starter_theme_value("key", context) == "dark" || starter_theme_value("key", context) == "retro-gaming" ? " class=\"nav-shell\"" : "" ?>>
+			<div class="nav-menu">
+				<a href="<?= starter_link("", context) ?>"><?= starter_cfg_string("site/name", context) ?></a>
+				<? starter_cfg("menu", context).each([&](DTree menu_item, String menu_key) {
+					if(menu_item["hidden"].to_string() == "1")
+						return;
+					?><a href="<?= starter_menu_href(menu_key, menu_item, context) ?>"><?= menu_item["title"].to_string() ?></a><?
+				}); ?>
+			</div>
+			<?: component("account_links", context) ?>
+		</nav>
+	</>
+}

site/examples/uce-starter/components/workspace/primitives.uce

@@ -0,0 +1,122 @@
+#load "../../lib/app.uce"
+
+RENDER:APP_FRAME(Request& context)
+{
+	starter_register_css("themes/common/css/workspace.css", context);
+	starter_register_js("js/u-workspace-shell.js", context);
+	String id = context.call["id"].to_string();
+	String overlay_id = context.call["overlay_id"].to_string();
+	String class_name = context.call["class"].to_string();
+	<>
+		<div<?: id != "" ? " id=\"" + html_escape(id) + "\"" : "" ?> class="ws-app<?= class_name != "" ? " " + html_escape(class_name) : "" ?>">
+			<?: context.call["sidebar_html"].to_string() ?>
+			<div<?: overlay_id != "" ? " id=\"" + html_escape(overlay_id) + "\"" : "" ?> class="ws-sidebar-overlay"></div>
+			<main class="ws-main"><?: context.call["main_html"].to_string() ?></main>
+		</div>
+	</>
+}
+
+RENDER:EMPTY_STATE(Request& context)
+{
+	<>
+		<div class="ws-empty-state<?= context.call["class"].to_string() != "" ? " " + html_escape(context.call["class"].to_string()) : "" ?>">
+			<div class="ws-empty-icon"><i class="<?= first(context.call["icon_class"].to_string(), "fas fa-layer-group") ?>"></i></div>
+			<h2><?= context.call["title"].to_string() ?></h2>
+			<p><?= context.call["text"].to_string() ?></p>
+			<?: context.call["action_html"].to_string() ?>
+		</div>
+	</>
+}
+
+RENDER:LIST_STATE(Request& context)
+{
+	<>
+		<div class="ws-list-state<?= context.call["class"].to_string() != "" ? " " + html_escape(context.call["class"].to_string()) : "" ?>"><? if(context.call["icon_class"].to_string() != "") { ?><i class="<?= context.call["icon_class"].to_string() ?>"></i><? } ?><span><?= context.call["text"].to_string() ?></span></div>
+	</>
+}
+
+RENDER:MOBILE_BAR(Request& context)
+{
+	<>
+		<div class="ws-mobile-bar<?= context.call["class"].to_string() != "" ? " " + html_escape(context.call["class"].to_string()) : "" ?>">
+			<button<?: context.call["button_id"].to_string() != "" ? " id=\"" + html_escape(context.call["button_id"].to_string()) + "\"" : "" ?> class="ws-mobile-toggle" title="Toggle sidebar" type="button">
+				<i class="<?= first(context.call["icon_class"].to_string(), "fas fa-bars") ?>"></i>
+			</button>
+			<span class="ws-mobile-title"><?= context.call["title"].to_string() ?></span>
+		</div>
+	</>
+}
+
+RENDER:PANEL_HEADER(Request& context)
+{
+	<>
+		<div class="ws-panel-header<?= context.call["class"].to_string() != "" ? " " + html_escape(context.call["class"].to_string()) : "" ?>">
+			<div class="ws-panel-title-group">
+				<h2><?= context.call["title"].to_string() ?></h2>
+				<? if(context.call["subtitle"].to_string() != "") { ?><p class="ws-subtitle"><?= context.call["subtitle"].to_string() ?></p><? } ?>
+			</div>
+			<? if(context.call["actions_html"].to_string() != "") { ?><div class="ws-header-actions"><?: context.call["actions_html"].to_string() ?></div><? } ?>
+		</div>
+	</>
+}
+
+RENDER:PANEL(Request& context)
+{
+	<>
+		<section<?: context.call["id"].to_string() != "" ? " id=\"" + html_escape(context.call["id"].to_string()) + "\"" : "" ?> class="ws-panel<?= context.call["class"].to_string() != "" ? " " + html_escape(context.call["class"].to_string()) : "" ?>">
+			<?: context.call["header_html"].to_string() ?>
+			<?: context.call["body_html"].to_string() ?>
+		</section>
+	</>
+}
+
+RENDER:SECTION_HEAD(Request& context)
+{
+	<>
+		<div class="ws-section-head<?= context.call["class"].to_string() != "" ? " " + html_escape(context.call["class"].to_string()) : "" ?>">
+			<h3><?= context.call["title"].to_string() ?></h3>
+			<? if(context.call["actions_html"].to_string() != "") { ?><div class="ws-header-actions"><?: context.call["actions_html"].to_string() ?></div><? } ?>
+		</div>
+	</>
+}
+
+RENDER:SECTION(Request& context)
+{
+	<>
+		<section<?: context.call["id"].to_string() != "" ? " id=\"" + html_escape(context.call["id"].to_string()) + "\"" : "" ?> class="ws-section<?= context.call["class"].to_string() != "" ? " " + html_escape(context.call["class"].to_string()) : "" ?>">
+			<?: context.call["header_html"].to_string() ?>
+			<?: context.call["body_html"].to_string() ?>
+		</section>
+	</>
+}
+
+RENDER:SIDEBAR_SHELL(Request& context)
+{
+	<>
+		<aside<?: context.call["id"].to_string() != "" ? " id=\"" + html_escape(context.call["id"].to_string()) + "\"" : "" ?> class="ws-sidebar<?= context.call["class"].to_string() != "" ? " " + html_escape(context.call["class"].to_string()) : "" ?>">
+			<?: context.call["top_html"].to_string() ?>
+			<?: context.call["body_html"].to_string() ?>
+		</aside>
+	</>
+}
+
+RENDER:SIDEBAR_TOOLBAR(Request& context)
+{
+	<>
+		<div class="ws-sidebar-top<?= context.call["class"].to_string() != "" ? " " + html_escape(context.call["class"].to_string()) : "" ?>">
+			<?: context.call["action_html"].to_string() ?>
+			<div class="ws-search-wrap">
+				<i class="fas fa-search ws-search-icon"></i>
+				<input type="search"<?: context.call["search_input_id"].to_string() != "" ? " id=\"" + html_escape(context.call["search_input_id"].to_string()) + "\"" : "" ?> name="<?= first(context.call["search_input_name"].to_string(), "search") ?>" class="ws-search-input" placeholder="<?= first(context.call["search_placeholder"].to_string(), "Search...") ?>" autocomplete="off">
+			</div>
+		</div>
+	</>
+}
+
+RENDER:STATUS_PILL(Request& context)
+{
+	String variant = to_lower(first(context.call["variant"].to_string(), "neutral"));
+	<>
+		<span class="ws-status-pill ws-status-pill-<?= variant ?><?= context.call["class"].to_string() != "" ? " " + html_escape(context.call["class"].to_string()) : "" ?>"><?= first(context.call["label"].to_string(), context.call["text"].to_string()) ?></span>
+	</>
+}

site/examples/uce-starter/index.uce

@@ -0,0 +1,31 @@
+#load "lib/app.uce"
+
+RENDER(Request& context)
+{
+	starter_boot(context);
+
+	DTree resolved = starter_resolve_view(context);
+
+	ob_start();
+	if(resolved["file"].to_string() != "")
+	{
+		if(resolved["param"].to_string() != "")
+			context.var["starter"]["route"]["param"] = resolved["param"];
+		render_file(resolved["file"].to_string(), context);
+	}
+	else
+	{
+		starter_not_found("The requested page does not exist.", context);
+		<>
+			<section class="card">
+				<h1>404 Not Found</h1>
+				<p><?= context.var["starter"]["error"].to_string() ?></p>
+			</section>
+		</>
+	}
+	String main_html = ob_get_close();
+
+	DTree shell_props;
+	shell_props["main_html"] = main_html;
+	render_component("components/theme/page_shell", shell_props, context);
+}

site/examples/uce-starter/js/morphdom.md

@@ -0,0 +1,141 @@
+# morphdom.js
+
+A fast and lightweight DOM diffing/patching library for efficiently updating the DOM with minimal changes.
+
+## Basic Usage
+
+```javascript
+morphdom(fromNode, toNode, options)     // Transform fromNode to match toNode
+```
+
+Returns the morphed node (may be a new node if root element changes).
+Instead of replacing entire DOM trees, morphdom intelligently compares and patches only the differences:
+
+```javascript
+const container = document.getElementById('container');
+const newHTML = '<div><p>Updated content</p></div>';
+
+// Efficiently update DOM - only changed parts are modified
+morphdom(container, newHTML);
+```
+
+## Options
+
+```javascript
+morphdom(fromNode, toNode, {
+    childrenOnly: true,                 // Only morph children, not root element
+    getNodeKey: node => node.id,        // Custom key function for matching nodes
+    onBeforeNodeAdded: node => true,    // Called before adding new nodes
+    onNodeAdded: node => {},            // Called after nodes are added
+    onBeforeElUpdated: (from, to) => true, // Called before updating elements
+    onElUpdated: node => {},            // Called after elements are updated
+    onBeforeNodeDiscarded: node => true, // Called before removing nodes
+    onNodeDiscarded: node => {},        // Called after nodes are removed
+    onBeforeElChildrenUpdated: (from, to) => true, // Called before updating children
+    skipFromChildren: (from, to) => false, // Skip children comparison
+    addChild: (parent, child) => parent.appendChild(child) // Custom child addition
+});
+```
+
+## Key Matching
+
+Use `getNodeKey` for efficient list updates:
+
+```javascript
+// HTML with keyed elements
+const html = `
+    <ul>
+        <li id="item-1">Item 1</li>
+        <li id="item-2">Item 2</li>
+        <li id="item-3">Item 3</li>
+    </ul>
+`;
+
+morphdom(list, html, {
+    getNodeKey: node => node.getAttribute('id')
+});
+```
+
+## Event Handlers
+
+```javascript
+morphdom(container, newHTML, {
+    onBeforeElUpdated: (fromEl, toEl) => {
+        // Preserve event listeners
+        if (fromEl.hasEventListeners) {
+            return false; // Skip this element
+        }
+        return true;
+    },
+    
+    onNodeAdded: (node) => {
+        // Initialize new components
+        if (node.classList?.contains('widget')) {
+            initializeWidget(node);
+        }
+    }
+});
+```
+
+## Form Element Handling
+
+Morphdom has special handling for form elements:
+
+- **INPUT**: Preserves checked, disabled, and value properties
+- **TEXTAREA**: Syncs value and text content
+- **SELECT**: Maintains selectedIndex and option states
+- **OPTION**: Handles selected state in select boxes
+
+## Common Patterns
+
+### Template Updates
+```javascript
+function updateTemplate(container, data) {
+    const template = `<div class="user">${data.name}</div>`;
+    morphdom(container, template);
+}
+```
+
+### List Management
+```javascript
+function updateList(listEl, items) {
+    const html = items.map(item => 
+        `<li id="item-${item.id}">${item.name}</li>`
+    ).join('');
+    
+    morphdom(listEl, `<ul>${html}</ul>`, {
+        childrenOnly: true,
+        getNodeKey: node => node.id
+    });
+}
+```
+
+### Component Preservation
+```javascript
+morphdom(container, newHTML, {
+    onBeforeElUpdated: (from, to) => {
+        // Preserve components that haven't changed
+        if (from.dataset.component === to.dataset.component) {
+            return false; // Skip update
+        }
+        return true;
+    }
+});
+```
+
+## Integration with uquery.js
+
+This library is used by uquery's `html()` method when differential updates are enabled:
+
+```javascript
+$.options.alwaysDoDifferentialUpdate = true;
+$('#container').html(newContent); // Uses morphdom internally
+```
+
+## Browser Support
+
+- Modern browsers with DOM Level 2+ support
+- Automatic fallbacks for older browsers
+- Template element support detection
+- Range API support detection
+

site/examples/uce-starter/js/site.js

@@ -0,0 +1,65 @@
+var enable_debug = true;
+
+var UI = {
+
+    smoothScrollToNamedAnchors: function() {
+        $('a[href^="#"]').each(anchor => {
+            anchor.addEventListener('click', function (e) {
+                e.preventDefault();
+                const target = document.querySelector(this.getAttribute('href'));
+                if (target) {
+                    target.scrollIntoView({
+                        behavior: 'smooth',
+                        block: 'start'
+                    });
+                }
+            });
+        });
+    },
+
+	enablePageTransitions: function() {
+		$(document.body).append(`<style>
+			::view-transition-old(root),
+			::view-transition-new(root) {
+			animation-duration: 0.25s;
+			}
+
+			::view-transition-old(root) {
+			animation-name: fade-out;
+			}
+
+			::view-transition-new(root) {
+			animation-name: fade-in;
+			}
+
+			@keyframes fade-out {
+			from { opacity: 1; }
+			to { opacity: 0; }
+			}
+
+			@keyframes fade-in {
+			from { opacity: 0; }
+			to { opacity: 1; }
+			}</style>`);
+
+		document.addEventListener('click', e => {
+			const link = e.target.closest('a[href]');
+			if (!link) return;
+
+			e.preventDefault();
+
+			document.startViewTransition(() => {
+				window.location.href = link.href;
+			});
+		});
+	},
+
+    init: function() {
+		//UI.enablePageTransitions();
+        UI.smoothScrollToNamedAnchors();
+        document.body.classList.add('loaded');
+    },
+
+}
+
+$.ready(UI.init);

site/examples/uce-starter/js/u-eventemitter-demo.html

@@ -0,0 +1,897 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>U-EventEmitter Demo</title>
+    <style>
+        :root {
+            --space: 8px;
+            --radius: 5px;
+            
+            --gray: #6c757d;
+            --gray-bg: #f5f5f5;
+            --blue: #007acc;
+            --green: #28a745;
+            --white: white;
+            --dark: #333;
+            
+            --max-width: 1400px;
+            --sidebar: 400px;
+        }
+        
+        * { box-sizing: border-box; }
+        
+        body { 
+            font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            max-width: var(--max-width);
+            margin: 0 auto;
+            padding: var(--space);
+            background: var(--gray-bg);
+        }
+        
+        .container { 
+            background: var(--white);
+            padding: calc(var(--space) * 1.5);
+            border-radius: var(--radius);
+        }
+        
+        .main-layout { 
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: calc(var(--space) * 1.5);
+        }
+        
+        .api-column { 
+            background: var(--gray-bg);
+            padding: var(--space);
+            border-radius: var(--radius);
+            border-left: 4px solid var(--green);
+        }
+        
+        h1 { 
+            color: var(--dark);
+            text-align: center;
+            margin-bottom: calc(var(--space) * 1.5);
+            grid-column: 1 / -1;
+        }
+        
+        h2 { 
+            color: var(--gray);
+            border-bottom: 2px solid #e0e0e0;
+            padding-bottom: var(--space);
+            margin-top: calc(var(--space) * 1.5);
+        }
+        
+        .demo-section { 
+            margin: var(--space) 0;
+            padding: var(--space);
+            background: var(--gray-bg);
+            border-radius: var(--radius);
+            border-left: 4px solid var(--blue);
+        }
+        
+        .controls, .input-group { 
+            display: flex;
+            gap: var(--space);
+            margin: 15px 0;
+        }
+        
+        .controls { flex-wrap: wrap; }
+        .input-group { align-items: center; }
+        .feature-grid { display: grid; gap: var(--space); margin: var(--space) 0; }
+        
+        button { 
+            background: var(--blue);
+            color: var(--white);
+            border: none;
+            padding: var(--space) var(--space);
+            border-radius: var(--radius);
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+        
+        button:hover { filter: brightness(0.9); }
+        button:disabled { background: #ccc; cursor: not-allowed; }
+        
+        input[type="text"] { 
+            padding: var(--space);
+            border: 1px solid #ddd;
+            border-radius: var(--radius);
+            flex: 1;
+        }
+        
+        .status, .code-example { 
+            font-family: monospace;
+            padding: var(--space);
+            border-radius: var(--radius);
+            margin: var(--space) 0;
+        }
+        
+        .status { 
+            background: var(--dark);
+            color: #0f0;
+            white-space: pre-wrap;
+            max-height: 150px;
+            overflow-y: auto;
+        }
+        
+        .code-example { 
+            background: #2d3748;
+            color: #e2e8f0;
+            padding: 15px;
+            overflow-x: auto;
+            margin: var(--space) 0;
+        }
+        
+        .highlight { color: #68d391; }
+        .keyword { color: #fbb6ce; }
+        .string { color: #fbd38d; }
+        
+        .event-visual { 
+            height: 100px;
+            background: linear-gradient(45deg, #1e3c72, #2a5298);
+            border-radius: var(--radius);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: var(--white);
+            font-weight: bold;
+            margin: 15px 0;
+            position: relative;
+            overflow: hidden;
+        }
+        
+        .pulse-wave { 
+            position: absolute;
+            inset: 0;
+            opacity: 0.3;
+            background: radial-gradient(circle at center, rgba(255,255,255,0.2) 0%, transparent 70%);
+            animation: pulse 2s ease-in-out infinite;
+        }
+        
+        .event-indicator {
+            position: absolute;
+            top: 10px;
+            right: 10px;
+            width: 12px;
+            height: 12px;
+            background: #68d391;
+            border-radius: 50%;
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+        
+        .event-indicator.active {
+            opacity: 1;
+            animation: blink 0.5s ease-in-out;
+        }
+        
+        @keyframes pulse { 
+            0%, 100% { transform: scale(0.8); opacity: 0.3; }
+            50% { transform: scale(1.2); opacity: 0.1; }
+        }
+        
+        @keyframes blink {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.3; }
+        }
+        
+        .api-section { margin: 15px 0; }
+        .api-section h3 { 
+            color: var(--green);
+            margin: 0 0 var(--space) 0;
+        }
+        
+        .api-method { 
+            font-family: monospace;
+            margin: 3px 0;
+            color: var(--gray);
+        }
+        
+        .api-method .method-name { color: var(--blue); font-weight: bold; }
+        .api-method .return-type { color: #6f42c1; }
+        .api-method .param { color: #e83e8c; }
+        
+        .api-description {
+            margin: var(--space) 0;
+        }
+        
+        .api-options {
+            color: var(--gray);
+        }
+        
+        .help-text {
+            color: var(--gray);
+            margin: var(--space) 0;
+        }
+        
+        .code-comment {
+            color: #68d391;
+        }
+        
+        .event-log {
+            background: var(--dark);
+            color: #0f0;
+            font-family: monospace;
+            padding: var(--space);
+            border-radius: var(--radius);
+            height: 150px;
+            overflow-y: auto;
+            white-space: pre-wrap;
+            margin: var(--space) 0;
+        }
+        
+        .listener-counter {
+            background: var(--blue);
+            color: var(--white);
+            padding: 2px 8px;
+            border-radius: 10px;
+            font-size: 12px;
+            margin-left: 8px;
+        }
+        
+        @media (max-width: 1200px) {
+            .main-layout { grid-template-columns: 1fr; }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>U-EventEmitter Demo</h1>
+        
+        <div class="main-layout">
+            <div class="demo-column">
+                <h2>Basic Event System</h2>
+                <div class="demo-section">
+                    <div class="controls">
+                        <button onclick="basicDemo()">Basic Subscribe & Emit</button>
+                        <button onclick="multipleListenersDemo()">Add Multiple Listeners</button>
+                        <button onclick="emitToMultiple()">Emit to All</button>
+                    </div>
+                    <div class="status" id="basic-output"></div>
+                </div>
+
+                <div class="demo-section">
+                    <h3>Advanced Features</h3>
+                    <div class="controls">
+                        <button onclick="slotDemo()">Slot-based Handlers</button>
+                        <button onclick="replaceSlotHandler()">Replace Handler</button>
+                        <button onclick="emitSlotEvent()">Test Slot System</button>
+                    </div>
+                    <div class="controls">
+                        <button onclick="autoRemovalDemo()">Self-removing Handler</button>
+                        <button onclick="triggerAutoRemoval()">Trigger Auto-removal</button>
+                    </div>
+                    <div class="status" id="advanced-output"></div>
+                </div>
+
+                <div class="demo-section">
+                    <h3>Interactive Event System</h3>
+                    <div class="input-group">
+                        <input type="text" id="event-name" placeholder="Event name" value="chat">
+                        <input type="text" id="event-data" placeholder="Event data" value="Hello EventEmitter!">
+                    </div>
+                    <div class="controls">
+                        <button onclick="addListener()">Add Listener <span id="listenerCount" class="listener-counter">0</span></button>
+                        <button onclick="emitCustomEvent()">Emit Event</button>
+                        <button onclick="removeAllListeners()">Clear Listeners</button>
+                    </div>
+                    <div class="event-log" id="event-log">Ready for interactive events...</div>
+                </div>
+            </div>
+
+            <div class="api-column">
+                <h2>API Overview</h2>
+                
+                <div class="api-section">
+                    <h3>EventEmitter Constructor</h3>
+                    <div class="api-method"><span class="keyword">new</span> <span class="method-name">EventEmitter</span>()</div>
+                    <div class="api-description">
+                        Creates a new event emitter instance for custom event communication.
+                    </div>
+                </div>
+
+                <div class="api-section">
+                    <h3>Core Methods</h3>
+                    <div class="api-method"><span class="method-name">on</span>(<span class="param">event, handler, slot?</span>) → <span class="return-type">EventEmitter</span></div>
+                    <div class="api-method"><span class="method-name">emit</span>(<span class="param">event, ...args</span>) → <span class="return-type">number</span></div>
+                    <div class="api-method"><span class="method-name">off</span>(<span class="param">event, handler?</span>) → <span class="return-type">EventEmitter</span></div>
+                    <div class="api-method"><span class="method-name">clear</span>(<span class="param">event?</span>) → <span class="return-type">EventEmitter</span></div>
+                </div>
+
+                <div class="api-section">
+                    <h3>Key Features</h3>
+                    <div class="api-description">
+                        <strong>Slot-based Deduplication:</strong> Use slot parameter to replace existing handlers<br>
+                        <strong>Auto-removal:</strong> Handlers returning 'remove_handler' are automatically unsubscribed<br>
+                        <strong>Return Values:</strong> emit() returns the number of handlers called<br>
+                        <strong>Flexible Arguments:</strong> Pass any number of arguments to handlers
+                    </div>
+                </div>
+
+                <div class="api-section">
+                    <h3>Examples</h3>
+                    <pre class="code-example">
+<span class="code-comment">// Basic usage</span>
+<span class="keyword">const</span> emitter = <span class="keyword">new</span> <span class="highlight">EventEmitter</span>();
+emitter.on(<span class="string">'message'</span>, (data) => {
+  console.log(<span class="string">'Received:'</span>, data);
+});
+emitter.emit(<span class="string">'message'</span>, <span class="string">'Hello World'</span>);
+
+<span class="code-comment">// Slot-based replacement</span>
+emitter.on(<span class="string">'update'</span>, handler1, <span class="string">'ui-updater'</span>);
+emitter.on(<span class="string">'update'</span>, handler2, <span class="string">'ui-updater'</span>); <span class="code-comment">// Replaces handler1</span>
+
+<span class="code-comment">// Self-removing handler</span>
+emitter.on(<span class="string">'init'</span>, () => {
+  console.log(<span class="string">'Initialized!'</span>);
+  <span class="keyword">return</span> <span class="string">'remove_handler'</span>; <span class="code-comment">// Removes itself</span>
+});
+</pre>
+                </div>
+            </div>
+        </div>
+
+        <div class="main-layout">
+            <div class="demo-column">
+                <h2>Event Patterns</h2>
+                <div class="demo-section">
+                    <h3>Publisher-Subscriber Pattern</h3>
+                    <div class="controls">
+                        <button onclick="createPublisher()">Create Publisher</button>
+                        <button onclick="addSubscribers()">Add Subscribers</button>
+                        <button onclick="publishNews()">Publish News</button>
+                    </div>
+                    <div class="status" id="pubsub-output"></div>
+                </div>
+
+                <div class="demo-section">
+                    <h3>Component Communication</h3>
+                    <div class="controls">
+                        <button onclick="setupComponents()">Setup Components</button>
+                        <button onclick="componentInteraction()">Trigger Interaction</button>
+                        <button onclick="cascadeEvents()">Cascade Events</button>
+                    </div>
+                    <div class="status" id="component-output"></div>
+                </div>
+
+                <div class="demo-section">
+                    <h3>Handler Counting & Management</h3>
+                    <div class="controls">
+                        <button onclick="handlerCountDemo()">Count Handlers</button>
+                        <button onclick="benchmarkEmission()">Benchmark Emission</button>
+                    </div>
+                    <div class="status" id="count-output"></div>
+                </div>
+            </div>
+
+            <div class="api-column">
+                <h2>Advanced Usage</h2>
+                
+                <div class="api-section">
+                    <h3>Event Management</h3>
+                    <div class="api-description">
+                        <strong>on(event, handler, slot)</strong> - Subscribe to events<br>
+                        • event: String event name<br>
+                        • handler: Function to call when event is emitted<br>
+                        • slot: Optional string key for handler replacement<br><br>
+                        <strong>emit(event, ...args)</strong> - Emit events to all listeners<br>
+                        • Returns the number of handlers that were called<br>
+                        • Passes all additional arguments to handlers<br><br>
+                        <strong>off(event, handler)</strong> - Remove specific handler<br>
+                        • If handler omitted, removes all handlers for event
+                    </div>
+                </div>
+
+                <div class="api-section">
+                    <h3>Slot System</h3>
+                    <div class="api-description">
+                        The slot system prevents duplicate handlers by using string keys:<br>
+                        • Same slot key replaces previous handler<br>
+                        • Useful for UI updates, state management<br>
+                        • Prevents memory leaks from repeated subscriptions<br>
+                        • Slot keys are per-event, not global
+                    </div>
+                    <pre class="code-example">
+<span class="code-comment">// Without slots: multiple handlers</span>
+emitter.on(<span class="string">'render'</span>, updateUI);
+emitter.on(<span class="string">'render'</span>, updateUI); <span class="code-comment">// Now 2 handlers</span>
+
+<span class="code-comment">// With slots: automatic replacement</span>
+emitter.on(<span class="string">'render'</span>, updateUI, <span class="string">'ui'</span>);
+emitter.on(<span class="string">'render'</span>, updateUI, <span class="string">'ui'</span>); <span class="code-comment">// Still 1 handler</span>
+</pre>
+                </div>
+
+                <div class="api-section">
+                    <h3>Performance Patterns</h3>
+                    <div class="api-description">
+                        <strong>Event Namespacing:</strong> Use dot notation for hierarchical events<br>
+                        <strong>Batch Operations:</strong> Group related events for efficiency<br>
+                        <strong>Handler Cleanup:</strong> Use slots or off() to prevent memory leaks<br>
+                        <strong>Conditional Emission:</strong> Check handler count before expensive operations
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="main-layout">
+            <div class="demo-column">
+                
+            </div>
+
+            <div class="api-column">
+                
+                <div class="api-section">
+                    <h3>Memory Management</h3>
+                    <div class="api-description">
+                        <strong>Use Slots:</strong> Prevent duplicate handlers with slot keys<br>
+                        <strong>Clean Up:</strong> Call off() when components are destroyed<br>
+                        <strong>Self-removal:</strong> Use 'remove_handler' return for one-time events<br>
+                        <strong>Clear All:</strong> Use clear() to remove all listeners for an event
+                    </div>
+                </div>
+
+                <div class="api-section">
+                    <h3>Common Patterns</h3>
+                    <pre class="code-example">
+<span class="code-comment">// Request-Response pattern</span>
+emitter.on(<span class="string">'data.request'</span>, (type, callback) => {
+  <span class="keyword">const</span> data = fetchData(type);
+  callback(data);
+});
+
+<span class="code-comment">// State change notifications</span>
+emitter.on(<span class="string">'state.change'</span>, (oldState, newState) => {
+  updateUI(newState);
+  logStateChange(oldState, newState);
+});
+
+<span class="code-comment">// Error handling</span>
+emitter.on(<span class="string">'error'</span>, (error, context) => {
+  console.error(<span class="string">'Error in'</span>, context, error);
+  showErrorToUser(error.message);
+});
+</pre>
+                </div>
+            </div>
+        </div>
+
+        <div class="main-layout">
+            <div class="demo-column">
+                <h2>Library Info</h2>
+                <div class="demo-section">
+                    <div class="status" id="libraryInfo">Loading library information...</div>
+                    
+                    <h3>Event Statistics:</h3>
+                    <div id="eventStats" class="status"></div>
+                </div>
+            </div>
+
+            <div class="api-column">
+                
+
+            </div>
+        </div>
+    </div>
+
+    <script src="u-events.js"></script>
+    <script>
+        const demoEmitter = new EventEmitter();
+        const interactiveEmitter = new EventEmitter();
+        const publisherEmitter = new EventEmitter();
+        const gameEmitter = new EventEmitter();
+        const uiEmitter = new EventEmitter();
+        
+        let listenerCount = 0;
+        let gameStats = {
+            eventsEmitted: 0,
+            handlersExecuted: 0,
+            totalEvents: 0
+        };
+
+        function log(message, outputId = 'basic-output') {
+            const output = document.getElementById(outputId);
+            const timestamp = new Date().toLocaleTimeString();
+            output.textContent += `[${timestamp}] ${message}\n`;
+            output.scrollTop = output.scrollHeight;
+            
+            flashIndicator('basicIndicator');
+        }
+
+        function clearOutput(outputId) {
+            document.getElementById(outputId).textContent = '';
+        }
+
+        function flashIndicator(indicatorId) {
+            const indicator = document.getElementById(indicatorId);
+            if (indicator) {
+                indicator.classList.remove('active');
+                setTimeout(() => indicator.classList.add('active'), 10);
+                setTimeout(() => indicator.classList.remove('active'), 500);
+            }
+        }
+
+        function basicDemo() {
+            clearOutput('basic-output');
+            
+            demoEmitter.on('greeting', (name) => {
+                log(`Hello, ${name}!`, 'basic-output');
+            });
+            
+            demoEmitter.emit('greeting', 'World');
+            demoEmitter.emit('greeting', 'EventEmitter');
+            gameStats.eventsEmitted += 2;
+            updateEventStats();
+        }
+
+        function multipleListenersDemo() {
+            demoEmitter.on('multi-test', (data) => {
+                log(`Handler 1: ${data}`, 'basic-output');
+            });
+            
+            demoEmitter.on('multi-test', (data) => {
+                log(`Handler 2: ${data}`, 'basic-output');
+            });
+            
+            demoEmitter.on('multi-test', (data) => {
+                log(`Handler 3: ${data}`, 'basic-output');
+            });
+            
+            log('Added 3 listeners for "multi-test" event', 'basic-output');
+        }
+
+        function emitToMultiple() {
+            const count = demoEmitter.emit('multi-test', 'Hello from multiple demo!');
+            log(`Event emitted to ${count} handlers`, 'basic-output');
+            gameStats.eventsEmitted++;
+            gameStats.handlersExecuted += count;
+            updateEventStats();
+        }
+
+        function slotDemo() {
+            clearOutput('advanced-output');
+            
+            demoEmitter.on('slot-event', (msg) => {
+                log(`Slot handler v1: ${msg}`, 'advanced-output');
+            }, 'demo-slot');
+            
+            log('Added handler with slot key "demo-slot"', 'advanced-output');
+        }
+
+        function replaceSlotHandler() {
+            demoEmitter.on('slot-event', (msg) => {
+                log(`Slot handler v2 (replaced): ${msg}`, 'advanced-output');
+            }, 'demo-slot');
+            
+            log('Replaced handler using same slot key', 'advanced-output');
+        }
+
+        function emitSlotEvent() {
+            const count = demoEmitter.emit('slot-event', 'Testing slot replacement');
+            log(`Emitted to ${count} handler(s)`, 'advanced-output');
+            gameStats.eventsEmitted++;
+            gameStats.handlersExecuted += count;
+            updateEventStats();
+        }
+
+        let autoRemovalCount = 0;
+        function autoRemovalDemo() {
+            demoEmitter.on('auto-remove', (msg) => {
+                autoRemovalCount++;
+                log(`Auto-removal handler called ${autoRemovalCount} time(s): ${msg}`, 'advanced-output');
+                return 'remove_handler';
+            });
+            
+            log('Added self-removing handler', 'advanced-output');
+        }
+
+        function triggerAutoRemoval() {
+            const count = demoEmitter.emit('auto-remove', 'This handler will remove itself');
+            log(`Handlers called: ${count}`, 'advanced-output');
+            
+            setTimeout(() => {
+                const count2 = demoEmitter.emit('auto-remove', 'This should call 0 handlers');
+                log(`Second emit - handlers called: ${count2}`, 'advanced-output');
+            }, 1000);
+            
+            gameStats.eventsEmitted += 2;
+            gameStats.handlersExecuted += count;
+            updateEventStats();
+        }
+
+        function addListener() {
+            const eventName = document.getElementById('event-name').value;
+            if (!eventName) return;
+            
+            listenerCount++;
+            const listenerId = listenerCount;
+            
+            interactiveEmitter.on(eventName, (data) => {
+                const logEl = document.getElementById('event-log');
+                logEl.textContent += `[Listener ${listenerId}] ${eventName}: ${data}\n`;
+                logEl.scrollTop = logEl.scrollHeight;
+            });
+            
+            const logEl = document.getElementById('event-log');
+            logEl.textContent += `Added listener ${listenerId} for "${eventName}"\n`;
+            logEl.scrollTop = logEl.scrollHeight;
+            
+            updateListenerCounter();
+        }
+
+        function emitCustomEvent() {
+            const eventName = document.getElementById('event-name').value;
+            const eventData = document.getElementById('event-data').value;
+            
+            if (!eventName) return;
+            
+            const count = interactiveEmitter.emit(eventName, eventData);
+            const logEl = document.getElementById('event-log');
+            logEl.textContent += `Emitted "${eventName}" to ${count} listener(s)\n`;
+            logEl.scrollTop = logEl.scrollHeight;
+            
+            gameStats.eventsEmitted++;
+            gameStats.handlersExecuted += count;
+            updateEventStats();
+        }
+
+        function removeAllListeners() {
+            const eventName = document.getElementById('event-name').value;
+            if (!eventName) return;
+            
+            interactiveEmitter.off(eventName);
+            
+            const logEl = document.getElementById('event-log');
+            logEl.textContent += `Removed all listeners for "${eventName}"\n`;
+            logEl.scrollTop = logEl.scrollHeight;
+        }
+
+        function updateListenerCounter() {
+            const counter = document.getElementById('listenerCount');
+            counter.textContent = listenerCount.toString();
+        }
+
+        function createPublisher() {
+            clearOutput('pubsub-output');
+            log('Publisher created', 'pubsub-output');
+        }
+
+        function addSubscribers() {
+            publisherEmitter.on('news', (headline, content) => {
+                log(`News Subscriber: ${headline}`, 'pubsub-output');
+            });
+            
+            publisherEmitter.on('news', (headline, content) => {
+                log(`Mobile App: New article "${headline}"`, 'pubsub-output');
+            });
+            
+            publisherEmitter.on('news', (headline, content) => {
+                log(`Email Service: Sending newsletter with "${headline}"`, 'pubsub-output');
+            });
+            
+            log('Added 3 subscribers to news events', 'pubsub-output');
+        }
+
+        function publishNews() {
+            const headlines = [
+                'EventEmitter Pattern Increases Developer Productivity',
+                'New Features Added to Event System',
+                'Best Practices for Event-Driven Architecture'
+            ];
+            
+            const headline = headlines[Math.floor(Math.random() * headlines.length)];
+            const count = publisherEmitter.emit('news', headline, 'Article content here...');
+            log(`Published "${headline}" to ${count} subscribers`, 'pubsub-output');
+            
+            gameStats.eventsEmitted++;
+            gameStats.handlersExecuted += count;
+            updateEventStats();
+        }
+
+        function setupComponents() {
+            clearOutput('component-output');
+            
+            demoEmitter.on('ui.update', (data) => {
+                log(`UI Component: Updating display with ${data}`, 'component-output');
+            });
+            
+            demoEmitter.on('data.request', (type) => {
+                log(`Data Component: Fetching ${type} data`, 'component-output');
+                setTimeout(() => {
+                    demoEmitter.emit('data.response', `${type} data loaded`);
+                }, 500);
+            });
+            
+            demoEmitter.on('data.response', (data) => {
+                log(`Logger: Data received - ${data}`, 'component-output');
+            });
+            
+            log('Components setup complete', 'component-output');
+        }
+
+        function componentInteraction() {
+            demoEmitter.emit('data.request', 'user');
+            gameStats.eventsEmitted++;
+            updateEventStats();
+        }
+
+        function cascadeEvents() {
+            demoEmitter.emit('ui.update', 'new theme');
+            setTimeout(() => {
+                demoEmitter.emit('ui.update', 'user preferences');
+            }, 300);
+            setTimeout(() => {
+                demoEmitter.emit('ui.update', 'layout changes');
+            }, 600);
+            
+            gameStats.eventsEmitted += 3;
+            updateEventStats();
+        }
+
+        function handlerCountDemo() {
+            clearOutput('count-output');
+            
+            demoEmitter.on('count-test', () => log('Handler A executed', 'count-output'));
+            demoEmitter.on('count-test', () => log('Handler B executed', 'count-output'));
+            demoEmitter.on('count-test', () => log('Handler C executed', 'count-output'));
+            
+            const count = demoEmitter.emit('count-test');
+            log(`Total handlers executed: ${count}`, 'count-output');
+            
+            gameStats.eventsEmitted++;
+            gameStats.handlersExecuted += count;
+            updateEventStats();
+        }
+
+        function benchmarkEmission() {
+            const start = performance.now();
+            let totalHandlers = 0;
+            
+            for (let i = 0; i < 1000; i++) {
+                totalHandlers += demoEmitter.emit('count-test');
+            }
+            
+            const end = performance.now();
+            log(`Benchmark: 1000 emissions took ${(end - start).toFixed(2)}ms`, 'count-output');
+            log(`Total handlers called: ${totalHandlers}`, 'count-output');
+            
+            gameStats.eventsEmitted += 1000;
+            gameStats.handlersExecuted += totalHandlers;
+            updateEventStats();
+        }
+
+        function setupGameDemo() {
+            clearOutput('game-output');
+            
+            gameEmitter.on('player.move', (x, y) => {
+                log(`Player moved to (${x}, ${y})`, 'game-output');
+            });
+            
+            gameEmitter.on('enemy.spawn', (type, level) => {
+                log(`${type} enemy spawned at level ${level}`, 'game-output');
+            });
+            
+            gameEmitter.on('score.update', (points, combo) => {
+                log(`Score: ${points} points (${combo}x combo)`, 'game-output');
+            });
+            
+            gameEmitter.on('game.over', (finalScore) => {
+                log(`Game Over! Final score: ${finalScore}`, 'game-output');
+            });
+            
+            log('Game event system initialized', 'game-output');
+        }
+
+        function simulateGameplay() {
+            const actions = [
+                () => gameEmitter.emit('player.move', Math.floor(Math.random() * 10), Math.floor(Math.random() * 10)),
+                () => gameEmitter.emit('enemy.spawn', ['goblin', 'orc', 'dragon'][Math.floor(Math.random() * 3)], Math.floor(Math.random() * 5) + 1),
+                () => gameEmitter.emit('score.update', Math.floor(Math.random() * 1000), Math.floor(Math.random() * 5) + 1),
+            ];
+            
+            let actionCount = 0;
+            const gameLoop = setInterval(() => {
+                const action = actions[Math.floor(Math.random() * actions.length)];
+                action();
+                actionCount++;
+                gameStats.eventsEmitted++;
+                
+                if (actionCount >= 8) {
+                    clearInterval(gameLoop);
+                    setTimeout(() => {
+                        gameEmitter.emit('game.over', Math.floor(Math.random() * 10000));
+                        gameStats.eventsEmitted++;
+                        updateEventStats();
+                    }, 1000);
+                }
+            }, 500);
+            
+            updateEventStats();
+        }
+
+        function showGameStats() {
+            log(`Game Statistics:`, 'game-output');
+            log(`Events emitted: ${gameStats.eventsEmitted}`, 'game-output');
+            log(`Handlers executed: ${gameStats.handlersExecuted}`, 'game-output');
+            log(`Avg handlers per event: ${(gameStats.handlersExecuted / gameStats.eventsEmitted || 0).toFixed(2)}`, 'game-output');
+        }
+
+        // UI Demo
+        function setupUIDemo() {
+            clearOutput('ui-output');
+            
+            uiEmitter.on('button.click', (buttonId) => {
+                log(`Button clicked: ${buttonId}`, 'ui-output');
+            });
+            
+            uiEmitter.on('form.submit', (formData) => {
+                log(`Form submitted: ${JSON.stringify(formData)}`, 'ui-output');
+            });
+            
+            uiEmitter.on('modal.open', (modalType) => {
+                log(`Modal opened: ${modalType}`, 'ui-output');
+            });
+            
+            uiEmitter.on('theme.change', (theme) => {
+                log(`Theme changed to: ${theme}`, 'ui-output');
+            });
+            
+            log('UI event handlers registered', 'ui-output');
+        }
+
+        function simulateUserActions() {
+            const actions = [
+                () => uiEmitter.emit('button.click', 'submit-btn'),
+                () => uiEmitter.emit('button.click', 'cancel-btn'),
+                () => uiEmitter.emit('form.submit', { name: 'John', email: 'john@example.com' }),
+                () => uiEmitter.emit('modal.open', 'settings'),
+                () => uiEmitter.emit('modal.open', 'help'),
+                () => uiEmitter.emit('theme.change', 'dark'),
+                () => uiEmitter.emit('theme.change', 'light'),
+            ];
+            
+            actions.forEach((action, index) => {
+                setTimeout(() => {
+                    action();
+                    gameStats.eventsEmitted++;
+                    if (index === actions.length - 1) {
+                        updateEventStats();
+                    }
+                }, index * 400);
+            });
+        }
+
+        function updateLibraryInfo() {
+            const info = document.getElementById('libraryInfo');
+            info.textContent = `
+EventEmitter Instances: Multiple active instances
+Global Event Statistics: ${gameStats.totalEvents} total events processed
+Memory Usage: Efficient slot-based deduplication
+Performance: Sub-millisecond event emission
+            `.trim();
+        }
+
+        function updateEventStats() {
+            gameStats.totalEvents = gameStats.eventsEmitted;
+            const stats = document.getElementById('eventStats');
+            stats.textContent = `
+Events Emitted: ${gameStats.eventsEmitted}
+Handlers Executed: ${gameStats.handlersExecuted}
+Average Handlers per Event: ${(gameStats.handlersExecuted / gameStats.eventsEmitted || 0).toFixed(2)}
+Active Listeners: ${listenerCount}
+            `.trim();
+        }
+
+        document.addEventListener('DOMContentLoaded', function() {
+            updateLibraryInfo();
+            updateEventStats();
+            updateListenerCounter();
+            
+            setInterval(updateLibraryInfo, 3000);
+        });
+    </script>
+</body>
+</html>

site/examples/uce-starter/js/u-events.js

@@ -0,0 +1,92 @@
+(function (root, factory) {
+	if (typeof exports === 'object' && typeof module !== 'undefined') {
+		module.exports = factory();
+	} else if (typeof define === 'function' && define.amd) {
+		define([], factory);
+	} else {
+		root.EventEmitter = factory();
+	}
+}(typeof self !== 'undefined' ? self : this, function () {
+
+class EventEmitter {
+	constructor() {
+		/** Map<eventName, Map<slotKey|Symbol, Function>> */
+		this._topics = new Map();
+	}
+
+	/**
+	 * Subscribe to `topic`. If `slot_key` is provided (truthy),
+	 * it dedupes by that key; otherwise a unique Symbol is used.
+	 * Returns an unsubscribe fn.
+	 */
+	on(topic, handler, slot_key = null) {
+		let map = this._topics.get(topic);
+		if (!map) {
+			map = new Map();
+			this._topics.set(topic, map);
+		}
+		// use the provided slot_key or a fresh Symbol()
+		const key = slot_key != null ? slot_key : Symbol();
+		map.set(key, handler);
+		return () => this.off(topic, key);
+	}
+
+	/**
+	 * Unsubscribe by handler function or by slot_key.
+	 */
+	off(topic, handlerOrSlotKey) {
+		const map = this._topics.get(topic);
+		if (!map) return;
+
+		// if it matches a slotKey directly, remove it
+		if (map.has(handlerOrSlotKey)) {
+			map.delete(handlerOrSlotKey);
+		} else {
+			// otherwise assume it's a function: remove all matching fns
+			for (const [key, fn] of map.entries()) {
+				if (fn === handlerOrSlotKey) {
+					map.delete(key);
+				}
+			}
+		}
+
+		if (map.size === 0) {
+			this._topics.delete(topic);
+		}
+	}
+
+	/**
+	 * Emit to all handlers on `topic`. Handlers returning
+	 * 'remove_handler' are auto-removed.
+	 * Returns the number of handlers invoked.
+	 */
+	emit(topic, ...args) {
+		let count = 0;
+		const map = this._topics.get(topic);
+		if (!map) return count;
+
+		for (const [key, fn] of Array.from(map.entries())) {
+			const res = fn(...args);
+			count++;
+			if (res === 'remove_handler') {
+				map.delete(key);
+			}
+		}
+
+		if (map.size === 0) {
+			this._topics.delete(topic);
+		}
+		return count;
+	}
+
+	clear(topic) {
+		if (topic) {
+			this._topics.delete(topic);
+		}
+		return this;
+	}
+}
+
+return EventEmitter;
+
+}));

site/examples/uce-starter/js/u-format.js

@@ -0,0 +1,136 @@
+(function (root, factory) {
+	if (typeof define === 'function' && define.amd) {
+		define([], factory);
+	} else if (typeof module === 'object' && module.exports) {
+		module.exports = factory();
+	} else {
+		root.UFormat = factory();
+	}
+}(typeof self !== 'undefined' ? self : this, function () {
+	'use strict';
+
+	const BYTE_UNITS = ['B', 'KB', 'MB', 'GB', 'TB', 'PB'];
+
+	function scaleBytes(bytes) {
+		let value = Number(bytes || 0);
+		let unitIndex = 0;
+		while (Math.abs(value) >= 1024 && unitIndex < BYTE_UNITS.length - 1) {
+			value /= 1024;
+			unitIndex += 1;
+		}
+		return { value, unitIndex };
+	}
+
+	function formatBytes(bytes) {
+		if (bytes == null || bytes === '') return '--';
+		const scaled = scaleBytes(bytes);
+		const decimals = scaled.unitIndex === 0 ? 0 : 1;
+		return `${scaled.value.toFixed(decimals)} ${BYTE_UNITS[scaled.unitIndex]}`;
+	}
+
+	function formatDiskBytes(bytes) {
+		if (bytes == null || bytes === '') return '--';
+		const scaled = scaleBytes(bytes);
+		const decimals = scaled.unitIndex >= 4 ? 2 : scaled.unitIndex >= 1 ? 1 : 0;
+		return `${scaled.value.toFixed(decimals)} ${BYTE_UNITS[scaled.unitIndex]}`;
+	}
+
+	function formatCount(value) {
+		const number = Number(value);
+		if (!Number.isFinite(number)) return '--';
+		return number.toLocaleString();
+	}
+
+	function formatDurationMs(value) {
+		const number = Number(value);
+		if (!Number.isFinite(number)) return '--';
+		if (Math.abs(number) >= 1000) {
+			return `${(number / 1000).toFixed(number >= 10000 ? 0 : 1)} s`;
+		}
+		return `${number.toFixed(number >= 100 ? 0 : 1)} ms`;
+	}
+
+	function parseUnitNumber(text) {
+		const normalized = String(text || '').trim().toLowerCase().replace(/,/g, '');
+		if (!normalized) return null;
+
+		const pure = normalized.match(/^([-+]?\d*\.?\d+)$/);
+		if (pure) {
+			return Number(pure[1]);
+		}
+
+		const withUnit = normalized.match(/^([-+]?\d*\.?\d+)\s*([a-z%][a-z0-9\/_-]*)$/);
+		if (!withUnit) {
+			return null;
+		}
+
+		const value = Number(withUnit[1]);
+		let unit = withUnit[2];
+		if (!Number.isFinite(value)) {
+			return null;
+		}
+
+		if (unit.endsWith('/s')) {
+			unit = unit.slice(0, -2);
+		}
+
+		const bytes = {
+			b: 1,
+			kb: 1024,
+			kib: 1024,
+			mb: 1024 ** 2,
+			mib: 1024 ** 2,
+			gb: 1024 ** 3,
+			gib: 1024 ** 3,
+			tb: 1024 ** 4,
+			tib: 1024 ** 4,
+			pb: 1024 ** 5,
+			pib: 1024 ** 5,
+		};
+
+		if (Object.prototype.hasOwnProperty.call(bytes, unit)) {
+			return value * bytes[unit];
+		}
+
+		const durations = {
+			ms: 0.001,
+			s: 1,
+			sec: 1,
+			secs: 1,
+			second: 1,
+			seconds: 1,
+			m: 60,
+			min: 60,
+			mins: 60,
+			minute: 60,
+			minutes: 60,
+			h: 3600,
+			hr: 3600,
+			hrs: 3600,
+			hour: 3600,
+			hours: 3600,
+			d: 86400,
+			day: 86400,
+			days: 86400,
+		};
+
+		if (Object.prototype.hasOwnProperty.call(durations, unit)) {
+			return value * durations[unit];
+		}
+
+		if (unit === '%') {
+			return value;
+		}
+
+		return null;
+	}
+
+	return {
+		formatBytes,
+		formatCount,
+		formatDiskBytes,
+		formatDurationMs,
+		parseUnitNumber,
+		scaleBytes,
+	};
+}));

site/examples/uce-starter/js/u-macrobars-demo.html

@@ -0,0 +1,977 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>U-Macrobars.js Demo</title>
+    <style>
+        :root {
+            --space: 8px;
+            --radius: 5px;
+            
+            --gray: #6c757d;
+            --gray-bg: #f5f5f5;
+            --blue: #007acc;
+            --green: #28a745;
+            --white: white;
+            --dark: #333;
+            
+            --max-width: 1400px;
+            --sidebar: 400px;
+        }
+        
+        * { box-sizing: border-box; }
+        
+        body { 
+            font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            max-width: var(--max-width);
+            margin: 0 auto;
+            padding: var(--space);
+            background: var(--gray-bg);
+        }
+        
+        .container { 
+            background: var(--white);
+            padding: calc(var(--space) * 1.5);
+            border-radius: var(--radius);
+        }
+        
+        .main-layout { 
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: calc(var(--space) * 1.5);
+        }
+        
+        .api-column { 
+            background: var(--gray-bg);
+            padding: var(--space);
+            border-radius: var(--radius);
+            border-left: 4px solid var(--green);
+        }
+        
+        h1 { 
+            color: var(--dark);
+            text-align: center;
+            margin-bottom: calc(var(--space) * 1.5);
+            grid-column: 1 / -1;
+        }
+        
+        h2 { 
+            color: var(--gray);
+            border-bottom: 2px solid #e0e0e0;
+            padding-bottom: var(--space);
+            margin-top: calc(var(--space) * 1.5);
+        }
+        
+        .demo-section { 
+            margin: var(--space) 0;
+            padding: var(--space);
+            background: var(--gray-bg);
+            border-radius: var(--radius);
+            border-left: 4px solid var(--blue);
+        }
+        
+        .controls, .slider-group { 
+            display: flex;
+            gap: var(--space);
+            margin: 15px 0;
+        }
+        
+        .controls { flex-wrap: wrap; }
+        .slider-group { align-items: center; }
+        .feature-grid { display: grid; gap: var(--space); margin: var(--space) 0; }
+        
+        button { 
+            background: var(--blue);
+            color: var(--white);
+            border: none;
+            padding: var(--space) var(--space);
+            border-radius: var(--radius);
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+        
+        button:hover { filter: brightness(0.9); }
+        button:disabled { background: #ccc; cursor: not-allowed; }
+        input[type="range"] { flex: 1; max-width: 200px; }
+        
+        .status, .code-example { 
+            font-family: monospace;
+            padding: var(--space);
+            border-radius: var(--radius);
+            margin: var(--space) 0;
+        }
+        
+        .status { 
+            background: var(--dark);
+            color: #0f0;
+            white-space: pre-wrap;
+            max-height: 150px;
+            overflow-y: auto;
+        }
+        
+        .code-example { 
+            background: #2d3748;
+            color: #e2e8f0;
+            padding: 15px;
+            overflow-x: auto;
+            margin: var(--space) 0;
+        }
+        
+        .highlight { color: #68d391; }
+        .keyword { color: #fbb6ce; }
+        .string { color: #fbd38d; }
+        
+        .template-visual { 
+            height: 100px;
+            background: linear-gradient(45deg, #667eea, #764ba2);
+            border-radius: var(--radius);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: var(--white);
+            font-weight: bold;
+            margin: 15px 0;
+            position: relative;
+            overflow: hidden;
+        }
+        
+        .template-animation { 
+            position: absolute;
+            inset: 0;
+            opacity: 0.3;
+            background: repeating-linear-gradient(90deg, transparent 0 10px, rgba(255,255,255,0.2) 10px 20px);
+            animation: slide 3s linear infinite;
+        }
+        
+        @keyframes slide { to { transform: translateX(20px); } }
+        
+        .api-section { margin: 15px 0; }
+        .api-section h3 { 
+            color: var(--green);
+            margin: 0 0 var(--space) 0;
+        }
+        
+        .api-method { 
+            font-family: monospace;
+            margin: 3px 0;
+            color: var(--gray);
+        }
+        
+        .api-method .method-name { color: var(--blue); font-weight: bold; }
+        .api-method .return-type { color: #6f42c1; }
+        .api-method .param { color: #e83e8c; }
+        
+        .api-description {
+            margin: var(--space) 0;
+        }
+        
+        .api-options {
+            color: var(--gray);
+        }
+        
+        .template-code { 
+            background: #2d3748;
+            color: #e2e8f0;
+            padding: 15px;
+            border-radius: var(--radius);
+            margin: var(--space) 0;
+            overflow-x: auto;
+        }
+        
+        .output { 
+            background: var(--white);
+            border: 2px solid var(--green);
+            padding: var(--space);
+            border-radius: var(--radius);
+            margin: var(--space) 0;
+            min-height: 40px;
+        }
+        
+        .code-comment {
+            color: #68d391;
+        }
+        
+        textarea {
+            width: 100%;
+            padding: var(--space);
+            border: 1px solid #ccc;
+            border-radius: var(--radius);
+            font-family: monospace;
+            margin: var(--space) 0;
+            resize: vertical;
+        }
+        
+        .interactive-editor {
+            background: var(--white);
+            padding: calc(var(--space) * 1.5);
+            border-radius: var(--radius);
+            border: 2px solid var(--blue);
+        }
+        
+        .help-text {
+            color: var(--gray);
+            margin: var(--space) 0;
+            font-style: italic;
+        }
+        
+        .feature-grid button {
+            padding: calc(var(--space) * 1.5) var(--space);
+            font-size: 14px;
+            transition: all 0.2s ease;
+        }
+        
+        .feature-grid button:hover:not(:disabled) {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 8px rgba(0, 122, 204, 0.3);
+        }
+        
+        .feature-grid button:active:not(:disabled) {
+            transform: translateY(0);
+        }
+        
+        @media (max-width: 1200px) {
+            .main-layout { grid-template-columns: 1fr; }
+        }
+    </style>
+</head>
+<body onload="initializeDemos();">
+    <div class="container">
+        <h1>U-Macrobars.js Demo</h1>
+        
+        <div class="main-layout">
+            <div class="demo-column">
+                <h2>Basic Field Output</h2>
+                <div class="demo-section">
+                    <div class="template-code">{{name}} is {{age}} years old and works as {{job or "unemployed"}}</div>
+                    <div class="output" id="basic-output"></div>
+                    <div class="controls">
+                        <button onclick="runBasicDemo()">Run Basic Demo</button>
+                        <button onclick="runBasicDemoVariant()">Try Different Data</button>
+                    </div>
+                </div>
+
+                <div class="demo-section">
+                    <h3>Number Formatting</h3>
+                    <div class="template-code">Price: ${{%price}} | Large Number: {{~bigNumber}}</div>
+                    <div class="output" id="number-output"></div>
+                    <div class="controls">
+                        <button onclick="runNumberDemo()">Format Numbers</button>
+                        <button onclick="runNumberVariants()">Try Different Numbers</button>
+                    </div>
+                </div>
+
+                <div class="demo-section">
+                    <h3>Default Values & Safety</h3>
+                    <div class="template-code">{{username or "Guest"}} | {{profile.bio or "No bio available"}}</div>
+                    <div class="output" id="default-output"></div>
+                    <div class="controls">
+                        <button onclick="runDefaultDemo()">Test Defaults</button>
+                        <button onclick="runSafetyDemo()">HTML Safety Demo</button>
+                    </div>
+                </div>
+            </div>
+
+            <div class="api-column">
+                <h2>Field Output API</h2>
+                
+                <div class="api-section">
+                    <h3>Basic Syntax</h3>
+                    <div class="api-method"><span class="method-name">{{field}}</span> → <span class="return-type">Safe HTML output</span></div>
+                    <div class="api-method"><span class="method-name">{{{field}}}</span> → <span class="return-type">Raw HTML output</span></div>
+                    <div class="api-method"><span class="method-name">{{:variable}}</span> → <span class="return-type">Direct variable</span></div>
+                    <div class="api-method"><span class="method-name">{{field or "default"}}</span> → <span class="return-type">With fallback</span></div>
+                </div>
+
+                <div class="api-section">
+                    <h3>Number Formatting</h3>
+                    <div class="api-method"><span class="method-name">{{%number}}</span> → <span class="return-type">2 decimal places</span></div>
+                    <div class="api-method"><span class="method-name">{{~number}}</span> → <span class="return-type">Rounded (1k, 1M)</span></div>
+                </div>
+
+                <div class="api-section">
+                    <h3>Examples</h3>
+                    <pre class="code-example">
+<span class="code-comment">// Basic field output</span>
+<span class="keyword">const</span> template = Macrobars.compile(<span class="string">'{{name}}'</span>);
+<span class="keyword">const</span> result = template({name: <span class="string">'John'</span>});
+
+<span class="code-comment">// With defaults</span>
+<span class="keyword">const</span> withDefault = <span class="string">'{{title or "Untitled"}}'</span>;
+
+<span class="code-comment">// Number formatting</span>
+<span class="keyword">const</span> price = <span class="string">'${{%cost}}'</span>; <span class="code-comment">// $12.34</span>
+<span class="keyword">const</span> count = <span class="string">'{{~views}}'</span>;  <span class="code-comment">// 1.2k</span>
+</pre>
+                </div>
+            </div>
+        </div>
+
+        <div class="main-layout">
+            <div class="demo-column">
+                <h2>Control Structures</h2>
+                <div class="demo-section">
+                    <h3>Conditionals</h3>
+                    <div class="template-code">{{#if isLoggedIn}}
+Welcome back, {{username}}!
+{{#else}}
+Please log in to continue.
+{{/if}}</div>
+                    <div class="output" id="conditional-output"></div>
+                    <div class="controls">
+                        <button onclick="runConditionalDemo(true)">👤 Logged In</button>
+                        <button onclick="runConditionalDemo(false)">🚪 Not Logged In</button>
+                    </div>
+                </div>
+
+                <div class="demo-section">
+                    <h3>Loops & Iteration</h3>
+                    <div class="template-code">{{#each items}}
+• {{number}}. {{name}} - ${{price}}
+{{/each}}</div>
+                    <div class="output" id="loop-output"></div>
+                    <div class="controls">
+                        <button onclick="runLoopDemo()">🔄 Process List</button>
+                        <button onclick="runNamedLoopDemo()">📝 Named Iteration</button>
+                    </div>
+                </div>
+
+                <div class="demo-section">
+                    <h3>Equality & Lookup</h3>
+                    <div class="template-code">{{#eq status "active"}}User is active{{/eq}}
+{{lookup user "permissions"}}</div>
+                    <div class="output" id="equality-output"></div>
+                    <div class="controls">
+                        <button onclick="runEqualityDemo()">⚖️ Test Equality</button>
+                        <button onclick="runLookupDemo()">🔍 Dynamic Lookup</button>
+                    </div>
+                </div>
+            </div>
+
+            <div class="api-column">
+                <h2>Control Flow API</h2>
+                
+                <div class="api-section">
+                    <h3>Conditionals</h3>
+                    <div class="api-method"><span class="method-name">{{#if condition}}</span>...{{/if}}</div>
+                    <div class="api-method"><span class="method-name">{{#else}}</span> → <span class="return-type">Alternative branch</span></div>
+                    <div class="api-description">
+                        Conditional rendering based on truthy values. Supports nested conditions.
+                    </div>
+                </div>
+
+                <div class="api-section">
+                    <h3>Loops</h3>
+                    <div class="api-method"><span class="method-name">{{#each items}}</span>...{{/each}}</div>
+                    <div class="api-method"><span class="method-name">{{#each items as item}}</span>...{{/each}}</div>
+                    <div class="api-description">
+                        • Standard: <strong>data</strong> becomes current item<br>
+                        • Named: <strong>item</strong> becomes current item, data preserved
+                    </div>
+                </div>
+
+                <div class="api-section">
+                    <h3>Comparison & Lookup</h3>
+                    <div class="api-method"><span class="method-name">{{#eq val1 val2}}</span>...{{/eq}}</div>
+                    <div class="api-method"><span class="method-name">{{eq val1 val2}}</span> → <span class="return-type">"true" or ""</span></div>
+                    <div class="api-method"><span class="method-name">{{#lookup obj key}}</span>...{{/lookup}}</div>
+                    <div class="api-method"><span class="method-name">{{lookup obj key}}</span> → <span class="return-type">value or ""</span></div>
+                </div>
+
+                <div class="api-section">
+                    <h3>Examples</h3>
+                    <pre class="code-example">
+<span class="code-comment">// Conditionals</span>
+<span class="string">'{{#if user.isAdmin}}Admin Panel{{/if}}'</span>
+
+<span class="code-comment">// Named loops</span>
+<span class="string">'{{#each products as product}}'</span>
+  <span class="string">'{{product.name}} - {{data.storeName}}'</span>
+<span class="string">'{{/each}}'</span>
+
+<span class="code-comment">// Equality & lookup</span>
+<span class="string">'{{#eq user.role "admin"}}Secret{{/eq}}'</span>
+<span class="string">'{{lookup config "theme"}}'</span>
+</pre>
+                </div>
+            </div>
+        </div>
+
+        <div class="main-layout">
+            <div class="demo-column">
+                <h2>Advanced Features</h2>
+                <div class="demo-section">
+                    <h3>Event Binding</h3>
+                    <div class="template-code">&lt;button {{@click="handleClick"}}&gt;Click Count: {{clickCount}}&lt;/button&gt;</div>
+                    <div class="output" id="event-output"></div>
+                    <div class="controls">
+                        <button onclick="runEventDemo()">🎯 Setup Interactive Button</button>
+                        <button onclick="runMultiEventDemo()">⚡ Multiple Events</button>
+                    </div>
+                </div>
+
+                <div class="demo-section">
+                    <h3>Code Blocks</h3>
+                    <div class="template-code">&lt;script&gt;var computed = data.value * 2;&lt;/script&gt;
+Result: {{:computed}}</div>
+                    <div class="output" id="code-output"></div>
+                    <div class="controls">
+                        <button onclick="runCodeDemo()">💻 Execute Code</button>
+                        <button onclick="runDeferDemo()">⏰ Deferred Execution</button>
+                    </div>
+                </div>
+
+                <div class="demo-section">
+                    <h3>Components</h3>
+                    <div class="template-code">{{#component userCard}}</div>
+                    <div class="output" id="component-output"></div>
+                    <div class="controls">
+                        <button onclick="runComponentDemo()">🧩 Load Component</button>
+                        <button onclick="createCustomComponent()">✨ Create Custom</button>
+                    </div>
+                </div>
+            </div>
+
+            <div class="api-column">
+                <h2>Advanced API</h2>
+                
+                <div class="api-section">
+                    <h3>Event Binding</h3>
+                    <div class="api-method"><span class="method-name">{{@event="handler"}}</span> → <span class="return-type">DOM attribute</span></div>
+                    <div class="api-method"><span class="method-name">template.renderTo</span>(<span class="param">container, data</span>)</div>
+                    <div class="api-description">
+                        Events are automatically bound when using renderTo(). Handler can reference data properties or global functions.
+                    </div>
+                </div>
+
+                <div class="api-section">
+                    <h3>Code Execution</h3>
+                    <div class="api-method"><span class="method-name">&lt;script&gt;</span>...&lt;/script&gt;</div>
+                    <div class="api-method"><span class="method-name">&lt;defer&gt;</span>...&lt;/defer&gt;</div>
+                    <div class="api-method"><span class="method-name">&lt;?</span> code <span class="method-name">?&gt;</span></div>
+                    <div class="api-method"><span class="method-name">&lt;?=</span> expression <span class="method-name">?&gt;</span></div>
+                </div>
+
+                <div class="api-section">
+                    <h3>Components & Compilation</h3>
+                    <div class="api-method"><span class="method-name">Macrobars.compile</span>(<span class="param">template, options</span>)</div>
+                    <div class="api-method"><span class="method-name">Macrobars.createComponents</span>(<span class="param">definitions</span>)</div>
+                </div>
+
+                <div class="api-section">
+                    <h3>Examples</h3>
+                    <pre class="code-example">
+<span class="code-comment">// Event binding with renderTo</span>
+<span class="keyword">const</span> template = Macrobars.compile(
+  <span class="string">'&lt;button {{@click="increment"}}&gt;{{count}}&lt;/button&gt;'</span>
+);
+template.renderTo(<span class="string">'#container'</span>, {
+  count: <span class="highlight">0</span>,
+  increment: <span class="keyword">function</span>() { <span class="keyword">this</span>.count++; }
+});
+
+<span class="code-comment">// Components</span>
+<span class="keyword">const</span> components = Macrobars.createComponents({
+  userCard: <span class="string">'&lt;div&gt;{{name}} - {{email}}&lt;/div&gt;'</span>
+});
+</pre>
+                </div>
+            </div>
+        </div>
+
+        <div class="main-layout">
+            <div class="demo-column">
+                <h2>Template Editor</h2>
+                <div class="interactive-editor">
+                    
+                    <label for="template-input"><strong>Template:</strong></label>
+                    <textarea id="template-input" rows="6" placeholder="Enter your template here">Hello {{name}}! 
+{{#if age}}You are {{age}} years old.{{/if}}
+{{#each hobbies as hobby}}
+• {{:hobby}}
+{{/each}}
+Total score: {{~score}}</textarea>
+                    
+                    <label for="data-input"><strong>Data (JSON):</strong></label>
+                    <textarea id="data-input" rows="6" placeholder="Enter JSON data here">{
+  "name": "Alice",
+  "age": 25,
+  "score": 98750,
+  "hobbies": ["reading", "coding", "gaming"]
+}</textarea>
+                    
+                    <div class="controls">
+                        <button onclick="runCustomTemplate()">Render Template</button>
+                        <button onclick="loadExampleTemplate('basic')">Load Basic Example</button>
+                        <button onclick="loadExampleTemplate('advanced')">Load Advanced Example</button>
+                        <button onclick="clearEditor()">Clear All</button>
+                    </div>
+                    
+                    <div class="output" id="dynamic-content" style="white-space: pre;">Click "Render Template"</div>
+
+                    <div class="api-section">
+                        <h3>Template Information</h3>
+                        <div class="status" id="template-info">Ready.</div>
+                    </div>
+
+                </div>
+            </div>
+
+            <div class="api-column">
+                <h2>Compilation & Debugging</h2>
+                
+                <div class="api-section">
+                    <h3>Compilation Options</h3>
+                    <div class="api-method"><span class="method-name">decimals</span>: <span class="param">number</span> → <span class="return-type">Number precision</span></div>
+                    <div class="api-method"><span class="method-name">strict</span>: <span class="param">boolean</span> → <span class="return-type">Strict mode</span></div>
+                    <div class="api-method"><span class="method-name">components</span>: <span class="param">object</span> → <span class="return-type">Reusable templates</span></div>
+                </div>
+
+                <div class="api-section">
+                    <h3>Debugging Properties</h3>
+                    <div class="api-method"><span class="method-name">template.tokens</span> → <span class="return-type">Parsed tokens</span></div>
+                    <div class="api-method"><span class="method-name">template.gensource</span> → <span class="return-type">Generated JS</span></div>
+                    <div class="api-method"><span class="method-name">template.event_bindings</span> → <span class="return-type">Event data</span></div>
+                </div>
+
+                <div class="api-section">
+                    <h3>Utility Functions</h3>
+                    <div class="api-method"><span class="method-name">Macrobars.safe_out</span>(<span class="param">text, default</span>)</div>
+                    <div class="api-method"><span class="method-name">Macrobars.num_out</span>(<span class="param">number, decimals</span>)</div>
+                    <div class="api-method"><span class="method-name">Macrobars.num_out_round</span>(<span class="param">number</span>)</div>
+                </div>
+
+                <div class="api-section">
+                    <h3>Example Templates</h3>
+                    <pre class="code-example">
+<span class="code-comment">// Complete example</span>
+<span class="keyword">const</span> template = Macrobars.compile(<span class="string">`
+&lt;div class="user-card"&gt;
+  &lt;h3&gt;{{name or "Unknown User"}}&lt;/h3&gt;
+  {{#if profile.verified}}✅ Verified{{/if}}
+  &lt;p&gt;Balance: ${{%balance}}&lt;/p&gt;
+  {{#each achievements}}
+    &lt;span class="badge"&gt;{{data}}&lt;/span&gt;
+  {{/each}}
+&lt;/div&gt;
+`</span>, { decimals: <span class="highlight">2</span> });
+
+<span class="keyword">const</span> result = template(userData);
+</pre>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script src="u-macrobars.js"></script>
+    <script>
+        let currentTemplate = null;
+        let clickCount = 0;
+        let components = {};
+
+        // Initialize demos on page load
+        function initializeDemos() {
+            runBasicDemo();
+            runNumberDemo();
+            updateTemplateInfo('Ready.');
+        }
+
+        // Utility functions
+        function log(message) {
+            //console.log(`Macrobars Demo: ${message}`);
+        }
+
+        function updateTemplateInfo(info) {
+            const element = document.getElementById('template-info');
+            if (element) {
+                element.textContent = info;
+            }
+        }
+
+        function updateVisualAnimation(playing) {
+            const animations = document.querySelectorAll('.template-animation');
+            animations.forEach(anim => {
+                anim.style.animationPlayState = playing ? 'running' : 'paused';
+            });
+        }
+
+        // Demo 1: Basic field output
+        function runBasicDemo() {
+            try {
+                const template = Macrobars.compile('{{name}} is {{age}} years old and works as {{job or "unemployed"}}');
+                const data = { name: "John Doe", age: 30 };
+                const result = template(data);
+                document.getElementById('basic-output').innerHTML = result;
+                updateVisualAnimation(true);
+                setTimeout(() => updateVisualAnimation(false), 1000);
+            } catch (error) {
+                document.getElementById('basic-output').innerHTML = '<span style="color: red;">Error: ' + error.message + '</span>';
+            }
+        }
+
+        function runBasicDemoVariant() {
+            try {
+                const template = Macrobars.compile('{{name}} is {{age}} years old and works as {{job or "unemployed"}}');
+                const data = { name: "Jane Smith", age: 28, job: "Software Engineer" };
+                const result = template(data);
+                document.getElementById('basic-output').innerHTML = result;
+                updateVisualAnimation(true);
+                setTimeout(() => updateVisualAnimation(false), 1000);
+            } catch (error) {
+                document.getElementById('basic-output').innerHTML = '<span style="color: red;">Error: ' + error.message + '</span>';
+            }
+        }
+
+        // Demo 2: Number formatting
+        function runNumberDemo() {
+            try {
+                const template = Macrobars.compile('Price: ${{%price}} | Large Number: {{~bigNumber}}');
+                const data = { price: 123.456, bigNumber: 1234567 };
+                const result = template(data);
+                document.getElementById('number-output').innerHTML = result;
+            } catch (error) {
+                document.getElementById('number-output').innerHTML = '<span style="color: red;">Error: ' + error.message + '</span>';
+            }
+        }
+
+        function runNumberVariants() {
+            try {
+                const template = Macrobars.compile('Price: ${{%price}} | Large Number: {{~bigNumber}} | Small: {{%small}}');
+                const data = { price: 999.99, bigNumber: 42850000, small: 1.2345 };
+                const result = template(data);
+                document.getElementById('number-output').innerHTML = result;
+            } catch (error) {
+                document.getElementById('number-output').innerHTML = '<span style="color: red;">Error: ' + error.message + '</span>';
+            }
+        }
+
+        // Demo 3: Default values & safety
+        function runDefaultDemo() {
+            try {
+                const template = Macrobars.compile('{{username or "Guest"}} | {{profile.bio or "No bio available"}}');
+                const data = { username: "", profile: {} }; // Empty data to test defaults
+                const result = template(data);
+                document.getElementById('default-output').innerHTML = result;
+            } catch (error) {
+                document.getElementById('default-output').innerHTML = '<span style="color: red;">Error: ' + error.message + '</span>';
+            }
+        }
+
+        function runSafetyDemo() {
+            try {
+                const template = Macrobars.compile('Safe: {{userInput}} | Unsafe: {{{userInput}}}');
+                const data = { userInput: '<script>alert("XSS")</' + 'script><b>Bold Text</b>' };
+                const result = template(data);
+                document.getElementById('default-output').innerHTML = result;
+            } catch (error) {
+                document.getElementById('default-output').innerHTML = '<span style="color: red;">Error: ' + error.message + '</span>';
+            }
+        }
+
+        // Demo 4: Conditionals
+        function runConditionalDemo(isLoggedIn) {
+            try {
+                const template = Macrobars.compile('{{#if isLoggedIn}}Welcome back, {{username}}! 🎉{{#else}}Please log in to continue. 🔐{{/if}}');
+                const data = { 
+                    isLoggedIn: isLoggedIn, 
+                    username: "Alice" 
+                };
+                const result = template(data);
+                document.getElementById('conditional-output').innerHTML = result;
+            } catch (error) {
+                document.getElementById('conditional-output').innerHTML = '<span style="color: red;">Error: ' + error.message + '</span>';
+            }
+        }
+
+        // Demo 5: Loops
+        function runLoopDemo() {
+            try {
+                const template = Macrobars.compile(
+                    '{{#each items}}' +
+                        '• {{number}}. {{name}} - ${{price}}<br>' +
+                    '{{/each}}'
+                );
+                const data = {
+                    items: [
+                        { number: 1, name: "Magic Widget", price: 19.99 },
+                        { number: 2, name: "Super Gadget", price: 29.50 },
+                        { number: 3, name: "Ultra Tool", price: 15.75 }
+                    ]
+                };
+                const result = template(data);
+                document.getElementById('loop-output').innerHTML = result;
+            } catch (error) {
+                document.getElementById('loop-output').innerHTML = '<span style="color: red;">Error: ' + error.message + '</span>';
+            }
+        }
+
+        function runNamedLoopDemo() {
+            try {
+                const template = Macrobars.compile('Store: {{storeName}}<br>{{#each products as product}}→ {{product.name}} ({{product.category}}) - Available at {{storeName}}<br>{{/each}}');
+                const data = {
+                    storeName: "TechMart",
+                    products: [
+                        { name: "Laptop", category: "Electronics" },
+                        { name: "Mouse", category: "Accessories" },
+                        { name: "Keyboard", category: "Accessories" }
+                    ]
+                };
+                const result = template(data);
+                document.getElementById('loop-output').innerHTML = result;
+            } catch (error) {
+                document.getElementById('loop-output').innerHTML = '<span style="color: red;">Error: ' + error.message + '</span>';
+            }
+        }
+
+        // Demo 6: Equality & Lookup
+        function runEqualityDemo() {
+            try {
+                const template = Macrobars.compile('{{#eq status "active"}}✅ User is active{{/eq}}{{#eq status "inactive"}}❌ User is inactive{{/eq}}{{#eq status "pending"}}⏳ User is pending{{/eq}}<br>Inline check: {{eq role "admin"}}');
+                const data = { status: "active", role: "admin" };
+                const result = template(data);
+                document.getElementById('equality-output').innerHTML = result;
+            } catch (error) {
+                document.getElementById('equality-output').innerHTML = '<span style="color: red;">Error: ' + error.message + '</span>';
+            }
+        }
+
+        function runLookupDemo() {
+            try {
+                const template = Macrobars.compile('Theme: {{lookup user "theme"}}<br>{{#lookup user "permissions"}}🔑 Has permissions{{/lookup}}{{#lookup user "missing"}}This won\'t show{{/lookup}}');
+                const data = { 
+                    user: { 
+                        theme: "dark", 
+                        permissions: ["read", "write"] 
+                    } 
+                };
+                const result = template(data);
+                document.getElementById('equality-output').innerHTML = result;
+            } catch (error) {
+                document.getElementById('equality-output').innerHTML = '<span style="color: red;">Error: ' + error.message + '</span>';
+            }
+        }
+
+        // Demo 7: Event binding
+        function runEventDemo() {
+            try {
+                clickCount = 0;
+                const template = Macrobars.compile('<button {{@click="handleClick"}} style="padding: 10px;">🖱️ Click Count: {{clickCount}}</button>');
+                
+                const data = { 
+                    clickCount: clickCount,
+                    handleClick: function() {
+                        clickCount++;
+                        runEventDemo(); // Re-render with new count
+                    }
+                };
+                
+                const container = document.getElementById('event-output');
+                template.renderTo(container, data);
+            } catch (error) {
+                document.getElementById('event-output').innerHTML = '<span style="color: red;">Error: ' + error.message + '</span>';
+            }
+        }
+
+        function runMultiEventDemo() {
+            try {
+                var templateStr = '<div style="padding: 10px; border: 1px solid #ccc; border-radius: 5px;">';
+                templateStr += '<button {{@click="increment"}} style="margin: 5px; padding: 8px;">➕ Add</button>';
+                templateStr += '<button {{@click="decrement"}} style="margin: 5px; padding: 8px;">➖ Subtract</button>';
+                templateStr += '<button {{@click="reset"}} style="margin: 5px; padding: 8px;">🔄 Reset</button>';
+                templateStr += '<br><br>';
+                templateStr += '<strong>Counter: {{counter}}</strong>';
+                templateStr += '</div>';
+                
+                const template = Macrobars.compile(templateStr);
+                
+                let counter = 0;
+                const data = { 
+                    counter: counter,
+                    increment: function() {
+                        counter++;
+                        data.counter = counter;
+                        template.renderTo(document.getElementById('event-output'), data);
+                    },
+                    decrement: function() {
+                        counter--;
+                        data.counter = counter;
+                        template.renderTo(document.getElementById('event-output'), data);
+                    },
+                    reset: function() {
+                        counter = 0;
+                        data.counter = counter;
+                        template.renderTo(document.getElementById('event-output'), data);
+                    }
+                };
+                
+                template.renderTo(document.getElementById('event-output'), data);
+            } catch (error) {
+                document.getElementById('event-output').innerHTML = '<span style="color: red;">Error: ' + error.message + '</span>';
+            }
+        }
+
+        // Demo 8: Code blocks
+        function runCodeDemo() {
+            try {
+                var templateStr = '';
+                templateStr += '<' + 'script>';
+                templateStr += 'var computed = data.value * 2;';
+                templateStr += 'var message = "Computed: " + computed;';
+                templateStr += '<' + '/script>';
+                templateStr += 'Input: {{value}}<br>';
+                templateStr += 'Result: {{:computed}}<br>';
+                templateStr += 'Message: {{:message}}';
+                
+                const template = Macrobars.compile(templateStr);
+                const data = { value: 21 };
+                const result = template(data);
+                document.getElementById('code-output').innerHTML = result;
+            } catch (error) {
+                document.getElementById('code-output').innerHTML = '<span style="color: red;">Error: ' + error.message + '</span>';
+            }
+        }
+
+        function runDeferDemo() {
+            try {
+                var templateStr = 'Value: {{value}}<br>' +
+                    '<' + 'defer>' +
+                    'alert("Value was: " + data.value);' +
+                    '<' + '/defer>' +
+                    '<em>Check browser console and alert!</em>';
+                
+                const template = Macrobars.compile(templateStr);
+                const data = { value: 42 };
+                const result = template(data);
+                document.getElementById('code-output').innerHTML = result;
+            } catch (error) {
+                document.getElementById('code-output').innerHTML = '<span style="color: red;">Error: ' + error.message + '</span>';
+            }
+        }
+
+        // Demo 9: Components
+        function runComponentDemo() {
+            try {
+                var userCardTemplate = '<div style="border: 1px solid #ddd; padding: 15px; border-radius: 5px; margin: 5px 0;">';
+                userCardTemplate += '<h4 style="margin: 0 0 10px 0;">👤 {{name}}</h4>';
+                userCardTemplate += '<p style="margin: 5px 0;"><strong>Email:</strong> {{email}}</p>';
+                userCardTemplate += '<p style="margin: 5px 0;"><strong>Role:</strong> {{role}}</p>';
+                userCardTemplate += '{{#if isActive}}<span style="color: green;">✅ Active</span>{{#else}}<span style="color: red;">❌ Inactive</span>{{/if}}';
+                userCardTemplate += '</div>';
+                
+                components = Macrobars.createComponents({
+                    userCard: userCardTemplate
+                });
+                
+                const template = Macrobars.compile('{{#component userCard}}', { components });
+                const data = { name: "John Doe", email: "john@example.com", role: "Developer", isActive: true };
+                const result = template(data);
+                document.getElementById('component-output').innerHTML = result;
+            } catch (error) {
+                document.getElementById('component-output').innerHTML = '<span style="color: red;">Error: ' + error.message + '</span>';
+            }
+        }
+
+        function createCustomComponent() {
+            try {
+                var productCardTemplate = '<div style="border: 2px solid #007acc; padding: 15px; border-radius: 8px; margin: 5px 0; background: #f8f9fa;">';
+                productCardTemplate += '<h4 style="color: #007acc; margin: 0 0 10px 0;">🛍️ {{productName}}</h4>';
+                productCardTemplate += '<p><strong>Price:</strong> ${{%price}}</p>';
+                productCardTemplate += '<p><strong>Stock:</strong> {{stock}} units</p>';
+                productCardTemplate += '{{#if onSale}}<div style="background: #28a745; color: white; padding: 5px; border-radius: 3px; text-align: center;">🏷️ ON SALE!</div>{{/if}}';
+                productCardTemplate += '</div>';
+                
+                components = Macrobars.createComponents({
+                    productCard: productCardTemplate
+                });
+                
+                const template = Macrobars.compile('{{#component productCard}}', { components });
+                const data = { productName: "Magic Widget Pro", price: 299.99, stock: 15, onSale: true };
+                const result = template(data);
+                document.getElementById('component-output').innerHTML = result;
+            } catch (error) {
+                document.getElementById('component-output').innerHTML = '<span style="color: red;">Error: ' + error.message + '</span>';
+            }
+        }
+
+        // Demo 10: Custom template editor
+        function runCustomTemplate() {
+            try {
+                const templateStr = document.getElementById('template-input').value;
+                const dataStr = document.getElementById('data-input').value;
+                const data = JSON.parse(dataStr);
+                
+                currentTemplate = Macrobars.compile(templateStr);
+                const result = currentTemplate(data);
+                
+                document.getElementById('dynamic-content').innerHTML = result;
+                
+                // Update template info
+                var infoText = 'Compiled successfully!\n';
+                infoText += 'Tokens: ' + (currentTemplate.tokens ? currentTemplate.tokens.length : 0) + '\n';
+                infoText += 'Event bindings: ' + (currentTemplate.event_bindings ? currentTemplate.event_bindings.length : 0) + '\n';
+                infoText += 'Template size: ' + templateStr.length + ' characters';
+                updateTemplateInfo(infoText);
+                
+            } catch (error) {
+                document.getElementById('dynamic-content').innerHTML = '<div style="color: red; padding: 10px; background: #ffe6e6; border-radius: 5px;"><strong>❌ Error:</strong> ' + error.message + '</div>';
+                updateTemplateInfo('Compilation failed: ' + error.message);
+            }
+        }
+
+        function loadExampleTemplate(type) {
+            const templates = {
+                basic: {
+                    template: '<h3>Welcome {{name}}!</h3>\n<p>{{#if isVip}}🌟 VIP Member{{#else}}Regular Member{{/if}}</p>\n<p>Account Balance: ${{%balance}}</p>\n{{#each notifications}}\n• {{data}}\n{{/each}}',
+                    data: '{\n  "name": "Sarah Connor",\n  "isVip": true,\n  "balance": 1247.50,\n  "notifications": ["New message", "System update", "Payment received"]\n}'
+                },
+                advanced: {
+                    template: '&lt;div class="dashboard"&gt;\n' +
+                      '  &lt;h2&gt;{{company}} Dashboard&lt;/h2&gt;\n' +
+                      '  \n' +
+                      '  &lt;script&gt;\n' +
+                      '    var totalRevenue = 0;\n' +
+                      '    data.quarters.forEach(q =&gt; totalRevenue += q.revenue);\n' +
+                      '  &lt;/script&gt;\n' +
+                      '  \n' +
+                      '  &lt;p&gt;&lt;strong&gt;Total Revenue:&lt;/strong&gt; ${{:totalRevenue}}&lt;/p&gt;\n' +
+                      '  \n' +
+                      '  {{#each quarters as quarter}}\n' +
+                      '    &lt;div style="margin: 10px 0; padding: 10px; border-left: 4px solid #007acc;"&gt;\n' +
+                      '      &lt;h4&gt;{{quarter.name}}&lt;/h4&gt;\n' +
+                      '      &lt;p&gt;Revenue: ${{%quarter.revenue}} {{#eq quarter.trend "up"}}📈{{/eq}}{{#eq quarter.trend "down"}}📉{{/eq}}&lt;/p&gt;\n' +
+                      '      {{#lookup quarter "bonus"}}\n' +
+                      '        &lt;span style="color: green;"&gt;🎯 Bonus: ${{quarter.bonus}}&lt;/span&gt;\n' +
+                      '      {{/lookup}}\n' +
+                      '    &lt;/div&gt;\n' +
+                      '  {{/each}}\n' +
+                      '  \n' +
+                      '  &lt;button {{@click="generateReport"}} style="padding: 10px; background: #28a745; color: white; border: none; border-radius: 5px;"&gt;\n' +
+                      '    📊 Generate Report\n' +
+                      '  &lt;/button&gt;\n' +
+                      '&lt;/div&gt;',
+                    data: '{\n  "company": "TechCorp Industries",\n  "quarters": [\n    {"name": "Q1 2024", "revenue": 125000, "trend": "up", "bonus": 5000},\n    {"name": "Q2 2024", "revenue": 138000, "trend": "up"},\n    {"name": "Q3 2024", "revenue": 142000, "trend": "up", "bonus": 7500},\n    {"name": "Q4 2024", "revenue": 128000, "trend": "down"}\n  ],\n  "generateReport": "function() { alert(\'Report generated for \' + this.company); }"\n}'
+                }
+            };
+            
+            const example = templates[type];
+            if (example) {
+                document.getElementById('template-input').value = example.template;
+                document.getElementById('data-input').value = example.data;
+                runCustomTemplate();
+            }
+        }
+
+        function clearEditor() {
+            document.getElementById('template-input').value = '';
+            document.getElementById('data-input').value = '{}';
+            document.getElementById('dynamic-content').innerHTML = 'Editor cleared. Enter a template and click "Render Template".';
+            updateTemplateInfo('Ready.');
+        }
+
+        // Initialize demos on page load
+        document.addEventListener('DOMContentLoaded', function() {
+            initializeDemos();
+        });
+    </script>
+</body>
+</html>

site/examples/uce-starter/js/u-macrobars.js

@@ -0,0 +1,411 @@
+(function (root, factory) { // I really hate this convoluted bullshit
+	if (typeof exports === 'object' && typeof module !== 'undefined') {
+		module.exports = factory();
+	} else if (typeof define === 'function' && define.amd) {
+		define([], factory);
+	} else {
+		root.Macrobars = factory();
+	}
+}(typeof self !== 'undefined' ? self : this, function () {
+
+	if(!String.prototype.replaceAll) String.prototype.replaceAll = function(search, replacement) {
+			var target = this;
+			return target.split(search).join(replacement);
+	};
+
+	var safe_out = (s, defaultValue = '') => { 
+		if(typeof s == 'undefined' || s === null || s === false || s === '') s = defaultValue; 
+		return((''+s).replaceAll('<', '&lt;').replaceAll('>', '&gt;').replaceAll('"', '&quot;')); 
+	};
+
+	var num_out = (n, decimals = 2) => {
+		if(typeof n == 'undefined' || n === false) n = 0;
+		if(decimals == 0) return(Math.round(n));
+		return(n.toFixed(decimals));
+	}
+
+	var num_out_round = (n) => {
+		if(typeof n == 'undefined' || n === false || n === null) n = 0;
+		
+		if(typeof n === 'string') {
+			n = parseFloat(n);
+			if(isNaN(n)) return '0';
+		}
+		
+		if(Math.abs(n) >= 1e15) {
+			return n.toExponential(2);
+		}
+		
+		if(Math.abs(n) > 0 && Math.abs(n) < 0.001) {
+			return n.toExponential(2);
+		}
+		
+		if(Math.abs(n) >= 1e12) {
+			return (n/1e12).toFixed(1) + 'T';
+		} else if(Math.abs(n) >= 1e9) {
+			return (n/1e9).toFixed(1) + 'B';
+		} else if(Math.abs(n) >= 1e6) {
+			return (n/1e6).toFixed(1) + 'M';
+		} else if(Math.abs(n) >= 1e3) {
+			return (n/1e3).toFixed(1) + 'k';
+		} else if(Math.abs(n) >= 1) {
+			return Math.round(n);
+		} else if(Math.abs(n) >= 0.01) {
+			return n.toFixed(2);
+		} else if(Math.abs(n) >= 0.001) {
+			return n.toFixed(3);
+		} else if(n === 0) {
+			return 0;
+		}
+		
+		return n.toString();
+	}
+
+	var debug_out = (ee) => {
+		var es = ee.stack.split("\n");
+		var loc = es[1];
+		var p0 = loc.indexOf('<anonymous>');
+		if(p0 != -1) {
+			loc = loc.substr(p0+('<anonymous>'.length+1));
+			loc = loc.substr(0, loc.length-1);
+		}
+		return('Macrobars '+es[0]+' ('+loc+')');
+	}
+
+	var signposts = [
+		{ start : '<script>', end : '</script>', type : 'code' },
+		{ start : '<defer>', end : '</defer>', type : 'defer' },
+
+		{ start : '<?=', end : '?>', type : 'field' },
+		{ start : '<?:', end : '?>', type : 'var_out' },
+		{ start : '<?', end : '?>', type : 'code' },
+		{ start : '<!--?', end : '?-->', type : 'code' },
+
+		{ start : '{{:', end : '}}', type : 'var_out' },
+		{ start : '{{#eq ', end : '}}', type : 'eq_block_start' },
+		{ start : '{{#lookup ', end : '}}', type : 'lookup_block_start' },
+		{ start : '{{eq ', end : '}}', type : 'eq_inline' },
+		{ start : '{{lookup ', end : '}}', type : 'lookup_inline' },
+		{ start : '{{#default ', end : '}}', type : 'default_empty' },
+		{ start : '{{#if ', end : '}}', type : 'if_start' },
+		{ start : '{{#else}}', end : '', type : 'else' },
+		{ start : '{{#component ', end : '}}', type : 'component' },
+		{ start : '{{#each ', end : '}}', type : 'each_start' },
+		{ start : '{{/each}}', end : '', type : 'each_end' },
+		{ start : '{{/if}}', end : '', type : 'if_end' },
+		{ start : '{{/eq}}', end : '', type : 'eq_block_end' },
+		{ start : '{{/lookup}}', end : '', type : 'lookup_block_end' },
+		{ start : '{{/', end : '}}', type : 'block_end' },
+		{ start : '{{@', end : '}}', type : 'event_bind' },
+		{ start : '{{{', end : '}}}', type : 'field_unsafe' },
+		{ start : '{{%', end : '}}', type : 'field_number' },
+		{ start : '{{~', end : '}}', type : 'field_number_round' },
+		{ start : '{{', end : '}}', type : 'field' },
+	];
+
+	if(!each) function each(o, f) {
+		if(!o)
+			return;
+		if(o.forEach) {
+			o.forEach(f);
+		} else {
+			for(var prop in o) if(o.hasOwnProperty(prop)) {
+				f(o[prop], prop);
+			}
+		}
+	}
+
+	var data_prefix = (identifier) => {
+		if(identifier.substr(0, 1) == ':')
+			return(identifier.substr(1));
+		else
+			return('data.'+identifier);
+	}
+
+	var parse_field_with_default = (fieldText) => {
+		var orMatch = fieldText.match(/^(.+?)\s+or\s+(['"])(.*?)\2$/);
+		if (orMatch) {
+			return {
+				field: orMatch[1].trim(),
+				default: orMatch[3]
+			};
+		}
+		return {
+			field: fieldText.trim(),
+			default: null
+		};
+	}
+
+	var compile = function(text, options = {}) {
+
+		var crash_counter = 0;
+		var tokens = [];
+		var gensource = [];
+		var event_bindings = []; 
+		var components = options.components || {}; 
+		var condition_stack = []; 
+
+		var emit = {
+			text : (token) => {
+				gensource.push('output += '+JSON.stringify(token.text)+';');
+			},
+			code : (token) => {
+				gensource.push(token.text);
+			},
+			defer : (token) => {
+				gensource.push('output += "<script>" + '+JSON.stringify(token.text)+' + "</script>";');
+			},
+			var_out : (token) => {
+				var defaultVal = token.default ? JSON.stringify(token.default) : 'default_empty_field';
+				gensource.push('output += safe_out('+(token.text)+', '+defaultVal+');');
+			},
+			field : (token) => {
+				var defaultVal = token.default ? JSON.stringify(token.default) : 'default_empty_field';
+				gensource.push('output += safe_out('+data_prefix(token.text)+', '+defaultVal+');');
+			},
+			field_unsafe : (token) => {
+				if (token.default) {
+					gensource.push('output += ('+data_prefix(token.text)+' || '+JSON.stringify(token.default)+');');
+				} else {
+					gensource.push('output += ('+data_prefix(token.text)+' || default_empty_field);');
+				}
+			},
+			field_number : (token) => {
+				gensource.push('output += num_out('+data_prefix(token.text)+', this.decimals);');
+			},
+			field_number_round : (token) => {
+				gensource.push('output += num_out_round('+data_prefix(token.text)+');');
+			},
+			each_start : (token) => {
+				var parts = token.text.split(' as ');
+				var collection = parts[0].trim();
+				var itemName = parts.length > 1 ? parts[1].trim() : 'data';
+				
+				gensource.push('each('+data_prefix(collection)+', ('+itemName+', index) => {');
+
+			},
+			if_start : (token) => {
+				condition_stack.push('if');
+				gensource.push('if ('+data_prefix(token.text)+') {');
+			},
+			else : (token) => {
+				gensource.push('} else {');
+			},
+			if_end : (token) => {
+				condition_stack.pop();
+				gensource.push('} /* if end */');
+			},
+			each_end : (token) => {
+				gensource.push('}); /* each end */');
+			},
+			block_end : (token) => {
+				var block_type = condition_stack.pop();
+				gensource.push('}); /* '+(block_type || 'each')+' end */');
+			},
+			component : (token) => {
+				var comp_name = token.text.trim();
+				if (components[comp_name]) {
+					gensource.push('output += components['+JSON.stringify(comp_name)+'](data);');
+				} else {
+					gensource.push('output += "[Component '+comp_name+' not found]";');
+				}
+			},
+			event_bind : (token) => {
+				// Parse event binding: @click="functionName" or @click="data.handler"
+				var parts = token.text.split('=');
+				if (parts.length === 2) {
+					var event_type = parts[0].trim();
+					var handler_ref = parts[1].trim().replace(/"/g, '');
+					var binding_id = 'mb_bind_' + event_bindings.length;
+					event_bindings.push({
+						id: binding_id,
+						event: event_type,
+						handler: handler_ref
+					});
+					gensource.push('output += " data-mb-bind=\\"'+binding_id+'\\"";');
+				}
+			},
+			eq_block_start : (token) => {
+				// Parse "value1 value2" for equality comparison block
+				var parts = token.text.trim().split(/\s+/);
+				if (parts.length >= 2) {
+					var val1 = parts[0].startsWith('"') || parts[0].startsWith("'") ? parts[0] : data_prefix(parts[0]);
+					var val2 = parts[1].startsWith('"') || parts[1].startsWith("'") ? parts[1] : data_prefix(parts[1]);
+					condition_stack.push('eq');
+					gensource.push('if ('+val1+' == '+val2+') {');
+				}
+			},
+			lookup_block_start : (token) => {
+				// Parse "object key" for dynamic property lookup block (checks if property exists and is truthy)
+				var parts = token.text.trim().split(/\s+/);
+				if (parts.length >= 2) {
+					var obj = data_prefix(parts[0]);
+					var key = parts[1].startsWith('"') || parts[1].startsWith("'") ? parts[1] : data_prefix(parts[1]);
+					condition_stack.push('lookup');
+					gensource.push('if ('+obj+' && '+obj+'['+key+']) {');
+				}
+			},
+			eq_inline : (token) => {
+				// Parse "value1 value2" for equality comparison - outputs result directly
+				var parts = token.text.trim().split(/\s+/);
+				if (parts.length >= 2) {
+					var val1 = parts[0].startsWith('"') || parts[0].startsWith("'") ? parts[0] : data_prefix(parts[0]);
+					var val2 = parts[1].startsWith('"') || parts[1].startsWith("'") ? parts[1] : data_prefix(parts[1]);
+					var defaultVal = token.default ? JSON.stringify(token.default) : 'default_empty_field';
+					gensource.push('output += safe_out(('+val1+' == '+val2+') ? "true" : "", '+defaultVal+');');
+				}
+			},
+			lookup_inline : (token) => {
+				// Parse "object key" for dynamic property lookup - outputs result directly
+				var parts = token.text.trim().split(/\s+/);
+				if (parts.length >= 2) {
+					var obj = data_prefix(parts[0]);
+					var key = parts[1].startsWith('"') || parts[1].startsWith("'") ? parts[1] : data_prefix(parts[1]);
+					var defaultVal = token.default ? JSON.stringify(token.default) : 'default_empty_field';
+					gensource.push('output += safe_out(('+obj+' && '+obj+'['+key+']) || "", '+defaultVal+');');
+				}
+			},
+			eq_block_end : (token) => {
+				condition_stack.pop();
+				gensource.push('} /* eq end */');
+			},
+			lookup_block_end : (token) => {
+				condition_stack.pop();
+				gensource.push('} /* lookup end */');
+			},
+			default_empty : (token) => {
+				gensource.push('default_empty_field = '+JSON.stringify(token.text)+';');
+			},
+		}
+
+		while(text != '' && crash_counter < 100) {
+
+			crash_counter+=1;
+			var p0 = -1;
+			var sp_found = false;
+			signposts.forEach((sp) => {
+				var ps = text.indexOf(sp.start);
+				if(ps != -1 && (p0 == -1 || p0 > ps)) {
+					sp_found = sp;
+					p0 = ps;
+				}
+			});
+
+			if(sp_found)
+			{
+				tokens.push({ type : 'text', text : text.substr(0, p0) });
+				text = text.substr(p0 + sp_found.start.length);
+				var p1 = text.indexOf(sp_found.end);
+				if(p1 == -1) p1 = text.length;
+				
+				var tokenText = text.substr(0, p1);
+				var token = { type : sp_found.type, text : tokenText };
+				
+				if (sp_found.type === 'field' || sp_found.type === 'var_out' || 
+					sp_found.type === 'field_unsafe' || sp_found.type === 'field_number' || 
+					sp_found.type === 'field_number_round') {
+					var parsed = parse_field_with_default(tokenText);
+					token.text = parsed.field;
+					token.default = parsed.default;
+				}
+				
+				tokens.push(token);
+				text = text.substr(p1+sp_found.end.length);
+			}
+			else
+			{
+				tokens.push({ type : 'text', text : text });
+				text = '';
+			}
+
+		}
+
+		if(typeof options.decimals == 'undefined')
+			options.decimals = 2;
+		this.decimals = options.decimals;
+
+		gensource.push('(data) => { ');
+		if(options.strict)
+			gensource.push('"use strict";');
+		gensource.push('	try {');
+		gensource.push('	if(!data) data = {}; var data_root = data;');
+		gensource.push('	var output = ""; var default_empty_field = "";');
+		gensource.push('	var echo = (s) => { output += s; };');
+		tokens.forEach((tok) => {
+			emit[tok.type](tok);
+		});
+		gensource.push('	} catch (ee) { console.error(ee); output += debug_out(ee); }');
+		gensource.push('	return(output);');
+		gensource.push('}');
+
+		var f = {};
+		try {
+			f = eval('('+gensource.join("\n")+')');
+		} catch(ce) {
+			console.error('Macrobars compilation error:', ce);
+			console.error('Template source:', text.substring(0, 200) + (text.length > 200 ? '...' : ''));
+			console.error('Generated JavaScript:', gensource.join("\n"));
+		}
+
+		f.tokens = tokens;
+		f.gensource = gensource;
+		f.event_bindings = event_bindings;
+		f.options = options;
+		f.components = components;
+
+		f.renderTo = function(container_or_query, data) {
+			var container;
+			if (typeof container_or_query === 'string') {
+				container = document.querySelector(container_or_query);
+				if (!container) {
+					return null; 
+				}
+			} else {
+				container = container_or_query;
+			}
+			
+			try {
+				var html = f(data);
+				container.innerHTML = html;
+				event_bindings.forEach(binding => {
+					var elements = container.querySelectorAll('[data-mb-bind="' + binding.id + '"]');
+					elements.forEach(element => {
+						var handler = data[binding.handler] || eval(binding.handler);
+						if (typeof handler === 'function') {
+							element.addEventListener(binding.event, handler);
+						}
+					});
+				});
+			} catch(renderError) {
+				console.error('Macrobars renderTo error:', renderError);
+				console.error('Data passed to template:', data);
+				throw renderError;
+			}
+			
+			return container;
+		};
+
+		return(f);
+	}
+
+	return({
+
+		compile : compile,
+
+		createComponents : function(definitions) {
+			var components = {};
+			each(definitions, (template, name) => {
+				components[name] = compile(template);
+			});
+			return components;
+		},
+
+		num_out : num_out,
+		safe_out : safe_out,
+		num_out_round : num_out_round,
+		debug_out : debug_out,
+		each : each,
+
+	});
+
+}));

site/examples/uce-starter/js/u-macrobars.md

@@ -0,0 +1,137 @@
+# macrobars.js
+
+A lightweight JavaScript templating engine with PHP-style syntax and Handlebars-inspired features.
+
+## Basic Usage
+
+```javascript
+const template = Macrobars.compile('<h1>{{title}}</h1><p>{{content}}</p>');
+const html = template({title: 'Hello', content: 'World'});
+```
+
+## Field Output
+
+```javascript
+{{field}}                    // Safe HTML output (escaped)
+{{{field}}}                  // Unsafe HTML output (raw)
+{{field or "default"}}       // With default value
+{{:variable}}                // Direct variable (no data. prefix)
+```
+
+## Numbers
+
+```javascript
+{{%number}}                  // Formatted number (2 decimals)
+{{~number}}                  // Rounded number (1k, 1M format)
+```
+
+## Control Structures
+
+### Conditionals
+```javascript
+{{#if condition}}
+    Content when true
+{{#else}}
+    Content when false
+{{/if}}
+```
+
+### Equality Blocks
+```javascript
+{{#eq value1 value2}}
+    Content when equal
+{{/eq}}
+
+{{eq value1 value2}}         // Inline: outputs "true" or ""
+```
+
+### Loops
+```javascript
+{{#each items}}
+    {{name}} - {{index}}
+{{/each}}
+
+{{#each items as item}}
+    {{item.name}}
+{{/each}}
+```
+
+### Property Lookup
+```javascript
+{{#lookup object key}}
+    {{value}} exists
+{{/lookup}}
+
+{{lookup object key}}        // Inline: outputs value or ""
+```
+
+## Code Blocks
+
+```javascript
+<script>
+    var result = data.value * 2;
+</script>
+
+<defer>
+    // Deferred JavaScript execution
+</defer>
+
+<?= data.field ?>            // PHP-style output
+<? var x = data.count; ?>    // PHP-style code
+```
+
+## Event Binding
+
+```javascript
+<button {{@click="handleClick"}}>Click me</button>
+```
+
+Events are automatically bound when using `renderTo()`.
+
+## Components
+
+```javascript
+{{#component myComponent}}   // Render registered component
+```
+
+## Compilation Options
+
+```javascript
+const template = Macrobars.compile(templateString, {
+    decimals: 2,             // Number formatting precision
+    strict: true,            // Use strict mode
+    components: {...}        // Reusable components
+});
+```
+
+## DOM Integration
+
+```javascript
+template.renderTo('#container', data);          // Render to element
+template.renderTo(document.getElementById('x'), data);
+```
+
+## Utility Functions
+
+```javascript
+Macrobars.safe_out(text, default)      // HTML escape
+Macrobars.num_out(number, decimals)    // Format number
+Macrobars.num_out_round(number)        // Round with k/M suffix
+```
+
+## Template Debugging
+
+Access compiled template information:
+```javascript
+template.tokens             // Parsed tokens
+template.gensource          // Generated JavaScript
+template.event_bindings     // Event binding data
+```
+
+## Default Values
+
+```javascript
+{{#default "N/A"}}          // Set default for empty fields
+{{field}}                   // Will show "N/A" if empty
+```
+

site/examples/uce-starter/js/u-popup-menu.css

@@ -0,0 +1,34 @@
+:root {
+    --vp-size-popup-min-width: 160px;
+}
+
+.vp-popup-menu { 
+    position: absolute; 
+    background: var(--vp-color-black); 
+    border: 1px solid var(--color-border); 
+    color: var(--vp-color-white); 
+    min-width: var(--vp-size-popup-min-width); 
+    z-index: var(--vp-z-popup); 
+    border-radius: var(--vp-space-l); 
+    overflow: hidden; 
+}
+
+.vp-popup-item { 
+    padding: var(--vp-space-l); 
+    cursor: pointer; 
+    white-space: nowrap; 
+}
+
+.vp-popup-item:hover { 
+    color: var(--color-highlight); 
+}
+
+.vp-popup-item.focused { 
+    background: var(--color-highlight); 
+    color: var(--vp-color-black); 
+}
+
+.vp-popup-empty { 
+    padding: var(--vp-space-l); 
+    color: var(--vp-color-gray); 
+}

site/examples/uce-starter/js/u-popup-menu.js

@@ -0,0 +1,84 @@
+(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        // AMD
+        define(['jquery'], factory);
+    } else if (typeof module === 'object' && module.exports) {
+        // CommonJS
+        module.exports = factory(require('jquery'));
+    } else {
+        // Browser globals
+        root.showPopupMenu = factory(root.$);
+    }
+}(typeof self !== 'undefined' ? self : this, function ($) {
+    'use strict';
+
+    let showPopupMenu = (x, y, items, prop = {}) => {
+        document.querySelectorAll('.vp-popup-menu').forEach(menu => {
+            if(menu.parentNode) menu.parentNode.removeChild(menu);
+        });
+        
+        let container = prop.container || document.body;
+        let menu = $('<div class="vp-popup-menu">').css({
+            position: 'absolute',
+            left: (x|0) + 'px', 
+            top: (y|0) + 'px'
+        })[0];
+
+        let elems = [];
+        if(!items || !items.length) {
+            $(menu).append(`<div class="vp-popup-empty">${prop.emptyText || 'No items'}</div>`);
+        } else {
+            items.forEach((it, idx) => {
+                let label = typeof it === 'string' ? it : (it.label || it.screen || it.name || JSON.stringify(it));
+                let $item = $(`<div class="vp-popup-item" tabindex="0">${label}</div>`)
+                    .attr('data-idx', idx)
+                    .on('click', ev => { ev.stopPropagation(); try { (prop.onSelect || (()=>{}))(it); } catch(e){ console.error(e); } removeMenu(); })
+                    .on('keydown', e => { if(e.key === 'Enter') { e.preventDefault(); $item[0].click(); } });
+                $(menu).append($item[0]);
+                elems.push({el: $item[0], data: it});
+            });
+        }
+
+        let focusedIndex = elems.length ? 0 : -1;
+        let focusAt = i => {
+            elems.forEach((it, idx) => { $(it.el).removeClass('focused'); if(idx === i) { $(it.el).addClass('focused'); try{ it.el.focus(); }catch(e){} } });
+            focusedIndex = i;
+        };
+
+        let removeMenu = () => { 
+            if(menu.parentNode) menu.parentNode.removeChild(menu); 
+            $(document).off('mousedown', onDoc).off('keydown', onKey); 
+            $(window).off('resize', onResize); 
+        };
+        let onDoc = ev => { if(!menu.contains(ev.target)) removeMenu(); };
+        let onResize = () => reposition();
+        let onKey = ev => {
+            if(!elems.length) { if(ev.key === 'Escape') removeMenu(); return; }
+            if(ev.key === 'Escape') { ev.preventDefault(); removeMenu(); return; }
+            if(ev.key === 'ArrowDown') { ev.preventDefault(); focusAt((focusedIndex + 1) % elems.length); return; }
+            if(ev.key === 'ArrowUp') { ev.preventDefault(); focusAt((focusedIndex - 1 + elems.length) % elems.length); return; }
+            if(ev.key === 'Home') { ev.preventDefault(); focusAt(0); return; }
+            if(ev.key === 'End') { ev.preventDefault(); focusAt(elems.length - 1); return; }
+            if(ev.key === 'Enter') { ev.preventDefault(); if(focusedIndex >= 0) elems[focusedIndex].el.click(); }
+        };
+
+        container.appendChild(menu);
+        let reposition = () => {
+            let mRect = menu.getBoundingClientRect();
+            let winW = window.innerWidth, winH = window.innerHeight;
+            let left = parseInt($(menu).css('left'),10) || 0, top = parseInt($(menu).css('top'),10) || 0;
+            if(mRect.right > winW) left = Math.max(4, winW - Math.ceil(mRect.width) - 8);
+            if(mRect.bottom > winH) top = Math.max(4, winH - Math.ceil(mRect.height) - 8);
+            if(left < 4) left = 4; if(top < 4) top = 4;
+            $(menu).css({left: left + 'px', top: top + 'px'});
+        };
+
+        $(document).on('mousedown', onDoc).on('keydown', onKey);
+        $(window).on('resize', onResize);
+        if(elems.length) { focusAt(0); }
+        setTimeout(reposition, 0);
+        return menu;
+    };
+
+    return showPopupMenu;
+}));

site/examples/uce-starter/js/u-query-demo.html

@@ -0,0 +1,976 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>U-Query.js Demo</title>
+    <style>
+        :root {
+            --space: 8px;
+            --radius: 5px;
+
+            --gray: #6c757d;
+            --gray-bg: #f5f5f5;
+            --blue: #007acc;
+            --green: #28a745;
+            --white: white;
+            --dark: #333;
+
+            --max-width: 1400px;
+            --sidebar: 400px;
+        }
+
+        * { box-sizing: border-box; }
+
+        body {
+            font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            max-width: var(--max-width);
+            margin: 0 auto;
+            padding: var(--space);
+            background: var(--gray-bg);
+        }
+
+        .container {
+            background: var(--white);
+            padding: calc(var(--space) * 1.5);
+            border-radius: var(--radius);
+        }
+
+        .main-layout {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: calc(var(--space) * 1.5);
+        }
+
+        .api-column {
+            background: var(--gray-bg);
+            padding: var(--space);
+            border-radius: var(--radius);
+            border-left: 4px solid var(--green);
+        }
+
+        h1 {
+            color: var(--dark);
+            text-align: center;
+            margin-bottom: calc(var(--space) * 1.5);
+            grid-column: 1 / -1;
+        }
+
+        h2 {
+            color: var(--gray);
+            border-bottom: 2px solid #e0e0e0;
+            padding-bottom: var(--space);
+            margin-top: calc(var(--space) * 1.5);
+        }
+
+        .demo-section {
+            margin: var(--space) 0;
+            padding: var(--space);
+            background: var(--gray-bg);
+            border-radius: var(--radius);
+            border-left: 4px solid var(--blue);
+        }
+
+        .controls, .slider-group {
+            display: flex;
+            gap: var(--space);
+            margin: 15px 0;
+        }
+
+        .controls { flex-wrap: wrap; }
+        .slider-group { align-items: center; }
+        .feature-grid { display: grid; gap: var(--space); margin: var(--space) 0; }
+
+        button {
+            background: var(--blue);
+            color: var(--white);
+            border: none;
+            padding: var(--space) var(--space);
+            border-radius: var(--radius);
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+
+        button:hover { filter: brightness(0.9); }
+        button:disabled { background: #ccc; cursor: not-allowed; }
+        input[type="range"] { flex: 1; max-width: 200px; }
+        input[type="text"] {
+            padding: var(--space);
+            border: 1px solid #ddd;
+            border-radius: var(--radius);
+        }
+
+        .status, .code-example {
+            font-family: monospace;
+            padding: var(--space);
+            border-radius: var(--radius);
+            margin: var(--space) 0;
+        }
+
+        .status {
+            background: var(--dark);
+            color: #0f0;
+            white-space: pre-wrap;
+            max-height: 150px;
+            overflow-y: auto;
+        }
+
+        .code-example {
+            background: #2d3748;
+            color: #e2e8f0;
+            padding: 15px;
+            overflow-x: auto;
+            margin: var(--space) 0;
+        }
+
+        .highlight { color: #68d391; }
+        .keyword { color: #fbb6ce; }
+        .string { color: #fbd38d; }
+
+        .test-element {
+            padding: var(--space);
+            margin: 5px;
+            border: 2px solid #ddd;
+            background: var(--white);
+            border-radius: var(--radius);
+            transition: all 0.3s ease;
+        }
+
+        .highlighted {
+            background: #ffd700 !important;
+            border-color: #ffcc00 !important;
+        }
+
+        .hidden { display: none; }
+
+        .output {
+            background: var(--gray-bg);
+            padding: var(--space);
+            border-radius: var(--radius);
+            margin: var(--space) 0;
+            min-height: 40px;
+            border-left: 3px solid var(--green);
+        }
+
+        .ajax-visual {
+            height: 100px;
+            background: linear-gradient(45deg, #1e3c72, #2a5298);
+            border-radius: var(--radius);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: var(--white);
+            font-weight: bold;
+            margin: 15px 0;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .loading-animation {
+            position: absolute;
+            inset: 0;
+            opacity: 0.3;
+            background: repeating-linear-gradient(90deg, transparent 0 10px, rgba(255,255,255,0.2) 10px 20px);
+            animation: wave 2s linear infinite;
+        }
+
+        @keyframes wave { to { transform: translateX(20px); } }
+
+        .api-section { margin: 15px 0; }
+        .api-section h3 {
+            color: var(--green);
+            margin: 0 0 var(--space) 0;
+        }
+
+        .api-method {
+            font-family: monospace;
+            margin: 3px 0;
+            color: var(--gray);
+        }
+
+        .api-method .method-name { color: var(--blue); font-weight: bold; }
+        .api-method .return-type { color: #6f42c1; }
+        .api-method .param { color: #e83e8c; }
+
+        .api-description {
+            margin: var(--space) 0;
+        }
+
+        .api-options {
+            color: var(--gray);
+        }
+
+        .code-comment {
+            color: #68d391;
+        }
+
+        .demo-visual {
+            background: var(--gray-bg);
+            padding: calc(var(--space) * 2);
+            border-radius: var(--radius);
+            margin: var(--space) 0;
+            border: 2px dashed #ddd;
+            text-align: center;
+            min-height: 80px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .demo-visual.active {
+            background: #e8f5e8;
+            border-color: var(--green);
+        }
+
+        @media (max-width: 1200px) {
+            .main-layout { grid-template-columns: 1fr; }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>U-Query.js Demo</h1>
+
+        <div class="main-layout">
+            <div class="demo-column">
+                <h2>Element Selection & DOM Manipulation</h2>
+                <div class="demo-section">
+                    <h3>DOM Queries</h3>
+                    <div class="demo-visual" id="selection-visual">
+                        <span>Select elements to see them highlighted</span>
+                    </div>
+                    <div class="test-element" id="test-1">Test Element 1</div>
+                    <div class="test-element" id="test-2">Test Element 2</div>
+                    <div class="test-element special" id="test-3">Test Element 3 (special)</div>
+
+                    <div class="controls">
+                        <button onclick="selectAllElements()">Select All .test-element</button>
+                        <button onclick="selectSpecial()">Select .special</button>
+                        <button onclick="selectById()">Select by ID</button>
+                        <button onclick="clearSelection()">Clear Selection</button>
+                    </div>
+
+                    <div class="status" id="selection-output"></div>
+                </div>
+
+                <div class="demo-section">
+                    <h3>DOM Manipulation</h3>
+                    <div class="demo-visual" id="manipulation-target">Original content</div>
+
+                    <div class="controls">
+                        <button onclick="htmlDemo()">Change HTML</button>
+                        <button onclick="textDemo()">Change Text</button>
+                        <button onclick="appendDemo()">Append Content</button>
+                        <button onclick="resetManipulation()">Reset</button>
+                    </div>
+
+                    <div class="status" id="manipulation-output"></div>
+                </div>
+
+                <div class="demo-section">
+                    <h3>CSS & Classes</h3>
+                    <div class="test-element" id="css-target">CSS Target Element</div>
+
+                    <div class="controls">
+                        <button onclick="cssDemo()">Apply CSS Styles</button>
+                        <button onclick="addClassDemo()">Add Highlight Class</button>
+                        <button onclick="removeClassDemo()">Remove Class</button>
+                        <button onclick="resetCSS()">Reset Styles</button>
+                    </div>
+
+                    <div class="status" id="css-output"></div>
+                </div>
+            </div>
+
+            <div class="api-column">
+                <h2>Selection API</h2>
+
+                <div class="api-section">
+                    <h3>Core Selectors</h3>
+                    <div class="api-method"><span class="method-name">$</span>(<span class="param">selector</span>) → <span class="return-type">NodeList</span></div>
+                    <div class="api-method"><span class="method-name">$</span>(<span class="param">'.class'</span>) → <span class="return-type">NodeList</span></div>
+                    <div class="api-method"><span class="method-name">$</span>(<span class="param">'#id'</span>) → <span class="return-type">NodeList</span></div>
+                    <div class="api-method"><span class="method-name">$</span>(<span class="param">'tag'</span>) → <span class="return-type">NodeList</span></div>
+                </div>
+
+                <div class="api-section">
+                    <h3>DOM Manipulation</h3>
+                    <div class="api-method"><span class="method-name">html</span>(<span class="param">content?</span>) → <span class="return-type">NodeList|string</span></div>
+                    <div class="api-method"><span class="method-name">text</span>(<span class="param">content?</span>) → <span class="return-type">NodeList|string</span></div>
+                    <div class="api-method"><span class="method-name">append</span>(<span class="param">content</span>) → <span class="return-type">NodeList</span></div>
+                    <div class="api-method"><span class="method-name">prepend</span>(<span class="param">content</span>) → <span class="return-type">NodeList</span></div>
+                    <div class="api-method"><span class="method-name">remove</span>() → <span class="return-type">NodeList</span></div>
+                </div>
+
+                <div class="api-section">
+                    <h3>CSS & Classes</h3>
+                    <div class="api-method"><span class="method-name">css</span>(<span class="param">styles</span>) → <span class="return-type">NodeList</span></div>
+                    <div class="api-method"><span class="method-name">addClass</span>(<span class="param">className</span>) → <span class="return-type">NodeList</span></div>
+                    <div class="api-method"><span class="method-name">removeClass</span>(<span class="param">className</span>) → <span class="return-type">NodeList</span></div>
+                    <div class="api-method"><span class="method-name">toggleClass</span>(<span class="param">className</span>) → <span class="return-type">NodeList</span></div>
+                </div>
+
+                <div class="api-section">
+                    <h3>Examples</h3>
+                    <pre class="code-example">
+<span class="code-comment">// Element selection</span>
+<span class="keyword">const</span> elements = <span class="highlight">$</span>(<span class="string">'.my-class'</span>);
+<span class="keyword">const</span> byId = <span class="highlight">$</span>(<span class="string">'#my-id'</span>);
+
+<span class="highlight">$</span>(<span class="string">'.target'</span>).html(<span class="string">'&lt;b&gt;New content&lt;/b&gt;'</span>);
+<span class="highlight">$</span>(<span class="string">'.target'</span>).text(<span class="string">'Plain text'</span>);
+<span class="highlight">$</span>(<span class="string">'.container'</span>).append(<span class="string">'&lt;p&gt;Added&lt;/p&gt;'</span>);
+
+<span class="highlight">$</span>(<span class="string">'.element'</span>).css({
+  <span class="string">'color'</span>: <span class="string">'red'</span>,
+  <span class="string">'background'</span>: <span class="string">'blue'</span>
+});
+<span class="highlight">$</span>(<span class="string">'.element'</span>).addClass(<span class="string">'active'</span>);
+</pre>
+                </div>
+            </div>
+        </div>
+
+        <div class="main-layout">
+            <div class="demo-column">
+                <h2>Event Handling & Visibility</h2>
+                <div class="demo-section">
+                    <h3>Event System</h3>
+                    <button id="event-button">Click Me!</button>
+
+                    <div class="controls">
+                        <button onclick="addEventHandler()">Add Click Handler</button>
+                        <button onclick="removeEventHandler()">Remove Handler</button>
+                        <button onclick="addMultipleEvents()">Add Multiple Events</button>
+                    </div>
+
+                    <div class="status" id="event-output"></div>
+                </div>
+
+                <div class="demo-section">
+                    <h3>Show/Hide/Toggle</h3>
+                    <div class="test-element" id="toggle-target">Toggle me!</div>
+
+                    <div class="controls">
+                        <button onclick="$('#toggle-target').hide()">Hide</button>
+                        <button onclick="$('#toggle-target').show()">Show</button>
+                        <button onclick="$('#toggle-target').toggle()">Toggle</button>
+                        <button onclick="animateVisibility()">Animate Toggle</button>
+                    </div>
+
+                    <div class="status" id="toggle-output"></div>
+                </div>
+
+                <div class="demo-section">
+                    <h3>Method Chaining</h3>
+                    <div class="demo-visual" id="chaining-demo">
+                        <div class="test-element chain-target">Chain Target 1</div>
+                        <div class="test-element chain-target">Chain Target 2</div>
+                        <div class="test-element chain-target">Chain Target 3</div>
+                    </div>
+
+                    <div class="controls">
+                        <button onclick="chainingDemo()">Demo Method Chaining</button>
+                        <button onclick="resetChaining()">Reset</button>
+                    </div>
+
+                    <div class="status" id="chaining-output"></div>
+                </div>
+            </div>
+
+            <div class="api-column">
+                <h2>Events & Visibility API</h2>
+
+                <div class="api-section">
+                    <h3>Event Methods</h3>
+                    <div class="api-method"><span class="method-name">on</span>(<span class="param">event, handler</span>) → <span class="return-type">NodeList</span></div>
+                    <div class="api-method"><span class="method-name">off</span>(<span class="param">event, handler?</span>) → <span class="return-type">NodeList</span></div>
+                    <div class="api-method"><span class="method-name">trigger</span>(<span class="param">event, data?</span>) → <span class="return-type">NodeList</span></div>
+                    <div class="api-method"><span class="method-name">once</span>(<span class="param">event, handler</span>) → <span class="return-type">NodeList</span></div>
+                </div>
+
+                <div class="api-section">
+                    <h3>Visibility Control</h3>
+                    <div class="api-method"><span class="method-name">show</span>() → <span class="return-type">NodeList</span></div>
+                    <div class="api-method"><span class="method-name">hide</span>() → <span class="return-type">NodeList</span></div>
+                    <div class="api-method"><span class="method-name">toggle</span>() → <span class="return-type">NodeList</span></div>
+                    <div class="api-method"><span class="method-name">fadeIn</span>(<span class="param">duration?</span>) → <span class="return-type">NodeList</span></div>
+                    <div class="api-method"><span class="method-name">fadeOut</span>(<span class="param">duration?</span>) → <span class="return-type">NodeList</span></div>
+                </div>
+
+                <div class="api-section">
+                    <h3>Method Chaining</h3>
+                    <div class="api-description">
+                        All u-query methods return the NodeList, enabling method chaining.
+                    </div>
+                    <pre class="code-example">
+<span class="highlight">$</span>(<span class="string">'.button'</span>).on(<span class="string">'click'</span>, <span class="keyword">function</span>() {
+  <span class="highlight">console</span>.log(<span class="string">'Clicked!'</span>);
+});
+
+<span class="highlight">$</span>(<span class="string">'.element'</span>)
+  .addClass(<span class="string">'active'</span>)
+  .css({<span class="string">'color'</span>: <span class="string">'red'</span>})
+  .show()
+  .on(<span class="string">'click'</span>, handler);
+
+<span class="highlight">$</span>(<span class="string">'.modal'</span>).fadeIn(<span class="highlight">300</span>);
+<span class="highlight">$</span>(<span class="string">'.tooltip'</span>).fadeOut(<span class="highlight">200</span>);
+</pre>
+                </div>
+            </div>
+        </div>
+
+        <div class="main-layout">
+            <div class="demo-column">
+                <h2>AJAX & Global Events</h2>
+                <div class="demo-section">
+                    <h3>AJAX Utilities</h3>
+                    <div class="ajax-visual" id="ajax-visual">
+                        <div class="loading-animation" id="loading-animation" style="animation-play-state: paused;"></div>
+                        <span>AJAX Request Status</span>
+                    </div>
+
+                    <div class="controls">
+                        <button onclick="ajaxDemo()">GET Request</button>
+                        <button onclick="postDemo()">POST Request</button>
+                        <button onclick="asyncDemo()">Async/Await Demo</button>
+                    </div>
+
+                    <div class="status" id="ajax-output"></div>
+                </div>
+
+                <div class="demo-section">
+                    <h3>Global Event System</h3>
+                    <input type="text" id="global-event-data" placeholder="Event data" value="Hello global events!">
+
+                    <div class="controls">
+                        <button onclick="addGlobalListener()">Add Global Listener</button>
+                        <button onclick="emitGlobalEvent()">Emit Global Event</button>
+                        <button onclick="removeGlobalListener()">Remove Listener</button>
+                    </div>
+
+                    <div class="status" id="global-output"></div>
+                </div>
+
+                <div class="demo-section">
+                    <h3>Utility Functions</h3>
+                    <div class="test-element util-target">Utility Element 1</div>
+                    <div class="test-element util-target">Utility Element 2</div>
+                    <div class="test-element util-target">Utility Element 3</div>
+
+                    <div class="controls">
+                        <button onclick="eachDemo()">Test $.each</button>
+                        <button onclick="readyDemo()">Test $.ready</button>
+                        <button onclick="utilityChain()">Utility Chain Demo</button>
+                    </div>
+
+                    <div class="status" id="utility-output"></div>
+                </div>
+            </div>
+
+            <div class="api-column">
+                <h2>AJAX & Utilities API</h2>
+
+                <div class="api-section">
+                    <h3>AJAX Methods</h3>
+                    <div class="api-method"><span class="method-name">$.get</span>(<span class="param">url, callback</span>) → <span class="return-type">Promise</span></div>
+                    <div class="api-method"><span class="method-name">$.post</span>(<span class="param">url, data, callback</span>) → <span class="return-type">Promise</span></div>
+                    <div class="api-method"><span class="method-name">$.ajax</span>(<span class="param">options</span>) → <span class="return-type">Promise</span></div>
+                    <div class="api-method"><span class="method-name">$.json</span>(<span class="param">url</span>) → <span class="return-type">Promise</span></div>
+                </div>
+
+                <div class="api-section">
+                    <h3>Global Event System</h3>
+                    <div class="api-method"><span class="method-name">$.on</span>(<span class="param">event, handler</span>) → <span class="return-type">$</span></div>
+                    <div class="api-method"><span class="method-name">$.off</span>(<span class="param">event, handler?</span>) → <span class="return-type">$</span></div>
+                    <div class="api-method"><span class="method-name">$.emit</span>(<span class="param">event, data?</span>) → <span class="return-type">number</span></div>
+                    <div class="api-method"><span class="method-name">$.trigger</span>(<span class="param">event, data?</span>) → <span class="return-type">number</span></div>
+                </div>
+
+                <div class="api-section">
+                    <h3>Utility Functions</h3>
+                    <div class="api-method"><span class="method-name">$.each</span>(<span class="param">selector, callback</span>) → <span class="return-type">$</span></div>
+                    <div class="api-method"><span class="method-name">$.ready</span>(<span class="param">callback</span>) → <span class="return-type">$</span></div>
+                    <div class="api-method"><span class="method-name">$.extend</span>(<span class="param">target, ...sources</span>) → <span class="return-type">object</span></div>
+                    <div class="api-method"><span class="method-name">$.map</span>(<span class="param">selector, callback</span>) → <span class="return-type">Array</span></div>
+                </div>
+
+                <div class="api-section">
+                    <h3>Examples</h3>
+                    <pre class="code-example">
+<span class="keyword">const</span> data = <span class="keyword">await</span> <span class="highlight">$.get</span>(<span class="string">'/api/users'</span>);
+<span class="highlight">$.post</span>(<span class="string">'/api/users'</span>, {name: <span class="string">'John'</span>})
+  .then(<span class="param">response</span> => <span class="highlight">console</span>.log(<span class="param">response</span>));
+
+<span class="highlight">$.on</span>(<span class="string">'user-login'</span>, <span class="param">user</span> => {
+  <span class="highlight">console</span>.log(<span class="string">'User logged in:'</span>, <span class="param">user</span>);
+});
+<span class="highlight">$.emit</span>(<span class="string">'user-login'</span>, {id: <span class="highlight">123</span>});
+
+<span class="highlight">$.each</span>(<span class="string">'.item'</span>, (<span class="param">el</span>, <span class="param">i</span>) => {
+  <span class="param">el</span>.textContent = <span class="string">`Item ${</span><span class="param">i</span><span class="string">}`</span>;
+});
+
+<span class="highlight">$.ready</span>(() => {
+  <span class="highlight">console</span>.log(<span class="string">'DOM ready!'</span>);
+});
+</pre>
+                </div>
+            </div>
+        </div>
+
+        <div class="main-layout">
+            <div class="demo-column">
+                <h2>Browser Info</h2>
+                <div class="demo-section">
+                    <div class="status" id="library-info">Loading library information...</div>
+
+                    <h3>This browser supports</h3>
+                    <div id="feature-support" class="status"></div>
+
+                    <div class="controls">
+                        <button onclick="testCompatibility()">Test Browser Compatibility</button>
+                        <button onclick="performanceBenchmark()">Performance Benchmark</button>
+                    </div>
+                </div>
+            </div>
+
+            <div class="api-column">
+                <h2>Advanced Features</h2>
+
+                <div class="api-section">
+                    <h3>Advanced Selectors</h3>
+                    <div class="api-method"><span class="method-name">$</span>(<span class="param">':visible'</span>) → <span class="return-type">NodeList</span></div>
+                    <div class="api-method"><span class="method-name">$</span>(<span class="param">':hidden'</span>) → <span class="return-type">NodeList</span></div>
+                    <div class="api-method"><span class="method-name">$</span>(<span class="param">':checked'</span>) → <span class="return-type">NodeList</span></div>
+                    <div class="api-method"><span class="method-name">$</span>(<span class="param">':first'</span>) → <span class="return-type">NodeList</span></div>
+                    <div class="api-method"><span class="method-name">$</span>(<span class="param">':last'</span>) → <span class="return-type">NodeList</span></div>
+                </div>
+
+                <div class="api-section">
+                    <h3>Data Attributes</h3>
+                    <div class="api-method"><span class="method-name">data</span>(<span class="param">key, value?</span>) → <span class="return-type">NodeList|any</span></div>
+                    <div class="api-method"><span class="method-name">attr</span>(<span class="param">name, value?</span>) → <span class="return-type">NodeList|string</span></div>
+                    <div class="api-method"><span class="method-name">prop</span>(<span class="param">name, value?</span>) → <span class="return-type">NodeList|any</span></div>
+                    <div class="api-method"><span class="method-name">val</span>(<span class="param">value?</span>) → <span class="return-type">NodeList|string</span></div>
+                </div>
+
+                <div class="api-section">
+                    <h3>Traversal Methods</h3>
+                    <div class="api-method"><span class="method-name">parent</span>() → <span class="return-type">NodeList</span></div>
+                    <div class="api-method"><span class="method-name">children</span>() → <span class="return-type">NodeList</span></div>
+                    <div class="api-method"><span class="method-name">siblings</span>() → <span class="return-type">NodeList</span></div>
+                    <div class="api-method"><span class="method-name">find</span>(<span class="param">selector</span>) → <span class="return-type">NodeList</span></div>
+                    <div class="api-method"><span class="method-name">closest</span>(<span class="param">selector</span>) → <span class="return-type">NodeList</span></div>
+                </div>
+
+                <div class="api-section">
+                    <h3>DOM Diff Updates</h3>
+                    <div class="api-description">
+                        u-query can make use of morphdom.js for efficient DOM diff updates.
+                    </div>
+                    <div class="api-method"><span class="method-name">$.options.alwaysDoDifferentialUpdate</span> = <span class="param">true</span></div>
+                    <div class="api-description">
+                        Global flag for morphdom.
+                    </div>
+                </div>
+
+            </div>
+        </div>
+    </div>
+
+    <script src="u-query.js"></script>
+    <script>
+        let clickHandler, globalHandler;
+
+        // Initialize library info on load
+        document.addEventListener('DOMContentLoaded', () => {
+            updateLibraryInfo();
+            updateFeatureSupport();
+        });
+
+        function updateLibraryInfo() {
+            const info = document.getElementById('library-info');
+            const version = typeof $ !== 'undefined' ? 'Loaded' : 'Not Available';
+            const selectors = document.querySelectorAll('*').length;
+
+            info.textContent = `
+Library Status: ${version}
+DOM Elements: ${selectors}
+Browser: ${navigator.userAgent.split(' ')[0]}
+Features: ES6+, Promises, DOM API
+Build: Development
+            `.trim();
+        }
+
+        function updateFeatureSupport() {
+            const features = [
+                { name: 'Promises', supported: typeof Promise !== 'undefined' },
+                { name: 'Arrow Functions', supported: true },
+                { name: 'Template Literals', supported: true },
+                { name: 'Fetch API', supported: typeof fetch !== 'undefined' },
+                { name: 'querySelector', supported: typeof document.querySelector !== 'undefined' },
+                { name: 'addEventListener', supported: typeof document.addEventListener !== 'undefined' }
+            ];
+
+            const support = features.map(feature =>
+                `${feature.name}: ${feature.supported ? 'Supported' : 'Not Supported'}`
+            ).join('\n');
+
+            document.getElementById('feature-support').textContent = support;
+        }
+
+        function log(elementId, message) {
+            const element = document.getElementById(elementId);
+            if (element) {
+                element.textContent += new Date().toLocaleTimeString() + ': ' + message + '\n';
+                element.scrollTop = element.scrollHeight;
+            }
+        }
+
+        // Enhanced Selection Demos
+        function selectAllElements() {
+            clearSelection();
+            const elements = $('.test-element');
+            elements.forEach(el => el.classList.add('highlighted'));
+            updateSelectionVisual(`Selected ${elements.length} .test-element items`);
+            log('selection-output', `Found ${elements.length} elements with class 'test-element'`);
+        }
+
+        function selectSpecial() {
+            clearSelection();
+            const elements = $('.special');
+            elements.forEach(el => el.classList.add('highlighted'));
+            updateSelectionVisual(`Selected ${elements.length} .special items`);
+            log('selection-output', `Found ${elements.length} elements with class 'special'`);
+        }
+
+        function selectById() {
+            clearSelection();
+            const elements = $('#test-2');
+            elements.forEach(el => el.classList.add('highlighted'));
+            updateSelectionVisual(`Selected element by ID: #test-2`);
+            log('selection-output', `Found element by ID: ${elements.length > 0 ? elements[0].textContent : 'none'}`);
+        }
+
+        function clearSelection() {
+            $('.test-element').forEach(el => el.classList.remove('highlighted'));
+            updateSelectionVisual('Selection cleared');
+        }
+
+        function updateSelectionVisual(message) {
+            const visual = document.getElementById('selection-visual');
+            visual.textContent = message;
+            visual.classList.add('active');
+            setTimeout(() => visual.classList.remove('active'), 2000);
+        }
+
+        // DOM Manipulation
+        function htmlDemo() {
+            $('#manipulation-target').html('<strong>HTML content changed</strong>');
+            log('manipulation-output', 'HTML content updated with formatting');
+        }
+
+        function textDemo() {
+            $('#manipulation-target').text('Text content changed');
+            log('manipulation-output', 'Text content updated (plain text)');
+        }
+
+        function appendDemo() {
+            $('#manipulation-target').append(' <em>Appended content</em>');
+            log('manipulation-output', 'Content appended to existing content');
+        }
+
+        function resetManipulation() {
+            $('#manipulation-target').html('Original content');
+            log('manipulation-output', 'Content reset to original state');
+        }
+
+        // CSS and Classes
+        function cssDemo() {
+            $('#css-target').css({
+                'background': 'linear-gradient(45deg, #ff6b6b, #4ecdc4)',
+                'color': 'white',
+                'border-radius': '10px',
+                'padding': '15px',
+                'transform': 'scale(1.05)',
+                'transition': 'all 0.3s ease'
+            });
+            log('css-output', 'Applied gradient background and transformation');
+        }
+
+        function addClassDemo() {
+            $('#css-target').addClass('highlighted');
+            log('css-output', 'Added "highlighted" class');
+        }
+
+        function removeClassDemo() {
+            $('#css-target').removeClass('highlighted');
+            log('css-output', 'Removed "highlighted" class');
+        }
+
+        function resetCSS() {
+            $('#css-target').css({
+                'background': '',
+                'color': '',
+                'border-radius': '',
+                'padding': '',
+                'transform': '',
+                'transition': ''
+            }).removeClass('highlighted');
+            log('css-output', 'All styles and classes reset');
+        }
+
+        function addEventHandler() {
+            clickHandler = function(e) {
+                log('event-output', `Button clicked! Event type: ${e.type}`);
+                e.target.style.transform = 'scale(0.95)';
+                setTimeout(() => e.target.style.transform = '', 150);
+            };
+            $('#event-button').on('click', clickHandler);
+            log('event-output', 'Click handler added with visual feedback');
+        }
+
+        function removeEventHandler() {
+            if (clickHandler) {
+                $('#event-button').off('click', clickHandler);
+                log('event-output', 'Click handler removed');
+            }
+        }
+
+        function addMultipleEvents() {
+            const button = $('#event-button')[0];
+            if (button) {
+                const events = {
+                    mouseenter: () => log('event-output', 'Mouse entered button'),
+                    mouseleave: () => log('event-output', 'Mouse left button'),
+                    focus: () => log('event-output', 'Button focused'),
+                    blur: () => log('event-output', 'Button lost focus')
+                };
+
+                Object.entries(events).forEach(([event, handler]) => {
+                    button.addEventListener(event, handler);
+                });
+
+                log('event-output', 'Added multiple event listeners (hover, focus, blur)');
+            }
+        }
+
+        function animateVisibility() {
+            const target = $('#toggle-target')[0];
+            if (target) {
+                target.style.transition = 'all 0.5s ease';
+                target.style.transform = target.style.display === 'none' ? 'scale(1)' : 'scale(0)';
+                setTimeout(() => {
+                    $('#toggle-target').toggle();
+                    if (target.style.display !== 'none') {
+                        target.style.transform = 'scale(1)';
+                    }
+                }, 250);
+                log('toggle-output', 'Animated visibility toggle with scaling effect');
+        }
+
+        function ajaxDemo() {
+            }
+        }
+
+        // Enhanced AJAX with visual feedback
+        function ajaxDemo() {
+            updateAjaxVisual(true);
+            log('ajax-output', 'Initiating GET request...');
+
+            $.get('https://jsonplaceholder.typicode.com/posts/1', function(data) {
+                updateAjaxVisual(false);
+                log('ajax-output', `GET Success: "${data.title.substring(0, 50)}..."`);
+                log('ajax-output', `Response body: ${data.body.substring(0, 100)}...`);
+            }).catch(error => {
+                updateAjaxVisual(false);
+                log('ajax-output', `GET Error: ${error.message}`);
+            });
+        }
+
+        function postDemo() {
+            updateAjaxVisual(true);
+            log('ajax-output', 'Initiating POST request...');
+
+            $.post('https://jsonplaceholder.typicode.com/posts', {
+                title: 'u-query demo post',
+                body: 'This is a test post from u-query demonstration',
+                userId: 1
+            }, function(data) {
+                updateAjaxVisual(false);
+                log('ajax-output', `POST Success: Created post with ID ${data.id}`);
+                log('ajax-output', `Posted title: "${data.title}"`);
+            }).catch(error => {
+                updateAjaxVisual(false);
+                log('ajax-output', `POST Error: ${error.message}`);
+            });
+        }
+
+        async function asyncDemo() {
+            try {
+                updateAjaxVisual(true);
+                log('ajax-output', 'Using async/await pattern...');
+
+                const response = await fetch('https://jsonplaceholder.typicode.com/users/1');
+                const user = await response.json();
+
+                updateAjaxVisual(false);
+                log('ajax-output', `Async Success: User "${user.name}" from ${user.address.city}`);
+                log('ajax-output', `Email: ${user.email}, Phone: ${user.phone}`);
+            } catch (error) {
+                updateAjaxVisual(false);
+                log('ajax-output', `Async Error: ${error.message}`);
+            }
+        }
+
+        function updateAjaxVisual(loading) {
+            const visual = document.getElementById('ajax-visual');
+            const animation = document.getElementById('loading-animation');
+            const text = visual.querySelector('span');
+
+            if (loading) {
+                visual.style.background = 'linear-gradient(45deg, #ff6b6b, #4ecdc4)';
+                animation.style.animationPlayState = 'running';
+                text.textContent = 'Loading...';
+            } else {
+                visual.style.background = 'linear-gradient(45deg, #1e3c72, #2a5298)';
+                animation.style.animationPlayState = 'paused';
+                text.textContent = 'Request Complete';
+            }
+        }
+
+        function addGlobalListener() {
+            globalHandler = function(data) {
+                log('global-output', `Global event received: "${data}"`);
+            };
+            $.on('demo-event', globalHandler);
+            log('global-output', 'Global listener added for "demo-event"');
+        }
+
+        function emitGlobalEvent() {
+            const data = $('#global-event-data')[0].value;
+            const count = $.emit('demo-event', data);
+            log('global-output', `Event emitted to ${count} listeners with data: "${data}"`);
+        }
+
+        function removeGlobalListener() {
+            if (globalHandler) {
+                $.off('demo-event', globalHandler);
+                log('global-output', 'Global listener removed');
+            }
+        }
+
+        function eachDemo() {
+            document.getElementById('utility-output').textContent = '';
+            $.each('.util-target', function(element, index) {
+                element.style.background = `hsl(${index * 60}, 70%, 90%)`;
+                element.style.transform = `translateX(${index * 10}px)`;
+                log('utility-output', `Element ${index + 1}: "${element.textContent}" - styled`);
+            });
+
+            setTimeout(() => {
+                $('.util-target').forEach(el => {
+                    el.style.background = '';
+                    el.style.transform = '';
+                });
+            }, 3000);
+        }
+
+        function readyDemo() {
+            $.ready(function() {
+                log('utility-output', '$.ready() callback executed - DOM fully loaded');
+                log('utility-output', `Current timestamp: ${new Date().toLocaleString()}`);
+            });
+        }
+
+        function utilityChain() {
+            $.each('.util-target', (el, i) => {
+                $(el).css({'color': 'blue'}).addClass('highlighted');
+            });
+            log('utility-output', 'Utility chain: each + css + addClass applied');
+
+            setTimeout(() => {
+                $('.util-target').css({'color': ''}).removeClass('highlighted');
+                log('utility-output', 'Utility chain effects reset');
+            }, 2000);
+        }
+
+        function chainingDemo() {
+            $('.chain-target')
+                .addClass('highlighted')
+                .css({
+                    'color': 'white',
+                    'background': 'linear-gradient(45deg, #667eea, #764ba2)',
+                    'transform': 'translateY(-5px) rotate(2deg)',
+                    'transition': 'all 0.5s ease'
+                })
+                .show();
+
+            log('chaining-output', 'Method chain applied: addClass → css → show');
+            log('chaining-output', 'Added highlight, gradient, and transform');
+        }
+
+        function resetChaining() {
+            $('.chain-target')
+                .removeClass('highlighted')
+                .css({
+                    'color': '',
+                    'background': '',
+                    'transform': '',
+                    'transition': ''
+                });
+
+            log('chaining-output', 'Method chain reset: removeClass → css clear');
+        }
+
+        // Performance and Compatibility
+        function testCompatibility() {
+            const tests = [
+                { name: 'CSS Selectors', test: () => !!document.querySelector },
+                { name: 'Event Listeners', test: () => !!document.addEventListener },
+                { name: 'Fetch API', test: () => !!window.fetch },
+                { name: 'Promises', test: () => !!window.Promise },
+                { name: 'Arrow Functions', test: () => { try { eval('() => {}'); return true; } catch { return false; } } },
+                { name: 'Template Literals', test: () => { try { eval('`test`'); return true; } catch { return false; } } }
+            ];
+
+            document.getElementById('library-info').textContent = 'Running compatibility tests...\n';
+
+            tests.forEach((test, i) => {
+                setTimeout(() => {
+                    const result = test.test();
+                    document.getElementById('library-info').textContent +=
+                        `${test.name}: ${result ? 'Supported' : 'Not Supported'}\n`;
+                }, i * 200);
+            });
+        }
+
+        function performanceBenchmark() {
+            const iterations = 1000;
+            const start = performance.now();
+
+            for (let i = 0; i < iterations; i++) {
+                $('.test-element').css({'color': 'red'}).addClass('test-class').removeClass('test-class');
+            }
+
+            const end = performance.now();
+            const duration = (end - start).toFixed(2);
+
+            document.getElementById('library-info').textContent =
+                `Performance Benchmark Complete\n` +
+                `Operations: ${iterations} selection + css + addClass + removeClass\n` +
+                `Duration: ${duration}ms\n` +
+                `Avg per operation: ${(duration / iterations).toFixed(4)}ms\n` +
+                `Operations per second: ${(iterations / (duration / 1000)).toFixed(0)}`;
+        }
+
+        $.ready(function() {
+            log('utility-output', 'Demo initialized successfully');
+        });
+
+        setInterval(updateLibraryInfo, 5000);
+    </script>
+</body>
+</html>

site/examples/uce-starter/js/u-query.js

@@ -0,0 +1,589 @@
+(function (root, factory) {
+    // this is the stupid UMD pattern, but eh we lost that battle a long time ago
+	if (typeof exports === 'object' && typeof module !== 'undefined') {
+		var exports_obj = factory();
+		module.exports = exports_obj.$;
+		// Also export individual components
+		for (var key in exports_obj) {
+			if (key !== '$' && exports_obj.hasOwnProperty(key)) {
+				exports[key] = exports_obj[key];
+			}
+		}
+	} else if (typeof define === 'function' && define.amd) {
+		define([], factory);
+	} else {
+		var exports_obj = factory();
+		root.$ = exports_obj.$;
+		for (var key in exports_obj) {
+			if (key !== '$' && exports_obj.hasOwnProperty(key)) {
+				root[key] = exports_obj[key];
+			}
+		}
+	}
+}(typeof self !== 'undefined' ? self : this, function () {
+
+// a collection of DOM utility functions that I thought were cool in jQuery
+
+class EventEmitter {
+	constructor() {
+		/** Map<eventName, Map<slotKey|Symbol, Function>> */
+		this._topics = new Map();
+	}
+
+	/**
+	 * Subscribe to `topic`. If `slot_key` is provided (truthy),
+	 * it dedupes by that key; otherwise a unique Symbol is used.
+	 * Returns an unsubscribe fn.
+	 */
+	on(topic, handler, slot_key = null) {
+		let map = this._topics.get(topic);
+		if (!map) {
+			map = new Map();
+			this._topics.set(topic, map);
+		}
+		// use the provided slot_key or a fresh Symbol()
+		const key = slot_key != null ? slot_key : Symbol();
+		map.set(key, handler);
+		return () => this.off(topic, key);
+	}
+
+	/**
+	 * Unsubscribe by handler function or by slot_key.
+	 */
+	off(topic, handlerOrSlotKey) {
+		const map = this._topics.get(topic);
+		if (!map) return;
+
+		// if it matches a slotKey directly, remove it
+		if (map.has(handlerOrSlotKey)) {
+			map.delete(handlerOrSlotKey);
+		} else {
+			// otherwise assume it's a function: remove all matching fns
+			for (const [key, fn] of map.entries()) {
+				if (fn === handlerOrSlotKey) {
+					map.delete(key);
+				}
+			}
+		}
+
+		if (map.size === 0) {
+			this._topics.delete(topic);
+		}
+	}
+
+	/**
+	 * Emit to all handlers on `topic`. Handlers returning
+	 * 'remove_handler' are auto-removed.
+	 * Returns the number of handlers invoked.
+	 */
+	emit(topic, ...args) {
+		let count = 0;
+		const map = this._topics.get(topic);
+		if (!map) return count;
+
+		for (const [key, fn] of Array.from(map.entries())) {
+			const res = fn(...args);
+			count++;
+			if (res === 'remove_handler') {
+				map.delete(key);
+			}
+		}
+
+		if (map.size === 0) {
+			this._topics.delete(topic);
+		}
+		return count;
+	}
+}
+
+class QueryWrapper extends Array {
+    constructor(elements) {
+        super();
+        if (elements) {
+            this.push(...(Array.isArray(elements) ? elements : [elements]));
+        }
+    }
+}
+
+$ = function(selector_or_element) {
+    let elements;
+    if (selector_or_element instanceof Element || selector_or_element === document || selector_or_element === window) {
+        elements = [selector_or_element];
+    } else if (typeof selector_or_element === 'string') {
+        // Check if string looks like HTML (starts with < and ends with >)
+        if (selector_or_element.trim().charAt(0) === '<' && selector_or_element.trim().charAt(selector_or_element.trim().length - 1) === '>') {
+            // Create element from HTML string
+            let temp = document.createElement('div');
+            temp.innerHTML = selector_or_element.trim();
+            elements = Array.from(temp.children);
+        } else {
+            // Treat as CSS selector
+            elements = Array.from(document.querySelectorAll(selector_or_element));
+        }
+    } else if (selector_or_element instanceof NodeList || Array.isArray(selector_or_element)) {
+        elements = Array.from(selector_or_element);
+    } else {
+        elements = [selector_or_element];
+    }
+    return new QueryWrapper(elements);
+};
+
+$.options = {
+    alwaysDoDifferentialUpdate: true,
+};
+
+$.events = new EventEmitter();
+$.on = $.events.on.bind($.events);
+$.off = $.events.off.bind($.events);
+$.emit = $.events.emit.bind($.events);
+
+$.each = function(selector, callback) {
+    let elements;
+    if (typeof selector === 'string') {
+        elements = document.querySelectorAll(selector);
+    } else if (selector instanceof QueryWrapper) {
+        elements = selector;
+    } else {
+        elements = selector;
+    }
+    for (let i = 0; i < elements.length; i++) {
+        callback(elements[i], i);
+    }
+}
+
+$.post = function(url, data, callback) {
+    return $.ajax({
+        method: 'POST',
+        url: url,
+        data: data,
+        success: callback,
+        error: function(xhr) {
+            console.error('POST request failed:', xhr);
+        }
+    });
+}
+
+$.get = function(url, callback) {
+    return $.ajax({
+        method: 'GET',
+        url: url,
+        success: callback,
+        error: function(xhr) {
+            console.error('GET request failed:', xhr);
+        }
+    });
+}
+
+$.ajax = function(options) {
+    return new Promise((resolve, reject) => {
+        var xhr = new XMLHttpRequest();
+        xhr.open(options.method || 'GET', options.url, true);
+        
+        // Set default headers
+        if (options.method === 'POST' || options.data) {
+            xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
+        }
+        
+        // Set custom headers
+        if (options.headers) {
+            for (var key in options.headers) {
+                xhr.setRequestHeader(key, options.headers[key]);
+            }
+        }
+        
+        xhr.onreadystatechange = function() {
+            if (xhr.readyState === 4) {
+                var response;
+                try {
+                    response = JSON.parse(xhr.responseText);
+                } catch (e) {
+                    // If JSON parsing fails, use raw response
+                    response = xhr.responseText;
+                }
+                
+                if (xhr.status >= 200 && xhr.status < 300) {
+                    if (options.success) options.success(response);
+                    resolve(response);
+                } else {
+                    if (options.error) options.error(xhr);
+                    reject(xhr);
+                }
+            }
+        };
+        
+        var data = null;
+        if (options.data) {
+            data = typeof options.data === 'string' ? options.data : JSON.stringify(options.data);
+        }
+        
+        xhr.send(data);
+    });
+}
+
+$.ready = function(callback) {
+    if (document.readyState !== 'loading') {
+        callback();
+    } else {
+        document.addEventListener('DOMContentLoaded', callback);
+    }
+}
+
+// Helper function to execute scripts in HTML content
+function executeScripts(htmlContent) {
+    // Create a temporary container to parse the HTML
+    const tempDiv = document.createElement('div');
+    tempDiv.innerHTML = htmlContent;
+    
+    // Find all script tags and disable them temporarily
+    const scripts = tempDiv.querySelectorAll('script');
+    const scriptData = [];
+    
+    scripts.forEach((script) => {
+        // Store script data for later execution
+        scriptData.push({
+            content: script.textContent || script.innerText || '',
+            src: script.src,
+            type: script.type,
+            nonce: script.nonce,
+            async: script.async,
+            defer: script.defer
+        });
+        
+        // Disable the script by changing its type
+        script.type = 'text/disabled-script';
+    });
+    
+    // Return the modified HTML and script data
+    return {
+        html: tempDiv.innerHTML,
+        scripts: scriptData
+    };
+}
+
+// Helper function to execute a single script
+function executeScript(scriptInfo) {
+    if (scriptInfo.src) {
+        // External script
+        const newScript = document.createElement('script');
+        if (scriptInfo.type && scriptInfo.type !== 'text/disabled-script') {
+            newScript.type = scriptInfo.type;
+        }
+        if (scriptInfo.nonce) newScript.nonce = scriptInfo.nonce;
+        if (scriptInfo.async) newScript.async = scriptInfo.async;
+        if (scriptInfo.defer) newScript.defer = scriptInfo.defer;
+        newScript.src = scriptInfo.src;
+        
+        document.head.appendChild(newScript);
+    } else if (scriptInfo.content.trim()) {
+        // Inline script
+        const newScript = document.createElement('script');
+        if (scriptInfo.type && scriptInfo.type !== 'text/disabled-script') {
+            newScript.type = scriptInfo.type;
+        }
+        if (scriptInfo.nonce) newScript.nonce = scriptInfo.nonce;
+        newScript.text = scriptInfo.content;
+        
+        // Execute by inserting and immediately removing
+        document.head.appendChild(newScript);
+        document.head.removeChild(newScript);
+    }
+}
+
+// Add all the jQuery-like methods to QueryWrapper
+QueryWrapper.prototype.parent = function() {
+    const parents = Array.from(this).map(el => el.parentNode).filter(el => el);
+    return new QueryWrapper(parents);
+}
+
+QueryWrapper.prototype.load = function(url, opt = {}) {
+    return new Promise((resolve, reject) => {
+        const ajaxOptions = {
+            method: opt.method || (opt.postData ? 'POST' : 'GET'),
+            url: url,
+            success: (response) => {
+                if(opt.replace)
+                    this.replaceWith(response, opt);
+                else
+                    this.html(response, opt);
+                if (opt.onLoad) opt.onLoad(response, null);
+                resolve(this);
+            },
+            error: (xhr) => {
+                if (opt.onError) opt.onError(xhr);
+                reject(new Error('Failed to load: ' + url));
+            }
+        };
+
+        if (opt.postData) {
+            ajaxOptions.data = opt.postData;
+        }
+
+        $.ajax(ajaxOptions);
+    });
+}
+
+QueryWrapper.prototype.html = function(opt_content = false, prop = {}) {
+    if (opt_content === false) {
+        return Array.from(this).map(el => el.innerHTML).join('');
+    }
+    if(typeof prop.diff == 'undefined') 
+        prop.diff = $.options.alwaysDoDifferentialUpdate;
+    if(prop.diff === true) {
+        const temp = document.createElement('div');
+        temp.innerHTML = opt_content;
+        this.forEach(el => {
+            morphdom(el, temp, { childrenOnly: true });
+        });
+    } else {
+        this.forEach(el => {
+            const result = executeScripts(opt_content);
+            el.innerHTML = result.html;
+            result.scripts.forEach(executeScript);
+        });
+    }
+    return this;
+}
+
+QueryWrapper.prototype.text = function(opt_content = false) {
+    if (opt_content === false) {
+        return Array.from(this).map(el => el.textContent).join('');
+    }
+    this.forEach(el => {
+        el.textContent = opt_content;
+    });
+    return this;
+}
+
+QueryWrapper.prototype.replaceWith = function(content, prop = {}) {
+    if(typeof prop.diff == 'undefined')
+        prop.diff = $.options.alwaysDoDifferentialUpdate;
+    if(prop.diff === true) {
+        this.forEach(el => {
+            morphdom(el, content);
+        });
+    } else {
+        if(typeof content === 'string') {
+            this.forEach(el => {
+                const tempDiv = document.createElement('div');
+                tempDiv.innerHTML = content;
+                el.parentNode.replaceChild(tempDiv.firstChild, el);
+            });
+        } else if(content instanceof Element) {
+            this.forEach(el => {
+                el.parentNode.replaceChild(content.cloneNode(true), el);
+            });
+        }
+    }
+    return this;
+}
+
+QueryWrapper.prototype.query = function(selector) {
+    const found = Array.from(this).reduce((acc, el) => {
+        const results = el.querySelectorAll(selector);
+        return acc.concat(Array.from(results));
+    }, []);
+    return new QueryWrapper(found);
+}
+
+QueryWrapper.prototype.find = function(selector) {
+    const found = Array.from(this).reduce((acc, el) => {
+        const results = el.querySelectorAll(selector);
+        return acc.concat(Array.from(results));
+    }, []);
+    return new QueryWrapper(found);
+}
+
+QueryWrapper.prototype.on = function(event, handler) {
+    this.forEach(function(el) {
+        el.addEventListener(event, handler);
+    });
+    return this;
+}
+
+QueryWrapper.prototype.off = function(event, handler) {
+    this.forEach(function(el) {
+        el.removeEventListener(event, handler);
+    });
+    return this;
+}
+
+QueryWrapper.prototype.hide = function() {
+    return this.css({ display: 'none' });
+}
+
+QueryWrapper.prototype.show = function() {
+    return this.css({ display: ''  });
+}
+
+QueryWrapper.prototype.toggle = function() {
+    this.forEach(function(el) {
+        el.style.display = (el.style.display === 'none' || el.style.display === '') ? '' : 'none';
+    });
+    return this;
+}
+
+QueryWrapper.prototype.attr = function(name, value) {
+    if (value === undefined) {
+        return this.length > 0 ? this[0].getAttribute(name) : null;
+    }
+    this.forEach(function(el) {
+        el.setAttribute(name, value);
+    });
+    return this;
+}
+
+QueryWrapper.prototype.addClass = function(classNameOrList) {
+    var classList = Array.isArray(classNameOrList) ? classNameOrList : [classNameOrList];
+    this.forEach(function(el) {
+        classList.forEach(function(classNames) {
+            // Split space-separated class names
+            var classes = classNames.toString().split(/\s+/).filter(function(name) { return name.length > 0; });
+            classes.forEach(function(className) {
+                el.classList.add(className);
+            });
+        });
+    });
+    return this;
+}
+
+QueryWrapper.prototype.removeClass = function(classNameOrList) {
+    var classList = Array.isArray(classNameOrList) ? classNameOrList : [classNameOrList];
+    this.forEach(function(el) {
+        classList.forEach(function(classNames) {
+            // Split space-separated class names
+            var classes = classNames.toString().split(/\s+/).filter(function(name) { return name.length > 0; });
+            classes.forEach(function(className) {
+                el.classList.remove(className);
+            });
+        });
+    });
+    return this;
+}
+
+QueryWrapper.prototype.toggleClass = function(classNameOrList, force) {
+    var classList = Array.isArray(classNameOrList) ? classNameOrList : [classNameOrList];
+    this.forEach(function(el) {
+        classList.forEach(function(classNames) {
+            // Split space-separated class names
+            var classes = classNames.toString().split(/\s+/).filter(function(name) { return name.length > 0; });
+            classes.forEach(function(className) {
+                if (typeof force !== 'undefined') {
+                    el.classList.toggle(className, force);
+                } else {
+                    el.classList.toggle(className);
+                }
+            });
+        });
+    });
+    return this;
+}
+
+QueryWrapper.prototype.empty = function() {
+    this.forEach(function(el) {
+        el.innerHTML = '';
+    });
+    return this;
+}
+
+QueryWrapper.prototype.css = function(styles, optOrValue) {
+    // If no arguments or first argument is a string (getter mode)
+    if (arguments.length === 0 || (typeof styles === 'string' && arguments.length === 1)) {
+        if (this.length === 0) return undefined;
+        var el = this[0];
+        if (typeof styles === 'string') {
+            // Get computed style for a specific property
+            return window.getComputedStyle(el)[styles];
+        } else {
+            // Return computed styles object (not commonly used)
+            return window.getComputedStyle(el);
+        }
+    }
+    
+    // Setter mode
+    this.forEach(function(el) {
+        if (typeof styles === 'string' && arguments.length >= 2) {
+            // Single property setter: .css('prop', 'value')
+            el.style[styles] = optOrValue;
+        } else if (typeof styles === 'object') {
+            // Multiple properties setter: .css({prop1: 'value1', prop2: 'value2'})
+            for (var key in styles) {
+                el.style[key] = styles[key];
+            }
+        }
+    });
+    return this;
+}
+
+QueryWrapper.prototype.each = function(callback) {
+    this.forEach(function(el, index) {
+        callback(el, index);
+    });
+    return this;
+}
+
+QueryWrapper.prototype.append = function(child_or_html) {
+    this.forEach(function(el) {
+        if (typeof child_or_html === 'string' && el.insertAdjacentHTML) {
+            if (child_or_html.includes('<script')) {
+                const result = executeScripts(child_or_html);
+                el.insertAdjacentHTML('beforeend', result.html);
+                result.scripts.forEach(executeScript);
+            } else {
+                el.insertAdjacentHTML('beforeend', child_or_html);
+            }
+        } else if (el.appendChild) {
+            if (typeof child_or_html === 'string') {
+                const tempDiv = document.createElement('div');
+                tempDiv.innerHTML = child_or_html;
+                el.appendChild(tempDiv.firstChild);
+            } else {
+                el.appendChild(child_or_html);
+            }
+        } else if(el.hasOwnProperty('innerHTML')) {
+            el.innerHTML += child_or_html;
+        }
+    });
+    return this;
+}
+
+QueryWrapper.prototype.remove = function() {
+    this.forEach(function(el) {
+        el.parentNode.removeChild(el);
+    });
+    return this;
+}
+
+function first(...args) {
+    for (const arg of args) {
+        if (arg !== undefined && arg !== null && arg !== '') {
+            return arg;
+        }
+    }
+    return null;
+}
+
+function clamp(v, min, max) {
+    if (v < min) return min;
+    if (v > max) return max;
+    return v;
+}
+
+function pick_entry_from_range(array, value) {
+    if (!array) return {};
+    let result = {};
+    for (const [pv] of Object.entries(array)) {
+        if (value >= pv.from && value <= pv.to) result = pv;
+    }
+    return result;
+}
+
+return {
+	$: $,
+	EventEmitter: EventEmitter,
+	QueryWrapper: QueryWrapper,
+	first: first,
+	clamp: clamp,
+	pick_entry_from_range: pick_entry_from_range
+};
+
+}));

site/examples/uce-starter/js/u-sortable-table.js

@@ -0,0 +1,168 @@
+(function (root, factory) {
+	if (typeof define === 'function' && define.amd) {
+		define([], factory);
+	} else if (typeof module === 'object' && module.exports) {
+		module.exports = factory();
+	} else {
+		root.USortableTable = factory();
+	}
+}(typeof self !== 'undefined' ? self : this, function () {
+	'use strict';
+	const globalScope = typeof globalThis !== 'undefined' ? globalThis : (typeof window !== 'undefined' ? window : this);
+
+	function getTable(target) {
+		if (!target) return null;
+		if (typeof target === 'string') return document.getElementById(target);
+		return target.nodeType === 1 ? target : null;
+	}
+
+	function getStorageKey(table, options) {
+		if (options && options.storageKey) return options.storageKey;
+		if (table && table.id) return `u-sortable-table.${table.id}`;
+		return null;
+	}
+
+	function loadSort(table, options) {
+		const storageKey = getStorageKey(table, options);
+		if (!storageKey || !globalScope.localStorage) return null;
+		try {
+			const raw = globalScope.localStorage.getItem(storageKey);
+			if (!raw) return null;
+			const parsed = JSON.parse(raw);
+			if (!parsed || !Number.isInteger(parsed.column) || (parsed.direction !== 'asc' && parsed.direction !== 'desc')) {
+				return null;
+			}
+			return parsed;
+		} catch (error) {
+			return null;
+		}
+	}
+
+	function saveSort(table, column, direction, options) {
+		const storageKey = getStorageKey(table, options);
+		if (!storageKey || !globalScope.localStorage) return;
+		try {
+			globalScope.localStorage.setItem(storageKey, JSON.stringify({ column, direction }));
+		} catch (error) {
+			// Ignore storage errors.
+		}
+	}
+
+	function parseSortValue(text) {
+		const normalized = String(text || '').trim();
+		if (!normalized) return { type: 'text', value: '' };
+
+		if (globalScope.UFormat && typeof globalScope.UFormat.parseUnitNumber === 'function') {
+			const unitValue = globalScope.UFormat.parseUnitNumber(normalized);
+			if (unitValue != null) {
+				return { type: 'number', value: unitValue };
+			}
+		}
+
+		const timestamp = Date.parse(normalized);
+		if (!Number.isNaN(timestamp)) {
+			return { type: 'number', value: timestamp };
+		}
+
+		return { type: 'text', value: normalized.toLowerCase() };
+	}
+
+	function setHeaderState(table, columnIndex, direction) {
+		Array.from(table.querySelectorAll('thead th')).forEach((header, index) => {
+			header.classList.remove('sorted-asc', 'sorted-desc');
+			header.setAttribute('aria-sort', 'none');
+			if (index === columnIndex) {
+				header.classList.add(direction === 'asc' ? 'sorted-asc' : 'sorted-desc');
+				header.setAttribute('aria-sort', direction === 'asc' ? 'ascending' : 'descending');
+			}
+		});
+	}
+
+	function sortTable(table, columnIndex, direction, options, persist) {
+		const tbody = table.querySelector('tbody');
+		if (!tbody) return;
+
+		const rows = Array.from(tbody.querySelectorAll('tr')).filter((row) => row.children.length > 0 && !row.hasAttribute('data-empty-row'));
+		if (!rows.length) return;
+
+		rows.sort((rowA, rowB) => {
+			const cellA = rowA.children[columnIndex];
+			const cellB = rowB.children[columnIndex];
+			const rawA = cellA ? (cellA.getAttribute('data-sort-value') || cellA.textContent) : '';
+			const rawB = cellB ? (cellB.getAttribute('data-sort-value') || cellB.textContent) : '';
+			const valueA = parseSortValue(rawA);
+			const valueB = parseSortValue(rawB);
+
+			let comparison = 0;
+			if (valueA.type === 'number' && valueB.type === 'number') {
+				comparison = valueA.value - valueB.value;
+			} else {
+				comparison = String(valueA.value).localeCompare(String(valueB.value), undefined, {
+					numeric: true,
+					sensitivity: 'base',
+				});
+			}
+			return direction === 'asc' ? comparison : -comparison;
+		});
+
+		rows.forEach((row) => tbody.appendChild(row));
+		setHeaderState(table, columnIndex, direction);
+		if (persist !== false) {
+			saveSort(table, columnIndex, direction, options);
+		}
+	}
+
+	function getInitialSort(table, options) {
+		const saved = loadSort(table, options);
+		if (saved) return saved;
+		if (options && options.initialSort) {
+			return {
+				column: Number(options.initialSort.column || 0),
+				direction: options.initialSort.direction === 'desc' ? 'desc' : 'asc',
+			};
+		}
+		return null;
+	}
+
+	function attachHeader(header, table, columnIndex, options) {
+		if (header.getAttribute('data-sortable') === 'false') return;
+		header.classList.add('sortable');
+		header.tabIndex = 0;
+		header.addEventListener('click', function () {
+			const current = loadSort(table, options);
+			const nextDirection = current && current.column === columnIndex && current.direction === 'asc' ? 'desc' : 'asc';
+			sortTable(table, columnIndex, nextDirection, options, true);
+		});
+		header.addEventListener('keydown', function (event) {
+			if (event.key !== 'Enter' && event.key !== ' ') return;
+			event.preventDefault();
+			header.click();
+		});
+	}
+
+	function init(target, options = {}) {
+		const table = getTable(target);
+		if (!table || table.dataset.sortableTableInit === '1') return table;
+
+		Array.from(table.querySelectorAll('thead th')).forEach((header, index) => attachHeader(header, table, index, options));
+		table.dataset.sortableTableInit = '1';
+
+		const initialSort = getInitialSort(table, options);
+		if (initialSort) {
+			sortTable(table, initialSort.column, initialSort.direction, options, false);
+		}
+
+		return table;
+	}
+
+	function initAll(selector = '.u-sortable-table') {
+		Array.from(document.querySelectorAll(selector)).forEach((table) => init(table));
+	}
+
+	return {
+		init,
+		initAll,
+		parseSortValue,
+		sortTable,
+	};
+}));

site/examples/uce-starter/js/u-tiling-viewport.css

@@ -0,0 +1,165 @@
+:root {
+    --vp-color-primary: rgba(255, 125, 55, 1);
+    --vp-color-primary-focus: rgba(255, 120, 60, 0.4);
+    --vp-background: rgba(0,0,0,0.2);
+    
+    --vp-color-black: #000;
+    --vp-color-gray: #666;
+    --vp-color-white: #fff;
+    --vp-space-s: 4px;
+    --vp-space-l: 6px;
+    
+    --vp-size-icon: 12px;
+    --vp-size-nav-height: 48px;
+    
+    --vp-opacity: 0.4;
+    --vp-opacity-active: 0.9;
+    
+    --vp-z-pane: 2;
+    --vp-z-toolbar: 3;
+    --vp-z-popup: 9999;
+    --vp-duration: 0.25s;
+    --vp-easing: ease;
+}
+
+#fabric {
+    position: absolute;
+    top: var(--vp-size-nav-height);
+    left: 0; right: 0; bottom: 0;
+    display: flex;
+    overflow: hidden;
+}
+
+.vp-split { 
+    flex: 1 1 auto; 
+    display: flex; 
+    position: relative; 
+    overflow: hidden; 
+}
+
+.vp-split.row { flex-direction: row; }
+.vp-split.col { flex-direction: column; }
+
+.viewport-pane { 
+    flex: 1 1 0; 
+    position: relative; 
+    border: var(--vp-space-s) solid var(--color-border);
+    background: var(--vp-background);
+    padding: var(--vp-space-l);
+    overflow: auto; 
+    font-family: console; 
+    transition: 
+        border-color var(--vp-duration) var(--vp-easing), 
+        box-shadow var(--vp-duration) var(--vp-easing), 
+        background var(--vp-duration) var(--vp-easing);
+}
+
+.vp-split > .viewport-pane { 
+    transition: 
+        flex var(--vp-duration) var(--vp-easing), 
+        opacity var(--vp-duration) var(--vp-easing); 
+}
+
+.vp-no-transition,
+.vp-no-transition * {
+    transition: none !important;
+}
+
+.viewport-pane:before {
+    content: attr(data-title);
+    position: absolute; 
+    top: var(--vp-space-s); 
+    right: var(--vp-space-s);
+    opacity: var(--vp-opacity-medium); 
+    pointer-events: none;
+}
+
+.viewport-pane.focused { 
+    border-color: var(--vp-color-primary-focus); 
+    z-index: var(--vp-z-pane); 
+}
+
+.viewport-pane.focused:before { 
+    opacity: var(--vp-opacity-active); 
+    color: var(--color-highlight); 
+}
+
+.vp-divider { 
+    background: var(--color-border); 
+    opacity: var(--vp-opacity); 
+    position: relative; 
+    flex: 0 0 auto; 
+}
+
+.vp-divider.row { 
+    width: var(--vp-space-l); 
+    cursor: col-resize; 
+}
+
+.vp-divider.col { 
+    height: var(--vp-space-l); 
+    cursor: row-resize; 
+}
+
+.vp-divider:after { 
+    content:''; 
+    position: absolute; 
+    inset: 0; 
+    transition: 
+        background var(--vp-duration) var(--vp-easing), 
+        opacity var(--vp-duration) var(--vp-easing); 
+    background: var(--color-border); 
+}
+
+.vp-divider.row:after { 
+    background: var(--color-border); 
+}
+
+.vp-divider:hover:after { 
+    background: var(--color-highlight); 
+    opacity: var(--vp-opacity); 
+}
+
+.vp-divider.dragging:after { 
+    background: var(--color-highlight); 
+    opacity: var(--vp-opacity-active); 
+}
+
+.vp-help-overlay { 
+    position: absolute; 
+    top: var(--vp-space-s); 
+    left: var(--vp-space-s); 
+    opacity: var(--vp-opacity); 
+    pointer-events: none; 
+}
+
+.vp-pane-toolbar { 
+    position: absolute; 
+    top: var(--vp-space-s); 
+    right: var(--vp-space-s); 
+    display: flex; 
+    gap: var(--vp-space-s); 
+    z-index: var(--vp-z-toolbar); 
+}
+
+.vp-pane-toolbar button { 
+    padding: 0 var(--vp-space-l); 
+    border: 1px solid var(--color-border); 
+    background: var(--vp-background); 
+    cursor: pointer; 
+    display: inline-flex; 
+    align-items: center; 
+    justify-content: center; 
+}
+
+.vp-pane-toolbar button:hover { 
+    background: var(--color-highlight); 
+    color: var(--vp-color-black); 
+    text-shadow: none; 
+}
+
+.vp-icon { 
+    width: var(--vp-size-icon); 
+    height: var(--vp-size-icon); 
+    display: block; 
+}

site/examples/uce-starter/js/u-tiling-viewport.js

@@ -0,0 +1,388 @@
+(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        // AMD
+        define(['jquery'], factory);
+    } else if (typeof module === 'object' && module.exports) {
+        // CommonJS
+        module.exports = factory(require('jquery'));
+    } else {
+        // Browser globals
+        root.TilingViewportManager = factory(root.$);
+    }
+}(typeof self !== 'undefined' ? self : this, function ($) {
+    'use strict';
+
+    // Note: This module expects showPopupMenu to be available globally
+    // or you may need to adjust the dependency list above to include it
+
+    let TilingViewportManager = function(container, options = {}) {
+        
+        let idCounter = 1, rootNode = null, focusedPane = null, containerEl = null;
+        let nextId = () => 'vp_' + (idCounter++);
+        let paneMeta = new Map();
+        let pendingViewLoads = [];
+        let defaultoptions = {
+            minPaneSize: 100,
+            keyboard: true,
+            showHelp: true,
+            closeTransitionTimeout: 400,
+            toolbarButtons: ['split-v','split-h','views','close'],
+            standardViewList: [],
+            cssVars: { '--vp-duration': '.22s', '--vp-easing': 'ease' }
+        };
+        options = Object.assign({}, defaultoptions, options);
+
+        let createPane = (content, props = {}) => {
+            let id = nextId();
+            let $el = $('<div class="viewport-pane">').attr('data-id', id);
+            if(props.title) $el.attr('data-title', props.title);
+            $el.html(content || `<div style="opacity:.65;">Use Alt+&lt;H V O X ↑ ← → ↓&gt;</div>`)
+               .on('mousedown', () => focusPaneByEl($el[0]));
+            attachPaneToolbar($el[0]);
+            paneMeta.set(id, {id, canClose: true, canSplit: true, title: props.title, ...props});
+            if(props.view?.screen) pendingViewLoads.push({id, view: props.view});
+            return {type: 'pane', id, el: $el[0]};
+        };
+
+        let buildInitial = () => { rootNode = createPane(); $(containerEl).html('').append(rootNode.el); focusPane(rootNode); };
+        let focusPane = node => { if(!node || node.type !== 'pane') return; if(focusedPane?.el) $(focusedPane.el).removeClass('focused'); focusedPane = node; $(node.el).addClass('focused'); };
+        let focusPaneByEl = el => focusPane(findNodeById(rootNode, $(el).attr('data-id')));
+        let findNodeById = (node, id) => !node ? null : node.type === 'pane' ? (node.id === id ? node : null) : node.children.map(ch => findNodeById(ch, id)).find(r=>r);
+        let getNodeById = id => findNodeById(rootNode, id) || null;
+        let findParentPath = (node, id, path=[]) => !node ? null : node.type === 'pane' ? (node.id === id ? path : null) : node.children.map(ch => findParentPath(ch, id, path.concat(node))).find(r=>r);
+        let paneList = (node, acc=[]) => !node ? acc : node.type === 'pane' ? (acc.push(node), acc) : (node.children.forEach(ch => paneList(ch, acc)), acc);
+        let renormalizeSizes = splitNode => { let total = splitNode.sizes.reduce((a,b)=>a+b,0)||1; splitNode.sizes = splitNode.sizes.map(s=>s/total); };
+        let replaceChild = (splitNode, oldChild, newChild) => { let i = splitNode.children.indexOf(oldChild); if(i>=0) splitNode.children.splice(i,1,newChild); };
+
+        let split = (direction, newPaneProps = {}) => {
+            if(!focusedPane) return;
+            let meta = paneMeta.get(focusedPane.id);
+            if(meta?.canSplit === false) return;
+            
+            let paneRect = focusedPane.el.getBoundingClientRect();
+            let availableSpace = direction === 'row' ? paneRect.width : paneRect.height;
+            let requiredSpace = 2 * options.minPaneSize;
+            if(availableSpace < requiredSpace) {
+                //console.log(`Cannot split: available space ${availableSpace}px < required ${requiredSpace}px`);
+                return;
+            }
+            
+            let parentPath = findParentPath(rootNode, focusedPane.id);
+            let newPane = createPane(undefined, newPaneProps);
+            let animatedSplit = null, newIndex = -1;
+            if(!parentPath?.length) {
+                rootNode = {type:'split', direction, children:[focusedPane, newPane], sizes:[1,0]};
+                animatedSplit = rootNode; newIndex = 1;
+            } else {
+                let parent = parentPath.at(-1);
+                if(parent.type === 'split' && parent.direction === direction) {
+                    let idx = parent.children.indexOf(focusedPane);
+                    parent.children.splice(idx+1, 0, newPane);
+                    parent.sizes = parent.sizes || parent.children.map(()=>1);
+                    parent.sizes.splice(idx+1, 0, 0);
+                    renormalizeSizes(parent);
+                    animatedSplit = parent; newIndex = idx+1;
+                } else if(parent.type === 'split' && parent.direction !== direction && parent.children.length === 1) {
+                    parent.direction = direction; parent.children.push(newPane); parent.sizes = [1,0];
+                    animatedSplit = parent; newIndex = parent.children.length-1;
+                } else {
+                    let idx = parent.children.indexOf(focusedPane);
+                    let created = {type:'split', direction, children:[focusedPane, newPane], sizes:[1,0]};
+                    parent.children.splice(idx, 1, created);
+                    animatedSplit = created; newIndex = 1;
+                }
+            }
+            render();
+            if(animatedSplit && newIndex >= 0) {
+                requestAnimationFrame(() => requestAnimationFrame(() => {
+                    animatedSplit.sizes = animatedSplit.children.map(()=>1);
+                    renormalizeSizes(animatedSplit);
+                    animatedSplit.children.forEach((ch,i) => ch.el && (ch.el.style.flex = `${animatedSplit.sizes[i]} 1 0`));
+                }));
+            }
+            focusPane(newPane); return newPane;
+        };
+
+        let splitVertical = () => split('row');
+        let splitHorizontal = () => split('col');
+
+        let closeFocused = () => {
+            if(!focusedPane) return;
+            let meta = paneMeta.get(focusedPane.id);
+            if(meta?.canClose === false) return;
+            if(rootNode === focusedPane) { buildInitial(); return; }
+            if(typeof meta?.onUnload === 'function') meta.onUnload(focusedPane.id); 
+            if(typeof meta?.view?.onUnload === 'function') meta.view.onUnload(focusedPane.id); 
+            let parentPath = findParentPath(rootNode, focusedPane.id);
+            if(!parentPath?.length) return;
+            let parent = parentPath.at(-1);
+            if(parent.type !== 'split') return;
+            let idx = parent.children.indexOf(focusedPane);
+
+            let oldSizes = (parent.sizes || parent.children.map(()=>1)).slice();
+            let oldSize = oldSizes[idx] || 0;
+            let remaining = 1 - oldSize;
+            let newSizes = oldSizes.slice();
+            if(remaining > 0) {
+                for(let i=0;i<newSizes.length;i++) if(i!==idx) newSizes[i] = newSizes[i] / remaining; else newSizes[i] = 0;
+            } else {
+                let count = parent.children.length - 1 || 1;
+                for(let i=0;i<newSizes.length;i++) newSizes[i] = (i===idx) ? 0 : 1/count;
+            }
+            parent.sizes = newSizes;
+            parent.children.forEach((ch,i) => ch.el && (ch.el.style.flex = `${parent.sizes[i]} 1 0`));
+            if(focusedPane.el) {
+                focusedPane.el.style.transition = (focusedPane.el.style.transition || '') + ', opacity .18s ease';
+                focusedPane.el.style.opacity = '0';
+            }
+            let done = false;
+            let cleanup = () => {
+                if(done) return; done = true;
+                parent.children.splice(idx,1);
+                parent.sizes?.splice(idx,1);
+                paneMeta.delete(focusedPane.id);
+                if(parent.children.length === 1) {
+                    let only = parent.children[0];
+                    parentPath.length === 1 ? rootNode = only : replaceChild(parentPath.at(-2), parent, only);
+                } else if(parent.sizes) renormalizeSizes(parent);
+                render(); focusPane(paneList(rootNode)[0]);
+            };
+            let onEnd = ev => { if(ev.target === focusedPane.el && (ev.propertyName === 'opacity' || ev.propertyName === 'flex')) { focusedPane.el.removeEventListener('transitionend', onEnd); cleanup(); } };
+            if(focusedPane.el) focusedPane.el.addEventListener('transitionend', onEnd);
+            setTimeout(() => cleanup(), 350);
+        };
+
+        let nextPane = (node, currentId, options={direction:1}) => { let list = paneList(node); if(!list.length) return null; let idx = list.findIndex(p=>p.id===(currentId||(focusedPane?.id)))||0; return list[(idx+options.direction+list.length)%list.length]; };
+        let focusNext = () => { let n = nextPane(rootNode); if(n) focusPane(n); };
+        let focusPrev = () => { let n = nextPane(rootNode, null, {direction:-1}); if(n) focusPane(n); };
+
+        let serialize = (node=rootNode) => {
+            let ser = n => !n ? null : n.type==='pane' ? 
+                {type:'pane', id:n.id, title:paneMeta.get(n.id)?.title, props:{canClose:paneMeta.get(n.id)?.canClose!==false, canSplit:paneMeta.get(n.id)?.canSplit!==false}, view:paneMeta.get(n.id)?.view||null} :
+                {type:'split', direction:n.direction, sizes:(n.sizes||[]).slice(), children:n.children.map(ser)};
+        return {focus: focusedPane?.id, layout: ser(node)};
+        };
+
+        let restore = data => {
+            if(!data) return;
+            let wrapper = data.layout ? data : {layout:data};
+            paneMeta.clear(); idCounter = 1; pendingViewLoads.length = 0;
+            let idNums = [];
+            let build = l => l && l.type==='pane' ? 
+                (() => { let pane = createPane(undefined, {title:l.title, canClose:l.props?.canClose, canSplit:l.props?.canSplit, view:l.view});
+                    if(l.id) { pane.el.dataset.id = pane.id = l.id; let n=parseInt(l.id.split('_')[1],10); if(!isNaN(n)) idNums.push(n); }
+                    let meta = paneMeta.get(pane.id); if(meta) { Object.assign(meta, l.props||{}, {title:l.title, view:l.view}); if(pane.el && l.title) pane.el.dataset.title = l.title; paneMeta.set(pane.id, meta); }
+                    return pane; })() :
+                l && l.type==='split' ? {type:'split', direction:l.direction||'row', children:(l.children||[]).map(build).filter(Boolean), sizes:(l.sizes||[]).slice()} : null;
+            rootNode = build(wrapper.layout) || createPane();
+            if(idNums.length) idCounter = Math.max(...idNums) + 1;
+            render();
+            pendingViewLoads.forEach(v => v.view && loadView(v.id, v.view)); pendingViewLoads.length = 0;
+            focusPane(wrapper.focus ? findNodeById(rootNode, wrapper.focus) || paneList(rootNode)[0] : paneList(rootNode)[0]);
+        };
+
+        let render = () => { if(!containerEl) return; $(containerEl).empty().append(renderNode(rootNode)); injectHelpOverlay(); };
+
+        let renderNode = node => {
+            if(node.type==='pane') return node.el;
+            node.el = node.el || $('<div>')[0];
+            $(node.el).empty().addClass(`vp-split ${node.direction}`);
+            if(!node.sizes || node.sizes.length !== node.children.length) { node.sizes = node.children.map(()=>1); renormalizeSizes(node); }
+            node.children.forEach((ch,i) => {
+                let chEl = renderNode(ch); $(chEl).css('flex', `${node.sizes[i]} 1 0`); node.el.appendChild(chEl);
+                if(i < node.children.length-1) { let div = $('<div>').addClass(`vp-divider ${node.direction}`)[0]; setupDivider(div, node, i); node.el.appendChild(div); }
+            });
+            return node.el;
+        };
+
+        let setupDivider = (div, splitNode, leftIdx) => {
+            $(div).on('mousedown', e => {
+                e.preventDefault(); $(div).addClass('dragging');
+                $(containerEl).addClass('vp-no-transition');
+                let isRow = splitNode.direction === 'row';
+                let startPos = isRow ? e.clientX : e.clientY;
+                let childRects = splitNode.children.map(ch => ch.el.getBoundingClientRect());
+                let prop = isRow ? 'width' : 'height';
+                let startPixels = childRects.map(r => r[prop]);
+                let [aStartPx, bStartPx] = [startPixels[leftIdx], startPixels[leftIdx+1]];
+                let totalPixels = startPixels.reduce((a,b)=>a+b,0);
+                let onMove = ev => {
+                    let curPos = isRow ? ev.clientX : ev.clientY;
+                    let [newApx, newBpx] = [aStartPx + curPos - startPos, bStartPx - curPos + startPos];
+                    if(newApx < options.minPaneSize) [newApx, newBpx] = [options.minPaneSize, aStartPx + bStartPx - options.minPaneSize];
+                    if(newBpx < options.minPaneSize) [newApx, newBpx] = [aStartPx + bStartPx - options.minPaneSize, options.minPaneSize];
+                    startPixels[leftIdx] = newApx; startPixels[leftIdx+1] = newBpx;
+                    splitNode.sizes = startPixels.map(p => p / totalPixels);
+                    splitNode.children.forEach((ch,i)=> {
+                        if(ch.el) {
+                            let flexValue = `${splitNode.sizes[i]} 1 0`;
+                            $(ch.el).css('flex', flexValue);
+                        }
+                    });
+                };
+                let onUp = () => { 
+                    $(div).removeClass('dragging'); 
+                    $(containerEl).removeClass('vp-no-transition');
+                    $(document).off('mousemove', onMove).off('mouseup', onUp); 
+                };
+                $(document).on('mousemove', onMove).on('mouseup', onUp);
+            });
+            $(div).on('dblclick', () => {
+                $(containerEl).addClass('vp-no-transition');
+                let len = splitNode.sizes.length; splitNode.sizes = splitNode.sizes.map(()=>1/len);
+                splitNode.children.forEach((ch,i)=> ch.el && $(ch.el).css('flex', `${splitNode.sizes[i]} 1 0`));
+                setTimeout(() => $(containerEl).removeClass('vp-no-transition'), 0);
+            });
+        };
+
+        let attachPaneToolbar = el => {
+            let bar = $('<div>').addClass('vp-pane-toolbar').html(`
+                <button title="Split Vert" data-act="split-v" aria-label="Split vertically">
+                    <svg class="vp-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+                        <rect x="1" y="4" width="8" height="16" rx="1" fill="currentColor" />
+                        <rect x="15" y="4" width="8" height="16" rx="1" fill="currentColor" />
+                    </svg>
+                </button>
+                <button title="Split Horiz" data-act="split-h" aria-label="Split horizontally">
+                    <svg class="vp-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+                        <rect x="3" y="1" width="18" height="8" rx="1" fill="currentColor" />
+                        <rect x="3" y="15" width="18" height="8" rx="1" fill="currentColor" />
+                    </svg>
+                </button>
+                <button title="Views" data-act="views">O</button>
+                <button title="Close" data-act="close">X</button>`)[0];
+            el.appendChild(bar);
+            $(bar).on('mousedown', ev => ev.stopPropagation());
+            $(bar).on('click', ev => { ev.stopPropagation(); focusPaneByEl(el);
+                let button = ev.target.closest('button[data-act]');
+                let act = button ? button.getAttribute('data-act') : null; 
+                if(act==='split-v') splitVertical(); else if(act==='split-h') splitHorizontal(); else if(act==='close') closeFocused();
+                else if(act==='views') {
+                    // compute button position
+                    let rect = button.getBoundingClientRect();
+                    let items = options.standardViewList.slice();
+                    showPopupMenu(rect.left, rect.bottom, items, { onSelect: it => {
+                        // support string or object {screen}
+                        let view = typeof it === 'string' ? {screen: it} : (it.screen ? it : {screen: it});
+                        loadView(el.dataset.id, view);
+                    }, container: document.body, emptyText: 'No views available' });
+                }
+            });
+            refreshToolbarState(el.dataset.id);
+        };
+
+        let refreshToolbarState = paneId => {
+            let meta = paneMeta.get(paneId); let el = $(containerEl).find(`.viewport-pane[data-id="${paneId}"]`)[0];
+            if(!el) return; let bar = $(el).find('.vp-pane-toolbar')[0]; if(!bar) return;
+            let [canSplit, canClose] = [!meta||meta.canSplit!==false, !meta||meta.canClose!==false];
+            ['split-v','split-h'].forEach(act => { let btn = $(bar).find(`[data-act="${act}"]`)[0]; if(btn) { btn.disabled = !canSplit; $(btn).toggleClass('disabled', !canSplit); } });
+            let btnC = $(bar).find('[data-act="close"]')[0]; if(btnC) { btnC.disabled = !canClose; $(btnC).toggleClass('disabled', !canClose); }
+        };
+
+        let setPaneProps = (paneId, props) => { let meta = paneMeta.get(paneId); if(!meta) return; Object.assign(meta, props);
+            if(props.title) { let el = $(containerEl).find(`.viewport-pane[data-id="${paneId}"]`)[0]; if(el) el.dataset.title = props.title; }
+            if(typeof props.onUnload === 'function') meta.onUnload = props.onUnload;
+            paneMeta.set(paneId, meta); refreshToolbarState(paneId); };
+        let getPaneProps = paneId => paneMeta.get(paneId);
+
+        let focusDirection = (dx, dy) => {
+            if(!focusedPane) return;
+            let panes = Array.from(containerEl.querySelectorAll('.viewport-pane'));
+            let cur = focusedPane.el.getBoundingClientRect();
+            let candidates = panes.filter(p => p !== focusedPane.el).map(p => {
+                let r = p.getBoundingClientRect();
+                if(dx) {
+                    if(dx > 0 && r.left < cur.right-1 || dx < 0 && r.right > cur.left+1) return null;
+                    let overlap = Math.max(0, Math.min(cur.bottom, r.bottom) - Math.max(cur.top, r.top));
+                    let primaryDist = dx > 0 ? r.left - cur.right : cur.left - r.right;
+                    if(primaryDist < -1) return null;
+                    return {el:p, score: primaryDist*1000 + (cur.height - overlap)};
+                }
+                if(dy > 0 && r.top < cur.bottom-1 || dy < 0 && r.bottom > cur.top+1) return null;
+                let overlap = Math.max(0, Math.min(cur.right, r.right) - Math.max(cur.left, r.left));
+                let primaryDist = dy > 0 ? r.top - cur.bottom : cur.top - r.bottom;
+                if(primaryDist < -1) return null;
+                return {el:p, score: primaryDist*1000 + (cur.width - overlap)};
+            }).filter(Boolean);
+            if(candidates.length) return focusPaneByEl(candidates.sort((a,b) => a.score - b.score)[0].el);
+            let [cx, cy] = [cur.left + cur.width/2, cur.top + cur.height/2];
+            let fallback = panes.filter(p => p !== focusedPane.el).map(p => {
+                let r = p.getBoundingClientRect(); let [px, py] = [r.left + r.width/2, r.top + r.height/2];
+                let [vx, vy] = [px-cx, py-cy];
+                if(dx && Math.sign(vx) !== Math.sign(dx) || dy && Math.sign(vy) !== Math.sign(dy)) return null;
+                return {el:p, score: (dx ? Math.abs(vx) : Math.abs(vy))*2 + (dx ? Math.abs(vy) : Math.abs(vx))};
+            }).filter(Boolean);
+            if(fallback.length) focusPaneByEl(fallback.sort((a,b) => a.score - b.score)[0].el);
+        };
+
+        let injectHelpOverlay = () => {
+            if(!options.showHelp) return;
+            if(!containerEl.querySelector('.vp-help-overlay')) containerEl.appendChild(Object.assign(document.createElement('div'), {className:'vp-help-overlay', innerHTML:options.hint_text || ``}));
+        };
+
+        let getPaneEl = id => findNodeById(rootNode, id)?.el || null;
+
+        let openViewsPopupForPane = (paneId) => {
+            let node = findNodeById(rootNode, paneId || focusedPane?.id);
+            if(!node || !node.el) return;
+            let rect = node.el.getBoundingClientRect();
+            let x = Math.max(8, rect.right - 80);
+            let y = rect.top + 24;
+            let items = options.standardViewList.slice();
+            showPopupMenu(x, y, items, { onSelect: it => {
+                let view = typeof it === 'string' ? {screen: it} : (it.screen ? it : {screen: it});
+                loadView(node.id, view);
+            }, container: document.body, emptyText: 'No views available' });
+        };
+
+        let loadView = (paneId, view) => {
+            let node = findNodeById(rootNode, paneId);
+            if(!node || !node.el) return; // nothing to load into
+            let meta = paneMeta.get(paneId);
+            try { if(meta && typeof meta.onUnload === 'function') meta.onUnload(paneId); if(meta && meta.view && typeof meta.view.onUnload === 'function') meta.view.onUnload(paneId); } catch(e){ console.error('onUnload error', e); }
+            if(meta) meta.view = view;
+            node.el.innerHTML = `<div style="opacity:.4;">Loading ${view.screen||'...'}...</div>`;
+            $(node.el).load(`screens/${view.screen}.html?v=${Date.now()}`, {diff:true, onLoad:()=>$.emit('view:loaded',{paneId,view})});
+        };
+
+        let handleKeys = e => { 
+            if(!e.altKey || !options.keyboard) return;
+            let actions = {
+                'KeyV':()=>splitVertical(),'v':()=>splitVertical(),'V':()=>splitVertical(),
+                'KeyH':()=>splitHorizontal(),'h':()=>splitHorizontal(),'H':()=>splitHorizontal(),
+                'KeyX':()=>closeFocused(),'x':()=>closeFocused(),'X':()=>closeFocused(),
+                'KeyO':()=>openViewsPopupForPane(),'o':()=>openViewsPopupForPane(), 'O':()=>openViewsPopupForPane(),
+                'ArrowRight':()=>focusDirection(1,0),'ArrowLeft':()=>focusDirection(-1,0),'ArrowUp':()=>focusDirection(0,-1),'ArrowDown':()=>focusDirection(0,1),'Tab':()=>focusNext()
+            };
+            if(actions[e.code] || actions[e.key]) { 
+                (actions[e.code] || actions[e.key])(); 
+                e.preventDefault(); 
+            } 
+        };
+
+        containerEl = typeof container === 'string' ? document.querySelector(container) : container;
+        if(!containerEl) throw new Error('TilingViewportManager: container not found');
+        if(options.cssVars) Object.keys(options.cssVars).forEach(k => containerEl.style.setProperty(k, options.cssVars[k]));
+        buildInitial(); 
+        if(options.keyboard) document.addEventListener('keydown', handleKeys);
+
+        this.splitVertical = splitVertical;
+        this.splitHorizontal = splitHorizontal;
+        this.closeFocused = closeFocused;
+        this.focusNext = focusNext;
+        this.focusPrev = focusPrev;
+        this.serialize = serialize;
+        this.restore = restore;
+        this.setPaneProps = setPaneProps;
+        this.getPaneProps = getPaneProps;
+        this.options = options;
+        this.loadView = loadView;
+        this.getPaneEl = getPaneEl;
+        this.getNodeById = getNodeById;
+        
+        Object.defineProperty(this, 'layout', { get: () => serialize(), set: d => restore(d) });
+        Object.defineProperty(this, 'focused', { get: () => focusedPane?.id });
+    };
+
+    return TilingViewportManager;
+}));

site/examples/uce-starter/js/u-timeseries-chart.js

@@ -0,0 +1,354 @@
+(function (root, factory) {
+	if (typeof define === 'function' && define.amd) {
+		define([], factory);
+	} else if (typeof module === 'object' && module.exports) {
+		module.exports = factory();
+	} else {
+		root.UTimeSeriesChart = factory();
+	}
+}(typeof self !== 'undefined' ? self : this, function () {
+	'use strict';
+	const globalScope = typeof globalThis !== 'undefined' ? globalThis : (typeof window !== 'undefined' ? window : this);
+
+	class TimeSeriesChart {
+		constructor(canvasOrId, options = {}) {
+			this.canvas = typeof canvasOrId === 'string' ? document.getElementById(canvasOrId) : canvasOrId;
+			if (!this.canvas || !this.canvas.getContext) {
+				throw new Error('UTimeSeriesChart requires a canvas element');
+			}
+
+			this.ctx = this.canvas.getContext('2d');
+			const theme = this.resolveThemeColors();
+			this.options = Object.assign({
+				xAxisLabel: 'Time',
+				yAxisLeftLabel: 'Value',
+				yAxisRightLabel: '',
+				yAxisLeftFormat: 'number',
+				yAxisRightFormat: 'number',
+				padding: { top: 18, right: 62, bottom: 34, left: 58 },
+				gridColor: theme.gridColor,
+				axisColor: theme.axisColor,
+				textColor: theme.textColor,
+				legendBackground: theme.legendBackground,
+				legendTextColor: theme.legendTextColor,
+				tooltipBackground: theme.tooltipBackground,
+				tooltipBorder: theme.tooltipBorder,
+				tooltipTitleColor: theme.tooltipTitleColor,
+				tooltipTextColor: theme.tooltipTextColor,
+				hoverLineColor: 'rgba(255,255,255,0.35)',
+			}, options);
+
+			this.series = [];
+			this.xLabels = [];
+			this.hoverIndex = null;
+			this.hoverX = 0;
+			this.width = 0;
+			this.height = 0;
+
+			this.onMouseMove = this.onMouseMove.bind(this);
+			this.onMouseLeave = this.onMouseLeave.bind(this);
+			this.onResize = this.onResize.bind(this);
+
+			this.canvas.addEventListener('mousemove', this.onMouseMove);
+			this.canvas.addEventListener('mouseleave', this.onMouseLeave);
+			globalScope.addEventListener('resize', this.onResize);
+			if (typeof ResizeObserver !== 'undefined') {
+				this.resizeObserver = new ResizeObserver(this.onResize);
+				this.resizeObserver.observe(this.canvas);
+			}
+
+			this.resize();
+		}
+
+		resolveThemeColors() {
+			const styles = globalScope.getComputedStyle ? globalScope.getComputedStyle(document.documentElement) : null;
+			const pick = function (name, fallback) {
+				if (!styles) return fallback;
+				const value = styles.getPropertyValue(name).trim();
+				return value || fallback;
+			};
+			return {
+				gridColor: pick('--border', 'rgba(148, 163, 184, 0.20)'),
+				axisColor: pick('--border-hover', pick('--border', 'rgba(148, 163, 184, 0.42)')),
+				textColor: pick('--text-secondary', '#64748b'),
+				legendBackground: pick('--surface', 'rgba(15, 23, 42, 0.72)'),
+				legendTextColor: pick('--text-primary', '#0f172a'),
+				tooltipBackground: pick('--surface', '#0f172a'),
+				tooltipBorder: pick('--border', 'rgba(148, 163, 184, 0.30)'),
+				tooltipTitleColor: pick('--primary', '#3b82f6'),
+				tooltipTextColor: pick('--text-primary', '#0f172a'),
+			};
+		}
+
+		destroy() {
+			this.canvas.removeEventListener('mousemove', this.onMouseMove);
+			this.canvas.removeEventListener('mouseleave', this.onMouseLeave);
+			globalScope.removeEventListener('resize', this.onResize);
+			if (this.resizeObserver) {
+				this.resizeObserver.disconnect();
+			}
+		}
+
+		onResize() {
+			this.resize();
+		}
+
+		onMouseLeave() {
+			this.hoverIndex = null;
+			this.draw();
+		}
+
+		resize() {
+			const rect = this.canvas.getBoundingClientRect();
+			const cssWidth = Math.max(280, Math.round(rect.width || this.canvas.width || 640));
+			const cssHeight = Math.max(180, Math.round(rect.height || this.canvas.height || 320));
+			const pixelRatio = globalScope.devicePixelRatio || 1;
+
+			this.width = cssWidth;
+			this.height = cssHeight;
+			this.canvas.width = Math.round(cssWidth * pixelRatio);
+			this.canvas.height = Math.round(cssHeight * pixelRatio);
+			this.ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
+			this.draw();
+		}
+
+		setData(series, xLabels = []) {
+			this.series = (Array.isArray(series) ? series : []).map((item) => ({
+				key: item.key || '',
+				label: item.label || 'Series',
+				color: item.color || '#60a5fa',
+				axis: item.axis === 'right' ? 'right' : 'left',
+				unit: item.unit || '',
+				format: item.format || '',
+				maxHint: Number(item.maxHint || 0),
+				decimals: Number.isInteger(item.decimals) ? item.decimals : 2,
+				values: Array.isArray(item.values) ? item.values.map((value) => Number(value || 0)) : [],
+			}));
+			this.xLabels = Array.isArray(xLabels) ? xLabels : [];
+			this.draw();
+		}
+
+		getPlotRect() {
+			const padding = this.options.padding;
+			return {
+				x: padding.left,
+				y: padding.top,
+				w: this.width - padding.left - padding.right,
+				h: this.height - padding.top - padding.bottom,
+			};
+		}
+
+		getMaxForAxis(axis) {
+			const relevant = this.series.filter((item) => item.axis === axis);
+			if (!relevant.length) return 1;
+			let max = 1;
+			relevant.forEach((item) => {
+				const localMax = Math.max(...(item.values.length ? item.values : [0]), item.maxHint || 0, 1);
+				if (localMax > max) max = localMax;
+			});
+			return max;
+		}
+
+		xForIndex(index, pointCount, plot) {
+			if (pointCount <= 1) return plot.x;
+			return plot.x + (index / (pointCount - 1)) * plot.w;
+		}
+
+		yForValue(value, axisMax, plot) {
+			const clamped = Math.max(0, Number(value || 0));
+			return plot.y + plot.h - ((clamped / axisMax) * plot.h);
+		}
+
+		formatValue(value, format, unit, decimals) {
+			const number = Number(value || 0);
+			if (globalScope.UFormat) {
+				if (format === 'bytes' && globalScope.UFormat.formatBytes) return globalScope.UFormat.formatBytes(number);
+				if (format === 'disk-bytes' && globalScope.UFormat.formatDiskBytes) return globalScope.UFormat.formatDiskBytes(number);
+				if (format === 'count' && globalScope.UFormat.formatCount) return globalScope.UFormat.formatCount(number);
+				if (format === 'duration-ms' && globalScope.UFormat.formatDurationMs) return globalScope.UFormat.formatDurationMs(number);
+			}
+			return `${number.toFixed(decimals)}${unit || ''}`;
+		}
+
+		drawGridAndAxes(plot, maxLeft, maxRight) {
+			const ctx = this.ctx;
+			ctx.strokeStyle = this.options.gridColor;
+			ctx.lineWidth = 1;
+
+			for (let index = 0; index <= 4; index += 1) {
+				const y = plot.y + (plot.h / 4) * index;
+				ctx.beginPath();
+				ctx.moveTo(plot.x, y);
+				ctx.lineTo(plot.x + plot.w, y);
+				ctx.stroke();
+
+				const leftValue = maxLeft - ((maxLeft / 4) * index);
+				const leftTick = this.formatValue(leftValue, this.options.yAxisLeftFormat, '', 1);
+				ctx.fillStyle = this.options.textColor;
+				ctx.font = '11px Inter, sans-serif';
+				const leftWidth = ctx.measureText(leftTick).width;
+				ctx.fillText(leftTick, Math.max(4, plot.x - leftWidth - 8), y + 4);
+
+				if (this.options.yAxisRightLabel) {
+					const rightValue = maxRight - ((maxRight / 4) * index);
+					const rightTick = this.formatValue(rightValue, this.options.yAxisRightFormat, '', 1);
+					ctx.fillText(rightTick, plot.x + plot.w + 8, y + 4);
+				}
+			}
+
+			ctx.strokeStyle = this.options.axisColor;
+			ctx.beginPath();
+			ctx.moveTo(plot.x, plot.y);
+			ctx.lineTo(plot.x, plot.y + plot.h);
+			ctx.lineTo(plot.x + plot.w, plot.y + plot.h);
+			ctx.stroke();
+
+			ctx.fillStyle = this.options.textColor;
+			ctx.font = '12px Inter, sans-serif';
+			ctx.save();
+			ctx.translate(14, plot.y + (plot.h / 2));
+			ctx.rotate(-Math.PI / 2);
+			ctx.textAlign = 'center';
+			ctx.textBaseline = 'middle';
+			ctx.fillText(this.options.yAxisLeftLabel, 0, 0);
+			ctx.restore();
+
+			if (this.options.yAxisRightLabel) {
+				ctx.save();
+				ctx.translate(this.width - 14, plot.y + (plot.h / 2));
+				ctx.rotate(Math.PI / 2);
+				ctx.textAlign = 'center';
+				ctx.textBaseline = 'middle';
+				ctx.fillText(this.options.yAxisRightLabel, 0, 0);
+				ctx.restore();
+			}
+
+			const xLabel = this.options.xAxisLabel;
+			const xLabelWidth = ctx.measureText(xLabel).width;
+			ctx.fillText(xLabel, plot.x + plot.w - xLabelWidth, this.height - 10);
+		}
+
+		drawSeries(plot, maxLeft, maxRight) {
+			const ctx = this.ctx;
+			const pointCount = Math.max(...this.series.map((item) => item.values.length), 0);
+			if (pointCount <= 0) return;
+
+			this.series.forEach((item) => {
+				if (!item.values.length) return;
+				const axisMax = item.axis === 'right' ? maxRight : maxLeft;
+				ctx.beginPath();
+				item.values.forEach((value, index) => {
+					const x = this.xForIndex(index, item.values.length, plot);
+					const y = this.yForValue(value, axisMax, plot);
+					if (index === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y);
+				});
+				ctx.strokeStyle = item.color;
+				ctx.lineWidth = 2;
+				ctx.stroke();
+			});
+
+			if (this.series.length > 1) {
+				ctx.fillStyle = this.options.legendBackground;
+				ctx.fillRect(plot.x + 4, plot.y + 4, Math.min(plot.w - 8, 320), 24);
+				let offsetX = plot.x + 12;
+				this.series.forEach((item) => {
+					ctx.fillStyle = item.color;
+					ctx.fillRect(offsetX, plot.y + 13, 14, 3);
+					offsetX += 20;
+					ctx.fillStyle = this.options.legendTextColor;
+					ctx.font = '11px Inter, sans-serif';
+					ctx.fillText(item.label, offsetX, plot.y + 17);
+					offsetX += ctx.measureText(item.label).width + 18;
+				});
+			}
+		}
+
+		drawHover(plot, maxLeft, maxRight) {
+			if (this.hoverIndex == null) return;
+			const ctx = this.ctx;
+			const pointCount = Math.max(...this.series.map((item) => item.values.length), 0);
+			if (pointCount <= 0) return;
+
+			const index = Math.max(0, Math.min(pointCount - 1, this.hoverIndex));
+			const x = this.xForIndex(index, pointCount, plot);
+
+			ctx.strokeStyle = this.options.hoverLineColor;
+			ctx.lineWidth = 1;
+			ctx.beginPath();
+			ctx.moveTo(x, plot.y);
+			ctx.lineTo(x, plot.y + plot.h);
+			ctx.stroke();
+
+			const lines = [];
+			lines.push(this.xLabels[index] || `Sample ${index + 1}`);
+
+			this.series.forEach((item) => {
+				if (index >= item.values.length) return;
+				const axisMax = item.axis === 'right' ? maxRight : maxLeft;
+				const value = item.values[index] ?? 0;
+				const y = this.yForValue(value, axisMax, plot);
+				ctx.fillStyle = item.color;
+				ctx.beginPath();
+				ctx.arc(x, y, 3.5, 0, Math.PI * 2);
+				ctx.fill();
+				lines.push(`${item.label}: ${this.formatValue(value, item.format || (item.axis === 'right' ? this.options.yAxisRightFormat : this.options.yAxisLeftFormat), item.unit || '', item.decimals)}`);
+			});
+
+			ctx.font = '11px Inter, sans-serif';
+			const padding = 8;
+			const lineHeight = 14;
+			const tooltipWidth = Math.max(...lines.map((line) => ctx.measureText(line).width)) + padding * 2;
+			const tooltipHeight = lines.length * lineHeight + padding * 2 - 2;
+			let tooltipX = this.hoverX + 12;
+			let tooltipY = plot.y + 8;
+
+			if (tooltipX + tooltipWidth > this.width - 4) tooltipX = this.hoverX - tooltipWidth - 12;
+			if (tooltipX < 4) tooltipX = 4;
+			if (tooltipY + tooltipHeight > this.height - 4) tooltipY = this.height - tooltipHeight - 4;
+
+			ctx.fillStyle = this.options.tooltipBackground;
+			ctx.fillRect(tooltipX, tooltipY, tooltipWidth, tooltipHeight);
+			ctx.strokeStyle = this.options.tooltipBorder;
+			ctx.strokeRect(tooltipX, tooltipY, tooltipWidth, tooltipHeight);
+
+			lines.forEach((line, lineIndex) => {
+				ctx.fillStyle = lineIndex === 0 ? this.options.tooltipTitleColor : this.options.tooltipTextColor;
+				ctx.fillText(line, tooltipX + padding, tooltipY + padding + 10 + lineIndex * lineHeight);
+			});
+		}
+
+		onMouseMove(event) {
+			const rect = this.canvas.getBoundingClientRect();
+			const x = event.clientX - rect.left;
+			this.hoverX = x;
+
+			const plot = this.getPlotRect();
+			const pointCount = Math.max(...this.series.map((item) => item.values.length), 0);
+			if (pointCount <= 0) {
+				this.hoverIndex = null;
+				this.draw();
+				return;
+			}
+
+			const relative = Math.max(0, Math.min(plot.w, x - plot.x));
+			this.hoverIndex = pointCount <= 1 ? 0 : Math.round((relative / plot.w) * (pointCount - 1));
+			this.draw();
+		}
+
+		draw() {
+			const ctx = this.ctx;
+			ctx.clearRect(0, 0, this.width, this.height);
+
+			const plot = this.getPlotRect();
+			if (plot.w <= 0 || plot.h <= 0) return;
+			const maxLeft = this.getMaxForAxis('left');
+			const maxRight = this.getMaxForAxis('right');
+
+			this.drawGridAndAxes(plot, maxLeft, maxRight);
+			this.drawSeries(plot, maxLeft, maxRight);
+			this.drawHover(plot, maxLeft, maxRight);
+		}
+	}
+
+	return TimeSeriesChart;
+}));

site/examples/uce-starter/js/u-workspace-shell.js

@@ -0,0 +1,68 @@
+(function (root, factory) {
+	if (typeof define === 'function' && define.amd) {
+		define([], factory);
+	} else if (typeof module === 'object' && module.exports) {
+		module.exports = factory();
+	} else {
+		root.UWorkspaceShell = factory();
+	}
+}(typeof self !== 'undefined' ? self : this, function () {
+	'use strict';
+	const globalScope = typeof globalThis !== 'undefined' ? globalThis : (typeof window !== 'undefined' ? window : this);
+
+	function getElement(target) {
+		if (!target) return null;
+		if (typeof target === 'string') return document.getElementById(target);
+		return target && target.nodeType === 1 ? target : null;
+	}
+
+	function bindShell(options) {
+		const sidebar = getElement(options.sidebarId || options.sidebar);
+		const overlay = getElement(options.overlayId || options.overlay);
+		const toggle = getElement(options.toggleButtonId || options.toggle);
+		const closeOnNav = options.closeOnNav !== false;
+
+		if (!sidebar || !overlay) return null;
+
+		function setOpen(open) {
+			sidebar.classList.toggle('is-open', !!open);
+			overlay.classList.toggle('is-open', !!open);
+		}
+
+		function toggleOpen() {
+			setOpen(!sidebar.classList.contains('is-open'));
+		}
+
+		if (toggle) {
+			toggle.addEventListener('click', toggleOpen);
+		}
+
+		overlay.addEventListener('click', function () {
+			setOpen(false);
+		});
+
+		if (closeOnNav) {
+			sidebar.querySelectorAll('a').forEach(function (link) {
+				link.addEventListener('click', function () {
+					setOpen(false);
+				});
+			});
+		}
+
+		globalScope.addEventListener('resize', function () {
+			if (globalScope.innerWidth > 860) {
+				setOpen(false);
+			}
+		});
+
+		return {
+			open: function () { setOpen(true); },
+			close: function () { setOpen(false); },
+			toggle: toggleOpen,
+		};
+	}
+
+	return {
+		init: bindShell,
+	};
+}));

site/examples/uce-starter/js/u-wsconnection.js

@@ -0,0 +1,111 @@
+(function (root, factory) {
+	if (typeof exports === 'object' && typeof module !== 'undefined') {
+		module.exports = factory();
+	} else if (typeof define === 'function' && define.amd) {
+		define([], factory);
+	} else {
+		root.Connection = factory();
+	}
+}(typeof self !== 'undefined' ? self : this, function () {
+
+var Connection = {
+
+	auto_reconnect : false,
+	established : false,
+	
+	update_indicator : (status) => {
+		var status_colors = {
+			'offline' : 'red',
+			'online' : 'lightgreen',
+			'error' : 'DarkOrange',
+		};
+		$('#connection-status').text(status).css('color', status_colors[status] || 'gray');
+	},
+	
+	debug : true,
+	auto_reconnect : true,
+	cmd_waiting_rels : {},
+	
+	server_url : '',
+	
+	init : () => {
+		new EventSystem(Connection);		
+	},
+	
+	start : (url = null) => {
+		
+		if(url) Connection.server_url = url;
+				
+		Connection.update_indicator('offline');
+		if(Connection.socket) Connection.socket.close();
+		Connection.socket = new WebSocket(Connection.server_url);
+		Connection.socket.onmessage = function(rawmsg) {
+			var msg = JSON.parse(rawmsg.data);
+			if(Connection.debug) console.log('CONNECTION MSG', msg);
+			if(msg.type) Connection.trigger(msg.type, msg);
+			Connection.trigger('message', msg);
+		}
+		Connection.socket.onclose = function() {
+			Connection.update_indicator('offline');
+			if(Connection.debug) console.log('CONNECTION CLOSED');
+			Connection.established = false;
+			Connection.trigger('close', {});
+		}
+		Connection.socket.onerror = function(error) {
+			Connection.update_indicator('error');
+			console.error('CONNECTION', error);
+			Connection.established = false;
+		}
+		Connection.socket.onopen = function() {
+			Connection.update_indicator('online');
+			if(Connection.debug) console.log('CONNECTION ESTABLISHED');
+			Connection.established = true;
+			Connection.trigger('open', {});
+		}
+		setTimeout(Connection.reconnect, 2000);
+		
+	},
+	
+	deauth : () => {
+		Game.session = {};
+	},
+	
+	reconnect : () => {
+		if(!Connection.established && Connection.auto_reconnect)
+			Connection.start();
+		else
+			setTimeout(Connection.reconnect, 2000);
+	},
+	
+	queue : [],
+
+	dequeue : () => {
+		var dq = Connection.queue;
+		Connection.queue = [];
+		dq.forEach(function(fm) {
+			Connection.send(fm);
+		});
+	},
+	
+	send : (msg) => {
+		if(Connection.established) {
+			if(typeof msg == 'function')
+				msg();
+			else
+				Connection.socket.send(JSON.stringify(msg));
+		} else {
+			Connection.queue.push(msg);
+		}
+	},
+	
+	close : () => {
+		Connection.auto_reconnect = false;
+		Connection.socket.close();
+	},
+	
+}
+
+return Connection;
+
+}));
+

site/examples/uce-starter/lib/app.uce

@@ -0,0 +1,564 @@
+String starter_dirname(String path)
+{
+	if(path == "")
+		return("");
+	auto parts = split(path, "/");
+	if(parts.size() <= 1)
+		return("");
+	parts.pop_back();
+	String result = join(parts, "/");
+	if(result == "")
+		return("/");
+	return(result);
+}
+
+String starter_fs_join(String root, String relative)
+{
+	if(relative == "")
+		return(root);
+	if(relative[0] == '/')
+		return(relative);
+	if(root == "" || root == "/")
+		return(root + relative);
+	if(root[root.length() - 1] == '/')
+		return(root + relative);
+	return(root + "/" + relative);
+}
+
+String starter_safe_name(String raw)
+{
+	String result = "";
+	for(auto c : raw)
+	{
+		if((c >= 'a' && c <= 'z') || (c >= 'A' && c <= 'Z') || (c >= '0' && c <= '9'))
+			result.append(1, c);
+		else
+			result.append(1, '_');
+	}
+	return(result);
+}
+
+String starter_json_string(String raw)
+{
+	DTree value;
+	value = raw;
+	return(json_encode(value));
+}
+
+String starter_fs_root(Request& context)
+{
+	String root = context.var["starter"]["fs_root"].to_string();
+	if(root == "")
+		root = get_cwd();
+	return(root);
+}
+
+String starter_script_url(Request& context)
+{
+	String url = context.var["starter"]["script_url"].to_string();
+	if(url == "")
+		url = first(context.params["DOCUMENT_URI"], context.params["SCRIPT_NAME"]);
+	return(url);
+}
+
+String starter_base_url(Request& context)
+{
+	String base = context.var["starter"]["base_url"].to_string();
+	if(base == "")
+	{
+		base = starter_dirname(starter_script_url(context));
+		if(base == "")
+			base = "/";
+		if(base[base.length() - 1] != '/')
+			base.append(1, '/');
+	}
+	return(base);
+}
+
+String starter_fs_path(String relative, Request& context)
+{
+	return(starter_fs_join(starter_fs_root(context), relative));
+}
+
+DTree starter_cfg(String path, Request& context)
+{
+	DTree result = context.var["starter"]["config"];
+	for(auto segment : split(path, "/"))
+	{
+		if(segment == "")
+			continue;
+		result = result[segment];
+	}
+	return(result);
+}
+
+String starter_cfg_string(String path, Request& context)
+{
+	return(starter_cfg(path, context).to_string());
+}
+
+String starter_link(String path, Request& context);
+String starter_link(String path, StringMap params, Request& context);
+
+String starter_theme_value(String key, Request& context)
+{
+	return(starter_cfg("theme/" + key, context).to_string());
+}
+
+String starter_first_route_segment(Request& context)
+{
+	String query = context.params["QUERY_STRING"];
+	for(auto part : split(query, "&"))
+	{
+		if(part == "")
+			continue;
+		if(part.find("=") == String::npos)
+			return(uri_decode(part));
+	}
+	return("");
+}
+
+DTree starter_make_route(Request& context)
+{
+	DTree route;
+	String path = starter_first_route_segment(context);
+	path = trim(path);
+	while(path.length() > 0 && path[0] == '/')
+		path = path.substr(1);
+	while(path.length() > 0 && path[path.length() - 1] == '/')
+		path = path.substr(0, path.length() - 1);
+	if(path == "")
+		path = "index";
+	route["l_path"] = path;
+	route["page"] = nibble(path, "/");
+	if(route["page"].to_string() == "")
+		route["page"] = "index";
+	return(route);
+}
+
+DTree starter_resolve_view(Request& context, String base_dir = "views")
+{
+	DTree result;
+	DTree route = context.var["starter"]["route"];
+	String lpath = first(route["l_path"].to_string(), "index");
+	String base = trim(base_dir);
+	if(base != "" && base[base.length() - 1] == '/')
+		base = base.substr(0, base.length() - 1);
+
+	String exact = base + "/" + lpath + ".uce";
+	if(file_exists(exact))
+	{
+		result["file"] = exact;
+		return(result);
+	}
+
+	String dir_index = base + "/" + lpath + "/index.uce";
+	if(file_exists(dir_index))
+	{
+		result["file"] = dir_index;
+		return(result);
+	}
+
+	auto parts = split(lpath, "/");
+	if(parts.size() > 1)
+	{
+		String param = parts.back();
+		parts.pop_back();
+		String parent = join(parts, "/");
+		String parent_index = base + "/" + parent + "/index.uce";
+		if(file_exists(parent_index))
+		{
+			result["file"] = parent_index;
+			result["param"] = param;
+			return(result);
+		}
+	}
+
+	return(result);
+}
+
+DTree starter_default_config()
+{
+	DTree config;
+
+	config["site"]["name"] = "UCE Starter";
+	config["site"]["default_page_title"] = "Home";
+	config["site"]["timezone"] = "UTC";
+
+	config["users"]["enable_signup"].set_bool(true);
+	config["filebase"]["path"] = "/tmp/uce-starter-data";
+
+	config["theme"]["key"] = "portal-dark";
+	config["theme"]["options"]["light"]["label"] = "Starter Light";
+	config["theme"]["options"]["light"]["path"] = "themes/light/";
+	config["theme"]["options"]["light"]["mode"] = "light";
+	config["theme"]["options"]["light"]["description"] = "Original starter light theme kept for backward compatibility.";
+	config["theme"]["options"]["light"]["footer_text"] = "UCE Starter running with the Starter Light theme.";
+	config["theme"]["options"]["light"]["meta_description"] = "Starter Light theme for the UCE starter";
+	config["theme"]["options"]["light"]["theme_color"] = "#3b82f6";
+
+	config["theme"]["options"]["dark"]["label"] = "Starter Dark";
+	config["theme"]["options"]["dark"]["path"] = "themes/dark/";
+	config["theme"]["options"]["dark"]["mode"] = "dark";
+	config["theme"]["options"]["dark"]["description"] = "Original starter dark theme kept for backward compatibility.";
+	config["theme"]["options"]["dark"]["footer_text"] = "UCE Starter running with the Starter Dark theme.";
+	config["theme"]["options"]["dark"]["meta_description"] = "Starter Dark theme for the UCE starter";
+	config["theme"]["options"]["dark"]["theme_color"] = "#0f172a";
+
+	config["theme"]["options"]["portal-light"]["label"] = "AI Portal Light";
+	config["theme"]["options"]["portal-light"]["path"] = "themes/portal-light/";
+	config["theme"]["options"]["portal-light"]["mode"] = "light";
+	config["theme"]["options"]["portal-light"]["description"] = "Dense, corporate portal layout in a light palette.";
+	config["theme"]["options"]["portal-light"]["footer_text"] = "UCE Starter running with the AI Portal Light starter theme.";
+	config["theme"]["options"]["portal-light"]["meta_description"] = "AI Portal Light theme for the UCE starter";
+	config["theme"]["options"]["portal-light"]["theme_color"] = "#0f68ad";
+
+	config["theme"]["options"]["portal-dark"]["label"] = "AI Portal Dark";
+	config["theme"]["options"]["portal-dark"]["path"] = "themes/portal-dark/";
+	config["theme"]["options"]["portal-dark"]["mode"] = "dark";
+	config["theme"]["options"]["portal-dark"]["description"] = "Glassy dark portal shell and the current default starter theme.";
+	config["theme"]["options"]["portal-dark"]["footer_text"] = "UCE Starter running with the AI Portal Dark starter theme.";
+	config["theme"]["options"]["portal-dark"]["meta_description"] = "AI Portal Dark theme for the UCE starter";
+	config["theme"]["options"]["portal-dark"]["theme_color"] = "#0f172a";
+
+	config["theme"]["options"]["localfirst"]["label"] = "Local First";
+	config["theme"]["options"]["localfirst"]["path"] = "themes/localfirst/";
+	config["theme"]["options"]["localfirst"]["mode"] = "dark";
+	config["theme"]["options"]["localfirst"]["description"] = "llm2-derived admin shell with sidebar chrome.";
+	config["theme"]["options"]["localfirst"]["footer_text"] = "UCE Starter running with the Local First starter theme.";
+	config["theme"]["options"]["localfirst"]["meta_description"] = "Local First admin-shell theme for the UCE starter";
+	config["theme"]["options"]["localfirst"]["theme_color"] = "#020913";
+
+	config["theme"]["options"]["retro-gaming"]["label"] = "Retro Gaming";
+	config["theme"]["options"]["retro-gaming"]["path"] = "themes/retro-gaming/";
+	config["theme"]["options"]["retro-gaming"]["mode"] = "dark";
+	config["theme"]["options"]["retro-gaming"]["description"] = "CRT scanlines, pixel font, neon glow.";
+	config["theme"]["options"]["retro-gaming"]["footer_text"] = "INSERT COIN // UCE Starter running the Retro Gaming theme.";
+	config["theme"]["options"]["retro-gaming"]["meta_description"] = "Retro Gaming pixel theme for the UCE starter";
+	config["theme"]["options"]["retro-gaming"]["theme_color"] = "#0a0a1a";
+
+	config["menu"][""]["title"] = "Home";
+	config["menu"][""]["hidden"].set_bool(true);
+	config["menu"]["page1"]["title"] = "Components";
+	config["menu"]["features"]["title"] = "Features";
+	config["menu"]["page2"]["title"] = "Ajaxy";
+	config["menu"]["gauges"]["title"] = "Gauges";
+	config["menu"]["dashboard"]["title"] = "Dashboard";
+	config["menu"]["workspace"]["title"] = "Workspace";
+	config["menu"]["themes"]["title"] = "Themes";
+	config["menu"]["auth/demo"]["title"] = "Auth";
+
+	return(config);
+}
+
+void starter_set_status(Request& context, s32 code, String reason)
+{
+	context.response_code = "HTTP/1.1 " + std::to_string(code) + " " + reason;
+	context.flags.status = code;
+}
+
+void starter_register_css(String path, Request& context)
+{
+	context.var["starter"]["assets"]["css"][path] = path;
+}
+
+void starter_register_js(String path, Request& context)
+{
+	context.var["starter"]["assets"]["js"][path] = path;
+}
+
+String starter_asset_url(String path, Request& context)
+{
+	String url = starter_base_url(context) + path;
+	String fs_path = starter_fs_path(path, context);
+	if(file_exists(fs_path))
+		url += "?v=" + std::to_string((u64)file_mtime(fs_path));
+	return(url);
+}
+
+void starter_render_registered_css(Request& context)
+{
+	context.var["starter"]["assets"]["css"].each([&](DTree item, String key) {
+		String path = item.to_string();
+		if(path != "")
+		{
+			<><link rel="stylesheet" href="<?= starter_asset_url(path, context) ?>" /></>
+		}
+	});
+}
+
+void starter_render_registered_js(Request& context)
+{
+	context.var["starter"]["assets"]["js"].each([&](DTree item, String key) {
+		String path = item.to_string();
+		if(path != "")
+		{
+			<><script src="<?= starter_asset_url(path, context) ?>"></script></>
+		}
+	});
+}
+
+String starter_link(String path, Request& context)
+{
+	StringMap params;
+	return(starter_link(path, params, context));
+}
+
+String starter_link(String path, StringMap params, Request& context)
+{
+	String query = "";
+	path = trim(path);
+	if(path != "")
+		query = uri_encode(path);
+	String extra = encode_query(params);
+	if(query != "" && extra != "")
+		query += "&" + extra;
+	else if(query == "")
+		query = extra;
+	String url = starter_script_url(context);
+	if(query != "")
+		url += "?" + query;
+	return(url);
+}
+
+String starter_filebase_root(Request& context)
+{
+	String root = starter_cfg_string("filebase/path", context);
+	if(root == "")
+		root = "/tmp/uce-starter-data";
+	return(root);
+}
+
+String starter_hash_id(String raw)
+{
+	raw = to_lower(trim(raw));
+	return(gen_sha1("uce-starter:" + raw).substr(0, 12));
+}
+
+String starter_user_dir(String email, Request& context)
+{
+	String bucket = starter_hash_id(email);
+	return(starter_filebase_root(context) + "/users/" + bucket.substr(0, 2) + "/" + bucket);
+}
+
+String starter_user_file(String email, Request& context)
+{
+	return(starter_user_dir(email, context) + "/account.json");
+}
+
+String starter_password_hash(String password, String salt)
+{
+	String hash = "uce-starter:" + password + ":" + salt;
+	for(s32 i = 0; i < 2048; i++)
+		hash = gen_sha1(hash + ":" + std::to_string(i));
+	return(hash);
+}
+
+DTree starter_read_json_file(String file_name)
+{
+	DTree result;
+	if(!file_exists(file_name))
+		return(result);
+	String raw = trim(file_get_contents(file_name));
+	if(raw == "")
+		return(result);
+	return(json_decode(raw));
+}
+
+bool starter_write_json_file(String file_name, DTree data)
+{
+	mkdir(starter_dirname(file_name));
+	return(file_put_contents(file_name, json_encode(data)));
+}
+
+DTree starter_user_load(String email, Request& context)
+{
+	DTree user = starter_read_json_file(starter_user_file(email, context));
+	if(user.get_type_name() != "array")
+		return(DTree());
+	user["id"] = to_lower(trim(email));
+	return(user);
+}
+
+DTree starter_user_create(String email, String password, Request& context)
+{
+	DTree result;
+	email = to_lower(trim(email));
+	password = trim(password);
+	result["message"] = "";
+	result["result"].set_bool(false);
+
+	if(email == "" || password == "")
+	{
+		result["message"] = "email_and_password_required";
+		return(result);
+	}
+	if(email.find("@") == String::npos)
+	{
+		result["message"] = "invalid_email";
+		return(result);
+	}
+
+	DTree existing = starter_user_load(email, context);
+	if(existing.get_type_name() == "array" && existing["email"].to_string() != "")
+	{
+		result["message"] = "user_exists";
+		return(result);
+	}
+
+	String salt = gen_sha1(std::to_string((u64)time()) + ":" + std::to_string((u64)(microtime() * 1000000.0)) + ":" + make_session_id()).substr(0, 24);
+	DTree user;
+	user["email"] = email;
+	user["salt"] = salt;
+	user["password_hash"] = starter_password_hash(password, salt);
+	user["created"] = std::to_string((u64)time());
+	DTree role;
+	role = "user";
+	user["roles"].push(role);
+
+	starter_write_json_file(starter_user_file(email, context), user);
+	user["id"] = email;
+	result["result"].set_bool(true);
+	result["id"] = email;
+	result["profile"] = user;
+	return(result);
+}
+
+DTree starter_user_sign_in(String email, String password, Request& context)
+{
+	DTree result;
+	result["result"].set_bool(false);
+	email = to_lower(trim(email));
+	password = trim(password);
+
+	DTree user = starter_user_load(email, context);
+	if(user.get_type_name() != "array" || user["email"].to_string() == "")
+	{
+		result["message"] = "no_such_user";
+		return(result);
+	}
+	if(user["password_hash"].to_string() == "")
+	{
+		result["message"] = "no_password_set";
+		return(result);
+	}
+
+	String expected = starter_password_hash(password, user["salt"].to_string());
+	if(expected != user["password_hash"].to_string())
+	{
+		result["message"] = "invalid_password";
+		return(result);
+	}
+
+	session_start();
+	context.session["starter_user_id"] = email;
+	context.var["starter"]["current_user"] = user;
+	result["result"].set_bool(true);
+	result["profile"] = user;
+	return(result);
+}
+
+bool starter_is_signed_in(Request& context)
+{
+	if(context.var["starter"]["current_user"]["email"].to_string() != "")
+		return(true);
+	String user_id = context.session["starter_user_id"];
+	if(user_id == "")
+		return(false);
+	DTree user = starter_user_load(user_id, context);
+	if(user["email"].to_string() == "")
+	{
+		context.session.erase("starter_user_id");
+		return(false);
+	}
+	context.var["starter"]["current_user"] = user;
+	return(true);
+}
+
+DTree starter_current_user(Request& context)
+{
+	if(starter_is_signed_in(context))
+		return(context.var["starter"]["current_user"]);
+	return(DTree());
+}
+
+void starter_user_logout(Request& context)
+{
+	context.session.erase("starter_user_id");
+	context.var["starter"]["current_user"].clear();
+}
+
+void starter_redirect(String path, Request& context)
+{
+	starter_set_status(context, 302, "Found");
+	context.header["Location"] = starter_link(path, context);
+}
+
+void starter_not_found(String message, Request& context)
+{
+	starter_set_status(context, 404, "Not Found");
+	context.var["starter"]["error"] = message;
+	context.var["starter"]["page_title"] = "404 Not Found";
+}
+
+String starter_menu_href(String menu_key, DTree menu_item, Request& context)
+{
+	if(menu_item["external"].to_string() != "")
+		return("/" + menu_key);
+	return(starter_link(menu_key, context));
+}
+
+String starter_html_class(Request& context)
+{
+	String classes = "no-js";
+	if(starter_theme_value("mode", context) == "dark")
+		classes += " dark-theme";
+	return(classes);
+}
+
+void starter_boot(Request& context)
+{
+	if(context.var["starter"]["booted"].to_string() == "1")
+		return;
+
+	context.var["starter"]["booted"] = "1";
+	context.var["starter"]["fs_root"] = get_cwd();
+	context.var["starter"]["script_url"] = first(context.params["DOCUMENT_URI"], context.params["SCRIPT_NAME"]);
+
+	String base_url = starter_dirname(context.var["starter"]["script_url"].to_string());
+	if(base_url == "")
+		base_url = "/";
+	if(base_url[base_url.length() - 1] != '/')
+		base_url.append(1, '/');
+	context.var["starter"]["base_url"] = base_url;
+
+	DTree config = starter_default_config();
+	String requested_theme = first(context.get["theme"], context.cookies["starter_theme"], config["theme"]["key"].to_string());
+	if(config["theme"]["options"][requested_theme].to_string() == "" && config["theme"]["options"][requested_theme].get_type_name() != "array")
+		requested_theme = config["theme"]["key"].to_string();
+
+	config["theme"]["options"][requested_theme].each([&](DTree item, String key) {
+		config["theme"][key] = item;
+	});
+	config["theme"]["key"] = requested_theme;
+	context.var["starter"]["config"] = config;
+	context.var["starter"]["route"] = starter_make_route(context);
+	context.var["starter"]["page_type"] = "html";
+	context.var["starter"]["page_title"] = first(config["menu"][context.var["starter"]["route"]["l_path"].to_string()]["title"].to_string(), config["site"]["default_page_title"].to_string(), "Home");
+	context.var["starter"]["embed_mode"].set_bool(context.get["embed"] != "");
+
+	if(context.get["theme"] != "" && context.get["theme"] == requested_theme)
+	{
+		set_cookie("starter_theme", requested_theme, time() + (86400 * 180));
+		context.cookies["starter_theme"] = requested_theme;
+	}
+
+	session_start();
+	starter_is_signed_in(context);
+
+	starter_register_css(starter_theme_value("path", context) + "css/style.css", context);
+	starter_register_css("themes/common/fontawesome/css/all.min.css", context);
+	starter_register_js("js/u-query.js", context);
+	starter_register_js("js/morphdom.js", context);
+	starter_register_js("js/site.js", context);
+}

site/examples/uce-starter/themes/common/css/gauges.css

@@ -0,0 +1,348 @@
+.gauge-demo-row {
+	display: flex;
+	gap: 1rem;
+	flex-wrap: wrap;
+	align-items: stretch;
+	margin-bottom: 1.5rem;
+}
+
+.gauge-control-panel {
+	flex: 1 1 18rem;
+	min-width: 16rem;
+	padding: 1rem;
+	border: 1px solid var(--border);
+	border-radius: var(--radius);
+	background: var(--surface);
+	box-shadow: var(--shadow-sm);
+	backdrop-filter: blur(12px);
+	-webkit-backdrop-filter: blur(12px);
+}
+
+.gauge-control-panel h4 {
+	margin: 0 0 0.75rem;
+	color: var(--text-primary);
+}
+
+.gauge-slider-group {
+	display: grid;
+	gap: 0.35rem;
+	margin-bottom: 0.9rem;
+}
+
+.gauge-slider-group label {
+	color: var(--text-secondary);
+	font-weight: 600;
+	font-size: 0.92rem;
+}
+
+.gauge-slider-group input[type="range"] {
+	width: 100%;
+	accent-color: var(--primary);
+}
+
+.gauge-set,
+.arcgauge-set {
+	flex: 1 1 24rem;
+	min-width: 20rem;
+	padding: 1rem;
+	border: 1px solid var(--border);
+	border-radius: var(--radius);
+	background: var(--surface);
+	box-shadow: var(--shadow-sm);
+	backdrop-filter: blur(12px);
+	-webkit-backdrop-filter: blur(12px);
+}
+
+.gauge-set-header,
+.arcgauge-set-header {
+	margin-bottom: 1rem;
+}
+
+.gauge-set-header h3,
+.arcgauge-set-header h3 {
+	margin: 0 0 0.3rem;
+	color: var(--text-primary);
+}
+
+.gauge-set-header p,
+.arcgauge-set-header p {
+	margin: 0;
+	color: var(--text-secondary);
+}
+
+.gauge-card,
+.arcgauge-card {
+	display: flex;
+	flex-direction: column;
+	padding: 0.85rem;
+	border: 1px solid var(--border);
+	border-radius: var(--radius);
+	background: var(--surface-elevated, var(--surface));
+	box-shadow: var(--shadow-sm);
+	backdrop-filter: blur(12px);
+	-webkit-backdrop-filter: blur(12px);
+	position: relative;
+	overflow: hidden;
+}
+
+.gauge-card::before,
+.arcgauge-card::before {
+	content: '';
+	position: absolute;
+	inset: 0 0 auto 0;
+	height: 1px;
+	background: linear-gradient(90deg, transparent, var(--primary), var(--accent), transparent);
+	opacity: 0.5;
+}
+
+.gauge-metric-label {
+	color: var(--text-secondary);
+	font-size: 0.78rem;
+	font-weight: 700;
+	letter-spacing: 0.08em;
+	text-transform: uppercase;
+}
+
+.gauge-metric-value {
+	color: var(--text-primary);
+	font-size: 1.1rem;
+	font-weight: 700;
+	font-family: var(--font-mono, ui-monospace, monospace);
+	letter-spacing: -0.03em;
+}
+
+.gauge-metric-meta {
+	color: var(--text-muted);
+	font-size: 0.84rem;
+	font-family: var(--font-mono, ui-monospace, monospace);
+}
+
+.progressbar-set-horizontal,
+.progressbar-set-vertical {
+	align-self: stretch;
+}
+
+.progressbar-grid-horizontal {
+	display: grid;
+	gap: 0.85rem;
+}
+
+.progressbar-grid-vertical {
+	display: grid;
+	gap: 0.85rem;
+	grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
+	align-items: stretch;
+}
+
+.progressbar-card-head {
+	display: flex;
+	align-items: baseline;
+	justify-content: space-between;
+	gap: 0.75rem;
+	margin-bottom: 0.7rem;
+}
+
+.progressbar-card-horizontal {
+	gap: 0.7rem;
+}
+
+.progressbar-card-vertical {
+	align-items: center;
+	justify-content: flex-end;
+	text-align: center;
+	gap: 0.7rem;
+}
+
+.progressbar-label {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.progressbar-background {
+	position: relative;
+	overflow: hidden;
+	border: 1px solid color-mix(in srgb, var(--border) 70%, transparent 30%);
+	background: color-mix(in srgb, var(--bg-color) 72%, var(--surface) 28%);
+	display: flex;
+	box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
+}
+
+.progressbar-background-horizontal {
+	height: 0.9rem;
+	border-radius: 999px;
+}
+
+.progressbar-background-vertical {
+	height: var(--progressbar-height, 240px);
+	width: 100%;
+	max-width: 4rem;
+	margin: 0 auto;
+	border-radius: 1.2rem;
+	justify-content: flex-end;
+	padding: 0.35rem;
+	flex-direction: column;
+}
+
+
+.progressbar-bar {
+	transition: all 0.35s ease;
+	box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12), 0 0 24px color-mix(in srgb, currentColor 28%, transparent 72%);
+}
+
+.progressbar-background-horizontal .progressbar-bar {
+	height: 100%;
+	border-radius: 999px;
+}
+
+.progressbar-background-vertical .progressbar-bar {
+	width: 100%;
+	border-radius: 0.95rem;
+}
+
+.progressbar-marker {
+	position: absolute;
+	z-index: 10;
+	opacity: 0.72;
+	background: var(--text-color, var(--text-primary, #333));
+	box-shadow: 0 0 0 1px rgba(255,255,255,0.16);
+}
+
+.progressbar-marker:hover {
+	opacity: 1;
+}
+
+.progressbar-background-horizontal .progressbar-marker {
+	height: 100%;
+	top: 0;
+	width: 3px;
+	transform: translateX(-50%);
+}
+
+.progressbar-background-vertical .progressbar-marker {
+	width: 100%;
+	left: 0;
+	height: 3px;
+	transform: translateY(50%);
+}
+
+.needlegauge-svg .needle {
+	transition: all 0.3s ease;
+}
+
+.progressbar-meta {
+	margin-top: 0.1rem;
+}
+
+.needlegauge-grid {
+	display: grid;
+	gap: 0.85rem;
+	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
+}
+
+.needlegauge-card {
+	align-items: center;
+	text-align: center;
+	gap: 0.55rem;
+}
+
+.needlegauge-label-head {
+	align-self: flex-start;
+}
+
+.needlegauge-visual {
+	width: 100%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.needlegauge-svg {
+	max-width: 100%;
+	overflow: visible;
+}
+
+
+.needlegauge-svg .ticks line {
+	opacity: 0.8;
+}
+
+.needlegauge-svg .ticks text {
+	font-family: var(--font-mono, ui-monospace, monospace);
+	fill: var(--text-muted);
+}
+
+.needlegauge-info {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 0.2rem;
+}
+
+.arcgauge-label {
+	margin-bottom: 0.35rem;
+}
+
+.arcgauge-svg {
+	width: 130px;
+	height: 72px;
+	margin: 0.1rem 0 0.35rem;
+	overflow: visible;
+}
+
+.arcgauge-track {
+	stroke: color-mix(in srgb, var(--border) 70%, transparent 30%);
+}
+
+.arcgauge-arc-dyn {
+	transition: stroke-dasharray 0.6s ease, stroke 0.6s ease;
+}
+
+.arcgauge-watermark {
+	stroke-width: 1.5;
+	stroke-linecap: round;
+}
+
+.arcgauge-watermark-lo {
+	stroke: var(--primary);
+}
+
+.arcgauge-watermark-hi {
+	stroke: var(--accent);
+}
+
+.arcgauge-value {
+	fill: var(--text-primary);
+	font-size: 17px;
+	font-weight: 700;
+	font-family: var(--font-mono, ui-monospace, monospace);
+}
+
+.arcgauge-caption {
+	fill: var(--text-muted);
+	font-size: 7px;
+	letter-spacing: 1.5px;
+	font-family: var(--font-sans, system-ui, sans-serif);
+}
+
+.arcgauge-meta {
+	width: 100%;
+	text-align: center;
+}
+
+.arcgauge-grid {
+	display: grid;
+	gap: 0.85rem;
+	grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
+}
+
+.arcgauge-card {
+	align-items: center;
+	text-align: center;
+}
+
+@media (max-width: 768px) {
+	.gauge-demo-row {
+		flex-direction: column;
+	}
+}

site/examples/uce-starter/themes/common/css/workspace.css

@@ -0,0 +1,522 @@
+.ws-app {
+	--ws-sidebar-width: 280px;
+	--ws-frame-bg: var(--surface);
+	--ws-sidebar-bg: color-mix(in srgb, var(--bg-secondary) 80%, var(--surface) 20%);
+	--ws-main-bg: var(--surface);
+	--ws-surface-alt: color-mix(in srgb, var(--bg-secondary) 72%, var(--surface) 28%);
+	--ws-shadow: var(--shadow-md);
+	display: flex;
+	width: 100%;
+	min-height: min(76vh, 900px);
+	overflow: hidden;
+	position: relative;
+	background: var(--ws-frame-bg);
+	border: 1px solid var(--border);
+	border-radius: var(--radius-lg);
+	box-shadow: var(--ws-shadow);
+}
+
+.ws-sidebar {
+	width: var(--ws-sidebar-width);
+	flex-shrink: 0;
+	display: flex;
+	flex-direction: column;
+	min-height: 0;
+	background: var(--ws-sidebar-bg);
+	border-right: 1px solid var(--border);
+	position: relative;
+	z-index: 2;
+}
+
+.ws-main {
+	flex: 1;
+	min-width: 0;
+	min-height: 0;
+	display: flex;
+	flex-direction: column;
+	background: var(--ws-main-bg);
+	padding: 0;
+}
+
+.ws-sidebar-top,
+.ws-panel-header,
+.ws-section-head {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 0.75rem;
+}
+
+.ws-sidebar-top {
+	padding: 0.9rem;
+	border-bottom: 1px solid var(--border);
+	flex-shrink: 0;
+	flex-direction: column;
+	align-items: stretch;
+	background: color-mix(in srgb, var(--surface) 78%, var(--bg-secondary) 22%);
+}
+
+.ws-search-wrap {
+	position: relative;
+}
+
+.ws-search-icon {
+	position: absolute;
+	left: 0.7rem;
+	top: 50%;
+	transform: translateY(-50%);
+	color: var(--text-muted);
+	font-size: 0.8rem;
+	pointer-events: none;
+}
+
+.ws-search-input {
+	width: 100%;
+	min-height: 36px;
+	padding: 0 0.8rem 0 2rem;
+	border: 1px solid var(--border);
+	border-radius: var(--radius);
+	background: var(--bg-secondary);
+	font-size: 0.9rem;
+	color: var(--text-primary);
+}
+
+.ws-search-input:focus {
+	outline: none;
+	border-color: var(--primary);
+	box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 20%, transparent 80%);
+}
+
+.ws-panel-title-group,
+.ws-header-actions {
+	display: flex;
+	align-items: center;
+	gap: 0.7rem;
+}
+
+.ws-panel-title-group {
+	flex-direction: column;
+	align-items: flex-start;
+}
+
+.ws-panel-title-group h2,
+.ws-section-head h3,
+.ws-empty-state h2 {
+	margin: 0;
+}
+
+.ws-subtitle {
+	margin: 0;
+	color: var(--text-secondary);
+	font-size: 0.92rem;
+}
+
+.ws-sidebar-overlay {
+	display: none;
+}
+
+.ws-mobile-bar {
+	display: none;
+	align-items: center;
+	gap: 0.7rem;
+	padding: 0.9rem 1rem;
+	border-bottom: 1px solid var(--border);
+	background: color-mix(in srgb, var(--surface) 92%, var(--bg-secondary) 8%);
+	position: sticky;
+	top: 0;
+	z-index: 1;
+}
+
+.ws-mobile-title {
+	font-size: 1rem;
+	font-weight: 700;
+	color: var(--text-primary);
+}
+
+.ws-empty-state {
+	min-height: 320px;
+	display: grid;
+	place-items: center;
+	align-content: center;
+	gap: 0.75rem;
+	text-align: center;
+	padding: 2rem;
+	max-width: 40rem;
+	margin: auto;
+}
+
+.ws-empty-state p {
+	max-width: 32rem;
+	color: var(--text-secondary);
+	margin: 0;
+}
+
+.ws-empty-icon {
+	width: 64px;
+	height: 64px;
+	display: grid;
+	place-items: center;
+	border-radius: var(--radius);
+	background: linear-gradient(135deg, var(--primary), var(--accent));
+	color: #fff;
+	font-size: 24px;
+	box-shadow: var(--shadow-sm);
+}
+
+.ws-panel {
+	min-height: 0;
+	display: flex;
+	flex-direction: column;
+	padding: 1.1rem 1.25rem;
+	gap: 1rem;
+}
+
+.ws-section {
+	display: flex;
+	flex-direction: column;
+	gap: 0.8rem;
+	padding: 1rem;
+	border: 1px solid var(--border);
+	border-radius: var(--radius);
+	background: var(--ws-surface-alt);
+}
+
+.ws-section + .ws-section {
+	margin-top: 0.25rem;
+}
+
+.ws-icon-btn {
+	min-width: 34px;
+	height: 34px;
+	padding: 0 0.75rem;
+	border: 1px solid var(--border);
+	border-radius: var(--radius-sm);
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	gap: 0.4rem;
+	flex-shrink: 0;
+	background: var(--bg-secondary);
+	color: var(--text-secondary);
+	cursor: pointer;
+	transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
+	text-decoration: none;
+}
+
+.ws-icon-btn:hover {
+	background: var(--surface-hover);
+	border-color: var(--border-hover);
+	color: var(--text-primary);
+	text-decoration: none;
+}
+
+.ws-icon-btn:active {
+	transform: translateY(1px);
+}
+
+.ws-primary-btn,
+.ws-sidebar-action-btn {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	gap: 0.55rem;
+	width: 100%;
+	min-height: 38px;
+	padding: 0.55rem 0.85rem;
+	border: none;
+	border-radius: var(--radius-sm);
+	background: var(--primary);
+	color: #fff;
+	font-size: 0.92rem;
+	font-weight: 700;
+	cursor: pointer;
+	transition: background 0.2s ease, transform 0.2s ease;
+}
+
+.ws-primary-btn:hover,
+.ws-sidebar-action-btn:hover {
+	background: var(--primary-dark);
+	text-decoration: none;
+	color: #fff;
+}
+
+.ws-primary-btn:active,
+.ws-sidebar-action-btn:active {
+	transform: translateY(1px);
+}
+
+.ws-list-state {
+	padding: 1rem;
+	color: var(--text-secondary);
+	font-size: 0.86rem;
+	text-align: center;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 0.45rem;
+	border-top: 1px solid var(--border);
+}
+
+.ws-nav-group-label {
+	padding: 0.7rem 0.95rem 0.35rem;
+	font-size: 0.72rem;
+	font-weight: 700;
+	text-transform: uppercase;
+	letter-spacing: 0.06em;
+	color: var(--text-muted);
+	user-select: none;
+}
+
+.ws-nav-list {
+	display: flex;
+	flex-direction: column;
+	padding: 0.3rem 0.4rem 0.9rem;
+	gap: 0.2rem;
+	overflow: auto;
+	min-height: 0;
+	flex: 1;
+}
+
+.ws-nav-item {
+	display: block;
+	padding: 0 0.2rem;
+	text-decoration: none;
+	color: inherit;
+}
+
+.ws-nav-item-inner {
+	display: flex;
+	align-items: center;
+	gap: 0.55rem;
+	width: 100%;
+	padding: 0.58rem 0.65rem;
+	border-radius: var(--radius-sm);
+	min-width: 0;
+	transition: background 0.2s ease, border-color 0.2s ease, padding-left 0.2s ease;
+	border-left: 3px solid transparent;
+}
+
+.ws-nav-item:hover .ws-nav-item-inner {
+	background: color-mix(in srgb, var(--surface-hover) 85%, transparent 15%);
+}
+
+.ws-nav-item.active .ws-nav-item-inner,
+.ws-nav-item.is-active .ws-nav-item-inner {
+	background: color-mix(in srgb, var(--primary) 12%, transparent 88%);
+	border-left-color: var(--primary);
+	padding-left: calc(0.65rem - 3px);
+}
+
+.ws-nav-icon {
+	flex-shrink: 0;
+	width: 16px;
+	text-align: center;
+	color: var(--text-muted);
+	font-size: 0.8rem;
+}
+
+.ws-nav-item.active .ws-nav-icon,
+.ws-nav-item.is-active .ws-nav-icon {
+	color: var(--primary);
+}
+
+.ws-nav-item-text {
+	flex: 1;
+	min-width: 0;
+	display: flex;
+	align-items: center;
+	gap: 0.45rem;
+	overflow: hidden;
+}
+
+.ws-nav-title {
+	flex: 1;
+	min-width: 0;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	font-size: 0.9rem;
+	color: var(--text-primary);
+	line-height: 1.3;
+}
+
+.ws-nav-item.active .ws-nav-title,
+.ws-nav-item.is-active .ws-nav-title {
+	font-weight: 700;
+	color: var(--primary-dark);
+}
+
+.ws-nav-meta {
+	flex-shrink: 0;
+	font-size: 0.72rem;
+	color: var(--text-muted);
+	transition: opacity 0.2s ease;
+}
+
+.ws-status-pill {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	min-height: 24px;
+	padding: 0.2rem 0.6rem;
+	border-radius: 999px;
+	border: 1px solid transparent;
+	font-size: 0.76rem;
+	font-weight: 700;
+	letter-spacing: 0.01em;
+	white-space: nowrap;
+}
+
+.ws-status-pill-neutral {
+	background: color-mix(in srgb, var(--text-muted) 16%, transparent 84%);
+	border-color: color-mix(in srgb, var(--text-muted) 28%, transparent 72%);
+	color: var(--text-secondary);
+}
+
+.ws-status-pill-success {
+	background: var(--success-bg);
+	border-color: var(--success-border);
+	color: var(--success-text);
+}
+
+.ws-status-pill-warn {
+	background: var(--warning-bg);
+	border-color: var(--warning-border);
+	color: var(--warning-text);
+}
+
+.ws-status-pill-danger {
+	background: var(--error-bg);
+	border-color: var(--error-border);
+	color: var(--error-text);
+}
+
+.ws-status-pill-info {
+	background: var(--info-bg);
+	border-color: var(--info-border);
+	color: var(--info-text);
+}
+
+.ws-stat-grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+	gap: 0.85rem;
+}
+
+.ws-stat-card {
+	padding: 0.9rem 1rem;
+	border: 1px solid var(--border);
+	border-radius: var(--radius);
+	background: var(--bg-secondary);
+	display: flex;
+	flex-direction: column;
+	gap: 0.35rem;
+}
+
+.ws-stat-card-label {
+	font-size: 0.78rem;
+	text-transform: uppercase;
+	letter-spacing: 0.05em;
+	font-weight: 700;
+	color: var(--text-secondary);
+}
+
+.ws-stat-card-value {
+	font-size: 1.45rem;
+	font-weight: 700;
+	line-height: 1.1;
+	font-variant-numeric: tabular-nums;
+}
+
+.ws-stat-card-meta,
+.ws-section-copy,
+.ws-inline-note,
+.ws-detail-copy {
+	margin: 0;
+	color: var(--text-secondary);
+}
+
+.ws-detail-grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+	gap: 0.85rem;
+}
+
+.ws-detail-card {
+	padding: 0.9rem 1rem;
+	border: 1px solid var(--border);
+	border-radius: var(--radius);
+	background: color-mix(in srgb, var(--bg-secondary) 85%, var(--surface) 15%);
+	min-height: 100%;
+}
+
+.ws-detail-card h4 {
+	margin: 0 0 0.35rem;
+	font-size: 0.95rem;
+}
+
+.ws-detail-card p {
+	margin: 0;
+	color: var(--text-secondary);
+	font-size: 0.9rem;
+}
+
+.ws-demo-sidebar-copy {
+	padding: 0 1rem 1rem;
+	font-size: 0.84rem;
+	color: var(--text-secondary);
+}
+
+.ws-demo-sidebar-copy p {
+	margin: 0;
+}
+
+@media (max-width: 860px) {
+	.ws-app {
+		display: block;
+		min-height: 72vh;
+	}
+
+	.ws-sidebar {
+		position: absolute;
+		left: 0;
+		top: 0;
+		bottom: 0;
+		width: min(88vw, max(var(--ws-sidebar-width), 320px));
+		transform: translateX(-100%);
+		transition: transform 160ms ease;
+		box-shadow: var(--shadow-lg);
+		z-index: 10;
+	}
+
+	.ws-sidebar.is-open {
+		transform: translateX(0);
+	}
+
+	.ws-sidebar-overlay.is-open {
+		display: block;
+		position: absolute;
+		inset: 0;
+		background: rgba(15, 23, 42, 0.38);
+		z-index: 5;
+	}
+
+	.ws-mobile-bar {
+		display: flex;
+	}
+
+	.ws-panel {
+		padding: 1rem;
+	}
+
+	.ws-stat-grid,
+	.ws-detail-grid {
+		grid-template-columns: 1fr;
+	}
+
+	.ws-section-head,
+	.ws-panel-header {
+		align-items: flex-start;
+		flex-direction: column;
+	}
+}

site/examples/uce-starter/themes/common/fontawesome/LICENSE.txt

@@ -0,0 +1,34 @@
+Font Awesome Free License
+-------------------------
+
+Font Awesome Free is free, open source, and GPL friendly. You can use it for
+commercial projects, open source projects, or really almost whatever you want.
+Full Font Awesome Free license: https://fontawesome.com/license/free.
+
+# Icons: CC BY 4.0 License (https://creativecommons.org/licenses/by/4.0/)
+In the Font Awesome Free download, the CC BY 4.0 license applies to all icons
+packaged as SVG and JS file types.
+
+# Fonts: SIL OFL 1.1 License (https://scripts.sil.org/OFL)
+In the Font Awesome Free download, the SIL OFL license applies to all icons
+packaged as web and desktop font files.
+
+# Code: MIT License (https://opensource.org/licenses/MIT)
+In the Font Awesome Free download, the MIT license applies to all non-font and
+non-icon files.
+
+# Attribution
+Attribution is required by MIT, SIL OFL, and CC BY licenses. Downloaded Font
+Awesome Free files already contain embedded comments with sufficient
+attribution, so you shouldn't need to do anything additional when using these
+files normally.
+
+We've kept attribution comments terse, so we ask that you do not actively work
+to remove them from files, especially code. They're a great way for folks to
+learn about Font Awesome.
+
+# Brand Icons
+All brand icons are trademarks of their respective owners. The use of these
+trademarks does not indicate endorsement of the trademark holder by Font
+Awesome, nor vice versa. **Please do not use brand logos for any purpose except
+to represent the company, product, or service to which they refer.**

site/examples/uce-starter/themes/common/fontawesome/webfonts/fa-regular-400.svg

@@ -0,0 +1,803 @@
+<?xml version="1.0" standalone="no"?>
+<!--
+Font Awesome Free 5.10.0 by @fontawesome - https://fontawesome.com
+License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+-->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
+<metadata>
+Created by FontForge 20190112 at Mon Jul 29 09:54:22 2019
+ By Robert Madole
+Copyright (c) Font Awesome
+</metadata>
+<defs>
+<font id="FontAwesome5Free-Regular" horiz-adv-x="512" >
+  <font-face 
+    font-family="Font Awesome 5 Free Regular"
+    font-weight="400"
+    font-stretch="normal"
+    units-per-em="512"
+    panose-1="2 0 5 3 0 0 0 0 0 0"
+    ascent="448"
+    descent="-64"
+    bbox="-0.0663408 -64.0662 640.01 448.1"
+    underline-thickness="25"
+    underline-position="-51"
+    unicode-range="U+0020-F5C8"
+  />
+    <missing-glyph />
+    <glyph glyph-name="heart" unicode="&#xf004;" 
+d="M458.4 383.7c75.2998 -63.4004 64.0996 -166.601 10.5996 -221.3l-175.4 -178.7c-10 -10.2002 -23.2998 -15.7998 -37.5996 -15.7998c-14.2002 0 -27.5996 5.69922 -37.5996 15.8994l-175.4 178.7c-53.5996 54.7002 -64.5996 157.9 10.5996 221.2
+c57.8008 48.7002 147.101 41.2998 202.4 -15c55.2998 56.2998 144.6 63.5996 202.4 15zM434.8 196.2c36.2002 36.8994 43.7998 107.7 -7.2998 150.8c-38.7002 32.5996 -98.7002 27.9004 -136.5 -10.5996l-35 -35.7002l-35 35.7002
+c-37.5996 38.2998 -97.5996 43.1992 -136.5 10.5c-51.2002 -43.1006 -43.7998 -113.5 -7.2998 -150.7l175.399 -178.7c2.40039 -2.40039 4.40039 -2.40039 6.80078 0z" />
+    <glyph glyph-name="star" unicode="&#xf005;" horiz-adv-x="576" 
+d="M528.1 276.5c26.2002 -3.7998 36.7002 -36.0996 17.7002 -54.5996l-105.7 -103l25 -145.5c4.5 -26.3008 -23.1992 -45.9004 -46.3994 -33.7002l-130.7 68.7002l-130.7 -68.7002c-23.2002 -12.2998 -50.8994 7.39941 -46.3994 33.7002l25 145.5l-105.7 103
+c-19 18.5 -8.5 50.7998 17.7002 54.5996l146.1 21.2998l65.2998 132.4c11.7998 23.8994 45.7002 23.5996 57.4004 0l65.2998 -132.4zM388.6 135.7l100.601 98l-139 20.2002l-62.2002 126l-62.2002 -126l-139 -20.2002l100.601 -98l-23.7002 -138.4l124.3 65.2998
+l124.3 -65.2998z" />
+    <glyph glyph-name="user" unicode="&#xf007;" horiz-adv-x="448" 
+d="M313.6 144c74.2002 0 134.4 -60.2002 134.4 -134.4v-25.5996c0 -26.5 -21.5 -48 -48 -48h-352c-26.5 0 -48 21.5 -48 48v25.5996c0 74.2002 60.2002 134.4 134.4 134.4c28.7998 0 42.5 -16 89.5996 -16s60.9004 16 89.5996 16zM400 -16v25.5996
+c0 47.6006 -38.7998 86.4004 -86.4004 86.4004c-14.6992 0 -37.8994 -16 -89.5996 -16c-51.2998 0 -75 16 -89.5996 16c-47.6006 0 -86.4004 -38.7998 -86.4004 -86.4004v-25.5996h352zM224 160c-79.5 0 -144 64.5 -144 144s64.5 144 144 144s144 -64.5 144 -144
+s-64.5 -144 -144 -144zM224 400c-52.9004 0 -96 -43.0996 -96 -96s43.0996 -96 96 -96s96 43.0996 96 96s-43.0996 96 -96 96z" />
+    <glyph glyph-name="clock" unicode="&#xf017;" 
+d="M256 440c137 0 248 -111 248 -248s-111 -248 -248 -248s-248 111 -248 248s111 248 248 248zM256 -8c110.5 0 200 89.5 200 200s-89.5 200 -200 200s-200 -89.5 -200 -200s89.5 -200 200 -200zM317.8 96.4004l-84.8994 61.6992
+c-3.10059 2.30078 -4.90039 5.90039 -4.90039 9.7002v164.2c0 6.59961 5.40039 12 12 12h32c6.59961 0 12 -5.40039 12 -12v-141.7l66.7998 -48.5996c5.40039 -3.90039 6.5 -11.4004 2.60059 -16.7998l-18.8008 -25.9004c-3.89941 -5.2998 -11.3994 -6.5 -16.7998 -2.59961z
+" />
+    <glyph glyph-name="list-alt" unicode="&#xf022;" 
+d="M464 416c26.5098 0 48 -21.4902 48 -48v-352c0 -26.5098 -21.4902 -48 -48 -48h-416c-26.5098 0 -48 21.4902 -48 48v352c0 26.5098 21.4902 48 48 48h416zM458 16c3.31152 0 6 2.68848 6 6v340c0 3.31152 -2.68848 6 -6 6h-404c-3.31152 0 -6 -2.68848 -6 -6v-340
+c0 -3.31152 2.68848 -6 6 -6h404zM416 108v-24c0 -6.62695 -5.37305 -12 -12 -12h-200c-6.62695 0 -12 5.37305 -12 12v24c0 6.62695 5.37305 12 12 12h200c6.62695 0 12 -5.37305 12 -12zM416 204v-24c0 -6.62695 -5.37305 -12 -12 -12h-200c-6.62695 0 -12 5.37305 -12 12
+v24c0 6.62695 5.37305 12 12 12h200c6.62695 0 12 -5.37305 12 -12zM416 300v-24c0 -6.62695 -5.37305 -12 -12 -12h-200c-6.62695 0 -12 5.37305 -12 12v24c0 6.62695 5.37305 12 12 12h200c6.62695 0 12 -5.37305 12 -12zM164 288c0 -19.8818 -16.1182 -36 -36 -36
+s-36 16.1182 -36 36s16.1182 36 36 36s36 -16.1182 36 -36zM164 192c0 -19.8818 -16.1182 -36 -36 -36s-36 16.1182 -36 36s16.1182 36 36 36s36 -16.1182 36 -36zM164 96c0 -19.8818 -16.1182 -36 -36 -36s-36 16.1182 -36 36s16.1182 36 36 36s36 -16.1182 36 -36z" />
+    <glyph glyph-name="flag" unicode="&#xf024;" 
+d="M336.174 368c35.4668 0 73.0195 12.6914 108.922 28.1797c31.6406 13.6514 66.9043 -9.65723 66.9043 -44.1162v-239.919c0 -16.1953 -8.1543 -31.3057 -21.7129 -40.1631c-26.5762 -17.3643 -70.0693 -39.9814 -128.548 -39.9814c-68.6084 0 -112.781 32 -161.913 32
+c-56.5674 0 -89.957 -11.2803 -127.826 -28.5566v-83.4434c0 -8.83691 -7.16309 -16 -16 -16h-16c-8.83691 0 -16 7.16309 -16 16v406.438c-14.3428 8.2998 -24 23.7979 -24 41.5615c0 27.5693 23.2422 49.71 51.2012 47.8965
+c22.9658 -1.49023 41.8662 -19.4717 44.4805 -42.3379c0.177734 -1.52441 0.321289 -4.00781 0.321289 -5.54199c0 -4.30176 -1.10352 -11.1035 -2.46289 -15.1846c22.418 8.68555 49.4199 15.168 80.7207 15.168c68.6084 0 112.781 -32 161.913 -32zM464 112v240
+c-31.5059 -14.6338 -84.5547 -32 -127.826 -32c-59.9111 0 -101.968 32 -161.913 32c-41.4365 0 -80.4766 -16.5879 -102.261 -32v-232c31.4473 14.5967 84.4648 24 127.826 24c59.9111 0 101.968 -32 161.913 -32c41.4365 0 80.4775 16.5879 102.261 32z" />
+    <glyph glyph-name="bookmark" unicode="&#xf02e;" horiz-adv-x="384" 
+d="M336 448c26.5098 0 48 -21.4902 48 -48v-464l-192 112l-192 -112v464c0 26.5098 21.4902 48 48 48h288zM336 19.5703v374.434c0 3.31348 -2.68555 5.99609 -6 5.99609h-276c-3.31152 0 -6 -2.68848 -6 -6v-374.43l144 84z" />
+    <glyph glyph-name="image" unicode="&#xf03e;" 
+d="M464 384c26.5098 0 48 -21.4902 48 -48v-288c0 -26.5098 -21.4902 -48 -48 -48h-416c-26.5098 0 -48 21.4902 -48 48v288c0 26.5098 21.4902 48 48 48h416zM458 48c3.31152 0 6 2.68848 6 6v276c0 3.31152 -2.68848 6 -6 6h-404c-3.31152 0 -6 -2.68848 -6 -6v-276
+c0 -3.31152 2.68848 -6 6 -6h404zM128 296c22.0908 0 40 -17.9092 40 -40s-17.9092 -40 -40 -40s-40 17.9092 -40 40s17.9092 40 40 40zM96 96v48l39.5137 39.5146c4.6875 4.68652 12.2852 4.68652 16.9717 0l39.5146 -39.5146l119.514 119.515
+c4.6875 4.68652 12.2852 4.68652 16.9717 0l87.5146 -87.5146v-80h-320z" />
+    <glyph glyph-name="edit" unicode="&#xf044;" horiz-adv-x="576" 
+d="M402.3 103.1l32 32c5 5 13.7002 1.5 13.7002 -5.69922v-145.4c0 -26.5 -21.5 -48 -48 -48h-352c-26.5 0 -48 21.5 -48 48v352c0 26.5 21.5 48 48 48h273.5c7.09961 0 10.7002 -8.59961 5.7002 -13.7002l-32 -32c-1.5 -1.5 -3.5 -2.2998 -5.7002 -2.2998h-241.5v-352h352
+v113.5c0 2.09961 0.799805 4.09961 2.2998 5.59961zM558.9 304.9l-262.601 -262.601l-90.3994 -10c-26.2002 -2.89941 -48.5 19.2002 -45.6006 45.6006l10 90.3994l262.601 262.601c22.8994 22.8994 59.8994 22.8994 82.6992 0l43.2002 -43.2002
+c22.9004 -22.9004 22.9004 -60 0.100586 -82.7998zM460.1 274l-58.0996 58.0996l-185.8 -185.899l-7.2998 -65.2998l65.2998 7.2998zM524.9 353.7l-43.2002 43.2002c-4.10059 4.09961 -10.7998 4.09961 -14.7998 0l-30.9004 -30.9004l58.0996 -58.0996l30.9004 30.8994
+c4 4.2002 4 10.7998 -0.0996094 14.9004z" />
+    <glyph glyph-name="times-circle" unicode="&#xf057;" 
+d="M256 440c137 0 248 -111 248 -248s-111 -248 -248 -248s-248 111 -248 248s111 248 248 248zM256 -8c110.5 0 200 89.5 200 200s-89.5 200 -200 200s-200 -89.5 -200 -200s89.5 -200 200 -200zM357.8 254.2l-62.2002 -62.2002l62.2002 -62.2002
+c4.7002 -4.7002 4.7002 -12.2998 0 -17l-22.5996 -22.5996c-4.7002 -4.7002 -12.2998 -4.7002 -17 0l-62.2002 62.2002l-62.2002 -62.2002c-4.7002 -4.7002 -12.2998 -4.7002 -17 0l-22.5996 22.5996c-4.7002 4.7002 -4.7002 12.2998 0 17l62.2002 62.2002l-62.2002 62.2002
+c-4.7002 4.7002 -4.7002 12.2998 0 17l22.5996 22.5996c4.7002 4.7002 12.2998 4.7002 17 0l62.2002 -62.2002l62.2002 62.2002c4.7002 4.7002 12.2998 4.7002 17 0l22.5996 -22.5996c4.7002 -4.7002 4.7002 -12.2998 0 -17z" />
+    <glyph glyph-name="check-circle" unicode="&#xf058;" 
+d="M256 440c136.967 0 248 -111.033 248 -248s-111.033 -248 -248 -248s-248 111.033 -248 248s111.033 248 248 248zM256 392c-110.549 0 -200 -89.4678 -200 -200c0 -110.549 89.4678 -200 200 -200c110.549 0 200 89.4678 200 200c0 110.549 -89.4678 200 -200 200z
+M396.204 261.733c4.66699 -4.70508 4.63672 -12.3037 -0.0673828 -16.9717l-172.589 -171.204c-4.70508 -4.66797 -12.3027 -4.63672 -16.9697 0.0683594l-90.7812 91.5156c-4.66797 4.70605 -4.63672 12.3047 0.0683594 16.9717l22.7188 22.5361
+c4.70508 4.66699 12.3027 4.63574 16.9697 -0.0693359l59.792 -60.2773l141.353 140.216c4.70508 4.66797 12.3027 4.6377 16.9697 -0.0673828z" />
+    <glyph glyph-name="question-circle" unicode="&#xf059;" 
+d="M256 440c136.957 0 248 -111.083 248 -248c0 -136.997 -111.043 -248 -248 -248s-248 111.003 -248 248c0 136.917 111.043 248 248 248zM256 -8c110.569 0 200 89.4697 200 200c0 110.529 -89.5088 200 -200 200c-110.528 0 -200 -89.5049 -200 -200
+c0 -110.569 89.4678 -200 200 -200zM363.244 247.2c0 -67.0518 -72.4209 -68.084 -72.4209 -92.8633v-6.33691c0 -6.62695 -5.37305 -12 -12 -12h-45.6475c-6.62695 0 -12 5.37305 -12 12v8.65918c0 35.7451 27.1006 50.0342 47.5791 61.5156
+c17.5615 9.84473 28.3242 16.541 28.3242 29.5791c0 17.2461 -21.999 28.6934 -39.7842 28.6934c-23.1885 0 -33.8936 -10.9775 -48.9424 -29.9697c-4.05664 -5.11914 -11.46 -6.07031 -16.666 -2.12402l-27.8232 21.0986
+c-5.10742 3.87207 -6.25098 11.0654 -2.64453 16.3633c23.627 34.6934 53.7217 54.1846 100.575 54.1846c49.0713 0 101.45 -38.3037 101.45 -88.7998zM298 80c0 -23.1592 -18.8408 -42 -42 -42s-42 18.8408 -42 42s18.8408 42 42 42s42 -18.8408 42 -42z" />
+    <glyph glyph-name="eye" unicode="&#xf06e;" horiz-adv-x="576" 
+d="M288 304c0.0927734 0 0.244141 0.000976562 0.336914 0.000976562c61.6641 0 111.71 -50.0469 111.71 -111.711c0 -61.6631 -50.0459 -111.71 -111.71 -111.71s-111.71 50.0469 -111.71 111.71c0 8.71289 1.95898 22.5781 4.37305 30.9502
+c6.93066 -3.94141 19.0273 -7.18457 27 -7.24023c30.9121 0 56 25.0879 56 56c-0.0556641 7.97266 -3.29883 20.0693 -7.24023 27c8.42383 2.62207 22.4189 4.8623 31.2402 5zM572.52 206.6c1.9209 -3.79883 3.47949 -10.3379 3.47949 -14.5947
+s-1.55859 -10.7959 -3.47949 -14.5947c-54.1992 -105.771 -161.59 -177.41 -284.52 -177.41s-230.29 71.5898 -284.52 177.4c-1.9209 3.79883 -3.47949 10.3379 -3.47949 14.5947s1.55859 10.7959 3.47949 14.5947c54.1992 105.771 161.59 177.41 284.52 177.41
+s230.29 -71.5898 284.52 -177.4zM288 48c98.6602 0 189.1 55 237.93 144c-48.8398 89 -139.27 144 -237.93 144s-189.09 -55 -237.93 -144c48.8398 -89 139.279 -144 237.93 -144z" />
+    <glyph glyph-name="eye-slash" unicode="&#xf070;" horiz-adv-x="640" 
+d="M634 -23c3.31738 -2.65137 6.00977 -8.25098 6.00977 -12.498c0 -3.10449 -1.57715 -7.58984 -3.51953 -10.0117l-10 -12.4902c-2.65234 -3.31152 -8.24707 -6 -12.4902 -6c-3.09961 0 -7.58008 1.57227 -10 3.50977l-598 467.49
+c-3.31738 2.65137 -6.00977 8.25098 -6.00977 12.498c0 3.10449 1.57715 7.58984 3.51953 10.0117l10 12.4902c2.65234 3.31152 8.24707 6 12.4902 6c3.09961 0 7.58008 -1.57227 10 -3.50977zM296.79 301.53c6.33496 1.35059 16.7324 2.45801 23.21 2.46973
+c60.4805 0 109.36 -47.9102 111.58 -107.85zM343.21 82.46c-6.33496 -1.34375 -16.7334 -2.44629 -23.21 -2.45996c-60.4697 0 -109.35 47.9102 -111.58 107.84zM320 336c-19.8799 0 -39.2803 -2.7998 -58.2197 -7.09961l-46.4102 36.29
+c32.9199 11.8096 67.9297 18.8096 104.63 18.8096c122.93 0 230.29 -71.5898 284.57 -177.4c1.91992 -3.79883 3.47949 -10.3379 3.47949 -14.5947s-1.55957 -10.7959 -3.47949 -14.5947c-11.7197 -22.7598 -35.4189 -56.4092 -52.9004 -75.1104l-37.7402 29.5
+c14.333 15.0156 34.0449 41.9854 44 60.2002c-48.8398 89 -139.279 144 -237.93 144zM320 48c19.8896 0 39.2803 2.7998 58.2197 7.08984l46.4102 -36.2803c-32.9199 -11.7598 -67.9297 -18.8096 -104.63 -18.8096c-122.92 0 -230.28 71.5898 -284.51 177.4
+c-1.9209 3.79883 -3.47949 10.3379 -3.47949 14.5947s1.55859 10.7959 3.47949 14.5947c11.7168 22.7568 35.4111 56.4014 52.8896 75.1006l37.7402 -29.5c-14.3467 -15.0107 -34.0811 -41.9756 -44.0498 -60.1904c48.8496 -89 139.279 -144 237.93 -144z" />
+    <glyph glyph-name="calendar-alt" unicode="&#xf073;" horiz-adv-x="448" 
+d="M148 160h-40c-6.59961 0 -12 5.40039 -12 12v40c0 6.59961 5.40039 12 12 12h40c6.59961 0 12 -5.40039 12 -12v-40c0 -6.59961 -5.40039 -12 -12 -12zM256 172c0 -6.59961 -5.40039 -12 -12 -12h-40c-6.59961 0 -12 5.40039 -12 12v40c0 6.59961 5.40039 12 12 12h40
+c6.59961 0 12 -5.40039 12 -12v-40zM352 172c0 -6.59961 -5.40039 -12 -12 -12h-40c-6.59961 0 -12 5.40039 -12 12v40c0 6.59961 5.40039 12 12 12h40c6.59961 0 12 -5.40039 12 -12v-40zM256 76c0 -6.59961 -5.40039 -12 -12 -12h-40c-6.59961 0 -12 5.40039 -12 12v40
+c0 6.59961 5.40039 12 12 12h40c6.59961 0 12 -5.40039 12 -12v-40zM160 76c0 -6.59961 -5.40039 -12 -12 -12h-40c-6.59961 0 -12 5.40039 -12 12v40c0 6.59961 5.40039 12 12 12h40c6.59961 0 12 -5.40039 12 -12v-40zM352 76c0 -6.59961 -5.40039 -12 -12 -12h-40
+c-6.59961 0 -12 5.40039 -12 12v40c0 6.59961 5.40039 12 12 12h40c6.59961 0 12 -5.40039 12 -12v-40zM448 336v-352c0 -26.5 -21.5 -48 -48 -48h-352c-26.5 0 -48 21.5 -48 48v352c0 26.5 21.5 48 48 48h48v52c0 6.59961 5.40039 12 12 12h40
+c6.59961 0 12 -5.40039 12 -12v-52h128v52c0 6.59961 5.40039 12 12 12h40c6.59961 0 12 -5.40039 12 -12v-52h48c26.5 0 48 -21.5 48 -48zM400 -10v298h-352v-298c0 -3.2998 2.7002 -6 6 -6h340c3.2998 0 6 2.7002 6 6z" />
+    <glyph glyph-name="comment" unicode="&#xf075;" 
+d="M256 416c141.4 0 256 -93.0996 256 -208s-114.6 -208 -256 -208c-32.7998 0 -64 5.2002 -92.9004 14.2998c-29.0996 -20.5996 -77.5996 -46.2998 -139.1 -46.2998c-9.59961 0 -18.2998 5.7002 -22.0996 14.5c-3.80078 8.7998 -2 19 4.59961 26
+c0.5 0.400391 31.5 33.7998 46.4004 73.2002c-33 35.0996 -52.9004 78.7002 -52.9004 126.3c0 114.9 114.6 208 256 208zM256 48c114.7 0 208 71.7998 208 160s-93.2998 160 -208 160s-208 -71.7998 -208 -160c0 -42.2002 21.7002 -74.0996 39.7998 -93.4004
+l20.6006 -21.7998l-10.6006 -28.0996c-5.5 -14.5 -12.5996 -28.1006 -19.8994 -40.2002c23.5996 7.59961 43.1992 18.9004 57.5 29l19.5 13.7998l22.6992 -7.2002c25.3008 -8 51.7002 -12.0996 78.4004 -12.0996z" />
+    <glyph glyph-name="folder" unicode="&#xf07b;" 
+d="M464 320c26.5098 0 48 -21.4902 48 -48v-224c0 -26.5098 -21.4902 -48 -48 -48h-416c-26.5098 0 -48 21.4902 -48 48v288c0 26.5098 21.4902 48 48 48h146.74c8.49023 0 16.6299 -3.37012 22.6299 -9.37012l54.6299 -54.6299h192zM464 48v224h-198.62
+c-8.49023 0 -16.6299 3.37012 -22.6299 9.37012l-54.6299 54.6299h-140.12v-288h416z" />
+    <glyph glyph-name="folder-open" unicode="&#xf07c;" horiz-adv-x="576" 
+d="M527.9 224c37.6992 0 60.6992 -41.5 40.6992 -73.4004l-79.8994 -128c-8.7998 -14.0996 -24.2002 -22.5996 -40.7002 -22.5996h-400c-26.5 0 -48 21.5 -48 48v288c0 26.5 21.5 48 48 48h160l64 -64h160c26.5 0 48 -21.5 48 -48v-48h47.9004zM48 330v-233.4l62.9004 104.2
+c8.69922 14.4004 24.2998 23.2002 41.0996 23.2002h280v42c0 3.2998 -2.7002 6 -6 6h-173.9l-64 64h-134.1c-3.2998 0 -6 -2.7002 -6 -6zM448 48l80 128h-378.8l-77.2002 -128h376z" />
+    <glyph glyph-name="chart-bar" unicode="&#xf080;" 
+d="M396.8 96c-6.39941 0 -12.7998 6.40039 -12.7998 12.7998v230.4c0 6.39941 6.40039 12.7998 12.7998 12.7998h22.4004c6.39941 0 12.7998 -6.40039 12.7998 -12.7998v-230.4c0 -6.39941 -6.40039 -12.7998 -12.7998 -12.7998h-22.4004zM204.8 96
+c-6.39941 0 -12.7998 6.40039 -12.7998 12.7998v198.4c0 6.39941 6.40039 12.7998 12.7998 12.7998h22.4004c6.39941 0 12.7998 -6.40039 12.7998 -12.7998v-198.4c0 -6.39941 -6.40039 -12.7998 -12.7998 -12.7998h-22.4004zM300.8 96
+c-6.39941 0 -12.7998 6.40039 -12.7998 12.7998v134.4c0 6.39941 6.40039 12.7998 12.7998 12.7998h22.4004c6.39941 0 12.7998 -6.40039 12.7998 -12.7998v-134.4c0 -6.39941 -6.40039 -12.7998 -12.7998 -12.7998h-22.4004zM496 48c8.83984 0 16 -7.16016 16 -16v-16
+c0 -8.83984 -7.16016 -16 -16 -16h-464c-17.6699 0 -32 14.3301 -32 32v336c0 8.83984 7.16016 16 16 16h16c8.83984 0 16 -7.16016 16 -16v-320h448zM108.8 96c-6.39941 0 -12.7998 6.40039 -12.7998 12.7998v70.4004c0 6.39941 6.40039 12.7998 12.7998 12.7998h22.4004
+c6.39941 0 12.7998 -6.40039 12.7998 -12.7998v-70.4004c0 -6.39941 -6.40039 -12.7998 -12.7998 -12.7998h-22.4004z" />
+    <glyph glyph-name="comments" unicode="&#xf086;" horiz-adv-x="576" 
+d="M532 61.7998c15.2998 -30.7002 37.4004 -54.5 37.7998 -54.7998c6.2998 -6.7002 8 -16.5 4.40039 -25c-3.7002 -8.5 -12 -14 -21.2002 -14c-53.5996 0 -96.7002 20.2998 -125.2 38.7998c-19 -4.39941 -39 -6.7998 -59.7998 -6.7998
+c-86.2002 0 -159.9 40.4004 -191.3 97.7998c-9.7002 1.2002 -19.2002 2.7998 -28.4004 4.90039c-28.5 -18.6006 -71.7002 -38.7998 -125.2 -38.7998c-9.19922 0 -17.5996 5.5 -21.1992 14c-3.7002 8.5 -1.90039 18.2998 4.39941 25
+c0.400391 0.399414 22.4004 24.1992 37.7002 54.8994c-27.5 27.2002 -44 61.2002 -44 98.2002c0 88.4004 93.0996 160 208 160c86.2998 0 160.3 -40.5 191.8 -98.0996c99.7002 -11.8008 176.2 -77.9004 176.2 -157.9c0 -37.0996 -16.5 -71.0996 -44 -98.2002zM139.2 154.1
+l19.7998 -4.5c16 -3.69922 32.5 -5.59961 49 -5.59961c86.7002 0 160 51.2998 160 112s-73.2998 112 -160 112s-160 -51.2998 -160 -112c0 -28.7002 16.2002 -50.5996 29.7002 -64l24.7998 -24.5l-15.5 -31.0996c-2.59961 -5.10059 -5.2998 -10.1006 -8 -14.8008
+c14.5996 5.10059 29 12.3008 43.0996 21.4004zM498.3 96c13.5 13.4004 29.7002 35.2998 29.7002 64c0 49.2002 -48.2998 91.5 -112.7 106c0.299805 -3.2998 0.700195 -6.59961 0.700195 -10c0 -80.9004 -78 -147.5 -179.3 -158.3
+c29.0996 -29.6006 77.2998 -49.7002 131.3 -49.7002c16.5 0 33 1.90039 49 5.59961l19.9004 4.60059l17.0996 -11.1006c14.0996 -9.09961 28.5 -16.2998 43.0996 -21.3994c-2.69922 4.7002 -5.39941 9.7002 -8 14.7998l-15.5 31.0996z" />
+    <glyph glyph-name="star-half" unicode="&#xf089;" horiz-adv-x="576" 
+d="M288 62.7002v-54.2998l-130.7 -68.6006c-23.3994 -12.2998 -50.8994 7.60059 -46.3994 33.7002l25 145.5l-105.7 103c-19 18.5 -8.5 50.7998 17.7002 54.5996l146.1 21.2002l65.2998 132.4c5.90039 11.8994 17.2998 17.7998 28.7002 17.7998v-68.0996l-62.2002 -126
+l-139 -20.2002l100.601 -98l-23.7002 -138.4z" />
+    <glyph glyph-name="lemon" unicode="&#xf094;" 
+d="M484.112 420.111c28.1221 -28.123 35.9434 -68.0039 19.0215 -97.0547c-23.0576 -39.584 50.1436 -163.384 -82.3311 -295.86c-132.301 -132.298 -256.435 -59.3594 -295.857 -82.3291c-29.0459 -16.917 -68.9219 -9.11426 -97.0576 19.0205
+c-28.1221 28.1221 -35.9434 68.0029 -19.0215 97.0547c23.0566 39.5859 -50.1436 163.386 82.3301 295.86c132.308 132.309 256.407 59.3496 295.862 82.332c29.0498 16.9219 68.9307 9.09863 97.0537 -19.0234zM461.707 347.217
+c13.5166 23.2031 -27.7578 63.7314 -50.4883 50.4912c-66.6025 -38.7939 -165.646 45.5898 -286.081 -74.8457c-120.444 -120.445 -36.0449 -219.472 -74.8447 -286.08c-13.542 -23.2471 27.8145 -63.6953 50.4932 -50.4883
+c66.6006 38.7949 165.636 -45.5996 286.076 74.8428c120.444 120.445 36.0449 219.472 74.8447 286.08zM291.846 338.481c1.37012 -10.96 -6.40332 -20.957 -17.3643 -22.3271c-54.8467 -6.85547 -135.779 -87.7871 -142.636 -142.636
+c-1.37305 -10.9883 -11.3984 -18.7334 -22.3262 -17.3643c-10.9609 1.37012 -18.7344 11.3652 -17.3643 22.3262c9.16211 73.2852 104.167 168.215 177.364 177.364c10.9531 1.36816 20.9561 -6.40234 22.3262 -17.3633z" />
+    <glyph glyph-name="credit-card" unicode="&#xf09d;" horiz-adv-x="576" 
+d="M527.9 416c26.5996 0 48.0996 -21.5 48.0996 -48v-352c0 -26.5 -21.5 -48 -48.0996 -48h-479.801c-26.5996 0 -48.0996 21.5 -48.0996 48v352c0 26.5 21.5 48 48.0996 48h479.801zM54.0996 368c-3.2998 0 -6 -2.7002 -6 -6v-42h479.801v42c0 3.2998 -2.7002 6 -6 6
+h-467.801zM521.9 16c3.2998 0 6 2.7002 6 6v170h-479.801v-170c0 -3.2998 2.7002 -6 6 -6h467.801zM192 116v-40c0 -6.59961 -5.40039 -12 -12 -12h-72c-6.59961 0 -12 5.40039 -12 12v40c0 6.59961 5.40039 12 12 12h72c6.59961 0 12 -5.40039 12 -12zM384 116v-40
+c0 -6.59961 -5.40039 -12 -12 -12h-136c-6.59961 0 -12 5.40039 -12 12v40c0 6.59961 5.40039 12 12 12h136c6.59961 0 12 -5.40039 12 -12z" />
+    <glyph glyph-name="hdd" unicode="&#xf0a0;" horiz-adv-x="576" 
+d="M567.403 212.358c5.59668 -8.04688 8.59668 -17.6113 8.59668 -27.4121v-136.946c0 -26.5098 -21.4902 -48 -48 -48h-480c-26.5098 0 -48 21.4902 -48 48v136.946c0 8.30957 3.85156 20.5898 8.59668 27.4121l105.08 151.053
+c7.90625 11.3652 25.5596 20.5889 39.4033 20.5889h0.000976562h269.838h0.000976562c13.8438 0 31.4971 -9.22363 39.4033 -20.5889zM153.081 336l-77.9131 -112h425.664l-77.9131 112h-269.838zM528 48v128h-480v-128h480zM496 112c0 -17.6729 -14.3271 -32 -32 -32
+s-32 14.3271 -32 32s14.3271 32 32 32s32 -14.3271 32 -32zM400 112c0 -17.6729 -14.3271 -32 -32 -32s-32 14.3271 -32 32s14.3271 32 32 32s32 -14.3271 32 -32z" />
+    <glyph glyph-name="hand-point-right" unicode="&#xf0a4;" 
+d="M428.8 310.4c45.0996 0 83.2002 -38.1016 83.2002 -83.2002c0 -45.6162 -37.7646 -83.2002 -83.2002 -83.2002h-35.6475c-1.41602 -6.36719 -4.96875 -16.252 -7.92969 -22.0645c2.50586 -22.0059 -3.50293 -44.9775 -15.9844 -62.791
+c-1.14062 -52.4863 -37.3984 -91.1445 -99.9404 -91.1445h-21.2988c-60.0635 0 -98.5117 40 -127.2 40h-2.67871c-5.74707 -4.95215 -13.5361 -8 -22.1201 -8h-64c-17.6729 0 -32 12.8936 -32 28.7998v230.4c0 15.9062 14.3271 28.7998 32 28.7998h64.001
+c8.58398 0 16.373 -3.04785 22.1201 -8h2.67871c6.96387 0 14.8623 6.19336 30.1816 23.6689l0.128906 0.148438l0.130859 0.145508c8.85645 9.93652 18.1162 20.8398 25.8506 33.2529c18.7051 30.2471 30.3936 78.7842 75.707 78.7842c56.9277 0 92 -35.2861 92 -83.2002
+v-0.0839844c0 -6.21777 -0.974609 -16.2148 -2.17578 -22.3154h86.1768zM428.8 192c18.9756 0 35.2002 16.2246 35.2002 35.2002c0 18.7002 -16.7754 35.2002 -35.2002 35.2002h-158.399c0 17.3242 26.3994 35.1992 26.3994 70.3994c0 26.4004 -20.625 35.2002 -44 35.2002
+c-8.79395 0 -20.4443 -32.7119 -34.9258 -56.0996c-9.07422 -14.5752 -19.5244 -27.2256 -30.7988 -39.875c-16.1094 -18.374 -33.8359 -36.6328 -59.0752 -39.5967v-176.753c42.79 -3.7627 74.5088 -39.6758 120 -39.6758h21.2988
+c40.5244 0 57.124 22.1973 50.6006 61.3252c14.6113 8.00098 24.1514 33.9785 12.9248 53.625c19.3652 18.2246 17.7871 46.3809 4.9502 61.0498h91.0254zM88 64c0 13.2549 -10.7451 24 -24 24s-24 -10.7451 -24 -24s10.7451 -24 24 -24s24 10.7451 24 24z" />
+    <glyph glyph-name="hand-point-left" unicode="&#xf0a5;" 
+d="M0 227.2c0 45.0986 38.1006 83.2002 83.2002 83.2002h86.1758c-1.3623 6.91016 -2.17578 14.374 -2.17578 22.3994c0 47.9141 35.0723 83.2002 92 83.2002c45.3135 0 57.002 -48.5371 75.7061 -78.7852c7.73438 -12.4121 16.9951 -23.3154 25.8506 -33.2529
+l0.130859 -0.145508l0.128906 -0.148438c15.3213 -17.4746 23.2197 -23.668 30.1836 -23.668h2.67871c5.74707 4.95215 13.5361 8 22.1201 8h64c17.6729 0 32 -12.8936 32 -28.7998v-230.4c0 -15.9062 -14.3271 -28.7998 -32 -28.7998h-64
+c-8.58398 0 -16.373 3.04785 -22.1201 8h-2.67871c-28.6885 0 -67.1367 -40 -127.2 -40h-21.2988c-62.542 0 -98.8008 38.6582 -99.9404 91.1445c-12.4814 17.8135 -18.4922 40.7852 -15.9844 62.791c-2.96094 5.8125 -6.51367 15.6973 -7.92969 22.0645h-35.6465
+c-45.4355 0 -83.2002 37.584 -83.2002 83.2002zM48 227.2c0 -18.9756 16.2246 -35.2002 35.2002 -35.2002h91.0244c-12.8369 -14.6689 -14.415 -42.8252 4.9502 -61.0498c-11.2256 -19.6465 -1.68652 -45.624 12.9248 -53.625
+c-6.52246 -39.1279 10.0771 -61.3252 50.6016 -61.3252h21.2988c45.4912 0 77.21 35.9131 120 39.6768v176.752c-25.2393 2.96289 -42.9658 21.2227 -59.0752 39.5967c-11.2744 12.6494 -21.7246 25.2998 -30.7988 39.875
+c-14.4814 23.3877 -26.1318 56.0996 -34.9258 56.0996c-23.375 0 -44 -8.7998 -44 -35.2002c0 -35.2002 26.3994 -53.0752 26.3994 -70.3994h-158.399c-18.4248 0 -35.2002 -16.5 -35.2002 -35.2002zM448 88c-13.2549 0 -24 -10.7451 -24 -24s10.7451 -24 24 -24
+s24 10.7451 24 24s-10.7451 24 -24 24z" />
+    <glyph glyph-name="hand-point-up" unicode="&#xf0a6;" horiz-adv-x="448" 
+d="M105.6 364.8c0 45.0996 38.1016 83.2002 83.2002 83.2002c45.6162 0 83.2002 -37.7646 83.2002 -83.2002v-35.6465c6.36719 -1.41602 16.252 -4.96875 22.0645 -7.92969c22.0059 2.50684 44.9775 -3.50293 62.791 -15.9844
+c52.4863 -1.14062 91.1445 -37.3984 91.1445 -99.9404v-21.2988c0 -60.0635 -40 -98.5117 -40 -127.2v-2.67871c4.95215 -5.74707 8 -13.5361 8 -22.1201v-64c0 -17.6729 -12.8936 -32 -28.7998 -32h-230.4c-15.9062 0 -28.7998 14.3271 -28.7998 32v64
+c0 8.58398 3.04785 16.373 8 22.1201v2.67871c0 6.96387 -6.19336 14.8623 -23.6689 30.1816l-0.148438 0.128906l-0.145508 0.130859c-9.93652 8.85645 -20.8398 18.1162 -33.2529 25.8506c-30.2471 18.7051 -78.7842 30.3936 -78.7842 75.707
+c0 56.9277 35.2861 92 83.2002 92h0.0839844c6.21777 0 16.2148 -0.974609 22.3154 -2.17578v86.1768zM224 364.8c0 18.9756 -16.2246 35.2002 -35.2002 35.2002c-18.7002 0 -35.2002 -16.7754 -35.2002 -35.2002v-158.399c-17.3242 0 -35.1992 26.3994 -70.3994 26.3994
+c-26.4004 0 -35.2002 -20.625 -35.2002 -44c0 -8.79395 32.7119 -20.4443 56.0996 -34.9258c14.5752 -9.07422 27.2256 -19.5244 39.875 -30.7988c18.374 -16.1094 36.6328 -33.8359 39.5967 -59.0752h176.753c3.7627 42.79 39.6758 74.5088 39.6758 120v21.2988
+c0 40.5244 -22.1973 57.124 -61.3252 50.6006c-8.00098 14.6113 -33.9785 24.1514 -53.625 12.9248c-18.2246 19.3652 -46.3809 17.7871 -61.0498 4.9502v91.0254zM352 24c-13.2549 0 -24 -10.7451 -24 -24s10.7451 -24 24 -24s24 10.7451 24 24s-10.7451 24 -24 24z" />
+    <glyph glyph-name="hand-point-down" unicode="&#xf0a7;" horiz-adv-x="448" 
+d="M188.8 -64c-45.0986 0 -83.2002 38.1006 -83.2002 83.2002v86.1758c-6.91016 -1.3623 -14.374 -2.17578 -22.3994 -2.17578c-47.9141 0 -83.2002 35.0723 -83.2002 92c0 45.3135 48.5371 57.002 78.7852 75.707c12.4121 7.73438 23.3154 16.9951 33.2529 25.8506
+l0.145508 0.130859l0.148438 0.128906c17.4746 15.3213 23.668 23.2197 23.668 30.1836v2.67871c-4.95215 5.74707 -8 13.5361 -8 22.1201v64c0 17.6729 12.8936 32 28.7998 32h230.4c15.9062 0 28.7998 -14.3271 28.7998 -32v-64.001
+c0 -8.58398 -3.04785 -16.373 -8 -22.1201v-2.67871c0 -28.6885 40 -67.1367 40 -127.2v-21.2988c0 -62.542 -38.6582 -98.8008 -91.1445 -99.9404c-17.8135 -12.4814 -40.7852 -18.4922 -62.791 -15.9844c-5.8125 -2.96094 -15.6973 -6.51367 -22.0645 -7.92969v-35.6465
+c0 -45.4355 -37.584 -83.2002 -83.2002 -83.2002zM188.8 -16c18.9756 0 35.2002 16.2246 35.2002 35.2002v91.0244c14.6689 -12.8369 42.8252 -14.415 61.0498 4.9502c19.6465 -11.2256 45.624 -1.68652 53.625 12.9248c39.1279 -6.52246 61.3252 10.0771 61.3252 50.6016
+v21.2988c0 45.4912 -35.9131 77.21 -39.6768 120h-176.752c-2.96289 -25.2393 -21.2227 -42.9658 -39.5967 -59.0752c-12.6494 -11.2744 -25.2998 -21.7246 -39.875 -30.7988c-23.3877 -14.4814 -56.0996 -26.1318 -56.0996 -34.9258c0 -23.375 8.7998 -44 35.2002 -44
+c35.2002 0 53.0752 26.3994 70.3994 26.3994v-158.399c0 -18.4248 16.5 -35.2002 35.2002 -35.2002zM328 384c0 -13.2549 10.7451 -24 24 -24s24 10.7451 24 24s-10.7451 24 -24 24s-24 -10.7451 -24 -24z" />
+    <glyph glyph-name="copy" unicode="&#xf0c5;" horiz-adv-x="448" 
+d="M433.941 382.059c7.75977 -7.75977 14.0586 -22.9658 14.0586 -33.9404v-268.118c0 -26.5098 -21.4902 -48 -48 -48h-80v-48c0 -26.5098 -21.4902 -48 -48 -48h-224c-26.5098 0 -48 21.4902 -48 48v320c0 26.5098 21.4902 48 48 48h80v48c0 26.5098 21.4902 48 48 48
+h172.118c10.9746 0 26.1807 -6.29883 33.9404 -14.0586zM266 -16c3.31152 0 6 2.68848 6 6v42h-96c-26.5098 0 -48 21.4902 -48 48v224h-74c-3.31152 0 -6 -2.68848 -6 -6v-308c0 -3.31152 2.68848 -6 6 -6h212zM394 80c3.31152 0 6 2.68848 6 6v202h-88
+c-13.2549 0 -24 10.7451 -24 24v88h-106c-3.31152 0 -6 -2.68848 -6 -6v-308c0 -3.31152 2.68848 -6 6 -6h212zM400 336v9.63184v0.000976562c0 1.37207 -0.787109 3.27246 -1.75684 4.24219l-48.3682 48.3682c-1.12598 1.125 -2.65234 1.75684 -4.24316 1.75684h-9.63184
+v-64h64z" />
+    <glyph glyph-name="save" unicode="&#xf0c7;" horiz-adv-x="448" 
+d="M433.941 318.059c7.75977 -7.75977 14.0586 -22.9658 14.0586 -33.9404v-268.118c0 -26.5098 -21.4902 -48 -48 -48h-352c-26.5098 0 -48 21.4902 -48 48v352c0 26.5098 21.4902 48 48 48h268.118c10.9746 0 26.1807 -6.29883 33.9404 -14.0586zM272 368h-128v-80h128v80
+zM394 16c3.31152 0 6 2.68848 6 6v259.632v0.000976562c0 1.37207 -0.787109 3.27246 -1.75684 4.24219l-78.2432 78.2432v-100.118c0 -13.2549 -10.7451 -24 -24 -24h-176c-13.2549 0 -24 10.7451 -24 24v104h-42c-3.31152 0 -6 -2.68848 -6 -6v-340
+c0 -3.31152 2.68848 -6 6 -6h340zM224 216c48.5234 0 88 -39.4766 88 -88s-39.4766 -88 -88 -88s-88 39.4766 -88 88s39.4766 88 88 88zM224 88c22.0557 0 40 17.9443 40 40s-17.9443 40 -40 40s-40 -17.9443 -40 -40s17.9443 -40 40 -40z" />
+    <glyph glyph-name="square" unicode="&#xf0c8;" horiz-adv-x="448" 
+d="M400 416c26.5 0 48 -21.5 48 -48v-352c0 -26.5 -21.5 -48 -48 -48h-352c-26.5 0 -48 21.5 -48 48v352c0 26.5 21.5 48 48 48h352zM394 16c3.2998 0 6 2.7002 6 6v340c0 3.2998 -2.7002 6 -6 6h-340c-3.2998 0 -6 -2.7002 -6 -6v-340c0 -3.2998 2.7002 -6 6 -6h340z" />
+    <glyph glyph-name="envelope" unicode="&#xf0e0;" 
+d="M464 384c26.5098 0 48 -21.4902 48 -48v-288c0 -26.5098 -21.4902 -48 -48 -48h-416c-26.5098 0 -48 21.4902 -48 48v288c0 26.5098 21.4902 48 48 48h416zM464 336h-416v-40.8047c22.4248 -18.2627 58.1797 -46.6602 134.587 -106.49
+c16.834 -13.2422 50.2051 -45.0762 73.4131 -44.7012c23.2119 -0.371094 56.5723 31.4541 73.4131 44.7012c76.4189 59.8389 112.165 88.2305 134.587 106.49v40.8047zM48 48h416v185.601c-22.915 -18.252 -55.4189 -43.8691 -104.947 -82.6523
+c-22.5439 -17.748 -60.3359 -55.1787 -103.053 -54.9473c-42.9277 -0.231445 -81.2051 37.75 -103.062 54.9551c-49.5293 38.7842 -82.0244 64.3945 -104.938 82.6455v-185.602z" />
+    <glyph glyph-name="lightbulb" unicode="&#xf0eb;" horiz-adv-x="352" 
+d="M176 368c8.83984 0 16 -7.16016 16 -16s-7.16016 -16 -16 -16c-35.2803 0 -64 -28.7002 -64 -64c0 -8.83984 -7.16016 -16 -16 -16s-16 7.16016 -16 16c0 52.9404 43.0596 96 96 96zM96.0596 -11.1699l-0.0400391 43.1797h159.961l-0.0507812 -43.1797
+c-0.00976562 -3.13965 -0.939453 -6.21973 -2.67969 -8.83984l-24.5098 -36.8398c-2.95996 -4.45996 -7.95996 -7.14062 -13.3203 -7.14062h-78.8496c-5.35059 0 -10.3506 2.68066 -13.3203 7.14062l-24.5098 36.8398c-1.75 2.62012 -2.68066 5.68945 -2.68066 8.83984z
+M176 448c97.2002 0 176 -78.7998 176 -176c0 -44.3701 -16.4502 -84.8496 -43.5498 -115.79c-16.6406 -18.9795 -42.7402 -58.79 -52.4199 -92.1602v-0.0498047h-48v0.0996094c0.00390625 4.04199 0.999023 10.4482 2.21973 14.3008
+c5.67969 17.9893 22.9902 64.8496 62.0996 109.46c20.4102 23.29 31.6504 53.1699 31.6504 84.1396c0 70.5801 -57.4199 128 -128 128c-68.2803 0 -128.15 -54.3604 -127.95 -128c0.0898438 -30.9902 11.0703 -60.71 31.6104 -84.1396
+c39.3496 -44.9004 56.5801 -91.8604 62.1699 -109.67c1.42969 -4.56055 2.13965 -9.30078 2.15039 -14.0703v-0.120117h-48v0.0595703c-9.68066 33.3604 -35.7803 73.1709 -52.4209 92.1602c-27.1094 30.9307 -43.5596 71.4102 -43.5596 115.78
+c0 93.0303 73.7197 176 176 176z" />
+    <glyph glyph-name="bell" unicode="&#xf0f3;" horiz-adv-x="448" 
+d="M439.39 85.71c6 -6.44043 8.66016 -14.1602 8.61035 -21.71c-0.0996094 -16.4004 -12.9805 -32 -32.0996 -32h-383.801c-19.1191 0 -31.9893 15.5996 -32.0996 32c-0.0498047 7.5498 2.61035 15.2598 8.61035 21.71c19.3193 20.7598 55.4697 51.9902 55.4697 154.29
+c0 77.7002 54.4795 139.9 127.939 155.16v20.8398c0 17.6699 14.3203 32 31.9805 32s31.9805 -14.3301 31.9805 -32v-20.8398c73.46 -15.2598 127.939 -77.46 127.939 -155.16c0 -102.3 36.1504 -133.53 55.4697 -154.29zM67.5303 80h312.939
+c-21.2197 27.96 -44.4199 74.3203 -44.5293 159.42c0 0.200195 0.0595703 0.379883 0.0595703 0.580078c0 61.8604 -50.1396 112 -112 112s-112 -50.1396 -112 -112c0 -0.200195 0.0595703 -0.379883 0.0595703 -0.580078
+c-0.109375 -85.0898 -23.3096 -131.45 -44.5293 -159.42zM224 -64c-35.3203 0 -63.9697 28.6504 -63.9697 64h127.939c0 -35.3496 -28.6494 -64 -63.9697 -64z" />
+    <glyph glyph-name="hospital" unicode="&#xf0f8;" horiz-adv-x="448" 
+d="M128 204v40c0 6.62695 5.37305 12 12 12h40c6.62695 0 12 -5.37305 12 -12v-40c0 -6.62695 -5.37305 -12 -12 -12h-40c-6.62695 0 -12 5.37305 -12 12zM268 192c-6.62695 0 -12 5.37305 -12 12v40c0 6.62695 5.37305 12 12 12h40c6.62695 0 12 -5.37305 12 -12v-40
+c0 -6.62695 -5.37305 -12 -12 -12h-40zM192 108c0 -6.62695 -5.37305 -12 -12 -12h-40c-6.62695 0 -12 5.37305 -12 12v40c0 6.62695 5.37305 12 12 12h40c6.62695 0 12 -5.37305 12 -12v-40zM268 96c-6.62695 0 -12 5.37305 -12 12v40c0 6.62695 5.37305 12 12 12h40
+c6.62695 0 12 -5.37305 12 -12v-40c0 -6.62695 -5.37305 -12 -12 -12h-40zM448 -28v-36h-448v36c0 6.62695 5.37305 12 12 12h19.5v378.965c0 11.6172 10.7451 21.0352 24 21.0352h88.5v40c0 13.2549 10.7451 24 24 24h112c13.2549 0 24 -10.7451 24 -24v-40h88.5
+c13.2549 0 24 -9.41797 24 -21.0352v-378.965h19.5c6.62695 0 12 -5.37305 12 -12zM79.5 -15h112.5v67c0 6.62695 5.37305 12 12 12h40c6.62695 0 12 -5.37305 12 -12v-67h112.5v351h-64.5v-24c0 -13.2549 -10.7451 -24 -24 -24h-112c-13.2549 0 -24 10.7451 -24 24v24
+h-64.5v-351zM266 384h-26v26c0 3.31152 -2.68848 6 -6 6h-20c-3.31152 0 -6 -2.68848 -6 -6v-26h-26c-3.31152 0 -6 -2.68848 -6 -6v-20c0 -3.31152 2.68848 -6 6 -6h26v-26c0 -3.31152 2.68848 -6 6 -6h20c3.31152 0 6 2.68848 6 6v26h26c3.31152 0 6 2.68848 6 6v20
+c0 3.31152 -2.68848 6 -6 6z" />
+    <glyph glyph-name="plus-square" unicode="&#xf0fe;" horiz-adv-x="448" 
+d="M352 208v-32c0 -6.59961 -5.40039 -12 -12 -12h-88v-88c0 -6.59961 -5.40039 -12 -12 -12h-32c-6.59961 0 -12 5.40039 -12 12v88h-88c-6.59961 0 -12 5.40039 -12 12v32c0 6.59961 5.40039 12 12 12h88v88c0 6.59961 5.40039 12 12 12h32c6.59961 0 12 -5.40039 12 -12
+v-88h88c6.59961 0 12 -5.40039 12 -12zM448 368v-352c0 -26.5 -21.5 -48 -48 -48h-352c-26.5 0 -48 21.5 -48 48v352c0 26.5 21.5 48 48 48h352c26.5 0 48 -21.5 48 -48zM400 22v340c0 3.2998 -2.7002 6 -6 6h-340c-3.2998 0 -6 -2.7002 -6 -6v-340
+c0 -3.2998 2.7002 -6 6 -6h340c3.2998 0 6 2.7002 6 6z" />
+    <glyph glyph-name="circle" unicode="&#xf111;" 
+d="M256 440c137 0 248 -111 248 -248s-111 -248 -248 -248s-248 111 -248 248s111 248 248 248zM256 -8c110.5 0 200 89.5 200 200s-89.5 200 -200 200s-200 -89.5 -200 -200s89.5 -200 200 -200z" />
+    <glyph glyph-name="smile" unicode="&#xf118;" horiz-adv-x="496" 
+d="M248 440c137 0 248 -111 248 -248s-111 -248 -248 -248s-248 111 -248 248s111 248 248 248zM248 -8c110.3 0 200 89.7002 200 200s-89.7002 200 -200 200s-200 -89.7002 -200 -200s89.7002 -200 200 -200zM168 208c-17.7002 0 -32 14.2998 -32 32s14.2998 32 32 32
+s32 -14.2998 32 -32s-14.2998 -32 -32 -32zM328 208c-17.7002 0 -32 14.2998 -32 32s14.2998 32 32 32s32 -14.2998 32 -32s-14.2998 -32 -32 -32zM332 135.4c8.5 10.1992 23.7002 11.5 33.7998 3.09961c10.2002 -8.5 11.6006 -23.5996 3.10059 -33.7998
+c-30 -36 -74.1006 -56.6006 -120.9 -56.6006s-90.9004 20.6006 -120.9 56.6006c-8.39941 10.2002 -7.09961 25.2998 3.10059 33.7998c10.0996 8.40039 25.2998 7.09961 33.7998 -3.09961c20.7998 -25.1006 51.5 -39.4004 84 -39.4004s63.2002 14.4004 84 39.4004z" />
+    <glyph glyph-name="frown" unicode="&#xf119;" horiz-adv-x="496" 
+d="M248 440c137 0 248 -111 248 -248s-111 -248 -248 -248s-248 111 -248 248s111 248 248 248zM248 -8c110.3 0 200 89.7002 200 200s-89.7002 200 -200 200s-200 -89.7002 -200 -200s89.7002 -200 200 -200zM168 208c-17.7002 0 -32 14.2998 -32 32s14.2998 32 32 32
+s32 -14.2998 32 -32s-14.2998 -32 -32 -32zM328 272c17.7002 0 32 -14.2998 32 -32s-14.2998 -32 -32 -32s-32 14.2998 -32 32s14.2998 32 32 32zM248 144c40.2002 0 78 -17.7002 103.8 -48.5996c8.40039 -10.2002 7.10059 -25.3008 -3.09961 -33.8008
+c-10.7002 -8.7998 -25.7002 -6.59961 -33.7998 3.10059c-16.6006 20 -41 31.3994 -66.9004 31.3994s-50.2998 -11.5 -66.9004 -31.3994c-8.5 -10.2002 -23.5996 -11.5 -33.7998 -3.10059c-10.2002 8.5 -11.5996 23.6006 -3.09961 33.8008
+c25.7998 30.8994 63.5996 48.5996 103.8 48.5996z" />
+    <glyph glyph-name="meh" unicode="&#xf11a;" horiz-adv-x="496" 
+d="M248 440c137 0 248 -111 248 -248s-111 -248 -248 -248s-248 111 -248 248s111 248 248 248zM248 -8c110.3 0 200 89.7002 200 200s-89.7002 200 -200 200s-200 -89.7002 -200 -200s89.7002 -200 200 -200zM168 208c-17.7002 0 -32 14.2998 -32 32s14.2998 32 32 32
+s32 -14.2998 32 -32s-14.2998 -32 -32 -32zM328 272c17.7002 0 32 -14.2998 32 -32s-14.2998 -32 -32 -32s-32 14.2998 -32 32s14.2998 32 32 32zM336 128c13.2002 0 24 -10.7998 24 -24s-10.7998 -24 -24 -24h-176c-13.2002 0 -24 10.7998 -24 24s10.7998 24 24 24h176z
+" />
+    <glyph glyph-name="keyboard" unicode="&#xf11c;" horiz-adv-x="576" 
+d="M528 384c26.5098 0 48 -21.4902 48 -48v-288c0 -26.5098 -21.4902 -48 -48 -48h-480c-26.5098 0 -48 21.4902 -48 48v288c0 26.5098 21.4902 48 48 48h480zM536 48v288c0 4.41113 -3.58887 8 -8 8h-480c-4.41113 0 -8 -3.58887 -8 -8v-288c0 -4.41113 3.58887 -8 8 -8
+h480c4.41113 0 8 3.58887 8 8zM170 178c0 -6.62695 -5.37305 -12 -12 -12h-28c-6.62695 0 -12 5.37305 -12 12v28c0 6.62695 5.37305 12 12 12h28c6.62695 0 12 -5.37305 12 -12v-28zM266 178c0 -6.62695 -5.37305 -12 -12 -12h-28c-6.62695 0 -12 5.37305 -12 12v28
+c0 6.62695 5.37305 12 12 12h28c6.62695 0 12 -5.37305 12 -12v-28zM362 178c0 -6.62695 -5.37305 -12 -12 -12h-28c-6.62695 0 -12 5.37305 -12 12v28c0 6.62695 5.37305 12 12 12h28c6.62695 0 12 -5.37305 12 -12v-28zM458 178c0 -6.62695 -5.37305 -12 -12 -12h-28
+c-6.62695 0 -12 5.37305 -12 12v28c0 6.62695 5.37305 12 12 12h28c6.62695 0 12 -5.37305 12 -12v-28zM122 96c0 -6.62695 -5.37305 -12 -12 -12h-28c-6.62695 0 -12 5.37305 -12 12v28c0 6.62695 5.37305 12 12 12h28c6.62695 0 12 -5.37305 12 -12v-28zM506 96
+c0 -6.62695 -5.37305 -12 -12 -12h-28c-6.62695 0 -12 5.37305 -12 12v28c0 6.62695 5.37305 12 12 12h28c6.62695 0 12 -5.37305 12 -12v-28zM122 260c0 -6.62695 -5.37305 -12 -12 -12h-28c-6.62695 0 -12 5.37305 -12 12v28c0 6.62695 5.37305 12 12 12h28
+c6.62695 0 12 -5.37305 12 -12v-28zM218 260c0 -6.62695 -5.37305 -12 -12 -12h-28c-6.62695 0 -12 5.37305 -12 12v28c0 6.62695 5.37305 12 12 12h28c6.62695 0 12 -5.37305 12 -12v-28zM314 260c0 -6.62695 -5.37305 -12 -12 -12h-28c-6.62695 0 -12 5.37305 -12 12v28
+c0 6.62695 5.37305 12 12 12h28c6.62695 0 12 -5.37305 12 -12v-28zM410 260c0 -6.62695 -5.37305 -12 -12 -12h-28c-6.62695 0 -12 5.37305 -12 12v28c0 6.62695 5.37305 12 12 12h28c6.62695 0 12 -5.37305 12 -12v-28zM506 260c0 -6.62695 -5.37305 -12 -12 -12h-28
+c-6.62695 0 -12 5.37305 -12 12v28c0 6.62695 5.37305 12 12 12h28c6.62695 0 12 -5.37305 12 -12v-28zM408 102c0 -6.62695 -5.37305 -12 -12 -12h-216c-6.62695 0 -12 5.37305 -12 12v16c0 6.62695 5.37305 12 12 12h216c6.62695 0 12 -5.37305 12 -12v-16z" />
+    <glyph glyph-name="calendar" unicode="&#xf133;" horiz-adv-x="448" 
+d="M400 384c26.5 0 48 -21.5 48 -48v-352c0 -26.5 -21.5 -48 -48 -48h-352c-26.5 0 -48 21.5 -48 48v352c0 26.5 21.5 48 48 48h48v52c0 6.59961 5.40039 12 12 12h40c6.59961 0 12 -5.40039 12 -12v-52h128v52c0 6.59961 5.40039 12 12 12h40c6.59961 0 12 -5.40039 12 -12
+v-52h48zM394 -16c3.2998 0 6 2.7002 6 6v298h-352v-298c0 -3.2998 2.7002 -6 6 -6h340z" />
+    <glyph glyph-name="play-circle" unicode="&#xf144;" 
+d="M371.7 210c16.3994 -9.2002 16.3994 -32.9004 0 -42l-176 -101c-15.9004 -8.7998 -35.7002 2.59961 -35.7002 21v208c0 18.5 19.9004 29.7998 35.7002 21zM504 192c0 -137 -111 -248 -248 -248s-248 111 -248 248s111 248 248 248s248 -111 248 -248zM56 192
+c0 -110.5 89.5 -200 200 -200s200 89.5 200 200s-89.5 200 -200 200s-200 -89.5 -200 -200z" />
+    <glyph glyph-name="minus-square" unicode="&#xf146;" horiz-adv-x="448" 
+d="M108 164c-6.59961 0 -12 5.40039 -12 12v32c0 6.59961 5.40039 12 12 12h232c6.59961 0 12 -5.40039 12 -12v-32c0 -6.59961 -5.40039 -12 -12 -12h-232zM448 368v-352c0 -26.5 -21.5 -48 -48 -48h-352c-26.5 0 -48 21.5 -48 48v352c0 26.5 21.5 48 48 48h352
+c26.5 0 48 -21.5 48 -48zM400 22v340c0 3.2998 -2.7002 6 -6 6h-340c-3.2998 0 -6 -2.7002 -6 -6v-340c0 -3.2998 2.7002 -6 6 -6h340c3.2998 0 6 2.7002 6 6z" />
+    <glyph glyph-name="check-square" unicode="&#xf14a;" horiz-adv-x="448" 
+d="M400 416c26.5098 0 48 -21.4902 48 -48v-352c0 -26.5098 -21.4902 -48 -48 -48h-352c-26.5098 0 -48 21.4902 -48 48v352c0 26.5098 21.4902 48 48 48h352zM400 16v352h-352v-352h352zM364.136 257.724l-172.589 -171.204
+c-4.70508 -4.66699 -12.3027 -4.63672 -16.9697 0.0683594l-90.7812 91.5156c-4.66699 4.70508 -4.63672 12.3037 0.0693359 16.9717l22.7188 22.5361c4.70508 4.66699 12.3027 4.63672 16.9697 -0.0693359l59.792 -60.2773l141.353 140.217
+c4.70508 4.66699 12.3027 4.63672 16.9697 -0.0683594l22.5361 -22.7178c4.66699 -4.70605 4.63672 -12.3047 -0.0683594 -16.9717z" />
+    <glyph glyph-name="share-square" unicode="&#xf14d;" horiz-adv-x="576" 
+d="M561.938 289.94c18.75 -18.7402 18.75 -49.1406 0 -67.8809l-143.998 -144c-29.9727 -29.9727 -81.9404 -9.05273 -81.9404 33.9404v53.7998c-101.266 -7.83691 -99.625 -31.6406 -84.1104 -78.7598c14.2285 -43.0889 -33.4736 -79.248 -71.0195 -55.7402
+c-51.6924 32.3057 -84.8701 83.0635 -84.8701 144.76c0 39.3408 12.2197 72.7402 36.3301 99.3008c19.8398 21.8398 47.7402 38.4697 82.9102 49.4199c36.7295 11.4395 78.3096 16.1094 120.76 17.9893v57.1982c0 42.9355 51.9258 63.9541 81.9404 33.9404zM384 112l144 144
+l-144 144v-104.09c-110.86 -0.90332 -240 -10.5166 -240 -119.851c0 -52.1396 32.79 -85.6094 62.3096 -104.06c-39.8174 120.65 48.999 141.918 177.69 143.84v-103.84zM408.74 27.5068c6.14844 1.75684 15.5449 5.92383 20.9736 9.30273
+c7.97656 4.95215 18.2861 -0.825195 18.2861 -10.2139v-42.5957c0 -26.5098 -21.4902 -48 -48 -48h-352c-26.5098 0 -48 21.4902 -48 48v352c0 26.5098 21.4902 48 48 48h132c6.62695 0 12 -5.37305 12 -12v-4.48633c0 -4.91699 -2.9873 -9.36914 -7.56934 -11.1514
+c-13.7021 -5.33105 -26.3955 -11.5371 -38.0498 -18.585c-1.59668 -0.974609 -4.41016 -1.77051 -6.28027 -1.77734h-86.1006c-3.31152 0 -6 -2.68848 -6 -6v-340c0 -3.31152 2.68848 -6 6 -6h340c3.31152 0 6 2.68848 6 6v25.9658c0 5.37012 3.5791 10.0596 8.74023 11.541
+z" />
+    <glyph glyph-name="compass" unicode="&#xf14e;" horiz-adv-x="496" 
+d="M347.94 318.14c16.6592 7.61035 33.8096 -9.54004 26.1992 -26.1992l-65.9697 -144.341c-2.73047 -5.97363 -9.7959 -13.0391 -15.7695 -15.7695l-144.341 -65.9697c-16.6592 -7.61035 -33.8096 9.5498 -26.1992 26.1992l65.9697 144.341
+c2.73047 5.97363 9.7959 13.0391 15.7695 15.7695zM270.58 169.42c12.4697 12.4697 12.4697 32.6904 0 45.1602s-32.6904 12.4697 -45.1602 0s-12.4697 -32.6904 0 -45.1602s32.6904 -12.4697 45.1602 0zM248 440c136.97 0 248 -111.03 248 -248s-111.03 -248 -248 -248
+s-248 111.03 -248 248s111.03 248 248 248zM248 -8c110.28 0 200 89.7197 200 200s-89.7197 200 -200 200s-200 -89.7197 -200 -200s89.7197 -200 200 -200z" />
+    <glyph glyph-name="caret-square-down" unicode="&#xf150;" horiz-adv-x="448" 
+d="M125.1 240h197.801c10.6992 0 16.0996 -13 8.5 -20.5l-98.9004 -98.2998c-4.7002 -4.7002 -12.2002 -4.7002 -16.9004 0l-98.8994 98.2998c-7.7002 7.5 -2.2998 20.5 8.39941 20.5zM448 368v-352c0 -26.5 -21.5 -48 -48 -48h-352c-26.5 0 -48 21.5 -48 48v352
+c0 26.5 21.5 48 48 48h352c26.5 0 48 -21.5 48 -48zM400 22v340c0 3.2998 -2.7002 6 -6 6h-340c-3.2998 0 -6 -2.7002 -6 -6v-340c0 -3.2998 2.7002 -6 6 -6h340c3.2998 0 6 2.7002 6 6z" />
+    <glyph glyph-name="caret-square-up" unicode="&#xf151;" horiz-adv-x="448" 
+d="M322.9 144h-197.801c-10.6992 0 -16.0996 13 -8.5 20.5l98.9004 98.2998c4.7002 4.7002 12.2002 4.7002 16.9004 0l98.8994 -98.2998c7.7002 -7.5 2.2998 -20.5 -8.39941 -20.5zM448 368v-352c0 -26.5 -21.5 -48 -48 -48h-352c-26.5 0 -48 21.5 -48 48v352
+c0 26.5 21.5 48 48 48h352c26.5 0 48 -21.5 48 -48zM400 22v340c0 3.2998 -2.7002 6 -6 6h-340c-3.2998 0 -6 -2.7002 -6 -6v-340c0 -3.2998 2.7002 -6 6 -6h340c3.2998 0 6 2.7002 6 6z" />
+    <glyph glyph-name="caret-square-right" unicode="&#xf152;" horiz-adv-x="448" 
+d="M176 93.0996v197.801c0 10.6992 13 16.0996 20.5 8.5l98.2998 -98.9004c4.7002 -4.7002 4.7002 -12.2002 0 -16.9004l-98.2998 -98.8994c-7.5 -7.7002 -20.5 -2.2998 -20.5 8.39941zM448 368v-352c0 -26.5 -21.5 -48 -48 -48h-352c-26.5 0 -48 21.5 -48 48v352
+c0 26.5 21.5 48 48 48h352c26.5 0 48 -21.5 48 -48zM400 22v340c0 3.2998 -2.7002 6 -6 6h-340c-3.2998 0 -6 -2.7002 -6 -6v-340c0 -3.2998 2.7002 -6 6 -6h340c3.2998 0 6 2.7002 6 6z" />
+    <glyph glyph-name="file" unicode="&#xf15b;" horiz-adv-x="384" 
+d="M369.9 350.1c9 -9 14.0996 -21.2998 14.0996 -34v-332.1c0 -26.5 -21.5 -48 -48 -48h-288c-26.5 0 -48 21.5 -48 48v416c0 26.5 21.5 48 48 48.0996h204.1c12.7002 0 24.9004 -5.09961 33.9004 -14.0996zM332.1 320l-76.0996 76.0996v-76.0996h76.0996zM48 -16h288v288
+h-104c-13.2998 0 -24 10.7002 -24 24v104h-160v-416z" />
+    <glyph glyph-name="file-alt" unicode="&#xf15c;" horiz-adv-x="384" 
+d="M288 200v-28c0 -6.59961 -5.40039 -12 -12 -12h-168c-6.59961 0 -12 5.40039 -12 12v28c0 6.59961 5.40039 12 12 12h168c6.59961 0 12 -5.40039 12 -12zM276 128c6.59961 0 12 -5.40039 12 -12v-28c0 -6.59961 -5.40039 -12 -12 -12h-168c-6.59961 0 -12 5.40039 -12 12
+v28c0 6.59961 5.40039 12 12 12h168zM384 316.1v-332.1c0 -26.5 -21.5 -48 -48 -48h-288c-26.5 0 -48 21.5 -48 48v416c0 26.5 21.5 48 48 48h204.1c12.7002 0 24.9004 -5.09961 33.9004 -14.0996l83.9004 -83.9004c9 -8.90039 14.0996 -21.2002 14.0996 -33.9004z
+M256 396.1v-76.0996h76.0996zM336 -16v288h-104c-13.2998 0 -24 10.7002 -24 24v104h-160v-416h288z" />
+    <glyph glyph-name="thumbs-up" unicode="&#xf164;" 
+d="M466.27 161.31c4.6748 -22.6465 0.864258 -44.5371 -8.98926 -62.9893c2.95898 -23.8682 -4.02148 -48.5654 -17.3398 -66.9902c-0.954102 -55.9072 -35.8232 -95.3301 -112.94 -95.3301c-7 0 -15 0.00976562 -22.2197 0.00976562
+c-102.742 0 -133.293 38.9395 -177.803 39.9404c-3.56934 -13.7764 -16.085 -23.9502 -30.9775 -23.9502h-64c-17.6729 0 -32 14.3271 -32 32v240c0 17.6729 14.3271 32 32 32h98.7598c19.1455 16.9531 46.0137 60.6533 68.7598 83.4004
+c13.667 13.667 10.1533 108.6 71.7607 108.6c57.5801 0 95.2695 -31.9355 95.2695 -104.73c0 -18.4092 -3.92969 -33.7295 -8.84961 -46.5391h36.4795c48.6025 0 85.8203 -41.5654 85.8203 -85.5801c0 -19.1504 -4.95996 -34.9902 -13.7305 -49.8408zM404.52 107.48
+c21.5811 20.3838 18.6992 51.0645 5.21094 65.6191c9.44922 0 22.3594 18.9102 22.2695 37.8105c-0.0898438 18.9102 -16.71 37.8203 -37.8203 37.8203h-103.989c0 37.8193 28.3594 55.3691 28.3594 94.5391c0 23.75 0 56.7305 -47.2695 56.7305
+c-18.9102 -18.9102 -9.45996 -66.1797 -37.8203 -94.54c-26.5596 -26.5703 -66.1797 -97.46 -94.54 -97.46h-10.9199v-186.17c53.6113 0 100.001 -37.8203 171.64 -37.8203h37.8203c35.5117 0 60.8203 17.1201 53.1201 65.9004
+c15.2002 8.16016 26.5 36.4395 13.9395 57.5703zM88 16c0 13.2549 -10.7451 24 -24 24s-24 -10.7451 -24 -24s10.7451 -24 24 -24s24 10.7451 24 24z" />
+    <glyph glyph-name="thumbs-down" unicode="&#xf165;" 
+d="M466.27 222.69c8.77051 -14.8506 13.7305 -30.6904 13.7305 -49.8408c0 -44.0146 -37.2178 -85.5801 -85.8203 -85.5801h-36.4795c4.91992 -12.8096 8.84961 -28.1299 8.84961 -46.5391c0 -72.7949 -37.6895 -104.73 -95.2695 -104.73
+c-61.6074 0 -58.0938 94.9326 -71.7607 108.6c-22.7461 22.7471 -49.6133 66.4473 -68.7598 83.4004h-7.05176c-5.5332 -9.56152 -15.8662 -16 -27.708 -16h-64c-17.6729 0 -32 14.3271 -32 32v240c0 17.6729 14.3271 32 32 32h64c8.11328 0 15.5146 -3.02539 21.1553 -8
+h10.8447c40.9971 0 73.1953 39.9902 176.78 39.9902c7.21973 0 15.2197 0.00976562 22.2197 0.00976562c77.1172 0 111.986 -39.4229 112.94 -95.3301c13.3184 -18.4248 20.2979 -43.1221 17.3398 -66.9902c9.85352 -18.4521 13.6641 -40.3428 8.98926 -62.9893zM64 152
+c13.2549 0 24 10.7451 24 24s-10.7451 24 -24 24s-24 -10.7451 -24 -24s10.7451 -24 24 -24zM394.18 135.27c21.1104 0 37.7305 18.9102 37.8203 37.8203c0.0898438 18.9004 -12.8203 37.8105 -22.2695 37.8105c13.4883 14.5547 16.3701 45.2354 -5.21094 65.6191
+c12.5605 21.1309 1.26074 49.4102 -13.9395 57.5703c7.7002 48.7803 -17.6084 65.9004 -53.1201 65.9004h-37.8203c-71.6387 0 -118.028 -37.8203 -171.64 -37.8203v-186.17h10.9199c28.3604 0 67.9805 -70.8896 94.54 -97.46
+c28.3604 -28.3604 18.9102 -75.6299 37.8203 -94.54c47.2695 0 47.2695 32.9805 47.2695 56.7305c0 39.1699 -28.3594 56.7197 -28.3594 94.5391h103.989z" />
+    <glyph glyph-name="sun" unicode="&#xf185;" 
+d="M494.2 226.1c11.2002 -7.59961 17.7998 -20.0996 17.8994 -33.6992c0 -13.4004 -6.69922 -26 -17.7998 -33.5l-59.7998 -40.5l13.7002 -71c2.5 -13.2002 -1.60059 -26.8008 -11.1006 -36.3008s-22.8994 -13.7998 -36.2998 -11.0996l-70.8994 13.7002l-40.4004 -59.9004
+c-7.5 -11.0996 -20.0996 -17.7998 -33.5 -17.7998s-26 6.7002 -33.5 17.9004l-40.4004 59.8994l-70.7998 -13.7002c-13.3994 -2.59961 -26.7998 1.60059 -36.2998 11.1006s-13.7002 23.0996 -11.0996 36.2998l13.6992 71l-59.7998 40.5
+c-11.0996 7.5 -17.7998 20 -17.7998 33.5s6.59961 26 17.7998 33.5996l59.7998 40.5l-13.6992 71c-2.60059 13.2002 1.59961 26.7002 11.0996 36.3008c9.5 9.59961 23 13.6992 36.2998 11.1992l70.7998 -13.6992l40.4004 59.8994c15.0996 22.2998 51.9004 22.2998 67 0
+l40.4004 -59.8994l70.8994 13.6992c13 2.60059 26.6006 -1.59961 36.2002 -11.0996c9.5 -9.59961 13.7002 -23.2002 11.0996 -36.4004l-13.6992 -71zM381.3 140.5l76.7998 52.0996l-76.7998 52l17.6006 91.1006l-91 -17.6006l-51.9004 76.9004l-51.7998 -76.7998
+l-91 17.5996l17.5996 -91.2002l-76.7998 -52l76.7998 -52l-17.5996 -91.1992l90.8994 17.5996l51.9004 -77l51.9004 76.9004l91 -17.6006zM256 296c57.2998 0 104 -46.7002 104 -104s-46.7002 -104 -104 -104s-104 46.7002 -104 104s46.7002 104 104 104zM256 136
+c30.9004 0 56 25.0996 56 56s-25.0996 56 -56 56s-56 -25.0996 -56 -56s25.0996 -56 56 -56z" />
+    <glyph glyph-name="moon" unicode="&#xf186;" 
+d="M279.135 -64c-141.424 0 -256 114.64 -256 256c0 141.425 114.641 256 256 256c13.0068 -0.00195312 33.9443 -1.91797 46.7354 -4.27734c44.0205 -8.13086 53.7666 -66.8691 15.0215 -88.9189c-41.374 -23.5439 -67.4336 -67.4121 -67.4336 -115.836
+c0 -83.5234 75.9238 -146.475 158.272 -130.792c43.6904 8.32129 74.5186 -42.5693 46.248 -77.4004c-47.8613 -58.9717 -120.088 -94.7754 -198.844 -94.7754zM279.135 400c-114.875 0 -208 -93.125 -208 -208s93.125 -208 208 -208
+c65.2314 0 123.439 30.0361 161.575 77.0244c-111.611 -21.2568 -215.252 64.0957 -215.252 177.943c0 67.5127 36.9326 126.392 91.6934 157.555c-12.3271 2.27637 -25.0312 3.47754 -38.0166 3.47754z" />
+    <glyph glyph-name="caret-square-left" unicode="&#xf191;" horiz-adv-x="448" 
+d="M272 290.9v-197.801c0 -10.6992 -13 -16.0996 -20.5 -8.5l-98.2998 98.9004c-4.7002 4.7002 -4.7002 12.2002 0 16.9004l98.2998 98.8994c7.5 7.7002 20.5 2.2998 20.5 -8.39941zM448 368v-352c0 -26.5 -21.5 -48 -48 -48h-352c-26.5 0 -48 21.5 -48 48v352
+c0 26.5 21.5 48 48 48h352c26.5 0 48 -21.5 48 -48zM400 22v340c0 3.2998 -2.7002 6 -6 6h-340c-3.2998 0 -6 -2.7002 -6 -6v-340c0 -3.2998 2.7002 -6 6 -6h340c3.2998 0 6 2.7002 6 6z" />
+    <glyph glyph-name="dot-circle" unicode="&#xf192;" 
+d="M256 392c-110.549 0 -200 -89.4678 -200 -200c0 -110.549 89.4678 -200 200 -200c110.549 0 200 89.4678 200 200c0 110.549 -89.4678 200 -200 200zM256 440c136.967 0 248 -111.033 248 -248s-111.033 -248 -248 -248s-248 111.033 -248 248s111.033 248 248 248z
+M256 272c44.1826 0 80 -35.8174 80 -80s-35.8174 -80 -80 -80s-80 35.8174 -80 80s35.8174 80 80 80z" />
+    <glyph glyph-name="building" unicode="&#xf1ad;" horiz-adv-x="448" 
+d="M128 300v40c0 6.59961 5.40039 12 12 12h40c6.59961 0 12 -5.40039 12 -12v-40c0 -6.59961 -5.40039 -12 -12 -12h-40c-6.59961 0 -12 5.40039 -12 12zM268 288c-6.59961 0 -12 5.40039 -12 12v40c0 6.59961 5.40039 12 12 12h40c6.59961 0 12 -5.40039 12 -12v-40
+c0 -6.59961 -5.40039 -12 -12 -12h-40zM140 192c-6.59961 0 -12 5.40039 -12 12v40c0 6.59961 5.40039 12 12 12h40c6.59961 0 12 -5.40039 12 -12v-40c0 -6.59961 -5.40039 -12 -12 -12h-40zM268 192c-6.59961 0 -12 5.40039 -12 12v40c0 6.59961 5.40039 12 12 12h40
+c6.59961 0 12 -5.40039 12 -12v-40c0 -6.59961 -5.40039 -12 -12 -12h-40zM192 108c0 -6.59961 -5.40039 -12 -12 -12h-40c-6.59961 0 -12 5.40039 -12 12v40c0 6.59961 5.40039 12 12 12h40c6.59961 0 12 -5.40039 12 -12v-40zM268 96c-6.59961 0 -12 5.40039 -12 12v40
+c0 6.59961 5.40039 12 12 12h40c6.59961 0 12 -5.40039 12 -12v-40c0 -6.59961 -5.40039 -12 -12 -12h-40zM448 -28v-36h-448v36c0 6.59961 5.40039 12 12 12h19.5v440c0 13.2998 10.7002 24 24 24h337c13.2998 0 24 -10.7002 24 -24v-440h19.5
+c6.59961 0 12 -5.40039 12 -12zM79.5 -15h112.5v67c0 6.59961 5.40039 12 12 12h40c6.59961 0 12 -5.40039 12 -12v-67h112.5v414l-288.5 1z" />
+    <glyph glyph-name="file-pdf" unicode="&#xf1c1;" horiz-adv-x="384" 
+d="M369.9 350.1c9 -9 14.0996 -21.2998 14.0996 -34v-332.1c0 -26.5 -21.5 -48 -48 -48h-288c-26.5 0 -48 21.5 -48 48v416c0 26.5 21.5 48 48 48.0996h204.1c12.7002 0 24.9004 -5.09961 33.9004 -14.0996zM332.1 320l-76.0996 76.0996v-76.0996h76.0996zM48 -16h288v288
+h-104c-13.2998 0 -24 10.7002 -24 24v104h-160v-416zM298.2 127.7c10.5 -10.5 8 -38.7002 -17.5 -38.7002c-14.7998 0 -36.9004 6.7998 -55.7998 17c-21.6006 -3.59961 -46 -12.7002 -68.4004 -20.0996c-50.0996 -86.4004 -79.4004 -47 -76.0996 -31.2002
+c4 20 31 35.8994 51 46.2002c10.5 18.3994 25.3994 50.5 35.3994 74.3994c-7.39941 28.6006 -11.3994 51 -7 67.1006c4.7998 17.6992 38.4004 20.2998 42.6006 -5.90039c4.69922 -15.4004 -1.5 -39.9004 -5.40039 -56c8.09961 -21.2998 19.5996 -35.7998 36.7998 -46.2998
+c17.4004 2.2002 52.2002 5.5 64.4004 -6.5zM100.1 49.9004c0 -0.700195 11.4004 4.69922 30.4004 35c-5.90039 -5.5 -25.2998 -21.3008 -30.4004 -35zM181.7 240.5c-2.5 0 -2.60059 -26.9004 1.7998 -40.7998c4.90039 8.7002 5.59961 40.7998 -1.7998 40.7998zM157.3 103.9
+c15.9004 6.09961 34 14.8994 54.7998 19.1992c-11.1992 8.30078 -21.7998 20.4004 -30.0996 35.5c-6.7002 -17.6992 -15 -37.7998 -24.7002 -54.6992zM288.9 108.9c3.59961 2.39941 -2.2002 10.3994 -37.3008 7.7998c32.3008 -13.7998 37.3008 -7.7998 37.3008 -7.7998z" />
+    <glyph glyph-name="file-word" unicode="&#xf1c2;" horiz-adv-x="384" 
+d="M369.9 350.1c9 -9 14.0996 -21.2998 14.0996 -34v-332.1c0 -26.5 -21.5 -48 -48 -48h-288c-26.5 0 -48 21.5 -48 48v416c0 26.5 21.5 48 48 48.0996h204.1c12.7002 0 24.9004 -5.09961 33.9004 -14.0996zM332.1 320l-76.0996 76.0996v-76.0996h76.0996zM48 -16h288v288
+h-104c-13.2998 0 -24 10.7002 -24 24v104h-160v-416zM268.1 192v0.200195h15.8008c7.7998 0 13.5 -7.2998 11.5996 -14.9004c-4.2998 -17 -13.7002 -54.0996 -34.5 -136c-1.2998 -5.39941 -6.09961 -9.09961 -11.5996 -9.09961h-24.7002
+c-5.5 0 -10.2998 3.7998 -11.6006 9.09961c-5.2998 20.9004 -17.7998 71 -17.8994 71.4004l-2.90039 17.2998c-0.5 -5.2998 -1.5 -11.0996 -3 -17.2998l-17.8994 -71.4004c-1.30078 -5.39941 -6.10059 -9.09961 -11.6006 -9.09961h-25.2002
+c-5.59961 0 -10.3994 3.7002 -11.6992 9.09961c-6.5 26.5 -25.2002 103.4 -33.2002 136c-1.7998 7.5 3.89941 14.7998 11.7002 14.7998h16.7998c5.7998 0 10.7002 -4.09961 11.7998 -9.69922c5 -25.7002 18.4004 -93.8008 19.0996 -99
+c0.300781 -1.7002 0.400391 -3.10059 0.5 -4.2002c0.800781 7.5 0.400391 4.7002 24.8008 103.7c1.39941 5.2998 6.19922 9.09961 11.6992 9.09961h13.3008c5.59961 0 10.3994 -3.7998 11.6992 -9.2002c23.9004 -99.7002 22.8008 -94.3994 23.6006 -99.5
+c0.299805 -1.7002 0.5 -3.09961 0.700195 -4.2998c0.599609 8.09961 0.399414 5.7998 21 103.5c1.09961 5.5 6 9.5 11.6992 9.5z" />
+    <glyph glyph-name="file-excel" unicode="&#xf1c3;" horiz-adv-x="384" 
+d="M369.9 350.1c9 -9 14.0996 -21.2998 14.0996 -34v-332.1c0 -26.5 -21.5 -48 -48 -48h-288c-26.5 0 -48 21.5 -48 48v416c0 26.5 21.5 48 48 48.0996h204.1c12.7002 0 24.9004 -5.09961 33.9004 -14.0996zM332.1 320l-76.0996 76.0996v-76.0996h76.0996zM48 -16h288v288
+h-104c-13.2998 0 -24 10.7002 -24 24v104h-160v-416zM260 224c9.2002 0 15 -10 10.2998 -18c-16 -27.5 -45.5996 -76.9004 -46.2998 -78l46.4004 -78c4.59961 -8 -1.10059 -18 -10.4004 -18h-28.7998c-4.40039 0 -8.5 2.40039 -10.6006 6.2998
+c-22.6992 41.7998 -13.6992 27.5 -28.5996 57.7002c-5.59961 -12.7002 -6.90039 -17.7002 -28.5996 -57.7002c-2.10059 -3.89941 -6.10059 -6.2998 -10.5 -6.2998h-28.9004c-9.2998 0 -15.0996 10 -10.4004 18l46.3008 78l-46.3008 78c-4.59961 8 1.10059 18 10.4004 18
+h28.9004c4.39941 0 8.5 -2.40039 10.5996 -6.2998c21.7002 -40.4004 14.7002 -28.6006 28.5996 -57.7002c6.40039 15.2998 10.6006 24.5996 28.6006 57.7002c2.09961 3.89941 6.09961 6.2998 10.5 6.2998h28.7998z" />
+    <glyph glyph-name="file-powerpoint" unicode="&#xf1c4;" horiz-adv-x="384" 
+d="M369.9 350.1c9 -9 14.0996 -21.2998 14.0996 -34v-332.1c0 -26.5 -21.5 -48 -48 -48h-288c-26.5 0 -48 21.5 -48 48v416c0 26.5 21.5 48 48 48.0996h204.1c12.7002 0 24.9004 -5.09961 33.9004 -14.0996zM332.1 320l-76.0996 76.0996v-76.0996h76.0996zM48 -16h288v288
+h-104c-13.2998 0 -24 10.7002 -24 24v104h-160v-416zM120 44v168c0 6.59961 5.40039 12 12 12h69.2002c36.7002 0 62.7998 -27 62.7998 -66.2998c0 -74.2998 -68.7002 -66.5 -95.5 -66.5v-47.2002c0 -6.59961 -5.40039 -12 -12 -12h-24.5c-6.59961 0 -12 5.40039 -12 12z
+M168.5 131.4h23c7.90039 0 13.9004 2.39941 18.0996 7.19922c8.5 9.80078 8.40039 28.5 0.100586 37.8008c-4.10059 4.59961 -9.90039 7 -17.4004 7h-23.8994v-52h0.0996094z" />
+    <glyph glyph-name="file-image" unicode="&#xf1c5;" horiz-adv-x="384" 
+d="M369.9 350.1c9 -9 14.0996 -21.2998 14.0996 -34v-332.1c0 -26.5 -21.5 -48 -48 -48h-288c-26.5 0 -48 21.5 -48 48v416c0 26.5 21.5 48 48 48.0996h204.1c12.7002 0 24.9004 -5.09961 33.9004 -14.0996zM332.1 320l-76.0996 76.0996v-76.0996h76.0996zM48 -16h288v288
+h-104c-13.2998 0 -24 10.7002 -24 24v104h-160v-416zM80 32v64l39.5 39.5c4.7002 4.7002 12.2998 4.7002 17 0l39.5 -39.5l87.5 87.5c4.7002 4.7002 12.2998 4.7002 17 0l23.5 -23.5v-128h-224zM128 272c26.5 0 48 -21.5 48 -48s-21.5 -48 -48 -48s-48 21.5 -48 48
+s21.5 48 48 48z" />
+    <glyph glyph-name="file-archive" unicode="&#xf1c6;" horiz-adv-x="384" 
+d="M128.3 288h32v-32h-32v32zM192.3 384v-32h-32v32h32zM128.3 352h32v-32h-32v32zM192.3 320v-32h-32v32h32zM369.9 350.1c9 -9 14.0996 -21.2998 14.0996 -34v-332.1c0 -26.5 -21.5 -48 -48 -48h-288c-26.5 0 -48 21.5 -48 48v416c0 26.5 21.5 48 48 48.0996h204.1
+c12.7002 0 24.9004 -5.09961 33.9004 -14.0996zM256 396.1v-76.0996h76.0996zM336 -16v288h-104c-13.2998 0 -24 10.7002 -24 24v104h-48.2998v-16h-32v16h-79.7002v-416h288zM194.2 182.3l17.2998 -87.7002c6.40039 -32.3994 -18.4004 -62.5996 -51.5 -62.5996
+c-33.2002 0 -58 30.4004 -51.4004 62.9004l19.7002 97.0996v32h32v-32h22.1006c5.7998 0 10.6992 -4.09961 11.7998 -9.7002zM160.3 57.9004c17.9004 0 32.4004 12.0996 32.4004 27c0 14.8994 -14.5 27 -32.4004 27c-17.8994 0 -32.3994 -12.1006 -32.3994 -27
+c0 -14.9004 14.5 -27 32.3994 -27zM192.3 256v-32h-32v32h32z" />
+    <glyph glyph-name="file-audio" unicode="&#xf1c7;" horiz-adv-x="384" 
+d="M369.941 350.059c7.75977 -7.75977 14.0586 -22.9658 14.0586 -33.9404v-332.118c0 -26.5098 -21.4902 -48 -48 -48h-288c-26.5098 0 -48 21.4902 -48 48v416c0 26.5098 21.4902 48 48 48h204.118c10.9746 0 26.1807 -6.29883 33.9404 -14.0586zM332.118 320
+l-76.1182 76.1182v-76.1182h76.1182zM48 -16h288v288h-104c-13.2549 0 -24 10.7451 -24 24v104h-160v-416zM192 60.0244c0 -10.6914 -12.9258 -16.0459 -20.4854 -8.48535l-35.5146 35.9746h-28c-6.62695 0 -12 5.37305 -12 12v56c0 6.62695 5.37305 12 12 12h28
+l35.5146 36.9473c7.56055 7.56055 20.4854 2.20605 20.4854 -8.48535v-135.951zM233.201 107.154c9.05078 9.29688 9.05957 24.1328 0.000976562 33.4385c-22.1494 22.752 12.2344 56.2461 34.3945 33.4814c27.1982 -27.9404 27.2119 -72.4443 0.000976562 -100.401
+c-21.793 -22.3857 -56.9463 10.3154 -34.3965 33.4814z" />
+    <glyph glyph-name="file-video" unicode="&#xf1c8;" horiz-adv-x="384" 
+d="M369.941 350.059c7.75977 -7.75977 14.0586 -22.9658 14.0586 -33.9404v-332.118c0 -26.5098 -21.4902 -48 -48 -48h-288c-26.5098 0 -48 21.4902 -48 48v416c0 26.5098 21.4902 48 48 48h204.118c10.9746 0 26.1807 -6.29883 33.9404 -14.0586zM332.118 320
+l-76.1182 76.1182v-76.1182h76.1182zM48 -16h288v288h-104c-13.2549 0 -24 10.7451 -24 24v104h-160v-416zM276.687 195.303c10.0049 10.0049 27.3135 2.99707 27.3135 -11.3135v-111.976c0 -14.2939 -17.2959 -21.332 -27.3135 -11.3135l-52.6865 52.6738v-37.374
+c0 -11.0459 -8.9541 -20 -20 -20h-104c-11.0459 0 -20 8.9541 -20 20v104c0 11.0459 8.9541 20 20 20h104c11.0459 0 20 -8.9541 20 -20v-37.374z" />
+    <glyph glyph-name="file-code" unicode="&#xf1c9;" horiz-adv-x="384" 
+d="M149.9 98.9004c3.5 -3.30078 3.69922 -8.90039 0.399414 -12.4004l-17.3994 -18.5996c-1.60059 -1.80078 -4 -2.80078 -6.40039 -2.80078c-2.2002 0 -4.40039 0.900391 -6 2.40039l-57.7002 54.0996c-3.7002 3.40039 -3.7002 9.30078 0 12.8008l57.7002 54.0996
+c3.40039 3.2998 9 3.2002 12.4004 -0.400391l17.3994 -18.5996l0.200195 -0.200195c3.2002 -3.59961 2.7998 -9.2002 -0.799805 -12.3994l-32.7998 -28.9004l32.7998 -28.9004zM369.9 350.1c9 -9 14.0996 -21.2998 14.0996 -34v-332.1c0 -26.5 -21.5 -48 -48 -48h-288
+c-26.5 0 -48 21.5 -48 48v416c0 26.5 21.5 48 48 48.0996h204.1c12.7002 0 24.9004 -5.09961 33.9004 -14.0996zM256 396.1v-76.0996h76.0996zM336 -16v288h-104c-13.2998 0 -24 10.7002 -24 24v104h-160v-416h288zM209.6 234l24.4004 -7
+c4.7002 -1.2998 7.40039 -6.2002 6 -10.9004l-54.7002 -188.199c-1.2998 -4.60059 -6.2002 -7.40039 -10.8994 -6l-24.4004 7.09961c-4.7002 1.2998 -7.40039 6.2002 -6 10.9004l54.7002 188.1c1.39941 4.7002 6.2002 7.40039 10.8994 6zM234.1 157.1
+c-3.5 3.30078 -3.69922 8.90039 -0.399414 12.4004l17.3994 18.5996c3.30078 3.60059 8.90039 3.7002 12.4004 0.400391l57.7002 -54.0996c3.7002 -3.40039 3.7002 -9.30078 0 -12.8008l-57.7002 -54.0996c-3.5 -3.2998 -9.09961 -3.09961 -12.4004 0.400391
+l-17.3994 18.5996l-0.200195 0.200195c-3.2002 3.59961 -2.7998 9.2002 0.799805 12.3994l32.7998 28.9004l-32.7998 28.9004z" />
+    <glyph glyph-name="life-ring" unicode="&#xf1cd;" 
+d="M256 -56c-136.967 0 -248 111.033 -248 248s111.033 248 248 248s248 -111.033 248 -248s-111.033 -248 -248 -248zM152.602 20.7197c63.2178 -38.3184 143.579 -38.3184 206.797 0l-53.4111 53.4111c-31.8467 -13.5215 -68.168 -13.5059 -99.9746 0zM336 192
+c0 44.1123 -35.8877 80 -80 80s-80 -35.8877 -80 -80s35.8877 -80 80 -80s80 35.8877 80 80zM427.28 88.6016c38.3184 63.2178 38.3184 143.579 0 206.797l-53.4111 -53.4111c13.5215 -31.8467 13.5049 -68.168 0 -99.9746zM359.397 363.28
+c-63.2168 38.3184 -143.578 38.3184 -206.796 0l53.4111 -53.4111c31.8457 13.5215 68.167 13.5049 99.9736 0zM84.7197 295.398c-38.3184 -63.2178 -38.3184 -143.579 0 -206.797l53.4111 53.4111c-13.5215 31.8467 -13.5059 68.168 0 99.9746z" />
+    <glyph glyph-name="paper-plane" unicode="&#xf1d8;" 
+d="M440 441.5c34.5996 19.9004 77.5996 -8.7998 71.5 -48.9004l-59.4004 -387.199c-2.2998 -14.5 -11.0996 -27.3008 -23.8994 -34.5c-7.2998 -4.10059 -15.4004 -6.2002 -23.6006 -6.2002c-6.19922 0 -12.3994 1.2002 -18.2998 3.59961l-111.899 46.2002l-43.8008 -59.0996
+c-27.3994 -36.9004 -86.5996 -17.8008 -86.5996 28.5996v84.4004l-114.3 47.2998c-36.7998 15.0996 -40.1006 66 -5.7002 85.8994zM192 -16l36.5996 49.5l-36.5996 15.0996v-64.5996zM404.6 12.7002l59.4004 387.3l-416 -240l107.8 -44.5996l211.5 184.3
+c14.2002 12.2998 34.4004 -5.7002 23.7002 -21.2002l-140.2 -202.3z" />
+    <glyph glyph-name="futbol" unicode="&#xf1e3;" horiz-adv-x="496" 
+d="M483.8 268.6c42.2998 -130.199 -29 -270.1 -159.2 -312.399c-25.5 -8.2998 -51.2998 -12.2002 -76.6992 -12.2002c-104.5 0 -201.7 66.5996 -235.7 171.4c-42.2998 130.199 29 270.1 159.2 312.399c25.5 8.2998 51.2998 12.2002 76.6992 12.2002
+c104.5 0 201.7 -66.5996 235.7 -171.4zM409.3 74.9004c6.10059 8.39941 12.1006 16.8994 16.7998 26.1992c14.3008 28.1006 21.5 58.5 21.7002 89.2002l-38.8994 36.4004l-71.1006 -22.1006l-24.3994 -75.1992l43.6992 -60.9004zM409.3 310.3
+c-24.5 33.4004 -58.7002 58.4004 -97.8994 71.4004l-47.4004 -26.2002v-73.7998l64.2002 -46.5l70.7002 22zM184.9 381.6c-39.9004 -13.2998 -73.5 -38.5 -97.8008 -71.8994l10.1006 -52.5l70.5996 -22l64.2002 46.5v73.7998zM139 68.5l43.5 61.7002l-24.2998 74.2998
+l-71.1006 22.2002l-39 -36.4004c0.5 -55.7002 23.4004 -95.2002 37.8008 -115.3zM187.2 1.5c64.0996 -20.4004 115.5 -1.7998 121.7 0l22.3994 48.0996l-44.2998 61.7002h-78.5996l-43.6006 -61.7002z" />
+    <glyph glyph-name="newspaper" unicode="&#xf1ea;" horiz-adv-x="576" 
+d="M552 384c13.2549 0 24 -10.7451 24 -24v-336c0 -13.2549 -10.7451 -24 -24 -24h-496c-30.9277 0 -56 25.0723 -56 56v272c0 13.2549 10.7451 24 24 24h42.752c6.60547 18.623 24.3896 32 45.248 32h440zM48 56c0 -4.41113 3.58887 -8 8 -8s8 3.58887 8 8v248h-16v-248z
+M528 48v288h-416v-280c0 -2.7168 -0.204102 -5.38574 -0.578125 -8h416.578zM172 168c-6.62695 0 -12 5.37305 -12 12v96c0 6.62695 5.37305 12 12 12h136c6.62695 0 12 -5.37305 12 -12v-96c0 -6.62695 -5.37305 -12 -12 -12h-136zM200 248v-40h80v40h-80zM160 108v24
+c0 6.62695 5.37305 12 12 12h136c6.62695 0 12 -5.37305 12 -12v-24c0 -6.62695 -5.37305 -12 -12 -12h-136c-6.62695 0 -12 5.37305 -12 12zM352 108v24c0 6.62695 5.37305 12 12 12h104c6.62695 0 12 -5.37305 12 -12v-24c0 -6.62695 -5.37305 -12 -12 -12h-104
+c-6.62695 0 -12 5.37305 -12 12zM352 252v24c0 6.62695 5.37305 12 12 12h104c6.62695 0 12 -5.37305 12 -12v-24c0 -6.62695 -5.37305 -12 -12 -12h-104c-6.62695 0 -12 5.37305 -12 12zM352 180v24c0 6.62695 5.37305 12 12 12h104c6.62695 0 12 -5.37305 12 -12v-24
+c0 -6.62695 -5.37305 -12 -12 -12h-104c-6.62695 0 -12 5.37305 -12 12z" />
+    <glyph glyph-name="bell-slash" unicode="&#xf1f6;" horiz-adv-x="640" 
+d="M633.99 -23.0195c6.91016 -5.52051 8.01953 -15.5908 2.5 -22.4902l-10 -12.4902c-5.53027 -6.88965 -15.5898 -8.00977 -22.4902 -2.49023l-598 467.51c-6.90039 5.52051 -8.01953 15.5908 -2.49023 22.4902l10 12.4902
+c5.52051 6.90039 15.5898 8.00977 22.4902 2.49023zM163.53 80h182.84l61.3994 -48h-279.659c-19.1201 0 -31.9902 15.5996 -32.1006 32c-0.0498047 7.5498 2.61035 15.2598 8.61035 21.71c18.3701 19.7402 51.5703 49.6904 54.8398 140.42l45.4697 -35.5498
+c-6.91992 -54.7803 -24.6895 -88.5498 -41.3994 -110.58zM320 352c-23.3496 0 -45 -7.17969 -62.9404 -19.4004l-38.1699 29.8408c19.6807 15.7793 43.1104 27.3096 69.1299 32.7197v20.8398c0 17.6699 14.3203 32 31.9805 32s31.9805 -14.3301 31.9805 -32v-20.8398
+c73.46 -15.2598 127.939 -77.46 127.939 -155.16c0 -41.3604 6.03027 -70.7197 14.3398 -92.8496l-59.5293 46.54c-1.63086 13.96 -2.77051 28.8896 -2.79004 45.7295c0 0.200195 0.0595703 0.379883 0.0595703 0.580078c0 61.8604 -50.1396 112 -112 112zM320 -64
+c-35.3203 0 -63.9697 28.6504 -63.9697 64h127.939c0 -35.3496 -28.6494 -64 -63.9697 -64z" />
+    <glyph glyph-name="copyright" unicode="&#xf1f9;" 
+d="M256 440c136.967 0 248 -111.033 248 -248s-111.033 -248 -248 -248s-248 111.033 -248 248s111.033 248 248 248zM256 -8c110.549 0 200 89.4678 200 200c0 110.549 -89.4678 200 -200 200c-110.549 0 -200 -89.4688 -200 -200c0 -110.549 89.4678 -200 200 -200z
+M363.351 93.0645c-9.61328 -9.71289 -45.5293 -41.3965 -104.064 -41.3965c-82.4297 0 -140.484 61.4248 -140.484 141.567c0 79.1514 60.2754 139.4 139.763 139.4c55.5303 0 88.7373 -26.6201 97.5928 -34.7783c2.13379 -1.96289 3.86523 -5.9082 3.86523 -8.80762
+c0 -1.95508 -0.864258 -4.87402 -1.92969 -6.51465l-18.1543 -28.1133c-3.8418 -5.9502 -11.9668 -7.28223 -17.499 -2.9209c-8.5957 6.77637 -31.8145 22.5381 -61.708 22.5381c-48.3037 0 -77.916 -35.3301 -77.916 -80.082c0 -41.5889 26.8877 -83.6924 78.2764 -83.6924
+c32.6572 0 56.8428 19.0391 65.7266 27.2256c5.26953 4.85645 13.5957 4.03906 17.8193 -1.73828l19.8652 -27.1699c1.28613 -1.74512 2.33008 -4.91992 2.33008 -7.08789c0 -2.72363 -1.56055 -6.5 -3.48242 -8.42969z" />
+    <glyph glyph-name="closed-captioning" unicode="&#xf20a;" 
+d="M464 384c26.5 0 48 -21.5 48 -48v-288c0 -26.5 -21.5 -48 -48 -48h-416c-26.5 0 -48 21.5 -48 48v288c0 26.5 21.5 48 48 48h416zM458 48c3.2998 0 6 2.7002 6 6v276c0 3.2998 -2.7002 6 -6 6h-404c-3.2998 0 -6 -2.7002 -6 -6v-276c0 -3.2998 2.7002 -6 6 -6h404z
+M246.9 133.7c1.69922 -2.40039 1.5 -5.60059 -0.5 -7.7002c-53.6006 -56.7998 -172.801 -32.0996 -172.801 67.9004c0 97.2998 121.7 119.5 172.5 70.0996c2.10059 -2 2.5 -3.2002 1 -5.7002l-17.5 -30.5c-1.89941 -3.09961 -6.19922 -4 -9.09961 -1.7002
+c-40.7998 32 -94.5996 14.9004 -94.5996 -31.1992c0 -48 51 -70.5 92.1992 -32.6006c2.80078 2.5 7.10059 2.10059 9.2002 -0.899414zM437.3 133.7c1.7002 -2.40039 1.5 -5.60059 -0.5 -7.7002c-53.5996 -56.9004 -172.8 -32.0996 -172.8 67.9004
+c0 97.2998 121.7 119.5 172.5 70.0996c2.09961 -2 2.5 -3.2002 1 -5.7002l-17.5 -30.5c-1.90039 -3.09961 -6.2002 -4 -9.09961 -1.7002c-40.8008 32 -94.6006 14.9004 -94.6006 -31.1992c0 -48 51 -70.5 92.2002 -32.6006c2.7998 2.5 7.09961 2.10059 9.2002 -0.899414z
+" />
+    <glyph glyph-name="object-group" unicode="&#xf247;" 
+d="M500 320h-12v-256h12c6.62695 0 12 -5.37305 12 -12v-72c0 -6.62695 -5.37305 -12 -12 -12h-72c-6.62695 0 -12 5.37305 -12 12v12h-320v-12c0 -6.62695 -5.37305 -12 -12 -12h-72c-6.62695 0 -12 5.37305 -12 12v72c0 6.62695 5.37305 12 12 12h12v256h-12
+c-6.62695 0 -12 5.37305 -12 12v72c0 6.62695 5.37305 12 12 12h72c6.62695 0 12 -5.37305 12 -12v-12h320v12c0 6.62695 5.37305 12 12 12h72c6.62695 0 12 -5.37305 12 -12v-72c0 -6.62695 -5.37305 -12 -12 -12zM448 384v-32h32v32h-32zM32 384v-32h32v32h-32zM64 0v32
+h-32v-32h32zM480 0v32h-32v-32h32zM440 64v256h-12c-6.62695 0 -12 5.37305 -12 12v12h-320v-12c0 -6.62695 -5.37305 -12 -12 -12h-12v-256h12c6.62695 0 12 -5.37305 12 -12v-12h320v12c0 6.62695 5.37305 12 12 12h12zM404 256c6.62695 0 12 -5.37207 12 -12v-168
+c0 -6.62793 -5.37305 -12 -12 -12h-200c-6.62695 0 -12 5.37207 -12 12v52h-84c-6.62695 0 -12 5.37207 -12 12v168c0 6.62793 5.37305 12 12 12h200c6.62695 0 12 -5.37207 12 -12v-52h84zM136 280v-112h144v112h-144zM376 104v112h-56v-76
+c0 -6.62793 -5.37305 -12 -12 -12h-76v-24h144z" />
+    <glyph glyph-name="object-ungroup" unicode="&#xf248;" horiz-adv-x="576" 
+d="M564 224h-12v-160h12c6.62695 0 12 -5.37305 12 -12v-72c0 -6.62695 -5.37305 -12 -12 -12h-72c-6.62695 0 -12 5.37305 -12 12v12h-224v-12c0 -6.62695 -5.37305 -12 -12 -12h-72c-6.62695 0 -12 5.37305 -12 12v72c0 6.62695 5.37305 12 12 12h12v24h-88v-12
+c0 -6.62695 -5.37305 -12 -12 -12h-72c-6.62695 0 -12 5.37305 -12 12v72c0 6.62695 5.37305 12 12 12h12v160h-12c-6.62695 0 -12 5.37305 -12 12v72c0 6.62695 5.37305 12 12 12h72c6.62695 0 12 -5.37305 12 -12v-12h224v12c0 6.62695 5.37305 12 12 12h72
+c6.62695 0 12 -5.37305 12 -12v-72c0 -6.62695 -5.37305 -12 -12 -12h-12v-24h88v12c0 6.62695 5.37305 12 12 12h72c6.62695 0 12 -5.37305 12 -12v-72c0 -6.62695 -5.37305 -12 -12 -12zM352 384v-32h32v32h-32zM352 128v-32h32v32h-32zM64 96v32h-32v-32h32zM64 352v32
+h-32v-32h32zM96 136h224v12c0 6.62695 5.37305 12 12 12h12v160h-12c-6.62695 0 -12 5.37305 -12 12v12h-224v-12c0 -6.62695 -5.37305 -12 -12 -12h-12v-160h12c6.62695 0 12 -5.37305 12 -12v-12zM224 0v32h-32v-32h32zM504 64v160h-12c-6.62695 0 -12 5.37305 -12 12v12
+h-88v-88h12c6.62695 0 12 -5.37305 12 -12v-72c0 -6.62695 -5.37305 -12 -12 -12h-72c-6.62695 0 -12 5.37305 -12 12v12h-88v-24h12c6.62695 0 12 -5.37305 12 -12v-12h224v12c0 6.62695 5.37305 12 12 12h12zM544 0v32h-32v-32h32zM544 256v32h-32v-32h32z" />
+    <glyph glyph-name="sticky-note" unicode="&#xf249;" horiz-adv-x="448" 
+d="M448 99.8936c0 -10.9746 -6.29883 -26.1797 -14.0586 -33.9404l-83.8828 -83.8818c-7.75977 -7.76074 -22.9658 -14.0596 -33.9404 -14.0596h-268.118c-26.5098 0 -48 21.4902 -48 48v351.988c0 26.5098 21.4902 48 48 48h352c26.5098 0 48 -21.4902 48 -48v-268.106z
+M320 19.8936l76.1182 76.1182h-76.1182v-76.1182zM400 368h-352v-351.988h224v104c0 13.2549 10.7451 24 24 24h104v223.988z" />
+    <glyph glyph-name="clone" unicode="&#xf24d;" 
+d="M464 448c26.5098 0 48 -21.4902 48 -48v-320c0 -26.5098 -21.4902 -48 -48 -48h-48v-48c0 -26.5098 -21.4902 -48 -48 -48h-320c-26.5098 0 -48 21.4902 -48 48v320c0 26.5098 21.4902 48 48 48h48v48c0 26.5098 21.4902 48 48 48h320zM362 -16c3.31152 0 6 2.68848 6 6
+v42h-224c-26.5098 0 -48 21.4902 -48 48v224h-42c-3.31152 0 -6 -2.68848 -6 -6v-308c0 -3.31152 2.68848 -6 6 -6h308zM458 80c3.31152 0 6 2.68848 6 6v308c0 3.31152 -2.68848 6 -6 6h-308c-3.31152 0 -6 -2.68848 -6 -6v-308c0 -3.31152 2.68848 -6 6 -6h308z" />
+    <glyph glyph-name="hourglass" unicode="&#xf254;" horiz-adv-x="384" 
+d="M368 400c0 -80.0996 -31.8984 -165.619 -97.1797 -208c64.9912 -42.1934 97.1797 -127.436 97.1797 -208h4c6.62695 0 12 -5.37305 12 -12v-24c0 -6.62695 -5.37305 -12 -12 -12h-360c-6.62695 0 -12 5.37305 -12 12v24c0 6.62695 5.37305 12 12 12h4
+c0 80.0996 31.8994 165.619 97.1797 208c-64.9912 42.1934 -97.1797 127.436 -97.1797 208h-4c-6.62695 0 -12 5.37305 -12 12v24c0 6.62695 5.37305 12 12 12h360c6.62695 0 12 -5.37305 12 -12v-24c0 -6.62695 -5.37305 -12 -12 -12h-4zM64 400
+c0 -101.621 57.3066 -184 128 -184s128 82.3799 128 184h-256zM320 -16c0 101.62 -57.3076 184 -128 184s-128 -82.3799 -128 -184h256z" />
+    <glyph glyph-name="hand-rock" unicode="&#xf255;" 
+d="M408.864 368.948c48.8213 20.751 103.136 -15.0723 103.136 -67.9111v-114.443c0 -15.3955 -3.08887 -30.3906 -9.18262 -44.5674l-42.835 -99.6562c-4.99707 -11.625 -3.98242 -18.8574 -3.98242 -42.3701c0 -17.6729 -14.3271 -32 -32 -32h-252
+c-17.6729 0 -32 14.3271 -32 32c0 27.3301 1.1416 29.2012 -3.11035 32.9033l-97.71 85.0811c-24.8994 21.6797 -39.1797 52.8926 -39.1797 85.6338v56.9531c0 47.4277 44.8457 82.0215 91.0459 71.1807c1.96094 55.751 63.5107 87.8262 110.671 60.8057
+c29.1895 31.0713 78.8604 31.4473 108.334 -0.0214844c32.7051 18.6846 76.4121 10.3096 98.8135 -23.5879zM464 186.594v114.445c0 34.29 -52 33.8232 -52 0.676758c0 -8.83594 -7.16309 -16 -16 -16h-7c-8.83691 0 -16 7.16406 -16 16v26.751
+c0 34.457 -52 33.707 -52 0.676758v-27.4287c0 -8.83594 -7.16309 -16 -16 -16h-7c-8.83691 0 -16 7.16406 -16 16v40.4658c0 34.3525 -52 33.8115 -52 0.677734v-41.1436c0 -8.83594 -7.16406 -16 -16 -16h-7c-8.83594 0 -16 7.16406 -16 16v26.751
+c0 34.4023 -52 33.7744 -52 0.676758v-116.571c0 -8.83203 -7.16797 -16 -16 -16c-3.30664 0 -8.01367 1.7627 -10.5068 3.93359l-7 6.09473c-3.03223 2.64062 -5.49316 8.04688 -5.49316 12.0674v0v41.2275c0 34.2148 -52 33.8857 -52 0.677734v-56.9531
+c0 -18.8555 8.27441 -36.874 22.7002 -49.4365l97.71 -85.0801c12.4502 -10.8398 19.5898 -26.4463 19.5898 -42.8164v-10.2861h220v7.07617c0 13.21 2.65332 26.0791 7.88281 38.25l42.835 99.6553c2.91602 6.75391 5.28223 18.207 5.28223 25.5635v0.0488281z" />
+    <glyph glyph-name="hand-paper" unicode="&#xf256;" horiz-adv-x="448" 
+d="M372.57 335.359c39.9062 5.63281 75.4297 -25.7393 75.4297 -66.3594v-131.564c-0.00195312 -12.7666 -2.33008 -33.2246 -5.19531 -45.666l-30.1836 -130.958c-3.34668 -14.5234 -16.2783 -24.8125 -31.1816 -24.8125h-222.897
+c-9.10352 0 -20.7793 6.01758 -26.0615 13.4316l-119.97 168.415c-21.2441 29.8203 -14.8047 71.3574 14.5498 93.1533c18.7754 13.9395 42.1309 16.2979 62.083 8.87109v126.13c0 44.0547 41.125 75.5439 82.4053 64.9834c23.8926 48.1963 92.3535 50.2471 117.982 0.74707
+c42.5186 11.1445 83.0391 -21.9346 83.0391 -65.5469v-10.8242zM399.997 137.437l-0.00195312 131.563c0 24.9492 -36.5703 25.5508 -36.5703 -0.691406v-76.3086c0 -8.83691 -7.16309 -16 -16 -16h-6.85645c-8.83691 0 -16 7.16309 -16 16v154.184
+c0 25.501 -36.5703 26.3633 -36.5703 0.691406v-154.875c0 -8.83691 -7.16309 -16 -16 -16h-6.85645c-8.83691 0 -16 7.16309 -16 16v188.309c0 25.501 -36.5703 26.3545 -36.5703 0.691406v-189c0 -8.83691 -7.16309 -16 -16 -16h-6.85645c-8.83691 0 -16 7.16309 -16 16
+v153.309c0 25.501 -36.5713 26.3359 -36.5713 0.691406v-206.494c0 -15.5703 -20.0352 -21.9092 -29.0303 -9.2832l-27.1279 38.0791c-14.3711 20.1709 -43.833 -2.33496 -29.3945 -22.6045l115.196 -161.697h201.92l27.3252 118.551
+c2.63086 11.417 3.96484 23.1553 3.96484 34.8857z" />
+    <glyph glyph-name="hand-scissors" unicode="&#xf257;" 
+d="M256 -32c-44.9561 0 -77.3428 43.2627 -64.0244 85.8535c-21.6484 13.71 -34.0156 38.7617 -30.3408 65.0068h-87.6348c-40.8037 0 -74 32.8105 -74 73.1406c0 40.3291 33.1963 73.1396 74 73.1396l94 -9.14062l-78.8496 18.6787
+c-38.3076 14.7422 -57.04 57.4707 -41.9424 95.1123c15.0303 37.4736 57.7549 55.7803 95.6416 41.2012l144.929 -55.7568c24.9551 30.5566 57.8086 43.9932 92.2178 24.7324l97.999 -54.8525c20.9746 -11.7393 34.0049 -33.8457 34.0049 -57.6904v-205.702
+c0 -30.7422 -21.4404 -57.5576 -51.7979 -64.5537l-118.999 -27.4268c-4.97168 -1.14648 -10.0889 -1.72949 -15.2031 -1.72949zM256 16.0127l70 -0.000976562c1.23633 0 3.21777 0.225586 4.42285 0.501953l119.001 27.4277
+c8.58203 1.97754 14.5762 9.29102 14.5762 17.7812v205.701c0 6.4873 -3.62109 12.542 -9.44922 15.8047l-98 54.8545c-8.13965 4.55566 -18.668 2.61914 -24.4873 -4.50781l-21.7646 -26.6475c-2.65039 -3.24512 -8.20215 -5.87891 -12.3926 -5.87891
+c-1.64062 0 -4.21484 0.477539 -5.74609 1.06738l-166.549 64.0908c-32.6543 12.5664 -50.7744 -34.5771 -19.2227 -46.7168l155.357 -59.7852c5.66016 -2.17773 10.2539 -8.86816 10.2539 -14.9326v0v-11.6328c0 -8.83691 -7.16309 -16 -16 -16h-182
+c-34.375 0 -34.4297 -50.2803 0 -50.2803h182c8.83691 0 16 -7.16309 16 -16v-6.85645c0 -8.83691 -7.16309 -16 -16 -16h-28c-25.1221 0 -25.1592 -36.5674 0 -36.5674h28c8.83691 0 16 -7.16211 16 -16v-6.85547c0 -8.83691 -7.16309 -16 -16 -16
+c-25.1201 0 -25.1602 -36.5674 0 -36.5674z" />
+    <glyph glyph-name="hand-lizard" unicode="&#xf258;" horiz-adv-x="576" 
+d="M556.686 157.458c12.6357 -19.4863 19.3145 -42.0615 19.3145 -65.2871v-124.171h-224v71.582l-99.751 38.7871c-2.7832 1.08203 -5.70996 1.63086 -8.69727 1.63086h-131.552c-30.8789 0 -56 25.1211 -56 56c0 48.5234 39.4766 88 88 88h113.709l18.333 48h-196.042
+c-44.1123 0 -80 35.8877 -80 80v8c0 30.8779 25.1211 56 56 56h293.917c24.5 0 47.084 -12.2725 60.4111 -32.8291zM528 16v76.1709v0.0478516c0 11.7461 -5.19141 29.2734 -11.5879 39.124l-146.358 225.715c-4.44336 6.85254 -11.9707 10.9424 -20.1367 10.9424h-293.917
+c-4.41113 0 -8 -3.58887 -8 -8v-8c0 -17.6445 14.3555 -32 32 -32h213.471c25.2021 0 42.626 -25.293 33.6299 -48.8457l-24.5518 -64.2812c-7.05371 -18.4658 -25.0732 -30.873 -44.8398 -30.873h-113.709c-22.0557 0 -40 -17.9443 -40 -40c0 -4.41113 3.58887 -8 8 -8
+h131.552h0.0517578c7.44141 0 19.1074 -2.19238 26.041 -4.89355l99.752 -38.7881c18.5898 -7.22852 30.6035 -24.7881 30.6035 -44.7363v-23.582h128z" />
+    <glyph glyph-name="hand-spock" unicode="&#xf259;" 
+d="M21.0957 66.21c-26.9688 25.3818 -28.2471 67.7461 -2.87109 94.707c24.1982 25.7139 64.2881 28.2373 91.4824 5.72168l-31.04 136.509c-9.38379 41.2803 21.4336 81.0127 64.0713 81.8438c1.74414 28.9062 22.2656 54.4912 51.8818 61.2949
+c36.001 8.27539 72.0176 -14.2266 80.3037 -50.2959l21.6748 -131.99l16.9014 105.25c9.02344 36.0947 45.4473 57.7021 81.25 48.75c27.3066 -6.82715 45.7061 -29.1357 49.8496 -53.9922c43.2285 0.212891 75.6436 -40.1133 65.5439 -82.5244l-31.7295 -133.41
+c-0.938477 -3.94141 -1.41406 -7.99414 -1.41406 -12.0449v-36.8389v-0.00683594c0 -9.29102 -2.14355 -24.0596 -4.78516 -32.9668l-31.8145 -107.312c-4.02734 -13.585 -16.5107 -22.9043 -30.6807 -22.9043h-237.6c-7.00586 0 -16.8311 3.89648 -21.9316 8.69824z
+M53.1641 128.021c-7.17969 -7.62891 -6.81543 -19.6777 0.813477 -26.8574l124.487 -117.164h219.311l28.4199 95.8613c1.86133 6.27637 2.80469 12.7793 2.80469 19.3281v36.8389c0.000976562 6.48047 1.21973 16.8574 2.71973 23.1621l31.7549 133.407
+c5.83105 24.4893 -31.1445 33.25 -36.9658 8.80273l-26.9229 -113.105c-1.61523 -6.78711 -8.58887 -12.2949 -15.5645 -12.2949h-9.69434c-10.4072 0 -18.043 9.79199 -15.5225 19.8799l38.127 152.512c6.09766 24.376 -30.7607 33.6396 -36.8643 9.21777l-42.3721 -169.49
+c-1.67285 -6.68945 -8.62695 -12.1191 -15.5225 -12.1191h-13.2168v0c-7.0332 0 -14.0195 5.5625 -15.5938 12.417l-45.2207 196.828c-5.64453 24.5684 -42.6572 15.9609 -37.0342 -8.50781l41.6191 -181.153c2.30078 -10.0156 -5.31738 -19.583 -15.5938 -19.583h-8.60352
+h-0.000976562c-7.0498 0 -14.04 5.5791 -15.6025 12.4541l-30.3984 133.757c-5.55273 24.4395 -42.6504 16.1963 -37.0547 -8.4209l34.1299 -150.172c0.263672 -1.16309 0.397461 -2.35352 0.397461 -3.5459v-69.4795c0 -13.9941 -16.7754 -21.2432 -26.9658 -11.6523
+l-53.0117 49.8936c-7.61523 7.16699 -19.6377 6.85938 -26.8564 -0.8125z" />
+    <glyph glyph-name="hand-pointer" unicode="&#xf25a;" horiz-adv-x="448" 
+d="M358.182 268.639c43.1934 16.6348 89.8184 -15.7949 89.8184 -62.6387v-84c-0.000976562 -4.25 -0.775391 -11.0615 -1.72754 -15.2041l-27.4297 -118.999c-6.98242 -30.2969 -33.7549 -51.7969 -64.5566 -51.7969h-178.286c-21.2588 0 -41.3682 10.4102 -53.791 27.8457
+l-109.699 154.001c-21.2432 29.8193 -14.8047 71.3574 14.5498 93.1523c18.8115 13.9658 42.1748 16.2822 62.083 8.87207v161.129c0 36.9443 29.7363 67 66.2861 67s66.2861 -30.0557 66.2861 -67v-73.6338c20.4131 2.85742 41.4678 -3.94238 56.5947 -19.6289
+c27.1934 12.8467 60.3799 5.66992 79.8721 -19.0986zM80.9854 168.303c-14.4004 20.2119 -43.8008 -2.38281 -29.3945 -22.6055l109.712 -154c3.43457 -4.81934 8.92871 -7.69727 14.6973 -7.69727h178.285c8.49219 0 15.8037 5.99414 17.7822 14.5762l27.4297 119.001
+c0.333008 1.44629 0.501953 2.93457 0.501953 4.42285v84c0 25.1602 -36.5713 25.1211 -36.5713 0c0 -8.83594 -7.16309 -16 -16 -16h-6.85645c-8.83691 0 -16 7.16406 -16 16v21c0 25.1602 -36.5713 25.1201 -36.5713 0v-21c0 -8.83594 -7.16309 -16 -16 -16h-6.85938
+c-8.83691 0 -16 7.16406 -16 16v35c0 25.1602 -36.5703 25.1201 -36.5703 0v-35c0 -8.83594 -7.16309 -16 -16 -16h-6.85742c-8.83691 0 -16 7.16406 -16 16v175c0 25.1602 -36.5713 25.1201 -36.5713 0v-241.493c0 -15.5703 -20.0352 -21.9092 -29.0303 -9.2832z
+M176.143 48v96c0 8.83691 6.26855 16 14 16h6c7.73242 0 14 -7.16309 14 -16v-96c0 -8.83691 -6.26758 -16 -14 -16h-6c-7.73242 0 -14 7.16309 -14 16zM251.571 48v96c0 8.83691 6.26758 16 14 16h6c7.73145 0 14 -7.16309 14 -16v-96c0 -8.83691 -6.26855 -16 -14 -16h-6
+c-7.73242 0 -14 7.16309 -14 16zM327 48v96c0 8.83691 6.26758 16 14 16h6c7.73242 0 14 -7.16309 14 -16v-96c0 -8.83691 -6.26758 -16 -14 -16h-6c-7.73242 0 -14 7.16309 -14 16z" />
+    <glyph glyph-name="hand-peace" unicode="&#xf25b;" horiz-adv-x="448" 
+d="M362.146 256.024c42.5908 13.3184 85.8535 -19.0684 85.8535 -64.0244l-0.0117188 -70.001c-0.000976562 -4.25 -0.775391 -11.0615 -1.72949 -15.2031l-27.4268 -118.999c-6.99707 -30.3564 -33.8105 -51.7969 -64.5547 -51.7969h-205.702
+c-23.8447 0 -45.9502 13.0303 -57.6904 34.0059l-54.8525 97.999c-19.2607 34.4092 -5.82422 67.2617 24.7324 92.2178l-55.7568 144.928c-14.5791 37.8867 3.72754 80.6113 41.2012 95.6416c37.6406 15.0977 80.3691 -3.63477 95.1123 -41.9424l18.6787 -78.8496
+l-9.14062 94c0 40.8037 32.8096 74 73.1396 74s73.1406 -33.1963 73.1406 -74v-87.6348c26.2451 3.6748 51.2959 -8.69238 65.0068 -30.3408zM399.987 122l-0.000976562 70c0 25.1602 -36.5674 25.1201 -36.5674 0c0 -8.83691 -7.16309 -16 -16 -16h-6.85547
+c-8.83789 0 -16 7.16309 -16 16v28c0 25.1592 -36.5674 25.1221 -36.5674 0v-28c0 -8.83691 -7.16309 -16 -16 -16h-6.85645c-8.83691 0 -16 7.16309 -16 16v182c0 34.4297 -50.2803 34.375 -50.2803 0v-182c0 -8.83691 -7.16309 -16 -16 -16h-11.6328v0
+c-6.06445 0 -12.7549 4.59375 -14.9326 10.2539l-59.7842 155.357c-12.1396 31.5518 -59.2842 13.4326 -46.7168 -19.2227l64.0898 -166.549c0.589844 -1.53125 1.06738 -4.10547 1.06738 -5.74609c0 -4.19043 -2.63379 -9.74219 -5.87891 -12.3926l-26.6475 -21.7646
+c-7.12695 -5.81934 -9.06445 -16.3467 -4.50781 -24.4873l54.8535 -98c3.26367 -5.82812 9.31934 -9.44922 15.8057 -9.44922h205.701c8.49121 0 15.8037 5.99414 17.7812 14.5762l27.4277 119.001c0.333008 1.44629 0.501953 2.93457 0.501953 4.42285z" />
+    <glyph glyph-name="registered" unicode="&#xf25d;" 
+d="M256 440c136.967 0 248 -111.033 248 -248s-111.033 -248 -248 -248s-248 111.033 -248 248s111.033 248 248 248zM256 -8c110.549 0 200 89.4678 200 200c0 110.549 -89.4678 200 -200 200c-110.549 0 -200 -89.4688 -200 -200c0 -110.549 89.4678 -200 200 -200z
+M366.442 73.791c4.40332 -7.99219 -1.37012 -17.791 -10.5107 -17.791h-42.8096h-0.0126953c-3.97559 0 -8.71582 2.84961 -10.5801 6.36035l-47.5156 89.3027h-31.958v-83.6631c0 -6.61719 -5.38281 -12 -12 -12h-38.5674c-6.61719 0 -12 5.38281 -12 12v248.304
+c0 6.61719 5.38281 12 12 12h78.667c71.251 0 101.498 -32.749 101.498 -85.252c0 -31.6123 -15.2148 -59.2969 -39.4824 -73.1758c3.02148 -4.61719 0.225586 0.199219 53.2715 -96.085zM256.933 208.094c20.9131 0 32.4307 11.5186 32.4316 32.4316
+c0 19.5752 -6.5127 31.709 -38.9297 31.709h-27.377v-64.1406h33.875z" />
+    <glyph glyph-name="calendar-plus" unicode="&#xf271;" horiz-adv-x="448" 
+d="M336 156v-24c0 -6.59961 -5.40039 -12 -12 -12h-76v-76c0 -6.59961 -5.40039 -12 -12 -12h-24c-6.59961 0 -12 5.40039 -12 12v76h-76c-6.59961 0 -12 5.40039 -12 12v24c0 6.59961 5.40039 12 12 12h76v76c0 6.59961 5.40039 12 12 12h24c6.59961 0 12 -5.40039 12 -12
+v-76h76c6.59961 0 12 -5.40039 12 -12zM448 336v-352c0 -26.5 -21.5 -48 -48 -48h-352c-26.5 0 -48 21.5 -48 48v352c0 26.5 21.5 48 48 48h48v52c0 6.59961 5.40039 12 12 12h40c6.59961 0 12 -5.40039 12 -12v-52h128v52c0 6.59961 5.40039 12 12 12h40
+c6.59961 0 12 -5.40039 12 -12v-52h48c26.5 0 48 -21.5 48 -48zM400 -10v298h-352v-298c0 -3.2998 2.7002 -6 6 -6h340c3.2998 0 6 2.7002 6 6z" />
+    <glyph glyph-name="calendar-minus" unicode="&#xf272;" horiz-adv-x="448" 
+d="M124 120c-6.59961 0 -12 5.40039 -12 12v24c0 6.59961 5.40039 12 12 12h200c6.59961 0 12 -5.40039 12 -12v-24c0 -6.59961 -5.40039 -12 -12 -12h-200zM448 336v-352c0 -26.5 -21.5 -48 -48 -48h-352c-26.5 0 -48 21.5 -48 48v352c0 26.5 21.5 48 48 48h48v52
+c0 6.59961 5.40039 12 12 12h40c6.59961 0 12 -5.40039 12 -12v-52h128v52c0 6.59961 5.40039 12 12 12h40c6.59961 0 12 -5.40039 12 -12v-52h48c26.5 0 48 -21.5 48 -48zM400 -10v298h-352v-298c0 -3.2998 2.7002 -6 6 -6h340c3.2998 0 6 2.7002 6 6z" />
+    <glyph glyph-name="calendar-times" unicode="&#xf273;" horiz-adv-x="448" 
+d="M311.7 73.2998l-17 -17c-4.7002 -4.7002 -12.2998 -4.7002 -17 0l-53.7002 53.7998l-53.7002 -53.6992c-4.7002 -4.7002 -12.2998 -4.7002 -17 0l-17 17c-4.7002 4.69922 -4.7002 12.2998 0 17l53.7002 53.6992l-53.7002 53.7002c-4.7002 4.7002 -4.7002 12.2998 0 17
+l17 17c4.7002 4.7002 12.2998 4.7002 17 0l53.7002 -53.7002l53.7002 53.7002c4.7002 4.7002 12.2998 4.7002 17 0l17 -17c4.7002 -4.7002 4.7002 -12.2998 0 -17l-53.7998 -53.7998l53.6992 -53.7002c4.80078 -4.7002 4.80078 -12.2998 0.100586 -17zM448 336v-352
+c0 -26.5 -21.5 -48 -48 -48h-352c-26.5 0 -48 21.5 -48 48v352c0 26.5 21.5 48 48 48h48v52c0 6.59961 5.40039 12 12 12h40c6.59961 0 12 -5.40039 12 -12v-52h128v52c0 6.59961 5.40039 12 12 12h40c6.59961 0 12 -5.40039 12 -12v-52h48c26.5 0 48 -21.5 48 -48zM400 -10
+v298h-352v-298c0 -3.2998 2.7002 -6 6 -6h340c3.2998 0 6 2.7002 6 6z" />
+    <glyph glyph-name="calendar-check" unicode="&#xf274;" horiz-adv-x="448" 
+d="M400 384c26.5098 0 48 -21.4902 48 -48v-352c0 -26.5098 -21.4902 -48 -48 -48h-352c-26.5098 0 -48 21.4902 -48 48v352c0 26.5098 21.4902 48 48 48h48v52c0 6.62695 5.37305 12 12 12h40c6.62695 0 12 -5.37305 12 -12v-52h128v52c0 6.62695 5.37305 12 12 12h40
+c6.62695 0 12 -5.37305 12 -12v-52h48zM394 -16c3.31152 0 6 2.68848 6 6v298h-352v-298c0 -3.31152 2.68848 -6 6 -6h340zM341.151 184.65l-142.31 -141.169c-4.70508 -4.66699 -12.3027 -4.6377 -16.9707 0.0673828l-75.0908 75.6992
+c-4.66699 4.70508 -4.6377 12.3027 0.0673828 16.9707l22.7197 22.5361c4.70508 4.66699 12.3027 4.63672 16.9697 -0.0693359l44.1035 -44.4609l111.072 110.182c4.70508 4.66699 12.3027 4.63672 16.9707 -0.0683594l22.5361 -22.7178
+c4.66699 -4.70508 4.63672 -12.3027 -0.0683594 -16.9697z" />
+    <glyph glyph-name="map" unicode="&#xf279;" horiz-adv-x="576" 
+d="M560.02 416c8.4502 0 15.9805 -6.83008 15.9805 -16.0195v-346.32c0 -11.9609 -9.01367 -25.2705 -20.1201 -29.71l-151.83 -52.8105c-5.32617 -1.7334 -14.1953 -3.13965 -19.7969 -3.13965c-5.7373 0 -14.8105 1.47363 -20.2529 3.29004l-172 60.71l-170.05 -62.8398
+c-1.99023 -0.790039 -4 -1.16016 -5.95996 -1.16016c-8.45996 0 -15.9902 6.83008 -15.9902 16.0195v346.32c0.00292969 11.959 9.0166 25.2686 20.1201 29.71l151.83 52.8105c6.43945 2.08984 13.1201 3.13965 19.8096 3.13965
+c5.73242 -0.00195312 14.8008 -1.47168 20.2402 -3.28027l172 -60.7197h0.00976562l170.05 62.8398c1.98047 0.790039 4 1.16016 5.95996 1.16016zM224 357.58v-285.97l128 -45.1904v285.97zM48 29.9502l127.36 47.0801l0.639648 0.229492v286.2l-128 -44.5303v-288.979z
+M528 65.0801v288.97l-127.36 -47.0693l-0.639648 -0.240234v-286.19z" />
+    <glyph glyph-name="comment-alt" unicode="&#xf27a;" 
+d="M448 448c35.2998 0 64 -28.7002 64 -64v-288c0 -35.2998 -28.7002 -64 -64 -64h-144l-124.9 -93.5996c-2.19922 -1.7002 -4.69922 -2.40039 -7.09961 -2.40039c-6.2002 0 -12 4.90039 -12 12v84h-96c-35.2998 0 -64 28.7002 -64 64v288c0 35.2998 28.7002 64 64 64h384z
+M464 96v288c0 8.7998 -7.2002 16 -16 16h-384c-8.7998 0 -16 -7.2002 -16 -16v-288c0 -8.7998 7.2002 -16 16 -16h144v-60l67.2002 50.4004l12.7998 9.59961h160c8.7998 0 16 7.2002 16 16z" />
+    <glyph glyph-name="pause-circle" unicode="&#xf28b;" 
+d="M256 440c137 0 248 -111 248 -248s-111 -248 -248 -248s-248 111 -248 248s111 248 248 248zM256 -8c110.5 0 200 89.5 200 200s-89.5 200 -200 200s-200 -89.5 -200 -200s89.5 -200 200 -200zM352 272v-160c0 -8.7998 -7.2002 -16 -16 -16h-48
+c-8.7998 0 -16 7.2002 -16 16v160c0 8.7998 7.2002 16 16 16h48c8.7998 0 16 -7.2002 16 -16zM240 272v-160c0 -8.7998 -7.2002 -16 -16 -16h-48c-8.7998 0 -16 7.2002 -16 16v160c0 8.7998 7.2002 16 16 16h48c8.7998 0 16 -7.2002 16 -16z" />
+    <glyph glyph-name="stop-circle" unicode="&#xf28d;" 
+d="M504 192c0 -137 -111 -248 -248 -248s-248 111 -248 248s111 248 248 248s248 -111 248 -248zM56 192c0 -110.5 89.5 -200 200 -200s200 89.5 200 200s-89.5 200 -200 200s-200 -89.5 -200 -200zM352 272v-160c0 -8.7998 -7.2002 -16 -16 -16h-160
+c-8.7998 0 -16 7.2002 -16 16v160c0 8.7998 7.2002 16 16 16h160c8.7998 0 16 -7.2002 16 -16z" />
+    <glyph glyph-name="handshake" unicode="&#xf2b5;" horiz-adv-x="640" 
+d="M519.2 320.1h120.8v-255.699h-64c-17.5 0 -31.7998 14.1992 -31.9004 31.6992h-57.8994c-1.7998 -8.19922 -5.2998 -16.0996 -10.9004 -23l-26.2002 -32.2998c-15.7998 -19.3994 -41.8994 -25.5 -64 -16.7998c-13.5 -16.5996 -30.5996 -24 -48.7998 -24
+c-15.0996 0 -28.5996 5.09961 -41.0996 15.9004c-31.7998 -21.9004 -74.7002 -21.3008 -105.601 3.7998l-84.5996 76.3994h-9.09961c-0.100586 -17.5 -14.3008 -31.6992 -31.9004 -31.6992h-64v255.699h118l47.5996 47.6006c10.5 10.3994 24.8008 16.2998 39.6006 16.2998
+h226.8v0c12.7812 0 30.5225 -7.30273 39.5996 -16.2998zM48 96.4004c8.7998 0 16 7.09961 16 16c0 8.7998 -7.2002 16 -16 16s-16 -7.2002 -16 -16c0 -8.80078 7.2002 -16 16 -16zM438 103.3c2.7002 3.40039 2.2002 8.5 -1.2002 11.2998l-108.2 87.8008l-8.19922 -7.5
+c-40.3008 -36.8008 -86.7002 -11.8008 -101.5 4.39941c-26.7002 29 -25 74.4004 4.39941 101.3l38.7002 35.5h-56.7002c-2 -0.799805 -3.7002 -1.5 -5.7002 -2.2998l-61.6992 -61.5996h-41.9004v-128.101h27.7002l97.2998 -88
+c16.0996 -13.0996 41.4004 -10.5 55.2998 6.60059l15.6006 19.2002l36.7998 -31.5c3 -2.40039 12 -4.90039 18 2.39941l30 36.5l23.8994 -19.3994c3.5 -2.80078 8.5 -2.2002 11.3008 1.19922zM544 144.1v128h-44.7002l-61.7002 61.6006
+c-1.39941 1.5 -3.39941 2.2998 -5.5 2.2998l-83.6992 -0.200195c-10 0 -19.6006 -3.7002 -27 -10.5l-65.6006 -60.0996c-9.7002 -8.7998 -10.5 -24 -1.2002 -33.9004c8.90039 -9.39941 25.1006 -8.7002 34.6006 0l55.2002 50.6006c6.5 5.89941 16.5996 5.5 22.5996 -1
+l10.9004 -11.7002c6 -6.5 5.5 -16.6006 -1 -22.6006l-12.5 -11.3994l102.699 -83.4004c2.80078 -2.2998 5.40039 -4.89941 7.7002 -7.7002h69.2002zM592 96.4004c8.7998 0 16 7.09961 16 16c0 8.7998 -7.2002 16 -16 16s-16 -7.2002 -16 -16c0 -8.80078 7.2002 -16 16 -16z
+" />
+    <glyph glyph-name="envelope-open" unicode="&#xf2b6;" 
+d="M494.586 283.484c9.6123 -7.94824 17.4141 -24.5205 17.4141 -36.9932v-262.491c0 -26.5098 -21.4902 -48 -48 -48h-416c-26.5098 0 -48 21.4902 -48 48v262.515c0 12.5166 7.84668 29.1279 17.5146 37.0771c4.08008 3.35449 110.688 89.0996 135.15 108.549
+c22.6992 18.1426 60.1299 55.8594 103.335 55.8594c43.4365 0 81.2314 -38.1914 103.335 -55.8594c23.5283 -18.707 130.554 -104.773 135.251 -108.656zM464 -10v253.632v0.00488281c0 1.5791 -0.996094 3.66602 -2.22363 4.6582
+c-15.8633 12.8232 -108.793 87.5752 -132.366 106.316c-17.5527 14.0195 -49.7168 45.3887 -73.4102 45.3887c-23.6016 0 -55.2451 -30.8799 -73.4102 -45.3887c-23.5713 -18.7393 -116.494 -93.4795 -132.364 -106.293
+c-1.40918 -1.13965 -2.22559 -2.85254 -2.22559 -4.66504v-253.653c0 -3.31152 2.68848 -6 6 -6h404c3.31152 0 6 2.68848 6 6zM432.009 177.704c4.24902 -5.15918 3.46484 -12.7949 -1.74512 -16.9814c-28.9746 -23.2822 -59.2734 -47.5967 -70.9287 -56.8623
+c-22.6992 -18.1436 -60.1299 -55.8604 -103.335 -55.8604c-43.4521 0 -81.2871 38.2373 -103.335 55.8604c-11.2793 8.9668 -41.7441 33.4131 -70.9268 56.8643c-5.20996 4.1875 -5.99316 11.8223 -1.74512 16.9814l15.2578 18.5283
+c4.17773 5.07227 11.6572 5.84277 16.7793 1.72559c28.6182 -23.001 58.5654 -47.0352 70.5596 -56.5713c17.5527 -14.0195 49.7168 -45.3887 73.4102 -45.3887c23.6016 0 55.2461 30.8799 73.4102 45.3887c11.9941 9.53516 41.9434 33.5703 70.5625 56.5684
+c5.12207 4.11621 12.6016 3.3457 16.7783 -1.72656z" />
+    <glyph glyph-name="address-book" unicode="&#xf2b9;" horiz-adv-x="448" 
+d="M436 288h-20v-64h20c6.59961 0 12 -5.40039 12 -12v-40c0 -6.59961 -5.40039 -12 -12 -12h-20v-64h20c6.59961 0 12 -5.40039 12 -12v-40c0 -6.59961 -5.40039 -12 -12 -12h-20v-48c0 -26.5 -21.5 -48 -48 -48h-320c-26.5 0 -48 21.5 -48 48v416c0 26.5 21.5 48 48 48
+h320c26.5 0 48 -21.5 48 -48v-48h20c6.59961 0 12 -5.40039 12 -12v-40c0 -6.59961 -5.40039 -12 -12 -12zM368 -16v416h-320v-416h320zM208 192c-35.2998 0 -64 28.7002 -64 64s28.7002 64 64 64s64 -28.7002 64 -64s-28.7002 -64 -64 -64zM118.4 64
+c-12.4004 0 -22.4004 8.59961 -22.4004 19.2002v19.2002c0 31.7998 30.0996 57.5996 67.2002 57.5996c11.3994 0 17.8994 -8 44.7998 -8c26.0996 0 34 8 44.7998 8c37.1006 0 67.2002 -25.7998 67.2002 -57.5996v-19.2002c0 -10.6006 -10 -19.2002 -22.4004 -19.2002
+h-179.199z" />
+    <glyph glyph-name="address-card" unicode="&#xf2bb;" horiz-adv-x="576" 
+d="M528 416c26.5 0 48 -21.5 48 -48v-352c0 -26.5 -21.5 -48 -48 -48h-480c-26.5 0 -48 21.5 -48 48v352c0 26.5 21.5 48 48 48h480zM528 16v352h-480v-352h480zM208 192c-35.2998 0 -64 28.7002 -64 64s28.7002 64 64 64s64 -28.7002 64 -64s-28.7002 -64 -64 -64z
+M118.4 64c-12.4004 0 -22.4004 8.59961 -22.4004 19.2002v19.2002c0 31.7998 30.0996 57.5996 67.2002 57.5996c11.3994 0 17.8994 -8 44.7998 -8c26.0996 0 34 8 44.7998 8c37.1006 0 67.2002 -25.7998 67.2002 -57.5996v-19.2002
+c0 -10.6006 -10 -19.2002 -22.4004 -19.2002h-179.199zM360 128c-4.40039 0 -8 3.59961 -8 8v16c0 4.40039 3.59961 8 8 8h112c4.40039 0 8 -3.59961 8 -8v-16c0 -4.40039 -3.59961 -8 -8 -8h-112zM360 192c-4.40039 0 -8 3.59961 -8 8v16c0 4.40039 3.59961 8 8 8h112
+c4.40039 0 8 -3.59961 8 -8v-16c0 -4.40039 -3.59961 -8 -8 -8h-112zM360 256c-4.40039 0 -8 3.59961 -8 8v16c0 4.40039 3.59961 8 8 8h112c4.40039 0 8 -3.59961 8 -8v-16c0 -4.40039 -3.59961 -8 -8 -8h-112z" />
+    <glyph glyph-name="user-circle" unicode="&#xf2bd;" horiz-adv-x="496" 
+d="M248 344c53 0 96 -43 96 -96s-43 -96 -96 -96s-96 43 -96 96s43 96 96 96zM248 200c26.5 0 48 21.5 48 48s-21.5 48 -48 48s-48 -21.5 -48 -48s21.5 -48 48 -48zM248 440c137 0 248 -111 248 -248s-111 -248 -248 -248s-248 111 -248 248s111 248 248 248zM248 -8
+c49.7002 0 95.0996 18.2998 130.1 48.4004c-14.8994 23 -40.3994 38.5 -69.5996 39.5c-20.7998 -6.5 -40.5996 -9.60059 -60.5 -9.60059s-39.7002 3.2002 -60.5 9.60059c-29.2002 -0.900391 -54.7002 -16.5 -69.5996 -39.5c35 -30.1006 80.3994 -48.4004 130.1 -48.4004z
+M410.7 76.0996c23.3994 32.7002 37.2998 72.7002 37.2998 115.9c0 110.3 -89.7002 200 -200 200s-200 -89.7002 -200 -200c0 -43.2002 13.9004 -83.2002 37.2998 -115.9c24.5 31.4004 62.2002 51.9004 105.101 51.9004c10.1992 0 26.0996 -9.59961 57.5996 -9.59961
+c31.5996 0 47.4004 9.59961 57.5996 9.59961c43 0 80.7002 -20.5 105.101 -51.9004z" />
+    <glyph glyph-name="id-badge" unicode="&#xf2c1;" horiz-adv-x="384" 
+d="M336 448c26.5 0 48 -21.5 48 -48v-416c0 -26.5 -21.5 -48 -48 -48h-288c-26.5 0 -48 21.5 -48 48v416c0 26.5 21.5 48 48 48h288zM336 -16v416h-288v-416h288zM144 336c-8.7998 0 -16 7.2002 -16 16s7.2002 16 16 16h96c8.7998 0 16 -7.2002 16 -16s-7.2002 -16 -16 -16
+h-96zM192 160c-35.2998 0 -64 28.7002 -64 64s28.7002 64 64 64s64 -28.7002 64 -64s-28.7002 -64 -64 -64zM102.4 32c-12.4004 0 -22.4004 8.59961 -22.4004 19.2002v19.2002c0 31.7998 30.0996 57.5996 67.2002 57.5996c11.3994 0 17.8994 -8 44.7998 -8
+c26.0996 0 34 8 44.7998 8c37.1006 0 67.2002 -25.7998 67.2002 -57.5996v-19.2002c0 -10.6006 -10 -19.2002 -22.4004 -19.2002h-179.199z" />
+    <glyph glyph-name="id-card" unicode="&#xf2c2;" horiz-adv-x="576" 
+d="M528 416c26.5 0 48 -21.5 48 -48v-352c0 -26.5 -21.5 -48 -48 -48h-480c-26.5 0 -48 21.5 -48 48v352c0 26.5 21.5 48 48 48h480zM528 16v288h-480v-288h32.7998c-1 4.5 -0.799805 -3.59961 -0.799805 22.4004c0 31.7998 30.0996 57.5996 67.2002 57.5996
+c11.3994 0 17.8994 -8 44.7998 -8c26.0996 0 34 8 44.7998 8c37.1006 0 67.2002 -25.7998 67.2002 -57.5996c0 -26 0.0996094 -17.9004 -0.799805 -22.4004h224.8zM360 96c-4.40039 0 -8 3.59961 -8 8v16c0 4.40039 3.59961 8 8 8h112c4.40039 0 8 -3.59961 8 -8v-16
+c0 -4.40039 -3.59961 -8 -8 -8h-112zM360 160c-4.40039 0 -8 3.59961 -8 8v16c0 4.40039 3.59961 8 8 8h112c4.40039 0 8 -3.59961 8 -8v-16c0 -4.40039 -3.59961 -8 -8 -8h-112zM360 224c-4.40039 0 -8 3.59961 -8 8v16c0 4.40039 3.59961 8 8 8h112
+c4.40039 0 8 -3.59961 8 -8v-16c0 -4.40039 -3.59961 -8 -8 -8h-112zM192 128c-35.2998 0 -64 28.7002 -64 64s28.7002 64 64 64s64 -28.7002 64 -64s-28.7002 -64 -64 -64z" />
+    <glyph glyph-name="window-maximize" unicode="&#xf2d0;" 
+d="M464 416c26.5 0 48 -21.5 48 -48v-352c0 -26.5 -21.5 -48 -48 -48h-416c-26.5 0 -48 21.5 -48 48v352c0 26.5 21.5 48 48 48h416zM464 22v234h-416v-234c0 -3.2998 2.7002 -6 6 -6h404c3.2998 0 6 2.7002 6 6z" />
+    <glyph glyph-name="window-minimize" unicode="&#xf2d1;" 
+d="M480 -32h-448c-17.7002 0 -32 14.2998 -32 32s14.2998 32 32 32h448c17.7002 0 32 -14.2998 32 -32s-14.2998 -32 -32 -32z" />
+    <glyph glyph-name="window-restore" unicode="&#xf2d2;" 
+d="M464 448c26.5 0 48 -21.5 48 -48v-320c0 -26.5 -21.5 -48 -48 -48h-48v-48c0 -26.5 -21.5 -48 -48 -48h-320c-26.5 0 -48 21.5 -48 48v320c0 26.5 21.5 48 48 48h48v48c0 26.5 21.5 48 48 48h320zM368 -16v208h-320v-208h320zM464 80v320h-320v-48h224
+c26.5 0 48 -21.5 48 -48v-224h48z" />
+    <glyph glyph-name="snowflake" unicode="&#xf2dc;" horiz-adv-x="448" 
+d="M440.1 92.7998c7.60059 -4.39941 10.1006 -14.2002 5.5 -21.7002l-7.89941 -13.8994c-4.40039 -7.7002 -14 -10.2998 -21.5 -5.90039l-39.2002 23l9.09961 -34.7002c2.30078 -8.5 -2.69922 -17.2998 -11.0996 -19.5996l-15.2002 -4.09961
+c-8.39941 -2.30078 -17.0996 2.7998 -19.2998 11.2998l-21.2998 81l-71.9004 42.2002v-84.5l58.2998 -59.3008c6.10059 -6.19922 6.10059 -16.3994 0 -22.5996l-11.0996 -11.2998c-6.09961 -6.2002 -16.0996 -6.2002 -22.2002 0l-24.8994 25.3994v-46.0996
+c0 -8.7998 -7 -16 -15.7002 -16h-15.7002c-8.7002 0 -15.7002 7.2002 -15.7002 16v45.9004l-24.8994 -25.4004c-6.10059 -6.2002 -16.1006 -6.2002 -22.2002 0l-11.1006 11.2998c-6.09961 6.2002 -6.09961 16.4004 0 22.6006l58.3008 59.2998v84.5l-71.9004 -42.2002
+l-21.2998 -81c-2.2998 -8.5 -10.9004 -13.5996 -19.2998 -11.2998l-15.2002 4.09961c-8.40039 2.2998 -13.2998 11.1006 -11.1006 19.6006l9.10059 34.6992l-39.2002 -23c-7.5 -4.39941 -17.2002 -1.7998 -21.5 5.90039l-7.90039 13.9004
+c-4.2998 7.69922 -1.69922 17.5 5.80078 21.8994l39.1992 23l-34.0996 9.2998c-8.40039 2.30078 -13.2998 11.1006 -11.0996 19.6006l4.09961 15.5c2.2998 8.5 10.9004 13.5996 19.2998 11.2998l79.7002 -21.7002l71.9004 42.2002l-71.9004 42.2002l-79.7002 -21.7002
+c-8.39941 -2.2998 -17.0996 2.7998 -19.2998 11.2998l-4.09961 15.5c-2.30078 8.5 2.69922 17.2998 11.0996 19.6006l34.0996 9.09961l-39.1992 23c-7.60059 4.5 -10.1006 14.2002 -5.80078 21.9004l7.90039 13.8994c4.40039 7.7002 14 10.2998 21.5 5.90039l39.2002 -23
+l-9.10059 34.7002c-2.2998 8.5 2.7002 17.2998 11.1006 19.5996l15.2002 4.09961c8.39941 2.30078 17.0996 -2.7998 19.2998 -11.2998l21.2998 -81l71.9004 -42.2002v84.5l-58.3008 59.3008c-6.09961 6.19922 -6.09961 16.3994 0 22.5996l11.5 11.2998
+c6.10059 6.2002 16.1006 6.2002 22.2002 0l24.9004 -25.3994v46.0996c0 8.7998 7 16 15.7002 16h15.6992c8.7002 0 15.7002 -7.2002 15.7002 -16v-45.9004l24.9004 25.4004c6.09961 6.2002 16.0996 6.2002 22.2002 0l11.0996 -11.2998
+c6.09961 -6.2002 6.09961 -16.4004 0 -22.6006l-58.2998 -59.2998v-84.5l71.8994 42.2002l21.3008 81c2.2998 8.5 10.8994 13.5996 19.2998 11.2998l15.2002 -4.09961c8.39941 -2.2998 13.2998 -11.1006 11.0996 -19.6006l-9.09961 -34.6992l39.1992 23
+c7.5 4.39941 17.2002 1.7998 21.5 -5.90039l7.90039 -13.9004c4.2998 -7.69922 1.7002 -17.5 -5.7998 -21.8994l-39.2002 -23l34.0996 -9.2998c8.40039 -2.30078 13.3008 -11.1006 11.1006 -19.6006l-4.10059 -15.5c-2.2998 -8.5 -10.8994 -13.5996 -19.2998 -11.2998
+l-79.7002 21.7002l-71.8994 -42.2002l71.7998 -42.2002l79.7002 21.7002c8.39941 2.2998 17.0996 -2.7998 19.2998 -11.2998l4.09961 -15.5c2.30078 -8.5 -2.69922 -17.2998 -11.0996 -19.6006l-34.0996 -9.2998z" />
+    <glyph glyph-name="trash-alt" unicode="&#xf2ed;" horiz-adv-x="448" 
+d="M268 32c-6.62402 0 -12 5.37598 -12 12v216c0 6.62402 5.37598 12 12 12h24c6.62402 0 12 -5.37598 12 -12v-216c0 -6.62402 -5.37598 -12 -12 -12h-24zM432 368c8.83203 0 16 -7.16797 16 -16v-16c0 -8.83203 -7.16797 -16 -16 -16h-16v-336
+c0 -26.4961 -21.5039 -48 -48 -48h-288c-26.4961 0 -48 21.5039 -48 48v336h-16c-8.83203 0 -16 7.16797 -16 16v16c0 8.83203 7.16797 16 16 16h82.4102l34.0195 56.7002c7.71875 12.8613 26.1572 23.2998 41.1572 23.2998h0.00292969h100.82h0.0224609
+c15 0 33.4385 -10.4385 41.1572 -23.2998l34 -56.7002h82.4102zM171.84 397.09l-17.4502 -29.0898h139.221l-17.46 29.0898c-0.96582 1.60645 -3.26953 2.91016 -5.14355 2.91016h-0.00683594h-94h-0.0166016c-1.87402 0 -4.17871 -1.30371 -5.14355 -2.91016zM368 -16v336
+h-288v-336h288zM156 32c-6.62402 0 -12 5.37598 -12 12v216c0 6.62402 5.37598 12 12 12h24c6.62402 0 12 -5.37598 12 -12v-216c0 -6.62402 -5.37598 -12 -12 -12h-24z" />
+    <glyph glyph-name="images" unicode="&#xf302;" horiz-adv-x="576" 
+d="M480 32v-16c0 -26.5098 -21.4902 -48 -48 -48h-384c-26.5098 0 -48 21.4902 -48 48v256c0 26.5098 21.4902 48 48 48h16v-48h-10c-3.31152 0 -6 -2.68848 -6 -6v-244c0 -3.31152 2.68848 -6 6 -6h372c3.31152 0 6 2.68848 6 6v10h48zM522 368h-372
+c-3.31152 0 -6 -2.68848 -6 -6v-244c0 -3.31152 2.68848 -6 6 -6h372c3.31152 0 6 2.68848 6 6v244c0 3.31152 -2.68848 6 -6 6zM528 416c26.5098 0 48 -21.4902 48 -48v-256c0 -26.5098 -21.4902 -48 -48 -48h-384c-26.5098 0 -48 21.4902 -48 48v256
+c0 26.5098 21.4902 48 48 48h384zM264 304c0 -22.0908 -17.9092 -40 -40 -40s-40 17.9092 -40 40s17.9092 40 40 40s40 -17.9092 40 -40zM192 208l39.5146 39.5146c4.68652 4.68652 12.2842 4.68652 16.9717 0l39.5137 -39.5146l103.515 103.515
+c4.68652 4.68652 12.2842 4.68652 16.9717 0l71.5137 -71.5146v-80h-288v48z" />
+    <glyph glyph-name="clipboard" unicode="&#xf328;" horiz-adv-x="384" 
+d="M336 384c26.5 0 48 -21.5 48 -48v-352c0 -26.5 -21.5 -48 -48 -48h-288c-26.5 0 -48 21.5 -48 48v352c0 26.5 21.5 48 48 48h80c0 35.2998 28.7002 64 64 64s64 -28.7002 64 -64h80zM192 408c-13.2998 0 -24 -10.7002 -24 -24s10.7002 -24 24 -24s24 10.7002 24 24
+s-10.7002 24 -24 24zM336 -10v340c0 3.2998 -2.7002 6 -6 6h-42v-36c0 -6.59961 -5.40039 -12 -12 -12h-168c-6.59961 0 -12 5.40039 -12 12v36h-42c-3.2998 0 -6 -2.7002 -6 -6v-340c0 -3.2998 2.7002 -6 6 -6h276c3.2998 0 6 2.7002 6 6z" />
+    <glyph glyph-name="arrow-alt-circle-down" unicode="&#xf358;" 
+d="M256 440c137 0 248 -111 248 -248s-111 -248 -248 -248s-248 111 -248 248s111 248 248 248zM256 -8c110.5 0 200 89.5 200 200s-89.5 200 -200 200s-200 -89.5 -200 -200s89.5 -200 200 -200zM224 308c0 6.59961 5.40039 12 12 12h40c6.59961 0 12 -5.40039 12 -12v-116
+h67c10.7002 0 16.0996 -12.9004 8.5 -20.5l-99 -99c-4.7002 -4.7002 -12.2998 -4.7002 -17 0l-99 99c-7.5 7.59961 -2.2002 20.5 8.5 20.5h67v116z" />
+    <glyph glyph-name="arrow-alt-circle-left" unicode="&#xf359;" 
+d="M8 192c0 137 111 248 248 248s248 -111 248 -248s-111 -248 -248 -248s-248 111 -248 248zM456 192c0 110.5 -89.5 200 -200 200s-200 -89.5 -200 -200s89.5 -200 200 -200s200 89.5 200 200zM384 212v-40c0 -6.59961 -5.40039 -12 -12 -12h-116v-67
+c0 -10.7002 -12.9004 -16 -20.5 -8.5l-99 99c-4.7002 4.7002 -4.7002 12.2998 0 17l99 99c7.59961 7.59961 20.5 2.2002 20.5 -8.5v-67h116c6.59961 0 12 -5.40039 12 -12z" />
+    <glyph glyph-name="arrow-alt-circle-right" unicode="&#xf35a;" 
+d="M504 192c0 -137 -111 -248 -248 -248s-248 111 -248 248s111 248 248 248s248 -111 248 -248zM56 192c0 -110.5 89.5 -200 200 -200s200 89.5 200 200s-89.5 200 -200 200s-200 -89.5 -200 -200zM128 172v40c0 6.59961 5.40039 12 12 12h116v67
+c0 10.7002 12.9004 16 20.5 8.5l99 -99c4.7002 -4.7002 4.7002 -12.2998 0 -17l-99 -99c-7.59961 -7.59961 -20.5 -2.2002 -20.5 8.5v67h-116c-6.59961 0 -12 5.40039 -12 12z" />
+    <glyph glyph-name="arrow-alt-circle-up" unicode="&#xf35b;" 
+d="M256 -56c-137 0 -248 111 -248 248s111 248 248 248s248 -111 248 -248s-111 -248 -248 -248zM256 392c-110.5 0 -200 -89.5 -200 -200s89.5 -200 200 -200s200 89.5 200 200s-89.5 200 -200 200zM276 64h-40c-6.59961 0 -12 5.40039 -12 12v116h-67
+c-10.7002 0 -16 12.9004 -8.5 20.5l99 99c4.7002 4.7002 12.2998 4.7002 17 0l99 -99c7.59961 -7.59961 2.2002 -20.5 -8.5 -20.5h-67v-116c0 -6.59961 -5.40039 -12 -12 -12z" />
+    <glyph glyph-name="gem" unicode="&#xf3a5;" horiz-adv-x="576" 
+d="M464 448c4.09961 0 7.7998 -2 10.0996 -5.40039l99.9004 -147.199c2.90039 -4.40039 2.59961 -10.1006 -0.700195 -14.2002l-276 -340.8c-4.7998 -5.90039 -13.7998 -5.90039 -18.5996 0l-276 340.8c-3.2998 4 -3.60059 9.7998 -0.700195 14.2002l100 147.199
+c2.2002 3.40039 6 5.40039 10 5.40039h352zM444.7 400h-56.7998l51.6992 -96h68.4004zM242.6 400l-51.5996 -96h194l-51.7002 96h-90.7002zM131.3 400l-63.2998 -96h68.4004l51.6992 96h-56.7998zM88.2998 256l119.7 -160l-68.2998 160h-51.4004zM191.2 256l96.7998 -243.3
+l96.7998 243.3h-193.6zM368 96l119.6 160h-51.3994z" />
+    <glyph glyph-name="money-bill-alt" unicode="&#xf3d1;" horiz-adv-x="640" 
+d="M320 304c53.0195 0 96 -50.1396 96 -112c0 -61.8701 -43 -112 -96 -112c-53.0195 0 -96 50.1504 -96 112c0 61.8604 42.9805 112 96 112zM360 136v16c0 4.41992 -3.58008 8 -8 8h-16v88c0 4.41992 -3.58008 8 -8 8h-13.5801h-0.000976562
+c-4.01074 0 -9.97266 -1.80566 -13.3086 -4.03027l-15.3301 -10.2197c-1.96777 -1.30957 -3.56445 -4.29004 -3.56445 -6.65332c0 -1.33691 0.601562 -3.32422 1.34375 -4.43652l8.88086 -13.3105c1.30859 -1.9668 4.29004 -3.56445 6.65332 -3.56445
+c1.33691 0 3.32422 0.602539 4.43652 1.34473l0.469727 0.310547v-55.4404h-16c-4.41992 0 -8 -3.58008 -8 -8v-16c0 -4.41992 3.58008 -8 8 -8h64c4.41992 0 8 3.58008 8 8zM608 384c17.6699 0 32 -14.3301 32 -32v-320c0 -17.6699 -14.3301 -32 -32 -32h-576
+c-17.6699 0 -32 14.3301 -32 32v320c0 17.6699 14.3301 32 32 32h576zM592 112v160c-35.3496 0 -64 28.6504 -64 64h-416c0 -35.3496 -28.6504 -64 -64 -64v-160c35.3496 0 64 -28.6504 64 -64h416c0 35.3496 28.6504 64 64 64z" />
+    <glyph glyph-name="window-close" unicode="&#xf410;" 
+d="M464 416c26.5 0 48 -21.5 48 -48v-352c0 -26.5 -21.5 -48 -48 -48h-416c-26.5 0 -48 21.5 -48 48v352c0 26.5 21.5 48 48 48h416zM464 22v340c0 3.2998 -2.7002 6 -6 6h-404c-3.2998 0 -6 -2.7002 -6 -6v-340c0 -3.2998 2.7002 -6 6 -6h404c3.2998 0 6 2.7002 6 6z
+M356.5 253.4l-61.4004 -61.4004l61.4004 -61.4004c4.59961 -4.59961 4.59961 -12.0996 0 -16.7998l-22.2998 -22.2998c-4.60059 -4.59961 -12.1006 -4.59961 -16.7998 0l-61.4004 61.4004l-61.4004 -61.4004c-4.59961 -4.59961 -12.0996 -4.59961 -16.7998 0
+l-22.2998 22.2998c-4.59961 4.60059 -4.59961 12.1006 0 16.7998l61.4004 61.4004l-61.4004 61.4004c-4.59961 4.59961 -4.59961 12.0996 0 16.7998l22.2998 22.2998c4.60059 4.59961 12.1006 4.59961 16.7998 0l61.4004 -61.4004l61.4004 61.4004
+c4.59961 4.59961 12.0996 4.59961 16.7998 0l22.2998 -22.2998c4.7002 -4.60059 4.7002 -12.1006 0 -16.7998z" />
+    <glyph glyph-name="comment-dots" unicode="&#xf4ad;" 
+d="M144 240c17.7002 0 32 -14.2998 32 -32s-14.2998 -32 -32 -32s-32 14.2998 -32 32s14.2998 32 32 32zM256 240c17.7002 0 32 -14.2998 32 -32s-14.2998 -32 -32 -32s-32 14.2998 -32 32s14.2998 32 32 32zM368 240c17.7002 0 32 -14.2998 32 -32s-14.2998 -32 -32 -32
+s-32 14.2998 -32 32s14.2998 32 32 32zM256 416c141.4 0 256 -93.0996 256 -208s-114.6 -208 -256 -208c-32.7998 0 -64 5.2002 -92.9004 14.2998c-29.0996 -20.5996 -77.5996 -46.2998 -139.1 -46.2998c-9.59961 0 -18.2998 5.7002 -22.0996 14.5
+c-3.80078 8.7998 -2 19 4.59961 26c0.5 0.400391 31.5 33.7998 46.4004 73.2002c-33 35.0996 -52.9004 78.7002 -52.9004 126.3c0 114.9 114.6 208 256 208zM256 48c114.7 0 208 71.7998 208 160s-93.2998 160 -208 160s-208 -71.7998 -208 -160
+c0 -42.2002 21.7002 -74.0996 39.7998 -93.4004l20.6006 -21.7998l-10.6006 -28.0996c-5.5 -14.5 -12.5996 -28.1006 -19.8994 -40.2002c23.5996 7.59961 43.1992 18.9004 57.5 29l19.5 13.7998l22.6992 -7.2002c25.3008 -8 51.7002 -12.0996 78.4004 -12.0996z" />
+    <glyph glyph-name="smile-wink" unicode="&#xf4da;" horiz-adv-x="496" 
+d="M248 440c137 0 248 -111 248 -248s-111 -248 -248 -248s-248 111 -248 248s111 248 248 248zM248 -8c110.3 0 200 89.7002 200 200s-89.7002 200 -200 200s-200 -89.7002 -200 -200s89.7002 -200 200 -200zM365.8 138.4c10.2002 -8.5 11.6006 -23.6006 3.10059 -33.8008
+c-30 -36 -74.1006 -56.5996 -120.9 -56.5996s-90.9004 20.5996 -120.9 56.5996c-8.39941 10.2002 -7.09961 25.3008 3.10059 33.8008c10.0996 8.39941 25.2998 7.09961 33.7998 -3.10059c20.7998 -25.0996 51.5 -39.3994 84 -39.3994s63.2002 14.3994 84 39.3994
+c8.5 10.2002 23.5996 11.6006 33.7998 3.10059zM168 208c-17.7002 0 -32 14.2998 -32 32s14.2998 32 32 32s32 -14.2998 32 -32s-14.2998 -32 -32 -32zM328 268c25.7002 0 55.9004 -16.9004 59.7002 -42.0996c1.7998 -11.1006 -11.2998 -18.2002 -19.7998 -10.8008l-9.5 8.5
+c-14.8008 13.2002 -46.2002 13.2002 -61 0l-9.5 -8.5c-8.30078 -7.39941 -21.5 -0.399414 -19.8008 10.8008c4 25.1992 34.2002 42.0996 59.9004 42.0996z" />
+    <glyph glyph-name="angry" unicode="&#xf556;" horiz-adv-x="496" 
+d="M248 440c137 0 248 -111 248 -248s-111 -248 -248 -248s-248 111 -248 248s111 248 248 248zM248 -8c110.3 0 200 89.7002 200 200s-89.7002 200 -200 200s-200 -89.7002 -200 -200s89.7002 -200 200 -200zM248 136c33.5996 0 65.2002 -14.7998 86.7998 -40.5996
+c8.40039 -10.2002 7.10059 -25.3008 -3.09961 -33.8008c-10.6006 -8.89941 -25.7002 -6.69922 -33.7998 3c-24.8008 29.7002 -75 29.7002 -99.8008 0c-8.5 -10.1992 -23.5996 -11.5 -33.7998 -3s-11.5996 23.6006 -3.09961 33.8008
+c21.5996 25.7998 53.2002 40.5996 86.7998 40.5996zM200 208c0 -17.7002 -14.2998 -32.0996 -32 -32.0996s-32 14.2998 -32 32c0 6.19922 2.2002 11.6992 5.2998 16.5996l-28.2002 8.5c-12.6992 3.7998 -19.8994 17.2002 -16.0996 29.9004
+c3.7998 12.6992 17.0996 20 29.9004 16.0996l80 -24c12.6992 -3.7998 19.8994 -17.2002 16.0996 -29.9004c-3.09961 -10.3994 -12.7002 -17.0996 -23 -17.0996zM399 262.9c3.7998 -12.7002 -3.40039 -26.1006 -16.0996 -29.8008l-28.2002 -8.5
+c3.09961 -4.89941 5.2998 -10.3994 5.2998 -16.5996c0 -17.7002 -14.2998 -32 -32 -32s-32 14.2998 -32 32c-10.2998 0 -19.9004 6.7002 -23 17.0996c-3.7998 12.7002 3.40039 26.1006 16.0996 29.9004l80 24c12.8008 3.7998 26.1006 -3.40039 29.9004 -16.0996z" />
+    <glyph glyph-name="dizzy" unicode="&#xf567;" horiz-adv-x="496" 
+d="M248 440c137 0 248 -111 248 -248s-111 -248 -248 -248s-248 111 -248 248s111 248 248 248zM248 -8c110.3 0 200 89.7002 200 200s-89.7002 200 -200 200s-200 -89.7002 -200 -200s89.7002 -200 200 -200zM214.2 209.9
+c-7.90039 -7.90039 -20.5 -7.90039 -28.4004 -0.200195l-17.7998 17.7998l-17.7998 -17.7998c-7.7998 -7.7998 -20.5 -7.7998 -28.2998 0c-7.80078 7.7998 -7.80078 20.5 0 28.2998l17.8994 17.9004l-17.8994 17.8994c-7.80078 7.7998 -7.80078 20.5 0 28.2998
+c7.7998 7.80078 20.5 7.80078 28.2998 0l17.7998 -17.7998l17.9004 17.9004c7.7998 7.7998 20.5 7.7998 28.2998 0s7.7998 -20.5 0 -28.2998l-17.9004 -17.9004l17.9004 -17.7998c7.7998 -7.7998 7.7998 -20.5 0 -28.2998zM374.2 302.1
+c7.7002 -7.7998 7.7002 -20.3994 0 -28.1992l-17.9004 -17.9004l17.7998 -18c7.80078 -7.7998 7.80078 -20.5 0 -28.2998c-7.7998 -7.7998 -20.5 -7.7998 -28.2998 0l-17.7998 17.7998l-17.7998 -17.7998c-7.7998 -7.7998 -20.5 -7.7998 -28.2998 0
+c-7.80078 7.7998 -7.80078 20.5 0 28.2998l17.8994 17.9004l-17.8994 17.8994c-7.80078 7.7998 -7.80078 20.5 0 28.2998c7.7998 7.80078 20.5 7.80078 28.2998 0l17.7998 -17.7998l17.9004 17.7998c7.7998 7.80078 20.5 7.80078 28.2998 0zM248 176
+c35.2998 0 64 -28.7002 64 -64s-28.7002 -64 -64 -64s-64 28.7002 -64 64s28.7002 64 64 64z" />
+    <glyph glyph-name="flushed" unicode="&#xf579;" horiz-adv-x="496" 
+d="M248 440c137 0 248 -111 248 -248s-111 -248 -248 -248s-248 111 -248 248s111 248 248 248zM248 -8c110.3 0 200 89.7002 200 200s-89.7002 200 -200 200s-200 -89.7002 -200 -200s89.7002 -200 200 -200zM344 304c44.2002 0 80 -35.7998 80 -80s-35.7998 -80 -80 -80
+s-80 35.7998 -80 80s35.7998 80 80 80zM344 176c26.5 0 48 21.5 48 48s-21.5 48 -48 48s-48 -21.5 -48 -48s21.5 -48 48 -48zM344 248c13.2998 0 24 -10.7002 24 -24s-10.7002 -24 -24 -24s-24 10.7002 -24 24s10.7002 24 24 24zM232 224c0 -44.2002 -35.7998 -80 -80 -80
+s-80 35.7998 -80 80s35.7998 80 80 80s80 -35.7998 80 -80zM152 176c26.5 0 48 21.5 48 48s-21.5 48 -48 48s-48 -21.5 -48 -48s21.5 -48 48 -48zM152 248c13.2998 0 24 -10.7002 24 -24s-10.7002 -24 -24 -24s-24 10.7002 -24 24s10.7002 24 24 24zM312 104
+c13.2002 0 24 -10.7998 24 -24s-10.7998 -24 -24 -24h-128c-13.2002 0 -24 10.7998 -24 24s10.7998 24 24 24h128z" />
+    <glyph glyph-name="frown-open" unicode="&#xf57a;" horiz-adv-x="496" 
+d="M248 440c137 0 248 -111 248 -248s-111 -248 -248 -248s-248 111 -248 248s111 248 248 248zM248 -8c110.3 0 200 89.7002 200 200s-89.7002 200 -200 200s-200 -89.7002 -200 -200s89.7002 -200 200 -200zM200 240c0 -17.7002 -14.2998 -32 -32 -32s-32 14.2998 -32 32
+s14.2998 32 32 32s32 -14.2998 32 -32zM328 272c17.7002 0 32 -14.2998 32 -32s-14.2998 -32 -32 -32s-32 14.2998 -32 32s14.2998 32 32 32zM248 160c35.5996 0 88.7998 -21.2998 95.7998 -61.2002c2 -11.7998 -9.09961 -21.5996 -20.5 -18.0996
+c-31.2002 9.59961 -59.3994 15.2998 -75.2998 15.2998s-44.0996 -5.7002 -75.2998 -15.2998c-11.5 -3.40039 -22.5 6.2998 -20.5 18.0996c7 39.9004 60.2002 61.2002 95.7998 61.2002z" />
+    <glyph glyph-name="grimace" unicode="&#xf57f;" horiz-adv-x="496" 
+d="M248 440c137 0 248 -111 248 -248s-111 -248 -248 -248s-248 111 -248 248s111 248 248 248zM248 -8c110.3 0 200 89.7002 200 200s-89.7002 200 -200 200s-200 -89.7002 -200 -200s89.7002 -200 200 -200zM168 208c-17.7002 0 -32 14.2998 -32 32s14.2998 32 32 32
+s32 -14.2998 32 -32s-14.2998 -32 -32 -32zM328 208c-17.7002 0 -32 14.2998 -32 32s14.2998 32 32 32s32 -14.2998 32 -32s-14.2998 -32 -32 -32zM344 192c26.5 0 48 -21.5 48 -48v-32c0 -26.5 -21.5 -48 -48 -48h-192c-26.5 0 -48 21.5 -48 48v32c0 26.5 21.5 48 48 48
+h192zM176 96v24h-40v-8c0 -8.7998 7.2002 -16 16 -16h24zM176 136v24h-24c-8.7998 0 -16 -7.2002 -16 -16v-8h40zM240 96v24h-48v-24h48zM240 136v24h-48v-24h48zM304 96v24h-48v-24h48zM304 136v24h-48v-24h48zM360 112v8h-40v-24h24c8.7998 0 16 7.2002 16 16zM360 136v8
+c0 8.7998 -7.2002 16 -16 16h-24v-24h40z" />
+    <glyph glyph-name="grin" unicode="&#xf580;" horiz-adv-x="496" 
+d="M248 440c137 0 248 -111 248 -248s-111 -248 -248 -248s-248 111 -248 248s111 248 248 248zM248 -8c110.3 0 200 89.7002 200 200s-89.7002 200 -200 200s-200 -89.7002 -200 -200s89.7002 -200 200 -200zM353.6 143.4c10 3.09961 19.3008 -5.5 17.7002 -15.3008
+c-8 -47.0996 -71.2998 -80 -123.3 -80s-115.4 32.9004 -123.3 80c-1.7002 9.90039 7.7998 18.4004 17.7002 15.3008c26 -8.30078 64.3994 -13.1006 105.6 -13.1006s79.7002 4.7998 105.6 13.1006zM168 208c-17.7002 0 -32 14.2998 -32 32s14.2998 32 32 32
+s32 -14.2998 32 -32s-14.2998 -32 -32 -32zM328 208c-17.7002 0 -32 14.2998 -32 32s14.2998 32 32 32s32 -14.2998 32 -32s-14.2998 -32 -32 -32z" />
+    <glyph glyph-name="grin-alt" unicode="&#xf581;" horiz-adv-x="496" 
+d="M200.3 200c-7.5 -11.4004 -24.5996 -12 -32.7002 0c-12.3994 18.7002 -15.1992 37.2998 -15.6992 56c0.599609 18.7002 3.2998 37.2998 15.6992 56c7.60059 11.4004 24.7002 12 32.7002 0c12.4004 -18.7002 15.2002 -37.2998 15.7002 -56
+c-0.599609 -18.7002 -3.2998 -37.2998 -15.7002 -56zM328.3 200c-7.5 -11.4004 -24.5996 -12 -32.7002 0c-12.3994 18.7002 -15.1992 37.2998 -15.6992 56c0.599609 18.7002 3.2998 37.2998 15.6992 56c7.60059 11.4004 24.7002 12 32.7002 0
+c12.4004 -18.7002 15.2002 -37.2998 15.7002 -56c-0.599609 -18.7002 -3.2998 -37.2998 -15.7002 -56zM248 440c137 0 248 -111 248 -248s-111 -248 -248 -248s-248 111 -248 248s111 248 248 248zM248 -8c110.3 0 200 89.7002 200 200s-89.7002 200 -200 200
+s-200 -89.7002 -200 -200s89.7002 -200 200 -200zM353.6 143.4c10 3.09961 19.3008 -5.5 17.7002 -15.3008c-8 -47.0996 -71.2998 -80 -123.3 -80s-115.4 32.8008 -123.3 80c-1.7002 10 7.7998 18.4004 17.7002 15.3008c26 -8.30078 64.3994 -13.1006 105.6 -13.1006
+s79.7002 4.7998 105.6 13.1006z" />
+    <glyph glyph-name="grin-beam" unicode="&#xf582;" horiz-adv-x="496" 
+d="M248 440c137 0 248 -111 248 -248s-111 -248 -248 -248s-248 111 -248 248s111 248 248 248zM248 -8c110.3 0 200 89.7002 200 200s-89.7002 200 -200 200s-200 -89.7002 -200 -200s89.7002 -200 200 -200zM353.6 143.4c10 3.09961 19.3008 -5.5 17.7002 -15.3008
+c-8 -47.0996 -71.2998 -80 -123.3 -80s-115.4 32.9004 -123.3 80c-1.7002 10 7.89941 18.4004 17.7002 15.3008c26 -8.30078 64.3994 -13.1006 105.6 -13.1006s79.7002 4.7998 105.6 13.1006zM117.7 216.3c-3.60059 1.10059 -6 4.60059 -5.7002 8.2998
+c3.2998 42.1006 32.2002 71.4004 56 71.4004s52.7002 -29.2998 56 -71.4004c0.299805 -3.7998 -2.09961 -7.19922 -5.7002 -8.2998c-3.09961 -1 -7.2002 0 -9.2998 3.7002l-9.5 17c-7.7002 13.7002 -19.2002 21.5996 -31.5 21.5996s-23.7998 -7.89941 -31.5 -21.5996
+l-9.5 -17c-1.90039 -3.2002 -5.7998 -4.7998 -9.2998 -3.7002zM277.7 216.3c-3.60059 1.10059 -6 4.60059 -5.7002 8.2998c3.2998 42.1006 32.2002 71.4004 56 71.4004s52.7002 -29.2998 56 -71.4004c0.299805 -3.7998 -2.09961 -7.19922 -5.7002 -8.2998
+c-3.09961 -1 -7.2002 0 -9.2998 3.7002l-9.5 17c-7.7002 13.7002 -19.2002 21.5996 -31.5 21.5996s-23.7998 -7.89941 -31.5 -21.5996l-9.5 -17c-1.90039 -3.2002 -5.7998 -4.7998 -9.2998 -3.7002z" />
+    <glyph glyph-name="grin-beam-sweat" unicode="&#xf583;" horiz-adv-x="496" 
+d="M440 288c-29.5 0 -53.2998 26.2998 -53.2998 58.7002c0 25 31.7002 75.5 46.2002 97.2998c3.5 5.2998 10.5996 5.2998 14.1992 0c14.5 -21.7998 46.2002 -72.2998 46.2002 -97.2998c0 -32.4004 -23.7998 -58.7002 -53.2998 -58.7002zM248 48
+c-51.9004 0 -115.3 32.9004 -123.3 80c-1.7002 10 7.89941 18.4004 17.7002 15.2998c26 -8.2998 64.3994 -13.0996 105.6 -13.0996s79.7002 4.7998 105.6 13.0996c10 3.2002 19.4004 -5.39941 17.7002 -15.2998c-8 -47.0996 -71.3994 -80 -123.3 -80zM378.3 216.3
+c-3.09961 -0.899414 -7.2002 0.100586 -9.2998 3.7002l-9.5 17c-7.7002 13.7002 -19.2002 21.5996 -31.5 21.5996s-23.7998 -7.89941 -31.5 -21.5996l-9.5 -17c-1.90039 -3.2002 -5.7998 -4.7998 -9.2998 -3.7002c-3.60059 1.10059 -6 4.60059 -5.7002 8.2998
+c3.2998 42.1006 32.2002 71.4004 56 71.4004s52.7002 -29.2998 56 -71.4004c0.299805 -3.7998 -2.09961 -7.19922 -5.7002 -8.2998zM483.6 269.2c8 -24.2998 12.4004 -50.2002 12.4004 -77.2002c0 -137 -111 -248 -248 -248s-248 111 -248 248s111 248 248 248
+c45.7002 0 88.4004 -12.5996 125.2 -34.2002c-10.9004 -21.5996 -15.5 -36.2002 -17.2002 -45.7002c-31.2002 20.1006 -68.2002 31.9004 -108 31.9004c-110.3 0 -200 -89.7002 -200 -200s89.7002 -200 200 -200s200 89.7002 200 200
+c0 22.5 -3.90039 44.0996 -10.7998 64.2998c0.399414 0 21.7998 -2.7998 46.3994 12.9004zM168 258.6c-12.2998 0 -23.7998 -7.7998 -31.5 -21.5996l-9.5 -17c-1.90039 -3.2002 -5.7998 -4.7998 -9.2998 -3.7002c-3.60059 1.10059 -6 4.60059 -5.7002 8.2998
+c3.2998 42.1006 32.2002 71.4004 56 71.4004s52.7002 -29.2998 56 -71.4004c0.299805 -3.7998 -2.09961 -7.19922 -5.7002 -8.2998c-3.09961 -1 -7.2002 0 -9.2998 3.7002l-9.5 17c-7.7002 13.7002 -19.2002 21.5996 -31.5 21.5996z" />
+    <glyph glyph-name="grin-hearts" unicode="&#xf584;" horiz-adv-x="496" 
+d="M353.6 143.4c10 3.09961 19.3008 -5.5 17.7002 -15.3008c-8 -47.0996 -71.2998 -80 -123.3 -80s-115.4 32.8008 -123.3 80c-1.7002 10 7.89941 18.4004 17.7002 15.3008c26 -8.30078 64.3994 -13.1006 105.6 -13.1006s79.7002 4.7998 105.6 13.1006zM200.8 192.3
+l-70.2002 18.1006c-20.3994 5.2998 -31.8994 27 -24.1992 47.1992c6.69922 17.7002 26.6992 26.7002 44.8994 22l7.10059 -1.89941l2 7.09961c5.09961 18.1006 22.8994 30.9004 41.5 27.9004c21.3994 -3.40039 34.3994 -24.2002 28.7998 -44.5l-19.4004 -69.9004
+c-1.2998 -4.5 -6 -7.2002 -10.5 -6zM389.6 257.6c7.7002 -20.1992 -3.7998 -41.7998 -24.1992 -47.0996l-70.2002 -18.2002c-4.60059 -1.2002 -9.2998 1.5 -10.5 6l-19.4004 69.9004c-5.59961 20.2998 7.40039 41.0996 28.7998 44.5c18.7002 3 36.5 -9.7998 41.5 -27.9004
+l2 -7.09961l7.10059 1.89941c18.2002 4.7002 38.2002 -4.39941 44.8994 -22zM248 440c137 0 248 -111 248 -248s-111 -248 -248 -248s-248 111 -248 248s111 248 248 248zM248 -8c110.3 0 200 89.7002 200 200s-89.7002 200 -200 200s-200 -89.7002 -200 -200
+s89.7002 -200 200 -200z" />
+    <glyph glyph-name="grin-squint" unicode="&#xf585;" horiz-adv-x="496" 
+d="M248 440c137 0 248 -111 248 -248s-111 -248 -248 -248s-248 111 -248 248s111 248 248 248zM248 -8c110.3 0 200 89.7002 200 200s-89.7002 200 -200 200s-200 -89.7002 -200 -200s89.7002 -200 200 -200zM353.6 143.4c10 3.09961 19.3008 -5.5 17.7002 -15.3008
+c-8 -47.0996 -71.2998 -80 -123.3 -80s-115.4 32.9004 -123.3 80c-1.7002 9.90039 7.7998 18.4004 17.7002 15.3008c26 -8.30078 64.3994 -13.1006 105.6 -13.1006s79.7002 4.7998 105.6 13.1006zM118.9 184.2c-3.80078 4.39941 -3.90039 11 -0.100586 15.5l33.6006 40.2998
+l-33.6006 40.2998c-3.7002 4.5 -3.7002 11 0.100586 15.5c3.89941 4.40039 10.1992 5.5 15.2998 2.5l80 -48c3.59961 -2.2002 5.7998 -6.09961 5.7998 -10.2998s-2.2002 -8.09961 -5.7998 -10.2998l-80 -48c-5.40039 -3.2002 -11.7002 -1.7002 -15.2998 2.5zM361.8 181.7
+l-80 48c-3.59961 2.2002 -5.7998 6.09961 -5.7998 10.2998s2.2002 8.09961 5.7998 10.2998l80 48c5.10059 2.90039 11.5 1.90039 15.2998 -2.5c3.80078 -4.5 3.90039 -11 0.100586 -15.5l-33.6006 -40.2998l33.6006 -40.2998c3.7002 -4.5 3.7002 -11 -0.100586 -15.5
+c-3.59961 -4.2002 -9.89941 -5.7002 -15.2998 -2.5z" />
+    <glyph glyph-name="grin-squint-tears" unicode="&#xf586;" 
+d="M117.1 63.9004c6.30078 0.899414 11.7002 -4.5 10.9004 -10.9004c-3.7002 -25.7998 -13.7002 -84 -30.5996 -100.9c-22 -21.8994 -57.9004 -21.5 -80.3008 0.900391c-22.3994 22.4004 -22.7998 58.4004 -0.899414 80.2998
+c16.8994 16.9004 75.0996 26.9004 100.899 30.6006zM75.9004 105.6c-19.6006 -3.89941 -35.1006 -8.09961 -47.3008 -12.1992c-39.2998 90.5996 -22.0996 199.899 52 274c48.5 48.3994 111.9 72.5996 175.4 72.5996c38.9004 0 77.7998 -9.2002 113.2 -27.4004
+c-4 -12.1992 -8.2002 -28 -12 -48.2998c-30.4004 17.9004 -65 27.7002 -101.2 27.7002c-53.4004 0 -103.6 -20.7998 -141.4 -58.5996c-61.5996 -61.5 -74.2998 -153.4 -38.6992 -227.801zM428.2 293.2c20.2998 3.89941 36.2002 8 48.5 12
+c47.8994 -93.2002 32.8994 -210.5 -45.2002 -288.601c-48.5 -48.3994 -111.9 -72.5996 -175.4 -72.5996c-33.6992 0 -67.2998 7 -98.6992 20.5996c4.19922 12.2002 8.2998 27.7002 12.1992 47.2002c26.6006 -12.7998 55.9004 -19.7998 86.4004 -19.7998
+c53.4004 0 103.6 20.7998 141.4 58.5996c65.6992 65.7002 75.7998 166 30.7998 242.601zM394.9 320.1c-6.30078 -0.899414 -11.7002 4.5 -10.9004 10.9004c3.7002 25.7998 13.7002 84 30.5996 100.9c22 21.8994 57.9004 21.5 80.3008 -0.900391
+c22.3994 -22.4004 22.7998 -58.4004 0.899414 -80.2998c-16.8994 -16.9004 -75.0996 -26.9004 -100.899 -30.6006zM207.9 211.8c3 -3 4.19922 -7.2998 3.19922 -11.5l-22.5996 -90.5c-1.40039 -5.39941 -6.2002 -9.09961 -11.7002 -9.09961h-0.899414
+c-5.80078 0.5 -10.5 5.09961 -11 10.8994l-4.80078 52.3008l-52.2998 4.7998c-5.7998 0.5 -10.3994 5.2002 -10.8994 11c-0.400391 5.89941 3.39941 11.2002 9.09961 12.5996l90.5 22.7002c4.2002 1 8.40039 -0.200195 11.4004 -3.2002zM247.6 236.9
+c-0.0996094 0 -6.39941 -1.80078 -11.3994 3.19922c-3 3 -4.2002 7.30078 -3.2002 11.4004l22.5996 90.5c1.40039 5.7002 7 9.2002 12.6006 9.09961c5.7998 -0.5 10.5 -5.09961 11 -10.8994l4.7998 -52.2998l52.2998 -4.80078c5.7998 -0.5 10.4004 -5.19922 10.9004 -11
+c0.399414 -5.89941 -3.40039 -11.1992 -9.10059 -12.5996zM299.6 148.4c29.1006 29.0996 53 59.5996 65.3008 83.7998c4.89941 9.2998 17.5996 9.89941 23.3994 1.7002c27.7002 -38.9004 6.10059 -106.9 -30.5996 -143.7s-104.8 -58.2998 -143.7 -30.6006
+c-8.2998 5.90039 -7.5 18.6006 1.7002 23.4004c24.2002 12.5 54.7998 36.2998 83.8994 65.4004z" />
+    <glyph glyph-name="grin-stars" unicode="&#xf587;" horiz-adv-x="496" 
+d="M248 440c137 0 248 -111 248 -248s-111 -248 -248 -248s-248 111 -248 248s111 248 248 248zM248 -8c110.3 0 200 89.7002 200 200s-89.7002 200 -200 200s-200 -89.7002 -200 -200s89.7002 -200 200 -200zM353.6 143.4c10 3.09961 19.3008 -5.5 17.7002 -15.3008
+c-8 -47.0996 -71.2998 -80 -123.3 -80s-115.4 32.8008 -123.3 80c-1.7002 10 7.89941 18.4004 17.7002 15.3008c26 -8.30078 64.3994 -13.1006 105.6 -13.1006s79.7002 4.7998 105.6 13.1006zM125.7 200.9l6.09961 34.8994l-25.3994 24.6006
+c-4.60059 4.59961 -1.90039 12.2998 4.2998 13.1992l34.8994 5l15.5 31.6006c2.90039 5.7998 11 5.7998 13.9004 0l15.5 -31.6006l34.9004 -5c6.19922 -1 8.7998 -8.69922 4.2998 -13.1992l-25.4004 -24.6006l6 -34.8994c1 -6.2002 -5.39941 -11 -11 -7.90039
+l-31.2998 16.2998l-31.2998 -16.2998c-5.60059 -3.09961 -12 1.7002 -11 7.90039zM385.4 273.6c6.19922 -1 8.89941 -8.59961 4.39941 -13.1992l-25.3994 -24.6006l6 -34.8994c1 -6.2002 -5.40039 -11 -11 -7.90039l-31.3008 16.2998l-31.2998 -16.2998
+c-5.59961 -3.09961 -12 1.7002 -11 7.90039l6 34.8994l-25.3994 24.6006c-4.60059 4.59961 -1.90039 12.2998 4.2998 13.1992l34.8994 5l15.5 31.6006c2.90039 5.7998 11 5.7998 13.9004 0l15.5 -31.6006z" />
+    <glyph glyph-name="grin-tears" unicode="&#xf588;" horiz-adv-x="640" 
+d="M117.1 191.9c6.30078 0.899414 11.7002 -4.5 10.9004 -10.9004c-3.7002 -25.7998 -13.7002 -84 -30.5996 -100.9c-22 -21.8994 -57.9004 -21.5 -80.3008 0.900391c-22.3994 22.4004 -22.7998 58.4004 -0.899414 80.2998c16.8994 16.9004 75.0996 26.9004 100.899 30.6006
+zM623.8 161.3c21.9004 -21.8994 21.5 -57.8994 -0.799805 -80.2002c-22.4004 -22.3994 -58.4004 -22.7998 -80.2998 -0.899414c-16.9004 16.8994 -26.9004 75.0996 -30.6006 100.899c-0.899414 6.30078 4.5 11.7002 10.8008 10.8008
+c25.7998 -3.7002 84 -13.7002 100.899 -30.6006zM497.2 99.5996c12.3994 -37.2998 25.0996 -43.7998 28.2998 -46.5c-44.5996 -65.7998 -120 -109.1 -205.5 -109.1s-160.9 43.2998 -205.5 109.1c3.09961 2.60059 15.7998 9.10059 28.2998 46.5
+c33.4004 -63.8994 100.3 -107.6 177.2 -107.6s143.8 43.7002 177.2 107.6zM122.7 223.5c-2.40039 0.299805 -5 2.5 -49.5 -6.90039c12.3994 125.4 118.1 223.4 246.8 223.4s234.4 -98 246.8 -223.5c-44.2998 9.40039 -47.3994 7.2002 -49.5 7
+c-15.2002 95.2998 -97.7998 168.5 -197.3 168.5s-182.1 -73.2002 -197.3 -168.5zM320 48c-51.9004 0 -115.3 32.9004 -123.3 80c-1.7002 10 7.89941 18.4004 17.7002 15.2998c26 -8.2998 64.3994 -13.0996 105.6 -13.0996s79.7002 4.7998 105.6 13.0996
+c10 3.2002 19.4004 -5.39941 17.7002 -15.2998c-8 -47.0996 -71.3994 -80 -123.3 -80zM450.3 216.3c-3.09961 -0.899414 -7.2002 0.100586 -9.2998 3.7002l-9.5 17c-7.7002 13.7002 -19.2002 21.5996 -31.5 21.5996s-23.7998 -7.89941 -31.5 -21.5996l-9.5 -17
+c-1.90039 -3.2002 -5.7998 -4.7998 -9.2998 -3.7002c-3.60059 1.10059 -6 4.60059 -5.7002 8.2998c3.2998 42.1006 32.2002 71.4004 56 71.4004s52.7002 -29.2998 56 -71.4004c0.299805 -3.7998 -2.09961 -7.19922 -5.7002 -8.2998zM240 258.6
+c-12.2998 0 -23.7998 -7.7998 -31.5 -21.5996l-9.5 -17c-1.90039 -3.2002 -5.7998 -4.7998 -9.2998 -3.7002c-3.60059 1.10059 -6 4.60059 -5.7002 8.2998c3.2998 42.1006 32.2002 71.4004 56 71.4004s52.7002 -29.2998 56 -71.4004
+c0.299805 -3.7998 -2.09961 -7.19922 -5.7002 -8.2998c-3.09961 -1 -7.2002 0 -9.2998 3.7002l-9.5 17c-7.7002 13.7002 -19.2002 21.5996 -31.5 21.5996z" />
+    <glyph glyph-name="grin-tongue" unicode="&#xf589;" horiz-adv-x="496" 
+d="M248 440c137 0 248 -111 248 -248s-111 -248 -248 -248s-248 111 -248 248s111 248 248 248zM312 40h0.0996094v43.7998l-17.6992 8.7998c-15.1006 7.60059 -31.5 -1.69922 -34.9004 -16.5l-2.7998 -12.0996c-2.10059 -9.2002 -15.2002 -9.2002 -17.2998 0
+l-2.80078 12.0996c-3.39941 14.8008 -19.8994 24 -34.8994 16.5l-17.7002 -8.7998v-42.7998c0 -35.2002 28 -64.5 63.0996 -65c35.8008 -0.5 64.9004 28.4004 64.9004 64zM340.2 14.7002c64 33.3994 107.8 100.3 107.8 177.3c0 110.3 -89.7002 200 -200 200
+s-200 -89.7002 -200 -200c0 -77 43.7998 -143.9 107.8 -177.3c-2.2002 8.09961 -3.7998 16.5 -3.7998 25.2998v43.5c-14.2002 12.4004 -24.4004 27.5 -27.2998 44.5c-1.7002 10 7.7998 18.4004 17.7002 15.2998c26 -8.2998 64.3994 -13.0996 105.6 -13.0996
+s79.7002 4.7998 105.6 13.0996c10 3.2002 19.4004 -5.39941 17.7002 -15.2998c-2.89941 -17 -13.0996 -32.0996 -27.2998 -44.5v-43.5c0 -8.7998 -1.59961 -17.2002 -3.7998 -25.2998zM168 272c17.7002 0 32 -14.2998 32 -32s-14.2998 -32 -32 -32s-32 14.2998 -32 32
+s14.2998 32 32 32zM328 272c17.7002 0 32 -14.2998 32 -32s-14.2998 -32 -32 -32s-32 14.2998 -32 32s14.2998 32 32 32z" />
+    <glyph glyph-name="grin-tongue-squint" unicode="&#xf58a;" horiz-adv-x="496" 
+d="M248 440c137 0 248 -111 248 -248s-111 -248 -248 -248s-248 111 -248 248s111 248 248 248zM312 40h0.0996094v43.7998l-17.6992 8.7998c-15.1006 7.60059 -31.5 -1.69922 -34.9004 -16.5l-2.7998 -12.0996c-2.10059 -9.2002 -15.2002 -9.2002 -17.2998 0
+l-2.80078 12.0996c-3.39941 14.8008 -19.8994 24 -34.8994 16.5l-17.7002 -8.7998v-42.7998c0 -35.2002 28 -64.5 63.0996 -65c35.8008 -0.5 64.9004 28.4004 64.9004 64zM340.2 14.7002c64 33.3994 107.8 100.3 107.8 177.3c0 110.3 -89.7002 200 -200 200
+s-200 -89.7002 -200 -200c0 -77 43.7998 -143.9 107.8 -177.3c-2.2002 8.09961 -3.7998 16.5 -3.7998 25.2998v43.5c-14.2002 12.4004 -24.4004 27.5 -27.2998 44.5c-1.7002 10 7.7998 18.4004 17.7002 15.2998c26 -8.2998 64.3994 -13.0996 105.6 -13.0996
+s79.7002 4.7998 105.6 13.0996c10 3.2002 19.4004 -5.39941 17.7002 -15.2998c-2.89941 -17 -13.0996 -32.0996 -27.2998 -44.5v-43.5c0 -8.7998 -1.59961 -17.2002 -3.7998 -25.2998zM377.1 295.8c3.80078 -4.39941 3.90039 -11 0.100586 -15.5l-33.6006 -40.2998
+l33.6006 -40.2998c3.7002 -4.5 3.7002 -11 -0.100586 -15.5c-3.59961 -4.2002 -9.89941 -5.7002 -15.2998 -2.5l-80 48c-3.59961 2.2002 -5.7998 6.09961 -5.7998 10.2998s2.2002 8.09961 5.7998 10.2998l80 48c5 3 11.5 1.90039 15.2998 -2.5zM214.2 250.3
+c3.59961 -2.2002 5.7998 -6.09961 5.7998 -10.2998s-2.2002 -8.09961 -5.7998 -10.2998l-80 -48c-5.40039 -3.2002 -11.7002 -1.7002 -15.2998 2.5c-3.80078 4.5 -3.90039 11 -0.100586 15.5l33.6006 40.2998l-33.6006 40.2998c-3.7002 4.5 -3.7002 11 0.100586 15.5
+c3.89941 4.5 10.2998 5.5 15.2998 2.5z" />
+    <glyph glyph-name="grin-tongue-wink" unicode="&#xf58b;" horiz-adv-x="496" 
+d="M152 268c25.7002 0 55.9004 -16.9004 59.7998 -42.0996c0.799805 -5 -1.7002 -10 -6.09961 -12.4004c-5.7002 -3.09961 -11.2002 -0.599609 -13.7002 1.59961l-9.5 8.5c-14.7998 13.2002 -46.2002 13.2002 -61 0l-9.5 -8.5
+c-3.7998 -3.39941 -9.2998 -4 -13.7002 -1.59961c-4.39941 2.40039 -6.89941 7.40039 -6.09961 12.4004c3.89941 25.1992 34.0996 42.0996 59.7998 42.0996zM328 320c44.2002 0 80 -35.7998 80 -80s-35.7998 -80 -80 -80s-80 35.7998 -80 80s35.7998 80 80 80zM328 192
+c26.5 0 48 21.5 48 48s-21.5 48 -48 48s-48 -21.5 -48 -48s21.5 -48 48 -48zM328 264c13.2998 0 24 -10.7002 24 -24s-10.7002 -24 -24 -24s-24 10.7002 -24 24s10.7002 24 24 24zM248 440c137 0 248 -111 248 -248s-111 -248 -248 -248s-248 111 -248 248s111 248 248 248z
+M312 40h0.0996094v43.7998l-17.6992 8.7998c-15.1006 7.60059 -31.5 -1.69922 -34.9004 -16.5l-2.7998 -12.0996c-2.10059 -9.2002 -15.2002 -9.2002 -17.2998 0l-2.80078 12.0996c-3.39941 14.8008 -19.8994 24 -34.8994 16.5l-17.7002 -8.7998v-42.7998
+c0 -35.2002 28 -64.5 63.0996 -65c35.8008 -0.5 64.9004 28.4004 64.9004 64zM340.2 14.7002c64 33.3994 107.8 100.3 107.8 177.3c0 110.3 -89.7002 200 -200 200s-200 -89.7002 -200 -200c0 -77 43.7998 -143.9 107.8 -177.3
+c-2.2002 8.09961 -3.7998 16.5 -3.7998 25.2998v43.5c-14.2002 12.4004 -24.4004 27.5 -27.2998 44.5c-1.7002 10 7.7998 18.4004 17.7002 15.2998c26 -8.2998 64.3994 -13.0996 105.6 -13.0996s79.7002 4.7998 105.6 13.0996c10 3.2002 19.4004 -5.39941 17.7002 -15.2998
+c-2.89941 -17 -13.0996 -32.0996 -27.2998 -44.5v-43.5c0 -8.7998 -1.59961 -17.2002 -3.7998 -25.2998z" />
+    <glyph glyph-name="grin-wink" unicode="&#xf58c;" horiz-adv-x="496" 
+d="M328 268c25.6904 0 55.8799 -16.9199 59.8701 -42.1201c1.72949 -11.0898 -11.3506 -18.2695 -19.8301 -10.8398l-9.5498 8.47949c-14.8105 13.1904 -46.1602 13.1904 -60.9707 0l-9.5498 -8.47949c-8.33008 -7.40039 -21.5801 -0.379883 -19.8301 10.8398
+c3.98047 25.2002 34.1699 42.1201 59.8604 42.1201zM168 208c-17.6699 0 -32 14.3301 -32 32s14.3301 32 32 32s32 -14.3301 32 -32s-14.3301 -32 -32 -32zM353.55 143.36c10.04 3.13965 19.3906 -5.4502 17.71 -15.3408
+c-7.92969 -47.1494 -71.3193 -80.0195 -123.26 -80.0195s-115.33 32.8701 -123.26 80.0195c-1.69043 9.9707 7.76953 18.4707 17.71 15.3408c25.9297 -8.31055 64.3994 -13.0605 105.55 -13.0605s79.6201 4.75977 105.55 13.0605zM248 440c136.97 0 248 -111.03 248 -248
+s-111.03 -248 -248 -248s-248 111.03 -248 248s111.03 248 248 248zM248 -8c110.28 0 200 89.7197 200 200s-89.7197 200 -200 200s-200 -89.7197 -200 -200s89.7197 -200 200 -200z" />
+    <glyph glyph-name="kiss" unicode="&#xf596;" horiz-adv-x="496" 
+d="M168 272c17.7002 0 32 -14.2998 32 -32s-14.2998 -32 -32 -32s-32 14.2998 -32 32s14.2998 32 32 32zM304 140c0 -13 -13.4004 -27.2998 -35.0996 -36.4004c21.7998 -8.69922 35.1992 -23 35.1992 -36c0 -19.1992 -28.6992 -41.5 -71.5 -44h-0.5
+c-3.69922 0 -7 2.60059 -7.7998 6.2002c-0.899414 3.7998 1.10059 7.7002 4.7002 9.2002l17 7.2002c12.9004 5.5 20.7002 13.5 20.7002 21.5s-7.7998 16 -20.7998 21.5l-16.9004 7.2002c-6 2.59961 -5.7002 12.3994 0 14.7998l17 7.2002
+c12.9004 5.5 20.7002 13.5 20.7002 21.5s-7.7998 16 -20.7998 21.5l-16.9004 7.19922c-3.59961 1.5 -5.59961 5.40039 -4.7002 9.2002c0.799805 3.7998 4.40039 6.60059 8.2002 6.2002c42.7002 -2.5 71.5 -24.7998 71.5 -44zM248 440c137 0 248 -111 248 -248
+s-111 -248 -248 -248s-248 111 -248 248s111 248 248 248zM248 -8c110.3 0 200 89.7002 200 200s-89.7002 200 -200 200s-200 -89.7002 -200 -200s89.7002 -200 200 -200zM328 272c17.7002 0 32 -14.2998 32 -32s-14.2998 -32 -32 -32s-32 14.2998 -32 32s14.2998 32 32 32z
+" />
+    <glyph glyph-name="kiss-beam" unicode="&#xf597;" horiz-adv-x="496" 
+d="M168 296c23.7998 0 52.7002 -29.2998 55.7998 -71.4004c0.299805 -3.7998 -2 -7.19922 -5.59961 -8.2998c-3.10059 -1 -7.2002 0 -9.2998 3.7002l-9.5 17c-7.7002 13.7002 -19.2002 21.5996 -31.5 21.5996c-12.3008 0 -23.8008 -7.89941 -31.5 -21.5996l-9.5 -17
+c-1.80078 -3.2002 -5.80078 -4.7002 -9.30078 -3.7002c-3.59961 1.10059 -5.89941 4.60059 -5.59961 8.2998c3.2998 42.1006 32.2002 71.4004 56 71.4004zM248 440c137 0 248 -111 248 -248s-111 -248 -248 -248s-248 111 -248 248s111 248 248 248zM248 -8
+c110.3 0 200 89.7002 200 200s-89.7002 200 -200 200s-200 -89.7002 -200 -200s89.7002 -200 200 -200zM304 140c0 -13 -13.4004 -27.2998 -35.0996 -36.4004c21.7998 -8.69922 35.1992 -23 35.1992 -36c0 -19.1992 -28.6992 -41.5 -71.5 -44h-0.5
+c-3.69922 0 -7 2.60059 -7.7998 6.2002c-0.899414 3.7998 1.10059 7.7002 4.7002 9.2002l17 7.2002c12.9004 5.5 20.7002 13.5 20.7002 21.5s-7.7998 16 -20.7998 21.5l-16.9004 7.2002c-6 2.59961 -5.7002 12.3994 0 14.7998l17 7.2002
+c12.9004 5.5 20.7002 13.5 20.7002 21.5s-7.7998 16 -20.7998 21.5l-16.9004 7.19922c-3.59961 1.5 -5.59961 5.40039 -4.7002 9.2002c0.799805 3.7998 4.40039 6.60059 8.2002 6.2002c42.7002 -2.5 71.5 -24.7998 71.5 -44zM328 296
+c23.7998 0 52.7002 -29.2998 55.7998 -71.4004c0.299805 -3.7998 -2 -7.19922 -5.59961 -8.2998c-3.10059 -1 -7.2002 0 -9.2998 3.7002l-9.5 17c-7.7002 13.7002 -19.2002 21.5996 -31.5 21.5996c-12.3008 0 -23.8008 -7.89941 -31.5 -21.5996l-9.5 -17
+c-1.80078 -3.2002 -5.80078 -4.7002 -9.30078 -3.7002c-3.59961 1.10059 -5.89941 4.60059 -5.59961 8.2998c3.2998 42.1006 32.2002 71.4004 56 71.4004z" />
+    <glyph glyph-name="kiss-wink-heart" unicode="&#xf598;" horiz-adv-x="504" 
+d="M304 139.5c0 -13 -13.4004 -27.2998 -35.0996 -36.4004c21.7998 -8.69922 35.1992 -23 35.1992 -36c0 -19.1992 -28.6992 -41.5 -71.5 -44h-0.5c-3.69922 0 -7 2.60059 -7.7998 6.2002c-0.899414 3.7998 1.10059 7.7002 4.7002 9.2002l17 7.2002
+c12.9004 5.5 20.7002 13.5 20.7002 21.5s-7.7998 16 -20.7998 21.5l-16.9004 7.2002c-6 2.59961 -5.7002 12.3994 0 14.7998l17 7.2002c12.9004 5.5 20.7002 13.5 20.7002 21.5s-7.7998 16 -20.7998 21.5l-16.9004 7.19922c-3.59961 1.5 -5.59961 5.40039 -4.7002 9.2002
+c0.799805 3.7998 4.40039 6.60059 8.2002 6.2002c42.7002 -2.5 71.5 -24.7998 71.5 -44zM374.5 223c-14.7998 13.2002 -46.2002 13.2002 -61 0l-9.5 -8.5c-2.5 -2.2998 -7.90039 -4.7002 -13.7002 -1.59961c-4.39941 2.39941 -6.89941 7.39941 -6.09961 12.3994
+c3.89941 25.2002 34.2002 42.1006 59.7998 42.1006s55.7998 -16.9004 59.7998 -42.1006c0.799805 -5 -1.7002 -10 -6.09961 -12.3994c-4.40039 -2.40039 -9.90039 -1.7002 -13.7002 1.59961zM136 239.5c0 17.7002 14.2998 32 32 32s32 -14.2998 32 -32s-14.2998 -32 -32 -32
+s-32 14.2998 -32 32zM501.1 45.5c9.2002 -23.9004 -4.39941 -49.4004 -28.5 -55.7002l-83 -21.5c-5.39941 -1.39941 -10.8994 1.7998 -12.3994 7.10059l-22.9004 82.5996c-6.59961 24 8.7998 48.5996 34 52.5996c22 3.5 43.1006 -11.5996 49 -33l2.2998 -8.39941
+l8.40039 2.2002c21.5996 5.59961 45.0996 -5.10059 53.0996 -25.9004zM334 11.7002c17.7002 -64 10.9004 -39.5 13.4004 -46.7998c-30.5 -13.4004 -64 -20.9004 -99.4004 -20.9004c-137 0 -248 111 -248 248s111 248 248 248s248 -111 247.9 -248
+c0 -31.7998 -6.2002 -62.0996 -17.1006 -90c-6 1.5 -12.2002 2.7998 -18.5996 2.90039c-5.60059 9.69922 -13.6006 17.5 -22.6006 23.8994c6.7002 19.9004 10.4004 41.1006 10.4004 63.2002c0 110.3 -89.7002 200 -200 200s-200 -89.7002 -200 -200s89.7002 -200 200 -200
+c30.7998 0 59.9004 7.2002 86 19.7002z" />
+    <glyph glyph-name="laugh" unicode="&#xf599;" horiz-adv-x="496" 
+d="M248 440c137 0 248 -111 248 -248s-111 -248 -248 -248s-248 111 -248 248s111 248 248 248zM389.4 50.5996c37.7998 37.8008 58.5996 88 58.5996 141.4s-20.7998 103.6 -58.5996 141.4c-37.8008 37.7998 -88 58.5996 -141.4 58.5996s-103.6 -20.7998 -141.4 -58.5996
+c-37.7998 -37.8008 -58.5996 -88 -58.5996 -141.4s20.7998 -103.6 58.5996 -141.4c37.8008 -37.7998 88 -58.5996 141.4 -58.5996s103.6 20.7998 141.4 58.5996zM328 224c-17.7002 0 -32 14.2998 -32 32s14.2998 32 32 32s32 -14.2998 32 -32s-14.2998 -32 -32 -32zM168 224
+c-17.7002 0 -32 14.2998 -32 32s14.2998 32 32 32s32 -14.2998 32 -32s-14.2998 -32 -32 -32zM362.4 160c8.19922 0 14.5 -7 13.5 -15c-7.5 -59.2002 -58.9004 -105 -121.101 -105h-13.5996c-62.2002 0 -113.601 45.7998 -121.101 105c-1 8 5.30078 15 13.5 15h228.801z" />
+    <glyph glyph-name="laugh-beam" unicode="&#xf59a;" horiz-adv-x="496" 
+d="M248 440c137 0 248 -111 248 -248s-111 -248 -248 -248s-248 111 -248 248s111 248 248 248zM389.4 50.5996c37.7998 37.8008 58.5996 88 58.5996 141.4s-20.7998 103.6 -58.5996 141.4c-37.8008 37.7998 -88 58.5996 -141.4 58.5996s-103.6 -20.7998 -141.4 -58.5996
+c-37.7998 -37.8008 -58.5996 -88 -58.5996 -141.4s20.7998 -103.6 58.5996 -141.4c37.8008 -37.7998 88 -58.5996 141.4 -58.5996s103.6 20.7998 141.4 58.5996zM328 296c23.7998 0 52.7002 -29.2998 55.7998 -71.4004c0.700195 -8.5 -10.7998 -11.8994 -14.8994 -4.5
+l-9.5 17c-7.7002 13.7002 -19.2002 21.6006 -31.5 21.6006c-12.3008 0 -23.8008 -7.90039 -31.5 -21.6006l-9.5 -17c-4.10059 -7.39941 -15.6006 -4.09961 -14.9004 4.5c3.2998 42.1006 32.2002 71.4004 56 71.4004zM127 220.1c-4.2002 -7.39941 -15.7002 -4 -15.0996 4.5
+c3.2998 42.1006 32.1992 71.4004 56 71.4004c23.7998 0 52.6992 -29.2998 56 -71.4004c0.699219 -8.5 -10.8008 -11.8994 -14.9004 -4.5l-9.5 17c-7.7002 13.7002 -19.2002 21.6006 -31.5 21.6006s-23.7998 -7.90039 -31.5 -21.6006zM362.4 160c8.19922 0 14.5 -7 13.5 -15
+c-7.5 -59.2002 -58.9004 -105 -121.101 -105h-13.5996c-62.2002 0 -113.601 45.7998 -121.101 105c-1 8 5.30078 15 13.5 15h228.801z" />
+    <glyph glyph-name="laugh-squint" unicode="&#xf59b;" horiz-adv-x="496" 
+d="M248 440c137 0 248 -111 248 -248s-111 -248 -248 -248s-248 111 -248 248s111 248 248 248zM389.4 50.5996c37.7998 37.8008 58.5996 88 58.5996 141.4s-20.7998 103.6 -58.5996 141.4c-37.8008 37.7998 -88 58.5996 -141.4 58.5996s-103.6 -20.7998 -141.4 -58.5996
+c-37.7998 -37.8008 -58.5996 -88 -58.5996 -141.4s20.7998 -103.6 58.5996 -141.4c37.8008 -37.7998 88 -58.5996 141.4 -58.5996s103.6 20.7998 141.4 58.5996zM343.6 252l33.6006 -40.2998c8.59961 -10.4004 -3.90039 -24.7998 -15.4004 -18l-80 48
+c-7.7998 4.7002 -7.7998 15.8994 0 20.5996l80 48c11.6006 6.7998 24 -7.7002 15.4004 -18zM134.2 193.7c-11.6006 -6.7998 -24.1006 7.59961 -15.4004 18l33.6006 40.2998l-33.6006 40.2998c-8.59961 10.2998 3.7998 24.9004 15.4004 18l80 -48
+c7.7998 -4.7002 7.7998 -15.8994 0 -20.5996zM362.4 160c8.19922 0 14.5 -7 13.5 -15c-7.5 -59.2002 -58.9004 -105 -121.101 -105h-13.5996c-62.2002 0 -113.601 45.7998 -121.101 105c-1 8 5.30078 15 13.5 15h228.801z" />
+    <glyph glyph-name="laugh-wink" unicode="&#xf59c;" horiz-adv-x="496" 
+d="M248 440c137 0 248 -111 248 -248s-111 -248 -248 -248s-248 111 -248 248s111 248 248 248zM389.4 50.5996c37.7998 37.8008 58.5996 88 58.5996 141.4s-20.7998 103.6 -58.5996 141.4c-37.8008 37.7998 -88 58.5996 -141.4 58.5996s-103.6 -20.7998 -141.4 -58.5996
+c-37.7998 -37.8008 -58.5996 -88 -58.5996 -141.4s20.7998 -103.6 58.5996 -141.4c37.8008 -37.7998 88 -58.5996 141.4 -58.5996s103.6 20.7998 141.4 58.5996zM328 284c25.7002 0 55.9004 -16.9004 59.7002 -42.0996c1.7998 -11.1006 -11.2998 -18.2002 -19.7998 -10.8008
+l-9.5 8.5c-14.8008 13.2002 -46.2002 13.2002 -61 0l-9.5 -8.5c-8.30078 -7.39941 -21.5 -0.399414 -19.8008 10.8008c4 25.1992 34.2002 42.0996 59.9004 42.0996zM168 224c-17.7002 0 -32 14.2998 -32 32s14.2998 32 32 32s32 -14.2998 32 -32s-14.2998 -32 -32 -32z
+M362.4 160c8.19922 0 14.5 -7 13.5 -15c-7.5 -59.2002 -58.9004 -105 -121.101 -105h-13.5996c-62.2002 0 -113.601 45.7998 -121.101 105c-1 8 5.30078 15 13.5 15h228.801z" />
+    <glyph glyph-name="meh-blank" unicode="&#xf5a4;" horiz-adv-x="496" 
+d="M248 440c137 0 248 -111 248 -248s-111 -248 -248 -248s-248 111 -248 248s111 248 248 248zM248 -8c110.3 0 200 89.7002 200 200s-89.7002 200 -200 200s-200 -89.7002 -200 -200s89.7002 -200 200 -200zM168 272c17.7002 0 32 -14.2998 32 -32s-14.2998 -32 -32 -32
+s-32 14.2998 -32 32s14.2998 32 32 32zM328 272c17.7002 0 32 -14.2998 32 -32s-14.2998 -32 -32 -32s-32 14.2998 -32 32s14.2998 32 32 32z" />
+    <glyph glyph-name="meh-rolling-eyes" unicode="&#xf5a5;" horiz-adv-x="496" 
+d="M248 440c137 0 248 -111 248 -248s-111 -248 -248 -248s-248 111 -248 248s111 248 248 248zM248 -8c110.3 0 200 89.7002 200 200s-89.7002 200 -200 200s-200 -89.7002 -200 -200s89.7002 -200 200 -200zM336 296c39.7998 0 72 -32.2002 72 -72s-32.2002 -72 -72 -72
+s-72 32.2002 -72 72s32.2002 72 72 72zM336 184c22.0996 0 40 17.9004 40 40c0 13.5996 -7.2998 25.0996 -17.7002 32.2998c1 -2.59961 1.7002 -5.39941 1.7002 -8.2998c0 -13.2998 -10.7002 -24 -24 -24s-24 10.7002 -24 24c0 3 0.700195 5.7002 1.7002 8.2998
+c-10.4004 -7.2002 -17.7002 -18.7002 -17.7002 -32.2998c0 -22.0996 17.9004 -40 40 -40zM232 224c0 -39.7998 -32.2002 -72 -72 -72s-72 32.2002 -72 72s32.2002 72 72 72s72 -32.2002 72 -72zM120 224c0 -22.0996 17.9004 -40 40 -40s40 17.9004 40 40
+c0 13.5996 -7.2998 25.0996 -17.7002 32.2998c1 -2.59961 1.7002 -5.39941 1.7002 -8.2998c0 -13.2998 -10.7002 -24 -24 -24s-24 10.7002 -24 24c0 3 0.700195 5.7002 1.7002 8.2998c-10.4004 -7.2002 -17.7002 -18.7002 -17.7002 -32.2998zM312 96
+c13.2002 0 24 -10.7998 24 -24s-10.7998 -24 -24 -24h-128c-13.2002 0 -24 10.7998 -24 24s10.7998 24 24 24h128z" />
+    <glyph glyph-name="sad-cry" unicode="&#xf5b3;" horiz-adv-x="496" 
+d="M248 440c137 0 248 -111 248 -248s-111 -248 -248 -248s-248 111 -248 248s111 248 248 248zM392 53.5996c34.5996 35.9004 56 84.7002 56 138.4c0 110.3 -89.7002 200 -200 200s-200 -89.7002 -200 -200c0 -53.7002 21.4004 -102.4 56 -138.4v114.4
+c0 13.2002 10.7998 24 24 24s24 -10.7998 24 -24v-151.4c28.5 -15.5996 61.2002 -24.5996 96 -24.5996s67.5 9 96 24.5996v151.4c0 13.2002 10.7998 24 24 24s24 -10.7998 24 -24v-114.4zM205.8 213.5c-5.7998 -3.2002 -11.2002 -0.700195 -13.7002 1.59961l-9.5 8.5
+c-14.7998 13.2002 -46.1992 13.2002 -61 0l-9.5 -8.5c-3.7998 -3.39941 -9.2998 -4 -13.6992 -1.59961c-4.40039 2.40039 -6.90039 7.40039 -6.10059 12.4004c3.90039 25.1992 34.2002 42.0996 59.7998 42.0996c25.6006 0 55.8008 -16.9004 59.8008 -42.0996
+c0.799805 -5 -1.7002 -10 -6.10059 -12.4004zM344 268c25.7002 0 55.9004 -16.9004 59.7998 -42.0996c0.799805 -5 -1.7002 -10 -6.09961 -12.4004c-5.7002 -3.09961 -11.2002 -0.599609 -13.7002 1.59961l-9.5 8.5c-14.7998 13.2002 -46.2002 13.2002 -61 0l-9.5 -8.5
+c-3.7998 -3.39941 -9.2002 -4 -13.7002 -1.59961c-4.39941 2.40039 -6.89941 7.40039 -6.09961 12.4004c3.89941 25.1992 34.0996 42.0996 59.7998 42.0996zM248 176c30.9004 0 56 -28.7002 56 -64s-25.0996 -64 -56 -64s-56 28.7002 -56 64s25.0996 64 56 64z" />
+    <glyph glyph-name="sad-tear" unicode="&#xf5b4;" horiz-adv-x="496" 
+d="M248 440c137 0 248 -111 248 -248s-111 -248 -248 -248s-248 111 -248 248s111 248 248 248zM248 -8c110.3 0 200 89.7002 200 200s-89.7002 200 -200 200s-200 -89.7002 -200 -200s89.7002 -200 200 -200zM256 144c38.0996 0 74 -16.7998 98.5 -46.0996
+c8.5 -10.2002 7.09961 -25.3008 -3.09961 -33.8008c-10.6006 -8.7998 -25.7002 -6.69922 -33.8008 3.10059c-15.2998 18.2998 -37.7998 28.7998 -61.5996 28.7998c-13.2002 0 -24 10.7998 -24 24s10.7998 24 24 24zM168 208c-17.7002 0 -32 14.2998 -32 32s14.2998 32 32 32
+s32 -14.2998 32 -32s-14.2998 -32 -32 -32zM328 272c17.7002 0 32 -14.2998 32 -32s-14.2998 -32 -32 -32s-32 14.2998 -32 32s14.2998 32 32 32zM162.4 173.2c2.7998 3.7002 8.39941 3.7002 11.1992 0c11.4004 -15.2998 36.4004 -50.6006 36.4004 -68.1006
+c0 -22.6992 -18.7998 -41.0996 -42 -41.0996s-42 18.4004 -42 41.0996c0 17.5 25 52.8008 36.4004 68.1006z" />
+    <glyph glyph-name="smile-beam" unicode="&#xf5b8;" horiz-adv-x="496" 
+d="M248 440c137 0 248 -111 248 -248s-111 -248 -248 -248s-248 111 -248 248s111 248 248 248zM248 -8c110.3 0 200 89.7002 200 200s-89.7002 200 -200 200s-200 -89.7002 -200 -200s89.7002 -200 200 -200zM332 135.4c8.5 10.1992 23.5996 11.5 33.7998 3.09961
+c10.2002 -8.5 11.6006 -23.5996 3.10059 -33.7998c-30 -36 -74.1006 -56.6006 -120.9 -56.6006s-90.9004 20.6006 -120.9 56.6006c-8.39941 10.2002 -7.09961 25.2998 3.10059 33.7998c10.2002 8.40039 25.2998 7.09961 33.7998 -3.09961
+c20.7998 -25.1006 51.5 -39.4004 84 -39.4004s63.2002 14.4004 84 39.4004zM136.5 237l-9.5 -17c-1.90039 -3.2002 -5.90039 -4.7998 -9.2998 -3.7002c-3.60059 1.10059 -6 4.60059 -5.7002 8.2998c3.2998 42.1006 32.2002 71.4004 56 71.4004s52.7002 -29.2998 56 -71.4004
+c0.299805 -3.7998 -2.09961 -7.19922 -5.7002 -8.2998c-3.09961 -1 -7.2002 0 -9.2998 3.7002l-9.5 17c-7.7002 13.7002 -19.2002 21.5996 -31.5 21.5996s-23.7998 -7.89941 -31.5 -21.5996zM328 296c23.7998 0 52.7002 -29.2998 56 -71.4004
+c0.299805 -3.7998 -2.09961 -7.19922 -5.7002 -8.2998c-3.09961 -1 -7.2002 0 -9.2998 3.7002l-9.5 17c-7.7002 13.7002 -19.2002 21.5996 -31.5 21.5996s-23.7998 -7.89941 -31.5 -21.5996l-9.5 -17c-1.90039 -3.2002 -5.7998 -4.7998 -9.2998 -3.7002
+c-3.60059 1.10059 -6 4.60059 -5.7002 8.2998c3.2998 42.1006 32.2002 71.4004 56 71.4004z" />
+    <glyph glyph-name="surprise" unicode="&#xf5c2;" horiz-adv-x="496" 
+d="M248 440c137 0 248 -111 248 -248s-111 -248 -248 -248s-248 111 -248 248s111 248 248 248zM248 -8c110.3 0 200 89.7002 200 200s-89.7002 200 -200 200s-200 -89.7002 -200 -200s89.7002 -200 200 -200zM248 168c35.2998 0 64 -28.7002 64 -64s-28.7002 -64 -64 -64
+s-64 28.7002 -64 64s28.7002 64 64 64zM200 240c0 -17.7002 -14.2998 -32 -32 -32s-32 14.2998 -32 32s14.2998 32 32 32s32 -14.2998 32 -32zM328 272c17.7002 0 32 -14.2998 32 -32s-14.2998 -32 -32 -32s-32 14.2998 -32 32s14.2998 32 32 32z" />
+    <glyph glyph-name="tired" unicode="&#xf5c8;" horiz-adv-x="496" 
+d="M248 440c137 0 248 -111 248 -248s-111 -248 -248 -248s-248 111 -248 248s111 248 248 248zM248 -8c110.3 0 200 89.7002 200 200s-89.7002 200 -200 200s-200 -89.7002 -200 -200s89.7002 -200 200 -200zM377.1 295.8c3.80078 -4.39941 3.90039 -11 0.100586 -15.5
+l-33.6006 -40.2998l33.6006 -40.2998c3.7998 -4.5 3.7002 -11 -0.100586 -15.5c-3.5 -4.10059 -9.89941 -5.7002 -15.2998 -2.5l-80 48c-3.59961 2.2002 -5.7998 6.09961 -5.7998 10.2998s2.2002 8.09961 5.7998 10.2998l80 48c5 2.90039 11.5 1.90039 15.2998 -2.5z
+M220 240c0 -4.2002 -2.2002 -8.09961 -5.7998 -10.2998l-80 -48c-5.40039 -3.2002 -11.7998 -1.60059 -15.2998 2.5c-3.80078 4.5 -3.90039 11 -0.100586 15.5l33.6006 40.2998l-33.6006 40.2998c-3.7998 4.5 -3.7002 11 0.100586 15.5
+c3.7998 4.40039 10.2998 5.5 15.2998 2.5l80 -48c3.59961 -2.2002 5.7998 -6.09961 5.7998 -10.2998zM248 176c45.4004 0 100.9 -38.2998 107.8 -93.2998c1.5 -11.9004 -7 -21.6006 -15.5 -17.9004c-22.7002 9.7002 -56.2998 15.2002 -92.2998 15.2002
+s-69.5996 -5.5 -92.2998 -15.2002c-8.60059 -3.7002 -17 6.10059 -15.5 17.9004c6.89941 55 62.3994 93.2998 107.8 93.2998z" />
+  </font>
+</defs></svg>

site/examples/uce-starter/themes/common/fonts/press-start-2p/OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2012 The Press Start 2P Project Authors (cody@zone38.net), with Reserved Font Name "Press Start 2P".
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.