@llmnative/react 1.19.0 → 1.19.2

package/llms.txt

@@ -0,0 +1,82 @@
+# @llmnative/react
+
+> Framework React AI-first per generazione deterministica di UI da configurazione dichiarativa.
+> Data-driven di default, schema-driven opzionale. Ottimizzato per minimo consumo di token AI.
+> Apache-2.0 — versione 1.0.0
+
+## Install
+
+Requisito: **Node.js 24 LTS** (`>=24.18.0 <25`, `engines` del pacchetto).
+
+```bash
+npm install @llmnative/react
+npx @llmnative/react create        # scaffold progetto Vite completo
+npx @llmnative/react create --yes --provider=mock   # scaffold senza backend
+```
+
+```tsx
+import '@llmnative/react/dist/index.css'  // necessario una volta sola
+```
+
+## Cosa fa
+
+`Grid` genera tabelle e gallery CRUD complete (fetch real-time, modal add/edit/delete, sorting, pagination, groupBy) da una configurazione colonne. `Form` gestisce stato, validazione, oggetti annidati e lifecycle hooks verso qualsiasi provider. I provider (Firebase, Supabase, mock) si swappano in `<App>` senza toccare i componenti.
+
+## 5 pattern core — 90% dei casi d'uso
+
+```tsx
+// 1 — Lista CRUD con real-time
+<Grid path="/users" columns={[{ key: 'name', label: 'Nome', sortable: true }, { key: 'email', label: 'Email' }]} actions={['add','edit','delete']} pagination={{ limit: 20 }} />
+
+// 2 — Form standalone
+<Form path="/products" appearance="card" showBack>
+  <Input name="title" label="Titolo" required />
+  <Select name="status" label="Stato" options={['draft','published']} />
+</Form>
+
+// 3 — Oggetti annidati e array dinamici
+<Input name="address.city" label="Città" />
+<Repeat name="items" defaultLength={1}>{(i) => <Input name={`items.${i}.name`} />}</Repeat>
+
+// 4 — Colonne con renderer custom e Badge
+<Grid path="/orders" columns={[{ key: 'status', render: ({ value }) => <Badge variant="success">{value}</Badge> }, { key: 'amount', render: ({ value }) => `€ ${value.toFixed(2)}` }]} />
+
+// 5 — Form con lifecycle hooks
+<Form path="/posts" onLoad={d => ({...d, price: d.price/100})} onSave={async ({record}) => ({...record, price: record.price*100})} onComplete={async ({action}) => { if (action === 'save') navigate('/posts') }} />
+```
+
+## Provider matrix
+
+| Servizio | Driver disponibili | Obbligatorio |
+|---|---|---|
+| data | `mock`, `dbRealtime` (Firebase RTDB), `firestoreDb` (Firestore), `supabaseDb` | sì (fallback: mock) |
+| storage | `firestorage`, `supabaseStorage` | no |
+| auth | `googleAuth`, `firebaseAuth`, `supabaseAuth`, `dropboxAuth` | sì (fallback: googleAuth) |
+| email | `gmail` | no |
+| ai | `openai`, `gemini`, `anthropic`, `deepseek`, `mistral`, `openrouter`, `opencode`, `cloudflare`, `groq` | no |
+| credentials | `googleServiceAccount` | no |
+
+```tsx
+<App providers={{ firebase: { apiKey, authDomain, databaseURL }, services: { data: 'dbRealtime', storage: 'firestorage', auth: 'googleAuth' } }} />
+```
+
+## Struttura componenti
+
+```
+ui/        → primitivi stateless: Alert, Badge, Button, Card, DescriptionList, Image, Modal, Table, Gallery, Tab, Repeat, Icon, LocaleSwitcher, ThemeSwitcher, ProviderSwitcher, LayoutBuilder, ContextMenu
+ui/fields/ → campi form: Input, Select, UploadImage, UploadDocument, UploadCSV, CodeEditor, ImageField, RichText, Prompt, Crop, ContextMenu
+blocks/    → composizioni: Menu, Breadcrumbs, Notifications, Search, Carousel, Dropdown, Toolbar, SideNav, ListCard, AuthButton
+widgets/   → smart (hanno stato e provider): Grid, Form, MarkdownReader, ImageEditor, TabDynamic
+```
+
+Tutti gli import da `'@llmnative/react'` — mai da sottodirectory.
+
+## Non adatto per
+
+- Marketing sites, e-commerce, landing page con layout custom
+- UI pixel-perfect che non mappano a CRUD
+- Applicazioni senza dati strutturati
+
+## Riferimento completo
+
+→ [llms-full.txt](llms-full.txt) — API di ogni componente, ogni provider, ogni hook, tipi TypeScript

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@llmnative/react",
-  "version": "1.19.0",
+  "version": "1.19.2",
   "description": "LLM-native React framework for deterministic UI generation. Data-driven by default, schema-driven optional. Ultra-low token consumption — built for AI agents, not just humans.",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -27,6 +27,7 @@
     "test": "vitest run",
     "test:e2e": "npx playwright test",
     "test:e2e:proxy-scaffold": "node scripts/e2e/test-proxy-scaffold.js",
+    "test:e2e:scaffold": "node scripts/e2e/test-scaffold-templates.js",
     "test:e2e:proxy-runtime": "vitest run tests/e2e/proxy-runtime.test.ts --environment node",
     "test:integration": "npx firebase emulators:exec --only database,firestore,storage --project demo-test \"npx vitest run --config vitest.integration.config.mts\"",
     "test:watch": "vitest",
@@ -41,7 +42,10 @@
     "dist/**/*.map",
     "bin",
     "scripts/cli",
-    "themes"
+    "templates",
+    "themes",
+    "llms.txt",
+    "llms-full.txt"
   ],
   "repository": {
     "type": "git",
@@ -92,69 +96,70 @@
     }
   },
   "devDependencies": {
-    "@firebase/rules-unit-testing": "^5.0.1",
+    "@firebase/rules-unit-testing": "^5.0.2",
     "@phosphor-icons/react": "^2.1.10",
-    "@playwright/test": "^1.62.0",
-    "@supabase/supabase-js": "^2.110.8",
+    "@playwright/test": "^1.63.0",
+    "@supabase/supabase-js": "^2.117.2",
     "@tailwindcss/postcss": "^4.3.3",
-    "@testing-library/dom": "^10.4.1",
-    "@testing-library/jest-dom": "^7.0.0",
-    "@testing-library/react": "^16.3.2",
-    "@testing-library/user-event": "^14.6.1",
-    "@types/google.maps": "^3.65.4",
+    "@testing-library/dom": "^10.4.2",
+    "@testing-library/jest-dom": "^7.0.1",
+    "@testing-library/react": "^16.3.3",
+    "@testing-library/user-event": "^14.6.7",
+    "@types/google.maps": "^3.66.4",
     "@types/papaparse": "^5.5.2",
     "@types/prismjs": "^1.26.6",
-    "@types/react": "^19.2.17",
-    "@types/react-dom": "^19.2.3",
-    "@vitest/coverage-v8": "4.1",
-    "autoprefixer": "^10.5.4",
-    "firebase": "^12.16.0",
-    "happy-dom": "^20.11.1",
-    "jsdom": "^29.1.1",
-    "lucide-react": "^1.26.0",
-    "postcss": "^8.5.23",
-    "react": "^19.2.8",
-    "react-dom": "^19.2.8",
-    "react-router-dom": "^7.18.1",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "@typescript/typescript6": "^6.0.2",
+    "@vitest/coverage-v8": "^5.0.3",
+    "autoprefixer": "^10.6.1",
+    "firebase": "^12.19.0",
+    "happy-dom": "^20.14.5",
+    "jsdom": "^30.1.1",
+    "lucide-react": "^1.49.0",
+    "postcss": "^8.5.28",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
+    "react-router-dom": "^7.18.4",
     "tailwindcss": "^4.3.3",
-    "typescript": "6.0.3",
-    "vite": "^8.1.5",
-    "vitest": "4.1",
-    "ws": "^8.21.1"
+    "typescript": "^7.0.2",
+    "vite": "^8.3.2",
+    "vitest": "^5.0.3",
+    "ws": "^8.22.0"
   },
   "dependencies": {
     "@codemirror/autocomplete": "^6.20.3",
-    "@codemirror/commands": "^6.10.4",
+    "@codemirror/commands": "^6.11.1",
     "@codemirror/lang-css": "^6.3.1",
-    "@codemirror/lang-html": "^6.4.11",
+    "@codemirror/lang-html": "^6.4.12",
     "@codemirror/lang-javascript": "^6.2.5",
     "@codemirror/lang-json": "^6.0.2",
-    "@codemirror/lang-liquid": "^6.3.2",
+    "@codemirror/lang-liquid": "^6.3.3",
     "@codemirror/language": "^6.12.4",
     "@codemirror/lint": "^6.9.7",
-    "@codemirror/search": "^6.7.1",
-    "@codemirror/state": "^6.7.1",
-    "@codemirror/view": "^6.43.6",
-    "@tiptap/extension-character-count": "^3.29.0",
-    "@tiptap/extension-image": "^3.29.0",
-    "@tiptap/extension-link": "^3.29.0",
-    "@tiptap/extension-placeholder": "^3.29.0",
-    "@tiptap/extension-table": "^3.29.0",
-    "@tiptap/extension-underline": "^3.29.0",
-    "@tiptap/react": "^3.29.0",
-    "@tiptap/starter-kit": "^3.29.0",
+    "@codemirror/search": "^6.7.2",
+    "@codemirror/state": "^6.7.6",
+    "@codemirror/view": "^6.43.13",
+    "@tiptap/extension-character-count": "^3.31.4",
+    "@tiptap/extension-image": "^3.31.4",
+    "@tiptap/extension-link": "^3.31.4",
+    "@tiptap/extension-placeholder": "^3.31.4",
+    "@tiptap/extension-table": "^3.31.4",
+    "@tiptap/extension-underline": "^3.31.4",
+    "@tiptap/react": "^3.31.4",
+    "@tiptap/starter-kit": "^3.31.4",
     "buffer": "^6.0.3",
     "clsx": "^2.1.1",
     "codemirror": "^6.0.2",
-    "liquidjs": "^10.27.2",
-    "papaparse": "^5.5.4",
+    "liquidjs": "^10.30.0",
+    "papaparse": "^5.7.0",
     "prismjs": "^1.30.0",
     "react-markdown": "^10.1.0",
     "rehype-autolink-headings": "^7.1.0",
     "rehype-sanitize": "^6.0.0",
     "rehype-slug": "^6.0.0",
     "remark-gfm": "^4.0.1",
-    "tailwind-merge": "^3.6.0",
+    "tailwind-merge": "^3.7.0",
     "tui-image-editor": "^3.15.3"
   },
   "publishConfig": {

package/scripts/cli/setup-project.js

@@ -37,6 +37,8 @@ function resetProjectDirectory() {
         '.env.example',
         '.firebaserc',
         'database.rules.json',
+        'firestore.rules',
+        'firestore.indexes.json',
         'firebase.json',
         'storage.rules',
         'index.html',
@@ -167,17 +169,18 @@ function normalizeFirebaseProjectId(projectName) {
 
 function createPackageJson(params) {
     const packagePath = path.resolve(__dirname, '../../package.json');
-    const version = JSON.parse(fs.readFileSync(packagePath, 'utf8')).version;
+    const frameworkPackage = JSON.parse(fs.readFileSync(packagePath, 'utf8'));
+    const version = frameworkPackage.version;
 
     ensureFile(path.join(root, 'package.json'), JSON.stringify({
         name: normalizeFirebaseProjectId(params.projectname) || 'llmnative-app',
         version: '0.1.0',
-        private: true,
-        type: 'module',
-        engines: {
-            node: '>=24.18.0 <25',
-        },
-        packageManager: 'npm@11.11.0',
+        private: true,
+        type: 'module',
+        engines: {
+            node: '>=24.18.0 <25',
+        },
+        packageManager: 'npm@11.11.0',
         scripts: {
             dev: 'vite',
             build: 'vite build',
@@ -185,23 +188,24 @@ function createPackageJson(params) {
             typecheck: 'tsc --noEmit',
         },
         dependencies: {
-            '@phosphor-icons/react': '^2.1.10',
-            firebase: '^12.16.0',
-            'lucide-react': '^1.26.0',
-            react: '^19.2.8',
-            'react-dom': '^19.2.8',
-            '@llmnative/react': `^${version}`,
-            'react-router-dom': '^7.18.1',
-        },
-        devDependencies: {
-            '@tailwindcss/postcss': '^4.3.3',
-            '@types/react': '^19.2.17',
-            '@types/react-dom': '^19.2.3',
-            '@vitejs/plugin-react': '^6.0.4',
-            autoprefixer: '^10.5.4',
-            postcss: '^8.5.23',
-            typescript: '6.0.3',
-            vite: '^8.1.5',
+            '@phosphor-icons/react': '^2.1.10',
+            firebase: '^12.16.0',
+            'lucide-react': '^1.26.0',
+            react: '^19.2.8',
+            'react-dom': '^19.2.8',
+            '@llmnative/react': `^${version}`,
+            'react-router-dom': '^7.18.1',
+        },
+        devDependencies: {
+            '@tailwindcss/postcss': '^4.3.3',
+            '@types/react': '^19.2.17',
+            '@types/react-dom': '^19.2.3',
+            '@vitejs/plugin-react': '^6.0.4',
+            autoprefixer: '^10.5.4',
+            postcss: '^8.5.23',
+            // Same compiler the framework is built and type-checked with.
+            typescript: frameworkPackage.devDependencies.typescript,
+            vite: '^8.1.5',
         },
     }, null, 2));
 }
@@ -293,7 +297,8 @@ function createFirebaseConfig(params) {
     const hostingSite = params.hosting === '' ? params.projectname : params.hosting;
 
     ensureFile(path.join(root, 'firebase.json'), JSON.stringify({
-        database: { rules: 'database.rules.json' },
+        firestore: { rules: 'firestore.rules', indexes: 'firestore.indexes.json' },
+        storage: { rules: 'storage.rules' },
         ...(includeHosting && {
             hosting: {
                 site: normalizeFirebaseProjectId(hostingSite),
@@ -305,11 +310,21 @@ function createFirebaseConfig(params) {
         }),
     }, null, 2));
 
-    ensureFile(path.join(root, 'database.rules.json'), JSON.stringify({
-        rules: {
-            '.read': 'auth != null',
-            '.write': 'auth != null',
-        },
+    ensureFile(path.join(root, 'firestore.rules'), `
+rules_version = '2';
+
+service cloud.firestore {
+  match /databases/{database}/documents {
+    match /{document=**} {
+      allow read, write: if request.auth != null;
+    }
+  }
+}
+    `);
+
+    ensureFile(path.join(root, 'firestore.indexes.json'), JSON.stringify({
+        indexes: [],
+        fieldOverrides: [],
     }, null, 2));
 
     ensureFile(path.join(root, 'storage.rules'), `
@@ -352,6 +367,10 @@ function copyTemplateFiles(params) {
     const sharedSrc  = path.resolve(__dirname, '../../templates/_shared');
     const templateSrc = path.resolve(__dirname, `../../templates/${params.template}`);
 
+    if (!fs.existsSync(sharedSrc) || !fs.existsSync(templateSrc)) {
+        throw new Error(`Template "${params.template}" not found in ${path.dirname(templateSrc)}`);
+    }
+
     // Copy shared layouts and sections
     copyDir(path.join(sharedSrc, 'layouts'),  path.join(root, 'src/layouts'));
     copyDir(path.join(sharedSrc, 'sections'), path.join(root, 'src/sections'));
@@ -437,7 +456,7 @@ const selectedProvider = env.VITE_PROVIDER ?? '${params.provider}';
 const selectedAIProvider = env.VITE_AI_PROVIDER ?? '${params.aiProvider ?? 'none'}';
 
 const dataDriver =
-  selectedProvider === 'firebase' ? 'dbRealtime'
+  selectedProvider === 'firebase' ? 'firestoreDb'
     : selectedProvider === 'supabase' ? 'supabaseDb'
       : 'mock';
 
@@ -446,6 +465,11 @@ const storageDriver =
     : selectedProvider === 'supabase' ? 'supabaseStorage'
       : undefined;
 
+const authDriver =
+  selectedProvider === 'firebase' ? 'firebaseAuth'
+    : selectedProvider === 'supabase' ? 'supabaseAuth'
+      : 'googleAuth';
+
 const aiDriver = selectedAIProvider !== 'none'
   ? selectedAIProvider
   : undefined;
@@ -503,10 +527,11 @@ export const providers: AppProvidersConfig = {
     clientId: env.VITE_DROPBOX_CLIENT_ID ?? '',
     rootPath: env.VITE_DROPBOX_ROOT_PATH ?? '',
   },
+  ai: aiConfig,
   services: {
     data: dataDriver,
     ...(storageDriver ? { storage: storageDriver } : {}),
-    auth: 'googleAuth',
+    auth: authDriver,
     ...(aiDriver ? { ai: aiDriver } : {}),
   },
 };
@@ -518,18 +543,17 @@ import { createRoot } from 'react-dom/client';
 import { App } from '@llmnative/react';
 import './styles/globals.css';
 
-import { aiConfig, appConfig, providers } from './conf/app';
+import { appConfig, providers } from './conf/app';
 import { menu } from './conf/menu';
-
-const env = import.meta.env;
+import Default from './layouts/Default';
 
 createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     <App
       importPage={(pageSource) => import(/* @vite-ignore */ pageSource)}
       menuConfig={menu}
+      LayoutDefault={Default}
       providers={providers}
-      aiConfig={aiConfig}
       iconProvider={appConfig.iconProvider}
       themeProvider={{
         theme: appConfig.theme,

package/templates/_shared/layouts/Default.tsx

@@ -0,0 +1,23 @@
+import React, { useState } from 'react';
+import Header from '../sections/Header';
+import Sidebar from '../sections/Sidebar';
+import PageHeader from '../sections/PageHeader';
+import Footer from '../sections/Footer';
+
+export default function Default({ children }: { children?: React.ReactNode }) {
+    const [navOpen, setNavOpen] = useState(false);
+
+    return (
+        <div className="flex h-screen flex-col overflow-hidden">
+            <Header onMenuToggle={() => setNavOpen(open => !open)} />
+            <div className="flex min-h-0 flex-1 overflow-hidden">
+                <Sidebar open={navOpen} onClose={() => setNavOpen(false)} />
+                <main className="min-h-0 min-w-0 flex-1 overflow-auto p-4">
+                    <PageHeader />
+                    {children}
+                </main>
+            </div>
+            <Footer />
+        </div>
+    );
+}

package/templates/_shared/sections/Footer.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export default function Footer() {
+    return (
+        <footer className="shrink-0 border-t bg-background px-4 py-2 text-end text-sm text-muted-foreground">
+            Powered by [projectname]
+        </footer>
+    );
+}

package/templates/_shared/sections/Header.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { ActionButton, AuthButton, Brand } from '@llmnative/react';
+
+type HeaderProps = {
+    onMenuToggle: () => void;
+};
+
+export default function Header({ onMenuToggle }: HeaderProps) {
+    return (
+        <header className="flex h-14 shrink-0 items-center gap-3 border-b bg-background px-4">
+            <ActionButton
+                icon="menu"
+                ariaLabel="Toggle navigation"
+                variant="link"
+                wrapperClassName="lg:hidden"
+                onClick={onMenuToggle}
+            />
+            <Brand url="/" label="[projectname]" />
+            <div className="ms-auto">
+                <AuthButton />
+            </div>
+        </header>
+    );
+}

package/templates/_shared/sections/PageHeader.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Breadcrumbs } from '@llmnative/react';
+
+export default function PageHeader() {
+    return (
+        <div className="mb-4">
+            <Breadcrumbs />
+        </div>
+    );
+}

package/templates/_shared/sections/Sidebar.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Modal, SideNav } from '@llmnative/react';
+
+type SidebarProps = {
+    open: boolean;
+    onClose: () => void;
+};
+
+export default function Sidebar({ open, onClose }: SidebarProps) {
+    return (
+        <>
+            <div className="hidden lg:flex">
+                <SideNav menuKey="main" />
+            </div>
+            {open && (
+                <Modal title="[projectname]" position="left" size="sm" footer={false} onClose={onClose}>
+                    <SideNav menuKey="main" embedded />
+                </Modal>
+            )}
+        </>
+    );
+}

package/templates/admin/conf/menu.ts

@@ -0,0 +1,14 @@
+import type { MenuConfig } from '@llmnative/react';
+import HomePage from '../pages/home/HomePage';
+import UsersPage from '../pages/users/UsersPage';
+import RolesPage from '../pages/roles/RolesPage';
+import SettingsPage from '../pages/settings/SettingsPage';
+
+export const menu: MenuConfig = {
+    main: [
+        { path: '/',         title: 'Overview',  icon: 'layout-dashboard', page: HomePage, end: true },
+        { path: '/users',    title: 'Users',     icon: 'users',            page: UsersPage, group: 'Management' },
+        { path: '/roles',    title: 'Roles',     icon: 'shield',           page: RolesPage, group: 'Management' },
+        { path: '/settings', title: 'Settings',  icon: 'settings',         page: SettingsPage, group: 'System' },
+    ],
+};

package/templates/admin/data/mockData.ts

@@ -0,0 +1,21 @@
+export const mockData = {
+    '/users': {
+        'u-1': { name: 'Alice Martin',  email: 'alice@example.com',  role: 'admin',  status: 'active',   createdAt: 1710000000000 },
+        'u-2': { name: 'Bob Chen',      email: 'bob@example.com',    role: 'editor', status: 'active',   createdAt: 1712000000000 },
+        'u-3': { name: 'Clara Rossi',   email: 'clara@example.com',  role: 'viewer', status: 'inactive', createdAt: 1714000000000 },
+        'u-4': { name: 'David Park',    email: 'david@example.com',  role: 'editor', status: 'active',   createdAt: 1716000000000 },
+    },
+    '/roles': {
+        'r-1': { name: 'admin',  label: 'Administrator', description: 'Full access to all resources' },
+        'r-2': { name: 'editor', label: 'Editor',        description: 'Can create and edit content' },
+        'r-3': { name: 'viewer', label: 'Viewer',        description: 'Read-only access' },
+    },
+    '/settings': {
+        'app': {
+            siteName: '[projectname]',
+            supportEmail: 'support@example.com',
+            timezone: 'UTC',
+            maintenanceMode: false,
+        },
+    },
+};

package/templates/admin/pages/home/HomePage.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Card } from '@llmnative/react';
+import { mockData } from '../../data/mockData';
+
+function StatCard({ label, value, sub }: { label: string; value: number | string; sub?: string }) {
+    return (
+        <Card title={label}>
+            <p className="text-2xl font-semibold">{value}</p>
+            {sub && <p className="text-xs text-muted-foreground">{sub}</p>}
+        </Card>
+    );
+}
+
+export default function HomePage() {
+    const users = Object.values(mockData['/users']);
+    const roles = Object.values(mockData['/roles']);
+
+    return (
+        <div className="mx-auto max-w-5xl space-y-8 px-2 py-4">
+            <div className="space-y-1">
+                <h1 className="text-2xl font-semibold">Admin panel</h1>
+                <p className="text-sm text-muted-foreground">System overview and management.</p>
+            </div>
+
+            <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+                <StatCard label="Total users" value={users.length} />
+                <StatCard label="Active users" value={users.filter(u => u.status === 'active').length} />
+                <StatCard label="Roles defined" value={roles.length} />
+            </div>
+        </div>
+    );
+}

package/templates/admin/pages/roles/RolesPage.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Grid, Input } from '@llmnative/react';
+
+export default function RolesPage() {
+    return (
+        <Grid
+            path="/roles"
+            columns={[
+                { key: 'name', label: 'Key', sortable: true },
+                { key: 'label', label: 'Display name' },
+                { key: 'description', label: 'Description' },
+            ]}
+            actions={['add', 'edit', 'delete']}
+            view="table"
+            sortable
+            form={
+                <>
+                    <Input name="name" label="Key (e.g. editor)" required />
+                    <Input name="label" label="Display name" required />
+                    <Input name="description" label="Description" />
+                </>
+            }
+        />
+    );
+}

package/templates/admin/pages/settings/SettingsPage.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Form, Input, Select } from '@llmnative/react';
+
+const timezoneOptions = [
+    { label: 'UTC', value: 'UTC' },
+    { label: 'Europe/Rome', value: 'Europe/Rome' },
+    { label: 'America/New_York', value: 'America/New_York' },
+    { label: 'Asia/Tokyo', value: 'Asia/Tokyo' },
+];
+
+export default function SettingsPage() {
+    return (
+        <div className="mx-auto max-w-2xl px-2 py-4">
+            <Form
+                path="/settings/app"
+                appearance="card"
+            >
+                <Input name="siteName" label="Site name" required />
+                <Input name="supportEmail" label="Support email" type="email" />
+                <Select name="timezone" label="Timezone" options={timezoneOptions} />
+            </Form>
+        </div>
+    );
+}