fix(ui): выровнять KPI IconTile chrome и доступность

Переименовать KpiStats, добавить skip-link и IconTile в kit.

Co-authored-by: Cursor <[email protected]>

apps/web/src/components/cert-kpi-stats.tsx

@@ -25,7 +25,7 @@ function totalFromSummary(summary: [string, number][] | undefined): number {
   return summary.reduce((sum, [, count]) => sum + count, 0)
 }
 
-interface CertKpiCardsProps {
+interface CertKpiStatsProps {
   summary?: [string, number][]
   total?: number
   activeTab: string
@@ -34,13 +34,13 @@ interface CertKpiCardsProps {
 }
 
 /** KPI strip — ReUI PRO [stats-12](https://reui.io/preview/base/stats-12) */
-export function CertKpiCards({
+export function CertKpiStats({
   summary,
   total,
   activeTab,
   isLoading,
   onSelectTab,
-}: CertKpiCardsProps) {
+}: CertKpiStatsProps) {
   const cards = useMemo<KpiStatCard[]>(() => {
     const allCount = total ?? totalFromSummary(summary)
     const okCount = countFromSummary(summary, ACTIVE_STATUSES)

apps/web/src/components/domain-kpi-stats.tsx

@@ -8,7 +8,7 @@ import {
 import { KpiStatGrid, type KpiStatCard } from '@/components/reui-kit/kpi-stat-grid'
 import type { DomainListItem } from '@/lib/schemas'
 
-interface DomainKpiCardsProps {
+interface DomainKpiStatsProps {
   domains: DomainListItem[] | undefined
   activeTab: string
   isLoading?: boolean
@@ -16,12 +16,12 @@ interface DomainKpiCardsProps {
 }
 
 /** KPI strip — ReUI PRO [stats-12](https://reui.io/preview/base/stats-12) */
-export function DomainKpiCards({
+export function DomainKpiStats({
   domains,
   activeTab,
   isLoading,
   onSelectTab,
-}: DomainKpiCardsProps) {
+}: DomainKpiStatsProps) {
   const cards = useMemo<KpiStatCard[]>(() => {
     const list = domains ?? []
     const withoutGroup = list.filter((d) => d.group_id == null).length

apps/web/src/components/empty-state.tsx

@@ -27,8 +27,8 @@ interface EmptyStateProps {
 }
 
 /**
- * ReUI Empty + IconStack — adapted from empty-state-12.
- * @see https://reui.io/preview/base/empty-state-12
+ * ReUI Empty + IconStack — Frame-friendly empty-state-14 / empty-state-12.
+ * Preview: https://reui.io/preview/base/empty-state-14 · https://reui.io/preview/base/empty-state-12
  */
 export function EmptyState({
   icon: Icon = InboxIcon,

apps/web/src/components/group-kpi-stats.tsx

@@ -3,7 +3,7 @@ import { FolderOpenIcon, FolderTreeIcon, FoldersIcon } from 'lucide-react'
 import { KpiStatGrid, type KpiStatCard } from '@/components/reui-kit/kpi-stat-grid'
 import type { GroupCatalogRow } from '@/components/columns/groups-columns'
 
-interface GroupKpiCardsProps {
+interface GroupKpiStatsProps {
   rows: GroupCatalogRow[]
   activeTab: string
   isLoading?: boolean
@@ -11,12 +11,12 @@ interface GroupKpiCardsProps {
 }
 
 /** KPI strip — ReUI PRO [stats-12](https://reui.io/preview/base/stats-12) */
-export function GroupKpiCards({
+export function GroupKpiStats({
   rows,
   activeTab,
   isLoading,
   onSelectTab,
-}: GroupKpiCardsProps) {
+}: GroupKpiStatsProps) {
   const cards = useMemo<KpiStatCard[]>(() => {
     const withDomains = rows.filter((r) => r.domainCount > 0).length
     const empty = rows.filter((r) => r.domainCount === 0).length

apps/web/src/components/layout/app-shell.tsx

@@ -4,6 +4,7 @@ import { SiteHeader } from '@/components/layout/site-header'
 import { SearchMenu } from '@/components/layout/search-menu'
 import { TooltipProvider } from '@cfdm/ui/components/tooltip'
 import { SidebarInset, SidebarProvider } from '@cfdm/ui/components/sidebar'
+import { SKIP_TO_CONTENT_CLASS } from '@/lib/ui-surface'
 
 /** Shared ops chrome — etalon EvoBGP. @see docs/ui-design-contract.md */
 export function AppShell({ children }: { children: ReactNode }) {
@@ -16,12 +17,15 @@ export function AppShell({ children }: { children: ReactNode }) {
           } as CSSProperties
         }
       >
+        <a href="#main-content" className={SKIP_TO_CONTENT_CLASS}>
+          К содержимому
+        </a>
         <AppSidebar />
-        <SidebarInset>
+        <SidebarInset id="main-content">
           <SiteHeader />
-          <main className="flex flex-1 flex-col gap-4 px-4 py-4 md:gap-6 md:px-6 md:py-5">
+          <div className="flex flex-1 flex-col gap-4 px-4 py-4 md:gap-6 md:px-6 md:py-5">
             {children}
-          </main>
+          </div>
         </SidebarInset>
         <SearchMenu hotkeyOnly />
       </SidebarProvider>

apps/web/src/components/query-state.tsx

@@ -35,7 +35,11 @@ export function QueryState({
   children,
 }: QueryStateProps) {
   if (isLoading) {
-    return skeleton ?? <DefaultSkeleton />
+    return (
+      <div role="status" aria-live="polite" aria-busy="true">
+        {skeleton ?? <DefaultSkeleton />}
+      </div>
+    )
   }
 
   if (isError) {

apps/web/src/components/reui-kit/kpi-stat-grid.tsx

@@ -5,7 +5,7 @@ import { Frame, FramePanel } from '@/components/reui/frame'
 import { Badge } from '@/components/reui/badge'
 import { cn } from '@cfdm/ui/lib/utils'
 import { kpiCols } from './kpi-cols'
-import { Item, ItemMedia } from '@cfdm/ui/components/item'
+import { IconTile } from '@/components/reui/icon-tile'
 import { Skeleton } from '@cfdm/ui/components/skeleton'
 
 export type KpiStatVariant = 'default' | 'warning' | 'destructive'
@@ -83,16 +83,13 @@ function KpiStatCardBody({ item }: { item: KpiStatItem }) {
   return (
     <div className="relative z-10 flex h-full items-start gap-3">
       {item.icon ? (
-        <Item
-          className={cn(
-            'border-background bg-muted flex size-10.5 shrink-0 items-center justify-center border-2 p-0 shadow-[0_1px_3px_0_rgba(0,0,0,0.14)] dark:border [&_svg]:size-4',
-            item.iconClassName ?? DEFAULT_ICON_CLASS,
-          )}
+        <IconTile
+          variant="elevated"
+          aria-hidden="true"
+          className={cn('size-10.5', item.iconClassName ?? DEFAULT_ICON_CLASS)}
         >
-          <ItemMedia variant="icon" className="size-auto">
-            {item.icon}
-          </ItemMedia>
-        </Item>
+          {item.icon}
+        </IconTile>
       ) : null}
 
       <div className="flex min-w-0 flex-1 flex-col gap-0.5">

apps/web/src/components/reui-kit/quick-action-grid.tsx

@@ -8,7 +8,7 @@ import {
   FrameTitle,
 } from '@/components/reui/frame'
 import { Badge } from '@/components/reui/badge'
-import { Item, ItemMedia } from '@cfdm/ui/components/item'
+import { IconTile } from '@/components/reui/icon-tile'
 import { cn } from '@cfdm/ui/lib/utils'
 import { kpiCols } from './kpi-cols'
 
@@ -35,16 +35,13 @@ function QuickActionBody({ action }: { action: QuickActionItem }) {
   return (
     <div className="relative z-10 flex h-full items-start gap-3">
       {action.icon ? (
-        <Item
-          className={cn(
-            'border-background bg-muted flex size-10.5 shrink-0 items-center justify-center border-2 p-0 shadow-[0_1px_3px_0_rgba(0,0,0,0.14)] dark:border [&_svg]:size-4',
-            action.iconClassName ?? DEFAULT_ICON_CLASS,
-          )}
+        <IconTile
+          variant="elevated"
+          aria-hidden="true"
+          className={cn('size-10.5', action.iconClassName ?? DEFAULT_ICON_CLASS)}
         >
-          <ItemMedia variant="icon" className="size-auto">
-            {action.icon}
-          </ItemMedia>
-        </Item>
+          {action.icon}
+        </IconTile>
       ) : null}
 
       <div className="flex min-w-0 flex-1 flex-col gap-0.5">

apps/web/src/components/reui/icon-tile.tsx

@@ -0,0 +1,125 @@
+import { mergeProps } from "@base-ui/react/merge-props"
+import { useRender } from "@base-ui/react/use-render"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@cfdm/ui/lib/utils"
+
+/**
+ * CSS variable architecture:
+ *
+ * The root owns four variables so every part of the tile stays in proportion
+ * and stays overridable from a single `className`:
+ *
+ *   --icon-tile-size       tile width/height
+ *   --icon-tile-icon-size  glyph size applied to child svgs
+ *   --icon-tile-radius     corner radius (also drives the nested inner card)
+ *   --icon-tile-inset      gap between the outer ring and the inner card
+ *
+ * The `frame` and `soft` variants paint their inner card with an `::after`
+ * pseudo element instead of a wrapper node. `isolate` makes the root a stacking
+ * context, so the negative z-index pseudo paints above the root background but
+ * below the in-flow icon - no extra DOM, and `render` composition keeps working.
+ *
+ * Tone: `soft` and `solid` derive every fill and border from `currentColor`, so
+ * a single text color class (e.g. `text-success`) retints the whole tile. They
+ * default to `text-primary`; override it to recolor without touching internals.
+ */
+const iconTileVariants = cva(
+  [
+    "relative inline-flex shrink-0 items-center justify-center align-middle",
+    "size-(--icon-tile-size) rounded-(--icon-tile-radius)",
+    "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-(--icon-tile-icon-size)",
+  ],
+  {
+    variants: {
+      variant: {
+        /** Plain bordered surface. The quiet default for list rows and toolbars. */
+        outline: "border border-border bg-background dark:bg-input/32",
+        /** Raised muted fill with a background-colored ring. Reads as a physical chip. */
+        elevated:
+          "border-2 border-background bg-muted text-accent-foreground shadow-[0_1px_3px_0_rgb(0_0_0/0.14)] dark:border",
+        /**
+         * Tinted double container: an opacity-filled outer ring with no border
+         * around a bordered inner card, all derived from `currentColor`. The
+         * quiet, colorful sibling of `frame`. Retint with a text color class.
+         */
+        soft: [
+          "isolate p-(--icon-tile-inset) text-primary bg-current/10",
+          "after:absolute after:-z-10 after:inset-(--icon-tile-inset)",
+          "after:rounded-[calc(var(--icon-tile-radius)-var(--icon-tile-inset))]",
+          "after:border after:border-current/20 after:bg-current/5",
+        ],
+        /** Filled tone with a contrasting glyph. Retint with `bg-*` + a text color. */
+        solid: "bg-primary text-primary-foreground",
+        /** Double container - a muted ring around an inset card, matching Frame. */
+        frame: [
+          "isolate border border-border bg-muted/50 p-(--icon-tile-inset)",
+          "after:absolute after:-z-10 after:inset-(--icon-tile-inset)",
+          "after:rounded-[calc(var(--icon-tile-radius)-var(--icon-tile-inset))]",
+          "after:border after:border-border after:bg-card after:shadow-xs",
+        ],
+      },
+      size: {
+        xs: "[--icon-tile-size:--spacing(6)] [--icon-tile-icon-size:--spacing(3.5)] [--icon-tile-inset:--spacing(0.5)]",
+        sm: "[--icon-tile-size:--spacing(8)] [--icon-tile-icon-size:--spacing(4)] [--icon-tile-inset:--spacing(0.5)]",
+        default:
+          "[--icon-tile-size:--spacing(10)] [--icon-tile-icon-size:--spacing(4.5)] [--icon-tile-inset:--spacing(0.75)]",
+        lg: "[--icon-tile-size:--spacing(12)] [--icon-tile-icon-size:--spacing(5.5)] [--icon-tile-inset:--spacing(0.75)]",
+        xl: "[--icon-tile-size:--spacing(14)] [--icon-tile-icon-size:--spacing(7)] [--icon-tile-inset:--spacing(1)]",
+      },
+      /**
+       * `default`: active style radius. `full`: circular.
+       * The plain value is the fallback outside a style scope; the `style-*`
+       * tokens win by specificity inside one, and survive the registry
+       * transform as the single resolved value per generated style.
+       *
+       * Each style token is clamped to a fraction of the tile. A flat radius
+       * is a circle once it reaches half the box, so the soft styles used to
+       * render `xs` (24px) and `sm` (32px) as plain circles and swallow the
+       * `full` variant's meaning. Clamping keeps one corner ratio at every
+       * size instead, so a tile still reads as the same shape when it scales.
+       * Luma and Rhea take the gentler quarter ratio; Maia stays at a third.
+       */
+      radius: {
+        default:
+          "[--icon-tile-radius:min(var(--radius-md),calc(var(--icon-tile-size)/3))] [--icon-tile-radius:min(var(--radius-md),calc(var(--icon-tile-size)/3))]",
+        full: "[--icon-tile-radius:calc(infinity*1px)]",
+      },
+    },
+    defaultVariants: {
+      variant: "outline",
+      size: "default",
+      radius: "default",
+    },
+  }
+)
+
+interface IconTileProps extends useRender.ComponentProps<"span"> {
+  variant?: VariantProps<typeof iconTileVariants>["variant"]
+  size?: VariantProps<typeof iconTileVariants>["size"]
+  radius?: VariantProps<typeof iconTileVariants>["radius"]
+}
+
+function IconTile({
+  className,
+  variant = "outline",
+  size = "default",
+  radius = "default",
+  render,
+  ...props
+}: IconTileProps) {
+  const defaultProps = {
+    "data-slot": "icon-tile",
+    "data-variant": variant,
+    "data-size": size,
+    className: cn(iconTileVariants({ variant, size, radius, className })),
+  }
+
+  return useRender({
+    defaultTagName: "span",
+    render,
+    props: mergeProps<"span">(defaultProps, props),
+  })
+}
+
+export { IconTile, iconTileVariants, type IconTileProps }

apps/web/src/components/service-kpi-stats.tsx

@@ -8,7 +8,7 @@ import {
 import { KpiStatGrid, type KpiStatCard } from '@/components/reui-kit/kpi-stat-grid'
 import type { ServiceCatalogRow } from '@/components/columns/services-columns'
 
-interface ServiceKpiCardsProps {
+interface ServiceKpiStatsProps {
   rows: ServiceCatalogRow[]
   activeTab: string
   isLoading?: boolean
@@ -16,12 +16,12 @@ interface ServiceKpiCardsProps {
 }
 
 /** KPI strip — ReUI PRO [stats-12](https://reui.io/preview/base/stats-12) */
-export function ServiceKpiCards({
+export function ServiceKpiStats({
   rows,
   activeTab,
   isLoading,
   onSelectTab,
-}: ServiceKpiCardsProps) {
+}: ServiceKpiStatsProps) {
   const cards = useMemo<KpiStatCard[]>(() => {
     const enabled = rows.filter((r) => r.enabled).length
     const disabled = rows.filter((r) => !r.enabled).length