create-svadmin 0.1.0

package/README.md

@@ -0,0 +1,36 @@
+# create-svadmin
+
+The official scaffolding CLI for `headless-admin-svelte` (svadmin).
+
+Quickly bootstrap a completely configured, headless admin panel project built on Svelte 5, Shadcn Svelte, and TanStack Query.
+
+## Quick Start
+
+```bash
+npx create-svadmin@latest my-admin-app
+# or
+bunx create-svadmin@latest my-admin-app
+```
+
+Follow the interactive prompts to:
+1. Name your project.
+2. Choose a default Data Provider (Simple REST, Supabase, GraphQL, or Custom).
+
+## What's Included
+
+The generated project is pre-configured with:
+- **SvelteKit** + **Vite** (Svelte 5 Runes)
+- **Tailwind CSS** + **Shadcn Svelte** UI components
+- **@svadmin/core**: The headless business logic and hooks (useTable, useForm, useAuth, etc.)
+- **@svadmin/ui**: Beautiful default dashboard UI, standalone CRUD buttons, and data tables.
+- Pre-wired **TanStack Query** for client-state management.
+
+## Start Developing
+
+Once scaffolded, `cd` into your directory, install dependencies, and start the development server:
+
+```bash
+cd my-admin-app
+bun install
+bun run dev
+```

package/index.js

@@ -0,0 +1,134 @@
+#!/usr/bin/env node
+
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import prompts from 'prompts';
+import pc from 'picocolors';
+import { execSync } from 'child_process';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+async function init() {
+  console.log(`\n${pc.cyan('Welcome to create-svadmin!')}\n`);
+
+  const response = await prompts([
+    {
+      type: 'text',
+      name: 'projectName',
+      message: 'Project name:',
+      initial: 'svadmin-app',
+      validate: (value) => {
+        if (!value.trim()) return 'Project name is required';
+        if (fs.existsSync(value.trim()) && fs.readdirSync(value.trim()).length > 0) {
+          return 'Directory already exists and is not empty';
+        }
+        return true;
+      }
+    },
+    {
+      type: 'select',
+      name: 'dataProvider',
+      message: 'Choose a default Data Provider:',
+      choices: [
+        { title: 'Simple REST', value: 'simple-rest', description: 'Standard JSON APIs / JSON Server' },
+        { title: 'Supabase', value: 'supabase', description: 'PostgreSQL Backend-as-a-Service' },
+        { title: 'GraphQL', value: 'graphql', description: 'Generic GraphQL endpoints' },
+        { title: 'None (Build Your Own)', value: 'none', description: 'Implement the DataProvider interface yourself' }
+      ],
+      initial: 0
+    }
+  ]);
+
+  if (!response.projectName) {
+    console.log(pc.red('Operation cancelled.'));
+    return;
+  }
+
+  const projectDir = path.resolve(process.cwd(), response.projectName.trim());
+  
+  if (!fs.existsSync(projectDir)) {
+    fs.mkdirSync(projectDir, { recursive: true });
+  }
+
+  console.log(`\nScaffolding project in ${pc.green(projectDir)}...`);
+
+  // Basic template files
+  const templateDir = path.join(__dirname, 'template');
+  
+  // We will create the template files dynamically here to avoid needing a complex nested template repo directory.
+  // In a real scenario, we'd copy `templateDir` contents recursively.
+  const packageJson = {
+    name: response.projectName,
+    version: "0.1.0",
+    private: true,
+    type: "module",
+    scripts: {
+      "dev": "vite dev",
+      "build": "vite build",
+      "preview": "vite preview",
+      "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json"
+    },
+    dependencies: {
+      "@svadmin/core": "latest",
+      "@svadmin/ui": "latest",
+      "lucide-svelte": "^0.475.0",
+    },
+    devDependencies: {
+      "@sveltejs/adapter-auto": "^4.0.0",
+      "@sveltejs/kit": "^2.17.2",
+      "@sveltejs/vite-plugin-svelte": "^5.0.0",
+      "svelte": "^5.20.0",
+      "tailwindcss": "^3.4.17",
+      "vite": "^6.1.0"
+    }
+  };
+
+  if (response.dataProvider === 'simple-rest') {
+    packageJson.dependencies["@svadmin/simple-rest"] = "latest";
+  } else if (response.dataProvider === 'supabase') {
+    packageJson.dependencies["@svadmin/supabase"] = "latest";
+    packageJson.dependencies["@supabase/supabase-js"] = "^2.0.0";
+  } else if (response.dataProvider === 'graphql') {
+    packageJson.dependencies["@svadmin/graphql"] = "latest";
+    packageJson.dependencies["graphql-request"] = "^7.1.0";
+    packageJson.dependencies["graphql"] = "^16.8.0";
+  }
+
+  fs.writeFileSync(
+    path.join(projectDir, 'package.json'),
+    JSON.stringify(packageJson, null, 2)
+  );
+
+  // Copy template files
+  function copyDir(src, dest) {
+    fs.mkdirSync(dest, { recursive: true });
+    let entries = fs.readdirSync(src, { withFileTypes: true });
+
+    for (let entry of entries) {
+      let srcPath = path.join(src, entry.name);
+      let destPath = path.join(dest, entry.name === '_gitignore' ? '.gitignore' : entry.name);
+
+      if (entry.isDirectory()) {
+        copyDir(srcPath, destPath);
+      } else {
+        fs.copyFileSync(srcPath, destPath);
+      }
+    }
+  }
+
+  if (fs.existsSync(templateDir)) {
+    copyDir(templateDir, projectDir);
+    console.log(pc.green('✔') + ' Copied template files');
+  }
+
+  // Next steps instructions
+  console.log(`\nNext steps:`);
+  console.log(`  1. ${pc.cyan(`cd ${response.projectName}`)}`);
+  console.log(`  2. ${pc.cyan('npm install')} or ${pc.cyan('bun install')}`);
+  console.log(`  3. ${pc.cyan('npm run dev')}`);
+  console.log(`\nFor documentation, visit: ${pc.blue('https://github.com/zuohuadong/svadmin')}\n`);
+}
+
+init().catch(console.error);

package/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "create-svadmin",
+  "version": "0.1.0",
+  "description": "Scaffolding tool for svadmin projects",
+  "type": "module",
+  "bin": {
+    "create-svadmin": "./index.js"
+  },
+  "scripts": {
+    "start": "node index.js"
+  },
+  "dependencies": {
+    "prompts": "^2.4.2",
+    "picocolors": "^1.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.0.0",
+    "@types/prompts": "^2.4.9"
+  },
+  "keywords": [
+    "svadmin",
+    "create",
+    "scaffold",
+    "cli"
+  ],
+  "author": "zuohuadong",
+  "license": "MIT"
+}

package/sync-template.js

@@ -0,0 +1,47 @@
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const sourceDir = path.resolve(__dirname, '../../example');
+const targetDir = path.resolve(__dirname, 'template');
+
+function copyRecursiveSync(src, dest) {
+  const exists = fs.existsSync(src);
+  const stats = exists && fs.statSync(src);
+  const isDirectory = exists && stats.isDirectory();
+  
+  if (isDirectory) {
+    if (path.basename(src) === 'node_modules' || path.basename(src) === '.svelte-kit' || path.basename(src) === 'dist') return;
+    
+    fs.mkdirSync(dest, { recursive: true });
+    fs.readdirSync(src).forEach((childItemName) => {
+      copyRecursiveSync(path.join(src, childItemName), path.join(dest, childItemName));
+    });
+  } else {
+    // Skip package.json and lockfiles as they are generated by the CLI
+    if (['package.json', 'bun.lockb', 'pnpm-lock.yaml', 'package-lock.json'].includes(path.basename(src))) return;
+    fs.copyFileSync(src, dest);
+  }
+}
+
+// Clean and recreate template
+if (fs.existsSync(targetDir)) {
+  fs.rmSync(targetDir, { recursive: true, force: true });
+}
+fs.mkdirSync(targetDir, { recursive: true });
+
+// Copy example source
+copyRecursiveSync(sourceDir, targetDir);
+
+// Re-write package.json in the template is not needed as the CLI generates it!
+// BUT we should rename .gitignore to _gitignore because npm publish ignores .gitignore
+const gitignoreSrc = path.join(targetDir, '.gitignore');
+const gitignoreDest = path.join(targetDir, '_gitignore');
+if (fs.existsSync(gitignoreSrc)) {
+  fs.renameSync(gitignoreSrc, gitignoreDest);
+}
+
+console.log('Template synced successfully from /example!');

package/template/.env.example

@@ -0,0 +1,3 @@
+# For Supabase example (optional)
+VITE_SUPABASE_URL=https://your-project.supabase.co
+VITE_SUPABASE_ANON_KEY=your-anon-key

package/template/index.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Admin Demo — svadmin</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=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/template/src/App.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import { AdminApp } from '@svadmin/ui';
+  import { createSimpleRestDataProvider } from '@svadmin/simple-rest';
+  import { resources } from './resources';
+  import { mockAuthProvider } from './providers/mockAuth';
+
+  const dataProvider = createSimpleRestDataProvider({
+    apiUrl: 'https://jsonplaceholder.typicode.com',
+  });
+</script>
+
+<AdminApp {dataProvider} {resources} authProvider={mockAuthProvider} title="svadmin Demo" locale="en" />

package/template/src/app.css

@@ -0,0 +1,263 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+/* Scan workspace-linked packages — Tailwind v4 skips node_modules by default */
+@source "../node_modules/@svadmin/ui";
+@source "../node_modules/@svadmin/core";
+
+@custom-variant dark (&:is(.dark *));
+
+/* ── Tailwind theme bridge (semantic tokens → CSS variables) ── */
+@theme inline {
+  --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));
+  --color-sidebar: hsl(var(--sidebar));
+  --color-sidebar-foreground: hsl(var(--sidebar-foreground));
+  --color-sidebar-primary: hsl(var(--sidebar-primary));
+  --color-sidebar-primary-foreground: hsl(var(--sidebar-primary-foreground));
+  --color-sidebar-accent: hsl(var(--sidebar-accent));
+  --color-sidebar-accent-foreground: hsl(var(--sidebar-accent-foreground));
+  --color-sidebar-border: hsl(var(--sidebar-border));
+  --color-sidebar-ring: hsl(var(--sidebar-ring));
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+
+/* ╔═══════════════════════════════════════════════════════════╗
+   ║              COLOR THEME PRESETS                         ║
+   ║  Each [data-theme] block only overrides --primary,       ║
+   ║  --ring, --sidebar-primary, and accent tints.            ║
+   ║  Neutral colors (bg, card, muted, border) are shared.    ║
+   ╚═══════════════════════════════════════════════════════════╝ */
+
+/* ── Shared light base ────────────────────────────────────── */
+:root {
+  --radius: 0.75rem;
+  --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%;
+  --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%;
+  --sidebar: 0 0% 98%;
+  --sidebar-foreground: 222.2 84% 4.9%;
+  --sidebar-accent: 210 40% 96.1%;
+  --sidebar-accent-foreground: 222.2 47.4% 11.2%;
+  --sidebar-border: 214.3 31.8% 91.4%;
+}
+
+/* ── Shared dark base ─────────────────────────────────────── */
+.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%;
+  --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%;
+  --sidebar: 222.2 84% 4.9%;
+  --sidebar-foreground: 210 40% 98%;
+  --sidebar-accent: 217.2 32.6% 17.5%;
+  --sidebar-accent-foreground: 210 40% 98%;
+  --sidebar-border: 217.2 32.6% 17.5%;
+}
+
+/* ── 🔵 Blue (default) ────────────────────────────────────── */
+:root,
+[data-theme="blue"] {
+  --primary: 221.2 83.2% 53.3%;
+  --primary-foreground: 210 40% 98%;
+  --ring: 221.2 83.2% 53.3%;
+  --sidebar-primary: 221.2 83.2% 53.3%;
+  --sidebar-primary-foreground: 210 40% 98%;
+  --sidebar-ring: 221.2 83.2% 53.3%;
+}
+.dark[data-theme="blue"],
+[data-theme="blue"] .dark {
+  --primary: 217.2 91.2% 59.8%;
+  --primary-foreground: 222.2 47.4% 11.2%;
+  --ring: 224.3 76.3% 48%;
+  --sidebar-primary: 217.2 91.2% 59.8%;
+  --sidebar-primary-foreground: 222.2 47.4% 11.2%;
+  --sidebar-ring: 224.3 76.3% 48%;
+}
+
+/* ── 🟢 Green ─────────────────────────────────────────────── */
+[data-theme="green"] {
+  --primary: 142.1 76.2% 36.3%;
+  --primary-foreground: 355.7 100% 97.3%;
+  --ring: 142.1 76.2% 36.3%;
+  --sidebar-primary: 142.1 76.2% 36.3%;
+  --sidebar-primary-foreground: 355.7 100% 97.3%;
+  --sidebar-ring: 142.1 76.2% 36.3%;
+}
+[data-theme="green"] .dark,
+.dark[data-theme="green"] {
+  --primary: 142.1 70.6% 45.3%;
+  --primary-foreground: 144.9 80.4% 10%;
+  --ring: 142.4 71.8% 29.2%;
+  --sidebar-primary: 142.1 70.6% 45.3%;
+  --sidebar-primary-foreground: 144.9 80.4% 10%;
+  --sidebar-ring: 142.4 71.8% 29.2%;
+}
+
+/* ── 🌹 Rose ──────────────────────────────────────────────── */
+[data-theme="rose"] {
+  --primary: 346.8 77.2% 49.8%;
+  --primary-foreground: 355.7 100% 97.3%;
+  --ring: 346.8 77.2% 49.8%;
+  --sidebar-primary: 346.8 77.2% 49.8%;
+  --sidebar-primary-foreground: 355.7 100% 97.3%;
+  --sidebar-ring: 346.8 77.2% 49.8%;
+}
+[data-theme="rose"] .dark,
+.dark[data-theme="rose"] {
+  --primary: 346.8 77.2% 49.8%;
+  --primary-foreground: 355.7 100% 97.3%;
+  --ring: 346.8 77.2% 49.8%;
+  --sidebar-primary: 346.8 77.2% 49.8%;
+  --sidebar-primary-foreground: 355.7 100% 97.3%;
+  --sidebar-ring: 346.8 77.2% 49.8%;
+}
+
+/* ── 🟠 Orange ─────────────────────────────────────────────── */
+[data-theme="orange"] {
+  --primary: 24.6 95% 53.1%;
+  --primary-foreground: 60 9.1% 97.8%;
+  --ring: 24.6 95% 53.1%;
+  --sidebar-primary: 24.6 95% 53.1%;
+  --sidebar-primary-foreground: 60 9.1% 97.8%;
+  --sidebar-ring: 24.6 95% 53.1%;
+}
+[data-theme="orange"] .dark,
+.dark[data-theme="orange"] {
+  --primary: 20.5 90.2% 48.2%;
+  --primary-foreground: 60 9.1% 97.8%;
+  --ring: 20.5 90.2% 48.2%;
+  --sidebar-primary: 20.5 90.2% 48.2%;
+  --sidebar-primary-foreground: 60 9.1% 97.8%;
+  --sidebar-ring: 20.5 90.2% 48.2%;
+}
+
+/* ── 💜 Violet ─────────────────────────────────────────────── */
+[data-theme="violet"] {
+  --primary: 262.1 83.3% 57.8%;
+  --primary-foreground: 210 40% 98%;
+  --ring: 262.1 83.3% 57.8%;
+  --sidebar-primary: 262.1 83.3% 57.8%;
+  --sidebar-primary-foreground: 210 40% 98%;
+  --sidebar-ring: 262.1 83.3% 57.8%;
+}
+[data-theme="violet"] .dark,
+.dark[data-theme="violet"] {
+  --primary: 263.4 70% 50.4%;
+  --primary-foreground: 210 40% 98%;
+  --ring: 263.4 70% 50.4%;
+  --sidebar-primary: 263.4 70% 50.4%;
+  --sidebar-primary-foreground: 210 40% 98%;
+  --sidebar-ring: 263.4 70% 50.4%;
+}
+
+/* ── ⚫ Zinc (neutral) ─────────────────────────────────────── */
+[data-theme="zinc"] {
+  --primary: 240 5.9% 10%;
+  --primary-foreground: 0 0% 98%;
+  --ring: 240 5.9% 10%;
+  --sidebar-primary: 240 5.9% 10%;
+  --sidebar-primary-foreground: 0 0% 98%;
+  --sidebar-ring: 240 5.9% 10%;
+}
+[data-theme="zinc"] .dark,
+.dark[data-theme="zinc"] {
+  --primary: 0 0% 98%;
+  --primary-foreground: 240 5.9% 10%;
+  --ring: 240 4.9% 83.9%;
+  --sidebar-primary: 0 0% 98%;
+  --sidebar-primary-foreground: 240 5.9% 10%;
+  --sidebar-ring: 240 4.9% 83.9%;
+}
+
+/* ╔═══════════════════════════════════════════════════════════╗
+   ║                    BASE STYLES                           ║
+   ╚═══════════════════════════════════════════════════════════╝ */
+
+@layer base {
+  * {
+    border-color: hsl(var(--border));
+  }
+  body {
+    background-color: hsl(var(--background));
+    color: hsl(var(--foreground));
+    font-family: 'Inter', system-ui, -apple-system, sans-serif;
+    @apply antialiased min-h-screen;
+  }
+}
+
+/* ╔═══════════════════════════════════════════════════════════╗
+   ║              GLASS / GRADIENT EFFECTS                    ║
+   ╚═══════════════════════════════════════════════════════════╝ */
+
+@layer components {
+  .glass {
+    @apply bg-white/70 dark:bg-slate-900/70 backdrop-blur-lg
+           border border-white/20 dark:border-slate-800/30 shadow-xl;
+  }
+  .glass-card {
+    @apply bg-white/70 dark:bg-slate-900/70 backdrop-blur-lg
+           border border-white/20 dark:border-slate-800/30
+           shadow-xl rounded-2xl p-6
+           transition-all duration-300
+           hover:shadow-2xl hover:scale-[1.01];
+  }
+}
+
+@layer utilities {
+  .text-gradient {
+    @apply bg-clip-text text-transparent
+           bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500;
+  }
+}
+
+/* ── Scrollbar ─────────────────────────────────────────────── */
+::-webkit-scrollbar { width: 6px; height: 6px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: hsl(214.3 31.8% 80%); border-radius: 3px; }
+::-webkit-scrollbar-thumb:hover { background: hsl(214.3 31.8% 65%); }

package/template/src/main.ts

@@ -0,0 +1,7 @@
+import { mount } from 'svelte';
+import './app.css';
+import App from './App.svelte';
+
+const app = mount(App, { target: document.getElementById('app')! });
+
+export default app;

package/template/src/pages/Dashboard.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+  import { useList } from '@svadmin/core';
+  import { FileText, Users, MessageCircle, Loader2 } from 'lucide-svelte';
+
+  const postsQuery = useList({ resource: 'posts', pagination: { current: 1, pageSize: 1 } });
+  const usersQuery = useList({ resource: 'users', pagination: { current: 1, pageSize: 1 } });
+  const commentsQuery = useList({ resource: 'comments', pagination: { current: 1, pageSize: 1 } });
+
+  const stats = $derived([
+    { label: 'Total Posts', value: $postsQuery.data?.total ?? '—', Icon: FileText, color: 'bg-blue-50 text-blue-600' },
+    { label: 'Total Users', value: $usersQuery.data?.total ?? '—', Icon: Users, color: 'bg-green-50 text-green-600' },
+    { label: 'Total Comments', value: $commentsQuery.data?.total ?? '—', Icon: MessageCircle, color: 'bg-purple-50 text-purple-600' },
+  ]);
+
+  const isLoading = $derived($postsQuery.isLoading || $usersQuery.isLoading || $commentsQuery.isLoading);
+
+  const recentPosts = useList({ resource: 'posts', pagination: { current: 1, pageSize: 5 } });
+  const recentUsers = useList({ resource: 'users', pagination: { current: 1, pageSize: 5 } });
+</script>
+
+<div class="space-y-6">
+  <h1 class="text-2xl font-bold text-gray-900">Dashboard</h1>
+
+  <!-- Stats -->
+  <div class="grid gap-4 sm:grid-cols-3">
+    {#each stats as stat}
+      <div class="flex items-center gap-4 rounded-xl border border-gray-200 bg-white p-5 shadow-sm">
+        <div class="flex h-12 w-12 items-center justify-center rounded-xl {stat.color}">
+          <stat.Icon class="h-6 w-6" />
+        </div>
+        <div>
+          <p class="text-sm text-gray-500">{stat.label}</p>
+          {#if isLoading}
+            <Loader2 class="mt-1 h-5 w-5 animate-spin text-gray-300" />
+          {:else}
+            <p class="text-2xl font-bold text-gray-900">{stat.value}</p>
+          {/if}
+        </div>
+      </div>
+    {/each}
+  </div>
+
+  <!-- Recent Data -->
+  <div class="grid gap-6 lg:grid-cols-2">
+    <div class="rounded-xl border border-gray-200 bg-white shadow-sm">
+      <div class="flex items-center justify-between border-b border-gray-100 px-5 py-4">
+        <h2 class="font-semibold text-gray-900">Recent Posts</h2>
+        <a href="#/posts" class="text-sm text-primary hover:underline">View all</a>
+      </div>
+      <div class="divide-y divide-gray-50">
+        {#each $recentPosts.data?.data ?? [] as post}
+          <div class="flex items-center justify-between px-5 py-3">
+            <div>
+              <p class="text-sm font-medium text-gray-900">{post.title}</p>
+              <p class="text-xs text-gray-500">User #{post.userId}</p>
+            </div>
+          </div>
+        {/each}
+      </div>
+    </div>
+
+    <div class="rounded-xl border border-gray-200 bg-white shadow-sm">
+      <div class="flex items-center justify-between border-b border-gray-100 px-5 py-4">
+        <h2 class="font-semibold text-gray-900">Users</h2>
+        <a href="#/users" class="text-sm text-primary hover:underline">View all</a>
+      </div>
+      <div class="divide-y divide-gray-50">
+        {#each $recentUsers.data?.data ?? [] as user}
+          <div class="flex items-center justify-between px-5 py-3">
+            <div>
+              <p class="text-sm font-medium text-gray-900">{user.name}</p>
+              <p class="text-xs text-gray-500">{user.email}</p>
+            </div>
+          </div>
+        {/each}
+      </div>
+    </div>
+  </div>
+</div>

package/template/src/pages/Login.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+  import { getAuthProvider } from '@svadmin/core';
+  import { navigate } from '@svadmin/core/router';
+  import { Loader2, Shield } from 'lucide-svelte';
+
+  const auth = getAuthProvider();
+
+  let email = $state('');
+  let password = $state('');
+  let loading = $state(false);
+  let error = $state<string | null>(null);
+
+  async function handleLogin(e: Event) {
+    e.preventDefault();
+    loading = true;
+    error = null;
+
+    const result = await auth.login({ email, password });
+    if (result.success) {
+      navigate(result.redirectTo ?? '/');
+    } else {
+      error = result.error?.message ?? 'Login failed';
+    }
+    loading = false;
+  }
+</script>
+
+<div class="flex min-h-screen items-center justify-center bg-gradient-to-br from-blue-50 to-indigo-100">
+  <div class="w-full max-w-sm space-y-6 rounded-2xl bg-white p-8 shadow-xl shadow-blue-900/5">
+    <!-- Logo -->
+    <div class="text-center">
+      <div class="mx-auto flex h-14 w-14 items-center justify-center rounded-xl bg-primary-50">
+        <Shield class="h-7 w-7 text-primary" />
+      </div>
+      <h1 class="mt-4 text-xl font-bold text-gray-900">Admin Panel</h1>
+      <p class="mt-1 text-sm text-gray-500">Sign in to continue</p>
+    </div>
+
+    <!-- Error -->
+    {#if error}
+      <div class="rounded-lg bg-red-50 border border-red-200 px-4 py-3 text-sm text-red-700">
+        {error}
+      </div>
+    {/if}
+
+    <!-- Form -->
+    <form onsubmit={handleLogin} class="space-y-4">
+      <div>
+        <label for="email" class="block text-sm font-medium text-gray-700">Email</label>
+        <input
+          id="email"
+          type="email"
+          bind:value={email}
+          required
+          class="mt-1 w-full rounded-lg border border-gray-200 px-3 py-2.5 text-sm focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"
+          placeholder="admin@example.com"
+        />
+      </div>
+      <div>
+        <label for="password" class="block text-sm font-medium text-gray-700">Password</label>
+        <input
+          id="password"
+          type="password"
+          bind:value={password}
+          required
+          class="mt-1 w-full rounded-lg border border-gray-200 px-3 py-2.5 text-sm focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"
+          placeholder="••••••••"
+        />
+      </div>
+      <button
+        type="submit"
+        disabled={loading}
+        class="flex w-full items-center justify-center gap-2 rounded-lg bg-primary py-2.5 text-sm font-medium text-white hover:bg-primary-700 disabled:opacity-50 transition"
+      >
+        {#if loading}
+          <Loader2 class="h-4 w-4 animate-spin" />
+        {/if}
+        Sign in
+      </button>
+    </form>
+  </div>
+</div>

package/template/src/providers/mockAuth.ts

@@ -0,0 +1,73 @@
+import type { AuthProvider, AuthActionResult, CheckResult, Identity } from '@svadmin/core';
+
+/**
+ * Mock AuthProvider for demo/development purposes.
+ * Uses localStorage to simulate authentication state.
+ */
+
+const STORAGE_KEY = 'svadmin_demo_auth';
+
+function getStoredAuth(): { email: string } | null {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    return raw ? JSON.parse(raw) : null;
+  } catch {
+    return null;
+  }
+}
+
+export const mockAuthProvider: AuthProvider = {
+  login: async (params): Promise<AuthActionResult> => {
+    const { email, password } = params as { email: string; password: string };
+    // Simulate login — accept any email with password "demo"
+    if (!email) return { success: false, error: { message: 'Email is required' } };
+    if (password !== 'demo') return { success: false, error: { message: 'Invalid password. Use "demo".' } };
+
+    localStorage.setItem(STORAGE_KEY, JSON.stringify({ email }));
+    return { success: true, redirectTo: '/' };
+  },
+
+  logout: async (): Promise<AuthActionResult> => {
+    localStorage.removeItem(STORAGE_KEY);
+    return { success: true, redirectTo: '/login' };
+  },
+
+  check: async (): Promise<CheckResult> => {
+    const auth = getStoredAuth();
+    return auth
+      ? { authenticated: true }
+      : { authenticated: false, redirectTo: '/login' };
+  },
+
+  getIdentity: async (): Promise<Identity | null> => {
+    const auth = getStoredAuth();
+    if (!auth) return null;
+    return {
+      id: '1',
+      name: auth.email.split('@')[0],
+      email: auth.email,
+      avatar: `https://api.dicebear.com/7.x/initials/svg?seed=${auth.email}`,
+    };
+  },
+
+  register: async (params): Promise<AuthActionResult> => {
+    const { email, password } = params as { email: string; password: string };
+    if (!email || !password) return { success: false, error: { message: 'Email and password are required' } };
+    localStorage.setItem(STORAGE_KEY, JSON.stringify({ email }));
+    return { success: true, redirectTo: '/' };
+  },
+
+  forgotPassword: async (params): Promise<AuthActionResult> => {
+    const { email } = params as { email: string };
+    if (!email) return { success: false, error: { message: 'Email is required' } };
+    // Simulate sending reset email
+    return { success: true };
+  },
+
+  updatePassword: async (params): Promise<AuthActionResult> => {
+    const { password, confirmPassword } = params as { password: string; confirmPassword: string };
+    if (!password) return { success: false, error: { message: 'Password is required' } };
+    if (password !== confirmPassword) return { success: false, error: { message: 'Passwords do not match' } };
+    return { success: true, redirectTo: '/login' };
+  },
+};

package/template/src/providers/supabase.ts

@@ -0,0 +1,26 @@
+// Supabase client initialization
+
+import { createClient, type SupabaseClient } from '@supabase/supabase-js';
+
+const isDev = import.meta.env.DEV;
+const SUPABASE_URL = import.meta.env.VITE_SUPABASE_URL || (isDev ? window.location.origin : '');
+const SUPABASE_ANON_KEY = import.meta.env.VITE_SUPABASE_ANON_KEY || '';
+
+/** List of missing required env vars */
+export const missingEnvVars: string[] = [];
+if (!SUPABASE_URL) missingEnvVars.push('VITE_SUPABASE_URL');
+if (!SUPABASE_ANON_KEY) missingEnvVars.push('VITE_SUPABASE_ANON_KEY');
+
+/** Whether Supabase is properly configured with required env vars */
+export const isSupabaseConfigured = missingEnvVars.length === 0;
+
+// Only create client if configured — avoid crash on missing key
+export const supabaseClient: SupabaseClient | null = isSupabaseConfigured
+  ? createClient(SUPABASE_URL, SUPABASE_ANON_KEY, {
+      auth: {
+        persistSession: true,
+        autoRefreshToken: true,
+        detectSessionInUrl: false,
+      },
+    })
+  : null;

package/template/src/resources.ts

@@ -0,0 +1,60 @@
+// Example resource definitions — generic demo data (JSONPlaceholder-style)
+
+import type { ResourceDefinition } from '@svadmin/core';
+
+export const resources: ResourceDefinition[] = [
+  {
+    name: 'posts',
+    label: 'Posts',
+    icon: 'file-text',
+    fields: [
+      { key: 'id', label: 'ID', type: 'number', showInForm: false, width: '60px' },
+      { key: 'title', label: 'Title', type: 'text', required: true, searchable: true },
+      { key: 'body', label: 'Body', type: 'textarea', showInList: false },
+      { key: 'userId', label: 'Author', type: 'number', width: '80px' },
+    ],
+    defaultSort: { field: 'id', order: 'desc' },
+  },
+
+  {
+    name: 'users',
+    label: 'Users',
+    icon: 'users',
+    canCreate: false,
+    canDelete: false,
+    fields: [
+      { key: 'id', label: 'ID', type: 'number', showInForm: false, width: '60px' },
+      { key: 'name', label: 'Name', type: 'text', searchable: true },
+      { key: 'username', label: 'Username', type: 'text', width: '120px' },
+      { key: 'email', label: 'Email', type: 'email' },
+      { key: 'phone', label: 'Phone', type: 'phone', showInList: false },
+      { key: 'website', label: 'Website', type: 'url', showInList: false },
+    ],
+  },
+
+  {
+    name: 'comments',
+    label: 'Comments',
+    icon: 'message-circle',
+    fields: [
+      { key: 'id', label: 'ID', type: 'number', showInForm: false, width: '60px' },
+      { key: 'postId', label: 'Post', type: 'number', width: '80px' },
+      { key: 'name', label: 'Title', type: 'text', searchable: true },
+      { key: 'email', label: 'Email', type: 'email', width: '180px' },
+      { key: 'body', label: 'Body', type: 'textarea', showInList: false },
+    ],
+    defaultSort: { field: 'id', order: 'desc' },
+  },
+
+  {
+    name: 'todos',
+    label: 'Todos',
+    icon: 'check-square',
+    fields: [
+      { key: 'id', label: 'ID', type: 'number', showInForm: false, width: '60px' },
+      { key: 'title', label: 'Title', type: 'text', required: true, searchable: true },
+      { key: 'completed', label: 'Done', type: 'boolean', width: '80px' },
+      { key: 'userId', label: 'User', type: 'number', width: '80px' },
+    ],
+  },
+];

package/template/src/vite-env.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="svelte" />
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_SUPABASE_URL: string;
+  readonly VITE_SUPABASE_ANON_KEY: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}

package/template/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "types": ["vite/client"]
+  },
+  "include": ["src/**/*.ts", "src/**/*.svelte", "vite.config.ts"]
+}

package/template/vite.config.ts

@@ -0,0 +1,13 @@
+import { defineConfig } from 'vite';
+import { svelte } from '@sveltejs/vite-plugin-svelte';
+import tailwindcss from '@tailwindcss/vite';
+
+export default defineConfig({
+  plugins: [
+    tailwindcss(),
+    svelte(),
+  ],
+  server: {
+    port: 5174,
+  },
+});