endfield-vision 2.2.1 → 2.2.3

package/src/components/CompletenessBadge.tsx

@@ -5,14 +5,17 @@ import { useRef, useState, type ReactNode } from 'react'
 import { cx } from '../lib/cx'
 import { useMessages } from '../lib/i18n'
 import type { Messages } from '../lib/i18n-messages'
+import { UiLink } from '../lib/link'
+import type { Tone } from './Display'
 import { Popover } from './Popover'
 import { Tooltip } from './Tooltip'
 
 /*
- * Полнота данных сущности: бейдж «Заполнено» / «Не заполнено: N» /
- * «Истекает срок» и подсказка со списком незаполненных полей и истекающих
- * сроков. С onItemClick бейдж - кнопка: по нажатию - список-поповер, пункт
- * переводит к полю (открыть блок на правку, прокрутить к строке).
+ * Полнота и состояние данных сущности: бейдж «Заполнено» / «Не заполнено: N» /
+ * «Истекает срок» / «Просрочено» / «Блокирует выпуск» и подсказка с группами:
+ * блокирует, просрочено, истекает, не заполнено. С onItemClick бейдж - кнопка:
+ * по нажатию - список-поповер, пункт переводит к полю (открыть блок на правку,
+ * прокрутить к строке). С href бейдж - ссылка (например в карточку записи).
  */
 
 export interface CompletenessField {
@@ -21,7 +24,8 @@ export interface CompletenessField {
   label: ReactNode
 }
 
-export interface CompletenessExpiringItem {
+/** Пункт группы: причина блокировки, просроченный или истекающий срок. */
+export interface CompletenessItem {
   /** Ключ: с ним пункт можно нажать (onItemClick). */
   key?: string
   label: ReactNode
@@ -29,32 +33,50 @@ export interface CompletenessExpiringItem {
   date?: ReactNode
 }
 
+/** Истекающий срок - то же, что CompletenessItem. */
+export type CompletenessExpiringItem = CompletenessItem
+
 export type CompletenessSeverity = 'warning' | 'danger'
 export type CompletenessTone = 'success' | 'warning' | 'danger'
 
 /**
- * Тон бейджа: есть незаполненные - severity (warning по умолчанию),
- * только истекающие сроки - warning, иначе success.
+ * Тон бейджа: есть блокирующие причины или просроченные сроки (dangerCount) -
+ * danger; есть незаполненные - severity (warning по умолчанию); только
+ * истекающие сроки - warning, иначе success.
  */
-export function completenessTone(missingCount: number, expiringCount: number, severity: CompletenessSeverity = 'warning'): CompletenessTone {
+export function completenessTone(
+  missingCount: number,
+  expiringCount: number,
+  severity: CompletenessSeverity = 'warning',
+  dangerCount = 0,
+): CompletenessTone {
+  if (dangerCount > 0) return 'danger'
   if (missingCount > 0) return severity
   if (expiringCount > 0) return 'warning'
   return 'success'
 }
 
 export interface CompletenessBadgeProps {
-  /** Незаполненные поля: строка (она же ключ) или { key, label }. */
-  missing?: Array<string | CompletenessField>
+  /** Причины, по которым запись не допускается к работе: тон danger, первая группа. Строка - она же ключ. */
+  blocking?: Array<string | CompletenessItem>
+  /** Просроченные сроки: тон danger. Строка - она же ключ. */
+  expired?: Array<string | CompletenessItem>
   /** Истекающие сроки (документы, допуски). */
   expiring?: CompletenessExpiringItem[]
+  /** Незаполненные поля: строка (она же ключ) или { key, label }. */
+  missing?: Array<string | CompletenessField>
   /** Тон при незаполненных полях: warning (не мешает работе) или danger (блокирует). */
   severity?: CompletenessSeverity
   /** Подпись, когда всё заполнено. По умолчанию - «Заполнено». */
   completeLabel?: ReactNode
-  /** Своя подпись бейджа при незаполненных полях или сроках. */
+  /** Своя подпись бейджа поверх вычисленной - и при пустых группах (например «Заблокирован»). */
   label?: ReactNode
+  /** Свой тон бейджа поверх вычисленного - и при пустых группах. */
+  tone?: Tone
   /** Переход к полю: бейдж становится кнопкой со списком. */
   onItemClick?: (key: string) => void
+  /** Бейдж-ссылка (например в карточку записи), группы - в подсказке. Вместе с onItemClick и группами побеждает onItemClick. */
+  href?: string
   size?: 'sm' | 'md'
   className?: string
 }
@@ -63,17 +85,17 @@ function toField(f: string | CompletenessField): CompletenessField {
   return typeof f === 'string' ? { key: f, label: f } : f
 }
 
-function Details({
-  missing,
-  expiring,
-  t,
-  onPick,
-}: {
-  missing: CompletenessField[]
-  expiring: CompletenessExpiringItem[]
-  t: Messages
-  onPick?: (key: string) => void
-}) {
+function toItem(f: string | CompletenessItem): CompletenessItem {
+  return typeof f === 'string' ? { key: f, label: f } : f
+}
+
+interface Group {
+  id: 'blocking' | 'expired' | 'expiring' | 'missing'
+  title: string
+  items: CompletenessItem[]
+}
+
+function Details({ groups, onPick }: { groups: Group[]; onPick?: (key: string) => void }) {
   const item = (key: string | undefined, content: ReactNode) =>
     onPick && key !== undefined ? (
       <button type="button" className="ev-completeness-item" onClick={() => onPick(key)}>
@@ -84,21 +106,11 @@ function Details({
     )
   return (
     <div className="ev-completeness-details">
-      {missing.length > 0 ? (
-        <div className="ev-completeness-group">
-          <div className="ev-completeness-title">{t.completeness.missingTitle}</div>
+      {groups.map((g) => (
+        <div key={g.id} className="ev-completeness-group" data-group={g.id}>
+          <div className="ev-completeness-title">{g.title}</div>
           <ul className="ev-completeness-list" role="list">
-            {missing.map((f) => (
-              <li key={f.key}>{item(f.key, f.label)}</li>
-            ))}
-          </ul>
-        </div>
-      ) : null}
-      {expiring.length > 0 ? (
-        <div className="ev-completeness-group">
-          <div className="ev-completeness-title">{t.completeness.expiring}</div>
-          <ul className="ev-completeness-list" role="list">
-            {expiring.map((e, i) => (
+            {g.items.map((e, i) => (
               <li key={e.key ?? i}>
                 {item(
                   e.key,
@@ -111,31 +123,63 @@ function Details({
             ))}
           </ul>
         </div>
-      ) : null}
+      ))}
     </div>
   )
 }
 
+/** Группы подсказки в порядке важности: блокирует, просрочено, истекает, не заполнено. */
+function buildGroups(
+  t: Messages,
+  blocking: CompletenessItem[],
+  expired: CompletenessItem[],
+  expiring: CompletenessItem[],
+  missing: CompletenessField[],
+): Group[] {
+  const all: Group[] = [
+    { id: 'blocking', title: t.completeness.blockingTitle, items: blocking },
+    { id: 'expired', title: t.completeness.expired, items: expired },
+    { id: 'expiring', title: t.completeness.expiring, items: expiring },
+    { id: 'missing', title: t.completeness.missingTitle, items: missing },
+  ]
+  return all.filter((g) => g.items.length > 0)
+}
+
 export function CompletenessBadge({
-  missing: missingProp,
+  blocking: blockingProp,
+  expired: expiredProp,
   expiring: expiringProp,
+  missing: missingProp,
   severity = 'warning',
   completeLabel,
   label: labelProp,
+  tone: toneProp,
   onItemClick,
+  href,
   size = 'md',
   className,
 }: CompletenessBadgeProps) {
   const t = useMessages()
   const [open, setOpen] = useState(false)
   const triggerRef = useRef<HTMLButtonElement | null>(null)
-  const missing = (missingProp ?? []).map(toField)
+  const blocking = (blockingProp ?? []).map(toItem)
+  const expired = (expiredProp ?? []).map(toItem)
   const expiring = expiringProp ?? []
-  const tone = completenessTone(missing.length, expiring.length, severity)
-  const hasDetails = missing.length > 0 || expiring.length > 0
-  const label = !hasDetails
-    ? (completeLabel ?? t.completeness.complete)
-    : (labelProp ?? (missing.length > 0 ? t.completeness.missing(missing.length) : t.completeness.expiring))
+  const missing = (missingProp ?? []).map(toField)
+  const groups = buildGroups(t, blocking, expired, expiring, missing)
+  const tone = toneProp ?? completenessTone(missing.length, expiring.length, severity, blocking.length + expired.length)
+  const hasDetails = groups.length > 0
+  const computedLabel =
+    blocking.length > 0
+      ? t.completeness.blockingTitle
+      : expired.length > 0
+        ? t.completeness.expired
+        : missing.length > 0
+          ? t.completeness.missing(missing.length)
+          : expiring.length > 0
+            ? t.completeness.expiring
+            : (completeLabel ?? t.completeness.complete)
+  const label = labelProp ?? computedLabel
 
   const inner = (
     <>
@@ -144,6 +188,18 @@ export function CompletenessBadge({
     </>
   )
 
+  const details = <Details groups={groups} />
+
+  // Ссылка: группы - в подсказке у ссылки (она и так фокусируется).
+  if (href !== undefined && !(onItemClick && hasDetails)) {
+    const link = (
+      <UiLink href={href} className={cx('ev-badge ev-completeness ev-completeness-link', className)} data-tone={tone} data-size={size}>
+        {inner}
+      </UiLink>
+    )
+    return hasDetails ? <Tooltip content={details}>{link}</Tooltip> : link
+  }
+
   if (!hasDetails) {
     return (
       <span className={cx('ev-badge ev-completeness', className)} data-tone={tone} data-size={size}>
@@ -179,13 +235,13 @@ export function CompletenessBadge({
           </button>
         }
       >
-        <Details missing={missing} expiring={expiring} t={t} onPick={pick} />
+        <Details groups={groups} onPick={pick} />
       </Popover>
     )
   }
 
   return (
-    <Tooltip content={<Details missing={missing} expiring={expiring} t={t} />}>
+    <Tooltip content={details}>
       <span className={cx('ev-badge ev-completeness', className)} data-tone={tone} data-size={size} tabIndex={0}>
         {inner}
       </span>

package/src/components/ContextMenu.tsx

@@ -112,15 +112,21 @@ export function compactMenuEntries(entries: MenuEntry[]): MenuEntry[] {
   return out
 }
 
-/** Склейка групп пунктов через разделитель; пустые группы пропускаются. */
+/**
+ * Склейка групп пунктов через разделитель; пустые группы пропускаются.
+ * id разделителя - из id соседних пунктов: уникален и при повторной склейке
+ * уже склеенных групп.
+ */
 export function joinMenuSections(sections: Array<MenuEntry[] | null | undefined>): MenuEntry[] {
   const out: MenuEntry[] = []
-  sections.forEach((section, i) => {
+  for (const section of sections) {
     const items = section ? compactMenuEntries(section) : []
-    if (items.length === 0) return
-    if (out.length > 0) out.push({ type: 'separator', id: `ev-ctx-sep-${i}` })
+    const prev = out[out.length - 1]
+    const next = items[0]
+    if (!next) continue
+    if (prev) out.push({ type: 'separator', id: `ev-ctx-sep:${prev.id}:${next.id}` })
     out.push(...items)
-  })
+  }
   return out
 }
 

package/src/components/Select.tsx

@@ -13,7 +13,7 @@ import {
 } from 'react'
 import { useMessages } from '../lib/i18n'
 import { cx, normalizeSearch } from '../lib/cx'
-import { useEventCallback, useIsoLayoutEffect, useOutsideClick } from '../lib/hooks'
+import { useEventCallback, useIsoLayoutEffect, useMounted, useOutsideClick } from '../lib/hooks'
 import { Portal, useEscapeLayer, useFloating } from '../lib/overlay'
 import { useFieldProps } from './Field'
 import type { ControlSize } from './Input'
@@ -163,6 +163,11 @@ interface CommonSelectProps<V extends string> {
   dropdownMinWidth?: number
   /** Серверный поиск: опции приходят снаружи, локальной фильтрации нет. */
   onSearch?: (query: string) => void
+  /**
+   * Список раскрыт сразу после монтирования, фокус в поиске (или в списке).
+   * Серверная разметка - закрытый список, раскрытие - после гидратации.
+   */
+  defaultOpen?: boolean
   loading?: boolean
   icon?: ReactNode
   'aria-label'?: string
@@ -183,9 +188,13 @@ export interface SelectProps<V extends string = string> extends CommonSelectProp
 function useSelectCore<V extends string>(props: CommonSelectProps<V>, initialActive: () => number) {
   const { options, searchable: searchableProp, onSearch } = props
   const listId = useId()
-  const [open, setOpen] = useState(false)
+  // Раскрытие при монтировании: состояние сразу открытое, но список показывается
+  // только на клиенте - серверная разметка и гидратация не меняются.
+  const mounted = useMounted()
+  const [openState, setOpen] = useState(() => Boolean(props.defaultOpen && !props.disabled))
+  const open = openState && mounted
   const [query, setQuery] = useState('')
-  const [activeIndex, setActiveIndex] = useState(-1)
+  const [activeIndex, setActiveIndex] = useState(() => (openState ? initialActive() : -1))
   const triggerRef = useRef<HTMLButtonElement | null>(null)
   const wrapRef = useRef<HTMLDivElement | null>(null)
   const popRef = useRef<HTMLDivElement | null>(null)

package/src/components/Thumbnail.tsx

@@ -0,0 +1,244 @@
+'use client'
+
+import { ImageOff } from 'lucide-react'
+import { useCallback, useState, type CSSProperties, type ReactNode } from 'react'
+import { cx } from '../lib/cx'
+import { useMessages } from '../lib/i18n'
+import { Lightbox, type LightboxImage } from './Lightbox'
+
+/*
+ * Миниатюра изображения: кадр с заданными пропорциями (обрезка cover или
+ * вписывание contain), подпись снизу, значок поверх (например «видео»),
+ * состояния загрузки и ошибки. С onClick кадр - кнопка. ThumbnailGrid -
+ * сетка превью с переходом в Lightbox по индексу.
+ */
+
+/** Пропорции кадра: число (ширина / высота) или строка CSS aspect-ratio ('4/3', '16/9'). */
+export type ThumbnailAspect = number | string
+
+export interface ThumbnailProps {
+  src: string
+  /** Описание для скринридера; '' - декоративное изображение. */
+  alt: string
+  /** Подпись под кадром. */
+  caption?: ReactNode
+  /** Пропорции кадра (по умолчанию 4/3). */
+  aspect?: ThumbnailAspect
+  /** cover - обрезать по кадру (по умолчанию), contain - вписать целиком. */
+  fit?: 'cover' | 'contain'
+  /** Значок в углу кадра: «видео», «3 стр.». */
+  badge?: ReactNode
+  /** Знак по центру кадра, например иконка воспроизведения у видео. */
+  overlay?: ReactNode
+  /** Кадр ещё готовится снаружи (загрузка файла, обработка): скелетон поверх. */
+  loading?: boolean
+  onClick?: () => void
+  /** Подпись кнопки, если отличается от alt. */
+  'aria-label'?: string
+  /** Ширина миниатюры (по умолчанию 100% контейнера). */
+  width?: number | string
+  className?: string
+}
+
+type LoadState = 'loading' | 'loaded' | 'error'
+
+function aspectValue(aspect: ThumbnailAspect): string {
+  return typeof aspect === 'number' ? String(aspect) : aspect
+}
+
+/**
+ * Состояние загрузки по src: смена адреса - снова загрузка, без сброса в эффекте.
+ * Ref-callback ловит снимки, загруженные до гидратации (их onLoad React не видит).
+ */
+function useImageState(src: string): [LoadState, (next: LoadState) => void, (img: HTMLImageElement | null) => void] {
+  const [state, setState] = useState<{ src: string; value: LoadState } | null>(null)
+  const value: LoadState = state?.src === src ? state.value : 'loading'
+  const settle = useCallback((next: LoadState) => setState({ src, value: next }), [src])
+  const watch = useCallback(
+    (img: HTMLImageElement | null) => {
+      if (img?.complete) settle(img.naturalWidth > 0 ? 'loaded' : 'error')
+    },
+    [settle],
+  )
+  return [value, settle, watch]
+}
+
+export function Thumbnail({
+  src,
+  alt,
+  caption,
+  aspect = '4/3',
+  fit = 'cover',
+  badge,
+  overlay,
+  loading = false,
+  onClick,
+  'aria-label': ariaLabel,
+  width,
+  className,
+}: ThumbnailProps) {
+  const t = useMessages()
+  const [loadState, settle, watchImage] = useImageState(src)
+  const state: LoadState = loading ? 'loading' : loadState
+  const style = { '--ev-thumb-aspect': aspectValue(aspect), width } as CSSProperties
+
+  const frame = (
+    <>
+      {/* eslint-disable-next-line @next/next/no-img-element */}
+      <img
+        ref={watchImage}
+        className="ev-thumb-img"
+        src={src}
+        alt={alt}
+        loading="lazy"
+        decoding="async"
+        draggable={false}
+        onLoad={() => settle('loaded')}
+        onError={() => settle('error')}
+      />
+      {state === 'loading' ? <span className="ev-thumb-skeleton" aria-hidden="true" /> : null}
+      {state === 'error' ? (
+        <span className="ev-thumb-error">
+          <ImageOff size={20} aria-hidden="true" />
+          <span>{t.thumbnail.error}</span>
+        </span>
+      ) : null}
+      {overlay && state === 'loaded' ? (
+        <span className="ev-thumb-overlay" aria-hidden="true">
+          {overlay}
+        </span>
+      ) : null}
+      {badge ? <span className="ev-thumb-badge">{badge}</span> : null}
+    </>
+  )
+
+  return (
+    <figure className={cx('ev-thumb', className)} data-state={state} data-fit={fit} style={style}>
+      {onClick ? (
+        <button
+          type="button"
+          className="ev-thumb-frame"
+          aria-label={ariaLabel ?? (alt || undefined)}
+          aria-busy={state === 'loading' || undefined}
+          onClick={onClick}
+        >
+          {frame}
+        </button>
+      ) : (
+        <div className="ev-thumb-frame" aria-busy={state === 'loading' || undefined}>
+          {frame}
+        </div>
+      )}
+      {caption ? <figcaption className="ev-thumb-caption">{caption}</figcaption> : null}
+    </figure>
+  )
+}
+
+export interface ThumbnailGridItem {
+  /** Ключ элемента; по умолчанию - src. */
+  key?: string
+  /** Превью. */
+  src: string
+  alt: string
+  caption?: ReactNode
+  badge?: ReactNode
+  overlay?: ReactNode
+  loading?: boolean
+  /** Полный снимок для Lightbox (по умолчанию src). */
+  fullSrc?: string
+  /** Имя файла в Lightbox и при скачивании. */
+  name?: string
+  downloadUrl?: string
+  /** Своё действие вместо Lightbox (например видео); такой элемент в Lightbox не попадает. */
+  onClick?: () => void
+}
+
+export interface ThumbnailGridProps {
+  items: ThumbnailGridItem[]
+  aspect?: ThumbnailAspect
+  fit?: 'cover' | 'contain'
+  /** Минимальная ширина колонки, px (по умолчанию 140): колонок столько, сколько помещается. */
+  minWidth?: number
+  /** Просмотр в Lightbox по нажатию (по умолчанию да). */
+  lightbox?: boolean
+  /** Нажатие на элемент (вызывается и при открытии Lightbox). */
+  onItemClick?: (index: number) => void
+  /** Lightbox: с последнего снимка - на первый и обратно. */
+  loop?: boolean
+  /** Lightbox: кнопка скачивания (по умолчанию да). */
+  download?: boolean
+  'aria-label'?: string
+  className?: string
+}
+
+/** Сетка превью: колонки по ширине контейнера, просмотр в Lightbox. */
+export function ThumbnailGrid({
+  items,
+  aspect,
+  fit,
+  minWidth = 140,
+  lightbox = true,
+  onItemClick,
+  loop,
+  download,
+  'aria-label': ariaLabel,
+  className,
+}: ThumbnailGridProps) {
+  const [viewing, setViewing] = useState<number | null>(null)
+  // В Lightbox - только элементы без своего действия; номер элемента сетки -> номер снимка.
+  const shots: LightboxImage[] = []
+  const shotIndex = items.map((it) => {
+    if (it.onClick) return -1
+    shots.push({ src: it.fullSrc ?? it.src, alt: it.alt, name: it.name, downloadUrl: it.downloadUrl })
+    return shots.length - 1
+  })
+  const clickable = lightbox || Boolean(onItemClick)
+
+  return (
+    <>
+      <ul
+        role="list"
+        aria-label={ariaLabel}
+        className={cx('ev-thumb-grid', className)}
+        style={{ '--ev-thumb-min': `${minWidth}px` } as CSSProperties}
+      >
+        {items.map((it, i) => {
+          const shot = shotIndex[i] ?? -1
+          const open =
+            it.onClick ?? (clickable
+              ? () => {
+                  onItemClick?.(i)
+                  if (lightbox && shot >= 0) setViewing(shot)
+                }
+              : undefined)
+          return (
+            <li key={it.key ?? it.src}>
+              <Thumbnail
+                src={it.src}
+                alt={it.alt}
+                caption={it.caption}
+                badge={it.badge}
+                overlay={it.overlay}
+                loading={it.loading}
+                aspect={aspect}
+                fit={fit}
+                onClick={open}
+              />
+            </li>
+          )
+        })}
+      </ul>
+      {lightbox && shots.length > 0 ? (
+        <Lightbox
+          images={shots}
+          open={viewing !== null}
+          onClose={() => setViewing(null)}
+          index={viewing ?? 0}
+          onIndexChange={setViewing}
+          loop={loop}
+          download={download}
+        />
+      ) : null}
+    </>
+  )
+}

package/src/index.ts

@@ -250,6 +250,12 @@ export { checkedIds, checkedLeafSet, flattenVisibleTree, indexTree, toggleTreeCh
 export { Slider, type SliderProps, type SliderMark, type SliderRange } from './components/Slider'
 export { Chip, ChipGroup, type ChipProps, type ChipGroupProps } from './components/Chip'
 export { TagInput, type TagInputProps } from './components/TagInput'
+export {
+  Autocomplete,
+  filterAutocomplete,
+  type AutocompleteProps,
+  type AutocompleteSuggestion,
+} from './components/Autocomplete'
 export { OtpInput, type OtpInputProps, type OtpMode } from './components/OtpInput'
 export { InlineEdit, type InlineEditProps } from './components/InlineEdit'
 
@@ -281,6 +287,7 @@ export {
   type CompletenessBadgeProps,
   type CompletenessField,
   type CompletenessExpiringItem,
+  type CompletenessItem,
   type CompletenessSeverity,
   type CompletenessTone,
 } from './components/CompletenessBadge'
@@ -386,4 +393,12 @@ export {
   type NotificationListProps,
 } from './components/NotificationCenter'
 export { Lightbox, type LightboxImage, type LightboxProps } from './components/Lightbox'
+export {
+  Thumbnail,
+  ThumbnailGrid,
+  type ThumbnailAspect,
+  type ThumbnailGridItem,
+  type ThumbnailGridProps,
+  type ThumbnailProps,
+} from './components/Thumbnail'
 export { ConnectionStatus, type ConnectionState, type ConnectionStatusProps } from './components/ConnectionStatus'

package/src/lib/i18n-messages.ts

@@ -241,6 +241,11 @@ export interface Messages {
     missing: (n: number) => string
     missingTitle: string
     expiring: string
+    expired: string
+    blockingTitle: string
+  }
+  thumbnail: {
+    error: string
   }
   badgeStack: {
     more: (n: number) => string
@@ -607,6 +612,11 @@ export const ru: Messages = {
     missing: (n) => `Не заполнено: ${n}`,
     missingTitle: 'Не заполнено',
     expiring: 'Истекает срок',
+    expired: 'Просрочено',
+    blockingTitle: 'Блокирует выпуск',
+  },
+  thumbnail: {
+    error: 'Не удалось загрузить',
   },
   badgeStack: {
     more: (n) => `Ещё ${n}`,
@@ -959,6 +969,11 @@ export const en: Messages = {
     missing: (n) => `${n} missing`,
     missingTitle: 'Missing',
     expiring: 'Expiring soon',
+    expired: 'Expired',
+    blockingTitle: 'Blocking',
+  },
+  thumbnail: {
+    error: 'Couldn’t load',
   },
   badgeStack: {
     more: (n) => `${n} more`,