cynx-lib 1.3.28

package/ui/components/Divider.jsx

@@ -0,0 +1,96 @@
+import React from 'react';
+
+const SIZE_CONFIG = {
+  xs: { hMargin: '8px 0', vMargin: '0 4px', vHeight: '14px', fontSize: '.7rem', padding: '0 8px' },
+  sm: { hMargin: '12px 0', vMargin: '0 8px', vHeight: '18px', fontSize: '.75rem', padding: '0 10px' },
+  md: { hMargin: '16px 0', vMargin: '0 12px', vHeight: '24px', fontSize: '.82rem', padding: '0 12px' },
+  lg: { hMargin: '24px 0', vMargin: '0 16px', vHeight: '32px', fontSize: '.9rem', padding: '0 16px' },
+  xl: { hMargin: '32px 0', vMargin: '0 24px', vHeight: '48px', fontSize: '1rem', padding: '0 20px' },
+};
+
+export default function Divider({
+  children,
+  label,
+  orientation = 'horizontal',
+  align = 'center',
+  size = 'md',
+  color = 'var(--border-light, #ebebf0)',
+  thickness = 1,
+  variant = 'solid',
+  style = {},
+  className = '',
+  ...props
+}) {
+  const content = children || label;
+  const cfg = SIZE_CONFIG[size] || SIZE_CONFIG.md;
+  const thickStr = typeof thickness === 'number' ? `${thickness}px` : thickness;
+  const lineStyle = `${thickStr} ${variant} ${color}`;
+
+  if (orientation === 'vertical') {
+    return (
+      <div
+        className={`cynx-divider cynx-divider-vertical ${className}`}
+        style={{
+          display: 'inline-block',
+          width: 0,
+          height: style.height || cfg.vHeight,
+          margin: style.margin || cfg.vMargin,
+          borderLeft: lineStyle,
+          verticalAlign: 'middle',
+          alignSelf: 'center',
+          flexShrink: 0,
+          ...style,
+        }}
+        {...props}
+      />
+    );
+  }
+
+  // Horizontal Divider
+  if (content) {
+    const leftFlex = align === 'left' ? '0 0 16px' : '1';
+    const rightFlex = align === 'right' ? '0 0 16px' : '1';
+
+    return (
+      <div
+        className={`cynx-divider cynx-divider-horizontal ${className}`}
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          width: '100%',
+          margin: style.margin || cfg.hMargin,
+          ...style,
+        }}
+        {...props}
+      >
+        <div style={{ flex: leftFlex, borderBottom: lineStyle }} />
+        <span
+          style={{
+            padding: cfg.padding,
+            fontSize: cfg.fontSize,
+            color: 'var(--muted, #9b9daa)',
+            fontWeight: 500,
+            whiteSpace: 'nowrap',
+            lineHeight: 1,
+          }}
+        >
+          {content}
+        </span>
+        <div style={{ flex: rightFlex, borderBottom: lineStyle }} />
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={`cynx-divider cynx-divider-horizontal ${className}`}
+      style={{
+        width: '100%',
+        margin: style.margin || cfg.hMargin,
+        borderBottom: lineStyle,
+        ...style,
+      }}
+      {...props}
+    />
+  );
+}

package/ui/components/Dropzone.jsx

@@ -0,0 +1,203 @@
+import { useState, useRef } from 'react';
+import { UploadCloud, Paperclip, FileCheck, X, Eye, Trash2 } from 'lucide-react';
+import LineProgress from './LineProgress.jsx';
+import Badge from './Badge.jsx';
+import Button from './Button.jsx';
+
+function formatBytes(bytes, decimals = 1) {
+  if (!bytes || bytes === 0) return '0 B';
+  const k = 1024;
+  const dm = decimals < 0 ? 0 : decimals;
+  const sizes = ['B', 'KB', 'MB', 'GB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
+}
+
+export function Dropzone({
+  onFiles,
+  onFile,
+  accept = 'image/*,application/pdf,.*',
+  multiple = true,
+  hint = 'Поддерживаются изображения, PDF документы и любые файлы',
+  uploadingFiles = [],
+  existingFiles = [],
+  onRemoveUploading,
+  onRemoveExisting,
+  onPreview,
+  label = 'Прикрепить файлы (Фото, PDF, документы)',
+}) {
+  const [over, setOver] = useState(false);
+  const inputRef = useRef(null);
+
+  const handleFiles = (fileList) => {
+    const arr = Array.from(fileList || []);
+    if (arr.length === 0) return;
+    if (onFiles) onFiles(arr);
+    else if (onFile) arr.forEach(f => onFile(f));
+  };
+
+  const handleDrop = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setOver(false);
+    if (e.dataTransfer && e.dataTransfer.files) {
+      handleFiles(e.dataTransfer.files);
+    }
+  };
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+      {label && (
+        <label style={{ fontSize: 11, fontWeight: 600, color: 'var(--t2, #797b8d)', textTransform: 'uppercase', letterSpacing: '.08em', display: 'block' }}>
+          {label}
+        </label>
+      )}
+
+      <div
+        className={`dropzone${over ? ' over' : ''}`}
+        onDragOver={e => { e.preventDefault(); e.stopPropagation(); setOver(true); }}
+        onDragLeave={e => { e.preventDefault(); e.stopPropagation(); setOver(false); }}
+        onDrop={handleDrop}
+        onClick={() => inputRef.current?.click()}
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          padding: '20px 20px',
+          border: `2px dashed ${over ? 'var(--accent, #3b82f6)' : 'var(--border-light, #ebebf0)'}`,
+          borderRadius: 'var(--rad, 10px)',
+          cursor: 'pointer',
+          background: over ? 'rgba(59, 130, 246, 0.08)' : 'var(--grey-1, #f5f5f8)',
+          transition: 'all .2s ease',
+          textAlign: 'center',
+        }}
+      >
+        <input
+          ref={inputRef}
+          type="file"
+          accept={accept}
+          multiple={multiple}
+          onChange={e => {
+            handleFiles(e.target.files);
+            e.target.value = '';
+          }}
+          style={{ display: 'none' }}
+        />
+        <UploadCloud size={24} color="var(--accent, #3b82f6)" style={{ marginBottom: 6, pointerEvents: 'none' }} />
+        <span style={{ fontSize: '.82rem', fontWeight: 600, pointerEvents: 'none' }}>
+          Выберите файлы, перетащите их сюда или вставьте через Ctrl+V
+        </span>
+        {hint && <span style={{ fontSize: '.72rem', color: 'var(--muted, #797b8d)', marginTop: 2, pointerEvents: 'none' }}>{hint}</span>}
+      </div>
+
+      {/* Uploading progress items */}
+      {uploadingFiles.length > 0 && (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+          {uploadingFiles.map((item) => (
+            <div
+              key={item.tempId || item.name}
+              style={{
+                display: 'flex',
+                flexDirection: 'column',
+                gap: 4,
+                padding: '8px 10px',
+                background: 'var(--surface, #ffffff)',
+                border: '1px solid var(--border-light, #ebebf0)',
+                borderRadius: 'var(--rads, 8px)',
+                fontSize: '.8rem',
+              }}
+            >
+              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+                <div style={{ display: 'flex', alignItems: 'center', gap: 6, minWidth: 0 }}>
+                  {item.status === 'uploading' && <Paperclip size={14} color="var(--accent, #f99e2c)" />}
+                  {item.status === 'done' && <FileCheck size={14} color="var(--success, #22c55e)" />}
+                  {item.status === 'error' && <X size={14} color="var(--err, #ef4444)" />}
+                  <span style={{ textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap', fontWeight: 500 }}>
+                    {item.name} <span style={{ color: 'var(--muted, #797b8d)', fontSize: '.72rem' }}>({formatBytes(item.size)})</span>
+                  </span>
+                </div>
+
+                <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+                  {item.status === 'uploading' && (
+                    <span style={{ fontSize: '.75rem', fontWeight: 600, color: 'var(--accent, #3b82f6)' }}>
+                      {item.progress}%
+                    </span>
+                  )}
+                  {item.status === 'done' && <Badge variant="ok" size="xs">Загружен</Badge>}
+                  {item.status === 'error' && <Badge variant="err" size="xs">{item.error || 'Ошибка'}</Badge>}
+                  {onRemoveUploading && (
+                    <button
+                      onClick={(e) => { e.stopPropagation(); onRemoveUploading(item.tempId); }}
+                      style={{ border: 'none', background: 'none', cursor: 'pointer', padding: 2, color: 'var(--muted, #797b8d)' }}
+                    >
+                      <X size={14} />
+                    </button>
+                  )}
+                </div>
+              </div>
+
+              {item.status === 'uploading' && (
+                <LineProgress
+                  value={item.progress}
+                  color="var(--accent, #3b82f6)"
+                  height={4}
+                  showPercent={false}
+                  style={{ marginTop: 2 }}
+                />
+              )}
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Existing saved files list */}
+      {existingFiles.length > 0 && (
+        <div style={{ marginTop: 4 }}>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+            {existingFiles.map((f) => (
+              <div
+                key={f.id}
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'space-between',
+                  padding: '6px 10px',
+                  background: 'var(--surface, #ffffff)',
+                  border: '1px solid var(--border-light, #ebebf0)',
+                  borderRadius: 'var(--rads, 8px)',
+                  fontSize: '.8rem',
+                }}
+              >
+                <div style={{ display: 'flex', alignItems: 'center', gap: 6, minWidth: 0 }}>
+                  <Paperclip size={14} color="var(--accent, #f99e2c)" />
+                  <span style={{ textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap', fontWeight: 500 }}>
+                    {f.original_name || f.originalName} <span style={{ color: 'var(--muted, #797b8d)', fontSize: '.72rem' }}>({formatBytes(f.file_size || f.fileSize)})</span>
+                  </span>
+                </div>
+                <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
+                  {onPreview && (
+                    <Button
+                      variant="ghost"
+                      size="xs"
+                      icon={<Eye size={13} />}
+                      onClick={(e) => { e.stopPropagation(); onPreview(f); }}
+                    />
+                  )}
+                  {onRemoveExisting && (
+                    <Button
+                      variant="ghost"
+                      size="xs"
+                      icon={<Trash2 size={13} color="var(--err, #f64747)" />}
+                      onClick={(e) => { e.stopPropagation(); onRemoveExisting(f.id); }}
+                    />
+                  )}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/ui/components/FilePicker.jsx

@@ -0,0 +1,205 @@
+import { useState, useRef } from 'react';
+import { UploadCloud, Paperclip, FileCheck, X, Eye, Trash2 } from 'lucide-react';
+import LinearProgress from './LinearProgress.jsx';
+import Badge from './Badge.jsx';
+import Button from './Button.jsx';
+
+function formatBytes(bytes, decimals = 1) {
+  if (!bytes || bytes === 0) return '0 B';
+  const k = 1024;
+  const dm = decimals < 0 ? 0 : decimals;
+  const sizes = ['B', 'KB', 'MB', 'GB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
+}
+
+export function FilePicker({
+  onFiles,
+  onFile,
+  accept = 'image/*,application/pdf,.*',
+  multiple = true,
+  hint = 'Поддерживаются изображения, PDF документы и любые файлы',
+  uploadingFiles = [],
+  existingFiles = [],
+  onRemoveUploading,
+  onRemoveExisting,
+  onPreview,
+  label = 'Прикрепить файлы (Фото, PDF, документы)',
+}) {
+  const [over, setOver] = useState(false);
+  const inputRef = useRef(null);
+
+  const handleFiles = (fileList) => {
+    const arr = Array.from(fileList || []);
+    if (arr.length === 0) return;
+    if (onFiles) onFiles(arr);
+    else if (onFile) arr.forEach(f => onFile(f));
+  };
+
+  const handleDrop = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setOver(false);
+    if (e.dataTransfer && e.dataTransfer.files) {
+      handleFiles(e.dataTransfer.files);
+    }
+  };
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+      {label && (
+        <label style={{ fontSize: 11, fontWeight: 600, color: 'var(--t2, #797b8d)', textTransform: 'uppercase', letterSpacing: '.08em', display: 'block' }}>
+          {label}
+        </label>
+      )}
+
+      <div
+        className={`file-picker${over ? ' over' : ''}`}
+        onDragOver={e => { e.preventDefault(); e.stopPropagation(); setOver(true); }}
+        onDragLeave={e => { e.preventDefault(); e.stopPropagation(); setOver(false); }}
+        onDrop={handleDrop}
+        onClick={() => inputRef.current?.click()}
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          padding: '20px 20px',
+          border: `2px dashed ${over ? 'var(--accent, #3b82f6)' : 'var(--border-light, #ebebf0)'}`,
+          borderRadius: 'var(--rad, 10px)',
+          cursor: 'pointer',
+          background: over ? 'rgba(59, 130, 246, 0.08)' : 'var(--grey-1, #f5f5f8)',
+          transition: 'all .2s ease',
+          textAlign: 'center',
+        }}
+      >
+        <input
+          ref={inputRef}
+          type="file"
+          accept={accept}
+          multiple={multiple}
+          onChange={e => {
+            handleFiles(e.target.files);
+            e.target.value = '';
+          }}
+          style={{ display: 'none' }}
+        />
+        <UploadCloud size={24} color="var(--accent, #3b82f6)" style={{ marginBottom: 6, pointerEvents: 'none' }} />
+        <span style={{ fontSize: '.82rem', fontWeight: 600, pointerEvents: 'none' }}>
+          Выберите файлы, перетащите их сюда или вставьте через Ctrl+V
+        </span>
+        {hint && <span style={{ fontSize: '.72rem', color: 'var(--muted, #797b8d)', marginTop: 2, pointerEvents: 'none' }}>{hint}</span>}
+      </div>
+
+      {/* Uploading progress items */}
+      {uploadingFiles.length > 0 && (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+          {uploadingFiles.map((item) => (
+            <div
+              key={item.tempId || item.name}
+              style={{
+                display: 'flex',
+                flexDirection: 'column',
+                gap: 4,
+                padding: '8px 10px',
+                background: 'var(--surface, #ffffff)',
+                border: '1px solid var(--border-light, #ebebf0)',
+                borderRadius: 'var(--rads, 8px)',
+                fontSize: '.8rem',
+              }}
+            >
+              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+                <div style={{ display: 'flex', alignItems: 'center', gap: 6, minWidth: 0 }}>
+                  {item.status === 'uploading' && <Paperclip size={14} color="var(--accent, #f99e2c)" />}
+                  {item.status === 'done' && <FileCheck size={14} color="var(--success, #22c55e)" />}
+                  {item.status === 'error' && <X size={14} color="var(--err, #ef4444)" />}
+                  <span style={{ textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap', fontWeight: 500 }}>
+                    {item.name} <span style={{ color: 'var(--muted, #797b8d)', fontSize: '.72rem' }}>({formatBytes(item.size)})</span>
+                  </span>
+                </div>
+
+                <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+                  {item.status === 'uploading' && (
+                    <span style={{ fontSize: '.75rem', fontWeight: 600, color: 'var(--accent, #3b82f6)' }}>
+                      {item.progress}%
+                    </span>
+                  )}
+                  {item.status === 'done' && <Badge variant="ok" size="xs">Загружен</Badge>}
+                  {item.status === 'error' && <Badge variant="err" size="xs">{item.error || 'Ошибка'}</Badge>}
+                  {onRemoveUploading && (
+                    <button
+                      onClick={(e) => { e.stopPropagation(); onRemoveUploading(item.tempId); }}
+                      style={{ border: 'none', background: 'none', cursor: 'pointer', padding: 2, color: 'var(--muted, #797b8d)' }}
+                    >
+                      <X size={14} />
+                    </button>
+                  )}
+                </div>
+              </div>
+
+              {item.status === 'uploading' && (
+                <LinearProgress
+                  value={item.progress}
+                  color="var(--accent, #3b82f6)"
+                  height={4}
+                  showPercent={false}
+                  style={{ marginTop: 2 }}
+                />
+              )}
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Existing saved files list */}
+      {existingFiles.length > 0 && (
+        <div style={{ marginTop: 4 }}>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+            {existingFiles.map((f) => (
+              <div
+                key={f.id}
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'space-between',
+                  padding: '6px 10px',
+                  background: 'var(--surface, #ffffff)',
+                  border: '1px solid var(--border-light, #ebebf0)',
+                  borderRadius: 'var(--rads, 8px)',
+                  fontSize: '.8rem',
+                }}
+              >
+                <div style={{ display: 'flex', alignItems: 'center', gap: 6, minWidth: 0 }}>
+                  <Paperclip size={14} color="var(--accent, #f99e2c)" />
+                  <span style={{ textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap', fontWeight: 500 }}>
+                    {f.original_name || f.originalName} <span style={{ color: 'var(--muted, #797b8d)', fontSize: '.72rem' }}>({formatBytes(f.file_size || f.fileSize)})</span>
+                  </span>
+                </div>
+                <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
+                  {onPreview && (
+                    <Button
+                      variant="ghost"
+                      size="xs"
+                      icon={<Eye size={13} />}
+                      onClick={(e) => { e.stopPropagation(); onPreview(f); }}
+                    />
+                  )}
+                  {onRemoveExisting && (
+                    <Button
+                      variant="ghost"
+                      size="xs"
+                      icon={<Trash2 size={13} color="var(--err, #f64747)" />}
+                      onClick={(e) => { e.stopPropagation(); onRemoveExisting(f.id); }}
+                    />
+                  )}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default FilePicker;

package/ui/components/HoverCard.jsx

@@ -0,0 +1,81 @@
+import { useState, useRef, useEffect } from 'react';
+
+/**
+ * HoverCard — reusable tooltip/popover on hover
+ *
+ * Props:
+ *   trigger      — React node as hover target
+ *   children     — popup content
+ *   position     — 'top' | 'bottom' (default: 'top')
+ *   width        — min-width (default: 180)
+ *   style        — extra popup styles
+ *   triggerStyle — extra trigger wrapper styles
+ */
+export default function HoverCard({ trigger, children, position = 'top', width = 180, style, triggerStyle }) {
+  const [open, setOpen] = useState(false);
+  const [pos, setPos] = useState({ x: 0, y: 0 });
+  const wrapRef = useRef(null);
+
+  useEffect(() => {
+    if (open && wrapRef.current) {
+      const r = wrapRef.current.getBoundingClientRect();
+      setPos({ x: r.left + r.width / 2, y: position === 'top' ? r.top : r.bottom });
+    }
+  }, [open, position]);
+
+  useEffect(() => {
+    if (!open) return;
+    const close = (e) => {
+      if (wrapRef.current && !wrapRef.current.contains(e.target)) setOpen(false);
+    };
+    document.addEventListener('mousedown', close);
+    return () => document.removeEventListener('mousedown', close);
+  }, [open]);
+
+  return (
+    <div
+      ref={wrapRef}
+      onMouseEnter={() => setOpen(true)}
+      onMouseLeave={() => setOpen(false)}
+      style={{ display: 'inline-block', position: 'relative', ...triggerStyle }}
+    >
+      {trigger}
+      {open && (
+        <div style={{
+          position: 'fixed',
+          left: pos.x,
+          top: position === 'top' ? 'auto' : pos.y + 6,
+          bottom: position === 'top' ? window.innerHeight - pos.y + 6 : 'auto',
+          transform: 'translateX(-50%)',
+          zIndex: 9999,
+          minWidth: width,
+          background: 'var(--surface,#fff)',
+          border: '1px solid var(--border, #e2e8f0)',
+          borderRadius: 'var(--rads, 8px)',
+          padding: '10px 14px',
+          boxShadow: 'var(--smd, 0 4px 12px rgba(0,0,0,.12))',
+          pointerEvents: 'none',
+          animation: 'hoverCardIn .15s ease',
+          ...style,
+        }}>
+          {children}
+          <div style={{
+            position: 'absolute', left: '50%',
+            [position === 'top' ? 'bottom' : 'top']: -5,
+            transform: 'translateX(-50%) rotate(45deg)',
+            width: 8, height: 8, background: 'var(--surface,#fff)',
+            borderRight: '1px solid var(--border, #e2e8f0)',
+            borderBottom: position === 'top' ? 'none' : '1px solid var(--border, #e2e8f0)',
+            borderTop: position === 'top' ? '1px solid var(--border, #e2e8f0)' : 'none',
+          }} />
+        </div>
+      )}
+      <style>{`
+        @keyframes hoverCardIn {
+          from { opacity: 0; transform: translateX(-50%) translateY(4px); }
+          to { opacity: 1; transform: translateX(-50%) translateY(0); }
+        }
+      `}</style>
+    </div>
+  );
+}