@connectorvol/tree 2.1.2 → 4.1.0

package/dist/(utils)/treeViewerPanelNavigation.svelte.js

@@ -0,0 +1,257 @@
+import { scrollToActiveMoveIfNeeded } from "./scrollToActiveMove.js";
+import { scrollToStart } from "./scrollToStart.js";
+const panelNavByChessTree = new WeakMap();
+/**
+ * Представляет фабрику общего состояния навигации по дереву (кнопки панели и клавиши).
+ */
+function createTreeViewerPanelNavigation(chessTree) {
+    let setChessFenImpl = (_fen) => { };
+    let setChessboardFenImpl = (_animationTime) => { };
+    /** Представляет привязку колбэков доски к актуальным функциям родительского экрана. */
+    function bindCallbacks(setChessFen, setChessboardFen) {
+        setChessFenImpl = setChessFen;
+        setChessboardFenImpl = setChessboardFen;
+    }
+    let highlightedButtons = $state({
+        previous: false,
+        next: false,
+        start: false,
+        end: false,
+    });
+    let isPlaying = $state(false);
+    let playInterval = null;
+    let variantNavigator = null;
+    /** Представляет установку ссылки на виджет выбора варианта (рендерится в TreeViewer). */
+    function setVariantNavigator(nav) {
+        variantNavigator = nav;
+    }
+    const isCurrentNodeInDrillHeader = () => {
+        const crumbs = chessTree.drillForkBreadcrumbs;
+        const currentNodeId = chessTree.currentNode.id;
+        return crumbs.some((crumb) => crumb.id === currentNodeId);
+    };
+    const requestDrillExitPrompt = () => {
+        chessTree.requestDrillExitPrompt();
+    };
+    /** Представляет выбор предыдущего узла по дереву. */
+    function selectPreviousNode() {
+        const parentNode = chessTree.getCurrentNodeParent();
+        if (parentNode) {
+            chessTree.currentNode = parentNode;
+            setChessFenImpl(parentNode.data.fen);
+        }
+        setChessboardFenImpl();
+        setTimeout(() => scrollToActiveMoveIfNeeded(), 50);
+    }
+    /** Представляет выбор дочернего узла и синхронизацию доски. */
+    function selectChildNode(childNode, animationTime = 0) {
+        chessTree.currentNode = childNode;
+        setChessFenImpl(childNode.data.fen);
+        setChessboardFenImpl(animationTime);
+        setTimeout(() => scrollToActiveMoveIfNeeded(), 50);
+    }
+    /** Представляет переход к следующему ходу (первый ребёнок). */
+    function selectNextNode(animationTime = 0) {
+        const childNode = chessTree.currentNode?.children?.[0];
+        if (childNode)
+            selectChildNode(childNode, animationTime);
+        else {
+            setChessboardFenImpl(animationTime);
+            setTimeout(() => scrollToActiveMoveIfNeeded(), 50);
+        }
+    }
+    /** Представляет переход к началу главной линии (корневому узлу). */
+    function stepToStart() {
+        chessTree.currentNode = chessTree.rootNode.moves;
+        setChessFenImpl(chessTree.rootNode.moves.data.fen);
+        setChessboardFenImpl();
+        highlightButton("start");
+        setTimeout(() => scrollToStart(), 50);
+    }
+    /** Представляет переход к концу главной линии. */
+    function stepToEnd() {
+        let currentNode = chessTree.currentNode;
+        while (currentNode.children && currentNode.children.length > 0) {
+            currentNode = currentNode.children[0];
+        }
+        chessTree.currentNode = currentNode;
+        setChessFenImpl(currentNode.data.fen);
+        setChessboardFenImpl();
+        highlightButton("end");
+        setTimeout(() => scrollToActiveMoveIfNeeded(), 50);
+    }
+    /** Представляет кратковременную подсветку кнопки навигации на панели. */
+    function highlightButton(button) {
+        highlightedButtons[button] = true;
+        setTimeout(() => {
+            highlightedButtons[button] = false;
+        }, 100);
+    }
+    /** Представляет запуск автопроигрывания ходов. */
+    function startAutoPlay() {
+        if (isPlaying || !chessTree.currentNode?.children?.length)
+            return;
+        isPlaying = true;
+        playInterval = setInterval(() => {
+            const hasNextNode = (chessTree.currentNode?.children?.length ?? 0) > 0;
+            if (hasNextNode) {
+                selectNextNode(1000);
+            }
+            else {
+                stopAutoPlay();
+            }
+        }, 1000);
+    }
+    /** Представляет остановку автопроигрывания ходов. */
+    function stopAutoPlay() {
+        isPlaying = false;
+        if (playInterval !== null) {
+            clearInterval(playInterval);
+            playInterval = null;
+        }
+    }
+    /** Представляет переключение автопроигрывания. */
+    function toggleAutoPlay() {
+        if (isPlaying) {
+            stopAutoPlay();
+        }
+        else {
+            startAutoPlay();
+        }
+    }
+    /**
+     * Представляет проверку: целевой узел остаётся внутри текущего drill-down (если он активен).
+     * Возвращает true, если drill-down не активен или target находится внутри ветки drillForkParent.
+     */
+    const isTargetInsideActiveDrill = (target) => {
+        const drillRoot = chessTree.drillForkParent;
+        if (!drillRoot)
+            return true;
+        let current = target;
+        while (current) {
+            if (current.id === drillRoot.id)
+                return true;
+            current = chessTree.getNodeParent(current);
+        }
+        return false;
+    };
+    /**
+     * Представляет переход к вершине текущего дерева вариантов (drill-down уровня).
+     * Возвращает true, если drill-down активен и переход выполнен.
+     */
+    const stepToDrillTop = () => {
+        const drillRoot = chessTree.drillForkParent;
+        if (!drillRoot)
+            return false;
+        chessTree.currentNode = drillRoot;
+        setChessFenImpl(drillRoot.data.fen);
+        setChessboardFenImpl();
+        setTimeout(() => scrollToActiveMoveIfNeeded(), 50);
+        return true;
+    };
+    /** Представляет обработчик клавиш окна для навигации по дереву. */
+    function onWindowKeyDown(e) {
+        if (chessTree.drillExitPromptOpen) {
+            return;
+        }
+        if (variantNavigator?.handleKeyDown(e)) {
+            e.preventDefault();
+            return;
+        }
+        if (e.key === "ArrowUp") {
+            variantNavigator?.forceClose();
+            if (chessTree.isVariationDrillDownActive() &&
+                isCurrentNodeInDrillHeader()) {
+                requestDrillExitPrompt();
+                e.preventDefault();
+                return;
+            }
+            if (!stepToDrillTop()) {
+                stepToStart();
+            }
+            e.preventDefault();
+        }
+        else if (e.key === "ArrowDown") {
+            variantNavigator?.forceClose();
+            if (chessTree.isVariationDrillDownActive() &&
+                isCurrentNodeInDrillHeader()) {
+                requestDrillExitPrompt();
+                e.preventDefault();
+                return;
+            }
+            stepToEnd();
+            e.preventDefault();
+        }
+        else if (e.key === "ArrowLeft") {
+            variantNavigator?.forceClose();
+            if (chessTree.isVariationDrillDownActive() &&
+                isCurrentNodeInDrillHeader()) {
+                requestDrillExitPrompt();
+                e.preventDefault();
+                return;
+            }
+            const parentNode = chessTree.getCurrentNodeParent();
+            if (chessTree.isVariationDrillDownActive() &&
+                isCurrentNodeInDrillHeader() &&
+                (!parentNode || !isTargetInsideActiveDrill(parentNode))) {
+                requestDrillExitPrompt();
+            }
+            else if (parentNode && isTargetInsideActiveDrill(parentNode)) {
+                selectPreviousNode();
+                highlightButton("previous");
+            }
+            e.preventDefault();
+        }
+        else if (e.key === "ArrowRight") {
+            const childNode = chessTree.currentNode?.children?.[0];
+            if (childNode && !isTargetInsideActiveDrill(childNode)) {
+                e.preventDefault();
+                return;
+            }
+            if ((chessTree.currentNode?.children?.length ?? 0) > 1) {
+                variantNavigator?.open();
+            }
+            else {
+                variantNavigator?.forceClose();
+                selectNextNode();
+                highlightButton("next");
+            }
+            e.preventDefault();
+        }
+        else if (e.key === " ") {
+            variantNavigator?.forceClose();
+            toggleAutoPlay();
+            e.preventDefault();
+        }
+    }
+    /** Представляет освобождение таймеров автопроигрывания при размонтировании TreeViewer. */
+    function dispose() {
+        stopAutoPlay();
+    }
+    return {
+        bindCallbacks,
+        setVariantNavigator,
+        highlightedButtons,
+        isPlaying,
+        onWindowKeyDown,
+        dispose,
+        selectPreviousNode,
+        selectNextNode,
+        selectChildNode,
+        stepToStart,
+        stepToEnd,
+        toggleAutoPlay,
+        highlightButton,
+    };
+}
+/**
+ * Представляет получение или создание общего объекта навигации для пары TreeViewer + TreeViewerPanelManager.
+ */
+export function getOrCreateTreeViewerPanelNavigation(chessTree) {
+    let nav = panelNavByChessTree.get(chessTree);
+    if (!nav) {
+        nav = createTreeViewerPanelNavigation(chessTree);
+        panelNavByChessTree.set(chessTree, nav);
+    }
+    return nav;
+}

package/dist/components/ui/button/button-variants.d.ts

@@ -0,0 +1,65 @@
+import { type WithElementRef } from "../../../utils.js";
+import type { HTMLAnchorAttributes, HTMLButtonAttributes } from "svelte/elements";
+import { type VariantProps } from "tailwind-variants";
+/** Представляет набор классов Tailwind и вариантов оформления кнопки. */
+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"];
+/** Представляет пропсы компонента кнопки (элемент button или ссылка). */
+export type ButtonProps = WithElementRef<HTMLButtonAttributes> & WithElementRef<HTMLAnchorAttributes> & {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+};

package/dist/components/ui/button/button-variants.js

@@ -0,0 +1,28 @@
+import {} from "../../../utils.js";
+import { tv } from "tailwind-variants";
+/** Представляет набор классов Tailwind и вариантов оформления кнопки. */
+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",
+    },
+});

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

@@ -1,47 +1,7 @@
-<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">
+	import { cn } from "../../../utils.js";
+	import { buttonVariants, type ButtonProps } from "./button-variants.js";
+
 	let {
 		class: className,
 		variant = "default",

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

@@ -1,64 +1,4 @@
-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;
-};
+import { type ButtonProps } from "./button-variants.js";
 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 +1,3 @@
-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, };
+import Root from "./button.svelte";
+export { Root, Root as Button };
+export { buttonVariants, type ButtonProps, type ButtonProps as Props, type ButtonSize, type ButtonVariant, } from "./button-variants.js";

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

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

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

@@ -1,7 +1,7 @@
 declare const ButtonGroupSeparator: import("svelte").Component<Omit<{
     orientation?: import("bits-ui").Orientation;
     decorative?: boolean;
-}, "child" | "children"> & {
+}, "children" | "child"> & {
     child?: import("svelte").Snippet<[{
         props: Record<string, unknown>;
     }]> | undefined;

package/dist/index.d.ts

@@ -5,4 +5,5 @@ import TreeViewer from "./(components)/TreeViewer.svelte";
 import ImportToPgn from "./(components)/ImportToPgn.svelte";
 import { createPgnFromTree } from "./(utils)/createPgnFromTree.js";
 import TreeViewerPanelManager from "./(components)/TreeViewerPanelManager.svelte";
-export { ChessTree, type ChessTreeNode, type TChessTree, transformPgnToChessNode, TreeViewer, ImportToPgn, createPgnFromTree, TreeViewerPanelManager, };
+import NagBadges from "./(components)/NagBadges.svelte";
+export { ChessTree, type ChessTreeNode, type TChessTree, transformPgnToChessNode, TreeViewer, ImportToPgn, createPgnFromTree, TreeViewerPanelManager, NagBadges, };

package/dist/index.js

@@ -4,4 +4,5 @@ import TreeViewer from "./(components)/TreeViewer.svelte";
 import ImportToPgn from "./(components)/ImportToPgn.svelte";
 import { createPgnFromTree } from "./(utils)/createPgnFromTree.js";
 import TreeViewerPanelManager from "./(components)/TreeViewerPanelManager.svelte";
-export { ChessTree, transformPgnToChessNode, TreeViewer, ImportToPgn, createPgnFromTree, TreeViewerPanelManager, };
+import NagBadges from "./(components)/NagBadges.svelte";
+export { ChessTree, transformPgnToChessNode, TreeViewer, ImportToPgn, createPgnFromTree, TreeViewerPanelManager, NagBadges, };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@connectorvol/tree",
-  "version": "2.1.2",
+  "version": "4.1.0",
   "files": [
     "dist",
     "!dist/**/*.test.*",
@@ -39,14 +39,14 @@
     "test:ui": "npx playwright test --ui"
   },
   "dependencies": {
-    "@connectorvol/chessops": "2.0.0",
-    "@connectorvol/shared": "2.0.0",
+    "@connectorvol/chessops": "3.0.0",
+    "@connectorvol/shared": "4.0.0",
     "clsx": "^2.1.1",
     "tailwind-merge": "3.3.1",
     "tailwind-variants": "3.1.1"
   },
   "devDependencies": {
-    "@connectorvol/chessboard": "2.1.0",
+    "@connectorvol/chessboard": "4.0.0",
     "@ianvs/prettier-plugin-sort-imports": "4.5.1",
     "@internationalized/date": "3.9.0",
     "@lucide/svelte": "^0.553.0",