bits-ui 1.3.13 → 1.3.15

package/README.md

@@ -5,17 +5,22 @@
 [![npm version](https://flat.badgen.net/npm/v/bits-ui?color=pink)](https://npmjs.com/package/bits-ui)
 [![npm downloads](https://flat.badgen.net/npm/dm/bits-ui?color=pink)](https://npmjs.com/package/bits-ui)
 [![license](https://flat.badgen.net/github/license/huntabyte/bits-ui?color=pink)](https://github.com/huntabyte/bits-ui/blob/main/LICENSE)
+[![](https://dcbadge.vercel.app/api/server/fdXy3Sk8Gq?style=flat)](https://discord.gg/fdXy3Sk8Gq)
 
-<!-- /automd -->
+<img style="max-width: 100%" alt="hero" src="https://github.com/user-attachments/assets/19cac792-6a93-4289-b9c7-647794a7de79" />
+
+**Bits UI** – the headless components for Svelte.
 
-The headless components for Svelte.
+Flexible, unstyled, and accessible primitives that provide the foundation for building your own high-quality component library.
 
-[Read the docs](https://bits-ui.com)
+## Documentation
+
+Visit https://bits-ui.com/docs to view the documentation.
 
 ## Credits
 
 -   [Bitworks](https://bitworks.cz) - The design team behind the Bits UI documentation and example components.
--   [Melt UI](https://melt-ui.com) - The underlying builder API that powers Bits.
+-   [Melt UI](https://melt-ui.com) - A powerful builder API that inspired the internal architecture of Bits UI.
 -   [Radix UI](https://radix-ui.com) - The incredible headless component APIs that we've taken heavy inspiration from.
 -   [React Spectrum](https://react-spectrum.adobe.com) - An incredible collection of headless components we've taken inspiration from.
 
@@ -41,3 +46,14 @@ Built by [@huntabyte](https://github.com/huntabyte) and [community](https://gith
 </a>
 
 <!-- /automd -->
+
+## Community
+
+Join the Discord server to ask questions, find collaborators, or just say hi!
+
+<a href="https://discord.gg/fdXy3Sk8Gq" alt="Svecosystem Discord community">
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="https://invidget.switchblade.xyz/fdXy3Sk8Gq">
+  <img alt="Svecosystem Discord community" src="https://invidget.switchblade.xyz/fdXy3Sk8Gq?theme=light">
+</picture>
+</a>

package/dist/bits/command/command.svelte.d.ts

@@ -14,6 +14,8 @@ type CommandRootStateProps = WithRefProps<ReadableBoxedValues<{
 declare class CommandRootState {
     #private;
     readonly opts: CommandRootStateProps;
+    sortAfterTick: boolean;
+    sortAndFilterAfterTick: boolean;
     allItems: Set<string>;
     allGroups: Map<string, Set<string>>;
     allIds: Map<string, {

package/dist/bits/command/command.svelte.js

@@ -32,6 +32,8 @@ const CommandGroupContainerContext = new Context("Command.Group");
 class CommandRootState {
     opts;
     #updateScheduled = false;
+    sortAfterTick = false;
+    sortAndFilterAfterTick = false;
     allItems = new Set();
     allGroups = new Map();
     allIds = new Map();
@@ -401,7 +403,14 @@ class CommandRootState {
             return noop;
         this.allIds.set(id, { value, keywords });
         this._commandState.filtered.items.set(id, this.#score(value, keywords));
-        this.#sort();
+        // Schedule sorting to run after this tick when all items are added not each time an item is added
+        if (!this.sortAfterTick) {
+            this.sortAfterTick = true;
+            afterTick(() => {
+                this.#sort();
+                this.sortAfterTick = false;
+            });
+        }
         return () => {
             this.allIds.delete(id);
         };
@@ -425,8 +434,15 @@ class CommandRootState {
                 this.allGroups.get(groupId).add(id);
             }
         }
-        this.#filterItems();
-        this.#sort();
+        // Schedule sorting and filtering to run after this tick when all items are added not each time an item is added
+        if (!this.sortAndFilterAfterTick) {
+            this.sortAndFilterAfterTick = true;
+            afterTick(() => {
+                this.#filterItems();
+                this.#sort();
+                this.sortAndFilterAfterTick = false;
+            });
+        }
         this.#scheduleUpdate();
         return () => {
             const selectedItem = this.#getSelectedItem();

package/dist/bits/menubar/components/menubar-menu.svelte

@@ -4,11 +4,13 @@
 	import { useMenubarMenu } from "../menubar.svelte.js";
 	import Menu from "../../menu/components/menu.svelte";
 	import { useId } from "../../../internal/use-id.js";
+	import { noop } from "../../../internal/noop.js";
 
-	let { value = useId(), ...restProps }: MenubarMenuProps = $props();
+	let { value = useId(), onOpenChange = noop, ...restProps }: MenubarMenuProps = $props();
 
 	const menuState = useMenubarMenu({
 		value: box.with(() => value),
+		onOpenChange: box.with(() => onOpenChange),
 	});
 </script>
 

package/dist/bits/menubar/menubar.svelte.d.ts

@@ -3,7 +3,7 @@ import type { InteractOutsideBehaviorType } from "../utilities/dismissible-layer
 import type { ReadableBoxedValues, WritableBoxedValues } from "../../internal/box.svelte.js";
 import { type UseRovingFocusReturn } from "../../internal/use-roving-focus.svelte.js";
 import type { Direction } from "../../shared/index.js";
-import type { BitsFocusEvent, BitsKeyboardEvent, BitsPointerEvent, WithRefProps } from "../../internal/types.js";
+import type { BitsFocusEvent, BitsKeyboardEvent, BitsPointerEvent, OnChangeFn, WithRefProps } from "../../internal/types.js";
 import { type FocusScopeContextValue } from "../utilities/focus-scope/use-focus-scope.svelte.js";
 type MenubarRootStateProps = WithRefProps<ReadableBoxedValues<{
     dir: Direction;
@@ -16,7 +16,7 @@ declare class MenubarRootState {
     rovingFocusGroup: UseRovingFocusReturn;
     wasOpenedByKeyboard: boolean;
     triggerIds: string[];
-    valueToContentId: Map<string, ReadableBox<string>>;
+    valueToChangeHandler: Map<string, ReadableBox<OnChangeFn<boolean>>>;
     constructor(opts: MenubarRootStateProps);
     /**
      * @param id - the id of the trigger to register
@@ -28,7 +28,8 @@ declare class MenubarRootState {
      * @param contentId - the content id to associate with the value
      * @returns - a function to de-register the menu
      */
-    registerMenu(value: string, contentId: ReadableBox<string>): () => void;
+    registerMenu(value: string, onOpenChange: ReadableBox<OnChangeFn<boolean>>): () => void;
+    updateValue(value: string): void;
     getTriggers(): HTMLButtonElement[];
     onMenuOpen(id: string, triggerId: string): void;
     onMenuClose(): void;
@@ -41,6 +42,7 @@ declare class MenubarRootState {
 }
 type MenubarMenuStateProps = ReadableBoxedValues<{
     value: string;
+    onOpenChange: OnChangeFn<boolean>;
 }>;
 declare class MenubarMenuState {
     readonly opts: MenubarMenuStateProps;

package/dist/bits/menubar/menubar.svelte.js

@@ -13,7 +13,7 @@ class MenubarRootState {
     rovingFocusGroup;
     wasOpenedByKeyboard = $state(false);
     triggerIds = $state([]);
-    valueToContentId = new Map();
+    valueToChangeHandler = new Map();
     constructor(opts) {
         this.opts = opts;
         useRefById(opts);
@@ -43,12 +43,24 @@ class MenubarRootState {
      * @param contentId - the content id to associate with the value
      * @returns - a function to de-register the menu
      */
-    registerMenu(value, contentId) {
-        this.valueToContentId.set(value, contentId);
+    registerMenu(value, onOpenChange) {
+        this.valueToChangeHandler.set(value, onOpenChange);
         return () => {
-            this.valueToContentId.delete(value);
+            this.valueToChangeHandler.delete(value);
         };
     }
+    updateValue(value) {
+        const currValue = this.opts.value.current;
+        const currHandler = this.valueToChangeHandler.get(currValue)?.current;
+        const nextHandler = this.valueToChangeHandler.get(value)?.current;
+        this.opts.value.current = value;
+        if (currHandler && currValue !== value) {
+            currHandler(false);
+        }
+        if (nextHandler) {
+            nextHandler(true);
+        }
+    }
     getTriggers() {
         const node = this.opts.ref.current;
         if (!node)
@@ -56,14 +68,14 @@ class MenubarRootState {
         return Array.from(node.querySelectorAll(`[${MENUBAR_TRIGGER_ATTR}]`));
     }
     onMenuOpen(id, triggerId) {
-        this.opts.value.current = id;
+        this.updateValue(id);
         this.rovingFocusGroup.setCurrentTabStopId(triggerId);
     }
     onMenuClose() {
-        this.opts.value.current = "";
+        this.updateValue("");
     }
     onMenuToggle(id) {
-        this.opts.value.current = this.opts.value.current ? "" : id;
+        this.updateValue(this.opts.value.current ? "" : id);
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
@@ -87,7 +99,7 @@ class MenubarMenuState {
             }
         });
         onMount(() => {
-            return this.root.registerMenu(this.opts.value.current, box.with(() => this.contentNode?.id ?? ""));
+            return this.root.registerMenu(this.opts.value.current, opts.onOpenChange);
         });
     }
     getTriggerNode() {

package/dist/bits/menubar/types.d.ts

@@ -29,6 +29,10 @@ export type MenubarMenuPropsWithoutHTML = WithChildren<{
      * within the menubar.
      */
     value?: string;
+    /**
+     * A callback that is called when the menu is opened or closed.
+     */
+    onOpenChange?: OnChangeFn<boolean>;
 }>;
 export type MenubarMenuProps = MenubarMenuPropsWithoutHTML;
 export type MenubarTriggerPropsWithoutHTML = WithChild<{

package/dist/bits/select/select.svelte.js

@@ -423,6 +423,7 @@ class SelectTriggerState {
                 this.root.opts.value.current = matchedItem.value;
             },
             enabled: !this.root.isMulti && this.root.dataTypeaheadEnabled,
+            candidateValues: () => (this.root.isMulti ? [] : this.root.candidateLabels),
         });
         this.onkeydown = this.onkeydown.bind(this);
         this.onpointerdown = this.onpointerdown.bind(this);
@@ -437,6 +438,29 @@ class SelectTriggerState {
     #handlePointerOpen(_) {
         this.#handleOpen();
     }
+    /**
+     * Logic used to handle keyboard selection/deselection.
+     *
+     * If it returns true, it means the item was selected and whatever is calling
+     * this function should return early
+     *
+     */
+    #handleKeyboardSelection() {
+        const isCurrentSelectedValue = this.root.highlightedValue === this.root.opts.value.current;
+        if (!this.root.opts.allowDeselect.current && isCurrentSelectedValue && !this.root.isMulti) {
+            this.root.handleClose();
+            return true;
+        }
+        // "" is a valid value for a select item so we need to check for that
+        if (this.root.highlightedValue !== null) {
+            this.root.toggleItem(this.root.highlightedValue, this.root.highlightedLabel ?? undefined);
+        }
+        if (!this.root.isMulti && !isCurrentSelectedValue) {
+            this.root.handleClose();
+            return true;
+        }
+        return false;
+    }
     onkeydown(e) {
         this.root.isUsingKeyboard = true;
         if (e.key === kbd.ARROW_UP || e.key === kbd.ARROW_DOWN)
@@ -450,7 +474,7 @@ class SelectTriggerState {
                 this.root.handleOpen();
             }
             else if (!this.root.isMulti && this.root.dataTypeaheadEnabled) {
-                this.#dataTypeahead.handleTypeaheadSearch(e.key, this.root.candidateLabels);
+                this.#dataTypeahead.handleTypeaheadSearch(e.key);
                 return;
             }
             // we need to wait for a tick after the menu opens to ensure
@@ -474,23 +498,16 @@ class SelectTriggerState {
             this.root.handleClose();
             return;
         }
-        if ((e.key === kbd.ENTER || e.key === kbd.SPACE) && !e.isComposing) {
+        if ((e.key === kbd.ENTER ||
+            // if we're currently "typing ahead", we don't want to select the item
+            // just yet as the item the user is trying to get to may have a space in it,
+            // so we defer handling the close for this case until further down
+            (e.key === kbd.SPACE && this.#domTypeahead.search.current === "")) &&
+            !e.isComposing) {
             e.preventDefault();
-            const isCurrentSelectedValue = this.root.highlightedValue === this.root.opts.value.current;
-            if (!this.root.opts.allowDeselect.current &&
-                isCurrentSelectedValue &&
-                !this.root.isMulti) {
-                this.root.handleClose();
-                return;
-            }
-            //"" is a valid value for a select item so we need to check for that
-            if (this.root.highlightedValue !== null) {
-                this.root.toggleItem(this.root.highlightedValue, this.root.highlightedLabel ?? undefined);
-            }
-            if (!this.root.isMulti && !isCurrentSelectedValue) {
-                this.root.handleClose();
+            const shouldReturn = this.#handleKeyboardSelection();
+            if (shouldReturn)
                 return;
-            }
         }
         if (e.key === kbd.ARROW_UP && e.altKey) {
             this.root.handleClose();
@@ -529,14 +546,16 @@ class SelectTriggerState {
         }
         const isModifierKey = e.ctrlKey || e.altKey || e.metaKey;
         const isCharacterKey = e.key.length === 1;
-        // prevent space from being considered with typeahead
-        if (e.code === "Space")
-            return;
+        const isSpaceKey = e.key === kbd.SPACE;
         const candidateNodes = this.root.getCandidateNodes();
         if (e.key === kbd.TAB)
             return;
-        if (!isModifierKey && isCharacterKey) {
-            this.#domTypeahead.handleTypeaheadSearch(e.key, candidateNodes);
+        if (!isModifierKey && (isCharacterKey || isSpaceKey)) {
+            const matchedNode = this.#domTypeahead.handleTypeaheadSearch(e.key, candidateNodes);
+            if (!matchedNode && isSpaceKey) {
+                e.preventDefault();
+                this.#handleKeyboardSelection();
+            }
             return;
         }
         if (!this.root.highlightedNode) {

package/dist/internal/arrays.d.ts

@@ -66,21 +66,26 @@ export declare function forward<T>(array: T[], index: number, increment: number,
  */
 export declare function backward<T>(array: T[], index: number, decrement: number, loop?: boolean): T | undefined;
 /**
- * This is the "meat" of the typeahead matching logic. It takes in all the values,
- * the search and the current match, and returns the next match (or `undefined`).
+ * Finds the next matching item from a list of values based on a search string.
  *
- * We normalize the search because if a user has repeatedly pressed a character,
- * we want the exact same behavior as if we only had that one character
- * (ie. cycle through options starting with that character)
+ * This function handles several special cases in typeahead behavior:
  *
- * We also reorder the values by wrapping the array around the current match.
- * This is so we always look forward from the current match, and picking the first
- * match will always be the correct one.
+ * 1. Space handling: When a search string ends with a space, it handles it specially:
+ *    - If there's only one match for the text before the space, it ignores the space
+ *    - If there are multiple matches and the current match already starts with the search prefix
+ *      followed by a space, it keeps the current match (doesn't change selection on space)
+ *    - Only after typing characters beyond the space will it move to a more specific match
  *
- * Finally, if the normalized search is exactly one character, we exclude the
- * current match from the values because otherwise it would be the first to match always
- * and focus would never move. This is as opposed to the regular case, where we
- * don't want focus to move if the current match still matches.
+ * 2. Repeated character handling: If a search consists of repeated characters (e.g., "aaa"),
+ *    it treats it as a single character for matching purposes
+ *
+ * 3. Cycling behavior: The function wraps around the values array starting from the current match
+ *    to find the next appropriate match, creating a cycling selection behavior
+ *
+ * @param values - Array of string values to search through (e.g., the text content of menu items)
+ * @param search - The current search string typed by the user
+ * @param currentMatch - The currently selected/matched item, if any
+ * @returns The next matching value that should be selected, or undefined if no match is found
  */
 export declare function getNextMatch(values: string[], search: string, currentMatch?: string): string | undefined;
 /**

package/dist/internal/arrays.js

@@ -169,31 +169,76 @@ export function backward(array, index, decrement, loop = true) {
     return array[targetIndex];
 }
 /**
- * This is the "meat" of the typeahead matching logic. It takes in all the values,
- * the search and the current match, and returns the next match (or `undefined`).
+ * Finds the next matching item from a list of values based on a search string.
  *
- * We normalize the search because if a user has repeatedly pressed a character,
- * we want the exact same behavior as if we only had that one character
- * (ie. cycle through options starting with that character)
+ * This function handles several special cases in typeahead behavior:
  *
- * We also reorder the values by wrapping the array around the current match.
- * This is so we always look forward from the current match, and picking the first
- * match will always be the correct one.
+ * 1. Space handling: When a search string ends with a space, it handles it specially:
+ *    - If there's only one match for the text before the space, it ignores the space
+ *    - If there are multiple matches and the current match already starts with the search prefix
+ *      followed by a space, it keeps the current match (doesn't change selection on space)
+ *    - Only after typing characters beyond the space will it move to a more specific match
  *
- * Finally, if the normalized search is exactly one character, we exclude the
- * current match from the values because otherwise it would be the first to match always
- * and focus would never move. This is as opposed to the regular case, where we
- * don't want focus to move if the current match still matches.
+ * 2. Repeated character handling: If a search consists of repeated characters (e.g., "aaa"),
+ *    it treats it as a single character for matching purposes
+ *
+ * 3. Cycling behavior: The function wraps around the values array starting from the current match
+ *    to find the next appropriate match, creating a cycling selection behavior
+ *
+ * @param values - Array of string values to search through (e.g., the text content of menu items)
+ * @param search - The current search string typed by the user
+ * @param currentMatch - The currently selected/matched item, if any
+ * @returns The next matching value that should be selected, or undefined if no match is found
  */
 export function getNextMatch(values, search, currentMatch) {
+    const lowerSearch = search.toLowerCase();
+    if (lowerSearch.endsWith(" ")) {
+        const searchWithoutSpace = lowerSearch.slice(0, -1);
+        const matchesWithoutSpace = values.filter((value) => value.toLowerCase().startsWith(searchWithoutSpace));
+        /**
+         * If there's only one match for the prefix without space, we don't
+         * watch to match with space.
+         */
+        if (matchesWithoutSpace.length <= 1) {
+            return getNextMatch(values, searchWithoutSpace, currentMatch);
+        }
+        const currentMatchLowercase = currentMatch?.toLowerCase();
+        /**
+         * If the current match already starts with the search prefix and has a space afterward,
+         * and the user has only typed up to that space, keep the current match until they
+         * disambiguate.
+         */
+        if (currentMatchLowercase &&
+            currentMatchLowercase.startsWith(searchWithoutSpace) &&
+            currentMatchLowercase.charAt(searchWithoutSpace.length) === " " &&
+            search.trim() === searchWithoutSpace) {
+            return currentMatch;
+        }
+        /**
+         * With multiple matches, find items that match the full search string with space
+         */
+        const spacedMatches = values.filter((value) => value.toLowerCase().startsWith(lowerSearch));
+        /**
+         * If we found matches with the space, use the first one that's not the current match
+         */
+        if (spacedMatches.length > 0) {
+            const currentMatchIndex = currentMatch ? values.indexOf(currentMatch) : -1;
+            let wrappedMatches = wrapArray(spacedMatches, Math.max(currentMatchIndex, 0));
+            // return the first match that is not the current one.
+            const nextMatch = wrappedMatches.find((match) => match !== currentMatch);
+            // fallback to current if no other is found.
+            return nextMatch || currentMatch;
+        }
+    }
     const isRepeated = search.length > 1 && Array.from(search).every((char) => char === search[0]);
     const normalizedSearch = isRepeated ? search[0] : search;
+    const normalizedLowerSearch = normalizedSearch.toLowerCase();
     const currentMatchIndex = currentMatch ? values.indexOf(currentMatch) : -1;
     let wrappedValues = wrapArray(values, Math.max(currentMatchIndex, 0));
     const excludeCurrentMatch = normalizedSearch.length === 1;
     if (excludeCurrentMatch)
         wrappedValues = wrappedValues.filter((v) => v !== currentMatch);
-    const nextMatch = wrappedValues.find((value) => value?.toLowerCase().startsWith(normalizedSearch.toLowerCase()));
+    const nextMatch = wrappedValues.find((value) => value?.toLowerCase().startsWith(normalizedLowerSearch));
     return nextMatch !== currentMatch ? nextMatch : undefined;
 }
 /**

package/dist/internal/use-data-typeahead.svelte.d.ts

@@ -1,12 +1,14 @@
+import type { Getter } from "svelte-toolbelt";
 export type DataTypeahead = ReturnType<typeof useDataTypeahead>;
 type UseDataTypeaheadOpts = {
     onMatch: (value: string) => void;
     getCurrentItem: () => string;
+    candidateValues: Getter<string[]>;
     enabled: boolean;
 };
 export declare function useDataTypeahead(opts: UseDataTypeaheadOpts): {
     search: import("svelte-toolbelt").WritableBox<string>;
-    handleTypeaheadSearch: (key: string, candidateValues: string[]) => string | undefined;
+    handleTypeaheadSearch: (key: string) => string | undefined;
     resetTypeahead: () => void;
 };
 export {};

package/dist/internal/use-data-typeahead.svelte.js

@@ -3,7 +3,8 @@ import { boxAutoReset } from "./box-auto-reset.svelte.js";
 export function useDataTypeahead(opts) {
     // Reset `search` 1 second after it was last updated
     const search = boxAutoReset("", 1000);
-    function handleTypeaheadSearch(key, candidateValues) {
+    const candidateValues = $derived(opts.candidateValues());
+    function handleTypeaheadSearch(key) {
         if (!opts.enabled)
             return;
         if (!candidateValues.length)

package/dist/internal/use-dom-typeahead.svelte.js

@@ -10,10 +10,10 @@ export function useDOMTypeahead(opts) {
             return;
         search.current = search.current + key;
         const currentItem = getCurrentItem();
-        const currentMatch = candidates.find((item) => item === currentItem)?.textContent?.trim() ?? "";
-        const values = candidates.map((item) => item.textContent?.trim() ?? "");
+        const currentMatch = candidates.find((item) => item === currentItem)?.textContent ?? "";
+        const values = candidates.map((item) => item.textContent ?? "");
         const nextMatch = getNextMatch(values, search.current, currentMatch);
-        const newItem = candidates.find((item) => item.textContent?.trim() === nextMatch);
+        const newItem = candidates.find((item) => item.textContent === nextMatch);
         if (newItem) {
             onMatch(newItem);
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bits-ui",
-  "version": "1.3.13",
+  "version": "1.3.15",
   "license": "MIT",
   "repository": "github:huntabyte/bits-ui",
   "funding": "https://github.com/sponsors/huntabyte",

package/dist/internal/dev/visualize-grace-area.d.ts

@@ -1,5 +0,0 @@
-import type { Polygon } from "../polygon.js";
-/**
- * Debugging utility to visualize the grace area of a floating layer component.
- */
-export declare function visualizeGraceArea(graceArea: Polygon): void;

package/dist/internal/dev/visualize-grace-area.js

@@ -1,28 +0,0 @@
-let graceAreaElement = null;
-let svgContainer = null;
-/**
- * Debugging utility to visualize the grace area of a floating layer component.
- */
-export function visualizeGraceArea(graceArea) {
-    if (graceAreaElement) {
-        graceAreaElement.remove();
-    }
-    if (!svgContainer) {
-        svgContainer = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-        svgContainer.style.position = "absolute";
-        svgContainer.style.top = "0";
-        svgContainer.style.left = "0";
-        svgContainer.style.width = "100%";
-        svgContainer.style.height = "100%";
-        svgContainer.style.pointerEvents = "none";
-        document.body.appendChild(svgContainer);
-    }
-    graceAreaElement = document.createElementNS("http://www.w3.org/2000/svg", "polygon");
-    const pointsString = graceArea.map((p) => `${p.x},${p.y}`).join(" ");
-    graceAreaElement.setAttribute("points", pointsString);
-    graceAreaElement.setAttribute("fill", "rgba(255, 0, 0, 0.3)");
-    graceAreaElement.setAttribute("stroke", "red");
-    graceAreaElement.setAttribute("stroke-width", "1");
-    graceAreaElement.style.pointerEvents = "none";
-    svgContainer.appendChild(graceAreaElement);
-}

package/dist/internal/polygon.d.ts

@@ -1,10 +0,0 @@
-export interface Point {
-    x: number;
-    y: number;
-}
-export type Polygon = Array<Point>;
-export declare function makeHullPresorted<P extends Point>(points: Readonly<Array<P>>): Array<P>;
-export declare function POINT_COMPARATOR(a: Point, b: Point): number;
-export declare function makeHullFromElements(els: Array<HTMLElement>): Array<Point>;
-export declare function pointInPolygon(point: Point, polygon: Polygon): boolean;
-export declare function isPointerInGraceArea(e: Pick<PointerEvent, "clientX" | "clientY">, area?: Polygon): boolean;

package/dist/internal/polygon.js

@@ -1,115 +0,0 @@
-/*
- * Convex hull algorithm - Library (TypeScript)
- *
- * Copyright (c) 2021 Project Nayuki
- * https://www.nayuki.io/page/convex-hull-algorithm
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Lesser General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program (see COPYING.txt and COPYING.LESSER.txt).
- * If not, see <http://www.gnu.org/licenses/>.
- */
-// Returns a new array of points representing the convex hull of
-// the given set of points. The convex hull excludes collinear points.
-// This algorithm runs in O(n log n) time.
-function makeHull(points) {
-    const newPoints = points.slice();
-    newPoints.sort(POINT_COMPARATOR);
-    return makeHullPresorted(newPoints);
-}
-// Returns the convex hull, assuming that each points[i] <= points[i + 1]. Runs in O(n) time.
-export function makeHullPresorted(points) {
-    if (points.length <= 1)
-        return points.slice();
-    // Andrew's monotone chain algorithm. Positive y coordinates correspond to "up"
-    // as per the mathematical convention, instead of "down" as per the computer
-    // graphics convention. This doesn't affect the correctness of the result.
-    const upperHull = [];
-    for (let i = 0; i < points.length; i++) {
-        const p = points[i];
-        while (upperHull.length >= 2) {
-            const q = upperHull[upperHull.length - 1];
-            const r = upperHull[upperHull.length - 2];
-            if ((q.x - r.x) * (p.y - r.y) >= (q.y - r.y) * (p.x - r.x))
-                upperHull.pop();
-            else
-                break;
-        }
-        upperHull.push(p);
-    }
-    upperHull.pop();
-    const lowerHull = [];
-    for (let i = points.length - 1; i >= 0; i--) {
-        const p = points[i];
-        while (lowerHull.length >= 2) {
-            const q = lowerHull[lowerHull.length - 1];
-            const r = lowerHull[lowerHull.length - 2];
-            if ((q.x - r.x) * (p.y - r.y) >= (q.y - r.y) * (p.x - r.x))
-                lowerHull.pop();
-            else
-                break;
-        }
-        lowerHull.push(p);
-    }
-    lowerHull.pop();
-    if (upperHull.length === 1 &&
-        lowerHull.length === 1 &&
-        upperHull[0].x === lowerHull[0].x &&
-        upperHull[0].y === lowerHull[0].y)
-        return upperHull;
-    else
-        return upperHull.concat(lowerHull);
-}
-export function POINT_COMPARATOR(a, b) {
-    if (a.x < b.x)
-        return -1;
-    else if (a.x > b.x)
-        return +1;
-    else if (a.y < b.y)
-        return -1;
-    else if (a.y > b.y)
-        return +1;
-    else
-        return 0;
-}
-function getPointsFromEl(el) {
-    const rect = el.getBoundingClientRect();
-    return [
-        { x: rect.left, y: rect.top },
-        { x: rect.right, y: rect.top },
-        { x: rect.right, y: rect.bottom },
-        { x: rect.left, y: rect.bottom },
-    ];
-}
-export function makeHullFromElements(els) {
-    const points = els.flatMap((el) => getPointsFromEl(el));
-    return makeHull(points);
-}
-export function pointInPolygon(point, polygon) {
-    let inside = false;
-    for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
-        const xi = polygon[i].x;
-        const yi = polygon[i].y;
-        const xj = polygon[j].x;
-        const yj = polygon[j].y;
-        const intersect = yi > point.y !== yj > point.y &&
-            point.x < ((xj - xi) * (point.y - yi)) / (yj - yi) + xi;
-        if (intersect)
-            inside = !inside;
-    }
-    return inside;
-}
-export function isPointerInGraceArea(e, area) {
-    if (!area)
-        return false;
-    return pointInPolygon({ x: e.clientX, y: e.clientY }, area);
-}