artefact-design-system 0.2.0 → 0.3.0

package/context/COMPONENTS.md

@@ -48,7 +48,7 @@
 - `[data-slot="button"]`/`[data-slot="input"]`/`[data-slot="select-trigger"]` — высота/радиус пересчитаны в `brand-overrides.css` (см. `DESIGN.md` → Components).
 - Если конкретному месту нужно другое поведение (например, `Select`, который умеет очищаться крестиком) — это уже не «просто shadcn Select», это новый Components-тир композит (см. `FilterSelect` ниже), а не проп на самом `Select`.
 
-**⚠️ `Sparkline`/`ScoreRing` — не компоненты.** Демонстрационный код в `src/stories/Chart.stories.tsx` показывает, что Recharts+`ChartContainer` покрывает то, что раньше было кастомным SVG (mini-график, круговой индикатор прогресса). Ничего не экспортируется — если понадобится настоящий спарклайн-компонент, его нужно сначала выделить в реальный файл.
+`recharts` — реальная, объявленная зависимость этого пакета (не только внутренняя деталь реализации чартов ниже). Если для какой-то задачи не хватает ни одного из готовых чарт-компонентов — можно писать напрямую на `recharts`, но объявляй его явной зависимостью в своём `package.json`, не рассчитывай, что он долетит транзитивно через хойстинг node_modules (он долетает сегодня, но это случайность конкретного дерева зависимостей, не гарантия).
 
 ## Components
 
@@ -68,7 +68,11 @@ Primitives + Foundation, собранные в конкретную повтор
 | `Search` | `placeholder?, value?, onChange?, className?` | `InputGroup` (shadcn) + `Icon` как leading addon. Всегда для полей поиска — не собирай Input + абсолютно-позиционированную иконку вручную. |
 | `BarChart` / `LineChart` / `AreaChart` | `data, xKey, series: {key,label,color}[], height?, showLegend?` (+`stacked?` у Area) | Настоящий Recharts через shadcn's `ChartContainer`. `showLegend` по умолчанию `series.length > 1`. Grid/оси — `color.input`, никогда `color.border` (тот прозрачный по правилу). |
 | `DonutChart` | `data: {key,label,value,color}[], height?, showLegend?` | Категориальная разбивка (Pie, `innerRadius:"60%"`). |
-| `DistributionChart` | `groups: {name,total,segments:{label,count,widthPct}[]}[], rowHeight?` | Горизонтальный stacked-bar на группу; если сегменты не сумма в 100% — остаток дорисовывается приглушённым `rest`. Заменил старый самописный `SegmentedBar` (визуально выглядел дешевле настоящих чартов). |
+| `DistributionChart` | `groups: {name,total,segments:{label,count,widthPct}[]}[], rowHeight?` | Горизонтальный stacked-bar на группу; если сегменты не сумма в 100% — остаток дорисовывается приглушённым `rest`. |
+| `ScatterChart` | `series: {key,label,color,data:{x,y}[]}[], xLabel?, yLabel?, height?, showLegend?` | Корреляция двух числовых величин, опционально по нескольким сериям. |
+| `RadialChart` | `value(0–100), color, trackColor?, size?, label?` | Круговой гейдж. Это и есть формализованный «ScoreRing» — раньше пересобирался с нуля на каждом новом экране (в исходной странице, в Storybook-демо, в тестовой consumer-сессии) вместо того, чтобы быть готовым компонентом. |
+| `ComposedChart` | `data, xKey, series: {key,label,color,type:"bar"\|"line"\|"area",axis?:"left"\|"right"}[], height?, showLegend?` | Смешивает типы серий на одном графике (например, объём как бары + тренд как линия). **`axis:"right"` — не опционально-декоративное**: если серии на сильно разных масштабах (штуки 0–60 и оценка 0–10), на общей оси меньшая серия визуально сплющивается в почти прямую линию — заметно прямо на демо-данных этого компонента. |
+| `Sparkline` | `data: number[], color, width?, height?, showEndDot?` | Мини-линия тренда внутри строки/карточки (не полноценный `LineChart` — без осей/сетки/тултипа, фиксированный размер). Формализует паттерн, который до этого просто копипастили руками на каждом новом экране (в т.ч. в оригинальной странице-источнике и в тестовой consumer-сессии) — теперь настоящий экспорт, не «собери сам». **Без `ResponsiveContainer` намеренно** — процентный размер внутри auto-height Grid/Flex-строки не на что мерить, это реальный, воспроизводимый баг Recharts, не связанный с `Foundation/Grid` (был неверно приписан ему в одной из тестовых сессий). |
 
 ### shadcn/vendored, но на уровне Components (не Primitives)
 

package/context/DESIGN.md

@@ -191,7 +191,8 @@ components:
   - `foreground` подобран по **измеренному** WCAG-контрасту, не по предположению «всегда белый» (у `warn` это тёмный ink, а не белый — белый давал хуже контраст).
   - `hover` всегда через `color-mix()` от `base` — пересчитывается сам, никогда не второй захардкоженный hex, который может разойтись с базой.
   - `soft`/`soft-foreground` — бледная плашка-беджик (светлый фон + текст цветом базы).
-- **`danger` (красный) — осознанное расширение палитры.** Подобран так, чтобы читаться как отдельный цвет, а не «грустный оранжевый» (другой тон и насыщенность, приземлённая к семье `accent/green/warn`, а не к выбивающейся насыщенности `accent`).
+- **`plum` — роль-тинт для сетевого управляющего/точки, не «ещё один статус».** Это не про хорошо/плохо (как `green`/`warn`/`danger`) — это про РОЛЬ человека в структуре (управляющий сетью/точкой), визуально отличную от рядового сотрудника. Если строишь карточку/бейдж для такой роли — бери `plum`, не `muted`: без этого указания легко не узнать, что токен вообще существует, и взять нейтральный цвет там, где задумано различие.
+- **`danger` (красный) — для разрушительных действий и критических состояний, не для «просто плохой метрики».** Подобран так, чтобы читаться как отдельный цвет, а не «грустный оранжевый» (другой тон и насыщенность, приземлённая к семье `accent/green/warn`, а не к выбивающейся насыщенности `accent`). Но это не значит, что любой падающий показатель должен быть красным: обычная бизнес-метрика, которая просела за неделю (продажи, конверсия, чек) — это `accent` (та же роль, что и у CTA — «требует внимания»), не `danger`. `danger` — для реально разрушительных/подтверждающих-удаление действий и жёстких ошибок, где перепутать со «стандартным вниманием» было бы неверно считать некритичным.
 - **Единственный градиент во всей системе** — `components.assistant-dock-btn` (кнопка AI-ассистента). Живёт в `components`, не в `colors` — градиент не проходит как CSS-цвет (см. `Do's and Don'ts`). Не заводи второй градиент без такой же осознанной причины — иначе это быстро превращается в декоративный шум.
 - **`scrim` — тёмная подложка низкой прозрачности позади тяжёлого блюра** (панель ассистента). Отличается от `card` (светлое стекло) — не путать.
 - **`border: transparent` — правило, не забытое значение.** Разделение поверхностей — прозрачностью/тенью фона, а не рамкой. Если разделитель реально нужен видимым (инпут, `<hr>`-подобный разделитель) — используй `input` (единственный «настоящий» hairline-токен), никогда не включай `border` обратно.

package/dist/index.d.ts

@@ -758,6 +758,22 @@ type AreaChartProps = {
 };
 declare function AreaChart({ data, xKey, series, height, showLegend, stacked }: AreaChartProps): React$1.JSX.Element;
 
+type ComposedSeries = {
+    key: string;
+    label: string;
+    color: string;
+    type: "bar" | "line" | "area";
+    axis?: "left" | "right";
+};
+type ComposedChartProps = {
+    data: Record<string, unknown>[];
+    xKey: string;
+    series: ComposedSeries[];
+    height?: number;
+    showLegend?: boolean;
+};
+declare function ComposedChart({ data, xKey, series, height, showLegend }: ComposedChartProps): React$1.JSX.Element;
+
 type DistributionSegment = {
     label: string;
     count: string;
@@ -797,6 +813,47 @@ type LineChartProps = {
 };
 declare function LineChart({ data, xKey, series, height, showLegend }: LineChartProps): React$1.JSX.Element;
 
+type RadialChartProps = {
+    /** 0–100 */
+    value: number;
+    color: string;
+    /** track color behind the filled arc; defaults to the muted token */
+    trackColor?: string;
+    size?: number;
+    /** centered content, e.g. the numeric score itself */
+    label?: ReactNode;
+};
+declare function RadialChart({ value, color: fillColor, trackColor, size, label }: RadialChartProps): React$1.JSX.Element;
+
+type ScatterPoint = {
+    x: number;
+    y: number;
+};
+type ScatterSeries = {
+    key: string;
+    label: string;
+    color: string;
+    data: ScatterPoint[];
+};
+type ScatterChartProps = {
+    series: ScatterSeries[];
+    xLabel?: string;
+    yLabel?: string;
+    height?: number;
+    showLegend?: boolean;
+};
+declare function ScatterChart({ series, xLabel, yLabel, height, showLegend }: ScatterChartProps): React$1.JSX.Element;
+
+type SparklineProps = {
+    data: number[];
+    color: string;
+    width?: number;
+    height?: number;
+    /** dot on the last point only, matching the source's own "value + trend" reading — not one dot per point */
+    showEndDot?: boolean;
+};
+declare function Sparkline({ data, color, width, height, showEndDot }: SparklineProps): React$1.JSX.Element;
+
 type ChipQuestion = {
     question: string;
     answer: ReactNode;
@@ -831,4 +888,4 @@ type SidebarNavProps = {
 };
 declare function SidebarNav({ active, items, avatarInitials, avatarTitle, showSettings, clientLabel, clientInitial, }: SidebarNavProps): React$1.JSX.Element;
 
-export { AdviceCard, type AdviceCardProps, Alert, AlertAction, AlertDescription, AlertTitle, AppShell, AreaChart, type AreaChartProps, AssistantDock, type AssistantDockProps, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, BarChart, type BarChartProps, Box, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, type ChartSeries, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, Chip, type ChipQuestion, Container, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DistributionChart, type DistributionGroup, type DistributionSegment, DonutChart, type DonutChartProps, type DonutSlice, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EXAMPLE_NAV_ITEMS, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, FilterSelect, type FilterSelectProps, Flex, FormField, Grid, ICON_NAMES, Icon, type IconName, type IconProps, Image, type ImageProps, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, Label, LineChart, type LineChartProps, MessageBubble, type NavItem, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Progress, RadioGroup, RadioGroupItem, SURFACE_VARIANTS, Search, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, SidebarNav, type SidebarNavProps, type SpacingKey, Spinner, Stack, Surface, type SurfaceProps, type SurfaceVariant, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Text, type TextProps, Textarea, TitledRow, type TitledRowProps, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Toolbar, ToolbarButton, ToolbarGroup, ToolbarSeparator, ToolbarToggleGroup, ToolbarToggleItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type TypeKey, TypingIndicator, badgeVariants, buttonGroupVariants, buttonVariants, chartKeys, cn, color, font, navigationMenuTriggerStyle, radius, semanticRoles, spacing, tabsListVariants, toggleVariants, type };
+export { AdviceCard, type AdviceCardProps, Alert, AlertAction, AlertDescription, AlertTitle, AppShell, AreaChart, type AreaChartProps, AssistantDock, type AssistantDockProps, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, BarChart, type BarChartProps, Box, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, type ChartSeries, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, Chip, type ChipQuestion, ComposedChart, type ComposedChartProps, type ComposedSeries, Container, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DistributionChart, type DistributionGroup, type DistributionSegment, DonutChart, type DonutChartProps, type DonutSlice, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EXAMPLE_NAV_ITEMS, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, FilterSelect, type FilterSelectProps, Flex, FormField, Grid, ICON_NAMES, Icon, type IconName, type IconProps, Image, type ImageProps, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, Label, LineChart, type LineChartProps, MessageBubble, type NavItem, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Progress, RadialChart, type RadialChartProps, RadioGroup, RadioGroupItem, SURFACE_VARIANTS, ScatterChart, type ScatterChartProps, type ScatterPoint, type ScatterSeries, Search, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, SidebarNav, type SidebarNavProps, type SpacingKey, Sparkline, type SparklineProps, Spinner, Stack, Surface, type SurfaceProps, type SurfaceVariant, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Text, type TextProps, Textarea, TitledRow, type TitledRowProps, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Toolbar, ToolbarButton, ToolbarGroup, ToolbarSeparator, ToolbarToggleGroup, ToolbarToggleItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type TypeKey, TypingIndicator, badgeVariants, buttonGroupVariants, buttonVariants, chartKeys, cn, color, font, navigationMenuTriggerStyle, radius, semanticRoles, spacing, tabsListVariants, toggleVariants, type };

package/dist/index.js

@@ -3492,15 +3492,55 @@ function BarChart({ data, xKey, series, height = 260, showLegend = series.length
   ] }) });
 }
 
+// src/components/composed/charts/ComposedChart.tsx
+import { ComposedChart as RComposedChart, Bar as Bar2, Line, Area as Area2, XAxis as XAxis3, YAxis as YAxis3, CartesianGrid as CartesianGrid3 } from "recharts";
+import { jsx as jsx49, jsxs as jsxs18 } from "react/jsx-runtime";
+function ComposedChart({ data, xKey, series, height = 260, showLegend = series.length > 1 }) {
+  const config = Object.fromEntries(series.map((s) => [s.key, { label: s.label, color: s.color }]));
+  const hasRightAxis = series.some((s) => s.axis === "right");
+  return /* @__PURE__ */ jsx49(ChartContainer, { config, style: { height }, className: "w-full", children: /* @__PURE__ */ jsxs18(RComposedChart, { data, children: [
+    /* @__PURE__ */ jsx49(CartesianGrid3, { vertical: false, stroke: color.input }),
+    /* @__PURE__ */ jsx49(XAxis3, { dataKey: xKey, tickLine: false, axisLine: false, fontSize: 12 }),
+    /* @__PURE__ */ jsx49(YAxis3, { yAxisId: "left", tickLine: false, axisLine: false, fontSize: 12, width: 32 }),
+    hasRightAxis && /* @__PURE__ */ jsx49(YAxis3, { yAxisId: "right", orientation: "right", tickLine: false, axisLine: false, fontSize: 12, width: 32 }),
+    /* @__PURE__ */ jsx49(ChartTooltip, { content: /* @__PURE__ */ jsx49(ChartTooltipContent, {}) }),
+    showLegend && /* @__PURE__ */ jsx49(ChartLegend, { content: /* @__PURE__ */ jsx49(ChartLegendContent, {}) }),
+    series.map((s) => {
+      const paint = `var(--color-${s.key})`;
+      const yAxisId = s.axis === "right" ? "right" : "left";
+      if (s.type === "bar") {
+        return /* @__PURE__ */ jsx49(Bar2, { yAxisId, dataKey: s.key, fill: paint, radius: 4, isAnimationActive: false }, s.key);
+      }
+      if (s.type === "area") {
+        return /* @__PURE__ */ jsx49(
+          Area2,
+          {
+            yAxisId,
+            dataKey: s.key,
+            type: "monotone",
+            stroke: paint,
+            fill: paint,
+            fillOpacity: 0.2,
+            strokeWidth: 2,
+            isAnimationActive: false
+          },
+          s.key
+        );
+      }
+      return /* @__PURE__ */ jsx49(Line, { yAxisId, dataKey: s.key, type: "monotone", stroke: paint, strokeWidth: 2, dot: false, isAnimationActive: false }, s.key);
+    })
+  ] }) });
+}
+
 // src/components/composed/charts/DistributionChart.tsx
 import {
   BarChart as BarChart2,
-  Bar as Bar2,
-  XAxis as XAxis3,
-  YAxis as YAxis3,
-  CartesianGrid as CartesianGrid3
+  Bar as Bar3,
+  XAxis as XAxis4,
+  YAxis as YAxis4,
+  CartesianGrid as CartesianGrid4
 } from "recharts";
-import { jsx as jsx49, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx50, jsxs as jsxs19 } from "react/jsx-runtime";
 var SEGMENT_COLORS = [color.accent, color.chart2, color.chart3, color.chart4, color.chart5];
 var MAX_SEGMENTS = 5;
 function DistributionChart({ groups, rowHeight = 40 }) {
@@ -3520,14 +3560,14 @@ function DistributionChart({ groups, rowHeight = 40 }) {
     row.rest = Math.max(0, 100 - sum);
     return row;
   });
-  return /* @__PURE__ */ jsx49(ChartContainer, { config, style: { height: groups.length * rowHeight + 24 }, className: "w-full", children: /* @__PURE__ */ jsxs18(BarChart2, { data, layout: "vertical", margin: { left: 0, right: 12, top: 4, bottom: 4 }, children: [
-    /* @__PURE__ */ jsx49(CartesianGrid3, { horizontal: false, stroke: color.input }),
-    /* @__PURE__ */ jsx49(XAxis3, { type: "number", domain: [0, 100], hide: true }),
-    /* @__PURE__ */ jsx49(YAxis3, { type: "category", dataKey: "name", tickLine: false, axisLine: false, width: 130, fontSize: 12 }),
-    /* @__PURE__ */ jsx49(
+  return /* @__PURE__ */ jsx50(ChartContainer, { config, style: { height: groups.length * rowHeight + 24 }, className: "w-full", children: /* @__PURE__ */ jsxs19(BarChart2, { data, layout: "vertical", margin: { left: 0, right: 12, top: 4, bottom: 4 }, children: [
+    /* @__PURE__ */ jsx50(CartesianGrid4, { horizontal: false, stroke: color.input }),
+    /* @__PURE__ */ jsx50(XAxis4, { type: "number", domain: [0, 100], hide: true }),
+    /* @__PURE__ */ jsx50(YAxis4, { type: "category", dataKey: "name", tickLine: false, axisLine: false, width: 130, fontSize: 12 }),
+    /* @__PURE__ */ jsx50(
       ChartTooltip,
       {
-        content: /* @__PURE__ */ jsx49(
+        content: /* @__PURE__ */ jsx50(
           ChartTooltipContent,
           {
             hideLabel: true,
@@ -3540,41 +3580,89 @@ function DistributionChart({ groups, rowHeight = 40 }) {
         )
       }
     ),
-    Array.from({ length: MAX_SEGMENTS }, (_, i) => /* @__PURE__ */ jsx49(Bar2, { dataKey: `seg${i}`, stackId: "dist", fill: `var(--color-seg${i})`, isAnimationActive: false }, i)),
-    /* @__PURE__ */ jsx49(Bar2, { dataKey: "rest", stackId: "dist", fill: "var(--color-rest)", isAnimationActive: false })
+    Array.from({ length: MAX_SEGMENTS }, (_, i) => /* @__PURE__ */ jsx50(Bar3, { dataKey: `seg${i}`, stackId: "dist", fill: `var(--color-seg${i})`, isAnimationActive: false }, i)),
+    /* @__PURE__ */ jsx50(Bar3, { dataKey: "rest", stackId: "dist", fill: "var(--color-rest)", isAnimationActive: false })
   ] }) });
 }
 
 // src/components/composed/charts/DonutChart.tsx
 import { PieChart, Pie, Cell } from "recharts";
-import { jsx as jsx50, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx51, jsxs as jsxs20 } from "react/jsx-runtime";
 function DonutChart({ data, height = 260, showLegend = true }) {
   const config = Object.fromEntries(data.map((d) => [d.key, { label: d.label, color: d.color }]));
-  return /* @__PURE__ */ jsx50(ChartContainer, { config, style: { height }, className: "w-full", children: /* @__PURE__ */ jsxs19(PieChart, { children: [
-    /* @__PURE__ */ jsx50(ChartTooltip, { content: /* @__PURE__ */ jsx50(ChartTooltipContent, { nameKey: "key" }) }),
-    showLegend && /* @__PURE__ */ jsx50(ChartLegend, { content: /* @__PURE__ */ jsx50(ChartLegendContent, { nameKey: "key" }) }),
-    /* @__PURE__ */ jsx50(Pie, { data, dataKey: "value", nameKey: "key", innerRadius: "60%", outerRadius: "90%", strokeWidth: 2, isAnimationActive: false, children: data.map((d) => /* @__PURE__ */ jsx50(Cell, { fill: `var(--color-${d.key})` }, d.key)) })
+  return /* @__PURE__ */ jsx51(ChartContainer, { config, style: { height }, className: "w-full", children: /* @__PURE__ */ jsxs20(PieChart, { children: [
+    /* @__PURE__ */ jsx51(ChartTooltip, { content: /* @__PURE__ */ jsx51(ChartTooltipContent, { nameKey: "key" }) }),
+    showLegend && /* @__PURE__ */ jsx51(ChartLegend, { content: /* @__PURE__ */ jsx51(ChartLegendContent, { nameKey: "key" }) }),
+    /* @__PURE__ */ jsx51(Pie, { data, dataKey: "value", nameKey: "key", innerRadius: "60%", outerRadius: "90%", strokeWidth: 2, isAnimationActive: false, children: data.map((d) => /* @__PURE__ */ jsx51(Cell, { fill: `var(--color-${d.key})` }, d.key)) })
   ] }) });
 }
 
 // src/components/composed/charts/LineChart.tsx
-import { LineChart as RLineChart, Line, XAxis as XAxis4, YAxis as YAxis4, CartesianGrid as CartesianGrid4 } from "recharts";
-import { jsx as jsx51, jsxs as jsxs20 } from "react/jsx-runtime";
+import { LineChart as RLineChart, Line as Line2, XAxis as XAxis5, YAxis as YAxis5, CartesianGrid as CartesianGrid5 } from "recharts";
+import { jsx as jsx52, jsxs as jsxs21 } from "react/jsx-runtime";
 function LineChart({ data, xKey, series, height = 260, showLegend = series.length > 1 }) {
   const config = Object.fromEntries(series.map((s) => [s.key, { label: s.label, color: s.color }]));
-  return /* @__PURE__ */ jsx51(ChartContainer, { config, style: { height }, className: "w-full", children: /* @__PURE__ */ jsxs20(RLineChart, { data, children: [
-    /* @__PURE__ */ jsx51(CartesianGrid4, { vertical: false, stroke: color.input }),
-    /* @__PURE__ */ jsx51(XAxis4, { dataKey: xKey, tickLine: false, axisLine: false, fontSize: 12 }),
-    /* @__PURE__ */ jsx51(YAxis4, { tickLine: false, axisLine: false, fontSize: 12, width: 32 }),
-    /* @__PURE__ */ jsx51(ChartTooltip, { content: /* @__PURE__ */ jsx51(ChartTooltipContent, {}) }),
-    showLegend && /* @__PURE__ */ jsx51(ChartLegend, { content: /* @__PURE__ */ jsx51(ChartLegendContent, {}) }),
-    series.map((s) => /* @__PURE__ */ jsx51(Line, { dataKey: s.key, type: "monotone", stroke: `var(--color-${s.key})`, strokeWidth: 2, dot: false, isAnimationActive: false }, s.key))
+  return /* @__PURE__ */ jsx52(ChartContainer, { config, style: { height }, className: "w-full", children: /* @__PURE__ */ jsxs21(RLineChart, { data, children: [
+    /* @__PURE__ */ jsx52(CartesianGrid5, { vertical: false, stroke: color.input }),
+    /* @__PURE__ */ jsx52(XAxis5, { dataKey: xKey, tickLine: false, axisLine: false, fontSize: 12 }),
+    /* @__PURE__ */ jsx52(YAxis5, { tickLine: false, axisLine: false, fontSize: 12, width: 32 }),
+    /* @__PURE__ */ jsx52(ChartTooltip, { content: /* @__PURE__ */ jsx52(ChartTooltipContent, {}) }),
+    showLegend && /* @__PURE__ */ jsx52(ChartLegend, { content: /* @__PURE__ */ jsx52(ChartLegendContent, {}) }),
+    series.map((s) => /* @__PURE__ */ jsx52(Line2, { dataKey: s.key, type: "monotone", stroke: `var(--color-${s.key})`, strokeWidth: 2, dot: false, isAnimationActive: false }, s.key))
   ] }) });
 }
 
+// src/components/composed/charts/RadialChart.tsx
+import { RadialBarChart as RRadialBarChart, RadialBar, PolarAngleAxis } from "recharts";
+import { jsx as jsx53, jsxs as jsxs22 } from "react/jsx-runtime";
+function RadialChart({ value, color: fillColor, trackColor = color.muted, size = 96, label }) {
+  const config = {};
+  return /* @__PURE__ */ jsxs22("div", { style: { position: "relative", width: size, height: size }, children: [
+    /* @__PURE__ */ jsx53(ChartContainer, { config, style: { width: size, height: size }, children: /* @__PURE__ */ jsxs22(RRadialBarChart, { data: [{ value }], innerRadius: "72%", outerRadius: "100%", startAngle: 90, endAngle: -270, children: [
+      /* @__PURE__ */ jsx53(PolarAngleAxis, { type: "number", domain: [0, 100], tick: false, axisLine: false }),
+      /* @__PURE__ */ jsx53(RadialBar, { dataKey: "value", cornerRadius: 999, fill: fillColor, background: { fill: trackColor }, isAnimationActive: false })
+    ] }) }),
+    label && /* @__PURE__ */ jsx53("div", { style: { position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center" }, children: label })
+  ] });
+}
+
+// src/components/composed/charts/ScatterChart.tsx
+import { ScatterChart as RScatterChart, Scatter, XAxis as XAxis6, YAxis as YAxis6, CartesianGrid as CartesianGrid6 } from "recharts";
+import { jsx as jsx54, jsxs as jsxs23 } from "react/jsx-runtime";
+function ScatterChart({ series, xLabel, yLabel, height = 260, showLegend = series.length > 1 }) {
+  const config = Object.fromEntries(series.map((s) => [s.key, { label: s.label, color: s.color }]));
+  return /* @__PURE__ */ jsx54(ChartContainer, { config, style: { height }, className: "w-full", children: /* @__PURE__ */ jsxs23(RScatterChart, { children: [
+    /* @__PURE__ */ jsx54(CartesianGrid6, { stroke: color.input }),
+    /* @__PURE__ */ jsx54(XAxis6, { type: "number", dataKey: "x", name: xLabel, tickLine: false, axisLine: false, fontSize: 12 }),
+    /* @__PURE__ */ jsx54(YAxis6, { type: "number", dataKey: "y", name: yLabel, tickLine: false, axisLine: false, fontSize: 12, width: 32 }),
+    /* @__PURE__ */ jsx54(ChartTooltip, { content: /* @__PURE__ */ jsx54(ChartTooltipContent, {}), cursor: { strokeDasharray: "3 3" } }),
+    showLegend && /* @__PURE__ */ jsx54(ChartLegend, { content: /* @__PURE__ */ jsx54(ChartLegendContent, {}) }),
+    series.map((s) => /* @__PURE__ */ jsx54(Scatter, { name: s.label, data: s.data, fill: `var(--color-${s.key})`, isAnimationActive: false }, s.key))
+  ] }) });
+}
+
+// src/components/composed/charts/Sparkline.tsx
+import { Line as Line3, LineChart as RLineChart2 } from "recharts";
+import { jsx as jsx55 } from "react/jsx-runtime";
+function Sparkline({ data, color: color2, width = 64, height = 24, showEndDot = true }) {
+  const points = data.map((value, index) => ({ index, value }));
+  const lastIndex = points.length - 1;
+  return /* @__PURE__ */ jsx55(RLineChart2, { width, height, data: points, margin: { top: 2, right: 2, bottom: 2, left: 2 }, style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx55(
+    Line3,
+    {
+      dataKey: "value",
+      type: "monotone",
+      stroke: color2,
+      strokeWidth: 2,
+      isAnimationActive: false,
+      dot: showEndDot ? (props) => props.index === lastIndex ? /* @__PURE__ */ jsx55("circle", { cx: props.cx, cy: props.cy, r: 2.5, fill: color2 }, props.index) : /* @__PURE__ */ jsx55("g", {}, props.index) : false
+    }
+  ) });
+}
+
 // src/sections/AssistantDock.tsx
 import { useEffect, useRef, useState } from "react";
-import { Fragment as Fragment3, jsx as jsx52, jsxs as jsxs21 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx56, jsxs as jsxs24 } from "react/jsx-runtime";
 var msgId = 0;
 function AssistantDock({
   title = "\u0410\u0441\u0441\u0438\u0441\u0442\u0435\u043D\u0442",
@@ -3641,17 +3729,17 @@ function AssistantDock({
       close();
     }
   };
-  return /* @__PURE__ */ jsxs21("div", { className: `assistant-dock assistant-dock--${mode === "open" ? "open" : mode === "orb" ? "orb" : "idle"}`, children: [
-    /* @__PURE__ */ jsxs21("div", { className: "assistant-dock-panel", children: [
-      /* @__PURE__ */ jsxs21("div", { className: "assistant-dock-glow", "aria-hidden": "true", children: [
-        /* @__PURE__ */ jsx52("span", { className: "blob blob1" }),
-        /* @__PURE__ */ jsx52("span", { className: "blob blob2" }),
-        /* @__PURE__ */ jsx52("span", { className: "blob blob3" })
+  return /* @__PURE__ */ jsxs24("div", { className: `assistant-dock assistant-dock--${mode === "open" ? "open" : mode === "orb" ? "orb" : "idle"}`, children: [
+    /* @__PURE__ */ jsxs24("div", { className: "assistant-dock-panel", children: [
+      /* @__PURE__ */ jsxs24("div", { className: "assistant-dock-glow", "aria-hidden": "true", children: [
+        /* @__PURE__ */ jsx56("span", { className: "blob blob1" }),
+        /* @__PURE__ */ jsx56("span", { className: "blob blob2" }),
+        /* @__PURE__ */ jsx56("span", { className: "blob blob3" })
       ] }),
-      /* @__PURE__ */ jsxs21("div", { className: "assistant-dock-inner", children: [
-        /* @__PURE__ */ jsxs21("div", { className: "assistant-dock-head", children: [
-          /* @__PURE__ */ jsx52("span", { className: "assistant-dock-title", children: title }),
-          /* @__PURE__ */ jsx52(
+      /* @__PURE__ */ jsxs24("div", { className: "assistant-dock-inner", children: [
+        /* @__PURE__ */ jsxs24("div", { className: "assistant-dock-head", children: [
+          /* @__PURE__ */ jsx56("span", { className: "assistant-dock-title", children: title }),
+          /* @__PURE__ */ jsx56(
             "button",
             {
               type: "button",
@@ -3659,14 +3747,14 @@ function AssistantDock({
               "aria-label": "\u0417\u0430\u043A\u0440\u044B\u0442\u044C",
               onMouseDown: (e) => e.preventDefault(),
               onClick: close,
-              children: /* @__PURE__ */ jsx52(Icon, { name: "close", size: 16 })
+              children: /* @__PURE__ */ jsx56(Icon, { name: "close", size: 16 })
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs21("div", { className: "assistant-dock-msgs", ref: msgsRef, children: [
-          messages.length === 0 && /* @__PURE__ */ jsxs21(Fragment3, { children: [
-            /* @__PURE__ */ jsx52("div", { className: "assistant-dock-sub", children: intro }),
-            /* @__PURE__ */ jsx52("div", { className: "assistant-dock-chips", children: chips.map((c) => /* @__PURE__ */ jsx52(
+        /* @__PURE__ */ jsxs24("div", { className: "assistant-dock-msgs", ref: msgsRef, children: [
+          messages.length === 0 && /* @__PURE__ */ jsxs24(Fragment3, { children: [
+            /* @__PURE__ */ jsx56("div", { className: "assistant-dock-sub", children: intro }),
+            /* @__PURE__ */ jsx56("div", { className: "assistant-dock-chips", children: chips.map((c) => /* @__PURE__ */ jsx56(
               Chip,
               {
                 onMouseDown: (e) => e.preventDefault(),
@@ -3679,13 +3767,13 @@ function AssistantDock({
               c.question
             )) })
           ] }),
-          messages.map((m) => /* @__PURE__ */ jsx52(MessageBubble, { from: m.from, children: m.content }, m.id)),
-          typing && /* @__PURE__ */ jsx52(TypingIndicator, {})
+          messages.map((m) => /* @__PURE__ */ jsx56(MessageBubble, { from: m.from, children: m.content }, m.id)),
+          typing && /* @__PURE__ */ jsx56(TypingIndicator, {})
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs21("div", { className: "assistant-dock-input", children: [
-      /* @__PURE__ */ jsx52(
+    /* @__PURE__ */ jsxs24("div", { className: "assistant-dock-input", children: [
+      /* @__PURE__ */ jsx56(
         "input",
         {
           ref: fieldRef,
@@ -3697,13 +3785,13 @@ function AssistantDock({
           onKeyDown: handleKey
         }
       ),
-      /* @__PURE__ */ jsxs21("div", { className: "assistant-dock-blob", "aria-hidden": "true", children: [
-        /* @__PURE__ */ jsx52("i", {}),
-        /* @__PURE__ */ jsx52("i", {}),
-        /* @__PURE__ */ jsx52("i", {}),
-        /* @__PURE__ */ jsx52("i", {})
+      /* @__PURE__ */ jsxs24("div", { className: "assistant-dock-blob", "aria-hidden": "true", children: [
+        /* @__PURE__ */ jsx56("i", {}),
+        /* @__PURE__ */ jsx56("i", {}),
+        /* @__PURE__ */ jsx56("i", {}),
+        /* @__PURE__ */ jsx56("i", {})
       ] }),
-      /* @__PURE__ */ jsxs21(
+      /* @__PURE__ */ jsxs24(
         "button",
         {
           type: "button",
@@ -3712,12 +3800,12 @@ function AssistantDock({
           onMouseDown: (e) => e.preventDefault(),
           onClick: handleBtnClick,
           children: [
-            /* @__PURE__ */ jsxs21("span", { className: "assistant-dock-btn-label", children: [
-              /* @__PURE__ */ jsx52(Icon, { name: "spark", size: 16 }),
+            /* @__PURE__ */ jsxs24("span", { className: "assistant-dock-btn-label", children: [
+              /* @__PURE__ */ jsx56(Icon, { name: "spark", size: 16 }),
               " \u0421\u043F\u0440\u043E\u0441\u0438\u0442\u044C \u0430\u0441\u0441\u0438\u0441\u0442\u0435\u043D\u0442\u0430"
             ] }),
-            /* @__PURE__ */ jsx52("span", { className: "assistant-dock-miniico", children: /* @__PURE__ */ jsx52(Icon, { name: "spark", size: 16 }) }),
-            /* @__PURE__ */ jsx52(Icon, { name: "send", size: 22, className: "assistant-dock-send" })
+            /* @__PURE__ */ jsx56("span", { className: "assistant-dock-miniico", children: /* @__PURE__ */ jsx56(Icon, { name: "spark", size: 16 }) }),
+            /* @__PURE__ */ jsx56(Icon, { name: "send", size: 22, className: "assistant-dock-send" })
           ]
         }
       )
@@ -3726,7 +3814,7 @@ function AssistantDock({
 }
 
 // src/sections/SidebarNav.tsx
-import { jsx as jsx53, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx57, jsxs as jsxs25 } from "react/jsx-runtime";
 var BRAND_LOGO_PATH = "M450.313 0C769.313 0 944.528 245.166 864.813 542.666C852.313 581.666 848.967 591.728 838.813 623.165L872.813 664.166C962.596 778.457 980.313 929.666 937.814 1104.77H624.813C746.313 944.666 814.313 782.166 825.313 711.666L814.313 696.165C714.974 976.165 548.411 1115.92 359.862 1115.92C151.313 1115.92 0 972.665 0 794.466C0 582.558 193.313 444.512 450.313 444.512C625.327 444.512 730.313 526.666 783.813 571.665L796.313 532.666C781.813 463.166 613.813 360.364 436.813 360.364C329.862 360.364 239.313 386.166 144.313 437.165L20 114.335C134.313 49.6655 286.313 0 450.313 0ZM543.813 547.665C425.012 547.665 349.862 633.349 349.862 720.165C349.862 791.982 413.313 872.992 493.663 872.992C605.327 872.992 712.813 785.665 764.813 639.665C704.313 582.666 621.859 547.665 543.813 547.665Z";
 var EXAMPLE_NAV_ITEMS = [
   { key: "home", label: "\u0413\u043B\u0430\u0432\u043D\u0430\u044F", icon: "home" },
@@ -3744,22 +3832,22 @@ function SidebarNav({
   clientLabel,
   clientInitial
 }) {
-  return /* @__PURE__ */ jsxs22("aside", { className: "sidebar", children: [
-    /* @__PURE__ */ jsx53("div", { className: "brand", title: "\u0410\u0440\u0442\u0435\u0444\u0430\u043A\u0442", children: /* @__PURE__ */ jsx53(
+  return /* @__PURE__ */ jsxs25("aside", { className: "sidebar", children: [
+    /* @__PURE__ */ jsx57("div", { className: "brand", title: "\u0410\u0440\u0442\u0435\u0444\u0430\u043A\u0442", children: /* @__PURE__ */ jsx57(
       "svg",
       {
         className: "brand-logo",
         viewBox: "0 0 960 1116",
         fill: "currentColor",
         "aria-hidden": "true",
-        children: /* @__PURE__ */ jsx53("path", { fillRule: "evenodd", clipRule: "evenodd", d: BRAND_LOGO_PATH })
+        children: /* @__PURE__ */ jsx57("path", { fillRule: "evenodd", clipRule: "evenodd", d: BRAND_LOGO_PATH })
       }
     ) }),
-    clientLabel && /* @__PURE__ */ jsxs22("div", { className: "client", "aria-label": clientLabel, children: [
-      /* @__PURE__ */ jsx53("span", { className: "bd", children: (clientInitial ?? clientLabel.charAt(0)).toUpperCase() }),
-      /* @__PURE__ */ jsx53("span", { className: "tip", children: clientLabel })
+    clientLabel && /* @__PURE__ */ jsxs25("div", { className: "client", "aria-label": clientLabel, children: [
+      /* @__PURE__ */ jsx57("span", { className: "bd", children: (clientInitial ?? clientLabel.charAt(0)).toUpperCase() }),
+      /* @__PURE__ */ jsx57("span", { className: "tip", children: clientLabel })
     ] }),
-    /* @__PURE__ */ jsx53("nav", { className: "nav", "aria-label": "\u041D\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044F", children: items.map((item) => /* @__PURE__ */ jsxs22(
+    /* @__PURE__ */ jsx57("nav", { className: "nav", "aria-label": "\u041D\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044F", children: items.map((item) => /* @__PURE__ */ jsxs25(
       "a",
       {
         href: "#",
@@ -3767,17 +3855,17 @@ function SidebarNav({
         "aria-label": item.label,
         "aria-current": item.key === active ? "page" : void 0,
         children: [
-          /* @__PURE__ */ jsx53(Icon, { name: item.icon, size: NI }),
-          /* @__PURE__ */ jsx53("span", { className: "tip", children: item.label })
+          /* @__PURE__ */ jsx57(Icon, { name: item.icon, size: NI }),
+          /* @__PURE__ */ jsx57("span", { className: "tip", children: item.label })
         ]
       },
       item.key
     )) }),
-    /* @__PURE__ */ jsxs22("div", { className: "side-foot", children: [
-      /* @__PURE__ */ jsx53("span", { className: "avatar", title: avatarTitle, children: avatarInitials }),
-      showSettings && /* @__PURE__ */ jsxs22("span", { className: "ico-btn", "aria-label": "\u041D\u0430\u0441\u0442\u0440\u043E\u0439\u043A\u0438", children: [
-        /* @__PURE__ */ jsx53(Icon, { name: "settings", size: NI }),
-        /* @__PURE__ */ jsx53("span", { className: "tip", children: "\u041D\u0430\u0441\u0442\u0440\u043E\u0439\u043A\u0438" })
+    /* @__PURE__ */ jsxs25("div", { className: "side-foot", children: [
+      /* @__PURE__ */ jsx57("span", { className: "avatar", title: avatarTitle, children: avatarInitials }),
+      showSettings && /* @__PURE__ */ jsxs25("span", { className: "ico-btn", "aria-label": "\u041D\u0430\u0441\u0442\u0440\u043E\u0439\u043A\u0438", children: [
+        /* @__PURE__ */ jsx57(Icon, { name: "settings", size: NI }),
+        /* @__PURE__ */ jsx57("span", { className: "tip", children: "\u041D\u0430\u0441\u0442\u0440\u043E\u0439\u043A\u0438" })
       ] })
     ] })
   ] });
@@ -3819,6 +3907,7 @@ export {
   ChartTooltipContent,
   Checkbox,
   Chip,
+  ComposedChart,
   Container,
   Dialog,
   DialogClose,
@@ -3907,9 +3996,11 @@ export {
   PaginationNext,
   PaginationPrevious,
   Progress,
+  RadialChart,
   RadioGroup,
   RadioGroupItem,
   SURFACE_VARIANTS,
+  ScatterChart,
   Search,
   Select,
   SelectContent,
@@ -3923,6 +4014,7 @@ export {
   SelectValue,
   Separator,
   SidebarNav,
+  Sparkline,
   Spinner,
   Stack,
   Surface,