cynx-lib 1.3.80 → 1.3.82

package/ui/components/PrivacyBlur.jsx

@@ -1,603 +1,603 @@
-import React, { useState, useEffect, useRef } from 'react';
-import { Eye, EyeOff } from 'lucide-react';
-
-function useIsDarkMode() {
-  const [isDark, setIsDark] = useState(false);
-
-  useEffect(() => {
-    const checkDark = () => {
-      if (typeof document === 'undefined') return false;
-      const root = document.documentElement;
-      const theme = root.getAttribute('data-theme') || document.body.getAttribute('data-theme');
-      if (theme === 'dark') return true;
-      if (theme === 'light' || theme === 'amber') return false;
-      const textColor = window.getComputedStyle(document.body).color;
-      const m = textColor.match(/\d+/g);
-      if (m && m.length >= 3) {
-        const b = (Number(m[0]) * 299 + Number(m[1]) * 587 + Number(m[2]) * 114) / 1000;
-        return b > 128;
-      }
-      return false;
-    };
-
-    setIsDark(checkDark());
-
-    const observer = new MutationObserver(() => {
-      setIsDark(checkDark());
-    });
-
-    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme', 'class'] });
-    return () => observer.disconnect();
-  }, []);
-
-  return isDark;
-}
-
-// Telegram-style Shared Singleton Tiling Engine
-class SpoilerEngine {
-  constructor() {
-    this.subscribers = new Map();
-    this.tileCanvas = null;
-    this.tileCtx = null;
-    this.tileSize = 200;
-    this.particles = [];
-    this.animId = null;
-    this.speedMultiplier = 1.8;
-  }
-
-  initTile() {
-    if (this.tileCanvas) return;
-    if (typeof document === 'undefined') return;
-
-    this.tileCanvas = document.createElement('canvas');
-    this.tileCanvas.width = this.tileSize;
-    this.tileCanvas.height = this.tileSize;
-    this.tileCtx = this.tileCanvas.getContext('2d');
-
-    // 220 dense sparkling micro-particles inside a 200x200 seamless tile
-    const count = 220;
-    this.particles = [];
-    for (let i = 0; i < count; i++) {
-      const isMicro = Math.random() < 0.7;
-      this.particles.push({
-        x: Math.random() * this.tileSize,
-        y: Math.random() * this.tileSize,
-        size: isMicro ? (Math.random() * 0.4 + 0.6) : (Math.random() * 0.5 + 1.0),
-        phase: Math.random() * Math.PI * 2,
-        speed: Math.random() * 0.05 + 0.02,
-        baseAlpha: Math.random() * 0.55 + 0.35,
-      });
-    }
-  }
-
-  updateSpeed() {
-    if (this.subscribers.size === 0) return;
-    let maxSpeed = 1.8;
-    for (const s of this.subscribers.values()) {
-      if (typeof s === 'number' && s > 0) {
-        maxSpeed = Math.max(maxSpeed, s);
-      }
-    }
-    this.speedMultiplier = maxSpeed;
-  }
-
-  subscribe(callback, speed = 1.8) {
-    this.subscribers.set(callback, speed);
-    this.updateSpeed();
-    if (this.subscribers.size === 1) {
-      this.start();
-    }
-  }
-
-  unsubscribe(callback) {
-    this.subscribers.delete(callback);
-    this.updateSpeed();
-    if (this.subscribers.size === 0) {
-      this.stop();
-    }
-  }
-
-  start() {
-    this.initTile();
-    if (this.animId) return;
-
-    const loop = () => {
-      this.renderTile();
-      for (const cb of this.subscribers.keys()) {
-        cb(this.tileCanvas);
-      }
-      this.animId = requestAnimationFrame(loop);
-    };
-    this.animId = requestAnimationFrame(loop);
-  }
-
-  stop() {
-    if (this.animId) {
-      cancelAnimationFrame(this.animId);
-      this.animId = null;
-    }
-  }
-
-  renderTile() {
-    const ctx = this.tileCtx;
-    if (!ctx) return;
-    ctx.clearRect(0, 0, this.tileSize, this.tileSize);
-
-    const mult = this.speedMultiplier;
-    // Fast batch drawing of sparkling white particles with speed multiplier
-    for (let i = 0; i < this.particles.length; i++) {
-      const p = this.particles[i];
-      p.phase += p.speed * mult;
-
-      p.x += Math.sin(p.phase) * (0.05 * mult);
-      p.y += Math.cos(p.phase) * (0.05 * mult);
-      if (p.x < 0) p.x = this.tileSize;
-      if (p.x > this.tileSize) p.x = 0;
-      if (p.y < 0) p.y = this.tileSize;
-      if (p.y > this.tileSize) p.y = 0;
-
-      const shimmer = Math.sin(p.phase) * 0.35;
-      const alpha = Math.max(0.12, Math.min(1, p.baseAlpha + shimmer));
-
-      ctx.beginPath();
-      ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
-      ctx.fillStyle = `rgba(255, 255, 255, ${alpha})`;
-      ctx.fill();
-    }
-  }
-}
-
-const spoilerEngine = new SpoilerEngine();
-
-function SpoilerCanvas({
-  active,
-  isBursting,
-  burstOrigin,
-  onBurstComplete,
-  isDark,
-  shimmerSpeed,
-}) {
-  const canvasRef = useRef(null);
-  const sizeRef = useRef({ width: 0, height: 0, dpr: 1 });
-  const animBurstRef = useRef(null);
-
-  // Resize handling with devicePixelRatio for crisp Retina rendering
-  useEffect(() => {
-    const canvas = canvasRef.current;
-    if (!canvas) return;
-    const parent = canvas.parentElement;
-    if (!parent) return;
-
-    const ro = new ResizeObserver((entries) => {
-      for (const entry of entries) {
-        const rect = entry.contentRect;
-        if (rect.width > 0 && rect.height > 0) {
-          const dpr = window.devicePixelRatio || 1;
-          canvas.width = Math.floor(rect.width * dpr);
-          canvas.height = Math.floor(rect.height * dpr);
-          canvas.style.width = `${rect.width}px`;
-          canvas.style.height = `${rect.height}px`;
-          sizeRef.current = { width: rect.width, height: rect.height, dpr };
-        }
-      }
-    });
-
-    ro.observe(parent);
-    return () => ro.disconnect();
-  }, []);
-
-  // Shared Tiling Loop (Hardware accelerated repeat - 0.01ms draw call)
-  useEffect(() => {
-    if (!active || isBursting) return;
-
-    const draw = (tileCanvas) => {
-      const canvas = canvasRef.current;
-      if (!canvas) return;
-      const ctx = canvas.getContext('2d');
-      if (!ctx) return;
-      const { width, height, dpr } = sizeRef.current;
-      if (!width || !height) return;
-
-      ctx.save();
-      ctx.scale(dpr, dpr);
-      ctx.clearRect(0, 0, width, height);
-
-      // Frosted veil: slate-silver in light mode, obsidian in dark mode
-      ctx.fillStyle = isDark
-        ? 'rgba(12, 16, 22, 0.78)'
-        : 'rgba(92, 100, 114, 0.46)';
-      ctx.fillRect(0, 0, width, height);
-
-      // Instant hardware texture fill from single shared tile
-      const pattern = ctx.createPattern(tileCanvas, 'repeat');
-      if (pattern) {
-        ctx.fillStyle = pattern;
-        ctx.fillRect(0, 0, width, height);
-      }
-      ctx.restore();
-    };
-
-    spoilerEngine.subscribe(draw, shimmerSpeed);
-    return () => spoilerEngine.unsubscribe(draw);
-  }, [active, isBursting, isDark, shimmerSpeed]);
-
-  // Burst Dispersal on Click (lasts only ~300ms, then shuts down)
-  useEffect(() => {
-    if (!isBursting) return;
-    const canvas = canvasRef.current;
-    if (!canvas) return;
-    const ctx = canvas.getContext('2d');
-    if (!ctx) return;
-    const { width, height, dpr } = sizeRef.current;
-
-    const startTime = performance.now();
-    const duration = 280;
-    const originX = burstOrigin?.x ?? (width / 2);
-    const originY = burstOrigin?.y ?? (height / 2);
-
-    const burstParticles = [];
-    for (let i = 0; i < 70; i++) {
-      const angle = Math.random() * Math.PI * 2;
-      const speed = Math.random() * 8 + 3;
-      burstParticles.push({
-        x: originX + (Math.random() - 0.5) * 30,
-        y: originY + (Math.random() - 0.5) * 30,
-        vx: Math.cos(angle) * speed,
-        vy: Math.sin(angle) * speed,
-        size: Math.random() * 1.2 + 0.8,
-        alpha: 1,
-      });
-    }
-
-    const animateBurst = (now) => {
-      const progress = Math.min(1, (now - startTime) / duration);
-      const fade = 1 - progress;
-
-      ctx.save();
-      ctx.scale(dpr, dpr);
-      ctx.clearRect(0, 0, width, height);
-
-      // Fading veil
-      ctx.fillStyle = isDark
-        ? `rgba(12, 16, 22, ${0.78 * fade})`
-        : `rgba(92, 100, 114, ${0.46 * fade})`;
-      ctx.fillRect(0, 0, width, height);
-
-      // Outward radiating sparkles
-      for (const p of burstParticles) {
-        p.x += p.vx;
-        p.y += p.vy;
-        p.vx *= 0.94;
-        p.vy *= 0.94;
-        p.alpha = Math.max(0, p.alpha * 0.93);
-
-        ctx.beginPath();
-        ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
-        ctx.fillStyle = `rgba(255, 255, 255, ${p.alpha * fade})`;
-        ctx.fill();
-      }
-      ctx.restore();
-
-      if (progress < 1) {
-        animBurstRef.current = requestAnimationFrame(animateBurst);
-      } else {
-        if (onBurstComplete) onBurstComplete();
-      }
-    };
-
-    animBurstRef.current = requestAnimationFrame(animateBurst);
-    return () => {
-      if (animBurstRef.current) cancelAnimationFrame(animBurstRef.current);
-    };
-  }, [isBursting, burstOrigin, isDark]);
-
-  return (
-    <canvas
-      ref={canvasRef}
-      style={{
-        position: 'absolute',
-        inset: 0,
-        width: '100%',
-        height: '100%',
-        pointerEvents: 'none',
-        borderRadius: 'inherit',
-        zIndex: 2,
-        transition: 'opacity 0.25s ease',
-      }}
-    />
-  );
-}
-
-function getPlacementStyles(position) {
-  switch (position) {
-    case 'top':
-      return { alignItems: 'center', justifyContent: 'flex-start', paddingTop: 24 };
-    case 'top-left':
-      return { alignItems: 'flex-start', justifyContent: 'flex-start', padding: 20 };
-    case 'top-right':
-      return { alignItems: 'flex-end', justifyContent: 'flex-start', padding: 20 };
-    case 'bottom':
-      return { alignItems: 'center', justifyContent: 'flex-end', paddingBottom: 24 };
-    case 'bottom-left':
-      return { alignItems: 'flex-start', justifyContent: 'flex-end', padding: 20 };
-    case 'bottom-right':
-      return { alignItems: 'flex-end', justifyContent: 'flex-end', padding: 20 };
-    case 'center':
-    default:
-      return { alignItems: 'center', justifyContent: 'center' };
-  }
-}
-
-export default function PrivacyBlur({
-  active = false,
-  blur = 6,
-  spoiler = false,
-  shimmerSpeed,
-  showBadge = true,
-  showCountdown = false,
-  showRevealButton = false,
-  position = 'center',
-  icon,
-  badgeIcon,
-  countdownIcon,
-  text,
-  subtext,
-  revealable = false,
-  interactive,
-  revealDuration,
-  revealText = 'Показать',
-  hideText = 'Скрыть',
-  onReveal,
-  onHide,
-  style,
-  contentStyle,
-  className,
-  children,
-}) {
-  const isDark = useIsDarkMode();
-  const isRevealable = Boolean(revealable || interactive);
-  const [tempRevealed, setTempRevealed] = useState(false);
-  const [timeLeft, setTimeLeft] = useState(0);
-  const [isBursting, setIsBursting] = useState(false);
-  const [burstOrigin, setBurstOrigin] = useState(null);
-
-  const containerRef = useRef(null);
-  const timerRef = useRef(null);
-
-  const clearTimer = () => {
-    if (timerRef.current) {
-      clearInterval(timerRef.current);
-      timerRef.current = null;
-    }
-  };
-
-  useEffect(() => {
-    if (!active) {
-      clearTimer();
-      setTempRevealed(false);
-      setIsBursting(false);
-      setTimeLeft(0);
-    }
-  }, [active]);
-
-  useEffect(() => {
-    return () => clearTimer();
-  }, []);
-
-  const finishReveal = () => {
-    const hasDuration = revealDuration !== undefined && revealDuration !== null && revealDuration !== false;
-    if (hasDuration) {
-      const duration = typeof revealDuration === 'number' && revealDuration > 0 ? revealDuration : 5;
-      clearTimer();
-      setTempRevealed(true);
-      setTimeLeft(duration);
-
-      timerRef.current = setInterval(() => {
-        setTimeLeft((prev) => {
-          if (prev <= 1) {
-            clearTimer();
-            setTempRevealed(false);
-            if (onHide) onHide();
-            return 0;
-          }
-          return prev - 1;
-        });
-      }, 1000);
-    } else {
-      if (onReveal) onReveal();
-    }
-  };
-
-  const handleReveal = (e) => {
-    if (e) e.stopPropagation();
-    if (!isRevealable || isBursting) return;
-
-    if (spoiler) {
-      let origin = null;
-      if (e && typeof e.clientX === 'number' && typeof e.clientY === 'number' && containerRef.current) {
-        const rect = containerRef.current.getBoundingClientRect();
-        origin = {
-          x: Math.max(0, Math.min(rect.width, e.clientX - rect.left)),
-          y: Math.max(0, Math.min(rect.height, e.clientY - rect.top)),
-        };
-      }
-      setBurstOrigin(origin);
-      setIsBursting(true);
-    } else {
-      finishReveal();
-    }
-  };
-
-  const handleBurstComplete = () => {
-    setIsBursting(false);
-    finishReveal();
-  };
-
-  const handleHideNow = (e) => {
-    if (e) e.stopPropagation();
-    clearTimer();
-    setTempRevealed(false);
-    setIsBursting(false);
-    setTimeLeft(0);
-    if (onHide) onHide();
-  };
-
-  const effectiveBadgeIcon = badgeIcon || icon;
-  const blurValue = typeof blur === 'number' ? `${blur}px` : blur;
-  const isBlurred = active && !tempRevealed;
-  const hasOverlay = showBadge && Boolean(text || effectiveBadgeIcon || (isRevealable && showRevealButton));
-  const placementStyles = getPlacementStyles(position);
-
-  return (
-    <div
-      ref={containerRef}
-      className={className}
-      onClick={isBlurred && isRevealable ? handleReveal : undefined}
-      style={{
-        position: 'relative',
-        width: '100%',
-        height: '100%',
-        minHeight: '100%',
-        display: 'flex',
-        flexDirection: 'column',
-        flex: 1,
-        overflow: 'hidden',
-        cursor: isBlurred && isRevealable ? 'pointer' : 'default',
-        ...style,
-      }}
-    >
-      <div
-        style={{
-          width: '100%',
-          height: '100%',
-          display: 'flex',
-          flexDirection: 'column',
-          flex: 1,
-          filter: isBlurred && !isBursting ? `blur(${blurValue})` : 'none',
-          userSelect: isBlurred ? 'none' : 'auto',
-          pointerEvents: isBlurred ? 'none' : 'auto',
-          transition: 'filter 0.3s ease, opacity 0.25s ease',
-          opacity: isBlurred ? (isBursting ? 0.9 : 0.6) : 1,
-          ...contentStyle,
-        }}
-      >
-        {children}
-      </div>
-
-      {spoiler && isBlurred && (
-        <SpoilerCanvas
-          active={isBlurred}
-          isBursting={isBursting}
-          burstOrigin={burstOrigin}
-          onBurstComplete={handleBurstComplete}
-          isDark={isDark}
-          shimmerSpeed={shimmerSpeed}
-        />
-      )}
-
-      {isBlurred && hasOverlay && (
-        <div
-          style={{
-            position: 'absolute',
-            inset: 0,
-            width: '100%',
-            height: '100%',
-            display: 'flex',
-            flexDirection: 'column',
-            gap: 6,
-            padding: 12,
-            boxSizing: 'border-box',
-            zIndex: 3,
-            pointerEvents: isRevealable ? 'auto' : 'none',
-            opacity: isBursting ? 0 : 1,
-            transition: 'opacity 0.2s ease',
-            ...placementStyles,
-          }}
-        >
-          <div
-            onClick={isRevealable ? handleReveal : undefined}
-            style={{
-              display: 'inline-flex',
-              alignItems: 'center',
-              gap: 8,
-              padding: '6px 14px',
-              borderRadius: 'var(--rads)',
-              background: 'var(--surface)',
-              border: '1px solid var(--border-light)',
-              boxShadow: 'var(--shadow)',
-              color: 'var(--primary-text)',
-              fontSize: '.76rem',
-              fontWeight: 600,
-              cursor: isRevealable ? 'pointer' : 'default',
-              backdropFilter: 'blur(8px)',
-              WebkitBackdropFilter: 'blur(8px)',
-              transition: 'all 0.2s ease',
-              maxWidth: '90%',
-              userSelect: 'none',
-            }}
-          >
-            <span style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, alignSelf: 'center' }}>
-              {effectiveBadgeIcon || <EyeOff size={14} style={{ color: 'var(--muted)' }} />}
-            </span>
-            {text && <span style={{ whiteSpace: 'normal', wordBreak: 'break-word', lineHeight: 1.35 }}>{text}</span>}
-            {isRevealable && showRevealButton && (
-              <span style={{ fontSize: '.7rem', color: 'var(--accent)', textDecoration: 'underline', marginLeft: 4, flexShrink: 0, whiteSpace: 'nowrap', alignSelf: 'center' }}>
-                {revealText}
-              </span>
-            )}
-          </div>
-          {subtext && (
-            <span style={{ fontSize: '.68rem', color: 'var(--muted)', textAlign: 'center' }}>
-              {subtext}
-            </span>
-          )}
-        </div>
-      )}
-
-      {active && tempRevealed && showCountdown && (
-        <div
-          style={{
-            position: 'absolute',
-            top: 8,
-            right: 8,
-            display: 'inline-flex',
-            alignItems: 'center',
-            gap: 6,
-            padding: '3px 8px',
-            borderRadius: 'var(--rads)',
-            background: 'var(--surface)',
-            border: '1px solid var(--border-light)',
-            boxShadow: 'var(--shadow)',
-            fontSize: '.7rem',
-            fontWeight: 600,
-            color: 'var(--muted)',
-            zIndex: 4,
-            userSelect: 'none',
-            backdropFilter: 'blur(8px)',
-            WebkitBackdropFilter: 'blur(8px)',
-          }}
-        >
-          <span style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
-            {countdownIcon || <Eye size={12} style={{ color: 'var(--accent)' }} />}
-          </span>
-          <span style={{ whiteSpace: 'nowrap' }}>Скроется через {timeLeft}с</span>
-          <span
-            onClick={handleHideNow}
-            style={{
-              color: 'var(--accent)',
-              textDecoration: 'underline',
-              marginLeft: 4,
-              cursor: 'pointer',
-              flexShrink: 0,
-              whiteSpace: 'nowrap',
-            }}
-          >
-            {hideText}
-          </span>
-        </div>
-      )}
-    </div>
-  );
-}
-
-export { PrivacyBlur };
+import React, { useState, useEffect, useRef } from 'react';
+import { Eye, EyeOff } from 'lucide-react';
+
+function useIsDarkMode() {
+  const [isDark, setIsDark] = useState(false);
+
+  useEffect(() => {
+    const checkDark = () => {
+      if (typeof document === 'undefined') return false;
+      const root = document.documentElement;
+      const theme = root.getAttribute('data-theme') || document.body.getAttribute('data-theme');
+      if (theme === 'dark') return true;
+      if (theme === 'light' || theme === 'amber') return false;
+      const textColor = window.getComputedStyle(document.body).color;
+      const m = textColor.match(/\d+/g);
+      if (m && m.length >= 3) {
+        const b = (Number(m[0]) * 299 + Number(m[1]) * 587 + Number(m[2]) * 114) / 1000;
+        return b > 128;
+      }
+      return false;
+    };
+
+    setIsDark(checkDark());
+
+    const observer = new MutationObserver(() => {
+      setIsDark(checkDark());
+    });
+
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme', 'class'] });
+    return () => observer.disconnect();
+  }, []);
+
+  return isDark;
+}
+
+// Telegram-style Shared Singleton Tiling Engine
+class SpoilerEngine {
+  constructor() {
+    this.subscribers = new Map();
+    this.tileCanvas = null;
+    this.tileCtx = null;
+    this.tileSize = 200;
+    this.particles = [];
+    this.animId = null;
+    this.speedMultiplier = 1.8;
+  }
+
+  initTile() {
+    if (this.tileCanvas) return;
+    if (typeof document === 'undefined') return;
+
+    this.tileCanvas = document.createElement('canvas');
+    this.tileCanvas.width = this.tileSize;
+    this.tileCanvas.height = this.tileSize;
+    this.tileCtx = this.tileCanvas.getContext('2d');
+
+    // 220 dense sparkling micro-particles inside a 200x200 seamless tile
+    const count = 220;
+    this.particles = [];
+    for (let i = 0; i < count; i++) {
+      const isMicro = Math.random() < 0.7;
+      this.particles.push({
+        x: Math.random() * this.tileSize,
+        y: Math.random() * this.tileSize,
+        size: isMicro ? (Math.random() * 0.4 + 0.6) : (Math.random() * 0.5 + 1.0),
+        phase: Math.random() * Math.PI * 2,
+        speed: Math.random() * 0.05 + 0.02,
+        baseAlpha: Math.random() * 0.55 + 0.35,
+      });
+    }
+  }
+
+  updateSpeed() {
+    if (this.subscribers.size === 0) return;
+    let maxSpeed = 1.8;
+    for (const s of this.subscribers.values()) {
+      if (typeof s === 'number' && s > 0) {
+        maxSpeed = Math.max(maxSpeed, s);
+      }
+    }
+    this.speedMultiplier = maxSpeed;
+  }
+
+  subscribe(callback, speed = 1.8) {
+    this.subscribers.set(callback, speed);
+    this.updateSpeed();
+    if (this.subscribers.size === 1) {
+      this.start();
+    }
+  }
+
+  unsubscribe(callback) {
+    this.subscribers.delete(callback);
+    this.updateSpeed();
+    if (this.subscribers.size === 0) {
+      this.stop();
+    }
+  }
+
+  start() {
+    this.initTile();
+    if (this.animId) return;
+
+    const loop = () => {
+      this.renderTile();
+      for (const cb of this.subscribers.keys()) {
+        cb(this.tileCanvas);
+      }
+      this.animId = requestAnimationFrame(loop);
+    };
+    this.animId = requestAnimationFrame(loop);
+  }
+
+  stop() {
+    if (this.animId) {
+      cancelAnimationFrame(this.animId);
+      this.animId = null;
+    }
+  }
+
+  renderTile() {
+    const ctx = this.tileCtx;
+    if (!ctx) return;
+    ctx.clearRect(0, 0, this.tileSize, this.tileSize);
+
+    const mult = this.speedMultiplier;
+    // Fast batch drawing of sparkling white particles with speed multiplier
+    for (let i = 0; i < this.particles.length; i++) {
+      const p = this.particles[i];
+      p.phase += p.speed * mult;
+
+      p.x += Math.sin(p.phase) * (0.05 * mult);
+      p.y += Math.cos(p.phase) * (0.05 * mult);
+      if (p.x < 0) p.x = this.tileSize;
+      if (p.x > this.tileSize) p.x = 0;
+      if (p.y < 0) p.y = this.tileSize;
+      if (p.y > this.tileSize) p.y = 0;
+
+      const shimmer = Math.sin(p.phase) * 0.35;
+      const alpha = Math.max(0.12, Math.min(1, p.baseAlpha + shimmer));
+
+      ctx.beginPath();
+      ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
+      ctx.fillStyle = `rgba(255, 255, 255, ${alpha})`;
+      ctx.fill();
+    }
+  }
+}
+
+const spoilerEngine = new SpoilerEngine();
+
+function SpoilerCanvas({
+  active,
+  isBursting,
+  burstOrigin,
+  onBurstComplete,
+  isDark,
+  shimmerSpeed,
+}) {
+  const canvasRef = useRef(null);
+  const sizeRef = useRef({ width: 0, height: 0, dpr: 1 });
+  const animBurstRef = useRef(null);
+
+  // Resize handling with devicePixelRatio for crisp Retina rendering
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const parent = canvas.parentElement;
+    if (!parent) return;
+
+    const ro = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const rect = entry.contentRect;
+        if (rect.width > 0 && rect.height > 0) {
+          const dpr = window.devicePixelRatio || 1;
+          canvas.width = Math.floor(rect.width * dpr);
+          canvas.height = Math.floor(rect.height * dpr);
+          canvas.style.width = `${rect.width}px`;
+          canvas.style.height = `${rect.height}px`;
+          sizeRef.current = { width: rect.width, height: rect.height, dpr };
+        }
+      }
+    });
+
+    ro.observe(parent);
+    return () => ro.disconnect();
+  }, []);
+
+  // Shared Tiling Loop (Hardware accelerated repeat - 0.01ms draw call)
+  useEffect(() => {
+    if (!active || isBursting) return;
+
+    const draw = (tileCanvas) => {
+      const canvas = canvasRef.current;
+      if (!canvas) return;
+      const ctx = canvas.getContext('2d');
+      if (!ctx) return;
+      const { width, height, dpr } = sizeRef.current;
+      if (!width || !height) return;
+
+      ctx.save();
+      ctx.scale(dpr, dpr);
+      ctx.clearRect(0, 0, width, height);
+
+      // Frosted veil: slate-silver in light mode, obsidian in dark mode
+      ctx.fillStyle = isDark
+        ? 'rgba(12, 16, 22, 0.78)'
+        : 'rgba(92, 100, 114, 0.46)';
+      ctx.fillRect(0, 0, width, height);
+
+      // Instant hardware texture fill from single shared tile
+      const pattern = ctx.createPattern(tileCanvas, 'repeat');
+      if (pattern) {
+        ctx.fillStyle = pattern;
+        ctx.fillRect(0, 0, width, height);
+      }
+      ctx.restore();
+    };
+
+    spoilerEngine.subscribe(draw, shimmerSpeed);
+    return () => spoilerEngine.unsubscribe(draw);
+  }, [active, isBursting, isDark, shimmerSpeed]);
+
+  // Burst Dispersal on Click (lasts only ~300ms, then shuts down)
+  useEffect(() => {
+    if (!isBursting) return;
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+    const { width, height, dpr } = sizeRef.current;
+
+    const startTime = performance.now();
+    const duration = 280;
+    const originX = burstOrigin?.x ?? (width / 2);
+    const originY = burstOrigin?.y ?? (height / 2);
+
+    const burstParticles = [];
+    for (let i = 0; i < 70; i++) {
+      const angle = Math.random() * Math.PI * 2;
+      const speed = Math.random() * 8 + 3;
+      burstParticles.push({
+        x: originX + (Math.random() - 0.5) * 30,
+        y: originY + (Math.random() - 0.5) * 30,
+        vx: Math.cos(angle) * speed,
+        vy: Math.sin(angle) * speed,
+        size: Math.random() * 1.2 + 0.8,
+        alpha: 1,
+      });
+    }
+
+    const animateBurst = (now) => {
+      const progress = Math.min(1, (now - startTime) / duration);
+      const fade = 1 - progress;
+
+      ctx.save();
+      ctx.scale(dpr, dpr);
+      ctx.clearRect(0, 0, width, height);
+
+      // Fading veil
+      ctx.fillStyle = isDark
+        ? `rgba(12, 16, 22, ${0.78 * fade})`
+        : `rgba(92, 100, 114, ${0.46 * fade})`;
+      ctx.fillRect(0, 0, width, height);
+
+      // Outward radiating sparkles
+      for (const p of burstParticles) {
+        p.x += p.vx;
+        p.y += p.vy;
+        p.vx *= 0.94;
+        p.vy *= 0.94;
+        p.alpha = Math.max(0, p.alpha * 0.93);
+
+        ctx.beginPath();
+        ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
+        ctx.fillStyle = `rgba(255, 255, 255, ${p.alpha * fade})`;
+        ctx.fill();
+      }
+      ctx.restore();
+
+      if (progress < 1) {
+        animBurstRef.current = requestAnimationFrame(animateBurst);
+      } else {
+        if (onBurstComplete) onBurstComplete();
+      }
+    };
+
+    animBurstRef.current = requestAnimationFrame(animateBurst);
+    return () => {
+      if (animBurstRef.current) cancelAnimationFrame(animBurstRef.current);
+    };
+  }, [isBursting, burstOrigin, isDark]);
+
+  return (
+    <canvas
+      ref={canvasRef}
+      style={{
+        position: 'absolute',
+        inset: 0,
+        width: '100%',
+        height: '100%',
+        pointerEvents: 'none',
+        borderRadius: 'inherit',
+        zIndex: 2,
+        transition: 'opacity 0.25s ease',
+      }}
+    />
+  );
+}
+
+function getPlacementStyles(position) {
+  switch (position) {
+    case 'top':
+      return { alignItems: 'center', justifyContent: 'flex-start', paddingTop: 24 };
+    case 'top-left':
+      return { alignItems: 'flex-start', justifyContent: 'flex-start', padding: 20 };
+    case 'top-right':
+      return { alignItems: 'flex-end', justifyContent: 'flex-start', padding: 20 };
+    case 'bottom':
+      return { alignItems: 'center', justifyContent: 'flex-end', paddingBottom: 24 };
+    case 'bottom-left':
+      return { alignItems: 'flex-start', justifyContent: 'flex-end', padding: 20 };
+    case 'bottom-right':
+      return { alignItems: 'flex-end', justifyContent: 'flex-end', padding: 20 };
+    case 'center':
+    default:
+      return { alignItems: 'center', justifyContent: 'center' };
+  }
+}
+
+export default function PrivacyBlur({
+  active = false,
+  blur = 6,
+  spoiler = false,
+  shimmerSpeed,
+  showBadge = true,
+  showCountdown = false,
+  showRevealButton = false,
+  position = 'center',
+  icon,
+  badgeIcon,
+  countdownIcon,
+  text,
+  subtext,
+  revealable = false,
+  interactive,
+  revealDuration,
+  revealText = 'Показать',
+  hideText = 'Скрыть',
+  onReveal,
+  onHide,
+  style,
+  contentStyle,
+  className,
+  children,
+}) {
+  const isDark = useIsDarkMode();
+  const isRevealable = Boolean(revealable || interactive);
+  const [tempRevealed, setTempRevealed] = useState(false);
+  const [timeLeft, setTimeLeft] = useState(0);
+  const [isBursting, setIsBursting] = useState(false);
+  const [burstOrigin, setBurstOrigin] = useState(null);
+
+  const containerRef = useRef(null);
+  const timerRef = useRef(null);
+
+  const clearTimer = () => {
+    if (timerRef.current) {
+      clearInterval(timerRef.current);
+      timerRef.current = null;
+    }
+  };
+
+  useEffect(() => {
+    if (!active) {
+      clearTimer();
+      setTempRevealed(false);
+      setIsBursting(false);
+      setTimeLeft(0);
+    }
+  }, [active]);
+
+  useEffect(() => {
+    return () => clearTimer();
+  }, []);
+
+  const finishReveal = () => {
+    const hasDuration = revealDuration !== undefined && revealDuration !== null && revealDuration !== false;
+    if (hasDuration) {
+      const duration = typeof revealDuration === 'number' && revealDuration > 0 ? revealDuration : 5;
+      clearTimer();
+      setTempRevealed(true);
+      setTimeLeft(duration);
+
+      timerRef.current = setInterval(() => {
+        setTimeLeft((prev) => {
+          if (prev <= 1) {
+            clearTimer();
+            setTempRevealed(false);
+            if (onHide) onHide();
+            return 0;
+          }
+          return prev - 1;
+        });
+      }, 1000);
+    } else {
+      if (onReveal) onReveal();
+    }
+  };
+
+  const handleReveal = (e) => {
+    if (e) e.stopPropagation();
+    if (!isRevealable || isBursting) return;
+
+    if (spoiler) {
+      let origin = null;
+      if (e && typeof e.clientX === 'number' && typeof e.clientY === 'number' && containerRef.current) {
+        const rect = containerRef.current.getBoundingClientRect();
+        origin = {
+          x: Math.max(0, Math.min(rect.width, e.clientX - rect.left)),
+          y: Math.max(0, Math.min(rect.height, e.clientY - rect.top)),
+        };
+      }
+      setBurstOrigin(origin);
+      setIsBursting(true);
+    } else {
+      finishReveal();
+    }
+  };
+
+  const handleBurstComplete = () => {
+    setIsBursting(false);
+    finishReveal();
+  };
+
+  const handleHideNow = (e) => {
+    if (e) e.stopPropagation();
+    clearTimer();
+    setTempRevealed(false);
+    setIsBursting(false);
+    setTimeLeft(0);
+    if (onHide) onHide();
+  };
+
+  const effectiveBadgeIcon = badgeIcon || icon;
+  const blurValue = typeof blur === 'number' ? `${blur}px` : blur;
+  const isBlurred = active && !tempRevealed;
+  const hasOverlay = showBadge && Boolean(text || effectiveBadgeIcon || (isRevealable && showRevealButton));
+  const placementStyles = getPlacementStyles(position);
+
+  return (
+    <div
+      ref={containerRef}
+      className={className}
+      onClick={isBlurred && isRevealable ? handleReveal : undefined}
+      style={{
+        position: 'relative',
+        width: '100%',
+        height: '100%',
+        minHeight: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        flex: 1,
+        overflow: 'hidden',
+        cursor: isBlurred && isRevealable ? 'pointer' : 'default',
+        ...style,
+      }}
+    >
+      <div
+        style={{
+          width: '100%',
+          height: '100%',
+          display: 'flex',
+          flexDirection: 'column',
+          flex: 1,
+          filter: isBlurred && !isBursting ? `blur(${blurValue})` : 'none',
+          userSelect: isBlurred ? 'none' : 'auto',
+          pointerEvents: isBlurred ? 'none' : 'auto',
+          transition: 'filter 0.3s ease, opacity 0.25s ease',
+          opacity: isBlurred ? (isBursting ? 0.9 : 0.6) : 1,
+          ...contentStyle,
+        }}
+      >
+        {children}
+      </div>
+
+      {spoiler && isBlurred && (
+        <SpoilerCanvas
+          active={isBlurred}
+          isBursting={isBursting}
+          burstOrigin={burstOrigin}
+          onBurstComplete={handleBurstComplete}
+          isDark={isDark}
+          shimmerSpeed={shimmerSpeed}
+        />
+      )}
+
+      {isBlurred && hasOverlay && (
+        <div
+          style={{
+            position: 'absolute',
+            inset: 0,
+            width: '100%',
+            height: '100%',
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 6,
+            padding: 12,
+            boxSizing: 'border-box',
+            zIndex: 3,
+            pointerEvents: isRevealable ? 'auto' : 'none',
+            opacity: isBursting ? 0 : 1,
+            transition: 'opacity 0.2s ease',
+            ...placementStyles,
+          }}
+        >
+          <div
+            onClick={isRevealable ? handleReveal : undefined}
+            style={{
+              display: 'inline-flex',
+              alignItems: 'center',
+              gap: 8,
+              padding: '6px 14px',
+              borderRadius: 'var(--rads)',
+              background: 'var(--surface)',
+              border: '1px solid var(--border-light)',
+              boxShadow: 'var(--shadow)',
+              color: 'var(--primary-text)',
+              fontSize: '.76rem',
+              fontWeight: 600,
+              cursor: isRevealable ? 'pointer' : 'default',
+              backdropFilter: 'blur(8px)',
+              WebkitBackdropFilter: 'blur(8px)',
+              transition: 'all 0.2s ease',
+              maxWidth: '90%',
+              userSelect: 'none',
+            }}
+          >
+            <span style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, alignSelf: 'center' }}>
+              {effectiveBadgeIcon || <EyeOff size={14} style={{ color: 'var(--muted)' }} />}
+            </span>
+            {text && <span style={{ whiteSpace: 'normal', wordBreak: 'break-word', lineHeight: 1.35 }}>{text}</span>}
+            {isRevealable && showRevealButton && (
+              <span style={{ fontSize: '.7rem', color: 'var(--accent)', textDecoration: 'underline', marginLeft: 4, flexShrink: 0, whiteSpace: 'nowrap', alignSelf: 'center' }}>
+                {revealText}
+              </span>
+            )}
+          </div>
+          {subtext && (
+            <span style={{ fontSize: '.68rem', color: 'var(--muted)', textAlign: 'center' }}>
+              {subtext}
+            </span>
+          )}
+        </div>
+      )}
+
+      {active && tempRevealed && showCountdown && (
+        <div
+          style={{
+            position: 'absolute',
+            top: 8,
+            right: 8,
+            display: 'inline-flex',
+            alignItems: 'center',
+            gap: 6,
+            padding: '3px 8px',
+            borderRadius: 'var(--rads)',
+            background: 'var(--surface)',
+            border: '1px solid var(--border-light)',
+            boxShadow: 'var(--shadow)',
+            fontSize: '.7rem',
+            fontWeight: 600,
+            color: 'var(--muted)',
+            zIndex: 4,
+            userSelect: 'none',
+            backdropFilter: 'blur(8px)',
+            WebkitBackdropFilter: 'blur(8px)',
+          }}
+        >
+          <span style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
+            {countdownIcon || <Eye size={12} style={{ color: 'var(--accent)' }} />}
+          </span>
+          <span style={{ whiteSpace: 'nowrap' }}>Скроется через {timeLeft}с</span>
+          <span
+            onClick={handleHideNow}
+            style={{
+              color: 'var(--accent)',
+              textDecoration: 'underline',
+              marginLeft: 4,
+              cursor: 'pointer',
+              flexShrink: 0,
+              whiteSpace: 'nowrap',
+            }}
+          >
+            {hideText}
+          </span>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export { PrivacyBlur };