bosbun 0.0.6 → 0.0.7

package/README.md

@@ -11,7 +11,7 @@ bun add bosbun
 Or scaffold a new project:
 
 ```bash
-bunx bosbun create my-app
+bun x bosbun create my-app
 ```
 
 ## CLI

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bosbun",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "type": "module",
   "description": "A minimalist fullstack framework — SSR + Svelte 5 Runes + Bun + ElysiaJS",
   "keywords": [

package/src/cli/add.ts

@@ -31,7 +31,7 @@ export async function addComponent(name: string, root = false) {
     if (installed.has(name)) return;
     installed.add(name);
 
-    console.log(root ? `🐰 Installing component: ${name}\n` : `   📦 Dependency: ${name}`);
+    console.log(root ? `⬡ Installing component: ${name}\n` : `   📦 Dependency: ${name}`);
 
     const meta = await fetchJSON<ComponentMeta>(`${REGISTRY_BASE}/components/${name}/meta.json`);
 

package/src/cli/create.ts

@@ -1,12 +1,18 @@
 import { resolve, join, basename } from "path";
 import { existsSync, mkdirSync, readdirSync, statSync, readFileSync, writeFileSync } from "fs";
 import { spawn } from "bun";
+import * as readline from "readline";
 
-// ─── bosbun create <name> ──────────────────────────────────
+// ─── bosbun create <name> [--template <name>] ──────────────
 
-const TEMPLATE_DIR = resolve(import.meta.dir, "../../templates/default");
+const TEMPLATES_DIR = resolve(import.meta.dir, "../../templates");
 
-export async function runCreate(name: string | undefined) {
+const TEMPLATE_DESCRIPTIONS: Record<string, string> = {
+    default: "Minimal starter with routing and Tailwind",
+    demo: "Full-featured demo with hooks, API routes, form actions, and more",
+};
+
+export async function runCreate(name: string | undefined, args: string[] = []) {
     if (!name) {
         console.error("❌ Please provide a project name.\n   Usage: bosbun create my-app");
         process.exit(1);
@@ -19,9 +25,29 @@ export async function runCreate(name: string | undefined) {
         process.exit(1);
     }
 
-    console.log(`🐰 Creating Bosbun project: ${basename(targetDir)}\n`);
+    // Parse --template flag
+    let template: string | undefined;
+    const templateIdx = args.indexOf("--template");
+    if (templateIdx !== -1 && args[templateIdx + 1]) {
+        template = args[templateIdx + 1];
+    }
+
+    // If no --template flag, prompt interactively
+    if (!template) {
+        template = await promptTemplate();
+    }
+
+    // Validate template exists
+    const templateDir = resolve(TEMPLATES_DIR, template);
+    if (!existsSync(templateDir)) {
+        const available = getAvailableTemplates().join(", ");
+        console.error(`❌ Unknown template: "${template}"\n   Available: ${available}`);
+        process.exit(1);
+    }
+
+    console.log(`\n⬡ Creating Bosbun project: ${basename(targetDir)} (template: ${template})\n`);
 
-    copyDir(TEMPLATE_DIR, targetDir, name);
+    copyDir(templateDir, targetDir, name);
 
     console.log(`✅ Project created at ${targetDir}\n`);
 
@@ -39,6 +65,40 @@ export async function runCreate(name: string | undefined) {
     }
 }
 
+function getAvailableTemplates(): string[] {
+    return readdirSync(TEMPLATES_DIR, { withFileTypes: true })
+        .filter((d) => d.isDirectory())
+        .map((d) => d.name)
+        .sort((a, b) => (a === "default" ? -1 : b === "default" ? 1 : a.localeCompare(b)));
+}
+
+async function promptTemplate(): Promise<string> {
+    const templates = getAvailableTemplates();
+
+    if (templates.length === 1) return templates[0];
+
+    console.log("\n? Which template?\n");
+    templates.forEach((t, i) => {
+        const desc = TEMPLATE_DESCRIPTIONS[t] ?? "";
+        const marker = i === 0 ? "❯" : " ";
+        console.log(`  ${marker} ${t}${desc ? `  — ${desc}` : ""}`);
+    });
+    console.log();
+
+    const rl = readline.createInterface({
+        input: process.stdin,
+        output: process.stdout,
+    });
+
+    return new Promise<string>((resolvePromise) => {
+        rl.question(`  Template name (default): `, (answer) => {
+            rl.close();
+            const trimmed = answer.trim();
+            resolvePromise(trimmed || "default");
+        });
+    });
+}
+
 function copyDir(src: string, dest: string, projectName: string) {
     mkdirSync(dest, { recursive: true });
     for (const entry of readdirSync(src, { withFileTypes: true })) {

package/src/cli/feat.ts

@@ -24,7 +24,7 @@ export async function runFeat(name: string | undefined) {
         process.exit(1);
     }
 
-    console.log(`🐰 Installing feature: ${name}\n`);
+    console.log(`⬡ Installing feature: ${name}\n`);
 
     const meta = await fetchJSON<FeatureMeta>(`${REGISTRY_BASE}/features/${name}/meta.json`);
 

package/src/cli/index.ts

@@ -13,7 +13,7 @@ async function main() {
     switch (command) {
         case "create": {
             const { runCreate } = await import("./create.ts");
-            await runCreate(args[0]);
+            await runCreate(args[0], args.slice(1));
             break;
         }
         case "dev": {
@@ -43,13 +43,13 @@ async function main() {
         }
         default: {
             console.log(`
-🐰 Bosbun
+⬡ Bosbun
 
 Usage:
   bosbun <command> [options]
 
 Commands:
-  create <name>       Scaffold a new Bosbun project
+  create <name> [--template <t>]  Scaffold a new Bosbun project
   dev                 Start the development server
   build               Build for production
   start               Run the production server
@@ -58,6 +58,7 @@ Commands:
 
 Examples:
   bosbun create my-app
+  bosbun create my-app --template demo
   bosbun dev
   bosbun build
   bosbun start

package/src/cli/start.ts

@@ -1,8 +1,6 @@
 import { spawn } from "bun";
-import { join } from "path";
 import { loadEnv } from "../core/env.ts";
-
-const BOSBUN_NODE_MODULES = join(import.meta.dir, "..", "..", "node_modules");
+import { BOSBUN_NODE_PATH } from "../core/paths.ts";
 
 export async function runStart() {
     loadEnv("production");
@@ -20,7 +18,7 @@ export async function runStart() {
         env: {
             ...process.env,
             NODE_ENV: "production",
-            NODE_PATH: BOSBUN_NODE_MODULES,
+            NODE_PATH: BOSBUN_NODE_PATH,
         },
     });
 

package/src/core/build.ts

@@ -10,10 +10,10 @@ import { makeBosbunPlugin } from "./plugin.ts";
 import { prerenderStaticRoutes } from "./prerender.ts";
 import { loadEnv, classifyEnvVars } from "./env.ts";
 import { generateEnvModules } from "./envCodegen.ts";
+import { BOSBUN_NODE_PATH, resolveBosbunBin } from "./paths.ts";
 
 // Resolved from this file's location inside the bosbun package
 const CORE_DIR = import.meta.dir;
-const BOSBUN_NODE_MODULES = join(CORE_DIR, "..", "..", "node_modules");
 
 // ─── Entry Point ─────────────────────────────────────────
 
@@ -57,12 +57,12 @@ generateEnvModules(classifiedEnv);
 
 // 3. Build Tailwind CSS
 console.log("\n🎨 Building Tailwind CSS...");
-const tailwindBin = join(BOSBUN_NODE_MODULES, ".bin", "tailwindcss");
+const tailwindBin = resolveBosbunBin("tailwindcss");
 const tailwindResult = spawnSync(
     [tailwindBin, "-i", "./src/app.css", "-o", "./public/bosbun-tw.css", ...(isProduction ? ["--minify"] : [])],
     {
         cwd: process.cwd(),
-        env: { ...process.env, NODE_PATH: BOSBUN_NODE_MODULES },
+        env: { ...process.env, NODE_PATH: BOSBUN_NODE_PATH },
     },
 );
 if (tailwindResult.exitCode !== 0) {

package/src/core/dev.ts

@@ -2,7 +2,7 @@ import { spawn, type Subprocess } from "bun";
 import { watch } from "fs";
 import { join } from "path";
 
-console.log("🐰 Bosbun dev server starting...\n");
+console.log("⬡ Bosbun dev server starting...\n");
 
 // ─── State ────────────────────────────────────────────────
 
@@ -27,8 +27,9 @@ function broadcastReload() {
 
 // ─── Build ────────────────────────────────────────────────
 
+import { BOSBUN_NODE_PATH } from "./paths.ts";
+
 const BUILD_SCRIPT = join(import.meta.dir, "build.ts");
-const BOSBUN_NODE_MODULES = join(import.meta.dir, "..", "..", "node_modules");
 
 async function runBuild(): Promise<boolean> {
     console.log("🏗️  Building...");
@@ -68,7 +69,7 @@ async function startAppServer() {
             // Force app server to APP_PORT — prevents PORT from .env conflicting with the dev proxy
             PORT: String(APP_PORT),
             // Allow externalized deps (elysia, etc.) to resolve from bosbun's node_modules
-            NODE_PATH: BOSBUN_NODE_MODULES,
+            NODE_PATH: BOSBUN_NODE_PATH,
         },
     });
 }

package/src/core/html.ts

@@ -93,7 +93,7 @@ export function buildHtml(
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   ${fallbackTitle}
-  <link rel="icon" href="data:,">
+  <link rel="icon" type="image/svg+xml" href="/favicon.svg">
   ${head}
   ${cssLinks}
   <link rel="stylesheet" href="/bosbun-tw.css${cacheBust}">
@@ -129,7 +129,7 @@ export function buildHtmlShellOpen(): string {
     _shellOpen = `<!DOCTYPE html>\n<html lang="en">\n<head>\n` +
         `  <meta charset="UTF-8">\n` +
         `  <meta name="viewport" content="width=device-width, initial-scale=1.0">\n` +
-        `  <link rel="icon" href="data:,">\n` +
+        `  <link rel="icon" type="image/svg+xml" href="/favicon.svg">\n` +
         `  ${cssLinks}\n` +
         `  <link rel="stylesheet" href="/bosbun-tw.css${cacheBust}">\n` +
         `  <link rel="modulepreload" href="/dist/client/${distManifest.entry}${cacheBust}">`;

package/src/core/paths.ts

@@ -0,0 +1,41 @@
+import { join, dirname, resolve } from "path";
+import { existsSync } from "fs";
+
+// This file lives at src/core/paths.ts → package root is ../..
+const BOSBUN_PKG_DIR = join(import.meta.dir, "..", "..");
+
+// Bun hoists dependencies flat, so bosbun's deps may live in the parent
+// node_modules rather than a nested node_modules/bosbun/node_modules.
+const NESTED_NM = join(BOSBUN_PKG_DIR, "node_modules");
+
+// Walk up from the package dir to find the nearest ancestor node_modules.
+// In a workspace, bosbun lives at packages/bosbun/ so we need to find
+// the workspace root's node_modules (not just the parent directory).
+function findAncestorNodeModules(from: string): string | null {
+    let dir = resolve(from, "..");
+    const root = dirname(dir); // stop at filesystem root
+    while (dir !== root) {
+        const candidate = join(dir, "node_modules");
+        if (candidate !== NESTED_NM && existsSync(candidate)) return candidate;
+        dir = dirname(dir);
+    }
+    return null;
+}
+
+const HOISTED_NM = findAncestorNodeModules(BOSBUN_PKG_DIR);
+
+/** NODE_PATH value covering both nested and hoisted dependency locations */
+export const BOSBUN_NODE_PATH = HOISTED_NM
+    ? [NESTED_NM, HOISTED_NM].join(":")
+    : NESTED_NM;
+
+/** Find a binary from bosbun's dependencies (handles hoisting) */
+export function resolveBosbunBin(name: string): string {
+    const nested = join(NESTED_NM, ".bin", name);
+    if (existsSync(nested)) return nested;
+    if (HOISTED_NM) {
+        const hoisted = join(HOISTED_NM, ".bin", name);
+        if (existsSync(hoisted)) return hoisted;
+    }
+    return nested; // fallback — will produce a clear ENOENT
+}

package/src/core/plugin.ts

@@ -1,4 +1,4 @@
-import { join } from "path";
+import { join, dirname } from "path";
 
 // ─── Bun Build Plugin ─────────────────────────────────────
 // Resolves:
@@ -31,6 +31,40 @@ export function makeBosbunPlugin(target: "browser" | "bun" = "bun") {
                 return { path: await resolveWithExts(base) };
             });
 
+            // Force svelte imports to resolve from the app's node_modules.
+            // Without this, when bosbun is symlinked (bun link / workspace),
+            // hydrate.ts resolves "svelte" from the framework's location while
+            // compiled components resolve "svelte/internal/client" from the app's.
+            // Two different Svelte copies = duplicate runtime state = broken hydration.
+            //
+            // require.resolve uses the "default" export condition, which for
+            // bare "svelte" returns index-server.js. For browser builds we need
+            // index-client.js, so we read the "browser" condition from package.json.
+            const appDir = process.cwd();
+            let svelteBrowserEntry: string | null = null;
+            if (target === "browser") {
+                try {
+                    const svelteDir = dirname(require.resolve("svelte/package.json", { paths: [appDir] }));
+                    const pkg = require(join(svelteDir, "package.json"));
+                    const dotExport = pkg.exports?.["."];
+                    const browserPath = typeof dotExport === "object" ? dotExport.browser : null;
+                    if (browserPath) {
+                        svelteBrowserEntry = join(svelteDir, browserPath);
+                    }
+                } catch { }
+            }
+            build.onResolve({ filter: /^svelte(\/.*)?$/ }, (args) => {
+                try {
+                    // Bare "svelte" in browser build: use the "browser" export condition
+                    if (args.path === "svelte" && svelteBrowserEntry) {
+                        return { path: svelteBrowserEntry };
+                    }
+                    return { path: require.resolve(args.path, { paths: [appDir] }) };
+                } catch {
+                    return undefined; // fall through to default resolution
+                }
+            });
+
             // "tailwindcss" inside app.css is a Tailwind CLI directive —
             // it's already compiled to public/bosbun-tw.css by the CLI step.
             // Return an empty CSS module so Bun's CSS bundler doesn't choke on it.

package/src/core/prerender.ts

@@ -2,8 +2,9 @@ import { writeFileSync, mkdirSync } from "fs";
 import { join } from "path";
 import type { RouteManifest } from "./types.ts";
 
+import { BOSBUN_NODE_PATH } from "./paths.ts";
+
 const CORE_DIR = import.meta.dir;
-const BOSBUN_NODE_MODULES = join(CORE_DIR, "..", "..", "node_modules");
 
 const PRERENDER_TIMEOUT = Number(process.env.PRERENDER_TIMEOUT) || 5_000; // 5s default
 
@@ -36,7 +37,7 @@ export async function prerenderStaticRoutes(manifest: RouteManifest): Promise<vo
     const child = Bun.spawn(
         ["bun", "run", "./dist/server/index.js"],
         {
-            env: { ...process.env, NODE_ENV: "production", PORT: String(port), NODE_PATH: BOSBUN_NODE_MODULES },
+            env: { ...process.env, NODE_ENV: "production", PORT: String(port), NODE_PATH: BOSBUN_NODE_PATH },
             stdout: "ignore",
             stderr: "ignore",
         },

package/src/core/server.ts

@@ -398,7 +398,7 @@ const app = new Elysia({ serve: { maxRequestBodySize: BODY_SIZE_LIMIT } })
 
 app.listen(PORT, () => {
     // In dev mode the proxy owns the user-facing port — don't print the internal port
-    if (!isDev) console.log(`🐰 Bosbun server running at http://localhost:${PORT}`);
+    if (!isDev) console.log(`⬡ Bosbun server running at http://localhost:${PORT}`);
 });
 
 function shutdown() {

package/templates/default/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/default/src/routes/+page.svelte

@@ -4,7 +4,7 @@
 
 <main class="flex min-h-screen flex-col items-center justify-center gap-6 p-8">
     <div class="flex flex-col items-center gap-3 text-center">
-        <p class="text-6xl">🐰</p>
+        <img src="/favicon.svg" alt="" class="size-16" />
         <h1 class="text-4xl font-bold tracking-tight">{name}</h1>
         <p class="text-muted-foreground text-lg">
             A Bosbun project — SSR + Svelte 5 + Bun + ElysiaJS

package/templates/demo/.env.example

@@ -0,0 +1,52 @@
+# Server port. Defaults to 9000 in production, 9001 in dev (proxied via :9000).
+PORT=9000
+
+# Maximum request body size. Supports K/M/G suffixes or "Infinity". Defaults to 512K.
+BODY_SIZE_LIMIT=512K
+
+# Comma-separated list of allowed CORS origins for CSRF validation.
+# Leave unset to allow same-origin requests only.
+# Example: https://app.example.com, https://admin.example.com
+CSRF_ALLOWED_ORIGINS=
+
+# Comma-separated list of origins allowed to make cross-origin requests.
+# Leave unset to disable CORS (browsers block cross-origin requests by default).
+# Example: https://app.example.com, http://localhost:5173
+CORS_ALLOWED_ORIGINS=
+
+# Comma-separated HTTP methods to allow in CORS requests.
+# Default: GET, HEAD, PUT, PATCH, POST, DELETE
+# CORS_ALLOWED_METHODS=GET, POST
+
+# Comma-separated request headers to allow in CORS requests.
+# Default: Content-Type, Authorization
+# CORS_ALLOWED_HEADERS=Content-Type, Authorization, X-Custom-Header
+
+# Comma-separated response headers to expose to the browser.
+# Default: none
+# CORS_EXPOSED_HEADERS=X-Total-Count, X-Request-Id
+
+# Whether to allow cookies and auth credentials in cross-origin requests.
+# Must be "true" to enable; requires CORS_ALLOWED_ORIGINS to be set (not wildcard).
+# Default: false
+# CORS_CREDENTIALS=true
+
+# Preflight response cache duration in seconds.
+# Default: 86400 (24 hours)
+# CORS_MAX_AGE=86400
+
+# Timeout for load() functions (layout + page) in milliseconds. Defaults to 5000 (5s).
+# Set to 0 or Infinity to disable.
+# LOAD_TIMEOUT=5000
+
+# Timeout for metadata() functions in milliseconds. Defaults to 3000 (3s).
+# Set to 0 or Infinity to disable.
+# METADATA_TIMEOUT=3000
+
+# Timeout for prerender fetches during build in milliseconds. Defaults to 5000 (5s).
+# Set to 0 or Infinity to disable.
+# PRERENDER_TIMEOUT=5000
+
+# Set automatically by the framework (bosbun dev / bosbun build / bosbun start).
+# Do not set manually.
+# NODE_ENV=production

package/templates/demo/README.md

@@ -0,0 +1,23 @@
+# {{PROJECT_NAME}}
+
+A [Bosbun](https://github.com/nicholascostadev/bosbun) project with demo routes, hooks, API endpoints, and form actions.
+
+## Running
+
+```bash
+bun x bosbun dev     # http://localhost:9000
+bun x bosbun build   # production build
+bun x bosbun start   # run production server
+```
+
+## Routes
+
+| URL | File | Description |
+|-----|------|-------------|
+| `/` | `(public)/+page.svelte` | Home page |
+| `/about` | `(public)/about/+page.svelte` | About page |
+| `/blog` | `(public)/blog/+page.svelte` | Blog listing |
+| `/blog/:slug` | `(public)/blog/[slug]/+page.svelte` | Blog post — fetched via server loader |
+| `/api/hello` | `api/hello/+server.ts` | Multi-method JSON API |
+| `/actions-test` | `actions-test/+page.svelte` | Form actions demo |
+| `/*` | `(public)/[...catchall]/+page.svelte` | 404 catch-all |

package/templates/demo/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "{{PROJECT_NAME}}",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "bosbun dev",
+    "build": "bosbun build",
+    "start": "bosbun start"
+  },
+  "dependencies": {
+    "bosbun": "*",
+    "svelte": "^5.20.0",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.5.0"
+  },
+  "devDependencies": {
+    "@types/bun": "latest",
+    "typescript": "^5"
+  }
+}

package/templates/demo/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/demo/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/demo/src/app.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="svelte" />
+
+declare module "*.svelte" {
+    import type { Component } from "svelte";
+    const component: Component<Record<string, any>, Record<string, any>, any>;
+    export default component;
+}

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

@@ -0,0 +1,21 @@
+import { sequence } from "bosbun";
+import type { Handle } from "bosbun";
+
+// Sets locals that every loader and API handler can read
+const authHandle: Handle = async ({ event, resolve }) => {
+    event.locals.requestTime = Date.now();
+    event.locals.user = null; // replace with real session logic
+    return resolve(event);
+};
+
+// Logs each request with method, path, status, and duration
+const loggingHandle: Handle = async ({ event, resolve }) => {
+    const start = Date.now();
+    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(authHandle, loggingHandle);

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

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

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

@@ -0,0 +1,31 @@
+<script lang="ts">
+    import type { LayoutData } from '../$types';
+
+    let { children, data }: { children: any; data: LayoutData } = $props();
+</script>
+
+<div class="flex min-h-screen flex-col bg-background text-foreground">
+    <header class="sticky top-0 z-10 border-b bg-background/80 backdrop-blur">
+        <nav class="mx-auto flex max-w-4xl items-center gap-6 px-4 py-3">
+            <a href="/" class="font-bold tracking-tight flex items-center gap-2"><img src="/favicon.svg" alt="" class="size-5" /> {{PROJECT_NAME}}</a>
+            <a href="/" class="text-sm text-muted-foreground hover:text-foreground transition-colors">Home</a>
+            <a href="/about" class="text-sm text-muted-foreground hover:text-foreground transition-colors">About</a>
+            <a href="/blog" class="text-sm text-muted-foreground hover:text-foreground transition-colors">Blog</a>
+            <a href="/all/foo/bar" class="text-sm text-muted-foreground hover:text-foreground transition-colors">Catch-all</a>
+            <a href="/api/hello" target="_blank" class="text-sm text-muted-foreground hover:text-foreground transition-colors">API</a>
+        </nav>
+    </header>
+
+    <main class="mx-auto w-full max-w-4xl flex-1 px-4 py-8">
+        {@render children()}
+    </main>
+
+    <footer class="border-t py-4 text-center text-sm text-muted-foreground">
+        Powered by Bosbun
+        {#if data.requestTime}
+            <span class="ml-2 opacity-40 font-mono text-xs">
+                req at {new Date(data.requestTime).toISOString()}
+            </span>
+        {/if}
+    </footer>
+</div>

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

@@ -0,0 +1,79 @@
+<script lang="ts">
+    let count = $state(0);
+
+    const features = [
+        { icon: "📂", label: "File-based routing", desc: "+page.svelte, +layout.svelte, route groups, dynamic [params]" },
+        { icon: "⚡", label: "SSR + Hydration", desc: "Server renders HTML, Svelte hydrates on the client" },
+        { icon: "🔁", label: "Server loaders", desc: "+page.server.ts and +layout.server.ts with parent() threading" },
+        { icon: "🪝", label: "Hooks", desc: "sequence() middleware — auth, logging, locals" },
+        { icon: "📡", label: "API routes", desc: "+server.ts exports GET, POST, PUT, PATCH, DELETE" },
+        { icon: "🧩", label: "Component registry", desc: "bosbun add button — shadcn-style, code you own" },
+        { icon: "✨", label: "feat system", desc: "bosbun feat login — scaffold entire features, not just components" },
+    ];
+</script>
+
+<svelte:head>
+    <title>{{PROJECT_NAME}}</title>
+    <meta name="description" content="{{PROJECT_NAME}} — SSR + Svelte 5 + Bun + ElysiaJS" />
+</svelte:head>
+
+<div class="space-y-12">
+    <!-- Hero -->
+    <div class="space-y-3 pt-4">
+        <h1 class="text-5xl font-bold tracking-tight flex items-center gap-3"><img src="/favicon.svg" alt="" class="size-10" /> {{PROJECT_NAME}}</h1>
+        <p class="text-xl text-muted-foreground max-w-xl">
+            A minimalist fullstack framework — SSR, Svelte 5 Runes, Bun, and ElysiaJS.
+        </p>
+    </div>
+
+    <!-- Svelte 5 reactivity demo -->
+    <div class="rounded-lg border bg-card p-6 space-y-3 max-w-sm">
+        <p class="text-sm font-medium text-muted-foreground">Svelte 5 $state demo</p>
+        <p class="text-5xl font-bold tabular-nums">{count}</p>
+        <div class="flex gap-2">
+            <button
+                onclick={() => count++}
+                class="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors"
+            >
+                +1
+            </button>
+            <button
+                onclick={() => count = 0}
+                class="rounded-md border px-4 py-2 text-sm font-medium hover:bg-muted transition-colors"
+            >
+                Reset
+            </button>
+        </div>
+    </div>
+
+    <!-- Features grid -->
+    <div class="space-y-4">
+        <h2 class="text-2xl font-semibold tracking-tight">Features</h2>
+        <div class="grid gap-4 sm:grid-cols-2">
+            {#each features as f}
+                <div class="rounded-lg border bg-card p-4 space-y-1">
+                    <p class="font-medium">{f.icon} {f.label}</p>
+                    <p class="text-sm text-muted-foreground">{f.desc}</p>
+                </div>
+            {/each}
+        </div>
+    </div>
+
+    <!-- Navigation demo -->
+    <div class="space-y-4">
+        <h2 class="text-2xl font-semibold tracking-tight">Routes in this demo</h2>
+        <div class="flex flex-wrap gap-2">
+            {#each ["/", "/about", "/blog", "/blog/hello-world", "/blog/route-groups", "/all/foo/bar", "/missing-page"] as href}
+                <a
+                    {href}
+                    class="rounded-md border px-3 py-1.5 text-sm font-mono hover:bg-muted transition-colors"
+                >{href}</a>
+            {/each}
+            <a
+                href="/api/hello"
+                target="_blank"
+                class="rounded-md border px-3 py-1.5 text-sm font-mono hover:bg-muted transition-colors"
+            >/api/hello ↗</a>
+        </div>
+    </div>
+</div>

package/templates/demo/src/routes/(public)/about/+page.server.ts

@@ -0,0 +1 @@
+export const prerender = true;

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

@@ -0,0 +1,31 @@
+<svelte:head>
+    <title>About | {{PROJECT_NAME}}</title>
+</svelte:head>
+
+<div class="space-y-6 max-w-2xl">
+    <h1 class="text-4xl font-bold tracking-tight">About {{PROJECT_NAME}}</h1>
+    <p class="text-muted-foreground text-lg">
+        A minimalist fullstack framework built on Bun, ElysiaJS, and Svelte 5.
+    </p>
+
+    <ul class="space-y-2 text-foreground">
+        {#each [
+            "Bun runtime — fast builds, native TypeScript",
+            "ElysiaJS — HTTP server with type-safe routing",
+            "Svelte 5 Runes — fine-grained reactivity",
+            "Isomorphic SSR with client hydration",
+            "File-based routing (SvelteKit-compatible conventions)",
+            "Nested layouts and route groups (public), (auth), (admin)",
+            "Dynamic params [slug] and catch-all [...rest]",
+            "Server loaders with parent() data threading",
+            "Hooks — sequence() middleware for auth, logging, etc.",
+            "Component registry — bosbun add button",
+            "Feature registry — bosbun feat login",
+        ] as item}
+            <li class="flex items-start gap-2">
+                <span class="text-primary mt-0.5">✓</span>
+                <span>{item}</span>
+            </li>
+        {/each}
+    </ul>
+</div>

package/templates/demo/src/routes/(public)/all/[...catchall]/+page.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+    let { data = {} }: { data?: Record<string, any> } = $props();
+    const segments = $derived(
+        ((data as any)?.params?.catchall ?? "")
+            .split("/")
+            .filter(Boolean)
+    );
+</script>
+
+<svelte:head>
+    <title>Catch-all Demo | {{PROJECT_NAME}}</title>
+</svelte:head>
+
+<div class="flex flex-col items-center justify-center py-24 text-center space-y-6">
+    <h1 class="text-3xl font-bold">Catch-all Route Demo</h1>
+    <p class="text-muted-foreground text-sm">
+        This page matches <code class="bg-muted rounded px-1 font-mono">/all/[...catchall]</code>
+    </p>
+
+    {#if segments.length > 0}
+        <div class="mt-2 space-y-1">
+            <p class="text-sm text-muted-foreground">Captured segments:</p>
+            <div class="flex gap-2 flex-wrap justify-center">
+                {#each segments as segment, i}
+                    <span class="bg-muted rounded px-2 py-1 font-mono text-sm">
+                        [{i}] {segment}
+                    </span>
+                {/each}
+            </div>
+        </div>
+    {:else}
+        <p class="text-muted-foreground text-sm italic">No segments captured</p>
+    {/if}
+
+    <a href="/" class="mt-4 rounded-md border px-4 py-2 text-sm hover:bg-muted transition-colors">
+        Go Home
+    </a>
+</div>

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

@@ -0,0 +1,55 @@
+<script lang="ts">
+    const posts = [
+        {
+            slug: "hello-world",
+            title: "Hello, World!",
+            date: "2026-03-05",
+            excerpt: "The first post in the demo — a quick intro to the framework.",
+            tags: ["intro", "bosbun"],
+        },
+        {
+            slug: "route-groups",
+            title: "Route Groups Explained",
+            date: "2026-03-04",
+            excerpt: "How (public), (auth), (admin) groups work — invisible in URLs, share layouts.",
+            tags: ["routing", "layouts"],
+        },
+        {
+            slug: "dynamic-params",
+            title: "Dynamic Params with [slug]",
+            date: "2026-03-03",
+            excerpt: "Using [slug] segments to match any value and pass it to server loaders.",
+            tags: ["routing", "dynamic"],
+        },
+    ];
+</script>
+
+<svelte:head>
+    <title>Blog | {{PROJECT_NAME}}</title>
+</svelte:head>
+
+<div class="space-y-8">
+    <div class="space-y-2">
+        <h1 class="text-4xl font-bold tracking-tight">Blog</h1>
+        <p class="text-muted-foreground">Routing patterns and framework internals.</p>
+    </div>
+
+    <div class="grid gap-4" data-bosbun-preload="hover">
+        {#each posts as post}
+            <a href="/blog/{post.slug}" class="group block rounded-lg border bg-card p-5 hover:border-primary transition-colors">
+                <div class="flex items-start justify-between gap-4">
+                    <div class="space-y-1">
+                        <p class="font-semibold group-hover:text-primary transition-colors">{post.title}</p>
+                        <p class="text-xs text-muted-foreground font-mono">{post.date}</p>
+                    </div>
+                    <div class="flex gap-1 shrink-0">
+                        {#each post.tags as tag}
+                            <span class="rounded-full bg-secondary px-2 py-0.5 text-xs text-secondary-foreground">{tag}</span>
+                        {/each}
+                    </div>
+                </div>
+                <p class="mt-2 text-sm text-muted-foreground">{post.excerpt}</p>
+            </a>
+        {/each}
+    </div>
+</div>

package/templates/demo/src/routes/(public)/blog/[slug]/+page.server.ts

@@ -0,0 +1,62 @@
+import type { LoadEvent, MetadataEvent } from "bosbun";
+
+const posts: Record<string, { title: string; date: string; tags: string[]; content: string }> = {
+    "hello-world": {
+        title: "Hello, World!",
+        date: "2026-03-05",
+        tags: ["intro", "bosbun"],
+        content: `Welcome to Bosbun! This page was loaded by a +page.server.ts file.
+
+The slug param was extracted from the URL by the route matcher and passed to the load() function as params.slug.
+
+This is standard SvelteKit-compatible server loading.`,
+    },
+    "route-groups": {
+        title: "Route Groups Explained",
+        date: "2026-03-04",
+        tags: ["routing", "layouts"],
+        content: `Route groups like (public), (auth), and (admin) are directory names that are invisible in the URL.
+
+They let you share layouts across a set of routes without adding a URL segment. A directory named (public) applies its +layout.svelte to all routes inside it, but /public never appears in the browser URL.
+
+This page lives at routes/(public)/blog/[slug]/+page.svelte but is served at /blog/route-groups.`,
+    },
+    "dynamic-params": {
+        title: "Dynamic Params with [slug]",
+        date: "2026-03-03",
+        tags: ["routing", "dynamic"],
+        content: `A directory named [slug] creates a dynamic route segment that matches any URL value.
+
+The matched value is available as params.slug inside +page.server.ts load() and inside the page component via data.params.slug.
+
+The route matcher uses 3-pass priority: exact matches first, then dynamic segments, then catch-all routes.`,
+    },
+};
+
+export function metadata({ params }: MetadataEvent) {
+    // In production this would be a DB query for the post
+    const post = posts[params.slug] ?? null;
+    return {
+        title: post ? `${post.title} — Blog` : `Post not found`,
+        description: post ? `A blog post about ${params.slug}` : undefined,
+        meta: post
+            ? [{ property: "og:title", content: post.title }]
+            : [],
+        // Pass fetched post to load() — avoids duplicate query
+        data: { post },
+    };
+}
+
+export async function load({ params, parent, metadata }: LoadEvent) {
+    // parent() gives us data from +layout.server.ts (appName, requestTime)
+    const parentData = await parent();
+
+    // Reuse post from metadata() — no duplicate DB query
+    const post = metadata?.post ?? posts[params.slug] ?? null;
+
+    return {
+        post,
+        slug: params.slug,
+        appName: parentData.appName as string,
+    };
+}

package/templates/demo/src/routes/(public)/blog/[slug]/+page.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+    import type { PageData } from './$types';
+
+    let { data }: { data: PageData } = $props();
+
+    const post = $derived(data.post);
+    const slug = $derived(data.slug ?? data.params.slug ?? "");
+</script>
+
+<svelte:head>
+    <title>{post ? post.title : "Post Not Found"} | {{PROJECT_NAME}}</title>
+</svelte:head>
+
+{#if post}
+    <article class="space-y-6 max-w-2xl">
+        <a href="/blog" class="text-sm text-muted-foreground hover:text-foreground transition-colors">← Blog</a>
+
+        <div class="space-y-2">
+            <div class="flex flex-wrap gap-1">
+                {#each post.tags as tag}
+                    <span class="rounded-full bg-secondary px-2 py-0.5 text-xs text-secondary-foreground">{tag}</span>
+                {/each}
+            </div>
+            <h1 class="text-4xl font-bold tracking-tight">{post.title}</h1>
+            <p class="text-sm text-muted-foreground font-mono">{post.date}</p>
+        </div>
+
+        <hr class="border-border" />
+
+        <div class="space-y-4">
+            {#each post.content.split("\n\n") as paragraph}
+                <p class="text-foreground leading-relaxed">{paragraph}</p>
+            {/each}
+        </div>
+
+        <hr class="border-border" />
+
+        <!-- Route debug box — demonstrates params flowing from server to client -->
+        <div class="rounded-lg border bg-muted/40 p-4 space-y-1 text-sm font-mono">
+            <p class="font-sans text-xs font-semibold uppercase tracking-wider text-muted-foreground mb-2">Route debug</p>
+            <p><span class="text-muted-foreground">pattern: </span>/blog/[slug]</p>
+            <p><span class="text-muted-foreground">params.slug: </span><span class="text-primary font-semibold">{slug}</span></p>
+            <p><span class="text-muted-foreground">loaded by: </span>+page.server.ts</p>
+            <p><span class="text-muted-foreground">parent data: </span>{data.appName}</p>
+        </div>
+    </article>
+{:else}
+    <div class="flex flex-col items-center justify-center py-20 text-center space-y-4">
+        <p class="text-7xl font-bold text-destructive">404</p>
+        <p class="text-xl text-muted-foreground">Post "<span class="font-mono">{slug}</span>" not found.</p>
+        <a href="/blog" class="rounded-md border px-4 py-2 text-sm hover:bg-muted transition-colors">Back to Blog</a>
+    </div>
+{/if}

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

@@ -0,0 +1,15 @@
+<script lang="ts">
+  let { data }: { data: { status: number; message: string } } = $props();
+</script>
+
+<svelte:head>
+  <title>{data.status} — {data.message}</title>
+</svelte:head>
+
+<div class="min-h-screen flex flex-col items-center justify-center gap-4 text-center px-4">
+  <p class="text-8xl font-bold text-gray-200">{data.status}</p>
+  <p class="text-2xl font-semibold text-gray-700">{data.message}</p>
+  <a href="/" class="mt-4 px-5 py-2 rounded-lg bg-gray-900 text-white text-sm hover:bg-gray-700 transition-colors">
+    Go home
+  </a>
+</div>

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

@@ -0,0 +1,10 @@
+import type { LoadEvent } from "bosbun";
+
+// Data returned here is available to all child loaders via parent()
+// and to all layouts via the `data` prop.
+export async function load({ locals }: LoadEvent) {
+    return {
+        appName: "{{PROJECT_NAME}}",
+        requestTime: locals.requestTime as number | null ?? null,
+    };
+}

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

@@ -0,0 +1,6 @@
+<script lang="ts">
+    import "../app.css";
+    let { children }: { children: any } = $props();
+</script>
+
+{@render children()}

package/templates/demo/src/routes/actions-test/+page.server.ts

@@ -0,0 +1,28 @@
+import { fail, redirect } from "bosbun";
+import type { RequestEvent } from "bosbun";
+
+export async function load() {
+    return { greeting: "Test form actions" };
+}
+
+export const actions = {
+    default: async ({ request }: RequestEvent) => {
+        const data = await request.formData();
+        const email = data.get("email") as string;
+        const name = data.get("name") as string;
+
+        const errors: Record<string, string> = {};
+        if (!email) errors.email = "Email is required";
+        if (!name) errors.name = "Name is required";
+
+        if (Object.keys(errors).length > 0) {
+            return fail(400, { email, name, errors });
+        }
+
+        return { success: true, email, name };
+    },
+
+    reset: async () => {
+        return { cleared: true };
+    },
+};

package/templates/demo/src/routes/actions-test/+page.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+  import type { PageData, ActionData } from './$types';
+  let { data, form }: { data: PageData; form: ActionData } = $props();
+</script>
+
+<div class="max-w-md mx-auto mt-10 p-6">
+  <h1 class="text-2xl font-bold mb-4">{data.greeting}</h1>
+
+  {#if form?.success}
+    <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-4">
+      Welcome, {form.name} ({form.email})!
+    </div>
+  {/if}
+
+  {#if form?.cleared}
+    <div class="bg-blue-100 border border-blue-400 text-blue-700 px-4 py-3 rounded mb-4">
+      Form cleared.
+    </div>
+  {/if}
+
+  <form method="POST" class="space-y-4">
+    <div>
+      <label for="name" class="block text-sm font-medium">Name</label>
+      <input
+        id="name"
+        name="name"
+        type="text"
+        value={form?.name ?? ''}
+        class="mt-1 block w-full rounded border border-gray-300 px-3 py-2"
+      />
+      {#if form?.errors?.name}
+        <p class="text-red-500 text-sm mt-1">{form.errors.name}</p>
+      {/if}
+    </div>
+
+    <div>
+      <label for="email" class="block text-sm font-medium">Email</label>
+      <input
+        id="email"
+        name="email"
+        type="text"
+        value={form?.email ?? ''}
+        class="mt-1 block w-full rounded border border-gray-300 px-3 py-2"
+      />
+      {#if form?.errors?.email}
+        <p class="text-red-500 text-sm mt-1">{form.errors.email}</p>
+      {/if}
+    </div>
+
+    <button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
+      Submit
+    </button>
+  </form>
+
+  <form method="POST" action="?/reset" class="mt-4">
+    <button type="submit" class="bg-gray-500 text-white px-4 py-2 rounded hover:bg-gray-600">
+      Reset (named action)
+    </button>
+  </form>
+</div>

package/templates/demo/src/routes/api/hello/+server.ts

@@ -0,0 +1,44 @@
+import type { RequestEvent } from "bosbun";
+
+export function GET({ params, locals }: RequestEvent) {
+    return Response.json({
+        method: "GET",
+        message: "Hello from Bosbun API!",
+        params,
+        locals: {
+            requestTime: locals.requestTime ?? null,
+            user: locals.user ?? null,
+        },
+    });
+}
+
+export async function POST({ request, locals }: RequestEvent) {
+    const body = await request.json().catch(() => ({}));
+    return Response.json({ method: "POST", received: body, locals });
+}
+
+export async function PUT({ request, locals }: RequestEvent) {
+    const body = await request.json().catch(() => ({}));
+    return Response.json({ method: "PUT", received: body, locals });
+}
+
+export async function PATCH({ request, locals }: RequestEvent) {
+    const body = await request.json().catch(() => ({}));
+    return Response.json({ method: "PATCH", received: body, locals });
+}
+
+export function DELETE({ params, locals }: RequestEvent) {
+    return Response.json({ method: "DELETE", deleted: true, params, locals });
+}
+
+export function OPTIONS() {
+    return new Response(null, {
+        status: 204,
+        headers: {
+            Allow: "GET, POST, PUT, PATCH, DELETE, OPTIONS",
+            "Access-Control-Allow-Origin": "*",
+            "Access-Control-Allow-Methods": "GET, POST, PUT, PATCH, DELETE, OPTIONS",
+            "Access-Control-Allow-Headers": "Content-Type, Authorization",
+        },
+    });
+}

package/templates/demo/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "allowJs": true,
+    "skipLibCheck": true,
+    "allowImportingTsExtensions": true,
+    "noEmit": true,
+    "verbatimModuleSyntax": true,
+    "types": ["bun-types"],
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "rootDirs": [".", ".bosbun/types"],
+    "paths": {
+      "$lib": ["./src/lib"],
+      "$lib/*": ["./src/lib/*"]
+    }
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}