snice 2.1.5 → 2.2.0

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

@@ -1,117 +0,0 @@
-/* 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

@@ -1,48 +0,0 @@
-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

@@ -1,103 +0,0 @@
-/* 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

@@ -1,29 +0,0 @@
-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

@@ -1,72 +0,0 @@
-/* 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

@@ -1,35 +0,0 @@
-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/login/demo-auth-controller.ts

@@ -1,185 +0,0 @@
-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;
-  }
-}