@svadmin/create 0.29.0 → 0.31.0

package/README.md

@@ -127,7 +127,7 @@ bun src/sync-template.ts
 bun run build
 ```
 Generated projects include root-level `DESIGN.md` and `AGENTS.md` files. They
-define the Stripe-first visual language, page information budget, feedback
+define svadmin's Admin UI design principles, page information budget, feedback
 ownership, and AI generation acceptance rules.
 
 Existing projects can preview and install any missing guidance files without

package/dist/index.js

@@ -6526,9 +6526,10 @@ var fieldTypes = {
   number: true,
   boolean: true,
   date: true,
-  time: true,
-  datetime: true,
   daterange: true,
+  datetime: true,
+  time: true,
+  percent: true,
   select: true,
   multiselect: true,
   tags: true,
@@ -6543,7 +6544,6 @@ var fieldTypes = {
   email: true,
   phone: true,
   currency: true,
-  percent: true,
   file: true,
   markdown: true,
   password: true,
@@ -7453,7 +7453,7 @@ bun run dev
 
 ## Stack
 
-- **UI**: Svelte 5 + Bits UI + precompiled Panda CSS
+- **UI**: Svelte 5 + Bits UI + Tailwind semantic recipes (precompiled CSS)
 - **Data**: ${dpLabel} DataProvider
 - **Auth**: ${authLabel}
 - **State**: TanStack Query v6

package/guidance/DESIGN.md

@@ -1,14 +1,14 @@
 ---
 version: "alpha"
-name: "svadmin Stripe-first"
+name: "svadmin Admin UI"
 description: "A restrained, precise product interface for repeated administrative work."
 colors:
-  background: "oklch(0.982 0.003 264)"
+  background: "oklch(0.985 0.001 264)"
   foreground: "oklch(0.205 0.012 264)"
   surface: "oklch(1 0 0)"
   surface-subtle: "oklch(0.968 0.004 264)"
   muted-foreground: "oklch(0.493 0.018 264)"
-  border: "oklch(0.914 0.006 264)"
+  border: "oklch(0.925 0.003 264)"
   primary: "oklch(0.558 0.22 278)"
   on-primary: "oklch(0.99 0 0)"
   success: "oklch(0.51 0.16 151)"
@@ -91,7 +91,17 @@ components:
 
 ## Overview
 
-svadmin uses a Stripe-first product language: quiet neutral canvases, precise
+### Visual update: September 21, 2026
+
+The current UI follows Metronic Tailwind demo1 for layout rhythm, light surfaces,
+thin borders and restrained shadows, as requested by the project owner.
+This supersedes the older capability-only reference limitation below.
+Keep SVAdmin's own branding, semantic tokens, OpenUI contracts and Bits UI behavior.
+App chrome must use explicit anatomy hooks; never style every business `header`.
+Package utilities live in sublayers of `utilities`, so host-authored responsive
+utilities win regardless of lazy package stylesheet load order.
+
+svadmin defines its own Admin UI product language: quiet neutral canvases, precise
 type, hairline borders, restrained elevation, compact controls, and clear
 feedback for repeated operational work. The interface should feel like a real
 administrative product with trustworthy states, not a collection of dashboard
@@ -104,7 +114,7 @@ visual authority.
 
 ### Design principles
 
-Seven principles turn the Stripe-first direction into reviewable product
+Seven principles turn svadmin's design direction into reviewable product
 decisions. They apply to built-in components, examples, generated applications,
 and documentation:
 
@@ -121,7 +131,7 @@ and documentation:
    destructive, reversible, and completed states expose their scope and next
    step. Data freshness, permission boundaries, and action consequences must be
    visible when they affect a decision.
-5. **Restrained like Stripe:** neutral surfaces and precise hierarchy carry the
+5. **Restrained by purpose:** neutral surfaces and precise hierarchy carry the
    interface. Accent, elevation, radius, animation, and decoration are used only
    when they clarify priority or interaction.
 6. **Accessible by construction:** keyboard access, visible focus, semantic
@@ -187,10 +197,10 @@ may increase slightly for genuinely clickable items, without translation or
 glow. Dialogs and menus receive stronger depth because they are floating
 layers. Dark mode keeps the same hierarchy with low-chroma surfaces.
 
-- **Control Shadow**: `0 1px 2px rgb(15 23 42 / 0.05), 0 0 0 1px rgb(15 23 42 / 0.025)`
-- **Surface Shadow**: `0 1px 2px rgb(15 23 42 / 0.035), 0 1px 3px rgb(15 23 42 / 0.025)`
-- **Surface Hover Shadow**: `0 2px 5px rgb(15 23 42 / 0.055), 0 1px 2px rgb(15 23 42 / 0.035)`
-- **Overlay Shadow**: `0 18px 48px rgb(15 23 42 / 0.14), 0 4px 12px rgb(15 23 42 / 0.08)`
+- **Control Shadow**: `0 1px 2px rgb(15 23 42 / 0.09), 0 0 0 1px rgb(15 23 42 / 0.045)`
+- **Surface Shadow**: `0 1px 2px rgb(15 23 42 / 0.08), 0 10px 24px rgb(15 23 42 / 0.07)`
+- **Surface Hover Shadow**: `0 3px 8px rgb(15 23 42 / 0.1), 0 16px 32px rgb(15 23 42 / 0.08)`
+- **Overlay Shadow**: `0 20px 52px rgb(15 23 42 / 0.18), 0 6px 16px rgb(15 23 42 / 0.1)`
 
 ## Shapes
 
@@ -226,7 +236,7 @@ Transitions provide clear state confirmation without delaying user action:
 
 The reference stack is layered. It is not a visual mixture:
 
-- **Stripe is the visual authority:** hierarchy, restraint, neutral surfaces,
+- **svadmin owns its visual principles:** hierarchy, restraint, neutral surfaces,
   typography, density, and interaction tone.
 - **Refine is an application-model reference:** resource routing, CRUD flows,
   provider state, access control, and mutation ownership.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svadmin/create",
-  "version": "0.29.0",
+  "version": "0.31.0",
   "description": "Scaffolding tool for svadmin projects",
   "type": "module",
   "bin": {
@@ -27,7 +27,7 @@
     "@types/node": "^26.4.0",
     "@types/prompts": "^2.4.9",
     "typescript": "^7.0.2",
-    "@svadmin/core": "^0.53.0"
+    "@svadmin/core": "^0.55.0"
   },
   "keywords": [
     "svadmin",

package/scaffold-manifest.json

@@ -10,9 +10,9 @@
     "check": "svelte-check --tsconfig ./tsconfig.json"
   },
   "dependencies": {
-    "@svadmin/core": "^0.53.0",
-    "@svadmin/ai-elements": "^0.8.0",
-    "@svadmin/ui": "^0.73.0",
+    "@svadmin/core": "^0.55.0",
+    "@svadmin/ai-elements": "^0.10.0",
+    "@svadmin/ui": "^0.75.0",
     "@sinclair/typebox": "^0.34.52",
     "@tanstack/svelte-query": "^6.1.48",
     "@lucide/svelte": "^1.35.0"
@@ -30,16 +30,16 @@
         "@refinedev/core": "^5.0.12"
       },
       "simple-rest": {
-        "@svadmin/simple-rest": "^0.10.7",
+        "@svadmin/simple-rest": "^0.11.0",
         "@refinedev/simple-rest": "^6.0.1"
       },
       "supabase": {
-        "@svadmin/supabase": "^0.15.1",
+        "@svadmin/supabase": "^0.16.0",
         "@supabase/supabase-js": "^2.112.4",
         "@refinedev/supabase": "^6.0.2"
       },
       "graphql": {
-        "@svadmin/graphql": "^0.10.7",
+        "@svadmin/graphql": "^0.11.0",
         "@refinedev/graphql": "^8.0.1",
         "graphql-request": "^7.4.0",
         "graphql": "^16.8.0"

package/template/src/App.svelte

@@ -1,12 +1,24 @@
 <script lang="ts">
-  import { AdminApp } from '@svadmin/ui';
+  import { AdminApp, DataState } from '@svadmin/ui';
   import { createSimpleRestDataProvider } from '@svadmin/simple-rest';
   import { resources } from './resources';
   import { mockAuthProvider } from './providers/mockAuth';
+  import Dashboard from './pages/Dashboard.svelte';
+  import Login from './pages/Login.svelte';
 
-  const dataProvider = createSimpleRestDataProvider({
-    apiUrl: 'https://jsonplaceholder.typicode.com',
-  });
+  function connect() {
+    return createSimpleRestDataProvider('https://jsonplaceholder.typicode.com');
+  }
+  let connection = $state(connect());
 </script>
 
-<AdminApp {dataProvider} {resources} authProvider={mockAuthProvider} title="svadmin Demo" locale="en" />
+{#await connection}
+  <DataState state="loading" />
+{:then dataProvider}
+  <AdminApp {dataProvider} {resources} authProvider={mockAuthProvider} title="svadmin Demo" locale="en">
+    {#snippet dashboard()}<Dashboard />{/snippet}
+    {#snippet loginPage()}<Login />{/snippet}
+  </AdminApp>
+{:catch}
+  <DataState state="error" title="Unable to initialize data provider" retry={() => { connection = connect(); }} />
+{/await}

package/template/src/pages/Dashboard.svelte

@@ -82,7 +82,7 @@
           </div>
         {:else}
           <DataState state="empty">
-            {#snippet action()}<Button href="#/users/create">Create user</Button>{/snippet}
+            {#snippet action()}<Button href="#/users">View users</Button>{/snippet}
           </DataState>
         {/each}
       </div>

package/template/src/pages/Login.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
-  import { getAuthProvider } from '@svadmin/core';
-  import { navigate } from '@svadmin/core/router';
+  import { useLogin } from '@svadmin/core';
   import { Loader2, Shield } from '@lucide/svelte';
 
-  const auth = getAuthProvider();
+  const login = useLogin({ successNotification: false, errorMessage: false });
 
   let email = $state('');
   let password = $state('');
@@ -12,16 +11,20 @@
 
   async function handleLogin(e: Event) {
     e.preventDefault();
+    if (loading) return;
     loading = true;
     error = null;
 
-    const result = await auth.login({ email, password });
-    if (result.success) {
-      navigate(result.redirectTo ?? '/');
-    } else {
-      error = result.error?.message ?? 'Login failed';
+    try {
+      const result = await login.mutate({ email, password });
+      if (!result.success) {
+        error = result.error?.message ?? 'Login failed';
+      }
+    } catch {
+      error = 'Unable to sign in. Please try again.';
+    } finally {
+      loading = false;
     }
-    loading = false;
   }
 </script>
 
@@ -38,7 +41,7 @@
 
     <!-- Error -->
     {#if error}
-      <div class="rounded-lg bg-red-50 border border-red-200 px-4 py-3 text-sm text-red-700">
+      <div role="alert" class="rounded-lg bg-red-50 border border-red-200 px-4 py-3 text-sm text-red-700">
         {error}
       </div>
     {/if}

package/template/src/providers/mockAuth.ts

@@ -44,7 +44,7 @@ export const mockAuthProvider: AuthProvider = {
     if (!auth) return null;
     return {
       id: '1',
-      name: auth.email.split('@')[0],
+      name: auth.email.split('@')[0] ?? auth.email,
       email: auth.email,
       avatar: `https://api.dicebear.com/7.x/initials/svg?seed=${auth.email}`,
     };

package/template/tsconfig.json

@@ -1,6 +1,16 @@
 {
-  "extends": "../tsconfig.json",
   "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "noUncheckedIndexedAccess": true,
+    "exactOptionalPropertyTypes": true,
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "forceConsistentCasingInFileNames": true,
+    "skipLibCheck": false,
+    "noEmit": true,
     "types": ["vite/client"]
   },
   "include": ["src/**/*.ts", "src/**/*.svelte", "vite.config.ts"]