Brunobkr/llama.cpp_AlgMor24_github

1import { attachRef, boxWith, DOMContext, } from "svelte-toolbelt";2import { Context, watch } from "runed";3import { kbd } from "../../internal/kbd.js";4import { createBitsAttrs, boolToStr, getDataOpenClosed, getDataTransitionAttrs, } from "../../internal/attrs.js";5import { isElement, isTouch } from "../../internal/is.js";6import { PresenceManager } from "../../internal/presence-manager.svelte.js";7import { SafePolygon } from "../../internal/safe-polygon.svelte.js";8import { isTabbable } from "tabbable";9const popoverAttrs = createBitsAttrs({10    component: "popover",11    parts: ["root", "trigger", "content", "close", "overlay"],12});13const PopoverRootContext = new Context("Popover.Root");14export class PopoverRootState {15    static create(opts) {16        return PopoverRootContext.set(new PopoverRootState(opts));17    }18    opts;19    contentNode = $state(null);20    contentPresence;21    triggerNode = $state(null);22    overlayNode = $state(null);23    overlayPresence;24    // hover tracking state25    openedViaHover = $state(false);26    hasInteractedWithContent = $state(false);27    hoverCooldown = $state(false);28    closeDelay = $state(0);29    #closeTimeout = null;30    #domContext = null;31    constructor(opts) {32        this.opts = opts;33        this.contentPresence = new PresenceManager({34            ref: boxWith(() => this.contentNode),35            open: this.opts.open,36            onComplete: () => {37                this.opts.onOpenChangeComplete.current(this.opts.open.current);38            },39        });40        this.overlayPresence = new PresenceManager({41            ref: boxWith(() => this.overlayNode),42            open: this.opts.open,43        });44        watch(() => this.opts.open.current, (isOpen) => {45            if (!isOpen) {46                this.openedViaHover = false;47                this.hasInteractedWithContent = false;48                this.#clearCloseTimeout();49            }50        });51    }52    setDomContext(ctx) {53        this.#domContext = ctx;54    }55    #clearCloseTimeout() {56        if (this.#closeTimeout !== null && this.#domContext) {57            this.#domContext.clearTimeout(this.#closeTimeout);58            this.#closeTimeout = null;59        }60    }61    toggleOpen() {62        this.#clearCloseTimeout();63        this.opts.open.current = !this.opts.open.current;64    }65    handleClose() {66        this.#clearCloseTimeout();67        if (!this.opts.open.current)68            return;69        this.opts.open.current = false;70    }71    handleHoverOpen() {72        this.#clearCloseTimeout();73        if (this.opts.open.current)74            return;75        this.openedViaHover = true;76        this.opts.open.current = true;77    }78    handleHoverClose() {79        if (!this.opts.open.current)80            return;81        // only close if opened via hover and user hasn't interacted with content82        if (this.openedViaHover && !this.hasInteractedWithContent) {83            this.opts.open.current = false;84        }85    }86    handleDelayedHoverClose() {87        if (!this.opts.open.current)88            return;89        if (!this.openedViaHover || this.hasInteractedWithContent)90            return;91        this.#clearCloseTimeout();92        if (this.closeDelay <= 0) {93            this.opts.open.current = false;94        }95        else if (this.#domContext) {96            this.#closeTimeout = this.#domContext.setTimeout(() => {97                if (this.openedViaHover && !this.hasInteractedWithContent) {98                    this.opts.open.current = false;99                }100                this.#closeTimeout = null;101            }, this.closeDelay);102        }103    }104    cancelDelayedClose() {105        this.#clearCloseTimeout();106    }107    markInteraction() {108        this.hasInteractedWithContent = true;109        this.#clearCloseTimeout();110    }111}112export class PopoverTriggerState {113    static create(opts) {114        return new PopoverTriggerState(opts, PopoverRootContext.get());115    }116    opts;117    root;118    attachment;119    domContext;120    #openTimeout = null;121    #closeTimeout = null;122    #isHovering = $state(false);123    constructor(opts, root) {124        this.opts = opts;125        this.root = root;126        this.attachment = attachRef(this.opts.ref, (v) => (this.root.triggerNode = v));127        this.domContext = new DOMContext(opts.ref);128        this.root.setDomContext(this.domContext);129        this.onclick = this.onclick.bind(this);130        this.onkeydown = this.onkeydown.bind(this);131        this.onpointerenter = this.onpointerenter.bind(this);132        this.onpointerleave = this.onpointerleave.bind(this);133        watch(() => this.opts.closeDelay.current, (delay) => {134            this.root.closeDelay = delay;135        });136    }137    #clearOpenTimeout() {138        if (this.#openTimeout !== null) {139            this.domContext.clearTimeout(this.#openTimeout);140            this.#openTimeout = null;141        }142    }143    #clearCloseTimeout() {144        if (this.#closeTimeout !== null) {145            this.domContext.clearTimeout(this.#closeTimeout);146            this.#closeTimeout = null;147        }148    }149    #clearAllTimeouts() {150        this.#clearOpenTimeout();151        this.#clearCloseTimeout();152    }153    onpointerenter(e) {154        if (this.opts.disabled.current)155            return;156        if (!this.opts.openOnHover.current)157            return;158        if (isTouch(e))159            return;160        this.#isHovering = true;161        this.#clearCloseTimeout();162        this.root.cancelDelayedClose();163        if (this.root.opts.open.current || this.root.hoverCooldown)164            return;165        const delay = this.opts.openDelay.current;166        if (delay <= 0) {167            this.root.handleHoverOpen();168        }169        else {170            this.#openTimeout = this.domContext.setTimeout(() => {171                this.root.handleHoverOpen();172                this.#openTimeout = null;173            }, delay);174        }175    }176    onpointerleave(e) {177        if (this.opts.disabled.current)178            return;179        if (!this.opts.openOnHover.current)180            return;181        if (isTouch(e))182            return;183        this.#isHovering = false;184        this.#clearOpenTimeout();185        this.root.hoverCooldown = false;186        // let GraceArea handle the close - it will call handleHoverClose via onPointerExit187        // we just need to stop any pending open timer188    }189    onclick(e) {190        if (this.opts.disabled.current)191            return;192        if (e.button !== 0)193            return;194        this.#clearAllTimeouts();195        // if clicked while hovering and popover is open, convert to click-based open196        if (this.#isHovering && this.root.opts.open.current && this.root.openedViaHover) {197            this.root.openedViaHover = false;198            this.root.hasInteractedWithContent = true;199            return;200        }201        // if closing while hovering with openOnHover enabled, set cooldown to prevent202        // immediate re-open via hover203        if (this.#isHovering && this.opts.openOnHover.current && this.root.opts.open.current) {204            this.root.hoverCooldown = true;205        }206        // if clicking to open while in cooldown, reset cooldown (explicit open)207        if (this.root.hoverCooldown && !this.root.opts.open.current) {208            this.root.hoverCooldown = false;209        }210        this.root.toggleOpen();211    }212    onkeydown(e) {213        if (this.opts.disabled.current)214            return;215        if (!(e.key === kbd.ENTER || e.key === kbd.SPACE))216            return;217        e.preventDefault();218        this.#clearAllTimeouts();219        this.root.toggleOpen();220    }221    #getAriaControls() {222        if (this.root.opts.open.current && this.root.contentNode?.id) {223            return this.root.contentNode?.id;224        }225    }226    props = $derived.by(() => ({227        id: this.opts.id.current,228        "aria-haspopup": "dialog",229        "aria-expanded": boolToStr(this.root.opts.open.current),230        "data-state": getDataOpenClosed(this.root.opts.open.current),231        "aria-controls": this.#getAriaControls(),232        [popoverAttrs.trigger]: "",233        disabled: this.opts.disabled.current,234        //235        onkeydown: this.onkeydown,236        onclick: this.onclick,237        onpointerenter: this.onpointerenter,238        onpointerleave: this.onpointerleave,239        ...this.attachment,240    }));241}242export class PopoverContentState {243    static create(opts) {244        return new PopoverContentState(opts, PopoverRootContext.get());245    }246    opts;247    root;248    attachment;249    constructor(opts, root) {250        this.opts = opts;251        this.root = root;252        this.attachment = attachRef(this.opts.ref, (v) => (this.root.contentNode = v));253        this.onpointerdown = this.onpointerdown.bind(this);254        this.onfocusin = this.onfocusin.bind(this);255        this.onpointerenter = this.onpointerenter.bind(this);256        this.onpointerleave = this.onpointerleave.bind(this);257        new SafePolygon({258            triggerNode: () => this.root.triggerNode,259            contentNode: () => this.root.contentNode,260            enabled: () => this.root.opts.open.current &&261                this.root.openedViaHover &&262                !this.root.hasInteractedWithContent,263            onPointerExit: () => {264                this.root.handleDelayedHoverClose();265            },266        });267    }268    onpointerdown(_) {269        this.root.markInteraction();270    }271    onfocusin(e) {272        const target = e.target;273        if (isElement(target) && isTabbable(target)) {274            this.root.markInteraction();275        }276    }277    onpointerenter(e) {278        if (isTouch(e))279            return;280        this.root.cancelDelayedClose();281    }282    onpointerleave(e) {283        if (isTouch(e))284            return;285        // handled by grace area286    }287    onInteractOutside = (e) => {288        this.opts.onInteractOutside.current(e);289        if (e.defaultPrevented)290            return;291        if (!isElement(e.target))292            return;293        const closestTrigger = e.target.closest(popoverAttrs.selector("trigger"));294        if (closestTrigger && closestTrigger === this.root.triggerNode)295            return;296        if (this.opts.customAnchor.current) {297            if (isElement(this.opts.customAnchor.current)) {298                if (this.opts.customAnchor.current.contains(e.target))299                    return;300            }301            else if (typeof this.opts.customAnchor.current === "string") {302                const el = document.querySelector(this.opts.customAnchor.current);303                if (el && el.contains(e.target))304                    return;305            }306        }307        this.root.handleClose();308    };309    onEscapeKeydown = (e) => {310        this.opts.onEscapeKeydown.current(e);311        if (e.defaultPrevented)312            return;313        this.root.handleClose();314    };315    get shouldRender() {316        return this.root.contentPresence.shouldRender;317    }318    get shouldTrapFocus() {319        if (this.root.openedViaHover && !this.root.hasInteractedWithContent)320            return false;321        return true;322    }323    snippetProps = $derived.by(() => ({ open: this.root.opts.open.current }));324    props = $derived.by(() => ({325        id: this.opts.id.current,326        tabindex: -1,327        "data-state": getDataOpenClosed(this.root.opts.open.current),328        ...getDataTransitionAttrs(this.root.contentPresence.transitionStatus),329        [popoverAttrs.content]: "",330        style: {331            pointerEvents: "auto",332            // CSS containment isolates style/layout/paint calculations from the rest of the page333            contain: "layout style",334        },335        onpointerdown: this.onpointerdown,336        onfocusin: this.onfocusin,337        onpointerenter: this.onpointerenter,338        onpointerleave: this.onpointerleave,339        ...this.attachment,340    }));341    popperProps = {342        onInteractOutside: this.onInteractOutside,343        onEscapeKeydown: this.onEscapeKeydown,344    };345}346export class PopoverCloseState {347    static create(opts) {348        return new PopoverCloseState(opts, PopoverRootContext.get());349    }350    opts;351    root;352    attachment;353    constructor(opts, root) {354        this.opts = opts;355        this.root = root;356        this.attachment = attachRef(this.opts.ref);357        this.onclick = this.onclick.bind(this);358        this.onkeydown = this.onkeydown.bind(this);359    }360    onclick(_) {361        this.root.handleClose();362    }363    onkeydown(e) {364        if (!(e.key === kbd.ENTER || e.key === kbd.SPACE))365            return;366        e.preventDefault();367        this.root.handleClose();368    }369    props = $derived.by(() => ({370        id: this.opts.id.current,371        onclick: this.onclick,372        onkeydown: this.onkeydown,373        type: "button",374        [popoverAttrs.close]: "",375        ...this.attachment,376    }));377}378export class PopoverOverlayState {379    static create(opts) {380        return new PopoverOverlayState(opts, PopoverRootContext.get());381    }382    opts;383    root;384    attachment;385    constructor(opts, root) {386        this.opts = opts;387        this.root = root;388        this.attachment = attachRef(this.opts.ref, (v) => (this.root.overlayNode = v));389    }390    get shouldRender() {391        return this.root.overlayPresence.shouldRender;392    }393    snippetProps = $derived.by(() => ({ open: this.root.opts.open.current }));394    props = $derived.by(() => ({395        id: this.opts.id.current,396        [popoverAttrs.overlay]: "",397        style: {398            pointerEvents: "auto",399        },400        "data-state": getDataOpenClosed(this.root.opts.open.current),401        ...getDataTransitionAttrs(this.root.overlayPresence.transitionStatus),402        ...this.attachment,403    }));404}405