snice 1.14.3 → 2.1.0

package/components/layout/snice-layout-sidebar.css

@@ -0,0 +1,117 @@
+/* Sidebar Layout */
+:host {
+  display: block;
+  font-family: var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
+}
+
+.layout {
+  display: grid;
+  grid-template-columns: 250px 1fr;
+  min-height: 100vh;
+  transition: grid-template-columns var(--snice-transition-normal, 0.25s) ease;
+}
+
+:host([collapsed]) .layout {
+  grid-template-columns: 60px 1fr;
+}
+
+.sidebar {
+  background: var(--snice-color-background, white);
+  border-right: 1px solid var(--snice-color-border, #d1d5db);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.sidebar-header {
+  padding: var(--snice-spacing-lg, 2rem) var(--snice-spacing-md, 1rem);
+  border-bottom: 1px solid var(--snice-color-border, #d1d5db);
+}
+
+.sidebar-header h2 {
+  margin: 0;
+  font-size: var(--snice-font-size-lg, 1.125rem);
+  font-weight: var(--snice-font-weight-semibold, 600);
+  color: var(--snice-color-text, #374151);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+:host([collapsed]) .sidebar-header {
+  padding: var(--snice-spacing-md, 1rem) var(--snice-spacing-xs, 0.5rem);
+  text-align: center;
+}
+
+.sidebar-nav {
+  flex: 1;
+  padding: var(--snice-spacing-md, 1rem);
+  overflow-y: auto;
+}
+
+.content-area {
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  background: var(--snice-color-background-secondary, #f8fafc);
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  gap: var(--snice-spacing-md, 1rem);
+  padding: var(--snice-spacing-md, 1rem) var(--snice-spacing-lg, 2rem);
+  background: var(--snice-color-background, white);
+  border-bottom: 1px solid var(--snice-color-border, #d1d5db);
+}
+
+.sidebar-toggle {
+  background: none;
+  border: none;
+  color: var(--snice-color-text-secondary, #6b7280);
+  cursor: pointer;
+  padding: var(--snice-spacing-xs, 0.5rem);
+  border-radius: var(--snice-border-radius-md, 4px);
+  transition: all var(--snice-transition-fast, 0.15s) ease;
+}
+
+.sidebar-toggle:hover {
+  background: var(--snice-color-background-secondary, #f8fafc);
+  color: var(--snice-color-text, #374151);
+}
+
+.main {
+  padding: var(--snice-spacing-lg, 2rem);
+  overflow-y: auto;
+}
+
+.footer {
+  padding: var(--snice-spacing-md, 1rem) var(--snice-spacing-lg, 2rem);
+  background: var(--snice-color-background, white);
+  border-top: 1px solid var(--snice-color-border, #d1d5db);
+}
+
+/* Mobile responsive */
+@media (max-width: 768px) {
+  .layout {
+    grid-template-columns: 1fr;
+  }
+  
+  :host([collapsed]) .layout {
+    grid-template-columns: 1fr;
+  }
+  
+  .sidebar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 250px;
+    height: 100vh;
+    z-index: 1000;
+    transform: translateX(-100%);
+    transition: transform var(--snice-transition-normal, 0.25s) ease;
+  }
+  
+  :host(:not([collapsed])) .sidebar {
+    transform: translateX(0);
+  }
+}

package/components/layout/snice-layout-sidebar.ts

@@ -0,0 +1,48 @@
+import { element, property } from 'snice';
+import css from './snice-layout-sidebar.css?inline';
+
+@element('snice-layout-sidebar')
+export class SniceLayoutSidebar extends HTMLElement {
+  @property({ type: Boolean, reflect: true })
+  collapsed = false;
+
+  html() {
+    return /*html*/`
+      <div class="layout">
+        <aside class="sidebar">
+          <div class="sidebar-header">
+            <slot name="brand">
+              <h2>App</h2>
+            </slot>
+          </div>
+          <nav class="sidebar-nav">
+            <slot name="nav"></slot>
+          </nav>
+        </aside>
+        
+        <div class="content-area">
+          <header class="header">
+            <button class="sidebar-toggle" type="button" aria-label="Toggle sidebar">
+              <svg viewBox="0 0 24 24" width="20" height="20">
+                <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" fill="currentColor"/>
+              </svg>
+            </button>
+            <slot name="header"></slot>
+          </header>
+          
+          <main class="main">
+            <slot></slot>
+          </main>
+          
+          <footer class="footer">
+            <slot name="footer"></slot>
+          </footer>
+        </div>
+      </div>
+    `;
+  }
+
+  css() {
+    return css;
+  }
+}

package/components/layout/snice-layout-split.css

@@ -0,0 +1,103 @@
+/* Split Layout - Two panels side by side */
+:host {
+  display: block;
+  font-family: var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
+}
+
+.layout {
+  display: grid;
+  min-height: 100vh;
+  gap: 1px;
+  background: var(--snice-color-border, #d1d5db);
+}
+
+/* Horizontal split (default) */
+:host([direction="horizontal"]) .layout,
+:host(:not([direction])) .layout {
+  grid-template-columns: 1fr auto 1fr;
+  grid-template-rows: 1fr;
+}
+
+/* Vertical split */
+:host([direction="vertical"]) .layout {
+  grid-template-rows: 1fr auto 1fr;
+  grid-template-columns: 1fr;
+}
+
+/* Ratio variants - Horizontal */
+:host([ratio="50-50"]) .layout,
+:host(:not([ratio])) .layout {
+  grid-template-columns: 1fr 1px 1fr;
+}
+
+:host([ratio="60-40"]) .layout {
+  grid-template-columns: 60fr 1px 40fr;
+}
+
+:host([ratio="70-30"]) .layout {
+  grid-template-columns: 70fr 1px 30fr;
+}
+
+:host([ratio="33-67"]) .layout {
+  grid-template-columns: 33fr 1px 67fr;
+}
+
+:host([ratio="67-33"]) .layout {
+  grid-template-columns: 67fr 1px 33fr;
+}
+
+/* Ratio variants - Vertical */
+:host([direction="vertical"][ratio="50-50"]) .layout,
+:host([direction="vertical"]:not([ratio])) .layout {
+  grid-template-rows: 1fr 1px 1fr;
+}
+
+:host([direction="vertical"][ratio="60-40"]) .layout {
+  grid-template-rows: 60fr 1px 40fr;
+}
+
+:host([direction="vertical"][ratio="70-30"]) .layout {
+  grid-template-rows: 70fr 1px 30fr;
+}
+
+:host([direction="vertical"][ratio="33-67"]) .layout {
+  grid-template-rows: 33fr 1px 67fr;
+}
+
+:host([direction="vertical"][ratio="67-33"]) .layout {
+  grid-template-rows: 67fr 1px 33fr;
+}
+
+.panel {
+  background: var(--snice-color-background, white);
+  overflow: auto;
+}
+
+.panel-left {
+  padding: var(--snice-spacing-lg, 2rem);
+}
+
+.panel-right {
+  padding: var(--snice-spacing-lg, 2rem);
+}
+
+.divider {
+  background: var(--snice-color-border, #d1d5db);
+}
+
+/* Mobile responsive */
+@media (max-width: 768px) {
+  .layout {
+    grid-template-columns: 1fr !important;
+    grid-template-rows: auto auto auto !important;
+  }
+  
+  .divider {
+    height: 1px;
+  }
+  
+  .panel-left,
+  .panel-right {
+    padding: var(--snice-spacing-md, 1rem);
+  }
+}

package/components/layout/snice-layout-split.ts

@@ -0,0 +1,29 @@
+import { element, property } from 'snice';
+import css from './snice-layout-split.css?inline';
+
+@element('snice-layout-split')
+export class SniceLayoutSplit extends HTMLElement {
+  @property({ reflect: true })
+  direction: 'horizontal' | 'vertical' = 'horizontal';
+  
+  @property({ reflect: true })
+  ratio: '50-50' | '60-40' | '70-30' | '33-67' | '67-33' = '50-50';
+
+  html() {
+    return /*html*/`
+      <div class="layout">
+        <div class="panel panel-left">
+          <slot name="left"></slot>
+        </div>
+        <div class="divider"></div>
+        <div class="panel panel-right">
+          <slot name="right"></slot>
+        </div>
+      </div>
+    `;
+  }
+
+  css() {
+    return css;
+  }
+}

package/components/layout/snice-layout.css

@@ -0,0 +1,72 @@
+/* Layout Component Styles */
+:host {
+  display: block;
+  font-family: var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
+}
+
+.layout {
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  min-height: 100vh;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--snice-spacing-md, 1rem) var(--snice-spacing-lg, 2rem);
+  background: var(--snice-color-background, white);
+  border-bottom: 1px solid var(--snice-color-border, #d1d5db);
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+.brand h1 {
+  margin: 0;
+  font-size: var(--snice-font-size-xl, 1.5rem);
+  color: var(--snice-color-text, #374151);
+  font-weight: var(--snice-font-weight-semibold, 600);
+}
+
+.nav {
+  display: flex;
+  gap: var(--snice-spacing-lg, 2rem);
+}
+
+.nav ::slotted(a) {
+  text-decoration: none;
+  color: var(--snice-color-text-secondary, #6b7280);
+  font-weight: var(--snice-font-weight-medium, 500);
+  padding: var(--snice-spacing-xs, 0.5rem) var(--snice-spacing-md, 1rem);
+  border-radius: var(--snice-border-radius-md, 4px);
+  transition: all var(--snice-transition-fast, 0.15s) ease;
+}
+
+.nav ::slotted(a:hover) {
+  color: var(--snice-color-primary, #3b82f6);
+  background: var(--snice-color-background-secondary, #f8fafc);
+}
+
+.nav ::slotted(a.active) {
+  color: var(--snice-color-primary, #3b82f6);
+  background: var(--snice-color-primary-light, #dbeafe);
+  font-weight: var(--snice-font-weight-semibold, 600);
+}
+
+.main {
+  padding: var(--snice-spacing-lg, 2rem);
+  background: var(--snice-color-background-secondary, #f8fafc);
+  overflow-y: auto;
+}
+
+.footer {
+  padding: var(--snice-spacing-md, 1rem) var(--snice-spacing-lg, 2rem);
+  background: var(--snice-color-background, white);
+  border-top: 1px solid var(--snice-color-border, #d1d5db);
+  text-align: center;
+  color: var(--snice-color-text-secondary, #6b7280);
+  font-size: var(--snice-font-size-sm, 0.875rem);
+}
+
+.footer p {
+  margin: 0;
+}

package/components/layout/snice-layout.ts

@@ -0,0 +1,35 @@
+import { element } from 'snice';
+import css from './snice-layout.css?inline';
+
+@element('snice-layout')
+export class SniceLayout extends HTMLElement {
+  html() {
+    return /*html*/`
+      <div class="layout">
+        <header class="header">
+          <div class="brand">
+            <slot name="brand">
+              <h1>App</h1>
+            </slot>
+          </div>
+          <nav class="nav">
+            <slot name="nav"></slot>
+          </nav>
+        </header>
+        
+        <main class="main">
+          <slot></slot>
+        </main>
+        
+        <footer class="footer">
+          <slot name="footer">
+          </slot>
+        </footer>
+      </div>
+    `;
+  }
+
+  css() {
+    return css;
+  }
+}

package/components/layout/snice-layout.types.ts

@@ -0,0 +1,5 @@
+import type { SniceElement } from 'snice';
+
+export interface SniceLayoutElement extends SniceElement {
+  // Add layout-specific properties and methods here as needed
+}

package/components/login/demo-auth-controller.ts

@@ -0,0 +1,185 @@
+import { controller, respond } from 'snice';
+import type { LoginCredentials, LoginResult } from './snice-login.types';
+
+interface AuthUser {
+  id: string;
+  username: string;
+  email: string;
+  role: string;
+  lastLogin?: string;
+}
+
+@controller('demo-auth-controller')
+export class DemoAuthController {
+  element!: HTMLElement;
+
+  // Mock user database for demo purposes
+  private mockUsers: AuthUser[] = [
+    {
+      id: '1',
+      username: 'demo',
+      email: 'demo@example.com',
+      role: 'user'
+    },
+    {
+      id: '2',
+      username: 'admin',
+      email: 'admin@example.com',
+      role: 'admin'
+    },
+    {
+      id: '3',
+      username: 'test',
+      email: 'test@example.com',
+      role: 'user'
+    }
+  ];
+
+  // Valid passwords for demo (in real app, these would be hashed)
+  private mockPasswords: Record<string, string> = {
+    'demo': 'password',
+    'admin': 'admin123',
+    'test': 'test123'
+  };
+
+  async attach(element: HTMLElement) {
+    this.element = element;
+    console.log('Demo Auth Controller attached to', element.tagName);
+  }
+
+  async detach(element: HTMLElement) {
+    console.log('Demo Auth Controller detached from', element.tagName);
+  }
+
+  @respond('login-user')
+  async handleLogin(credentials: LoginCredentials): Promise<LoginResult> {
+    console.log('Auth controller handling login request:', { username: credentials.username });
+
+    // Simulate network delay
+    await this.delay(200 + Math.random() * 200);
+
+    // Validate credentials
+    const result = await this.authenticateUser(credentials);
+    
+    // Store successful login
+    if (result.success && result.user) {
+      this.storeUserSession(result.user, result.token!);
+    }
+
+    return result;
+  }
+
+  private async authenticateUser(credentials: LoginCredentials): Promise<LoginResult> {
+    const { username, password } = credentials;
+
+    // Basic validation
+    if (!username || !password) {
+      return {
+        success: false,
+        error: 'Username and password are required'
+      };
+    }
+
+    // Find user
+    const user = this.mockUsers.find(u => u.username.toLowerCase() === username.toLowerCase());
+    
+    if (!user) {
+      return {
+        success: false,
+        error: 'Invalid username or password'
+      };
+    }
+
+    // Check password
+    const expectedPassword = this.mockPasswords[user.username];
+    if (password !== expectedPassword) {
+      return {
+        success: false,
+        error: 'Invalid username or password'
+      };
+    }
+
+    // Simulate random authentication failure (10% chance)
+    if (Math.random() < 0.1) {
+      return {
+        success: false,
+        error: 'Authentication service temporarily unavailable'
+      };
+    }
+
+    // Generate mock JWT token
+    const token = this.generateMockToken(user);
+
+    // Update last login
+    user.lastLogin = new Date().toISOString();
+
+    return {
+      success: true,
+      token,
+      user: {
+        id: user.id,
+        username: user.username,
+        email: user.email
+      }
+    };
+  }
+
+  private generateMockToken(user: AuthUser): string {
+    // This is just a demo token - in real apps use proper JWT libraries
+    const header = btoa(JSON.stringify({ alg: 'HS256', typ: 'JWT' }));
+    const payload = btoa(JSON.stringify({
+      sub: user.id,
+      username: user.username,
+      email: user.email,
+      role: user.role,
+      iat: Math.floor(Date.now() / 1000),
+      exp: Math.floor(Date.now() / 1000) + (60 * 60 * 24) // 24 hours
+    }));
+    const signature = btoa('demo-signature-' + Math.random().toString(36));
+    
+    return `${header}.${payload}.${signature}`;
+  }
+
+  private storeUserSession(user: AuthUser, token: string): void {
+    // In a real app, you might store this in localStorage, sessionStorage, or cookies
+    const session = {
+      user: {
+        id: user.id,
+        username: user.username,
+        email: user.email
+      },
+      token,
+      loginTime: new Date().toISOString()
+    };
+
+    // Store in sessionStorage for demo
+    sessionStorage.setItem('demoUserSession', JSON.stringify(session));
+    
+    console.log('User session stored:', session);
+  }
+
+  private delay(ms: number): Promise<void> {
+    return new Promise(resolve => setTimeout(resolve, ms));
+  }
+
+  // Helper method to get current session (for other components to use)
+  getCurrentSession(): { user: AuthUser; token: string } | null {
+    try {
+      const sessionData = sessionStorage.getItem('demoUserSession');
+      return sessionData ? JSON.parse(sessionData) : null;
+    } catch {
+      return null;
+    }
+  }
+
+  // Helper method to logout
+  logout(): void {
+    sessionStorage.removeItem('demoUserSession');
+    console.log('User logged out');
+  }
+
+  // Helper method to check if user is authenticated
+  isAuthenticated(): boolean {
+    return this.getCurrentSession() !== null;
+  }
+}