cynx-lib 1.3.72 → 1.3.73

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cynx-lib",
-  "version": "1.3.72",
+  "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

@@ -278,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";
 };

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

@@ -87,7 +87,7 @@ function emitTime() {
 }
 
 function selectHour(h: string) {
-  activeTime.value = h;
+  activeTime.value.h = h;
   emitTime();
 }
 
@@ -125,7 +125,10 @@ const calcPos = () => {
   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 };
 };
@@ -224,6 +227,7 @@ onBeforeUnmount(() => {
       <div
         v-if="open"
         ref="dropRef"
+        class="cynx-timepicker-drop"
         style="
           position: fixed;
           z-index: 999999;