@usequark/quark-create-app 1.23.11

package/templates/base-project/apps/web/next.config.js

@@ -0,0 +1,154 @@
+import { hostname, networkInterfaces } from "node:os";
+
+import { buildContentSecurityPolicy } from "./src/lib/analytics/umami-csp.js";
+
+function getLocalNetworkHosts() {
+	const hosts = new Set(["localhost", "127.0.0.1", "0.0.0.0"]);
+
+	for (const entries of Object.values(networkInterfaces())) {
+		for (const entry of entries || []) {
+			if (!entry || entry.internal || entry.family !== "IPv4") continue;
+			hosts.add(entry.address.split("%")[0]);
+		}
+	}
+
+	const machineHostname = hostname().trim();
+	if (machineHostname) {
+		hosts.add(machineHostname);
+		if (!machineHostname.endsWith(".local")) {
+			hosts.add(`${machineHostname}.local`);
+		}
+	}
+
+	return [...hosts];
+}
+
+function getAllowedDevOrigins() {
+	const configuredOrigins = (
+		process.env.NEXT_DEV_ALLOWED_ORIGINS ||
+		process.env.ALLOWED_DEV_ORIGINS ||
+		""
+	)
+		.split(",")
+		.map((origin) => origin.trim())
+		.filter(Boolean);
+
+	return [...new Set([...getLocalNetworkHosts(), ...configuredOrigins])];
+}
+
+const allowedDevOrigins =
+	process.env.NODE_ENV === "development" ? getAllowedDevOrigins() : undefined;
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+	// Required for Railway deployment - produces a self-contained build
+	// at .next/standalone that can run without node_modules.
+	output: "standalone",
+	outputFileTracingIncludes: {
+		"/*": ["../../packages/db/prisma/schema.prisma"],
+	},
+	allowedDevOrigins,
+
+	// Keep BullMQ out of the Turbopack/webpack graph — its ESM build imports
+	// Node built-ins (child_process, net, worker_threads, dns, fs).
+	serverExternalPackages: ["bullmq"],
+
+	// Support workspace package resolution (including @techstream/quark-db which uses
+	// the Prisma driver-adapter pattern - pure JS, no native engine binary)
+	transpilePackages: [
+		"@techstream/quark-core",
+		"@techstream/quark-db",
+		"@techstream/quark-ui",
+		"@techstream/quark-jobs",
+	],
+
+	// Security headers
+	// NOTE: These are also applied by proxy.js for proxy-matched routes.
+	// Keeping them here as a fallback for routes the proxy doesn't match.
+	async headers() {
+		return [
+			{
+				source: "/:path*",
+				headers: [
+					{
+						key: "X-DNS-Prefetch-Control",
+						value: "on",
+					},
+					{
+						key: "X-Frame-Options",
+						value: "SAMEORIGIN",
+					},
+					{
+						key: "X-Content-Type-Options",
+						value: "nosniff",
+					},
+					{
+						key: "Referrer-Policy",
+						value: "strict-origin-when-cross-origin",
+					},
+					{
+						key: "Permissions-Policy",
+						value: "camera=(), microphone=(), geolocation=()",
+					},
+					{
+						key: "Content-Security-Policy",
+						// unsafe-eval is required by Turbopack in development only.
+						// It is deliberately excluded from the production directive.
+						value: buildContentSecurityPolicy(),
+					},
+				],
+			},
+		];
+	},
+
+	// Environment variables validation
+	//
+	// NEXTAUTH_URL is read by next-auth/react *in the browser*, so it has to be
+	// inlined at build time. Leaving it undefined when APP_URL/NEXTAUTH_URL are
+	// unset made the client fall back to next-auth's hardcoded
+	// http://localhost:3000/api/auth regardless of PORT or host. Derive the same
+	// fallback the server uses (packages/config/src/app-url.js) so both sides
+	// agree.
+	env: {
+		APP_URL: process.env.APP_URL,
+		NEXTAUTH_URL:
+			process.env.NEXTAUTH_URL ||
+			process.env.APP_URL ||
+			`http://localhost:${process.env.PORT || 3000}`,
+	},
+
+	// Request body size limits (security)
+	experimental: {
+		// Limit request body size to prevent DoS attacks
+		// Default is 4MB, we're being explicit here
+		// Adjust based on your needs (e.g., larger for file uploads)
+		serverActions: {
+			bodySizeLimit: "2mb", // For Server Actions
+		},
+	},
+
+	// API route configuration
+	async rewrites() {
+		return [];
+	},
+
+	// Compiler options for production optimization
+	compiler: {
+		removeConsole:
+			process.env.NODE_ENV === "production"
+				? { exclude: ["error", "warn"] }
+				: false,
+	},
+
+	// Image optimization configuration
+	images: {
+		domains: [],
+		formats: ["image/avif", "image/webp"],
+	},
+
+	// Production-only settings
+	poweredByHeader: false,
+	compress: true,
+};
+
+export default nextConfig;

package/templates/base-project/apps/web/package.json

@@ -0,0 +1,42 @@
+{
+	"name": "@myquark/web",
+	"version": "1.0.0",
+	"type": "module",
+	"private": true,
+	"scripts": {
+		"clean": "rm -rf .next",
+		"dev": "next dev",
+		"build": "next build",
+		"prepare:standalone": "node ./scripts/prepare-standalone.mjs",
+		"build:deploy": "pnpm build && pnpm prepare:standalone",
+		"start": "next start",
+		"start:deploy": "node .next/standalone/apps/web/server.js",
+		"test": "node ../../scripts/run-tests.mjs src --exclude=integration.test.js",
+		"lint": "biome format --write && biome check --write"
+	},
+	"dependencies": {
+		"@auth/prisma-adapter": "^2.11.3",
+		"@aws-sdk/client-s3": "^3.1140.0",
+		"@aws-sdk/s3-request-presigner": "^3.1140.0",
+		"@prisma/client": "^7.10.0",
+		"@techstream/quark-core": "^2.0.0",
+		"@techstream/quark-db": "workspace:*",
+		"@techstream/quark-jobs": "workspace:*",
+		"@techstream/quark-ui": "workspace:*",
+		"ioredis": "^6.0.0",
+		"jose": "^6.2.12",
+		"next": "16.3.6",
+		"next-auth": "5.0.0-beta.32",
+		"pg": "^8.23.0",
+		"react": "19.3.0",
+		"react-dom": "19.3.0",
+		"rrweb": "2.1.6",
+		"zod": "^4.6.5"
+	},
+	"devDependencies": {
+		"@tailwindcss/postcss": "^4.3.3",
+		"@types/node": "^26.6.2",
+		"tailwindcss": "^4.3.3",
+		"@techstream/quark-config": "workspace:*"
+	}
+}

package/templates/base-project/apps/web/postcss.config.mjs

@@ -0,0 +1,7 @@
+const config = {
+	plugins: {
+		"@tailwindcss/postcss": {},
+	},
+};
+
+export default config;

package/templates/base-project/apps/web/public/.well-known/security.txt

@@ -0,0 +1,3 @@
+Contact: mailto:security@example.com
+Expires: 2027-01-01T00:00:00.000Z
+Preferred-Languages: en

package/templates/base-project/apps/web/public/quark.svg

@@ -0,0 +1,47 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" fill="none">
+  <title>Quark</title>
+  <!--
+    Quark logo - SVG master
+    Geometry mirrors QuarkAnimation.js constants (ring/dash thickness ratio ~0.20)
+
+    Ring: center (100,100), centerline radius 65, stroke-width 26
+    Gap:  centred at 45.8° (dashAngle=0.8 rad), half-width 27.1° (0.472 rad)
+    Dash: radial at 45.8°, from radius 23.4 → 103.4 (proportional to animation dL)
+         stroke-width 28 (= dashThickness/ringThickness × 26 = 2.8/2.6 × 26)
+
+    Colors: #2d3436 (dark/top) · #377dff (blue/bottom-left) · #ff4757 (red/tail)
+  -->
+
+  <!-- Dark arc - upper semicircle: left (180°) → top (270°) → right (360°) -->
+  <path
+    d="M 35,100 A 65,65 0 0,1 165,100"
+    stroke="#2d3436"
+    stroke-width="26"
+    stroke-linecap="butt"
+  />
+
+  <!-- Blue arc - bottom-left: gap-end (72.9°) → left (180°) -->
+  <path
+    d="M 119.1,162.1 A 65,65 0 0,1 35,100"
+    stroke="#377dff"
+    stroke-width="26"
+    stroke-linecap="butt"
+  />
+
+  <!-- Red arc - tiny pre-gap sliver: right (0°) → gap-start (18.8°) -->
+  <path
+    d="M 165,100 A 65,65 0 0,1 161.5,121"
+    stroke="#ff4757"
+    stroke-width="26"
+    stroke-linecap="butt"
+  />
+
+  <!-- Red dash - radial tail through the gap -->
+  <line
+    x1="116.3" y1="116.8"
+    x2="172"   y2="174.2"
+    stroke="#ff4757"
+    stroke-width="28"
+    stroke-linecap="butt"
+  />
+</svg>

package/templates/base-project/apps/web/scripts/prepare-standalone.mjs

@@ -0,0 +1,71 @@
+import { access, cp, mkdir } from "node:fs/promises";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const scriptDir = path.dirname(fileURLToPath(import.meta.url));
+const appRoot = path.resolve(scriptDir, "..");
+const standaloneRoot = path.join(appRoot, ".next", "standalone", "apps", "web");
+
+async function assertExists(targetPath, description) {
+	try {
+		await access(targetPath);
+	} catch {
+		throw new Error(
+			`${description} was not found at ${targetPath}. Run "pnpm build" in apps/web before preparing the standalone artifact.`,
+		);
+	}
+}
+
+async function copyIntoStandalone(sourcePath, destinationPath) {
+	await mkdir(path.dirname(destinationPath), { recursive: true });
+	await cp(sourcePath, destinationPath, { recursive: true, force: true });
+}
+
+async function main() {
+	await assertExists(
+		path.join(standaloneRoot, "server.js"),
+		"The standalone server output",
+	);
+	await assertExists(
+		path.join(appRoot, "public"),
+		"The public asset directory",
+	);
+	await assertExists(
+		path.join(appRoot, ".next", "static"),
+		"The Next static asset directory",
+	);
+
+	await copyIntoStandalone(
+		path.join(appRoot, "public"),
+		path.join(standaloneRoot, "public"),
+	);
+	await copyIntoStandalone(
+		path.join(appRoot, ".next", "static"),
+		path.join(standaloneRoot, ".next", "static"),
+	);
+
+	// Copy Prisma schema so admin introspect resolves it from standalone cwd
+	// scriptDir = apps/web/scripts → ../../../ = repo root
+	const repoRoot = path.resolve(scriptDir, "../../..");
+	const schemaSource = path.join(
+		repoRoot,
+		"packages",
+		"db",
+		"prisma",
+		"schema.prisma",
+	);
+	const schemaDest = path.join(standaloneRoot, "schema.prisma");
+	try {
+		await access(schemaSource);
+		await copyIntoStandalone(schemaSource, schemaDest);
+	} catch {
+		console.warn(
+			`Warning: Prisma schema not found at ${schemaSource}; skipping copy into standalone.`,
+		);
+	}
+}
+
+main().catch((error) => {
+	console.error(error.message);
+	process.exitCode = 1;
+});

package/templates/base-project/apps/web/src/app/_components/AsciiPanel.js

@@ -0,0 +1,103 @@
+"use client";
+
+const INNER_W = 34;
+
+function wrapText(text, maxLen) {
+	const words = text.split(" ");
+	const lines = [];
+	let current = "";
+	for (const word of words) {
+		if (current.length + (current ? 1 : 0) + word.length > maxLen) {
+			if (current) lines.push(current);
+			current = word.length > maxLen ? word.slice(0, maxLen) : word;
+		} else {
+			current = current ? `${current} ${word}` : word;
+		}
+	}
+	if (current) lines.push(current);
+	return lines.length ? lines : [""];
+}
+
+function border(top) {
+	const inner = "\u2500".repeat(INNER_W + 2);
+	return top ? `\u250C${inner}\u2510` : `\u2514${inner}\u2518`;
+}
+
+function emptyLine() {
+	return `\u2502${" ".repeat(INNER_W + 2)}\u2502`;
+}
+
+export default function AsciiPanel({
+	title,
+	description,
+	prompt,
+	charCount,
+	onCopy,
+	copied,
+	maxLines,
+}) {
+	const titleChars = wrapText(title, INNER_W);
+	const descChars = wrapText(description, INNER_W);
+
+	const contentLines = [...titleChars, "", ...descChars];
+	const totalDisplayLines = Math.max(maxLines, contentLines.length);
+
+	function getChar(lineIdx, charIdx) {
+		let offset = 0;
+		for (let i = 0; i < lineIdx; i++) {
+			offset += contentLines[i].length;
+		}
+		const pos = offset + charIdx;
+		if (pos < charCount) {
+			return contentLines[lineIdx]?.[charIdx] ?? " ";
+		}
+		return " ";
+	}
+
+	const rows = [];
+	for (let li = 0; li < totalDisplayLines; li++) {
+		const line = contentLines[li] ?? "";
+		const isBlank = li >= contentLines.length || line === "";
+		if (isBlank) {
+			rows.push(
+				<span key={li} className="quark-ascii-line">
+					{`${emptyLine()}\n`}
+				</span>,
+			);
+		} else {
+			const chars = [];
+			for (let ci = 0; ci < INNER_W; ci++) {
+				chars.push(
+					<span key={ci} className="quark-ascii-char">
+						{getChar(li, ci)}
+					</span>,
+				);
+			}
+			rows.push(
+				<span key={li} className="quark-ascii-line">
+					{`\u2502 `}
+					{chars}
+					{` \u2502\n`}
+				</span>,
+			);
+		}
+	}
+
+	return (
+		<article className="quark-ascii-panel" title={prompt}>
+			<pre className="quark-ascii-box">
+				{`${border(true)}\n`}
+				{rows}
+				{`${border(false)}`}
+			</pre>
+			<button
+				type="button"
+				className={`quark-ascii-copy${copied ? " quark-ascii-copy--copied" : ""}`}
+				onClick={onCopy}
+				aria-label={copied ? "Copied" : "Copy prompt"}
+			>
+				{copied ? "copied" : "copy"}
+			</button>
+		</article>
+	);
+}

package/templates/base-project/apps/web/src/app/_components/HealthIndicator.js

@@ -0,0 +1,85 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+const STATUS_COLORS = {
+	ok: "#22c55e",
+	degraded: "#f59e0b",
+	error: "#ef4444",
+};
+
+function Dot({ status, label }) {
+	const dotColor = STATUS_COLORS[status] ?? "var(--quark-health-dot-idle)";
+	return (
+		<span
+			title={`${label}: ${status ?? "checking…"}`}
+			style={{
+				display: "inline-flex",
+				alignItems: "center",
+				gap: "4px",
+				color: "var(--quark-health-text)",
+				fontFamily: "monospace",
+				fontSize: "11px",
+			}}
+		>
+			<span
+				style={{
+					display: "inline-block",
+					width: "5px",
+					height: "5px",
+					borderRadius: "50%",
+					backgroundColor: dotColor,
+					transition: "background-color 0.3s ease",
+					flexShrink: 0,
+				}}
+			/>
+			{label}
+		</span>
+	);
+}
+
+/**
+ * Fetches /api/health once on mount and renders small coloured dots for
+ * database, Redis, and storage status. Shows neutral dots while loading.
+ * Fails silently so the home page aesthetic is never disrupted.
+ * Colours are driven by CSS custom properties (prefers-color-scheme aware).
+ */
+export default function HealthIndicator() {
+	const [checks, setChecks] = useState(null);
+
+	useEffect(() => {
+		let cancelled = false;
+		fetch("/api/health")
+			.then((r) => r.json())
+			.then((data) => {
+				if (!cancelled) setChecks(data.checks ?? {});
+			})
+			.catch(() => {
+				if (!cancelled) setChecks({});
+			});
+		return () => {
+			cancelled = true;
+		};
+	}, []);
+
+	return (
+		<div
+			style={{
+				display: "flex",
+				alignItems: "center",
+				gap: "8px",
+				fontFamily: "monospace",
+				fontSize: "11px",
+			}}
+		>
+			<Dot status={checks?.database?.status} label="db" />
+			<span style={{ color: "var(--quark-health-sep)" }}>·</span>
+			<Dot status={checks?.redis?.status} label="redis" />
+			<span style={{ color: "var(--quark-health-sep)" }}>·</span>
+			<Dot
+				status={checks?.storage?.status}
+				label={checks?.storage?.provider ?? "storage"}
+			/>
+		</div>
+	);
+}

package/templates/base-project/apps/web/src/app/_components/HomeThemeToggle.js

@@ -0,0 +1,63 @@
+"use client";
+
+import {
+	THEME_ATTR,
+	THEME_CHANGE_EVENT,
+	THEME_STORAGE_KEY,
+} from "@techstream/quark-ui/theme-constants";
+import { useLayoutEffect, useState } from "react";
+
+/**
+ * Text-link theme toggle for the home page nav.
+ * Shows "light" when dark mode is active (click to switch to light) and vice versa.
+ * Styled identically to the other nav links via the quark-home-link class.
+ *
+ * Uses the same localStorage key as ThemeProvider (THEME_STORAGE_KEY) and sets
+ * the same HTML attribute (THEME_ATTR) so CSS variables react instantly. Fires
+ * a THEME_CHANGE_EVENT custom event so ThemeProvider (if present) stays in sync
+ * without any import coupling between the two packages.
+ */
+export default function HomeThemeToggle() {
+	const [isDark, setIsDark] = useState(true);
+
+	useLayoutEffect(() => {
+		const stored = localStorage.getItem(THEME_STORAGE_KEY);
+		if (stored === "light" || stored === "dark") {
+			setIsDark(stored === "dark");
+			document.documentElement.setAttribute(THEME_ATTR, stored);
+			return;
+		}
+		const osDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+		setIsDark(osDark);
+	}, []);
+
+	function toggle() {
+		setIsDark((prev) => {
+			const next = prev ? "light" : "dark";
+			localStorage.setItem(THEME_STORAGE_KEY, next);
+			document.documentElement.setAttribute(THEME_ATTR, next);
+			// Notify ThemeProvider (if present in the tree) so React context stays in sync.
+			document.dispatchEvent(
+				new CustomEvent(THEME_CHANGE_EVENT, { detail: { theme: next } }),
+			);
+			return !prev;
+		});
+	}
+
+	return (
+		<button
+			type="button"
+			onClick={toggle}
+			aria-label={`Switch to ${isDark ? "light" : "dark"} mode`}
+			className="quark-home-link"
+			style={{
+				background: "none",
+				border: "none",
+				padding: 0,
+				cursor: "pointer",
+			}}
+		>
+			{isDark ? "light" : "dark"}
+		</button>
+	);
+}