@marianmeres/stuic 1.15.0 → 1.17.0

package/dist/actions/autoscroll.d.ts

@@ -0,0 +1,21 @@
+declare type Subscribe<T> = (value: T) => void;
+declare type Unsubscribe = () => void;
+declare type Update<T> = (value: T) => T;
+interface StoreReadable<T> {
+    subscribe(cb: Subscribe<T>): Unsubscribe;
+}
+interface StoreLike<T> extends StoreReadable<T> {
+    set(value: T): void;
+    update(cb: Update<T>): void;
+}
+export type AutoscrollOptions = ScrollOptions & {
+    dependencies?: StoreReadable<any>[];
+    logger?: (...args: any[]) => void;
+    newScrollableContentSignal?: StoreLike<boolean>;
+    shouldScrollThresholdPx?: number;
+    startScrollTimeout?: number;
+};
+export declare function autoscroll(node: HTMLElement, options?: AutoscrollOptions): {
+    destroy(): void;
+};
+export {};

package/dist/actions/autoscroll.js

@@ -0,0 +1,60 @@
+const DEFAULTS = {
+    shouldScrollThresholdPx: 100,
+    startScrollTimeout: 300,
+};
+export function autoscroll(node, options = {
+    shouldScrollThresholdPx: DEFAULTS.shouldScrollThresholdPx,
+    startScrollTimeout: DEFAULTS.startScrollTimeout,
+}) {
+    // use "smooth" by default
+    options.behavior ??= 'smooth';
+    options.shouldScrollThresholdPx ??= DEFAULTS.shouldScrollThresholdPx;
+    options.startScrollTimeout ??= DEFAULTS.startScrollTimeout;
+    const { behavior, shouldScrollThresholdPx, dependencies, logger, newScrollableContentSignal, startScrollTimeout, } = options || {};
+    let origScrollHeight = 0;
+    const log = (...args) => typeof logger === 'function' && logger.apply(null, [...args]);
+    const shouldScroll = () => {
+        const { scrollTop, clientHeight } = node;
+        const result = origScrollHeight - scrollTop - clientHeight < shouldScrollThresholdPx;
+        log('shouldScroll?', result, { scrollTop, origScrollHeight, clientHeight });
+        return result;
+    };
+    const scroll = () => {
+        const opts = { top: node.scrollHeight, left: node.scrollWidth, behavior };
+        log(`scrollTo(${JSON.stringify(opts)})`);
+        node.scrollTo(opts);
+    };
+    // for when children change sizes
+    const resizeObserver = new ResizeObserver(() => {
+        log('observed resize...');
+        shouldScroll() && scroll();
+    });
+    // for when children
+    const mutationObserver = new MutationObserver(() => {
+        log('observed mutation...');
+        shouldScroll() ? scroll() : newScrollableContentSignal?.set(true);
+        origScrollHeight = node.scrollHeight;
+    });
+    const unsubs = dependencies?.map((dep) => dep.subscribe((v) => {
+        log('dependency update...', v);
+        setTimeout(scroll, startScrollTimeout);
+    })) ?? [];
+    // observe size of all children
+    for (const child of node.children) {
+        resizeObserver.observe(child);
+    }
+    mutationObserver.observe(node, { childList: true, subtree: true });
+    return {
+        destroy() {
+            if (mutationObserver) {
+                mutationObserver.disconnect();
+            }
+            if (resizeObserver) {
+                resizeObserver.disconnect();
+            }
+            for (const unsubscribe of unsubs) {
+                unsubscribe();
+            }
+        },
+    };
+}

package/dist/actions/on-outside.d.ts

@@ -0,0 +1,9 @@
+type Handler = (el: Node) => void;
+export interface OnOutsideOptions {
+    handler?: Handler | null;
+    events?: string[];
+}
+export declare const onOutside: (node: HTMLElement, options?: OnOutsideOptions) => {
+    destroy(): void;
+};
+export {};

package/dist/actions/on-outside.js

@@ -0,0 +1,27 @@
+// will notify and (optionally) execute on outside click/focusin/...
+export const onOutside = (node, options) => {
+    const DEFAULT_OPTIONS = {
+        handler: null,
+        events: ['click', 'focusin'],
+    };
+    const { handler, events } = { ...DEFAULT_OPTIONS, ...(options || {}) };
+    const listener = (event) => {
+        if (!event?.target)
+            return;
+        if (node && !node.contains(event.target) && !event.defaultPrevented) {
+            node.dispatchEvent(new CustomEvent('outside', { detail: event.target }));
+            if (typeof handler === 'function')
+                handler(event.target);
+        }
+    };
+    events?.forEach((eventName) => {
+        document.addEventListener(eventName, listener, true);
+    });
+    return {
+        destroy() {
+            events?.forEach((eventName) => {
+                document.removeEventListener(eventName, listener, true);
+            });
+        },
+    };
+};

package/dist/actions/tooltip/_make-visible.d.ts

@@ -0,0 +1,3 @@
+import { type TooltipLogger } from './tooltip.js';
+export declare const _makeInVisible: (div: HTMLElement | null, arrow: HTMLElement | null, log: TooltipLogger) => void;
+export declare const _makeVisible: (div: HTMLElement | null, arrow: HTMLElement | null, log: TooltipLogger) => void;

package/dist/actions/tooltip/_make-visible.js

@@ -0,0 +1,25 @@
+import { _TRANSITION_OPACITY_DUR } from './tooltip.js';
+export const _makeInVisible = (div, arrow, log) => {
+    (div || arrow) && log('_makeInVisible');
+    div && (div.style.opacity = '0');
+    arrow && (arrow.style.opacity = '0');
+    setTimeout(() => {
+        arrow?.classList.add('hidden');
+        div?.classList.add('hidden');
+        if (div) {
+            div.style.left = `auto`;
+            div.style.top = `auto`;
+        }
+    }, _TRANSITION_OPACITY_DUR);
+};
+export const _makeVisible = (div, arrow, log) => {
+    (div || arrow) && log('_makeVisible');
+    if (div) {
+        div.classList.remove('hidden');
+        div.style.opacity = '1';
+    }
+    if (arrow) {
+        arrow.classList.remove('hidden');
+        arrow.style.opacity = '1';
+    }
+};

package/dist/actions/tooltip/_maybe-pick-safe-placement.d.ts

@@ -0,0 +1,4 @@
+import type { calculateAlignment } from '../../index.js';
+import type { Alignment } from '../../utils/calculate-alignment.js';
+import type { TooltipLogger, TooltipOptions } from './tooltip.js';
+export declare const _maybePickSafePlacement: (calc: ReturnType<typeof calculateAlignment>, opts: TooltipOptions, log: TooltipLogger) => Alignment | false;

package/dist/actions/tooltip/_maybe-pick-safe-placement.js

@@ -0,0 +1,86 @@
+export const _maybePickSafePlacement = (calc, opts, log) => {
+    let preferred = opts.alignment;
+    let picked = preferred;
+    const sides = {
+        top: ['top', 'topLeft', 'topRight'],
+        bottom: ['bottom', 'bottomLeft', 'bottomRight'],
+        left: ['left', 'leftTop', 'leftBottom'],
+        right: ['right', 'rightTop', 'rightBottom'],
+    };
+    // try alternatives within same side
+    const _trySideVariant = (val) => {
+        for (let side of Object.keys(sides)) {
+            if (val.startsWith(side)) {
+                for (let pos of sides[side]) {
+                    if (calc.position[pos].safe) {
+                        log(`_trySideVariant for '${val}', found '${pos}'`);
+                        return pos;
+                    }
+                }
+            }
+        }
+        log(`_trySideVariant for '${val}', found none (returning orig '${val}')`);
+        return val;
+    };
+    // DRY
+    const _trySideOpposite = (val) => {
+        const opposites = { top: 'bottom', bottom: 'top', left: 'right', right: 'left' };
+        for (let [k, v] of Object.entries(opposites)) {
+            if (val.startsWith(k)) {
+                const r = val.replace(k, v);
+                log(`_trySideOpposite for '${val}', found '${r}'`);
+                return r;
+            }
+        }
+        log(`_trySideOpposite for '${val}', found none (returning orig '${val}')`);
+        return val;
+    };
+    const _switchAxis = (val) => {
+        const opposites = { top: 'right', bottom: 'right', left: 'top', right: 'top' };
+        for (let [k, v] of Object.entries(opposites)) {
+            if (val.startsWith(k)) {
+                log(`_switchAxis for '${val}', found '${v}'`);
+                return v;
+            }
+        }
+        log(`_switchAxis for '${val}', found none (returning orig '${val}')`);
+        return val;
+    };
+    // kind of stupid, brute force approach...
+    // same side variant
+    if (!calc.position[picked].safe) {
+        picked = _trySideVariant(picked);
+    }
+    // oposite side
+    if (!calc.position[picked].safe) {
+        picked = _trySideOpposite(picked);
+        // oposite side variant
+        if (!calc.position[picked].safe) {
+            picked = _trySideVariant(picked);
+        }
+    }
+    // switch axis
+    if (!calc.position[picked].safe) {
+        picked = _switchAxis(picked);
+        // now second round
+        // same side variant
+        if (!calc.position[picked].safe) {
+            picked = _trySideVariant(picked);
+        }
+        // oposite side
+        if (!calc.position[picked].safe) {
+            picked = _trySideOpposite(picked);
+            // oposite side variant
+            if (!calc.position[picked].safe) {
+                picked = _trySideVariant(picked);
+            }
+        }
+    }
+    // finally, if still no luck, revert to
+    // a) either unsafe original (to avoid noise) and do not dance anymore, or
+    // b) hide (if configured so)
+    if (!calc.position[picked].safe) {
+        picked = opts.hideOnInsufficientSpace ? false : preferred;
+    }
+    return picked;
+};

package/dist/actions/tooltip/_set-position.d.ts

@@ -0,0 +1,2 @@
+import type { TooltipLogger, TooltipOptions } from './tooltip.js';
+export declare const _setPosition: (boundaryRoot: HTMLElement | undefined, parent: HTMLElement, div: HTMLElement | null, arrow: HTMLElement | null, opts: TooltipOptions, log: TooltipLogger) => Promise<unknown>;

package/dist/actions/tooltip/_set-position.js

@@ -0,0 +1,125 @@
+import { get as storeGet } from 'svelte/store';
+import { calculateAlignment, windowSize } from '../../index.js';
+import { _maybePickSafePlacement } from './_maybe-pick-safe-placement.js';
+export const _setPosition = async (boundaryRoot, // will default to window dimensions
+parent, div, arrow, opts, log) => {
+    // if (!div || !arrow) return log('_setPosition noop');
+    if (!div || !arrow)
+        return;
+    log('_setPosition');
+    const rootRect = boundaryRoot?.getBoundingClientRect() || {
+        ...storeGet(windowSize),
+        x: 0,
+        y: 0,
+    };
+    const boundaryRootRect = {
+        x: rootRect.x,
+        y: rootRect.y,
+        width: rootRect.width,
+        height: rootRect.height,
+    };
+    const parentRect = parent.getBoundingClientRect();
+    // IMPORTANT!
+    // make sure the div is not hidden, so the rect dimensions will work fine
+    div.classList.remove('hidden');
+    return new Promise((resolve) => {
+        // must wait for the next repaint to have correct dimensions...
+        requestAnimationFrame(() => {
+            const divRect = div.getBoundingClientRect();
+            const r = calculateAlignment(boundaryRootRect, parentRect, divRect, opts.offset);
+            log('tooltip rect', divRect);
+            log('placements', r);
+            // try to pick safe
+            const safe = _maybePickSafePlacement(r, opts, log);
+            // maybe quit...
+            if (safe === false) {
+                log('No safe position found...');
+                return resolve(false);
+            }
+            log(`Preferred: '${opts.alignment}', safe: '${safe}'.`);
+            // position the actual tooltip/popover
+            div.style.left = `${r.position[safe].x}px`;
+            div.style.top = `${r.position[safe].y}px`;
+            // div.style.left = `${0}px`;
+            // div.style.top = `${0}px`;
+            // now dance with the arrow...
+            let arrowStyles = {
+                borderStyle: 'solid',
+                left: 'auto',
+                top: 'auto',
+            };
+            // need to reset all on reposition
+            ['borderTop', 'borderBottom', 'borderLeft', 'borderRight'].forEach((k) => {
+                arrowStyles[`${k}Width`] = '0';
+                arrowStyles[`${k}Color`] = null;
+            });
+            //
+            const arrowSize = opts.arrowSize;
+            let xOffset = 0;
+            let yOffset = 0;
+            //
+            if (safe.startsWith('top')) {
+                arrowStyles = {
+                    ...arrowStyles,
+                    borderLeftColor: `transparent`,
+                    borderRightColor: `transparent`,
+                    borderLeftWidth: `${arrowSize * 0.75}px`,
+                    borderRightWidth: `${arrowSize * 0.75}px`,
+                    borderTopWidth: `${arrowSize}px`,
+                };
+                xOffset -= arrowSize / 2;
+                yOffset -= arrowSize * 0.1;
+            }
+            //
+            else if (safe.startsWith('bottom')) {
+                arrowStyles = {
+                    ...arrowStyles,
+                    borderLeftColor: `transparent`,
+                    borderRightColor: `transparent`,
+                    borderLeftWidth: `${arrowSize * 0.75}px`,
+                    borderRightWidth: `${arrowSize * 0.75}px`,
+                    borderBottomWidth: `${arrowSize}px`,
+                };
+                xOffset -= arrowSize / 2;
+                yOffset -= arrowSize * 0.9;
+            }
+            //
+            else if (safe.startsWith('right')) {
+                arrowStyles = {
+                    ...arrowStyles,
+                    borderTopColor: `transparent`,
+                    borderBottomColor: `transparent`,
+                    borderTopWidth: `${arrowSize * 0.75}px`,
+                    borderBottomWidth: `${arrowSize * 0.75}px`,
+                    borderRightWidth: `${arrowSize}px`,
+                };
+                xOffset -= arrowSize * 0.9;
+                yOffset -= arrowSize / 2;
+            }
+            //
+            else if (safe.startsWith('left')) {
+                arrowStyles = {
+                    ...arrowStyles,
+                    borderTopColor: `transparent`,
+                    borderBottomColor: `transparent`,
+                    borderTopWidth: `${arrowSize * 0.75}px`,
+                    borderBottomWidth: `${arrowSize * 0.75}px`,
+                    borderLeftWidth: `${arrowSize}px`,
+                };
+                xOffset -= arrowSize * 0.1;
+                yOffset -= arrowSize / 2;
+            }
+            arrowStyles = {
+                ...arrowStyles,
+                left: `${r.origin[safe].x + xOffset}px`,
+                top: `${r.origin[safe].y + yOffset}px`,
+            };
+            // log('applying arrowStyles', arrowStyles);
+            Object.entries(arrowStyles).forEach(([k, v]) => {
+                arrow.style[k] = v;
+            });
+            //
+            resolve(true);
+        });
+    });
+};

package/dist/actions/tooltip/tooltip.d.ts

@@ -0,0 +1,41 @@
+/// <reference types="svelte" />
+import { type Readable, type Writable } from 'svelte/store';
+import type { Alignment } from '../../utils/calculate-alignment.js';
+export declare class TooltipConfig {
+    static presetBase: string;
+    static class: string;
+    static arrowPresetBase: string;
+    static arrowClass: string;
+    static defaultOptions: Partial<TooltipOptions>;
+}
+export declare class PopoverConfig {
+    static presetBase: string;
+    static class: string;
+    static arrowPresetBase: string;
+    static arrowClass: string;
+    static defaultOptions: Partial<TooltipOptions>;
+}
+export type TooltipLogger = (...args: any[]) => void;
+export interface TooltipOptions {
+    content: string;
+    popover: HTMLElement | null;
+    alignment: Alignment;
+    allowHtml: boolean;
+    delay: number;
+    class: string;
+    arrowClass: string;
+    triggers: string[];
+    logger?: TooltipLogger;
+    boundaryRoot?: HTMLElement;
+    arrowSize: number;
+    offset: number;
+    hideOnInsufficientSpace: boolean;
+    touch?: Readable<number>;
+    trigger?: Readable<boolean>;
+    notifier?: Writable<boolean>;
+}
+export declare const _TRANSITION_OPACITY_DUR = 150;
+export declare function tooltip(node: HTMLElement, initialOptions?: string | Partial<TooltipOptions>): {
+    update(newOptions: string | Partial<TooltipOptions>): void;
+    destroy(): void;
+};

package/dist/actions/tooltip/tooltip.js

@@ -0,0 +1,296 @@
+import { createStore } from '@marianmeres/store';
+import { derived, get as storeGet, writable, } from 'svelte/store';
+import { twMerge } from 'tailwind-merge';
+import { windowSize } from '../../index.js';
+import { _makeInVisible, _makeVisible } from './_make-visible.js';
+import { _setPosition } from './_set-position.js';
+export class TooltipConfig {
+    static presetBase = `
+		text-sm
+		bg-gray-950 dark:bg-gray-950 
+		text-gray-50 dark:text-gray-50
+		px-3 py-2
+		rounded-md
+		shadow-lg
+		z-50
+		max-w-96 w-max
+	`;
+    static class = '';
+    static arrowPresetBase = `border-gray-950 dark:border-gray-950 z-50`;
+    static arrowClass = ``;
+    static defaultOptions = {};
+}
+export class PopoverConfig {
+    static presetBase = `
+		text-sm
+		bg-gray-950 dark:bg-gray-950 
+		text-gray-50 dark:text-gray-50
+		px-3 py-2
+		rounded-md
+		shadow-lg
+		z-50
+	`;
+    // max-w-96 w-max
+    static class = '';
+    static arrowPresetBase = `border-gray-950 dark:border-gray-950 z-50`;
+    static arrowClass = ``;
+    static defaultOptions = {};
+}
+const DEFAULTS = {
+    content: '',
+    popover: null,
+    alignment: 'top',
+    allowHtml: true,
+    delay: 300,
+    triggers: ['hover'], // 'focus', 'click'
+    class: '',
+    arrowClass: '',
+    arrowSize: 8,
+    offset: 10,
+    hideOnInsufficientSpace: false,
+};
+const TRIGGERS = {
+    hover: { show: ['mouseover'], hide: ['mouseout'] },
+    focus: { show: ['focusin'], hide: ['blur'] },
+    click: { show: ['click'], hide: [] }, // no hide for click, will toggle instead
+};
+// default TW value
+export const _TRANSITION_OPACITY_DUR = 150;
+const _ensureDiv = (div, opts, log) => {
+    log('_ensureDiv');
+    if (!div) {
+        log('creating tooltip div...');
+        div = document.createElement('div');
+        document.body.appendChild(div);
+    }
+    else {
+        log('div exists... going to apply classes');
+    }
+    let classes = '';
+    if (opts.popover) {
+        classes = [PopoverConfig.presetBase, PopoverConfig.class, opts.class].join(' ');
+    }
+    else {
+        classes = [TooltipConfig.presetBase, TooltipConfig.class, opts.class].join(' ');
+    }
+    // make sure these are never overwritten (must come last)
+    classes = twMerge(classes, 'fixed block transition-opacity')
+        .split(/\s/)
+        .filter(Boolean);
+    div.classList.add(...classes);
+    div.style.opacity = '0';
+    // log(`Div classes applied (+ opacity 0)`, classes);
+    return div;
+};
+const _ensureArrow = (arrow, opts, log) => {
+    log('_ensureArrow');
+    if (!arrow) {
+        log('creating tooltip arrow...');
+        arrow = document.createElement('div');
+        document.body.appendChild(arrow);
+    }
+    else {
+        log('arrow exists... going to apply classes');
+    }
+    let classes = '';
+    // prettier-ignore
+    if (opts.popover) {
+        classes = [PopoverConfig.arrowPresetBase, PopoverConfig.arrowClass, opts.arrowClass].join(' ');
+    }
+    else {
+        classes = [TooltipConfig.arrowPresetBase, TooltipConfig.arrowClass, opts.arrowClass].join(' ');
+    }
+    // make sure these are never overwritten (must come last)
+    classes = twMerge(classes, 'fixed block size-0 transition-opacity')
+        .split(/\s/)
+        .filter(Boolean);
+    arrow.classList.add(...classes);
+    arrow.style.opacity = '0';
+    // log(`Arrow classes applied (+ opacity 0)`, classes);
+    return arrow;
+};
+// the action api
+export function tooltip(node, initialOptions = {}) {
+    if (typeof initialOptions === 'string')
+        initialOptions = { content: initialOptions };
+    //
+    initialOptions ??= {};
+    let defaults = DEFAULTS;
+    if (initialOptions.popover) {
+        defaults = { ...defaults, ...PopoverConfig.defaultOptions };
+    }
+    else {
+        defaults = { ...defaults, ...TooltipConfig.defaultOptions };
+    }
+    let opts = { ...defaults, ...initialOptions };
+    const content = createStore(opts.content || '');
+    // maybe use aria-label (if present and content is not set)
+    const ariaLabel = node.getAttribute('aria-label');
+    if (ariaLabel && !content.get())
+        content.set(ariaLabel);
+    const _log = (...args) => typeof opts.logger === 'function' &&
+        opts.logger.apply(null, [`[tooltip/${node.id || '?'}]`, ...args]);
+    //
+    let _delayTimer;
+    const _resetDelayTimer = () => {
+        if (_delayTimer)
+            clearTimeout(_delayTimer);
+        _delayTimer = null;
+    };
+    const _planDelayedExec = (_fn, _delay) => {
+        _resetDelayTimer();
+        _delayTimer = setTimeout(() => {
+            _fn();
+            _resetDelayTimer();
+        }, _delay);
+    };
+    // use popover if provided, otherwise new div will be createed
+    let div = opts.popover;
+    let arrow;
+    let _isOn = writable(false); // internal state store
+    //
+    const _show = async () => {
+        _log('_show');
+        // return early on no content
+        if (!opts.popover && !content.get()) {
+            _log('Nothing to show (neither popover, nor content provided)');
+            return;
+        }
+        // create, apply core styles and append to DOM
+        div = _ensureDiv(div, opts, _log);
+        arrow = _ensureArrow(arrow, opts, _log);
+        // set content
+        if (!opts.popover) {
+            if (opts.allowHtml)
+                div.innerHTML = content.get();
+            else
+                div.textContent = content.get();
+        }
+        // measure stuff and set position (provided opts.alignment is considered just as
+        // "preferred", which means it may be overwritten if there is no available space)
+        if (!(await _setPosition(opts.boundaryRoot, node, div, arrow, opts, _log))) {
+            _makeInVisible(div, arrow, _log);
+        }
+        else {
+            // finally, fade in
+            _makeVisible(div, arrow, _log);
+            setTimeout(() => _isOn.set(true), _TRANSITION_OPACITY_DUR);
+        }
+    };
+    let show = () => _planDelayedExec(_show, opts.delay);
+    //
+    const _hide = async () => {
+        _log('_hide');
+        _makeInVisible(div, arrow, _log);
+        setTimeout(() => {
+            destroy();
+            _isOn.set(false);
+        }, _TRANSITION_OPACITY_DUR);
+    };
+    const hide = () => _planDelayedExec(_hide, opts.delay);
+    // no delay for toggle
+    const toggle = async () => {
+        _log('toggle');
+        storeGet(_isOn) ? await _hide() : await _show();
+    };
+    //
+    const destroy = () => {
+        if (!div && !arrow && !opts.popover && !storeGet(_isOn))
+            return;
+        _log('destroy');
+        if (!opts.popover) {
+            div?.remove();
+            div = null;
+        }
+        arrow?.remove();
+        arrow = null;
+        _isOn.set(false);
+    };
+    //
+    let unsubs = [_isOn.subscribe((v) => opts?.notifier?.set(v))];
+    // by default, listen to windowSize change, as well as window and boundaryRoot scroll
+    const _boundaryRootScroll = writable(0);
+    const onScroll = () => _boundaryRootScroll.set(Date.now());
+    if (opts.boundaryRoot) {
+        opts.boundaryRoot.addEventListener('scroll', onScroll);
+        unsubs.push(() => opts.boundaryRoot?.removeEventListener('scroll', onScroll));
+    }
+    // also listen to window scroll
+    window.addEventListener('scroll', onScroll);
+    unsubs.push(() => window.removeEventListener('scroll', onScroll));
+    const _positionTriggers = [_boundaryRootScroll, windowSize];
+    if (opts.touch?.subscribe)
+        _positionTriggers.push(opts.touch);
+    const touch = derived(_positionTriggers, ([_]) => Date.now());
+    // final, derived, notifier
+    let _touchCount = 0;
+    unsubs.push(touch.subscribe(async () => {
+        // ignore first
+        if (_touchCount++) {
+            _log('touch...');
+            if (!(await _setPosition(opts.boundaryRoot, node, div, arrow, opts, _log))) {
+                _makeInVisible(div, arrow, _log);
+            }
+            else {
+                _makeVisible(div, arrow, _log);
+            }
+        }
+    }));
+    // important to normalize triggers - if does contain 'click' remove all others
+    if (opts.triggers.includes('click')) {
+        _log('Click trigger recognized...');
+        opts.triggers = ['click'];
+        _log('Patching show as toggle');
+        show = toggle; // also patch show/hide logic, since click does not have 'out' event...
+    }
+    // if manual trigger exists... (use raw show/hide, not the delayed one)
+    if (opts.trigger?.subscribe) {
+        unsubs.push(opts.trigger.subscribe((v) => (v ? _show() : _hide())));
+    }
+    // add show
+    opts.triggers?.forEach((trigger) => {
+        TRIGGERS[trigger]?.show.forEach((eventName) => {
+            _log('addEventListener', eventName, 'show');
+            node.addEventListener(eventName, show);
+        });
+    });
+    // add hide
+    opts.triggers?.forEach((trigger) => {
+        TRIGGERS[trigger]?.hide.forEach((eventName) => {
+            _log('addEventListener', eventName, 'hide');
+            node.addEventListener(eventName, hide);
+        });
+    });
+    return {
+        //
+        update(newOptions) {
+            if (typeof newOptions === 'string')
+                newOptions = { content: newOptions };
+            destroy();
+            // these are not allowed to update on existing instance
+            delete newOptions.triggers;
+            delete newOptions.boundaryRoot;
+            delete newOptions.touch;
+            //
+            opts = { ...opts, ...newOptions };
+            content.set(opts.content);
+        },
+        //
+        destroy() {
+            unsubs.forEach((unsub) => typeof unsub === 'function' && unsub());
+            destroy();
+            // remove show
+            opts.triggers?.forEach((trigger) => {
+                TRIGGERS[trigger]?.show.forEach((eventName) => {
+                    node.removeEventListener(eventName, show);
+                });
+            });
+            // remove hide
+            opts.triggers?.forEach((trigger) => {
+                TRIGGERS[trigger]?.hide.forEach((eventName) => {
+                    node.removeEventListener(eventName, hide);
+                });
+            });
+        },
+    };
+}

package/dist/components/Drawer/Drawer.svelte

@@ -3,7 +3,7 @@ import { createSwitchStore } from "@marianmeres/switch-store";
 import { createEventDispatcher } from "svelte";
 import { fly } from "svelte/transition";
 import { twMerge } from "tailwind-merge";
-import { clickOutside } from "../../actions/click-outside.js";
+import { onOutside } from "../../actions/on-outside.js";
 import { prefersReducedMotionStore } from "../../utils/prefers-reduced-motion.js";
 import Backdrop from "../Backdrop/Backdrop.svelte";
 export const createDrawerStore = (open = false) => createSwitchStore(open);
@@ -78,7 +78,7 @@ $:
 				...(_presetsAnim[position] || {}),
 			}}
 			class={twMerge(`overflow-y-auto ${_presetsCls[position] || ''} ${_class}`)}
-			use:clickOutside={() => dispatch('click_outside')}
+			use:onOutside
 		>
 			<slot />
 		</div>

package/dist/components/HoverExpandableWidth/HoverExpandableWidth.svelte

@@ -57,9 +57,7 @@ const _expand = () => {
   el.style.width = "auto";
   el.style.height = "auto";
   setTimeout(
-    () => {
-      _isExpanding = false;
-    },
+    () => _isExpanding = false,
     duration + 1e3 / 60 * 3
     // 3 x raf
   );

package/dist/components/Switch/Switch.svelte

@@ -11,7 +11,8 @@ export class SwitchConfig {
 			hover:brightness-[1.05] active:brightness-[0.95]
 			disabled:!cursor-not-allowed disabled:!opacity-50 disabled:hover:brightness-100
 
-			bg-zinc-300 data-[checked=true]:bg-zinc-600
+			bg-zinc-300 dark:bg-zinc-700
+			data-[checked=true]:bg-zinc-700 dark:data-[checked=true]:bg-zinc-300
 		`.trim();
   static presetsSize = {
     xs: "h-4 w-7",
@@ -29,7 +30,8 @@ export class SwitchConfig {
 			translate-x-1 rounded-full  
 			transition-all duration-100
 			shadow
-			bg-white
+			bg-white dark:bg-black
+			text-black dark:text-white
 		`.trim();
   static presetsSizeDot = {
     // size + translate-x = width

package/dist/components/Switch/Switch.svelte.d.ts

@@ -34,7 +34,7 @@ declare const __propDef: {
         variant?: string | undefined;
         stopPropagation?: boolean | undefined;
         preventDefault?: boolean | undefined;
-        preHook?: ((oldValue: boolean) => Promise<void | boolean>) | undefined;
+        preHook?: ((previosValue: boolean) => Promise<void | boolean>) | undefined;
         size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
     };
     events: {

package/dist/components/popover/Popover.svelte

@@ -0,0 +1,24 @@
+<script>import { tooltip } from "../..";
+export let options = {};
+const POPOVER_DEFAULTS = {
+  hideOnInsufficientSpace: true,
+  triggers: ["click"]
+};
+let popover;
+</script>
+
+{#if popover}
+	<span
+		use:tooltip={{
+			...POPOVER_DEFAULTS,
+			...(options || {}),
+			popover,
+		}}
+	>
+		<slot />
+	</span>
+{/if}
+
+<div bind:this={popover} class="hidden">
+	<slot name="popover" />
+</div>

package/dist/components/popover/Popover.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+import type { TooltipOptions } from '../../actions/tooltip/tooltip.js';
+declare const __propDef: {
+    props: {
+        options?: Partial<TooltipOptions> | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+        popover: {};
+    };
+};
+export type PopoverProps = typeof __propDef.props;
+export type PopoverEvents = typeof __propDef.events;
+export type PopoverSlots = typeof __propDef.slots;
+export default class Popover extends SvelteComponent<PopoverProps, PopoverEvents, PopoverSlots> {
+}
+export {};

package/dist/index.d.ts

@@ -8,7 +8,10 @@ export { default as Drawer, createDrawerStore } from './components/Drawer/Drawer
 export { default as HoverExpandableWidth } from './components/HoverExpandableWidth/HoverExpandableWidth.svelte';
 export { default as Switch } from './components/Switch/Switch.svelte';
 export { default as X } from './components/X/X.svelte';
-export { clickOutside } from './actions/click-outside.js';
 export { focusTrap } from './actions/focus-trap.js';
-export { windowSize, breakpoint } from './utils/window-size.js';
+export { onOutside } from './actions/on-outside.js';
+export { tooltip, TooltipConfig } from './actions/tooltip/tooltip.js';
+export { calculateAlignment } from './utils/calculate-alignment.js';
 export { DevicePointer } from './utils/device-pointer.js';
+export { getId } from './utils/get-id.js';
+export { windowSize, breakpoint } from './utils/window-size.js';

package/dist/index.js

@@ -18,8 +18,11 @@ export { default as Switch } from './components/Switch/Switch.svelte';
 //
 export { default as X } from './components/X/X.svelte';
 // actions
-export { clickOutside } from './actions/click-outside.js';
 export { focusTrap } from './actions/focus-trap.js';
+export { onOutside } from './actions/on-outside.js';
+export { tooltip, TooltipConfig } from './actions/tooltip/tooltip.js';
 // utils
-export { windowSize, breakpoint } from './utils/window-size.js';
+export { calculateAlignment } from './utils/calculate-alignment.js';
 export { DevicePointer } from './utils/device-pointer.js';
+export { getId } from './utils/get-id.js';
+export { windowSize, breakpoint } from './utils/window-size.js';

package/dist/utils/calculate-alignment.d.ts

@@ -0,0 +1,68 @@
+export interface AreaLike {
+    width: number;
+    height: number;
+}
+export interface PositionLike {
+    x: number;
+    y: number;
+}
+export interface RectLike extends AreaLike, PositionLike {
+}
+export type Alignment = 'top' | 'topRight' | 'topLeft' | 'right' | 'rightTop' | 'rightBottom' | 'bottom' | 'bottomRight' | 'bottomLeft' | 'left' | 'leftTop' | 'leftBottom';
+export declare const calculateAlignment: (boundaryRoot: RectLike, anchor: RectLike, el: AreaLike, offset?: number) => {
+    origin: {
+        top: {
+            x: number;
+            y: number;
+        };
+        topRight: {
+            x: number;
+            y: number;
+        };
+        topLeft: {
+            x: number;
+            y: number;
+        };
+        bottom: {
+            x: number;
+            y: number;
+        };
+        bottomRight: {
+            x: number;
+            y: number;
+        };
+        bottomLeft: {
+            x: number;
+            y: number;
+        };
+        left: {
+            x: number;
+            y: number;
+        };
+        leftTop: {
+            x: number;
+            y: number;
+        };
+        leftBottom: {
+            x: number;
+            y: number;
+        };
+        right: {
+            x: number;
+            y: number;
+        };
+        rightTop: {
+            x: number;
+            y: number;
+        };
+        rightBottom: {
+            x: number;
+            y: number;
+        };
+    };
+    position: Record<Alignment, PositionLike & {
+        safeY: boolean;
+        safeX: boolean;
+        safe: boolean;
+    }>;
+};

package/dist/utils/calculate-alignment.js

@@ -0,0 +1,183 @@
+const clog = console.log;
+// just basic plus/minus stuff
+export const calculateAlignment = (boundaryRoot, 
+// anchor box
+anchor, 
+//  element to be placed (the one we're calculating position for)
+el, 
+// in px
+offset = 5) => {
+    const anchorHalfWidth = anchor.width / 2;
+    const anchorHalfHeight = anchor.height / 2;
+    // x/y of the origin (center of the anchor with applied offset) position
+    const originTop = { x: anchor.x + anchorHalfWidth, y: anchor.y - offset };
+    const originBottom = {
+        x: anchor.x + anchorHalfWidth,
+        y: anchor.y + anchor.height + offset,
+    };
+    const originLeft = { x: anchor.x - offset, y: anchor.y + anchorHalfHeight };
+    const originRight = {
+        x: anchor.x + anchor.width + offset,
+        y: anchor.y + anchorHalfHeight,
+    };
+    const origin = {
+        top: originTop,
+        topRight: originTop,
+        topLeft: originTop,
+        //
+        bottom: originBottom,
+        bottomRight: originBottom,
+        bottomLeft: originBottom,
+        //
+        left: originLeft,
+        leftTop: originLeft,
+        leftBottom: originLeft,
+        //
+        right: originRight,
+        rightTop: originRight,
+        rightBottom: originRight,
+    };
+    const elHalfWidth = el.width / 2;
+    const elHalfHeigh = el.height / 2;
+    // position is named from the "anchor alignment" relative perspective
+    const position = {
+        //
+        top: {
+            x: origin.top.x - elHalfWidth,
+            y: origin.top.y - el.height,
+            safeX: true,
+            safeY: true,
+            safe: true,
+        },
+        topRight: {
+            x: origin.top.x + anchorHalfWidth - el.width,
+            y: origin.top.y - el.height,
+            safeX: true,
+            safeY: true,
+            safe: true,
+        },
+        topLeft: {
+            x: origin.top.x - anchorHalfWidth,
+            y: origin.top.y - el.height,
+            safeX: true,
+            safeY: true,
+            safe: true,
+        },
+        right: {
+            x: origin.right.x,
+            y: origin.right.y - elHalfHeigh,
+            safeX: true,
+            safeY: true,
+            safe: true,
+        },
+        rightTop: {
+            x: origin.right.x,
+            y: origin.right.y - anchorHalfHeight,
+            safeX: true,
+            safeY: true,
+            safe: true,
+        },
+        rightBottom: {
+            x: origin.right.x,
+            y: origin.right.y + anchorHalfHeight - el.height,
+            safeX: true,
+            safeY: true,
+            safe: true,
+        },
+        //
+        bottom: {
+            x: origin.bottom.x - elHalfWidth,
+            y: origin.bottom.y,
+            safeX: true,
+            safeY: true,
+            safe: true,
+        },
+        bottomLeft: {
+            x: origin.bottom.x - anchorHalfWidth,
+            y: origin.bottom.y,
+            safeX: true,
+            safeY: true,
+            safe: true,
+        },
+        bottomRight: {
+            x: origin.bottom.x + anchorHalfWidth - el.width,
+            y: origin.bottom.y,
+            safeX: true,
+            safeY: true,
+            safe: true,
+        },
+        //
+        left: {
+            x: origin.left.x - el.width,
+            y: origin.left.y - elHalfHeigh,
+            safeX: true,
+            safeY: true,
+            safe: true,
+        },
+        leftTop: {
+            x: origin.left.x - el.width,
+            y: origin.left.y - anchorHalfHeight,
+            safeX: true,
+            safeY: true,
+            safe: true,
+        },
+        leftBottom: {
+            x: origin.left.x - el.width,
+            y: origin.left.y + anchorHalfHeight - el.height,
+            safeX: true,
+            safeY: true,
+            safe: true,
+        },
+    };
+    const isSafeX = (x) => x >= boundaryRoot.x && x + el.width <= boundaryRoot.x + boundaryRoot.width;
+    const isSafeY = (y) => y >= boundaryRoot.y && y + el.height <= boundaryRoot.y + boundaryRoot.height;
+    //
+    Object.entries(position).forEach((entry) => {
+        const [plc, { x, y }] = entry;
+        position[plc].safeX = isSafeX(x);
+        position[plc].safeY = isSafeY(y);
+        position[plc].safe = position[plc].safeX && position[plc].safeY;
+    });
+    // now, the positions were calculated, but so far, we're too strict, so there will
+    // be unnecessary false negatives, which can be relaxed using "fluid" approach
+    // must come below safety check above
+    const fluid = {
+        x: {
+            top: Math.max(0, position.top.x),
+            topLeft: position.topLeft.x - (position.topLeft.x + el.width - boundaryRoot.width),
+            topRight: Math.max(0, position.topRight.x),
+            //
+            bottom: Math.max(0, position.bottom.x),
+            bottomLeft: position.bottomLeft.x - (position.bottomLeft.x + el.width - boundaryRoot.width),
+            bottomRight: Math.max(0, position.bottomRight.x),
+        },
+        y: {
+            // right: position.top.y - (position.top.y + el.height - boundaryRoot.height),
+            right: Math.max(0, position.right.y),
+            rightTop: Math.max(0, position.rightTop.y),
+            rightBottom: Math.max(0, position.rightBottom.y),
+        },
+    };
+    // x axis
+    if (el.width < boundaryRoot.width && anchor.x > 0) {
+        ['top', 'topLeft', 'topRight', 'bottom', 'bottomLeft', 'bottomRight'].forEach((k) => {
+            if (!position[k].safeX && fluid.x?.[k] !== undefined) {
+                position[k].x = fluid.x[k];
+                position[k].safeX = isSafeX(position[k].x);
+                position[k].safe = position[k].safeX && position[k].safeY;
+            }
+        });
+    }
+    // y
+    if (el.height < boundaryRoot.height && anchor.y > 0) {
+        ['right', 'rightTop', 'rightBottom', 'left', 'leftTop', 'leftBottom'].forEach((k) => {
+            if (!position[k].safeY && fluid.y?.[k] !== undefined) {
+                position[k].y = fluid.y[k];
+                position[k].safeY = isSafeY(position[k].y);
+                position[k].safe = position[k].safeX && position[k].safeY;
+            }
+        });
+    }
+    // todo y fluids
+    return { origin, position };
+};

package/dist/utils/get-id.d.ts

@@ -0,0 +1 @@
+export declare const getId: (prefix?: string) => string;

package/dist/utils/get-id.js

@@ -0,0 +1,2 @@
+let _id = 0;
+export const getId = (prefix = 'id-') => `${prefix}${++_id}`;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@marianmeres/stuic",
-	"version": "1.15.0",
+	"version": "1.17.0",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run package && node ./scripts/date.js",
@@ -14,7 +14,8 @@
 		"format": "prettier --write .",
 		"prettier": "npm run format",
 		"release:patch": "release -v patch",
-		"release": "release -v minor"
+		"release": "release -v minor",
+		"test": "vitest"
 	},
 	"exports": {
 		".": {
@@ -38,9 +39,11 @@
 		"@sveltejs/adapter-auto": "^2.0.0",
 		"@sveltejs/kit": "^1.27.4",
 		"@sveltejs/package": "^2.0.0",
+		"@types/node": "^20.11.0",
 		"autoprefixer": "^10.4.16",
 		"clsx": "^2.0.0",
 		"esm-env": "^1.0.0",
+		"nodemon": "^3.0.2",
 		"postcss": "^8.4.32",
 		"prettier": "^3.0.0",
 		"prettier-plugin-svelte": "^3.0.0",
@@ -49,15 +52,18 @@
 		"svelte": "^4.2.7",
 		"svelte-check": "^3.6.0",
 		"tailwindcss": "^3.3.6",
+		"ts-node": "^10.9.2",
 		"tslib": "^2.4.1",
 		"typescript": "^5.0.0",
-		"vite": "^4.4.2"
+		"vite": "^4.4.2",
+		"vitest": "^1.1.3"
 	},
 	"svelte": "./dist/index.js",
 	"types": "./dist/index.d.ts",
 	"type": "module",
 	"dependencies": {
 		"@marianmeres/clog": "^1.0.1",
+		"@marianmeres/store": "^1.5.0",
 		"@marianmeres/switch-store": "^1.3.1",
 		"tailwind-merge": "^2.1.0"
 	}

package/dist/actions/click-outside.d.ts

@@ -1,3 +0,0 @@
-export declare const clickOutside: (node: HTMLElement, callback: () => void) => {
-    destroy(): void;
-};

package/dist/actions/click-outside.js

@@ -1,15 +0,0 @@
-export const clickOutside = (node, callback) => {
-    const handleClick = (event) => {
-        if (!event?.target)
-            return;
-        if (node && !node.contains(event.target) && !event.defaultPrevented) {
-            callback();
-        }
-    };
-    document.addEventListener('click', handleClick, true);
-    return {
-        destroy() {
-            document.removeEventListener('click', handleClick, true);
-        },
-    };
-};