@connectorvol/tree 1.1.0 → 1.2.0

package/dist/(models)/chessTreeNode.d.ts

@@ -1,15 +0,0 @@
-import type { PgnNodeCustomData } from "./pgnNodeCustomData.js";
-/**
- * Данная модель используется для хранения дерева в виде объекта.
- */
-export type ChessTreeNode = {
-    id: string;
-    children: ChessTreeNode[];
-    parentId?: string;
-    data: PgnNodeCustomData;
-};
-export type TChessTree = {
-    moves: ChessTreeNode;
-    headers: Map<string, string>;
-    comments?: string[];
-};

package/dist/(models)/chessTreeNode.js

@@ -1 +0,0 @@
-export {};

package/dist/(models)/pgnNodeCustomData.d.ts

@@ -1,10 +0,0 @@
-import type { Comment } from "@connectorvol/chessops/pgn";
-import type { PgnNodeData } from "@connectorvol/chessops/pgn";
-export type PgnNodeCustomData = PgnNodeData & {
-    fen: string;
-    san: string;
-    ply: number;
-    fullMoves: number;
-    /** Возвращает результат парсинга первого комментария (кэш для производительности) */
-    parsedFirstComment?: Comment | null;
-};

package/dist/(models)/pgnNodeCustomData.js

@@ -1 +0,0 @@
-export {};

package/dist/(utils)/context.d.ts

@@ -1,13 +0,0 @@
-import { ChessTree } from "../(classes)/chessTree.svelte.js";
-interface GameContext {
-    chessTree: ChessTree;
-    onSelectNode: () => void;
-    onDeleteVariant: () => void;
-    setChessFen: (fen: string) => void;
-    setChessboardFen: (animationTime?: number) => void;
-    /** Возвращает true, если клик по ходу в дереве переключает текущий узел и доску */
-    selectable: boolean;
-}
-export declare function initGameContext(chessTree: ChessTree, onSelectNode: () => void, onDeleteVariant: () => void, setChessFen: (fen: string) => void, setChessboardFen: (animationTime?: number) => void, selectable?: boolean): void;
-export declare function getGameContext(): GameContext;
-export {};

package/dist/(utils)/context.js

@@ -1,17 +0,0 @@
-import { getContext, setContext } from "svelte";
-import { ChessTree } from "../(classes)/chessTree.svelte.js";
-// import { Game } from '../(classes)/game.svelte.js';
-const CHESS_TREE = "chessTree";
-export function initGameContext(chessTree, onSelectNode, onDeleteVariant, setChessFen, setChessboardFen, selectable = true) {
-    setContext(CHESS_TREE, {
-        chessTree,
-        onSelectNode,
-        onDeleteVariant,
-        setChessFen,
-        setChessboardFen,
-        selectable,
-    });
-}
-export function getGameContext() {
-    return getContext(CHESS_TREE);
-}

package/dist/(utils)/createPgnFromTree.d.ts

@@ -1,2 +0,0 @@
-import type { TChessTree } from "../(models)/chessTreeNode.js";
-export declare function createPgnFromTree(tree: TChessTree): string;

package/dist/(utils)/createPgnFromTree.js

@@ -1,5 +0,0 @@
-import { makePgn } from "@connectorvol/chessops/pgn";
-export function createPgnFromTree(tree) {
-    // @ts-expect-error expcted san
-    return makePgn(tree);
-}

package/dist/(utils)/parseSanMove.d.ts

@@ -1,27 +0,0 @@
-import { Color, PieceType } from "@connectorvol/shared";
-/**
- * Представляет информацию о ходе, извлеченную из SAN нотации
- */
-export interface ParsedSanMove {
-    /** Возвращает тип фигуры */
-    pieceType: PieceType;
-    /** Возвращает цвет фигуры */
-    color: Color;
-    /** Возвращает true если это рокировка */
-    isCastling: boolean;
-    /** Возвращает true если это взятие */
-    isCapture: boolean;
-    /** Возвращает true если это шах */
-    isCheck: boolean;
-    /** Возвращает true если это мат */
-    isCheckmate: boolean;
-    /** Возвращает координаты назначения (например, "f3", "e4") */
-    destination?: string;
-}
-/**
- * Представляет функцию для парсинга SAN нотации в информацию о ходе
- * @param san - SAN нотация хода (например, "Nf3", "exd4", "O-O")
- * @param ply - Номер полухода для определения цвета фигуры
- * @returns Объект с информацией о ходе
- */
-export declare function parseSanMove(san: string, ply: number): ParsedSanMove;

package/dist/(utils)/parseSanMove.js

@@ -1,84 +0,0 @@
-import { Color, PieceType } from "@connectorvol/shared";
-/**
- * Представляет функцию для парсинга SAN нотации в информацию о ходе
- * @param san - SAN нотация хода (например, "Nf3", "exd4", "O-O")
- * @param ply - Номер полухода для определения цвета фигуры
- * @returns Объект с информацией о ходе
- */
-export function parseSanMove(san, ply) {
-    const color = ply % 2 === 1 ? Color.WHITE : Color.BLACK;
-    let cleanSan = san;
-    const isCheck = san.includes("+");
-    const isCheckmate = san.includes("#");
-    if (isCheck || isCheckmate) {
-        // Удаляем символы шаха и мата для анализа
-        cleanSan = san.replace(/[+#]$/, "");
-    }
-    // Проверяем рокировку
-    if (cleanSan === "O-O" || cleanSan === "O-O-O") {
-        return {
-            pieceType: PieceType.KING,
-            color,
-            isCastling: true,
-            isCapture: false,
-            isCheck,
-            isCheckmate,
-        };
-    }
-    // Определяем тип фигуры по первому символу
-    let pieceType;
-    let moveNotation = cleanSan;
-    if (cleanSan[0] >= "A" && cleanSan[0] <= "Z") {
-        // Ход фигуры (не пешки)
-        switch (cleanSan[0]) {
-            case "K":
-                pieceType = PieceType.KING;
-                break;
-            case "Q":
-                pieceType = PieceType.QUEEN;
-                break;
-            case "R":
-                pieceType = PieceType.ROOK;
-                break;
-            case "B":
-                pieceType = PieceType.BISHOP;
-                break;
-            case "N":
-                pieceType = PieceType.KNIGHT;
-                break;
-            default:
-                pieceType = PieceType.PAWN;
-        }
-        moveNotation = cleanSan.slice(1);
-    }
-    else {
-        // Ход пешки
-        pieceType = PieceType.PAWN;
-    }
-    // Определяем взятие
-    const isCapture = moveNotation.includes("x");
-    // Извлекаем координаты назначения
-    let destination = "";
-    if (isCapture) {
-        // После 'x' идут координаты назначения
-        const xIndex = moveNotation.indexOf("x");
-        destination = moveNotation.slice(xIndex + 1);
-    }
-    else {
-        // Последние 2 символа - координаты назначения
-        destination = moveNotation.slice(-2);
-    }
-    // Обрабатываем превращение пешки
-    if (destination.includes("=")) {
-        destination = destination.split("=")[0];
-    }
-    return {
-        pieceType,
-        color,
-        destination,
-        isCastling: false,
-        isCapture,
-        isCheck,
-        isCheckmate,
-    };
-}

package/dist/(utils)/scrollToActiveMove.d.ts

@@ -1,7 +0,0 @@
-export declare const ACTIVE_MOVE_CLASS = "active-move-in-tree-viewer";
-/**
- * Представляет функцию для автоматического скролла до активного хода, если он не виден
- * @param containerId - ID контейнера с деревом ходов
- * @param behavior - Поведение скролла ('smooth' | 'instant' | 'auto')
- */
-export declare function scrollToActiveMoveIfNeeded(containerId?: string, behavior?: ScrollBehavior): void;

package/dist/(utils)/scrollToActiveMove.js

@@ -1,72 +0,0 @@
-export const ACTIVE_MOVE_CLASS = "active-move-in-tree-viewer";
-/**
- * Представляет функцию для плавного скролла до активного хода в дереве ходов
- * @param containerId - ID контейнера с деревом ходов
- * @param behavior - Поведение скролла ('smooth' | 'instant' | 'auto')
- */
-function scrollToActiveMove(containerId = "tree-viewer-container", behavior = "instant") {
-    const container = document.getElementById(containerId);
-    if (!container) {
-        console.warn(`Контейнер с ID "${containerId}" не найден`);
-        return;
-    }
-    // Ищем активный элемент по классу outline-primary
-    const activeElement = container.querySelector(`.${ACTIVE_MOVE_CLASS}`);
-    if (!activeElement) {
-        console.warn("Активный ход не найден в дереве");
-        return;
-    }
-    // Получаем позицию элемента относительно контейнера
-    const containerRect = container.getBoundingClientRect();
-    const elementRect = activeElement.getBoundingClientRect();
-    // Вычисляем текущую позицию скролла
-    const currentScrollTop = container.scrollTop;
-    const currentScrollLeft = container.scrollLeft;
-    // Вычисляем целевую позицию скролла
-    const targetScrollTop = currentScrollTop +
-        elementRect.top -
-        containerRect.top -
-        containerRect.height / 2 +
-        elementRect.height / 2;
-    const targetScrollLeft = currentScrollLeft +
-        elementRect.left -
-        containerRect.left -
-        containerRect.width / 2 +
-        elementRect.width / 2;
-    // Выполняем скролл
-    container.scrollTo({
-        top: Math.max(0, targetScrollTop),
-        left: Math.max(0, targetScrollLeft),
-        behavior,
-    });
-}
-/**
- * Представляет функцию для проверки, виден ли активный ход в контейнере
- * @param containerId - ID контейнера с деревом ходов
- * @returns Возвращает true, если активный ход полностью виден
- */
-function isActiveMoveVisible(containerId = "tree-viewer-container") {
-    const container = document.getElementById(containerId);
-    if (!container)
-        return false;
-    const activeElement = container.querySelector(".outline-primary");
-    if (!activeElement)
-        return false;
-    const containerRect = container.getBoundingClientRect();
-    const elementRect = activeElement.getBoundingClientRect();
-    // Проверяем, что элемент полностью виден в контейнере
-    return (elementRect.top >= containerRect.top &&
-        elementRect.bottom <= containerRect.bottom &&
-        elementRect.left >= containerRect.left &&
-        elementRect.right <= containerRect.right);
-}
-/**
- * Представляет функцию для автоматического скролла до активного хода, если он не виден
- * @param containerId - ID контейнера с деревом ходов
- * @param behavior - Поведение скролла ('smooth' | 'instant' | 'auto')
- */
-export function scrollToActiveMoveIfNeeded(containerId = "tree-viewer-container", behavior = "instant") {
-    if (!isActiveMoveVisible(containerId)) {
-        scrollToActiveMove(containerId, behavior);
-    }
-}

package/dist/(utils)/scrollToStart.d.ts

@@ -1,6 +0,0 @@
-/**
- * Представляет функцию для скролла к началу дерева ходов (первый видимый ход)
- * @param containerId - ID контейнера с деревом ходов
- * @param behavior - Поведение скролла ('smooth' | 'instant' | 'auto')
- */
-export declare function scrollToStart(containerId?: string, behavior?: ScrollBehavior): void;

package/dist/(utils)/scrollToStart.js

@@ -1,46 +0,0 @@
-/**
- * Представляет функцию для скролла к началу дерева ходов (первый видимый ход)
- * @param containerId - ID контейнера с деревом ходов
- * @param behavior - Поведение скролла ('smooth' | 'instant' | 'auto')
- */
-export function scrollToStart(containerId = "tree-viewer-container", behavior = "instant") {
-    const container = document.getElementById(containerId);
-    if (!container) {
-        console.warn(`Контейнер с ID "${containerId}" не найден`);
-        return;
-    }
-    // Ищем первый элемент с data-node-id (первый видимый ход)
-    const firstMoveElement = container.querySelector("[data-node-id]");
-    if (!firstMoveElement) {
-        // Если нет ходов с data-node-id, скроллим в самое начало контейнера
-        container.scrollTo({
-            top: 0,
-            left: 0,
-            behavior,
-        });
-        return;
-    }
-    // Получаем позицию элемента относительно контейнера
-    const containerRect = container.getBoundingClientRect();
-    const elementRect = firstMoveElement.getBoundingClientRect();
-    // Вычисляем текущую позицию скролла
-    const currentScrollTop = container.scrollTop;
-    const currentScrollLeft = container.scrollLeft;
-    // Вычисляем целевую позицию скролла
-    const targetScrollTop = currentScrollTop +
-        elementRect.top -
-        containerRect.top -
-        containerRect.height / 2 +
-        elementRect.height / 2;
-    const targetScrollLeft = currentScrollLeft +
-        elementRect.left -
-        containerRect.left -
-        containerRect.width / 2 +
-        elementRect.width / 2;
-    // Выполняем скролл
-    container.scrollTo({
-        top: Math.max(0, targetScrollTop),
-        left: Math.max(0, targetScrollLeft),
-        behavior,
-    });
-}

package/dist/(utils)/transformNag.d.ts

@@ -1 +0,0 @@
-export declare function transformNag(nag: number): string;

package/dist/(utils)/transformNag.js

@@ -1,34 +0,0 @@
-export function transformNag(nag) {
-    if (nag === undefined)
-        return "";
-    switch (nag) {
-        case 1:
-            return "!";
-        case 2:
-            return "?";
-        case 3:
-            return "!!";
-        case 5:
-            return "!?";
-        case 6:
-            return "?!";
-        case 7:
-            // TODO: Переделать на нормальное отображение
-            return "only move";
-        case 10:
-            return "=";
-        case 13:
-            return "∞";
-        case 14:
-            return "⩲";
-        case 16:
-            return "±";
-        case 18:
-            return "+-";
-        case 40:
-            return "→";
-        default: {
-            return "not implemented " + nag;
-        }
-    }
-}

package/dist/(utils)/transformPgnToChessNode.d.ts

@@ -1,7 +0,0 @@
-import type { TChessTree } from "../(models)/chessTreeNode.js";
-type ReturnType = {
-    rootNode: TChessTree;
-    initialFen: string;
-};
-export declare function transformPgnToChessNode(pgn: string): ReturnType;
-export {};

package/dist/(utils)/transformPgnToChessNode.js

@@ -1,56 +0,0 @@
-import { makeFen } from "@connectorvol/chessops/fen";
-import { parseComment, parsePgn, startingPosition, transform } from "@connectorvol/chessops/pgn";
-import { makeSanAndPlay, parseSan } from "@connectorvol/chessops/san";
-import { calculatePly, generateId } from "@connectorvol/shared";
-export function transformPgnToChessNode(pgn) {
-    const games = parsePgn(pgn);
-    const game = games[0];
-    const position = startingPosition(game.headers).unwrap();
-    const initialFen = makeFen(position.toSetup());
-    const moves = transform(game.moves, position, (pos, node) => {
-        const move = parseSan(pos, node.san);
-        if (!move) {
-            return;
-        }
-        const san = makeSanAndPlay(pos, move); // Mutating pos!
-        const fen = makeFen(pos.toSetup());
-        const { halfMoves, fullMoves } = calculatePly(fen);
-        const firstComment = node.comments?.[0];
-        return {
-            ...node,
-            san,
-            fen,
-            ply: halfMoves,
-            fullMoves,
-            parsedFirstComment: firstComment ? parseComment(firstComment) : null,
-        };
-    });
-    const rootNode = {
-        children: moves.children,
-        data: { fen: initialFen, san: "", ply: 0, fullMoves: 0 },
-        id: "",
-        parentId: undefined,
-    };
-    setParentIdAndId(rootNode);
-    return {
-        rootNode: structuredClone({
-            moves: rootNode,
-            headers: game.headers,
-            comments: game.comments,
-        }),
-        initialFen,
-    };
-}
-function setParentIdAndId(rootNode) {
-    const stack = [
-        { node: rootNode, parentId: undefined },
-    ];
-    while (stack.length > 0) {
-        const { node, parentId } = stack.pop();
-        node.id = generateId();
-        node.parentId = parentId;
-        for (let i = node.children.length - 1; i >= 0; i--) {
-            stack.push({ node: node.children[i], parentId: node.id });
-        }
-    }
-}

package/dist/components/ui/button/button.svelte

@@ -1,82 +0,0 @@
-<script lang="ts" module>
-	import { cn, type WithElementRef } from "../../../utils.js";
-	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from "svelte/elements";
-	import { type VariantProps, tv } from "tailwind-variants";
-
-	export const buttonVariants = tv({
-		base: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium outline-none transition-all focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
-		variants: {
-			variant: {
-				default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
-				destructive:
-					"bg-destructive shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 text-white",
-				outline:
-					"bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 border",
-				secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
-				ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-				link: "text-primary underline-offset-4 hover:underline",
-			},
-			size: {
-				default: "h-9 px-4 py-2 has-[>svg]:px-3",
-				sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
-				lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
-				icon: "size-9",
-				"icon-sm": "size-8",
-				"icon-lg": "size-10",
-			},
-		},
-		defaultVariants: {
-			variant: "default",
-			size: "default",
-		},
-	});
-
-	export type ButtonVariant = VariantProps<typeof buttonVariants>["variant"];
-	export type ButtonSize = VariantProps<typeof buttonVariants>["size"];
-
-	export type ButtonProps = WithElementRef<HTMLButtonAttributes> &
-		WithElementRef<HTMLAnchorAttributes> & {
-			variant?: ButtonVariant;
-			size?: ButtonSize;
-		};
-</script>
-
-<script lang="ts">
-	let {
-		class: className,
-		variant = "default",
-		size = "default",
-		ref = $bindable(null),
-		href = undefined,
-		type = "button",
-		disabled,
-		children,
-		...restProps
-	}: ButtonProps = $props();
-</script>
-
-{#if href}
-	<a
-		bind:this={ref}
-		data-slot="button"
-		class={cn(buttonVariants({ variant, size }), className)}
-		href={disabled ? undefined : href}
-		aria-disabled={disabled}
-		role={disabled ? "link" : undefined}
-		tabindex={disabled ? -1 : undefined}
-		{...restProps}
-	>
-		{@render children?.()}
-	</a>
-{:else}
-	<button
-		bind:this={ref}
-		data-slot="button"
-		class={cn(buttonVariants({ variant, size }), className)}
-		{type}
-		{disabled}
-		{...restProps}
-	>
-		{@render children?.()}
-	</button>
-{/if}

package/dist/components/ui/button/button.svelte.d.ts

@@ -1,64 +0,0 @@
-import { type WithElementRef } from "../../../utils.js";
-import type { HTMLAnchorAttributes, HTMLButtonAttributes } from "svelte/elements";
-import { type VariantProps } from "tailwind-variants";
-export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
-    variant: {
-        default: string;
-        destructive: string;
-        outline: string;
-        secondary: string;
-        ghost: string;
-        link: string;
-    };
-    size: {
-        default: string;
-        sm: string;
-        lg: string;
-        icon: string;
-        "icon-sm": string;
-        "icon-lg": string;
-    };
-}, undefined, "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium outline-none transition-all focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", {
-    variant: {
-        default: string;
-        destructive: string;
-        outline: string;
-        secondary: string;
-        ghost: string;
-        link: string;
-    };
-    size: {
-        default: string;
-        sm: string;
-        lg: string;
-        icon: string;
-        "icon-sm": string;
-        "icon-lg": string;
-    };
-}, undefined, import("tailwind-variants").TVReturnType<{
-    variant: {
-        default: string;
-        destructive: string;
-        outline: string;
-        secondary: string;
-        ghost: string;
-        link: string;
-    };
-    size: {
-        default: string;
-        sm: string;
-        lg: string;
-        icon: string;
-        "icon-sm": string;
-        "icon-lg": string;
-    };
-}, undefined, "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium outline-none transition-all focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", unknown, unknown, undefined>>;
-export type ButtonVariant = VariantProps<typeof buttonVariants>["variant"];
-export type ButtonSize = VariantProps<typeof buttonVariants>["size"];
-export type ButtonProps = WithElementRef<HTMLButtonAttributes> & WithElementRef<HTMLAnchorAttributes> & {
-    variant?: ButtonVariant;
-    size?: ButtonSize;
-};
-declare const Button: import("svelte").Component<ButtonProps, {}, "ref">;
-type Button = ReturnType<typeof Button>;
-export default Button;

package/dist/components/ui/button/index.d.ts

@@ -1,2 +0,0 @@
-import Root, { type ButtonProps, type ButtonSize, type ButtonVariant, buttonVariants } from "./button.svelte";
-export { Root, type ButtonProps as Props, Root as Button, buttonVariants, type ButtonProps, type ButtonSize, type ButtonVariant, };

package/dist/components/ui/button/index.js

@@ -1,4 +0,0 @@
-import Root, { buttonVariants, } from "./button.svelte";
-export { Root, 
-//
-Root as Button, buttonVariants, };

package/dist/components/ui/button-group/button-group-separator.svelte

@@ -1,20 +0,0 @@
-<script lang="ts">
-	import { cn } from "../../../utils.js";
-	import type { ComponentProps } from "svelte";
-	import { Separator } from "../separator/index.js";
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		orientation = "vertical",
-		...restProps
-	}: ComponentProps<typeof Separator> = $props();
-</script>
-
-<Separator
-	bind:ref
-	data-slot="button-group-separator"
-	{orientation}
-	class={cn("bg-input relative !m-0 self-stretch data-[orientation=vertical]:h-auto", className)}
-	{...restProps}
-/>

package/dist/components/ui/button-group/button-group-separator.svelte.d.ts

@@ -1,13 +0,0 @@
-declare const ButtonGroupSeparator: import("svelte").Component<Omit<{
-    orientation?: import("bits-ui").Orientation;
-    decorative?: boolean;
-}, "child" | "children"> & {
-    child?: import("svelte").Snippet<[{
-        props: Record<string, unknown>;
-    }]> | undefined;
-    children?: import("svelte").Snippet<[]> | undefined;
-    style?: import("bits-ui").StyleProperties | string | null | undefined;
-    ref?: HTMLElement | null | undefined;
-} & import("bits-ui").Without<import("bits-ui").BitsPrimitiveDivAttributes, import("bits-ui").SeparatorRootPropsWithoutHTML>, {}, "ref">;
-type ButtonGroupSeparator = ReturnType<typeof ButtonGroupSeparator>;
-export default ButtonGroupSeparator;

package/dist/components/ui/button-group/button-group-text.svelte

@@ -1,30 +0,0 @@
-<script lang="ts">
-	import { cn, type WithElementRef } from "../../../utils.js";
-	import type { HTMLAttributes } from "svelte/elements";
-	import type { Snippet } from "svelte";
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		child,
-		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
-		child?: Snippet<[{ props: Record<string, unknown> }]>;
-	} = $props();
-
-	const mergedProps = $derived({
-		...restProps,
-		class: cn(
-			"bg-muted shadow-xs flex items-center gap-2 rounded-md border px-4 text-sm font-medium [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none",
-			className
-		),
-	});
-</script>
-
-{#if child}
-	{@render child({ props: mergedProps })}
-{:else}
-	<div bind:this={ref} {...mergedProps}>
-		{@render mergedProps.children?.()}
-	</div>
-{/if}