snice 4.28.0 → 4.30.0

package/bin/templates/{pwa → default}/src/pages/login.ts

@@ -41,10 +41,7 @@ export class LoginPage extends HTMLElement {
         password: credentials.password
       });
 
-      if (this.ctx && this.ctx.application.principal) {
-        const principal = this.ctx.application.principal as Principal;
-        principal.user = result.user;
-        principal.isAuthenticated = true;
+      if (this.ctx) {
         this.ctx.update();
       }
 
@@ -96,7 +93,7 @@ export class LoginPage extends HTMLElement {
         display: block;
         height: 100vh;
         overflow: hidden;
-        background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
+        background: linear-gradient(135deg, var(--snice-color-primary) 0%, var(--snice-color-primary-hover) 100%);
       }
 
       .container {
@@ -116,7 +113,7 @@ export class LoginPage extends HTMLElement {
       .hint {
         margin: 0.25rem 0;
         font-size: 0.875rem;
-        color: var(--text-light);
+        color: var(--snice-color-text-secondary);
         text-align: center;
       }
     `;

package/bin/templates/{pwa → default}/src/pages/notifications.ts

@@ -1,8 +1,8 @@
 import { page } from '../router';
-import { render, styles, html, css, ready, dispose, watch, on } from 'snice';
-import type { Placard } from 'snice';
+import { render, styles, html, css, context, dispose, watch, on } from 'snice';
+import type { Placard, Context } from 'snice';
 import { isAuthenticated } from '../guards/auth';
-import { getNotificationsDaemon } from '../daemons/notifications';
+import type { NotificationsDaemon } from '../daemons/notifications';
 import type { Notification, NotificationType } from '../types/notifications';
 
 const placard: Placard = {
@@ -19,12 +19,14 @@ export class NotificationsPage extends HTMLElement {
   filter: NotificationType | 'all' = 'all';
   private unsubscribe: (() => void) | null = null;
 
-  @ready()
-  initialize() {
-    const daemon = getNotificationsDaemon();
-    this.unsubscribe = daemon.subscribe((notification) => {
-      this.notifications = [notification, ...this.notifications];
-    });
+  @context()
+  handleContext(ctx: Context) {
+    const daemon = ctx.application.notifications as NotificationsDaemon;
+    if (daemon && !this.unsubscribe) {
+      this.unsubscribe = daemon.subscribe((notification) => {
+        this.notifications = [notification, ...this.notifications];
+      });
+    }
   }
 
   @dispose()
@@ -164,12 +166,12 @@ export class NotificationsPage extends HTMLElement {
 
       h1 {
         margin: 0;
-        color: var(--primary-color);
+        color: var(--snice-color-primary);
       }
 
       .count {
         font-size: 0.8125rem;
-        color: var(--text-light);
+        color: var(--snice-color-text-secondary);
       }
 
       .filters {
@@ -180,23 +182,23 @@ export class NotificationsPage extends HTMLElement {
 
       .filter-btn {
         padding: 0.375rem 0.75rem;
-        border: 1px solid var(--border-color);
-        border-radius: var(--radius-sm);
-        background: var(--bg-primary);
-        color: var(--text-light);
+        border: 1px solid var(--snice-color-border);
+        border-radius: var(--snice-border-radius-md);
+        background: var(--snice-color-background);
+        color: var(--snice-color-text-secondary);
         font-size: 0.8125rem;
         cursor: pointer;
         transition: all 0.15s;
       }
 
       .filter-btn:hover {
-        border-color: var(--primary-color);
-        color: var(--primary-color);
+        border-color: var(--snice-color-primary);
+        color: var(--snice-color-primary);
       }
 
       .filter-btn.active {
-        background: var(--primary-color);
-        border-color: var(--primary-color);
+        background: var(--snice-color-primary);
+        border-color: var(--snice-color-primary);
         color: white;
       }
 

package/bin/templates/{pwa → default}/src/pages/profile.ts

@@ -35,10 +35,8 @@ export class ProfilePage extends HTMLElement {
   async handleLogout() {
     await logout();
 
-    if (this.ctx && this.ctx.application.principal) {
-      const principal = this.ctx.application.principal as Principal;
-      principal.user = null;
-      principal.isAuthenticated = false;
+    if (this.ctx) {
+      this.ctx.update();
     }
 
     window.location.hash = '#/login';
@@ -141,12 +139,12 @@ export class ProfilePage extends HTMLElement {
 
       h1 {
         margin: 0 0 0.5rem 0;
-        color: var(--primary-color);
+        color: var(--snice-color-primary);
       }
 
       .email {
         margin: 0 0 1rem 0;
-        color: var(--text-light);
+        color: var(--snice-color-text-secondary);
       }
 
       .header-actions a {
@@ -163,7 +161,7 @@ export class ProfilePage extends HTMLElement {
 
       h3 {
         margin: 0 0 1rem 0;
-        color: var(--primary-color);
+        color: var(--snice-color-primary);
       }
 
       .info-grid {
@@ -176,22 +174,22 @@ export class ProfilePage extends HTMLElement {
         display: flex;
         justify-content: space-between;
         padding: 0.75rem;
-        background: var(--bg-secondary);
-        border-radius: var(--radius-sm);
+        background: var(--snice-color-background-secondary);
+        border-radius: var(--snice-border-radius-md);
       }
 
       .label {
         font-weight: 600;
-        color: var(--text-color);
+        color: var(--snice-color-text);
       }
 
       .value {
-        color: var(--text-light);
+        color: var(--snice-color-text-secondary);
       }
 
       .section p {
         margin: 0 0 1rem 0;
-        color: var(--text-light);
+        color: var(--snice-color-text-secondary);
       }
     `;
   }

package/bin/templates/{pwa → default}/src/pages/settings.ts

@@ -3,6 +3,7 @@ import { render, styles, context, dispatch, on, html, css } from 'snice';
 import type { Placard, Context } from 'snice';
 import { isAuthenticated } from '../guards/auth';
 import type { Principal } from '../types/auth';
+import { getUser, setUser } from '../services/storage';
 
 const placard: Placard = {
   name: 'settings',
@@ -55,12 +56,10 @@ export class SettingsPage extends HTMLElement {
   }
 
   private applyTheme(theme: string) {
-    if (theme === 'dark') {
-      document.documentElement.style.colorScheme = 'dark';
-    } else if (theme === 'light') {
-      document.documentElement.style.colorScheme = 'light';
+    if (theme === 'system') {
+      document.documentElement.removeAttribute('data-theme');
     } else {
-      document.documentElement.style.colorScheme = '';
+      document.documentElement.setAttribute('data-theme', theme);
     }
   }
 
@@ -73,10 +72,11 @@ export class SettingsPage extends HTMLElement {
   @dispatch('settings-saved')
   saveSettings() {
     if (this.ctx) {
-      const principal = this.ctx.application.principal as Principal;
-      if (principal.user) {
-        principal.user.name = this.displayName;
-        principal.user.email = this.email;
+      const user = getUser();
+      if (user) {
+        user.name = this.displayName;
+        user.email = this.email;
+        setUser(user);
       }
       this.ctx.update();
     }
@@ -181,13 +181,13 @@ export class SettingsPage extends HTMLElement {
 
       h1 {
         margin: 0 0 0.25rem 0;
-        color: var(--primary-color);
+        color: var(--snice-color-primary);
       }
 
       .hint {
         margin: 0 0 2rem 0;
         font-size: 0.8125rem;
-        color: var(--text-light);
+        color: var(--snice-color-text-secondary);
       }
 
       .section {
@@ -197,7 +197,7 @@ export class SettingsPage extends HTMLElement {
 
       h3 {
         margin: 0 0 1.25rem 0;
-        color: var(--primary-color);
+        color: var(--snice-color-primary);
       }
 
       .form-group {
@@ -213,7 +213,7 @@ export class SettingsPage extends HTMLElement {
         margin-bottom: 0.375rem;
         font-size: 0.875rem;
         font-weight: 500;
-        color: var(--text-color);
+        color: var(--snice-color-text);
       }
 
       snice-input {
@@ -232,22 +232,22 @@ export class SettingsPage extends HTMLElement {
         align-items: center;
         gap: 0.5rem;
         padding: 1rem;
-        background: var(--bg-secondary);
-        border: 2px solid var(--border-color);
-        border-radius: var(--radius-md);
+        background: var(--snice-color-background-secondary);
+        border: 2px solid var(--snice-color-border);
+        border-radius: var(--snice-border-radius-lg);
         cursor: pointer;
-        color: var(--text-color);
+        color: var(--snice-color-text);
         font-size: 0.875rem;
         transition: border-color 0.2s;
       }
 
       .theme-btn:hover {
-        border-color: var(--primary-color);
+        border-color: var(--snice-color-primary);
       }
 
       .theme-btn.active {
-        border-color: var(--primary-color);
-        background: color-mix(in srgb, var(--primary-color) 10%, transparent);
+        border-color: var(--snice-color-primary);
+        background: color-mix(in srgb, var(--snice-color-primary) 10%, transparent);
       }
 
       .theme-icon {
@@ -263,13 +263,13 @@ export class SettingsPage extends HTMLElement {
       .toggle-label {
         margin: 0;
         font-weight: 500;
-        color: var(--text-color);
+        color: var(--snice-color-text);
       }
 
       .toggle-desc {
         margin: 0.25rem 0 0 0;
         font-size: 0.8125rem;
-        color: var(--text-light);
+        color: var(--snice-color-text-secondary);
       }
 
       .actions {

package/bin/templates/default/src/router.ts

@@ -0,0 +1,13 @@
+import { Router } from 'snice';
+import { fetcher } from './fetcher';
+import { appContext } from './context';
+
+const { page, initialize, navigate } = Router({
+  target: '#app',
+  type: 'hash',
+  layout: 'snice-layout',
+  fetcher,
+  context: appContext
+});
+
+export { page, initialize, navigate };

package/bin/templates/default/src/styles/global.css

@@ -0,0 +1,16 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  font-family: var(--snice-font-family);
+  background: var(--snice-color-background-secondary);
+  color: var(--snice-color-text);
+  line-height: var(--snice-line-height-normal);
+}
+
+#app {
+  min-height: 100vh;
+}

package/bin/templates/{pwa → default}/tsconfig.json

@@ -14,7 +14,8 @@
     "noFallthroughCasesInSwitch": true,
     "experimentalDecorators": false,
     "emitDecoratorMetadata": false,
-    "useDefineForClassFields": false
+    "useDefineForClassFields": false,
+    "types": ["vite/client"]
   },
   "include": ["src", "tests"]
 }

package/bin/templates/react/README.md

@@ -0,0 +1,124 @@
+# {{projectName}}
+
+A React application built with [Snice](https://github.com/sniceio/snice).
+
+## Features
+
+- **JWT Authentication** - Token-based auth with automatic refresh and middleware
+- **Protected Routes** - Guards with `(context, params) => boolean` signature
+- **Middleware Pattern** - Composable fetch middleware (auth headers, error handling, retry)
+- **Live Notifications** - WebSocket daemon with real-time updates and badge counter
+- **Theme Switching** - Light, dark, and system theme with persistence
+- **Data Listing** - Filterable table with debounced search
+- **Snice Components** - Pre-built UI adapters (Card, Alert, Avatar, Switch, Badge, Divider, Login)
+- **React Hooks** - `useSniceContext()`, `useNavigate()`, `useParams()`, `useRoute()`
+- **Type-Safe** - Full TypeScript support
+- **Fast Build** - Vite + React
+
+## Getting Started
+
+```bash
+# Install dependencies
+npm install
+
+# Start dev server
+npm run dev
+
+# Build for production
+npm run build
+
+# Preview production build
+npm run preview
+
+# Type check
+npm run type-check
+
+# Run tests
+npm run test
+```
+
+## Demo Credentials
+
+- **Email:** demo@example.com
+- **Password:** demo
+
+## Project Structure
+
+```
+src/
+  components/     # React components
+    AppHeader.tsx       # Nav bar with user avatar, menu, notifications
+    AppLayout.tsx       # Layout wrapper with header
+    NotificationBadge.tsx # Notification count badge
+    SearchBar.tsx       # Debounced search input
+  pages/          # Page components (rendered by routes)
+    LoginPage.tsx       # Login form using Snice Login adapter
+    DashboardPage.tsx   # Stats cards, feature lists
+    ProfilePage.tsx     # User profile with avatar
+    NotificationsPage.tsx # Live notification feed with filters
+    SettingsPage.tsx    # Theme, profile editing, notifications toggle
+    DataPage.tsx        # Data table with search and status filters
+  services/       # Business logic (auth, storage, jwt)
+  middleware/      # Fetch middleware (auth, error, retry)
+  daemons/        # Lifecycle-managed classes (notifications WebSocket)
+  guards/         # Route guards (auth)
+  types/          # TypeScript types
+  styles/         # Global styles with snice theme variables
+```
+
+## Snice React Integration
+
+- `<SniceRouter>` - Root provider with URL routing, context, and layout
+- `<Route>` - Route definitions with guards, placards, and layout override
+- `useSniceContext()` - Access application context (`{ application, navigation, navigate }`)
+- `useNavigate()` - Programmatic navigation
+- `useParams()` - Current route parameters
+- `useRoute()` - Current route pattern
+- Snice component adapters: `Card`, `Button`, `Input`, `Alert`, `Avatar`, `Badge`, `Spinner`, `Switch`, `Divider`, `EmptyState`, `Layout`, `Login`, `Tabs`
+
+## Customization
+
+### Replace Mock API
+
+Update `src/services/auth.ts` to call your real API:
+
+```typescript
+export async function login(credentials: LoginCredentials) {
+  const response = await fetch('https://your-api.com/auth/login', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(credentials)
+  });
+  const data = await response.json();
+  setToken(data.token);
+  setUser(data.user);
+  return data;
+}
+```
+
+### Enable Real WebSocket
+
+Update `src/daemons/notifications.ts`:
+
+```typescript
+// Replace startMockNotifications() with:
+this.connect();
+```
+
+### Configure Environment
+
+Create `.env` file:
+
+```
+VITE_API_URL=https://your-api.com
+VITE_WS_URL=wss://your-ws.com
+```
+
+## Learn More
+
+- [Snice Documentation](https://sniceio.github.io/snice)
+- [React Documentation](https://react.dev)
+
+## License
+
+MIT

package/bin/templates/react/global.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_API_URL?: string;
+  readonly VITE_WS_URL?: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}

package/bin/templates/react/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" />
+    <meta name="description" content="{{projectName}} - Built with Snice + React" />
+    <meta name="theme-color" content="#2563eb" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <title>{{projectName}}</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/bin/templates/react/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "{{projectName}}",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "type-check": "tsc --noEmit",
+    "preview": "vite preview",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage"
+  },
+  "dependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "snice": "^4.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vitejs/plugin-react": "^4.3.0",
+    "@vitest/coverage-v8": "^1.0.4",
+    "@vitest/ui": "^1.0.4",
+    "happy-dom": "^12.10.3",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.10",
+    "vitest": "^1.0.4"
+  }
+}

package/bin/templates/react/src/App.tsx

@@ -0,0 +1,112 @@
+import { useState, useCallback } from 'react';
+import { SniceRouter, Route } from 'snice/react';
+import { isAuthenticated as checkAuth } from './services/auth';
+import { getUser } from './services/storage';
+import { login, logout } from './services/auth';
+import { NotificationsDaemon } from './daemons/notifications';
+import { isAuthenticated } from './guards/auth';
+import { AppLayout } from './components/AppLayout';
+import { LoginPage } from './pages/LoginPage';
+import { DashboardPage } from './pages/DashboardPage';
+import { DataPage } from './pages/DataPage';
+import { ProfilePage } from './pages/ProfilePage';
+import { NotificationsPage } from './pages/NotificationsPage';
+import { SettingsPage } from './pages/SettingsPage';
+import type { User } from './types/auth';
+
+// In production, use actual WebSocket URL from env
+const wsUrl = import.meta.env.VITE_WS_URL || 'ws://localhost:8080';
+const notifications = new NotificationsDaemon(wsUrl);
+notifications.start();
+
+export function App() {
+  const [authState, setAuthState] = useState(() => ({
+    user: getUser<User>(),
+    isAuthenticated: checkAuth()
+  }));
+
+  const refreshAuth = useCallback(() => {
+    setAuthState({
+      user: getUser<User>(),
+      isAuthenticated: checkAuth()
+    });
+  }, []);
+
+  const context = {
+    principal: authState,
+    notifications,
+    refreshAuth,
+    login: async (email: string, password: string) => {
+      const result = await login({ email, password });
+      refreshAuth();
+      return result;
+    },
+    logout: async () => {
+      await logout();
+      refreshAuth();
+    }
+  };
+
+  return (
+    <SniceRouter
+      mode="hash"
+      context={context}
+      layout={AppLayout}
+      fallback={<NotFound />}
+    >
+      <Route path="/login" page={LoginPage} layout={false} />
+      <Route
+        path="/"
+        page={DashboardPage}
+        guard={isAuthenticated}
+        guardRedirect="/login"
+        placard={{ name: 'dashboard', title: 'Dashboard', icon: '\ud83d\udcca', show: true, order: 1 }}
+      />
+      <Route
+        path="/dashboard"
+        page={DashboardPage}
+        guard={isAuthenticated}
+        guardRedirect="/login"
+        placard={{ name: 'dashboard', title: 'Dashboard', icon: '\ud83d\udcca', show: false }}
+      />
+      <Route
+        path="/profile"
+        page={ProfilePage}
+        guard={isAuthenticated}
+        guardRedirect="/login"
+        placard={{ name: 'profile', title: 'Profile', icon: '\ud83d\udc64', show: true, order: 2 }}
+      />
+      <Route
+        path="/notifications"
+        page={NotificationsPage}
+        guard={isAuthenticated}
+        guardRedirect="/login"
+        placard={{ name: 'notifications', title: 'Notifications', icon: '\ud83d\udd14', show: true, order: 3 }}
+      />
+      <Route
+        path="/settings"
+        page={SettingsPage}
+        guard={isAuthenticated}
+        guardRedirect="/login"
+        placard={{ name: 'settings', title: 'Settings', icon: '\u2699\ufe0f', show: true, order: 4 }}
+      />
+      <Route
+        path="/data"
+        page={DataPage}
+        guard={isAuthenticated}
+        guardRedirect="/login"
+        placard={{ name: 'data', title: 'Data', icon: '\ud83d\udcca', show: true, order: 5 }}
+      />
+    </SniceRouter>
+  );
+}
+
+function NotFound() {
+  return (
+    <div style={{ textAlign: 'center', padding: '4rem' }}>
+      <h1>404</h1>
+      <p>Page not found</p>
+      <a href="#/">Go home</a>
+    </div>
+  );
+}