vela 0.1.0 → 0.9.0

package/templates/minimal/src/lib/components/ui/navbar/navbar-store.ts

@@ -0,0 +1,5 @@
+export const MOBILE_MENU_CONTEXT_KEY = Symbol('mobile-menu');
+export type MobileMenuContext = {
+	menuOpen: { isOpen: boolean };
+	toggleMenu: () => void;
+};

package/templates/minimal/src/lib/components/ui/navbar/navbar.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { setContext } from 'svelte';
+	import { cn } from '$lib/utils.js';
+	let { children, class: className = '' } = $props();
+
+	import { MOBILE_MENU_CONTEXT_KEY } from './navbar-store';
+
+	let menuOpen = $state({ isOpen: false });
+
+	setContext(MOBILE_MENU_CONTEXT_KEY, {
+		menuOpen,
+		toggleMenu: () => (menuOpen.isOpen = !menuOpen.isOpen)
+	});
+</script>
+
+<nav class={cn(className)}>
+	<div class="max-w-7xl flex flex-wrap items-center justify-between mx-auto p-4">
+		{@render children?.()}
+	</div>
+</nav>

package/templates/minimal/src/lib/components/ui/sonner/index.ts

@@ -0,0 +1 @@
+export { default as Toaster } from './sonner.svelte';

package/templates/minimal/src/lib/components/ui/sonner/sonner.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { Toaster as Sonner, type ToasterProps as SonnerProps } from 'svelte-sonner';
+	import { mode } from 'mode-watcher';
+
+	let { ...restProps }: SonnerProps = $props();
+</script>
+
+<Sonner
+	theme={mode.current}
+	class="toaster group"
+	style="--normal-bg: var(--color-popover); --normal-text: var(--color-popover-foreground); --normal-border: var(--color-border);"
+	{...restProps}
+/>

package/templates/minimal/src/lib/index.ts

@@ -0,0 +1 @@
+// place files you want to import through the `$lib` alias in this folder.

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

@@ -0,0 +1,13 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+	return twMerge(clsx(inputs));
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type WithoutChild<T> = T extends { child?: any } ? Omit<T, 'child'> : T;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type WithoutChildren<T> = T extends { children?: any } ? Omit<T, 'children'> : T;
+export type WithoutChildrenOrChild<T> = WithoutChildren<WithoutChild<T>>;
+export type WithElementRef<T, U extends HTMLElement = HTMLElement> = T & { ref?: U | null };

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

@@ -0,0 +1,9 @@
+<script lang="ts">
+	import RootLayout from './root-layout.svelte';
+
+	let { data, children } = $props();
+</script>
+
+<RootLayout {data}>
+	{@render children?.()}
+</RootLayout>

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

@@ -0,0 +1,65 @@
+<script lang="ts">
+	import favicon from '$lib/assets/favicon.svg';
+
+	let { data } = $props();
+</script>
+
+<main class="flex-1">
+	<section class="px-6 py-16 md:py-24">
+		<div class="mx-auto max-w-4xl text-center">
+			<a href="/" class="inline-flex items-center gap-2 font-medium">
+				<span
+					class="bg-primary text-primary-foreground inline-flex size-6 items-center justify-center rounded-md"
+				>
+					<img src={favicon} alt="logo" class="size-4" />
+				</span>
+				{data.meta.appName}
+			</a>
+
+			<h1 class="mt-6 text-4xl font-semibold tracking-tight sm:text-5xl">
+				A modern way to get things done
+			</h1>
+			<p class="text-muted-foreground mt-4 text-lg">
+				Everything you need to launch faster, collaborate better, and stay focused.
+			</p>
+
+			<div class="mt-8 flex items-center justify-center gap-3">
+				<a
+					href="/signup"
+					class="bg-primary text-primary-foreground inline-flex items-center rounded-md px-5 py-2.5"
+				>
+					Get started
+				</a>
+				<a
+					href="/login"
+					class="border border-border text-foreground inline-flex items-center rounded-md px-5 py-2.5"
+				>
+					Sign in
+				</a>
+			</div>
+		</div>
+	</section>
+
+	<section class="px-6 pb-16 md:pb-24">
+		<div class="mx-auto grid max-w-5xl gap-6 sm:grid-cols-2 lg:grid-cols-3">
+			<div class="bg-card text-card-foreground rounded-lg border p-6">
+				<h3 class="font-medium">Fast</h3>
+				<p class="text-muted-foreground mt-2">
+					Simple workflows that help you move from idea to done.
+				</p>
+			</div>
+			<div class="bg-card text-card-foreground rounded-lg border p-6">
+				<h3 class="font-medium">Flexible</h3>
+				<p class="text-muted-foreground mt-2">
+					Works for teams of any size and adapts to your process.
+				</p>
+			</div>
+			<div class="bg-card text-card-foreground rounded-lg border p-6">
+				<h3 class="font-medium">Secure</h3>
+				<p class="text-muted-foreground mt-2">
+					Built with best practices and modern standards in mind.
+				</p>
+			</div>
+		</div>
+	</section>
+</main>

package/templates/minimal/src/routes/(public)/root-layout.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+	import favicon from '$lib/assets/favicon.svg';
+
+	import { toggleMode } from 'mode-watcher';
+	import * as Navbar from '$lib/components/ui/navbar';
+	import { Button } from '$lib/components/ui/button';
+
+	let { children, data } = $props();
+</script>
+
+<div class="min-h-dvh grid grid-rows-[max-content_1fr_max-content] root-layout">
+	<Navbar.Root>
+		<Navbar.Brand href="/">
+			<Navbar.Logo src={favicon} alt="Logo" />
+		</Navbar.Brand>
+
+		<Navbar.MobileToggle />
+
+		<Navbar.List>
+			<Navbar.Item>
+				<Button class="w-full justify-start md:justify-center md:w-auto" href="/" variant="ghost">
+					Home
+				</Button>
+			</Navbar.Item>
+		</Navbar.List>
+	</Navbar.Root>
+
+	{@render children?.()}
+
+	<footer class="border-t border-border py-4">
+		<div
+			class="mx-auto flex max-w-7xl px-4 flex-col items-center justify-between gap-3 sm:flex-row"
+		>
+			<p class="text-muted-foreground text-sm">
+				&copy; {new Date().getFullYear()}
+				{data.meta.appName}. All rights reserved.
+			</p>
+			<nav class="flex items-center gap-4 text-sm">
+				<Button onclick={toggleMode} variant="ghost" size="icon">
+					<Navbar.Mode />
+				</Button>
+				<a href="/privacy" class="underline-offset-4 hover:underline">Privacy</a>
+				<a href="/terms" class="underline-offset-4 hover:underline">Terms</a>
+			</nav>
+		</div>
+	</footer>
+</div>
+
+<style lang="postcss">
+	@reference "tailwindcss";
+
+	.root-layout :global(section[data-role='content']) {
+		@apply container mx-auto max-w-7xl px-4 py-8 w-full;
+	}
+</style>

package/templates/minimal/src/routes/(public)/server.test.ts

@@ -0,0 +1,10 @@
+import { describe, it, expect } from 'vitest';
+import type { Match } from '@velastack/pocketbase';
+import type { RouteId } from './$types';
+
+describe('/', () => {
+	it('should return a 200 status code', async (context) => {
+		const response = await context.request.get('/' satisfies Match<RouteId>);
+		expect(response.status).toBe(200);
+	});
+});

package/templates/minimal/src/routes/+error.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { page } from '$app/state';
+	import { Button } from '$lib/components/ui/button';
+	import RootLayout from './(public)/root-layout.svelte';
+
+	let { data } = $props();
+</script>
+
+<RootLayout {data}>
+	<main class="mx-auto max-w-7xl px-4 w-full flex items-center justify-center">
+		<div class="text-center space-y-4">
+			<div class="text-9xl font-bold text-primary">
+				{page.status}
+			</div>
+			<div class="relative">
+				<h1 class="text-4xl font-bold relative inline-block bg-background">
+					Oops! Something went wrong
+				</h1>
+			</div>
+			<p class="text-xl text-muted-foreground max-w-lg mx-auto">
+				{page.error?.message ||
+					"We couldn't find what you were looking for. Let's get you back on track!"}
+			</p>
+			<div>
+				<Button href="/" variant="default" size="lg">Take me home</Button>
+			</div>
+		</div>
+	</main>
+</RootLayout>

package/templates/minimal/src/routes/+layout.server.ts

@@ -0,0 +1,30 @@
+import { loadFlash } from 'sveltekit-flash-message/server';
+import { defineBaseMetaTags } from 'svelte-meta-tags';
+
+export const load = loadFlash(async ({ locals, url }) => {
+	const canonical = new URL(url.pathname, url.origin).href;
+
+	const baseTags = defineBaseMetaTags({
+		title: '',
+		titleTemplate: `%s | ${locals.meta.appName}`,
+		description: '',
+		canonical,
+		openGraph: {
+			type: 'website',
+			url: canonical,
+			images: [
+				{
+					url: `${locals.meta.appURL}/og.jpg`,
+					alt: locals.meta.appName,
+					width: 1200,
+					height: 630
+				}
+			]
+		}
+	});
+
+	return {
+		meta: locals.meta,
+		...baseTags
+	};
+});

package/templates/minimal/src/routes/+layout.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import '../app.css';
+
+	import favicon from '$lib/assets/favicon.svg';
+
+	import { ModeWatcher } from 'mode-watcher';
+	import { getFlash } from 'sveltekit-flash-message';
+	import { toast } from 'svelte-sonner';
+	import { page } from '$app/state';
+	import { Toaster } from '$lib/components/ui/sonner';
+	import { MetaTags, deepMerge } from 'svelte-meta-tags';
+
+	let { data, children } = $props();
+	const flash = getFlash(page);
+
+	$effect(() => {
+		if (!$flash || $flash.type !== 'toast') {
+			return;
+		}
+
+		toast.message($flash.message);
+
+		$flash = undefined;
+	});
+
+	let metaTags = $derived(deepMerge(data.baseMetaTags, page.data.pageMetaTags));
+</script>
+
+<svelte:head>
+	<title>{data.meta.appName}</title>
+	<link rel="icon" href={favicon} />
+</svelte:head>
+
+<MetaTags {...metaTags} />
+<ModeWatcher />
+<Toaster />
+
+{@render children?.()}

package/templates/minimal/src/routes/api/README.md

@@ -0,0 +1,26 @@
+# API Routes
+
+If API is enabled in hooks.server.ts, the PocketBase API is exposed on the API URL:
+
+```
+export const handle = handlePocketbase({
+	pocketbaseUrl: POCKETBASE_URL,
+	superuserEmail: POCKETBASE_SUPERUSER_EMAIL,
+	superuserPassword: POCKETBASE_SUPERUSER_PASSWORD,
+	api: { enabled: true }
+});
+```
+
+The following PocketBase routes are exposed:
+
+    /api/batch
+    /api/collections
+    /api/realtime
+    /api/files
+    /api/settings
+    /api/logs
+    /api/crons
+    /api/backups
+    /api/health
+
+Any other routes added to the `src/routes/api` directory are handled by SvelteKit as normal routes.

package/templates/minimal/static/robots.txt

@@ -0,0 +1,3 @@
+# allow crawling everything by default
+User-agent: *
+Disallow:

package/templates/minimal/template.json

@@ -0,0 +1,4 @@
+{
+	"description": "SvelteKit with a PocketBase backend, wired up and migrated",
+	"backend": true
+}

package/templates/minimal/test/setup.ts

@@ -0,0 +1,46 @@
+import { beforeEach, afterEach, beforeAll } from 'vitest';
+import supertest, { type Agent } from 'supertest';
+import PocketBase from 'pocketbase-sveltekit';
+import type { TestContext } from '@velastack/pocketbase';
+
+const admin = new PocketBase(process.env.POCKETBASE_URL!) as App.Locals['admin'];
+const pb = new PocketBase(process.env.POCKETBASE_URL!) as App.Locals['pb'];
+
+const testUserPassword = 'password';
+
+async function authenticateUser(agent: Agent, user: { email: string }) {
+	await agent.post('/login').type('form').send({
+		type: 'password',
+		email: user.email,
+		password: testUserPassword
+	});
+}
+
+beforeAll(async () => {
+	await admin
+		// @ts-ignore
+		.collection('_superusers')
+		.authWithPassword(
+			process.env.POCKETBASE_SUPERUSER_EMAIL!,
+			process.env.POCKETBASE_SUPERUSER_PASSWORD!
+		);
+});
+
+beforeEach(async (context: TestContext) => {
+	context.request = supertest(process.env.VITE_TEST_URL!);
+	context.agent = supertest.agent(process.env.VITE_TEST_URL!) as TestContext['agent'];
+	context.admin = admin;
+	context.pb = pb;
+	context.user = await context.admin.collection('users').create({
+		email: `test-${Math.random().toString(36).slice(2)}@example.com`,
+		password: testUserPassword,
+		passwordConfirm: testUserPassword
+	});
+	context.agent.authenticateUser = () => authenticateUser(context.agent, context.user);
+	await context.pb.collection('users').authWithPassword(context.user.email, testUserPassword);
+});
+
+afterEach(async (context: TestContext) => {
+	await context.pb.authStore.clear();
+	await context.admin.collection('users').delete(context.user.id);
+});

package/templates/minimal/tsconfig.json

@@ -0,0 +1,15 @@
+{
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"rewriteRelativeImportExtensions": true,
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true,
+		"moduleResolution": "bundler"
+	}
+}

package/templates/minimal/vite.config.ts

@@ -0,0 +1,17 @@
+import { defineConfig } from 'vite';
+import tailwindcss from '@tailwindcss/vite';
+import { sveltekit } from '@sveltejs/kit/vite';
+import adapter from '@sveltejs/adapter-auto';
+
+export default defineConfig({
+	plugins: [
+		tailwindcss(),
+		sveltekit({
+			compilerOptions: {
+				runes: ({ filename }) =>
+					filename.split(/[/\\]/).includes('node_modules') ? undefined : true
+			},
+			adapter: adapter()
+		})
+	]
+});

package/templates/minimal/vitest.config.ts

@@ -0,0 +1,15 @@
+import { defineConfig, mergeConfig } from 'vitest/config';
+import viteConfig from './vite.config';
+
+export default mergeConfig(
+	viteConfig,
+	defineConfig({
+		test: {
+			name: 'server',
+			environment: 'node',
+			include: ['src/**/*.{test,spec}.{js,ts}'],
+			exclude: ['src/**/*.svelte.{test,spec}.{js,ts}'],
+			setupFiles: ['test/setup.ts']
+		}
+	})
+);

package/templates/static/.ignore

@@ -0,0 +1,3 @@
+package.json
+.meta.json
+.turbo

package/templates/static/.prettierignore

@@ -0,0 +1,9 @@
+# Package Managers
+package-lock.json
+pnpm-lock.yaml
+yarn.lock
+bun.lock
+bun.lockb
+
+# Miscellaneous
+/static/

package/templates/static/.prettierrc

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

package/templates/static/.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+	"recommendations": ["svelte.svelte-vscode", "bradlc.vscode-tailwindcss"]
+}

package/templates/static/.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+	"files.associations": {
+		"*.css": "tailwindcss"
+	}
+}

package/templates/static/_gitignore

@@ -0,0 +1,23 @@
+node_modules
+
+# Output
+.output
+.vercel
+.netlify
+.wrangler
+/.svelte-kit
+/build
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Env
+.env
+.env.*
+!.env.example
+!.env.test
+
+# Vite
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*

package/templates/static/_npmrc

@@ -0,0 +1 @@
+engine-strict=true

package/templates/static/components.json

@@ -0,0 +1,16 @@
+{
+	"$schema": "https://shadcn-svelte.com/schema.json",
+	"tailwind": {
+		"css": "src/app.css",
+		"baseColor": "slate"
+	},
+	"aliases": {
+		"components": "$lib/components",
+		"utils": "$lib/utils",
+		"ui": "$lib/components/ui",
+		"hooks": "$lib/hooks",
+		"lib": "$lib"
+	},
+	"typescript": true,
+	"registry": "https://shadcn-svelte.com/registry"
+}

package/templates/static/package.template.json

@@ -0,0 +1,44 @@
+{
+	"name": "~TODO~",
+	"private": true,
+	"version": "0.0.1",
+	"type": "module",
+	"engines": {
+		"node": "^20.19.0 || >=22.12.0"
+	},
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"preview": "vite preview",
+		"prepare": "svelte-kit sync || echo \"\"",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"lint": "prettier --check .",
+		"format": "prettier --write ."
+	},
+	"devDependencies": {
+		"@lucide/svelte": "^1.8.0",
+		"@sveltejs/adapter-static": "^3.0.10",
+		"@sveltejs/kit": "^2.63.0",
+		"@sveltejs/vite-plugin-svelte": "^7.1.2",
+		"@tailwindcss/forms": "^0.5.11",
+		"@tailwindcss/typography": "^0.5.19",
+		"@tailwindcss/vite": "^4.3.0",
+		"clsx": "^2.1.1",
+		"mode-watcher": "^1.1.0",
+		"prettier": "^3.9.6",
+		"prettier-plugin-svelte": "^4.1.1",
+		"shadcn-svelte": "^1.2.7",
+		"svelte": "^5.56.10",
+		"svelte-check": "^4.6.0",
+		"svelte-meta-tags": "^4.6.0",
+		"svelte-sonner": "^1.1.0",
+		"tailwind-merge": "^3.5.0",
+		"tailwind-variants": "^3.2.2",
+		"tailwindcss": "^4.3.0",
+		"tw-animate-css": "^1.3.5",
+		"typescript": "^6.0.3",
+		"vela": "^~VELA_VERSION~",
+		"vite": "^8.0.16"
+	}
+}