js-kompo-utils 1.0.0

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "js-kompo-utils",
+  "version": "1.0.0",
+  "description": "",
+  "main": "app.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "xkairo",
+  "license": "ISC",
+  "dependencies": {
+    "@ckeditor/ckeditor5-vue2": "^3.0.1",
+    "@floating-ui/dom": "^1.7.6",
+    "apexcharts": "^5.10.4",
+    "ckeditor5": "^44.3.0",
+    "gsap": "^3.14.2",
+    "highlight.js": "^11.11.1",
+    "jquery": "^3.6.0",
+    "kompo-googlemaps": "^1.0.14",
+    "libphonenumber-js": "^1.12.40",
+    "typed.js": "^3.0.0",
+    "vue-qrcode-reader": "^3.1.0"
+  }
+}

package/raw_animations/count-up-animation.js

@@ -0,0 +1,220 @@
+// Inject hiding style IMMEDIATELY (before DOMContentLoaded) so values are never visible
+(function() {
+    var style = document.createElement('style');
+    style.id = 'count-up-hide';
+    style.textContent = `
+        .box-label-val:not([data-count-up-done]) { 
+            -webkit-text-fill-color: transparent !important;
+            position: relative !important;
+        }
+        .box-label-val:not([data-count-up-done])::before {
+            content: '0';
+            -webkit-text-fill-color: initial !important;
+            position: absolute !important;
+            right: 0 !important;
+        }
+    `;
+    // Insert into head ASAP
+    if (document.head) {
+        document.head.appendChild(style);
+    } else {
+        document.addEventListener('DOMContentLoaded', function() {
+            document.head.appendChild(style);
+        });
+    }
+})();
+
+var SELECTORS = '.box-label-val';
+
+function parseNumericValue(text) {
+    var cleaned = text.trim();
+    if (!cleaned || cleaned === '-' || cleaned === 'N/A') return null;
+
+    var match = cleaned.match(/-?[\d][\d\s,.]*/);
+    if (!match) return null;
+
+    var numStr = match[0].trim();
+    var idx = cleaned.indexOf(numStr);
+    var prefix = cleaned.substring(0, idx);
+    var suffix = cleaned.substring(idx + numStr.length);
+
+    var lastComma = numStr.lastIndexOf(',');
+    var lastDot = numStr.lastIndexOf('.');
+
+    var decimals = 0;
+    var value;
+    var frFormat = false;
+
+    if (lastComma > lastDot) {
+        frFormat = true;
+        var afterComma = numStr.substring(lastComma + 1);
+        if (afterComma.length <= 2) {
+            decimals = afterComma.length;
+            value = parseFloat(numStr.replace(/\s/g, '').replace(',', '.'));
+        } else {
+            value = parseFloat(numStr.replace(/[,\s]/g, ''));
+        }
+    } else if (lastDot > lastComma) {
+        var afterDot = numStr.substring(lastDot + 1);
+        if (afterDot.length <= 2) {
+            decimals = afterDot.length;
+            value = parseFloat(numStr.replace(/[,\s]/g, ''));
+        } else {
+            value = parseFloat(numStr.replace(/[.\s]/g, ''));
+        }
+    } else {
+        value = parseInt(numStr.replace(/[,.\s]/g, ''), 10);
+    }
+
+    if (isNaN(value) || value === 0) return null;
+
+    return {
+        value: value,
+        decimals: decimals,
+        prefix: prefix,
+        suffix: suffix,
+        frFormat: frFormat,
+        original: cleaned
+    };
+}
+
+function formatValue(val, info) {
+    var abs = Math.abs(val);
+    var fixed = abs.toFixed(info.decimals);
+    var parts = fixed.split('.');
+
+    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, info.frFormat ? ' ' : ',');
+
+    var formatted;
+    if (info.decimals > 0) {
+        formatted = parts.join(info.frFormat ? ',' : '.');
+    } else {
+        formatted = parts[0];
+    }
+
+    return info.prefix + (val < 0 ? '-' : '') + formatted + info.suffix;
+}
+
+function animateElement(el) {
+    if (el.dataset.countUpDone) return;
+
+    // If data-amount is set, use that as the target value
+    var targetText = el.dataset.amount || el.textContent;
+    var info = parseNumericValue(targetText);
+
+    if (!info && targetText.trim() !== '0' && targetText.trim() !== '-') {
+        // No numeric value - just reveal it
+        el.dataset.countUpReady = '1';
+        return;
+    }
+
+    el.dataset.countUpDone = '1';
+
+    var duration = Math.random() * 1500 + 800;
+    var startTime = null;
+
+    function step(timestamp) {
+        if (!startTime) startTime = timestamp;
+        var progress = Math.min((timestamp - startTime) / duration, 1);
+        var eased = 1 - Math.pow(1 - progress, 3);
+
+        var current = info.value * eased;
+        el.textContent = formatValue(current, info);
+
+        if (progress < 1) {
+            requestAnimationFrame(step);
+        } else {
+            el.textContent = info.original;
+        }
+    }
+
+    requestAnimationFrame(step);
+}
+
+/* Pie chart animation (conic-gradient fill + percentage count-up) */
+function animatePieChart(pie) {
+    if (pie.dataset.pieAnimDone) return;
+
+    var style = pie.getAttribute('style') || '';
+    var gradientMatch = style.match(/conic-gradient\(\s*(\S+)\s+([\d.]+)deg/);
+    if (!gradientMatch) return;
+
+    var color = gradientMatch[1];
+    var targetDegrees = parseFloat(gradientMatch[2]);
+
+    var innerDiv = pie.querySelector('.flex-center');
+    if (!innerDiv) return;
+
+    var text = innerDiv.textContent.trim();
+    var numMatch = text.match(/(-?\d+)/);
+    if (!numMatch) return;
+
+    var targetPct = parseInt(numMatch[0]);
+    var suffix = text.substring(text.indexOf(numMatch[0]) + numMatch[0].length);
+
+    pie.dataset.pieAnimDone = '1';
+
+    var duration = 1200;
+    var startTime = null;
+
+    function step(timestamp) {
+        if (!startTime) startTime = timestamp;
+        var progress = Math.min((timestamp - startTime) / duration, 1);
+        var eased = 1 - Math.pow(1 - progress, 3);
+
+        var currentDeg = targetDegrees * eased;
+        var currentPct = Math.round(targetPct * eased);
+        var grayStart = currentDeg > 0 ? currentDeg + 2 : 0;
+
+        pie.style.backgroundImage = 'conic-gradient(' + color + ' ' + currentDeg + 'deg, #f0f0f0 ' + grayStart + 'deg ' + (360 - currentDeg) + 'deg)';
+        innerDiv.textContent = currentPct + suffix;
+
+        if (progress < 1) {
+            requestAnimationFrame(step);
+        } else {
+            pie.style.backgroundImage = 'conic-gradient(' + color + ' ' + targetDegrees + 'deg, #f0f0f0 ' + (targetDegrees > 0 ? targetDegrees + 2 : 0) + 'deg ' + (360 - targetDegrees) + 'deg)';
+            innerDiv.textContent = targetPct + suffix;
+        }
+    }
+
+    requestAnimationFrame(step);
+}
+
+function processElements() {
+    document.querySelectorAll(SELECTORS).forEach(animateElement);
+    document.querySelectorAll('[style*="conic-gradient"]').forEach(animatePieChart);
+}
+
+const interval = setInterval(function () {
+    const newElements = document.querySelectorAll(SELECTORS + ':not([data-count-up-done]), [style*="conic-gradient"]:not([data-pie-anim-done])');
+
+    if (newElements.length) {
+        processElements();
+    }
+}, 30);
+setTimeout(() => clearInterval(interval), 3000);
+
+var observer = new MutationObserver(function(mutations) {
+    var found = false;
+    mutations.forEach(function(mutation) {
+        mutation.addedNodes.forEach(function(node) {
+            if (node.nodeType === 1) {
+                if (node.matches && node.matches(SELECTORS)) {
+                    found = true;
+                } else if (node.querySelectorAll) {
+                    if (node.querySelectorAll(SELECTORS).length || node.querySelectorAll('[style*="conic-gradient"]').length) {
+                        found = true;
+                    }
+                }
+                if (node.getAttribute && (node.getAttribute('style') || '').indexOf('conic-gradient') !== -1) {
+                    found = true;
+                }
+            }
+        });
+    });
+    if (found) {
+        setTimeout(processElements, 50);
+    }
+});
+
+observer.observe(document.body, { childList: true, subtree: true });

package/raw_animations/magic-poof.js

@@ -0,0 +1,210 @@
+/**
+ * Magic Poof Animation (Created by claude)
+ *
+ * Usage:
+ *   MagicPoof.appear(element, options)    - Make element appear with magic effect
+ *   MagicPoof.disappear(element, options) - Make element disappear with magic effect
+ *   MagicPoof.toggle(element, options)    - Toggle visibility with magic effect
+ *
+ * Options:
+ *   color: 'gold' | 'purple' | 'blue' | 'pink' | custom hex (default: 'purple')
+ *   sparkles: number of sparkles (default: 12)
+ *   smoke: boolean to show smoke puff (default: true)
+ *   onComplete: callback when animation finishes
+ */
+
+const MagicPoof = (function() {
+
+    const sparkleColors = {
+        gold: ['#FFD700', '#FFA500', '#FFEC8B', '#FFE4B5'],
+        purple: ['#9B59B6', '#8E44AD', '#D4A5FF', '#E8DAEF'],
+        blue: ['#3498DB', '#2980B9', '#85C1E9', '#AED6F1'],
+        pink: ['#FF69B4', '#FF1493', '#FFB6C1', '#FFC0CB'],
+    };
+
+    const defaultOptions = {
+        color: 'purple',
+        sparkles: 12,
+        smoke: true,
+        onComplete: null
+    };
+
+    function getColors(color) {
+        if (sparkleColors[color]) {
+            return sparkleColors[color];
+        }
+        // If custom hex color, generate variations
+        return [color, color, color, color];
+    }
+
+    function createSparkle(x, y, colors) {
+        const sparkle = document.createElement('div');
+        sparkle.className = 'magic-sparkle';
+
+        // Random direction and distance
+        const angle = Math.random() * Math.PI * 2;
+        const distance = 30 + Math.random() * 50;
+        const tx = Math.cos(angle) * distance;
+        const ty = Math.sin(angle) * distance;
+
+        sparkle.style.cssText = `
+            left: ${x}px;
+            top: ${y}px;
+            --tx: ${tx}px;
+            --ty: ${ty}px;
+            color: ${colors[Math.floor(Math.random() * colors.length)]};
+        `;
+
+        return sparkle;
+    }
+
+    function createSmoke(x, y, size, color) {
+        const smoke = document.createElement('div');
+        smoke.className = 'magic-smoke';
+
+        const smokeColor = sparkleColors[color]
+            ? `rgba(${hexToRgb(sparkleColors[color][0])}, 0.4)`
+            : `rgba(155, 89, 182, 0.4)`;
+
+        smoke.style.cssText = `
+            left: ${x - size/2}px;
+            top: ${y - size/2}px;
+            width: ${size}px;
+            height: ${size}px;
+            background: radial-gradient(circle, rgba(255,255,255,0.9) 0%, ${smokeColor} 40%, transparent 70%);
+        `;
+
+        return smoke;
+    }
+
+    function hexToRgb(hex) {
+        const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+        return result
+            ? `${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(result[3], 16)}`
+            : '155, 89, 182';
+    }
+
+    function getElementCenter(element) {
+        const rect = element.getBoundingClientRect();
+        return {
+            x: rect.left + rect.width / 2 + window.scrollX,
+            y: rect.top + rect.height / 2 + window.scrollY,
+            width: rect.width,
+            height: rect.height
+        };
+    }
+
+    function createEffectsContainer() {
+        let container = document.getElementById('magic-poof-effects');
+        if (!container) {
+            container = document.createElement('div');
+            container.id = 'magic-poof-effects';
+            container.style.cssText = 'position: absolute; top: 0; left: 0; pointer-events: none; z-index: 9999; overflow: visible;';
+            document.body.appendChild(container);
+        }
+        return container;
+    }
+
+    function playEffect(element, options) {
+        const container = createEffectsContainer();
+        const center = getElementCenter(element);
+        const colors = getColors(options.color);
+
+        // Create smoke puff
+        if (options.smoke) {
+            const smokeSize = Math.max(center.width, center.height) * 1.5;
+            const smoke = createSmoke(center.x, center.y, smokeSize, options.color);
+            container.appendChild(smoke);
+            setTimeout(() => smoke.remove(), 600);
+        }
+
+        // Create sparkles
+        for (let i = 0; i < options.sparkles; i++) {
+            setTimeout(() => {
+                const offsetX = (Math.random() - 0.5) * center.width * 0.8;
+                const offsetY = (Math.random() - 0.5) * center.height * 0.8;
+                const sparkle = createSparkle(center.x + offsetX, center.y + offsetY, colors);
+                container.appendChild(sparkle);
+                setTimeout(() => sparkle.remove(), 700);
+            }, Math.random() * 100);
+        }
+    }
+
+    function appear(element, userOptions = {}) {
+        const options = { ...defaultOptions, ...userOptions };
+
+        // Ensure element is in DOM but hidden initially
+        element.style.opacity = '0';
+        element.style.maxHeight = '';
+        element.style.visibility = 'visible';
+        element.style.display = '';
+
+        // Play effects
+        playEffect(element, options);
+
+        // Trigger appear animation
+        element.classList.remove('magic-poof-out');
+        element.classList.add('magic-poof');
+
+        // Cleanup and callback
+        setTimeout(() => {
+            element.classList.remove('magic-poof');
+            element.style.opacity = '';
+            if (options.onComplete) options.onComplete(element);
+        }, 500);
+    }
+
+    function disappear(element, userOptions = {}) {
+        const options = { ...defaultOptions, ...userOptions };
+
+        // Play effects
+        playEffect(element, options);
+
+        // Trigger disappear animation
+        element.classList.remove('magic-poof');
+        element.classList.add('magic-poof-out');
+
+        // Hide and cleanup
+        setTimeout(() => {
+            element.style.maxHeight = '0';
+            element.style.visibility = 'hidden';
+            element.classList.remove('magic-poof-out');
+            if (options.onComplete) options.onComplete(element);
+        }, 400);
+    }
+
+    function toggle(element, userOptions = {}) {
+        const isHidden = element.style.display === 'none' ||
+                         window.getComputedStyle(element).display === 'none';
+
+        if (isHidden) {
+            appear(element, userOptions);
+        } else {
+            disappear(element, userOptions);
+        }
+    }
+
+    // Auto-init: Listen for elements with data-magic-poof attribute
+    document.addEventListener('DOMContentLoaded', function() {
+        document.addEventListener('click', function(e) {
+            const trigger = e.target.closest('[data-magic-poof-trigger]');
+            if (trigger) {
+                const targetSelector = trigger.dataset.magicPoofTrigger;
+                const target = document.querySelector(targetSelector);
+                if (target) {
+                    const color = trigger.dataset.magicPoofColor || 'purple';
+                    toggle(target, { color });
+                }
+            }
+        });
+    });
+
+    return {
+        appear,
+        disappear,
+        toggle
+    };
+
+})();
+
+window.MagicPoof = MagicPoof;

package/tutorials/TutorialConfig.js

@@ -0,0 +1,34 @@
+/**
+ * Tutorial configuration with fluent builder API.
+ */
+export class TutorialConfig {
+    static DEFAULTS = {
+        avatar: '/images/tutorial-avatar.png',
+        cursorImage: null,
+        cursorSize: 'clamp(32px, 8vw, 48px)',
+        avatarHeight: 'clamp(200px, 50vh, 475px)',
+        avatarMaxHeight: '50vh',
+        typewriteSpeed: 25,
+        nextLabel: 'tutorial.next',
+        doneLabel: 'tutorial.done',
+        bubbleFontSize: 'clamp(14px, 3.5vw, 16px)',
+        bubbleLineHeight: '1.6',
+        bubbleMaxWidth: 'clamp(260px, 85vw, 550px)',
+        bubbleMinWidth: 'clamp(200px, 70vw, 350px)',
+        devMode: false,
+    };
+
+    constructor(userOptions = {}) {
+        const windowDefaults = window.TutorialDefaults || {};
+        this.options = { ...TutorialConfig.DEFAULTS, ...windowDefaults, ...userOptions };
+    }
+
+    set(key, value) {
+        this.options[key] = value;
+        return this;
+    }
+
+    get(key) {
+        return this.options[key];
+    }
+}