@kayf/ui 0.1.0

package/dist/kayf-ui.esm.js

@@ -0,0 +1,1296 @@
+/**
+ * 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';
+
+export { AuroraCard, BeamButton, GlitchText, HudPanel, KayfElement, SpotlightCard, baseCSS, getColor, getGlow, getSpotlight, tokens, version };
+//# sourceMappingURL=kayf-ui.esm.js.map