vela 0.10.13 → 0.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "vela",
-	"version": "0.10.13",
+	"version": "0.11.0",
 	"type": "module",
 	"description": "A CLI for creating and updating SvelteKit projects",
 	"license": "MIT",
@@ -34,7 +34,7 @@
 	"dependencies": {
 		"@clack/prompts": "^1.7.0",
 		"@faker-js/faker": "^10.6.0",
-		"@velastack/patterns": "^0.1.9",
+		"@velastack/patterns": "^0.2.2",
 		"@velastack/pocketbase-codegen": "^0.1.0",
 		"annotate-json-schema": "^0.1.0",
 		"commander": "^13.1.0",

package/templates/minimal/components.json

@@ -1,8 +1,9 @@
 {
 	"$schema": "https://shadcn-svelte.com/schema.json",
+	"style": "vega",
 	"tailwind": {
 		"css": "src/app.css",
-		"baseColor": "slate"
+		"baseColor": "neutral"
 	},
 	"aliases": {
 		"components": "$lib/components",
@@ -12,5 +13,6 @@
 		"lib": "$lib"
 	},
 	"typescript": true,
-	"registry": "https://shadcn-svelte.com/registry"
+	"registry": "https://shadcn-svelte.com/registry",
+	"iconLibrary": "lucide"
 }

package/templates/minimal/package.template.json

@@ -15,13 +15,14 @@
 		"test:server": "vela test:server"
 	},
 	"devDependencies": {
-		"@lucide/svelte": "^1.8.0",
+		"@lucide/svelte": "^1.40.0",
 		"@sveltejs/adapter-auto": "^7.0.1",
 		"@sveltejs/kit": "^2.70.3",
 		"@sveltejs/vite-plugin-svelte": "^7.3.0",
 		"@tailwindcss/forms": "^0.5.11",
 		"@tailwindcss/typography": "^0.5.19",
 		"@tailwindcss/vite": "^4.3.3",
+		"@types/node": "^26.4.1",
 		"@types/supertest": "^6.0.3",
 		"@velastack/kit": "^0.3.0",
 		"@velastack/pocketbase": "^0.2.2",
@@ -31,7 +32,7 @@
 		"pocketbase-sveltekit": "^0.28.0",
 		"prettier": "^3.9.6",
 		"prettier-plugin-svelte": "^4.1.1",
-		"shadcn-svelte": "^1.2.7",
+		"shadcn-svelte": "^1.6.0",
 		"supertest": "^7.2.2",
 		"svelte": "^5.56.10",
 		"svelte-check": "^4.6.0",
@@ -40,7 +41,7 @@
 		"sveltekit-flash-message": "^2.4.6",
 		"sveltekit-superforms": "^2.30.2",
 		"tailwind-merge": "^3.5.0",
-		"tailwind-variants": "^3.2.2",
+		"tailwind-variants": "^3.3.0",
 		"tailwindcss": "^4.3.3",
 		"tw-animate-css": "^1.3.5",
 		"typescript": "^6.0.3",
@@ -48,5 +49,8 @@
 		"vite": "^8.2.2",
 		"vitest": "^4.1.11",
 		"zod": "^4.1.11"
+	},
+	"overrides": {
+		"vitest": "^4.1.11"
 	}
 }

package/templates/minimal/src/app.css

@@ -1,5 +1,6 @@
 @import 'tailwindcss';
 @import 'tw-animate-css';
+@import 'shadcn-svelte/tailwind.css';
 @plugin '@tailwindcss/typography';
 
 @custom-variant dark (&:is(.dark *));
@@ -7,70 +8,70 @@
 :root {
 	--radius: 0.625rem;
 	--background: oklch(1 0 0);
-	--foreground: oklch(0.129 0.042 264.695);
+	--foreground: oklch(0.145 0 0);
 	--card: oklch(1 0 0);
-	--card-foreground: oklch(0.129 0.042 264.695);
+	--card-foreground: oklch(0.145 0 0);
 	--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);
+	--popover-foreground: oklch(0.145 0 0);
+	--primary: oklch(0.205 0 0);
+	--primary-foreground: oklch(0.985 0 0);
+	--secondary: oklch(0.97 0 0);
+	--secondary-foreground: oklch(0.205 0 0);
+	--muted: oklch(0.97 0 0);
+	--muted-foreground: oklch(0.556 0 0);
+	--accent: oklch(0.97 0 0);
+	--accent-foreground: oklch(0.205 0 0);
 	--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);
+	--border: oklch(0.922 0 0);
+	--input: oklch(0.922 0 0);
+	--ring: oklch(0.708 0 0);
+	--chart-1: oklch(0.87 0 0);
+	--chart-2: oklch(0.556 0 0);
+	--chart-3: oklch(0.439 0 0);
+	--chart-4: oklch(0.371 0 0);
+	--chart-5: oklch(0.269 0 0);
+	--sidebar: oklch(0.985 0 0);
+	--sidebar-foreground: oklch(0.145 0 0);
+	--sidebar-primary: oklch(0.205 0 0);
+	--sidebar-primary-foreground: oklch(0.985 0 0);
+	--sidebar-accent: oklch(0.97 0 0);
+	--sidebar-accent-foreground: oklch(0.205 0 0);
+	--sidebar-border: oklch(0.922 0 0);
+	--sidebar-ring: oklch(0.708 0 0);
 }
 
 .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);
+	--background: oklch(0.145 0 0);
+	--foreground: oklch(0.985 0 0);
+	--card: oklch(0.205 0 0);
+	--card-foreground: oklch(0.985 0 0);
+	--popover: oklch(0.205 0 0);
+	--popover-foreground: oklch(0.985 0 0);
+	--primary: oklch(0.922 0 0);
+	--primary-foreground: oklch(0.205 0 0);
+	--secondary: oklch(0.269 0 0);
+	--secondary-foreground: oklch(0.985 0 0);
+	--muted: oklch(0.269 0 0);
+	--muted-foreground: oklch(0.708 0 0);
+	--accent: oklch(0.269 0 0);
+	--accent-foreground: oklch(0.985 0 0);
 	--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);
+	--ring: oklch(0.556 0 0);
+	--chart-1: oklch(0.87 0 0);
+	--chart-2: oklch(0.556 0 0);
+	--chart-3: oklch(0.439 0 0);
+	--chart-4: oklch(0.371 0 0);
+	--chart-5: oklch(0.269 0 0);
+	--sidebar: oklch(0.205 0 0);
+	--sidebar-foreground: oklch(0.985 0 0);
 	--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-primary-foreground: oklch(0.985 0 0);
+	--sidebar-accent: oklch(0.269 0 0);
+	--sidebar-accent-foreground: oklch(0.985 0 0);
 	--sidebar-border: oklch(1 0 0 / 10%);
-	--sidebar-ring: oklch(0.551 0.027 264.364);
+	--sidebar-ring: oklch(0.556 0 0);
 }
 
 @theme inline {
@@ -109,6 +110,9 @@
 	--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
 	--color-sidebar-border: var(--sidebar-border);
 	--color-sidebar-ring: var(--sidebar-ring);
+	--radius-2xl: calc(var(--radius) * 1.8);
+	--radius-3xl: calc(var(--radius) * 2.2);
+	--radius-4xl: calc(var(--radius) * 2.6);
 }
 
 @layer base {

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

@@ -1,26 +1,35 @@
 <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';
+	import { cn, type WithElementRef } from '$lib/utils.js';
+	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
 
 	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",
+		base: "rounded-md border border-transparent bg-clip-padding text-sm font-medium focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&_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',
+				default: 'bg-primary text-primary-foreground hover:bg-primary/80',
 				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',
+					'border-border bg-background shadow-xs hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50',
+				secondary:
+					'bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground',
+				ghost:
+					'hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50',
+				destructive:
+					'bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40',
 				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'
+				default:
+					'h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
+				xs: "h-6 gap-1 rounded-[min(var(--radius-md),8px)] px-2 text-xs in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+				sm: 'h-8 gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5',
+				lg: 'h-10 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
+				icon: 'size-9',
+				'icon-xs':
+					"size-6 rounded-[min(var(--radius-md),8px)] in-data-[slot=button-group]:rounded-md [&_svg:not([class*='size-'])]:size-3",
+				'icon-sm':
+					'size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-md',
+				'icon-lg': 'size-10'
 			}
 		},
 		defaultVariants: {

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

@@ -1,6 +1,11 @@
 <script lang="ts">
-	import { Toaster as Sonner, type ToasterProps as SonnerProps } from 'svelte-sonner';
 	import { mode } from 'mode-watcher';
+	import { Toaster as Sonner, type ToasterProps as SonnerProps } from 'svelte-sonner';
+	import Loader2Icon from '@lucide/svelte/icons/loader-2';
+	import CircleCheckIcon from '@lucide/svelte/icons/circle-check';
+	import OctagonXIcon from '@lucide/svelte/icons/octagon-x';
+	import InfoIcon from '@lucide/svelte/icons/info';
+	import TriangleAlertIcon from '@lucide/svelte/icons/triangle-alert';
 
 	let { ...restProps }: SonnerProps = $props();
 </script>
@@ -10,4 +15,20 @@
 	class="toaster group"
 	style="--normal-bg: var(--color-popover); --normal-text: var(--color-popover-foreground); --normal-border: var(--color-border);"
 	{...restProps}
-/>
+>
+	{#snippet loadingIcon()}
+		<Loader2Icon class="size-4 animate-spin" />
+	{/snippet}
+	{#snippet successIcon()}
+		<CircleCheckIcon class="size-4" />
+	{/snippet}
+	{#snippet errorIcon()}
+		<OctagonXIcon class="size-4" />
+	{/snippet}
+	{#snippet infoIcon()}
+		<InfoIcon class="size-4" />
+	{/snippet}
+	{#snippet warningIcon()}
+		<TriangleAlertIcon class="size-4" />
+	{/snippet}
+</Sonner>

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

@@ -22,8 +22,9 @@
 			<p class="text-muted-foreground mt-4 text-lg">
 				A SvelteKit app with a PocketBase backend already migrated behind it, and types synced from
 				your schema as it changes. This page is
-				<code class="bg-muted rounded px-1.5 py-0.5 font-mono text-base">src/routes/(public)/+page.svelte</code>,
-				and it is yours to delete.
+				<code class="bg-muted rounded px-1.5 py-0.5 font-mono text-base"
+					>src/routes/(public)/+page.svelte</code
+				>, and it is yours to delete.
 			</p>
 
 			<div class="mt-8 flex items-center justify-center gap-3">
@@ -68,8 +69,8 @@
 			<div class="bg-card text-card-foreground rounded-lg border p-6">
 				<h3 class="font-medium">Your interface</h3>
 				<p class="text-muted-foreground mt-2">
-					shadcn components, copied into your project. Yours to restyle, with no dependency
-					to fight.
+					shadcn components, copied into your project. Yours to restyle, with no dependency to
+					fight.
 				</p>
 				<code
 					class="bg-muted text-muted-foreground mt-4 block overflow-x-auto rounded-md px-3 py-2 font-mono text-xs"

package/templates/minimal/vite.config.ts

@@ -12,9 +12,7 @@ export default defineConfig({
 					filename.split(/[/\\]/).includes('node_modules') ? undefined : true
 			},
 			adapter: adapter(),
-			...(process.env.VELA_ORIGIN
-				? { prerender: { origin: process.env.VELA_ORIGIN } }
-				: {})
+			...(process.env.VELA_ORIGIN ? { prerender: { origin: process.env.VELA_ORIGIN } } : {})
 		})
 	]
 });

package/templates/server/apply.sh

@@ -24,6 +24,7 @@ APP_NAME=$INSTANCE
 APP_ID=$INSTANCE
 ENV_TAG=prod
 DOMAIN=""
+MANAGED=""
 HEALTH_PATH=/
 KEEP=5
 PB_VERSION=""
@@ -37,6 +38,7 @@ while [ $# -gt 0 ]; do
 		--app-id) APP_ID=$2; shift 2 ;;
 		--env) ENV_TAG=$2; shift 2 ;;
 		--domain) DOMAIN=$2; shift 2 ;;
+		--managed) MANAGED=$2; shift 2 ;;
 		--health-path) HEALTH_PATH=$2; shift 2 ;;
 		--keep) KEEP=$2; shift 2 ;;
 		--pb-version) PB_VERSION=$2; shift 2 ;;
@@ -88,7 +90,10 @@ PORTS=$(allocate_ports "$INSTANCE")
 WEB_PORT=$(printf '%s' "$PORTS" | jq -r .web)
 PB_PORT=$(printf '%s' "$PORTS" | jq -r .pb)
 
+# The canonical host: a domain the user's own DNS points here outranks a
+# managed velastack.app name, which then redirects to it at the edge.
 PRIMARY_DOMAIN=$(printf '%s' "$DOMAIN" | cut -d, -f1 | tr -d ' ')
+[ -n "$PRIMARY_DOMAIN" ] || PRIMARY_DOMAIN=$(printf '%s' "$MANAGED" | cut -d, -f1 | tr -d ' ')
 if [ -n "$PRIMARY_DOMAIN" ]; then
 	ORIGIN="https://$PRIMARY_DOMAIN"
 else
@@ -325,17 +330,28 @@ ACTIVATED=1
 state_merge "$INSTANCE" "$(jq -c -n \
 	--arg app "$APP_ID" --arg name "$APP_NAME" --arg env "$ENV_TAG" \
 	--arg instance "$INSTANCE" --arg release "$RELEASE" --arg previous "$PREVIOUS" \
-	--arg domain "$DOMAIN" --arg health "$HEALTH_PATH" --arg pb "$PB_VERSION" \
+	--arg domain "$DOMAIN" --arg managed "$MANAGED" --arg url "$ORIGIN" \
+	--arg health "$HEALTH_PATH" --arg pb "$PB_VERSION" \
 	--arg sha "$GIT_SHA" --arg at "$(date -u +%Y-%m-%dT%H:%M:%SZ)" \
 	--argjson web "$WEB_PORT" --argjson pbport "$PB_PORT" --argjson backend "$BACKEND" \
 	'{appId: $app, name: $name, env: $env, instance: $instance,
 	  activeRelease: $release, previousRelease: $previous, domain: $domain,
+	  managed: $managed, url: $url,
 	  healthCheckPath: $health, pocketbaseVersion: $pb, gitSha: $sha,
 	  webPort: $web, pbPort: $pbport, backend: ($backend == 1), deployedAt: $at}')"
 
 # ------------------------------------------------------------------ routing
+#
+# Two files, written independently and each only if the whole Caddy config
+# still validates with it in place (`caddy_install` keeps the previous one
+# otherwise). Hosts the user's DNS points here get a site block of their own
+# and a certificate each; managed velastack.app hosts arrive through the
+# Worker at this server's origin site and are picked out by header.
 
 CADDY_SNIPPET="$VELA_ETC/caddy/$INSTANCE.caddy"
+ROUTE_SNIPPET="$VELA_ETC/caddy/routes/$INSTANCE.route"
+ROUTING_CHANGED=0
+
 if [ -n "$DOMAIN" ]; then
 	hosts=$(printf '%s' "$DOMAIN" | tr ',' '\n' | sed 's/^ *//; s/ *$//' | grep -v '^$' | paste -sd, - | sed 's/,/, /g')
 	tmp=$(mktemp "$VELA_ETC/caddy/.snippet.XXXXXX")
@@ -343,18 +359,42 @@ if [ -n "$DOMAIN" ]; then
 		printf '# Managed by vela - app %s (%s)\n' "$APP_NAME" "$INSTANCE"
 		printf '%s {\n\treverse_proxy 127.0.0.1:%s\n}\n' "$hosts" "$WEB_PORT"
 	} > "$tmp"
-	chmod 0644 "$tmp"
-	mv -f "$tmp" "$CADDY_SNIPPET"
-	if ! caddy validate --config /etc/caddy/Caddyfile --adapter caddyfile >/dev/null 2>&1; then
-		rm -f "$CADDY_SNIPPET"
-		die "generated Caddy config for $DOMAIN is invalid"
-	fi
-	systemctl reload caddy
+	caddy_install "$tmp" "$CADDY_SNIPPET" || die "generated Caddy config for $DOMAIN is invalid"
+	ROUTING_CHANGED=1
 elif [ -f "$CADDY_SNIPPET" ]; then
 	rm -f "$CADDY_SNIPPET"
-	systemctl reload caddy || true
+	ROUTING_CHANGED=1
 fi
 
+if [ -n "$MANAGED" ]; then
+	[ -f "$VELA_ETC/caddy/00-origin.caddy" ] \
+		|| die "managed hostnames need this server's origin site - the CLI runs origin.sh first"
+	# A matcher name is an identifier; instance ids carry dashes.
+	matcher=vela_$(printf '%s' "$INSTANCE" | tr -c 'a-zA-Z0-9_' '_')
+	tmp=$(mktemp "$VELA_ETC/caddy/routes/.route.XXXXXX")
+	{
+		printf '# Managed by vela - app %s (%s)\n' "$APP_NAME" "$INSTANCE"
+		printf '@%s {\n' "$matcher"
+		printf '%s' "$MANAGED" | tr ',' '\n' | sed 's/^ *//; s/ *$//' | grep -v '^$' \
+			| while IFS= read -r host; do printf '\theader X-Velastack-Host %s\n' "$host"; done
+		printf '}\n'
+		# The app should see the public host and the visitor, not the origin
+		# name and the Cloudflare edge that carried the request here.
+		printf 'handle @%s {\n' "$matcher"
+		printf '\treverse_proxy 127.0.0.1:%s {\n' "$WEB_PORT"
+		printf '\t\theader_up Host {http.request.header.X-Velastack-Host}\n'
+		printf '\t\theader_up X-Forwarded-For {http.request.header.X-Velastack-Client-IP}\n'
+		printf '\t}\n}\n'
+	} > "$tmp"
+	caddy_install "$tmp" "$ROUTE_SNIPPET" || die "generated Caddy route for $MANAGED is invalid"
+	ROUTING_CHANGED=1
+elif [ -f "$ROUTE_SNIPPET" ]; then
+	rm -f "$ROUTE_SNIPPET"
+	ROUTING_CHANGED=1
+fi
+
+[ "$ROUTING_CHANGED" = 0 ] || caddy_reload
+
 
 # ------------------------------------------------------------------- pruning
 
@@ -379,7 +419,7 @@ if [ "$KEEP" -gt 0 ] 2>/dev/null; then
 fi
 
 emit_result \
-	--arg instance "$INSTANCE" --arg release "$RELEASE" --arg domain "$DOMAIN" \
+	--arg instance "$INSTANCE" --arg release "$RELEASE" --arg domain "$DOMAIN" --arg managed "$MANAGED" \
 	--arg url "$ORIGIN" --argjson web "$WEB_PORT" --argjson pb "$PB_PORT" --argjson su "$SU_CREATED" \
-	'{instance: $instance, release: $release, domain: $domain, url: $url,
+	'{instance: $instance, release: $release, domain: $domain, managed: $managed, url: $url,
 	  webPort: $web, pbPort: $pb, superuserCreated: ($su == 1)}'

package/templates/server/destroy.sh

@@ -34,8 +34,8 @@ for unit in "$(unit_web "$INSTANCE")" "$(unit_pb "$INSTANCE")"; do
 done
 
 log "removing routing"
-rm -f "$VELA_ETC/caddy/$INSTANCE.caddy"
-systemctl reload caddy >/dev/null 2>&1 || true
+rm -f "$VELA_ETC/caddy/$INSTANCE.caddy" "$VELA_ETC/caddy/routes/$INSTANCE.route"
+caddy_reload || true
 
 log "removing releases"
 rm -rf "$APP/releases" "$APP/deps" "$APP/current" "$APP/bin"

package/templates/server/lib.sh

@@ -228,3 +228,41 @@ assert_superuser_auth() {
 			-X POST -H 'content-type: application/json' --data-binary @- \
 			"http://127.0.0.1:$port/api/collections/_superusers/auth-with-password"
 }
+
+# ------------------------------------------------------------------- caddy
+
+CADDYFILE=${CADDYFILE:-/etc/caddy/Caddyfile}
+
+caddy_valid() {
+	caddy validate --config "$CADDYFILE" --adapter caddyfile >/dev/null 2>&1
+}
+
+# Put a generated snippet in place only if the whole Caddy config still
+# validates with it there. The file it replaces is kept and restored on
+# failure, so a bad generation cannot take a working route down.
+#
+# usage: caddy_install <tmp> <dest> [mode] [owner]
+caddy_install() {
+	local tmp=$1 dest=$2 mode=${3:-0644} owner=${4:-root:root} backup=""
+	chmod "$mode" "$tmp"
+	chown "$owner" "$tmp"
+	if [ -f "$dest" ]; then
+		backup=$(mktemp "$(dirname "$dest")/.previous.XXXXXX")
+		cp -p "$dest" "$backup"
+	fi
+	mv -f "$tmp" "$dest"
+	if caddy_valid; then
+		[ -z "$backup" ] || rm -f "$backup"
+		return 0
+	fi
+	if [ -n "$backup" ]; then
+		mv -f "$backup" "$dest"
+	else
+		rm -f "$dest"
+	fi
+	return 1
+}
+
+caddy_reload() {
+	systemctl reload caddy >/dev/null 2>&1 || systemctl restart caddy
+}

package/templates/server/origin.sh

@@ -0,0 +1,62 @@
+#!/usr/bin/env bash
+#
+# Publish this server's origin site: the one hostname the velastack.app Worker
+# proxies managed hostnames to.
+#
+# Reads /etc/vela/origin.json, which the CLI writes after registering the
+# server with velastack.dev. The site block refuses anything without the
+# server's token, then hands matching requests to per-instance route files
+# that apply.sh writes under routes/. Idempotent, and quiet when nothing has
+# changed, so a deploy does not reload Caddy for no reason.
+#
+# usage: origin.sh
+set -Eeuo pipefail
+
+SCRIPT_DIR=$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)
+# shellcheck source=lib.sh
+. "$SCRIPT_DIR/lib.sh"
+
+require_provisioned
+[ "$(id -u)" -eq 0 ] || die "origin must run as root"
+
+ORIGIN_FILE="$VELA_ETC/origin.json"
+[ -f "$ORIGIN_FILE" ] || die "$ORIGIN_FILE is missing - the CLI registers the server before running this"
+
+HOST=$(jq -er .originHost "$ORIGIN_FILE") || die "$ORIGIN_FILE has no originHost"
+TOKEN=$(jq -er .token "$ORIGIN_FILE") || die "$ORIGIN_FILE has no token"
+
+ROUTES="$VELA_ETC/caddy/routes"
+mkdir -p "$ROUTES"
+chmod 0755 "$ROUTES"
+# An import glob that matches nothing is a hard error in Caddy, so keep a
+# comment-only file in place before the first managed instance is deployed.
+if [ ! -f "$ROUTES/00-vela.route" ]; then
+	printf '# Managed by vela. Instance routes are written alongside this file.\n' \
+		> "$ROUTES/00-vela.route"
+fi
+
+SNIPPET="$VELA_ETC/caddy/00-origin.caddy"
+desired=$(
+	printf '# Managed by vela - origin for velastack.app managed hostnames\n'
+	printf '%s {\n' "$HOST"
+	printf '\t@untrusted not header X-Velastack-Origin-Token "%s"\n' "$TOKEN"
+	printf '\thandle @untrusted {\n\t\trespond 403\n\t}\n'
+	printf '\timport %s/*.route\n' "$ROUTES"
+	printf '\thandle {\n\t\trespond 404\n\t}\n'
+	printf '}\n'
+)
+
+if [ -f "$SNIPPET" ] && [ "$(cat "$SNIPPET")" = "$desired" ]; then
+	emit_result --arg host "$HOST" '{originHost: $host, changed: false}'
+	exit 0
+fi
+
+tmp=$(mktemp "$VELA_ETC/caddy/.origin.XXXXXX")
+printf '%s\n' "$desired" > "$tmp"
+# Readable by the caddy user (which is what `caddy reload` runs as) and no one
+# else: the token must not leak to the apps, which run as $VELA_USER.
+caddy_install "$tmp" "$SNIPPET" 0640 root:caddy \
+	|| die "generated origin config for $HOST is invalid"
+caddy_reload
+
+emit_result --arg host "$HOST" '{originHost: $host, changed: true}'

package/templates/static/components.json

@@ -1,8 +1,9 @@
 {
 	"$schema": "https://shadcn-svelte.com/schema.json",
+	"style": "vega",
 	"tailwind": {
 		"css": "src/app.css",
-		"baseColor": "slate"
+		"baseColor": "neutral"
 	},
 	"aliases": {
 		"components": "$lib/components",
@@ -12,5 +13,6 @@
 		"lib": "$lib"
 	},
 	"typescript": true,
-	"registry": "https://shadcn-svelte.com/registry"
+	"registry": "https://shadcn-svelte.com/registry",
+	"iconLibrary": "lucide"
 }

package/templates/static/package.template.json

@@ -14,25 +14,26 @@
 		"format": "prettier --write ."
 	},
 	"devDependencies": {
-		"@lucide/svelte": "^1.8.0",
+		"@lucide/svelte": "^1.40.0",
 		"@sveltejs/adapter-static": "^3.0.10",
 		"@sveltejs/kit": "^2.70.3",
 		"@sveltejs/vite-plugin-svelte": "^7.3.0",
 		"@tailwindcss/forms": "^0.5.11",
 		"@tailwindcss/typography": "^0.5.19",
 		"@tailwindcss/vite": "^4.3.3",
+		"@types/node": "^26.4.1",
 		"@velastack/kit": "^0.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",
+		"shadcn-svelte": "^1.6.0",
 		"svelte": "^5.56.10",
 		"svelte-check": "^4.6.0",
 		"svelte-meta-tags": "^5.0.2",
 		"svelte-sonner": "^1.1.0",
 		"tailwind-merge": "^3.5.0",
-		"tailwind-variants": "^3.2.2",
+		"tailwind-variants": "^3.3.0",
 		"tailwindcss": "^4.3.3",
 		"tw-animate-css": "^1.3.5",
 		"typescript": "^6.0.3",