snice 4.29.0 → 4.30.1

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

@@ -1,9 +1,9 @@
 import { page } from '../router';
-import { render, styles, html, css, context, observe, ready, dispose } from 'snice';
+import { render, styles, html, css, context, observe, dispose } from 'snice';
 import type { Placard, Context } from 'snice';
 import type { Principal } from '../types/auth';
 import { isAuthenticated } from '../guards/auth';
-import { getNotificationsDaemon } from '../daemons/notifications';
+import type { NotificationsDaemon } from '../daemons/notifications';
 
 const placard: Placard = {
   name: 'dashboard',
@@ -24,14 +24,13 @@ export class DashboardPage extends HTMLElement {
   handleContext(ctx: Context) {
     const principal = ctx.application.principal as Principal | undefined;
     this.userName = principal?.user?.name || 'User';
-  }
 
-  @ready()
-  initialize() {
-    const daemon = getNotificationsDaemon();
-    this.unsubscribe = daemon.subscribe(() => {
-      this.notificationCount++;
-    });
+    const daemon = ctx.application.notifications as NotificationsDaemon;
+    if (daemon && !this.unsubscribe) {
+      this.unsubscribe = daemon.subscribe(() => {
+        this.notificationCount++;
+      });
+    }
   }
 
   @dispose()
@@ -147,12 +146,12 @@ export class DashboardPage extends HTMLElement {
       }
 
       h1 {
-        color: var(--primary-color);
+        color: var(--snice-color-primary);
         margin: 0 0 0.5rem 0;
       }
 
       .subtitle {
-        color: var(--text-light);
+        color: var(--snice-color-text-secondary);
         margin: 0;
       }
 
@@ -172,13 +171,13 @@ export class DashboardPage extends HTMLElement {
         display: block;
         font-size: 2rem;
         font-weight: 700;
-        color: var(--primary-color);
+        color: var(--snice-color-primary);
       }
 
       .stat-label {
         display: block;
         font-size: 0.8125rem;
-        color: var(--text-light);
+        color: var(--snice-color-text-secondary);
         margin-top: 0.25rem;
       }
 
@@ -194,7 +193,7 @@ export class DashboardPage extends HTMLElement {
 
       h3 {
         margin: 0 0 1rem 0;
-        color: var(--primary-color);
+        color: var(--snice-color-primary);
       }
 
       ul {
@@ -204,18 +203,18 @@ export class DashboardPage extends HTMLElement {
 
       li {
         margin: 0.5rem 0;
-        color: var(--text-color);
+        color: var(--snice-color-text);
       }
 
       code {
-        background: var(--bg-secondary);
+        background: var(--snice-color-background-secondary);
         padding: 0.125rem 0.375rem;
-        border-radius: var(--radius-sm);
+        border-radius: var(--snice-border-radius-md);
         font-size: 0.8125rem;
       }
 
       p {
-        color: var(--text-light);
+        color: var(--snice-color-text-secondary);
         margin: 0 0 0.5rem 0;
       }
 

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

@@ -93,11 +93,11 @@ export class DataPage extends HTMLElement {
 
   getStatusColor(status: string): string {
     const colors: Record<string, string> = {
-      active: 'var(--success-color)',
-      pending: 'var(--warning-color)',
-      archived: 'var(--text-light)'
+      active: 'var(--snice-color-success)',
+      pending: 'var(--snice-color-warning)',
+      archived: 'var(--snice-color-text-secondary)'
     };
-    return colors[status] || 'var(--text-light)';
+    return colors[status] || 'var(--snice-color-text-secondary)';
   }
 
   @render()
@@ -193,12 +193,12 @@ export class DataPage extends HTMLElement {
 
       h1 {
         margin: 0;
-        color: var(--primary-color);
+        color: var(--snice-color-primary);
       }
 
       .count {
         font-size: 0.875rem;
-        color: var(--text-light);
+        color: var(--snice-color-text-secondary);
       }
 
       .toolbar {
@@ -219,23 +219,23 @@ export class DataPage 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;
       }
 
@@ -246,8 +246,8 @@ export class DataPage extends HTMLElement {
       }
 
       .data-table {
-        border: 1px solid var(--border-color);
-        border-radius: var(--radius-md);
+        border: 1px solid var(--snice-color-border);
+        border-radius: var(--snice-border-radius-lg);
         overflow: hidden;
       }
 
@@ -255,37 +255,37 @@ export class DataPage extends HTMLElement {
         display: grid;
         grid-template-columns: 1fr 120px 100px;
         padding: 0.75rem 1rem;
-        background: var(--bg-secondary);
+        background: var(--snice-color-background-secondary);
         font-size: 0.75rem;
         font-weight: 600;
         text-transform: uppercase;
         letter-spacing: 0.05em;
-        color: var(--text-light);
+        color: var(--snice-color-text-secondary);
       }
 
       .table-row {
         display: grid;
         grid-template-columns: 1fr 120px 100px;
         padding: 1rem;
-        border-top: 1px solid var(--border-color);
+        border-top: 1px solid var(--snice-color-border);
         align-items: center;
         transition: background 0.15s;
       }
 
       .table-row:hover {
-        background: var(--bg-secondary);
+        background: var(--snice-color-background-secondary);
       }
 
       .col-title strong {
         display: block;
-        color: var(--text-color);
+        color: var(--snice-color-text);
         font-size: 0.9375rem;
       }
 
       .description {
         display: block;
         font-size: 0.8125rem;
-        color: var(--text-light);
+        color: var(--snice-color-text-secondary);
         margin-top: 0.125rem;
       }
 
@@ -294,7 +294,7 @@ export class DataPage extends HTMLElement {
         align-items: center;
         gap: 0.375rem;
         font-size: 0.8125rem;
-        color: var(--text-color);
+        color: var(--snice-color-text);
         text-transform: capitalize;
       }
 
@@ -307,7 +307,7 @@ export class DataPage extends HTMLElement {
 
       .col-date {
         font-size: 0.8125rem;
-        color: var(--text-light);
+        color: var(--snice-color-text-secondary);
       }
 
       .data-table.compact .table-header {

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