cynx-lib 1.3.71 → 1.3.73

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cynx-lib",
-  "version": "1.3.71",
+  "version": "1.3.73",
   "type": "module",
   "main": "./index.cjs",
   "module": "./index.js",

package/ui/components/PrivacyBlur.jsx

@@ -0,0 +1,602 @@
+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,
+  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);
+  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 && (
+              <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 };

package/ui/index.cjs

@@ -54,6 +54,7 @@ __export(index_exports, {
   Modal: () => Modal,
   PageShell: () => PageShell,
   Pagination: () => Pagination,
+  PrivacyBlur: () => PrivacyBlur,
   PulseDot: () => PulseDot,
   Select: () => Select,
   Sidebar: () => Sidebar,
@@ -131,6 +132,7 @@ var import_InfoBadge = __toESM(require("./components/InfoBadge.jsx"), 1);
 var import_Layout = __toESM(require("./components/Layout.jsx"), 1);
 var import_Sidebar = __toESM(require("./components/Sidebar.jsx"), 1);
 var import_LoginPage = __toESM(require("./components/LoginPage.jsx"), 1);
+var import_PrivacyBlur = __toESM(require("./components/PrivacyBlur.jsx"), 1);
 const Layout = import_Layout.default;
 const Sidebar = import_Sidebar.default;
 const LoginPage = import_LoginPage.default;
@@ -192,3 +194,4 @@ const TableCardFooter = import_Card.TableCardFooter;
 const CardHdr = import_Card.CardHdr;
 const StatCard = import_Card.StatCard;
 const StatCardSkeleton = import_Card.StatCardSkeleton;
+const PrivacyBlur = import_PrivacyBlur.default;

package/ui/index.js

@@ -41,6 +41,7 @@ import { default as _InfoBadge } from './components/InfoBadge.jsx';
 import { default as _Layout } from './components/Layout.jsx';
 import { default as _Sidebar } from './components/Sidebar.jsx';
 import { default as _LoginPage } from './components/LoginPage.jsx';
+import { default as _PrivacyBlur } from './components/PrivacyBlur.jsx';
 
 export const Layout = _Layout;
 export const Sidebar = _Sidebar;
@@ -103,3 +104,4 @@ export const TableCardFooter = _TableCardFooter;
 export const CardHdr = _CardHdr;
 export const StatCard = _StatCard;
 export const StatCardSkeleton = _StatCardSkeleton;
+export const PrivacyBlur = _PrivacyBlur;

package/vue/components/Checkbox.vue

@@ -44,14 +44,18 @@ const toggle = () => {
     :style="{
       opacity: disabled ? 0.45 : 1,
       cursor: disabled ? 'not-allowed' : 'pointer',
+      verticalAlign: 'middle',
+      boxSizing: 'border-box',
     }"
     @click.prevent="toggle"
   >
     <span
-      class="relative flex-shrink-0 transition-all duration-150 flex items-center justify-center"
+      class="relative flex-shrink-0 transition-all duration-150 flex items-center justify-center overflow-hidden"
       :style="{
         width: `${dims.w}px`,
         height: `${dims.h}px`,
+        boxSizing: 'border-box',
+        verticalAlign: 'middle',
         border: `1.5px solid ${isChecked || indeterminate ? 'var(--accent, #12675D)' : 'var(--border, #e2e8f0)'}`,
         borderRadius: size === 'sm' ? '3px' : '4px',
         background: isChecked || indeterminate ? 'var(--accent, #12675D)' : 'var(--input-bg, #ffffff)',
@@ -64,6 +68,7 @@ const toggle = () => {
         :height="dims.icon"
         viewBox="0 0 10 10"
         fill="none"
+        style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: block; pointer-events: none;"
       >
         <line x1="2" y1="5" x2="8" y2="5" stroke="white" stroke-width="1.6" stroke-linecap="round" />
       </svg>
@@ -75,6 +80,7 @@ const toggle = () => {
         :height="dims.icon"
         viewBox="0 0 10 10"
         fill="none"
+        style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: block; pointer-events: none;"
       >
         <polyline
           points="1.5,5 4,7.5 8.5,2.5"
@@ -88,8 +94,8 @@ const toggle = () => {
 
     <span
       v-if="label || $slots.default"
-      :style="{ fontSize: size === 'sm' ? '.72rem' : '.78rem' }"
-      class="text-slate-800 font-semibold"
+      :style="{ fontSize: size === 'sm' ? '.72rem' : '.78rem', lineHeight: '1.2' }"
+      class="text-[var(--primary-text,#0f172a)] font-semibold select-none"
     >
       <slot>{{ label }}</slot>
     </span>

package/vue/components/DatePicker.vue

@@ -9,6 +9,7 @@ import {
   useSlots,
 } from "vue";
 import { ChevronLeft, ChevronRight, Calendar, Clock } from "lucide-vue-next";
+import TimePicker from "./TimePicker.vue";
 
 export interface DatePickerBadge {
   dot?: boolean;
@@ -277,9 +278,11 @@ const calcPos = () => {
 
 const handleWindowClick = (e: MouseEvent) => {
   if (!open.value) return;
-  const target = e.target as Node;
+  const target = e.target as HTMLElement | null;
+  if (!target) return;
   if (wrapRef.value?.contains(target)) return;
   if (dropRef.value?.contains(target)) return;
+  if (target.closest?.(".cynx-timepicker-drop")) return;
   open.value = false;
   view.value = "day";
 };
@@ -1107,28 +1110,37 @@ const posMode = computed(() => {
               gap: 5px;
               font-size: .76rem;
               color: var(--muted, #797b8d);
-              fontWeight: 600;
+              font-weight: 600;
             "
           >
             <Clock :size="13" style="opacity: 0.85;" />
             <span>{{ loc.time || 'Time:' }}</span>
           </div>
-          <button
-            type="button"
-            style="
-              padding: 4px 10px;
-              border-radius: var(--radxs, 6px);
-              background: var(--accent, #12675D);
-              color: var(--def-btn-text, #ffffff);
-              border: none;
-              font-size: 11.5px;
-              font-weight: 600;
-              cursor: pointer;
-            "
-            @click="open = false; view = 'day';"
-          >
-            {{ loc.ok || 'OK' }}
-          </button>
+          <div style="display: flex; align-items: center; gap: 6px;">
+            <TimePicker
+              :model-value="timeValue || ''"
+              :show-seconds="showSeconds"
+              :placeholder="timePlaceholder || '00:00:00'"
+              size="sm"
+              @update:model-value="(t) => { emit('update:timeValue', t); emit('time-change', t); }"
+            />
+            <button
+              type="button"
+              style="
+                padding: 4px 10px;
+                border-radius: var(--radxs, 6px);
+                background: var(--accent, #12675D);
+                color: var(--def-btn-text, #ffffff);
+                border: none;
+                font-size: 11.5px;
+                font-weight: 600;
+                cursor: pointer;
+              "
+              @click="open = false; view = 'day';"
+            >
+              {{ loc.ok || 'OK' }}
+            </button>
+          </div>
         </div>
       </div>
     </Teleport>

package/vue/components/StatusTag.vue

@@ -5,8 +5,8 @@ const STATUS_COLORS: Record<string, string> = {
   DR: "var(--drive, #28C76F)",
   SB: "var(--break, #FFB200)",
   ON: "var(--shift, #0F60FF)",
-  OFF: "#8B909A",
-  PC: "#8B909A",
+  OFF: "var(--muted, #8B909A)",
+  PC: "var(--muted, #8B909A)",
   YM: "var(--shift, #0F60FF)",
 };
 
@@ -17,27 +17,33 @@ const props = withDefaults(
     width?: number | string;
     height?: number | string;
     radius?: number | string;
+    plain?: boolean;
   }>(),
   {
     status: "",
     width: 36,
     height: 20,
     radius: 6,
+    plain: false,
   }
 );
 
+const normalizedKey = computed(() =>
+  (props.status || "").replace(/\s+/g, "_").toUpperCase().trim()
+);
+
 const isPrimaryStatus = computed(() => {
   if (props.color) return true;
-  const key = (props.status || "").toUpperCase().trim();
-  return Boolean(STATUS_COLORS[key]);
+  return Boolean(STATUS_COLORS[normalizedKey.value]);
 });
 
-const bg = computed(() => {
+const statusColor = computed(() => {
   if (props.color) return props.color;
-  const key = (props.status || "").toUpperCase().trim();
-  return STATUS_COLORS[key] || "transparent";
+  return STATUS_COLORS[normalizedKey.value] || "var(--muted, #8B909A)";
 });
 
+const isShortStatus = computed(() => (props.status || "").trim().length <= 3);
+
 const boxWidth = computed(() =>
   typeof props.width === "number" ? `${props.width}px` : props.width
 );
@@ -51,20 +57,31 @@ const borderRadius = computed(() =>
 
 <template>
   <span
-    v-if="status && isPrimaryStatus"
+    v-if="status && plain"
+    class="inline-flex items-center text-[11.5px] font-bold select-none whitespace-nowrap tracking-wide"
+    :style="{
+      color: statusColor,
+    }"
+  >
+    {{ status }}
+  </span>
+  <span
+    v-else-if="status && isPrimaryStatus"
     class="inline-flex items-center justify-center text-[11px] font-bold text-white tracking-wide select-none shadow-sm flex-shrink-0"
     :style="{
-      width: boxWidth,
+      width: isShortStatus ? boxWidth : 'auto',
+      minWidth: boxWidth,
+      padding: isShortStatus ? '0' : '0 6px',
       height: boxHeight,
       borderRadius: borderRadius,
-      backgroundColor: bg,
+      backgroundColor: statusColor,
     }"
   >
     {{ status }}
   </span>
   <span
     v-else-if="status"
-    class="text-[12px] font-semibold text-[var(--primary-text,inherit)] select-none truncate"
+    class="text-[12px] font-semibold text-[var(--muted,#8B909A)] select-none truncate"
   >
     {{ status }}
   </span>

package/vue/components/TimePicker.vue

@@ -0,0 +1,399 @@
+<script setup lang="ts">
+import { ref, computed, watch, onMounted, onBeforeUnmount, nextTick } from "vue";
+import { ChevronDown, Check, X, Clock } from "lucide-vue-next";
+
+function pad(n: number | string): string {
+  return String(n).padStart(2, "0");
+}
+
+function parseTime(val?: string, showSeconds = false) {
+  if (!val || typeof val !== "string") {
+    return { h: "00", m: "00", s: "00" };
+  }
+  const clean = val.trim();
+  const parts = clean.split(":").map((p) => p.trim());
+  const hNum = Math.min(23, Math.max(0, parseInt(parts[0], 10) || 0));
+  const mNum = Math.min(59, Math.max(0, parseInt(parts[1], 10) || 0));
+  const sNum = Math.min(59, Math.max(0, parseInt(parts[2], 10) || 0));
+  return {
+    h: pad(hNum),
+    m: pad(mNum),
+    s: pad(sNum),
+  };
+}
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: string;
+    value?: string;
+    showSeconds?: boolean;
+    disabled?: boolean;
+    size?: "xs" | "sm" | "md" | "lg";
+    placeholder?: string;
+  }>(),
+  {
+    modelValue: "",
+    value: "",
+    showSeconds: false,
+    disabled: false,
+    size: "md",
+    placeholder: "",
+  }
+);
+
+const emit = defineEmits<{
+  (e: "update:modelValue", val: string): void;
+  (e: "update:value", val: string): void;
+  (e: "change", val: string): void;
+}>();
+
+const currentVal = computed(() => {
+  return props.modelValue !== undefined && props.modelValue !== ""
+    ? props.modelValue
+    : props.value;
+});
+
+const open = ref(false);
+const btnRef = ref<HTMLElement | null>(null);
+const dropRef = ref<HTMLElement | null>(null);
+const pos = ref({ top: 0, left: 0 });
+
+const hours = Array.from({ length: 24 }, (_, i) => pad(i));
+const minutes = Array.from({ length: 60 }, (_, i) => pad(i));
+const seconds = Array.from({ length: 60 }, (_, i) => pad(i));
+
+const activeTime = ref(parseTime(currentVal.value, props.showSeconds));
+
+watch(
+  currentVal,
+  (newVal) => {
+    activeTime.value = parseTime(newVal, props.showSeconds);
+  },
+  { immediate: true }
+);
+
+const displayLabel = computed(() => {
+  if (!currentVal.value && props.placeholder) return props.placeholder;
+  const t = activeTime.value;
+  return props.showSeconds ? `${t.h}:${t.m}:${t.s}` : `${t.h}:${t.m}`;
+});
+
+function emitTime() {
+  const t = activeTime.value;
+  const result = props.showSeconds ? `${t.h}:${t.m}:${t.s}` : `${t.h}:${t.m}`;
+  emit("update:modelValue", result);
+  emit("update:value", result);
+  emit("change", result);
+}
+
+function selectHour(h: string) {
+  activeTime.value.h = h;
+  emitTime();
+}
+
+function selectMinute(m: string) {
+  activeTime.value.m = m;
+  emitTime();
+}
+
+function selectSecond(s: string) {
+  activeTime.value.s = s;
+  emitTime();
+}
+
+function resetTime() {
+  activeTime.value = { h: "00", m: "00", s: "00" };
+  emitTime();
+}
+
+function done() {
+  open.value = false;
+}
+
+const calcPos = () => {
+  if (!btnRef.value) return;
+  const r = btnRef.value.getBoundingClientRect();
+  const dropW = props.showSeconds ? 220 : 160;
+  const dropH = 220;
+
+  let left = r.left;
+  if (left + dropW > window.innerWidth - 12) {
+    left = Math.max(12, window.innerWidth - dropW - 12);
+  }
+  if (left < 12) left = 12;
+
+  let top = r.bottom + 4;
+  if (top + dropH > window.innerHeight - 12 && r.top - dropH - 4 > 12) {
+    top = r.top - dropH - 4;
+  } else if (top + dropH > window.innerHeight - 12) {
+    top = Math.max(12, window.innerHeight - dropH - 12);
+  }
+  if (top < 12) top = 12;
+
+  pos.value = { top, left };
+};
+
+const togglePicker = () => {
+  if (props.disabled) return;
+  if (!open.value) calcPos();
+  open.value = !open.value;
+};
+
+const handleWindowClick = (e: MouseEvent) => {
+  if (!open.value) return;
+  const target = e.target as Node;
+  if (btnRef.value?.contains(target)) return;
+  if (dropRef.value?.contains(target)) return;
+  open.value = false;
+};
+
+const handleKeyDown = (e: KeyboardEvent) => {
+  if (e.key === "Escape" && open.value) {
+    open.value = false;
+  }
+};
+
+watch(open, (isOpen) => {
+  if (isOpen) {
+    calcPos();
+    window.addEventListener("scroll", calcPos, true);
+    window.addEventListener("resize", calcPos);
+    document.addEventListener("mousedown", handleWindowClick, true);
+    document.addEventListener("keydown", handleKeyDown);
+    nextTick(calcPos);
+  } else {
+    window.removeEventListener("scroll", calcPos, true);
+    window.removeEventListener("resize", calcPos);
+    document.removeEventListener("mousedown", handleWindowClick, true);
+    document.removeEventListener("keydown", handleKeyDown);
+  }
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener("scroll", calcPos, true);
+  window.removeEventListener("resize", calcPos);
+  document.removeEventListener("mousedown", handleWindowClick, true);
+  document.removeEventListener("keydown", handleKeyDown);
+});
+</script>
+
+<template>
+  <div style="position: relative; display: inline-flex;">
+    <!-- Trigger Button -->
+    <button
+      ref="btnRef"
+      type="button"
+      :disabled="disabled"
+      style="
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+        padding: 0 8px;
+        height: 28px;
+        font-size: 12px;
+        font-weight: 600;
+        border-radius: var(--radxs, 6px);
+        border: 1px solid var(--border, #e2e8f0);
+        background: var(--surface, #ffffff);
+        color: var(--primary-text, #0f172a);
+        cursor: pointer;
+        user-select: none;
+        transition: border-color .14s;
+      "
+      :style="{
+        borderColor: open ? 'var(--accent, #12675D)' : 'var(--border, #e2e8f0)',
+        opacity: disabled ? 0.45 : 1,
+        cursor: disabled ? 'not-allowed' : 'pointer',
+      }"
+      @click="togglePicker"
+    >
+      <span style="font-variant-numeric: tabular-nums;">
+        {{ displayLabel }}
+      </span>
+      <ChevronDown
+        :size="12"
+        style="
+          color: var(--muted, #797b8d);
+          transition: transform .18s;
+        "
+        :style="{
+          transform: open ? 'rotate(180deg)' : 'none',
+        }"
+      />
+    </button>
+
+    <!-- Dropdown Popup via Teleport -->
+    <Teleport to="body">
+      <div
+        v-if="open"
+        ref="dropRef"
+        class="cynx-timepicker-drop"
+        style="
+          position: fixed;
+          z-index: 999999;
+          background: var(--surface, #ffffff);
+          border: 1px solid var(--border, #e2e8f0);
+          border-radius: 10px;
+          box-shadow: var(--shadow-lg, 0 10px 25px rgba(0,0,0,0.15));
+          padding: 8px;
+          box-sizing: border-box;
+          user-select: none;
+          font-family: var(--sans, inherit);
+        "
+        :style="{
+          top: `${pos.top}px`,
+          left: `${pos.left}px`,
+          width: showSeconds ? '220px' : '155px',
+        }"
+      >
+        <!-- Columns Header & Lists -->
+        <div
+          style="display: grid; gap: 4px;"
+          :style="{
+            gridTemplateColumns: showSeconds ? '1fr 1fr 1fr' : '1fr 1fr',
+          }"
+        >
+          <!-- Hours Column -->
+          <div>
+            <div style="font-size: 10.5px; font-weight: 600; color: var(--muted, #797b8d); text-align: center; margin-bottom: 3px;">
+              Час
+            </div>
+            <div class="custom-scrollbar" style="max-height: 140px; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; padding-right: 2px;">
+              <button
+                v-for="h in hours"
+                :key="h"
+                type="button"
+                style="
+                  padding: 3px 0;
+                  border-radius: var(--radxs, 4px);
+                  border: none;
+                  font-size: 11.5px;
+                  cursor: pointer;
+                  text-align: center;
+                  transition: background .12s, color .12s;
+                "
+                :style="{
+                  fontWeight: activeTime.h === h ? 700 : 400,
+                  background: activeTime.h === h ? 'var(--accent, #12675D)' : 'transparent',
+                  color: activeTime.h === h ? '#ffffff' : 'var(--primary-text, #0f172a)',
+                }"
+                @click="selectHour(h)"
+              >
+                {{ h }}
+              </button>
+            </div>
+          </div>
+
+          <!-- Minutes Column -->
+          <div>
+            <div style="font-size: 10.5px; font-weight: 600; color: var(--muted, #797b8d); text-align: center; margin-bottom: 3px;">
+              Мин
+            </div>
+            <div class="custom-scrollbar" style="max-height: 140px; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; padding-right: 2px;">
+              <button
+                v-for="m in minutes"
+                :key="m"
+                type="button"
+                style="
+                  padding: 3px 0;
+                  border-radius: var(--radxs, 4px);
+                  border: none;
+                  font-size: 11.5px;
+                  cursor: pointer;
+                  text-align: center;
+                  transition: background .12s, color .12s;
+                "
+                :style="{
+                  fontWeight: activeTime.m === m ? 700 : 400,
+                  background: activeTime.m === m ? 'var(--accent, #12675D)' : 'transparent',
+                  color: activeTime.m === m ? '#ffffff' : 'var(--primary-text, #0f172a)',
+                }"
+                @click="selectMinute(m)"
+              >
+                {{ m }}
+              </button>
+            </div>
+          </div>
+
+          <!-- Seconds Column -->
+          <div v-if="showSeconds">
+            <div style="font-size: 10.5px; font-weight: 600; color: var(--muted, #797b8d); text-align: center; margin-bottom: 3px;">
+              Сек
+            </div>
+            <div class="custom-scrollbar" style="max-height: 140px; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; padding-right: 2px;">
+              <button
+                v-for="s in seconds"
+                :key="s"
+                type="button"
+                style="
+                  padding: 3px 0;
+                  border-radius: var(--radxs, 4px);
+                  border: none;
+                  font-size: 11.5px;
+                  cursor: pointer;
+                  text-align: center;
+                  transition: background .12s, color .12s;
+                "
+                :style="{
+                  fontWeight: activeTime.s === s ? 700 : 400,
+                  background: activeTime.s === s ? 'var(--accent, #12675D)' : 'transparent',
+                  color: activeTime.s === s ? '#ffffff' : 'var(--primary-text, #0f172a)',
+                }"
+                @click="selectSecond(s)"
+              >
+                {{ s }}
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <!-- Footer Actions -->
+        <div
+          style="
+            margin-top: 6px;
+            padding-top: 5px;
+            border-top: 1px solid var(--border-light, #ebebf0);
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+          "
+        >
+          <button
+            type="button"
+            style="
+              background: none;
+              border: none;
+              cursor: pointer;
+              color: var(--danger, #f64747);
+              font-size: 11px;
+              font-weight: 500;
+              padding: 2px 4px;
+            "
+            @click="resetTime"
+          >
+            Сбросить
+          </button>
+          <button
+            type="button"
+            style="
+              background: var(--accent, #12675D);
+              color: #ffffff;
+              border: none;
+              border-radius: var(--radxs, 4px);
+              padding: 3px 8px;
+              font-size: 11px;
+              font-weight: 600;
+              cursor: pointer;
+              display: inline-flex;
+              align-items: center;
+              gap: 3px;
+            "
+            @click="done"
+          >
+            <Check :size="12" /> Готово
+          </button>
+        </div>
+      </div>
+    </Teleport>
+  </div>
+</template>

package/vue/index.js

@@ -14,6 +14,7 @@ import Modal from "./components/Modal.vue";
 import Drawer from "./components/Drawer.vue";
 import Toggle from "./components/Toggle.vue";
 import DatePicker from "./components/DatePicker.vue";
+import TimePicker from "./components/TimePicker.vue";
 import LinearProgress from "./components/LinearProgress.vue";
 import CircularProgress from "./components/CircularProgress.vue";
 import StatusTag from "./components/StatusTag.vue";
@@ -37,6 +38,7 @@ export {
   Drawer,
   Toggle,
   DatePicker,
+  TimePicker,
   LinearProgress,
   CircularProgress,
   StatusTag,
@@ -66,6 +68,7 @@ export default {
   Drawer,
   Toggle,
   DatePicker,
+  TimePicker,
   LinearProgress,
   CircularProgress,
   StatusTag,