@connectorvol/chess-widgets 9.0.0 → 9.0.2

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/game-analyzer/GameAnalyzer.svelte

@@ -1,87 +1,101 @@
 <script lang="ts">
-  import type { TGameAnalyzerProps } from "./types.js";
+    import type { TGameAnalyzerProps } from "./types.js";
 
-  import { Chessboard } from "@connectorvol/chessboard";
-  import {
-    TREE_VIEWER_LIGHT_THEME,
-    TreeViewer,
-    TreeViewerPanelManager,
-  } from "@connectorvol/tree";
-  import { Game } from "./gameAnalyzer.svelte.js";
-  import { untrack } from "svelte";
-  import { DEFAULT_BOARD_APPEARANCE_SETTINGS } from "../constants/default-board-appearance-settings.js";
+    import {
+        Chessboard,
+        DEFAULT_DESIGN_SETTINGS,
+        getBoardDesignSettingsContext,
+    } from "@connectorvol/chessboard";
+    import {
+        TREE_VIEWER_DARK_THEME,
+        TREE_VIEWER_LIGHT_THEME,
+        TreeViewer,
+        TreeViewerPanelManager,
+        type TTreeViewerTheme,
+    } from "@connectorvol/tree";
+    import { Game } from "./gameAnalyzer.svelte.js";
+    import { untrack } from "svelte";
+    import { mode } from "mode-watcher";
+    import { DEFAULT_BOARD_APPEARANCE_SETTINGS } from "../constants/default-board-appearance-settings.js";
 
-  let {
-    pgn,
-    onChangePGN,
-    boardTheme,
-    boardAppearanceSettings = DEFAULT_BOARD_APPEARANCE_SETTINGS,
-    editMode = true,
-    treeViewerTheme = TREE_VIEWER_LIGHT_THEME,
-    class: className,
-  }: TGameAnalyzerProps = $props();
+    let {
+        pgn,
+        onChangePGN,
+        boardAppearanceSettings = DEFAULT_BOARD_APPEARANCE_SETTINGS,
+        editMode = true,
+        treeViewerTheme,
+        class: className,
+    }: TGameAnalyzerProps = $props();
 
-  let game = $derived(
-    new Game(
-      untrack(() => pgn),
-      boardAppearanceSettings?.play ?? {},
-      "chess",
-      boardTheme,
-    ),
-  );
+    // ponytail: автотема по mode-watcher, как в chess-tree/src/routes/game/+page.svelte.
+    // Явный проп `treeViewerTheme` побеждает авто-детект.
+    const resolvedTreeViewerTheme = $derived<TTreeViewerTheme>(
+        treeViewerTheme ??
+            (mode.current === "dark"
+                ? TREE_VIEWER_DARK_THEME
+                : TREE_VIEWER_LIGHT_THEME),
+    );
 
-  let boardSize = $derived(
-    game.chessboard.getBoard().settingsService.boardSize,
-  );
-  let isAutoSize = $derived(boardSize === "auto");
+    let game = $derived(
+        new Game(
+            untrack(() => pgn),
+            boardAppearanceSettings?.play ?? {},
+            "chess",
+        ),
+    );
 
-  function handleChangeDirty(_setIsDirty: (value: boolean) => void) {
-    console.log("handleChangeDirty");
-    const exported = game.exportPgn();
-    onChangePGN?.(exported);
-  }
+    let boardSize = $derived(
+        game.chessboard.getBoard().settingsService.boardSize,
+    );
+    let isAutoSize = $derived(boardSize === "auto");
+
+    function handleChangeDirty(_setIsDirty: (value: boolean) => void) {
+        console.log("handleChangeDirty");
+        const exported = game.exportPgn();
+        onChangePGN?.(exported);
+    }
 </script>
 
 <div class={["mx-4 lg:container lg:mx-auto gap-4", className]}>
-  <div class="flex justify-center relative lg:gap-4 flex-col lg:flex-row">
-    <div
-      class={[
-        "w-full",
-        isAutoSize ? "lg:w-2/5" : "lg:w-auto lg:min-w-[3.75rem]",
-      ]}
-      style={!isAutoSize && typeof boardSize === "number"
-        ? `flex-basis: ${boardSize}rem;`
-        : ""}
-    >
-      <Chessboard facade={game.chessboard} design={{ theme: game.theme }} />
-    </div>
+    <div class="flex justify-center relative lg:gap-4 flex-col lg:flex-row">
+        <div
+            class={[
+                "w-full",
+                isAutoSize ? "lg:w-2/5" : "lg:w-auto lg:min-w-[3.75rem]",
+            ]}
+            style={!isAutoSize && typeof boardSize === "number"
+                ? `flex-basis: ${boardSize}rem;`
+                : ""}
+        >
+            <Chessboard facade={game.chessboard} />
+        </div>
 
-    <div
-      class={[
-        "w-full flex lg:flex-col flex-col-reverse h-full",
-        isAutoSize ? "lg:w-3/5" : "lg:flex-1 lg:min-w-[20rem]",
-      ]}
-    >
-      <div class="h-full">
-        <TreeViewer
-          className="h-[calc(100dvh-8rem)]"
-          chessTree={game.chessTree}
-          onSelectNode={game.onSelectNode}
-          onDeleteVariant={game.onDeleteVariant}
-          setChessFen={game.setChessFen}
-          setChessboardFen={game.setChessboardFen}
-          {editMode}
-          theme={treeViewerTheme}
-          onChangeDirty={handleChangeDirty}
-        />
-      </div>
+        <div
+            class={[
+                "w-full flex lg:flex-col flex-col-reverse h-full",
+                isAutoSize ? "lg:w-3/5" : "lg:flex-1 lg:min-w-[20rem]",
+            ]}
+        >
+            <div class="h-full">
+                <TreeViewer
+                    className="h-[calc(100dvh-8rem)] bg-[var(--tree-viewer-bg)]"
+                    chessTree={game.chessTree}
+                    onSelectNode={game.onSelectNode}
+                    onDeleteVariant={game.onDeleteVariant}
+                    setChessFen={game.setChessFen}
+                    setChessboardFen={game.setChessboardFen}
+                    {editMode}
+                    theme={resolvedTreeViewerTheme}
+                    onChangeDirty={handleChangeDirty}
+                />
+            </div>
 
-      <TreeViewerPanelManager
-        className="flex w-full justify-center select-none col-span-1 my-4"
-        chessTree={game.chessTree}
-        setChessFen={game.setChessFen}
-        setChessboardFen={game.setChessboardFen}
-      />
+            <TreeViewerPanelManager
+                className="flex w-full justify-center select-none col-span-1 my-4"
+                chessTree={game.chessTree}
+                setChessFen={game.setChessFen}
+                setChessboardFen={game.setChessboardFen}
+            />
+        </div>
     </div>
-  </div>
 </div>

package/dist/game-analyzer/gameAnalyzer.svelte.js

@@ -1,5 +1,5 @@
 import { Color, calculatePly, generateId } from "@connectorvol/shared";
-import { CHESSBOARD_THEMES, createBoardApi, DEFAULT_PLAY_SETTINGS, Draggable, syncMoveEvaluationNagBadge, } from "@connectorvol/chessboard";
+import { createBoardApi, DEFAULT_PLAY_SETTINGS, Draggable, syncMoveEvaluationNagBadge, } from "@connectorvol/chessboard";
 import { PgnOps } from "@connectorvol/chessops/pgnOps.svelte";
 import { transformPgnToChessNode, createPgnFromTree } from "@connectorvol/tree";
 import { ChessTree } from "@connectorvol/tree";
@@ -11,14 +11,9 @@ export class Game {
     previousNode;
     playSettings;
     variant;
-    boardTheme;
-    /** Возвращает активную тему доски, реактивный `$state` для биндинга в UI. */
-    theme = $state(CHESSBOARD_THEMES.blue);
-    constructor(pgn, chessBoardSettings, variant = "chess", boardTheme) {
+    constructor(pgn, chessBoardSettings, variant = "chess") {
         this.playSettings = { ...DEFAULT_PLAY_SETTINGS, ...chessBoardSettings };
         this.variant = variant;
-        this.boardTheme = boardTheme ?? CHESSBOARD_THEMES.blue;
-        this.theme = this.boardTheme;
         const { rootNode, initialFen: position } = transformPgnToChessNode(pgn);
         this.chessTree = new ChessTree(rootNode);
         this.chess = new PgnOps(position, variant);

package/dist/game-analyzer/types.d.ts

@@ -1,4 +1,3 @@
-import type { ChessboardTheme } from "@connectorvol/chessboard";
 import type { TChessBoardDesignSettings, TChessBoardPlaySettings } from "@connectorvol/chessboard";
 import type { TTreeViewerTheme } from "@connectorvol/tree";
 /**
@@ -20,10 +19,6 @@ export interface TGameAnalyzerProps {
      * Возвращает колбэк при изменении дерева ходов (добавление/удаление ходов, комментариев, маркеров).
      */
     onChangePGN?: (pgn: string) => void;
-    /**
-     * Возвращает тему оформления шахматной доски (по умолчанию синяя).
-     */
-    boardTheme?: ChessboardTheme;
     /**
      * Возвращает дополнительные визуальные настройки шахматной доски (кроме `boardSize`, `orientation`, `draggable`).
      */
@@ -33,7 +28,9 @@ export interface TGameAnalyzerProps {
      */
     editMode?: boolean;
     /**
-     * Возвращает тему `TreeViewer` (фон, границы, текст). По умолчанию `TREE_VIEWER_LIGHT_THEME`.
+     * Возвращает тему `TreeViewer` (фон, границы, текст). По умолчанию
+     * подстраивается под `mode-watcher` (dark → `TREE_VIEWER_DARK_THEME`,
+     * иначе `TREE_VIEWER_LIGHT_THEME`).
      */
     treeViewerTheme?: TTreeViewerTheme;
     /**

package/dist/index.d.ts

@@ -4,7 +4,7 @@ export { default as PuzzlePgnBoardTreeEditor } from "./puzzle-creation/PuzzlePgn
 export type { TPuzzleCreationWizardProps, TPuzzlePgnBoardTreeEditorOutcome, TPuzzlePgnBoardTreeEditorProps, } from "./puzzle-creation/types.js";
 export type { TPuzzleWizardCoreState, TPuzzleWizardState, } from "./puzzle-creation/puzzleWizardState.js";
 export { PUZZLE_WIZARD_CORE_STEPS, PUZZLE_WIZARD_TAGS_STEP, createInitialPuzzleWizardCoreState, createInitialPuzzleWizardState, puzzleWizardSeedFen, } from "./puzzle-creation/puzzleWizardState.js";
-export type { TWizardStep, TWizardStepContext, } from "@connectorvol/shared";
+export type { TWizardStep, TWizardStepContext } from "@connectorvol/shared";
 export { Wizard, getWizardContext, setWizardContext } from "@connectorvol/shared";
 export type { TPuzzleCreatedPayload, TPuzzleTags } from "./puzzle/puzzleCreatedPayload.js";
 export { puzzlePartsFromFullPgn } from "./puzzle/puzzleCreatedPayload.js";

package/dist/puzzle/puzzlePreviewPathNags.js

@@ -1,4 +1,4 @@
-import { PUZZLE_BRANCH_CORRECT_NAG_ID, PUZZLE_BRANCH_WRONG_NAG_ID, } from "@connectorvol/shared";
+import { PUZZLE_BRANCH_CORRECT_NAG_ID, PUZZLE_BRANCH_WRONG_NAG_ID } from "@connectorvol/shared";
 import { puzzlePreviewSideToMoveFromFen } from "./puzzleStepPreviewSolver.js";
 /**
  * Представляет синхронизацию NAG ✓ ходов решателя в дереве решения по пройденному пути превью.

package/dist/puzzle-creation/PuzzleBoardTreeViewerPane.svelte

@@ -1,184 +1,212 @@
 <script lang="ts">
-  import type { Snippet } from "svelte";
-  import { MediaQuery } from "svelte/reactivity";
-
-  import type {
-    BoardApi,
-    TChessBoardDesignSettings,
-  } from "@connectorvol/chessboard";
-  import { Chessboard } from "@connectorvol/chessboard";
-  import type { ChessTree, TTreeViewerTheme } from "@connectorvol/tree";
-  import { TREE_VIEWER_LIGHT_THEME, TreeViewer } from "@connectorvol/tree";
-
-  import { cn } from "../utils.js";
-
-  /**
-   * Представляет свойства панели разметки «доска и просмотр дерева партии».
-   */
-  interface Props {
-    /**
-     * Возвращает API шахматной доски для компонента `Chessboard`.
-     */
-    chessboard: BoardApi;
-    /**
-     * Возвращает снимок дизайна, передаваемый в `<Chessboard design={...} />`.
-     */
-    chessboardDesign: TChessBoardDesignSettings;
-    /**
-     * Возвращает экземпляр дерева ходов для `TreeViewer`.
-     */
-    chessTree: ChessTree;
-    /**
-     * Возвращает обработчик выбора узла в дереве.
-     */
-    onSelectNode: () => void;
-    /**
-     * Возвращает обработчик после удаления варианта.
-     */
-    onDeleteVariant: () => void;
-    /**
-     * Возвращает функцию установки FEN в движке партии.
-     */
-    setChessFen: (fen: string) => void;
-    /**
-     * Возвращает функцию синхронизации FEN и UI доски.
-     */
-    setChessboardFen: (animationTime?: number) => void;
-    /**
-     * Возвращает признак режима правки дерева (`TreeViewer.editMode`).
-     */
-    editMode?: boolean;
-    /**
-     * Возвращает признак возможности выбора узлов в дереве.
-     */
-    selectable?: boolean;
-    /**
-     * Возвращает true, если в режиме правки показывать группу NAG «Задача (развилка)»
-     * рядом с кнопками undo/redo на ходах из развилки.
-     */
-    showPuzzleBranchNags?: boolean;
-    /**
-     * Возвращает тему `TreeViewer` (фон, границы, текст). Если не задана —
-     * используется `TREE_VIEWER_LIGHT_THEME`.
-     */
-    theme?: TTreeViewerTheme;
-    /**
-     * Возвращает дополнительные классы Tailwind для корневого контейнера.
-     */
-    class?: string;
+    import type { Snippet } from "svelte";
+    import { MediaQuery } from "svelte/reactivity";
+    import { mode } from "mode-watcher";
+
+    import type {
+        BoardApi,
+        TChessBoardDesignSettings,
+    } from "@connectorvol/chessboard";
+    import {
+        Chessboard,
+        getBoardDesignSettingsContext,
+    } from "@connectorvol/chessboard";
+    import type { ChessTree, TTreeViewerTheme } from "@connectorvol/tree";
+    import {
+        TREE_VIEWER_DARK_THEME,
+        TREE_VIEWER_LIGHT_THEME,
+        TreeViewer,
+    } from "@connectorvol/tree";
+
+    import { cn } from "../utils.js";
+
     /**
-     * Возвращает фрагмент разметки под шахматной доской (например сообщение об ошибке в превью).
+     * Представляет свойства панели разметки «доска и просмотр дерева партии».
      */
-    belowChessboard?: Snippet;
-  }
-
-  const {
-    chessboard,
-    chessboardDesign,
-    chessTree,
-    onSelectNode,
-    onDeleteVariant,
-    setChessFen,
-    setChessboardFen,
-    editMode = true,
-    selectable = true,
-    showPuzzleBranchNags = false,
-    theme = TREE_VIEWER_LIGHT_THEME,
-    class: className,
-    belowChessboard,
-  }: Props = $props();
-
-  /** ponytail: совпадает с Tailwind `lg` (1024px), как в разметке панели. */
-  const isMobile = new MediaQuery("(max-width: 1023px)");
-
-  const boardSize = $derived(chessboard.getBoard().settingsService.boardSize);
-  const useAutoBoardLayout = $derived(isMobile.current || boardSize === "auto");
-
-  const boardColumnStyle = $derived(
-    !useAutoBoardLayout && typeof boardSize === "number"
-      ? `flex: 0 0 min(100%, ${boardSize}rem);`
-      : undefined,
-  );
-
-  let savedDesktopBoardSettings = $state<{
-    boardSize: number | "auto";
-    isResizable: boolean;
-  } | null>(null);
-
-  $effect(() => {
-    const mobile = isMobile.current;
-    const settings = chessboard.getBoard().settingsService;
-
-    if (mobile) {
-      if (savedDesktopBoardSettings === null) {
-        savedDesktopBoardSettings = {
-          boardSize: settings.boardSize,
-          isResizable: chessboard.isResizable,
-        };
-      }
-      chessboard.isResizable = false;
-      settings.boardSize = "auto";
-    } else if (savedDesktopBoardSettings !== null) {
-      chessboard.isResizable = savedDesktopBoardSettings.isResizable;
-      settings.boardSize = savedDesktopBoardSettings.boardSize;
-      savedDesktopBoardSettings = null;
+    interface Props {
+        /**
+         * Возвращает API шахматной доски для компонента `Chessboard`.
+         */
+        chessboard: BoardApi;
+        /**
+         * Возвращает снимок дизайна, передаваемый в `<Chessboard design={...} />`.
+         * Опционально: если не передан, доска читает дизайн из контекста
+         * (`setBoardDesignSettingsContext`), что позволяет реактивно подхватывать
+         * изменения из `<BoardSettings />`.
+         */
+        chessboardDesign?: TChessBoardDesignSettings;
+        /**
+         * Возвращает экземпляр дерева ходов для `TreeViewer`.
+         */
+        chessTree: ChessTree;
+        /**
+         * Возвращает обработчик выбора узла в дереве.
+         */
+        onSelectNode: () => void;
+        /**
+         * Возвращает обработчик после удаления варианта.
+         */
+        onDeleteVariant: () => void;
+        /**
+         * Возвращает функцию установки FEN в движке партии.
+         */
+        setChessFen: (fen: string) => void;
+        /**
+         * Возвращает функцию синхронизации FEN и UI доски.
+         */
+        setChessboardFen: (animationTime?: number) => void;
+        /**
+         * Возвращает признак режима правки дерева (`TreeViewer.editMode`).
+         */
+        editMode?: boolean;
+        /**
+         * Возвращает признак возможности выбора узлов в дереве.
+         */
+        selectable?: boolean;
+        /**
+         * Возвращает true, если в режиме правки показывать группу NAG «Задача (развилка)»
+         * рядом с кнопками undo/redo на ходах из развилки.
+         */
+        showPuzzleBranchNags?: boolean;
+        /**
+         * Возвращает тему `TreeViewer` (фон, границы, текст). По умолчанию
+         * подстраивается под `mode-watcher` (dark → `TREE_VIEWER_DARK_THEME`,
+         * иначе `TREE_VIEWER_LIGHT_THEME`).
+         */
+        theme?: TTreeViewerTheme;
+        /**
+         * Возвращает дополнительные классы Tailwind для корневого контейнера.
+         */
+        class?: string;
+        /**
+         * Возвращает фрагмент разметки под шахматной доской (например сообщение об ошибке в превью).
+         */
+        belowChessboard?: Snippet;
     }
-  });
-
-  let boardHeight = $state(0);
 
-  const treeHeightLocked = $derived(boardHeight > 0);
-
-  const treeColumnStyle = $derived(
-    treeHeightLocked ? `--pane-board-height: ${boardHeight}px` : undefined,
-  );
+    const {
+        chessboard,
+        chessboardDesign,
+        chessTree,
+        onSelectNode,
+        onDeleteVariant,
+        setChessFen,
+        setChessboardFen,
+        editMode = true,
+        selectable = true,
+        showPuzzleBranchNags = false,
+        theme,
+        class: className,
+        belowChessboard,
+    }: Props = $props();
+
+    // ponytail: автотема по mode-watcher вместо жёсткого светлого дефолта,
+    // как в chess-tree/src/routes/game/+page.svelte. Явный проп `theme` побеждает.
+    const resolvedTheme = $derived<TTreeViewerTheme>(
+        theme ??
+            (mode.current === "dark"
+                ? TREE_VIEWER_DARK_THEME
+                : TREE_VIEWER_LIGHT_THEME),
+    );
+
+    /** ponytail: совпадает с Tailwind `lg` (1024px), как в разметке панели. */
+    const isMobile = new MediaQuery("(max-width: 1023px)");
+
+    const boardSize = $derived(chessboard.getBoard().settingsService.boardSize);
+    const useAutoBoardLayout = $derived(
+        isMobile.current || boardSize === "auto",
+    );
+
+    const boardColumnStyle = $derived(
+        !useAutoBoardLayout && typeof boardSize === "number"
+            ? `flex: 0 0 min(100%, ${boardSize}rem);`
+            : undefined,
+    );
+
+    let savedDesktopBoardSettings = $state<{
+        boardSize: number | "auto";
+        isResizable: boolean;
+    } | null>(null);
+
+    $effect(() => {
+        const mobile = isMobile.current;
+        const settings = chessboard.getBoard().settingsService;
+
+        if (mobile) {
+            if (savedDesktopBoardSettings === null) {
+                savedDesktopBoardSettings = {
+                    boardSize: settings.boardSize,
+                    isResizable: chessboard.isResizable,
+                };
+            }
+            chessboard.isResizable = false;
+            settings.boardSize = "auto";
+        } else if (savedDesktopBoardSettings !== null) {
+            chessboard.isResizable = savedDesktopBoardSettings.isResizable;
+            settings.boardSize = savedDesktopBoardSettings.boardSize;
+            savedDesktopBoardSettings = null;
+        }
+    });
+
+    let boardHeight = $state(0);
+
+    const treeHeightLocked = $derived(boardHeight > 0);
+
+    const treeColumnStyle = $derived(
+        treeHeightLocked ? `--pane-board-height: ${boardHeight}px` : undefined,
+    );
 </script>
 
 <div class={cn("flex w-full flex-col gap-2", className)}>
-  <div
-    class="relative flex min-h-0 flex-col gap-4 lg:flex-row lg:items-stretch"
-  >
-    <div
-      class={cn(
-        "order-1 flex w-full shrink-0 flex-col lg:order-1 lg:min-h-0",
-        useAutoBoardLayout && "lg:max-w-[min(100%,38rem)]",
-      )}
-      style={boardColumnStyle}
-    >
-      <div
-        class="aspect-square w-full shrink-0"
-        bind:clientHeight={boardHeight}
-      >
-        <Chessboard facade={chessboard} design={chessboardDesign} />
-      </div>
-    </div>
-
     <div
-      class={cn(
-        "order-2 flex min-h-48 min-w-0 flex-1 flex-col lg:order-2 lg:min-w-[20rem] lg:shrink-0",
-        treeHeightLocked &&
-          "lg:h-[var(--pane-board-height)] lg:max-h-[var(--pane-board-height)] lg:min-h-0 lg:overflow-hidden",
-      )}
-      style={treeColumnStyle}
+        class="relative flex min-h-0 flex-col gap-4 lg:flex-row lg:items-stretch"
     >
-      <div
-        class="flex min-h-0 flex-1 flex-col overflow-hidden border border-border"
-      >
-        <TreeViewer
-          {chessTree}
-          {onSelectNode}
-          {onDeleteVariant}
-          {setChessFen}
-          {setChessboardFen}
-          className="min-h-0 flex-1 rounded-none border-0"
-          {editMode}
-          {selectable}
-          {showPuzzleBranchNags}
-          {theme}
-        />
-      </div>
+        <div
+            class={cn(
+                "order-1 flex w-full shrink-0 flex-col lg:order-1 lg:min-h-0",
+                useAutoBoardLayout && "lg:max-w-[min(100%,38rem)]",
+            )}
+            style={boardColumnStyle}
+        >
+            <div
+                class="aspect-square w-full shrink-0"
+                bind:clientHeight={boardHeight}
+            >
+                <Chessboard
+                    facade={chessboard}
+                    design={chessboardDesign ??
+                        getBoardDesignSettingsContext() ??
+                        undefined}
+                />
+            </div>
+        </div>
+
+        <div
+            class={cn(
+                "order-2 flex min-h-48 min-w-0 flex-1 flex-col lg:order-2 lg:min-w-[20rem] lg:shrink-0",
+                treeHeightLocked &&
+                    "lg:h-[var(--pane-board-height)] lg:max-h-[var(--pane-board-height)] lg:min-h-0 lg:overflow-hidden",
+            )}
+            style={treeColumnStyle}
+        >
+            <div
+                class="flex min-h-0 flex-1 flex-col overflow-hidden border border-border"
+            >
+                <TreeViewer
+                    {chessTree}
+                    {onSelectNode}
+                    {onDeleteVariant}
+                    {setChessFen}
+                    {setChessboardFen}
+                    className="min-h-0 flex-1 rounded-none border-0 bg-[var(--tree-viewer-bg)]"
+                    {editMode}
+                    {selectable}
+                    {showPuzzleBranchNags}
+                    theme={resolvedTheme}
+                />
+            </div>
+        </div>
     </div>
-  </div>
 
-  {@render belowChessboard?.()}
+    {@render belowChessboard?.()}
 </div>