@strav/spring 0.3.4 → 0.3.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strav/spring",
-  "version": "0.3.4",
+  "version": "0.3.6",
   "type": "module",
   "description": "Flagship framework scaffolding tool for the Strav ecosystem.",
   "license": "MIT",
@@ -22,7 +22,7 @@
     "README.md"
   ],
   "dependencies": {
-    "@strav/kernel": "0.3.4"
+    "@strav/kernel": "0.3.6"
   },
   "devDependencies": {
     "@types/bun": "latest"

package/src/templates/web/app/controllers/home_controller.ts

@@ -1,24 +1,10 @@
 import type { Context } from '@strav/http'
-import { Controller } from './controller.ts'
-import User from '../models/user.ts'
 
-export default class HomeController extends Controller {
+export default class HomeController {
   async index(ctx: Context) {
-    const userCount = await User.count()
-
     return ctx.view('pages/home', {
-      title: 'Welcome to __PROJECT_NAME__',
-      userCount,
+      title: 'Welcome',
       message: 'Welcome to your new Strav application!',
     })
   }
-
-  async users(ctx: Context) {
-    const users = await User.all()
-
-    return ctx.view('pages/users', {
-      title: 'Users',
-      users,
-    })
-  }
 }

package/src/templates/web/index.ts

@@ -3,9 +3,15 @@ import { app } from '@strav/kernel'
 import { IslandBuilder, ViewEngine } from '@strav/view'
 import { providers } from './start/providers'
 
-// Build islands + CSS before the server starts so they're included in the public/ scan
+// Build islands + CSS before the server starts
+// Outputs: public/css/app.css (from SCSS) and public/builds/islands.js (Vue components)
 const builder = new IslandBuilder({
-  css: { entry: 'resources/css/app.scss' },
+  css: {
+    entry: 'resources/css/app.scss',
+    outDir: './public/css',
+    outFile: 'app.css'
+  },
+  outDir: './public/builds',
 })
 
 // Register service providers

package/src/templates/web/public/builds/.gitkeep

@@ -0,0 +1 @@
+# This directory will contain compiled Vue islands and manifest files

package/src/templates/web/public/css/.gitkeep

@@ -0,0 +1 @@
+# This directory will contain compiled CSS files

package/src/templates/web/resources/css/app.scss

@@ -1,5 +1,11 @@
-/* Basic Tailwind CSS-inspired styles */
-/* In a real project, you'd use Tailwind CSS or your preferred CSS framework */
+:root {
+  --bg: #f4f4f0;
+  --text: #1e293b;
+  --accent: #f97316;
+  --bg-feature: #e8e8e3;
+  --border-feature: #d8d8d0;
+  --border-link-hover: #abab9c;
+}
 
 * {
   margin: 0;
@@ -8,169 +14,64 @@
 }
 
 body {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Open Sans', 'Helvetica Neue', sans-serif;
-  line-height: 1.6;
-  color: #374151;
-}
-
-/* Basic utility classes */
-.bg-gray-50 { background-color: #f9fafb; }
-.bg-white { background-color: #ffffff; }
-.bg-blue-600 { background-color: #2563eb; }
-.bg-blue-700 { background-color: #1d4ed8; }
-.bg-red-500 { background-color: #ef4444; }
-.bg-red-600 { background-color: #dc2626; }
-.bg-green-500 { background-color: #10b981; }
-.bg-green-600 { background-color: #059669; }
-.bg-gray-100 { background-color: #f3f4f6; }
-.bg-yellow-50 { background-color: #fffbeb; }
-
-.text-white { color: #ffffff; }
-.text-gray-900 { color: #111827; }
-.text-gray-600 { color: #4b5563; }
-.text-gray-500 { color: #6b7280; }
-.text-blue-600 { color: #2563eb; }
-.text-green-600 { color: #059669; }
-
-.text-xs { font-size: 0.75rem; }
-.text-sm { font-size: 0.875rem; }
-.text-base { font-size: 1rem; }
-.text-lg { font-size: 1.125rem; }
-.text-xl { font-size: 1.25rem; }
-.text-2xl { font-size: 1.5rem; }
-.text-4xl { font-size: 2.25rem; }
-
-.font-bold { font-weight: 700; }
-.font-semibold { font-weight: 600; }
-.font-medium { font-weight: 500; }
-
-.max-w-7xl { max-width: 80rem; }
-.max-w-4xl { max-width: 56rem; }
-.max-w-md { max-width: 28rem; }
-.mx-auto { margin-left: auto; margin-right: auto; }
-
-.px-4 { padding-left: 1rem; padding-right: 1rem; }
-.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
-.p-6 { padding: 1.5rem; }
-.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
-.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
-.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
-.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
-.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
-.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
-
-.mb-4 { margin-bottom: 1rem; }
-.mb-8 { margin-bottom: 2rem; }
-.mt-8 { margin-top: 2rem; }
-.mt-2 { margin-top: 0.5rem; }
-
-.flex { display: flex; }
-.grid { display: grid; }
-.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
-.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
-.gap-6 { gap: 1.5rem; }
-.space-x-4 > * + * { margin-left: 1rem; }
-.space-y-6 > * + * { margin-top: 1.5rem; }
-.items-center { align-items: center; }
-.justify-between { justify-content: space-between; }
-
-.rounded { border-radius: 0.25rem; }
-.rounded-lg { border-radius: 0.5rem; }
-.shadow { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); }
-
-.border { border-width: 1px; }
-.border-4 { border-width: 4px; }
-.border-dashed { border-style: dashed; }
-.border-gray-200 { border-color: #e5e7eb; }
-
-.text-center { text-align: center; }
-
-.hover\:bg-blue-700:hover { background-color: #1d4ed8; }
-.hover\:bg-red-600:hover { background-color: #dc2626; }
-.hover\:bg-green-600:hover { background-color: #059669; }
-.hover\:text-gray-900:hover { color: #111827; }
-
-.transition-colors {
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-}
-
-/* Navigation styles */
-nav {
-  border-bottom: 1px solid #e5e7eb;
-}
-
-nav a {
-  text-decoration: none;
-  transition: color 0.15s ease-in-out;
+  font-family: "Barlow Semi Condensed", sans-serif;
+  font-weight: 400;
+  font-style: normal;
+  font-size: 15px;
+  color: var(--text);
+  background-color: var(--bg);
+  line-height: 1.8;
 }
 
-/* Table styles */
-table {
-  border-collapse: collapse;
-  width: 100%;
-}
-
-th, td {
-  text-align: left;
-  border-bottom: 1px solid #e5e7eb;
-}
-
-th {
-  background-color: #f9fafb;
-  font-weight: 500;
-  text-transform: uppercase;
-  letter-spacing: 0.025em;
-}
-
-/* Form styles */
-input[type="text"],
-input[type="email"],
-textarea {
-  border: 1px solid #d1d5db;
-  border-radius: 0.375rem;
-  padding: 0.5rem 0.75rem;
-  width: 100%;
-  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-}
-
-input:focus,
-textarea:focus {
-  outline: none;
-  border-color: #3b82f6;
-  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
-}
-
-button {
-  cursor: pointer;
-  border: none;
-  border-radius: 0.375rem;
-  font-weight: 500;
+main {
+  width: 800px;
+  margin: 50px auto 0;
   text-align: center;
-  transition: background-color 0.15s ease-in-out;
-}
-
-button:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-code {
-  background-color: #f3f4f6;
-  padding: 0.125rem 0.5rem;
-  border-radius: 0.25rem;
-  font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
-}
-
-/* Media queries for responsiveness */
-@media (min-width: 768px) {
-  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
-  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
-}
-
-@media (min-width: 640px) {
-  .sm\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
-  .sm\:px-0 { padding-left: 0; padding-right: 0; }
+  h3 {
+    font-size: 50px;
+    font-weight: 400;
+    color: #374151;
+    margin-bottom: 30px;
+    em {
+      font-style: normal;
+      color: var(--accent);
+    }
+  }
+  .features {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: repeat(2, 1fr);
+    grid-column-gap: 20px;
+    grid-row-gap: 20px;
+    margin-top: 50px;
+    .feature {
+      padding: 20px;
+      background-color: var(--bg-feature);
+      border: 1px solid var(--border-feature);
+      border-radius: 10px;
+      text-align: left;
+      h4 {
+        text-align: left;
+        color: var(--accent);
+      }
+    }
+  }
+  .links {
+    display: flex;
+    justify-content: center;
+    margin-top: 50px;
+    a {
+      display: inline-block;
+      padding: 7px 15px;
+      margin: 0 20px;
+      border-radius: 10px;
+      text-decoration: none;
+      color: var(--text);
+      background-color: var(--bg-feature);
+      border: 1px solid var(--border-feature);
+      &:hover {
+        border-color: var(--border-link-hover);
+      }
+    }
+  }
 }

package/src/templates/web/resources/islands/counter.vue

@@ -1,42 +0,0 @@
-<template>
-  <div class="flex items-center space-x-4">
-    <button
-      @click="decrement"
-      class="px-3 py-1 bg-red-500 text-white rounded hover:bg-red-600 transition-colors"
-    >
-      -
-    </button>
-
-    <span class="text-xl font-bold text-gray-900 min-w-[3rem] text-center">
-      {{ count }}
-    </span>
-
-    <button
-      @click="increment"
-      class="px-3 py-1 bg-green-500 text-white rounded hover:bg-green-600 transition-colors"
-    >
-      +
-    </button>
-
-    <span class="text-sm text-gray-600 ml-4">{{ label }}</span>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-
-const props = defineProps({
-  initial: { type: Number, default: 0 },
-  label: { type: String, default: 'Counter' }
-})
-
-const count = ref(props.initial)
-
-function increment() {
-  count.value++
-}
-
-function decrement() {
-  count.value--
-}
-</script>

package/src/templates/web/resources/views/layouts/app.strav

@@ -3,30 +3,16 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>{{ title }} - __PROJECT_NAME__</title>
+  <title>{{ title }} - Strav Spring</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:ital,wght@0,400;0,500;1,400;1,500&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="{{ asset('/css/app.css') }}">
-  @stack('styles')
 </head>
 <body class="bg-gray-50">
-  <nav class="bg-white shadow">
-    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-      <div class="flex justify-between h-16">
-        <div class="flex items-center">
-          <a href="/" class="text-xl font-bold text-gray-900">__PROJECT_NAME__</a>
-        </div>
-        <div class="flex items-center space-x-4">
-          <a href="/" class="text-gray-600 hover:text-gray-900">Home</a>
-          <a href="/users" class="text-gray-600 hover:text-gray-900">Users</a>
-        </div>
-      </div>
-    </div>
-  </nav>
-
-  <main class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
+  <main>
     @show('content')
   </main>
-
   @islands
-  @stack('scripts')
 </body>
 </html>

package/src/templates/web/resources/views/pages/home.strav

@@ -1,52 +1,31 @@
 @layout('layouts/app')
 
 @section('content')
-  <div class="px-4 py-6 sm:px-0">
-    <div class="border-4 border-dashed border-gray-200 rounded-lg">
-      <div class="text-center py-12">
-        <h1 class="text-4xl font-bold text-gray-900 mb-4">{{ message }}</h1>
-        <p class="text-lg text-gray-600 mb-8">
-          You have successfully created a new Strav application. Start building something amazing!
-        </p>
-
-        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-4xl mx-auto mb-8">
-          <div class="bg-white p-6 rounded-lg shadow">
-            <h3 class="text-lg font-semibold text-gray-900 mb-2">Database Ready</h3>
-            <p class="text-gray-600">{{ userCount }} users in the database</p>
-          </div>
-
-          <div class="bg-white p-6 rounded-lg shadow">
-            <h3 class="text-lg font-semibold text-gray-900 mb-2">Vue Islands</h3>
-            <p class="text-gray-600">Interactive components below</p>
-          </div>
-
-          <div class="bg-white p-6 rounded-lg shadow">
-            <h3 class="text-lg font-semibold text-gray-900 mb-2">TypeScript</h3>
-            <p class="text-gray-600">Full type safety everywhere</p>
-          </div>
-        </div>
-
-        {{-- Demo Vue Islands --}}
-        <div class="space-y-6">
-          <h2 class="text-2xl font-bold text-gray-900">Vue Islands Demo</h2>
-
-          <div class="bg-white p-6 rounded-lg shadow max-w-md mx-auto">
-            <h3 class="text-lg font-semibold mb-4">Counter Component</h3>
-            <vue:counter :initial="5" label="Click me!" />
-          </div>
-
-          <div class="bg-white p-6 rounded-lg shadow max-w-md mx-auto">
-            <h3 class="text-lg font-semibold mb-4">User Search</h3>
-            <vue:user-search placeholder="Search users..." :userCount="{{ userCount }}" />
-          </div>
-        </div>
-
-        <div class="mt-8">
-          <a href="/users" class="inline-flex items-center px-4 py-2 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700">
-            View Users
-          </a>
-        </div>
-      </div>
+  <h3>Welcome <em>Strav Spring</em></h3>
+  <p>
+    You're all set. Your project is live and ready to build. <br/>
+    Blazing fast, powered by Bun and Vue.js
+  </p>
+  <div class="features">
+    <div class="feature">
+      <h4>Schema-First Architecture</h4>
+      <p>Define your database schema once, automatically migrations and models. No more manual SQL and model boilerplate.</p>
+    </div>
+    <div class="feature">
+      <h4>Vue Islands</h4>
+      <p>Embed Vue.js components as interactive islands within server-rendered HTML. Get reactivity where you need it without the complexity of a full SPA.</p>
+    </div>
+    <div class="feature">
+      <h4>AI as a First-Class Citizen</h4>
+      <p>Built-in AI agents, workflows, and memory management with multi-provider support (Claude, GPT, Gemini). Create AI-powered features with a single import.</p>
     </div>
+    <div class="feature">
+      <h4>Zero-Config Real-Time Stack</h4>
+      <p>WebSocket broadcasting, multi-channel notifications, and transactional email built-in. From chat to live updates, ship real-time features instantly.</p>
+    </div>
+  </div>
+  <div class="links">
+    <a href="https://spring.strav.dev/docs" target="_blank">Documentation</a>
+    <a href="https://github.com/stravigor/strav" target="_blank">GitHub</a>
   </div>
 @end

package/src/templates/web/start/routes.ts

@@ -1,9 +1,8 @@
 import { router } from '@strav/http'
-import HomeController from '../app/controllers/home_controller'
+import HomeController from '../app/controllers/home_controller.ts'
 
 // Web routes
 router.get('/', [HomeController, 'index'])
-router.get('/users', [HomeController, 'users'])
 
 // Health check endpoint
 router.get('/health', async (ctx) => {

package/src/templates/shared/.env

@@ -1,14 +0,0 @@
-APP_ENV=local
-APP_KEY=__APP_KEY__
-APP_DEBUG=true
-APP_URL=http://localhost:3000
-APP_PORT=3000
-
-DB_HOST=127.0.0.1
-DB_PORT=5432
-DB_USER=liva
-DB_PASSWORD=password1234
-DB_DATABASE=__DB_NAME__
-
-SESSION_SECRET=__APP_KEY__
-SESSION_COOKIE_NAME=session

package/src/templates/shared/storage/cache/.gitkeep

@@ -1 +0,0 @@
-# This file keeps the cache directory in git

package/src/templates/shared/storage/logs/.gitkeep

@@ -1 +0,0 @@
-# This file keeps the logs directory in git

package/src/templates/web/resources/islands/user_manager.vue

@@ -1,127 +0,0 @@
-<template>
-  <div class="bg-white p-6 rounded-lg shadow">
-    <h3 class="text-lg font-semibold text-gray-900 mb-4">Interactive User Management</h3>
-
-    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-      <!-- Add User Form -->
-      <div>
-        <h4 class="font-medium text-gray-900 mb-3">Add New User</h4>
-        <form @submit.prevent="addUser" class="space-y-3">
-          <input
-            v-model="newUser.name"
-            type="text"
-            placeholder="Full Name"
-            required
-            class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"
-          />
-          <input
-            v-model="newUser.email"
-            type="email"
-            placeholder="Email Address"
-            required
-            class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"
-          />
-          <button
-            type="submit"
-            :disabled="isLoading"
-            class="w-full px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50"
-          >
-            {{ isLoading ? 'Adding...' : 'Add User' }}
-          </button>
-        </form>
-      </div>
-
-      <!-- User Stats -->
-      <div>
-        <h4 class="font-medium text-gray-900 mb-3">Statistics</h4>
-        <div class="space-y-2">
-          <div class="flex justify-between">
-            <span class="text-gray-600">Total Users:</span>
-            <span class="font-semibold">{{ users.length }}</span>
-          </div>
-          <div class="flex justify-between">
-            <span class="text-gray-600">Users Added:</span>
-            <span class="font-semibold text-green-600">+{{ addedCount }}</span>
-          </div>
-          <div class="flex justify-between">
-            <span class="text-gray-600">Last Added:</span>
-            <span class="text-sm text-gray-500">
-              {{ lastAdded || 'None yet' }}
-            </span>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- Recent Users List -->
-    <div class="mt-6">
-      <h4 class="font-medium text-gray-900 mb-3">Recent Users</h4>
-      <div v-if="users.length === 0" class="text-center text-gray-500 py-8">
-        No users yet. Add one above!
-      </div>
-      <div v-else class="space-y-2 max-h-48 overflow-y-auto">
-        <div
-          v-for="(user, index) in users.slice(-5).reverse()"
-          :key="user.id || index"
-          class="flex items-center justify-between p-3 bg-gray-50 rounded-md"
-        >
-          <div>
-            <div class="font-medium text-gray-900">{{ user.name }}</div>
-            <div class="text-sm text-gray-500">{{ user.email }}</div>
-          </div>
-          <span v-if="index === 0" class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded">
-            Latest
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, reactive, computed } from 'vue'
-
-const props = defineProps({
-  initialUsers: { type: String, default: '[]' }
-})
-
-// Parse initial users from JSON string
-const users = ref(JSON.parse(props.initialUsers))
-const addedCount = ref(0)
-const isLoading = ref(false)
-
-const newUser = reactive({
-  name: '',
-  email: ''
-})
-
-const lastAdded = computed(() => {
-  if (addedCount.value === 0) return null
-  const latest = users.value[users.value.length - 1]
-  return latest ? `${latest.name} (${latest.email})` : null
-})
-
-async function addUser() {
-  if (!newUser.name || !newUser.email) return
-
-  isLoading.value = true
-
-  // Simulate API call
-  await new Promise(resolve => setTimeout(resolve, 500))
-
-  // Add the new user
-  users.value.push({
-    id: crypto.randomUUID(),
-    name: newUser.name,
-    email: newUser.email,
-    created_at: new Date()
-  })
-
-  addedCount.value++
-
-  // Reset form
-  newUser.name = ''
-  newUser.email = ''
-  isLoading.value = false
-}
-</script>

package/src/templates/web/resources/islands/user_search.vue

@@ -1,71 +0,0 @@
-<template>
-  <div class="space-y-4">
-    <div class="relative">
-      <input
-        v-model="searchTerm"
-        type="text"
-        :placeholder="placeholder"
-        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-      />
-      <div class="absolute inset-y-0 right-0 pr-3 flex items-center">
-        <svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
-        </svg>
-      </div>
-    </div>
-
-    <div class="text-sm text-gray-600">
-      <span v-if="searchTerm">
-        Searching for "{{ searchTerm }}"...
-      </span>
-      <span v-else>
-        Search through {{ userCount }} users
-      </span>
-    </div>
-
-    <div v-if="searchTerm && searchResults.length > 0" class="border rounded-lg p-4 bg-gray-50">
-      <p class="text-sm font-medium text-gray-900 mb-2">Search Results:</p>
-      <ul class="space-y-1">
-        <li v-for="result in searchResults" :key="result" class="text-sm text-gray-700">
-          • {{ result }}
-        </li>
-      </ul>
-    </div>
-
-    <div v-else-if="searchTerm" class="border rounded-lg p-4 bg-gray-50 text-center text-gray-500">
-      No results found for "{{ searchTerm }}"
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, computed, watch } from 'vue'
-
-const props = defineProps({
-  placeholder: { type: String, default: 'Search...' },
-  userCount: { type: Number, default: 0 }
-})
-
-const searchTerm = ref('')
-const searchResults = computed(() => {
-  if (!searchTerm.value) return []
-
-  // Mock search results - in a real app, this would call an API
-  const mockResults = [
-    'John Doe (john@example.com)',
-    'Jane Smith (jane@example.com)',
-    'Bob Johnson (bob@example.com)'
-  ]
-
-  return mockResults.filter(result =>
-    result.toLowerCase().includes(searchTerm.value.toLowerCase())
-  )
-})
-
-// Demo of reactive watchers
-watch(searchTerm, (newTerm) => {
-  if (newTerm) {
-    console.log(`Searching for: ${newTerm}`)
-  }
-})
-</script>

package/src/templates/web/resources/views/pages/users.strav

@@ -1,63 +0,0 @@
-@layout('layouts/app')
-
-@section('content')
-  <div class="px-4 py-6 sm:px-0">
-    <div class="sm:flex sm:items-center">
-      <div class="sm:flex-auto">
-        <h1 class="text-2xl font-semibold text-gray-900">Users</h1>
-        <p class="mt-2 text-sm text-gray-700">
-          A list of all users in your application.
-        </p>
-      </div>
-    </div>
-
-    <div class="mt-8 flow-root">
-      <div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
-        <div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
-          <div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
-            <table class="min-w-full divide-y divide-gray-300">
-              <thead class="bg-gray-50">
-                <tr>
-                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wide">Name</th>
-                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wide">Email</th>
-                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wide">Created</th>
-                </tr>
-              </thead>
-              <tbody class="bg-white divide-y divide-gray-200">
-                @each(user in users)
-                  <tr @class([
-                    'hover:bg-gray-50',
-                    'bg-yellow-50' => $first,
-                  ])>
-                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
-                      {{ user.name }}
-                    </td>
-                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
-                      {{ user.email }}
-                    </td>
-                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
-                      {{ user.created_at?.toLocaleDateString() }}
-                    </td>
-                  </tr>
-                @end
-
-                @if(users.length === 0)
-                  <tr>
-                    <td colspan="3" class="px-6 py-12 text-center text-sm text-gray-500">
-                      No users found. Run <code class="bg-gray-100 px-2 py-1 rounded">bun strav seed</code> to add sample data.
-                    </td>
-                  </tr>
-                @end
-              </tbody>
-            </table>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    {{-- Interactive user management with Vue island --}}
-    <div class="mt-8">
-      <vue:user-manager :initialUsers="{{ JSON.stringify(users) }}" />
-    </div>
-  </div>
-@end