bosia 0.6.21 → 0.6.22

package/src/core/scanner.ts

@@ -93,9 +93,7 @@ export function scanRoutes(): RouteManifest {
 				? join(dir, "+page.server.ts")
 				: null;
 
-			const pageTs = pageServerFile
-				? readTrailingSlash(join(ROUTES_DIR, pageServerFile))
-				: null;
+			const pageTs = pageServerFile ? readTrailingSlash(join(ROUTES_DIR, pageServerFile)) : null;
 			const effectiveTs: TrailingSlash = pageTs ?? currentTrailingSlash;
 
 			pages.push({

package/src/core/server.ts

@@ -234,21 +234,11 @@ async function resolve(event: RequestEvent): Promise<Response> {
 			const mask = invalidatedBits
 				? buildMaskFromBits(
 						invalidatedBits,
-						pageMatch?.route
-							? ((pageMatch.route as any).layoutModules?.length ?? 0)
-							: 0,
+						pageMatch?.route ? ((pageMatch.route as any).layoutModules?.length ?? 0) : 0,
 					)
 				: undefined;
 			const runLoad = async () => {
-				const data = await loadRouteData(
-					routeUrl,
-					locals,
-					request,
-					cookies,
-					null,
-					pageMatch,
-					mask,
-				);
+				const data = await loadRouteData(routeUrl, locals, request, cookies, null, pageMatch, mask);
 
 				let metadata = null;
 				if (pageMatch) {
@@ -278,14 +268,10 @@ async function resolve(event: RequestEvent): Promise<Response> {
 				? `${dedupKey(routeUrl)}|m=${invalidatedBits}`
 				: dedupKey(routeUrl);
 			const result =
-				pageMatch?.route.scope === "private"
-					? await runLoad()
-					: await dedup(dedupK, runLoad);
+				pageMatch?.route.scope === "private" ? await runLoad() : await dedup(dedupK, runLoad);
 
 			const cookiesWereAccessed = (cookies as CookieJar).accessed || result.cookiesAccessed;
-			const cc = cookiesWereAccessed
-				? "private, no-cache"
-				: "public, max-age=0, must-revalidate";
+			const cc = cookiesWereAccessed ? "private, no-cache" : "public, max-age=0, must-revalidate";
 
 			if (!result.data) {
 				return compress(
@@ -461,9 +447,7 @@ async function resolve(event: RequestEvent): Promise<Response> {
 			if (hit) {
 				return new Response(
 					Bun.file(hit.absPath),
-					hit.cacheControl
-						? { headers: { "Cache-Control": hit.cacheControl } }
-						: undefined,
+					hit.cacheControl ? { headers: { "Cache-Control": hit.cacheControl } } : undefined,
 				);
 			}
 			return new Response("Not Found", { status: 404 });
@@ -510,9 +494,7 @@ async function resolve(event: RequestEvent): Promise<Response> {
 	if (!isDev) {
 		// Try both `<path>/index.html` (always/ignore mode) and `<path>.html` (never mode)
 		const prerenderCandidates =
-			path === "/"
-				? ["index.html"]
-				: [`${path}/index.html`, `${path.replace(/\/$/, "")}.html`];
+			path === "/" ? ["index.html"] : [`${path}/index.html`, `${path.replace(/\/$/, "")}.html`];
 		for (const candidate of prerenderCandidates) {
 			const prerenderPath = safePath(`${OUT_DIR}/prerendered`, candidate);
 			if (!prerenderPath) continue;
@@ -533,10 +515,7 @@ async function resolve(event: RequestEvent): Promise<Response> {
 
 	// Trailing-slash canonicalization — 308 preserves method (form POSTs included)
 	if (pageMatch) {
-		const canonical = canonicalPathname(
-			path,
-			(pageMatch.route as any).trailingSlash ?? "never",
-		);
+		const canonical = canonicalPathname(path, (pageMatch.route as any).trailingSlash ?? "never");
 		if (canonical !== null) {
 			return new Response(null, {
 				status: 308,
@@ -854,15 +833,11 @@ async function handleRequest(request: Request, url: URL): Promise<Response> {
 function parseCorsMaxAge(value?: string): number | undefined {
 	if (!value) return undefined;
 	if (!/^\d+$/.test(value)) {
-		throw new Error(
-			`Invalid CORS_MAX_AGE: "${value}" — must be a non-negative integer (seconds)`,
-		);
+		throw new Error(`Invalid CORS_MAX_AGE: "${value}" — must be a non-negative integer (seconds)`);
 	}
 	const n = parseInt(value, 10);
 	if (!Number.isFinite(n) || n > Number.MAX_SAFE_INTEGER) {
-		throw new Error(
-			`Invalid CORS_MAX_AGE: "${value}" — must be a non-negative integer (seconds)`,
-		);
+		throw new Error(`Invalid CORS_MAX_AGE: "${value}" — must be a non-negative integer (seconds)`);
 	}
 	return n;
 }

package/src/core/staticManifest.ts

@@ -50,9 +50,7 @@ export function buildStaticManifest(outDir: string): StaticManifest {
 	const clientRoot = join(outAbs, "client");
 	if (existsSync(clientRoot)) {
 		for (const { abs, rel } of walk(clientRoot)) {
-			const cacheControl = HASHED_BASENAME.test(basename(rel))
-				? IMMUTABLE_CACHE
-				: DEFAULT_CACHE;
+			const cacheControl = HASHED_BASENAME.test(basename(rel)) ? IMMUTABLE_CACHE : DEFAULT_CACHE;
 			addOnce(manifest, `/dist/client/${rel}`, { absPath: abs, cacheControl });
 		}
 	}

package/src/core/svelteAudit.ts

@@ -121,9 +121,7 @@ function extractBindings(ast: AnyNode): Binding[] {
 				case "ImportDeclaration": {
 					const sourceNode = stmt.source as AnyNode | undefined;
 					const source =
-						sourceNode && typeof sourceNode.value === "string"
-							? (sourceNode.value as string)
-							: "";
+						sourceNode && typeof sourceNode.value === "string" ? (sourceNode.value as string) : "";
 					const specs = stmt.specifiers as AnyNode[] | undefined;
 					if (!Array.isArray(specs)) break;
 					for (const spec of specs) {
@@ -344,8 +342,7 @@ function collectTemplateRefs(source: string, fragment: AnyNode): TemplateRef[] {
 			// name into the surrounding scope so `<MySnippet/>` doesn't false-
 			// positive. The expression's name is the snippet's identifier.
 			const expr = n.expression as AnyNode | undefined;
-			const snippetName =
-				expr && typeof expr.name === "string" ? (expr.name as string) : null;
+			const snippetName = expr && typeof expr.name === "string" ? (expr.name as string) : null;
 			if (snippetName && scopeStack.length > 0) {
 				scopeStack[scopeStack.length - 1].add(snippetName);
 			} else if (snippetName) {

package/src/core/svelteCompiler.ts

@@ -113,10 +113,7 @@ export function makeBosiaSvelteCompiler(target: "browser" | "bun"): BunPlugin {
 				// Server (Bun) compile output has different line numbers and would
 				// clobber the client entry under the same cache key.
 				if (dev && target === "browser" && result.js.map) {
-					const m =
-						typeof result.js.map === "string"
-							? JSON.parse(result.js.map)
-							: result.js.map;
+					const m = typeof result.js.map === "string" ? JSON.parse(result.js.map) : result.js.map;
 					svelteMapCache.set(args.path, m);
 				}
 				const contents = dev ? fixBindShadow(result.js.code) : result.js.code;
@@ -134,10 +131,7 @@ export function makeBosiaSvelteCompiler(target: "browser" | "bun"): BunPlugin {
 					filename: args.path,
 				});
 				if (dev && target === "browser" && result.js.map) {
-					const m =
-						typeof result.js.map === "string"
-							? JSON.parse(result.js.map)
-							: result.js.map;
+					const m = typeof result.js.map === "string" ? JSON.parse(result.js.map) : result.js.map;
 					svelteMapCache.set(args.path, m);
 				}
 				return { contents: result.js.code, loader: "js" };

package/templates/default/.prettierignore

@@ -4,3 +4,4 @@ build
 .bosia
 bun.lock
 public/bosia-tw.css
+bosia.json

package/templates/demo/.prettierignore

@@ -4,3 +4,4 @@ build
 .bosia
 bun.lock
 public/bosia-tw.css
+bosia.json

package/templates/shop/.env.example

@@ -0,0 +1,12 @@
+DATABASE_URL=postgresql://postgres:postgres@localhost:5432/shop
+
+SESSION_SECRET=change-me-in-production
+
+STORAGE_DRIVER=s3
+S3_BUCKET=
+S3_REGION=auto
+S3_ACCESS_KEY_ID=
+S3_SECRET_ACCESS_KEY=
+S3_ENDPOINT=
+
+PUBLIC_BASE_URL=

package/templates/shop/.prettierignore

@@ -0,0 +1,7 @@
+node_modules
+dist
+build
+.bosia
+bun.lock
+public/bosia-tw.css
+bosia.json

package/templates/shop/.prettierrc.json

@@ -0,0 +1,9 @@
+{
+	"useTabs": true,
+	"tabWidth": 2,
+	"singleQuote": false,
+	"trailingComma": "all",
+	"printWidth": 100,
+	"plugins": ["prettier-plugin-svelte"],
+	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
+}

package/templates/shop/README.md

@@ -0,0 +1,62 @@
+# {{PROJECT_NAME}}
+
+An online-store starter built with [Bosia](https://github.com/bosapi/bosia) — auth, RBAC, S3-backed uploads, and the shop domain (products / orders / cart).
+
+## Prerequisites
+
+- [Bun](https://bun.sh/) v1.1+
+- PostgreSQL running locally or remotely
+- An S3-compatible bucket (AWS S3, Cloudflare R2, MinIO, ...)
+
+## Getting Started
+
+```bash
+cp .env.example .env
+# fill DATABASE_URL, SESSION_SECRET, and S3_* in .env
+
+bun run db:generate
+bun run db:migrate
+bun run db:seed
+
+bun x bosia dev
+```
+
+Visit [http://localhost:9000](http://localhost:9000). The **first account you register becomes the admin** (gets `('*','*')` via the RBAC bootstrap seed).
+
+## What ships
+
+| Feature       | Path                                                                   |
+| ------------- | ---------------------------------------------------------------------- |
+| `auth`        | `src/features/auth/`, `(public)/login`, `(public)/register`, `/logout` |
+| `rbac`        | `src/features/rbac/`, `locals.can(r,a,scope?)`                         |
+| `file-upload` | `src/features/file-upload/`, `POST /api/files` (S3 via `Bun.s3`)       |
+| `shop`        | `src/features/shop/` (products / orders / cart services)               |
+
+## Routes
+
+- `/` — public landing
+- `/login`, `/register`, `POST /logout`
+- `/dashboard` — gated; redirects to `/login` if unauthenticated
+
+## Scripts
+
+| Command               | Description                                   |
+| --------------------- | --------------------------------------------- |
+| `bun x bosia dev`     | Dev server with HMR                           |
+| `bun x bosia build`   | Production build                              |
+| `bun run db:generate` | Generate migration from schema changes        |
+| `bun run db:migrate`  | Apply pending migrations                      |
+| `bun run db:seed`     | Run pending seed files (incl. RBAC bootstrap) |
+
+## S3 storage
+
+Uses native `Bun.s3` (no `@aws-sdk/*` dependency). Set the standard env vars:
+
+```
+STORAGE_DRIVER=s3
+S3_BUCKET=...
+S3_REGION=...
+S3_ACCESS_KEY_ID=...
+S3_SECRET_ACCESS_KEY=...
+S3_ENDPOINT=          # optional, for R2/MinIO
+```

package/templates/shop/_gitignore

@@ -0,0 +1,12 @@
+node_modules/
+dist/
+.bosia/
+.DS_Store
+*.log
+
+# Generated Tailwind output
+public/bosia-tw.css
+
+# Local env overrides — never commit secrets
+.env*.local
+.env

package/templates/shop/bosia.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from "bosia";
+import { inspector } from "bosia/plugins/inspector";
+
+export default defineConfig({
+	plugins: [
+		// Dev-only: Alt+click any element on the page to open its source in your editor.
+		// Change `editor` to "cursor" or "zed" if you don't use VS Code.
+		inspector({ editor: "code" }),
+	],
+});

package/templates/shop/instructions.txt

@@ -0,0 +1,8 @@
+Update .env with your DATABASE_URL (PostgreSQL) and S3_* credentials.
+Pick a strong SESSION_SECRET.
+
+bun run db:generate
+bun run db:migrate
+bun run db:seed
+
+The first account you register becomes the admin.

package/templates/shop/package.json

@@ -0,0 +1,27 @@
+{
+	"name": "{{PROJECT_NAME}}",
+	"private": true,
+	"type": "module",
+	"scripts": {
+		"dev": "bosia dev",
+		"build": "bosia build",
+		"start": "bosia start",
+		"check": "tsc --noEmit && prettier --check .",
+		"format": "prettier --write .",
+		"format:check": "prettier --check ."
+	},
+	"dependencies": {
+		"bosia": "^{{BOSIA_VERSION}}",
+		"svelte": "^5.20.0",
+		"tailwind-merge": "^3.5.0",
+		"drizzle-orm": "^0.44.0",
+		"postgres": "^3.4.0"
+	},
+	"devDependencies": {
+		"@types/bun": "latest",
+		"prettier": "^3.3.0",
+		"prettier-plugin-svelte": "^3.2.0",
+		"typescript": "^5",
+		"drizzle-kit": "^0.31.0"
+	}
+}

package/templates/shop/public/favicon.svg

@@ -0,0 +1,14 @@
+<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <!-- Top block -->
+  <rect fill="currentColor" x="50" y="50" width="28" height="28" rx="6"/>
+  <rect fill="currentColor" x="86" y="50" width="60" height="28" rx="6"/>
+
+  <!-- Middle block -->
+  <rect fill="currentColor" x="86" y="86" width="72" height="28" rx="6"/>
+
+  <!-- Bottom block -->
+  <rect fill="currentColor" x="86" y="122" width="60" height="28" rx="6"/>
+
+  <!-- Connector bar on left -->
+  <rect fill="currentColor" x="50" y="50" width="28" height="100" rx="6"/>
+</svg>

package/templates/shop/public/logo-dark.svg

@@ -0,0 +1,14 @@
+<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <!-- Top block -->
+  <rect fill="#f0f0f0" x="50" y="50" width="28" height="28" rx="6"/>
+  <rect fill="#f0f0f0" x="86" y="50" width="60" height="28" rx="6"/>
+
+  <!-- Middle block -->
+  <rect fill="#f0f0f0" x="86" y="86" width="72" height="28" rx="6"/>
+
+  <!-- Bottom block -->
+  <rect fill="#f0f0f0" x="86" y="122" width="60" height="28" rx="6"/>
+
+  <!-- Connector bar on left -->
+  <rect fill="#f0f0f0" x="50" y="50" width="28" height="100" rx="6"/>
+</svg>

package/templates/shop/public/logo-light.svg

@@ -0,0 +1,14 @@
+<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <!-- Top block -->
+  <rect fill="#1a1a1a" x="50" y="50" width="28" height="28" rx="6"/>
+  <rect fill="#1a1a1a" x="86" y="50" width="60" height="28" rx="6"/>
+
+  <!-- Middle block -->
+  <rect fill="#1a1a1a" x="86" y="86" width="72" height="28" rx="6"/>
+
+  <!-- Bottom block -->
+  <rect fill="#1a1a1a" x="86" y="122" width="60" height="28" rx="6"/>
+
+  <!-- Connector bar on left -->
+  <rect fill="#1a1a1a" x="50" y="50" width="28" height="100" rx="6"/>
+</svg>

package/templates/shop/src/app.css

@@ -0,0 +1,132 @@
+@import "tailwindcss";
+@source "../src";
+
+/*
+ * ─── shadcn-inspired Design Tokens ──────────────────────
+ * CSS custom properties for light & dark themes.
+ * Uses HSL values so Tailwind can apply opacity modifiers.
+ */
+
+@theme {
+	--color-background: hsl(var(--background));
+	--color-foreground: hsl(var(--foreground));
+
+	--color-card: hsl(var(--card));
+	--color-card-foreground: hsl(var(--card-foreground));
+
+	--color-popover: hsl(var(--popover));
+	--color-popover-foreground: hsl(var(--popover-foreground));
+
+	--color-primary: hsl(var(--primary));
+	--color-primary-foreground: hsl(var(--primary-foreground));
+
+	--color-secondary: hsl(var(--secondary));
+	--color-secondary-foreground: hsl(var(--secondary-foreground));
+
+	--color-muted: hsl(var(--muted));
+	--color-muted-foreground: hsl(var(--muted-foreground));
+
+	--color-accent: hsl(var(--accent));
+	--color-accent-foreground: hsl(var(--accent-foreground));
+
+	--color-destructive: hsl(var(--destructive));
+	--color-destructive-foreground: hsl(var(--destructive-foreground));
+
+	--color-border: hsl(var(--border));
+	--color-input: hsl(var(--input));
+	--color-ring: hsl(var(--ring));
+
+	--radius-sm: calc(var(--radius) - 4px);
+	--radius-md: calc(var(--radius) - 2px);
+	--radius-lg: var(--radius);
+	--radius-xl: calc(var(--radius) + 4px);
+}
+
+/* ─── Light Theme (Default) ─────────────────────────────── */
+
+:root {
+	--background: 0 0% 100%;
+	--foreground: 222.2 84% 4.9%;
+
+	--card: 0 0% 100%;
+	--card-foreground: 222.2 84% 4.9%;
+
+	--popover: 0 0% 100%;
+	--popover-foreground: 222.2 84% 4.9%;
+
+	--primary: 222.2 47.4% 11.2%;
+	--primary-foreground: 210 40% 98%;
+
+	--secondary: 210 40% 96.1%;
+	--secondary-foreground: 222.2 47.4% 11.2%;
+
+	--muted: 210 40% 96.1%;
+	--muted-foreground: 215.4 16.3% 46.9%;
+
+	--accent: 210 40% 96.1%;
+	--accent-foreground: 222.2 47.4% 11.2%;
+
+	--destructive: 0 84.2% 60.2%;
+	--destructive-foreground: 210 40% 98%;
+
+	--border: 214.3 31.8% 91.4%;
+	--input: 214.3 31.8% 91.4%;
+	--ring: 222.2 84% 4.9%;
+
+	--radius: 0.5rem;
+}
+
+/* ─── Dark Theme ─────────────────────────────────────────── */
+
+.dark {
+	--background: 222.2 84% 4.9%;
+	--foreground: 210 40% 98%;
+
+	--card: 222.2 84% 4.9%;
+	--card-foreground: 210 40% 98%;
+
+	--popover: 222.2 84% 4.9%;
+	--popover-foreground: 210 40% 98%;
+
+	--primary: 210 40% 98%;
+	--primary-foreground: 222.2 47.4% 11.2%;
+
+	--secondary: 217.2 32.6% 17.5%;
+	--secondary-foreground: 210 40% 98%;
+
+	--muted: 217.2 32.6% 17.5%;
+	--muted-foreground: 215 20.2% 65.1%;
+
+	--accent: 217.2 32.6% 17.5%;
+	--accent-foreground: 210 40% 98%;
+
+	--destructive: 0 62.8% 30.6%;
+	--destructive-foreground: 210 40% 98%;
+
+	--border: 217.2 32.6% 17.5%;
+	--input: 217.2 32.6% 17.5%;
+	--ring: 212.7 26.8% 83.9%;
+}
+
+/* ─── Base Styles ────────────────────────────────────────── */
+
+@layer base {
+	* {
+		border-color: theme(--color-border);
+	}
+
+	body {
+		background-color: theme(--color-background);
+		color: theme(--color-foreground);
+		font-family:
+			"Inter",
+			system-ui,
+			-apple-system,
+			BlinkMacSystemFont,
+			"Segoe UI",
+			Roboto,
+			"Helvetica Neue",
+			Arial,
+			sans-serif;
+	}
+}

package/templates/shop/src/app.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="svelte" />
+
+declare module "*.svelte" {
+	import type { Component } from "svelte";
+	const component: Component<Record<string, any>, Record<string, any>, any>;
+	export default component;
+}
+
+declare namespace App {
+	interface Locals {
+		db: import("./features/drizzle").Database;
+		requestTime: number;
+	}
+}

package/templates/shop/src/app.html

@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="%bosia.lang%">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		%bosia.head%
+	</head>
+	<body>
+		%bosia.body%
+	</body>
+</html>

package/templates/shop/src/hooks.server.ts

@@ -0,0 +1,21 @@
+import { sequence } from "bosia";
+import type { Handle } from "bosia";
+import { db } from "./features/drizzle";
+import { authHandle } from "./features/auth";
+
+const dbHandle: Handle = async ({ event, resolve }) => {
+	event.locals.db = db;
+	return resolve(event);
+};
+
+const loggingHandle: Handle = async ({ event, resolve }) => {
+	const start = Date.now();
+	event.locals.requestTime = start;
+	const res = await resolve(event);
+	const ms = Date.now() - start;
+	console.log(`[${event.request.method}] ${event.url.pathname} ${res.status} (${ms}ms)`);
+	res.headers.set("X-Response-Time", `${ms}ms`);
+	return res;
+};
+
+export const handle = sequence(dbHandle, authHandle, loggingHandle);

package/templates/shop/src/lib/utils.ts

@@ -0,0 +1 @@
+export { cn } from "bosia";

package/templates/shop/src/routes/(private)/+layout.server.ts

@@ -0,0 +1,10 @@
+import { redirect } from "bosia";
+import type { LoadEvent } from "bosia";
+
+export async function load({ locals, url }: LoadEvent) {
+	if (!locals.user) {
+		const next = encodeURIComponent(url.pathname + url.search);
+		throw redirect(303, `/login?next=${next}`);
+	}
+	return { user: locals.user };
+}

package/templates/shop/src/routes/(private)/+layout.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import { page } from "bosia/client";
+	import AdminSidebar from "$lib/components/AdminSidebar.svelte";
+
+	let { data, children }: { data: { user: { id: string; email: string } }; children: any } =
+		$props();
+</script>
+
+<div class="flex min-h-screen">
+	<AdminSidebar currentPath={page.url.pathname} user={data.user} />
+	<main class="flex-1 overflow-x-hidden p-6">
+		{@render children()}
+	</main>
+</div>

package/templates/shop/src/routes/(private)/dashboard/+page.svelte

@@ -0,0 +1,11 @@
+<!-- EDIT THIS FILE: add cards, KPIs, recent orders, sales charts, etc. -->
+<svelte:head>
+	<title>Dashboard</title>
+</svelte:head>
+
+<div class="flex flex-col gap-4">
+	<h1 class="text-2xl font-bold tracking-tight">Dashboard</h1>
+	<p class="text-muted-foreground text-sm">
+		This is your admin home. Add widgets, KPI cards, and recent activity here.
+	</p>
+</div>

package/templates/shop/src/routes/(public)/+layout.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { page } from "bosia/client";
+	import PublicNavbar from "$lib/components/PublicNavbar.svelte";
+
+	let { data, children }: { data: { user: any }; children: any } = $props();
+</script>
+
+<div class="flex min-h-screen flex-col">
+	<PublicNavbar currentPath={page.url.pathname} user={data.user} />
+	<div class="flex-1">
+		{@render children()}
+	</div>
+</div>

package/templates/shop/src/routes/(public)/+page.svelte

@@ -0,0 +1,30 @@
+<main class="flex min-h-[80vh] flex-col items-center justify-center gap-6 p-8">
+	<div class="flex flex-col items-center gap-3 text-center">
+		<img src="/favicon.svg" alt="" class="size-16" />
+		<h1 class="text-4xl font-bold tracking-tight">Welcome to your shop</h1>
+		<p class="text-muted-foreground text-lg">
+			A Bosia shop starter — auth, RBAC, S3 uploads, products & cart.
+		</p>
+	</div>
+
+	<div class="mt-4 flex gap-3">
+		<a
+			href="/products"
+			class="bg-primary text-primary-foreground hover:bg-primary/90 rounded-md px-4 py-2 text-sm font-medium transition-colors"
+		>
+			Browse products
+		</a>
+		<a
+			href="/login"
+			class="border-border bg-secondary text-secondary-foreground hover:bg-secondary/80 rounded-md border px-4 py-2 text-sm font-medium transition-colors"
+		>
+			Sign in
+		</a>
+	</div>
+
+	<p class="text-muted-foreground mt-6 text-sm">
+		Edit <code class="bg-muted rounded px-1 py-0.5 font-mono text-xs"
+			>src/routes/(public)/+page.svelte</code
+		> to get started
+	</p>
+</main>