snice 4.10.0 → 4.12.0

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

@@ -0,0 +1,291 @@
+import { page } from '../router';
+import { render, styles, context, dispatch, on, html, css } from 'snice';
+import type { Placard, Context } from 'snice';
+import { isAuthenticated } from '../guards/auth';
+import type { Principal } from '../types/auth';
+
+const placard: Placard = {
+  name: 'settings',
+  title: 'Settings',
+  icon: '\u2699\ufe0f',
+  show: true,
+  order: 4
+};
+
+@page({ tag: 'settings-page', routes: ['/settings'], guards: [isAuthenticated], placard })
+export class SettingsPage extends HTMLElement {
+  private ctx?: Context;
+  displayName = '';
+  email = '';
+  theme: 'light' | 'dark' | 'system' = 'system';
+  notificationsEnabled = true;
+  saved = false;
+
+  @context()
+  handleContext(ctx: Context) {
+    this.ctx = ctx;
+    const principal = ctx.application.principal as Principal | undefined;
+    const user = principal?.user;
+    this.displayName = user?.name || '';
+    this.email = user?.email || '';
+
+    const storedTheme = localStorage.getItem('app-theme') as 'light' | 'dark' | 'system' | null;
+    this.theme = storedTheme || 'system';
+
+    this.notificationsEnabled = localStorage.getItem('notifications-enabled') !== 'false';
+  }
+
+  handleNameInput(e: Event) {
+    this.displayName = (e.target as HTMLInputElement).value;
+  }
+
+  handleEmailInput(e: Event) {
+    this.email = (e.target as HTMLInputElement).value;
+  }
+
+  setTheme(theme: 'light' | 'dark' | 'system') {
+    this.theme = theme;
+    localStorage.setItem('app-theme', theme);
+    this.applyTheme(theme);
+  }
+
+  toggleNotifications() {
+    this.notificationsEnabled = !this.notificationsEnabled;
+    localStorage.setItem('notifications-enabled', String(this.notificationsEnabled));
+  }
+
+  private applyTheme(theme: string) {
+    if (theme === 'dark') {
+      document.documentElement.style.colorScheme = 'dark';
+    } else if (theme === 'light') {
+      document.documentElement.style.colorScheme = 'light';
+    } else {
+      document.documentElement.style.colorScheme = '';
+    }
+  }
+
+  @on('keydown:ctrl+s')
+  preventDefaultSave(e: Event) {
+    e.preventDefault();
+    this.saveSettings();
+  }
+
+  @dispatch('settings-saved')
+  saveSettings() {
+    if (this.ctx) {
+      const principal = this.ctx.application.principal as Principal;
+      if (principal.user) {
+        principal.user.name = this.displayName;
+        principal.user.email = this.email;
+      }
+      this.ctx.update();
+    }
+
+    this.saved = true;
+    setTimeout(() => { this.saved = false; }, 2000);
+
+    return { displayName: this.displayName, email: this.email, theme: this.theme };
+  }
+
+  @render()
+  renderContent() {
+    return html`
+      <div class="container">
+        <h1>Settings</h1>
+        <p class="hint">Press Ctrl+S to save</p>
+
+        <if ${this.saved}>
+          <snice-alert variant="success" dismissible>
+            Settings saved successfully!
+          </snice-alert>
+        </if>
+
+        <snice-card class="section">
+          <h3>Profile</h3>
+          <div class="form-group">
+            <label>Display Name</label>
+            <snice-input
+              .value=${this.displayName}
+              @input=${this.handleNameInput}
+              placeholder="Your name"
+            ></snice-input>
+          </div>
+          <div class="form-group">
+            <label>Email</label>
+            <snice-input
+              .value=${this.email}
+              @input=${this.handleEmailInput}
+              placeholder="your@email.com"
+            ></snice-input>
+          </div>
+        </snice-card>
+
+        <snice-card class="section">
+          <h3>Appearance</h3>
+          <div class="theme-options">
+            <button
+              class="theme-btn ${this.theme === 'light' ? 'active' : ''}"
+              @click=${() => this.setTheme('light')}
+            >
+              <span class="theme-icon">&#9728;&#65039;</span>
+              Light
+            </button>
+            <button
+              class="theme-btn ${this.theme === 'dark' ? 'active' : ''}"
+              @click=${() => this.setTheme('dark')}
+            >
+              <span class="theme-icon">&#127769;</span>
+              Dark
+            </button>
+            <button
+              class="theme-btn ${this.theme === 'system' ? 'active' : ''}"
+              @click=${() => this.setTheme('system')}
+            >
+              <span class="theme-icon">&#128187;</span>
+              System
+            </button>
+          </div>
+        </snice-card>
+
+        <snice-card class="section">
+          <h3>Notifications</h3>
+          <div class="toggle-row">
+            <div>
+              <p class="toggle-label">Push Notifications</p>
+              <p class="toggle-desc">Receive real-time notification alerts</p>
+            </div>
+            <snice-switch
+              ?checked=${this.notificationsEnabled}
+              @change=${this.toggleNotifications}
+            ></snice-switch>
+          </div>
+        </snice-card>
+
+        <div class="actions">
+          <snice-button variant="primary" @click=${this.saveSettings}>
+            Save Settings
+          </snice-button>
+        </div>
+      </div>
+    `;
+  }
+
+  @styles()
+  componentStyles() {
+    return css`
+      .container {
+        padding: 2rem;
+        max-width: 800px;
+        margin: 0 auto;
+      }
+
+      h1 {
+        margin: 0 0 0.25rem 0;
+        color: var(--primary-color);
+      }
+
+      .hint {
+        margin: 0 0 2rem 0;
+        font-size: 0.8125rem;
+        color: var(--text-light);
+      }
+
+      .section {
+        padding: 1.5rem;
+        margin-bottom: 1.5rem;
+      }
+
+      h3 {
+        margin: 0 0 1.25rem 0;
+        color: var(--primary-color);
+      }
+
+      .form-group {
+        margin-bottom: 1rem;
+      }
+
+      .form-group:last-child {
+        margin-bottom: 0;
+      }
+
+      label {
+        display: block;
+        margin-bottom: 0.375rem;
+        font-size: 0.875rem;
+        font-weight: 500;
+        color: var(--text-color);
+      }
+
+      snice-input {
+        width: 100%;
+      }
+
+      .theme-options {
+        display: flex;
+        gap: 0.75rem;
+      }
+
+      .theme-btn {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 0.5rem;
+        padding: 1rem;
+        background: var(--bg-secondary);
+        border: 2px solid var(--border-color);
+        border-radius: var(--radius-md);
+        cursor: pointer;
+        color: var(--text-color);
+        font-size: 0.875rem;
+        transition: border-color 0.2s;
+      }
+
+      .theme-btn:hover {
+        border-color: var(--primary-color);
+      }
+
+      .theme-btn.active {
+        border-color: var(--primary-color);
+        background: color-mix(in srgb, var(--primary-color) 10%, transparent);
+      }
+
+      .theme-icon {
+        font-size: 1.5rem;
+      }
+
+      .toggle-row {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+
+      .toggle-label {
+        margin: 0;
+        font-weight: 500;
+        color: var(--text-color);
+      }
+
+      .toggle-desc {
+        margin: 0.25rem 0 0 0;
+        font-size: 0.8125rem;
+        color: var(--text-light);
+      }
+
+      .actions {
+        display: flex;
+        justify-content: flex-end;
+      }
+
+      snice-alert {
+        margin-bottom: 1.5rem;
+      }
+
+      @media (max-width: 640px) {
+        .theme-options {
+          flex-direction: column;
+        }
+      }
+    `;
+  }
+}

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

@@ -25,7 +25,7 @@
     sans-serif;
   line-height: 1.5;
   font-weight: 400;
-  color-scheme: light;
+  color-scheme: light dark;
 }
 
 * {
@@ -43,13 +43,22 @@ body {
   min-height: 100vh;
 }
 
+/* Dark theme via color-scheme or prefers-color-scheme */
 @media (prefers-color-scheme: dark) {
-  :root {
+  :root:not([style*="color-scheme: light"]) {
     --bg-primary: #1f2937;
     --bg-secondary: #111827;
     --text-color: #f9fafb;
     --text-light: #9ca3af;
     --border-color: #374151;
-    color-scheme: dark;
   }
 }
+
+/* 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;
+}

package/dist/cdn/accordion/snice-accordion.js

@@ -1,5 +1,5 @@
 /*!
- * snice v4.9.0
+ * snice v4.11.0
  * Imperative TypeScript framework for building vanilla web components with decorators, differential rendering, routing, and controllers. No virtual DOM, no build complexity.
  * (c) 2024
  * Released under the MIT License.

package/dist/cdn/accordion/snice-accordion.min.js

@@ -1,5 +1,5 @@
 /*!
- * snice v4.9.0
+ * snice v4.11.0
  * Imperative TypeScript framework for building vanilla web components with decorators, differential rendering, routing, and controllers. No virtual DOM, no build complexity.
  * (c) 2024
  * Released under the MIT License.

package/dist/cdn/alert/snice-alert.js

@@ -1,5 +1,5 @@
 /*!
- * snice v4.9.0
+ * snice v4.11.0
  * Imperative TypeScript framework for building vanilla web components with decorators, differential rendering, routing, and controllers. No virtual DOM, no build complexity.
  * (c) 2024
  * Released under the MIT License.

package/dist/cdn/alert/snice-alert.min.js

@@ -1,5 +1,5 @@
 /*!
- * snice v4.9.0
+ * snice v4.11.0
  * Imperative TypeScript framework for building vanilla web components with decorators, differential rendering, routing, and controllers. No virtual DOM, no build complexity.
  * (c) 2024
  * Released under the MIT License.

package/dist/cdn/app-tiles/snice-app-tiles.js

@@ -1,5 +1,5 @@
 /*!
- * snice v4.9.0
+ * snice v4.11.0
  * Imperative TypeScript framework for building vanilla web components with decorators, differential rendering, routing, and controllers. No virtual DOM, no build complexity.
  * (c) 2024
  * Released under the MIT License.

package/dist/cdn/app-tiles/snice-app-tiles.min.js

@@ -1,5 +1,5 @@
 /*!
- * snice v4.9.0
+ * snice v4.11.0
  * Imperative TypeScript framework for building vanilla web components with decorators, differential rendering, routing, and controllers. No virtual DOM, no build complexity.
  * (c) 2024
  * Released under the MIT License.

package/dist/cdn/audio-recorder/snice-audio-recorder.js

@@ -1,5 +1,5 @@
 /*!
- * snice v4.9.0
+ * snice v4.11.0
  * Imperative TypeScript framework for building vanilla web components with decorators, differential rendering, routing, and controllers. No virtual DOM, no build complexity.
  * (c) 2024
  * Released under the MIT License.

package/dist/cdn/audio-recorder/snice-audio-recorder.min.js

@@ -1,5 +1,5 @@
 /*!
- * snice v4.9.0
+ * snice v4.11.0
  * Imperative TypeScript framework for building vanilla web components with decorators, differential rendering, routing, and controllers. No virtual DOM, no build complexity.
  * (c) 2024
  * Released under the MIT License.

package/dist/cdn/avatar/snice-avatar.js

@@ -1,5 +1,5 @@
 /*!
- * snice v4.9.0
+ * snice v4.11.0
  * Imperative TypeScript framework for building vanilla web components with decorators, differential rendering, routing, and controllers. No virtual DOM, no build complexity.
  * (c) 2024
  * Released under the MIT License.

package/dist/cdn/avatar/snice-avatar.min.js

@@ -1,5 +1,5 @@
 /*!
- * snice v4.9.0
+ * snice v4.11.0
  * Imperative TypeScript framework for building vanilla web components with decorators, differential rendering, routing, and controllers. No virtual DOM, no build complexity.
  * (c) 2024
  * Released under the MIT License.

package/dist/cdn/badge/snice-badge.js

@@ -1,5 +1,5 @@
 /*!
- * snice v4.9.0
+ * snice v4.11.0
  * Imperative TypeScript framework for building vanilla web components with decorators, differential rendering, routing, and controllers. No virtual DOM, no build complexity.
  * (c) 2024
  * Released under the MIT License.

package/dist/cdn/badge/snice-badge.min.js

@@ -1,5 +1,5 @@
 /*!
- * snice v4.9.0
+ * snice v4.11.0
  * Imperative TypeScript framework for building vanilla web components with decorators, differential rendering, routing, and controllers. No virtual DOM, no build complexity.
  * (c) 2024
  * Released under the MIT License.

package/dist/cdn/banner/snice-banner.js

@@ -1,5 +1,5 @@
 /*!
- * snice v4.9.0
+ * snice v4.11.0
  * Imperative TypeScript framework for building vanilla web components with decorators, differential rendering, routing, and controllers. No virtual DOM, no build complexity.
  * (c) 2024
  * Released under the MIT License.

package/dist/cdn/banner/snice-banner.min.js

@@ -1,5 +1,5 @@
 /*!
- * snice v4.9.0
+ * snice v4.11.0
  * Imperative TypeScript framework for building vanilla web components with decorators, differential rendering, routing, and controllers. No virtual DOM, no build complexity.
  * (c) 2024
  * Released under the MIT License.

package/dist/cdn/book/snice-book.js

@@ -1,5 +1,5 @@
 /*!
- * snice v4.9.0
+ * snice v4.11.0
  * Imperative TypeScript framework for building vanilla web components with decorators, differential rendering, routing, and controllers. No virtual DOM, no build complexity.
  * (c) 2024
  * Released under the MIT License.

package/dist/cdn/book/snice-book.min.js

@@ -1,5 +1,5 @@
 /*!
- * snice v4.9.0
+ * snice v4.11.0
  * Imperative TypeScript framework for building vanilla web components with decorators, differential rendering, routing, and controllers. No virtual DOM, no build complexity.
  * (c) 2024
  * Released under the MIT License.

package/dist/cdn/breadcrumbs/snice-breadcrumbs.js

@@ -1,5 +1,5 @@
 /*!
- * snice v4.9.0
+ * snice v4.11.0
  * Imperative TypeScript framework for building vanilla web components with decorators, differential rendering, routing, and controllers. No virtual DOM, no build complexity.
  * (c) 2024
  * Released under the MIT License.

package/dist/cdn/breadcrumbs/snice-breadcrumbs.min.js

@@ -1,5 +1,5 @@
 /*!
- * snice v4.9.0
+ * snice v4.11.0
  * Imperative TypeScript framework for building vanilla web components with decorators, differential rendering, routing, and controllers. No virtual DOM, no build complexity.
  * (c) 2024
  * Released under the MIT License.

package/dist/cdn/button/snice-button.js

@@ -1,5 +1,5 @@
 /*!
- * snice v4.9.0
+ * snice v4.11.0
  * Imperative TypeScript framework for building vanilla web components with decorators, differential rendering, routing, and controllers. No virtual DOM, no build complexity.
  * (c) 2024
  * Released under the MIT License.

package/dist/cdn/button/snice-button.min.js

@@ -1,5 +1,5 @@
 /*!
- * snice v4.9.0
+ * snice v4.11.0
  * Imperative TypeScript framework for building vanilla web components with decorators, differential rendering, routing, and controllers. No virtual DOM, no build complexity.
  * (c) 2024
  * Released under the MIT License.

package/dist/cdn/calendar/snice-calendar.js

@@ -1,5 +1,5 @@
 /*!
- * snice v4.9.0
+ * snice v4.11.0
  * Imperative TypeScript framework for building vanilla web components with decorators, differential rendering, routing, and controllers. No virtual DOM, no build complexity.
  * (c) 2024
  * Released under the MIT License.

package/dist/cdn/calendar/snice-calendar.min.js

@@ -1,5 +1,5 @@
 /*!
- * snice v4.9.0
+ * snice v4.11.0
  * Imperative TypeScript framework for building vanilla web components with decorators, differential rendering, routing, and controllers. No virtual DOM, no build complexity.
  * (c) 2024
  * Released under the MIT License.

package/dist/cdn/camera/README.md

@@ -11,7 +11,7 @@ CDN build of the Snice camera component. Requires the Snice runtime (`snice-runt
 ```
 
 ## Size
-- Minified: 14.5 KB
+- Minified: 14.6 KB
 - Gzipped: 4.3 KB
 
 ## Theme

package/dist/cdn/camera/snice-camera.js

@@ -1,5 +1,5 @@
 /*!
- * snice v4.9.0
+ * snice v4.11.0
  * Imperative TypeScript framework for building vanilla web components with decorators, differential rendering, routing, and controllers. No virtual DOM, no build complexity.
  * (c) 2024
  * Released under the MIT License.

package/dist/cdn/camera/snice-camera.min.js

@@ -1,5 +1,5 @@
 /*!
- * snice v4.9.0
+ * snice v4.11.0
  * Imperative TypeScript framework for building vanilla web components with decorators, differential rendering, routing, and controllers. No virtual DOM, no build complexity.
  * (c) 2024
  * Released under the MIT License.

package/dist/cdn/camera-annotate/snice-camera-annotate.js

@@ -1,5 +1,5 @@
 /*!
- * snice v4.9.0
+ * snice v4.11.0
  * Imperative TypeScript framework for building vanilla web components with decorators, differential rendering, routing, and controllers. No virtual DOM, no build complexity.
  * (c) 2024
  * Released under the MIT License.

package/dist/cdn/camera-annotate/snice-camera-annotate.min.js

@@ -1,5 +1,5 @@
 /*!
- * snice v4.9.0
+ * snice v4.11.0
  * Imperative TypeScript framework for building vanilla web components with decorators, differential rendering, routing, and controllers. No virtual DOM, no build complexity.
  * (c) 2024
  * Released under the MIT License.

package/dist/cdn/candlestick/snice-candlestick.js

@@ -1,5 +1,5 @@
 /*!
- * snice v4.9.0
+ * snice v4.11.0
  * Imperative TypeScript framework for building vanilla web components with decorators, differential rendering, routing, and controllers. No virtual DOM, no build complexity.
  * (c) 2024
  * Released under the MIT License.

package/dist/cdn/candlestick/snice-candlestick.min.js

@@ -1,5 +1,5 @@
 /*!
- * snice v4.9.0
+ * snice v4.11.0
  * Imperative TypeScript framework for building vanilla web components with decorators, differential rendering, routing, and controllers. No virtual DOM, no build complexity.
  * (c) 2024
  * Released under the MIT License.

package/dist/cdn/card/snice-card.js

@@ -1,5 +1,5 @@
 /*!
- * snice v4.9.0
+ * snice v4.11.0
  * Imperative TypeScript framework for building vanilla web components with decorators, differential rendering, routing, and controllers. No virtual DOM, no build complexity.
  * (c) 2024
  * Released under the MIT License.

package/dist/cdn/card/snice-card.min.js

@@ -1,5 +1,5 @@
 /*!
- * snice v4.9.0
+ * snice v4.11.0
  * Imperative TypeScript framework for building vanilla web components with decorators, differential rendering, routing, and controllers. No virtual DOM, no build complexity.
  * (c) 2024
  * Released under the MIT License.

package/dist/cdn/carousel/README.md

@@ -11,8 +11,8 @@ CDN build of the Snice carousel component. Requires the Snice runtime (`snice-ru
 ```
 
 ## Size
-- Minified: 10.9 KB
-- Gzipped: 3.3 KB
+- Minified: 11.1 KB
+- Gzipped: 3.4 KB
 
 ## Theme
 For proper styling, link the Snice theme CSS:

package/dist/cdn/carousel/snice-carousel.js

@@ -1,5 +1,5 @@
 /*!
- * snice v4.9.0
+ * snice v4.11.0
  * Imperative TypeScript framework for building vanilla web components with decorators, differential rendering, routing, and controllers. No virtual DOM, no build complexity.
  * (c) 2024
  * Released under the MIT License.
@@ -106,6 +106,9 @@ var SniceCarousel = (function (exports, snice) {
       let _slotElement_decorators;
       let _slotElement_initializers = [];
       let _slotElement_extraInitializers = [];
+      let _slideCount_decorators;
+      let _slideCount_initializers = [];
+      let _slideCount_extraInitializers = [];
       let _init_decorators;
       let _handleSlotChange_decorators;
       let _cleanup_decorators;
@@ -129,7 +132,8 @@ var SniceCarousel = (function (exports, snice) {
               this.spaceBetween = (__runInitializers(this, _slidesPerView_extraInitializers), __runInitializers(this, _spaceBetween_initializers, 0));
               this.container = (__runInitializers(this, _spaceBetween_extraInitializers), __runInitializers(this, _container_initializers, void 0));
               this.slotElement = (__runInitializers(this, _container_extraInitializers), __runInitializers(this, _slotElement_initializers, void 0));
-              this.slideCount = (__runInitializers(this, _slotElement_extraInitializers), 0);
+              this.slideCount = (__runInitializers(this, _slotElement_extraInitializers), __runInitializers(this, _slideCount_initializers, 0));
+              this.autoplayTimer = __runInitializers(this, _slideCount_extraInitializers);
               this.previousIndex = 0;
           }
           static {
@@ -145,6 +149,7 @@ var SniceCarousel = (function (exports, snice) {
               _spaceBetween_decorators = [snice.property({ type: Number, attribute: 'space-between' })];
               _container_decorators = [snice.query('.carousel__container')];
               _slotElement_decorators = [snice.query('slot')];
+              _slideCount_decorators = [snice.property({ type: Number })];
               _init_decorators = [snice.ready()];
               _handleSlotChange_decorators = [snice.on('slotchange', { target: 'slot' })];
               _cleanup_decorators = [snice.dispose()];
@@ -172,6 +177,7 @@ var SniceCarousel = (function (exports, snice) {
               __esDecorate(null, null, _spaceBetween_decorators, { kind: "field", name: "spaceBetween", static: false, private: false, access: { has: obj => "spaceBetween" in obj, get: obj => obj.spaceBetween, set: (obj, value) => { obj.spaceBetween = value; } }, metadata: _metadata }, _spaceBetween_initializers, _spaceBetween_extraInitializers);
               __esDecorate(null, null, _container_decorators, { kind: "field", name: "container", static: false, private: false, access: { has: obj => "container" in obj, get: obj => obj.container, set: (obj, value) => { obj.container = value; } }, metadata: _metadata }, _container_initializers, _container_extraInitializers);
               __esDecorate(null, null, _slotElement_decorators, { kind: "field", name: "slotElement", static: false, private: false, access: { has: obj => "slotElement" in obj, get: obj => obj.slotElement, set: (obj, value) => { obj.slotElement = value; } }, metadata: _metadata }, _slotElement_initializers, _slotElement_extraInitializers);
+              __esDecorate(null, null, _slideCount_decorators, { kind: "field", name: "slideCount", static: false, private: false, access: { has: obj => "slideCount" in obj, get: obj => obj.slideCount, set: (obj, value) => { obj.slideCount = value; } }, metadata: _metadata }, _slideCount_initializers, _slideCount_extraInitializers);
               __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
               _classThis = _classDescriptor.value;
               if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
@@ -253,7 +259,7 @@ var SniceCarousel = (function (exports, snice) {
 
         <if ${this.showIndicators}>
           <div class="carousel__indicators" part="indicators">
-            ${Array.from({ length: this.slideCount - this.slidesPerView + 1 }).map((_, index) => {
+            ${Array.from({ length: Math.max(0, this.slideCount - this.slidesPerView + 1) }).map((_, index) => {
                 const indicatorClasses = [
                     'carousel__indicator',
                     index === this.activeIndex ? 'carousel__indicator--active' : ''