snice 4.9.0 → 4.11.0

package/bin/templates/pwa/src/components/app-header.ts

@@ -0,0 +1,218 @@
+import { element, property, render, styles, context, on, dispatch, html, css, watch, query } from 'snice';
+import type { Context } from 'snice';
+import type { Principal, User } from '../types/auth';
+import { logout } from '../services/auth';
+
+@element('app-header')
+export class AppHeader extends HTMLElement {
+  @property() userName = '';
+  @property() userAvatar = '';
+  @property({ type: Boolean }) authenticated = false;
+  @property({ type: Boolean }) menuOpen = false;
+
+  @query('.user-menu') $menu!: HTMLElement;
+
+  @context()
+  handleContext(ctx: Context) {
+    const principal = ctx.application.principal as Principal | undefined;
+    const user = principal?.user;
+    this.authenticated = principal?.isAuthenticated || false;
+    this.userName = user?.name || '';
+    this.userAvatar = user?.avatar || '';
+  }
+
+  @watch('menuOpen')
+  onMenuToggle() {
+    if (this.$menu) {
+      this.$menu.style.display = this.menuOpen ? 'block' : 'none';
+    }
+  }
+
+  toggleMenu() {
+    this.menuOpen = !this.menuOpen;
+  }
+
+  @on('keydown:Escape')
+  closeMenu() {
+    this.menuOpen = false;
+  }
+
+  @dispatch('header-logout')
+  async handleLogout() {
+    await logout();
+    window.location.hash = '#/login';
+    return { loggedOut: true };
+  }
+
+  @render()
+  renderContent() {
+    return html`
+      <header>
+        <div class="brand">
+          <a href="#/">{{projectName}}</a>
+        </div>
+
+        <if ${this.authenticated}>
+          <nav class="nav-links">
+            <a href="#/dashboard">Dashboard</a>
+            <a href="#/data">Data</a>
+            <a href="#/notifications">
+              <notification-badge></notification-badge>
+              Notifications
+            </a>
+          </nav>
+
+          <div class="user-section">
+            <button class="user-btn" @click=${this.toggleMenu}>
+              <if ${this.userAvatar}>
+                <snice-avatar
+                  src="${this.userAvatar}"
+                  name="${this.userName}"
+                  size="small"
+                ></snice-avatar>
+              </if>
+              <if ${!this.userAvatar}>
+                <snice-avatar
+                  name="${this.userName}"
+                  size="small"
+                ></snice-avatar>
+              </if>
+              <span class="user-name">${this.userName}</span>
+            </button>
+
+            <div class="user-menu" style="display: none">
+              <a href="#/profile" @click=${() => this.menuOpen = false}>Profile</a>
+              <a href="#/settings" @click=${() => this.menuOpen = false}>Settings</a>
+              <snice-divider></snice-divider>
+              <button @click=${this.handleLogout}>Sign Out</button>
+            </div>
+          </div>
+        </if>
+
+        <if ${!this.authenticated}>
+          <a href="#/login" class="login-link">Sign In</a>
+        </if>
+      </header>
+    `;
+  }
+
+  @styles()
+  componentStyles() {
+    return css`
+      :host {
+        display: block;
+      }
+
+      header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0 1.5rem;
+        height: 60px;
+        background: var(--bg-primary);
+        border-bottom: 1px solid var(--border-color);
+      }
+
+      .brand a {
+        font-size: 1.25rem;
+        font-weight: 700;
+        color: var(--primary-color);
+        text-decoration: none;
+      }
+
+      .nav-links {
+        display: flex;
+        gap: 1.5rem;
+        align-items: center;
+      }
+
+      .nav-links a {
+        color: var(--text-light);
+        text-decoration: none;
+        font-size: 0.875rem;
+        font-weight: 500;
+        display: flex;
+        align-items: center;
+        gap: 0.375rem;
+      }
+
+      .nav-links a:hover {
+        color: var(--primary-color);
+      }
+
+      .user-section {
+        position: relative;
+      }
+
+      .user-btn {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        background: none;
+        border: none;
+        cursor: pointer;
+        padding: 0.375rem 0.5rem;
+        border-radius: var(--radius-md);
+        color: var(--text-color);
+      }
+
+      .user-btn:hover {
+        background: var(--bg-secondary);
+      }
+
+      .user-name {
+        font-size: 0.875rem;
+        font-weight: 500;
+      }
+
+      .user-menu {
+        position: absolute;
+        right: 0;
+        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);
+        padding: 0.5rem 0;
+        z-index: 100;
+      }
+
+      .user-menu a,
+      .user-menu button {
+        display: block;
+        width: 100%;
+        padding: 0.5rem 1rem;
+        color: var(--text-color);
+        text-decoration: none;
+        background: none;
+        border: none;
+        cursor: pointer;
+        text-align: left;
+        font-size: 0.875rem;
+      }
+
+      .user-menu a:hover,
+      .user-menu button:hover {
+        background: var(--bg-secondary);
+        color: var(--primary-color);
+      }
+
+      .login-link {
+        color: var(--primary-color);
+        text-decoration: none;
+        font-weight: 500;
+      }
+
+      @media (max-width: 640px) {
+        .nav-links {
+          display: none;
+        }
+        .user-name {
+          display: none;
+        }
+      }
+    `;
+  }
+}

package/bin/templates/pwa/src/components/notification-badge.ts

@@ -0,0 +1,68 @@
+import { element, property, render, styles, ready, dispose, html, css, watch, query } from 'snice';
+import { getNotificationsDaemon } from '../daemons/notifications';
+
+@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) {
+      this.$badge.textContent = this.count > 99 ? '99+' : String(this.count);
+      this.$badge.style.display = this.count > 0 ? 'flex' : 'none';
+    }
+  }
+
+  @render({ once: true })
+  renderContent() {
+    const display = this.count > 0 ? 'flex' : 'none';
+    return html`
+      <span class="badge" style="display: ${display}">${this.count}</span>
+    `;
+  }
+
+  @styles()
+  componentStyles() {
+    return css`
+      :host {
+        display: inline-flex;
+        position: relative;
+      }
+
+      .badge {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        min-width: 18px;
+        height: 18px;
+        padding: 0 4px;
+        background: var(--danger-color);
+        color: white;
+        font-size: 0.6875rem;
+        font-weight: 600;
+        border-radius: 9px;
+        line-height: 1;
+      }
+    `;
+  }
+}

package/bin/templates/pwa/src/components/search-bar.ts

@@ -0,0 +1,99 @@
+import { element, property, render, styles, on, dispatch, html, css } from 'snice';
+
+@element('search-bar')
+export class SearchBar extends HTMLElement {
+  @property() value = '';
+  @property() placeholder = 'Search...';
+
+  @on('input', 'input', { debounce: 300 })
+  handleInput(e: Event) {
+    this.value = (e.target as HTMLInputElement).value;
+    this.dispatchSearch();
+  }
+
+  @on('keydown:Escape', 'input')
+  clearSearch(e: Event) {
+    this.value = '';
+    (e.target as HTMLInputElement).value = '';
+    this.dispatchSearch();
+  }
+
+  @dispatch('search')
+  dispatchSearch() {
+    return { query: this.value };
+  }
+
+  @render()
+  renderContent() {
+    return html`
+      <div class="search-container">
+        <span class="icon">&#128269;</span>
+        <input
+          type="text"
+          .value=${this.value}
+          placeholder="${this.placeholder}"
+        />
+        <if ${this.value.length > 0}>
+          <button class="clear" @click=${() => { this.value = ''; this.dispatchSearch(); }}>&#10005;</button>
+        </if>
+      </div>
+    `;
+  }
+
+  @styles()
+  componentStyles() {
+    return css`
+      :host {
+        display: block;
+      }
+
+      .search-container {
+        display: flex;
+        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);
+      }
+
+      .search-container:focus-within {
+        border-color: var(--primary-color);
+        box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 15%, transparent);
+      }
+
+      .icon {
+        color: var(--text-light);
+        font-size: 0.875rem;
+      }
+
+      input {
+        flex: 1;
+        border: none;
+        outline: none;
+        background: transparent;
+        font-size: 0.875rem;
+        color: var(--text-color);
+      }
+
+      input::placeholder {
+        color: var(--text-light);
+      }
+
+      .clear {
+        background: none;
+        border: none;
+        cursor: pointer;
+        color: var(--text-light);
+        font-size: 0.75rem;
+        padding: 0.125rem 0.25rem;
+        border-radius: var(--radius-sm);
+      }
+
+      .clear:hover {
+        background: var(--bg-secondary);
+        color: var(--text-color);
+      }
+    `;
+  }
+}

package/bin/templates/pwa/src/controllers/notification-controller.ts

@@ -0,0 +1,42 @@
+import { controller, respond } from 'snice';
+import { getNotificationsDaemon } from '../daemons/notifications';
+import type { Notification } from '../types/notifications';
+
+@controller('notification-controller')
+export class NotificationController {
+  element!: HTMLElement;
+  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;
+    }
+  }
+
+  @respond('get-notifications')
+  handleGetNotifications() {
+    return this.notifications;
+  }
+
+  @respond('clear-notifications')
+  handleClearNotifications() {
+    this.notifications = [];
+    return { cleared: true };
+  }
+
+  @respond('dismiss-notification')
+  handleDismissNotification(payload: { id: string }) {
+    this.notifications = this.notifications.filter(n => n.id !== payload.id);
+    return { dismissed: true };
+  }
+}

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

@@ -1,7 +1,7 @@
 import type { AppContext } from 'snice';
 import type { Principal } from '../types/auth';
 
-export function authGuard(appContext: AppContext): boolean {
+export function isAuthenticated(appContext: AppContext, _params: Record<string, string>): boolean {
   const principal = appContext.principal as Principal | undefined;
 
   if (!principal?.isAuthenticated) {

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

@@ -1,6 +1,10 @@
+import { useNativeElementControllers } from 'snice';
 import { initialize } from './router';
 import './styles/global.css';
 
+// Enable controllers on native HTML elements (div, form, etc.)
+useNativeElementControllers();
+
 // Import snice layout and components
 import 'snice/components/layout/snice-layout';
 import 'snice/components/button/snice-button';
@@ -10,12 +14,27 @@ import 'snice/components/alert/snice-alert';
 import 'snice/components/avatar/snice-avatar';
 import 'snice/components/empty-state/snice-empty-state';
 import 'snice/components/spinner/snice-spinner';
+import 'snice/components/badge/snice-badge';
+import 'snice/components/switch/snice-switch';
+import 'snice/components/divider/snice-divider';
+import 'snice/components/tabs/snice-tabs';
+import 'snice/components/tabs/snice-tab';
+
+// Import components
+import './components/app-header';
+import './components/search-bar';
+import './components/notification-badge';
+
+// Import controllers
+import './controllers/notification-controller';
 
 // Import pages
 import './pages/login';
 import './pages/dashboard';
 import './pages/profile';
 import './pages/notifications';
+import './pages/settings';
+import './pages/data';
 
 // Import and start daemons
 import { getNotificationsDaemon } from './daemons/notifications';