snice 4.28.0 → 4.30.0

package/bin/templates/base/src/components/counter-button.ts

@@ -1,88 +0,0 @@
-import { element, property, render, styles, html, css, dispatch } from 'snice';
-import type { ICounterButton } from './counter-button.types';
-
-@element('counter-button')
-export class CounterButton extends HTMLElement implements ICounterButton {
-  @property({ type: Number })
-  count = 0;
-
-  @render()
-  renderContent() {
-    return html/*html*/`
-      <div class="counter">
-        <button class="btn minus" @click=${this.handleMinus}>-</button>
-        <span class="count">${this.count}</span>
-        <button class="btn plus" @click=${this.handlePlus}>+</button>
-      </div>
-    `;
-  }
-
-  @styles()
-  componentStyles() {
-    return css/*css*/`
-      .counter {
-        display: inline-flex;
-        align-items: center;
-        gap: 1rem;
-        padding: 1rem;
-        background: white;
-        border-radius: 8px;
-        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
-      }
-
-      .count {
-        font-size: 1.5rem;
-        font-weight: bold;
-        min-width: 3rem;
-        text-align: center;
-      }
-
-      .btn {
-        width: 2rem;
-        height: 2rem;
-        border: 2px solid var(--primary-color);
-        background: white;
-        color: var(--primary-color);
-        border-radius: 4px;
-        cursor: pointer;
-        font-size: 1.2rem;
-      }
-
-      .btn:hover {
-        background: var(--primary-color);
-        color: white;
-      }
-    `;
-  }
-
-  // Imperative methods that controller can call
-  setCount(value: number) {
-    this.count = value;
-  }
-
-  @dispatch('count-changed')
-  increment() {
-    this.count++;
-    return { count: this.count };
-  }
-
-  @dispatch('count-changed')
-  decrement() {
-    this.count--;
-    return { count: this.count };
-  }
-
-  @dispatch('count-changed')
-  reset() {
-    this.count = 0;
-    return { count: this.count };
-  }
-
-  handlePlus() {
-    this.increment();
-  }
-
-  handleMinus() {
-    this.decrement();
-  }
-}

package/bin/templates/base/src/components/counter-button.types.ts

@@ -1,7 +0,0 @@
-export interface ICounterButton extends HTMLElement {
-  count: number;
-  setCount(count: number): void;
-  increment(): void;
-  decrement(): void;
-  reset(): void;
-}

package/bin/templates/base/src/components/feature-card.ts

@@ -1,59 +0,0 @@
-import { element, property, render, styles, html, css } from 'snice';
-
-@element('feature-card')
-export class FeatureCard extends HTMLElement {
-  @property() icon = '✨';
-  @property() title = '';
-  @property() description = '';
-
-  @render()
-  renderContent() {
-    return html/*html*/`
-      <div class="card">
-        <div class="card__icon">${this.icon}</div>
-        <h3 class="card__title">${this.title}</h3>
-        <p class="card__description">${this.description}</p>
-      </div>
-    `;
-  }
-
-  @styles()
-  componentStyles() {
-    return css/*css*/`
-      :host {
-        display: block;
-      }
-
-      .card {
-        padding: 2rem;
-        background: white;
-        border-radius: 12px;
-        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-        transition: transform 0.2s, box-shadow 0.2s;
-      }
-
-      .card:hover {
-        transform: translateY(-4px);
-        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
-      }
-
-      .card__icon {
-        font-size: 3rem;
-        margin-bottom: 1rem;
-      }
-
-      .card__title {
-        font-size: 1.25rem;
-        font-weight: 600;
-        margin: 0 0 0.5rem 0;
-        color: var(--text-color, #333);
-      }
-
-      .card__description {
-        margin: 0;
-        color: var(--text-light, #666);
-        line-height: 1.6;
-      }
-    `;
-  }
-}

package/bin/templates/base/src/components/feature-card.types.ts

@@ -1,5 +0,0 @@
-export interface FeatureCardElement extends HTMLElement {
-  icon: string;
-  title: string;
-  description: string;
-}

package/bin/templates/base/src/controllers/counter-controller.ts

@@ -1,24 +0,0 @@
-import { controller, on } from 'snice';
-import type { ICounterButton } from '../components/counter-button.types';
-
-@controller('counter')
-export class CounterController {
-  element!: ICounterButton;
-
-  async attach() {
-    // Load saved count from localStorage
-    const saved = localStorage.getItem('counter-value');
-    if (saved) {
-      this.element.setCount(parseInt(saved));
-    }
-  }
-
-  async detach() {
-    // any clean up you need
-  }
-
-  @on('count-changed')
-  handleCountChanged(e: CustomEvent) {
-    localStorage.setItem('counter-value', String(e.detail.count));
-  }
-}

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

@@ -1,24 +0,0 @@
-import { initialize } from './router';
-import './styles/global.css';
-
-// Import snice layout
-import 'snice/components/layout/snice-layout';
-
-// Import snice components
-import 'snice/components/button/snice-button';
-import 'snice/components/card/snice-card';
-
-// Import custom components
-import './components/counter-button';
-import './components/feature-card';
-
-// Import controllers
-import './controllers/counter-controller';
-
-// Import pages
-import './pages/home-page';
-import './pages/about-page';
-import './pages/not-found-page';
-
-// Initialize router
-initialize();

package/bin/templates/base/src/pages/about-page.ts

@@ -1,68 +0,0 @@
-import { page } from '../router';
-import { render, styles, html, css } from 'snice';
-import type { Placard } from 'snice';
-
-const placard: Placard = {
-  name: 'about',
-  title: 'About',
-  icon: 'ℹ️',
-  show: true,
-  order: 2
-};
-
-@page({ tag: 'about-page', routes: ['/about'], placard })
-export class AboutPage extends HTMLElement {
-  @render()
-  renderContent() {
-    return html/*html*/`
-      <div class="container">
-        <h1>About</h1>
-        <p>This app was built with Snice, a modern web components framework.</p>
-        <p>Version 1.0.0</p>
-
-        <div class="nav">
-          <a href="#/" class="btn">Back to Home</a>
-        </div>
-      </div>
-    `;
-  }
-
-  @styles()
-  componentStyles() {
-    return css/*css*/`
-      .container {
-        padding: 3rem;
-        max-width: 800px;
-        margin: 0 auto;
-        text-align: center;
-      }
-      
-      h1 {
-        color: var(--primary-color);
-        margin-bottom: 1rem;
-      }
-      
-      p {
-        color: var(--text-light);
-        margin-bottom: 1rem;
-      }
-      
-      .nav {
-        margin-top: 3rem;
-      }
-      
-      .btn {
-        display: inline-block;
-        padding: 0.75rem 1.5rem;
-        background: var(--primary-color);
-        color: white;
-        text-decoration: none;
-        border-radius: 6px;
-      }
-      
-      .btn:hover {
-        background: var(--secondary-color);
-      }
-    `;
-  }
-}

package/bin/templates/base/src/pages/home-page.ts

@@ -1,105 +0,0 @@
-import { page } from '../router';
-import { render, styles, html, css } from 'snice';
-import type { Placard } from 'snice';
-
-const placard: Placard = {
-  name: 'home',
-  title: 'Home',
-  icon: '🏠',
-  show: true,
-  order: 1
-};
-
-@page({ tag: 'home-page', routes: ['/'], placard })
-export class HomePage extends HTMLElement {
-  @render()
-  renderContent() {
-    return html/*html*/`
-      <div class="container">
-        <h1>Welcome to {{projectName}}</h1>
-        <p>Built with Snice</p>
-
-        <div class="features">
-          <feature-card
-            icon="⚡"
-            title="Fast & Lightweight"
-            description="No virtual DOM overhead. Direct DOM updates with differential rendering.">
-          </feature-card>
-
-          <feature-card
-            icon="🎨"
-            title="Type-Safe"
-            description="Full TypeScript support with decorators for clean, maintainable code.">
-          </feature-card>
-
-          <feature-card
-            icon="🔧"
-            title="Web Standards"
-            description="Built on native Web Components. Works everywhere, no framework lock-in.">
-          </feature-card>
-        </div>
-
-        <snice-card class="demo-section">
-          <h2>Interactive Counter Demo</h2>
-          <p>This counter persists its state using a controller:</p>
-          <counter-button controller="counter"></counter-button>
-        </snice-card>
-
-        <div class="nav">
-          <snice-button variant="primary" size="medium">
-            <a href="#/about" style="color: inherit; text-decoration: none;">Learn More</a>
-          </snice-button>
-        </div>
-      </div>
-    `;
-  }
-
-  @styles()
-  componentStyles() {
-    return css/*css*/`
-      .container {
-        padding: 3rem;
-        text-align: center;
-        max-width: 800px;
-        margin: 0 auto;
-      }
-      
-      h1 {
-        color: var(--primary-color);
-        margin-bottom: 1rem;
-        font-size: 2.5rem;
-      }
-      
-      h2 {
-        color: var(--primary-color);
-        margin-bottom: 1rem;
-        font-size: 1.5rem;
-      }
-      
-      p {
-        color: var(--text-light);
-        margin-bottom: 2rem;
-      }
-      
-      .features {
-        display: grid;
-        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-        gap: 2rem;
-        margin: 3rem 0;
-      }
-
-      .demo-section {
-        margin: 3rem 0;
-        text-align: center;
-      }
-
-      .demo-section h2 {
-        margin-top: 0;
-      }
-
-      .nav {
-        margin-top: 3rem;
-      }
-    `;
-  }
-}

package/bin/templates/base/src/pages/not-found-page.ts

@@ -1,55 +0,0 @@
-import { page } from '../router';
-import { render, styles, html, css } from 'snice';
-
-@page({ tag: 'not-found-page', routes: ['/404'] })
-export class NotFoundPage extends HTMLElement {
-  @render()
-  renderContent() {
-    return html/*html*/`
-      <div class="container">
-        <h1>404</h1>
-        <p>Page not found</p>
-        <a href="#/" class="btn">Go Home</a>
-      </div>
-    `;
-  }
-
-  @styles()
-  componentStyles() {
-    return css/*css*/`
-      .container {
-        padding: 3rem;
-        text-align: center;
-        min-height: 100vh;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-      }
-      
-      h1 {
-        font-size: 4rem;
-        color: var(--primary-color);
-        margin-bottom: 1rem;
-      }
-      
-      p {
-        color: var(--text-light);
-        margin-bottom: 2rem;
-      }
-      
-      .btn {
-        display: inline-block;
-        padding: 0.75rem 1.5rem;
-        background: var(--primary-color);
-        color: white;
-        text-decoration: none;
-        border-radius: 6px;
-      }
-      
-      .btn:hover {
-        background: var(--secondary-color);
-      }
-    `;
-  }
-}

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

@@ -1,9 +0,0 @@
-import { Router } from 'snice';
-
-const { page, initialize, navigate } = Router({
-  target: '#app',
-  type: 'hash',
-  layout: 'snice-layout',
-});
-
-export { page, initialize, navigate };

package/bin/templates/base/src/styles/global.css

@@ -1,27 +0,0 @@
-:root {
-  --primary-color: #667eea;
-  --secondary-color: #764ba2;
-  --text-color: #333;
-  --text-light: #666;
-  --bg-color: #f7f7f7;
-  --white: #ffffff;
-  --shadow: 0 2px 4px rgba(0,0,0,0.1);
-  --shadow-lg: 0 10px 30px rgba(0,0,0,0.15);
-}
-
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-body {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
-  color: var(--text-color);
-  background: var(--bg-color);
-  line-height: 1.6;
-}
-
-#app {
-  min-height: 100vh;
-}

package/bin/templates/base/src/types/api-response.ts

@@ -1,5 +0,0 @@
-export interface ApiResponse<T> {
-  data: T;
-  error?: string;
-  loading: boolean;
-}

package/bin/templates/base/src/types/status.ts

@@ -1 +0,0 @@
-export type Status = 'idle' | 'loading' | 'success' | 'error';

package/bin/templates/base/src/types/theme.ts

@@ -1 +0,0 @@
-export type Theme = 'light' | 'dark' | 'auto';

package/bin/templates/base/src/types/user.ts

@@ -1,5 +0,0 @@
-export interface User {
-  id: string;
-  name: string;
-  email: string;
-}

package/bin/templates/base/vite.config.ts

@@ -1,38 +0,0 @@
-import { defineConfig } from 'vite';
-import swc from 'unplugin-swc';
-
-export default defineConfig({
-  plugins: [
-    swc.vite({
-      jsc: {
-        parser: {
-          syntax: 'typescript',
-          decorators: true,
-        },
-        target: 'es2022',
-        transform: {
-          decoratorMetadata: false,
-          decoratorVersion: '2022-03',
-          useDefineForClassFields: false,
-        },
-      },
-    }),
-  ],
-  build: {
-    target: 'es2015',
-    minify: 'terser',
-    cssMinify: true,
-    rollupOptions: {
-      output: {
-        manualChunks: {
-          vendor: ['snice']
-        }
-      }
-    },
-    sourcemap: true,
-    chunkSizeWarningLimit: 500
-  },
-  esbuild: {
-    drop: process.env.NODE_ENV === 'production' ? ['debugger'] : []
-  }
-});

package/bin/templates/pwa/public/vite.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

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

@@ -1,20 +0,0 @@
-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/styles/global.css

@@ -1,64 +0,0 @@
-:root {
-  --primary-color: #6366f1;
-  --secondary-color: #8b5cf6;
-  --success-color: #10b981;
-  --warning-color: #f59e0b;
-  --danger-color: #ef4444;
-  --info-color: #3b82f6;
-
-  --bg-primary: #ffffff;
-  --bg-secondary: #f9fafb;
-  --text-color: #1f2937;
-  --text-light: #6b7280;
-  --border-color: #e5e7eb;
-
-  --radius-sm: 0.375rem;
-  --radius-md: 0.5rem;
-  --radius-lg: 0.75rem;
-
-  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
-  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
-
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-  color-scheme: light dark;
-}
-
-* {
-  box-sizing: border-box;
-}
-
-body {
-  margin: 0;
-  padding: 0;
-  background-color: var(--bg-secondary);
-  color: var(--text-color);
-}
-
-#app {
-  min-height: 100vh;
-}
-
-/* Dark theme via color-scheme or prefers-color-scheme */
-@media (prefers-color-scheme: dark) {
-  :root:not([style*="color-scheme: light"]) {
-    --bg-primary: #1f2937;
-    --bg-secondary: #111827;
-    --text-color: #f9fafb;
-    --text-light: #9ca3af;
-    --border-color: #374151;
-  }
-}
-
-/* Forced dark via settings page */
-:root[style*="color-scheme: dark"] {
-  --bg-primary: #1f2937;
-  --bg-secondary: #111827;
-  --text-color: #f9fafb;
-  --text-light: #9ca3af;
-  --border-color: #374151;
-}