snice 3.6.0 → 3.8.0

package/bin/templates/pwa/src/pages/dashboard.ts

@@ -0,0 +1,143 @@
+import { page } from '../router';
+import { render, styles, html, css, context } from 'snice';
+import type { Placard, Context } from 'snice';
+import type { Principal } from '../types/auth';
+import { authGuard } from '../guards/auth';
+
+const placard: Placard = {
+  name: 'dashboard',
+  title: 'Dashboard',
+  icon: '📊',
+  show: true,
+  order: 1
+};
+
+@page({ tag: 'dashboard-page', routes: ['/', '/dashboard'], guards: [authGuard], placard })
+export class DashboardPage extends HTMLElement {
+  userName = '';
+
+  @context()
+  handleContext(ctx: Context) {
+    const principal = ctx.application.principal as Principal | undefined;
+    this.userName = principal?.user?.name || 'User';
+  }
+
+  @render()
+  renderContent() {
+    return html`
+      <div class="container">
+        <h1>Welcome, ${this.userName}!</h1>
+        <p class="subtitle">This is your dashboard</p>
+
+        <div class="grid">
+          <snice-card>
+            <h3>⚡ Features</h3>
+            <ul>
+              <li>JWT Authentication</li>
+              <li>Protected Routes</li>
+              <li>Middleware Pattern</li>
+              <li>Service Worker</li>
+              <li>Live Notifications</li>
+            </ul>
+          </snice-card>
+
+          <snice-card>
+            <h3>🛠️ Architecture</h3>
+            <ul>
+              <li><strong>Utils:</strong> Pure functions</li>
+              <li><strong>Services:</strong> Business logic</li>
+              <li><strong>Middleware:</strong> Fetch interceptors</li>
+              <li><strong>Daemons:</strong> Lifecycle classes</li>
+              <li><strong>Guards:</strong> Route protection</li>
+            </ul>
+          </snice-card>
+
+          <snice-card>
+            <h3>📦 What's Included</h3>
+            <ul>
+              <li>TypeScript configuration</li>
+              <li>Vite + SWC setup</li>
+              <li>PWA manifest</li>
+              <li>Mock authentication</li>
+              <li>WebSocket daemon example</li>
+            </ul>
+          </snice-card>
+
+          <snice-card>
+            <h3>🚀 Get Started</h3>
+            <p>Check out the other pages:</p>
+            <div class="links">
+              <a href="#/profile">
+                <snice-button variant="secondary">View Profile</snice-button>
+              </a>
+              <a href="#/notifications">
+                <snice-button variant="secondary">Notifications</snice-button>
+              </a>
+            </div>
+          </snice-card>
+        </div>
+      </div>
+    `;
+  }
+
+  @styles()
+  componentStyles() {
+    return css`
+      .container {
+        padding: 2rem;
+        max-width: 1200px;
+        margin: 0 auto;
+      }
+
+      h1 {
+        color: var(--primary-color);
+        margin: 0 0 0.5rem 0;
+      }
+
+      .subtitle {
+        color: var(--text-light);
+        margin: 0 0 2rem 0;
+      }
+
+      .grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+        gap: 1.5rem;
+      }
+
+      snice-card {
+        padding: 1.5rem;
+      }
+
+      h3 {
+        margin: 0 0 1rem 0;
+        color: var(--primary-color);
+      }
+
+      ul {
+        margin: 0;
+        padding-left: 1.5rem;
+      }
+
+      li {
+        margin: 0.5rem 0;
+        color: var(--text-color);
+      }
+
+      .links {
+        display: flex;
+        flex-direction: column;
+        gap: 0.75rem;
+        margin-top: 1rem;
+      }
+
+      .links a {
+        text-decoration: none;
+      }
+
+      snice-button {
+        width: 100%;
+      }
+    `;
+  }
+}

package/bin/templates/pwa/src/pages/login.ts

@@ -0,0 +1,161 @@
+import { page } from '../router';
+import { render, styles, html, css, context } from 'snice';
+import type { Placard, Context } from 'snice';
+import type { Principal } from '../types/auth';
+import { login } from '../services/auth';
+
+const placard: Placard = {
+  name: 'login',
+  title: 'Login',
+  show: false
+};
+
+@page({ tag: 'login-page', routes: ['/login'], placard })
+export class LoginPage extends HTMLElement {
+  email = 'demo@example.com';
+  password = 'demo';
+  error = '';
+  loading = false;
+
+  private ctx?: Context;
+
+  @context()
+  handleContext(ctx: Context) {
+    this.ctx = ctx;
+  }
+
+  async handleSubmit(e: Event) {
+    e.preventDefault();
+    this.error = '';
+    this.loading = true;
+
+    try {
+      const result = await login({ email: this.email, password: this.password });
+
+      // Update context with new auth state
+      if (this.ctx && this.ctx.application.principal) {
+        const principal = this.ctx.application.principal as Principal;
+        principal.user = result.user;
+        principal.isAuthenticated = true;
+      }
+
+      window.location.href = '#/dashboard';
+    } catch (err) {
+      this.error = err instanceof Error ? err.message : 'Login failed';
+    } finally {
+      this.loading = false;
+    }
+  }
+
+  @render()
+  renderContent() {
+    return html`
+      <div class="container">
+        <snice-card class="login-card">
+          <h1>{{projectName}}</h1>
+          <p class="subtitle">Sign in to your account</p>
+
+          <form @submit=${this.handleSubmit}>
+            <snice-input
+              label="Email"
+              type="email"
+              .value=${this.email}
+              @input=${(e: Event) => this.email = (e.target as HTMLInputElement).value}
+              required
+            ></snice-input>
+
+            <snice-input
+              label="Password"
+              type="password"
+              .value=${this.password}
+              @input=${(e: Event) => this.password = (e.target as HTMLInputElement).value}
+              required
+            ></snice-input>
+
+            <if ${this.error}>
+              <snice-alert variant="error" class="error">
+                ${this.error}
+              </snice-alert>
+            </if>
+
+            <snice-button
+              type="submit"
+              variant="primary"
+              size="large"
+              ?loading=${this.loading}
+              full-width
+            >
+              Sign In
+            </snice-button>
+          </form>
+
+          <div class="hint">
+            <p>Demo credentials:</p>
+            <p><strong>Email:</strong> demo@example.com</p>
+            <p><strong>Password:</strong> demo</p>
+          </div>
+        </snice-card>
+      </div>
+    `;
+  }
+
+  @styles()
+  componentStyles() {
+    return css`
+      :host {
+        display: block;
+        min-height: 100vh;
+        background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
+      }
+
+      .container {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        min-height: 100vh;
+        padding: 2rem;
+      }
+
+      .login-card {
+        width: 100%;
+        max-width: 400px;
+        padding: 2rem;
+      }
+
+      h1 {
+        text-align: center;
+        color: var(--primary-color);
+        margin: 0 0 0.5rem 0;
+      }
+
+      .subtitle {
+        text-align: center;
+        color: var(--text-light);
+        margin: 0 0 2rem 0;
+      }
+
+      form {
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+      }
+
+      .error {
+        margin: 0;
+      }
+
+      .hint {
+        margin-top: 1.5rem;
+        padding-top: 1.5rem;
+        border-top: 1px solid var(--border-color);
+        text-align: center;
+        font-size: 0.875rem;
+        color: var(--text-light);
+      }
+
+      .hint p {
+        margin: 0.25rem 0;
+      }
+    `;
+  }
+}

package/bin/templates/pwa/src/pages/notifications.ts

@@ -0,0 +1,156 @@
+import { page } from '../router';
+import { render, styles, html, css, ready, dispose } from 'snice';
+import type { Placard } from 'snice';
+import { authGuard } from '../guards/auth';
+import { getNotificationsDaemon } from '../daemons/notifications';
+import type { Notification } from '../types/notifications';
+
+const placard: Placard = {
+  name: 'notifications',
+  title: 'Notifications',
+  icon: '🔔',
+  show: true,
+  order: 3
+};
+
+@page({ tag: 'notifications-page', routes: ['/notifications'], guards: [authGuard], placard })
+export class NotificationsPage extends HTMLElement {
+  notifications: Notification[] = [];
+  private unsubscribe: (() => void) | null = null;
+
+  @ready()
+  initialize() {
+    const daemon = getNotificationsDaemon();
+    this.unsubscribe = daemon.subscribe((notification) => {
+      this.notifications = [notification, ...this.notifications];
+    });
+  }
+
+  @dispose()
+  cleanup() {
+    if (this.unsubscribe) {
+      this.unsubscribe();
+      this.unsubscribe = null;
+    }
+  }
+
+  getVariant(type: string): string {
+    const variants: Record<string, string> = {
+      info: 'info',
+      success: 'success',
+      warning: 'warning',
+      error: 'danger'
+    };
+    return variants[type] || 'info';
+  }
+
+  clearAll() {
+    this.notifications = [];
+  }
+
+  removeNotification(id: string) {
+    this.notifications = this.notifications.filter(n => n.id !== id);
+  }
+
+  @render()
+  renderContent() {
+    return html`
+      <div class="container">
+        <div class="header">
+          <h1>Notifications</h1>
+          <if ${this.notifications.length > 0}>
+            <snice-button
+              variant="secondary"
+              size="small"
+              @click=${this.clearAll}
+            >
+              Clear All
+            </snice-button>
+          </if>
+        </div>
+
+        <if ${this.notifications.length === 0}>
+          <snice-empty-state
+            icon="🔔"
+            title="No notifications"
+            description="You'll see live notifications here as they arrive"
+          ></snice-empty-state>
+        </if>
+
+        <if ${this.notifications.length > 0}>
+          <div class="notifications">
+            ${this.notifications.map(notification => html`
+              <snice-alert
+                key=${notification.id}
+                variant="${this.getVariant(notification.type)}"
+                dismissible
+                @dismiss=${() => this.removeNotification(notification.id)}
+              >
+                <strong>${notification.title}</strong>
+                <p>${notification.message}</p>
+                <small>${new Date(notification.timestamp).toLocaleTimeString()}</small>
+              </snice-alert>
+            `)}
+          </div>
+        </if>
+      </div>
+    `;
+  }
+
+  @styles()
+  componentStyles() {
+    return css`
+      .container {
+        padding: 2rem;
+        max-width: 800px;
+        margin: 0 auto;
+      }
+
+      .header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 2rem;
+      }
+
+      h1 {
+        margin: 0;
+        color: var(--primary-color);
+      }
+
+      .notifications {
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+      }
+
+      snice-alert {
+        animation: slideIn 0.3s ease-out;
+      }
+
+      @keyframes slideIn {
+        from {
+          opacity: 0;
+          transform: translateX(-20px);
+        }
+        to {
+          opacity: 1;
+          transform: translateX(0);
+        }
+      }
+
+      snice-alert strong {
+        display: block;
+        margin-bottom: 0.5rem;
+      }
+
+      snice-alert p {
+        margin: 0 0 0.5rem 0;
+      }
+
+      snice-alert small {
+        opacity: 0.7;
+      }
+    `;
+  }
+}

package/bin/templates/pwa/src/pages/profile.ts

@@ -0,0 +1,164 @@
+import { page } from '../router';
+import { render, styles, html, css, context } from 'snice';
+import type { Placard, Context } from 'snice';
+import type { Principal, User } from '../types/auth';
+import { authGuard } from '../guards/auth';
+import { logout } from '../services/auth';
+
+const placard: Placard = {
+  name: 'profile',
+  title: 'Profile',
+  icon: '👤',
+  show: true,
+  order: 2
+};
+
+@page({ tag: 'profile-page', routes: ['/profile'], guards: [authGuard], placard })
+export class ProfilePage extends HTMLElement {
+  user: User | null = null;
+  private ctx?: Context;
+
+  @context()
+  handleContext(ctx: Context) {
+    this.ctx = ctx;
+    const principal = ctx.application.principal as Principal | undefined;
+    this.user = principal?.user || null;
+  }
+
+  async handleLogout() {
+    await logout();
+
+    // Update context to reflect logged out state
+    if (this.ctx && this.ctx.application.principal) {
+      const principal = this.ctx.application.principal as Principal;
+      principal.user = null;
+      principal.isAuthenticated = false;
+    }
+
+    window.location.href = '#/login';
+  }
+
+  @render()
+  renderContent() {
+    if (!this.user) {
+      return html`<div class="container"><snice-spinner></snice-spinner></div>`;
+    }
+
+    return html`
+      <div class="container">
+        <snice-card class="profile-card">
+          <div class="header">
+            <snice-avatar
+              src="${this.user.avatar}"
+              name="${this.user.name}"
+              size="large"
+            ></snice-avatar>
+            <h1>${this.user.name}</h1>
+            <p class="email">${this.user.email}</p>
+          </div>
+
+          <div class="section">
+            <h3>Account Information</h3>
+            <div class="info-grid">
+              <div class="info-item">
+                <span class="label">User ID:</span>
+                <span class="value">${this.user.id}</span>
+              </div>
+              <div class="info-item">
+                <span class="label">Email:</span>
+                <span class="value">${this.user.email}</span>
+              </div>
+              <div class="info-item">
+                <span class="label">Name:</span>
+                <span class="value">${this.user.name}</span>
+              </div>
+            </div>
+          </div>
+
+          <div class="section">
+            <h3>Session</h3>
+            <p>You are currently logged in with JWT authentication.</p>
+            <snice-button
+              variant="danger"
+              @click=${this.handleLogout}
+            >
+              Sign Out
+            </snice-button>
+          </div>
+        </snice-card>
+      </div>
+    `;
+  }
+
+  @styles()
+  componentStyles() {
+    return css`
+      .container {
+        padding: 2rem;
+        max-width: 800px;
+        margin: 0 auto;
+      }
+
+      .profile-card {
+        padding: 2rem;
+      }
+
+      .header {
+        text-align: center;
+        padding-bottom: 2rem;
+        border-bottom: 1px solid var(--border-color);
+      }
+
+      snice-avatar {
+        margin-bottom: 1rem;
+      }
+
+      h1 {
+        margin: 0 0 0.5rem 0;
+        color: var(--primary-color);
+      }
+
+      .email {
+        margin: 0;
+        color: var(--text-light);
+      }
+
+      .section {
+        padding-top: 2rem;
+      }
+
+      h3 {
+        margin: 0 0 1rem 0;
+        color: var(--primary-color);
+      }
+
+      .info-grid {
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+      }
+
+      .info-item {
+        display: flex;
+        justify-content: space-between;
+        padding: 0.75rem;
+        background: var(--bg-secondary);
+        border-radius: var(--radius-sm);
+      }
+
+      .label {
+        font-weight: 600;
+        color: var(--text-color);
+      }
+
+      .value {
+        color: var(--text-light);
+      }
+
+      .section p {
+        margin: 0 0 1rem 0;
+        color: var(--text-light);
+      }
+    `;
+  }
+}

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

@@ -0,0 +1,20 @@
+import { Router } from 'snice';
+import type { Principal } from './types/auth';
+import { getUser } from './services/storage';
+import { isAuthenticated } from './services/auth';
+import { fetcher } from './fetcher';
+
+const { page, initialize, navigate } = Router({
+  target: '#app',
+  type: 'hash',
+  layout: 'snice-layout',
+  fetcher,
+  context: {
+    principal: {
+      user: getUser(),
+      isAuthenticated: isAuthenticated()
+    } as Principal
+  }
+});
+
+export { page, initialize, navigate };

package/bin/templates/pwa/src/services/auth.ts

@@ -0,0 +1,48 @@
+import type { LoginCredentials, LoginResponse, User } from '../types/auth';
+import { setToken, setUser, clearToken, getToken } from './storage';
+import { isTokenExpired } from './jwt';
+
+// Mock API - replace with real API calls
+const MOCK_USER: User = {
+  id: '1',
+  email: 'demo@example.com',
+  name: 'Demo User',
+  avatar: 'https://i.pravatar.cc/150?img=1'
+};
+
+const MOCK_TOKEN = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxIiwiZW1haWwiOiJkZW1vQGV4YW1wbGUuY29tIiwiaWF0IjoxNjE2MjM5MDIyLCJleHAiOjk5OTk5OTk5OTl9.mock';
+
+export async function login(credentials: LoginCredentials): Promise<LoginResponse> {
+  // Simulate API call
+  await new Promise(resolve => setTimeout(resolve, 500));
+
+  // Mock validation
+  if (credentials.email === 'demo@example.com' && credentials.password === 'demo') {
+    setToken(MOCK_TOKEN);
+    setUser(MOCK_USER);
+
+    return {
+      token: MOCK_TOKEN,
+      user: MOCK_USER
+    };
+  }
+
+  throw new Error('Invalid credentials');
+}
+
+export async function logout(): Promise<void> {
+  clearToken();
+}
+
+export function isAuthenticated(): boolean {
+  const token = getToken();
+  if (!token) return false;
+  return !isTokenExpired(token);
+}
+
+export async function refreshToken(): Promise<string> {
+  // Mock refresh - in real app, call refresh endpoint
+  await new Promise(resolve => setTimeout(resolve, 300));
+  setToken(MOCK_TOKEN);
+  return MOCK_TOKEN;
+}