@connectorvol/tree 8.0.0 → 9.0.0

package/dist/(components)/BoardSettingsTrigger.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import { BoardSettings } from "@connectorvol/chessboard";
+</script>
+
+<!--
+  `BoardSettings` без `bind:design` читает/пишет стор дизайна из контекста
+  (см. `+layout.svelte` → `setBoardDesignSettingsContext`). Все доски ниже по дереву
+  подписаны на тот же стор и реактивно подхватывают изменения.
+-->
+<BoardSettings />

package/dist/(components)/BoardSettingsTrigger.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const BoardSettingsTrigger: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type BoardSettingsTrigger = InstanceType<typeof BoardSettingsTrigger>;
+export default BoardSettingsTrigger;

package/dist/(components)/DrillBreadcrumbs.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import type { ChessTreeNode } from "../(models)/chessTreeNode.js";
-  import type { PieceSet } from "@connectorvol/shared";
   import ArrowRight from "@lucide/svelte/icons/arrow-right";
   import HomeIcon from "@lucide/svelte/icons/house";
   import * as DropdownMenu from "../components/ui/dropdown-menu/index.js";
@@ -12,8 +11,6 @@
     chessTree: ChessTree;
     /** Возвращает цепочку узлов-развилок для хлебных крошек. */
     drillForkCrumbs: ChessTreeNode[];
-    /** Возвращает набор фигур для иконок SAN. */
-    pieceSet: PieceSet;
     /** Представляет переход по крошке drill-down. */
     onNavigateCrumb: (targetForkIndex: number) => void;
     /** Представляет выход на уровень выше относительно крошки с индексом. */
@@ -25,7 +22,6 @@
   const {
     chessTree,
     drillForkCrumbs,
-    pieceSet,
     onNavigateCrumb,
     onNavigateToParentFromCrumb,
     onExitToFullTree,
@@ -35,7 +31,9 @@
 </script>
 
 <nav
-  class="col-span-3 border-b border-gray-300 !bg-gray-50 px-3 py-2"
+  class="col-span-3 border-b px-3 py-2"
+  style:background-color="var(--tree-viewer-bg)"
+  style:border-color="var(--tree-viewer-border)"
   aria-label="Навигация по уровням вариантов"
 >
   <ol
@@ -57,17 +55,17 @@
         <div class="relative inline-flex">
           <button
             type="button"
+            style:color={"var(--tree-viewer-text)"}
             class={{
               "inline-flex items-baseline gap-y-0.5 rounded px-0.5 py-0.5 text-left  underline-offset-2 cursor-pointer outline-none focus:outline-none focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0": true,
               "font-bold ": fork.id === chessTree.currentNode.id,
-              "text-gray-900": i === drillForkCrumbs.length - 1,
               "text-primary": i !== drillForkCrumbs.length - 1,
             }}
             aria-current={i === drillForkCrumbs.length - 1 ? "page" : undefined}
             aria-label="Перейти к этому уровню вариантов"
             onclick={() => onNavigateCrumb(i)}
           >
-            <DrillForkSanLabel {fork} {pieceSet} />
+            <DrillForkSanLabel {fork} />
           </button>
 
           {#if fork.id === chessTree.currentNode.id}
@@ -109,7 +107,7 @@
                       e.stopPropagation();
                     }}
                   >
-                    <DrillForkSanLabel fork={parent} {pieceSet} />
+                    <DrillForkSanLabel fork={parent} />
                   </DropdownMenu.Item>
                 {/if}
                 <DropdownMenu.Item

package/dist/(components)/DrillBreadcrumbs.svelte.d.ts

@@ -1,13 +1,10 @@
 import type { ChessTreeNode } from "../(models)/chessTreeNode.js";
-import type { PieceSet } from "@connectorvol/shared";
 import type { ChessTree } from "../(classes)/chessTree.svelte.js";
 type TDrillBreadcrumbsProps = {
     /** Возвращает дерево партии. */
     chessTree: ChessTree;
     /** Возвращает цепочку узлов-развилок для хлебных крошек. */
     drillForkCrumbs: ChessTreeNode[];
-    /** Возвращает набор фигур для иконок SAN. */
-    pieceSet: PieceSet;
     /** Представляет переход по крошке drill-down. */
     onNavigateCrumb: (targetForkIndex: number) => void;
     /** Представляет выход на уровень выше относительно крошки с индексом. */

package/dist/(components)/DrillForkSanLabel.svelte

@@ -2,16 +2,13 @@
   import type { ChessTreeNode } from "../(models)/chessTreeNode.js";
   import MoveWithIcon from "./MoveWithIcon.svelte";
   import NagBadges from "./NagBadges.svelte";
-  import type { PieceSet } from "@connectorvol/shared";
 
   type TDrillForkSanLabelProps = {
     /** Возвращает узел-развилку или ход для подписи. */
     fork: ChessTreeNode;
-    /** Возвращает набор фигур для иконок SAN. */
-    pieceSet: PieceSet;
   };
 
-  const { fork, pieceSet }: TDrillForkSanLabelProps = $props();
+  const { fork }: TDrillForkSanLabelProps = $props();
 </script>
 
 {#if fork.data.ply % 2 === 1}
@@ -20,7 +17,7 @@
   <span>{Math.max(0, fork.data.fullMoves - 1)}...</span>
 {/if}
 <span class="inline-flex items-center gap-0 -ml-px">
-  <MoveWithIcon san={fork.data.san} ply={fork.data.ply} {pieceSet} /><NagBadges
+  <MoveWithIcon san={fork.data.san} ply={fork.data.ply} /><NagBadges
     nags={fork.data.nags}
   />
 </span>

package/dist/(components)/DrillForkSanLabel.svelte.d.ts

@@ -1,10 +1,7 @@
 import type { ChessTreeNode } from "../(models)/chessTreeNode.js";
-import type { PieceSet } from "@connectorvol/shared";
 type TDrillForkSanLabelProps = {
     /** Возвращает узел-развилку или ход для подписи. */
     fork: ChessTreeNode;
-    /** Возвращает набор фигур для иконок SAN. */
-    pieceSet: PieceSet;
 };
 declare const DrillForkSanLabel: import("svelte").Component<TDrillForkSanLabelProps, {}, "">;
 type DrillForkSanLabel = ReturnType<typeof DrillForkSanLabel>;

package/dist/(components)/DrillVariationList.svelte

@@ -1,13 +1,10 @@
 <script lang="ts">
   import type { ChessTreeNode } from "../(models)/chessTreeNode.js";
-  import type { PieceSet } from "@connectorvol/shared";
   import Move from "./Move.svelte";
 
   type TDrillVariationListProps = {
     /** Возвращает родительский узел текущего уровня drill-down. */
     drillForkParent: ChessTreeNode;
-    /** Возвращает набор фигур для иконок SAN. */
-    pieceSet: PieceSet;
     /** Возвращает true, если направляющие drill-панели должны быть акцентными. */
     isDrillForkGuideForSelection: boolean;
     /** Возвращает true, если ветка текущего выбора проходит через узел. */
@@ -16,36 +13,54 @@
 
   const {
     drillForkParent,
-    pieceSet,
     isDrillForkGuideForSelection,
     isBranchOnCurrentPath,
   }: TDrillVariationListProps = $props();
+
+  let isLineHovered = $state(false);
+
+  const isVerticalHighlighted = $derived(
+    isLineHovered || isDrillForkGuideForSelection,
+  );
 </script>
 
 <div class="col-span-3 block w-full min-w-0">
   <div
-    class="tree-viewer-overflow-tail-border relative flex min-w-0 w-full max-w-full gap-0 bg-gray-50/95 align-top border-b"
+    class="tree-viewer-overflow-tail-border relative flex min-w-0 w-full max-w-full gap-0 align-top border-b"
+    style:background-color="var(--tree-viewer-bg)"
+    style:border-color="var(--tree-viewer-border)"
   >
     <div
-      class={{
-        "w-4 shrink-0 self-stretch border-r-2 bg-gray-100/60 transition-[border-color] duration-150": true,
-        "border-gray-600": isDrillForkGuideForSelection,
-        "border-gray-300": !isDrillForkGuideForSelection,
-      }}
+      class="relative w-4 shrink-0 self-stretch"
+      onmouseenter={() => (isLineHovered = true)}
+      onmouseleave={() => (isLineHovered = false)}
       aria-hidden="true"
-    ></div>
+    >
+      <div
+        class={{
+          "absolute inset-y-2 right-0 w-0.5 border-r-2 transition-opacity duration-150": true,
+          "opacity-50": !isVerticalHighlighted,
+          "opacity-100": isVerticalHighlighted,
+        }}
+        style:border-color="var(--tree-viewer-border)"
+        aria-hidden="true"
+      ></div>
+    </div>
     <ul
       class="m-0 flex min-w-0 flex-1 list-none flex-col gap-1.5 py-2 pr-2 pl-0"
     >
       {#each drillForkParent.children as drillChild (drillChild.id)}
         {@const branchOnPath = isBranchOnCurrentPath(drillChild)}
+        {@const isHorizontalHighlighted =
+          isLineHovered || (isDrillForkGuideForSelection && branchOnPath)}
         <li class="relative min-w-0 pl-3">
           <span
             class={{
-              "pointer-events-none absolute left-0 top-[0.65em] w-3 border-t-2 transition-[border-color] duration-150": true,
-              "border-gray-600": isDrillForkGuideForSelection && branchOnPath,
-              "border-gray-300": !isDrillForkGuideForSelection || !branchOnPath,
+              "pointer-events-none absolute left-0 top-[0.65em] w-3 border-t-2 transition-opacity duration-150": true,
+              "opacity-50": !isHorizontalHighlighted,
+              "opacity-100": isHorizontalHighlighted,
             }}
+            style:border-color="var(--tree-viewer-border)"
             aria-hidden="true"
           ></span>
           <div class="tracking-tight">
@@ -55,7 +70,6 @@
               shouldReserveEmptyMoveCell={drillForkParent.children.length > 1}
               shouldRenderSiblingVariations={false}
               parentNode={drillForkParent}
-              {pieceSet}
             />
           </div>
         </li>

package/dist/(components)/DrillVariationList.svelte.d.ts

@@ -1,10 +1,7 @@
 import type { ChessTreeNode } from "../(models)/chessTreeNode.js";
-import type { PieceSet } from "@connectorvol/shared";
 type TDrillVariationListProps = {
     /** Возвращает родительский узел текущего уровня drill-down. */
     drillForkParent: ChessTreeNode;
-    /** Возвращает набор фигур для иконок SAN. */
-    pieceSet: PieceSet;
     /** Возвращает true, если направляющие drill-панели должны быть акцентными. */
     isDrillForkGuideForSelection: boolean;
     /** Возвращает true, если ветка текущего выбора проходит через узел. */