sheer-ui 0.4.2 → 0.5.0

package/src/lib/internal/paneforge/types.ts

@@ -1,179 +0,0 @@
-import type { HTMLAttributes } from 'svelte/elements';
-import type { Without, WithChild } from '../index.js';
-import type { Direction, PaneOnCollapse, PaneOnExpand, PaneOnResize, PaneResizeHandleOnDragging } from './internal/types.js';
-import type { PaneGroupStorage } from './internal/utils/storage.js';
-
-type Primitive<T> = Omit<T, 'id' | 'children'> & { id?: string | undefined };
-
-export type PaneForgePrimitiveDivAttributes = Primitive<HTMLAttributes<HTMLDivElement>>;
-
-export type PanePropsWithoutHTML = WithChild<{
-	/**
-	 * The size of the pane when it is in a collapsed state.
-	 */
-	collapsedSize?: number;
-
-	/**
-	 * Whether the pane can be collapsed.
-	 *
-	 * @defaultValue `false`
-	 */
-	collapsible?: boolean;
-
-	/**
-	 * The default size of the pane in percentage.
-	 */
-	defaultSize?: number;
-
-	/**
-	 * The maximum size of the pane in percentage of the group's size.
-	 *
-	 * @defaultValue `100`
-	 */
-	maxSize?: number;
-
-	/**
-	 * The minimum size of the pane in percentage of the group's size.
-	 *
-	 * @defaultValue `0`
-	 */
-	minSize?: number;
-
-	/**
-	 * The order of the pane in the group.
-	 * Useful for maintaining order when conditionally rendering panes.
-	 */
-	order?: number;
-
-	/**
-	 * A callback that is called when the pane is collapsed.
-	 */
-	onCollapse?: PaneOnCollapse;
-
-	/**
-	 * A callback that is called when the pane is expanded.
-	 */
-	onExpand?: PaneOnExpand;
-
-	/**
-	 * A callback that is called when the pane is resized.
-	 */
-	onResize?: PaneOnResize;
-}>;
-
-export type PaneProps = PanePropsWithoutHTML & Without<PaneForgePrimitiveDivAttributes, PanePropsWithoutHTML>;
-
-export type PaneGroupPropsWithoutHTML = WithChild<{
-	/**
-	 * The id to save the layout of the panes to in local storage.
-	 */
-	autoSaveId?: string | null;
-
-	/**
-	 * The direction of the panes.
-	 *
-	 * @required
-	 */
-	direction: Direction;
-
-	/**
-	 * The amount of space to add to the pane group when the keyboard
-	 * resize event is triggered.
-	 */
-	keyboardResizeBy?: number | null;
-
-	/**
-	 * A callback called when the layout of the panes within the group changes.
-	 */
-	onLayoutChange?: (layout: number[]) => void | null;
-
-	/**
-	 * The storage object to use for saving the layout of the panes in the group.
-	 */
-	storage?: PaneGroupStorage;
-}>;
-
-export type PaneGroupProps = PaneGroupPropsWithoutHTML & Without<PaneForgePrimitiveDivAttributes, PaneGroupPropsWithoutHTML>;
-
-export type PaneResizerPropsWithoutHTML = WithChild<{
-	/**
-	 * Whether the resize handle is disabled.
-	 *
-	 * @defaultValue `false`
-	 */
-	disabled?: boolean;
-
-	/**
-	 * A callback that is called when the resize handle is being dragged.
-	 */
-	onDraggingChange?: PaneResizeHandleOnDragging;
-
-	/**
-	 * The tabindex of the resize handle.
-	 */
-	tabindex?: number;
-}>;
-
-export type PaneResizerProps = PaneResizerPropsWithoutHTML & Without<PaneForgePrimitiveDivAttributes, PaneResizerPropsWithoutHTML>;
-
-export type PaneAPI = {
-	/* Collapse the pane to its minimum size */
-	collapse: () => void;
-	/* Expand the pane to its previous size */
-	expand: () => void;
-	/* Get the pane's id */
-	getId: () => string;
-	/** Get the panes size */
-	getSize: () => number;
-	/** Check if the pane is collapsed */
-	isCollapsed: () => boolean;
-	/** Check if the pane is expanded */
-	isExpanded: () => boolean;
-	/** Resize the pane to the specified size */
-	resize: (size: number) => void;
-};
-
-export type PaneGroupAPI = {
-	/** Get the ID of the PaneGroup */
-	getId: () => string;
-	/** Get the layout of the PaneGroup */
-	getLayout: () => number[];
-	/** Set the layout of the PaneGroup */
-	setLayout: (layout: number[]) => void;
-};
-
-/**
- * Data attributes applied to the element rendered by the `Pane` component.
- */
-export type PaneAttributes = {
-	/** Applied to every pane element. */
-	'data-pane': string;
-	/** The ID of the pane. */
-	'data-pane-id': string;
-	/** The ID of the pane's group. */
-	'data-pane-group-id': string;
-};
-
-export type PaneGroupAttributes = {
-	/** Applied to every pane group element. */
-	'data-pane-group': string;
-	/** The direction of the pane group. */
-	'data-direction': Direction;
-	/** The ID of the pane group. */
-	'data-pane-group-id': string;
-};
-
-export type PaneResizerAttributes = {
-	/** Applied to all resizer elements */
-	'data-pane-resizer': string;
-	/** The direction of the pane group the resize handle belongs to. */
-	'data-direction': Direction;
-	/** The ID of the pane group the resize handle belongs to. */
-	'data-pane-group-id': string;
-	/** Whether the resize handle is active or not. */
-	'data-active'?: 'pointer' | 'keyboard';
-	/** Whether the resize handle is enabled or not. */
-	'data-enabled'?: boolean;
-	/** The ID of the resize handle. */
-	'data-pane-resizer-id': string;
-};

package/src/lib/internal/popper-layer/types.ts

@@ -1,65 +0,0 @@
-import type { Snippet } from "svelte";
-import type { EscapeLayerImplProps, EscapeLayerProps } from "../escape-layer/types.js";
-import type {
-	DismissibleLayerImplProps,
-	DismissibleLayerProps,
-} from "../dismissible-layer/types.js";
-import type {
-	FloatingLayerContentImplProps,
-	FloatingLayerContentProps,
-} from "../floating-layer/types.js";
-import type { TextSelectionGuardProps } from "../types.js";
-import type { ReadableBox } from "../tools/index.js";
-import type { FocusScopeImplProps, FocusScopeProps } from "../focus-scope/types.js";
-import type { ScrollLockProps } from "../body-scroll-lock.svelte.js";
-import type { Direction } from "../index.js";
-
-export type PopperLayerProps = EscapeLayerProps &
-	Omit<DismissibleLayerProps, "onInteractOutsideStart"> &
-	FloatingLayerContentProps &
-	TextSelectionGuardProps &
-	FocusScopeProps &
-	Omit<ScrollLockProps, "restoreScrollDelay">;
-
-export type PopperLayerStaticProps = EscapeLayerProps &
-	Omit<DismissibleLayerProps, "onInteractOutsideStart"> &
-	TextSelectionGuardProps &
-	FocusScopeProps &
-	Omit<ScrollLockProps, "restoreScrollDelay"> & {
-		content?: Snippet<[{ props: Record<string, unknown> }]>;
-		dir?: Direction;
-	};
-
-export type PopperLayerImplProps = Omit<
-	EscapeLayerImplProps &
-		DismissibleLayerImplProps &
-		FloatingLayerContentImplProps &
-		{ open: boolean; ref: ReadableBox<HTMLElement | null> } &
-		TextSelectionGuardProps &
-		FocusScopeImplProps & {
-			popper: Snippet<[{ props: Record<string, unknown> }]>;
-			isStatic?: boolean;
-			/**
-			 * Tooltips are special in that they are commonly composed
-			 * with other floating components, where the same trigger is
-			 * used for both the tooltip and the popover.
-			 *
-			 * For situations like this, we need to use a different context
-			 * symbol so that conflicts don't occur.
-			 */
-			tooltip?: boolean;
-
-			/**
-			 * Whether the always-mounted content is still rendered — open, or closed with its exit
-			 * transition running. Gates the scroll lock. Defaults to the open state.
-			 */
-			present?: boolean;
-
-			/**
-			 * Override for the content's pointer-events style.
-			 * @default "auto"
-			 */
-			contentPointerEvents?: "auto" | "none";
-		},
-	"enabled"
->;

package/src/lib/internal/prop-resolvers.ts

@@ -1,14 +0,0 @@
-import { boxWith, type Getter, type ReadableBox } from './tools/index.js';
-import type { PortalTarget } from './portal';
-
-const createPropResolver =
-	<T>(fallback: T) =>
-	(getProp: Getter<T | undefined>): ReadableBox<T> =>
-		boxWith(() => {
-			const prop = getProp();
-			return prop !== undefined ? prop : fallback;
-		});
-
-export const resolveLocaleProp = createPropResolver<string>('en');
-
-export const resolvePortalToProp = createPropResolver<PortalTarget>('body');

package/src/lib/internal/roving-focus-group.svelte.ts

@@ -1,148 +0,0 @@
-import type { Getter } from './tools/index.js';
-import { getDirectionalKeys, kbd } from './kbd.js';
-import type { Direction, Orientation } from './index.js';
-import { isHTMLElement } from './tools/utils/dom.js';
-import { BROWSER } from 'esm-env';
-
-type RovingFocusGroupOptions = (
-	| {
-			/**
-			 * The selector used to find the focusable candidates.
-			 */
-			candidateAttr: string;
-			candidateSelector?: undefined;
-			candidateNodes?: undefined;
-	  }
-	| {
-			/**
-			 * Custom candidate selector
-			 */
-			candidateSelector: string;
-			candidateAttr?: undefined;
-			candidateNodes?: undefined;
-	  }
-	| {
-			/**
-			 * Collects the candidates from the root node, for groups no selector can express.
-			 */
-			candidateNodes: (rootNode: HTMLElement) => HTMLElement[];
-			candidateAttr?: undefined;
-			candidateSelector?: undefined;
-	  }
-) & {
-	/** The node the candidates live under. */
-	rootNode: Getter<HTMLElement | null>;
-
-	/**
-	 * Whether to loop through the candidates when reaching the end.
-	 */
-	loop: Getter<boolean>;
-
-	/**
-	 * The orientation of the roving focus group. Used
-	 * to determine how keyboard navigation should work.
-	 */
-	orientation: Getter<Orientation>;
-
-	/**
-	 * A callback function called when a candidate is focused.
-	 */
-	onCandidateFocus?: (node: HTMLElement) => void;
-};
-
-export class RovingFocusGroup {
-	readonly #opts: RovingFocusGroupOptions;
-	#currentTabStopId = $state.raw<string | null>(null);
-	/** What a candidate of an attribute-marked group stamps on itself; empty for the other kinds. */
-	readonly candidateAttrs: Record<string, ''>;
-
-	constructor(opts: RovingFocusGroupOptions) {
-		this.#opts = opts;
-		this.candidateAttrs = opts.candidateAttr ? { [opts.candidateAttr]: '' } : {};
-	}
-
-	getCandidateNodes() {
-		const rootNode = this.#opts.rootNode();
-		if (!BROWSER || !rootNode) return [];
-		if (this.#opts.candidateNodes) return this.#opts.candidateNodes(rootNode);
-
-		const selector = this.#opts.candidateSelector ?? `[${this.#opts.candidateAttr}]:not([data-disabled])`;
-		return Array.from(rootNode.querySelectorAll<HTMLElement>(selector));
-	}
-
-	focusFirstCandidate() {
-		const items = this.getCandidateNodes();
-		if (!items.length) return;
-		items[0]?.focus();
-	}
-
-	handleKeydown(node: HTMLElement | null | undefined, e: KeyboardEvent, both: boolean = false) {
-		const rootNode = this.#opts.rootNode();
-		if (!rootNode || !node) return;
-
-		const items = this.getCandidateNodes();
-		if (!items.length) return;
-
-		const currentIndex = items.indexOf(node);
-		const dir = (rootNode.ownerDocument.defaultView ?? window).getComputedStyle(rootNode).direction as Direction;
-		const { nextKey, prevKey } = getDirectionalKeys(dir, this.#opts.orientation());
-		const loop = this.#opts.loop();
-
-		const keyToIndex = {
-			[nextKey]: currentIndex + 1,
-			[prevKey]: currentIndex - 1,
-			[kbd.HOME]: 0,
-			[kbd.END]: items.length - 1,
-		};
-
-		if (both) {
-			const altNextKey = nextKey === kbd.ARROW_DOWN ? kbd.ARROW_RIGHT : kbd.ARROW_DOWN;
-			const altPrevKey = prevKey === kbd.ARROW_UP ? kbd.ARROW_LEFT : kbd.ARROW_UP;
-			keyToIndex[altNextKey] = currentIndex + 1;
-			keyToIndex[altPrevKey] = currentIndex - 1;
-		}
-
-		let itemIndex = keyToIndex[e.key];
-		if (itemIndex === undefined) return;
-		e.preventDefault();
-
-		if (itemIndex < 0 && loop) {
-			itemIndex = items.length - 1;
-		} else if (itemIndex === items.length && loop) {
-			itemIndex = 0;
-		}
-
-		const itemToFocus = items[itemIndex];
-		if (!itemToFocus) return;
-		itemToFocus.focus();
-		this.#currentTabStopId = itemToFocus.id;
-		this.#opts.onCandidateFocus?.(itemToFocus);
-		return itemToFocus;
-	}
-
-	getTabIndex(node: HTMLElement | null | undefined) {
-		const items = this.getCandidateNodes();
-		const anyActive = this.#currentTabStopId !== null;
-
-		if (node && !anyActive && items[0] === node) {
-			this.#currentTabStopId = node.id;
-			return 0;
-		} else if (node?.id === this.#currentTabStopId) {
-			return 0;
-		}
-
-		return -1;
-	}
-
-	setCurrentTabStopId(id: string) {
-		this.#currentTabStopId = id;
-	}
-
-	focusCurrentTabStop() {
-		const currentTabStopId = this.#currentTabStopId;
-		if (!currentTabStopId) return;
-		const currentTabStop = this.#opts.rootNode()?.querySelector(`#${currentTabStopId}`);
-		if (!currentTabStop || !isHTMLElement(currentTabStop)) return;
-		currentTabStop.focus();
-	}
-}

package/src/lib/internal/roving-focus-item.svelte.ts

@@ -1,46 +0,0 @@
-import { type Getter, type RefAttachment, attachRef } from './tools/index.js';
-import type { RovingFocusGroup } from './roving-focus-group.svelte.js';
-
-type RovingFocusItemOptions<T extends HTMLElement = HTMLElement> = {
-	group: RovingFocusGroup;
-	ref: Getter<T | null>;
-	/** Receives the node from the attachment; the owner keeps it wherever its `ref` reads from. */
-	setRef: (node: T | null) => void;
-	/** Whether arrow keys move from this item; absent means always. */
-	enabled?: Getter<boolean>;
-	onRefChange?: (node: T | null) => void;
-};
-
-export class RovingFocusItem<T extends HTMLElement = HTMLElement> {
-	readonly #opts: RovingFocusItemOptions<T>;
-	readonly attachment: RefAttachment<T>;
-	#tabIndex = $state(0);
-
-	constructor(opts: RovingFocusItemOptions<T>) {
-		this.#opts = opts;
-		this.attachment = attachRef<T>(opts.setRef, opts.onRefChange);
-		this.handleKeydown = this.handleKeydown.bind(this);
-
-		$effect(() => {
-			if (!(this.#opts.enabled?.() ?? true)) {
-				this.#tabIndex = 0;
-				return;
-			}
-
-			this.#tabIndex = this.#opts.group.getTabIndex(this.#opts.ref());
-		});
-	}
-
-	handleKeydown(e: KeyboardEvent) {
-		if (!(this.#opts.enabled?.() ?? true)) return;
-		return this.#opts.group.handleKeydown(this.#opts.ref(), e);
-	}
-
-	readonly props = $derived.by(
-		() =>
-			({
-				tabindex: this.#tabIndex,
-				...this.attachment,
-			}) as const,
-	);
-}

package/src/lib/internal/safe-polygon.svelte.ts

@@ -1,239 +0,0 @@
-import type { Getter } from './tools/index.js';
-import { on } from 'svelte/events';
-import { isElement } from './tools/utils/dom.js';
-import { createEffectTimeout } from './timeout-fn.svelte.js';
-import {
-	AXIS_VERTICAL,
-	DIR_POS,
-	type Point,
-	type SideBits,
-	TARGET_CONTENT,
-	TARGET_NONE,
-	TARGET_TRIGGER,
-	type TargetBits,
-	flipSide,
-	getCorridorPolygon,
-	getSide,
-	isInsideRect,
-	isPointInPolygon,
-} from './hover-intent-geometry.js';
-
-export interface SafePolygonOptions {
-	enabled: Getter<boolean>;
-	triggerNode: Getter<HTMLElement | null>;
-	contentNode: Getter<HTMLElement | null>;
-	onPointerExit: () => void;
-	buffer?: number;
-	transitIntentTimeout?: number;
-	/** nodes that should not trigger a close when they become the relatedTarget on trigger leave (e.g. sibling triggers in singleton mode) */
-	ignoredTargets?: Getter<HTMLElement[]>;
-}
-
-/**
- * Creates a safe polygon area that allows users to move their cursor between
- * the trigger and floating content without closing it.
- */
-export class SafePolygon {
-	readonly #opts: SafePolygonOptions;
-	readonly #buffer: number;
-	readonly #transitIntentTimeout: number | null;
-
-	// tracks the cursor position when leaving trigger or content
-	#exitPoint: Point | null = null;
-	// tracks what we're moving toward
-	#exitTarget: TargetBits = TARGET_NONE;
-	#transitTargets: HTMLElement[] = [];
-	#trackedTriggerNode: HTMLElement | null = null;
-	#leaveFallbackRafId: number | null = null;
-	// start() is gated on #transitIntentTimeout being set (see #scheduleTransitIntentTimeout).
-	#transitIntentTimer = createEffectTimeout(() => this.#exitIfLeft(), () => this.#transitIntentTimeout!);
-
-	#cancelLeaveFallback() {
-		if (this.#leaveFallbackRafId !== null) {
-			cancelAnimationFrame(this.#leaveFallbackRafId);
-			this.#leaveFallbackRafId = null;
-		}
-	}
-
-	#scheduleLeaveFallback() {
-		this.#cancelLeaveFallback();
-		this.#leaveFallbackRafId = requestAnimationFrame(() => {
-			this.#leaveFallbackRafId = null;
-			this.#exitIfLeft();
-		});
-	}
-
-	#exitIfLeft() {
-		if (!this.#exitPoint || !this.#exitTarget) return;
-		this.#clearTracking();
-		this.#opts.onPointerExit();
-	}
-
-	#scheduleTransitIntentTimeout() {
-		if (this.#transitIntentTimeout === null) return;
-		this.#transitIntentTimer.start();
-	}
-
-	constructor(opts: SafePolygonOptions) {
-		this.#opts = opts;
-		this.#buffer = opts.buffer ?? 1;
-		const transitIntentTimeout = opts.transitIntentTimeout;
-		this.#transitIntentTimeout = typeof transitIntentTimeout === 'number' && transitIntentTimeout > 0 ? transitIntentTimeout : null;
-
-		$effect(() => {
-			const triggerNode = opts.triggerNode();
-			const contentNode = opts.contentNode();
-			const enabled = opts.enabled();
-			if (!triggerNode || !contentNode || !enabled) {
-				this.#trackedTriggerNode = null;
-				this.#clearTracking();
-				return;
-			}
-			if (this.#trackedTriggerNode && this.#trackedTriggerNode !== triggerNode) {
-				this.#clearTracking();
-			}
-			this.#trackedTriggerNode = triggerNode;
-
-			const doc = triggerNode.ownerDocument;
-
-			return [
-				on(doc, 'pointermove', (e) => this.#onPointerMove([e.clientX, e.clientY], triggerNode, contentNode)),
-				on(triggerNode, 'pointerleave', (e) => {
-					// when leaving trigger toward content, record exit point
-					const target = e.relatedTarget;
-					// if going directly to content, no need for polygon tracking
-					if (isElement(target) && contentNode.contains(target)) {
-						return;
-					}
-					// if moving to an ignored target (e.g. a sibling trigger), don't close —
-					// the sibling's enter handler will take over
-					const ignoredTargets = this.#opts.ignoredTargets?.() ?? [];
-					if (isElement(target) && ignoredTargets.some((n) => n === target || n.contains(target))) {
-						return;
-					}
-					this.#transitTargets = isElement(target) && ignoredTargets.length > 0 ? ignoredTargets.filter((n) => target.contains(n)) : [];
-					// for unrelated elements, defer close decisions to pointer geometry checks.
-					// this allows the cursor to pass through intermediate elements on the way
-					// to content without immediately closing.
-					this.#exitPoint = [e.clientX, e.clientY];
-					this.#exitTarget = TARGET_CONTENT;
-					this.#scheduleLeaveFallback();
-				}),
-				on(triggerNode, 'pointerenter', () => {
-					// reached trigger, clear tracking
-					this.#clearTracking();
-				}),
-				on(contentNode, 'pointerenter', () =>
-					// reached content, clear tracking
-					this.#clearTracking(),
-				),
-				on(contentNode, 'pointerleave', (e) => {
-					// when leaving content, check if going directly back to trigger
-					const target = e.relatedTarget;
-					if (isElement(target) && triggerNode.contains(target)) {
-						// going directly to trigger, no polygon tracking needed
-						return;
-					}
-					// set up polygon tracking toward trigger — pointermove decides whether to close
-					this.#exitPoint = [e.clientX, e.clientY];
-					this.#exitTarget = TARGET_TRIGGER;
-					this.#scheduleLeaveFallback();
-				}),
-			].reduce(
-				(acc, cleanup) => () => {
-					acc();
-					cleanup();
-				},
-				() => {},
-			);
-		});
-	}
-
-	#onPointerMove(clientPoint: Point, triggerNode: HTMLElement, contentNode: HTMLElement): void {
-		const exitPoint = this.#exitPoint;
-		const exitTarget = this.#exitTarget;
-		if (!exitPoint || !exitTarget) return;
-
-		this.#cancelLeaveFallback();
-		this.#scheduleTransitIntentTimeout();
-
-		const triggerRect = triggerNode.getBoundingClientRect();
-		const contentRect = contentNode.getBoundingClientRect();
-		const targetRect = exitTarget & TARGET_CONTENT ? contentRect : triggerRect;
-
-		if (isInsideRect(clientPoint, targetRect)) {
-			this.#clearTracking();
-			return;
-		}
-
-		if (exitTarget & TARGET_CONTENT) {
-			for (const transitTarget of this.#transitTargets) {
-				const transitRect = transitTarget.getBoundingClientRect();
-
-				if (isInsideRect(clientPoint, transitRect)) return;
-
-				const transitSide = getSide(triggerRect, transitRect);
-				const transitCorridor = getCorridorPolygon(triggerRect, transitRect, transitSide, this.#buffer);
-
-				if (isPointInPolygon(clientPoint, transitCorridor)) return;
-			}
-		}
-
-		const side = getSide(triggerRect, contentRect);
-		const corridor = getCorridorPolygon(triggerRect, contentRect, side, this.#buffer);
-
-		if (isPointInPolygon(clientPoint, corridor)) return;
-
-		const safePolygon = this.#getSafePolygon(exitPoint, targetRect, side, exitTarget);
-
-		if (isPointInPolygon(clientPoint, safePolygon)) return;
-
-		this.#clearTracking();
-		this.#opts.onPointerExit();
-	}
-
-	#clearTracking() {
-		this.#exitPoint = null;
-		this.#exitTarget = TARGET_NONE;
-		this.#transitTargets = [];
-		this.#cancelLeaveFallback();
-		this.#transitIntentTimer.stop();
-	}
-
-	/**
-	 * Creates a triangular/trapezoidal safe zone from the exit point to the target.
-	 */
-	#getSafePolygon(exitPoint: Point, targetRect: DOMRect, side: SideBits, exitTarget: TargetBits): Point[] {
-		const b = this.#buffer * 4;
-		const [x, y] = exitPoint;
-		const { top, right, bottom, left } = targetRect;
-
-		const effectiveSide = exitTarget & TARGET_TRIGGER ? flipSide(side) : side;
-		const dir = effectiveSide & DIR_POS;
-		const sign = dir === 0 ? 1 : -1;
-
-		if (effectiveSide & AXIS_VERTICAL) {
-			const edgeNear = dir === 0 ? bottom : top;
-			const edgeFar = dir === 0 ? top : bottom;
-			return [
-				[x - b, y + sign * b],
-				[x + b, y + sign * b],
-				[right + b, edgeNear],
-				[right + b, edgeFar],
-				[left - b, edgeFar],
-				[left - b, edgeNear],
-			];
-		}
-
-		const edgeNear = dir === 0 ? right : left;
-		const edgeFar = dir === 0 ? left : right;
-		return [
-			[x + sign * b, y - b],
-			[x + sign * b, y + b],
-			[edgeNear, bottom + b],
-			[edgeFar, bottom + b],
-			[edgeFar, top - b],
-			[edgeNear, top - b],
-		];
-	}
-}