@kupola/kupola 1.2.0

package/js/modal.js

@@ -0,0 +1,191 @@
+class Modal {
+  constructor(element) {
+    this.element = element;
+    this.mask = element.querySelector('.ds-modal-mask');
+    this.modal = element.querySelector('.ds-modal');
+    this.closeBtn = element.querySelector('.ds-modal__close');
+    
+    this._keydownHandler = (e) => {
+      if (e.key === 'Escape' && this.isVisible()) {
+        this.close();
+      }
+    };
+    
+    this._closeBtnClickHandler = () => this.close();
+    
+    this._maskClickHandler = (e) => {
+      if (e.target === this.mask) {
+        this.close();
+      }
+    };
+    
+    this.init();
+  }
+  
+  init() {
+    if (this.closeBtn) {
+      this.closeBtn.addEventListener('click', this._closeBtnClickHandler);
+    }
+    
+    if (this.mask) {
+      this.mask.addEventListener('click', this._maskClickHandler);
+    }
+    
+    document.addEventListener('keydown', this._keydownHandler);
+  }
+  
+  open() {
+    this.mask.classList.add('is-visible');
+    Modal._openCount = (Modal._openCount || 0) + 1;
+    document.body.style.overflow = 'hidden';
+  }
+  
+  close() {
+    this.mask.classList.remove('is-visible');
+    Modal._openCount = Math.max(0, (Modal._openCount || 0) - 1);
+    if (Modal._openCount === 0) {
+      document.body.style.overflow = '';
+    }
+  }
+  
+  isVisible() {
+    return this.mask.classList.contains('is-visible');
+  }
+  
+  destroy() {
+    document.removeEventListener('keydown', this._keydownHandler);
+    if (this.closeBtn) {
+      this.closeBtn.removeEventListener('click', this._closeBtnClickHandler);
+    }
+    if (this.mask) {
+      this.mask.removeEventListener('click', this._maskClickHandler);
+    }
+    if (this.isVisible()) {
+      this.close();
+    }
+  }
+}
+
+Modal._openCount = 0;
+
+function createModal(options = {}) {
+  const {
+    title = '',
+    content = '',
+    width = '480px',
+    onConfirm,
+    onCancel
+  } = options;
+  
+  const container = document.createElement('div');
+  container.className = 'ds-modal-container';
+  container.innerHTML = `
+    <div class="ds-modal-mask">
+      <div class="ds-modal" style="max-width: ${width}">
+        <div class="ds-modal__header">
+          <span class="ds-modal__title"></span>
+          <button class="ds-modal__close" aria-label="Close">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M18 6L6 18M6 6l12 12"/>
+            </svg>
+          </button>
+        </div>
+        <div class="ds-modal__body"></div>
+        ${onConfirm || onCancel ? `
+        <div class="ds-modal__footer">
+          ${onCancel ? `<button class="ds-btn ds-btn--ghost" data-modal-cancel>Cancel</button>` : ''}
+          ${onConfirm ? `<button class="ds-btn ds-btn--brand" data-modal-confirm>OK</button>` : ''}
+        </div>
+        ` : ''}
+      </div>
+    </div>
+  `;
+  
+  document.body.appendChild(container);
+  
+  const modal = new Modal(container);
+  
+  const titleEl = container.querySelector('.ds-modal__title');
+  if (titleEl) titleEl.textContent = title;
+  const bodyEl = container.querySelector('.ds-modal__body');
+  if (bodyEl) bodyEl.textContent = content;
+  
+  const confirmBtn = container.querySelector('[data-modal-confirm]');
+  const cancelBtn = container.querySelector('[data-modal-cancel]');
+  
+  const confirmHandler = () => {
+      if (onConfirm) onConfirm();
+      modal.close();
+    };
+    
+    const cancelHandler = () => {
+      if (onCancel) onCancel();
+      modal.close();
+    };
+    
+    if (confirmBtn) {
+      confirmBtn.addEventListener('click', confirmHandler);
+    }
+    
+    if (cancelBtn) {
+      cancelBtn.addEventListener('click', cancelHandler);
+    }
+    
+    const closeAndDestroy = () => {
+      setTimeout(() => {
+        if (confirmBtn) {
+          confirmBtn.removeEventListener('click', confirmHandler);
+        }
+        if (cancelBtn) {
+          cancelBtn.removeEventListener('click', cancelHandler);
+        }
+        modal.destroy();
+        container.remove();
+      }, 300);
+    };
+    
+    const originalClose = modal.close.bind(modal);
+    modal.close = () => {
+      originalClose();
+      closeAndDestroy();
+    };
+  
+  modal.open();
+  
+  return modal;
+}
+
+function initModal(element) {
+  if (element.__kupolaInitialized) return;
+
+  const modal = new Modal(element);
+  element.__kupolaInstance = modal;
+  element.__kupolaInitialized = true;
+}
+
+function cleanupModal(element) {
+  if (!element.__kupolaInitialized || !element.__kupolaInstance) return;
+
+  const modal = element.__kupolaInstance;
+  modal.destroy();
+
+  element.__kupolaInstance = null;
+  element.__kupolaInitialized = false;
+}
+
+function initModals() {
+  document.querySelectorAll('.ds-modal-container').forEach(container => {
+    initModal(container);
+  });
+}
+
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = { Modal, initModals, initModal, cleanupModal, createModal };
+} else {
+  window.initModal = initModal;
+  window.cleanupModal = cleanupModal;
+}
+
+if (window.kupolaInitializer) {
+  window.kupolaInitializer.register('modal', initModal, cleanupModal);
+}

package/js/notification.js

@@ -0,0 +1,73 @@
+const Notification = {
+    normal: function(options) {
+        this.show({ ...options, type: 'normal' });
+    },
+    success: function(options) {
+        this.show({ ...options, type: 'success' });
+    },
+    error: function(options) {
+        this.show({ ...options, type: 'error' });
+    },
+    warning: function(options) {
+        this.show({ ...options, type: 'warning' });
+    },
+    info: function(options) {
+        this.show({ ...options, type: 'info' });
+    },
+    show: function(options) {
+        const { title, message, type = 'normal', duration = 4000 } = options;
+        
+        const notification = document.createElement('div');
+        notification.className = `ds-notification__item ds-notification__item--${type}`;
+        
+        const icons = {
+            normal: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>',
+            success: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>',
+            error: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>',
+            warning: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>',
+            info: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>'
+        };
+        
+        notification.innerHTML = `
+            <div class="ds-notification__icon ds-notification__icon--${type}">${icons[type]}</div>
+            <div class="ds-notification__content">
+                ${title ? '<div class="ds-notification__title"></div>' : ''}
+                ${message ? '<div class="ds-notification__message"></div>' : ''}
+            </div>
+            <button class="ds-notification__close">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+            </button>
+        `;
+        if (title) notification.querySelector('.ds-notification__title').textContent = title;
+        if (message) notification.querySelector('.ds-notification__message').textContent = message;
+        
+        let container = document.querySelector('.ds-notification');
+        if (!container) {
+            container = document.createElement('div');
+            container.className = 'ds-notification';
+            document.body.appendChild(container);
+        }
+        
+        container.appendChild(notification);
+        
+        setTimeout(() => {
+            notification.classList.add('is-visible');
+        }, 10);
+        
+        notification.querySelector('.ds-notification__close').addEventListener('click', () => {
+            notification.classList.remove('is-visible');
+            notification.classList.add('is-exiting');
+            setTimeout(() => notification.remove(), 300);
+        });
+        
+        if (duration > 0) {
+            setTimeout(() => {
+                notification.classList.remove('is-visible');
+                notification.classList.add('is-exiting');
+                setTimeout(() => notification.remove(), 300);
+            }, duration);
+        }
+    }
+};
+
+function initNotifications() {}

package/js/numberinput.js

@@ -0,0 +1,146 @@
+class NumberInput {
+    constructor(element) {
+        this.element = element;
+        this.minusBtn = element.querySelector('.ds-number-input__btn--decrease');
+        this.plusBtn = element.querySelector('.ds-number-input__btn--increase');
+        this.inputEl = element.querySelector('.ds-number-input__input');
+        this._listeners = [];
+
+        if (!this.minusBtn || !this.plusBtn || !this.inputEl) {
+            throw new Error('NumberInput: Missing required elements');
+        }
+
+        this.min = parseInt(this.inputEl.getAttribute('min')) || -Infinity;
+        this.max = parseInt(this.inputEl.getAttribute('max')) || Infinity;
+        this.step = parseInt(this.inputEl.getAttribute('step')) || 1;
+
+        this.init();
+    }
+
+    init() {
+        this.bindEvents();
+        this.updateState();
+    }
+
+    bindEvents() {
+        const minusHandler = () => this.updateValue(-this.step);
+        const plusHandler = () => this.updateValue(this.step);
+        const inputHandler = () => this.handleInput();
+
+        this.minusBtn.addEventListener('click', minusHandler);
+        this.plusBtn.addEventListener('click', plusHandler);
+        this.inputEl.addEventListener('input', inputHandler);
+
+        this._listeners.push(
+            { el: this.minusBtn, event: 'click', handler: minusHandler },
+            { el: this.plusBtn, event: 'click', handler: plusHandler },
+            { el: this.inputEl, event: 'input', handler: inputHandler }
+        );
+    }
+
+    updateValue(delta) {
+        let value = parseInt(this.inputEl.value) || 0;
+        value += delta;
+
+        if (value < this.min) value = this.min;
+        if (value > this.max) value = this.max;
+
+        this.inputEl.value = value;
+        this.inputEl.dispatchEvent(new Event('change'));
+        this.updateState();
+        this.dispatchChange();
+    }
+
+    handleInput() {
+        let value = parseInt(this.inputEl.value);
+        if (isNaN(value)) value = 0;
+        if (value < this.min) value = this.min;
+        if (value > this.max) value = this.max;
+        this.inputEl.value = value;
+        this.updateState();
+        this.dispatchChange();
+    }
+
+    updateState() {
+        const value = parseInt(this.inputEl.value) || 0;
+        this.minusBtn.disabled = value <= this.min;
+        this.plusBtn.disabled = value >= this.max;
+    }
+
+    setValue(value) {
+        if (value < this.min) value = this.min;
+        if (value > this.max) value = this.max;
+        this.inputEl.value = value;
+        this.updateState();
+        this.dispatchChange();
+    }
+
+    getValue() {
+        return parseInt(this.inputEl.value) || 0;
+    }
+
+    setRange(min, max) {
+        this.min = min;
+        this.max = max;
+        this.updateState();
+    }
+
+    dispatchChange() {
+        this.element.dispatchEvent(new CustomEvent('ds-number-input-change', {
+            detail: {
+                value: this.getValue()
+            }
+        }));
+    }
+
+    destroy() {
+        this._listeners.forEach(({ el, event, handler }) => {
+            el.removeEventListener(event, handler);
+        });
+        this._listeners = null;
+        this.minusBtn = null;
+        this.plusBtn = null;
+        this.inputEl = null;
+        this.element = null;
+    }
+}
+
+function initNumberInput(element) {
+    if (element.__kupolaInitialized) return;
+
+    try {
+        const instance = new NumberInput(element);
+        element.__kupolaInstance = instance;
+        element.__kupolaInitialized = true;
+    } catch (error) {
+        console.error('[NumberInput] Error initializing:', error);
+    }
+}
+
+function cleanupNumberInput(element) {
+    if (!element.__kupolaInitialized || !element.__kupolaInstance) return;
+
+    const instance = element.__kupolaInstance;
+    instance.destroy();
+
+    element.__kupolaInstance = null;
+    element.__kupolaInitialized = false;
+}
+
+function initNumberInputs() {
+    document.querySelectorAll('.ds-number-input').forEach(input => {
+        initNumberInput(input);
+    });
+}
+
+if (typeof module !== 'undefined' && module.exports) {
+    module.exports = { NumberInput, initNumberInputs, initNumberInput, cleanupNumberInput };
+} else {
+    window.NumberInput = NumberInput;
+    window.initNumberInput = initNumberInput;
+    window.cleanupNumberInput = cleanupNumberInput;
+}
+
+if (window.kupolaInitializer) {
+    window.kupolaInitializer.register('number-input', initNumberInput, cleanupNumberInput);
+}

package/js/performance.js

@@ -0,0 +1,250 @@
+class KupolaPerformance {
+  constructor() {
+    this.metrics = new Map();
+    this.timers = new Map();
+    this.observers = [];
+    this.enabled = false;
+    this.thresholds = {
+      render: 16,
+      mount: 100,
+      update: 50,
+      http: 3000
+    };
+  }
+
+  init() {
+    this.enabled = true;
+    this._setupObservers();
+    this._measureNavigation();
+  }
+
+  _setupObservers() {
+    if ('PerformanceObserver' in window) {
+      const paintObserver = new PerformanceObserver((entryList) => {
+        entryList.getEntries().forEach(entry => {
+          this._recordMetric('paint', {
+            name: entry.name,
+            startTime: entry.startTime,
+            duration: entry.duration
+          });
+        });
+      });
+      paintObserver.observe({ type: 'paint', buffered: true });
+      this.observers.push(paintObserver);
+
+      const resourceObserver = new PerformanceObserver((entryList) => {
+        entryList.getEntries().forEach(entry => {
+          this._recordMetric('resource', {
+            name: entry.name,
+            type: entry.initiatorType,
+            duration: entry.duration,
+            size: entry.transferSize,
+            startTime: entry.startTime
+          });
+        });
+      });
+      resourceObserver.observe({ type: 'resource', buffered: true });
+      this.observers.push(resourceObserver);
+
+      const longTaskObserver = new PerformanceObserver((entryList) => {
+        entryList.getEntries().forEach(entry => {
+          this._recordMetric('longtask', {
+            duration: entry.duration,
+            startTime: entry.startTime
+          });
+        });
+      });
+      longTaskObserver.observe({ type: 'longtask', buffered: true });
+      this.observers.push(longTaskObserver);
+    }
+  }
+
+  _measureNavigation() {
+    if ('performance' in window) {
+      const nav = performance.getEntriesByType('navigation')[0];
+      if (nav) {
+        this._recordMetric('navigation', {
+          domContentLoaded: nav.domContentLoadedEventEnd - nav.fetchStart,
+          load: nav.loadEventEnd - nav.fetchStart,
+          firstByte: nav.responseStart - nav.requestStart,
+          redirectCount: nav.redirectCount
+        });
+      }
+    }
+  }
+
+  startTimer(name, context = {}) {
+    if (!this.enabled) return;
+    
+    this.timers.set(name, {
+      startTime: performance.now(),
+      context
+    });
+  }
+
+  stopTimer(name) {
+    if (!this.enabled) return null;
+    
+    const timer = this.timers.get(name);
+    if (!timer) return null;
+    
+    const duration = performance.now() - timer.startTime;
+    this.timers.delete(name);
+    
+    this._recordMetric('timer', {
+      name,
+      duration,
+      ...timer.context
+    });
+
+    return duration;
+  }
+
+  _recordMetric(type, data) {
+    if (!this.enabled) return;
+    
+    const metric = {
+      type,
+      timestamp: Date.now(),
+      ...data
+    };
+    
+    if (!this.metrics.has(type)) {
+      this.metrics.set(type, []);
+    }
+    this.metrics.get(type).push(metric);
+  }
+
+  measure(fn, name, context = {}) {
+    if (!this.enabled) return fn();
+    
+    this.startTimer(name, context);
+    
+    let result;
+    let error;
+    
+    try {
+      result = fn();
+    } catch (e) {
+      error = e;
+    }
+    
+    const duration = this.stopTimer(name);
+    
+    if (error) {
+      throw error;
+    }
+    
+    return result;
+  }
+
+  measureAsync(fn, name, context = {}) {
+    if (!this.enabled) return fn();
+    
+    this.startTimer(name, context);
+    
+    return fn().then(result => {
+      this.stopTimer(name);
+      return result;
+    }).catch(error => {
+      this.stopTimer(name);
+      throw error;
+    });
+  }
+
+  getMetrics(type) {
+    if (type) {
+      return this.metrics.get(type) || [];
+    }
+    return Array.from(this.metrics.entries());
+  }
+
+  getSummary() {
+    const summary = {
+      navigation: null,
+      paint: null,
+      timers: [],
+      resources: [],
+      longTasks: []
+    };
+
+    if (this.metrics.has('navigation')) {
+      summary.navigation = this.metrics.get('navigation')[0];
+    }
+    
+    if (this.metrics.has('paint')) {
+      summary.paint = this.metrics.get('paint');
+    }
+    
+    if (this.metrics.has('timer')) {
+      summary.timers = this.metrics.get('timer');
+    }
+    
+    if (this.metrics.has('resource')) {
+      summary.resources = this.metrics.get('resource');
+    }
+    
+    if (this.metrics.has('longtask')) {
+      summary.longTasks = this.metrics.get('longtask');
+    }
+
+    return summary;
+  }
+
+  getPerformanceScore() {
+    const summary = this.getSummary();
+    let score = 100;
+    
+    if (summary.navigation) {
+      if (summary.navigation.load > 3000) score -= 20;
+      else if (summary.navigation.load > 2000) score -= 10;
+      
+      if (summary.navigation.domContentLoaded > 1500) score -= 15;
+      else if (summary.navigation.domContentLoaded > 1000) score -= 5;
+    }
+    
+    if (summary.paint) {
+      const fcp = summary.paint.find(p => p.name === 'first-contentful-paint');
+      if (fcp && fcp.startTime > 2000) score -= 20;
+      else if (fcp && fcp.startTime > 1000) score -= 10;
+    }
+    
+    if (summary.longTasks.length > 0) {
+      score -= summary.longTasks.length * 10;
+    }
+    
+    return Math.max(0, score);
+  }
+
+  logSummary() {
+    const summary = this.getSummary();
+    const score = this.getPerformanceScore();
+    
+    console.group('[KupolaPerformance] Summary');
+    console.log('Score:', score);
+    console.log('Navigation:', summary.navigation);
+    console.log('Paint:', summary.paint);
+    console.log('Long Tasks:', summary.longTasks.length);
+    console.groupEnd();
+  }
+
+  clear() {
+    this.metrics.clear();
+    this.timers.clear();
+  }
+
+  destroy() {
+    this.observers.forEach(observer => {
+      observer.disconnect();
+    });
+    this.observers = [];
+    this.clear();
+    this.enabled = false;
+  }
+}
+
+const kupolaPerformance = new KupolaPerformance();
+window.kupolaPerformance = kupolaPerformance;
+window.KupolaPerformance = KupolaPerformance;
+
+export default KupolaPerformance;