u2ui 1.0.0 → 1.4.5

package/u2/tools/update.skill.js

@@ -0,0 +1,176 @@
+// deno run -A --no-lock ./u2/tools/update.skill.js
+
+import * as fs from 'https://deno.land/std@0.100.0/fs/mod.ts';
+
+let base = import.meta.resolve('../../');
+base = base.replace(/file:\/\/\//, '/');
+
+const categories = ['attr', 'class', 'el', 'css', 'js'];
+
+async function generateSkillMd() {
+    const repos = {};
+    
+    for (const category of categories) {
+        repos[category] = {};
+        try {
+            for await (const entry of Deno.readDir(base + category)) {
+                if (!entry.isDirectory) continue;
+                const name = entry.name;
+                
+                const readmePath = `${base}${category}/${name}/README.md`;
+                let description = '';
+                try {
+                    const readme = await Deno.readTextFile(readmePath);
+                    description = readme.split('\n')[1] || '';
+                } catch (e) {}
+                
+                repos[category][name] = {
+                    name,
+                    description,
+                    beta: description.includes('beta'),
+                    deprecated: description.includes('deprecated'),
+                };
+            }
+        } catch (e) {
+            console.log(`Category ${category} not found or empty`);
+        }
+    }
+    
+    const content = generateSkillContent(repos);
+    await Deno.writeTextFile(base + "SKILL.md", content);
+    console.log("SKILL.md written!");
+}
+
+function generateSkillContent(repos) {
+    return dedent(`
+        # u2 Framework
+
+        Modular web component framework.
+        https://github.com/u2ui/u2
+        
+        > The one-liners below are an **index, not a spec** — they show the common case, not the full behavior (edge cases, bare/valueless attributes, defaults). For any concrete question, read the module before answering — don't assume from the one-liner. README: \`https://raw.githubusercontent.com/u2ui/u2/main/{category}/{name}/README.md\` (usage, API, demos); for undocumented edge-cases read the source \`…/{category}/{name}/{name}.js\`.
+
+        ## Categories
+
+        **\`attr/\`** - Add behavior via HTML attributes
+        ${generateCategoryModules(repos, 'attr')}
+
+        **\`class/\`** - CSS-only utilities via class names
+        ${generateCategoryModules(repos, 'class')}
+
+        **\`el/\`** - Custom HTML elements (Web Components)
+        ${generateCategoryModules(repos, 'el')}
+
+        **\`css/\`** - Global CSS utilities
+        ${generateCategoryModules(repos, 'css')}
+
+        **\`js/\`** - JavaScript ES modules
+        ${generateCategoryModules(repos, 'js')}
+
+        **Naming:** \`<u2-{name}>\`, \`.u2-{name}\`, \`[u2-{name}]\`
+
+        ## Installation
+
+        **Prototyping (auto-loads all):**
+        \`\`\`html
+        <script type=module async src="https://cdn.jsdelivr.net/gh/u2ui/u2@main/u2/auto.js"></script>
+        \`\`\`
+
+        ## CSS
+
+        auto.js also loads: css/base/base.css, css/classless/variables.css, css/classless/classless.css
+
+        Sets sensible defaults — do not re-implement these when base is loaded:
+
+        - \`box-sizing: border-box\` everywhere
+        - Fluid \`font-size: calc(12.5px + .25vw)\` on \`html\`
+        - \`body { margin: auto; display: flow-root }\` — child margins don't bleed out
+        - \`interpolate-size: allow-keywords\` — enables \`height: auto\` transitions
+        - \`@view-transition { navigation: auto }\` — free page transitions
+        - \`hyphens: auto\` with sensible limits
+        - \`img/svg/video/canvas\` → \`max-inline-size: 100%; object-fit: cover; block-size: auto\`
+        - \`video/audio/iframe\` → \`inline-size: 100%\`
+        - Tables: \`border-collapse: collapse; font-variant-numeric: tabular-nums\`
+        - \`nav a { text-decoration: none }\`, \`nav li { list-style: none }\`
+        - Form elements get \`font: inherit\`, unified padding, border
+        - \`dialog/[popover]\` fade in/out via \`transition + @starting-style\` — no JS needed
+        - \`[inert], :disabled { opacity: .4 }\`
+        - \`.btn\` — link styled as button, \`display: inline-block\`, no underline
+
+
+        The only thing you normally set: \`--color\`
+
+        \`\`\`css
+        html {
+            --color: #207acc; /* primary color — everything else derives from this */
+        }
+        \`\`\`
+
+        All other color tokens are **automatically computed** via \`color-mix()\` and \`oklch()\` from \`--color\`:
+
+        \`\`\`css
+        /* tints / shades — auto-derived, override only if needed */
+        --color-lightest  /* color-mix(--color, #fff 97%) */
+        --color-lighter   /* color-mix(--color, #fff 85%) */
+        --color-light     /* color-mix(--color, #fff 50%) */
+        --color-dark      /* color-mix(--color, #000 30%) */
+        --color-darker    /* color-mix(--color, #000 60%) */
+        --color-darkest   /* color-mix(--color, #000 87%) */
+
+        /* semantic — auto light/dark mode */
+        --color-bg        /* light: --color-lightest  /  dark: --color-darkest  */
+        --color-text      /* light: --color-darkest   /  dark: --color-lightest */
+        --color-area      /* light: --color-lighter   /  dark: --color-darker   */
+        --color-line      /* = --color-text */
+
+        /* gray — derived from --color hue, desaturated */
+        --gray, --gray-lighter, --gray-light, --gray-dark, --gray-darker
+
+        /* full palette — hue-rotated from --color's lightness/chroma */
+        --red, --orange, --yellow, --lime, --green, --cyan, --blue, --purple, --pink
+        \`\`\`
+
+        \`--accent\` defaults to \`--color\` but can be set independently for e.g. focus rings.
+
+
+    `).trim() + '\n';
+}
+
+function generateCategoryModules(repos, category) {
+    const modules = repos[category];
+    if (!modules || Object.keys(modules).length === 0) return '';
+    
+    return '\n' + Object.values(modules)
+        .sort((a, b) => a.name.localeCompare(b.name)) // Alphabetisch sortieren
+        .map(mod => {
+            let line = `- **${mod.name}**`;
+            if (mod.description) line += ` - ${mod.description}`;
+            if (mod.beta) line += ' *(beta)*';
+            if (mod.deprecated) line += ' *(deprecated)*';
+            return line;
+        })
+        .join('\n');
+}
+
+function dedent(text) {
+    text = trimLines(text);
+    const lines = text.split('\n');
+    const secondLine = lines[0];
+    if (!secondLine) return text;
+    const indent = secondLine.match(/^\s*/)[0];
+    if (indent.length === 0) return text;
+    return lines.map(line => line.replace(new RegExp(`^${indent}`), '')).join('\n').trim();
+}
+
+function trimLines(text) {
+    const lines = text.split('\n');
+    while (1) {
+        const line = lines[0];
+        if (line == null) break;
+        if (line.match(/^\s*$/)) lines.shift();
+        else break;
+    }
+    return lines.join('\n');
+}
+
+generateSkillMd();

package/u2/tools/variable-styler.js

@@ -0,0 +1,317 @@
+alert('used??') // zzz
+
+class ElementVariableStyler extends HTMLElement {
+    constructor() {
+        super();
+        this.targetElement = this.getStyleTarget();
+        
+        // Definition der zu steuernden Variablen - NUR Font Size in 'px', der Rest in 'rem'
+        // Gruppen werden nun mit 'isGroup: true' markiert und enthalten 'children'
+        this.variables = [
+            { name: '--color', label: 'Akzentfarbe', type: 'color', value: '#007bff' },
+            { name: '--width', label: 'Layout Breite (rem)', min: 40, max: 120, step: 1, unit: 'rem', value: 75 },
+            { 
+                label: 'Schatten Einstellungen (rem)',
+                isGroup: true,
+                children: [
+                    { name: '--shadow-x', label: 'Versatz X', min: -0.5, max: 2, step: 0.05, unit: 'rem', value: 0 },
+                    { name: '--shadow-y', label: 'Versatz Y', min: -0.5, max: 2, step: 0.05, unit: 'rem', value: 0.3 },
+                    { name: '--shadow-blur', label: 'Unschärfe', min: 0, max: 2, step: 0.1, unit: 'rem', value: 0.6 }
+                ]
+            },
+            { name: 'font-size', label: 'Schriftgröße (px)', min: 10, max: 24, step: .2, unit: 'px', value: 16 },
+            { 
+                label: 'Schrift einstellungen',
+                isGroup: true,
+                children: [
+                    { name: '--line-height-relative', label: 'Linienhöhe in abhängikeit zur aktuellen Schritgrösse', min: 0, max: 2, step: 0.001, unit: 'em', value: 1 },
+                    { name: '--line-height-absolute', label: 'Linienhöhe globaler Anteil (auf addiert)', min: 0, max: 1, step: 0.001, unit: 'rem', value: .5 }
+                ]
+            },
+            { name: '--radius', label: 'Border Radius (rem)', min: 0, max: 2, step: 0.1, unit: 'rem', value: 0.5 },
+            { name: '--line-width', label: 'Linienstärke (rem)', min: 0.05, max: 0.3, step: 0.01, unit: 'rem', value: 0.0625 } 
+        ];
+
+        this.attachShadow({ mode: 'open' });
+        this.render();
+    }
+
+    getStyleTarget() {
+        const selector = this.getAttribute('target');
+        if (selector) {
+            return document.querySelector(selector) || document.documentElement;
+        }
+        return document.documentElement;
+    }
+
+    // Hilfsfunktion zur Erzeugung eines einzelnen Steuerelements
+    createControlHtml(v) {
+        const isRange = v.type !== 'color';
+        const valueDisplayId = v.name.replace('--', '') + '-value';
+
+        return `
+            <div class="control-group">
+                <label for="${v.name}">
+                    ${v.label}
+                    <span class="value-display" id="${valueDisplayId}">
+                        ${v.value}${v.unit || ''}
+                    </span>
+                </label>
+                <input 
+                    type="${v.type || 'range'}" 
+                    id="${v.name}" 
+                    name="${v.name}" 
+                    ${isRange ? `min="${v.min}" max="${v.max}" step="${v.step}"` : ''} 
+                    value="${v.value}"
+                    data-unit="${v.unit || ''}"
+                >
+            </div>
+        `;
+    }
+
+    render() {
+        const style = `
+            :host {
+                font:unset !important;
+                font-size:14px !important;
+                color:black;
+                display: block;
+                max-width:17em;
+                position: fixed;
+                top: 0.625em;
+                right: 0.625em;
+                background: white;
+                border: 1px solid #ccc;
+                padding: 0.625em !important;
+                border-radius: 0.5em; 
+                z-index: 9999;
+                box-shadow: 0 0.25em 0.75em rgba(0,0,0,0.1); 
+                line-height:1.2 !important;
+            }
+            .styler-grid {
+                display: grid;
+                grid-template-columns: 1fr;
+                gap: 0.6em; 
+            }
+            .control-group {
+                display: flex;
+                flex-direction: column;
+                margin-bottom: 0.3em; /* Abstand zwischen einzelnen Controlls */
+            }
+            label {
+                font-family: sans-serif;
+                font-size: 0.8em;
+                font-weight: bold;
+                display:flex;
+            }
+            input[type="range"] {
+                margin:0;
+                width: 100%;
+            }
+            .value-display {
+                font-family: monospace;
+                font-size: 0.75em;
+                color: #555;
+                margin-left:auto;
+                white-space:nowrap;
+            }
+            
+            /* Styling für die Details-Gruppe */
+            details {
+                border: 1px solid #eee;
+                border-radius: 0.3em;
+                padding: 0.2em 0.5em;
+            }
+            summary {
+                font-weight: bold;
+                padding: 0.2em 0;
+                cursor: pointer;
+                outline: none;
+                list-style: none; /* Entfernt den Standardpfeil */
+                font-size: 0.8em;
+            }
+            summary::marker {
+                content: none; /* Entfernt Marker in Browsern, wo list-style:none nicht reicht */
+            }
+            /* Fügt manuellen Chevron-Pfeil hinzu */
+            summary::before {
+                content: '▶'; 
+                display: inline-block;
+                margin-right: 0.5em;
+                transition: transform 0.2s;
+                font-size: 0.7em;
+            }
+            details[open] > summary::before {
+                transform: rotate(90deg);
+            }
+            .details-content {
+                display: grid;
+                gap: 0.6em;
+                margin-top: 0.5em; /* Abstand nach Summary */
+            }
+        `;
+
+        let controls = '';
+        
+        this.variables.forEach(v => {
+            if (v.isGroup && v.children && Array.isArray(v.children)) {
+                // Dies ist eine verschachtelte, klappbare Gruppe (Details/Summary)
+                const childrenHtml = v.children.map(child => this.createControlHtml(child)).join('');
+                
+                controls += `
+                    <details class="control-group-nested">
+                        <summary>${v.label}</summary>
+                        <div class="details-content">
+                            ${childrenHtml}
+                        </div>
+                    </details>
+                `;
+            } else {
+                // Dies ist ein einzelnes Steuerelement
+                controls += this.createControlHtml(v);
+            }
+        });
+
+
+        this.shadowRoot.innerHTML = `
+            <style>${style}</style>
+            <div class="styler-grid">${controls}</div>
+        `;
+
+        this.shadowRoot.querySelectorAll('input').forEach(input => {
+            input.addEventListener('input', this.handleInput.bind(this));
+            // Die setInitialValue-Methode muss für alle Inputs, auch in Subgruppen, aufgerufen werden
+            this.setInitialValue(input); 
+            
+            // Finde die Gruppe (details) für das Input-Element und öffne sie, falls der Wert != Standard ist
+            if (input.name.startsWith('--shadow-')) {
+                const groupDetails = input.closest('details');
+                const initialValue = parseFloat(input.value);
+                // Annahme: Wenn x, y oder blur nicht 0 ist, ist die Gruppe relevant und sollte offen sein
+                if (groupDetails && initialValue !== 0 && initialValue !== 0.3) {
+                     //groupDetails.open = true;
+                }
+            }
+        });
+    }
+    
+    // setInitialValue, handleInput, applyVariable bleiben funktional unverändert
+    
+    setInitialValue(input) {
+        // const targetValue = this.targetElement.style.getPropertyValue(input.name) || 
+        //                     getComputedStyle(this.targetElement).getPropertyValue(input.name).trim();
+
+        const elValue = getComputedStyle(this.targetElement).getPropertyValue(input.name).trim();
+
+        console.log(input.name, elValue)
+        
+        
+
+        if (elValue) {
+            const inpUnit = input.dataset.unit || '';
+
+            if (input.type === 'range') {
+                const {unit:elUnit, value:elNumber} = parseCssLength(elValue)
+                const elPx = unitToPx(elNumber, elUnit, this.targetElement);
+                const inpNumber = pxToUnit(elPx, inpUnit, this.targetElement);
+                input.value = inpNumber;
+            } else if (input.type === 'color') {
+                input.value = elValue;
+            }
+            
+            const valueDisplayId = input.name.replace('--', '') + '-value';
+            const displayElement = this.shadowRoot.getElementById(valueDisplayId);
+            if (displayElement) {
+                displayElement.textContent = elValue;
+            }
+        }
+
+        this.applyVariable(input.name, input.value, input.dataset.unit);
+    }
+
+
+    handleInput(event) {
+        const input = event.target;
+        const value = input.value;
+        const unit = input.dataset.unit || '';
+        const variableName = input.name;
+        
+        this.applyVariable(variableName, value, unit);
+    }
+    
+    applyVariable(variableName, value, unit) {
+        const fullValue = value + unit;
+        this.targetElement.style.setProperty(variableName, fullValue);
+
+        const valueDisplayId = variableName.replace('--', '') + '-value';
+        const displayElement = this.shadowRoot.getElementById(valueDisplayId);
+        if (displayElement) {
+            displayElement.textContent = fullValue;
+        }
+    }
+}
+
+customElements.define('element-variable-styler', ElementVariableStyler);
+
+
+function parseCssLength(str) {
+    const match = /^(\d*\.?\d+)([a-z%]*)$/.exec(str);
+    return match ? { value: parseFloat(match[1]), unit: match[2] || '' } : { value: NaN, unit: '' };
+}
+
+function unitToPx(value, unit, el){
+    if (unit === 'px') return value;
+    if (unit === 'cm') return value * 96 / 2.54;
+    if (unit === 'mm') return value * 96 / 25.4;
+    if (unit === 'in') return value * 96;
+    if (unit === 'pt') return value * 96 / 72;
+    if (unit === 'pc') return value * 96 / 6;
+    if (unit === 'rem') return value * parseFloat(getComputedStyle(document.documentElement).fontSize);
+    if (unit === 'em') return value * parseFloat(getComputedStyle(el).fontSize);
+    if (unit === 'vw') return value * (innerWidth / 100);
+    if (unit === 'vh') return value * (innerHeight / 100);
+    if (unit === '%') {
+        console.warn('todo: "%" is dependant of the css-property used');
+        return null;
+        // return value * el.parentElement.offsetWidth / 100;
+    }
+    if (unit === 'lh') {
+        const raw = getComputedStyle(el).lineHeight;
+        if (raw === 'normal') {
+            console.warn('lh is "normal" which is not easy to pixelize');
+            return null;
+        }
+        const lh = parseFloat(raw);
+        return value * lh;
+    }
+
+    console.warn(`Unknown unit: ${unit}`);
+    return null;
+}
+
+function pxToUnit(px, unit, el){
+    if (unit === 'px')  return px;
+    if (unit === 'cm')  return px * 2.54 / 96;
+    if (unit === 'mm')  return px * 25.4 / 96;
+    if (unit === 'in')  return px / 96;
+    if (unit === 'pt')  return px * 72 / 96;
+    if (unit === 'pc')  return px * 6 / 96;
+    if (unit === 'rem') return px / parseFloat(getComputedStyle(document.documentElement).fontSize);
+    if (unit === 'em')  return px / parseFloat(getComputedStyle(el).fontSize); // not el.parentNode
+    if (unit === 'vw')  return px / (innerWidth / 100);
+    if (unit === 'vh')  return px / (innerHeight / 100);
+    if (unit === '%')   {
+        console.warn('todo: "%" is dependant of the css-property used');
+        return null;
+        //return px * 100 / el.parentElement.offsetWidth;
+    }
+    if (unit === 'lh')   {
+        const raw = getComputedStyle(el).lineHeight;
+        if (raw === 'normal') {
+            console.warn('lh is "normal" which is not easy to pixelize');
+            return null;
+        }
+        const lh = parseFloat(raw);
+        return px / lh;    
+    }
+}

package/u2/u2.js

@@ -1,14 +1,30 @@
-
-let cachedRepos = null;
-export async function repos(){
-    if (!cachedRepos) {
-        cachedRepos = {};
-        const data = await fetch(import.meta.url + '/../projects.json').then(res=>res.json());
-        for (const category in data) {
-            for (const repo in data[category]) {
-                cachedRepos[category+'/'+repo] = data[category][repo];
-            }
-        }
-    }
-    return cachedRepos;
-}
+import { importCss } from "./utils.js";
+
+window.u2 ??= Object.create(null);
+u2.js = function(jsRepo){
+    const file = import.meta.resolve('../js/'+jsRepo+'/'+jsRepo+'.js');
+    return import(file);
+}
+u2.el = function(elRepo, options){
+    const file = import.meta.resolve('../el/'+elRepo+'/'+elRepo+'.js');
+    const css = import.meta.resolve('../el/'+elRepo+'/'+elRepo+'.css');
+    importCss(css, options);
+    return import(file);
+}
+
+
+let cachedRepos = null;
+export async function repos(){
+    if (!cachedRepos) {
+        cachedRepos = {};
+        const data = await fetch(import.meta.url + '/../projects.json').then(res=>res.json());
+        for (const category in data) {
+            for (const repo in data[category]) {
+                cachedRepos[category+'/'+repo] = data[category][repo];
+            }
+        }
+    }
+    return cachedRepos;
+}
+
+

package/u2/utils.js

@@ -1,59 +1,61 @@
-///////////////////////////
-// cssImport
-
-var cssImported = [];
-export function importCss(url, options={}) {
-    return new Promise((resolve, reject) => {
-        var link = _importCss(url, options);
-        if (link==null) resolve({available:true}); // already loaded
-        else {
-            link.onload  = e=>resolve({available:false}); // todo, remove eventlisteners?
-            link.onerror = e=>reject();
-        }
-    });
-}
-
-function _importCss(url, options={}){
-    // handle relative urls
-    if (url.indexOf('./') === 0) {
-        // better?
-        // const e = new Error();
-        // const lines = e.stack.split('\n');
-        // lines[0] === 'Error' && lines.shift();
-        // const calledFile = lines[1].match(/[a-z]+:[^?:]+/);
-        // url = new URL(calledFile[0]+'/.'+url).toString();
-        const e = new Error();
-        const calledFile = e.stack.split('\n')[2].match(/[a-z]+:[^:]+/);
-        const calledUrl = new URL(calledFile);
-        calledUrl.search = '';
-        const url = new URL(url, calledUrl).toString(); // todo, this should not be working as const url is only in this scope
-    }
-
-    const rootNode = options.for ?? document.documentElement;
-
-    if (cssImported[url]) return; // check if imported already
-    cssImported[url] = true;
-
-    for (let el of rootNode.querySelectorAll('link[rel=stylesheet]')) { // check if manually added
-        if (el.href === url) return;
-    }
-    const link = rootNode.ownerDocument.createElement('link');
-    link.rel = 'stylesheet';
-    if (options.media) link.media = options.media;
-
-    link.href = url;
-    rootGetStyleWrapper(rootNode).append(link);
-    //styleWrapper.append(link);
-    return link;
-}
-
-
-const styleWrappers = new WeakMap();
-function rootGetStyleWrapper(root) {
-    if (!styleWrappers.has(root)) {
-        let styleWrapper = document.createElement('div');
-        root.prepend(styleWrapper);
-        styleWrappers.set(root, styleWrapper);
-    }
-    return styleWrappers.get(root);
-}
+///////////////////////////
+// cssImport
+
+const cssImported = [];
+export function importCss(url, options={}) {
+    return new Promise((resolve, reject) => {
+        const link = _importCss(url, options);
+        if (link==null) resolve({available:true}); // already loaded
+        else {
+            link.onload  = e=>resolve({available:false}); // todo, remove eventlisteners?
+            link.onerror = e=>reject();
+        }
+    });
+}
+
+function _importCss(url, options={}){
+    // handle relative urls
+    if (url.indexOf('./') === 0) {
+        // better?
+        // const e = new Error();
+        // const lines = e.stack.split('\n');
+        // lines[0] === 'Error' && lines.shift();
+        // const calledFile = lines[1].match(/[a-z]+:[^?:]+/);
+        // url = new URL(calledFile[0]+'/.'+url).toString();
+        const e = new Error();
+        const calledFile = e.stack.split('\n')[2].match(/[a-z]+:[^:]+/);
+        const calledUrl = new URL(calledFile);
+        calledUrl.search = '';
+        url = new URL(url, calledUrl).toString();
+    }
+
+    const rootNode = options.for ?? document.head ?? document.documentElement;
+
+    if (cssImported[url]) return; // check if imported already
+    cssImported[url] = true;
+
+    for (let el of rootNode.querySelectorAll('link[rel=stylesheet]')) { // check if manually added
+        cssImported[el.href] = true; // cache
+        if (el.href === url) return;
+    }
+    const link = rootNode.ownerDocument.createElement('link');
+    link.rel = 'stylesheet';
+    if (options.media) link.media = options.media;
+
+    link.href = url;
+    rootGetStyleWrapper(rootNode).append(link);
+    //styleWrapper.append(link);
+    return link;
+}
+
+
+const styleWrappers = new WeakMap();
+function rootGetStyleWrapper(root) {
+    let styleWrapper = styleWrappers.get(root);
+    if (!styleWrapper) {
+        styleWrapper = document.createElement('div');
+        root.prepend(styleWrapper);
+        styleWrappers.set(root, styleWrapper);
+    }
+    return styleWrapper;
+}

package/.htaccess

@@ -1,7 +0,0 @@
-RewriteEngine On
-
-RewriteRule ^(.*).min.js$ $1.js [L]
-
-RewriteRule ^(.*).min.css$ $1.css [L]
-
-RewriteRule ^(.*)@[^/]+/(.*)$ $1/$2 [L]