@archytechtor/ui 0.0.0-stage → 0.2.0

package/dist/components/toggle-group/toggle-group.js

@@ -0,0 +1,88 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { toggleVariants } from "../toggle/types.js";
+import { jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+import { Toggle } from "@base-ui/react/toggle";
+import { ToggleGroup } from "@base-ui/react/toggle-group";
+// src/components/toggle-group/toggle-group.tsx
+/** Настройки группы: кнопки берут из них оформление и размер */
+const ToggleGroupContext = createContext({
+	spacing: 2,
+	orientation: "horizontal"
+});
+/**
+* Группа переключателей: одна или несколько нажатых кнопок из набора
+* @param props - пропсы группы
+* @returns группа с ролью group
+*/
+function ToggleGroup$1({ className, variant, size, spacing = 2, orientation = "horizontal", style, children, onValueChange, ...props }) {
+	const classes = cn("group/toggle-group", "flex", "w-fit", "flex-row", "items-center", "gap-[--spacing(var(--gap))]", "rounded-lg", "data-[size=sm]:rounded-[min(var(--radius-md),10px)]", "data-vertical:flex-col", "data-vertical:items-stretch", className);
+	const groupStyle = Object.assign({ "--gap": spacing }, style);
+	const context = {
+		variant,
+		size,
+		spacing,
+		orientation
+	};
+	/**
+	* Выбор изменился: наружу только значения
+	* @param value - значения нажатых кнопок
+	*/
+	const handleValueChange = (value) => onValueChange?.(value);
+	return /* @__PURE__ */ jsx(ToggleGroup, {
+		"data-slot": "toggle-group",
+		"data-variant": variant,
+		"data-size": size,
+		"data-spacing": spacing,
+		"data-orientation": orientation,
+		orientation,
+		style: groupStyle,
+		className: classes,
+		onValueChange: handleValueChange,
+		...props,
+		children: /* @__PURE__ */ jsx(ToggleGroupContext, {
+			value: context,
+			children
+		})
+	});
+}
+/** Классы кнопки, зависящие от группы: слитные кнопки при spacing=0 */
+const itemClasses = [
+	"shrink-0 focus:z-10 focus-visible:z-10",
+	"group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2",
+	"group-data-[spacing=0]/toggle-group:has-data-[icon=inline-end]:pr-1.5",
+	"group-data-[spacing=0]/toggle-group:has-data-[icon=inline-start]:pl-1.5",
+	"group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-lg",
+	"group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-lg",
+	"group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-lg",
+	"group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-lg",
+	"group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0",
+	"group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0",
+	"group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l",
+	"group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t"
+];
+/**
+* Кнопка группы переключателей
+* @param props - пропсы кнопки
+* @returns кнопка с aria-pressed
+*/
+function ToggleGroupItem({ className, variant = "default", size = "default", disabled = false, ...props }) {
+	const context = useContext(ToggleGroupContext);
+	const itemVariant = context.variant ?? variant;
+	const itemSize = context.size ?? size;
+	const classes = cn(itemClasses, toggleVariants({
+		variant: itemVariant,
+		size: itemSize
+	}), className);
+	return /* @__PURE__ */ jsx(Toggle, {
+		"data-slot": "toggle-group-item",
+		"data-variant": itemVariant,
+		"data-size": itemSize,
+		"data-spacing": context.spacing,
+		disabled,
+		className: classes,
+		...props
+	});
+}
+export { ToggleGroup$1 as ToggleGroup, ToggleGroupItem };

package/dist/components/toggle-group/types.d.ts

@@ -0,0 +1,52 @@
+import { PartPropsT } from "../../lib/part-props.js";
+import { toggleVariants } from "../toggle/types.js";
+import { VariantProps } from "class-variance-authority";
+import { Toggle } from "@base-ui/react/toggle";
+import { ToggleGroup } from "@base-ui/react/toggle-group";
+/**
+ * Варианты оформления и размеры кнопок группы
+ */
+type ToggleVariantsT = VariantProps<typeof toggleVariants>;
+/**
+ * Ориентация группы
+ */
+type ToggleGroupOrientationT = 'horizontal' | 'vertical';
+/**
+ * Пропсы группы переключателей
+ */
+export type ToggleGroupPropsT = PartPropsT<Omit<ToggleGroup.Props, 'value' | 'defaultValue' | 'onValueChange' | 'orientation'>> & {
+  /** Оформление всех кнопок группы: без фона или с рамкой */
+  variant?: ToggleVariantsT['variant'];
+  /** Размер всех кнопок группы: sm, default, lg */
+  size?: ToggleVariantsT['size'];
+  /** Отступ между кнопками в шагах сетки (1 шаг = 0.25rem); 0 — кнопки слитно */
+  spacing?: number;
+  /** Ориентация: горизонтальная или вертикальная. Задаёт и навигацию стрелками */
+  orientation?: ToggleGroupOrientationT;
+  /** Можно нажать несколько кнопок. По умолчанию false — нажата одна */
+  multiple?: boolean;
+  /** Значения нажатых кнопок — контролируемый режим, вместе с onValueChange */
+  value?: string[];
+  /** Значения нажатых кнопок при первом рендере — неконтролируемый режим */
+  defaultValue?: string[];
+  /** Выбор изменился: значения нажатых кнопок */
+  onValueChange?: (value: string[]) => void;
+  /** Отключить все кнопки группы */
+  disabled?: boolean;
+  /** Переход фокуса стрелками: с последней кнопки на первую и обратно. По умолчанию true */
+  loopFocus?: boolean;
+};
+/**
+ * Пропсы кнопки группы
+ */
+export type ToggleGroupItemPropsT = PartPropsT<Omit<Toggle.Props, 'value'>> & {
+  /** Значение кнопки: попадает в value группы, когда кнопка нажата */
+  value: string;
+  /** Оформление кнопки; оформление группы важнее */
+  variant?: ToggleVariantsT['variant'];
+  /** Размер кнопки; размер группы важнее */
+  size?: ToggleVariantsT['size'];
+  /** Отключить кнопку */
+  disabled?: boolean;
+};
+export {};

package/dist/components/tooltip/index.d.ts

@@ -0,0 +1,3 @@
+import { TooltipContentPropsT, TooltipPropsT, TooltipProviderPropsT, TooltipTriggerPropsT } from "./types.js";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./tooltip.js";
+export { Tooltip, TooltipContent, type TooltipContentPropsT, type TooltipPropsT, TooltipProvider, type TooltipProviderPropsT, TooltipTrigger, type TooltipTriggerPropsT };

package/dist/components/tooltip/index.js

@@ -0,0 +1 @@
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./tooltip.js";

package/dist/components/tooltip/tooltip.d.ts

@@ -0,0 +1,25 @@
+import { TooltipContentPropsT, TooltipPropsT, TooltipProviderPropsT, TooltipTriggerPropsT } from "./types.js";
+/**
+ * Провайдер подсказок: общие задержки для всех подсказок внутри. Ставится один раз в корень приложения
+ * @param props - пропсы провайдера
+ * @returns провайдер без своей разметки
+ */
+export declare function TooltipProvider({ delay, ...props }: TooltipProviderPropsT): import("react").JSX.Element;
+/**
+ * Подсказка: короткий текст при наведении или фокусе на элемент
+ * @param props - пропсы подсказки
+ * @returns корень без своей разметки
+ */
+export declare function Tooltip({ onOpenChange, ...props }: TooltipPropsT): import("react").JSX.Element;
+/**
+ * Элемент с подсказкой: при наведении и фокусе показывает её. Свою кнопку — через render={<Button />}
+ * @param props - пропсы элемента
+ * @returns кнопка
+ */
+export declare function TooltipTrigger(props: TooltipTriggerPropsT): import("react").JSX.Element;
+/**
+ * Содержимое подсказки: тёмная плашка со стрелкой, рендерится в портале
+ * @param props - пропсы содержимого; по умолчанию side="top", sideOffset={4}
+ * @returns портал с подсказкой
+ */
+export declare function TooltipContent({ className, side, sideOffset, align, alignOffset, collisionPadding, arrowPadding, sticky, hidden, children, ...props }: TooltipContentPropsT): import("react").JSX.Element;

package/dist/components/tooltip/tooltip.js

@@ -0,0 +1,79 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Tooltip } from "@base-ui/react/tooltip";
+// src/components/tooltip/tooltip.tsx
+/**
+* Провайдер подсказок: общие задержки для всех подсказок внутри. Ставится один раз в корень приложения
+* @param props - пропсы провайдера
+* @returns провайдер без своей разметки
+*/
+function TooltipProvider({ delay = 0, ...props }) {
+	return /* @__PURE__ */ jsx(Tooltip.Provider, {
+		"data-slot": "tooltip-provider",
+		delay,
+		...props
+	});
+}
+/**
+* Подсказка: короткий текст при наведении или фокусе на элемент
+* @param props - пропсы подсказки
+* @returns корень без своей разметки
+*/
+function Tooltip$1({ onOpenChange, ...props }) {
+	/**
+	* Подсказку показали или скрыли: наружу только флаг
+	* @param open - открыта ли
+	*/
+	const handleOpenChange = (open) => onOpenChange?.(open);
+	return /* @__PURE__ */ jsx(Tooltip.Root, {
+		"data-slot": "tooltip",
+		onOpenChange: handleOpenChange,
+		...props
+	});
+}
+/**
+* Элемент с подсказкой: при наведении и фокусе показывает её. Свою кнопку — через render={<Button />}
+* @param props - пропсы элемента
+* @returns кнопка
+*/
+function TooltipTrigger(props) {
+	return /* @__PURE__ */ jsx(Tooltip.Trigger, {
+		"data-slot": "tooltip-trigger",
+		...props
+	});
+}
+/** Классы стрелки: по оси стороны её двигает Base UI, поперёк — эти классы */
+const arrowClasses = cn("z-50", "size-2.5", "translate-y-[calc(-50%-2px)]", "rotate-45", "rounded-[2px]", "bg-foreground", "fill-foreground", "data-[side=bottom]:top-1", "data-[side=top]:-bottom-2.5", "data-[side=left]:top-1/2!", "data-[side=left]:-right-1", "data-[side=left]:-translate-y-1/2", "data-[side=right]:top-1/2!", "data-[side=right]:-left-1", "data-[side=right]:-translate-y-1/2");
+/**
+* Содержимое подсказки: тёмная плашка со стрелкой, рендерится в портале
+* @param props - пропсы содержимого; по умолчанию side="top", sideOffset={4}
+* @returns портал с подсказкой
+*/
+function TooltipContent({ className, side = "top", sideOffset = 4, align = "center", alignOffset = 0, collisionPadding, arrowPadding, sticky, hidden, children, ...props }) {
+	const classes = cn("z-50", "inline-flex", "w-fit", "max-w-xs", "origin-(--transform-origin)", "items-center", "gap-1.5", "rounded-md", "bg-foreground", "px-3", "py-1.5", "text-xs", "text-background", "has-data-[slot=kbd]:pr-1.5", "**:data-[slot=kbd]:relative", "**:data-[slot=kbd]:isolate", "**:data-[slot=kbd]:z-50", "**:data-[slot=kbd]:rounded-sm", "data-open:animate-in", "data-open:fade-in-0", "data-open:zoom-in-95", "data-closed:animate-out", "data-closed:fade-out-0", "data-closed:zoom-out-95", "data-[side=bottom]:slide-in-from-top-2", "data-[side=left]:slide-in-from-right-2", "data-[side=right]:slide-in-from-left-2", "data-[side=top]:slide-in-from-bottom-2", className);
+	const positionerProps = {
+		side,
+		sideOffset,
+		align,
+		alignOffset,
+		collisionPadding,
+		arrowPadding,
+		sticky
+	};
+	return /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsx(Tooltip.Positioner, {
+		className: "isolate z-50",
+		hidden,
+		...positionerProps,
+		children: /* @__PURE__ */ jsxs(Tooltip.Popup, {
+			"data-slot": "tooltip-content",
+			className: classes,
+			...props,
+			children: [children, /* @__PURE__ */ jsx(Tooltip.Arrow, {
+				"data-slot": "tooltip-arrow",
+				className: arrowClasses
+			})]
+		})
+	}) });
+}
+export { Tooltip$1 as Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/dist/components/tooltip/types.d.ts

@@ -0,0 +1,48 @@
+import { PartPropsT } from "../../lib/part-props.js";
+import { FloatingPropsT } from "../../lib/floating.js";
+import { ReactNode } from "react";
+import { Tooltip } from "@base-ui/react/tooltip";
+/**
+ * Пропсы провайдера подсказок
+ */
+export type TooltipProviderPropsT = {
+  /** Подсказки внутри провайдера */
+  children?: ReactNode;
+  /** Задержка перед показом в мс. По умолчанию 0 */
+  delay?: number;
+  /** Задержка перед скрытием в мс. По умолчанию 0 */
+  closeDelay?: number;
+  /** Сколько мс после закрытия одной подсказки следующая открывается без задержки. По умолчанию 400 */
+  timeout?: number;
+};
+/**
+ * Пропсы подсказки
+ */
+export type TooltipPropsT = Omit<Tooltip.Root.Props, 'onOpenChange'> & {
+  /** Подсказка открыта — контролируемый режим, вместе с onOpenChange */
+  open?: boolean;
+  /** Подсказка открыта при первом рендере — неконтролируемый режим */
+  defaultOpen?: boolean;
+  /** Подсказку показали или скрыли: новое состояние */
+  onOpenChange?: (open: boolean) => void;
+  /** Закрывать подсказку, когда курсор переходит на неё саму */
+  disableHoverablePopup?: boolean;
+  /** Не показывать подсказку */
+  disabled?: boolean;
+};
+/**
+ * Пропсы элемента с подсказкой
+ */
+export type TooltipTriggerPropsT = PartPropsT<Tooltip.Trigger.Props> & {
+  /** Задержка перед показом в мс. По умолчанию — из TooltipProvider */
+  delay?: number;
+  /** Задержка перед скрытием в мс. По умолчанию — из TooltipProvider */
+  closeDelay?: number;
+};
+/**
+ * Пропсы содержимого подсказки
+ */
+export type TooltipContentPropsT = PartPropsT<Tooltip.Popup.Props> & FloatingPropsT & {
+  /** Скрыть подсказку, не закрывая её: например, когда панель развёрнута и подсказка не нужна */
+  hidden?: boolean;
+};

package/dist/components/trace/index.d.ts

@@ -0,0 +1,3 @@
+import { TraceCollapsibleContentPropsT, TraceCollapsiblePropsT, TraceCollapsibleTriggerPropsT, TraceDescriptionPropsT, TraceIconPropsT, TraceLinePropsT, TracePropsT, TraceStatusT, TraceTitlePropsT } from "./types.js";
+import { Trace, TraceCollapsible, TraceCollapsibleContent, TraceCollapsibleTrigger, TraceDescription, TraceIcon, TraceLine, TraceTitle } from "./trace.js";
+export { Trace, TraceCollapsible, TraceCollapsibleContent, type TraceCollapsibleContentPropsT, type TraceCollapsiblePropsT, TraceCollapsibleTrigger, type TraceCollapsibleTriggerPropsT, TraceDescription, type TraceDescriptionPropsT, TraceIcon, type TraceIconPropsT, TraceLine, type TraceLinePropsT, type TracePropsT, type TraceStatusT, TraceTitle, type TraceTitlePropsT };

package/dist/components/trace/index.js

@@ -0,0 +1 @@
+export { Trace, TraceCollapsible, TraceCollapsibleContent, TraceCollapsibleTrigger, TraceDescription, TraceIcon, TraceLine, TraceTitle } from "./trace.js";

package/dist/components/trace/trace.d.ts

@@ -0,0 +1,52 @@
+import { TraceCollapsibleContentPropsT, TraceCollapsiblePropsT, TraceCollapsibleTriggerPropsT, TraceDescriptionPropsT, TraceIconPropsT, TraceLinePropsT, TracePropsT, TraceTitlePropsT } from "./types.js";
+/**
+ * Ход работы: список шагов, вызовов инструментов и рассуждений ассистента.
+ * Ссылка или кнопка, в которую обёрнута строка TraceLine, получает кольцо фокуса
+ * @param props - пропсы списка
+ * @returns контейнер шагов
+ */
+export declare function Trace({ className, ...props }: TracePropsT): import("react").JSX.Element;
+/**
+ * Строка хода работы: иконка, заголовок и описание.
+ * Внутри ссылки или кнопки подсвечивается при наведении
+ * @param props - пропсы строки
+ * @returns строка
+ */
+export declare function TraceLine({ className, status, ...props }: TraceLinePropsT): import("react").JSX.Element;
+/**
+ * Иконка строки: декоративная, скрыта от скринридера
+ * @param props - пропсы иконки
+ * @returns обёртка иконки
+ */
+export declare function TraceIcon({ className, ...props }: TraceIconPropsT): import("react").JSX.Element;
+/**
+ * Заголовок строки: обрезается многоточием
+ * @param props - пропсы заголовка
+ * @returns заголовок
+ */
+export declare function TraceTitle({ className, ...props }: TraceTitlePropsT): import("react").JSX.Element;
+/**
+ * Описание строки: длительность, счётчик, путь файла
+ * @param props - пропсы описания
+ * @returns описание
+ */
+export declare function TraceDescription({ className, ...props }: TraceDescriptionPropsT): import("react").JSX.Element;
+/**
+ * Раскрывающийся шаг: строка-переключатель и подробности под ней
+ * @param props - пропсы шага
+ * @returns корень раскрывающегося шага
+ */
+export declare function TraceCollapsible({ className, onOpenChange, ...props }: TraceCollapsiblePropsT): import("react").JSX.Element;
+/**
+ * Переключатель шага: строка и шеврон, который поворачивается при раскрытии
+ * @param props - пропсы переключателя
+ * @returns кнопка
+ */
+export declare function TraceCollapsibleTrigger({ className, children, ...props }: TraceCollapsibleTriggerPropsT): import("react").JSX.Element;
+/**
+ * Подробности шага: раскрываются с анимацией, слева — вертикальная линия.
+ * className применяется к внутреннему блоку с линией
+ * @param props - пропсы подробностей
+ * @returns раскрывающийся блок
+ */
+export declare function TraceCollapsibleContent({ className, children, ...props }: TraceCollapsibleContentPropsT): import("react").JSX.Element;

package/dist/components/trace/trace.js

@@ -0,0 +1,132 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { ChevronRightIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Collapsible } from "@base-ui/react/collapsible";
+// src/components/trace/trace.tsx
+/**
+* Ход работы: список шагов, вызовов инструментов и рассуждений ассистента.
+* Ссылка или кнопка, в которую обёрнута строка TraceLine, получает кольцо фокуса
+* @param props - пропсы списка
+* @returns контейнер шагов
+*/
+function Trace({ className, ...props }) {
+	const classes = cn("flex", "w-full", "min-w-0", "flex-col", "gap-2", "*:has-[>[data-slot=trace-line]]:flex", "*:has-[>[data-slot=trace-line]]:w-fit", "*:has-[>[data-slot=trace-line]]:max-w-full", "*:has-[>[data-slot=trace-line]]:min-w-0", "*:has-[>[data-slot=trace-line]]:rounded-md", "*:has-[>[data-slot=trace-line]]:text-left", "*:has-[>[data-slot=trace-line]]:outline-none", "*:has-[>[data-slot=trace-line]]:focus-visible:ring-3", "*:has-[>[data-slot=trace-line]]:focus-visible:ring-ring/50", className);
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "trace",
+		className: classes,
+		...props
+	});
+}
+/**
+* Строка хода работы: иконка, заголовок и описание.
+* Внутри ссылки или кнопки подсвечивается при наведении
+* @param props - пропсы строки
+* @returns строка
+*/
+function TraceLine({ className, status, ...props }) {
+	const classes = cn("flex", "w-fit", "max-w-full", "min-w-0", "items-center", "gap-2", "text-sm", "text-muted-foreground", "transition-colors", "in-[a,button]:cursor-pointer", "in-[a:hover,button:hover]:text-foreground", "data-[status=error]:text-destructive", "data-[status=error]:in-[a:hover,button:hover]:text-destructive", "data-[status=pending]:opacity-60", "data-[status=running]:*:data-[slot=trace-title]:shimmer", className);
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "trace-line",
+		"data-status": status,
+		className: classes,
+		...props
+	});
+}
+/**
+* Иконка строки: декоративная, скрыта от скринридера
+* @param props - пропсы иконки
+* @returns обёртка иконки
+*/
+function TraceIcon({ className, ...props }) {
+	const classes = cn("flex", "size-4", "shrink-0", "items-center", "justify-center", "[&_svg]:pointer-events-none", "[&_svg:not([class*=size-])]:size-4", "[[data-slot=trace-title]~&]:-ml-1", className);
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "trace-icon",
+		"aria-hidden": true,
+		className: classes,
+		...props
+	});
+}
+/**
+* Заголовок строки: обрезается многоточием
+* @param props - пропсы заголовка
+* @returns заголовок
+*/
+function TraceTitle({ className, ...props }) {
+	const classes = cn("min-w-0", "truncate", "motion-reduce:shimmer-none", className);
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "trace-title",
+		className: classes,
+		...props
+	});
+}
+/**
+* Описание строки: длительность, счётчик, путь файла
+* @param props - пропсы описания
+* @returns описание
+*/
+function TraceDescription({ className, ...props }) {
+	const classes = cn("shrink-0", "text-muted-foreground/70", "tabular-nums", className);
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "trace-description",
+		className: classes,
+		...props
+	});
+}
+/**
+* Раскрывающийся шаг: строка-переключатель и подробности под ней
+* @param props - пропсы шага
+* @returns корень раскрывающегося шага
+*/
+function TraceCollapsible({ className, onOpenChange, ...props }) {
+	const classes = cn("flex", "w-full", "min-w-0", "flex-col", className);
+	/**
+	* Шаг открыли или закрыли: наружу только флаг
+	* @param open - открыт ли
+	*/
+	const handleOpenChange = (open) => onOpenChange?.(open);
+	return /* @__PURE__ */ jsx(Collapsible.Root, {
+		"data-slot": "trace-collapsible",
+		className: classes,
+		onOpenChange: handleOpenChange,
+		...props
+	});
+}
+/**
+* Переключатель шага: строка и шеврон, который поворачивается при раскрытии
+* @param props - пропсы переключателя
+* @returns кнопка
+*/
+function TraceCollapsibleTrigger({ className, children, ...props }) {
+	const classes = cn("group/trace-collapsible-trigger", "flex", "w-fit", "max-w-full", "min-w-0", "cursor-pointer", "items-center", "gap-1", "rounded-md", "text-left", "text-muted-foreground", "transition-colors", "outline-none", "hover:text-foreground", "focus-visible:ring-3", "focus-visible:ring-ring/50", "has-[[data-status=error]]:text-destructive", className);
+	return /* @__PURE__ */ jsxs(Collapsible.Trigger, {
+		"data-slot": "trace-collapsible-trigger",
+		className: classes,
+		...props,
+		children: [children, /* @__PURE__ */ jsx(TraceIcon, {
+			className: "transition-transform group-aria-expanded/trace-collapsible-trigger:rotate-90",
+			children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
+		})]
+	});
+}
+/**
+* Подробности шага: раскрываются с анимацией, слева — вертикальная линия.
+* className применяется к внутреннему блоку с линией
+* @param props - пропсы подробностей
+* @returns раскрывающийся блок
+*/
+function TraceCollapsibleContent({ className, children, ...props }) {
+	const contentClasses = cn("h-(--collapsible-panel-height)", "min-w-0", "overflow-hidden", "transition-[height]", "duration-200", "data-starting-style:h-0", "data-ending-style:h-0");
+	const innerClasses = cn("mt-2", "mb-1", "ml-[calc(--spacing(2)-1px)]", "min-w-0", "border-l", "pr-1", "pl-4", "leading-relaxed", "wrap-break-word", "text-muted-foreground", className);
+	return /* @__PURE__ */ jsx(Collapsible.Panel, {
+		"data-slot": "trace-collapsible-content",
+		className: contentClasses,
+		...props,
+		children: /* @__PURE__ */ jsx("div", {
+			"data-slot": "trace-collapsible-content-inner",
+			className: innerClasses,
+			children
+		})
+	});
+}
+export { Trace, TraceCollapsible, TraceCollapsibleContent, TraceCollapsibleTrigger, TraceDescription, TraceIcon, TraceLine, TraceTitle };

package/dist/components/trace/types.d.ts

@@ -0,0 +1,54 @@
+import { PartPropsT } from "../../lib/part-props.js";
+import { ComponentProps } from "react";
+import { Collapsible } from "@base-ui/react/collapsible";
+/**
+ * Статус строки хода работы: выполняется, ошибка или ожидает
+ */
+export type TraceStatusT = 'running' | 'error' | 'pending';
+/**
+ * Пропсы списка хода работы
+ */
+export type TracePropsT = ComponentProps<'div'>;
+/**
+ * Пропсы строки хода работы
+ */
+export type TraceLinePropsT = ComponentProps<'span'> & {
+  /** Статус: running — заголовок мерцает, error — красный цвет, pending — приглушённая строка */
+  status?: TraceStatusT;
+};
+/**
+ * Пропсы иконки строки
+ */
+export type TraceIconPropsT = ComponentProps<'span'>;
+/**
+ * Пропсы заголовка строки
+ */
+export type TraceTitlePropsT = ComponentProps<'span'>;
+/**
+ * Пропсы описания строки
+ */
+export type TraceDescriptionPropsT = ComponentProps<'span'>;
+/**
+ * Пропсы раскрывающегося шага
+ */
+export type TraceCollapsiblePropsT = PartPropsT<Omit<Collapsible.Root.Props, 'onOpenChange'>> & {
+  /** Открыт ли шаг — контролируемый режим, вместе с onOpenChange */
+  open?: boolean;
+  /** Открыт ли шаг при первом рендере — неконтролируемый режим */
+  defaultOpen?: boolean;
+  /** Шаг открыли или закрыли */
+  onOpenChange?: (open: boolean) => void;
+  /** Отключённый шаг: не раскрывается */
+  disabled?: boolean;
+};
+/**
+ * Пропсы переключателя шага
+ */
+export type TraceCollapsibleTriggerPropsT = PartPropsT<Collapsible.Trigger.Props>;
+/**
+ * Пропсы подробностей шага
+ */
+export type TraceCollapsibleContentPropsT = PartPropsT<Collapsible.Panel.Props> & {
+  /** Держать подробности в DOM и когда шаг закрыт */
+  keepMounted?: boolean;
+};

package/dist/components/typography/index.d.ts

@@ -0,0 +1,3 @@
+import { TypographyPropsT, TypographyVariantT, typographyVariants } from "./types.js";
+import { Typography } from "./typography.js";
+export { Typography, type TypographyPropsT, type TypographyVariantT, typographyVariants };

package/dist/components/typography/index.js

@@ -0,0 +1,3 @@
+import { typographyVariants } from "./types.js";
+import { Typography } from "./typography.js";
+export { Typography, typographyVariants };

package/dist/components/typography/types.d.ts

@@ -0,0 +1,29 @@
+import { VariantProps } from "class-variance-authority";
+import { useRender } from "@base-ui/react/use-render";
+/**
+ * Стили текста: заголовки, абзац, цитата, список, код и вспомогательные стили.
+ * Экспортируются, чтобы оформить текстом другой элемент: typographyVariants({ variant: 'lead' }).
+ */
+export declare const typographyVariants: (props?: ({
+  variant?: "link" | "blockquote" | "code" | "h1" | "h2" | "h3" | "h4" | "p" | "small" | "list" | "lead" | "large" | "muted" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * Стили текста
+ */
+type TypographyVariantsT = VariantProps<typeof typographyVariants>;
+/**
+ * Стиль текста
+ */
+export type TypographyVariantT = NonNullable<TypographyVariantsT['variant']>;
+/**
+ * Пропсы текста
+ */
+export type TypographyPropsT = useRender.ComponentProps<'p'> & {
+  /**
+   * Стиль: h1–h4 — заголовки, p — абзац, blockquote — цитата, list — маркированный список,
+   * code — код в строке, lead — вводный абзац, large, small, muted — крупный, мелкий
+   * и приглушённый текст, link — ссылка. Задаёт и элемент: h1 → <h1>, list → <ul>, lead → <p>
+   */
+  variant?: TypographyVariantT;
+};
+export {};

package/dist/components/typography/types.js

@@ -0,0 +1,25 @@
+import { cva } from "class-variance-authority";
+// src/components/typography/types.ts
+/**
+* Стили текста: заголовки, абзац, цитата, список, код и вспомогательные стили.
+* Экспортируются, чтобы оформить текстом другой элемент: typographyVariants({ variant: 'lead' }).
+*/
+const typographyVariants = cva("", {
+	variants: { variant: {
+		h1: "scroll-m-20 text-4xl font-extrabold tracking-tight text-balance",
+		h2: "scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0",
+		h3: "scroll-m-20 text-2xl font-semibold tracking-tight",
+		h4: "scroll-m-20 text-xl font-semibold tracking-tight",
+		p: "leading-7 [&:not(:first-child)]:mt-6",
+		blockquote: "mt-6 border-l-2 pl-6 italic",
+		list: "my-6 ml-6 list-disc [&>li]:mt-2",
+		code: "relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold",
+		lead: "text-xl text-muted-foreground",
+		large: "text-lg font-semibold",
+		small: "text-sm leading-none font-medium",
+		muted: "text-sm text-muted-foreground",
+		link: "font-medium text-primary underline underline-offset-4"
+	} },
+	defaultVariants: { variant: "p" }
+});
+export { typographyVariants };

package/dist/components/typography/typography.d.ts

@@ -0,0 +1,7 @@
+import { TypographyPropsT } from "./types.js";
+/**
+ * Текст в одном из стилей типографики: заголовок, абзац, цитата, список, код
+ * @param props - пропсы текста
+ * @returns элемент стиля или дочерний элемент в этом стиле (render)
+ */
+export declare function Typography({ className, variant, render, ...props }: TypographyPropsT): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;