u2ui 1.0.1 → 1.4.5

package/js/serviceWorker/serviceWorker.js

@@ -0,0 +1,84 @@
+// Zentrale Registration - nur einmal aufrufen
+export async function register(options = {}) {
+    if (!('serviceWorker' in navigator)) return null;
+
+    try {
+        // Warten auf load event
+        if (document.readyState !== 'complete') {
+            console.log('not "load" yet, wait for register')
+            await new Promise(resolve => {
+                addEventListener('load', resolve, { once: true });
+            });
+        }
+
+        const registration = await navigator.serviceWorker.register('../sw.js', { // '.. ???? im selben verzeichnis'
+            scope: options.scope || '/'
+        });
+
+        console.log('✅ SW registered');
+        console.log('   Scope:', registration.scope);
+        console.log('   Active:', registration.active?.state);
+
+
+        navigator.serviceWorker.ready.then(async (readyReg) => {
+            await registration.navigationPreload.enable();
+        });
+
+        registration.update(); // Updates checken, macht das sinn?
+        setInterval(() => registration.update(), 30 * 1000); // regelmässsig
+
+        return registration;
+    } catch (error) {
+        console.error('❌ SW registration failed:', error);
+        return null;
+    }
+}
+
+export function onUpdateAvailable(callback) {
+    if (!('serviceWorker' in navigator)) return;
+
+    navigator.serviceWorker.ready.then(registration => {
+        // Update gefunden
+        registration.addEventListener('updatefound', () => {
+            const newWorker = registration.installing;
+            if (!newWorker) return;
+
+            newWorker.addEventListener('statechange', () => {
+                if (newWorker.state === 'installed' && navigator.serviceWorker.controller) {
+                    // Neuer SW wartet, alter ist noch aktiv
+                    callback(newWorker);
+                }
+            });
+        });
+
+        // gleich Manuell auf Updates prüfen??
+    });
+
+    // Controller hat gewechselt (nach skipWaiting)
+    navigator.serviceWorker.addEventListener('controllerchange', () => {
+        console.log('🔄 Controller changed - reloading');
+        //callback();
+    });
+}
+
+// Neues Update aktivieren
+export function skipWaiting() {
+  const controller = navigator.serviceWorker.controller;
+  if (!controller) {
+    console.warn('⚠️ No active service worker');
+    return;
+  }
+  controller.postMessage({ type: 'SKIP_WAITING' });
+}
+
+// Cache-Events abhören
+export function onCacheServed(callback) {
+  if (!('serviceWorker' in navigator)) return;
+
+  navigator.serviceWorker.addEventListener('message', (event) => {
+    if (event.data?.type === 'CACHE_SERVED') {
+      callback(event.data);
+    }
+  });
+}
+

package/js/serviceWorker/sw.js

@@ -0,0 +1,221 @@
+// ============================================================
+// CONFIGURATION
+// ============================================================
+
+const CONFIG = {
+  version: '1.0.0',
+  maxCacheSize: 100 * 1024,
+  precacheUrls: [],
+  cacheStrategies: {
+    images: { mode: 'cache-first', maxAge: 30 * 86400000 },
+    scripts: { mode: 'network-first', maxAge: 7 * 86400000 },
+    styles: { mode: 'network-first', maxAge: 7 * 86400000 },
+    api: { mode: 'network-first', maxAge: 300000 },
+    html: { mode: 'network-first', maxAge: 86400000 } // x
+  }
+};
+
+const CACHE_NAMES = {
+  static: `static-v${CONFIG.version}`,
+  dynamic: `dynamic-v${CONFIG.version}`
+};
+
+// ============================================================
+// LIFECYCLE EVENTS
+// ============================================================
+
+self.addEventListener('install', e => {
+  console.log('[SW] Installing version', CONFIG.version);
+  e.waitUntil(
+    caches.open(CACHE_NAMES.static)
+      .then(cache => cache.addAll(CONFIG.precacheUrls))
+      .then(() => self.skipWaiting())
+      .catch(err => console.error('[SW] Precache failed:', err))
+  );
+});
+
+self.addEventListener('activate', e => {
+  console.log('[SW] Activating version', CONFIG.version);
+  e.waitUntil(Promise.all([cleanupOldCaches(), self.clients.claim()]));
+});
+
+async function cleanupOldCaches() {
+  const keys = await caches.keys();
+  const oldCaches = keys.filter(k => 
+    (k.startsWith('static-') || k.startsWith('dynamic-')) &&
+    k !== CACHE_NAMES.static && k !== CACHE_NAMES.dynamic
+  );
+  return Promise.all(oldCaches.map(k => {
+    console.log('[SW] Deleting old cache:', k);
+    return caches.delete(k);
+  }));
+}
+
+// ============================================================
+// FETCH HANDLING
+// ============================================================
+
+self.addEventListener('fetch', e => {
+  if (!isHttpRequest(e.request)) return;
+  const assetType = getAssetType(e.request.url);
+  const strategy = CONFIG.cacheStrategies[assetType]?.mode || 'network-first';
+  e.respondWith(handleFetch(e.request, strategy, assetType, e.preloadResponse));
+});
+
+function isHttpRequest(req) {
+  return new URL(req.url).protocol.startsWith('http');
+}
+
+function getAssetType(url) {
+  const path = new URL(url).pathname.toLowerCase();
+  if (/\.(jpg|jpeg|png|gif|webp|svg|ico)$/i.test(path)) return 'images';
+  if (/\.(js|mjs)$/i.test(path)) return 'scripts';
+  if (/\.css$/i.test(path)) return 'styles';
+  return path.startsWith('/api/') ? 'api' : 'html';
+}
+
+async function handleFetch(req, strategy, assetType, preloadRes) {
+  if (strategy === 'cache-first') return cacheFirst(req, assetType, preloadRes);
+  return strategy === 'network-first' ? networkFirst(req, assetType, preloadRes) : fetchWithFallback(req);
+}
+
+// ============================================================
+// CACHE STRATEGIES
+// ============================================================
+
+async function cacheFirst(req, assetType, preloadRes) {
+  // 1. Try cache (if not expired)
+  const cached = await caches.match(req);
+  if (cached && !isCacheExpired(cached, assetType)) return cached;
+  
+  // 2. Try preload
+  const preloaded = await preloadRes;
+  if (preloaded) {
+    await saveToCache(req, preloaded.clone());
+    return preloaded;
+  }
+  
+  // 3. Fetch from network
+  try {
+    const res = await fetch(req);
+    if (res?.ok) await saveToCache(req, res.clone());
+    return res;
+  } catch (err) {
+    return cached || getOfflineFallback(req);
+  }
+}
+
+async function networkFirst(req, assetType, preloadRes) {
+  // 1. Try preload
+  const preloaded = await preloadRes;
+  if (preloaded) {
+    if (preloaded.ok) await saveToCache(req, preloaded.clone());
+    return preloaded;
+  }
+  
+  // 2. Fetch from network
+  try {
+    const res = await fetch(req);
+    if (res?.ok) await saveToCache(req, res.clone());
+    return res;
+  } catch (err) {
+    // 3. Fallback to cache
+    const cached = await caches.match(req);
+    return cached || getOfflineFallback(req);
+  }
+}
+
+async function fetchWithFallback(req) {
+  try {
+    return await fetch(req);
+  } catch (err) {
+    return getOfflineFallback(req);
+  }
+}
+
+// ============================================================
+// CACHE HELPERS
+// ============================================================
+
+async function saveToCache(req, res) {
+  if (!isValidResponse(res)) return;
+  if (await isResponseTooLarge(res)) return;
+  const cache = await caches.open(CACHE_NAMES.dynamic);
+  await cache.put(req, res);
+}
+
+function isValidResponse(res) {
+  return res && res.status === 200 && res.type === 'basic';
+}
+
+async function isResponseTooLarge(res) {
+  const blob = await res.clone().blob();
+  const tooLarge = blob.size > CONFIG.maxCacheSize;
+  if (tooLarge) console.log('[SW] Skipped (too large):', blob.size, 'bytes');
+  return tooLarge;
+}
+
+function isCacheExpired(res, assetType) {
+  const cacheTime = res.headers.get('sw-cached-at');
+  if (!cacheTime) return false;
+  const maxAge = CONFIG.cacheStrategies[assetType]?.maxAge || 86400000;
+  return Date.now() - new Date(cacheTime).getTime() > maxAge;
+}
+
+function getOfflineFallback(req) {
+  const isHtml = req.destination === 'document' || req.headers.get('accept')?.includes('text/html');
+  if (isHtml) {
+    return caches.match('/offline.html') || 
+      new Response('Offline', { status: 503, statusText: 'Service Unavailable' });
+  }
+  return new Response('Resource unavailable', { status: 503, statusText: 'Service Unavailable' });
+}
+
+// ============================================================
+// MESSAGE HANDLING
+// ============================================================
+
+self.addEventListener('message', e => {
+  if (e.data?.type === 'SKIP_WAITING') e.waitUntil(self.skipWaiting());
+  if (e.data?.type === 'CLEAR_CACHE') e.waitUntil(clearAllCaches());
+});
+
+async function clearAllCaches() {
+  const keys = await caches.keys();
+  return Promise.all(keys.map(k => caches.delete(k)));
+}
+
+// ============================================================
+// PUSH NOTIFICATIONS
+// ============================================================
+
+self.addEventListener('push', e => {
+  const data = e.data?.json() || {};
+  e.waitUntil(
+    self.registration.showNotification(data.title || 'Notification', {
+      body: data.body || 'New notification',
+      icon: data.icon || '/icon-192.png',
+      badge: '/badge-72.png',
+      vibrate: [200, 100, 200],
+      data: { url: data.url }
+    })
+  );
+});
+
+self.addEventListener('notificationclick', e => {
+  e.notification.close();
+  if (e.notification.data?.url) e.waitUntil(clients.openWindow(e.notification.data.url));
+});
+
+// ============================================================
+// BACKGROUND SYNC
+// ============================================================
+
+self.addEventListener('sync', e => {
+  if (e.tag === 'sync-data') e.waitUntil(syncData());
+});
+
+async function syncData() {
+  console.log('[SW] Syncing data...');
+  // Implementiere deine Sync-Logik
+}

package/js/shortcut/README.md

@@ -4,10 +4,10 @@ Easy keyboard shortcuts
 ## Usage
 
 ```js
-import {listen} from '../shortcut.js';
-
-listen('a+b+c', () => {
-    alert('a+b+c pressed');
+import {listen} from '../shortcut.js';
+
+listen('a+b+c', () => {
+    alert('a+b+c pressed');
 }, {target: testEl});
 ```
 
@@ -18,13 +18,13 @@ listen('a+b+c', () => {
 ## Install
 
 ```js
-import * as module from "https://cdn.jsdelivr.net/gh/u2ui/u2@x.x.x/js/shortcut/shortcut.min.js"
+import * as module from "https://cdn.jsdelivr.net/gh/u2ui/u2@main/js/shortcut/shortcut.js"
 ```
 
 ## Demos
 
-[minimal.html](http://gcdn.li/u2ui/u2@main/js/shortcut/tests/minimal.html)  
 [test.html](http://gcdn.li/u2ui/u2@main/js/shortcut/tests/test.html)  
+[minimal.html](http://gcdn.li/u2ui/u2@main/js/shortcut/tests/minimal.html)  
 
 ## About
 

package/js/shortcut/shortcut.js

@@ -1,89 +1,53 @@
-
-const keyAliases = Object.entries({
-    'arrowup': ['↑', 'up'],
-    'arrowdown': ['↓', 'down'],
-    'arrowleft': ['←', 'left'],
-    'arrowright': ['→', 'right'],
-    'control': ['ctrl'],
-    'shift': ['shift', '⇧'],
-    'alt': ['alt', '⌥'],
-    'meta': ['cmd', '⌘'], // Cmd für macOS
-    'escape': ['esc'],
-    'enter': ['return'],
-    'delete': ['del'],
-    'insert': ['ins'],    
-    'backspace': ['back'],
-}).reduce((acc, [key, aliases]) => {
-    aliases.forEach(alias => {
-        acc[alias] = key;
-    });
-    return acc;
-}, {});
-
-function normalizeKey(key) {
-    key = key.trim().toLowerCase();
-    return keyAliases[key] || key;
-}
-
-
-export function listen(combination, callback, options = {}) {
-    const target = options.target || document;
-    const keys = combination.split('+').map(k => normalizeKey(k));
-    let activeIndex = -1;
-
-    target.addEventListener('keydown', function (event) {
-        if (event.repeat) return;
-        const key = normalizeKey(event.key);
-        const expectedKey = keys[activeIndex + 1];
-
-        if (expectedKey === key) {
-            ++activeIndex;
-            if (activeIndex === keys.length - 1) {
-                // callback bind to target and pass event as argument
-                callback.call(target, event);
-            }
-        } else {
-            activeIndex = -1;
-        }
-    });
-
-    target.addEventListener('keyup', function (event) {
-        const key = normalizeKey(event.key);
-        const expectedKey = keys[activeIndex];
-        if (expectedKey === key) { // wenn der letzte losgelassen wird, position einen schritt zurück
-            activeIndex--;
-        } else { // wenn sonst einer losgelassen wird, reset
-            activeIndex = -1;
-        }
-    });
-}
-
-
-
-/*
-maybe later: the order should probably not matter
-function listen(combination, callback, options = {}) {
-    const requiredKeys = new Set(combination.toLowerCase().split('+').map(k => normalizeKey(k)));
-    let activeKeys = new Set();
-
-    document.addEventListener('keydown', function(event) {
-        activeKeys.add(normalizeKey(event.key.toLowerCase()));
-        if (isCombinationPressed(requiredKeys, activeKeys)) {
-            callback();
-        }
-    });
-
-    document.addEventListener('keyup', function(event) {
-        activeKeys.delete(normalizeKey(event.key.toLowerCase()));
-    });
-}
-
-function isCombinationPressed(requiredKeys, activeKeys) {
-    for (let key of requiredKeys) {
-        if (!activeKeys.has(key)) {
-            return false;
-        }
-    }
-    return true;
-}
-*/
+// todo: the order of modifiers should not matter
+
+const keyAliases = Object.entries({
+    'arrowup': ['↑', 'up'],
+    'arrowdown': ['↓', 'down'],
+    'arrowleft': ['←', 'left'],
+    'arrowright': ['→', 'right'],
+    'control': ['ctrl'],
+    'shift': ['shift', '⇧'],
+    'alt': ['alt', '⌥'],
+    'meta': ['cmd', '⌘'],
+    'escape': ['esc'],
+    'enter': ['return'],
+    'delete': ['del'],
+    'insert': ['ins'],    
+    'backspace': ['back'],
+}).reduce((acc, [key, aliases]) => {
+    aliases.forEach(alias => {
+        acc[alias] = key;
+    });
+    return acc;
+}, {});
+
+function normalizeKey(key) {
+    key = key.trim().toLowerCase();
+    return keyAliases[key] || key;
+}
+
+export function listen(combination, callback, options = {}) {
+    const target = options.target || document;
+    const keys = combination.split('+').map(k => normalizeKey(k));
+    let activeIndex = -1;
+
+    target.addEventListener('keydown', function (event) {
+        if (event.repeat) return;
+        const key = normalizeKey(event.key);
+        const expectedKey = keys[activeIndex + 1];
+
+        if (expectedKey === key) {
+            ++activeIndex;
+            if (activeIndex === keys.length - 1) callback.call(target, event);
+        } else {
+            activeIndex = -1;
+        }
+    });
+
+    target.addEventListener('keyup', function (event) {
+        const key = normalizeKey(event.key);
+        const expectedKey = keys[activeIndex];
+        if (expectedKey === key) activeIndex--; // when the last one is released, position one step back
+        else activeIndex = -1; // if any other one is released, reset
+    });
+}

package/package.json

@@ -1,13 +1,11 @@
 {
   "name": "u2ui",
-  "version": "1.0.1",
+  "version": "1.4.5",
   "description": "HTML Advanced: More Capabilities, Same Feel, Same Simplicity",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
   "keywords": ["web-components","pattern-library","component-library","ui-toolkit","design-system"],
   "author": "Tobias Buschor",
   "license": "MIT",
+  "files": ["attr","class","css","el","js","theme","u2","!**/tests","!u2/old-stuff","!u2/experiments"],
   "repository": {
     "type": "git",
     "url": "https://github.com/u2ui/u2"

package/theme/brutalist/README.md

@@ -0,0 +1,10 @@
+## About
+
+- MIT License, Copyright (c) 2022 <u2> (like all repositories in this organization) <br>
+- Suggestions, ideas, finding bugs and making pull requests make us very happy. ♥
+
+## About
+
+- MIT License, Copyright (c) 2022 <u2> (like all repositories in this organization) <br>
+- Suggestions, ideas, finding bugs and making pull requests make us very happy. ♥
+

package/theme/brutalist/theme.css

@@ -0,0 +1,98 @@
+@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300..900&display=swap');
+
+/* Brutalismus Theme */
+
+html {
+    --hsl-h: 0; /* Grauer Farbton */
+    --hsl-s: 0%; /* Sättigung */
+    --hsl-l: 20%; /* Helligkeit */
+
+    /* misc */
+    --width: 42rem;
+    --line-width: 2px;
+    --radius: 0;
+
+    --shadow-x: 0;
+    --shadow-y: .25rem;
+    --shadow-blur: .8rem;
+    --shadow: var(--shadow-x) var(--shadow-y) var(--shadow-blur) #0003;
+
+    --color-text: hsl(0, 0%, 10%);
+}
+
+body {
+    font-size: min(1em, 17px);
+}
+
+:focus-visible {
+    outline: .12rem solid var(--color-text);
+    outline-offset: .18rem;
+    &:active { outline-width: .3rem; }
+}
+
+h1 {
+    font-size:3.5em;
+}
+h1, h2 {
+    font-family: 'Oswald', sans-serif;
+}
+
+input, textarea, select, button, .btn {
+    padding-inline: .8em;
+    padding-block: .6em;
+    border-color:var(--color-line);
+    &:focus {
+        border-color:var(--color-text);
+    }
+}
+
+button, .btn {
+    background-color: transparent;
+    color: var(--color-text);
+    border-color: var(--color-text);
+    padding-inline: 1.3em;
+    text-transform: uppercase;
+    transition: .2s;
+    &:hover, &:focus {
+        background-color: var(--color-text);
+        color: var(--color-bg);
+    }
+}
+
+dialog {
+    background-color:var(--color-bg);
+    color:var(--color-text);
+    border: var(--line-width) solid var(--color-line);
+    padding:2rem;
+    box-shadow: var(--shadow);
+}
+
+u2-alert {
+    background-color: color-mix(in srgb, var(--color), var(--color-bg) 96%);
+    border-width: 0 0 0 .13em;
+    border-width:0;
+    font-size: max(.85rem, 14px);
+    &::part(icon) {
+        align-self:start;
+    }
+}
+
+u2-accordion {
+    &::part(trigger) {
+        background-color: var(--color-text);
+        color: var(--color-bg);
+        padding: .7em;
+        border-radius: var(--radius);
+    }
+    &::part(trigger):hover {
+        background-color: color-mix(in srgb, var(--color-text), white 10%);
+    }
+    &::part(trigger):focus, &::part(trigger):active {
+        outline: .12rem solid var(--color-text);
+        outline-offset: .18rem;
+    }
+    &::part(content) {
+        background-color: var(--color-bg);
+        padding: .7em;
+    }
+}

package/theme/elegance/README.md

@@ -0,0 +1,10 @@
+## About
+
+- MIT License, Copyright (c) 2022 <u2> (like all repositories in this organization) <br>
+- Suggestions, ideas, finding bugs and making pull requests make us very happy. ♥
+
+## About
+
+- MIT License, Copyright (c) 2022 <u2> (like all repositories in this organization) <br>
+- Suggestions, ideas, finding bugs and making pull requests make us very happy. ♥
+