snice 4.28.0 → 4.30.0

package/bin/snice.js

@@ -34,7 +34,7 @@ if (command === 'create-app') {
   }
 
   const projectPath = positional[0] || '.';
-  const template = flags.template || 'base';
+  const template = flags.template || 'default';
 
   createApp(projectPath, template);
 } else if (command === 'mcp') {
@@ -79,14 +79,14 @@ if (command === 'create-app') {
 Snice CLI
 
 Usage:
-  snice create-app [options] <project-name>
-  snice create-app [options] .                          Initialize in current directory
+  snice create-app <project-name>                       Create a new Snice app
+  snice create-app .                                    Initialize in current directory
   snice build-component <component-name> [options]      Build CDN component
   snice validate                                        Check project for common issues
   snice mcp                                             Start MCP server for AI assistants
 
 Create App Options:
-  --template=<name>                                     Template to use (default: base)
+  --template=react                                      Use React template instead of default
 
 Build Component Options:
   --output=<dir>                                        Output directory (default: ./dist/cdn)
@@ -94,29 +94,24 @@ Build Component Options:
   --minify                                              Minify output (default: true)
   --with-theme                                          Include theme.css in output
 
-Templates:
-  base    - Minimal starter with counter example (default)
-  pwa     - Progressive Web App with auth, middleware, and live notifications
-
 MCP Server:
   Start a Model Context Protocol server for AI-assisted development.
   Connect in Claude Code: claude mcp add snice -- npx snice mcp
 
 Examples:
   snice create-app my-app
-  snice create-app my-app --template=pwa
+  snice create-app my-app --template=react
   snice build-component button
   snice build-component button --output=./cdn --format=iife
   snice mcp
 `);
 }
 
-function createApp(projectPath, template = 'base') {
+function createApp(projectPath, template = 'default') {
   const targetDir = resolve(process.cwd(), projectPath);
   const projectName = projectPath === '.' ? basename(process.cwd()) : basename(targetDir);
 
   console.log(`\n🚀 Creating Snice app in ${targetDir}...\n`);
-  console.log(`📦 Using template: ${template}\n`);
 
   // Check if directory exists and is empty
   if (projectPath !== '.') {
@@ -145,7 +140,7 @@ function createApp(projectPath, template = 'base') {
   // Check if template exists
   if (!existsSync(templateDir)) {
     console.error(`❌ Template "${template}" not found!`);
-    console.error(`Available templates: base, pwa`);
+    console.error(`Available templates: default, react`);
     process.exit(1);
   }
 
@@ -341,4 +336,4 @@ function validateProject() {
       console.log(`    → Use .types.ts imports to avoid circular dependencies\n`);
     }
   }
-}
+}

package/bin/templates/{pwa → default}/index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="description" content="{{projectName}} - PWA built with Snice" />
-    <meta name="theme-color" content="#6366f1" />
+    <meta name="theme-color" content="#2563eb" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <link rel="apple-touch-icon" href="/icons/icon-192.png" />
     <title>{{projectName}}</title>

package/bin/templates/{pwa → default}/src/components/app-header.ts

@@ -1,6 +1,7 @@
-import { element, property, render, styles, context, on, dispatch, html, css, watch, query } from 'snice';
+import { element, property, render, styles, context, on, dispatch, dispose, html, css, watch, query } from 'snice';
 import type { Context } from 'snice';
 import type { Principal, User } from '../types/auth';
+import type { NotificationsDaemon } from '../daemons/notifications';
 import { logout } from '../services/auth';
 
 @element('app-header')
@@ -9,6 +10,8 @@ export class AppHeader extends HTMLElement {
   @property() userAvatar = '';
   @property({ type: Boolean }) authenticated = false;
   @property({ type: Boolean }) menuOpen = false;
+  @property({ type: Number }) notificationCount = 0;
+  private unsubscribeNotifications: (() => void) | null = null;
 
   @query('.user-menu') $menu!: HTMLElement;
 
@@ -19,6 +22,21 @@ export class AppHeader extends HTMLElement {
     this.authenticated = principal?.isAuthenticated || false;
     this.userName = user?.name || '';
     this.userAvatar = user?.avatar || '';
+
+    const daemon = ctx.application.notifications as NotificationsDaemon;
+    if (daemon && !this.unsubscribeNotifications) {
+      this.unsubscribeNotifications = daemon.subscribe(() => {
+        this.notificationCount++;
+      });
+    }
+  }
+
+  @dispose()
+  cleanupNotifications() {
+    if (this.unsubscribeNotifications) {
+      this.unsubscribeNotifications();
+      this.unsubscribeNotifications = null;
+    }
   }
 
   @watch('menuOpen')
@@ -57,7 +75,7 @@ export class AppHeader extends HTMLElement {
             <a href="#/dashboard">Dashboard</a>
             <a href="#/data">Data</a>
             <a href="#/notifications">
-              <notification-badge></notification-badge>
+              <notification-badge .count=${this.notificationCount}></notification-badge>
               Notifications
             </a>
           </nav>
@@ -109,14 +127,14 @@ export class AppHeader extends HTMLElement {
         justify-content: space-between;
         padding: 0 1.5rem;
         height: 60px;
-        background: var(--bg-primary);
-        border-bottom: 1px solid var(--border-color);
+        background: var(--snice-color-background);
+        border-bottom: 1px solid var(--snice-color-border);
       }
 
       .brand a {
         font-size: 1.25rem;
         font-weight: 700;
-        color: var(--primary-color);
+        color: var(--snice-color-primary);
         text-decoration: none;
       }
 
@@ -127,7 +145,7 @@ export class AppHeader extends HTMLElement {
       }
 
       .nav-links a {
-        color: var(--text-light);
+        color: var(--snice-color-text-secondary);
         text-decoration: none;
         font-size: 0.875rem;
         font-weight: 500;
@@ -137,7 +155,7 @@ export class AppHeader extends HTMLElement {
       }
 
       .nav-links a:hover {
-        color: var(--primary-color);
+        color: var(--snice-color-primary);
       }
 
       .user-section {
@@ -152,12 +170,12 @@ export class AppHeader extends HTMLElement {
         border: none;
         cursor: pointer;
         padding: 0.375rem 0.5rem;
-        border-radius: var(--radius-md);
-        color: var(--text-color);
+        border-radius: var(--snice-border-radius-lg);
+        color: var(--snice-color-text);
       }
 
       .user-btn:hover {
-        background: var(--bg-secondary);
+        background: var(--snice-color-background-secondary);
       }
 
       .user-name {
@@ -171,10 +189,10 @@ export class AppHeader extends HTMLElement {
         top: 100%;
         margin-top: 0.5rem;
         min-width: 180px;
-        background: var(--bg-primary);
-        border: 1px solid var(--border-color);
-        border-radius: var(--radius-md);
-        box-shadow: var(--shadow-lg);
+        background: var(--snice-color-background);
+        border: 1px solid var(--snice-color-border);
+        border-radius: var(--snice-border-radius-lg);
+        box-shadow: var(--snice-shadow-lg);
         padding: 0.5rem 0;
         z-index: 100;
       }
@@ -184,7 +202,7 @@ export class AppHeader extends HTMLElement {
         display: block;
         width: 100%;
         padding: 0.5rem 1rem;
-        color: var(--text-color);
+        color: var(--snice-color-text);
         text-decoration: none;
         background: none;
         border: none;
@@ -195,12 +213,12 @@ export class AppHeader extends HTMLElement {
 
       .user-menu a:hover,
       .user-menu button:hover {
-        background: var(--bg-secondary);
-        color: var(--primary-color);
+        background: var(--snice-color-background-secondary);
+        color: var(--snice-color-primary);
       }
 
       .login-link {
-        color: var(--primary-color);
+        color: var(--snice-color-primary);
         text-decoration: none;
         font-weight: 500;
       }

package/bin/templates/{pwa → default}/src/components/notification-badge.ts

@@ -1,30 +1,11 @@
-import { element, property, render, styles, ready, dispose, html, css, watch, query } from 'snice';
-import { getNotificationsDaemon } from '../daemons/notifications';
+import { element, property, render, styles, html, css, watch, query } from 'snice';
 
 @element('notification-badge')
 export class NotificationBadge extends HTMLElement {
   @property({ type: Number }) count = 0;
 
-  private unsubscribe: (() => void) | null = null;
-
   @query('.badge') $badge!: HTMLElement;
 
-  @ready()
-  initialize() {
-    const daemon = getNotificationsDaemon();
-    this.unsubscribe = daemon.subscribe(() => {
-      this.count++;
-    });
-  }
-
-  @dispose()
-  cleanup() {
-    if (this.unsubscribe) {
-      this.unsubscribe();
-      this.unsubscribe = null;
-    }
-  }
-
   @watch('count')
   onCountChange() {
     if (this.$badge) {
@@ -56,7 +37,7 @@ export class NotificationBadge extends HTMLElement {
         min-width: 18px;
         height: 18px;
         padding: 0 4px;
-        background: var(--danger-color);
+        background: var(--snice-color-danger);
         color: white;
         font-size: 0.6875rem;
         font-weight: 600;

package/bin/templates/{pwa → default}/src/components/search-bar.ts

@@ -52,18 +52,18 @@ export class SearchBar extends HTMLElement {
         align-items: center;
         gap: 0.5rem;
         padding: 0.5rem 0.75rem;
-        background: var(--bg-primary);
-        border: 1px solid var(--border-color);
-        border-radius: var(--radius-md);
+        background: var(--snice-color-background);
+        border: 1px solid var(--snice-color-border);
+        border-radius: var(--snice-border-radius-lg);
       }
 
       .search-container:focus-within {
-        border-color: var(--primary-color);
-        box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 15%, transparent);
+        border-color: var(--snice-color-primary);
+        box-shadow: 0 0 0 3px color-mix(in srgb, var(--snice-color-primary) 15%, transparent);
       }
 
       .icon {
-        color: var(--text-light);
+        color: var(--snice-color-text-secondary);
         font-size: 0.875rem;
       }
 
@@ -73,26 +73,26 @@ export class SearchBar extends HTMLElement {
         outline: none;
         background: transparent;
         font-size: 0.875rem;
-        color: var(--text-color);
+        color: var(--snice-color-text);
       }
 
       input::placeholder {
-        color: var(--text-light);
+        color: var(--snice-color-text-secondary);
       }
 
       .clear {
         background: none;
         border: none;
         cursor: pointer;
-        color: var(--text-light);
+        color: var(--snice-color-text-secondary);
         font-size: 0.75rem;
         padding: 0.125rem 0.25rem;
-        border-radius: var(--radius-sm);
+        border-radius: var(--snice-border-radius-md);
       }
 
       .clear:hover {
-        background: var(--bg-secondary);
-        color: var(--text-color);
+        background: var(--snice-color-background-secondary);
+        color: var(--snice-color-text);
       }
     `;
   }

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

@@ -0,0 +1,17 @@
+import type { Principal } from './types/auth';
+import { getUser } from './services/storage';
+import { isAuthenticated } from './services/auth';
+import { NotificationsDaemon } from './daemons/notifications';
+
+// 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 const appContext = {
+  principal: {
+    get user() { return getUser(); },
+    get isAuthenticated() { return isAuthenticated(); }
+  } as Principal,
+  notifications
+};

package/bin/templates/{pwa → default}/src/controllers/notification-controller.ts

@@ -1,33 +1,28 @@
-import { controller, respond } from 'snice';
-import { getNotificationsDaemon } from '../daemons/notifications';
+import { controller, respond, IController } from 'snice';
 import type { Notification } from '../types/notifications';
 
 @controller('notification-controller')
-export class NotificationController {
-  element!: HTMLElement;
+export class NotificationController implements IController {
+  element: HTMLElement | null = null;
   private notifications: Notification[] = [];
-  private unsubscribe: (() => void) | null = null;
 
   async attach(el: HTMLElement) {
     this.element = el;
-    const daemon = getNotificationsDaemon();
-    this.unsubscribe = daemon.subscribe((notification) => {
-      this.notifications = [notification, ...this.notifications];
-    });
   }
 
-  async detach() {
-    if (this.unsubscribe) {
-      this.unsubscribe();
-      this.unsubscribe = null;
-    }
-  }
+  async detach() {}
 
   @respond('get-notifications')
   handleGetNotifications() {
     return this.notifications;
   }
 
+  @respond('add-notification')
+  handleAddNotification(notification: Notification) {
+    this.notifications = [notification, ...this.notifications];
+    return { added: true };
+  }
+
   @respond('clear-notifications')
   handleClearNotifications() {
     this.notifications = [];

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

@@ -134,15 +134,3 @@ export class NotificationsDaemon {
     }
   }
 }
-
-// Singleton instance
-let instance: NotificationsDaemon | null = null;
-
-export function getNotificationsDaemon(): NotificationsDaemon {
-  if (!instance) {
-    // In production, use actual WebSocket URL from env
-    const wsUrl = import.meta.env.VITE_WS_URL || 'ws://localhost:8080';
-    instance = new NotificationsDaemon(wsUrl);
-  }
-  return instance;
-}

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

@@ -1,4 +1,5 @@
 import { initialize } from './router';
+import 'snice/components/theme/theme.css';
 import './styles/global.css';
 
 // Import snice layout and components
@@ -32,13 +33,6 @@ import './pages/notifications';
 import './pages/settings';
 import './pages/data';
 
-// Import and start daemons
-import { getNotificationsDaemon } from './daemons/notifications';
-
-// Start notifications daemon
-const notificationsDaemon = getNotificationsDaemon();
-notificationsDaemon.start();
-
 // Initialize router
 initialize();
 

package/bin/templates/{pwa → default}/src/middleware/error.ts

@@ -1,5 +1,4 @@
 import type { Context } from 'snice';
-import type { Principal } from '../types/auth';
 import { clearToken } from '../services/storage';
 
 export async function errorMiddleware(
@@ -11,13 +10,7 @@ export async function errorMiddleware(
   if (response.status === 401) {
     clearToken();
 
-    // Update context to reflect logged out state
-    if (this.application.principal) {
-      const principal = this.application.principal as Principal;
-      principal.user = null;
-      principal.isAuthenticated = false;
-    }
-
+    // Getters in context will reflect logged-out state since token is cleared
     window.location.href = '#/login';
     throw new Error('Unauthorized - redirecting to login');
   }

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 {