Brunobkr/llama.cpp_AlgMor24_github

1import { onMountEffect, attachRef, DOMContext, simpleBox, boxWith, } from "svelte-toolbelt";2import { on } from "svelte/events";3import { Context, watch } from "runed";4import { isElement, isFocusVisible } from "../../internal/is.js";5import { createBitsAttrs, boolToEmptyStrOrUndef, getDataTransitionAttrs, } from "../../internal/attrs.js";6import { TimeoutFn } from "../../internal/timeout-fn.js";7import { SafePolygon } from "../../internal/safe-polygon.svelte.js";8import { PresenceManager } from "../../internal/presence-manager.svelte.js";9export const tooltipAttrs = createBitsAttrs({10    component: "tooltip",11    parts: ["content", "trigger"],12});13const TooltipProviderContext = new Context("Tooltip.Provider");14const TooltipRootContext = new Context("Tooltip.Root");15class TooltipTriggerRegistryState {16    triggers = $state(new Map());17    activeTriggerId = $state(null);18    activeTriggerNode = $derived.by(() => {19        const activeTriggerId = this.activeTriggerId;20        if (activeTriggerId === null)21            return null;22        return this.triggers.get(activeTriggerId)?.node ?? null;23    });24    activePayload = $derived.by(() => {25        const activeTriggerId = this.activeTriggerId;26        if (activeTriggerId === null)27            return null;28        return this.triggers.get(activeTriggerId)?.payload ?? null;29    });30    register = (record) => {31        const next = new Map(this.triggers);32        next.set(record.id, record);33        this.triggers = next;34        this.#coerceActiveTrigger();35    };36    update = (record) => {37        const next = new Map(this.triggers);38        next.set(record.id, record);39        this.triggers = next;40        this.#coerceActiveTrigger();41    };42    unregister = (id) => {43        if (!this.triggers.has(id))44            return;45        const next = new Map(this.triggers);46        next.delete(id);47        this.triggers = next;48        if (this.activeTriggerId === id) {49            this.activeTriggerId = null;50        }51    };52    setActiveTrigger = (id) => {53        if (id === null) {54            this.activeTriggerId = null;55            return;56        }57        if (!this.triggers.has(id)) {58            this.activeTriggerId = null;59            return;60        }61        this.activeTriggerId = id;62    };63    get = (id) => {64        return this.triggers.get(id);65    };66    has = (id) => {67        return this.triggers.has(id);68    };69    getFirstTriggerId = () => {70        const firstEntry = this.triggers.entries().next();71        if (firstEntry.done)72            return null;73        return firstEntry.value[0];74    };75    #coerceActiveTrigger = () => {76        const activeTriggerId = this.activeTriggerId;77        if (activeTriggerId === null)78            return;79        if (!this.triggers.has(activeTriggerId)) {80            this.activeTriggerId = null;81        }82    };83}84class TooltipTetherState {85    registry = new TooltipTriggerRegistryState();86    root = $state(null);87}88// oxlint-disable-next-line no-unused-vars89export class TooltipTether {90    #state = new TooltipTetherState();91    get state() {92        return this.#state;93    }94    open(triggerId) {95        if (!this.#state.registry.has(triggerId)) {96            return;97        }98        this.#state.registry.setActiveTrigger(triggerId);99        this.#state.root?.setActiveTrigger(triggerId);100        this.#state.root?.handleOpen();101    }102    close() {103        this.#state.root?.handleClose();104    }105    get isOpen() {106        return this.#state.root?.opts.open.current ?? false;107    }108}109export function createTooltipTether() {110    return new TooltipTether();111}112export class TooltipProviderState {113    static create(opts) {114        return TooltipProviderContext.set(new TooltipProviderState(opts));115    }116    opts;117    isOpenDelayed = $state(true);118    isPointerInTransit = simpleBox(false);119    #timerFn;120    #openTooltip = $state(null);121    constructor(opts) {122        this.opts = opts;123        this.#timerFn = new TimeoutFn(() => {124            this.isOpenDelayed = true;125        }, this.opts.skipDelayDuration.current);126        onMountEffect(() => on(window, "scroll", (e) => {127            const activeTooltip = this.#openTooltip;128            if (!activeTooltip)129                return;130            const triggerNode = activeTooltip.triggerNode;131            if (!triggerNode)132                return;133            const target = e.target;134            if (!(target instanceof Element || target instanceof Document))135                return;136            if (target.contains(triggerNode)) {137                activeTooltip.handleClose();138            }139        }));140    }141    #startTimer = () => {142        const skipDuration = this.opts.skipDelayDuration.current;143        if (skipDuration === 0) {144            // no grace period — reset immediately so next trigger waits the full delay145            this.isOpenDelayed = true;146            return;147        }148        else {149            this.#timerFn.start();150        }151    };152    #clearTimer = () => {153        this.#timerFn.stop();154    };155    onOpen = (tooltip) => {156        if (this.#openTooltip && this.#openTooltip !== tooltip) {157            this.#openTooltip.handleClose();158        }159        this.#clearTimer();160        this.isOpenDelayed = false;161        this.#openTooltip = tooltip;162    };163    onClose = (tooltip) => {164        if (this.#openTooltip === tooltip) {165            this.#openTooltip = null;166            this.#startTimer();167        }168    };169    isTooltipOpen = (tooltip) => {170        return this.#openTooltip === tooltip;171    };172}173export class TooltipRootState {174    static create(opts) {175        return TooltipRootContext.set(new TooltipRootState(opts, TooltipProviderContext.get()));176    }177    opts;178    provider;179    delayDuration = $derived.by(() => this.opts.delayDuration.current ?? this.provider.opts.delayDuration.current);180    disableHoverableContent = $derived.by(() => this.opts.disableHoverableContent.current ??181        this.provider.opts.disableHoverableContent.current);182    disableCloseOnTriggerClick = $derived.by(() => this.opts.disableCloseOnTriggerClick.current ??183        this.provider.opts.disableCloseOnTriggerClick.current);184    disabled = $derived.by(() => this.opts.disabled.current ?? this.provider.opts.disabled.current);185    ignoreNonKeyboardFocus = $derived.by(() => this.opts.ignoreNonKeyboardFocus.current ??186        this.provider.opts.ignoreNonKeyboardFocus.current);187    registry;188    tether;189    contentNode = $state(null);190    contentPresence;191    #wasOpenDelayed = $state(false);192    #timerFn;193    stateAttr = $derived.by(() => {194        if (!this.opts.open.current)195            return "closed";196        return this.#wasOpenDelayed ? "delayed-open" : "instant-open";197    });198    constructor(opts, provider) {199        this.opts = opts;200        this.provider = provider;201        this.tether = opts.tether.current?.state ?? null;202        this.registry = this.tether?.registry ?? new TooltipTriggerRegistryState();203        this.#timerFn = new TimeoutFn(() => {204            this.#wasOpenDelayed = true;205            this.opts.open.current = true;206        }, this.delayDuration ?? 0);207        if (this.tether) {208            this.tether.root = this;209            onMountEffect(() => {210                return () => {211                    if (this.tether?.root === this) {212                        this.tether.root = null;213                    }214                };215            });216        }217        this.contentPresence = new PresenceManager({218            open: this.opts.open,219            ref: boxWith(() => this.contentNode),220            onComplete: () => {221                this.opts.onOpenChangeComplete.current(this.opts.open.current);222            },223        });224        watch(() => this.delayDuration, () => {225            if (this.delayDuration === undefined)226                return;227            this.#timerFn = new TimeoutFn(() => {228                this.#wasOpenDelayed = true;229                this.opts.open.current = true;230            }, this.delayDuration);231        });232        watch(() => this.opts.open.current, (isOpen) => {233            if (isOpen) {234                this.ensureActiveTrigger();235                this.provider.onOpen(this);236            }237            else {238                this.provider.onClose(this);239            }240        }, { lazy: true });241        watch(() => this.opts.triggerId.current, (triggerId) => {242            if (triggerId === this.registry.activeTriggerId)243                return;244            this.registry.setActiveTrigger(triggerId);245        });246        watch(() => this.registry.activeTriggerId, (activeTriggerId) => {247            if (this.opts.triggerId.current === activeTriggerId)248                return;249            this.opts.triggerId.current = activeTriggerId;250        });251    }252    handleOpen = () => {253        this.#timerFn.stop();254        this.#wasOpenDelayed = false;255        this.ensureActiveTrigger();256        this.opts.open.current = true;257    };258    handleClose = () => {259        this.#timerFn.stop();260        this.opts.open.current = false;261    };262    #handleDelayedOpen = () => {263        this.#timerFn.stop();264        const shouldSkipDelay = !this.provider.isOpenDelayed;265        const delayDuration = this.delayDuration ?? 0;266        // if no delay needed (either skip delay active or delay is 0), open immediately267        if (shouldSkipDelay || delayDuration === 0) {268            this.#wasOpenDelayed = false;269            this.opts.open.current = true;270        }271        else {272            // use timer for actual delays273            this.#timerFn.start();274        }275    };276    onTriggerEnter = (triggerId) => {277        this.setActiveTrigger(triggerId);278        this.#handleDelayedOpen();279    };280    onTriggerLeave = () => {281        if (this.disableHoverableContent) {282            this.handleClose();283        }284        else {285            this.#timerFn.stop();286        }287    };288    ensureActiveTrigger = () => {289        if (this.registry.activeTriggerId !== null &&290            this.registry.has(this.registry.activeTriggerId)) {291            return;292        }293        if (this.opts.triggerId.current !== null &&294            this.registry.has(this.opts.triggerId.current)) {295            this.registry.setActiveTrigger(this.opts.triggerId.current);296            return;297        }298        const firstTriggerId = this.registry.getFirstTriggerId();299        this.registry.setActiveTrigger(firstTriggerId);300    };301    setActiveTrigger = (triggerId) => {302        this.registry.setActiveTrigger(triggerId);303    };304    registerTrigger = (trigger) => {305        this.registry.register(trigger);306        if (trigger.disabled &&307            this.registry.activeTriggerId === trigger.id &&308            this.opts.open.current) {309            this.handleClose();310        }311    };312    updateTrigger = (trigger) => {313        this.registry.update(trigger);314        if (trigger.disabled &&315            this.registry.activeTriggerId === trigger.id &&316            this.opts.open.current) {317            this.handleClose();318        }319    };320    unregisterTrigger = (id) => {321        const isActive = this.registry.activeTriggerId === id;322        this.registry.unregister(id);323        if (isActive && this.opts.open.current) {324            this.handleClose();325        }326    };327    isActiveTrigger = (triggerId) => {328        return this.registry.activeTriggerId === triggerId;329    };330    get triggerNode() {331        return this.registry.activeTriggerNode;332    }333    get activePayload() {334        return this.registry.activePayload;335    }336    get activeTriggerId() {337        return this.registry.activeTriggerId;338    }339}340export class TooltipTriggerState {341    static create(opts) {342        if (opts.tether.current) {343            return new TooltipTriggerState(opts, null, opts.tether.current.state);344        }345        return new TooltipTriggerState(opts, TooltipRootContext.get(), null);346    }347    opts;348    root;349    tether;350    attachment;351    #isPointerDown = simpleBox(false);352    #hasPointerMoveOpened = $state(false);353    domContext;354    #transitCheckTimeout = null;355    #mounted = false;356    #lastRegisteredId = null;357    constructor(opts, root, tether) {358        this.opts = opts;359        this.root = root;360        this.tether = tether;361        this.domContext = new DOMContext(opts.ref);362        this.attachment = attachRef(this.opts.ref, (v) => this.#register(v));363        watch(() => this.opts.id.current, () => {364            this.#register(this.opts.ref.current);365        });366        watch(() => this.opts.payload.current, () => {367            this.#register(this.opts.ref.current);368        });369        watch(() => this.opts.disabled.current, () => {370            this.#register(this.opts.ref.current);371        });372        onMountEffect(() => {373            this.#mounted = true;374            this.#register(this.opts.ref.current);375            return () => {376                const root = this.#getRoot();377                const id = this.#lastRegisteredId;378                if (id) {379                    if (this.tether) {380                        this.tether.registry.unregister(id);381                    }382                    else {383                        root?.unregisterTrigger(id);384                    }385                }386                this.#lastRegisteredId = null;387                this.#mounted = false;388            };389        });390    }391    #getRoot = () => {392        return this.tether?.root ?? this.root;393    };394    #isDisabled = () => {395        const root = this.#getRoot();396        return this.opts.disabled.current || Boolean(root?.disabled);397    };398    #register = (node) => {399        if (!this.#mounted)400            return;401        const id = this.opts.id.current;402        const payload = this.opts.payload.current;403        const disabled = this.opts.disabled.current;404        if (this.#lastRegisteredId && this.#lastRegisteredId !== id) {405            const root = this.#getRoot();406            if (this.tether) {407                this.tether.registry.unregister(this.#lastRegisteredId);408            }409            else {410                root?.unregisterTrigger(this.#lastRegisteredId);411            }412        }413        const triggerRecord = {414            id,415            node,416            payload,417            disabled,418        };419        const root = this.#getRoot();420        if (this.tether) {421            if (this.tether.registry.has(id)) {422                this.tether.registry.update(triggerRecord);423            }424            else {425                this.tether.registry.register(triggerRecord);426            }427            if (disabled &&428                this.tether.registry.activeTriggerId === id &&429                root?.opts.open.current) {430                root.handleClose();431            }432        }433        else {434            if (root?.registry.has(id)) {435                root.updateTrigger(triggerRecord);436            }437            else {438                root?.registerTrigger(triggerRecord);439            }440        }441        this.#lastRegisteredId = id;442    };443    #clearTransitCheck = () => {444        if (this.#transitCheckTimeout !== null) {445            clearTimeout(this.#transitCheckTimeout);446            this.#transitCheckTimeout = null;447        }448    };449    handlePointerUp = () => {450        this.#isPointerDown.current = false;451    };452    #onpointerup = () => {453        if (this.#isDisabled())454            return;455        this.#isPointerDown.current = false;456    };457    #onpointerdown = () => {458        if (this.#isDisabled())459            return;460        this.#isPointerDown.current = true;461        this.domContext.getDocument().addEventListener("pointerup", () => {462            this.handlePointerUp();463        }, { once: true });464    };465    #onpointerenter = (e) => {466        const root = this.#getRoot();467        if (!root)468            return;469        if (this.#isDisabled()) {470            if (root.opts.open.current) {471                root.handleClose();472            }473            return;474        }475        if (e.pointerType === "touch")476            return;477        // if in transit, wait briefly to see if user is actually heading to old content or staying here478        if (root.provider.isPointerInTransit.current) {479            this.#clearTransitCheck();480            this.#transitCheckTimeout = window.setTimeout(() => {481                // if still in transit after delay, user is likely staying on this trigger482                if (root.provider.isPointerInTransit.current) {483                    root.provider.isPointerInTransit.current = false;484                    root.onTriggerEnter(this.opts.id.current);485                    this.#hasPointerMoveOpened = true;486                }487            }, 250);488            return;489        }490        root.onTriggerEnter(this.opts.id.current);491        this.#hasPointerMoveOpened = true;492    };493    #onpointermove = (e) => {494        const root = this.#getRoot();495        if (!root)496            return;497        if (this.#isDisabled()) {498            if (root.opts.open.current) {499                root.handleClose();500            }501            return;502        }503        if (e.pointerType === "touch")504            return;505        if (this.#hasPointerMoveOpened)506            return;507        // moving within trigger means we're definitely not in transit anymore508        this.#clearTransitCheck();509        root.provider.isPointerInTransit.current = false;510        root.onTriggerEnter(this.opts.id.current);511        this.#hasPointerMoveOpened = true;512    };513    #onpointerleave = (e) => {514        const root = this.#getRoot();515        if (!root)516            return;517        if (this.#isDisabled())518            return;519        this.#clearTransitCheck();520        if (!root.isActiveTrigger(this.opts.id.current)) {521            this.#hasPointerMoveOpened = false;522            return;523        }524        const relatedTarget = e.relatedTarget;525        // when moving to a sibling trigger and skip delay is active, don't close —526        // the sibling's enter handler will switch the active trigger instantly.527        // if skipDelayDuration is 0 there's no grace period, so close now and let528        // the sibling wait through the full delay (and re-animate).529        if (isElement(relatedTarget)) {530            for (const record of root.registry.triggers.values()) {531                if (record.node !== relatedTarget)532                    continue;533                if (root.provider.opts.skipDelayDuration.current > 0) {534                    this.#hasPointerMoveOpened = false;535                    return;536                }537                root.handleClose();538                this.#hasPointerMoveOpened = false;539                return;540            }541        }542        root.onTriggerLeave();543        this.#hasPointerMoveOpened = false;544    };545    #onfocus = (e) => {546        const root = this.#getRoot();547        if (!root)548            return;549        if (this.#isPointerDown.current)550            return;551        if (this.#isDisabled()) {552            if (root.opts.open.current) {553                root.handleClose();554            }555            return;556        }557        if (root.ignoreNonKeyboardFocus && !isFocusVisible(e.currentTarget))558            return;559        root.setActiveTrigger(this.opts.id.current);560        root.handleOpen();561    };562    #onblur = () => {563        const root = this.#getRoot();564        if (!root || this.#isDisabled())565            return;566        root.handleClose();567    };568    #onclick = () => {569        const root = this.#getRoot();570        if (!root || root.disableCloseOnTriggerClick || this.#isDisabled())571            return;572        root.handleClose();573    };574    props = $derived.by(() => {575        const root = this.#getRoot();576        const isOpenForTrigger = Boolean(root?.opts.open.current && root.isActiveTrigger(this.opts.id.current));577        const isDisabled = this.#isDisabled();578        return {579            id: this.opts.id.current,580            "aria-describedby": isOpenForTrigger ? root?.contentNode?.id : undefined,581            "data-state": isOpenForTrigger ? root?.stateAttr : "closed",582            "data-disabled": boolToEmptyStrOrUndef(isDisabled),583            "data-delay-duration": `${root?.delayDuration ?? 0}`,584            [tooltipAttrs.trigger]: "",585            tabindex: isDisabled ? undefined : this.opts.tabindex.current,586            disabled: this.opts.disabled.current,587            onpointerup: this.#onpointerup,588            onpointerdown: this.#onpointerdown,589            onpointerenter: this.#onpointerenter,590            onpointermove: this.#onpointermove,591            onpointerleave: this.#onpointerleave,592            onfocus: this.#onfocus,593            onblur: this.#onblur,594            onclick: this.#onclick,595            ...this.attachment,596        };597    });598}599export class TooltipContentState {600    static create(opts) {601        return new TooltipContentState(opts, TooltipRootContext.get());602    }603    opts;604    root;605    attachment;606    constructor(opts, root) {607        this.opts = opts;608        this.root = root;609        this.attachment = attachRef(this.opts.ref, (v) => (this.root.contentNode = v));610        new SafePolygon({611            triggerNode: () => this.root.triggerNode,612            contentNode: () => this.root.contentNode,613            enabled: () => this.root.opts.open.current && !this.root.disableHoverableContent,614            transitIntentTimeout: 180,615            ignoredTargets: () => {616                // only skip closing for sibling triggers when there's a skip-delay grace period;617                // with skipDelayDuration=0 the close+reopen is intentional (full delay + re-animation)618                if (this.root.provider.opts.skipDelayDuration.current === 0)619                    return [];620                const nodes = [];621                const activeTriggerNode = this.root.triggerNode;622                for (const record of this.root.registry.triggers.values()) {623                    if (record.node && record.node !== activeTriggerNode) {624                        nodes.push(record.node);625                    }626                }627                return nodes;628            },629            onPointerExit: () => {630                if (this.root.provider.isTooltipOpen(this.root)) {631                    this.root.handleClose();632                }633            },634        });635    }636    onInteractOutside = (e) => {637        if (isElement(e.target) &&638            this.root.triggerNode?.contains(e.target) &&639            this.root.disableCloseOnTriggerClick) {640            e.preventDefault();641            return;642        }643        this.opts.onInteractOutside.current(e);644        if (e.defaultPrevented)645            return;646        this.root.handleClose();647    };648    onEscapeKeydown = (e) => {649        this.opts.onEscapeKeydown.current?.(e);650        if (e.defaultPrevented)651            return;652        this.root.handleClose();653    };654    onOpenAutoFocus = (e) => {655        e.preventDefault();656    };657    onCloseAutoFocus = (e) => {658        e.preventDefault();659    };660    get shouldRender() {661        return this.root.contentPresence.shouldRender;662    }663    snippetProps = $derived.by(() => ({ open: this.root.opts.open.current }));664    props = $derived.by(() => ({665        id: this.opts.id.current,666        "data-state": this.root.stateAttr,667        "data-disabled": boolToEmptyStrOrUndef(this.root.disabled),668        ...getDataTransitionAttrs(this.root.contentPresence.transitionStatus),669        style: {670            outline: "none",671        },672        [tooltipAttrs.content]: "",673        ...this.attachment,674    }));675    popperProps = {676        onInteractOutside: this.onInteractOutside,677        onEscapeKeydown: this.onEscapeKeydown,678        onOpenAutoFocus: this.onOpenAutoFocus,679        onCloseAutoFocus: this.onCloseAutoFocus,680    };681}682