@kayf/ui 0.1.0

package/dist/kayf-ui.umd.js

@@ -0,0 +1,1315 @@
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
+    typeof define === 'function' && define.amd ? define(['exports'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.KayfUI = {}));
+})(this, (function (exports) { 'use strict';
+
+    /**
+     * KayfElement - базовый класс для всех компонентов.
+     */
+    class KayfElement extends HTMLElement {
+        constructor() {
+            super();
+            Object.defineProperty(this, "root", {
+                enumerable: true,
+                configurable: true,
+                writable: true,
+                value: void 0
+            });
+            this.root = this.attachShadow({ mode: 'open' });
+        }
+        static get observedAttributes() {
+            return [];
+        }
+        attributeChangedCallback(_name, oldValue, newValue) {
+            if (oldValue !== newValue) {
+                this.update();
+            }
+        }
+        connectedCallback() {
+            this.render();
+            this.setup();
+        }
+        disconnectedCallback() {
+            this.cleanup();
+        }
+        update() {
+            if (this.isConnected) {
+                this.render();
+                this.setup();
+            }
+        }
+        styles() { return ''; }
+        render() {
+            this.root.innerHTML = '<style>' + this.styles() + '</style>' + this.template();
+        }
+        setup() { }
+        cleanup() { }
+        attr(name, fallback = '') {
+            return this.getAttribute(name) ?? fallback;
+        }
+        numAttr(name, fallback = 0) {
+            const val = this.getAttribute(name);
+            return val !== null ? parseFloat(val) : fallback;
+        }
+        boolAttr(name) {
+            return this.hasAttribute(name);
+        }
+    }
+
+    const tokens = {
+        colors: {
+            cyan: '#00d4ff',
+            violet: '#7c3aed',
+            emerald: '#10b981',
+            amber: '#f59e0b',
+            red: '#ef4444',
+            white: '#e8e8f0',
+        },
+        glow: {
+            cyan: 'rgba(0, 212, 255, 0.2)',
+            violet: 'rgba(124, 58, 237, 0.2)',
+            emerald: 'rgba(16, 185, 129, 0.2)',
+            amber: 'rgba(245, 158, 11, 0.2)',
+            red: 'rgba(239, 68, 68, 0.2)',
+            white: 'rgba(232, 232, 240, 0.2)',
+        },
+        spotlight: {
+            cyan: 'rgba(0, 212, 255, 0.12)',
+            violet: 'rgba(124, 58, 237, 0.12)',
+            emerald: 'rgba(16, 185, 129, 0.12)',
+            amber: 'rgba(245, 158, 11, 0.12)',
+            red: 'rgba(239, 68, 68, 0.12)',
+            white: 'rgba(232, 232, 240, 0.12)',
+        },
+    };
+    const baseCSS = `
+  :host {
+    --kayf-cyan:    #00d4ff;
+    --kayf-violet:  #7c3aed;
+    --kayf-emerald: #10b981;
+    --kayf-amber:   #f59e0b;
+    --kayf-red:     #ef4444;
+    --kayf-bg:      #050508;
+    --kayf-surface: rgba(255, 255, 255, 0.03);
+    --kayf-border:  rgba(255, 255, 255, 0.07);
+    --kayf-text:    #e8e8f0;
+    --kayf-muted:   rgba(232, 232, 240, 0.4);
+    --kayf-font-sans: 'Syne', system-ui, sans-serif;
+    --kayf-font-mono: 'JetBrains Mono', monospace;
+  }
+`;
+    function getColor(v) {
+        return tokens.colors[v] ?? v;
+    }
+    function getGlow(v) {
+        return tokens.glow[v] ?? 'rgba(255,255,255,0.1)';
+    }
+    function getSpotlight(v) {
+        return tokens.spotlight[v] ?? 'rgba(255,255,255,0.08)';
+    }
+
+    /**
+     * <kayf-spotlight-card>
+     *
+     * Атрибуты:
+     *   color  - cyan | violet | emerald | amber | red  (default: cyan)
+     *   glow   - none | soft | medium | strong          (default: soft)
+     *   radius - border-radius px                       (default: 16)
+     *
+     * Пример:
+     *   <kayf-spotlight-card color="violet" glow="medium">
+     *     <h3>Title</h3>
+     *     <p>Description</p>
+     *   </kayf-spotlight-card>
+     */
+    const glowIntensity = {
+        none: 0, soft: 0.15, medium: 0.25, strong: 0.4,
+    };
+    class SpotlightCard extends KayfElement {
+        static get observedAttributes() {
+            return ['color', 'glow', 'radius'];
+        }
+        get color() { return this.attr('color', 'cyan'); }
+        get glowLevel() { return this.attr('glow', 'soft'); }
+        get radius() { return this.numAttr('radius', 16); }
+        styles() {
+            const color = getColor(this.color);
+            const glowColor = getGlow(this.color);
+            const spotColor = getSpotlight(this.color);
+            const intensity = glowIntensity[this.glowLevel] ?? 0.15;
+            const r = this.radius;
+            return baseCSS + `
+      *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+      :host { display: block; position: relative; border-radius: ${r}px; }
+
+      .card-border {
+        border-radius: ${r}px;
+        padding: 1px;
+        background: rgba(255,255,255,0.07);
+        transition: background 0.3s;
+        height: 100%;
+      }
+      :host(:hover) .card-border {
+        background: linear-gradient(135deg, ${color}44, rgba(255,255,255,0.05), ${color}22);
+      }
+      .card {
+        position: relative;
+        background: var(--kayf-surface);
+        border-radius: ${r - 1}px;
+        overflow: hidden;
+        height: 100%;
+        min-height: 160px;
+        box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
+        transition: box-shadow 0.3s, transform 0.3s;
+      }
+      :host(:hover) .card {
+        box-shadow: inset 0 1px 0 rgba(255,255,255,0.08),
+                    0 0 40px ${glowColor.replace('0.2', String(intensity))};
+        transform: translateY(-2px);
+      }
+      .spotlight {
+        position: absolute;
+        width: 350px; height: 350px;
+        border-radius: 50%;
+        pointer-events: none;
+        transform: translate(-50%, -50%);
+        background: radial-gradient(circle, ${spotColor}, transparent 70%);
+        opacity: 0;
+        transition: opacity 0.3s;
+        z-index: 0;
+      }
+      :host(:hover) .spotlight { opacity: 1; }
+      .accent {
+        position: absolute;
+        top: 0; left: 20%; right: 20%; height: 1px;
+        background: linear-gradient(90deg, transparent, ${color}88, transparent);
+        opacity: 0; transition: opacity 0.3s; z-index: 2;
+      }
+      :host(:hover) .accent { opacity: 1; }
+      .content { position: relative; z-index: 1; padding: 24px; height: 100%; }
+      ::slotted(p) {
+        font-family: var(--kayf-font-mono);
+        font-size: 13px; color: var(--kayf-muted);
+        line-height: 1.6; font-weight: 300;
+      }
+    `;
+        }
+        template() {
+            return `
+      <div class="card-border">
+        <div class="card">
+          <div class="spotlight"></div>
+          <div class="accent"></div>
+          <div class="content"><slot></slot></div>
+        </div>
+      </div>
+    `;
+        }
+        setup() {
+            const card = this.root.querySelector('.card');
+            const spot = this.root.querySelector('.spotlight');
+            if (!card || !spot)
+                return;
+            const fn = (e) => {
+                const rect = card.getBoundingClientRect();
+                spot.style.left = (e.clientX - rect.left) + 'px';
+                spot.style.top = (e.clientY - rect.top) + 'px';
+            };
+            card.addEventListener('mousemove', fn);
+            this._fn = fn;
+            this._card = card;
+        }
+        cleanup() {
+            const card = this._card;
+            const fn = this._fn;
+            if (card && fn)
+                card.removeEventListener('mousemove', fn);
+        }
+    }
+    if (!customElements.get('kayf-spotlight-card')) {
+        customElements.define('kayf-spotlight-card', SpotlightCard);
+    }
+
+    const sizes = {
+        sm: { padding: '0 14px', fontSize: '12px', height: '32px', radius: '8px' },
+        md: { padding: '0 22px', fontSize: '14px', height: '40px', radius: '10px' },
+        lg: { padding: '0 32px', fontSize: '15px', height: '50px', radius: '12px' },
+    };
+    class BeamButton extends KayfElement {
+        static get observedAttributes() {
+            return ['color', 'variant', 'size', 'disabled', 'loading'];
+        }
+        get color() { return this.attr('color', 'cyan'); }
+        get variant() { return this.attr('variant', 'outline'); }
+        get size() { return this.attr('size', 'md'); }
+        get isDisabled() { return this.boolAttr('disabled'); }
+        get isLoading() { return this.boolAttr('loading'); }
+        styles() {
+            const color = getColor(this.color);
+            const sz = sizes[this.size] ?? sizes.md;
+            const vs = {
+                solid: `
+        background: ${color};
+        color: #050508;
+        border: 1px solid transparent;
+        font-weight: 700;
+        box-shadow: 0 0 20px ${color}44, inset 0 1px 0 rgba(255,255,255,0.2);
+      `,
+                outline: `
+        background: ${color}12;
+        color: ${color};
+        border: 1px solid ${color}44;
+        font-weight: 600;
+        box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
+      `,
+                ghost: `
+        background: rgba(255,255,255,0.04);
+        color: rgba(232,232,240,0.7);
+        border: 1px solid rgba(255,255,255,0.08);
+        font-weight: 500;
+      `,
+            };
+            const vh = {
+                solid: `
+        background: ${color}dd;
+        box-shadow: 0 0 30px ${color}66, 0 4px 20px ${color}33, inset 0 1px 0 rgba(255,255,255,0.3);
+        transform: translateY(-2px);
+      `,
+                outline: `
+        background: ${color}1e;
+        border-color: ${color}88;
+        box-shadow: 0 0 20px ${color}22;
+        transform: translateY(-2px);
+      `,
+                ghost: `
+        background: rgba(255,255,255,0.07);
+        border-color: rgba(255,255,255,0.15);
+        color: rgba(232,232,240,0.9);
+        transform: translateY(-1px);
+      `,
+            };
+            return baseCSS + `
+      *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+      :host { display: inline-block; }
+      :host([disabled]), :host([loading]) { pointer-events: none; opacity: 0.45; }
+
+      .btn {
+        position: relative;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: 8px;
+        height: ${sz.height};
+        padding: ${sz.padding};
+        border-radius: ${sz.radius};
+        font-family: var(--kayf-font-sans);
+        font-size: ${sz.fontSize};
+        letter-spacing: 0.04em;
+        cursor: pointer;
+        overflow: hidden;
+        transition: background 0.25s, border-color 0.25s, box-shadow 0.25s, transform 0.2s, color 0.25s;
+        white-space: nowrap;
+        user-select: none;
+        outline: none;
+        ${vs[this.variant]}
+      }
+      .btn:hover { ${vh[this.variant]} }
+      .btn:active { transform: translateY(0) scale(0.98) !important; transition-duration: 0.1s; }
+      .btn:focus-visible { outline: 2px solid ${color}88; outline-offset: 3px; }
+
+      /* Beam sweep */
+      .beam {
+        position: absolute; inset: 0;
+        pointer-events: none; overflow: hidden; border-radius: inherit;
+      }
+      .beam::before {
+        content: '';
+        position: absolute;
+        top: 0; left: -120%; width: 60%; height: 100%;
+        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08) 40%, rgba(255,255,255,0.18) 50%, rgba(255,255,255,0.08) 60%, transparent);
+        transform: skewX(-20deg);
+      }
+      .btn:hover .beam::before { animation: beam-sweep 0.55s cubic-bezier(0.4,0,0.2,1) forwards; }
+      @keyframes beam-sweep { to { left: 160%; } }
+
+      /* Ripple */
+      .ripple {
+        position: absolute; border-radius: 50%;
+        background: rgba(255,255,255,0.15);
+        transform: scale(0);
+        animation: ripple-out 0.5s ease-out forwards;
+        pointer-events: none;
+      }
+      @keyframes ripple-out { to { transform: scale(4); opacity: 0; } }
+
+      /* Spinner */
+      .spinner {
+        display: none; width: 14px; height: 14px;
+        border: 2px solid currentColor; border-top-color: transparent;
+        border-radius: 50%; animation: spin 0.7s linear infinite; flex-shrink: 0;
+      }
+      :host([loading]) .spinner { display: block; }
+      :host([loading]) .label   { opacity: 0.6; }
+      @keyframes spin { to { transform: rotate(360deg); } }
+
+      /* Icon slots */
+      .icon-wrap { display: inline-flex; align-items: center; width: 16px; height: 16px; flex-shrink: 0; }
+    `;
+        }
+        template() {
+            return `
+      <button class="btn" part="button" type="button">
+        <span class="beam"></span>
+        <span class="spinner"></span>
+        <span class="icon-wrap"><slot name="icon-left"></slot></span>
+        <span class="label"><slot></slot></span>
+        <span class="icon-wrap"><slot name="icon-right"></slot></span>
+      </button>
+    `;
+        }
+        setup() {
+            const btn = this.root.querySelector('.btn');
+            if (!btn)
+                return;
+            const onPointerDown = (e) => {
+                const rect = btn.getBoundingClientRect();
+                const size = Math.max(rect.width, rect.height);
+                const x = e.clientX - rect.left - size / 2;
+                const y = e.clientY - rect.top - size / 2;
+                const ripple = document.createElement('span');
+                ripple.className = 'ripple';
+                ripple.style.cssText = `width:${size}px;height:${size}px;left:${x}px;top:${y}px;`;
+                btn.appendChild(ripple);
+                ripple.addEventListener('animationend', () => ripple.remove());
+            };
+            const onClick = (e) => {
+                if (this.isDisabled || this.isLoading) {
+                    e.stopPropagation();
+                    return;
+                }
+                this.dispatchEvent(new CustomEvent('kayf-click', {
+                    bubbles: true, composed: true, detail: { originalEvent: e },
+                }));
+            };
+            btn.addEventListener('pointerdown', onPointerDown);
+            btn.addEventListener('click', onClick);
+            this._btn = btn;
+            this._pd = onPointerDown;
+            this._oc = onClick;
+        }
+        cleanup() {
+            const btn = this._btn;
+            if (btn) {
+                btn.removeEventListener('pointerdown', this._pd);
+                btn.removeEventListener('click', this._oc);
+            }
+        }
+    }
+    if (!customElements.get('kayf-beam-button')) {
+        customElements.define('kayf-beam-button', BeamButton);
+    }
+
+    /**
+     * <kayf-aurora-card>
+     *
+     * Атрибуты:
+     *   speed    — slow | normal | fast (default: normal)
+     *   blur     — sm | md | lg (default: md)
+     *   opacity  — 0.0–1.0 (default: 0.6)
+     *   colors   — через запятую: "cyan,violet,emerald" (default: cyan,violet,emerald,amber)
+     *   static   — boolean, отключает анимацию
+     *
+     * Слоты:
+     *   (default) — контент поверх aurora
+     *
+     * Пример:
+     *   <kayf-aurora-card colors="cyan,violet" speed="slow">
+     *     <h2>Title</h2>
+     *     <p>Content</p>
+     *   </kayf-aurora-card>
+     */
+    const COLOR_MAP = {
+        cyan: [0, 212, 255],
+        violet: [124, 58, 237],
+        emerald: [16, 185, 129],
+        amber: [245, 158, 11],
+        red: [239, 68, 68],
+        white: [232, 232, 240],
+    };
+    const SPEED_MAP$1 = {
+        slow: 0.00015, normal: 0.0003, fast: 0.0006,
+    };
+    const BLUR_MAP = {
+        sm: 80, md: 120, lg: 180,
+    };
+    class AuroraCard extends KayfElement {
+        constructor() {
+            super(...arguments);
+            Object.defineProperty(this, "_canvas", {
+                enumerable: true,
+                configurable: true,
+                writable: true,
+                value: void 0
+            });
+            Object.defineProperty(this, "_ctx", {
+                enumerable: true,
+                configurable: true,
+                writable: true,
+                value: void 0
+            });
+            Object.defineProperty(this, "_blobs", {
+                enumerable: true,
+                configurable: true,
+                writable: true,
+                value: []
+            });
+            Object.defineProperty(this, "_raf", {
+                enumerable: true,
+                configurable: true,
+                writable: true,
+                value: 0
+            });
+            Object.defineProperty(this, "_resizeOb", {
+                enumerable: true,
+                configurable: true,
+                writable: true,
+                value: void 0
+            });
+        }
+        static get observedAttributes() {
+            return ['speed', 'blur', 'opacity', 'colors', 'static'];
+        }
+        // Переименованы чтобы не конфликтовать с HTMLElement.blur()
+        get speedValue() { return SPEED_MAP$1[this.attr('speed', 'normal')] ?? 0.0003; }
+        get blurSize() { return BLUR_MAP[this.attr('blur', 'md')] ?? 120; }
+        get opacityValue() { return this.numAttr('opacity', 0.6); }
+        get isStatic() { return this.boolAttr('static'); }
+        get colorList() {
+            return this.attr('colors', 'cyan,violet,emerald,amber')
+                .split(',')
+                .map(s => COLOR_MAP[s.trim()] ?? COLOR_MAP.cyan);
+        }
+        styles() {
+            return baseCSS + `
+      *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+      :host {
+        display: block;
+        position: relative;
+        border-radius: 20px;
+        overflow: hidden;
+      }
+
+      .wrap {
+        position: relative;
+        border-radius: 20px;
+        overflow: hidden;
+        border: 1px solid rgba(255,255,255,0.07);
+      }
+
+      canvas {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+        border-radius: 20px;
+      }
+
+      .content {
+        position: relative;
+        z-index: 1;
+        background: rgba(5, 5, 8, 0.55);
+        backdrop-filter: blur(12px);
+        -webkit-backdrop-filter: blur(12px);
+        border-radius: 19px;
+        min-height: 200px;
+        padding: 40px;
+      }
+
+      ::slotted(h1), ::slotted(h2), ::slotted(h3) {
+        font-family: var(--kayf-font-sans);
+        font-weight: 800;
+        color: #fff;
+        margin-bottom: 12px;
+        line-height: 1.1;
+      }
+
+      ::slotted(p) {
+        font-family: var(--kayf-font-mono);
+        font-size: 13px;
+        color: rgba(232,232,240,0.5);
+        line-height: 1.7;
+        font-weight: 300;
+      }
+    `;
+        }
+        template() {
+            return `
+      <div class="wrap">
+        <canvas part="canvas"></canvas>
+        <div class="content">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+        }
+        setup() {
+            // Останавливаем предыдущий цикл при реактивном обновлении атрибутов
+            cancelAnimationFrame(this._raf);
+            this._resizeOb?.disconnect();
+            const canvas = this.root.querySelector('canvas');
+            const ctx = canvas.getContext('2d');
+            if (!ctx)
+                return;
+            this._canvas = canvas;
+            this._ctx = ctx;
+            this._initBlobs();
+            this._resize();
+            this._resizeOb = new ResizeObserver(() => this._resize());
+            this._resizeOb.observe(this);
+            if (this.isStatic) {
+                this._drawFrame(0);
+            }
+            else {
+                this._startLoop();
+            }
+        }
+        cleanup() {
+            cancelAnimationFrame(this._raf);
+            this._resizeOb?.disconnect();
+        }
+        _initBlobs() {
+            const colors = this.colorList;
+            this._blobs = colors.map((rgb, i) => ({
+                x: 0.15 + (i / colors.length) * 0.7,
+                y: 0.2 + Math.sin(i * 1.3) * 0.35 + 0.15,
+                rgb,
+                phase: i * (Math.PI * 2 / colors.length),
+                speed: this.speedValue * (0.7 + Math.random() * 0.6),
+            }));
+        }
+        _resize() {
+            this._canvas.width = this.offsetWidth || 600;
+            this._canvas.height = this.offsetHeight || 300;
+            if (this.isStatic)
+                this._drawFrame(0);
+        }
+        _startLoop() {
+            const tick = (t) => {
+                this._drawFrame(t);
+                this._raf = requestAnimationFrame(tick);
+            };
+            this._raf = requestAnimationFrame(tick);
+        }
+        _drawFrame(t) {
+            const { _ctx: ctx, _canvas: canvas, _blobs: blobs } = this;
+            const { width: w, height: h } = canvas;
+            if (!w || !h)
+                return;
+            ctx.clearRect(0, 0, w, h);
+            const blurPx = this.blurSize;
+            const opac = this.opacityValue;
+            const minDim = Math.min(w, h);
+            blobs.forEach(b => {
+                const bx = this.isStatic
+                    ? b.x
+                    : b.x + Math.sin(t * b.speed + b.phase) * 0.18;
+                const by = this.isStatic
+                    ? b.y
+                    : b.y + Math.cos(t * b.speed * 0.7 + b.phase) * 0.12;
+                const px = bx * w;
+                const py = by * h;
+                const r = 0.32 * minDim + blurPx;
+                const grad = ctx.createRadialGradient(px, py, 0, px, py, r);
+                grad.addColorStop(0, `rgba(${b.rgb.join(',')},${opac})`);
+                grad.addColorStop(0.5, `rgba(${b.rgb.join(',')},${opac * 0.35})`);
+                grad.addColorStop(1, `rgba(${b.rgb.join(',')},0)`);
+                ctx.fillStyle = grad;
+                ctx.beginPath();
+                ctx.arc(px, py, r, 0, Math.PI * 2);
+                ctx.fill();
+            });
+        }
+    }
+    if (!customElements.get('kayf-aurora-card')) {
+        customElements.define('kayf-aurora-card', AuroraCard);
+    }
+
+    const INTENSITY_MAP = {
+        subtle: { shiftPx: 1.2, layerOpacity: 0.55, shadowAlpha: 0.28 },
+        medium: { shiftPx: 2.2, layerOpacity: 0.72, shadowAlpha: 0.35 },
+        hard: { shiftPx: 3.2, layerOpacity: 0.84, shadowAlpha: 0.45 },
+    };
+    const SPEED_MAP = {
+        slow: { layerMs: 3900, flickerMs: 5300, burstMs: 2400 },
+        normal: { layerMs: 2500, flickerMs: 3600, burstMs: 1700 },
+        fast: { layerMs: 1700, flickerMs: 2400, burstMs: 1100 },
+    };
+    class GlitchText extends KayfElement {
+        constructor() {
+            super(...arguments);
+            Object.defineProperty(this, "_wrap", {
+                enumerable: true,
+                configurable: true,
+                writable: true,
+                value: void 0
+            });
+            Object.defineProperty(this, "_slot", {
+                enumerable: true,
+                configurable: true,
+                writable: true,
+                value: void 0
+            });
+            Object.defineProperty(this, "_layerA", {
+                enumerable: true,
+                configurable: true,
+                writable: true,
+                value: void 0
+            });
+            Object.defineProperty(this, "_layerB", {
+                enumerable: true,
+                configurable: true,
+                writable: true,
+                value: void 0
+            });
+            Object.defineProperty(this, "_onSlotChange", {
+                enumerable: true,
+                configurable: true,
+                writable: true,
+                value: void 0
+            });
+            Object.defineProperty(this, "_onEnter", {
+                enumerable: true,
+                configurable: true,
+                writable: true,
+                value: void 0
+            });
+            Object.defineProperty(this, "_observer", {
+                enumerable: true,
+                configurable: true,
+                writable: true,
+                value: void 0
+            });
+            Object.defineProperty(this, "_burstInterval", {
+                enumerable: true,
+                configurable: true,
+                writable: true,
+                value: 0
+            });
+            Object.defineProperty(this, "_burstTimeout", {
+                enumerable: true,
+                configurable: true,
+                writable: true,
+                value: 0
+            });
+        }
+        static get observedAttributes() {
+            return ['color', 'intensity', 'speed', 'text', 'static', 'uppercase'];
+        }
+        get color() { return this.attr('color', 'cyan'); }
+        get intensity() { return this.attr('intensity', 'medium'); }
+        get speed() { return this.attr('speed', 'normal'); }
+        get isStatic() { return this.boolAttr('static'); }
+        get isUppercase() { return this.boolAttr('uppercase'); }
+        styles() {
+            const color = getColor(this.color);
+            const level = INTENSITY_MAP[this.intensity] ?? INTENSITY_MAP.medium;
+            const speed = SPEED_MAP[this.speed] ?? SPEED_MAP.normal;
+            return baseCSS + `
+      *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+      :host {
+        display: inline-block;
+        position: relative;
+        color: ${color};
+      }
+
+      .wrap {
+        position: relative;
+        display: inline-grid;
+        align-items: center;
+        justify-items: start;
+        line-height: 1.05;
+        letter-spacing: 0.03em;
+        font-family: var(--kayf-font-sans);
+        font-weight: 800;
+        isolation: isolate;
+        text-shadow: 0 0 16px rgba(255,255,255,${level.shadowAlpha});
+        ${this.isUppercase ? 'text-transform: uppercase;' : ''}
+      }
+
+      .content,
+      .layer {
+        grid-area: 1 / 1;
+        white-space: pre-wrap;
+      }
+
+      .content {
+        position: relative;
+        z-index: 2;
+        color: rgba(255,255,255,0.96);
+        filter: drop-shadow(0 0 6px ${color}44);
+        animation: main-flicker ${speed.flickerMs}ms linear infinite;
+      }
+
+      .layer {
+        position: relative;
+        z-index: 1;
+        pointer-events: none;
+        opacity: ${level.layerOpacity};
+        mix-blend-mode: screen;
+      }
+
+      .layer-a {
+        color: ${color};
+        transform: translateX(calc(var(--offset-x, 0px) * -1));
+        animation:
+          glitch-clip-a ${speed.layerMs}ms steps(2, end) infinite,
+          glitch-shift-a ${Math.round(speed.layerMs * 0.9)}ms steps(1, end) infinite;
+      }
+
+      .layer-b {
+        color: #ff4d8d;
+        transform: translateX(var(--offset-x, 0px));
+        animation:
+          glitch-clip-b ${Math.round(speed.layerMs * 1.1)}ms steps(2, end) infinite,
+          glitch-shift-b ${Math.round(speed.layerMs * 0.8)}ms steps(1, end) infinite;
+      }
+
+      .scanline {
+        position: absolute;
+        left: -2%;
+        width: 104%;
+        height: 2px;
+        top: -15%;
+        opacity: 0;
+        pointer-events: none;
+        background: linear-gradient(90deg, transparent, ${color}99, transparent);
+        filter: blur(0.5px);
+        z-index: 3;
+        animation: scan ${Math.round(speed.layerMs * 1.25)}ms linear infinite;
+      }
+
+      .wrap.is-burst .layer-a,
+      .wrap.is-burst .layer-b {
+        opacity: 0.98;
+      }
+
+      .wrap.is-burst .layer-a { transform: translateX(${level.shiftPx * -1.65}px); }
+      .wrap.is-burst .layer-b { transform: translateX(${level.shiftPx * 1.65}px); }
+      .wrap.is-burst .content { opacity: 0.88; }
+
+      :host([static]) .content,
+      :host([static]) .layer,
+      :host([static]) .scanline {
+        animation: none !important;
+      }
+
+      :host([static]) .layer { opacity: 0.25; }
+      :host([static]) .scanline { display: none; }
+
+      @keyframes glitch-clip-a {
+        0%, 7%, 58%, 100% { clip-path: inset(0 0 0 0); }
+        8%  { clip-path: inset(12% 0 72% 0); }
+        14% { clip-path: inset(50% 0 28% 0); }
+        20% { clip-path: inset(72% 0 6% 0); }
+        36% { clip-path: inset(32% 0 40% 0); }
+      }
+
+      @keyframes glitch-clip-b {
+        0%, 9%, 62%, 100% { clip-path: inset(0 0 0 0); }
+        10% { clip-path: inset(70% 0 8% 0); }
+        16% { clip-path: inset(18% 0 62% 0); }
+        28% { clip-path: inset(45% 0 29% 0); }
+        43% { clip-path: inset(8% 0 77% 0); }
+      }
+
+      @keyframes glitch-shift-a {
+        0%, 58%, 100% { transform: translateX(0); }
+        7%  { transform: translateX(${level.shiftPx * -1.2}px); }
+        13% { transform: translateX(${level.shiftPx * 0.45}px); }
+        19% { transform: translateX(${level.shiftPx * -0.9}px); }
+      }
+
+      @keyframes glitch-shift-b {
+        0%, 63%, 100% { transform: translateX(0); }
+        8%  { transform: translateX(${level.shiftPx * 1.1}px); }
+        15% { transform: translateX(${level.shiftPx * -0.35}px); }
+        22% { transform: translateX(${level.shiftPx * 0.8}px); }
+      }
+
+      @keyframes main-flicker {
+        0%, 13%, 40%, 64%, 100% { opacity: 1; }
+        14% { opacity: 0.82; }
+        41% { opacity: 0.9; }
+        66% { opacity: 0.86; }
+      }
+
+      @keyframes scan {
+        0%   { top: -15%; opacity: 0; }
+        8%   { opacity: 0.4; }
+        30%  { opacity: 0.2; }
+        52%  { opacity: 0.35; }
+        100% { top: 115%; opacity: 0; }
+      }
+    `;
+        }
+        template() {
+            return `
+      <span class="wrap">
+        <span class="scanline" aria-hidden="true"></span>
+        <span class="layer layer-a" aria-hidden="true"></span>
+        <span class="layer layer-b" aria-hidden="true"></span>
+        <span class="content"><slot></slot></span>
+      </span>
+    `;
+        }
+        setup() {
+            this.cleanup();
+            this._wrap = this.root.querySelector('.wrap') ?? undefined;
+            this._slot = this.root.querySelector('slot') ?? undefined;
+            this._layerA = this.root.querySelector('.layer-a') ?? undefined;
+            this._layerB = this.root.querySelector('.layer-b') ?? undefined;
+            if (!this._wrap || !this._slot || !this._layerA || !this._layerB)
+                return;
+            const syncText = () => {
+                const text = this._resolveText(this._slot);
+                this._layerA.textContent = text;
+                this._layerB.textContent = text;
+                this._wrap.style.setProperty('--offset-x', `${(INTENSITY_MAP[this.intensity] ?? INTENSITY_MAP.medium).shiftPx}px`);
+            };
+            this._onSlotChange = syncText;
+            this._slot.addEventListener('slotchange', this._onSlotChange);
+            syncText();
+            this._observer = new MutationObserver(syncText);
+            this._observer.observe(this, { subtree: true, childList: true, characterData: true });
+            if (this.isStatic)
+                return;
+            this._onEnter = () => this._burst();
+            this._wrap.addEventListener('pointerenter', this._onEnter);
+            const step = SPEED_MAP[this.speed] ?? SPEED_MAP.normal;
+            this._burstInterval = window.setInterval(() => {
+                if (Math.random() > 0.52)
+                    this._burst();
+            }, step.burstMs);
+        }
+        cleanup() {
+            if (this._slot && this._onSlotChange) {
+                this._slot.removeEventListener('slotchange', this._onSlotChange);
+            }
+            if (this._wrap && this._onEnter) {
+                this._wrap.removeEventListener('pointerenter', this._onEnter);
+            }
+            this._observer?.disconnect();
+            if (this._burstInterval) {
+                window.clearInterval(this._burstInterval);
+                this._burstInterval = 0;
+            }
+            if (this._burstTimeout) {
+                window.clearTimeout(this._burstTimeout);
+                this._burstTimeout = 0;
+            }
+        }
+        _resolveText(slot) {
+            const assigned = slot.assignedNodes({ flatten: true });
+            const fromSlot = assigned.map(node => node.textContent ?? '').join(' ')
+                .replace(/\s+/g, ' ')
+                .trim();
+            return fromSlot || this.attr('text', '').trim();
+        }
+        _burst() {
+            if (!this._wrap)
+                return;
+            this._wrap.classList.add('is-burst');
+            if (this._burstTimeout)
+                window.clearTimeout(this._burstTimeout);
+            this._burstTimeout = window.setTimeout(() => {
+                this._wrap?.classList.remove('is-burst');
+                this._burstTimeout = 0;
+            }, 130);
+        }
+    }
+    if (!customElements.get('kayf-glitch-text')) {
+        customElements.define('kayf-glitch-text', GlitchText);
+    }
+
+    /**
+     * <kayf-hud-panel>
+     *
+     * Атрибуты:
+     *   color   - cyan | violet | emerald | amber | red | white (default: cyan)
+     *   glow    - none | soft | medium | strong                  (default: soft)
+     *   radius  - border-radius px                               (default: 16)
+     *   padding - внутренний отступ контента px                  (default: 20)
+     *
+     * Слоты:
+     *   title  - заголовок в верхней части
+     *   meta   - правый верхний блок (статус/значение)
+     *   footer - нижняя строка/действия
+     *   (default) - основной контент
+     *
+     * Пример:
+     *   <kayf-hud-panel color="emerald" glow="medium">
+     *     <span slot="title">Telemetry</span>
+     *     <span slot="meta">ONLINE</span>
+     *     <p>Signal quality 98%</p>
+     *   </kayf-hud-panel>
+     */
+    const GLOW_MAP = {
+        none: 0, soft: 0.16, medium: 0.26, strong: 0.4,
+    };
+    class HudPanel extends KayfElement {
+        constructor() {
+            super(...arguments);
+            Object.defineProperty(this, "_panel", {
+                enumerable: true,
+                configurable: true,
+                writable: true,
+                value: void 0
+            });
+            Object.defineProperty(this, "_spot", {
+                enumerable: true,
+                configurable: true,
+                writable: true,
+                value: void 0
+            });
+            Object.defineProperty(this, "_titleSlot", {
+                enumerable: true,
+                configurable: true,
+                writable: true,
+                value: void 0
+            });
+            Object.defineProperty(this, "_metaSlot", {
+                enumerable: true,
+                configurable: true,
+                writable: true,
+                value: void 0
+            });
+            Object.defineProperty(this, "_footerSlot", {
+                enumerable: true,
+                configurable: true,
+                writable: true,
+                value: void 0
+            });
+            Object.defineProperty(this, "_onMove", {
+                enumerable: true,
+                configurable: true,
+                writable: true,
+                value: void 0
+            });
+            Object.defineProperty(this, "_onLeave", {
+                enumerable: true,
+                configurable: true,
+                writable: true,
+                value: void 0
+            });
+            Object.defineProperty(this, "_onSlotChange", {
+                enumerable: true,
+                configurable: true,
+                writable: true,
+                value: void 0
+            });
+        }
+        static get observedAttributes() {
+            return ['color', 'glow', 'radius', 'padding'];
+        }
+        get color() { return this.attr('color', 'cyan'); }
+        get glowLevel() { return this.attr('glow', 'soft'); }
+        get radius() { return this.numAttr('radius', 16); }
+        get padding() { return this.numAttr('padding', 20); }
+        styles() {
+            const color = getColor(this.color);
+            const spot = getSpotlight(this.color);
+            const glow = getGlow(this.color);
+            const glowAlpha = GLOW_MAP[this.glowLevel] ?? GLOW_MAP.soft;
+            const glowHover = glow.replace('0.2', String(glowAlpha));
+            const radius = Math.max(0, this.radius);
+            const innerRadius = Math.max(0, radius - 1);
+            const pad = Math.max(8, this.padding);
+            return baseCSS + `
+      *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+      :host { display: block; position: relative; border-radius: ${radius}px; }
+
+      .hud-border {
+        position: relative;
+        border-radius: ${radius}px;
+        padding: 1px;
+        background:
+          linear-gradient(150deg, ${color}44, rgba(255,255,255,0.08) 38%, rgba(255,255,255,0.03) 62%, ${color}22);
+        transition: box-shadow 0.3s ease, background 0.3s ease;
+      }
+
+      .panel {
+        position: relative;
+        border-radius: ${innerRadius}px;
+        overflow: hidden;
+        min-height: 140px;
+        background:
+          radial-gradient(circle at 20% 15%, rgba(255,255,255,0.045), transparent 40%),
+          linear-gradient(165deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015) 30%, rgba(5,5,8,0.76) 100%);
+        border: 1px solid rgba(255,255,255,0.06);
+        box-shadow:
+          inset 0 1px 0 rgba(255,255,255,0.06),
+          0 10px 26px rgba(0,0,0,0.25);
+        transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
+      }
+
+      :host(:hover) .hud-border {
+        box-shadow: 0 0 34px ${glowHover};
+      }
+
+      :host(:hover) .panel {
+        transform: translateY(-2px);
+        border-color: ${color}66;
+        box-shadow:
+          inset 0 1px 0 rgba(255,255,255,0.08),
+          0 14px 34px rgba(0,0,0,0.32),
+          0 0 30px ${glowHover};
+      }
+
+      .spotlight {
+        position: absolute;
+        width: 360px;
+        height: 360px;
+        border-radius: 50%;
+        pointer-events: none;
+        transform: translate(-50%, -50%);
+        background: radial-gradient(circle, ${spot}, transparent 72%);
+        opacity: 0;
+        transition: opacity 0.3s ease;
+        z-index: 0;
+      }
+
+      :host(:hover) .spotlight { opacity: 1; }
+
+      .grid {
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
+        z-index: 0;
+        opacity: 0.18;
+        background-image:
+          linear-gradient(${color}26 1px, transparent 1px),
+          linear-gradient(90deg, ${color}1f 1px, transparent 1px);
+        background-size: 24px 24px, 24px 24px;
+        mask-image: linear-gradient(to bottom, rgba(0,0,0,0.55), transparent 75%);
+      }
+
+      .scanline {
+        position: absolute;
+        top: -20%;
+        left: 0;
+        width: 100%;
+        height: 1px;
+        background: linear-gradient(90deg, transparent, ${color}88, transparent);
+        opacity: 0.24;
+        pointer-events: none;
+        z-index: 1;
+        animation: scan 5.4s linear infinite;
+      }
+
+      .corner {
+        position: absolute;
+        width: 16px;
+        height: 16px;
+        border-color: ${color}88;
+        border-style: solid;
+        z-index: 2;
+        pointer-events: none;
+      }
+
+      .corner.tl { top: 8px; left: 8px; border-width: 1px 0 0 1px; border-radius: 3px 0 0 0; }
+      .corner.tr { top: 8px; right: 8px; border-width: 1px 1px 0 0; border-radius: 0 3px 0 0; }
+      .corner.bl { bottom: 8px; left: 8px; border-width: 0 0 1px 1px; border-radius: 0 0 0 3px; }
+      .corner.br { bottom: 8px; right: 8px; border-width: 0 1px 1px 0; border-radius: 0 0 3px 0; }
+
+      .frame-line {
+        position: absolute;
+        left: ${pad}px;
+        right: ${pad}px;
+        height: 1px;
+        background: linear-gradient(90deg, transparent, ${color}66 20%, ${color}66 80%, transparent);
+        opacity: 0.42;
+        z-index: 2;
+        pointer-events: none;
+      }
+
+      .frame-line.top { top: ${pad - 1}px; }
+      .frame-line.bottom { bottom: ${pad - 1}px; }
+
+      .content {
+        position: relative;
+        z-index: 3;
+        padding: ${pad}px;
+        display: grid;
+        gap: 14px;
+      }
+
+      .header,
+      .footer {
+        display: none;
+      }
+
+      .panel.has-header .header {
+        display: flex;
+        align-items: flex-start;
+        justify-content: space-between;
+        gap: 12px;
+        padding-bottom: 8px;
+        border-bottom: 1px solid rgba(255,255,255,0.06);
+      }
+
+      .panel.has-footer .footer {
+        display: block;
+        padding-top: 8px;
+        border-top: 1px solid rgba(255,255,255,0.06);
+      }
+
+      .title {
+        font-family: var(--kayf-font-sans);
+        font-size: 14px;
+        font-weight: 700;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+        color: rgba(255,255,255,0.94);
+      }
+
+      .meta {
+        font-family: var(--kayf-font-mono);
+        font-size: 12px;
+        line-height: 1.3;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+        color: ${color};
+        text-shadow: 0 0 10px ${color}55;
+      }
+
+      .body {
+        font-family: var(--kayf-font-mono);
+        font-size: 13px;
+        line-height: 1.65;
+        color: var(--kayf-text);
+      }
+
+      ::slotted(p) {
+        margin: 0;
+        color: var(--kayf-muted);
+      }
+
+      @keyframes scan {
+        0% { top: -20%; opacity: 0; }
+        10% { opacity: 0.3; }
+        55% { opacity: 0.14; }
+        100% { top: 120%; opacity: 0; }
+      }
+    `;
+        }
+        template() {
+            return `
+      <div class="hud-border">
+        <section class="panel" part="panel">
+          <div class="spotlight"></div>
+          <div class="grid"></div>
+          <div class="scanline"></div>
+          <span class="corner tl"></span>
+          <span class="corner tr"></span>
+          <span class="corner bl"></span>
+          <span class="corner br"></span>
+          <span class="frame-line top"></span>
+          <span class="frame-line bottom"></span>
+          <div class="content">
+            <header class="header">
+              <div class="title"><slot name="title"></slot></div>
+              <div class="meta"><slot name="meta"></slot></div>
+            </header>
+            <div class="body"><slot></slot></div>
+            <footer class="footer"><slot name="footer"></slot></footer>
+          </div>
+        </section>
+      </div>
+    `;
+        }
+        setup() {
+            this.cleanup();
+            this._panel = this.root.querySelector('.panel') ?? undefined;
+            this._spot = this.root.querySelector('.spotlight') ?? undefined;
+            this._titleSlot = this.root.querySelector('slot[name="title"]') ?? undefined;
+            this._metaSlot = this.root.querySelector('slot[name="meta"]') ?? undefined;
+            this._footerSlot = this.root.querySelector('slot[name="footer"]') ?? undefined;
+            if (!this._panel || !this._spot)
+                return;
+            this._onMove = (e) => {
+                const rect = this._panel.getBoundingClientRect();
+                this._spot.style.left = (e.clientX - rect.left) + 'px';
+                this._spot.style.top = (e.clientY - rect.top) + 'px';
+            };
+            this._onLeave = () => {
+                this._spot.style.left = '50%';
+                this._spot.style.top = '50%';
+            };
+            this._panel.addEventListener('mousemove', this._onMove);
+            this._panel.addEventListener('mouseleave', this._onLeave);
+            this._onLeave();
+            this._onSlotChange = () => this._syncSlotState();
+            if (this._titleSlot)
+                this._titleSlot.addEventListener('slotchange', this._onSlotChange);
+            if (this._metaSlot)
+                this._metaSlot.addEventListener('slotchange', this._onSlotChange);
+            if (this._footerSlot)
+                this._footerSlot.addEventListener('slotchange', this._onSlotChange);
+            this._syncSlotState();
+        }
+        cleanup() {
+            if (this._panel && this._onMove)
+                this._panel.removeEventListener('mousemove', this._onMove);
+            if (this._panel && this._onLeave)
+                this._panel.removeEventListener('mouseleave', this._onLeave);
+            if (this._titleSlot && this._onSlotChange)
+                this._titleSlot.removeEventListener('slotchange', this._onSlotChange);
+            if (this._metaSlot && this._onSlotChange)
+                this._metaSlot.removeEventListener('slotchange', this._onSlotChange);
+            if (this._footerSlot && this._onSlotChange)
+                this._footerSlot.removeEventListener('slotchange', this._onSlotChange);
+        }
+        _syncSlotState() {
+            if (!this._panel)
+                return;
+            const hasTitle = this._slotHasContent(this._titleSlot);
+            const hasMeta = this._slotHasContent(this._metaSlot);
+            const hasFooter = this._slotHasContent(this._footerSlot);
+            this._panel.classList.toggle('has-header', hasTitle || hasMeta);
+            this._panel.classList.toggle('has-footer', hasFooter);
+        }
+        _slotHasContent(slot) {
+            if (!slot)
+                return false;
+            return slot.assignedNodes({ flatten: true }).some(node => {
+                if (node.nodeType === Node.ELEMENT_NODE)
+                    return true;
+                if (node.nodeType === Node.TEXT_NODE)
+                    return (node.textContent ?? '').trim().length > 0;
+                return false;
+            });
+        }
+    }
+    if (!customElements.get('kayf-hud-panel')) {
+        customElements.define('kayf-hud-panel', HudPanel);
+    }
+
+    const version = '0.1.0';
+
+    exports.AuroraCard = AuroraCard;
+    exports.BeamButton = BeamButton;
+    exports.GlitchText = GlitchText;
+    exports.HudPanel = HudPanel;
+    exports.KayfElement = KayfElement;
+    exports.SpotlightCard = SpotlightCard;
+    exports.baseCSS = baseCSS;
+    exports.getColor = getColor;
+    exports.getGlow = getGlow;
+    exports.getSpotlight = getSpotlight;
+    exports.tokens = tokens;
+    exports.version = version;
+
+}));
+//# sourceMappingURL=kayf-ui.umd.js.map