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

package/template/src/services/stripe.ts

@@ -0,0 +1,106 @@
+/**
+ * Stripe Checkout webhook: signature verification and the framework-agnostic
+ * callback handler.
+ *
+ * Kept free of `env` and framework glue so it is unit-testable; the route
+ * (src/routes/api/webhooks/stripe.ts) supplies the secret and the
+ * service-context db.
+ */
+import { createHmac, timingSafeEqual } from "node:crypto";
+import type { Database } from "@/db";
+import { markPurchasePaid } from "@/services/purchase";
+
+/** The one event that releases funds. */
+const PAID_EVENT = "checkout.session.completed";
+
+/**
+ * Verify a `stripe-signature` header: HMAC-SHA256 (hex) over
+ * `${timestamp}.${rawBody}`, compared constant-time against the `v1` scheme,
+ * with a replay window. Returns false for anything malformed — never throws on
+ * bad input, because a throw would answer "retry me" and Stripe would replay a
+ * hostile body.
+ */
+export function verifyStripeSignature(
+	secret: string,
+	rawBody: string,
+	signatureHeader: string | null | undefined,
+	toleranceSec = 300,
+): boolean {
+	if (!signatureHeader) return false;
+	const parts = Object.fromEntries(
+		signatureHeader.split(",").map((p) => {
+			const [k, v] = p.split("=");
+			return [k.trim(), v];
+		}),
+	);
+	const timestamp = parts.t;
+	const sig = parts.v1;
+	if (!timestamp || !sig) return false;
+	const age = Math.abs(Date.now() / 1000 - Number(timestamp));
+	if (Number.isNaN(age) || age > toleranceSec) return false;
+	const expected = createHmac("sha256", secret)
+		.update(`${timestamp}.${rawBody}`)
+		.digest("hex");
+	try {
+		return timingSafeEqual(Buffer.from(expected), Buffer.from(sig));
+	} catch {
+		return false;
+	}
+}
+
+export type StripeWebhookResult =
+	| "invalid_signature"
+	| "invalid_payload"
+	| "credited"
+	| "amount_mismatch"
+	| "unknown_order"
+	| "noop";
+
+/**
+ * Handle a Stripe webhook: verify the signature, then fulfill only on
+ * `checkout.session.completed`, joining on the Checkout Session id (= Purchase
+ * `externalId`). `amount_total` is passed as an integrity check only —
+ * fulfillment still trusts the Purchase row's own amount and fails closed on a
+ * mismatch. Every other event type leaves the Purchase untouched.
+ *
+ * `db` must already carry service RLS context (the route wraps this in
+ * withRlsService). Throws only on a genuine processing/DB error — including a
+ * throw from the purchase-paid hook — so the route can answer 5xx and Stripe
+ * retries; every mapped outcome resolves so the route answers 200 and Stripe
+ * stops retrying.
+ */
+export async function handleStripeWebhook(
+	db: Database,
+	args: { rawBody: string; signature: string | null; secret: string },
+): Promise<StripeWebhookResult> {
+	if (!verifyStripeSignature(args.secret, args.rawBody, args.signature)) {
+		return "invalid_signature";
+	}
+
+	// Stripe signs the raw string, so a valid signature over an unparseable body
+	// means the sender signed garbage. That is a client error, not a retry.
+	let event: {
+		type?: string;
+		data?: { object?: { id?: string; amount_total?: number } };
+	};
+	try {
+		event = JSON.parse(args.rawBody) as typeof event;
+	} catch {
+		return "invalid_payload";
+	}
+
+	if (event.type !== PAID_EVENT) return "noop";
+	const externalId = event.data?.object?.id;
+	if (!externalId) return "noop";
+
+	const result = await markPurchasePaid(db, {
+		provider: "stripe",
+		externalId,
+		reportedAmount: event.data?.object?.amount_total,
+	});
+	if (result.status === "not_found") return "unknown_order";
+	if (result.status === "amount_mismatch") return "amount_mismatch";
+	return result.status === "fulfilled" || result.status === "already_paid"
+		? "credited"
+		: "noop";
+}

package/template/src/start.ts

@@ -0,0 +1,35 @@
+/**
+ * Global Start config: CSRF for server functions + HttpError wire serialization.
+ * Locale is handled by paraglideMiddleware + router rewrite — not here.
+ */
+import { createSerializationAdapter } from "@tanstack/react-router";
+import { createCsrfMiddleware, createStart } from "@tanstack/react-start";
+import { HttpError } from "@/utils/api-error";
+
+const csrfMiddleware = createCsrfMiddleware({
+	filter: (ctx) => ctx.handlerType === "serverFn",
+});
+
+// A thrown HttpError has to reach the client with its status intact. User
+// adapters are composed *ahead* of the router's default shallow error
+// serializer, so this one matches first and the shallow one never sees the
+// value; without it a refusal degrades to a bare `Error` carrying only
+// `message`.
+//
+// This registration is load-bearing and must never lag behind the middleware
+// that throw: shipping the throws alone loses `.status` on the wire.
+const httpErrorAdapter = createSerializationAdapter({
+	key: "tanstack-starter/HttpError",
+	test: (value): value is HttpError => value instanceof HttpError,
+	toSerializable: ({ status, error, message }: HttpError) => ({
+		status,
+		error,
+		message,
+	}),
+	fromSerializable: (value) => new HttpError(value),
+});
+
+export const startInstance = createStart(() => ({
+	serializationAdapters: [httpErrorAdapter],
+	requestMiddleware: [csrfMiddleware],
+}));

package/template/src/styles/layout.css

@@ -0,0 +1,93 @@
+/* Replaceable page layouts. Tailwind utilities take precedence. */
+@layer components {
+	/* Simple page width — mobile to 4K */
+	.page {
+		width: 100%;
+		max-width: 42rem;
+		margin-inline: auto;
+		padding: 1.5rem 1rem 3rem;
+	}
+
+	.page--wide {
+		max-width: 56rem;
+	}
+
+	.page--narrow {
+		max-width: 24rem;
+	}
+
+	@media (min-width: 640px) {
+		.page {
+			padding: 2rem 1.5rem 4rem;
+		}
+	}
+
+	@media (min-width: 2560px) {
+		.page {
+			max-width: 48rem;
+			padding: 3rem 2rem 5rem;
+			font-size: 16px;
+		}
+		.page--wide {
+			max-width: 64rem;
+		}
+	}
+
+	.auth-shell {
+		min-height: 100dvh;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+	}
+
+	.auth-shell__header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 0.5rem;
+		margin-bottom: 1.5rem;
+	}
+
+	.shell-title {
+		font-size: 1.25rem;
+		font-weight: 500;
+		letter-spacing: -0.025em;
+	}
+
+	.auth-shell__title {
+		margin-bottom: 1.5rem;
+	}
+
+	.auth-shell__content {
+		padding: 1rem;
+	}
+
+	.app-shell__header {
+		display: flex;
+		flex-direction: column;
+		gap: 0.75rem;
+		margin-bottom: 2rem;
+		border-bottom: 1px solid var(--border);
+		padding-bottom: 1rem;
+	}
+
+	.shell-nav-link:hover {
+		text-decoration: underline;
+	}
+
+	.shell-nav-link[aria-current="page"] {
+		font-weight: 600;
+		text-decoration: underline;
+	}
+
+	@media (min-width: 640px) {
+		.auth-shell__content {
+			padding: 1.25rem;
+		}
+		.app-shell__header {
+			flex-direction: row;
+			align-items: center;
+			justify-content: space-between;
+		}
+	}
+}

package/template/src/styles/theme.css

@@ -0,0 +1,84 @@
+/* Replace these defaults to apply a product identity. */
+@layer base {
+	:root {
+		color-scheme: light;
+		--background: #ffffff;
+		--foreground: #111111;
+		--muted: #f5f5f5;
+		--muted-foreground: #666666;
+		--border: #e5e5e5;
+		--input: #d4d4d4;
+		--ring: #111111;
+		--card: #ffffff;
+		--card-foreground: #111111;
+		--primary: #111111;
+		--primary-foreground: #ffffff;
+		--secondary: #f5f5f5;
+		--secondary-foreground: #111111;
+		--accent: #f0f0f0;
+		--accent-foreground: #111111;
+		--destructive: #c00;
+		--destructive-foreground: #ffffff;
+		--success: #0a7a3e;
+		--success-foreground: #ffffff;
+		--warning: #a65f00;
+		--overlay: rgb(0 0 0 / 0.4);
+		--radius: 0.375rem;
+		--font-sans-stack:
+			system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
+			sans-serif;
+	}
+
+	.dark {
+		color-scheme: dark;
+		--background: #0a0a0a;
+		--foreground: #fafafa;
+		--muted: #171717;
+		--muted-foreground: #a3a3a3;
+		--border: #262626;
+		--input: #404040;
+		--ring: #fafafa;
+		--card: #0a0a0a;
+		--card-foreground: #fafafa;
+		--primary: #fafafa;
+		--primary-foreground: #0a0a0a;
+		--secondary: #171717;
+		--secondary-foreground: #fafafa;
+		--accent: #1a1a1a;
+		--accent-foreground: #fafafa;
+		--destructive: #f87171;
+		--destructive-foreground: #0a0a0a;
+		--success: #4ade80;
+		--success-foreground: #0a0a0a;
+		--warning: #fbbf24;
+		--overlay: rgb(0 0 0 / 0.6);
+	}
+}
+
+@theme inline {
+	--color-background: var(--background);
+	--color-foreground: var(--foreground);
+	--color-muted: var(--muted);
+	--color-muted-foreground: var(--muted-foreground);
+	--color-border: var(--border);
+	--color-input: var(--input);
+	--color-ring: var(--ring);
+	--color-card: var(--card);
+	--color-card-foreground: var(--card-foreground);
+	--color-primary: var(--primary);
+	--color-primary-foreground: var(--primary-foreground);
+	--color-secondary: var(--secondary);
+	--color-secondary-foreground: var(--secondary-foreground);
+	--color-accent: var(--accent);
+	--color-accent-foreground: var(--accent-foreground);
+	--color-destructive: var(--destructive);
+	--color-destructive-foreground: var(--destructive-foreground);
+	--color-success: var(--success);
+	--color-success-foreground: var(--success-foreground);
+	--color-warning: var(--warning);
+	--color-overlay: var(--overlay);
+	--radius-sm: calc(var(--radius) - 2px);
+	--radius-md: var(--radius);
+	--radius-lg: calc(var(--radius) + 2px);
+	--font-sans: var(--font-sans-stack);
+}

package/template/src/styles/ui.css

@@ -0,0 +1,233 @@
+/* Opt-in default presentation; Base UI itself remains unstyled. */
+@layer components {
+	.ui-input,
+	.ui-select-trigger {
+		display: flex;
+		align-items: center;
+		width: 100%;
+		min-height: 2.25rem;
+		border: 1px solid var(--input);
+		border-radius: var(--radius);
+		padding: 0.375rem 0.75rem;
+		background: var(--background);
+		color: var(--foreground);
+		font-size: 0.875rem;
+	}
+
+	.ui-select-trigger {
+		justify-content: space-between;
+		gap: 0.5rem;
+	}
+
+	.ui-button {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		min-height: 2.25rem;
+		border-radius: var(--radius);
+		padding: 0.375rem 0.75rem;
+		font-size: 0.875rem;
+		font-weight: 500;
+	}
+
+	.ui-button--primary {
+		background: var(--primary);
+		color: var(--primary-foreground);
+	}
+
+	.ui-button--primary:hover:not(:disabled) {
+		opacity: 0.9;
+	}
+
+	.ui-button--secondary {
+		border: 1px solid var(--border);
+		background: var(--background);
+		color: var(--foreground);
+	}
+
+	.ui-button--secondary:hover:not(:disabled) {
+		background: var(--muted);
+	}
+
+	.ui-card {
+		border: 1px solid var(--border);
+		background: var(--card);
+		color: var(--card-foreground);
+	}
+
+	.ui-label {
+		display: block;
+		margin-bottom: 0.25rem;
+		color: var(--foreground);
+		font-size: 0.875rem;
+	}
+
+	.ui-muted,
+	.ui-select-icon {
+		color: var(--muted-foreground);
+	}
+
+	.ui-muted {
+		font-size: 0.875rem;
+	}
+
+	.ui-link {
+		text-decoration: underline;
+		text-underline-offset: 2px;
+	}
+
+	.ui-link:hover {
+		opacity: 0.8;
+	}
+
+	.ui-positioner {
+		z-index: 50;
+	}
+
+	.ui-select-popup,
+	.ui-menu-popup {
+		border: 1px solid var(--border);
+		border-radius: var(--radius);
+		padding-block: 0.25rem;
+		background: var(--background);
+		color: var(--foreground);
+		transform-origin: var(--transform-origin);
+	}
+
+	.ui-select-popup {
+		max-height: min(15rem, var(--available-height));
+		min-width: var(--anchor-width);
+		overflow: auto;
+	}
+
+	.ui-menu-popup {
+		min-width: 9rem;
+		overflow: hidden;
+	}
+
+	.ui-select-item,
+	.ui-menu-item {
+		display: block;
+		padding: 0.375rem 0.75rem;
+		font-size: 0.875rem;
+		cursor: pointer;
+	}
+
+	.ui-select-item[data-highlighted],
+	.ui-menu-item[data-highlighted] {
+		background: var(--muted);
+	}
+
+	.ui-select-item[data-selected],
+	.ui-menu-item[aria-current="true"] {
+		font-weight: 500;
+	}
+
+	.ui-checkbox {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 1rem;
+		height: 1rem;
+		flex-shrink: 0;
+		border: 1px solid var(--input);
+		border-radius: calc(var(--radius) - 2px);
+		background: var(--background);
+	}
+
+	.ui-checkbox[data-checked] {
+		border-color: var(--primary);
+		background: var(--primary);
+		color: var(--primary-foreground);
+	}
+
+	.ui-checkbox-indicator {
+		font-size: 0.625rem;
+		line-height: 1;
+	}
+
+	.ui-tabs-list {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 1rem;
+		margin-bottom: 1rem;
+		border-bottom: 1px solid var(--border);
+	}
+
+	/* Tabs use data-active; Select uses data-selected. */
+	.ui-tabs-tab {
+		position: relative;
+		margin-bottom: -1px;
+		border-bottom: 2px solid transparent;
+		padding-bottom: 0.5rem;
+		color: var(--muted-foreground);
+		font-size: 0.875rem;
+	}
+
+	.ui-tabs-tab:hover,
+	.ui-tabs-tab[data-active] {
+		color: var(--foreground);
+	}
+
+	.ui-tabs-tab[data-active] {
+		border-color: var(--primary);
+	}
+
+	.ui-input:disabled,
+	.ui-select-trigger[data-disabled],
+	.ui-select-item[data-disabled],
+	.ui-checkbox[data-disabled],
+	.ui-tabs-tab[data-disabled] {
+		cursor: not-allowed;
+		opacity: 0.5;
+	}
+
+	.ui-theme-option,
+	.ui-locale-trigger {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.25rem;
+		min-height: 2rem;
+		border-radius: var(--radius);
+		padding-inline: 0.5rem;
+		color: var(--muted-foreground);
+		font-size: 0.75rem;
+	}
+
+	.ui-theme-option:hover,
+	.ui-locale-trigger:hover {
+		color: var(--foreground);
+	}
+
+	.ui-theme-option[aria-pressed="true"] {
+		background: var(--primary);
+		color: var(--primary-foreground);
+	}
+
+	.ui-locale-trigger--button {
+		border: 1px solid var(--border);
+		color: var(--foreground);
+	}
+
+	.ui-locale-trigger--button:hover {
+		background: var(--muted);
+	}
+
+	/* Motion is a presentation choice. Only these defaults opt into it. */
+	@media (prefers-reduced-motion: no-preference) {
+		.ui-select-popup,
+		.ui-menu-popup {
+			transition:
+				opacity 150ms ease,
+				transform 150ms ease;
+		}
+
+		.ui-select-popup[data-starting-style],
+		.ui-select-popup[data-ending-style],
+		.ui-menu-popup[data-starting-style],
+		.ui-menu-popup[data-ending-style] {
+			opacity: 0;
+			transform: translateY(-0.25rem) scale(0.98);
+		}
+	}
+}

package/template/src/styles.css

@@ -0,0 +1,90 @@
+@import "tailwindcss";
+@import "./styles/theme.css";
+@import "./styles/layout.css";
+@import "./styles/ui.css";
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+/* Base UI portal stacking + iOS Safari — official quick start */
+@layer base {
+	.root {
+		isolation: isolate;
+		min-height: 100dvh;
+		display: flex;
+		flex-direction: column;
+		background: var(--background);
+		color: var(--foreground);
+	}
+
+	body {
+		position: relative;
+		margin: 0;
+		min-height: 100%;
+		font-family: var(--font-sans-stack);
+		font-size: 15px;
+		line-height: 1.5;
+		background: var(--background);
+		color: var(--foreground);
+		-webkit-font-smoothing: antialiased;
+	}
+
+	html,
+	body,
+	#app {
+		min-height: 100%;
+	}
+
+	*,
+	*::before,
+	*::after {
+		box-sizing: border-box;
+		border-color: var(--border);
+	}
+
+	input,
+	button,
+	textarea,
+	select {
+		font: inherit;
+		color: inherit;
+	}
+
+	input:not([type="checkbox"]):not([type="radio"]),
+	textarea,
+	select {
+		color: var(--foreground);
+		background: var(--background);
+	}
+
+	input::placeholder,
+	textarea::placeholder {
+		color: var(--muted-foreground);
+		opacity: 1;
+	}
+
+	button {
+		cursor: pointer;
+	}
+
+	button:disabled,
+	input:disabled,
+	textarea:disabled,
+	select:disabled {
+		cursor: not-allowed;
+		opacity: 0.5;
+	}
+
+	a {
+		color: inherit;
+		text-underline-offset: 2px;
+	}
+
+	:focus-visible {
+		outline: 2px solid var(--ring);
+		outline-offset: 2px;
+	}
+
+	table {
+		border-collapse: collapse;
+	}
+}