0x-lang 0.1.19 → 0.1.21

package/dist/lsp/hover.js

@@ -0,0 +1,153 @@
+// 0x LSP — Hover Information
+import { MarkupKind } from 'vscode-languageserver';
+import { parse } from '../parser.js';
+// Keyword documentation map
+const KEYWORD_DOCS = {
+    page: 'Page component declaration. Entry point for a route.',
+    component: 'Reusable component declaration.',
+    app: 'Top-level application declaration. Wraps all pages.',
+    state: 'Reactive state variable. Compiles to `useState` (React), `ref` (Vue), `$state` (Svelte).',
+    derived: 'Computed value. Compiles to `useMemo` (React), `computed` (Vue), `$derived` (Svelte).',
+    prop: 'Component property (input from parent).',
+    fn: 'Function declaration.',
+    layout: 'Flex/grid layout container. Use `row`, `col`, or `grid`.',
+    row: 'Horizontal flex layout (shorthand for `layout row`).',
+    col: 'Vertical flex layout (shorthand for `layout col`).',
+    grid: 'CSS grid layout.',
+    stack: 'Stack layout (overlapping children).',
+    text: 'Text element. Renders a `<p>`, `<span>`, or heading tag.',
+    button: 'Button element with click handler.',
+    input: 'Input field with two-way binding.',
+    image: 'Image element with src and alt.',
+    link: 'Anchor/link element.',
+    toggle: 'Toggle switch / checkbox.',
+    select: 'Dropdown select element.',
+    table: 'Data table with columns.',
+    chart: 'Chart visualization (bar, line, pie, etc.).',
+    modal: 'Modal dialog overlay.',
+    toast: 'Toast notification.',
+    nav: 'Navigation bar component.',
+    form: 'Form with fields, validation, and submit handler.',
+    model: 'Data model declaration with typed fields.',
+    auth: 'Authentication configuration (login, signup, logout, guard).',
+    route: 'Route declaration for navigation.',
+    role: 'Role-based access control.',
+    style: 'Scoped style block for custom CSS properties.',
+    import: 'Import external JavaScript module.',
+    use: 'Import a 0x component from another file.',
+    api: 'API endpoint binding (GET, POST, PUT, DELETE).',
+    store: 'Global store variable (shared across components).',
+    data: 'Data fetching declaration.',
+    watch: 'Watch a state variable for changes and run side effects.',
+    check: 'Runtime assertion / validation contract.',
+    'on mount': 'Lifecycle hook: runs after component mounts.',
+    'on destroy': 'Lifecycle hook: runs before component unmounts.',
+    if: 'Conditional rendering block.',
+    for: 'List rendering — iterates over a collection.',
+    show: 'Conditionally show an element (CSS display toggle).',
+    hide: 'Conditionally hide an element.',
+    emit: 'Emit a custom event to parent component.',
+    animate: 'Animation declaration (enter, exit, transition).',
+    seo: 'SEO metadata (title, description, og tags).',
+    a11y: 'Accessibility attributes.',
+    hero: 'Hero section UI pattern.',
+    features: 'Features grid section.',
+    pricing: 'Pricing table section.',
+    faq: 'FAQ accordion section.',
+    footer: 'Footer section.',
+    admin: 'Admin dashboard scaffold.',
+    deploy: 'Deployment configuration.',
+    env: 'Environment variable declaration.',
+    docker: 'Docker container configuration.',
+    realtime: 'Real-time data subscription (WebSocket).',
+    crud: 'CRUD scaffold — generates list, create, edit, delete views.',
+    upload: 'File upload component.',
+    search: 'Search input with filtering.',
+    responsive: 'Responsive breakpoint wrapper.',
+    async: 'Async function modifier.',
+};
+function getWordAtPosition(source, position) {
+    const lines = source.split('\n');
+    const line = lines[position.line] || '';
+    const before = line.substring(0, position.character);
+    const after = line.substring(position.character);
+    const wordBefore = before.match(/[\w]+$/) || [''];
+    const wordAfter = after.match(/^[\w]+/) || [''];
+    return wordBefore[0] + wordAfter[0];
+}
+export function getHoverInfo(source, position) {
+    const word = getWordAtPosition(source, position);
+    if (!word)
+        return null;
+    // Check for "on mount" / "on destroy" compound keywords
+    const lines = source.split('\n');
+    const line = lines[position.line] || '';
+    if (word === 'on' || word === 'mount' || word === 'destroy') {
+        if (/\bon\s+mount\b/.test(line)) {
+            const doc = KEYWORD_DOCS['on mount'];
+            if (doc) {
+                return { contents: { kind: MarkupKind.Markdown, value: `**on mount**\n\n${doc}` } };
+            }
+        }
+        if (/\bon\s+destroy\b/.test(line)) {
+            const doc = KEYWORD_DOCS['on destroy'];
+            if (doc) {
+                return { contents: { kind: MarkupKind.Markdown, value: `**on destroy**\n\n${doc}` } };
+            }
+        }
+    }
+    // Check keyword docs
+    const doc = KEYWORD_DOCS[word];
+    if (doc) {
+        return { contents: { kind: MarkupKind.Markdown, value: `**${word}**\n\n${doc}` } };
+    }
+    // Try to find the identifier in parsed AST
+    try {
+        const ast = parse(source);
+        for (const node of ast) {
+            if (node.type === 'Page' || node.type === 'Component' || node.type === 'App') {
+                for (const child of node.body) {
+                    if (child.type === 'StateDecl' && child.name === word) {
+                        const typeStr = child.valueType ? `: ${JSON.stringify(child.valueType)}` : '';
+                        return {
+                            contents: {
+                                kind: MarkupKind.Markdown,
+                                value: `**state** \`${word}\`${typeStr}\n\nReactive state variable declared in \`${node.name}\`.`,
+                            },
+                        };
+                    }
+                    if (child.type === 'DerivedDecl' && child.name === word) {
+                        return {
+                            contents: {
+                                kind: MarkupKind.Markdown,
+                                value: `**derived** \`${word}\`\n\nComputed value declared in \`${node.name}\`.`,
+                            },
+                        };
+                    }
+                    if (child.type === 'PropDecl' && child.name === word) {
+                        return {
+                            contents: {
+                                kind: MarkupKind.Markdown,
+                                value: `**prop** \`${word}\`\n\nComponent property declared in \`${node.name}\`.`,
+                            },
+                        };
+                    }
+                    if (child.type === 'FnDecl' && child.name === word) {
+                        const params = child.params.map(p => p.name).join(', ');
+                        return {
+                            contents: {
+                                kind: MarkupKind.Markdown,
+                                value: `**fn** \`${word}(${params})\`\n\nFunction declared in \`${node.name}\`.`,
+                            },
+                        };
+                    }
+                }
+            }
+        }
+    }
+    catch {
+        // Parse failed — no hover for identifiers
+    }
+    return null;
+}
+//# sourceMappingURL=hover.js.map

package/dist/lsp/hover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hover.js","sourceRoot":"","sources":["../../src/lsp/hover.ts"],"names":[],"mappings":"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"}

package/dist/lsp/server.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/lsp/server.js

@@ -0,0 +1,70 @@
+// 0x Language Server — Main entry point
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore -- need node-specific createConnection for stdio transport
+import { createConnection, ProposedFeatures } from 'vscode-languageserver/node';
+import { TextDocuments, TextDocumentSyncKind, } from 'vscode-languageserver';
+import { TextDocument } from 'vscode-languageserver-textdocument';
+import { getDiagnostics } from './diagnostics.js';
+import { getCompletions } from './completion.js';
+import { getHoverInfo } from './hover.js';
+import { getDefinition } from './definition.js';
+import { getDocumentSymbols } from './symbols.js';
+// Create connection and document manager
+const connection = createConnection(ProposedFeatures.all);
+const documents = new TextDocuments(TextDocument);
+// Initialize
+connection.onInitialize((_params) => {
+    return {
+        capabilities: {
+            textDocumentSync: TextDocumentSyncKind.Full,
+            completionProvider: {
+                resolveProvider: false,
+                triggerCharacters: [' ', ':'],
+            },
+            hoverProvider: true,
+            definitionProvider: true,
+            documentSymbolProvider: true,
+        },
+    };
+});
+// Diagnostics — run on every content change
+documents.onDidChangeContent((change) => {
+    const source = change.document.getText();
+    const diagnostics = getDiagnostics(source);
+    connection.sendDiagnostics({
+        uri: change.document.uri,
+        diagnostics,
+    });
+});
+// Completions
+connection.onCompletion((params) => {
+    const doc = documents.get(params.textDocument.uri);
+    if (!doc)
+        return [];
+    return getCompletions(doc.getText(), params.position);
+});
+// Hover
+connection.onHover((params) => {
+    const doc = documents.get(params.textDocument.uri);
+    if (!doc)
+        return null;
+    return getHoverInfo(doc.getText(), params.position);
+});
+// Go to Definition
+connection.onDefinition((params) => {
+    const doc = documents.get(params.textDocument.uri);
+    if (!doc)
+        return null;
+    return getDefinition(doc.getText(), params.position, params.textDocument.uri);
+});
+// Document Symbols
+connection.onDocumentSymbol((params) => {
+    const doc = documents.get(params.textDocument.uri);
+    if (!doc)
+        return [];
+    return getDocumentSymbols(doc.getText());
+});
+// Start listening
+documents.listen(connection);
+connection.listen();
+//# sourceMappingURL=server.js.map

package/dist/lsp/server.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"server.js","sourceRoot":"","sources":["../../src/lsp/server.ts"],"names":[],"mappings":"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"}

package/dist/lsp/symbols.d.ts

@@ -0,0 +1,2 @@
+import { DocumentSymbol } from 'vscode-languageserver';
+export declare function getDocumentSymbols(source: string): DocumentSymbol[];

package/dist/lsp/symbols.js

@@ -0,0 +1,74 @@
+// 0x LSP — Document Symbols
+import { SymbolKind } from 'vscode-languageserver';
+import { parse } from '../parser.js';
+function locToRange(loc) {
+    const line = Math.max(0, loc.line - 1);
+    const char = Math.max(0, loc.column - 1);
+    return {
+        start: { line, character: char },
+        end: { line, character: char + 1 },
+    };
+}
+function makeSymbol(name, kind, loc, detail, children) {
+    const range = locToRange(loc);
+    return {
+        name,
+        kind,
+        range,
+        selectionRange: range,
+        detail,
+        children,
+    };
+}
+export function getDocumentSymbols(source) {
+    const symbols = [];
+    try {
+        const ast = parse(source);
+        for (const node of ast) {
+            if (node.type === 'Page' || node.type === 'Component' || node.type === 'App') {
+                const children = [];
+                for (const child of node.body) {
+                    switch (child.type) {
+                        case 'StateDecl':
+                            children.push(makeSymbol(child.name, SymbolKind.Variable, child.loc, 'state'));
+                            break;
+                        case 'DerivedDecl':
+                            children.push(makeSymbol(child.name, SymbolKind.Variable, child.loc, 'derived'));
+                            break;
+                        case 'PropDecl':
+                            children.push(makeSymbol(child.name, SymbolKind.Property, child.loc, 'prop'));
+                            break;
+                        case 'FnDecl':
+                            children.push(makeSymbol(child.name, SymbolKind.Function, child.loc, 'fn'));
+                            break;
+                        case 'OnMount':
+                            children.push(makeSymbol('on mount', SymbolKind.Event, child.loc));
+                            break;
+                        case 'OnDestroy':
+                            children.push(makeSymbol('on destroy', SymbolKind.Event, child.loc));
+                            break;
+                        case 'StyleDecl':
+                            children.push(makeSymbol('style', SymbolKind.Object, child.loc));
+                            break;
+                    }
+                }
+                symbols.push(makeSymbol(node.name, SymbolKind.Class, node.loc, node.type, children));
+            }
+            else if (node.type === 'Model') {
+                symbols.push(makeSymbol(node.name, SymbolKind.Struct, node.loc, 'model'));
+            }
+            else if (node.type === 'RouteDecl') {
+                symbols.push(makeSymbol(node.path, SymbolKind.Module, node.loc, 'route'));
+            }
+            else if (node.type === 'RoleDecl') {
+                const roleName = node.roles.map(r => r.name).join(', ');
+                symbols.push(makeSymbol(roleName, SymbolKind.Enum, node.loc, 'role'));
+            }
+        }
+    }
+    catch {
+        // Parse failed — return empty symbols
+    }
+    return symbols;
+}
+//# sourceMappingURL=symbols.js.map

package/dist/lsp/symbols.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"symbols.js","sourceRoot":"","sources":["../../src/lsp/symbols.ts"],"names":[],"mappings":"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"}

package/dist/react/admin.jsx

@@ -0,0 +1,114 @@
+// Generated by 0x
+import React, { useEffect, useMemo, useState } from 'react';
+
+export default function Admin() {
+  const [users, setUsers] = useState([]);
+  const [activeTab, setActiveTab] = useState('users');
+  const [searchQuery, setSearchQuery] = useState('');
+  const [loading, setLoading] = useState(true);
+  const filteredUsers = useMemo(() => setUsers(prev => prev.filter(u => u.name.includes(searchQuery) || u.email.includes(searchQuery))), [users, searchQuery]);
+  const totalUsers = useMemo(() => users.length, [users]);
+  const activeUsers = useMemo(() => setUsers(prev => prev.filter(u => u.active)).length, [users]);
+  const adminCount = useMemo(() => setUsers(prev => prev.filter(u => u.role == 'admin')).length, [users]);
+  const getUsers = async (params) => {
+    const res = await fetch('/api/users' + (params ? '?' + new URLSearchParams(params).toString() : ''), { method: 'GET' });
+    return res.json();
+  };
+  const deleteUserApi = async (params) => {
+    const res = await fetch('/api/users/{id}' + (params ? '?' + new URLSearchParams(params).toString() : ''), { method: 'DELETE' });
+    return res.json();
+  };
+  const updateUser = async (params) => {
+    const res = await fetch('/api/users/{id}' + (params ? '?' + new URLSearchParams(params).toString() : ''), { method: 'PUT' });
+    return res.json();
+  };
+  useEffect(() => {
+    setUsers(await getUsers());
+    setLoading(false);
+  }, []);
+  const deleteUser = (id) => {
+    await deleteUserApi({ id: id });
+    setUsers(setUsers(prev => prev.filter(u => u.id != id)));
+  };
+  const toggleStatus = (id) => {
+    user = users.find(u => u.id == id);
+    if (user) {
+      user.active = !user.active;
+    await updateUser({ id: id, active: user.active });
+    }
+  };
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'row', height: '100vh' }}>
+{/* Sidebar */}
+<div style={{ display: 'flex', flexDirection: 'column', gap: '8px', padding: '24px', backgroundColor: ''#2c3e50'' }}>
+<span style={{ fontSize: '24px', fontWeight: 'bold', color: 'white' }}>Admin Panel</span>
+<div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
+<button onClick={() => setActiveTab('users')} className="{ activeTab: activeTab, ==: ==, users: users, ?: ?, primary: 'ghost' }">Users</button>
+<button onClick={() => setActiveTab('settings')} className="{ activeTab: activeTab, ==: ==, settings: settings, ?: ?, primary: 'ghost' }">Settings</button>
+<button onClick={() => setActiveTab('logs')} className="{ activeTab: activeTab, ==: ==, logs: logs, ?: ?, primary: 'ghost' }">Logs</button>
+</div>
+</div>
+{/* Main Content */}
+<div style={{ display: 'flex', flexDirection: 'column', gap: '24px', padding: '32px', flexGrow: 1 }}>
+{activeTab == 'users' && (
+{/* Stats Bar */}
+<div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '16px' }}>
+<div style={{ display: 'flex', flexDirection: 'column', gap: '4px', padding: '24px', borderRadius: '12px', boxShadow: '0 4px 6px rgba(0,0,0,0.1)', backgroundColor: 'white' }}>
+<span style={{ fontSize: '40px', fontWeight: 'bold', color: ''#3498db'' }}>{totalUsers}</span>
+<span style={{ fontSize: '14px', color: ''#666'' }}>Total Users</span>
+</div>
+<div style={{ display: 'flex', flexDirection: 'column', gap: '4px', padding: '24px', borderRadius: '12px', boxShadow: '0 4px 6px rgba(0,0,0,0.1)', backgroundColor: 'white' }}>
+<span style={{ fontSize: '40px', fontWeight: 'bold', color: ''#27ae60'' }}>{activeUsers}</span>
+<span style={{ fontSize: '14px', color: ''#666'' }}>Active Users</span>
+</div>
+<div style={{ display: 'flex', flexDirection: 'column', gap: '4px', padding: '24px', borderRadius: '12px', boxShadow: '0 4px 6px rgba(0,0,0,0.1)', backgroundColor: 'white' }}>
+<span style={{ fontSize: '40px', fontWeight: 'bold', color: ''#9b59b6'' }}>{adminCount}</span>
+<span style={{ fontSize: '14px', color: ''#666'' }}>Admins</span>
+</div>
+</div>
+{/* Search */}
+<input value={searchQuery} onChange={e => setSearchQuery(e.target.value)} placeholder="Search users..." />
+{/* User Table */}
+{loading ? (
+<span style={{ textAlign: 'center' }}>Loading...</span>
+) : (
+<div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
+{/* Table Header */}
+<div style={{ display: 'flex', flexDirection: 'row', gap: '16px', padding: '12px', backgroundColor: ''#f8f9fa'', borderRadius: '8px' }}>
+<span style={{ fontWeight: 'bold' }}>Name</span>
+<span style={{ fontWeight: 'bold' }}>Email</span>
+<span style={{ fontWeight: 'bold' }}>Role</span>
+<span style={{ fontWeight: 'bold' }}>Status</span>
+<span style={{ fontWeight: 'bold' }}>Actions</span>
+</div>
+{filteredUsers.map((user) => (
+<div style={{ display: 'flex', flexDirection: 'row', gap: '16px', padding: '12px', alignItems: 'center', backgroundColor: 'white', boxShadow: '0 1px 2px rgba(0,0,0,0.1)', borderRadius: '4px' }}>
+<span>{user.name}</span>
+<span style={{ color: ''#666'' }}>{user.email}</span>
+<span style={{ fontSize: '14px' }}>{user.role}</span>
+<span style={{ fontSize: '14px', color: '{ user: user, .: ., active: active, ?: ?, green: '#999' }' }}>{user.active ? 'Active' : 'Inactive'}</span>
+<div style={{ display: 'flex', flexDirection: 'row', gap: '4px' }}>
+<button onClick={() => toggleStatus(user.id)}>{user.active ? 'Disable' : 'Enable'}</button>
+<button onClick={() => deleteUser(user.id)} className="danger">Delete</button>
+</div>
+</div>
+))}
+</div>
+{filteredUsers.length == 0 && (
+<span style={{ color: ''#999'', textAlign: 'center' }}>No users found</span>
+)}
+)}
+)}
+{activeTab == 'settings' && (
+<span style={{ fontSize: '32px', fontWeight: 'bold' }}>Settings</span>
+<span style={{ color: ''#666'' }}>Settings panel coming soon.</span>
+)}
+{activeTab == 'logs' && (
+<span style={{ fontSize: '32px', fontWeight: 'bold' }}>Activity Logs</span>
+<span style={{ color: ''#666'' }}>Logs panel coming soon.</span>
+)}
+</div>
+</div>
+  );
+}

package/dist/react/blog.jsx

@@ -0,0 +1,80 @@
+// Generated by 0x
+import React, { useEffect, useMemo, useState } from 'react';
+
+export default function Blog() {
+  const [posts, setPosts] = useState([]);
+  const [newTitle, setNewTitle] = useState('');
+  const [newContent, setNewContent] = useState('');
+  const [loading, setLoading] = useState(true);
+  const postCount = useMemo(() => posts.length, [posts]);
+  const getPosts = async (params) => {
+    const res = await fetch('/api/posts' + (params ? '?' + new URLSearchParams(params).toString() : ''), { method: 'GET' });
+    return res.json();
+  };
+  const createPost = async (params) => {
+    const res = await fetch('/api/posts' + (params ? '?' + new URLSearchParams(params).toString() : ''), { method: 'POST' });
+    return res.json();
+  };
+  useEffect(() => {
+    setPosts(await getPosts());
+    setLoading(false);
+  }, []);
+  const addPost = () => {
+    if (newTitle.trim() != '' && newContent.trim() != '') {
+      result = await createPost({ title: newTitle, content: newContent });
+    setPosts(prev => [...prev, result]);
+    setNewTitle('');
+    setNewContent('');
+    }
+  };
+  const deletePost = (id) => {
+    setPosts(setPosts(prev => prev.filter(p => p.id != id)));
+  };
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '24px', padding: '32px', maxWidth: '800px', margin: 'auto' }}>
+{/* Header */}
+<div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
+<span style={{ fontSize: '40px', fontWeight: 'bold' }}>Blog</span>
+<span style={{ fontSize: '20px', color: ''#666'' }}>{postCount} posts</span>
+</div>
+{/* New Post Form */}
+<div style={{ display: 'flex', flexDirection: 'column', gap: '12px', padding: '24px', borderRadius: '12px', boxShadow: '0 4px 6px rgba(0,0,0,0.1)', backgroundColor: 'white' }}>
+<span style={{ fontSize: '24px', fontWeight: 'bold' }}>New Post</span>
+<input value={newTitle} onChange={e => setNewTitle(e.target.value)} placeholder="Post title..." />
+<input value={newContent} onChange={e => setNewContent(e.target.value)} placeholder="Write your content..." />
+<button onClick={() => addPost()} className="primary">Publish</button>
+</div>
+{/* Post List */}
+{loading ? (
+<span style={{ textAlign: 'center' }}>Loading...</span>
+) : (
+{posts.length == 0 ? (
+<span style={{ color: ''#999'', textAlign: 'center' }}>No posts yet</span>
+) : (
+{posts.map((post) => (
+<PostCard {...post} />
+))}
+)}
+)}
+</div>
+  );
+}
+
+// Generated by 0x
+import React from 'react';
+
+function PostCard({ post }) {
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '8px', padding: '24px', borderRadius: '12px', boxShadow: '0 1px 2px rgba(0,0,0,0.1)', backgroundColor: 'white' }}>
+<div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
+<span style={{ fontSize: '24px', fontWeight: 'bold' }}>{post.title}</span>
+<span style={{ fontSize: '14px', color: ''#999'' }}>{post.date}</span>
+</div>
+<span style={{ color: ''#444'' }}>{post.content}</span>
+</div>
+  );
+}
+
+export { PostCard };

package/dist/react/crm.jsx

@@ -0,0 +1,98 @@
+// Generated by 0x
+import React, { useEffect, useMemo, useState } from 'react';
+
+export default function CRM() {
+  const [customers, setCustomers] = useState([]);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [showAddModal, setShowAddModal] = useState(false);
+  const [newName, setNewName] = useState('');
+  const [newEmail, setNewEmail] = useState('');
+  const [loading, setLoading] = useState(true);
+  const [stats, setStats] = useState([]);
+  const filtered = useMemo(() => setCustomers(prev => prev.filter(c => c.name.includes(searchQuery) || c.email.includes(searchQuery))), [customers, searchQuery]);
+  const totalCount = useMemo(() => customers.length, [customers]);
+  const activeCount = useMemo(() => setCustomers(prev => prev.filter(c => c.status == 'active')).length, [customers]);
+  const getCustomers = async (params) => {
+    const res = await fetch('/api/customers' + (params ? '?' + new URLSearchParams(params).toString() : ''), { method: 'GET' });
+    return res.json();
+  };
+  const createCustomer = async (params) => {
+    const res = await fetch('/api/customers' + (params ? '?' + new URLSearchParams(params).toString() : ''), { method: 'POST' });
+    return res.json();
+  };
+  useEffect(() => {
+    setCustomers(await getCustomers());
+    setLoading(false);
+  }, []);
+  const addCustomer = () => {
+    if (newName.trim() != '' && newEmail.trim() != '') {
+      result = await createCustomer({ name: newName, email: newEmail });
+    setCustomers(prev => [...prev, result]);
+    setNewName('');
+    setNewEmail('');
+    setShowAddModal(false);
+    }
+  };
+  const removeCustomer = (id) => {
+    setCustomers(setCustomers(prev => prev.filter(c => c.id != id)));
+  };
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '24px', padding: '32px' }}>
+{/* Header */}
+<span style={{ fontSize: '40px', fontWeight: 'bold' }}>CRM Dashboard</span>
+{/* Stats */}
+<div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '16px' }}>
+<div style={{ display: 'flex', flexDirection: 'column', gap: '4px', alignItems: 'center', padding: '24px', borderRadius: '12px', boxShadow: '0 4px 6px rgba(0,0,0,0.1)', backgroundColor: 'white' }}>
+<span style={{ fontSize: '40px', fontWeight: 'bold', color: ''#333'' }}>{totalCount}</span>
+<span style={{ fontSize: '14px', color: ''#666'' }}>Total Customers</span>
+</div>
+<div style={{ display: 'flex', flexDirection: 'column', gap: '4px', alignItems: 'center', padding: '24px', borderRadius: '12px', boxShadow: '0 4px 6px rgba(0,0,0,0.1)', backgroundColor: 'white' }}>
+<span style={{ fontSize: '40px', fontWeight: 'bold', color: ''#27ae60'' }}>{activeCount}</span>
+<span style={{ fontSize: '14px', color: ''#666'' }}>Active</span>
+</div>
+<div style={{ display: 'flex', flexDirection: 'column', gap: '4px', alignItems: 'center', padding: '24px', borderRadius: '12px', boxShadow: '0 4px 6px rgba(0,0,0,0.1)', backgroundColor: 'white' }}>
+<span style={{ fontSize: '40px', fontWeight: 'bold', color: ''#999'' }}>{totalCount - activeCount}</span>
+<span style={{ fontSize: '14px', color: ''#666'' }}>Inactive</span>
+</div>
+</div>
+{/* Search & Actions */}
+<div style={{ display: 'flex', flexDirection: 'row', gap: '12px', alignItems: 'center' }}>
+<input value={searchQuery} onChange={e => setSearchQuery(e.target.value)} placeholder="Search customers..." />
+<button onClick={() => setShowAddModal(true)} className="primary">Add Customer</button>
+</div>
+{/* Add Form */}
+{showAddModal && (
+<div style={{ display: 'flex', flexDirection: 'column', gap: '12px', padding: '24px', borderRadius: '12px', boxShadow: '0 4px 6px rgba(0,0,0,0.1)', backgroundColor: 'white' }}>
+<span style={{ fontSize: '24px', fontWeight: 'bold' }}>New Customer</span>
+<input value={newName} onChange={e => setNewName(e.target.value)} placeholder="Customer name..." />
+<input value={newEmail} onChange={e => setNewEmail(e.target.value)} placeholder="Email address..." />
+<div style={{ display: 'flex', flexDirection: 'row', gap: '8px' }}>
+<button onClick={() => addCustomer()} className="primary">Save</button>
+<button onClick={() => setShowAddModal(false)}>Cancel</button>
+</div>
+</div>
+)}
+{/* Customer List */}
+{loading ? (
+<span style={{ textAlign: 'center' }}>Loading...</span>
+) : (
+<div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+{filtered.map((customer) => (
+<div style={{ display: 'flex', flexDirection: 'row', gap: '16px', padding: '16px', borderRadius: '8px', backgroundColor: 'white', boxShadow: '0 1px 2px rgba(0,0,0,0.1)', alignItems: 'center' }}>
+<div style={{ display: 'flex', flexDirection: 'column', flexGrow: 1 }}>
+<span style={{ fontSize: '20px', fontWeight: 'bold' }}>{customer.name}</span>
+<span style={{ fontSize: '14px', color: ''#666'' }}>{customer.email}</span>
+</div>
+<span style={{ fontSize: '14px', color: '{ customer: customer, .: ., status: status, ==: ==, active: active, ?: ?, green: '#999' }' }}>{customer.status}</span>
+<button onClick={() => removeCustomer(customer.id)} className="danger">Remove</button>
+</div>
+))}
+</div>
+{filtered.length == 0 && (
+<span style={{ color: ''#999'', textAlign: 'center' }}>No customers found</span>
+)}
+)}
+</div>
+  );
+}