getting closer to full port of web app starter

2026-04-19 19:09:21 +00:00
parent 2b5586d7df
commit d1167aec3b
96 changed files with 3395 additions and 1027 deletions
@@ -1,7 +1,7 @@
 Output / Invocation Functions

 1_RENDER
-call_file
+unit_call
 component
 component_exists
 component_resolve
@@ -11,5 +11,6 @@ ob_get
 ob_get_close
 ob_start
 print
-render_component
-render_file
+component_render
+unit_load
+unit_render
@@ -0,0 +1,4 @@
+Runtime
+unit_info
+units_list
+unit_compile
@@ -1,5 +1,5 @@
 Sessions

-make_session_id
+session_id_create
 session_destroy
 session_start
@@ -8,11 +8,11 @@ file_exists
 file_get_contents
 file_mtime
 file_put_contents
-get_cwd
+cwd_get
 ls
 mkdir
 path_join
-set_cwd
+cwd_set
 shell_escape
 shell_exec
-unlink
+file_unlink
@@ -1,7 +1,7 @@
 Time and Date Functions

-microtime
+time_precise
 time
-date
-gmdate
-parse_time
+time_format_local
+time_format_utc
+time_parse
@@ -1,7 +1,7 @@
 URI Functions

 encode_query
-make_session_id
+session_id_create
 parse_query
 uri_decode
 uri_encode
@@ -7,15 +7,15 @@ void render_see_section(String name)
 	{
 		if(idx == 0)
 		{
-			<><h3><?= line ?></h3><ul></>
+			<><div class="category"><h3><?= line ?></h3><ul></>
 		}
 		else if(line != "")
 		{
-			<><li><a href="index.uce?p=<?= uri_encode(line) ?>"><?= line ?><span style="opacity:0.5">()</span></a></li></>
+			<><li><a href="index.uce?p=<?= uri_encode(line) ?>"><?= line ?><span class="dim">()</span></a></li></>
 		}
 		idx += 1;
 	}
-	<></ul></>
+	<></ul></div></>
 }


@@ -26,20 +26,39 @@ RENDER(Request& context)

 	<><html>
 	<head>
+		<meta name="viewport" content="width=device-width, initial-scale=1"></meta>
 		<link rel="stylesheet" href='style.css?v=<?= time() ?>'></link>
 	</head>
 	<body>
 		<h1>
-			<a href="index.uce">UCE Docs</a>:
-			<?= page ?>
+			<a href="index.uce">UCE Docs</a><?
+			if(page != "index")
+			{
+				?><span class="dim"> / </span><?= page ?><?
+			}
+		?>
 		</h1>
 		<?

 		if(page == "index")
 		{
-			?><div style="display:flex;"><?
-			?><div style="flex:1"><?
-			?><h3>All API Functions</h3><?
+			?><div class="search-bar">
+				<input id="doc-search" type="search" placeholder="Search API…" autocomplete="off" spellcheck="false"/>
+				<span class="search-count" id="search-count"></span>
+			</div>
+			<div id="search-results" hidden></div>
+			<div class="index-pane" id="index-pane">
+			<div class="index-layout">
+			<nav class="sidebar"><?
+			for(auto file_name : ls("areas/"))
+			{
+				String ft = nibble(file_name, ".");
+				render_see_section(ft);
+			}
+			?></nav>
+			<main class="content">
+			<h2>All API Functions</h2>
+			<div class="func-grid"><?
 			for(auto file_name : ls("pages/"))
 			{
 				String ft = nibble(file_name, ".");
@@ -48,7 +67,7 @@ RENDER(Request& context)
 					String fn = ft;
 					String pre = nibble(fn, "_");
 					?>
-					<div><a href="?p=<?= uri_encode(ft) ?>"><?= fn ?></a><span style="opacity:0.5"> : struct</span></div>
+					<div class="func-item"><a href="?p=<?= uri_encode(ft) ?>"><?= fn ?><span class="badge">struct</span></a></div>
 					<?
 				}
 				else if(ft.substr(0, 2) == "1_")
@@ -56,28 +75,65 @@ RENDER(Request& context)
 					String fn = ft;
 					String pre = nibble(fn, "_");
 					?>
-					<div><a href="?p=<?= uri_encode(ft) ?>"><?= fn ?></a><span style="opacity:0.5"> : directive</span></div>
+					<div class="func-item"><a href="?p=<?= uri_encode(ft) ?>"><?= fn ?><span class="badge">directive</span></a></div>
 					<?
 				}
 				else
 				{
 					?>
-					<div><a href="?p=<?= uri_encode(ft) ?>"><?= ft ?><span style="opacity:0.5">()</span></a></div>
+					<div class="func-item"><a href="?p=<?= uri_encode(ft) ?>"><?= ft ?><span class="dim">()</span></a></div>
 					<?
 				}
 			}
-			?></div><?
-			?><div style="flex:1"><?
-			for(auto file_name : ls("areas/"))
-			{
-				String ft = nibble(file_name, ".");
-				render_see_section(ft);
-			}
-			?></div><?
-			?></div><?
+			?></div>
+			</main>
+			</div>
+			</div>
+			<?
+			<><script>
+			(function () {
+				var input = document.getElementById('doc-search');
+				var results = document.getElementById('search-results');
+				var pane = document.getElementById('index-pane');
+				var counter = document.getElementById('search-count');
+				var timer;
+
+				function showResults(html) {
+					results.innerHTML = html;
+					results.hidden = false;
+					pane.hidden = true;
+					var hits = results.querySelectorAll('.search-hit').length;
+					counter.textContent = hits ? hits + ' result' + (hits > 1 ? 's' : '') : '';
+				}
+
+				function showIndex() {
+					results.innerHTML = '';
+					results.hidden = true;
+					pane.hidden = false;
+					counter.textContent = '';
+				}
+
+				input.addEventListener('input', function () {
+					var q = this.value.trim();
+					clearTimeout(timer);
+					if (q.length < 2) { showIndex(); return; }
+					counter.textContent = '\u2026';
+					timer = setTimeout(function () {
+						fetch('search.uce?q=' + encodeURIComponent(q))
+							.then(function (r) { return r.text(); })
+							.then(showResults);
+					}, 220);
+				});
+
+				input.addEventListener('keydown', function (e) {
+					if (e.key === 'Escape') { this.value = ''; showIndex(); }
+				});
+			})();
+			</script></>
 		}
 		else
 		{
+			?><article class="doc-detail"><?
 			auto doc = split(file_get_contents("pages/"+page+".txt"), "\n");
 			String layout_class = "text";
 			u32 line_idx = 0;
@@ -95,7 +151,7 @@ RENDER(Request& context)
 					{
 						?></div><?
 					}
-					?><div class="<?= layout_class ?>"><?
+					?><div class="doc-section <?= layout_class ?>"><?
 					if(layout_class == "params")
 					{
 						?><h3>Parameters</h3><?
@@ -114,7 +170,7 @@ RENDER(Request& context)
 					}
 					else if(layout_class == "see")
 					{
-						/*?><h3>Related</h3><?*/
+						?><h3>Related</h3><?
 					}
 					else
 					{
@@ -140,15 +196,20 @@ RENDER(Request& context)
 						}
 						else
 						{
-							?><div><a href="index.uce?p=<?= trim(s) ?>"><?= trim(s) ?><span style="opacity:0.5">()</span></a></div><?
+							?><div><a href="index.uce?p=<?= trim(s) ?>"><?= trim(s) ?><span class="dim">()</span></a></div><?
 						}
 					}
 					else
 					{
-						?><div><? print(s); ?></div><?
+						?><div><?: markdown_to_html(s) ?></div><?
 					}
 				}
 			}
+			if(line_idx > 0)
+			{
+				?></div><?
+			}
+			?></article><?
 		}

 		?>
@@ -64,9 +64,8 @@ Whether the request should be logged
 	f64 stats.time_start
 	f64 stats.time_end

-:render_file(String file_name, [Request& context])
+:unit_render(String file_name, [Request& context])
 Invokes another UCE file using the current or supplied request context

 :see
 >types
-
@@ -4,7 +4,7 @@ COMPONENT(Request& context)
 :desc
 Defines the default component entrypoint for the current `.uce` file.

-`component()` and `render_component()` invoke `COMPONENT(Request& context)` by default. Named component entrypoints use `COMPONENT:NAME(Request& context)`.
+`component()` and `component_render()` invoke `COMPONENT(Request& context)` by default. Named component entrypoints use `COMPONENT:NAME(Request& context)`.

 This keeps page rendering and component rendering separate:

@@ -16,7 +16,7 @@ A file intended only for component reuse can define `COMPONENT()` without defini

 Inside component handlers, props arrive through `context.call`.

-When you call `component(":NAME", props, context)` or `render_component(":NAME", props, context)`, the runtime resolves `:NAME` against the current `.uce` file instead of requiring the file name again.
+When you call `component(":NAME", props, context)` or `component_render(":NAME", props, context)`, the runtime resolves `:NAME` against the current `.uce` file instead of requiring the file name again.

 Examples:
 `COMPONENT(Request& context)`
@@ -31,6 +31,6 @@ Examples:

 :see
 >component
->render_component
+>component_render
 >1_RENDER
 >1_WS
@@ -14,7 +14,7 @@ The request environment is passed explicitly through `context`, including params

 For a normal direct page request, `context.call` starts empty.

-If the page is invoked from another UCE file via `render_file(file_name, context)`, the callee receives that same `context`.
+If the page is invoked from another UCE file via `unit_render(file_name, context)`, the callee receives that same `context`.

 Pages intended to serve WebSocket traffic may expose both `RENDER(Request& context)` and `WS(Request& context)`. Files may also define `COMPONENT()` handlers when they intentionally need both page and component behavior in one unit. In that case `RENDER(Request& context)` serves the direct HTTP response, `WS(Request& context)` handles subsequent WebSocket messages, and `COMPONENT()` remains available only through the component helpers.

@@ -74,7 +74,7 @@ The loaded file is resolved relative to the current source file unless the path
 - `#load` is recognized only when the current line starts with `#load ` at column 1.
 - `EXPORT` harvesting likewise only triggers when the current line starts with `EXPORT` at column 1 and is followed by whitespace.
 - Relative `#load` paths are expanded against the including unit's source directory.
- `render_file()` and `call_file()` are runtime APIs; `#load` is a compile-time include/composition feature.
+- `unit_render()` and `unit_call()` are runtime APIs; `#load` is a compile-time include/composition feature.

 :Limitations
 - This pass is character-wise, not a full parser.
@@ -92,7 +92,7 @@ The loaded file is resolved relative to the current source file unless the path

 :see
 load
-render_file
-call_file
+unit_render
+unit_call
 0_context
 1_COMPONENT
@@ -12,7 +12,7 @@ Common uses include:
 `json_decode()` / `json_encode()`
 `context.var`
 `context.call`
-`call_file()` return values
+`unit_call()` return values

 Useful methods include:
 `to_string()`
@@ -8,7 +8,7 @@ Renders another `.uce` file as a component and returns the captured output as a

 Component props are passed in `context.call`.

-Because `<?= ... ?>` HTML-escapes its value, embed component markup with `<?: component(...) ?>`, `print(component(...))`, or use `render_component(...)` for direct output.
+Because `<?= ... ?>` HTML-escapes its value, embed component markup with `<?: component(...) ?>`, `print(component(...))`, or use `component_render(...)` for direct output.

 When `name` contains a colon, such as `components/card:BODY`, the part after the colon selects a named component handler exported from the component file through `COMPONENT:BODY(Request& context)`.

@@ -1,5 +1,5 @@
 :sig
-void render_component(String name, [DTree props], [Request& context])
+void component_render(String name, [DTree props], [Request& context])

 :desc
 Renders another `.uce` file as a component and writes the result directly to the current output buffer.
@@ -10,12 +10,12 @@ Component props are passed through `context.call`, and `name:COMPONENTFUNC` may

 When `name` starts with `:`, the runtime resolves that named handler against the current `.uce` file.

-Use `render_component()` when you want to write component output directly from C++ code instead of capturing it as a `String`.
+Use `component_render()` when you want to write component output directly from C++ code instead of capturing it as a `String`.

 Example:
 `DTree props;`
 `props["body"] = "Hello";`
-`render_component("components/card:BODY", props, context);`
+`component_render("components/card:BODY", props, context);`

 :see
 >ob
@@ -1,5 +1,5 @@
 :sig
-String get_cwd()
+String cwd_get()

 :params
 return value : the current working directory
@@ -1,5 +1,5 @@
 :sig
-void set_cwd(String path)
+void cwd_set(String path)

 :params
 path : the new working directory
@@ -0,0 +1,11 @@
+:sig
+void file_unlink(String file_name)
+
+:params
+file_name : name of the file
+
+:desc
+Deletes the file identified by `file_name`.
+
+:see
+>sys
@@ -72,6 +72,6 @@ The parser preserves directive data needed by those hooks.
 :see
 markdown_to_html
 component
-render_component
+component_render
 json_encode
 DTree
@@ -95,6 +95,6 @@ This makes directive components a good fit for alerts, callouts, cards, embeds,
 :see
 markdown_to_ast
 component
-render_component
+component_render
 json_decode
 String
@@ -1,11 +1,11 @@
 :sig
-String make_session_id()
+String session_id_create()

 :params
 return value : a new session ID

 :desc
-Creates a session ID
+Creates a session ID.

 :see
 >session
@@ -1,5 +1,5 @@
 :sig
-s64 kill(pid_t pid, s64 sig)
+int task_kill(pid_t pid, int sig = 0)

 :params
 pid : PID of the process
@@ -7,7 +7,7 @@ sig : signal number
 return value : 0 if signal was sent, -1 otherwise

 :desc
-This is the standard POSIX kill() function, provided here for reference.
+Wraps the standard POSIX `kill()` function.

 Possible signal numbers are: SIGABND, SIGABRT, SIGALRM, SIGBUS, SIGFPE, SIGHUP, SIGILL, SIGINT, SIGKILL, SIGPIPE, SIGPOLL, SIGPROF, SIGQUIT, SIGSEGV, SIGSYS, SIGTERM, SIGTRAP, SIGURG, SIGUSR1, SIGUSR2, SIGVTALRM, SIGXCPU, SIGXFSZ, SIGCHLD, SIGIO, SIGIOERR, SIGWINCH, SIGSTOP, SIGTSTP, SIGTTIN, SIGTTOU, SIGCONT.

@@ -1,5 +1,5 @@
 :sig
-String date(String format = "", u64 timestamp = 0)
+String time_format_local(String format = "", u64 timestamp = 0)

 :params
 format : formatting string specifying the date format
@@ -1,5 +1,5 @@
 :sig
-String gmdate(String format = "", u64 timestamp = 0)
+String time_format_utc(String format = "", u64 timestamp = 0)

 :params
 format : formatting string specifying the date format
@@ -1,5 +1,5 @@
 :sig
-u64 parse_time(String time_string)
+u64 time_parse(String time_string)

 :params
 time_string : a string containing a date and/or time in text form
@@ -1,5 +1,5 @@
 :sig
-f64 microtime()
+f64 time_precise()

 :params
 return value : current Unix timestamp
@@ -1,5 +1,5 @@
 :sig
-DTree* call_file(String file_name, String function_name, DTree* call_param = null)
+DTree* unit_call(String file_name, String function_name, DTree* call_param = null)

 :params
 file_name : UCE file to load and execute
@@ -8,16 +8,17 @@ call_param : optional, call parameter
 return value : DTree* returned from function

 :desc
-Calls a function inside a UCE file.
+Calls an exported function inside a UCE file.

 :Example
 // export a function
-EXPORT void test_func()
+EXPORT DTree* test_func(DTree* call_param)
 {
 	print("HELLO FROM TEST FUNCTION");
+	return(0);
 }
 // use that function in another file
-call_file("call_file_funcs.uce", "test_func");
+unit_call("call_file_funcs.uce", "test_func");

 :see
 >ob
@@ -0,0 +1,15 @@
+:sig
+bool unit_compile(String path = "")
+
+:params
+path : optional UCE unit path. If empty, recompiles the current executing unit.
+return value : `true` when the unit was compiled and loaded successfully
+
+:desc
+Triggers a manual recompile of a UCE compilation unit.
+
+If `path` is relative, it is resolved relative to the current executing unit. Successful manual compiles also refresh the in-memory metadata for that unit.
+
+:see
+unit_info
+units_list
@@ -0,0 +1,27 @@
+:sig
+DTree unit_info(String path = "")
+
+:params
+path : optional UCE unit path. If empty, uses the current executing unit.
+return value : metadata tree for the resolved unit, or an empty tree if the unit cannot be resolved
+
+:desc
+Returns runtime metadata for a UCE compilation unit.
+
+The returned tree includes:
+
+- normalized paths and generated artifact paths
+- compile status, compile error status, runtime error status, and a combined `error_status`
+- request and invocation counters
+- best, worst, last, and average render time
+- compile counters plus best, worst, last, and average compile time
+- file mtimes, stale status, load status, and exported API declarations
+
+If `path` is relative, it is resolved relative to the current executing unit.
+
+Because unit metadata lives in process memory alongside `SharedUnit`, request and timing counters reflect the current runtime process, not an aggregate across every worker process.
+
+:see
+units_list
+unit_compile
+0_context
@@ -0,0 +1,16 @@
+:sig
+SharedUnit* unit_load(String file_name)
+
+:params
+file_name : UCE file to load
+return value : loaded shared unit, or `null` if the unit could not be loaded
+
+:desc
+Loads a UCE compilation unit and returns its in-memory `SharedUnit` record.
+
+This is a low-level runtime helper. Most application code should prefer `unit_render()`, `unit_call()`, `component()`, or `component_render()`.
+
+:see
+unit_render
+unit_call
+load
@@ -1,6 +1,6 @@
 :sig
-void render_file(String file_name)
-void render_file(String file_name, Request& context)
+void unit_render(String file_name)
+void unit_render(String file_name, Request& context)

 :params
 file_name : UCE file to load and execute
@@ -13,10 +13,10 @@ If `context` is omitted, the current active request context is used.

 :Example
 // call a common page template
-render_file("page-template.uce");
+unit_render("page-template.uce");

 // explicitly pass a request context
-render_file("page-template.uce", context);
+unit_render("page-template.uce", context);

 :see
 >ob
@@ -0,0 +1,11 @@
+:sig
+std::vector<String> units_list()
+
+:desc
+Returns the normalized paths of all known `.uce` units.
+
+This includes the shared known-unit registry plus any units already loaded in the current runtime process.
+
+:see
+unit_info
+unit_compile
@@ -1,11 +0,0 @@
-:sig
-void unlink(String file_name)
-
-:params
-file_name : name of the file
-
-:desc
-Deletes the file identified by 'file_name'.
-
-:see
->sys
@@ -0,0 +1,67 @@
+
+// Returns whether haystack contains needle (case-sensitive, both should be pre-lowercased)
+bool str_contains(String haystack, String needle)
+{
+	return replace(haystack, needle, "\x01") != haystack;
+}
+
+RENDER(Request& context)
+{
+	String q = to_lower(trim(context.get["q"]));
+
+	if(q.length() < 2)
+	{
+		return;
+	}
+
+	u32 count = 0;
+
+	for(auto file_name : ls("pages/"))
+	{
+		String ft = nibble(file_name, ".");
+		String name = ft;
+		String badge = "";
+
+		if(ft.substr(0, 2) == "0_")
+		{
+			nibble(name, "_");
+			badge = "struct";
+		}
+		else if(ft.substr(0, 2) == "1_")
+		{
+			nibble(name, "_");
+			badge = "directive";
+		}
+
+		String content = file_get_contents("pages/" + ft + ".txt");
+
+		if(str_contains(to_lower(name), q) || str_contains(to_lower(content), q))
+		{
+			// Find first content line that contains the query for a snippet
+			String snippet = "";
+			for(auto line : split(content, "\n"))
+			{
+				String t = trim(line);
+				if(t.length() > 4 && t.substr(0, 1) != ":" && str_contains(to_lower(t), q))
+				{
+					snippet = t;
+					if(snippet.length() > 100)
+						snippet = snippet.substr(0, 100) + "…";
+					break;
+				}
+			}
+
+			<><div class="func-item search-hit">
+				<a href="index.uce?p=<?= uri_encode(ft) ?>"><?= html_escape(name) ?><? if(badge != "") { ?><span class="badge"><?= badge ?></span><? } ?></a>
+				<? if(snippet != "") { ?><div class="search-snippet"><?= html_escape(snippet) ?></div><? } ?>
+			</div></>
+
+			count += 1;
+		}
+	}
+
+	if(count == 0)
+	{
+		<><p class="no-results">No results for "<strong><?= html_escape(q) ?></strong>"</p></>
+	}
+}
@@ -1,105 +1,480 @@
+/* UCE Documentation — Theme
+   Color palette: #139 deep-blue base · white text · yellow accents */
+
+:root {
+	--bg: #113399;
+	--bg-surface: rgba(255, 255, 255, 0.065);
+	--bg-surface-hover: rgba(255, 255, 255, 0.11);
+	--bg-inset: rgba(0, 0, 0, 0.22);
+	--bg-code: rgba(0, 0, 0, 0.28);
+	--text: #e8ecf4;
+	--text-dim: rgba(255, 255, 255, 0.55);
+	--text-muted: rgba(255, 255, 255, 0.35);
+	--accent: #ffd644;
+	--accent-dim: rgba(255, 214, 68, 0.1);
+	--accent-hover: #ffe680;
+	--border: rgba(255, 255, 255, 0.08);
+	--border-strong: rgba(255, 255, 255, 0.18);
+	--font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
+	--font-mono: 'SF Mono', 'Cascadia Code', 'Fira Code', Consolas, monospace;
+	--radius: 8px;
+	--radius-lg: 14px;
+	--ease: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* ── Reset ── */
+
+*, *::before, *::after {
+	box-sizing: border-box;
+	margin: 0;
+	padding: 0;
+}
+
 * {
 	font-family: inherit;
 	font-size: inherit;
-	box-sizing: inherit;
 	color: inherit;
 	line-height: inherit;
 }

-h1 {
-	font-family: monospace;
-	font-size: 200%;
-	padding-top: 8px;
-	padding-bottom: 8px;
+/* ── Base ── */
+
+html {
+	font-size: 15px;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
 }

 body {
-	max-width: 1024px;
-	margin-left: auto;
-	margin-right: auto;
-	padding-left: 16px;
-	padding-right: 16px;
-	font-family: Tahoma, Helvetica, Arial;
-	font-size: 1.2em;
-	box-sizing: border-box;
-	background: #139;
-	color: white;
-	line-height: 150%;
+	max-width: 1200px;
+	margin: 0 auto;
+	padding: 0 24px 64px;
+	font-family: var(--font-sans);
+	font-size: 1rem;
+	line-height: 1.65;
+	background: var(--bg);
+	color: var(--text);
 }

-body > * {
-	background: rgba(255,255,255,0.1);
-	padding: 32px;
-	margin: 16px;
+/* ── Typography ── */
+
+h1 {
+	font-family: var(--font-mono);
+	font-size: 1.6rem;
+	font-weight: 700;
+	letter-spacing: -0.02em;
+	padding: 28px 0 20px;
+	border-bottom: 1px solid var(--border);
+	margin-bottom: 28px;
 }

-a {
-	color: yellow;
+h1 a {
+	text-decoration: none;
+	color: var(--text);
+	transition: color 150ms var(--ease);
 }

-form > div, label {
-	display: block;
-	padding-top: 8px;
-	padding-bottom: 8px;
+h1 a:hover {
+	color: var(--accent);
 }

-input, textarea {
-	background: rgba(0,0,0,0.2);
-	border: 2px solid rgba(255,255,255,0.2);
-}
-
-input[type=submit], button {
-	padding: 8px;
-	cursor: pointer;
-}
-
-input[type=submit]:hover, button:hover {
-	color: yellow;
-	background: rgba(0,0,0,0.5);
-}
-
-input[type=text], textarea {
-	padding: 8px;
-	width: 100%;
-}
-
-input[type=text]:hover, textarea:hover {
-	background: rgba(0,0,0,0.25);
-}
-
-textarea {
-	height: 20%;
-}
-
-pre {
-	height: 20%;
-	overflow: auto;
-	padding: 8px;
-	border: 2px solid rgba(0,0,0,0.2);
-	background: rgba(100,100,100,0.15);
-	font-family: monospace;
-	white-space: pre-wrap;
+h2 {
+	font-family: var(--font-mono);
+	font-size: 1.2rem;
+	font-weight: 600;
+	letter-spacing: -0.01em;
+	margin-bottom: 16px;
+	color: var(--text);
 }

 h3 {
-	margin: 0;
-	font-family: monospace;
-	font-size: 1.4em;
-	margin-bottom: 0.8em;
-	opacity: 0.7;
+	font-family: var(--font-mono);
+	font-size: 0.82rem;
+	font-weight: 600;
+	text-transform: uppercase;
+	letter-spacing: 0.06em;
+	color: var(--text-dim);
+	margin: 0 0 12px;
+}
+
+a {
+	color: var(--accent);
+	text-decoration: none;
+	transition: color 150ms var(--ease);
+}
+
+a:hover {
+	color: var(--accent-hover);
+	text-decoration: underline;
+	text-underline-offset: 2px;
+}
+
+/* ── Index Layout ── */
+
+.index-layout {
+	display: grid;
+	grid-template-columns: 280px 1fr;
+	gap: 32px;
+	align-items: start;
+}
+
+@media (max-width: 800px) {
+	.index-layout {
+		grid-template-columns: 1fr;
+	}
+}
+
+.sidebar {
+	position: sticky;
+	top: 20px;
+}
+
+.category {
+	background: var(--bg-surface);
+	border: 1px solid var(--border);
+	border-radius: var(--radius);
+	padding: 14px 18px;
+	margin-bottom: 10px;
+	transition: border-color 150ms var(--ease);
+}
+
+.category:hover {
+	border-color: var(--border-strong);
+}
+
+.category h3 {
+	font-size: 0.75rem;
+	margin-bottom: 8px;
+	padding-bottom: 8px;
+	border-bottom: 1px solid var(--border);
+}
+
+.category ul {
+	list-style: none;
+}
+
+.category li {
+	padding: 1px 0;
+}
+
+.category li a {
+	font-family: var(--font-mono);
+	font-size: 0.85rem;
+	display: block;
+	padding: 3px 8px;
+	border-radius: 4px;
+	transition: background 150ms var(--ease);
+}
+
+.category li a:hover {
+	background: var(--accent-dim);
+	text-decoration: none;
+}
+
+.content h2 {
+	margin-bottom: 20px;
+}
+
+.func-grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
+	gap: 4px;
+}
+
+.func-item {
+	font-family: var(--font-mono);
+	font-size: 0.88rem;
+}
+
+.func-item a {
+	display: block;
+	padding: 7px 12px;
+	border-radius: 6px;
+	transition: background 150ms var(--ease);
+}
+
+.func-item a:hover {
+	background: var(--bg-surface-hover);
+	text-decoration: none;
+}
+
+.badge {
+	font-size: 0.68rem;
+	font-weight: 500;
+	padding: 1px 7px;
+	border-radius: 4px;
+	margin-left: 6px;
+	vertical-align: middle;
+	background: rgba(255, 255, 255, 0.08);
+	color: var(--text-dim);
+}
+
+.dim {
+	opacity: 0.4;
+}
+
+/* ── Detail Page ── */
+
+.doc-detail {
+	max-width: 780px;
+}
+
+.doc-section {
+	background: var(--bg-surface);
+	border: 1px solid var(--border);
+	border-radius: var(--radius);
+	padding: 20px 24px;
+	margin-bottom: 16px;
+}
+
+.doc-section h3 {
+	margin-bottom: 12px;
+	padding-bottom: 8px;
+	border-bottom: 1px solid var(--border);
 }

 .sig {
-	font-family: monospace;
-	white-space: pre;
-	font-size: 120%;
+	font-family: var(--font-mono);
+	font-size: 1.05rem;
+	white-space: pre-wrap;
+	line-height: 1.5;
+	background: var(--bg-code);
+	border-color: var(--border-strong);
 }

-.params {
+.sig div {
+	font-family: var(--font-mono);
+}

+.params div {
+	padding: 8px 0;
+	border-bottom: 1px solid var(--border);
+}
+
+.params div:last-child {
+	border-bottom: none;
 }

 .params b {
-	font-family: monospace;
-	white-space: pre;
+	font-family: var(--font-mono);
+	color: var(--accent);
+	font-weight: 500;
+}
+
+.see {
+	background: transparent;
+	border: none;
+	padding: 0;
+}
+
+.see a {
+	font-family: var(--font-mono);
+	font-size: 0.92rem;
+}
+
+.see .category {
+	margin-top: 8px;
+}
+
+/* ── Forms ── */
+
+form > div, label {
+	display: block;
+	padding: 6px 0;
+}
+
+input, textarea, select {
+	background: var(--bg-inset);
+	border: 1px solid var(--border-strong);
+	border-radius: 6px;
+	color: var(--text);
+	transition: border-color 150ms var(--ease), background 150ms var(--ease);
+}
+
+input[type=text], textarea {
+	padding: 10px 14px;
+	width: 100%;
+}
+
+input[type=text]:hover, textarea:hover,
+input[type=text]:focus, textarea:focus {
+	border-color: var(--accent);
+	outline: none;
+	background: rgba(0, 0, 0, 0.28);
+}
+
+input[type=submit], button {
+	padding: 10px 20px;
+	font-weight: 600;
+	cursor: pointer;
+	background: var(--accent-dim);
+	border: 1px solid rgba(255, 214, 68, 0.25);
+	color: var(--accent);
+	border-radius: 6px;
+}
+
+input[type=submit]:hover, button:hover {
+	background: rgba(255, 214, 68, 0.2);
+	border-color: var(--accent);
+	color: var(--accent-hover);
+}
+
+textarea {
+	min-height: 120px;
+	resize: vertical;
+}
+
+/* ── Code ── */
+
+pre {
+	padding: 16px 20px;
+	overflow: auto;
+	background: var(--bg-code);
+	border: 1px solid var(--border);
+	border-radius: var(--radius);
+	font-family: var(--font-mono);
+	font-size: 0.88rem;
+	line-height: 1.55;
+	white-space: pre-wrap;
+}
+
+code {
+	font-family: var(--font-mono);
+	font-size: 0.9em;
+	padding: 2px 6px;
+	background: var(--bg-inset);
+	border-radius: 4px;
+}
+
+pre code {
+	padding: 0;
+	background: none;
+}
+
+/* ── Lists ── */
+
+ul {
+	list-style: none;
+}
+
+li {
+	padding: 2px 0;
+}
+
+/* ── Details / Summary ── */
+
+details {
+	background: var(--bg-surface);
+	border: 1px solid var(--border);
+	border-radius: var(--radius);
+	margin-bottom: 16px;
+}
+
+summary {
+	padding: 14px 20px;
+	cursor: pointer;
+	font-weight: 600;
+	user-select: none;
+	transition: color 150ms var(--ease);
+}
+
+summary:hover {
+	color: var(--accent);
+}
+
+details[open] summary {
+	border-bottom: 1px solid var(--border);
+}
+
+details pre {
+	border: none;
+	border-radius: 0 0 var(--radius) var(--radius);
+	margin: 0;
+}
+
+/* ── Search ── */
+
+.search-bar {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	margin-bottom: 24px;
+}
+
+#doc-search {
+	flex: 1;
+	max-width: 480px;
+	padding: 11px 16px 11px 42px;
+	background: var(--bg-inset) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.35)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") no-repeat 14px center;
+	border: 1px solid var(--border-strong);
+	border-radius: 8px;
+	color: var(--text);
+	font-family: var(--font-sans);
+	font-size: 0.95rem;
+	transition: border-color 150ms var(--ease), box-shadow 150ms var(--ease);
+}
+
+#doc-search::placeholder {
+	color: var(--text-muted);
+}
+
+#doc-search:focus {
+	outline: none;
+	border-color: var(--accent);
+	box-shadow: 0 0 0 3px rgba(255, 214, 68, 0.12);
+}
+
+.search-count {
+	font-size: 0.82rem;
+	color: var(--text-muted);
+	white-space: nowrap;
+}
+
+#search-results {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
+	gap: 4px;
+}
+
+#search-results .no-results {
+	grid-column: 1 / -1;
+	color: var(--text-dim);
+	padding: 12px 0;
+}
+
+.search-hit {
+	display: flex;
+	flex-direction: column;
+	gap: 3px;
+}
+
+.search-snippet {
+	font-size: 0.75rem;
+	color: var(--text-dim);
+	font-family: var(--font-mono);
+	padding: 0 12px 6px;
+	line-height: 1.4;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+/* ── Scrollbar ── */
+
+::-webkit-scrollbar {
+	width: 8px;
+	height: 8px;
+}
+
+::-webkit-scrollbar-track {
+	background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+	background: rgba(255, 255, 255, 0.15);
+	border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+	background: rgba(255, 255, 255, 0.25);
 }
@@ -7,10 +7,18 @@ It keeps the PHP starter around as reference while mirroring the same broad stru
 - `index.uce` as the front controller
 - `views/` for routed page content
 - `components/` for reusable UI building blocks
- `themes/`, `js/`, and `img/` for static assets
+- `themes/`, `js/`, and `img/` for theme templates and 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()`.

+Theme rendering is split the same way as the PHP starter:
+
+- `themes/common/page.blank.uce`
+- `themes/common/page.json.uce`
+- `themes/<theme>/page.html.uce`
+
+Those page templates are the authoritative shell layer, and in the UCE port they are proper `COMPONENT(...)` units rather than standalone page entrypoints. `index.uce` resolves the routed view, captures the `main` fragment, then hands off once into `themes/common/page.*.uce` or `themes/<theme>/page.html.uce`, matching the PHP starter's page-layer flow without an extra shell implementation.
+
 The example uses query-string routing in the same style as the PHP starter:

 - `index.uce`
@@ -139,7 +139,7 @@ COMPONENT:TIMESERIES_CHART(Request& context)
 				yAxisLeftFormat: <?: json_encode(y_axis_left_format) ?>,
 				yAxisRightFormat: <?: json_encode(y_axis_right_format) ?>
 			});
-			chart.setData(<?= json_encode(context.call["series"]) ?>, <?= json_encode(context.call["x_labels"]) ?>);
+			chart.setData(<?: json_encode(context.call["series"]) ?>, <?: json_encode(context.call["x_labels"]) ?>);
 			window[<?: json_encode("chart_" + chart_id) ?>] = chart;
 		}());
 		</script>
@@ -205,7 +205,7 @@ COMPONENT:SORTABLE_TABLE(Request& context)
 		<script>
 		(function () {
 			if (typeof USortableTable === 'undefined') return;
-			USortableTable.init(<?: json_encode(table_id) ?>, <?= json_encode(init_options) ?>);
+			USortableTable.init(<?: json_encode(table_id) ?>, <?: json_encode(init_options) ?>);
 		}());
 		</script>
 	</>
@@ -219,8 +219,13 @@ COMPONENT:DATA_TABLE(Request& 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")
+	if(columns.get_type_name() != "array")
+		columns.set_array();
+	bool has_explicit_columns = columns.is_list() &&
+		columns._map.size() > 0 &&
+		columns._map.find("0") != columns._map.end() &&
+		columns["0"]["field"].to_string() != "";
+	if(!has_explicit_columns && context.call["items"]["0"].get_type_name() == "array")
 	{
 		context.call["items"]["0"].each([&](DTree value, String key) {
 			DTree col;
@@ -232,14 +237,39 @@ COMPONENT:DATA_TABLE(Request& context)
 			columns.push(col);
 		});
 	}
+	if(!columns.is_list())
+	{
+		DTree normalized_columns;
+		normalized_columns.set_array();
+		columns.each([&](DTree column, String key) {
+			if(column.get_type_name() == "array")
+				normalized_columns.push(column);
+		});
+		columns = normalized_columns;
+	}
+
+	DTree row_data = context.call["items"];
+	if(row_data.get_type_name() != "array")
+		row_data.set_array();
+	if(!row_data.is_list())
+	{
+		DTree normalized_rows;
+		normalized_rows.set_array();
+		row_data.each([&](DTree row, String key) {
+			if(row.get_type_name() == "array")
+				normalized_rows.push(row);
+		});
+		row_data = normalized_rows;
+	}

 	DTree grid_options;
 	grid_options["pagination"].set_bool(true);
 	grid_options["paginationPageSize"] = first(context.call["options"]["paginationPageSize"].to_string(), "20");
+	grid_options["paginationPageSizeSelector"].set_bool(false);
 	grid_options["suppressMenuHide"].set_bool(true);
 	grid_options["animateRows"].set_bool(true);
 	grid_options["columnDefs"] = columns;
-	grid_options["rowData"] = context.call["items"];
+	grid_options["rowData"] = row_data;

 	<>
 		<div class="ag-grid-container" style="margin: 1rem 0;">
@@ -258,17 +288,19 @@ COMPONENT:DATA_TABLE(Request& context)
 		<script>
 		(function () {
 			if (typeof agGrid === 'undefined') return;
-			const gridOptions = <?= json_encode(grid_options) ?>;
-			new agGrid.Grid(document.getElementById(<?: json_encode(table_id) ?>), gridOptions);
+			const gridOptions = <?: json_encode(grid_options) ?>;
+			const gridElement = document.getElementById(<?: json_encode(table_id) ?>);
+			if (!gridElement) return;
+			const gridApi = agGrid.createGrid(gridElement, gridOptions);
 			document.getElementById(<?: json_encode(table_id + "-search") ?>)?.addEventListener('input', function () {
-				gridOptions.api.setQuickFilter(this.value);
+				gridApi.setQuickFilter(this.value);
 			});
 			document.getElementById(<?: json_encode(table_id + "-clear-filters") ?>)?.addEventListener('click', function () {
-				gridOptions.api.setFilterModel(null);
-				gridOptions.api.setQuickFilter('');
+				gridApi.setFilterModel(null);
+				gridApi.setQuickFilter('');
 			});
 			document.getElementById(<?: json_encode(table_id + "-export-csv") ?>)?.addEventListener('click', function () {
-				gridOptions.api.exportDataAsCsv();
+				gridApi.exportDataAsCsv();
 			});
 		}());
 		</script>
@@ -0,0 +1,91 @@
+#load "helpers.uce"
+
+COMPONENT(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();
+	DTree scale = context.call["scale"];
+
+	<>
+		<div class="arcgauge-set" id="<?= gauge_attr_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_raw) {
+					DTree merged = scale;
+					item.each([&](DTree value, String key) { merged[key] = value; });
+					String item_id = gauge_attr_id(item_id_raw);
+					f64 value = float_val(first(merged["value"].to_string(), "0"));
+					f64 max_value = float_val(first(merged["max"].to_string(), "100"));
+					s32 precision = (s32)int_val(first(merged["precision"].to_string(), "1"));
+					f64 pct = max_value > 0.0 ? gauge_clamp_value((value / max_value) * 100.0, 0.0, 100.0) : 0.0;
+					f64 arc_length = round((pct / 100.0) * 157.08 * 10.0) / 10.0;
+					String resolved_color = "";
+					if(merged["color"].get_type_name() == "array")
+						resolved_color = gauge_range_color(merged["color"], value);
+					else
+						resolved_color = merged["color"].to_string();
+					if(resolved_color == "")
+					{
+						if(pct >= 85.0)
+							resolved_color = "var(--error, #ef4444)";
+						else if(pct >= 60.0)
+							resolved_color = "var(--warning, #f59e0b)";
+						else
+							resolved_color = "var(--success, #10b981)";
+					}
+					String display_value = gauge_format_number(value, precision) + merged["unit"].to_string();
+					String watermark_prefix = merged["watermark_prefix"].to_string();
+					?><section class="arcgauge-card">
+						<div class="arcgauge-label"><?= first(merged["label"].to_string(), item_id_raw) ?></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_attr_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="<?= resolved_color ?>" stroke-width="5" stroke-linecap="round" stroke-dasharray="<?= std::to_string(arc_length) ?> 157.08"/>
+							<? if(watermark_prefix != "") { ?>
+								<line id="<?= gauge_attr_id(watermark_prefix) ?>WmLo" class="arcgauge-watermark arcgauge-watermark-lo" x1="0" y1="0" x2="0" y2="0" opacity="0"/>
+								<line id="<?= gauge_attr_id(watermark_prefix) ?>WmHi" class="arcgauge-watermark arcgauge-watermark-hi" x1="0" y1="0" x2="0" y2="0" opacity="0"/>
+							<? } ?>
+							<text id="<?= gauge_attr_id(gauge_id) ?>-<?= item_id ?>-text" class="arcgauge-value" x="60" y="47" text-anchor="middle"><?= display_value ?></text>
+							<text class="arcgauge-caption" x="60" y="62" text-anchor="middle"><?= first(merged["caption"].to_string(), "") ?></text>
+						</svg>
+						<div class="arcgauge-meta" id="<?= gauge_attr_id(gauge_id) ?>-<?= item_id ?>-meta"><?= first(merged["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.scale || {}, prop.items[data.name]);
+						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,
+							watermarkPrefix: item.watermark_prefix || data.name,
+							color: item.color,
+							meta: data.meta != null ? data.meta : null
+						});
+					});
+				}
+			};
+			ArcgaugeComponents.start_listen(<?: json_encode(context.call, '\'') ?>);
+			</script>
+		<? } ?>
+	</>
+}
@@ -1,231 +0,0 @@
-#load "../../lib/app.uce"
-
-COMPONENT: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>
-		<? } ?>
-	</>
-}
-
-COMPONENT: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>
-		<? } ?>
-	</>
-}
-
-COMPONENT: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>
-		<? } ?>
-	</>
-}
@@ -0,0 +1,71 @@
+#load "../../lib/app.uce"
+#include <math.h>
+
+f64 gauge_clamp_value(f64 value, f64 min_value, f64 max_value)
+{
+	return(std::max(min_value, std::min(max_value, value)));
+}
+
+f64 gauge_pi()
+{
+	return(3.14159265358979323846);
+}
+
+String gauge_string_attr(String value)
+{
+	return(html_escape(value));
+}
+
+String gauge_attr_id(String value)
+{
+	return(ascii_safe_name(value));
+}
+
+String gauge_range_color(DTree ranges, f64 value)
+{
+	String matched = "";
+	ranges.each([&](DTree range, String key) {
+		f64 from_value = float_val(first(range["from"].to_string(), "-999999999"));
+		f64 to_value = float_val(first(range["to"].to_string(), "999999999"));
+		if(value >= from_value && value <= to_value && matched == "")
+			matched = range["color"].to_string();
+	});
+	return(matched);
+}
+
+String gauge_arc_path(f64 cx, f64 cy, f64 radius, f64 start_angle, f64 end_angle)
+{
+	f64 start_x = cx + cos(start_angle) * radius;
+	f64 start_y = cy + sin(start_angle) * radius;
+	f64 end_x = cx + cos(end_angle) * radius;
+	f64 end_y = cy + sin(end_angle) * radius;
+	s32 large_arc = fabs(end_angle - start_angle) > gauge_pi() ? 1 : 0;
+	s32 sweep = end_angle >= start_angle ? 1 : 0;
+	return(
+		"M " + std::to_string(start_x) + " " + std::to_string(start_y) +
+		" A " + std::to_string(radius) + " " + std::to_string(radius) +
+		" 0 " + std::to_string(large_arc) + " " + std::to_string(sweep) +
+		" " + std::to_string(end_x) + " " + std::to_string(end_y)
+	);
+}
+
+String gauge_circle_segment_svg(f64 cx, f64 cy, f64 radius, f64 start_angle, f64 end_angle, String stroke, f64 stroke_width, String fill, String style)
+{
+	String path_d = gauge_arc_path(cx, cy, radius, start_angle, end_angle);
+	return(
+		"<path d=\"" + gauge_string_attr(path_d) +
+		"\" fill=\"" + gauge_string_attr(fill) +
+		"\" stroke=\"" + gauge_string_attr(stroke) +
+		"\" stroke-width=\"" + gauge_string_attr(std::to_string(stroke_width)) +
+		"\" stroke-linecap=\"round\"" +
+		(style != "" ? " style=\"" + gauge_string_attr(style) + "\"" : "") +
+		"/>"
+	);
+}
+
+String gauge_format_number(f64 value, s32 precision)
+{
+	char buf[64];
+	snprintf(buf, sizeof(buf), ("%." + std::to_string(std::max(0, precision)) + "f").c_str(), value);
+	return(String(buf));
+}
@@ -0,0 +1,144 @@
+#load "helpers.uce"
+
+COMPONENT(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(), "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();
+	f64 size = float_val(first(context.call["size"].to_string(), "200"));
+	DTree scale = context.call["scale"];
+	f64 scale_angle_start = float_val(first(scale["angle_start"].to_string(), std::to_string(-gauge_pi())));
+	f64 scale_angle_end = float_val(first(scale["angle_end"].to_string(), "0"));
+	f64 img_height = float_val(first(context.call["img_height"].to_string(), std::to_string(size * std::max(cos(scale_angle_start), cos(scale_angle_end)))));
+
+	<>
+		<section class="gauge-set needlegauge-set" id="<?= gauge_attr_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_raw) {
+				DTree merged = scale;
+				item.each([&](DTree value, String key) { merged[key] = value; });
+				String item_id = gauge_attr_id(item_id_raw);
+				String label = first(merged["label"].to_string(), item_id_raw);
+				String tooltip = merged["tooltip"].to_string();
+				String unit = merged["unit"].to_string();
+				f64 min_value = float_val(first(merged["min"].to_string(), "0"));
+				f64 max_value = float_val(first(merged["max"].to_string(), "100"));
+				f64 value = float_val(first(merged["value"].to_string(), "0"));
+				f64 vrange = max_value - min_value;
+				if(vrange == 0)
+					vrange = 1;
+				f64 angle_start = float_val(first(merged["angle_start"].to_string(), std::to_string(-gauge_pi())));
+				f64 angle_end = float_val(first(merged["angle_end"].to_string(), "0"));
+				f64 pct_value = gauge_clamp_value((value - min_value) / vrange, 0.0, 1.0);
+				f64 needle_angle = -gauge_pi() + angle_start + (pct_value * (angle_end - angle_start));
+				String needle_color = first(merged["color"].to_string(), "#888888");
+				if(merged["color"].get_type_name() == "array")
+					needle_color = first(gauge_range_color(merged["color"], value), "#888888");
+				String tick_color = first(merged["tick-color"].to_string(), "#888888");
+				f64 tick_interval = float_val(first(merged["ticks-every"].to_string(), std::to_string(vrange / 20.0)));
+				if(tick_interval == 0)
+					tick_interval = std::max(1.0, vrange / 20.0);
+				f64 label_interval = float_val(first(merged["value-labels-every"].to_string(), std::to_string(vrange / 4.0)));
+				if(label_interval == 0)
+					label_interval = std::max(1.0, vrange / 4.0);
+				String ticks_html = "";
+				for(f64 v = min_value; v <= max_value + 0.0001; v += tick_interval)
+				{
+					f64 angle = angle_start + ((v - min_value) / vrange) * (angle_end - angle_start);
+					f64 x1 = size / 2.0 + cos(angle) * size * 0.38;
+					f64 y1 = size / 2.0 + sin(angle) * size * 0.38;
+					f64 x2 = size / 2.0 + cos(angle) * size * 0.41;
+					f64 y2 = size / 2.0 + sin(angle) * size * 0.41;
+					ticks_html += "<line x1=\"" + gauge_string_attr(std::to_string(x1)) + "\" y1=\"" + gauge_string_attr(std::to_string(y1)) +
+						"\" x2=\"" + gauge_string_attr(std::to_string(x2)) + "\" y2=\"" + gauge_string_attr(std::to_string(y2)) +
+						"\" stroke=\"" + gauge_string_attr(tick_color) + "\" stroke-width=\"1\"/>";
+				}
+				for(f64 v = min_value; v <= max_value + 0.0001; v += label_interval)
+				{
+					f64 angle = angle_start + ((v - min_value) / vrange) * (angle_end - angle_start);
+					f64 x1 = size / 2.0 + cos(angle) * size * 0.35;
+					f64 y1 = size / 2.0 + sin(angle) * size * 0.35;
+					f64 x2 = size / 2.0 + cos(angle) * size * 0.41;
+					f64 y2 = size / 2.0 + sin(angle) * size * 0.41;
+					ticks_html += "<line x1=\"" + gauge_string_attr(std::to_string(x1)) + "\" y1=\"" + gauge_string_attr(std::to_string(y1)) +
+						"\" x2=\"" + gauge_string_attr(std::to_string(x2)) + "\" y2=\"" + gauge_string_attr(std::to_string(y2)) +
+						"\" stroke=\"" + gauge_string_attr(tick_color) + "\" stroke-width=\"3\"/>";
+					f64 lx = size / 2.0 + cos(angle) * size * 0.45;
+					f64 ly = size / 2.0 + sin(angle) * size * 0.45;
+					String label_value = std::to_string((s64)round(v));
+					ticks_html += "<text x=\"" + gauge_string_attr(std::to_string(lx)) + "\" y=\"" + gauge_string_attr(std::to_string(ly)) +
+						"\" text-anchor=\"middle\" dominant-baseline=\"central\" font-size=\"10\" fill=\"" + gauge_string_attr(tick_color) + "\">" +
+						html_escape(label_value) + "</text>";
+				}
+				String segments_html = "";
+				if(merged["color"].get_type_name() == "array")
+				{
+					merged["color"].each([&](DTree range, String key) {
+						f64 range_from = std::max(float_val(first(range["from"].to_string(), std::to_string(min_value))), min_value);
+						f64 range_to = std::min(float_val(first(range["to"].to_string(), std::to_string(max_value))), max_value);
+						f64 angle_from = angle_start + ((range_from - min_value) / vrange) * (angle_end - angle_start);
+						f64 angle_to = angle_start + ((range_to - min_value) / vrange) * (angle_end - angle_start);
+						segments_html += gauge_circle_segment_svg(size / 2.0, size / 2.0, size * 0.4, angle_from, angle_to, first(range["color"].to_string(), "rgba(120,120,120,0.5)"), 8.0, "rgba(0,0,0,0)", "opacity:0.25");
+					});
+				}
+				else
+				{
+					segments_html = gauge_circle_segment_svg(size / 2.0, size / 2.0, size * 0.4, angle_start, angle_end, tick_color, 8.0, "rgba(0,0,0,0)", "opacity:0.25");
+				}
+				?><section class="gauge-card needlegauge-card">
+					<div class="gauge-metric-label needlegauge-label-head"><?= label ?></div>
+					<div class="needlegauge-visual">
+						<svg id="<?= gauge_attr_id(gauge_id) ?>-<?= item_id ?>-svg" width="<?= std::to_string((s32)round(size)) ?>" height="<?= std::to_string((s32)round(img_height)) ?>" class="needlegauge-svg"
+							viewBox="0 0 <?= std::to_string((s32)round(size)) ?> <?= std::to_string((s32)round(img_height)) ?>">
+							<?: segments_html ?>
+							<g class="ticks"><?: ticks_html ?></g>
+							<line id="<?= gauge_attr_id(gauge_id) ?>-<?= item_id ?>-needle" class="needle"
+								x1="<?= std::to_string(size * 0.55) ?>" y1="<?= std::to_string(size * 0.5) ?>" x2="<?= std::to_string(size * 0.1) ?>" y2="<?= std::to_string(size * 0.5) ?>"
+								stroke="<?= needle_color ?>" stroke-width="3" stroke-linecap="round"
+								style="transform-origin: <?= std::to_string(size / 2.0) ?>px <?= std::to_string(size / 2.0) ?>px; transform: rotate(<?= std::to_string(needle_angle) ?>rad); transition: transform 0.3s ease;"/>
+							<circle cx="<?= std::to_string(size / 2.0) ?>" cy="<?= std::to_string(size / 2.0) ?>" r="6" fill="<?= needle_color ?>"/>
+						</svg>
+					</div>
+					<div class="needlegauge-info">
+						<div class="gauge-metric-value needlegauge-value" id="<?= gauge_attr_id(gauge_id) ?>-<?= item_id ?>-value" title="<?= tooltip ?>"><?= merged["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 valueEl = document.getElementById(prop.id + '-' + data.name + '-value');
+						let needle = document.getElementById(prop.id + '-' + data.name + '-needle');
+						if(valueEl) valueEl.textContent = data.value + (item.unit || '');
+						let min = Number(item.min || 0);
+						let max = Number(item.max || 100);
+						let pctValue = GaugeComponents.clampValue((Number(data.value) - min) / ((max - min) || 1), 0, 1);
+						let angleStart = Number(item.angle_start != null ? item.angle_start : -Math.PI);
+						let angleEnd = Number(item.angle_end != null ? item.angle_end : 0);
+						let angle = -Math.PI + angleStart + (pctValue * (angleEnd - angleStart));
+						if(needle) needle.style.transform = 'rotate(' + angle + 'rad)';
+					});
+				}
+			};
+			NeedlegaugeComponents.start_listen(<?: json_encode(context.call, '\'') ?>);
+			</script>
+		<? } ?>
+	</>
+}
@@ -0,0 +1,168 @@
+#load "helpers.uce"
+
+COMPONENT(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 style = context.call["style"].to_string();
+	String item_style = context.call["item-style"].to_string();
+	String label_style = context.call["label-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();
+	String layout = first(context.call["layout"].to_string(), "horizontal");
+	String bar_color_default = context.call["bar-color"].to_string();
+	DTree scale = context.call["scale"];
+	DTree markers = context.call["markers"];
+
+	StringList default_palette;
+	default_palette.push_back("var(--success, #10b981)");
+	default_palette.push_back("var(--primary, #60a5fa)");
+	default_palette.push_back("var(--accent, #22d3ee)");
+	default_palette.push_back("var(--warning, #f59e0b)");
+	u32 auto_color_counter = 0;
+
+	<>
+		<section class="gauge-set progressbar-set progressbar-set-<?= gauge_attr_id(layout) ?>" id="<?= gauge_attr_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 = scale;
+						bar.each([&](DTree item, String key) { merged[key] = item; });
+						String item_id = gauge_attr_id(bar_id);
+						String merged_item_style = item_style;
+						if(merged["style"].to_string() != "")
+							merged_item_style += (merged_item_style != "" ? ";" : "") + merged["style"].to_string();
+						String tooltip = merged["tooltip"].to_string();
+						String before_html = merged["before"].to_string();
+						String after_html = merged["after"].to_string();
+						String unit = merged["unit"].to_string();
+						String label = first(merged["label"].to_string(), bar_id);
+						f64 min_value = float_val(first(merged["min"].to_string(), "0"));
+						f64 max_value = float_val(first(merged["max"].to_string(), "100"));
+						f64 value = float_val(first(merged["value"].to_string(), "0"));
+						f64 vrange = max_value - min_value;
+						if(vrange == 0)
+							vrange = 1;
+						f64 pct_value = gauge_clamp_value(((value - min_value) / vrange) * 100.0, 0.0, 100.0);
+						String resolved_color = merged["color"].to_string();
+						if(merged["color"].get_type_name() == "array")
+							resolved_color = gauge_range_color(merged["color"], value);
+						if(resolved_color == "")
+							resolved_color = first(bar_color_default, default_palette[auto_color_counter++ % default_palette.size()]);
+						String opacity = first(merged["opacity"].to_string(), "0.75");
+						?><section class="gauge-card progressbar-card progressbar-card-horizontal" id="<?= gauge_attr_id(gauge_id) ?>-<?= item_id ?>"
+							title="<?= tooltip ?>"
+							style="<?= merged_item_style ?>">
+							<?: before_html ?>
+							<div class="progressbar-card-head">
+								<div class="gauge-metric-label progressbar-label" style="<?= label_style ?>"><?= label ?></div>
+								<div class="gauge-metric-value progressbar-value" style="<?= value_style ?>" id="<?= gauge_attr_id(gauge_id) ?>-<?= item_id ?>-value"><?= merged["value"].to_string() + unit ?></div>
+							</div>
+							<div class="progressbar-background progressbar-background-horizontal">
+								<div class="progressbar-bar" id="<?= gauge_attr_id(gauge_id) ?>-<?= item_id ?>-bar"
+									style="background-color: <?= resolved_color ?>; <?= bar_style ?> opacity: <?= opacity ?>; width: <?= std::to_string(pct_value) ?>%;"></div>
+								<? markers.each([&](DTree marker, String marker_id) {
+									f64 marker_value = float_val(first(marker["value"].to_string(), "0"));
+									f64 marker_pct = gauge_clamp_value(((marker_value - min_value) / vrange) * 100.0, 0.0, 100.0);
+									String marker_color = first(marker["color"].to_string(), "var(--primary-light)");
+									?><div class="progressbar-marker"
+										title="<?= marker["label"].to_string() ?>"
+										style="left: <?= std::to_string(marker_pct) ?>%; background: <?= marker_color ?>;"></div><?
+								}); ?>
+							</div>
+							<? if(tooltip != "") { ?><div class="gauge-metric-meta progressbar-meta"><?= tooltip ?></div><? } ?>
+							<?: after_html ?>
+						</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 = scale;
+						bar.each([&](DTree item, String key) { merged[key] = item; });
+						String item_id = gauge_attr_id(bar_id);
+						String merged_item_style = item_style;
+						if(merged["style"].to_string() != "")
+							merged_item_style += (merged_item_style != "" ? ";" : "") + merged["style"].to_string();
+						String tooltip = merged["tooltip"].to_string();
+						String before_html = merged["before"].to_string();
+						String after_html = merged["after"].to_string();
+						String unit = merged["unit"].to_string();
+						String label = first(merged["label"].to_string(), bar_id);
+						f64 min_value = float_val(first(merged["min"].to_string(), "0"));
+						f64 max_value = float_val(first(merged["max"].to_string(), "100"));
+						f64 value = float_val(first(merged["value"].to_string(), "0"));
+						f64 vrange = max_value - min_value;
+						if(vrange == 0)
+							vrange = 1;
+						f64 pct_value = gauge_clamp_value(((value - min_value) / vrange) * 100.0, 0.0, 100.0);
+						String resolved_color = merged["color"].to_string();
+						if(merged["color"].get_type_name() == "array")
+							resolved_color = gauge_range_color(merged["color"], value);
+						if(resolved_color == "")
+							resolved_color = first(bar_color_default, default_palette[auto_color_counter++ % default_palette.size()]);
+						String opacity = first(merged["opacity"].to_string(), "0.75");
+						?><section class="gauge-card progressbar-card progressbar-card-vertical" id="<?= gauge_attr_id(gauge_id) ?>-<?= item_id ?>"
+							title="<?= tooltip ?>"
+							style="<?= merged_item_style ?>">
+							<?: before_html ?>
+							<div class="gauge-metric-label progressbar-label" style="<?= label_style ?>"><?= label ?></div>
+							<div class="progressbar-background progressbar-background-vertical">
+								<div class="progressbar-bar" id="<?= gauge_attr_id(gauge_id) ?>-<?= item_id ?>-bar"
+									style="background-color: <?= resolved_color ?>; <?= bar_style ?> opacity: <?= opacity ?>; height: <?= std::to_string(pct_value) ?>%;"></div>
+								<? markers.each([&](DTree marker, String marker_id) {
+									f64 marker_value = float_val(first(marker["value"].to_string(), "0"));
+									f64 marker_pct = gauge_clamp_value(((marker_value - min_value) / vrange) * 100.0, 0.0, 100.0);
+									String marker_color = first(marker["color"].to_string(), "var(--primary-light)");
+									?><div class="progressbar-marker"
+										title="<?= marker["label"].to_string() ?>"
+										style="bottom: <?= std::to_string(marker_pct) ?>%; background: <?= marker_color ?>;"></div><?
+								}); ?>
+							</div>
+							<div class="gauge-metric-value progressbar-value" style="<?= value_style ?>" id="<?= gauge_attr_id(gauge_id) ?>-<?= item_id ?>-value"><?= merged["value"].to_string() + unit ?></div>
+							<? if(tooltip != "") { ?><div class="gauge-metric-meta progressbar-meta"><?= tooltip ?></div><? } ?>
+							<?: after_html ?>
+						</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 target = document.getElementById(prop.id + '-' + data.name + '-bar');
+						let valueTarget = document.getElementById(prop.id + '-' + data.name + '-value');
+						if(valueTarget) valueTarget.textContent = data.value + (bar.unit || '');
+						let vrange = Number(bar.max || 100) - Number(bar.min || 0);
+						let pctValue = GaugeComponents.clampValue((Number(data.value) - Number(bar.min || 0)) / (vrange || 1) * 100, 0, 100);
+						if(Array.isArray(bar.color)) {
+							let colorMatch = GaugeComponents.pickEntryFromRange(bar.color, Number(data.value));
+							if(colorMatch && colorMatch.color && target)
+								target.style.background = colorMatch.color;
+						}
+						if(target) {
+							if(prop.layout === 'horizontal') target.style.width = pctValue + '%';
+							else target.style.height = pctValue + '%';
+						}
+					});
+				}
+			};
+			ProgressbarComponents.start_listen(<?: json_encode(context.call, '\'') ?>);
+			</script>
+		<? } ?>
+	</>
+}
@@ -7,9 +7,9 @@ COMPONENT(Request& context)
 	DTree user = users.current();
 	bool signed_in = user["email"].to_string() != "";
 	String theme_key = context.cfg.get_by_path("theme/key").to_string();
-	String wrapper_class = theme_key == "localfirst" ? "admin-account-card" : "nav-account nav-menu";
-	String links_class = theme_key == "localfirst" ? "admin-account-links" : "";
-	String name_class = theme_key == "localfirst" ? "admin-account-name" : "account-name";
+	String wrapper_class = first(context.call["wrapper_class"].to_string(), theme_key == "localfirst" ? "admin-account-card" : "nav-account nav-menu");
+	String links_class = first(context.call["links_wrapper_class"].to_string(), theme_key == "localfirst" ? "admin-account-links" : "");
+	String name_class = first(context.call["name_class"].to_string(), theme_key == "localfirst" ? "admin-account-name" : "account-name");

 	<>
 		<div class="<?= wrapper_class ?>">
@@ -3,18 +3,19 @@
 COMPONENT(Request& context)
 {
 	starter_boot(context);
-	if(context.var["starter"]["embed_mode"].to_string() != "")
+	bool embed_mode = starter_page_embed_mode(context);
+	if(embed_mode)
 		return;

 	String text = first(context.cfg.get_by_path("theme/footer_text").to_string(), context.cfg.get_by_path("site/name").to_string());
-	String inner_class = context.cfg.get_by_path("theme/key").to_string() == "portal-light" ? "footer-inner" : "";
+	String inner_class = first(context.call["inner_class"].to_string(), context.cfg.get_by_path("theme/key").to_string() == "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>
+				<div><p><?= text ?></p></div>
 			<? } ?>
 		</footer>
 	</>
@@ -0,0 +1,18 @@
+#load "../../lib/app.uce"
+
+COMPONENT(Request& context)
+{
+	starter_boot(context);
+	if(starter_page_embed_mode(context))
+		return;
+
+	String cookie_value = context.call["cookie_consent"].to_string();
+	bool cookie_consent = !(cookie_value == "0" || cookie_value == "false" || cookie_value == "FALSE" || cookie_value == "no" || cookie_value == "NO");
+
+	<>
+		<?: component("../example/theme-switcher", context) ?>
+		<? if(cookie_consent) { ?>
+			<?: component("../basic/cookie-consent", context) ?>
+		<? } ?>
+	</>
+}
@@ -0,0 +1,22 @@
+#load "../../lib/app.uce"
+
+COMPONENT(Request& context)
+{
+	starter_boot(context);
+	String title = first(context.var["starter"]["page_title"].to_string(), context.cfg.get_by_path("site/default_page_title").to_string());
+	String description = first(context.cfg.get_by_path("theme/meta_description").to_string(), "UCE starter example");
+	String theme_color = first(context.cfg.get_by_path("theme/theme_color").to_string(), "#0f172a");
+	String icon = starter_asset_url(context.cfg.get_by_path("theme/path").to_string() + "icon.png", context);
+
+	<>
+		<meta charset="utf-8">
+		<title><?= title + " | " + context.cfg.get_by_path("site/name").to_string() ?></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); ?>
+	</>
+}
@@ -3,115 +3,18 @@
 COMPONENT(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 = context.cfg.get_by_path("theme/key").to_string();
-	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="<?= context.cfg.get_by_path("theme/key").to_string() ?>">
-		<head>
-			<? render_component(":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="<?= context.cfg.get_by_path("site/name").to_string() ?>" />
-							</a>
-						</div>
-						<? context.cfg.get_by_path("menu").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>
-	</>
+	if(context.call["main_html"].to_string() != "")
+		context.var["starter"]["fragments"]["main"] = context.call["main_html"];
+	if(context.call["json"].get_type_name() == "array")
+		context.var["starter"]["json"] = context.call["json"];
+	if(context.call["page_type"].to_string() != "")
+		context.var["starter"]["page_type"] = context.call["page_type"];
+	if(context.call["embed_mode"].to_string() != "")
+		context.var["starter"]["embed_mode"] = context.call["embed_mode"];
+	starter_render_page(context);
 }

 COMPONENT:HEAD(Request& context)
 {
-	starter_boot(context);
-	String title = first(context.var["starter"]["page_title"].to_string(), context.cfg.get_by_path("site/default_page_title").to_string());
-	String description = first(context.cfg.get_by_path("theme/meta_description").to_string(), "UCE starter example");
-	String theme_color = first(context.cfg.get_by_path("theme/theme_color").to_string(), "#0f172a");
-	String icon = starter_asset_url(context.cfg.get_by_path("theme/path").to_string() + "icon.png", context);
-
-	<>
-		<meta charset="utf-8">
-		<title><?= title + " | " + context.cfg.get_by_path("site/name").to_string() ?></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); ?>
-	</>
+	print(component("head", context.call, context));
 }
@@ -3,9 +3,20 @@
 COMPONENT(Request& context)
 {
 	starter_boot(context);
+	String nav_class = context.call["nav_class"].to_string();
+	if(nav_class == "" && (context.cfg.get_by_path("theme/key").to_string() == "portal-dark" || context.cfg.get_by_path("theme/key").to_string() == "dark" || context.cfg.get_by_path("theme/key").to_string() == "retro-gaming"))
+		nav_class = "nav-shell";
+
+	DTree account_props;
+	if(context.call["account_wrapper_class"].to_string() != "")
+		account_props["wrapper_class"] = context.call["account_wrapper_class"];
+	if(context.call["links_wrapper_class"].to_string() != "")
+		account_props["links_wrapper_class"] = context.call["links_wrapper_class"];
+	if(context.call["name_class"].to_string() != "")
+		account_props["name_class"] = context.call["name_class"];

 	<>
-		<nav<?: context.cfg.get_by_path("theme/key").to_string() == "portal-dark" || context.cfg.get_by_path("theme/key").to_string() == "dark" || context.cfg.get_by_path("theme/key").to_string() == "retro-gaming" ? " class=\"nav-shell\"" : "" ?>>
+		<nav<?: nav_class != "" ? " class=\"" + html_escape(nav_class) + "\"" : "" ?>>
 			<div class="nav-menu">
 				<a href="<?= starter_link("", context) ?>"><?= context.cfg.get_by_path("site/name").to_string() ?></a>
 				<? context.cfg.get_by_path("menu").each([&](DTree menu_item, String menu_key) {
@@ -14,7 +25,7 @@ COMPONENT(Request& context)
 					?><a href="<?= starter_menu_href(menu_key, menu_item, context) ?>"><?= menu_item["title"].to_string() ?></a><?
 				}); ?>
 			</div>
-			<?: component("account_links", context) ?>
+			<?: component("account_links", account_props, context) ?>
 		</nav>
 	</>
 }
@@ -11,7 +11,7 @@ RENDER(Request& context)
 	{
 		if(resolved["param"].to_string() != "")
 			context.var["starter"]["route"]["param"] = resolved["param"];
-		render_file(resolved["file"].to_string(), context);
+		unit_render(resolved["file"].to_string(), context);
 	}
 	else
 	{
@@ -24,8 +24,6 @@ RENDER(Request& context)
 		</>
 	}
 	String main_html = ob_get_close();
-
-	DTree shell_props;
-	shell_props["main_html"] = main_html;
-	render_component("components/theme/page_shell", shell_props, context);
+	context.var["starter"]["fragments"]["main"] = main_html;
+	starter_render_page(context);
 }
@@ -1,9 +1,19 @@
 var enable_debug = true;

+var starterReady = (typeof $ !== 'undefined' && $.ready)
+    ? $.ready.bind($)
+    : function(callback) {
+        if (document.readyState !== 'loading') {
+            callback();
+        } else {
+            document.addEventListener('DOMContentLoaded', callback);
+        }
+    };
+
 var UI = {

    smoothScrollToNamedAnchors: function() {
-        $('a[href^="#"]').each(anchor => {
+        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
@@ -18,7 +28,8 @@ var UI = {
    },

 	enablePageTransitions: function() {
-		$(document.body).append(`<style>
+		var style = document.createElement('style');
+		style.textContent = `
 			::view-transition-old(root),
 			::view-transition-new(root) {
 			animation-duration: 0.25s;
@@ -40,7 +51,8 @@ var UI = {
 			@keyframes fade-in {
 			from { opacity: 0; }
 			to { opacity: 1; }
-			}</style>`);
+			}`;
+		document.body.appendChild(style);

 		document.addEventListener('click', e => {
 			const link = e.target.closest('a[href]');
@@ -62,4 +74,4 @@ var UI = {

 }

-$.ready(UI.init);
+starterReady(UI.init);
@@ -4,7 +4,7 @@ String starter_fs_root(Request& context)
 {
 	String root = context.var["starter"]["fs_root"].to_string();
 	if(root == "")
-		root = get_cwd();
+		root = cwd_get();
 	return(root);
 }

@@ -276,13 +276,89 @@ String starter_html_class(Request& context)
 	return(classes);
 }

+String starter_page_main_html(Request& context)
+{
+	String main_html = context.call["main_html"].to_string();
+	if(main_html == "")
+		main_html = context.var["starter"]["fragments"]["main"].to_string();
+	return(main_html);
+}
+
+bool starter_bool_value(DTree value, bool fallback = false)
+{
+	String raw = trim(value.to_string());
+	if(raw == "")
+		return(fallback);
+	return(
+		raw != "0" &&
+		raw != "false" &&
+		raw != "FALSE" &&
+		raw != "False" &&
+		raw != "(false)" &&
+		raw != "no" &&
+		raw != "NO" &&
+		raw != "No"
+	);
+}
+
+bool starter_request_embed_mode(Request& context)
+{
+	return(starter_bool_value(context.var["starter"]["embed_mode"]));
+}
+
+bool starter_page_embed_mode(Request& context)
+{
+	String embed_value = context.call["embed_mode"].to_string();
+	if(embed_value != "")
+		return(starter_bool_value(context.call["embed_mode"]));
+	return(starter_request_embed_mode(context));
+}
+
+String starter_theme_page_component(Request& context)
+{
+	String page_type = first(context.var["starter"]["page_type"].to_string(), "html");
+	if(page_type == "blank")
+		return("themes/common/page.blank.uce");
+	if(page_type == "json")
+		return("themes/common/page.json.uce");
+
+	String theme_path = context.cfg.get_by_path("theme/path").to_string();
+	if(theme_path == "")
+		return("");
+	if(theme_path[theme_path.length() - 1] != '/')
+		theme_path.append(1, '/');
+	return(theme_path + "page.html.uce");
+}
+
+void starter_render_page(Request& context)
+{
+	if(context.flags.status >= 300 && context.flags.status < 400)
+		return;
+
+	DTree page_props;
+	page_props["main_html"] = context.var["starter"]["fragments"]["main"];
+	if(context.var["starter"]["json"].get_type_name() == "array")
+		page_props["json"] = context.var["starter"]["json"];
+
+	String page_component = starter_theme_page_component(context);
+	if(page_component != "" && file_exists(page_component))
+	{
+		print(component(page_component, page_props, context));
+		return;
+	}
+
+	context.set_status(500, "Internal Server Error");
+	context.header["Content-Type"] = "text/plain; charset=utf-8";
+	print("UCE Starter is missing the page template component: " + page_component);
+}
+
 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"]["fs_root"] = cwd_get();
 	context.var["starter"]["script_url"] = first(context.params["DOCUMENT_URI"], context.params["SCRIPT_NAME"]);

 	String base_url = dirname(context.var["starter"]["script_url"].to_string());
@@ -102,7 +102,7 @@ public:
 			return(result);
 		}

-		String salt = gen_sha1(std::to_string((u64)time()) + ":" + std::to_string((u64)(microtime() * 1000000.0)) + ":" + make_session_id()).substr(0, 24);
+		String salt = gen_sha1(std::to_string((u64)time()) + ":" + std::to_string((u64)(time_precise() * 1000000.0)) + ":" + session_id_create()).substr(0, 24);
 		DTree user;
 		user["email"] = email;
 		user["salt"] = salt;
@@ -1 +0,0 @@
-<?= URL::$fragments['main'] ?>  
@@ -0,0 +1,7 @@
+#load "../../lib/app.uce"
+
+COMPONENT(Request& context)
+{
+	starter_boot(context);
+	print(starter_page_main_html(context));
+}
@@ -1,12 +0,0 @@
-<?php
-
-    header('Content-Type: application/json');
-    header('Cache-Control: no-cache, no-store, must-revalidate');
-    if(URL::$fragments['json'])
-    {
-        print(json_encode(URL::$fragments['json']));
-    }
-    else
-    {
-        print(URL::$fragments['main']);
-    }
@@ -0,0 +1,14 @@
+#load "../../lib/app.uce"
+
+COMPONENT(Request& context)
+{
+	starter_boot(context);
+	context.header["Content-Type"] = "application/json";
+	context.header["Cache-Control"] = "no-cache, no-store, must-revalidate";
+	if(context.call["json"].get_type_name() == "array")
+		print(json_encode(context.call["json"]));
+	else if(context.var["starter"]["json"].get_type_name() == "array")
+		print(json_encode(context.var["starter"]["json"]));
+	else
+		print(starter_page_main_html(context));
+}
@@ -1,21 +0,0 @@
-<?php
-	Profiler::log('page template: start', 1);
-	$embed_mode = !empty($_GET['embed']);
-?><!doctype html>
-<html class="<?= asafe(theme_html_class()) ?>" lang="en" data-theme-key="<?= asafe((string)cfg('theme/key')) ?>">
-<head>
-	<?php theme_render_head(); ?>
-</head>
-<body<?= $embed_mode ? ' class="embed-mode"' : '' ?>>
-	<?php theme_render_global_controls($embed_mode); ?>
-	<?php theme_render_standard_nav(array(
-		'show_avatar' => false,
-		'account_wrapper_class' => 'nav-account nav-menu',
-	)); ?>
-	<div id="content"<?= $embed_mode ? ' class="embed-content"' : '' ?>>
-		<?= URL::$fragments['main'] ?>
-	</div>
-	<?php theme_render_footer(null, array('embed_mode' => $embed_mode)); ?>
-</body>
-<?php Profiler::log('page template: end', -1); ?>
-</html>
@@ -0,0 +1,31 @@
+#load "../../lib/app.uce"
+
+COMPONENT(Request& context)
+{
+	starter_boot(context);
+	bool embed_mode = starter_page_embed_mode(context);
+	String main_html = starter_page_main_html(context);
+
+	DTree nav_props;
+	nav_props["account_wrapper_class"] = "nav-account nav-menu";
+
+	DTree footer_props;
+	footer_props["embed_mode"].set_bool(embed_mode);
+
+	<>
+		<!doctype html>
+		<html class="<?= starter_html_class(context) ?>" lang="en" data-theme-key="<?= context.cfg.get_by_path("theme/key").to_string() ?>">
+		<head>
+			<?: component("../../components/theme/head", context) ?>
+		</head>
+		<body<?: embed_mode ? " class=\"embed-mode\"" : "" ?>>
+			<?: component("../../components/theme/global_controls", context) ?>
+			<?: component("../../components/theme/standard_nav", nav_props, context) ?>
+			<div id="content"<?: embed_mode ? " class=\"embed-content\"" : "" ?>>
+				<?: main_html ?>
+			</div>
+			<?: component("../../components/theme/footer", footer_props, context) ?>
+		</body>
+		</html>
+	</>
+}
@@ -1,19 +0,0 @@
-<?php
-	Profiler::log('page template: start', 1);
-	$embed_mode = !empty($_GET['embed']);
-?><!doctype html>
-<html class="<?= asafe(theme_html_class()) ?>" lang="en" data-theme-key="<?= asafe((string)cfg('theme/key')) ?>">
-<head>
-	<?php theme_render_head(); ?>
-</head>
-<body<?= $embed_mode ? ' class="embed-mode"' : '' ?>>
-	<?php theme_render_global_controls($embed_mode); ?>
-	<?php theme_render_standard_nav(array('show_avatar' => false)); ?>
-	<div id="content"<?= $embed_mode ? ' class="embed-content"' : '' ?>>
-		<?= URL::$fragments['main'] ?>
-	</div>
-	<?php theme_render_footer(null, array('embed_mode' => $embed_mode)); ?>
-</body>
-<?php Profiler::log('page template: end', -1); ?>
-</html>
-
@@ -0,0 +1,28 @@
+#load "../../lib/app.uce"
+
+COMPONENT(Request& context)
+{
+	starter_boot(context);
+	bool embed_mode = starter_page_embed_mode(context);
+	String main_html = starter_page_main_html(context);
+
+	DTree footer_props;
+	footer_props["embed_mode"].set_bool(embed_mode);
+
+	<>
+		<!doctype html>
+		<html class="<?= starter_html_class(context) ?>" lang="en" data-theme-key="<?= context.cfg.get_by_path("theme/key").to_string() ?>">
+		<head>
+			<?: component("../../components/theme/head", context) ?>
+		</head>
+		<body<?: embed_mode ? " class=\"embed-mode\"" : "" ?>>
+			<?: component("../../components/theme/global_controls", context) ?>
+			<?: component("../../components/theme/standard_nav", context) ?>
+			<div id="content"<?: embed_mode ? " class=\"embed-content\"" : "" ?>>
+				<?: main_html ?>
+			</div>
+			<?: component("../../components/theme/footer", footer_props, context) ?>
+		</body>
+		</html>
+	</>
+}
@@ -1,38 +0,0 @@
-<?php
-	Profiler::log('page template: start', 1);
-	$embed_mode = !empty($_GET['embed']);
-	$currentPath = URL::$route['l-path'] ?? '';
-?><!doctype html>
-<html class="<?= asafe(theme_html_class()) ?>" lang="en" data-theme-key="<?= asafe((string)cfg('theme/key')) ?>">
-<head>
-	<?php theme_render_head(); ?>
-</head>
-<body class="admin-page localfirst-theme dark-theme<?= $embed_mode ? ' embed-mode' : '' ?>">
-	<?php theme_render_global_controls($embed_mode, array('cookie_consent' => false)); ?>
-	<div class="admin-shell">
-		<nav class="admin-nav">
-			<div class="admin-nav-header">
-				<a class="admin-nav-title" href="<?= URL::Link('') ?>">
-					<img class="admin-nav-logo-img" src="<?= url_root().ltrim((string)cfg('theme/path'), '/') ?>img/local_first_logo.png" alt="<?= safe(cfg('site/name')) ?>" />
-				</a>
-			</div>
-			<?php foreach((array)cfg('menu') as $menu_key => $menu_item) if(empty($menu_item['hidden'])) { ?>
-				<a class="admin-nav-item<?= ($menu_key !== '' && ($currentPath === $menu_key || strpos($currentPath, $menu_key.'/') === 0)) ? ' active' : '' ?>" href="<?= theme_menu_href($menu_key, $menu_item) ?>"><?= safe($menu_item['title']) ?></a>
-			<?php } ?>
-		</nav>
-		<div class="admin-main">
-			<?php if(!$embed_mode): ?><div class="admin-toolbar">
-				<?php theme_render_account_links(array(
-					'wrapper_class' => 'admin-account-card',
-					'links_wrapper_class' => 'admin-account-links',
-					'name_class' => 'admin-account-name',
-				)); ?>
-			</div><?php endif; ?>
-			<div id="content" class="admin-content">
-				<?= URL::$fragments['main'] ?>
-			</div>
-		</div>
-	</div>
-</body>
-<?php Profiler::log('page template: end', -1); ?>
-</html>
@@ -0,0 +1,54 @@
+#load "../../lib/app.uce"
+
+COMPONENT(Request& context)
+{
+	starter_boot(context);
+	bool embed_mode = starter_page_embed_mode(context);
+	String main_html = starter_page_main_html(context);
+	String current_path = context.var["starter"]["route"]["l_path"].to_string();
+
+	DTree global_props;
+	global_props["cookie_consent"].set_bool(false);
+
+	DTree account_props;
+	account_props["wrapper_class"] = "admin-account-card";
+	account_props["links_wrapper_class"] = "admin-account-links";
+	account_props["name_class"] = "admin-account-name";
+
+	<>
+		<!doctype html>
+		<html class="<?= starter_html_class(context) ?>" lang="en" data-theme-key="<?= context.cfg.get_by_path("theme/key").to_string() ?>">
+		<head>
+			<?: component("../../components/theme/head", context) ?>
+		</head>
+		<body class="admin-page localfirst-theme dark-theme<?= embed_mode ? " embed-mode" : "" ?>">
+			<?: component("../../components/theme/global_controls", global_props, context) ?>
+			<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="<?= context.cfg.get_by_path("site/name").to_string() ?>" />
+						</a>
+					</div>
+					<? context.cfg.get_by_path("menu").each([&](DTree menu_item, String menu_key) {
+						if(menu_item["hidden"].to_string() == "1")
+							return;
+						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("../../components/theme/account_links", account_props, context) ?>
+						</div>
+					<? } ?>
+					<div id="content" class="admin-content">
+						<?: main_html ?>
+					</div>
+				</div>
+			</div>
+		</body>
+		</html>
+	</>
+}
@@ -1,18 +0,0 @@
-<?php
-	Profiler::log('page template: start', 1);
-	$embed_mode = !empty($_GET['embed']);
-?><!doctype html>
-<html class="<?= asafe(theme_html_class()) ?>" lang="en" data-theme-key="<?= asafe((string)cfg('theme/key')) ?>">
-<head>
-	<?php theme_render_head(); ?>
-</head>
-<body class="portal-theme portal-dark-theme dark-theme<?= $embed_mode ? ' embed-mode' : '' ?>">
-	<?php theme_render_global_controls($embed_mode); ?>
-	<?php theme_render_standard_nav(array('account_wrapper_class' => 'nav-account nav-menu')); ?>
-	<div id="content"<?= $embed_mode ? ' class="embed-content"' : '' ?>>
-		<?= URL::$fragments['main'] ?>
-	</div>
-	<?php theme_render_footer(null, array('embed_mode' => $embed_mode)); ?>
-</body>
-<?php Profiler::log('page template: end', -1); ?>
-</html>
@@ -0,0 +1,31 @@
+#load "../../lib/app.uce"
+
+COMPONENT(Request& context)
+{
+	starter_boot(context);
+	bool embed_mode = starter_page_embed_mode(context);
+	String main_html = starter_page_main_html(context);
+
+	DTree nav_props;
+	nav_props["account_wrapper_class"] = "nav-account nav-menu";
+
+	DTree footer_props;
+	footer_props["embed_mode"].set_bool(embed_mode);
+
+	<>
+		<!doctype html>
+		<html class="<?= starter_html_class(context) ?>" lang="en" data-theme-key="<?= context.cfg.get_by_path("theme/key").to_string() ?>">
+		<head>
+			<?: component("../../components/theme/head", context) ?>
+		</head>
+		<body class="portal-theme portal-dark-theme dark-theme<?= embed_mode ? " embed-mode" : "" ?>">
+			<?: component("../../components/theme/global_controls", context) ?>
+			<?: component("../../components/theme/standard_nav", nav_props, context) ?>
+			<div id="content"<?: embed_mode ? " class=\"embed-content\"" : "" ?>>
+				<?: main_html ?>
+			</div>
+			<?: component("../../components/theme/footer", footer_props, context) ?>
+		</body>
+		</html>
+	</>
+}
@@ -1,18 +0,0 @@
-<?php
-	Profiler::log('page template: start', 1);
-	$embed_mode = !empty($_GET['embed']);
-?><!doctype html>
-<html class="<?= asafe(theme_html_class()) ?>" lang="en" data-theme-key="<?= asafe((string)cfg('theme/key')) ?>">
-<head>
-	<?php theme_render_head(); ?>
-</head>
-<body class="portal-theme portal-light-theme<?= $embed_mode ? ' embed-mode' : '' ?>">
-	<?php theme_render_global_controls($embed_mode); ?>
-	<?php theme_render_standard_nav(); ?>
-	<div id="content"<?= $embed_mode ? ' class="embed-content"' : '' ?>>
-		<?= URL::$fragments['main'] ?>
-	</div>
-	<?php theme_render_footer(null, array('embed_mode' => $embed_mode, 'inner_class' => 'footer-inner')); ?>
-</body>
-<?php Profiler::log('page template: end', -1); ?>
-</html>
@@ -0,0 +1,29 @@
+#load "../../lib/app.uce"
+
+COMPONENT(Request& context)
+{
+	starter_boot(context);
+	bool embed_mode = starter_page_embed_mode(context);
+	String main_html = starter_page_main_html(context);
+
+	DTree footer_props;
+	footer_props["embed_mode"].set_bool(embed_mode);
+	footer_props["inner_class"] = "footer-inner";
+
+	<>
+		<!doctype html>
+		<html class="<?= starter_html_class(context) ?>" lang="en" data-theme-key="<?= context.cfg.get_by_path("theme/key").to_string() ?>">
+		<head>
+			<?: component("../../components/theme/head", context) ?>
+		</head>
+		<body class="portal-theme portal-light-theme<?= embed_mode ? " embed-mode" : "" ?>">
+			<?: component("../../components/theme/global_controls", context) ?>
+			<?: component("../../components/theme/standard_nav", context) ?>
+			<div id="content"<?: embed_mode ? " class=\"embed-content\"" : "" ?>>
+				<?: main_html ?>
+			</div>
+			<?: component("../../components/theme/footer", footer_props, context) ?>
+		</body>
+		</html>
+	</>
+}
@@ -1,22 +0,0 @@
-<?php
-	Profiler::log('page template: start', 1);
-	$embed_mode = !empty($_GET['embed']);
-?><!doctype html>
-<html class="<?= asafe(theme_html_class()) ?>" lang="en" data-theme-key="<?= asafe((string)cfg('theme/key')) ?>">
-<head>
-	<?php theme_render_head(); ?>
-</head>
-<body<?= $embed_mode ? ' class="embed-mode"' : '' ?>>
-	<div class="retro-stars"></div>
-	<?php theme_render_global_controls($embed_mode); ?>
-	<?php theme_render_standard_nav(array(
-		'show_avatar' => false,
-		'account_wrapper_class' => 'nav-account nav-menu',
-	)); ?>
-	<div id="content"<?= $embed_mode ? ' class="embed-content"' : '' ?>>
-		<?= URL::$fragments['main'] ?>
-	</div>
-	<?php theme_render_footer(null, array('embed_mode' => $embed_mode)); ?>
-</body>
-<?php Profiler::log('page template: end', -1); ?>
-</html>
@@ -0,0 +1,32 @@
+#load "../../lib/app.uce"
+
+COMPONENT(Request& context)
+{
+	starter_boot(context);
+	bool embed_mode = starter_page_embed_mode(context);
+	String main_html = starter_page_main_html(context);
+
+	DTree nav_props;
+	nav_props["account_wrapper_class"] = "nav-account nav-menu";
+
+	DTree footer_props;
+	footer_props["embed_mode"].set_bool(embed_mode);
+
+	<>
+		<!doctype html>
+		<html class="<?= starter_html_class(context) ?>" lang="en" data-theme-key="<?= context.cfg.get_by_path("theme/key").to_string() ?>">
+		<head>
+			<?: component("../../components/theme/head", context) ?>
+		</head>
+		<body<?: embed_mode ? " class=\"embed-mode\"" : "" ?>>
+			<div class="retro-stars"></div>
+			<?: component("../../components/theme/global_controls", context) ?>
+			<?: component("../../components/theme/standard_nav", nav_props, context) ?>
+			<div id="content"<?: embed_mode ? " class=\"embed-content\"" : "" ?>>
+				<?: main_html ?>
+			</div>
+			<?: component("../../components/theme/footer", footer_props, context) ?>
+		</body>
+		</html>
+	</>
+}
@@ -21,7 +21,7 @@ RENDER(Request& context)
 		<h1>Profile</h1>
 		<p>Email: <?= user["email"].to_string() ?></p>
 		<p>Roles: <?= roles ?></p>
-		<p>Created: <?= date("%Y-%m-%dT%H:%M:%S", int_val(user["created"].to_string())) ?></p>
+		<p>Created: <?= time_format_local("%Y-%m-%dT%H:%M:%S", int_val(user["created"].to_string())) ?></p>
 		<p><a href="<?= starter_link("account/logout", context) ?>">Logout</a></p>
 	</>
 }
@@ -5,6 +5,7 @@ RENDER(Request& context)
 	starter_boot(context);
 	context.var["starter"]["page_title"] = "Gauges";
 	starter_register_css("themes/common/css/gauges.css", context);
+	f64 pi = 3.14159265358979323846;

 	DTree props;
 	DTree item;
@@ -20,10 +21,19 @@ RENDER(Request& context)
 	props["layout"] = "horizontal";
 	props["style"] = "flex:1 1 24rem";
 	props["listen"].set_bool(true);
-	item["value"] = "45"; item["min"] = "0"; item["max"] = "200"; item["label"] = "CPU"; item["tooltip"] = "CPU Usage"; props["items"]["cpu"] = item; item.clear();
+	props["markers"]["zero"]["value"] = "0";
+	props["markers"]["zero"]["label"] = "Zero";
+	props["markers"]["zero"]["color"] = "var(--bg-color)";
+	props["markers"]["high"]["value"] = "100";
+	props["markers"]["high"]["label"] = "High";
+	item["value"] = "45"; item["min"] = "0"; item["max"] = "200"; item["label"] = "CPU"; item["tooltip"] = "CPU Usage";
+	item["color"]["0"]["from"] = "-50"; item["color"]["0"]["to"] = "20"; item["color"]["0"]["color"] = "var(--text-muted)";
+	item["color"]["1"]["from"] = "20"; item["color"]["1"]["to"] = "80"; item["color"]["1"]["color"] = "var(--primary)";
+	item["color"]["2"]["from"] = "80"; item["color"]["2"]["to"] = "100"; item["color"]["2"]["color"] = "var(--warning)";
+	props["items"]["cpu"] = item; item.clear();
 	item["value"] = "92"; item["min"] = "-50"; item["max"] = "100"; item["label"] = "Memory"; item["tooltip"] = "Memory Usage"; props["items"]["memory"] = item; item.clear();
 	item["value"] = "28"; item["min"] = "0"; item["max"] = "100"; item["label"] = "Disk I/O"; item["tooltip"] = "Disk I/O"; props["items"]["disk"] = item;
-	print(component("../components/gauges/gauges:PROGRESSBAR", props, context));
+	print(component("../components/gauges/progressbar", props, context));

 	props.clear();
 	props["id"] = "vertical_demo";
@@ -33,10 +43,15 @@ RENDER(Request& context)
 	props["style"] = "flex:1 1 24rem";
 	props["height"] = "350";
 	props["listen"].set_bool(true);
-	item.clear(); item["value"] = "45"; item["min"] = "0"; item["max"] = "200"; item["label"] = "CPU"; props["items"]["cpu"] = item;
-	item.clear(); item["value"] = "92"; item["min"] = "-50"; item["max"] = "100"; item["label"] = "RAM"; props["items"]["memory"] = item;
-	item.clear(); item["value"] = "28"; item["min"] = "0"; item["max"] = "100"; item["label"] = "I/O"; props["items"]["disk"] = item;
-	print(component("../components/gauges/gauges:PROGRESSBAR", props, context));
+	props["markers"]["zero"]["value"] = "0";
+	props["markers"]["zero"]["label"] = "Zero";
+	props["markers"]["zero"]["color"] = "var(--bg-color)";
+	props["markers"]["high"]["value"] = "100";
+	props["markers"]["high"]["label"] = "High";
+	item.clear(); item["value"] = "45"; item["min"] = "0"; item["max"] = "200"; item["label"] = "CPU"; item["tooltip"] = "CPU Usage"; props["items"]["cpu"] = item;
+	item.clear(); item["value"] = "92"; item["min"] = "-50"; item["max"] = "100"; item["label"] = "RAM"; item["tooltip"] = "Memory Usage"; props["items"]["memory"] = item;
+	item.clear(); item["value"] = "28"; item["min"] = "0"; item["max"] = "100"; item["label"] = "I/O"; item["tooltip"] = "Disk I/O"; props["items"]["disk"] = item;
+	print(component("../components/gauges/progressbar", props, context));

 	<>
 			<div class="gauge-control-panel">
@@ -54,13 +69,34 @@ RENDER(Request& context)
 	props.clear();
 	props["id"] = "needle_demo";
 	props["title"] = "Needle Gauge";
-	props["subtitle"] = "The original analog gauge now uses the same elevated panels and theme-token palette as the arc gauges.";
+	props["subtitle"] = "The original analog gauge now uses the same elevated panels, typography, and theme-token palette as the arc gauges.";
 	props["style"] = "flex:1 1 24rem";
 	props["listen"].set_bool(true);
-	item.clear(); item["value"] = "45"; item["min"] = "0"; item["max"] = "200"; item["label"] = "CPU"; item["tooltip"] = "CPU Usage"; props["items"]["cpu"] = item;
-	item.clear(); item["value"] = "92"; item["min"] = "-50"; item["max"] = "100"; item["label"] = "Memory"; item["tooltip"] = "Memory Usage"; props["items"]["memory"] = item;
-	item.clear(); item["value"] = "28"; item["min"] = "0"; item["max"] = "100"; item["label"] = "Disk I/O"; item["tooltip"] = "Disk I/O"; props["items"]["disk"] = item;
-	print(component("../components/gauges/gauges:NEEDLEGAUGE", props, context));
+	props["label"] = "CPU";
+	props["tooltip"] = "CPU Usage";
+	props["scale"]["angle_start"] = std::to_string(-1.2 * pi);
+	props["scale"]["angle_end"] = std::to_string(0.2 * pi);
+	props["scale"]["max"] = "100";
+	props["scale"]["unit"] = "%";
+	props["scale"]["ticks-every"] = "10";
+	props["scale"]["value-labels-every"] = "20";
+	props["scale"]["tick-color"] = "var(--text-muted)";
+	props["scale"]["color"]["0"]["from"] = "-50";
+	props["scale"]["color"]["0"]["to"] = "10";
+	props["scale"]["color"]["0"]["color"] = "var(--primary)";
+	props["scale"]["color"]["1"]["from"] = "10";
+	props["scale"]["color"]["1"]["to"] = "70";
+	props["scale"]["color"]["1"]["color"] = "var(--text-muted)";
+	props["scale"]["color"]["2"]["from"] = "70";
+	props["scale"]["color"]["2"]["to"] = "90";
+	props["scale"]["color"]["2"]["color"] = "var(--warning)";
+	props["scale"]["color"]["3"]["from"] = "90";
+	props["scale"]["color"]["3"]["to"] = "200";
+	props["scale"]["color"]["3"]["color"] = "var(--error)";
+	item.clear(); item["max"] = "200"; item["value"] = "45"; item["label"] = "CPU"; props["items"]["cpu"] = item;
+	item.clear(); item["value"] = "92"; item["min"] = "-50"; item["label"] = "Memory"; item["tooltip"] = "Memory Usage"; props["items"]["memory"] = item;
+	item.clear(); item["value"] = "28"; item["label"] = "Disk I/O"; item["tooltip"] = "Disk I/O"; props["items"]["disk"] = item;
+	print(component("../components/gauges/needlegauge", props, context));

 	<>
 		</div>
@@ -70,13 +106,17 @@ RENDER(Request& context)
 	props.clear();
 	props["id"] = "arc_demo";
 	props["title"] = "SVG Arc Gauges";
-	props["subtitle"] = "Backported from the llm2 overview as reusable KPI-style gauges.";
+	props["subtitle"] = "Backported from the llm2 overview as reusable KPI-style gauges with optional watermark tracking.";
 	props["style"] = "flex: 2 1 36rem";
 	props["listen"].set_bool(true);
-	item.clear(); item["label"] = "System Load"; item["value"] = "1.8"; item["max"] = "8"; item["precision"] = "1"; item["caption"] = "LOAD 1M"; item["meta"] = "4 cores available"; props["items"]["load"] = item;
-	item.clear(); item["label"] = "Memory"; item["value"] = "62"; item["max"] = "100"; item["precision"] = "0"; item["unit"] = "%"; item["caption"] = "MEMORY"; item["meta"] = "9.9 / 16 GB"; props["items"]["memory_arc"] = item;
-	item.clear(); item["label"] = "Network"; item["value"] = "18"; item["max"] = "100"; item["precision"] = "0"; item["unit"] = " MB/s"; item["caption"] = "THROUGHPUT"; item["meta"] = "Inbound + outbound"; props["items"]["network"] = item;
-	print(component("../components/gauges/gauges:ARCGAUGE", props, context));
+	item.clear(); item["label"] = "System Load"; item["value"] = "1.8"; item["max"] = "8"; item["precision"] = "1"; item["caption"] = "LOAD 1M"; item["meta"] = "4 cores available"; item["watermark_prefix"] = "loadDemo";
+	item["color"]["0"]["from"] = "0"; item["color"]["0"]["to"] = "3.5"; item["color"]["0"]["color"] = "var(--success, #10b981)";
+	item["color"]["1"]["from"] = "3.5"; item["color"]["1"]["to"] = "6"; item["color"]["1"]["color"] = "var(--warning, #f59e0b)";
+	item["color"]["2"]["from"] = "6"; item["color"]["2"]["to"] = "8"; item["color"]["2"]["color"] = "var(--error, #ef4444)";
+	props["items"]["load"] = item;
+	item.clear(); item["label"] = "Memory"; item["value"] = "62"; item["max"] = "100"; item["precision"] = "0"; item["unit"] = "%"; item["caption"] = "MEMORY"; item["meta"] = "9.9 / 16 GB"; item["watermark_prefix"] = "memoryDemo"; props["items"]["memory_arc"] = item;
+	item.clear(); item["label"] = "Network"; item["value"] = "18"; item["max"] = "100"; item["precision"] = "0"; item["unit"] = " MB/s"; item["caption"] = "THROUGHPUT"; item["meta"] = "Inbound + outbound"; item["watermark_prefix"] = "networkDemo"; props["items"]["network"] = item;
+	print(component("../components/gauges/arcgauge", props, context));

 	<>
 			<div class="gauge-control-panel">
@@ -7,12 +7,12 @@ RENDER(Request& context)
 		<link rel="stylesheet" href='style.css'></link>
 		<h1>
 			<a href="index.uce">UCE Test</a>:
-			call_file()
+			unit_call()
 		</h1>
 		<pre><?
-			call_file("call_file_funcs.uce", "test_func");
+			unit_call("call_file_funcs.uce", "test_func");
 			print("\n");
-			render_file("call_file_funcs.uce", context);
+			unit_render("call_file_funcs.uce", context);
 		?></pre>
 		<pre><?= var_dump(context.params) ?></pre>
 	</>
@@ -1,6 +1,7 @@
-// Minimal exported helper used by the `call_file()` demo page.
+// Minimal exported helper used by the `unit_call()` demo page.

-EXPORT void test_func()
+EXPORT DTree* test_func(DTree* call_param)
 {
 	print("HELLO FROM TEST FUNCTION");
+	return(0);
 }
@@ -28,6 +28,6 @@ RENDER(Request& context)
 			<?: component("components/card", card_props, context) ?>
 		</div>
 		<h2>Named Component</h2>
-		<? render_component("components/card:BODY", named_props, context); ?>
+		<? component_render("components/card:BODY", named_props, context); ?>
 	</>
 }
@@ -3,8 +3,8 @@ COMPONENT(Request& context)
 {
 	<>
 		<section style="border:1px solid #ccc;padding:1em;margin:1em 0;">
-			<? render_component(":TITLE", context.call, context); ?>
-			<? render_component(":BODY", context.call, context); ?>
+			<? component_render(":TITLE", context.call, context); ?>
+			<? component_render(":BODY", context.call, context); ?>
 		</section>
 	</>
 }
@@ -20,7 +20,7 @@ RENDER(Request& context)
 			if(context.get["cmd"] == "clear")
 				file_put_contents("/tmp/test.txt", "");

-			file_append("/tmp/test.txt", context.server->request_count, "\thello world\t", 2, "\t", time(), "\t", microtime(), "\n");
+			file_append("/tmp/test.txt", context.server->request_count, "\thello world\t", 2, "\t", time(), "\t", time_precise(), "\n");

 			print(file_get_contents("/tmp/test.txt"));

@@ -1,57 +1,81 @@


+void render_card(String url, String title, String desc)
+{
+	<><a class="test-card" href="<?= url ?>">
+		<strong><?= title ?></strong>
+		<span><?= desc ?></span>
+	</a></>
+}
+
 RENDER(Request& context)
 {
 	DTree p;
 	p.set(context.params);

-	<>
+	<><html>
+	<head>
+		<meta name="viewport" content="width=device-width, initial-scale=1"></meta>
 		<link rel="stylesheet" href='style.css?v=<?= time() ?>'></link>
+	</head>
+	<body>
 		<h1>
-			<a href="index.uce">UCE Test</a>:
-			Index
+			<a href="index.uce">UCE Test Suite</a>
+			<a class="docs-link" href="../doc/index.uce">API Docs &rarr;</a>
 		</h1>
-		<ul>
-			<li><a href="../doc/index.uce">Help Docs</a></li>
-			<li><a href="hello.uce">Hello</a></li>
-			<li><a href="post.uce">Form Post</a></li>
-			<li><a href="post-multipart.uce">Form Multipart Post</a></li>
-			<li><a href="working-dir.uce">Working Directory</a></li>
-			<li><a href="uri.uce">URI</a></li>
-			<li><a href="cookie.uce">Cookies</a></li>
-			<li><a href="session.uce">Session</a></li>
-			<li><a href="str_replace.uce">String replace</a></li>
-			<li><a href="dtree.uce">DTree</a></li>
-			<li><a href="json.uce">JSON</a></li>
-			<li><a href="memcached.uce">Memcached</a></li>
-			<li><a href="mysql.uce">MySQL Connector</a></li>
-			<li><a href="fileio.uce">File I/O</a></li>
-			<li><a href="shell.uce">Shell</a></li>
-			<li><a href="file_append.uce">File Append</a></li>
-			<li><a href="random.uce">RNG/Noise</a></li>
-			<li><a href="task.uce">Task</a></li>
-			<li><a href="task_repeat.uce">Task repeat</a></li>
-			<li><a href="utf8.uce">UTF-8</a></li>
-			<li><a href="call_file.uce">call_file()</a></li>
-			<li><a href="parse_time.uce">parse_time()</a></li>
-			<li><a href="header.uce">header</a></li>
-			<li><a href="components.uce">Components</a></li>
-			<li><a href="markdown.uce">Markdown</a></li>
-			<li><a href="error-reporting.uce">Error reporting</a></li>
-			<li><a href="websockets.ws.uce">WebSockets</a></li>
-		</ul>
-		<pre><?
-			print("Worker PID: ", my_pid, "\n");
-			print("Parent PID: ", parent_pid, " \n");
-			print("Output buffer size: ", context.ob->str().length(), " \n");
-			print("Request #", context.server->request_count, "\n");
-		?></pre>
-		<pre><?= (var_dump(p)) ?></pre>
-		<div><?
-			print("Output buffer size: ", context.ob->str().length(), " \n");
-		?></div>
-	</>
+		<div class="test-grid">
+			<div class="grid-heading">Basics</div>
+			<? render_card("hello.uce", "Hello World", "Basic output and server time"); ?>
+			<? render_card("working-dir.uce", "Working Directory", "Server paths and cwd"); ?>
+			<? render_card("header.uce", "Headers", "HTTP response headers"); ?>
+			<? render_card("error-reporting.uce", "Error Reporting", "Error handling and output"); ?>

-	//context.flags.log_request = false;
+			<div class="grid-heading">Data Types &amp; Parsing</div>
+			<? render_card("dtree.uce", "DTree", "Dynamic hierarchical data tree"); ?>
+			<? render_card("json.uce", "JSON", "Parse and encode JSON data"); ?>
+			<? render_card("string.uce", "String", "String operations"); ?>
+			<? render_card("str_replace.uce", "String Replace", "Search and replace in strings"); ?>
+			<? render_card("utf8.uce", "UTF-8", "Unicode string handling"); ?>
+			<? render_card("random.uce", "RNG / Noise", "Random generation and noise"); ?>
+			<? render_card("parse_time.uce", "time_parse()", "Date and time parsing"); ?>
+
+			<div class="grid-heading">HTTP &amp; Forms</div>
+			<? render_card("post.uce", "Form POST", "URL-encoded form submission"); ?>
+			<? render_card("post-multipart.uce", "Multipart POST", "File upload and multipart forms"); ?>
+			<? render_card("uri.uce", "URI", "URI encoding and decoding"); ?>
+			<? render_card("cookie.uce", "Cookies", "Read and write browser cookies"); ?>
+			<? render_card("session.uce", "Session", "Server-side session state"); ?>
+
+			<div class="grid-heading">Storage &amp; I/O</div>
+			<? render_card("fileio.uce", "File I/O", "Read and write files"); ?>
+			<? render_card("file_append.uce", "File Append", "Append data to files"); ?>
+			<? render_card("shell.uce", "Shell", "Execute shell commands"); ?>
+			<? render_card("memcached.uce", "Memcached", "Memcached key-value store"); ?>
+			<? render_card("mysql.uce", "MySQL", "MySQL database connector"); ?>
+
+			<div class="grid-heading">Advanced</div>
+			<? render_card("call_file.uce", "unit_call()", "Dynamic file inclusion"); ?>
+			<? render_card("components.uce", "Components", "Reusable component system"); ?>
+			<? render_card("markdown.uce", "Markdown", "Markdown parsing with components"); ?>
+			<? render_card("script.uce", "Script", "UCE script integration"); ?>
+			<? render_card("task.uce", "Task", "Background task execution"); ?>
+			<? render_card("task_repeat.uce", "Task Repeat", "Recurring task scheduling"); ?>
+			<? render_card("websockets.ws.uce", "WebSockets", "Real-time WebSocket chat"); ?>
+		</div>
+		<div class="system-info">
+			<h3>System Info</h3>
+			<pre><?
+				print("Worker PID: ", my_pid, "\n");
+				print("Parent PID: ", parent_pid, "\n");
+				print("Output buffer size: ", context.ob->str().length(), "\n");
+				print("Request #", context.server->request_count, "\n");
+			?></pre>
+		</div>
+		<details>
+			<summary>Request Parameters</summary>
+			<pre><?= (var_dump(p)) ?></pre>
+		</details>
+	</body>
+	</html></>

 }
@@ -8,7 +8,7 @@ RENDER(Request& context)
 		<link rel="stylesheet" href='style.css'></link>
 		<h1>
 			<a href="index.uce">UCE Test</a>:
-			parse_time
+			time_parse
 		</h1>
 		<form action="?" method="post">
 			<div>
@@ -21,7 +21,7 @@ RENDER(Request& context)
 		</form>
 		<pre><?

-		print(date("%Y-%m-%d %H:%M", parse_time(raw)));
+		print(time_format_local("%Y-%m-%d %H:%M", time_parse(raw)));

 		?></pre>
 		<pre><?= var_dump(context.params) ?></pre>
@@ -22,7 +22,7 @@ RENDER(Request& context)
 	}
 	else if(action == "store")
 	{
-		context.session["stored-value"] = make_session_id();
+		context.session["stored-value"] = session_id_create();
 		print("action: storing value "+context.session["stored-value"]);
 	}
 	else if(action == "destroy")
@@ -1,82 +1,382 @@
+/* UCE Test Suite — Theme
+   Color palette: #139 deep-blue base · white text · yellow accents */
+
+:root {
+	--bg: #113399;
+	--bg-surface: rgba(255, 255, 255, 0.065);
+	--bg-surface-hover: rgba(255, 255, 255, 0.11);
+	--bg-inset: rgba(0, 0, 0, 0.22);
+	--bg-code: rgba(0, 0, 0, 0.28);
+	--text: #e8ecf4;
+	--text-dim: rgba(255, 255, 255, 0.55);
+	--text-muted: rgba(255, 255, 255, 0.35);
+	--accent: #ffd644;
+	--accent-dim: rgba(255, 214, 68, 0.1);
+	--accent-hover: #ffe680;
+	--border: rgba(255, 255, 255, 0.08);
+	--border-strong: rgba(255, 255, 255, 0.18);
+	--font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
+	--font-mono: 'SF Mono', 'Cascadia Code', 'Fira Code', Consolas, monospace;
+	--radius: 8px;
+	--radius-lg: 14px;
+	--ease: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* ── Reset ── */
+
+*, *::before, *::after {
+	box-sizing: border-box;
+	margin: 0;
+	padding: 0;
+}
+
 * {
 	font-family: inherit;
 	font-size: inherit;
-	box-sizing: inherit;
 	color: inherit;
 	line-height: inherit;
 }

-a {
-	color: yellow;
-}
+/* ── Base ── */

-h1 {
-	font-size: 200%;
-	padding-top: 8px;
-	padding-bottom: 8px;
-	font-family: monospace;
+html {
+	font-size: 15px;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
 }

 body {
-	max-width: 1024px;
-	margin-left: auto;
-	margin-right: auto;
-	padding-left: 16px;
-	padding-right: 16px;
-	font-family: Tahoma, Helvetica, Arial;
-	font-size: 1.2em;
-	box-sizing: border-box;
-	background: #139;
-	color: white;
-	line-height: 150%;
+	max-width: 1100px;
+	margin: 0 auto;
+	padding: 0 24px 64px;
+	font-family: var(--font-sans);
+	font-size: 1rem;
+	line-height: 1.65;
+	background: var(--bg);
+	color: var(--text);
 }

-body > * {
-	background: rgba(255,255,255,0.1);
-	padding: 32px;
-	margin: 16px;
+/* ── Typography ── */
+
+h1 {
+	font-family: var(--font-mono);
+	font-size: 1.6rem;
+	font-weight: 700;
+	letter-spacing: -0.02em;
+	padding: 28px 0 20px;
+	border-bottom: 1px solid var(--border);
+	margin-bottom: 28px;
 }

+h1 a {
+	text-decoration: none;
+	color: var(--text);
+	transition: color 150ms var(--ease);
+}
+
+h1 a:hover {
+	color: var(--accent);
+}
+
+h2 {
+	font-family: var(--font-mono);
+	font-size: 1.15rem;
+	font-weight: 600;
+	letter-spacing: -0.01em;
+	margin: 24px 0 16px;
+	padding-bottom: 8px;
+	border-bottom: 1px solid var(--border);
+	color: var(--text-dim);
+}
+
+h3 {
+	font-family: var(--font-mono);
+	font-size: 0.82rem;
+	font-weight: 600;
+	text-transform: uppercase;
+	letter-spacing: 0.06em;
+	color: var(--text-dim);
+	margin: 0 0 10px;
+}
+
+a {
+	color: var(--accent);
+	text-decoration: none;
+	transition: color 150ms var(--ease);
+}
+
+a:hover {
+	color: var(--accent-hover);
+	text-decoration: underline;
+	text-underline-offset: 2px;
+}
+
+/* ── Page sections ── */
+
+body > section,
+body > div:not(.test-grid):not(.system-info):not(.grid-heading),
+body > p {
+	background: var(--bg-surface);
+	border: 1px solid var(--border);
+	border-radius: var(--radius);
+	padding: 20px 24px;
+	margin-bottom: 16px;
+}
+
+/* ── Test Card Grid ── */
+
+.test-grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+	gap: 10px;
+	margin-bottom: 24px;
+}
+
+.test-card {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+	padding: 16px 20px;
+	background: var(--bg-surface);
+	border: 1px solid var(--border);
+	border-radius: var(--radius);
+	text-decoration: none;
+	color: var(--text);
+	transition: all 150ms var(--ease);
+}
+
+.test-card:hover {
+	background: var(--bg-surface-hover);
+	border-color: var(--border-strong);
+	text-decoration: none;
+	transform: translateY(-1px);
+}
+
+.test-card strong {
+	font-family: var(--font-mono);
+	font-size: 0.92rem;
+	color: var(--accent);
+}
+
+.test-card span {
+	font-size: 0.82rem;
+	color: var(--text-dim);
+	line-height: 1.4;
+}
+
+.grid-heading {
+	grid-column: 1 / -1;
+	font-family: var(--font-mono);
+	font-size: 0.72rem;
+	font-weight: 600;
+	text-transform: uppercase;
+	letter-spacing: 0.08em;
+	color: var(--text-muted);
+	margin: 0;
+	padding: 14px 0 2px;
+	border: none;
+	background: none;
+}
+
+.grid-heading:first-child {
+	padding-top: 0;
+}
+
+.docs-link {
+	float: right;
+	font-size: 0.55em;
+	font-weight: 400;
+	opacity: 0.5;
+	transition: opacity 150ms var(--ease);
+}
+
+.docs-link:hover {
+	opacity: 1;
+}
+
+.dim {
+	opacity: 0.4;
+}
+
+/* ── Forms ── */
+
 form > div, label {
 	display: block;
-	padding-top: 8px;
-	padding-bottom: 8px;
+	padding: 6px 0;
 }

-input, textarea {
-	background: rgba(0,0,0,0.2);
-	border: 2px solid rgba(255,255,255,0.2);
+label {
+	font-size: 0.88rem;
+	font-weight: 600;
+	color: var(--text-dim);
 }

-input[type=submit], button {
-	padding: 8px;
-	cursor: pointer;
-}
-
-input[type=submit]:hover, button:hover {
-	color: yellow;
-	background: rgba(0,0,0,0.5);
+input, textarea, select {
+	background: var(--bg-inset);
+	border: 1px solid var(--border-strong);
+	border-radius: 6px;
+	color: var(--text);
+	font-family: var(--font-sans);
+	transition: border-color 150ms var(--ease), background 150ms var(--ease);
 }

 input[type=text], textarea {
-	padding: 8px;
+	padding: 10px 14px;
 	width: 100%;
 }

-input[type=text]:hover, textarea:hover {
-	background: rgba(0,0,0,0.25);
+input[type=text]:hover, textarea:hover,
+input[type=text]:focus, textarea:focus {
+	border-color: var(--accent);
+	outline: none;
+	background: rgba(0, 0, 0, 0.28);
+}
+
+input[type=submit], button {
+	padding: 10px 20px;
+	font-weight: 600;
+	cursor: pointer;
+	background: var(--accent-dim);
+	border: 1px solid rgba(255, 214, 68, 0.25);
+	color: var(--accent);
+	border-radius: 6px;
+}
+
+input[type=submit]:hover, button:hover {
+	background: rgba(255, 214, 68, 0.2);
+	border-color: var(--accent);
+	color: var(--accent-hover);
 }

 textarea {
-	height: 20%;
+	min-height: 120px;
+	resize: vertical;
 }

+/* ── Code / Output ── */
+
 pre {
-	height: 20%;
+	padding: 16px 20px;
 	overflow: auto;
-	padding: 8px;
-	border: 2px solid rgba(0,0,0,0.2);
-	background: rgba(255,255,255,0.1);
-	font-family: monospace;
+	background: var(--bg-code);
+	border: 1px solid var(--border);
+	border-radius: var(--radius);
+	font-family: var(--font-mono);
+	font-size: 0.85rem;
+	line-height: 1.55;
 	white-space: pre-wrap;
 }
+
+code {
+	font-family: var(--font-mono);
+	font-size: 0.9em;
+	padding: 2px 6px;
+	background: var(--bg-inset);
+	border-radius: 4px;
+}
+
+pre code {
+	padding: 0;
+	background: none;
+}
+
+/* ── Lists ── */
+
+ul {
+	list-style: none;
+	padding: 0;
+}
+
+li {
+	padding: 4px 0;
+}
+
+li a {
+	font-family: var(--font-mono);
+	font-size: 0.92rem;
+}
+
+/* ── System Info ── */
+
+.system-info {
+	margin-top: 32px;
+	padding: 16px 20px;
+	background: var(--bg-code);
+	border: 1px solid var(--border);
+	border-radius: var(--radius);
+}
+
+.system-info h3 {
+	margin-bottom: 12px;
+}
+
+.system-info pre {
+	border: none;
+	padding: 0;
+	background: transparent;
+	margin: 0;
+	font-size: 0.82rem;
+}
+
+/* ── Details / Summary ── */
+
+details {
+	background: var(--bg-surface);
+	border: 1px solid var(--border);
+	border-radius: var(--radius);
+	margin-bottom: 16px;
+}
+
+summary {
+	padding: 14px 20px;
+	cursor: pointer;
+	font-weight: 600;
+	user-select: none;
+	transition: color 150ms var(--ease);
+}
+
+summary:hover {
+	color: var(--accent);
+}
+
+details[open] summary {
+	border-bottom: 1px solid var(--border);
+}
+
+details pre {
+	border: none;
+	border-radius: 0 0 var(--radius) var(--radius);
+	margin: 0;
+}
+
+/* ── Sections (markdown, etc.) ── */
+
+section {
+	margin-bottom: 16px;
+}
+
+section h2 {
+	border-bottom: none;
+	margin: 0 0 12px;
+	padding: 0;
+}
+
+/* ── Scrollbar ── */
+
+::-webkit-scrollbar {
+	width: 8px;
+	height: 8px;
+}
+
+::-webkit-scrollbar-track {
+	background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+	background: rgba(255, 255, 255, 0.15);
+	border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+	background: rgba(255, 255, 255, 0.25);
+}
@@ -2,5 +2,5 @@

 RENDER(Request& context)
 {
-	print("Sub-Invoke Working dir: ", get_cwd(), "\n");
+	print("Sub-Invoke Working dir: ", cwd_get(), "\n");
 }
@@ -0,0 +1,22 @@
+RENDER(Request& context)
+{
+	DTree payload;
+
+	if(context.get["compile"] != "")
+		payload["compile_ok"].set_bool(unit_compile(context.get["compile"]));
+
+	payload["current"] = unit_info();
+
+	DTree units;
+	units.set_array();
+	for(auto& unit_path : units_list())
+	{
+		DTree item;
+		item = unit_path;
+		units.push(item);
+	}
+	payload["units"] = units;
+
+	context.header["Content-Type"] = "application/json; charset=utf-8";
+	print(json_encode(payload));
+}
@@ -16,7 +16,7 @@ DTree chat_event(Request& context, String type, String body)
 	event["connection_id"] = ws_connection_id();
 	event["scope"] = first(context.params["DOCUMENT_URI"], ws_scope());
 	event["online"] = (f64)ws_connection_count();
-	event["at"] = gmdate("%H:%M:%S");
+	event["at"] = time_format_utc("%H:%M:%S");
 	event["name"] = context.connection["name"].to_string();
 	event["message_count"] = context.connection["message_count"];
 	return(event);
@@ -171,7 +171,7 @@ WS(Request& context)

 	if(type == "join")
 	{
-		context.connection["joined_at"] = gmdate("%Y-%m-%d %H:%M:%S");
+		context.connection["joined_at"] = time_format_utc("%Y-%m-%d %H:%M:%S");
 		context.connection["last_type"] = type;
 		ws_send(json_encode(chat_event(context, "join", name + " joined the room")));
 		return;
@@ -10,8 +10,8 @@ RENDER(Request& context)
 			Working Directory
 		</h1>
 		<pre><?
-			print("Base WD: " + get_cwd() + "\n");
-			render_file("test2/working-dir-test.uce", context);
+			print("Base WD: " + cwd_get() + "\n");
+			unit_render("test2/working-dir-test.uce", context);
 		?></pre>
 		<pre><?= var_dump(context.params) ?></pre>
 	</>