@0x0501/mystack 0.0.0-stage → 0.1.0-bootstrap.0

package/template/drizzle/meta/_journal.json

@@ -0,0 +1,27 @@
+{
+  "version": "7",
+  "dialect": "postgresql",
+  "entries": [
+    {
+      "idx": 0,
+      "version": "7",
+      "when": 1754064000000,
+      "tag": "0000_create-app-role",
+      "breakpoints": true
+    },
+    {
+      "idx": 1,
+      "version": "7",
+      "when": 1754064000001,
+      "tag": "0001_add-rls-context",
+      "breakpoints": true
+    },
+    {
+      "idx": 2,
+      "version": "7",
+      "when": 1754064000002,
+      "tag": "0002_platform_tables",
+      "breakpoints": true
+    }
+  ]
+}

package/template/drizzle.config.ts

@@ -0,0 +1,25 @@
+import { config } from "dotenv";
+import { defineConfig } from "drizzle-kit";
+
+// Local env: `.env` then optional overrides in `.env.local` (both gitignored).
+// Mirrors Docker defaults from `.env.docker` / `.env.example`.
+config({ path: ".env" });
+config({ path: ".env.local", override: true });
+
+const migrationUrl = process.env.DATABASE_MIGRATION_URL;
+
+if (!migrationUrl) {
+	console.warn(
+		"[drizzle.config] DATABASE_MIGRATION_URL is unset. " +
+			"Copy .env.example → .env and run `bun run db:up` for local Postgres.",
+	);
+}
+
+export default defineConfig({
+	out: "./drizzle",
+	schema: "./src/db/schema.ts",
+	dialect: "postgresql",
+	...(migrationUrl ? { dbCredentials: { url: migrationUrl } } : {}),
+	verbose: true,
+	strict: true,
+});

package/template/e2e/authenticated-ui.spec.ts

@@ -0,0 +1,40 @@
+import { expect, test } from "@playwright/test";
+
+test("authenticated pages hydrate consistently and retain Headless interactions", async ({
+	page,
+}) => {
+	const email = process.env.E2E_USER_EMAIL;
+	const password = process.env.E2E_USER_PASSWORD;
+	if (!email || !password) {
+		test.skip(true, "Set E2E_USER_EMAIL/PASSWORD for a seeded local user.");
+		return;
+	}
+
+	const errors: string[] = [];
+	page.on("pageerror", (error) => errors.push(error.message));
+	await page.goto("/sign-in");
+	await page.getByLabel("Email", { exact: true }).fill(email);
+	await page.getByLabel("Password", { exact: true }).fill(password);
+	await page.getByRole("button", { name: "Sign in", exact: true }).click();
+	await expect(page).toHaveURL(/\/dashboard$/);
+	await page.getByTestId("theme-dark").click();
+	expect(errors).toEqual([]);
+
+	await page.goto("/dashboard/account");
+	await page.getByRole("tab", { name: "Profile", exact: true }).focus();
+	await page.keyboard.press("ArrowRight");
+	const security = page.getByRole("tab", { name: "Security", exact: true });
+	await expect(security).toBeFocused();
+	await page.keyboard.press("Enter");
+	await expect(security).toHaveAttribute("aria-selected", "true");
+	await page.getByRole("tab", { name: "Profile", exact: true }).click();
+	const select = page.getByRole("combobox");
+	await select.click();
+	await page.getByRole("option", { name: "Deutsch", exact: true }).click();
+	await expect(select).toContainText("Deutsch");
+	await expect(select).toBeFocused();
+	await expect(page.locator('nav a[aria-current="page"]')).toContainText(
+		"Account",
+	);
+	expect(errors).toEqual([]);
+});

package/template/e2e/headless-design.spec.ts

@@ -0,0 +1,66 @@
+import { expect, test } from "@playwright/test";
+
+test("a product skin and Tailwind utilities override default presentation", async ({
+	page,
+}) => {
+	await page.goto("/");
+	await page.getByTestId("theme-light").click();
+	await page.addStyleTag({
+		content: `:root {
+			--primary: #7c3aed;
+			--primary-foreground: #ffffff;
+			--radius: 1.25rem;
+		}`,
+	});
+
+	const action = page.getByTestId("nav-sign-in");
+	await expect(action).toHaveCSS("background-color", "rgb(124, 58, 237)");
+	await expect(action).toHaveCSS("border-radius", "20px");
+
+	// Utilities in the consuming page take precedence over component CSS.
+	await action.evaluate((node) => node.classList.add("px-2", "text-xs"));
+	await expect(action).toHaveCSS("font-size", "12px");
+	await expect(action).toHaveCSS("padding-left", "8px");
+
+	await page.goto("/sign-in");
+	await page.addStyleTag({
+		content: ":root { --background: #fff7ed; --radius: 1.25rem; }",
+	});
+	await expect(page.getByTestId("auth-card")).toBeVisible();
+	await expect(page.locator('input[type="email"]')).toHaveCSS(
+		"background-color",
+		"rgb(255, 247, 237)",
+	);
+	await expect(page.locator('input[type="email"]')).toHaveCSS(
+		"border-radius",
+		"20px",
+	);
+});
+
+test("popup motion respects user preference and preserves locale and keyboard behavior", async ({
+	page,
+}) => {
+	await page.emulateMedia({ reducedMotion: "no-preference" });
+	await page.goto("/sign-in?redirect=%2Fdashboard&ba_param=a&ba_param=b#flow");
+	const trigger = page.getByTestId("locale-switcher");
+	const menu = page.getByTestId("locale-switcher-menu");
+	await trigger.click();
+	await expect(menu).toBeVisible();
+	await page.keyboard.press("Escape");
+	await expect(menu).toBeHidden();
+	await expect(trigger).toBeFocused();
+
+	await page.emulateMedia({ reducedMotion: "reduce" });
+	await trigger.click();
+	await expect(menu).toBeVisible();
+	await expect(menu).toHaveCSS("transition-duration", "0s");
+	const href = await page.getByTestId("locale-link-de").getAttribute("href");
+	const localized = new URL(href!, page.url());
+	expect(localized.pathname).toBe("/de/sign-in");
+	expect(localized.searchParams.getAll("ba_param")).toEqual(["a", "b"]);
+	expect(localized.searchParams.get("redirect")).toBe("/dashboard");
+	expect(localized.hash).toBe("#flow");
+	await page.getByTestId("locale-link-de").click();
+	await expect(page).toHaveURL(localized.href);
+	await expect(page.locator("html")).toHaveAttribute("lang", "de");
+});

package/template/e2e/navigation-loading.spec.ts

@@ -0,0 +1,70 @@
+import { expect, test } from "@playwright/test";
+
+test("cached SSR session allows navigation while a slow page chunk shows loading feedback", async ({
+	page,
+}) => {
+	const errors: string[] = [];
+	let sessionRequests = 0;
+	page.on("pageerror", (error) => errors.push(error.message));
+	page.on("request", (request) => {
+		if (request.url().includes("/_serverFn/")) {
+			sessionRequests++;
+		}
+	});
+	await page.goto("/sign-in");
+	await expect(page.getByRole("button", { name: "Sign in", exact: true })).toBeVisible();
+
+	let release!: () => void;
+	const gate = new Promise<void>((resolve) => {
+		release = resolve;
+	});
+	await page.route(/\/assets\/sign-up-[^/]+\.js$/, async (route) => {
+		await gate;
+		await route.continue();
+	});
+	await page.getByRole("link", { name: "Sign up", exact: true }).click();
+	try {
+		await expect(page).toHaveURL(/\/sign-up$/);
+		await expect(page.getByRole("status")).toHaveText("Loading…");
+		expect(sessionRequests).toBe(0);
+	} finally {
+		release();
+	}
+	await expect(page.getByRole("heading", { name: "Create account" })).toBeVisible();
+	expect(sessionRequests).toBe(0);
+	expect(errors).toEqual([]);
+});
+
+test("an expired session query provides feedback while the root guard awaits the server", async ({
+	page,
+}) => {
+	const errors: string[] = [];
+	page.on("pageerror", (error) => errors.push(error.message));
+	await page.goto("/sign-in");
+	await expect(page.getByRole("button", { name: "Sign in", exact: true })).toBeVisible();
+	await page.clock.install();
+	await page.clock.fastForward(31_000);
+
+	let release!: () => void;
+	let requests = 0;
+	const gate = new Promise<void>((resolve) => {
+		release = resolve;
+	});
+	await page.route("**/_serverFn/**", async (route) => {
+		requests++;
+		await gate;
+		await route.continue();
+	});
+	await page.getByRole("link", { name: "Sign up", exact: true }).click();
+	try {
+		await expect(page).toHaveURL(/\/sign-up$/);
+		await expect(page.getByRole("status")).toHaveText("Loading…");
+		await expect(page.getByRole("heading", { name: "Sign in", exact: true })).toBeVisible();
+		expect(requests).toBe(1);
+	} finally {
+		release();
+	}
+	await expect(page.getByRole("heading", { name: "Create account" })).toBeVisible();
+	expect(requests).toBe(1);
+	expect(errors).toEqual([]);
+});

package/template/e2e/theme-responsive.spec.ts

@@ -0,0 +1,260 @@
+import { expect, type Page, test } from "@playwright/test";
+
+/** Relative luminance (sRGB) for WCAG contrast math. */
+function luminance(rgb: { r: number; g: number; b: number }): number {
+	const lin = (c: number) => {
+		const s = c / 255;
+		return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
+	};
+	const r = lin(rgb.r);
+	const g = lin(rgb.g);
+	const b = lin(rgb.b);
+	return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+
+function contrastRatio(
+	a: { r: number; g: number; b: number },
+	b: { r: number; g: number; b: number },
+): number {
+	const l1 = luminance(a);
+	const l2 = luminance(b);
+	const lighter = Math.max(l1, l2);
+	const darker = Math.min(l1, l2);
+	return (lighter + 0.05) / (darker + 0.05);
+}
+
+function parseRgb(color: string): { r: number; g: number; b: number } | null {
+	const m = color.match(
+		/rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)/i,
+	);
+	if (!m) {
+		// modern browsers may return "rgb(16 21 28)" space-separated
+		const m2 = color.match(/rgba?\(\s*([\d.]+)\s+([\d.]+)\s+([\d.]+)/i);
+		if (!m2) return null;
+		return {
+			r: Number(m2[1]),
+			g: Number(m2[2]),
+			b: Number(m2[3]),
+		};
+	}
+	return { r: Number(m[1]), g: Number(m[2]), b: Number(m[3]) };
+}
+
+async function readColors(
+	page: Page,
+	selector: string,
+): Promise<{ color: string; backgroundColor: string }> {
+	return page.locator(selector).evaluate((el) => {
+		const styles = getComputedStyle(el);
+		return {
+			color: styles.color,
+			backgroundColor: styles.backgroundColor,
+		};
+	});
+}
+
+async function assertReadableText(
+	page: Page,
+	selector: string,
+	minRatio: number,
+	label: string,
+) {
+	const el = page.locator(selector).first();
+	await expect(el).toBeVisible();
+
+	// Walk up until we find a non-transparent background for contrast.
+	const pair = await el.evaluate((node) => {
+		const textColor = getComputedStyle(node).color;
+		let bg = "rgba(0, 0, 0, 0)";
+		let cur: Element | null = node;
+		while (cur) {
+			const c = getComputedStyle(cur).backgroundColor;
+			if (c && !c.includes("0, 0, 0, 0") && c !== "transparent") {
+				// also skip fully transparent alpha
+				const alpha = c.match(/[\d.]+\)$/);
+				if (c.startsWith("rgba") && alpha) {
+					const a = Number(c.slice(c.lastIndexOf(",") + 1, -1));
+					if (a < 0.05) {
+						cur = cur.parentElement;
+						continue;
+					}
+				}
+				bg = c;
+				break;
+			}
+			cur = cur.parentElement;
+		}
+		return { color: textColor, backgroundColor: bg };
+	});
+
+	const fg = parseRgb(pair.color);
+	const bg = parseRgb(pair.backgroundColor);
+	expect(fg, `${label}: parse foreground ${pair.color}`).not.toBeNull();
+	expect(bg, `${label}: parse background ${pair.backgroundColor}`).not.toBeNull();
+	const ratio = contrastRatio(fg!, bg!);
+	expect(
+		ratio,
+		`${label}: contrast ${ratio.toFixed(2)}:1 (fg=${pair.color}, bg=${pair.backgroundColor})`,
+	).toBeGreaterThanOrEqual(minRatio);
+}
+
+async function assertNoHorizontalOverflow(page: Page) {
+	const overflow = await page.evaluate(() => {
+		const doc = document.documentElement;
+		return {
+			scrollWidth: doc.scrollWidth,
+			clientWidth: doc.clientWidth,
+		};
+	});
+	expect(
+		overflow.scrollWidth,
+		`horizontal overflow: scrollWidth ${overflow.scrollWidth} > clientWidth ${overflow.clientWidth}`,
+	).toBeLessThanOrEqual(overflow.clientWidth + 1);
+}
+
+async function clearTheme(page: Page) {
+	await page.goto("/");
+	await page.evaluate(() => {
+		try {
+			localStorage.removeItem("theme");
+		} catch {
+			// ignore
+		}
+	});
+	// Re-apply system defaults without wiping on subsequent navigations.
+	await page.evaluate(() => {
+		document.documentElement.classList.remove("dark");
+		document.documentElement.dataset.theme = "system";
+		const dark = matchMedia("(prefers-color-scheme: dark)").matches;
+		document.documentElement.classList.toggle("dark", dark);
+	});
+}
+
+test.describe("theme, contrast, and responsive layout", () => {
+	test("home renders primary content and readable body text", async ({
+		page,
+	}) => {
+		await clearTheme(page);
+		await page.goto("/");
+		await expect(page.getByTestId("home-page")).toBeVisible();
+		await expect(page.getByTestId("home-title")).toBeVisible();
+		await expect(page.getByTestId("home-blurb")).toBeVisible();
+		await expect(page.getByTestId("theme-toggle")).toBeVisible();
+
+		// Body ink on paper — WCAG AA for normal text (4.5:1)
+		await assertReadableText(page, "[data-testid=home-title]", 4.5, "title");
+		await assertReadableText(page, "[data-testid=home-blurb]", 4.5, "blurb");
+		await assertNoHorizontalOverflow(page);
+	});
+
+	test("theme toggle switches light and dark with readable text", async ({
+		page,
+	}) => {
+		await clearTheme(page);
+		await page.goto("/");
+		const html = page.locator("html");
+
+		await page.getByTestId("theme-dark").click();
+		await expect(html).toHaveClass(/dark/);
+		await expect(html).toHaveAttribute("data-theme", "dark");
+		await assertReadableText(
+			page,
+			"[data-testid=home-title]",
+			4.5,
+			"title dark",
+		);
+		await assertReadableText(
+			page,
+			"[data-testid=home-blurb]",
+			4.5,
+			"blurb dark",
+		);
+
+		// Primary CTA: primary-fg on primary bg
+		const cta = page.getByTestId("nav-sign-in");
+		await expect(cta).toBeVisible();
+		const ctaColors = await readColors(page, "[data-testid=nav-sign-in]");
+		const ctaFg = parseRgb(ctaColors.color);
+		const ctaBg = parseRgb(ctaColors.backgroundColor);
+		expect(ctaFg).not.toBeNull();
+		expect(ctaBg).not.toBeNull();
+		expect(
+			contrastRatio(ctaFg!, ctaBg!),
+			`CTA dark contrast ${ctaColors.color} on ${ctaColors.backgroundColor}`,
+		).toBeGreaterThanOrEqual(4.5);
+
+		await page.getByTestId("theme-light").click();
+		await expect(html).not.toHaveClass(/dark/);
+		await expect(html).toHaveAttribute("data-theme", "light");
+		await assertReadableText(
+			page,
+			"[data-testid=home-title]",
+			4.5,
+			"title light",
+		);
+		await assertReadableText(
+			page,
+			"[data-testid=home-blurb]",
+			4.5,
+			"blurb light",
+		);
+
+		const lightCta = await readColors(page, "[data-testid=nav-sign-in]");
+		const lFg = parseRgb(lightCta.color);
+		const lBg = parseRgb(lightCta.backgroundColor);
+		expect(lFg).not.toBeNull();
+		expect(lBg).not.toBeNull();
+		expect(
+			contrastRatio(lFg!, lBg!),
+			`CTA light contrast ${lightCta.color} on ${lightCta.backgroundColor}`,
+		).toBeGreaterThanOrEqual(4.5);
+
+		// Preference persists across reload (do not clear localStorage here)
+		const stored = await page.evaluate(() => localStorage.getItem("theme"));
+		expect(stored).toBe("light");
+		await page.reload();
+		await expect(html).not.toHaveClass(/dark/);
+		await expect(html).toHaveAttribute("data-theme", "light");
+	});
+
+	test("sign-in form colors are correct in light and dark", async ({
+		page,
+	}) => {
+		await clearTheme(page);
+		await page.goto("/sign-in");
+		await expect(page.getByTestId("auth-card")).toBeVisible();
+		await expect(page.getByTestId("theme-toggle")).toBeVisible();
+
+		const email = page.locator('input[type="email"]');
+		await expect(email).toBeVisible();
+
+		// Light
+		await page.getByTestId("theme-light").click();
+		await assertReadableText(page, "h1", 4.5, "sign-in title light");
+		const lightInput = await readColors(page, 'input[type="email"]');
+		const liFg = parseRgb(lightInput.color);
+		const liBg = parseRgb(lightInput.backgroundColor);
+		expect(liFg).not.toBeNull();
+		expect(liBg).not.toBeNull();
+		expect(
+			contrastRatio(liFg!, liBg!),
+			`input light ${lightInput.color} on ${lightInput.backgroundColor}`,
+		).toBeGreaterThanOrEqual(4.5);
+
+		// Dark
+		await page.getByTestId("theme-dark").click();
+		await expect(page.locator("html")).toHaveClass(/dark/);
+		await assertReadableText(page, "h1", 4.5, "sign-in title dark");
+		const darkInput = await readColors(page, 'input[type="email"]');
+		const diFg = parseRgb(darkInput.color);
+		const diBg = parseRgb(darkInput.backgroundColor);
+		expect(diFg).not.toBeNull();
+		expect(diBg).not.toBeNull();
+		expect(
+			contrastRatio(diFg!, diBg!),
+			`input dark ${darkInput.color} on ${darkInput.backgroundColor}`,
+		).toBeGreaterThanOrEqual(4.5);
+
+		await assertNoHorizontalOverflow(page);
+	});
+});

package/template/gitignore

@@ -0,0 +1,24 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
+.env
+.env.prod
+.nitro
+.tanstack
+.wrangler
+.output
+.vinxi
+__unconfig*
+todos.json
+
+# Playwright
+test-results/
+playwright-report/
+blob-report/
+.tokensave
+.serena
+
+# CLI release snapshot; rebuilt by prepack
+/packages/mystack/template/