snice 3.6.0 → 3.7.0

package/bin/templates/pwa/src/services/jwt.ts

@@ -0,0 +1,35 @@
+interface JWTPayload {
+  exp?: number;
+  iat?: number;
+  sub?: string;
+  [key: string]: any;
+}
+
+export function decodeJWT(token: string): JWTPayload | null {
+  try {
+    const parts = token.split('.');
+    if (parts.length !== 3) return null;
+
+    const payload = parts[1];
+    const decoded = atob(payload.replace(/-/g, '+').replace(/_/g, '/'));
+    return JSON.parse(decoded);
+  } catch (err) {
+    console.error('Failed to decode JWT:', err);
+    return null;
+  }
+}
+
+export function isTokenExpired(token: string): boolean {
+  const payload = decodeJWT(token);
+  if (!payload || !payload.exp) return true;
+
+  const now = Math.floor(Date.now() / 1000);
+  return payload.exp < now;
+}
+
+export function getTokenExpiration(token: string): Date | null {
+  const payload = decodeJWT(token);
+  if (!payload || !payload.exp) return null;
+
+  return new Date(payload.exp * 1000);
+}

package/bin/templates/pwa/src/services/storage.ts

@@ -0,0 +1,24 @@
+const TOKEN_KEY = 'auth_token';
+const USER_KEY = 'auth_user';
+
+export function getToken(): string | null {
+  return localStorage.getItem(TOKEN_KEY);
+}
+
+export function setToken(token: string): void {
+  localStorage.setItem(TOKEN_KEY, token);
+}
+
+export function clearToken(): void {
+  localStorage.removeItem(TOKEN_KEY);
+  localStorage.removeItem(USER_KEY);
+}
+
+export function getUser<T>(): T | null {
+  const user = localStorage.getItem(USER_KEY);
+  return user ? JSON.parse(user) : null;
+}
+
+export function setUser<T>(user: T): void {
+  localStorage.setItem(USER_KEY, JSON.stringify(user));
+}

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

@@ -0,0 +1,55 @@
+: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;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  background-color: var(--bg-secondary);
+  color: var(--text-color);
+}
+
+#app {
+  min-height: 100vh;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg-primary: #1f2937;
+    --bg-secondary: #111827;
+    --text-color: #f9fafb;
+    --text-light: #9ca3af;
+    --border-color: #374151;
+    color-scheme: dark;
+  }
+}

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

@@ -0,0 +1,21 @@
+export interface User {
+  id: string;
+  email: string;
+  name: string;
+  avatar?: string;
+}
+
+export interface LoginCredentials {
+  email: string;
+  password: string;
+}
+
+export interface LoginResponse {
+  token: string;
+  user: User;
+}
+
+export interface AppContext {
+  user: User | null;
+  isAuthenticated: boolean;
+}

package/bin/templates/pwa/src/types/notifications.ts

@@ -0,0 +1,9 @@
+export type NotificationType = 'info' | 'success' | 'warning' | 'error';
+
+export interface Notification {
+  id: string;
+  title: string;
+  message: string;
+  type: NotificationType;
+  timestamp: string;
+}

package/bin/templates/pwa/src/utils/fetch.ts

@@ -0,0 +1,39 @@
+export type Middleware = (
+  url: string,
+  options: RequestInit,
+  next: () => Promise<Response>
+) => Promise<Response>;
+
+export type FetchConfig = {
+  baseURL?: string;
+  middleware?: Middleware[];
+  headers?: Record<string, string>;
+};
+
+export function createFetch(config: FetchConfig = {}) {
+  return async (url: string, options: RequestInit = {}): Promise<Response> => {
+    const fullURL = config.baseURL ? `${config.baseURL}${url}` : url;
+
+    const execute = async (): Promise<Response> => {
+      return fetch(fullURL, {
+        ...options,
+        headers: {
+          ...config.headers,
+          ...options.headers,
+        },
+      });
+    };
+
+    // Chain middleware (reverse order so first middleware wraps execution)
+    let chain = execute;
+    if (config.middleware) {
+      for (let i = config.middleware.length - 1; i >= 0; i--) {
+        const middleware = config.middleware[i];
+        const next = chain;
+        chain = () => middleware(fullURL, options, next);
+      }
+    }
+
+    return chain();
+  };
+}

package/bin/templates/pwa/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "allowImportingTsExtensions": true,
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "experimentalDecorators": true,
+    "useDefineForClassFields": false,
+    "noEmit": true,
+    "types": ["vite/client"]
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}

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

@@ -0,0 +1,94 @@
+import { defineConfig } from 'vite';
+import swc from 'unplugin-swc';
+import { VitePWA } from 'vite-plugin-pwa';
+
+export default defineConfig({
+  plugins: [
+    swc.vite({
+      jsc: {
+        parser: {
+          syntax: 'typescript',
+          decorators: true,
+        },
+        target: 'es2022',
+        transform: {
+          decoratorMetadata: false,
+          decoratorVersion: '2022-03',
+          useDefineForClassFields: false,
+        },
+      },
+    }),
+    VitePWA({
+      registerType: 'autoUpdate',
+      includeAssets: ['vite.svg', 'icons/*.png'],
+      manifest: {
+        name: '{{projectName}}',
+        short_name: '{{projectName}}',
+        description: 'PWA built with Snice',
+        theme_color: '#6366f1',
+        background_color: '#ffffff',
+        display: 'standalone',
+        icons: [
+          {
+            src: '/icons/icon-192.png',
+            sizes: '192x192',
+            type: 'image/png',
+          },
+          {
+            src: '/icons/icon-512.png',
+            sizes: '512x512',
+            type: 'image/png',
+          },
+        ],
+      },
+      workbox: {
+        globPatterns: ['**/*.{js,css,html,ico,png,svg,woff,woff2}'],
+        runtimeCaching: [
+          {
+            urlPattern: /^https:\/\/fonts\.googleapis\.com\/.*/i,
+            handler: 'CacheFirst',
+            options: {
+              cacheName: 'google-fonts-cache',
+              expiration: {
+                maxEntries: 10,
+                maxAgeSeconds: 60 * 60 * 24 * 365, // 1 year
+              },
+              cacheableResponse: {
+                statuses: [0, 200],
+              },
+            },
+          },
+          {
+            urlPattern: /^https:\/\/api\..*/i,
+            handler: 'NetworkFirst',
+            options: {
+              cacheName: 'api-cache',
+              networkTimeoutSeconds: 10,
+              expiration: {
+                maxEntries: 50,
+                maxAgeSeconds: 60 * 5, // 5 minutes
+              },
+            },
+          },
+        ],
+      },
+    }),
+  ],
+  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/dist/components/music-player/snice-music-player.d.ts

@@ -0,0 +1,72 @@
+import type { Track, RepeatMode, PlayerState, SniceMusicPlayerElement } from './snice-music-player.types';
+export declare class SniceMusicPlayer extends HTMLElement implements SniceMusicPlayerElement {
+    tracks: Track[];
+    currentTrackIndex: number;
+    currentTrack: string;
+    currentTime: number;
+    duration: number;
+    volume: number;
+    muted: boolean;
+    shuffle: boolean;
+    repeat: RepeatMode;
+    state: PlayerState;
+    autoplay: boolean;
+    showPlaylist: boolean;
+    showControls: boolean;
+    showVolume: boolean;
+    showArtwork: boolean;
+    showTrackInfo: boolean;
+    compact: boolean;
+    private showVolumeSlider;
+    private audioElement;
+    private updateInterval;
+    private shuffleHistory;
+    private shuffleQueue;
+    private progressElement?;
+    private volumeSlider?;
+    componentStyles(): import("snice").CSSResult;
+    init(): void;
+    cleanup(): void;
+    handleTracksChange(): void;
+    handleCurrentTrackChange(oldVal: string, newVal: string): void;
+    handleVolumeChange(oldVal: number, newVal: number): void;
+    handleMutedChange(oldVal: boolean, newVal: boolean): void;
+    renderPlayer(): import("snice").TemplateResult;
+    play(): Promise<void>;
+    pause(): void;
+    stop(): void;
+    next(): void;
+    previous(): void;
+    seek(time: number): void;
+    setVolume(volume: number): void;
+    toggleShuffle(): void;
+    setRepeat(mode: RepeatMode): void;
+    loadTrack(index: number): Promise<void>;
+    getCurrentTrack(): Track | null;
+    private toggleMute;
+    private toggleVolumeSlider;
+    private cycleRepeat;
+    private handleSeek;
+    private handleVolumeSlider;
+    private handleTrackEnded;
+    private getNextShuffleIndex;
+    private initializeShuffleQueue;
+    private startUpdateInterval;
+    private stopUpdateInterval;
+    private formatTime;
+    private emitPlay;
+    private emitPause;
+    private emitStop;
+    private emitTrackChange;
+    private emitTrackEnded;
+    private emitSeek;
+    private emitVolumeChange;
+    private emitShuffleChange;
+    private emitRepeatChange;
+    private emitError;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'snice-music-player': SniceMusicPlayer;
+    }
+}