@connectorvol/tree 8.0.1 → 9.0.1

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

@@ -1,7 +1,8 @@
 import type { ClassValue } from "svelte/elements";
 import { ChessTree } from "../(classes)/chessTree.svelte.js";
 import type { ChessTreeNode } from "../(models)/chessTreeNode.js";
-import type { Move as TSharedMove, PieceSet } from "@connectorvol/shared";
+import type { Move as TSharedMove } from "@connectorvol/shared";
+import type { TTreeViewerTheme } from "../(models)/treeViewerTheme.js";
 type TPreviewOnHoverChessNodeSettings = {
     /** Возвращает функцию для установки FEN превью при наведении (null скрывает); второй аргумент — подсветка последнего хода. */
     setPreviewFen?: (fen: string | null, lastMove?: TSharedMove | null) => void;
@@ -23,8 +24,6 @@ type TTreeViewerProps = {
     setChessFen: (fen: string) => void;
     /** Возвращает функцию обновления доски. */
     setChessboardFen: (animationTime?: number) => void;
-    /** Возвращает набор фигур для иконок SAN. */
-    pieceSet: PieceSet;
     /** Возвращает true, если клик по ходу переключает текущий узел и доску. По умолчанию true. */
     selectable?: boolean;
     /** Возвращает настройки превью-доски при наведении на ноду. */
@@ -39,6 +38,14 @@ type TTreeViewerProps = {
     showPuzzleBranchNags?: boolean;
     /** Возвращает функцию для установки признака несохранённости дерева. */
     onChangeDirty?: (setIsDirty: (value: boolean) => void) => void;
+    /**
+     * Возвращает настройки оформления: фон, границы и цвет текста.
+     * Обязателен: без явного `theme` стили падают на CSS-дефолт и сетка
+     * выглядит бледной. Если нужно подставить готовую тему — импортируйте
+     * `TREE_VIEWER_LIGHT_THEME` или `TREE_VIEWER_DARK_THEME` из
+     * `@connectorvol/tree`.
+     */
+    theme: TTreeViewerTheme;
 };
 declare const TreeViewer: import("svelte").Component<TTreeViewerProps, {}, "">;
 type TreeViewer = ReturnType<typeof TreeViewer>;

package/dist/(components)/VariantDropdownNavigator.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { ChessTreeNode } from "../(models)/chessTreeNode.js";
-  import type { PieceSet } from "@connectorvol/shared";
+  import type { TTreeViewerTheme } from "../(models)/treeViewerTheme.js";
   import NagBadges from "./NagBadges.svelte";
   import MoveWithIcon from "./MoveWithIcon.svelte";
   type Props = {
@@ -10,11 +10,21 @@
      * Представляет CSS-селектор элемента, относительно которого нужно позиционировать dropdown.
      */
     anchorSelector?: string;
-    /** Возвращает набор фигур для иконок SAN. */
-    pieceSet: PieceSet;
+    /**
+     * Возвращает настройки оформления, заданные в `TreeViewer` через prop `theme`.
+     * При наличии применяются к контейнеру дропдауна; без темы дропдаун
+     * опирается на утилиты `bg-popover`/`text-popover-foreground`,
+     * которые реагируют на dark-режим приложения.
+     */
+    theme?: TTreeViewerTheme;
   };
 
-  const { variants, onActivateVariant, anchorSelector = "", pieceSet }: Props = $props();
+  const {
+    variants,
+    onActivateVariant,
+    anchorSelector = "",
+    theme,
+  }: Props = $props();
 
   let requestedOpen = $state(false);
   let activeIndex = $state(0);
@@ -141,9 +151,15 @@
 {#if isOpen}
   <div
     data-variant-dropdown="1"
-    class="z-50 min-w-[14rem] rounded-md border bg-white p-1 shadow-none outline-none"
+    class="z-50 min-w-[14rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-none outline-none"
     role="menu"
     aria-label="Варианты следующего хода"
+    style:--tree-viewer-bg={theme?.background}
+    style:--tree-viewer-border={theme?.border}
+    style:--tree-viewer-text={theme?.text}
+    style:background-color={theme ? "var(--tree-viewer-bg)" : undefined}
+    style:border-color={theme ? "var(--tree-viewer-border)" : undefined}
+    style:color={theme ? "var(--tree-viewer-text)" : undefined}
     style={position
       ? `position: fixed; left: ${position.left}px; top: ${position.top}px;`
       : "position: fixed;"}
@@ -168,7 +184,7 @@
           {#if getMovePrefix(variant)}
             <span>{getMovePrefix(variant)}</span>
           {/if}
-          <MoveWithIcon san={variant.data.san} ply={variant.data.ply} {pieceSet} />
+          <MoveWithIcon san={variant.data.san} ply={variant.data.ply} />
           <NagBadges nags={variant.data.nags} class="!ml-0" />
         </span>
       </button>

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

@@ -1,5 +1,5 @@
 import type { ChessTreeNode } from "../(models)/chessTreeNode.js";
-import type { PieceSet } from "@connectorvol/shared";
+import type { TTreeViewerTheme } from "../(models)/treeViewerTheme.js";
 type Props = {
     variants: ChessTreeNode[];
     onActivateVariant: (node: ChessTreeNode) => void;
@@ -7,8 +7,13 @@ type Props = {
      * Представляет CSS-селектор элемента, относительно которого нужно позиционировать dropdown.
      */
     anchorSelector?: string;
-    /** Возвращает набор фигур для иконок SAN. */
-    pieceSet: PieceSet;
+    /**
+     * Возвращает настройки оформления, заданные в `TreeViewer` через prop `theme`.
+     * При наличии применяются к контейнеру дропдауна; без темы дропдаун
+     * опирается на утилиты `bg-popover`/`text-popover-foreground`,
+     * которые реагируют на dark-режим приложения.
+     */
+    theme?: TTreeViewerTheme;
 };
 declare const VariantDropdownNavigator: import("svelte").Component<Props, {
     forceClose: () => void;

package/dist/(components)/VariationGroup.svelte

@@ -1,100 +1,96 @@
 <script lang="ts">
-    import type { Snippet } from "svelte";
-    import type { ChessTreeNode } from "../(models)/chessTreeNode.js";
+  import type { Snippet } from "svelte";
+  import type { ChessTreeNode } from "../(models)/chessTreeNode.js";
 
-    type TVariationGroupProps = {
-        /** Возвращает родительский узел-развилку. */
-        parentNode: ChessTreeNode;
-        /** Возвращает true, если блок в верхней строке сетки дерева. */
-        isHighestLevel: boolean;
-        /** Возвращает true, если вертикальная направляющая должна быть акцентной. */
-        isActiveForkForSelection: boolean;
-        /** Возвращает true, если доступен drill-down «варианты отдельно». */
-        showVariationDrillExpand: boolean;
-        /** Представляет обработчик клика по зоне открытия drill-down. */
-        onVariationLinesHit: (e: MouseEvent) => void;
-        /** Возвращает фрагмент разметки одного дочернего варианта. */
-        variationMoveRow: Snippet<[ChessTreeNode]>;
-        /** Возвращает true, если ветка текущего выбора проходит через узел (для «птички»). */
-        isBranchOnCurrentPath: (node: ChessTreeNode) => boolean;
-    };
+  type TVariationGroupProps = {
+    /** Возвращает родительский узел-развилку. */
+    parentNode: ChessTreeNode;
+    /** Возвращает true, если блок в верхней строке сетки дерева. */
+    isHighestLevel: boolean;
+    /** Возвращает true, если вертикальная направляющая должна быть акцентной. */
+    isActiveForkForSelection: boolean;
+    /** Возвращает true, если доступен drill-down «варианты отдельно». */
+    showVariationDrillExpand: boolean;
+    /** Представляет обработчик клика по зоне открытия drill-down. */
+    onVariationLinesHit: (e: MouseEvent) => void;
+    /** Возвращает фрагмент разметки одного дочернего варианта. */
+    variationMoveRow: Snippet<[ChessTreeNode]>;
+    /** Возвращает true, если ветка текущего выбора проходит через узел (для «птички»). */
+    isBranchOnCurrentPath: (node: ChessTreeNode) => boolean;
+  };
 
-    const {
-        parentNode,
-        isHighestLevel,
-        isActiveForkForSelection,
-        showVariationDrillExpand,
-        onVariationLinesHit,
-        variationMoveRow,
-        isBranchOnCurrentPath,
-    }: TVariationGroupProps = $props();
+  const {
+    parentNode,
+    isHighestLevel,
+    isActiveForkForSelection,
+    showVariationDrillExpand,
+    onVariationLinesHit,
+    variationMoveRow,
+    isBranchOnCurrentPath,
+  }: TVariationGroupProps = $props();
 </script>
 
 <div
-    class={{
-        "col-span-3 col-start-1 w-full min-w-0": isHighestLevel,
-        "block w-full min-w-0 basis-full shrink-0": !isHighestLevel,
-    }}
+  class={{
+    "col-span-3 col-start-1 w-full min-w-0": isHighestLevel,
+    "block w-full min-w-0 basis-full shrink-0": !isHighestLevel,
+  }}
 >
-    {#if parentNode.children.length > 1}
+  {#if parentNode.children.length > 1}
+    <div
+      class={{
+        "relative min-w-0 w-full max-w-full": true,
+        " rounded-md transition-[border-color,box-shadow] duration-150 [&:has(>[data-line-hit]:hover)>.flex>div[data-line-stroke]]:opacity-100 [&:has(>[data-line-hit]:hover)>.flex>ul>li>span[data-line-stroke]]:opacity-100 [&:has(>[data-line-hit]:focus-visible)>.flex>div[data-line-stroke]]:opacity-100 [&:has(>[data-line-hit]:focus-visible)>.flex>ul>li>span[data-line-stroke]]:opacity-100    ":
+          showVariationDrillExpand,
+        "pr-2": !showVariationDrillExpand,
+      }}
+      style:background-color="var(--tree-viewer-bg)"
+    >
+      <div class="flex min-w-0 w-full max-w-full gap-0 align-top">
         <div
-            class={{
-                "relative min-w-0 w-full max-w-full bg-gray-50/95 ": true,
-                " rounded-md transition-[border-color,box-shadow] duration-150 [&:has(>[data-line-hit]:hover)>.flex>div[data-line-stroke]]:border-gray-600 [&:has(>[data-line-hit]:hover)>.flex>ul>li>span[data-line-stroke]]:border-gray-600 [&:has(>[data-line-hit]:focus-visible)>.flex>div[data-line-stroke]]:border-gray-600 [&:has(>[data-line-hit]:focus-visible)>.flex>ul>li>span[data-line-stroke]]:border-gray-600    ":
-                    showVariationDrillExpand,
-                "pr-2": !showVariationDrillExpand,
-            }}
+          class={{
+            "w-2 shrink-0 self-stretch border-r-2 transition-opacity duration-150": true,
+            "pointer-events-none": showVariationDrillExpand,
+            "opacity-50": !isActiveForkForSelection,
+          }}
+          style:border-color="var(--tree-viewer-border)"
+          data-line-stroke
+          aria-hidden="true"
+        ></div>
+        <ul
+          class="m-0 flex min-w-0 flex-1 list-none flex-col gap-1.5 py-2 pl-0"
         >
-            <div class="flex min-w-0 w-full max-w-full gap-0 align-top">
-                <div
-                    class={{
-                        "w-2 shrink-0 self-stretch border-r-2 transition-[border-color] duration-150": true,
-                        "border-gray-600": isActiveForkForSelection,
-                        "border-gray-300": !isActiveForkForSelection,
-                        "pointer-events-none": showVariationDrillExpand,
-                    }}
-                    data-line-stroke
-                    aria-hidden="true"
-                ></div>
-                <ul
-                    class="m-0 flex min-w-0 flex-1 list-none flex-col gap-1.5 py-2 pl-0"
-                >
-                    {#each parentNode.children as child, index (child.id)}
-                        {#if !isHighestLevel || index >= 1}
-                            {@const branchOnPath = isBranchOnCurrentPath(child)}
-                            <li class="relative min-w-0 pl-3">
-                                <span
-                                    class={{
-                                        "absolute left-0 top-[0.65em] w-3 border-t-2 transition-[border-color] duration-150": true,
-                                        "border-gray-600":
-                                            isActiveForkForSelection &&
-                                            branchOnPath,
-                                        "border-gray-300":
-                                            !isActiveForkForSelection ||
-                                            !branchOnPath,
-                                        "pointer-events-none":
-                                            showVariationDrillExpand,
-                                    }}
-                                    data-line-stroke
-                                    aria-hidden="true"
-                                ></span>
-                                <div class="tracking-tight">
-                                    {@render variationMoveRow(child)}
-                                </div>
-                            </li>
-                        {/if}
-                    {/each}
-                </ul>
-            </div>
-            {#if showVariationDrillExpand}
-                <button
-                    type="button"
-                    class="absolute left-0 top-0 z-20 h-full w-5 max-w-full cursor-pointer border-0 bg-transparent p-0 focus:outline-none focus-visible:ring-0"
-                    data-line-hit
-                    aria-label="Открыть варианты отдельно"
-                    onclick={onVariationLinesHit}
-                ></button>
+          {#each parentNode.children as child, index (child.id)}
+            {#if !isHighestLevel || index >= 1}
+              {@const branchOnPath = isBranchOnCurrentPath(child)}
+              <li class="relative min-w-0 pl-3">
+                <span
+                  class={{
+                    "absolute left-0 top-[0.65em] w-3 border-t-2 transition-opacity duration-150": true,
+                    "pointer-events-none": showVariationDrillExpand,
+                    "opacity-50": !(isActiveForkForSelection && branchOnPath),
+                  }}
+                  style:border-color="var(--tree-viewer-border)"
+                  data-line-stroke
+                  aria-hidden="true"
+                ></span>
+                <div class="tracking-tight">
+                  {@render variationMoveRow(child)}
+                </div>
+              </li>
             {/if}
-        </div>
-    {/if}
+          {/each}
+        </ul>
+      </div>
+      {#if showVariationDrillExpand}
+        <button
+          type="button"
+          class="absolute left-0 top-0 z-20 h-full w-5 max-w-full cursor-pointer border-0 bg-transparent p-0 focus:outline-none focus-visible:ring-0"
+          data-line-hit
+          aria-label="Открыть варианты отдельно"
+          onclick={onVariationLinesHit}
+        ></button>
+      {/if}
+    </div>
+  {/if}
 </div>

package/dist/(constants)/treeViewerThemes.d.ts

@@ -0,0 +1,12 @@
+import type { TTreeViewerTheme } from "../(models)/treeViewerTheme.js";
+/**
+ * Тёмная тема `TreeViewer`, выровненная по палитре с `CHESSBOARD_THEMES.dark`:
+ * фон = `b` доски (zinc-700), границы = `w` доски (zinc-500), текст белый.
+ * Не зависит от light/dark режима приложения — стиль одинаков в обоих.
+ */
+export declare const TREE_VIEWER_DARK_THEME: TTreeViewerTheme;
+/**
+ * Светлая тема `TreeViewer`: белый фон, gray-300 границы, zinc-900 текст.
+ * Не зависит от light/dark режима приложения — стиль одинаков в обоих.
+ */
+export declare const TREE_VIEWER_LIGHT_THEME: TTreeViewerTheme;

package/dist/(constants)/treeViewerThemes.js

@@ -0,0 +1,19 @@
+/**
+ * Тёмная тема `TreeViewer`, выровненная по палитре с `CHESSBOARD_THEMES.dark`:
+ * фон = `b` доски (zinc-700), границы = `w` доски (zinc-500), текст белый.
+ * Не зависит от light/dark режима приложения — стиль одинаков в обоих.
+ */
+export const TREE_VIEWER_DARK_THEME = {
+    background: "rgb(20, 20, 20)",
+    border: "rgb(50, 50, 50)",
+    text: "rgb(200, 200, 200)",
+};
+/**
+ * Светлая тема `TreeViewer`: белый фон, gray-300 границы, zinc-900 текст.
+ * Не зависит от light/dark режима приложения — стиль одинаков в обоих.
+ */
+export const TREE_VIEWER_LIGHT_THEME = {
+    background: "oklch(1 0 0)",
+    border: "oklch(0.872 0.01 286)",
+    text: "oklch(0.21 0.006 285.885)",
+};

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

@@ -0,0 +1,17 @@
+/**
+ * Представляет настройки оформления дерева ходов.
+ * При передаче компоненту `TreeViewer` переопределяет светлые/тёмные
+ * оттенки серого на единую палитру. Стиль при этом не зависит от
+ * light/dark режима приложения.
+ */
+export type TTreeViewerTheme = {
+    /** Возвращает цвет фона (фон сетки, фон ячеек, фон панели правки). */
+    background: string;
+    /** Возвращает цвет границ и разделителей. */
+    border: string;
+    /**
+     * Возвращает цвет текста и placeholder. Задаётся отдельно от `border`,
+     * чтобы яркость шрифта не была привязана к толщине разделителей.
+     */
+    text: string;
+};

package/dist/(models)/treeViewerTheme.js

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

package/dist/(utils)/treeViewerPanelNavigation.svelte.d.ts

@@ -15,13 +15,13 @@ export type TTreeViewerPanelNavigation = ReturnType<typeof createTreeViewerPanel
 declare function createTreeViewerPanelNavigation(chessTree: ChessTree): {
     bindCallbacks: (setChessFen: (fen: string) => void, setChessboardFen: (animationTime?: number) => void) => void;
     setVariantNavigator: (nav: TVariantNavigatorHandle | null) => void;
-    highlightedButtons: {
+    readonly highlightedButtons: {
         previous: boolean;
         next: boolean;
         start: boolean;
         end: boolean;
     };
-    isPlaying: boolean;
+    readonly isPlaying: boolean;
     onWindowKeyDown: (e: KeyboardEvent) => void;
     dispose: () => void;
     selectPreviousNode: () => void;

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

@@ -160,7 +160,8 @@ function createTreeViewerPanelNavigation(chessTree) {
         }
         if (e.key === "ArrowUp") {
             variantNavigator?.forceClose();
-            if (chessTree.isVariationDrillDownActive() && isCurrentNodeInDrillHeader()) {
+            if (chessTree.isVariationDrillDownActive() &&
+                isCurrentNodeInDrillHeader()) {
                 requestDrillExitPrompt();
                 e.preventDefault();
                 return;
@@ -172,7 +173,8 @@ function createTreeViewerPanelNavigation(chessTree) {
         }
         else if (e.key === "ArrowDown") {
             variantNavigator?.forceClose();
-            if (chessTree.isVariationDrillDownActive() && isCurrentNodeInDrillHeader()) {
+            if (chessTree.isVariationDrillDownActive() &&
+                isCurrentNodeInDrillHeader()) {
                 requestDrillExitPrompt();
                 e.preventDefault();
                 return;
@@ -182,7 +184,8 @@ function createTreeViewerPanelNavigation(chessTree) {
         }
         else if (e.key === "ArrowLeft") {
             variantNavigator?.forceClose();
-            if (chessTree.isVariationDrillDownActive() && isCurrentNodeInDrillHeader()) {
+            if (chessTree.isVariationDrillDownActive() &&
+                isCurrentNodeInDrillHeader()) {
                 requestDrillExitPrompt();
                 e.preventDefault();
                 return;
@@ -228,8 +231,12 @@ function createTreeViewerPanelNavigation(chessTree) {
     return {
         bindCallbacks,
         setVariantNavigator,
-        highlightedButtons,
-        isPlaying,
+        get highlightedButtons() {
+            return highlightedButtons;
+        },
+        get isPlaying() {
+            return isPlaying;
+        },
         onWindowKeyDown,
         dispose,
         selectPreviousNode,

package/dist/components/ui/context-menu/context-menu-content.svelte

@@ -1,25 +1,29 @@
 <script lang="ts">
-	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
-	import { cn } from "../../../utils.js";
+  import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+  import { cn } from "../../../utils.js";
+  import { resolveOverlayPortalTarget } from "../../../utils/overlayPortalTarget.js";
 
-	let {
-		ref = $bindable(null),
-		portalProps,
-		class: className,
-		...restProps
-	}: ContextMenuPrimitive.ContentProps & {
-		portalProps?: ContextMenuPrimitive.PortalProps;
-	} = $props();
+  let {
+    ref = $bindable(null),
+    portalProps,
+    class: className,
+    ...restProps
+  }: ContextMenuPrimitive.ContentProps & {
+    portalProps?: ContextMenuPrimitive.PortalProps;
+  } = $props();
 </script>
 
-<ContextMenuPrimitive.Portal {...portalProps}>
-	<ContextMenuPrimitive.Content
-		bind:ref
-		data-slot="context-menu-content"
-		class={cn(
-			"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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 max-h-(--bits-context-menu-content-available-height) origin-(--bits-context-menu-content-transform-origin) z-50 min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border p-1 shadow-md",
-			className
-		)}
-		{...restProps}
-	/>
+<ContextMenuPrimitive.Portal
+  {...portalProps}
+  to={portalProps?.to ?? resolveOverlayPortalTarget()}
+>
+  <ContextMenuPrimitive.Content
+    bind:ref
+    data-slot="context-menu-content"
+    class={cn(
+      "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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 max-h-(--bits-context-menu-content-available-height) origin-(--bits-context-menu-content-transform-origin) z-[100] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border p-1 shadow-md",
+      className,
+    )}
+    {...restProps}
+  />
 </ContextMenuPrimitive.Portal>

package/dist/components/ui/context-menu/context-menu-sub-content.svelte

@@ -1,20 +1,20 @@
 <script lang="ts">
-	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
-	import { cn } from "../../../utils.js";
+  import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+  import { cn } from "../../../utils.js";
 
-	let {
-		ref = $bindable(null),
-		class: className,
-		...restProps
-	}: ContextMenuPrimitive.SubContentProps = $props();
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: ContextMenuPrimitive.SubContentProps = $props();
 </script>
 
 <ContextMenuPrimitive.SubContent
-	bind:ref
-	data-slot="context-menu-sub-content"
-	class={cn(
-		"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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 origin-(--bits-context-menu-content-transform-origin) z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-lg",
-		className
-	)}
-	{...restProps}
+  bind:ref
+  data-slot="context-menu-sub-content"
+  class={cn(
+    "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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 origin-(--bits-context-menu-content-transform-origin) z-[100] min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-lg",
+    className,
+  )}
+  {...restProps}
 />

package/dist/components/ui/dropdown-menu/dropdown-menu-content.svelte

@@ -1,27 +1,31 @@
 <script lang="ts">
-	import { cn } from "../../../utils.js";
-	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+  import { cn } from "../../../utils.js";
+  import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+  import { resolveOverlayPortalTarget } from "../../../utils/overlayPortalTarget.js";
 
-	let {
-		ref = $bindable(null),
-		sideOffset = 4,
-		portalProps,
-		class: className,
-		...restProps
-	}: DropdownMenuPrimitive.ContentProps & {
-		portalProps?: DropdownMenuPrimitive.PortalProps;
-	} = $props();
+  let {
+    ref = $bindable(null),
+    sideOffset = 4,
+    portalProps,
+    class: className,
+    ...restProps
+  }: DropdownMenuPrimitive.ContentProps & {
+    portalProps?: DropdownMenuPrimitive.PortalProps;
+  } = $props();
 </script>
 
-<DropdownMenuPrimitive.Portal {...portalProps}>
-	<DropdownMenuPrimitive.Content
-		bind:ref
-		data-slot="dropdown-menu-content"
-		{sideOffset}
-		class={cn(
-			"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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 max-h-(--bits-dropdown-menu-content-available-height) origin-(--bits-dropdown-menu-content-transform-origin) z-50 min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border p-1 shadow-md outline-none",
-			className
-		)}
-		{...restProps}
-	/>
+<DropdownMenuPrimitive.Portal
+  {...portalProps}
+  to={portalProps?.to ?? resolveOverlayPortalTarget()}
+>
+  <DropdownMenuPrimitive.Content
+    bind:ref
+    data-slot="dropdown-menu-content"
+    {sideOffset}
+    class={cn(
+      "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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 max-h-(--bits-dropdown-menu-content-available-height) origin-(--bits-dropdown-menu-content-transform-origin) z-[100] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border p-1 shadow-md outline-none",
+      className,
+    )}
+    {...restProps}
+  />
 </DropdownMenuPrimitive.Portal>

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

@@ -1,3 +1,3 @@
 import Root from "./toggle.svelte";
-export { toggleVariants, type ToggleSize, type ToggleVariant, type ToggleVariants, } from "./toggle.svelte";
+export { toggleVariants, type ToggleSize, type ToggleVariant, type ToggleVariants, } from "./toggle-variants.js";
 export { Root, Root as Toggle, };

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

@@ -1,5 +1,5 @@
 import Root from "./toggle.svelte";
-export { toggleVariants, } from "./toggle.svelte";
+export { toggleVariants, } from "./toggle-variants.js";
 export { Root, 
 //
 Root as Toggle, };

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

@@ -0,0 +1,35 @@
+import { type VariantProps } from "tailwind-variants";
+export declare const toggleVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+        outline: string;
+    };
+    size: {
+        default: string;
+        sm: string;
+        lg: string;
+    };
+}, undefined, "hover:text-foreground aria-pressed:bg-muted focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[state=on]:bg-muted gap-1 rounded-lg text-sm font-medium transition-all [&_svg:not([class*='size-'])]:size-4 group/toggle hover:bg-muted inline-flex items-center justify-center whitespace-nowrap outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0", {
+    variant: {
+        default: string;
+        outline: string;
+    };
+    size: {
+        default: string;
+        sm: string;
+        lg: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+        outline: string;
+    };
+    size: {
+        default: string;
+        sm: string;
+        lg: string;
+    };
+}, undefined, "hover:text-foreground aria-pressed:bg-muted focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[state=on]:bg-muted gap-1 rounded-lg text-sm font-medium transition-all [&_svg:not([class*='size-'])]:size-4 group/toggle hover:bg-muted inline-flex items-center justify-center whitespace-nowrap outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0", unknown, unknown, undefined>>;
+export type ToggleVariant = VariantProps<typeof toggleVariants>["variant"];
+export type ToggleSize = VariantProps<typeof toggleVariants>["size"];
+export type ToggleVariants = VariantProps<typeof toggleVariants>;

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

@@ -0,0 +1,19 @@
+import { tv } from "tailwind-variants";
+export const toggleVariants = tv({
+    base: "hover:text-foreground aria-pressed:bg-muted focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[state=on]:bg-muted gap-1 rounded-lg text-sm font-medium transition-all [&_svg:not([class*='size-'])]:size-4 group/toggle hover:bg-muted inline-flex items-center justify-center whitespace-nowrap outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+    variants: {
+        variant: {
+            default: "bg-transparent",
+            outline: "border-input hover:bg-muted border bg-transparent",
+        },
+        size: {
+            default: "h-8 min-w-8 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+            sm: "h-7 min-w-7 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+            lg: "h-9 min-w-9 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+        size: "default",
+    },
+});