vela 0.1.0 → 0.9.0

package/package.json

@@ -1,19 +1,87 @@
 {
-  "name": "vela",
-  "version": "0.1.0",
-  "description": "",
-  "main": "src/index.js",
-  "scripts": {
-    "test": "npm test"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/jinzhubaofu/vela.git"
-  },
-  "author": "ludafa@outlook.com",
-  "license": "ISC",
-  "bugs": {
-    "url": "https://github.com/jinzhubaofu/vela/issues"
-  },
-  "homepage": "https://github.com/jinzhubaofu/vela#readme"
+	"name": "vela",
+	"version": "0.9.0",
+	"type": "module",
+	"description": "A CLI for creating and updating SvelteKit projects",
+	"license": "MIT",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/velastack/vela.git"
+	},
+	"homepage": "https://velastack.dev",
+	"engines": {
+		"node": ">=20"
+	},
+	"bin": {
+		"vela": "./dist/bin.js",
+		"velastack": "./dist/bin.js"
+	},
+	"files": [
+		"dist",
+		"templates"
+	],
+	"scripts": {
+		"build": "node --experimental-strip-types scripts/build.ts",
+		"dev": "node --experimental-strip-types scripts/build.ts --watch",
+		"clean": "rm -rf dist",
+		"lint": "npm run lint:ts && npm run lint:format",
+		"lint:ts": "tsc --noEmit",
+		"lint:format": "prettier --check .",
+		"format": "prettier --write .",
+		"test": "vitest run",
+		"prepare": "npm run build"
+	},
+	"dependencies": {
+		"@clack/prompts": "^1.7.0",
+		"@faker-js/faker": "^10.6.0",
+		"@velastack/patterns": "^0.0.60",
+		"@velastack/pocketbase": "^0.0.55",
+		"annotate-json-schema": "^0.1.0",
+		"commander": "^13.1.0",
+		"cross-spawn": "^7.0.6",
+		"dedent": "^1.7.2",
+		"dotenv": "^17.4.2",
+		"fetch-cookie": "^3.2.0",
+		"json-schema-faker": "^0.6.3",
+		"magic-string": "^0.30.21",
+		"package-manager-detector": "^1.8.0",
+		"picocolors": "^1.1.1",
+		"pocketbase": "^0.28.0",
+		"pocketbase-server": "^0.39.11",
+		"stripe": "^19.3.0",
+		"svelte": "^5.56.10",
+		"tinyexec": "^1.3.0",
+		"ts-morph": "^28.0.0",
+		"valibot": "^1.4.2"
+	},
+	"devDependencies": {
+		"@types/cross-spawn": "^6.0.6",
+		"@types/node": "^22.0.0",
+		"esbuild": "^0.28.2",
+		"prettier": "^3.9.6",
+		"typescript": "^5.6.0",
+		"vite": "^8.2.2",
+		"vitest": "^4.1.11"
+	},
+	"peerDependencies": {
+		"@sveltejs/kit": "^2.57.1",
+		"vite": "^8.0.8"
+	},
+	"peerDependenciesMeta": {
+		"@sveltejs/kit": {
+			"optional": true
+		},
+		"vite": {
+			"optional": true
+		}
+	},
+	"keywords": [
+		"svelte",
+		"sveltekit",
+		"velastack",
+		"pocketbase",
+		"cli",
+		"starter",
+		"template"
+	]
 }

package/templates/minimal/.ignore

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

package/templates/minimal/.prettierignore

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

package/templates/minimal/.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/minimal/.vscode/extensions.json

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

package/templates/minimal/.vscode/settings.json

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

package/templates/minimal/_gitignore

@@ -0,0 +1,30 @@
+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-*
+
+# PocketBase
+/data/*
+!/data/fixtures
+!/data/seeds
+!/data/hooks
+

package/templates/minimal/_npmrc

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

package/templates/minimal/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/minimal/data/fixtures/README.md

@@ -0,0 +1 @@
+Sample data for development

package/templates/minimal/data/hooks/README.md

@@ -0,0 +1,3 @@
+# Hooks
+
+Add \*.pb.js hooks here to extend PocketBase: https://pocketbase.io/docs/js-overview/

package/templates/minimal/data/seeds/README.md

@@ -0,0 +1 @@
+Essential system-level data (e.g., roles, locales)

package/templates/minimal/package.template.json

@@ -0,0 +1,54 @@
+{
+	"name": "~TODO~",
+	"private": true,
+	"version": "0.0.1",
+	"type": "module",
+	"engines": {
+		"node": "^20.19.0 || >=22.12.0"
+	},
+	"scripts": {
+		"dev": "vela dev",
+		"build": "vela build",
+		"preview": "vela preview",
+		"prepare": "svelte-kit sync && vela sync || echo ''",
+		"check": "svelte-kit sync && vela sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && vela sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"lint": "prettier --check .",
+		"format": "prettier --write .",
+		"test:server": "vela test:server"
+	},
+	"devDependencies": {
+		"@lucide/svelte": "^1.8.0",
+		"@sveltejs/adapter-auto": "^7.0.1",
+		"@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",
+		"@types/supertest": "^6.0.3",
+		"@velastack/pocketbase": "^0.0.55",
+		"clsx": "^2.1.1",
+		"formsnap": "^2.0.1",
+		"mode-watcher": "^1.1.0",
+		"pocketbase-sveltekit": "^0.28.0",
+		"prettier": "^3.9.6",
+		"prettier-plugin-svelte": "^4.1.1",
+		"shadcn-svelte": "^1.2.7",
+		"supertest": "^7.2.2",
+		"svelte": "^5.56.10",
+		"svelte-check": "^4.6.0",
+		"svelte-meta-tags": "^4.6.0",
+		"svelte-sonner": "^1.1.0",
+		"sveltekit-flash-message": "^2.4.6",
+		"sveltekit-superforms": "^2.30.2",
+		"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",
+		"vitest": "^4.1.8",
+		"zod": "^4.1.11"
+	}
+}

package/templates/minimal/src/app.css

@@ -0,0 +1,121 @@
+@import 'tailwindcss';
+@import 'tw-animate-css';
+@plugin '@tailwindcss/typography';
+
+@custom-variant dark (&:is(.dark *));
+
+:root {
+	--radius: 0.625rem;
+	--background: oklch(1 0 0);
+	--foreground: oklch(0.129 0.042 264.695);
+	--card: oklch(1 0 0);
+	--card-foreground: oklch(0.129 0.042 264.695);
+	--popover: oklch(1 0 0);
+	--popover-foreground: oklch(0.129 0.042 264.695);
+	--primary: oklch(0.208 0.042 265.755);
+	--primary-foreground: oklch(0.984 0.003 247.858);
+	--secondary: oklch(0.968 0.007 247.896);
+	--secondary-foreground: oklch(0.208 0.042 265.755);
+	--muted: oklch(0.968 0.007 247.896);
+	--muted-foreground: oklch(0.554 0.046 257.417);
+	--accent: oklch(0.968 0.007 247.896);
+	--accent-foreground: oklch(0.208 0.042 265.755);
+	--destructive: oklch(0.577 0.245 27.325);
+	--border: oklch(0.929 0.013 255.508);
+	--input: oklch(0.929 0.013 255.508);
+	--ring: oklch(0.704 0.04 256.788);
+	--chart-1: oklch(0.646 0.222 41.116);
+	--chart-2: oklch(0.6 0.118 184.704);
+	--chart-3: oklch(0.398 0.07 227.392);
+	--chart-4: oklch(0.828 0.189 84.429);
+	--chart-5: oklch(0.769 0.188 70.08);
+	--sidebar: oklch(0.984 0.003 247.858);
+	--sidebar-foreground: oklch(0.129 0.042 264.695);
+	--sidebar-primary: oklch(0.208 0.042 265.755);
+	--sidebar-primary-foreground: oklch(0.984 0.003 247.858);
+	--sidebar-accent: oklch(0.968 0.007 247.896);
+	--sidebar-accent-foreground: oklch(0.208 0.042 265.755);
+	--sidebar-border: oklch(0.929 0.013 255.508);
+	--sidebar-ring: oklch(0.704 0.04 256.788);
+}
+
+.dark {
+	--background: oklch(0.129 0.042 264.695);
+	--foreground: oklch(0.984 0.003 247.858);
+	--card: oklch(0.208 0.042 265.755);
+	--card-foreground: oklch(0.984 0.003 247.858);
+	--popover: oklch(0.208 0.042 265.755);
+	--popover-foreground: oklch(0.984 0.003 247.858);
+	--primary: oklch(0.929 0.013 255.508);
+	--primary-foreground: oklch(0.208 0.042 265.755);
+	--secondary: oklch(0.279 0.041 260.031);
+	--secondary-foreground: oklch(0.984 0.003 247.858);
+	--muted: oklch(0.279 0.041 260.031);
+	--muted-foreground: oklch(0.704 0.04 256.788);
+	--accent: oklch(0.279 0.041 260.031);
+	--accent-foreground: oklch(0.984 0.003 247.858);
+	--destructive: oklch(0.704 0.191 22.216);
+	--border: oklch(1 0 0 / 10%);
+	--input: oklch(1 0 0 / 15%);
+	--ring: oklch(0.551 0.027 264.364);
+	--chart-1: oklch(0.488 0.243 264.376);
+	--chart-2: oklch(0.696 0.17 162.48);
+	--chart-3: oklch(0.769 0.188 70.08);
+	--chart-4: oklch(0.627 0.265 303.9);
+	--chart-5: oklch(0.645 0.246 16.439);
+	--sidebar: oklch(0.208 0.042 265.755);
+	--sidebar-foreground: oklch(0.984 0.003 247.858);
+	--sidebar-primary: oklch(0.488 0.243 264.376);
+	--sidebar-primary-foreground: oklch(0.984 0.003 247.858);
+	--sidebar-accent: oklch(0.279 0.041 260.031);
+	--sidebar-accent-foreground: oklch(0.984 0.003 247.858);
+	--sidebar-border: oklch(1 0 0 / 10%);
+	--sidebar-ring: oklch(0.551 0.027 264.364);
+}
+
+@theme inline {
+	--radius-sm: calc(var(--radius) - 4px);
+	--radius-md: calc(var(--radius) - 2px);
+	--radius-lg: var(--radius);
+	--radius-xl: calc(var(--radius) + 4px);
+	--color-background: var(--background);
+	--color-foreground: var(--foreground);
+	--color-card: var(--card);
+	--color-card-foreground: var(--card-foreground);
+	--color-popover: var(--popover);
+	--color-popover-foreground: var(--popover-foreground);
+	--color-primary: var(--primary);
+	--color-primary-foreground: var(--primary-foreground);
+	--color-secondary: var(--secondary);
+	--color-secondary-foreground: var(--secondary-foreground);
+	--color-muted: var(--muted);
+	--color-muted-foreground: var(--muted-foreground);
+	--color-accent: var(--accent);
+	--color-accent-foreground: var(--accent-foreground);
+	--color-destructive: var(--destructive);
+	--color-border: var(--border);
+	--color-input: var(--input);
+	--color-ring: var(--ring);
+	--color-chart-1: var(--chart-1);
+	--color-chart-2: var(--chart-2);
+	--color-chart-3: var(--chart-3);
+	--color-chart-4: var(--chart-4);
+	--color-chart-5: var(--chart-5);
+	--color-sidebar: var(--sidebar);
+	--color-sidebar-foreground: var(--sidebar-foreground);
+	--color-sidebar-primary: var(--sidebar-primary);
+	--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+	--color-sidebar-accent: var(--sidebar-accent);
+	--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+	--color-sidebar-border: var(--sidebar-border);
+	--color-sidebar-ring: var(--sidebar-ring);
+}
+
+@layer base {
+	* {
+		@apply border-border outline-ring/50;
+	}
+	body {
+		@apply bg-background text-foreground;
+	}
+}

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

@@ -0,0 +1,19 @@
+// See https://svelte.dev/docs/kit/types#app.d.ts
+// for information about these interfaces
+declare global {
+	namespace App {
+		// interface Error {}
+		// interface Locals {}
+		// interface PageData {}
+		// interface PageState {}
+		// interface Platform {}
+	}
+	namespace Superforms {
+		type Message = {
+			type: 'error' | 'success';
+			text: string;
+		};
+	}
+}
+
+export {};

package/templates/minimal/src/app.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<meta name="text-scale" content="scale" />
+		%sveltekit.head%
+	</head>
+
+	<body class="min-h-dvh" data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>

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

@@ -0,0 +1,8 @@
+import { env } from '$env/dynamic/private';
+import { handlePocketbase } from '@velastack/pocketbase';
+
+export const handle = handlePocketbase({
+	pocketbaseUrl: env.POCKETBASE_URL,
+	superuserEmail: env.POCKETBASE_SUPERUSER_EMAIL,
+	superuserPassword: env.POCKETBASE_SUPERUSER_PASSWORD
+});

package/templates/minimal/src/lib/assets/favicon.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="15.87 6.75 78.15 98.88">
+    <style>
+        path {
+          fill: #00B2FF;
+        }
+      </style>
+    <path d="M42.18 99.49c-4.02.83-8.35 1.51-9.62 1.51-2.31 0-2.31 0-.98-6.25 5.2-24.38 1.05-54.7-10.67-78.03L15.9 6.75l3.96 3.14C36.8 23.31 50.44 47.8 53.48 70.25c.35 2.61 1.03 4.75 1.51 4.75 1.49 0 15.24-15.72 20.72-23.68C82.96 40.79 85.76 35.2 90.14 22.5c4.36-12.65 4.79-11.3 2.41 7.54-4.23 33.45-16.49 54.96-37.05 65-3.3 1.61-9.29 3.61-13.32 4.45Zm40.32 3.55c-5.66 1.8-9.87 2.28-22 2.54-14.05.29-23.95-.66-25.8-2.49-.44-.44 2.26-1.08 6-1.43 10.68-1 21.43-5.62 30.97-13.3L75.84 85l2.12 3.43c2.52 4.09 8.06 9.12 11.07 10.08 3.01.96 1.58 1.95-6.53 4.53Z"/>
+</svg>

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

@@ -0,0 +1,80 @@
+<script lang="ts" module>
+	import { cn, type WithElementRef } from '$lib/utils';
+	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
+	import { type VariantProps, tv } from 'tailwind-variants';
+
+	export const buttonVariants = tv({
+		base: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium outline-none transition-all focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		variants: {
+			variant: {
+				default: 'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
+				destructive:
+					'bg-destructive shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 text-white',
+				outline:
+					'bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 border',
+				secondary: 'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
+				ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+				link: 'text-primary underline-offset-4 hover:underline'
+			},
+			size: {
+				default: 'h-9 px-4 py-2 has-[>svg]:px-3',
+				sm: 'h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5',
+				lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
+				icon: 'size-9'
+			}
+		},
+		defaultVariants: {
+			variant: 'default',
+			size: 'default'
+		}
+	});
+
+	export type ButtonVariant = VariantProps<typeof buttonVariants>['variant'];
+	export type ButtonSize = VariantProps<typeof buttonVariants>['size'];
+
+	export type ButtonProps = WithElementRef<HTMLButtonAttributes> &
+		WithElementRef<HTMLAnchorAttributes> & {
+			variant?: ButtonVariant;
+			size?: ButtonSize;
+		};
+</script>
+
+<script lang="ts">
+	let {
+		class: className,
+		variant = 'default',
+		size = 'default',
+		ref = $bindable(null),
+		href = undefined,
+		type = 'button',
+		disabled,
+		children,
+		...restProps
+	}: ButtonProps = $props();
+</script>
+
+{#if href}
+	<a
+		bind:this={ref}
+		data-slot="button"
+		class={cn(buttonVariants({ variant, size }), className)}
+		href={disabled ? undefined : href}
+		aria-disabled={disabled}
+		role={disabled ? 'link' : undefined}
+		tabindex={disabled ? -1 : undefined}
+		{...restProps}
+	>
+		{@render children?.()}
+	</a>
+{:else}
+	<button
+		bind:this={ref}
+		data-slot="button"
+		class={cn(buttonVariants({ variant, size }), className)}
+		{type}
+		{disabled}
+		{...restProps}
+	>
+		{@render children?.()}
+	</button>
+{/if}

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

@@ -0,0 +1,17 @@
+import Root, {
+	type ButtonProps,
+	type ButtonSize,
+	type ButtonVariant,
+	buttonVariants
+} from './button.svelte';
+
+export {
+	Root,
+	type ButtonProps as Props,
+	//
+	Root as Button,
+	buttonVariants,
+	type ButtonProps,
+	type ButtonSize,
+	type ButtonVariant
+};

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

@@ -0,0 +1,11 @@
+import Root from './navbar.svelte';
+import Logo from './navbar-logo.svelte';
+import List from './navbar-list.svelte';
+import MobileToggle from './navbar-mobile-toggle.svelte';
+import Item from './navbar-item.svelte';
+import Mode from './navbar-mode.svelte';
+import Link from './navbar-link.svelte';
+import Brand from './navbar-brand.svelte';
+import BrandName from './navbar-brandname.svelte';
+
+export { Root, Root as Navbar, Logo, List, MobileToggle, Item, Mode, Link, Brand, BrandName };

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

@@ -0,0 +1,8 @@
+<script lang="ts">
+	import { cn } from '$lib/utils';
+	let { href, children, class: className = '' } = $props();
+</script>
+
+<a {href} class={cn('flex items-center space-x-3 rtl:space-x-reverse', className)}>
+	{@render children?.()}
+</a>

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

@@ -0,0 +1,8 @@
+<script lang="ts">
+	import { cn } from '$lib/utils.js';
+	let { children, class: className = '' } = $props();
+</script>
+
+<span class={cn('self-center text-2xl font-semibold whitespace-nowrap dark:text-white', className)}>
+	{@render children?.()}
+</span>

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

@@ -0,0 +1,6 @@
+<script lang="ts">
+	import { cn } from '$lib/utils.js';
+	let { children = undefined, class: className = '' } = $props();
+</script>
+
+<li class={cn('flex items-center', className)}>{@render children?.()}</li>

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

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { cn } from '$lib/utils.js';
+	let { href, children, class: className = '' } = $props();
+</script>
+
+<a
+	{href}
+	class={cn(
+		'block py-2 px-3 text-white bg-blue-700 rounded-sm md:bg-transparent md:text-blue-700 md:p-0 dark:text-white md:dark:text-blue-500',
+		className
+	)}
+	aria-current="page">{@render children?.()}</a
+>

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

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { cn } from '$lib/utils.js';
+	import { getContext } from 'svelte';
+	import { MOBILE_MENU_CONTEXT_KEY, type MobileMenuContext } from './navbar-store';
+
+	let { children, class: className = '' } = $props();
+
+	const { menuOpen } = getContext<MobileMenuContext>(MOBILE_MENU_CONTEXT_KEY);
+</script>
+
+<div
+	class={cn('hidden w-full md:block md:w-auto', className, menuOpen.isOpen && 'block')}
+	id="navbar-default"
+>
+	<ul
+		class={cn(
+			'font-medium flex flex-col p-2 md:p-0 mt-4 border rounded-lg bg-card md:flex-row md:space-x-4 rtl:space-x-reverse md:mt-0 md:border-0 md:bg-transparent'
+		)}
+	>
+		{@render children?.()}
+	</ul>
+</div>

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

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import { cn } from '$lib/utils.js';
+	let {
+		src = 'https://upload.wikimedia.org/wikipedia/commons/1/1b/Svelte_Logo.svg',
+		alt = 'Logo',
+		class: className = ''
+	} = $props();
+</script>
+
+<img {src} class={cn('h-8', className)} {alt} />

package/templates/minimal/src/lib/components/ui/navbar/navbar-mobile-toggle.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { getContext } from 'svelte';
+	import { Button } from '$lib/components/ui/button';
+	import MenuIcon from '@lucide/svelte/icons/menu';
+	import { MOBILE_MENU_CONTEXT_KEY, type MobileMenuContext } from './navbar-store';
+
+	const { toggleMenu } = getContext<MobileMenuContext>(MOBILE_MENU_CONTEXT_KEY);
+</script>
+
+<Button
+	type="button"
+	aria-controls="navbar-default"
+	aria-expanded="false"
+	variant="ghost"
+	class="md:hidden"
+	onclick={toggleMenu}
+>
+	<span class="sr-only">Open main menu</span>
+	<MenuIcon class="size-6" />
+</Button>

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

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import SunIcon from '@lucide/svelte/icons/sun';
+	import MoonIcon from '@lucide/svelte/icons/moon';
+</script>
+
+<SunIcon
+	class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 !transition-all dark:-rotate-90 dark:scale-0"
+/>
+<MoonIcon
+	class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 !transition-all dark:rotate-0 dark:scale-100"
+/>
+<span class="sr-only">Toggle theme</span>