sheer-ui 0.4.2 → 0.5.0

package/dist/internal/safe-polygon.svelte.js

@@ -0,0 +1,188 @@
+import { on } from 'svelte/events';
+import { isElement } from './tools/utils/dom.js';
+import { createEffectTimeout } from './timeout-fn.svelte.js';
+import { AXIS_VERTICAL, DIR_POS, TARGET_CONTENT, TARGET_NONE, TARGET_TRIGGER, flipSide, getCorridorPolygon, getSide, isInsideRect, isPointInPolygon, } from './hover-intent-geometry.js';
+/**
+ * Creates a safe polygon area that allows users to move their cursor between
+ * the trigger and floating content without closing it.
+ */
+export class SafePolygon {
+    #opts;
+    #buffer;
+    #transitIntentTimeout;
+    // tracks the cursor position when leaving trigger or content
+    #exitPoint = null;
+    // tracks what we're moving toward
+    #exitTarget = TARGET_NONE;
+    #transitTargets = [];
+    #trackedTriggerNode = null;
+    #leaveFallbackRafId = 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) {
+        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, triggerNode, contentNode) {
+        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, targetRect, side, exitTarget) {
+        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],
+        ];
+    }
+}

package/dist/internal/selection.svelte.d.ts

@@ -0,0 +1,72 @@
+import type { Orientation } from './index.js';
+import type { BitsKeyboardEvent, BitsMouseEvent } from './types.js';
+import type { RovingFocusGroup } from './roving-focus-group.svelte.js';
+import { RovingFocusItem } from './roving-focus-item.svelte.js';
+export type SelectionType = 'single' | 'multiple';
+export type Selection = string | string[];
+export declare const emptySelection: (type: SelectionType) => Selection;
+/**
+ * Membership over a consumer's bindable that is a string in single mode and a string array
+ * in multiple mode. `value` reads and writes the root's prop through the closures it was
+ * built with; the mode is fixed at construction, so `with` always keeps the declared shape.
+ */
+export declare class SelectionValue {
+    #private;
+    readonly isMulti: boolean;
+    constructor(type: SelectionType, read: () => Selection, write: (value: Selection) => void);
+    get value(): Selection;
+    set value(next: Selection);
+    includes(item: string): boolean;
+    /** The value with `item` present or absent; the same reference when it already is. */
+    with(item: string, selected: boolean): Selection;
+}
+/**
+ * What a selection item needs from the group that owns it. Reactive members are accessors on the
+ * implementing class, read at use, never copied out.
+ */
+export interface SelectionGroup {
+    readonly selection: SelectionValue;
+    readonly disabled: boolean;
+    readonly orientation: Orientation;
+    readonly rovingFocusGroup: RovingFocusGroup;
+    /** Whether arrow keys move between the items; absent means always. */
+    readonly rovingFocus?: boolean;
+    /** A selection takes the roving tab stop in a toggle group; a toolbar's stays where it is. */
+    readonly selectionTakesTabStop: boolean;
+    /** Beyond the roving group's candidate attribute, which every item carries. */
+    readonly extraItemAttrs?: Record<string, ''>;
+}
+/** The item component's props as accessors over its `$props()`; `ref` writes back to its bindable. */
+export interface SelectionItemOpts {
+    readonly id: string;
+    readonly value: string;
+    readonly disabled: boolean;
+    ref: HTMLElement | null;
+}
+export declare class SelectionItemState {
+    #private;
+    readonly opts: SelectionItemOpts;
+    readonly group: SelectionGroup;
+    readonly rovingItem: RovingFocusItem;
+    readonly isPressed: boolean;
+    constructor(opts: SelectionItemOpts, group: SelectionGroup);
+    onclick(_: BitsMouseEvent): void;
+    onkeydown(e: BitsKeyboardEvent): void;
+    readonly snippetProps: {
+        pressed: boolean;
+    };
+    readonly props: {
+        readonly tabindex: number;
+        readonly onclick: (_: BitsMouseEvent) => void;
+        readonly onkeydown: (e: BitsKeyboardEvent) => void;
+        readonly id: string;
+        readonly role: "radio" | undefined;
+        readonly 'data-orientation': Orientation;
+        readonly 'data-disabled': "" | undefined;
+        readonly 'data-state': "off" | "on";
+        readonly 'data-value': string;
+        readonly 'aria-pressed': "true" | "false" | undefined;
+        readonly 'aria-checked': "true" | "false" | "mixed" | undefined;
+        readonly disabled: true | undefined;
+    };
+}

package/dist/internal/selection.svelte.js

@@ -0,0 +1,98 @@
+import { boolToStr, boolToEmptyStrOrUndef, boolToTrueOrUndef, getAriaChecked } from './attrs.js';
+import { kbd } from './kbd.js';
+import { RovingFocusItem } from './roving-focus-item.svelte.js';
+export const emptySelection = (type) => (type === 'single' ? '' : []);
+/**
+ * Membership over a consumer's bindable that is a string in single mode and a string array
+ * in multiple mode. `value` reads and writes the root's prop through the closures it was
+ * built with; the mode is fixed at construction, so `with` always keeps the declared shape.
+ */
+export class SelectionValue {
+    isMulti;
+    #read;
+    #write;
+    constructor(type, read, write) {
+        this.isMulti = type === 'multiple';
+        this.#read = read;
+        this.#write = write;
+    }
+    get value() {
+        return this.#read();
+    }
+    set value(next) {
+        this.#write(next);
+    }
+    includes(item) {
+        const value = this.#read();
+        return this.isMulti ? value.includes(item) : value === item;
+    }
+    /** The value with `item` present or absent; the same reference when it already is. */
+    with(item, selected) {
+        const value = this.#read();
+        const present = this.isMulti ? value.includes(item) : value === item;
+        if (present === selected)
+            return value;
+        if (!this.isMulti)
+            return selected ? item : '';
+        return selected ? [...value, item] : value.filter((v) => v !== item);
+    }
+}
+export class SelectionItemState {
+    opts;
+    group;
+    rovingItem;
+    #isDisabled = $derived.by(() => this.opts.disabled || this.group.disabled);
+    isPressed = $derived.by(() => this.group.selection.includes(this.opts.value));
+    constructor(opts, group) {
+        this.opts = opts;
+        this.group = group;
+        this.rovingItem = new RovingFocusItem({
+            group: group.rovingFocusGroup,
+            ref: () => opts.ref,
+            setRef: (v) => (opts.ref = v),
+            enabled: () => group.rovingFocus ?? true,
+        });
+        this.onclick = this.onclick.bind(this);
+        this.onkeydown = this.onkeydown.bind(this);
+    }
+    #activate() {
+        if (this.#isDisabled)
+            return;
+        const item = this.opts.value;
+        const selected = !this.group.selection.includes(item);
+        this.group.selection.value = this.group.selection.with(item, selected);
+        if (selected && this.group.selectionTakesTabStop)
+            this.group.rovingFocusGroup.setCurrentTabStopId(this.opts.id);
+    }
+    onclick(_) {
+        this.#activate();
+    }
+    onkeydown(e) {
+        if (this.#isDisabled)
+            return;
+        if (e.key === kbd.ENTER || e.key === kbd.SPACE) {
+            e.preventDefault();
+            this.#activate();
+            return;
+        }
+        this.rovingItem.handleKeydown(e);
+    }
+    snippetProps = $derived.by(() => ({ pressed: this.isPressed }));
+    props = $derived.by(() => ({
+        id: this.opts.id,
+        role: this.group.selection.isMulti ? undefined : 'radio',
+        'data-orientation': this.group.orientation,
+        'data-disabled': boolToEmptyStrOrUndef(this.#isDisabled),
+        'data-state': this.isPressed ? 'on' : 'off',
+        'data-value': this.opts.value,
+        'aria-pressed': this.group.selection.isMulti ? boolToStr(this.isPressed) : undefined,
+        'aria-checked': this.group.selection.isMulti ? undefined : getAriaChecked(this.isPressed, false),
+        disabled: boolToTrueOrUndef(this.#isDisabled),
+        ...this.group.rovingFocusGroup.candidateAttrs,
+        ...this.group.extraItemAttrs,
+        //
+        onclick: this.onclick,
+        onkeydown: this.onkeydown,
+        ...this.rovingItem.props,
+    }));
+}

package/dist/internal/shared-state.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { AnyFn } from './types.js';
+export declare class SharedState<T extends AnyFn> {
+    #private;
+    constructor(factory: T);
+    get(...args: Parameters<T>): ReturnType<T>;
+}

package/dist/internal/shared-state.svelte.js

@@ -0,0 +1,30 @@
+export class SharedState {
+    #factory;
+    #subscribers = 0;
+    #state = $state();
+    #disposeRoot;
+    constructor(factory) {
+        this.#factory = factory;
+    }
+    #release = () => {
+        // Deferred a microtask so a same-tick destroy→create (last overlay closing while the
+        // next one opens) lands on the still-alive root instead of disposing and rebuilding it —
+        // the same race svelte core defers for in createSubscriber.
+        queueMicrotask(() => {
+            this.#subscribers -= 1;
+            if (this.#subscribers > 0)
+                return;
+            this.#disposeRoot?.();
+            this.#disposeRoot = undefined;
+            this.#state = undefined;
+        });
+    };
+    get(...args) {
+        this.#subscribers += 1;
+        this.#disposeRoot ??= $effect.root(() => {
+            this.#state = this.#factory(...args);
+        });
+        $effect(() => this.#release);
+        return this.#state;
+    }
+}

package/dist/internal/state-machine.svelte.d.ts

@@ -0,0 +1,15 @@
+interface Machine<S> {
+    [k: string]: {
+        [k: string]: S;
+    };
+}
+type MachineState<T> = keyof T;
+type MachineEvent<T> = keyof UnionToIntersection<T[keyof T]>;
+type UnionToIntersection<T> = (T extends any ? (x: T) => any : never) extends (x: infer R) => any ? R : never;
+export declare class StateMachine<M> {
+    #private;
+    state: MachineState<M>;
+    constructor(initialState: MachineState<M>, machine: M & Machine<MachineState<M>>);
+    dispatch(event: MachineEvent<M>): void;
+}
+export {};

package/dist/internal/state-machine.svelte.js

@@ -0,0 +1,17 @@
+export class StateMachine {
+    state;
+    #machine;
+    constructor(initialState, machine) {
+        this.state = $state.raw(initialState);
+        this.#machine = machine;
+        this.dispatch = this.dispatch.bind(this);
+    }
+    #reducer(event) {
+        // @ts-expect-error  state is keyof M
+        const nextState = this.#machine[this.state][event];
+        return nextState ?? this.state;
+    }
+    dispatch(event) {
+        this.state = this.#reducer(event);
+    }
+}

package/dist/internal/svelte-resize-observer.svelte.d.ts

@@ -0,0 +1,6 @@
+type MaybeElement = Element | null | undefined | false;
+export declare function resizeAttachment<T extends Element = HTMLElement>(onResize: ResizeObserverCallback, options?: ResizeObserverOptions): {
+    [x: symbol]: (node: T) => () => void;
+};
+export declare function observeResizeMany(getNodes: () => Iterable<MaybeElement>, onResize: () => void, options?: ResizeObserverOptions): void;
+export {};

package/dist/internal/svelte-resize-observer.svelte.js

@@ -0,0 +1,29 @@
+import { createAttachmentKey } from 'svelte/attachments';
+/** rAF-debounced ResizeObserver over `nodes`, returning its teardown. */
+function observeNodes(nodes, onResize, options) {
+    let rAF = 0;
+    const resizeObserver = new ResizeObserver((entries, observer) => {
+        window.cancelAnimationFrame(rAF);
+        rAF = window.requestAnimationFrame(() => onResize(entries, observer));
+    });
+    for (const node of nodes) {
+        resizeObserver.observe(node, options);
+    }
+    return () => {
+        window.cancelAnimationFrame(rAF);
+        resizeObserver.disconnect();
+    };
+}
+export function resizeAttachment(onResize, options) {
+    return {
+        [createAttachmentKey()]: ((node) => observeNodes([node], onResize, options)),
+    };
+}
+export function observeResizeMany(getNodes, onResize, options) {
+    $effect(() => {
+        const nodes = [...getNodes()].filter(Boolean);
+        if (nodes.length === 0)
+            return;
+        return observeNodes(nodes, onResize, options);
+    });
+}

package/dist/internal/tabbable.d.ts

@@ -0,0 +1,30 @@
+type DisplayCheck = 'full' | 'none';
+interface TabbableOptions {
+    displayCheck?: DisplayCheck;
+    getShadowRoot?: true;
+}
+type TabbableElement = HTMLElement & {
+    assignedSlot?: HTMLSlotElement | null;
+    checked?: boolean;
+    disabled?: boolean;
+    form?: HTMLFormElement | null;
+    name?: string;
+    type?: string;
+};
+export declare function getTabIndex(node: TabbableElement): number;
+export declare function tabbable(container: HTMLElement, options?: TabbableOptions): TabbableElement[];
+export declare function focusable(container: HTMLElement, options?: TabbableOptions): TabbableElement[];
+export declare function isTabbableNode(node: Element, options?: TabbableOptions): boolean;
+export declare function isFocusableNode(node: Element, options?: TabbableOptions): boolean;
+export declare function getTabbableCandidates(container: HTMLElement): HTMLElement[];
+export declare function getFocusableCandidates(container: HTMLElement): HTMLElement[];
+export declare function isTabbable(node: Element): boolean;
+export declare function isFocusable(node: Element): boolean;
+/**
+ * Gets all tabbable elements in the body and finds the next/previous tabbable element
+ * from the `currentNode` based on the `direction` provided.
+ * @param currentNode - the node we want to get the next/previous tabbable from
+ */
+export declare function getTabbableFrom(currentNode: HTMLElement, direction: 'next' | 'prev'): HTMLElement | undefined;
+export declare function getTabbableFromFocusable(currentNode: HTMLElement, direction: 'next' | 'prev'): HTMLElement;
+export {};