@usequark/quark-create-app 1.24.2 → 1.25.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usequark/quark-create-app",
-  "version": "1.24.2",
+  "version": "1.25.0",
   "description": "CLI to scaffold new Quark projects with Next.js, Prisma, BullMQ, and Railway deployment",
   "keywords": [
     "quark",

package/src/index.js

@@ -214,8 +214,23 @@ async function initializeGit(projectDir) {
 	}
 
 	try {
-		// Initialize git repo
-		await execa("git", ["init"], { cwd: projectDir });
+		// Initialize git repo.
+		//
+		// `-b main` pins the branch name rather than inheriting whatever the
+		// machine has in `init.defaultBranch`. Without it the scaffold is not
+		// reproducible: `git init` falls back to `master` wherever that setting
+		// is unset (the common case, and GitHub's own default until the hint
+		// is followed), so the same CLI produced `master` on one machine and
+		// `main` on another. `main` is the name GitHub defaults a new repository
+		// to, so it is also what the README's push instructions assume.
+		//
+		// `-b` needs git 2.28 (2020). If it is unavailable the bare `init` still
+		// produces a working repository, just with git's own default branch.
+		try {
+			await execa("git", ["init", "-b", "main"], { cwd: projectDir });
+		} catch {
+			await execa("git", ["init"], { cwd: projectDir });
+		}
 
 		// Add all files
 		await execa("git", ["add", "."], { cwd: projectDir });

package/templates/base-project/apps/web/src/app/api/health/route.js

@@ -1,7 +1,15 @@
 /**
  * Health Check Endpoint
- * Verifies the application and its dependencies are functioning correctly.
- * Times out after 5 seconds to prevent hanging.
+ *
+ * Reports the status of the application and its dependencies. Every dependency
+ * is probed concurrently, each under its own deadline, and the route always
+ * answers `200` — the verdict lives in the body's `status` field.
+ *
+ * Why always 200: this endpoint is the platform healthcheck. A non-200 here
+ * makes the orchestrator restart the container, which drops every warm
+ * connection and produces a fresh connection storm on the dependency that was
+ * already struggling. That turns a transient blip into a restart loop.
+ * Callers that need a hard verdict should read `status`, not the status code.
  */
 
 import {
@@ -15,146 +23,241 @@ import { NextResponse } from "next/server";
 
 const logger = createLogger("health");
 
-/** Overall timeout for the health check (ms). */
+/** Ceiling for the whole check (ms). */
 const HEALTH_CHECK_TIMEOUT = 5000;
 
+/** Ceiling for one dependency probe (ms). Clamped to the overall budget, so a
+ * single probe can never outlive the request. */
+const PROBE_TIMEOUT = 3000;
+
+/** Message returned in place of a real error when NODE_ENV is production. */
+const GENERIC_MESSAGES = {
+	database: "Database unavailable",
+	redis: "Redis unavailable",
+	storage: "Storage unavailable",
+	queue: "Queue unavailable",
+};
+
 export async function GET() {
 	try {
-		const result = await new Promise((resolve, reject) => {
-			const timer = setTimeout(
-				() => reject(new Error("Health check timed out")),
-				HEALTH_CHECK_TIMEOUT,
-			);
-			runHealthChecks().then(
-				(val) => {
-					clearTimeout(timer);
-					resolve(val);
-				},
-				(err) => {
-					clearTimeout(timer);
-					reject(err);
-				},
-			);
-		});
+		const result = await runHealthChecks();
 
+		// Always 200 — see the module comment. An orchestrator restarting this
+		// service is what turns a dependency blip into an outage.
 		return NextResponse.json(result, {
-			status: result.status === "error" ? 503 : 200,
+			status: 200,
+			headers: { "Cache-Control": "no-store" },
 		});
 	} catch (error) {
+		// Unreachable in practice: every probe below is individually settled and
+		// deadline-bounded, so runHealthChecks cannot reject. Kept so a future
+		// edit that reintroduces a throw still returns a parseable body.
 		logger.error("Health check failed", {
 			error: error.message,
 			stack: error.stack,
 		});
+
 		return NextResponse.json(
 			{
 				status: "error",
 				timestamp: new Date().toISOString(),
 				message: "Service health check failed",
 			},
-			{ status: 500 },
+			{ status: 200, headers: { "Cache-Control": "no-store" } },
 		);
 	}
 }
 
 /**
- * Runs all individual health checks and aggregates the results.
- * @returns {Promise<{ status: string, timestamp: string, checks: Record<string, object> }>}
+ * Runs every dependency probe concurrently and aggregates the results.
+ *
+ * Concurrency matters as much as the deadlines: run sequentially, a 3s database
+ * timeout plus a 3s Redis timeout exhausts the 5s budget before storage is even
+ * attempted, and the whole request falls through to the give-up path.
+ *
+ * @returns {Promise<{ status: string, timestamp: string, durationMs: number, checks: Record<string, object> }>}
  */
 async function runHealthChecks() {
-	const health = {
-		status: "ok",
+	const startedAt = performance.now();
+
+	// Every probe is wrapped in settleProbe(), so this Promise.all cannot reject
+	// and cannot outlast the deadline.
+	const [database, redis, storage, queues] = await Promise.all([
+		settleProbe("database", () => pingDatabase()),
+		settleProbe("redis", () => pingRedis()),
+		// `provider` rides along on the error result so a failure still names the
+		// provider that failed — settleProbe owns the message redaction.
+		settleProbe("storage", checkStorage, {
+			provider: process.env.STORAGE_PROVIDER || "local",
+		}),
+		settleProbe("queues", checkQueues),
+	]);
+
+	const checks = { database, redis, storage };
+	if (queues) checks.queues = queues;
+
+	return {
+		// "degraded" means at least one dependency failed. Both this and "ok"
+		// answer 200 — see the module comment.
+		status: Object.values(checks).some(isFailing) ? "degraded" : "ok",
 		timestamp: new Date().toISOString(),
-		checks: {},
+		durationMs: Math.round(performance.now() - startedAt),
+		checks,
 	};
+}
 
-	// Check database connectivity
-	const dbResult = await pingDatabase();
-	if (dbResult.status === "ok") {
-		health.checks.database = { status: "ok", latencyMs: dbResult.latencyMs };
-	} else {
-		health.checks.database = {
-			status: "error",
-			message: dbResult.message,
-		};
-		health.status = "degraded";
+/**
+ * Reports whether a check entry counts as a failure. Handles both a flat probe
+ * result (`{ status: "error" }`) and the nested queue map, where the verdict
+ * lives on each queue rather than on the map itself.
+ *
+ * @param {unknown} check
+ * @returns {boolean}
+ */
+function isFailing(check) {
+	if (!check || typeof check !== "object") return false;
+
+	// A flat probe result carries its own `status`. The nested queue map does
+	// not, so fall through to its entries.
+	if (typeof (/** @type {any} */ (check).status) === "string") {
+		return /** @type {any} */ (check).status === "error";
 	}
 
-	// Check Redis connectivity (actual PING)
-	const redisResult = await pingRedis();
-	if (redisResult.status === "ok") {
-		health.checks.redis = { status: "ok", latencyMs: redisResult.latencyMs };
-	} else {
-		health.checks.redis = {
+	return Object.values(/** @type {Record<string, any>} */ (check)).some(
+		(entry) => entry?.status === "error",
+	);
+}
+
+/**
+ * Runs one dependency probe with its own deadline and normalises every failure
+ * mode — rejection, timeout, or a probe that never settles — into a result
+ * object. Never throws, so callers can rely on `Promise.all` resolving.
+ *
+ * @param {string} name - Probe name, also the key under `checks`.
+ * @param {() => Promise<object>} probe
+ * @param {object} [context] - Fields to merge into the error result.
+ * @returns {Promise<{ status: string } & Record<string, unknown>>}
+ */
+async function settleProbe(name, probe, context = {}) {
+	// A probe that hangs must not hold up the aggregate, and must never outlive
+	// the overall budget. The timer is always cleared, so it never leaks.
+	let timer;
+	const deadline = new Promise((resolve) => {
+		timer = setTimeout(
+			() => resolve({ status: "error", message: `${name} check timed out` }),
+			Math.min(PROBE_TIMEOUT, HEALTH_CHECK_TIMEOUT),
+		);
+	});
+
+	try {
+		return withSafeMessage(name, await Promise.race([probe(), deadline]));
+	} catch (/** @type {any} */ error) {
+		return withSafeMessage(name, {
+			...context,
 			status: "error",
-			message: redisResult.message,
-		};
-		health.status = "degraded";
+			message: error?.message,
+		});
+	} finally {
+		clearTimeout(timer);
 	}
+}
 
-	// Check storage connectivity
-	const storageResult = await checkStorage();
-	health.checks.storage = storageResult;
-	if (storageResult.status === "error") {
-		health.status = "degraded";
-	}
+/**
+ * Returns a check result whose message is safe to serve publicly.
+ *
+ * A probe can signal failure two ways — by rejecting, or by *resolving* with
+ * `{ status: "error", message }`. Both are routed through here so neither can
+ * bypass the redaction: `pingRedis` returned `{ status: "error" }` carrying the
+ * raw `REDIS_URL`, so a normaliser that only handled rejections would have let
+ * the password straight through.
+ *
+ * @param {string} name - Probe name.
+ * @param {object} [result]
+ * @returns {object}
+ */
+function withSafeMessage(name, result) {
+	if (result?.status !== "error") return result;
 
-	// Check queue depths (only when queues are registered in this process)
-	const registeredQueues = getRegisteredQueues();
-	if (registeredQueues.size > 0) {
-		const entries = [...registeredQueues.entries()];
-		const results = await Promise.allSettled(
-			entries.map(([, queue]) =>
-				Promise.all([
-					queue.getWaitingCount(),
-					queue.getActiveCount(),
-					queue.getFailedCount(),
-				]),
-			),
-		);
+	const { message, ...rest } = result;
+	return { ...rest, status: "error", message: safeMessage(name, message) };
+}
 
-		const queueChecks = {};
-		for (let i = 0; i < entries.length; i++) {
-			const [name] = entries[i];
-			const result = results[i];
-			if (result.status === "fulfilled") {
-				const [waiting, active, failed] = result.value;
-				queueChecks[name] = { status: "ok", waiting, active, failed };
-			} else {
-				const message =
-					process.env.NODE_ENV === "production"
-						? "Queue unavailable"
-						: result.reason?.message;
-				queueChecks[name] = { status: "error", message };
-				health.status = "degraded";
-			}
-		}
-		health.checks.queues = queueChecks;
+/**
+ * Reduces a failure to a message safe to return from an unauthenticated route.
+ *
+ * Driver errors carry the connection string they failed on, so the raw text is
+ * only echoed outside production. `pingRedis`/`pingDatabase` redact at the
+ * source regardless; this is the second layer.
+ *
+ * @param {string} name - Probe name.
+ * @param {string|Error} [source] - The failure message or the error itself.
+ * @returns {string}
+ */
+function safeMessage(name, source) {
+	if (process.env.NODE_ENV === "production") {
+		return GENERIC_MESSAGES[name] ?? "Check unavailable";
 	}
 
-	return health;
+	return source?.message ?? source ?? "Unknown error";
 }
 
 /**
  * Verifies storage is reachable and writable by writing then deleting a
  * small sentinel object. Uses whichever provider is configured via
  * STORAGE_PROVIDER (defaults to "local" when unset).
- * @returns {Promise<{ status: string, provider: string, message?: string }>}
+ * @returns {Promise<{ status: string, provider: string }>}
  */
 async function checkStorage() {
 	const provider = process.env.STORAGE_PROVIDER || "local";
-	try {
-		const storage = createStorage();
-		const sentinelKey = ".health-check-sentinel";
-		await storage.put(sentinelKey, Buffer.from("ok"), {
-			contentType: "text/plain",
-		});
-		await storage.delete(sentinelKey);
-		return { status: "ok", provider };
-	} catch (error) {
-		const message =
-			process.env.NODE_ENV === "production"
-				? "Storage unavailable"
-				: error.message;
-		return { status: "error", provider, message };
+	const storage = createStorage();
+	const sentinelKey = ".health-check-sentinel";
+
+	await storage.put(sentinelKey, Buffer.from("ok"), {
+		contentType: "text/plain",
+	});
+	await storage.delete(sentinelKey);
+
+	return { status: "ok", provider };
+}
+
+/**
+ * Reports queue depths. Only meaningful in a process that registered the
+ * queues — the web app registers none, so this resolves to null and the key is
+ * omitted from the response rather than reported as a false pass.
+ *
+ * @returns {Promise<Record<string, { status: string, waiting?: number, active?: number, failed?: number, message?: string }> | null>}
+ */
+async function checkQueues() {
+	const registeredQueues = getRegisteredQueues();
+	if (registeredQueues.size === 0) return null;
+
+	const entries = [...registeredQueues.entries()];
+	const results = await Promise.allSettled(
+		entries.map(([, queue]) =>
+			Promise.all([
+				queue.getWaitingCount(),
+				queue.getActiveCount(),
+				queue.getFailedCount(),
+			]),
+		),
+	);
+
+	const queueChecks = {};
+
+	for (let i = 0; i < entries.length; i++) {
+		const [name] = entries[i];
+		const result = results[i];
+
+		if (result.status === "fulfilled") {
+			const [waiting, active, failed] = result.value;
+			queueChecks[name] = { status: "ok", waiting, active, failed };
+		} else {
+			queueChecks[name] = withSafeMessage("queue", {
+				status: "error",
+				message: result.reason?.message,
+			});
+		}
 	}
+
+	return queueChecks;
 }

package/templates/base-project/apps/web/src/lib/proxy-auth.js

@@ -7,6 +7,17 @@ const STRICT_AUTH_RATE_LIMIT_ROUTES = new Set([
 	"/api/auth/signin/credentials",
 ]);
 
+/**
+ * Routes that are never rate limited.
+ *
+ * `/api/health` is the platform healthcheck. It sits behind the same 100-req
+ * `api` bucket as everything else, so a probe that lands in an already-full
+ * bucket gets a 429 — the orchestrator reads that as unhealthy and restarts the
+ * container, which fills the bucket again on startup. Limiting the probe is how
+ * a healthy service gets killed.
+ */
+const RATE_LIMIT_EXEMPT_ROUTES = new Set(["/api/health"]);
+
 function getForwardedProtocol(request) {
 	const forwardedProto = request.headers.get("x-forwarded-proto");
 	if (!forwardedProto) return null;
@@ -78,3 +89,12 @@ export function getRateLimitBucket(pathname, method = "GET") {
 		? "auth"
 		: "api";
 }
+
+/**
+ * Whether a route bypasses rate limiting entirely.
+ * @param {string} pathname
+ * @returns {boolean}
+ */
+export function isRateLimitExempt(pathname) {
+	return RATE_LIMIT_EXEMPT_ROUTES.has(pathname);
+}

package/templates/base-project/apps/web/src/proxy.js

@@ -5,14 +5,15 @@
  * Guards (in order):
  *   1. Metrics guard        - optionally protects /api/metrics with a bearer
  *                             token. Set METRICS_TOKEN in env to enable.
- *   2. Rate limiting, CORS, security headers for all API routes.
+ *   2. Rate limiting, CORS, security headers for all API routes, except the
+ *      rate-limit-exempt healthcheck (see lib/proxy-auth.js).
  */
 
 import { getAllowedOrigins } from "@usequark/quark-config/app-url";
 import { NextResponse } from "next/server";
 
 import { buildContentSecurityPolicy } from "./lib/analytics/umami-csp.js";
-import { getRateLimitBucket } from "./lib/proxy-auth";
+import { getRateLimitBucket, isRateLimitExempt } from "./lib/proxy-auth";
 
 // ─── 1. Metrics guard ────────────────────────────────────────────────────────
 
@@ -218,8 +219,9 @@ export async function proxy(request) {
 		}
 	}
 
-	// Apply rate limiting to API routes only
-	if (pathname.startsWith("/api/")) {
+	// Apply rate limiting to API routes only. Exempt routes (the healthcheck)
+	// skip the bucket entirely — no counter, no headers.
+	if (pathname.startsWith("/api/") && !isRateLimitExempt(pathname)) {
 		const ip = getClientIp(request);
 		const rateLimitBucket = getRateLimitBucket(pathname, request.method);
 		const maxRequests = RATE_LIMIT_CONFIG.maxRequests[rateLimitBucket];

package/templates/base-project/scripts/check-standards.mjs

@@ -15,6 +15,38 @@ const tsExtensions = new Set([".ts", ".tsx"]);
 const throwNewErrorPattern = /\bthrow new Error\s*\(/;
 const consolePattern = /\bconsole\.(?:log|warn|error|info)\s*\(/;
 
+/**
+ * Tailwind v4 removed the bare `[--var]` shorthand that v3 accepted. Under v4 a
+ * class such as `text-[--navbar-text-muted]` is still a *valid* utility name, so
+ * Tailwind emits a rule for it - but the declaration body is the bare token
+ * `color: --navbar-text-muted`, which is not a valid CSS value. The browser
+ * discards the declaration and the element silently inherits instead.
+ *
+ * Nothing warns: the build exits 0 and the rule is present in the stylesheet, so
+ * the breakage is only visible by rendering both themes and reading computed
+ * styles. In light mode `body` sets no colour and the inherited default happens
+ * to be black, which reads as "working".
+ *
+ * The v4 forms are `text-(--navbar-text-muted)` or, when the utility namespace
+ * would be ambiguous (e.g. `text-` shared between colour and font-size),
+ * `text-[color:var(--navbar-text-muted)]`.
+ *
+ * The pattern matches the *shape* of the v3 shorthand rather than an
+ * enumerated list of utilities. An earlier version listed the colour, border and
+ * radius families explicitly, which was a false economy: the same mistake is
+ * equally reachable through `w-[--panel-width]`, `leading-[--line-height]` or
+ * `p-[--gutter]`, and any list has to be extended every time someone reaches
+ * for a family it omits.
+ *
+ * The `-` immediately before `[` is what separates this from ordinary
+ * JavaScript. `rows[--i]` (decrement-then-index) and `obj[key--1]` have no
+ * hyphen there and do not match. The one shape that is indistinguishable from a
+ * real class is `<ident>-[--ident]`, which would require JavaScript that
+ * subtracts from a decrement expression - it does not occur in this codebase.
+ */
+const tailwindV3VarPattern =
+	/(?:^|[\s"'`(])(?:[a-z][a-z0-9-]*:)*[a-z][a-z0-9-]*-\[--[a-zA-Z][a-zA-Z0-9-]*\]/;
+
 const consoleAllowlist = [
 	/^packages\/config\/src\/validate-env\.js$/,
 	/^packages\/core\/src\/testing\//,
@@ -159,6 +191,17 @@ async function main() {
 			}
 		}
 
+		if (isSourceFile(relativePath)) {
+			for (const lineNumber of findMatchingLines(
+				content,
+				tailwindV3VarPattern,
+			)) {
+				violations.push(
+					`${relativePath}:${lineNumber}: Tailwind v4 ignores the v3 \`[--var]\` shorthand - the utility is emitted with an invalid value and silently does nothing. Use \`utility-(--var)\`, or \`utility-[color:var(--var)]\` when the namespace is ambiguous.`,
+				);
+			}
+		}
+
 		if (
 			isSourceFile(relativePath) &&
 			!isTestFile(relativePath) &&

package/templates/base-project/scripts/run-tests.mjs

@@ -50,8 +50,11 @@ function collectTests(targetPath) {
 const files = roots.flatMap((rootPath) => collectTests(path.resolve(rootPath)));
 
 if (files.length === 0) {
-	console.error(`No test files found in: ${roots.join(", ")}`);
-	process.exit(1);
+	// An empty suite is not a failure. `node --test` exits 0 when it matches no
+	// files, so exiting 1 here made a freshly scaffolded project fail its own
+	// `pnpm test` and therefore its pre-push hook.
+	console.log(`No test files found in: ${roots.join(", ")} - nothing to run.`);
+	process.exit(0);
 }
 
 const result = spawnSync(

package/templates/ui/src/badge.js

@@ -1,10 +1,10 @@
 import React from "react";
 
 const base =
-	"inline-flex items-center justify-center border font-medium bg-[--badge-bg] border-[--badge-border] text-[--badge-text]";
+	"inline-flex items-center justify-center border font-medium bg-(--badge-bg) border-(--badge-border) text-(--badge-text)";
 
 export function Badge({ variant = "default", className = "", ...props }) {
-	const cls = `${base} rounded-[--radius-default] ${className}`.trim();
+	const cls = `${base} rounded-(--radius-default) ${className}`.trim();
 	return React.createElement("span", {
 		"data-badge-variant": variant,
 		className: cls,

package/templates/ui/src/button.js

@@ -6,7 +6,7 @@ const base =
 	"inline-flex items-center justify-center font-medium tracking-wide transition-all duration-200 linear cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 disabled:opacity-40 disabled:cursor-not-allowed active:opacity-80";
 
 const variantCls =
-	"bg-[--btn-bg] border border-[--btn-border] text-[--btn-text] rounded-[--btn-radius] hover:brightness-[var(--btn-hover-brightness)] hover:shadow-[var(--btn-hover-shadow)] hover:bg-[var(--btn-hover-bg)] hover:text-[var(--btn-hover-text)] hover:opacity-[var(--btn-hover-opacity)] focus-visible:ring-[var(--btn-ring)]";
+	"bg-(--btn-bg) border border-(--btn-border) text-(--btn-text) rounded-(--btn-radius) hover:brightness-[var(--btn-hover-brightness)] hover:shadow-[var(--btn-hover-shadow)] hover:bg-[var(--btn-hover-bg)] hover:text-[var(--btn-hover-text)] hover:opacity-[var(--btn-hover-opacity)] focus-visible:ring-[var(--btn-ring)]";
 
 const sizes = {
 	sm: "h-8 px-3 text-sm",

package/templates/ui/src/card.js

@@ -4,19 +4,19 @@ import { ChevronDown } from "lucide-react";
 import React, { useState } from "react";
 
 const cardCls =
-	"border border-[--card-border] bg-[--card-bg] transition-colors duration-200 linear";
+	"border border-(--card-border) bg-(--card-bg) transition-colors duration-200 linear";
 
 const headerCls = "flex flex-col space-y-1.5 p-6";
 
 const titleCls =
-	"text-lg font-bold leading-none tracking-tight text-[--card-title-text]";
+	"text-lg font-bold leading-none tracking-tight text-(--card-title-text)";
 
 const contentCls = "p-6 pt-0";
 
 const footerCls = "flex items-center p-6 pt-0";
 
 const collapsibleTriggerCls =
-	"flex w-full cursor-pointer items-center justify-between p-6 text-[--card-title-text] transition-colors duration-200 hover:bg-[--card-trigger-hover-bg] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--card-trigger-ring)]";
+	"flex w-full cursor-pointer items-center justify-between p-6 text-(--card-title-text) transition-colors duration-200 hover:bg-(--card-trigger-hover-bg) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--card-trigger-ring)]";
 
 function CollapsibleCard({
 	className = "",
@@ -31,7 +31,7 @@ function CollapsibleCard({
 		"div",
 		{
 			className:
-				`${cardCls} h-fit self-start rounded-[--radius-default] ${className}`.trim(),
+				`${cardCls} h-fit self-start rounded-(--radius-default) ${className}`.trim(),
 			...props,
 		},
 		React.createElement(
@@ -51,7 +51,7 @@ function CollapsibleCard({
 				"span",
 				{
 					"aria-hidden": "true",
-					className: `pointer-events-none ml-3 shrink-0 text-[--card-text-muted] transition-transform duration-300 ease-[cubic-bezier(0.4,0,0.2,1)] ${isOpen ? "rotate-180" : "rotate-0"}`,
+					className: `pointer-events-none ml-3 shrink-0 text-(--card-text-muted) transition-transform duration-300 ease-[cubic-bezier(0.4,0,0.2,1)] ${isOpen ? "rotate-180" : "rotate-0"}`,
 				},
 				React.createElement(ChevronDown, { size: 16 }),
 			),
@@ -59,7 +59,7 @@ function CollapsibleCard({
 		React.createElement(
 			"div",
 			{
-				className: `border-t border-[--card-border] text-[--card-text-muted] grid transition-[grid-template-rows,opacity,transform] duration-300 ease-[cubic-bezier(0.4,0,0.2,1)] motion-reduce:transition-none ${isOpen ? "translate-y-0 opacity-100" : "-translate-y-2 opacity-0"}`,
+				className: `border-t border-(--card-border) text-(--card-text-muted) grid transition-[grid-template-rows,opacity,transform] duration-300 ease-[cubic-bezier(0.4,0,0.2,1)] motion-reduce:transition-none ${isOpen ? "translate-y-0 opacity-100" : "-translate-y-2 opacity-0"}`,
 				style: { gridTemplateRows: isOpen ? "1fr" : "0fr" },
 			},
 			React.createElement(
@@ -92,7 +92,7 @@ export function Card({
 	return React.createElement(
 		"div",
 		{
-			className: `${cardCls} rounded-[--radius-default] ${className}`.trim(),
+			className: `${cardCls} rounded-(--radius-default) ${className}`.trim(),
 			...props,
 		},
 		children,

package/templates/ui/src/checkbox.js

@@ -1,9 +1,9 @@
 import React from "react";
 
 const inputCls =
-	"h-4 w-4 rounded border-[--checkbox-border] bg-[--checkbox-bg] accent-[--checkbox-accent] transition-colors cursor-pointer focus-visible:ring-2 focus-visible:ring-[var(--checkbox-ring)] disabled:cursor-not-allowed disabled:opacity-[var(--checkbox-disabled-opacity)]";
+	"h-4 w-4 rounded border-(--checkbox-border) bg-(--checkbox-bg) accent-(--checkbox-accent) transition-colors cursor-pointer focus-visible:ring-2 focus-visible:ring-[var(--checkbox-ring)] disabled:cursor-not-allowed disabled:opacity-[var(--checkbox-disabled-opacity)]";
 
-const labelCls = "text-sm text-[--checkbox-label-text] select-none";
+const labelCls = "text-sm text-(--checkbox-label-text) select-none";
 
 export function Checkbox({ id, label, className = "", ...props }) {
 	return React.createElement(

package/templates/ui/src/container.js

@@ -5,7 +5,7 @@ export function Container({ className = "", children, ...props }) {
 		"section",
 		{
 			className:
-				`relative overflow-hidden rounded-[--radius-default] border border-[--container-border] bg-[--container-bg] ${className}`.trim(),
+				`relative overflow-hidden rounded-(--radius-default) border border-(--container-border) bg-(--container-bg) ${className}`.trim(),
 			...props,
 		},
 		children,

package/templates/ui/src/dialog.js

@@ -28,18 +28,18 @@ import React, {
  */
 
 const dialogCls =
-	"backdrop:bg-[var(--dialog-backdrop)] border border-[--dialog-border] bg-[--dialog-bg] p-0 w-full max-w-lg rounded-[--radius-default]";
+	"backdrop:bg-[var(--dialog-backdrop)] border border-(--dialog-border) bg-(--dialog-bg) p-0 w-full max-w-lg rounded-(--radius-default)";
 
 const headerCls =
-	"flex items-center justify-between border-b border-[--dialog-border] px-5 py-4";
+	"flex items-center justify-between border-b border-(--dialog-border) px-5 py-4";
 
 const titleCls =
-	"text-base font-bold tracking-tight text-[--dialog-title-text]";
+	"text-base font-bold tracking-tight text-(--dialog-title-text)";
 
 const closeCls =
-	"flex h-8 w-8 cursor-pointer items-center justify-center text-lg text-[--dialog-text-muted] transition-colors duration-200 linear hover:text-[--dialog-title-text] hover:bg-[--dialog-close-hover-bg] active:bg-[--dialog-close-hover-bg] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--dialog-close-ring)] rounded-[--radius-default]";
+	"flex h-8 w-8 cursor-pointer items-center justify-center text-lg text-(--dialog-text-muted) transition-colors duration-200 linear hover:text-(--dialog-title-text) hover:bg-(--dialog-close-hover-bg) active:bg-(--dialog-close-hover-bg) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--dialog-close-ring)] rounded-(--radius-default)";
 
-const bodyCls = "px-5 py-4 text-[--dialog-text-muted]";
+const bodyCls = "px-5 py-4 text-(--dialog-text-muted)";
 
 export function Dialog({ open, onClose, title, children, className = "" }) {
 	const ref = useRef(null);

package/templates/ui/src/error-banner.js

@@ -8,7 +8,7 @@ export function ErrorBanner({ message, className = "" }) {
 			role: "alert",
 			"aria-live": "polite",
 			className:
-				`mb-4 border border-[--error-border] bg-[--error-bg] px-3 py-2 text-sm text-[--error-text] rounded-[--radius-default] ${className}`.trim(),
+				`mb-4 border border-(--error-border) bg-(--error-bg) px-3 py-2 text-sm text-(--error-text) rounded-(--radius-default) ${className}`.trim(),
 		},
 		message,
 	);

package/templates/ui/src/footer.js

@@ -1,24 +1,24 @@
 import React from "react";
 
-const footerCls = "border-t border-[--footer-border] bg-[--footer-bg]";
+const footerCls = "border-t border-(--footer-border) bg-(--footer-bg)";
 const containerCls = "mx-auto";
 const topGridCls =
 	"grid gap-8 sm:gap-10 md:grid-cols-2 lg:grid-cols-[minmax(0,1.45fr)_minmax(0,1fr)_minmax(0,1fr)_minmax(0,1fr)]";
 const brandRowCls = "flex items-center gap-3";
 const markCls =
-	"flex shrink-0 items-center justify-center rounded-2xl bg-[--footer-mark-bg] font-bold text-[--footer-mark-text]";
+	"flex shrink-0 items-center justify-center rounded-2xl bg-(--footer-mark-bg) font-bold text-(--footer-mark-text)";
 const brandNameCls =
-	"text-2xl font-bold tracking-tight text-[--footer-text] sm:text-3xl";
-const brandTextCls = "max-w-md text-sm leading-7 text-[--footer-text-muted]";
+	"text-2xl font-bold tracking-tight text-(--footer-text) sm:text-3xl";
+const brandTextCls = "max-w-md text-sm leading-7 text-(--footer-text-muted)";
 const ctaCls =
-	"inline-flex w-full items-center justify-center rounded-full border border-[--footer-cta-border] font-semibold text-[--footer-mark-text] transition-colors hover:bg-[--footer-cta-hover-bg] sm:w-auto";
-const columnTitleCls = "mb-4 font-semibold text-[--footer-text-faint]";
+	"inline-flex w-full items-center justify-center rounded-full border border-(--footer-cta-border) font-semibold text-(--footer-mark-text) transition-colors hover:bg-(--footer-cta-hover-bg) sm:w-auto";
+const columnTitleCls = "mb-4 font-semibold text-(--footer-text-faint)";
 const columnListCls = "space-y-2.5";
 const linkCls =
-	"break-words text-[--footer-text-muted] transition-colors hover:text-[--footer-link-hover]";
-const textItemCls = "break-words text-[--footer-text-muted]";
+	"break-words text-(--footer-text-muted) transition-colors hover:text-(--footer-link-hover)";
+const textItemCls = "break-words text-(--footer-text-muted)";
 const bottomBarCls =
-	"mt-8 border-t border-[--footer-border] pt-5 flex flex-col gap-3 text-sm text-[--footer-text-faint] sm:mt-10 sm:pt-6 lg:flex-row lg:items-center lg:justify-between";
+	"mt-8 border-t border-(--footer-border) pt-5 flex flex-col gap-3 text-sm text-(--footer-text-faint) sm:mt-10 sm:pt-6 lg:flex-row lg:items-center lg:justify-between";
 const legalCls = "flex flex-wrap items-center gap-2 sm:gap-3";
 const sepCls = "text-[var(--footer-sep)]";
 

package/templates/ui/src/form-field.js

@@ -40,7 +40,7 @@ export function FormField({
 					"p",
 					{
 						id: errorId,
-						className: "text-xs text-[--error-text]",
+						className: "text-xs text-(--error-text)",
 						role: "alert",
 					},
 					error,

package/templates/ui/src/input.js

@@ -1,11 +1,11 @@
 import React from "react";
 
 const base =
-	"block h-10 w-full border border-[--input-border] bg-[--input-bg] px-3 text-sm text-[--input-text] placeholder:text-[--input-placeholder] transition-colors duration-200 linear hover:border-[--input-border-hover] focus-visible:border-[--input-border-focus] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--input-ring-focus)] disabled:opacity-[--input-disabled-opacity] disabled:cursor-not-allowed";
+	"block h-10 w-full border border-(--input-border) bg-(--input-bg) px-3 text-sm text-(--input-text) placeholder:text-(--input-placeholder) transition-colors duration-200 linear hover:border-(--input-border-hover) focus-visible:border-(--input-border-focus) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--input-ring-focus)] disabled:opacity-(--input-disabled-opacity) disabled:cursor-not-allowed";
 
 export function Input({ className = "", ...props }) {
 	return React.createElement("input", {
-		className: `${base} rounded-[--radius-default] ${className}`.trim(),
+		className: `${base} rounded-(--radius-default) ${className}`.trim(),
 		...props,
 	});
 }

package/templates/ui/src/label.js

@@ -1,6 +1,6 @@
 import React from "react";
 
-const base = "block text-xs font-medium text-[--label-text]";
+const base = "block text-xs font-medium text-(--label-text)";
 
 export function Label({ className = "", ...props }) {
 	return React.createElement("label", {

package/templates/ui/src/lightbox.js

@@ -3,16 +3,16 @@ import { ChevronLeft, ChevronRight, X } from "lucide-react";
 import React, { useEffect, useRef, useState } from "react";
 
 const BACKDROP_CLS =
-	"absolute inset-0 z-0 bg-[--lightbox-backdrop] px-3 py-4 transition-opacity duration-200 ease-out sm:px-6 sm:py-8 cursor-pointer";
+	"absolute inset-0 z-0 bg-(--lightbox-backdrop) px-3 py-4 transition-opacity duration-200 ease-out sm:px-6 sm:py-8 cursor-pointer";
 const DIALOG_CLS =
 	"relative z-10 mx-auto flex h-full w-full max-w-6xl flex-col p-3 transition-all duration-200 ease-out sm:p-5";
 const NAV_BTN_CLS =
-	"inline-flex items-center gap-1.5 rounded-[--radius-default] border border-[--lightbox-btn-border] px-3 py-1.5 text-sm font-medium text-[--lightbox-btn-text] transition-colors duration-200 hover:bg-[--lightbox-btn-hover-bg] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--lightbox-btn-ring)] cursor-pointer";
+	"inline-flex items-center gap-1.5 rounded-(--radius-default) border border-(--lightbox-btn-border) px-3 py-1.5 text-sm font-medium text-(--lightbox-btn-text) transition-colors duration-200 hover:bg-(--lightbox-btn-hover-bg) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--lightbox-btn-ring)] cursor-pointer";
 const CLOSE_BTN_CLS =
-	"rounded-[--radius-default] border border-[--lightbox-btn-border] font-medium text-[--lightbox-btn-text] transition-colors duration-200 hover:bg-[--lightbox-btn-hover-bg] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--lightbox-btn-ring)] flex items-center cursor-pointer";
+	"rounded-(--radius-default) border border-(--lightbox-btn-border) font-medium text-(--lightbox-btn-text) transition-colors duration-200 hover:bg-(--lightbox-btn-hover-bg) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--lightbox-btn-ring)] flex items-center cursor-pointer";
 
 const IMG_CLS =
-	"max-h-[72vh] w-auto max-w-full rounded-[--radius-default] object-contain transition-all duration-200 ease-out";
+	"max-h-[72vh] w-auto max-w-full rounded-(--radius-default) object-contain transition-all duration-200 ease-out";
 
 export function Lightbox({
 	src,
@@ -129,7 +129,7 @@ export function Lightbox({
 				"p",
 				{
 					key: "caption",
-					className: "mt-3 text-sm leading-6 text-[--lightbox-caption-text]",
+					className: "mt-3 text-sm leading-6 text-(--lightbox-caption-text)",
 				},
 				caption,
 			),
@@ -169,7 +169,7 @@ export function Lightbox({
 					"p",
 					{
 						key: "counter",
-						className: "text-center text-[--lightbox-counter-text]",
+						className: "text-center text-(--lightbox-counter-text)",
 						style: {
 							minWidth: "var(--lightbox-counter-min-width)",
 							fontSize: "var(--lightbox-counter-font-size)",

package/templates/ui/src/navbar.js

@@ -2,47 +2,47 @@
 import React, { useEffect, useMemo, useRef, useState } from "react";
 
 const shellCls =
-	"relative w-full border-b border-[--navbar-border] bg-[--navbar-bg] shadow-[var(--navbar-inset-shadow)] backdrop-blur";
+	"relative w-full border-b border-(--navbar-border) bg-(--navbar-bg) shadow-[var(--navbar-inset-shadow)] backdrop-blur";
 const mobileShellCls =
-	"relative w-full border-b border-[--navbar-border] bg-[--navbar-mobile-bg] shadow-[var(--navbar-inset-shadow)]";
+	"relative w-full border-b border-(--navbar-border) bg-(--navbar-mobile-bg) shadow-[var(--navbar-inset-shadow)]";
 const mobileShellOpenCls =
-	"relative w-full border-b border-transparent bg-[--navbar-mobile-bg] shadow-[var(--navbar-inset-shadow)]";
+	"relative w-full border-b border-transparent bg-(--navbar-mobile-bg) shadow-[var(--navbar-inset-shadow)]";
 const containerCls = "mx-auto w-full px-4 sm:px-6 lg:px-8";
 const desktopInnerCls = "flex h-[4.5rem] items-center justify-center gap-6";
 const leftZoneCls = "flex items-center mr-auto";
 const rightZoneCls = "flex items-center justify-end ml-auto";
 const logoCls =
-	"inline-flex items-center gap-2.5 rounded-[--radius-default] px-1.5 py-1 font-semibold tracking-wide text-[--navbar-text] transition-colors hover:text-[--navbar-logo-hover]";
+	"inline-flex items-center gap-2.5 rounded-(--radius-default) px-1.5 py-1 font-semibold tracking-wide text-(--navbar-text) transition-colors hover:text-(--navbar-logo-hover)";
 const markCls =
-	"inline-flex h-8 w-8 items-center justify-center rounded-[--radius-default] border border-[--navbar-mark-border] bg-[--navbar-mark-bg] font-bold text-[--navbar-mark-text]";
+	"inline-flex h-8 w-8 items-center justify-center rounded-(--radius-default) border border-(--navbar-mark-border) bg-(--navbar-mark-bg) font-bold text-(--navbar-mark-text)";
 const centerNavCls = "flex min-w-0 justify-center";
 const desktopListCls = "flex items-center gap-3";
 const desktopLinkCls =
-	"inline-flex h-10 items-center rounded-[--radius-default] px-3.5 font-medium text-[--navbar-text-muted] transition-colors hover:bg-[--navbar-hover-bg] hover:text-[--navbar-hover-text]";
+	"inline-flex h-10 items-center rounded-(--radius-default) px-3.5 font-medium text-(--navbar-text-muted) transition-colors hover:bg-(--navbar-hover-bg) hover:text-(--navbar-hover-text)";
 
 const desktopDropdownWrapCls =
-	"group inline-flex cursor-pointer items-center rounded-[--radius-default] transition-colors hover:bg-[--navbar-hover-bg]";
+	"group inline-flex cursor-pointer items-center rounded-(--radius-default) transition-colors hover:bg-(--navbar-hover-bg)";
 const desktopDropdownLinkCls =
-	"flex items-center font-medium text-[--navbar-text-muted] transition-colors group-hover:text-[--navbar-hover-text]";
+	"flex items-center font-medium text-(--navbar-text-muted) transition-colors group-hover:text-(--navbar-hover-text)";
 const desktopDropdownChevronCls =
-	"flex items-center px-2 pt-1 text-[--navbar-text-muted] transition-colors group-hover:text-[--navbar-hover-text] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--navbar-ring)] rounded-r-[--radius-default]";
+	"flex items-center px-2 pt-1 text-(--navbar-text-muted) transition-colors group-hover:text-(--navbar-hover-text) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--navbar-ring)] rounded-r-(--radius-default)";
 const actionCls =
-	"inline-flex h-11 items-center justify-center whitespace-nowrap rounded-[--radius-default] border border-[--navbar-action-border] bg-[--navbar-action-bg] px-5 font-semibold text-[--navbar-action-text] transition-colors hover:border-[--navbar-action-hover-border] hover:bg-[--navbar-action-hover-bg] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--navbar-ring)]";
+	"inline-flex h-11 items-center justify-center whitespace-nowrap rounded-(--radius-default) border border-(--navbar-action-border) bg-(--navbar-action-bg) px-5 font-semibold text-(--navbar-action-text) transition-colors hover:border-(--navbar-action-hover-border) hover:bg-(--navbar-action-hover-bg) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--navbar-ring)]";
 
 const mobileInnerCls = "flex h-14 items-center justify-between gap-4";
 const mobileToggleCls =
-	"inline-flex h-10 w-10 items-center justify-center rounded-[--radius-default] text-[--navbar-text-muted] transition-colors hover:text-[--navbar-hover-text] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--navbar-ring)]";
+	"inline-flex h-10 w-10 items-center justify-center rounded-(--radius-default) text-(--navbar-text-muted) transition-colors hover:text-(--navbar-hover-text) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--navbar-ring)]";
 const mobilePanelWrapCls =
 	"absolute inset-x-0 top-full z-[80] overflow-y-auto overscroll-contain [touch-action:pan-y] [-webkit-overflow-scrolling:touch] origin-top";
 const mobilePanelCls =
-	"border-y border-[--navbar-border] bg-[--navbar-mobile-panel-bg] will-change-transform transition-all duration-300 ease-out";
+	"border-y border-(--navbar-border) bg-(--navbar-mobile-panel-bg) will-change-transform transition-all duration-300 ease-out";
 const mobileLinkCls =
-	"flex min-h-12 w-full items-center justify-between px-4 text-left font-medium text-[--navbar-text-muted] transition-colors hover:bg-[--navbar-hover-bg] hover:text-[--navbar-hover-text]";
+	"flex min-h-12 w-full items-center justify-between px-4 text-left font-medium text-(--navbar-text-muted) transition-colors hover:bg-(--navbar-hover-bg) hover:text-(--navbar-hover-text)";
 const mobileSubLinkCls =
-	"block px-6 py-2 text-[--navbar-text-muted] transition-colors hover:bg-[--navbar-hover-bg] hover:text-[--navbar-hover-text]";
+	"block px-6 py-2 text-(--navbar-text-muted) transition-colors hover:bg-(--navbar-hover-bg) hover:text-(--navbar-hover-text)";
 const mobileActionWrapCls = "px-3 pb-3 pt-2";
 const mobileActionCls =
-	"inline-flex h-10 w-full items-center justify-center rounded-[--radius-default] border border-[--navbar-action-border] bg-[--navbar-action-bg] px-4 font-semibold text-[--navbar-action-text] transition-colors hover:border-[--navbar-action-hover-border] hover:bg-[--navbar-action-hover-bg] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--navbar-ring)]";
+	"inline-flex h-10 w-full items-center justify-center rounded-(--radius-default) border border-(--navbar-action-border) bg-(--navbar-action-bg) px-4 font-semibold text-(--navbar-action-text) transition-colors hover:border-(--navbar-action-hover-border) hover:bg-(--navbar-action-hover-bg) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--navbar-ring)]";
 
 const DEFAULT_LINKS = [
 	{ label: "Home", href: "#" },
@@ -239,7 +239,7 @@ export function Navbar({
 										"a",
 										{
 											href: link.href ?? "#",
-											className: `${desktopDropdownLinkCls} rounded-l-[--radius-default] px-3.5 py-2`,
+											className: `${desktopDropdownLinkCls} rounded-l-(--radius-default) px-3.5 py-2`,
 										},
 										link.label,
 									),
@@ -262,7 +262,7 @@ export function Navbar({
 											{
 												role: "menu",
 												className:
-													"absolute left-0 top-[calc(100%+0.6rem)] z-40 w-48 rounded-[--radius-default] border border-[--navbar-border] bg-[--navbar-dropdown-bg] shadow-[var(--navbar-dropdown-shadow)]",
+													"absolute left-0 top-[calc(100%+0.6rem)] z-40 w-48 rounded-(--radius-default) border border-(--navbar-border) bg-(--navbar-dropdown-bg) shadow-[var(--navbar-dropdown-shadow)]",
 											},
 											...(link.items ?? []).map((item, itemIndex) =>
 												React.createElement(
@@ -272,7 +272,7 @@ export function Navbar({
 														href: item.href ?? "#",
 														role: "menuitem",
 														className:
-															"block rounded-[--radius-default] px-3.5 py-2.5 text-base text-[--navbar-text-muted] transition-colors hover:bg-[--navbar-hover-bg] hover:text-[--navbar-hover-text]",
+															"block rounded-(--radius-default) px-3.5 py-2.5 text-base text-(--navbar-text-muted) transition-colors hover:bg-(--navbar-hover-bg) hover:text-(--navbar-hover-text)",
 														onClick: () => setOpenIndex(null),
 													},
 													item.label,
@@ -476,7 +476,7 @@ export function MobileNavbar({
 								},
 								React.createElement(
 									"ul",
-									{ className: "divide-y divide-[--navbar-divide-border]" },
+									{ className: "divide-y divide-(--navbar-divide-border)" },
 									...navLinks.map((link, index) => {
 										if (!hasSubItems(link)) {
 											return React.createElement(

package/templates/ui/src/password-input.js

@@ -23,7 +23,7 @@ export function PasswordInput({ className = "", ...props }) {
 				onClick: () => setVisible((v) => !v),
 				"aria-label": visible ? "Hide password" : "Show password",
 				className:
-					"absolute right-2.5 top-1/2 -translate-y-1/2 text-[--input-icon] hover:text-[--input-icon-hover] transition-colors",
+					"absolute right-2.5 top-1/2 -translate-y-1/2 text-(--input-icon) hover:text-(--input-icon-hover) transition-colors",
 			},
 			React.createElement(Icon, { size: 16, "aria-hidden": true }),
 		),

package/templates/ui/src/rich-text.js

@@ -27,24 +27,24 @@ import { Input } from "./input.js";
  */
 
 const wrapperCls =
-	"rounded-[--radius-default] border border-[--richtext-border] bg-[--richtext-bg] text-sm text-[--richtext-text] transition-colors duration-200 focus-within:border-[--richtext-border-focus] focus-within:ring-2 focus-within:ring-[var(--richtext-ring)] overflow-hidden";
+	"rounded-(--radius-default) border border-(--richtext-border) bg-(--richtext-bg) text-sm text-(--richtext-text) transition-colors duration-200 focus-within:border-(--richtext-border-focus) focus-within:ring-2 focus-within:ring-[var(--richtext-ring)] overflow-hidden";
 
 const toolbarCls =
-	"flex flex-wrap items-center border-b border-[--richtext-border] bg-[--richtext-toolbar-bg]";
+	"flex flex-wrap items-center border-b border-(--richtext-border) bg-(--richtext-toolbar-bg)";
 
 const btnBase =
-	"inline-flex items-center justify-center rounded-[--radius-default] text-[--richtext-btn-text] transition-colors cursor-pointer hover:bg-[--richtext-btn-hover-bg] hover:text-[--richtext-btn-hover-text] disabled:opacity-30 disabled:cursor-not-allowed";
+	"inline-flex items-center justify-center rounded-(--radius-default) text-(--richtext-btn-text) transition-colors cursor-pointer hover:bg-(--richtext-btn-hover-bg) hover:text-(--richtext-btn-hover-text) disabled:opacity-30 disabled:cursor-not-allowed";
 
 const btnActive =
-	"bg-[--richtext-btn-active-bg] text-[--richtext-btn-active-text]";
+	"bg-(--richtext-btn-active-bg) text-(--richtext-btn-active-text)";
 
-const separatorCls = "bg-[--richtext-separator]";
+const separatorCls = "bg-(--richtext-separator)";
 
 const editorCls =
-	"outline-none px-3 py-2 overflow-y-auto prose-sm [&_h1]:text-xl [&_h1]:font-bold [&_h1]:mt-4 [&_h1]:mb-2 [&_h2]:text-lg [&_h2]:font-semibold [&_h2]:mt-3 [&_h2]:mb-1.5 [&_h3]:text-base [&_h3]:font-semibold [&_h3]:mt-2 [&_h3]:mb-1 [&_ul]:list-disc [&_ul]:pl-5 [&_ul]:my-2 [&_ol]:list-decimal [&_ol]:pl-5 [&_ol]:my-2 [&_li]:my-0.5 [&_a]:text-[--richtext-link] [&_a]:underline [&_blockquote]:border-l-2 [&_blockquote]:border-[--richtext-blockquote-border] [&_blockquote]:pl-3 [&_blockquote]:italic [&_blockquote]:text-[--richtext-blockquote-text] [&_blockquote]:my-2 [&_code]:bg-[--richtext-code-bg] [&_code]:px-1 [&_code]:py-0.5 [&_code]:rounded [&_code]:text-xs [&_code]:font-mono";
+	"outline-none px-3 py-2 overflow-y-auto prose-sm [&_h1]:text-xl [&_h1]:font-bold [&_h1]:mt-4 [&_h1]:mb-2 [&_h2]:text-lg [&_h2]:font-semibold [&_h2]:mt-3 [&_h2]:mb-1.5 [&_h3]:text-base [&_h3]:font-semibold [&_h3]:mt-2 [&_h3]:mb-1 [&_ul]:list-disc [&_ul]:pl-5 [&_ul]:my-2 [&_ol]:list-decimal [&_ol]:pl-5 [&_ol]:my-2 [&_li]:my-0.5 [&_a]:text-(--richtext-link) [&_a]:underline [&_blockquote]:border-l-2 [&_blockquote]:border-(--richtext-blockquote-border) [&_blockquote]:pl-3 [&_blockquote]:italic [&_blockquote]:text-(--richtext-blockquote-text) [&_blockquote]:my-2 [&_code]:bg-(--richtext-code-bg) [&_code]:px-1 [&_code]:py-0.5 [&_code]:rounded [&_code]:text-xs [&_code]:font-mono";
 
 const placeholderCls =
-	"before:content-[attr(data-placeholder)] before:text-[--richtext-placeholder] before:pointer-events-none before:absolute before:left-3 before:top-2";
+	"before:content-[attr(data-placeholder)] before:text-(--richtext-placeholder) before:pointer-events-none before:absolute before:left-3 before:top-2";
 
 const TOOLBAR_ITEMS = [
 	{ command: "bold", icon: "B", title: "Bold", style: "font-bold" },
@@ -433,7 +433,7 @@ export function RichText({
 					linkError
 						? React.createElement(
 								"p",
-								{ className: "mt-1.5 text-xs text-[--color-danger]" },
+								{ className: "mt-1.5 text-xs text-(--color-danger)" },
 								linkError,
 							)
 						: null,

package/templates/ui/src/select.js

@@ -10,19 +10,19 @@ import React, {
 } from "react";
 
 const triggerCls =
-	"flex h-10 w-full items-center justify-between rounded-[--radius-default] border border-[--select-border] bg-[--select-bg] px-3 text-sm text-[--select-text] shadow-sm transition-all duration-200 cursor-pointer hover:border-[--select-border-hover] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--select-ring)] disabled:cursor-not-allowed disabled:opacity-50";
+	"flex h-10 w-full items-center justify-between rounded-(--radius-default) border border-(--select-border) bg-(--select-bg) px-3 text-sm text-(--select-text) shadow-sm transition-all duration-200 cursor-pointer hover:border-(--select-border-hover) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--select-ring)] disabled:cursor-not-allowed disabled:opacity-50";
 
 const panelCls =
-	"absolute z-30 max-h-60 w-full overflow-auto rounded-[--radius-default] border border-[--select-border] bg-[--select-panel-bg] shadow-xl origin-top transition-all duration-200 ease-out";
+	"absolute z-30 max-h-60 w-full overflow-auto rounded-(--radius-default) border border-(--select-border) bg-(--select-panel-bg) shadow-xl origin-top transition-all duration-200 ease-out";
 
 const optionBaseCls =
-	"flex w-full items-center justify-between rounded-[--radius-default] px-2.5 py-2 text-left text-sm transition-colors duration-150";
+	"flex w-full items-center justify-between rounded-(--radius-default) px-2.5 py-2 text-left text-sm transition-colors duration-150";
 
 const optionIdleCls =
-	"cursor-pointer text-[--select-text] hover:bg-[--select-option-hover-bg] hover:text-[--select-option-hover-text]";
+	"cursor-pointer text-(--select-text) hover:bg-(--select-option-hover-bg) hover:text-(--select-option-hover-text)";
 
 const optionActiveCls =
-	"bg-[--select-option-active-bg] text-[--select-option-active-text]";
+	"bg-(--select-option-active-bg) text-(--select-option-active-text)";
 
 function normalizeValue(value) {
 	if (value === undefined || value === null) return "";
@@ -249,8 +249,8 @@ export function Select({
 				"span",
 				{
 					className: selectedOption
-						? "text-[--select-text]"
-						: "text-[--select-text-faint]",
+						? "text-(--select-text)"
+						: "text-(--select-text-faint)",
 				},
 				selectedOption?.label ??
 					(options.length === 0 ? "No options" : placeholder),
@@ -260,7 +260,7 @@ export function Select({
 				{
 					"aria-hidden": "true",
 					className:
-						`ml-2 text-[--select-text-faint] transition-transform duration-200 ease-in-out ${open ? "rotate-180" : "rotate-0"}`.trim(),
+						`ml-2 text-(--select-text-faint) transition-transform duration-200 ease-in-out ${open ? "rotate-180" : "rotate-0"}`.trim(),
 				},
 				React.createElement(ChevronDown, { size: 16 }),
 			),
@@ -276,7 +276,7 @@ export function Select({
 			options.length === 0
 				? React.createElement(
 						"p",
-						{ className: "px-2.5 py-2 text-sm text-[--select-text-faint]" },
+						{ className: "px-2.5 py-2 text-sm text-(--select-text-faint)" },
 						"No options",
 					)
 				: options.map((option) => {
@@ -305,7 +305,7 @@ export function Select({
 										"span",
 										{
 											"aria-hidden": "true",
-											className: "text-[--select-option-active-text]",
+											className: "text-(--select-option-active-text)",
 										},
 										React.createElement(Check, { size: 16 }),
 									)

package/templates/ui/src/skeleton.js

@@ -1,6 +1,6 @@
 import React from "react";
 
-const base = "animate-pulse rounded-lg bg-[--skeleton-bg]";
+const base = "animate-pulse rounded-lg bg-(--skeleton-bg)";
 
 export function Skeleton({ className = "", ...props }) {
 	return React.createElement("div", {

package/templates/ui/src/table.js

@@ -2,11 +2,11 @@ import { ChevronDown, ChevronsUpDown, ChevronUp } from "lucide-react";
 import React from "react";
 
 const wrapperCls =
-	"w-full overflow-auto rounded-[--radius-default] border border-[--table-border] bg-[--table-bg]";
+	"w-full overflow-auto rounded-(--radius-default) border border-(--table-border) bg-(--table-bg)";
 
 const tableCls = "w-full caption-bottom text-sm";
 
-const headerCls = "border-b border-[--table-border] bg-[--table-header-bg]";
+const headerCls = "border-b border-(--table-border) bg-(--table-header-bg)";
 
 const bodyCls = "[&_tr:last-child]:border-0";
 
@@ -14,15 +14,15 @@ const rowCls =
 	"border-b border-[var(--table-border)] transition-colors hover:bg-[var(--table-row-hover-bg)] active:bg-[var(--table-row-active-bg)]";
 
 const headCls =
-	"h-11 text-left align-middle font-medium text-[--table-head-text]";
+	"h-11 text-left align-middle font-medium text-(--table-head-text)";
 
-const cellCls = "align-middle text-[--table-cell-text]";
+const cellCls = "align-middle text-(--table-cell-text)";
 
 const sortButtonCls =
-	"group inline-flex w-full items-center justify-between gap-2 text-left outline-none focus-visible:ring-2 focus-visible:ring-[var(--table-ring)] rounded-[--radius-default]";
+	"group inline-flex w-full items-center justify-between gap-2 text-left outline-none focus-visible:ring-2 focus-visible:ring-[var(--table-ring)] rounded-(--radius-default)";
 
 const sortIconCls =
-	"text-[--table-sort-icon] transition-colors group-hover:text-[--table-sort-icon-hover]";
+	"text-(--table-sort-icon) transition-colors group-hover:text-(--table-sort-icon-hover)";
 
 function toAriaSort(direction) {
 	if (direction === "asc") return "ascending";
@@ -148,7 +148,7 @@ export function TableHead({
 				{
 					"aria-hidden": "true",
 					className:
-						`${sortIconCls} ${direction !== "none" ? "text-[--table-sort-active]" : ""}`.trim(),
+						`${sortIconCls} ${direction !== "none" ? "text-(--table-sort-active)" : ""}`.trim(),
 				},
 				sortIndicator(direction),
 			),

package/templates/ui/src/textarea.js

@@ -1,7 +1,7 @@
 import React from "react";
 
 const base =
-	"block w-full rounded-[--radius-default] border border-[--input-border] bg-[--input-bg] px-3 py-2 text-sm text-[--input-text] placeholder:text-[--input-placeholder] transition-colors duration-200 hover:border-[--input-border-hover] focus-visible:border-[--input-border-focus] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--input-ring-focus)] disabled:opacity-[--input-disabled-opacity] disabled:cursor-not-allowed resize-y";
+	"block w-full rounded-(--radius-default) border border-(--input-border) bg-(--input-bg) px-3 py-2 text-sm text-(--input-text) placeholder:text-(--input-placeholder) transition-colors duration-200 hover:border-(--input-border-hover) focus-visible:border-(--input-border-focus) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--input-ring-focus)] disabled:opacity-(--input-disabled-opacity) disabled:cursor-not-allowed resize-y";
 
 export function Textarea({ className = "", ...props }) {
 	return React.createElement("textarea", {

package/templates/ui/src/toast.js

@@ -21,7 +21,7 @@ export function Toast({
 	const [shouldRender, setShouldRender] = useState(visible);
 
 	const variantCls =
-		"bg-[--toast-bg] border-[--toast-border] text-[--toast-text] shadow-[var(--toast-shadow)]";
+		"bg-(--toast-bg) border-(--toast-border) text-(--toast-text) shadow-[var(--toast-shadow)]";
 
 	const remainingRef = useRef(duration);
 	const startRef = useRef(null);
@@ -98,7 +98,7 @@ export function Toast({
 			"data-toast-variant": variant,
 			onMouseEnter: () => setHovered(true),
 			onMouseLeave: () => setHovered(false),
-			className: `fixed bottom-4 right-4 z-50 flex items-center gap-3 rounded-[--radius-default] px-4 py-3 text-sm transition-colors duration-200 ${variantCls}`,
+			className: `fixed bottom-4 right-4 z-50 flex items-center gap-3 rounded-(--radius-default) px-4 py-3 text-sm transition-colors duration-200 ${variantCls}`,
 			style: animStyle,
 		},
 		React.createElement("span", null, message),
@@ -116,7 +116,7 @@ export function Toast({
 							"aria-label": "Dismiss notification",
 							onClick: onClose,
 							className:
-								"flex h-6 w-6 cursor-pointer items-center justify-center rounded-[--radius-default] text-base leading-none opacity-80 transition-all hover:bg-black/10 dark:hover:bg-white/10 hover:opacity-100 active:bg-black/20 dark:active:bg-white/20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/60",
+								"flex h-6 w-6 cursor-pointer items-center justify-center rounded-(--radius-default) text-base leading-none opacity-80 transition-all hover:bg-black/10 dark:hover:bg-white/10 hover:opacity-100 active:bg-black/20 dark:active:bg-white/20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/60",
 						},
 						React.createElement(
 							"svg",

package/templates/worker/src/index.js

@@ -9,7 +9,7 @@ import {
 	createLogger,
 	createQueue,
 	createWorker,
-	getRedisUrl,
+	getRedisEndpoint,
 	updateQueueDepths,
 } from "@usequark/quark-core";
 import { AppError } from "@usequark/quark-core/errors";
@@ -170,7 +170,7 @@ export async function waitForRedis(
 
 	// All retries exhausted
 	throw new AppError(
-		`Redis unavailable at ${getRedisUrl()} after ${maxRetries} attempts. Start Redis or check REDIS_URL/REDIS_HOST/REDIS_PORT.`,
+		`Redis unavailable at ${getRedisEndpoint()} after ${maxRetries} attempts. Start Redis or check REDIS_URL/REDIS_HOST/REDIS_PORT.`,
 		503,
 		"REDIS_UNAVAILABLE",
 	);
@@ -397,7 +397,7 @@ async function startWorker() {
 			isDevMode ? { maxRetries: 3, intervalMs: 500 } : {},
 		);
 
-		logger.info("Redis connected", { address: getRedisUrl() });
+		logger.info("Redis connected", { address: getRedisEndpoint() });
 
 		// Wait for database schema to be ready (migrations may still be running)
 		logger.info("Checking database schema readiness...");