composite-select 1.0.0

package/dist/cjs/composite-select/CompositeManager.js

@@ -0,0 +1,43 @@
+import { ContainerManager } from "../container/ContainerManager.js";
+import { OptionsSectionManager } from "../options-section/OptionsSectionManager.js";
+import { SelectedSectionManager } from "../selected-section/SelectedSectionManager.js";
+import { clickOutside } from "../unbind/clickOutside.js";
+export class CompositeManager {
+    container;
+    selected;
+    options;
+    _unbindClickOutside;
+    _parent;
+    constructor(parent, options = {}) {
+        this._parent = parent;
+        this.container = new ContainerManager(this._parent, options.container);
+        {
+            const target = this.container.getTarget();
+            const div = document.createElement("div");
+            target.appendChild(div);
+            this.selected = new SelectedSectionManager(div, options.select);
+            this.selected.getSubscriber().bind("onFocus", (e) => {
+                this.container.show();
+                this.options.setFocus();
+            });
+        }
+        {
+            const popover = this.container.getPopover();
+            const div = document.createElement("div");
+            popover.appendChild(div);
+            this.options = new OptionsSectionManager(div, options.options);
+        }
+        this._unbindClickOutside = clickOutside([this.container.getParent()], () => {
+            this.container.hide();
+        });
+    }
+    destroy() {
+        this._unbindClickOutside();
+        this.options.destroy();
+        if (typeof this.selected.destroy === "function") {
+            this.selected.destroy();
+        }
+        this.container.destroy();
+        this._parent.innerHTML = "";
+    }
+}

package/dist/cjs/composite-select/composite-select.js

@@ -0,0 +1,199 @@
+import { CompositeManager } from "./CompositeManager.js";
+/**
+ * CompositeSelect web component — wraps CompositeManager.
+ *
+ * Does NOT use shadow DOM because ContainerManager creates a <div popover>
+ * whose positioning CSS classes (cover-bottom, bottom, etc. from popover.css)
+ * are global and cannot penetrate shadow DOM boundaries.
+ * The host page must load the required CSS via <link> tags, exactly as ContainerManager.html does.
+ *
+ * Attribute prefixes:
+ *   selected-*   →  SelectedSectionManager properties / events
+ *   options-*    →  OptionsSectionManager properties / events
+ *   container-*  →  ContainerManager properties / events
+ */
+export class CompositeSelect extends HTMLElement {
+    _manager = null;
+    _mountPoint;
+    static get observedAttributes() {
+        return [
+            // selected-* attributes
+            "selected-selected",
+            "selected-show-input",
+            "selected-value",
+            "selected-label",
+            "selected-disabled",
+            "selected-error",
+            "selected-loading",
+            "selected-show-delete",
+            // options-* attributes
+            "options-options",
+            "options-loading",
+            "options-value",
+            "options-label",
+            "options-disabled",
+            "options-max-height",
+            "options-show-footer",
+            "options-show-filter",
+            // container-* attributes
+            "container-position",
+            "container-offset",
+        ];
+    }
+    constructor() {
+        super();
+        // Light DOM — no shadow DOM (popover CSS must be global)
+        this._mountPoint = document.createElement("div");
+    }
+    connectedCallback() {
+        if (!this._mountPoint.parentNode) {
+            this.appendChild(this._mountPoint);
+        }
+        if (this._manager)
+            return;
+        const hasBoolAttr = (name, defaultVal) => this.hasAttribute(name) ? this.getAttribute(name) !== "false" : defaultVal;
+        // ── DEBUG: dump all boolean attrs at init time ────────────────────────────
+        const _bools = {
+            "selected-disabled": { hasAttr: this.hasAttribute("selected-disabled"), attrVal: this.getAttribute("selected-disabled"), resolved: hasBoolAttr("selected-disabled", false) },
+            "selected-error": { hasAttr: this.hasAttribute("selected-error"), attrVal: this.getAttribute("selected-error"), resolved: hasBoolAttr("selected-error", false) },
+            "selected-loading": { hasAttr: this.hasAttribute("selected-loading"), attrVal: this.getAttribute("selected-loading"), resolved: hasBoolAttr("selected-loading", false) },
+            "selected-show-input": { hasAttr: this.hasAttribute("selected-show-input"), attrVal: this.getAttribute("selected-show-input"), resolved: hasBoolAttr("selected-show-input", true) },
+            "selected-show-delete": { hasAttr: this.hasAttribute("selected-show-delete"), attrVal: this.getAttribute("selected-show-delete"), resolved: hasBoolAttr("selected-show-delete", true) },
+            "options-loading": { hasAttr: this.hasAttribute("options-loading"), attrVal: this.getAttribute("options-loading"), resolved: hasBoolAttr("options-loading", false) },
+            "options-disabled": { hasAttr: this.hasAttribute("options-disabled"), attrVal: this.getAttribute("options-disabled"), resolved: hasBoolAttr("options-disabled", false) },
+            "options-show-footer": { hasAttr: this.hasAttribute("options-show-footer"), attrVal: this.getAttribute("options-show-footer"), resolved: hasBoolAttr("options-show-footer", true) },
+            "options-show-filter": { hasAttr: this.hasAttribute("options-show-filter"), attrVal: this.getAttribute("options-show-filter"), resolved: hasBoolAttr("options-show-filter", true) },
+        };
+        for (const [attr, info] of Object.entries(_bools)) {
+            console.log(`[composite-select][connectedCallback] ${attr}: hasAttr=type >${typeof info.hasAttr}< value >${info.hasAttr}<  attrVal=type >${typeof info.attrVal}< value >${info.attrVal}<  resolved=type >${typeof info.resolved}< value >${info.resolved}<`);
+        }
+        // ─────────────────────────────────────────────────────────────────────────
+        this._manager = new CompositeManager(this._mountPoint, {
+            select: {
+                selected: this._parseJSON(this.getAttribute("selected-selected")) ?? [],
+                showInput: hasBoolAttr("selected-show-input", true),
+                value: this.getAttribute("selected-value") || "",
+                label: this.getAttribute("selected-label") || "",
+                disabled: hasBoolAttr("selected-disabled", false),
+                error: hasBoolAttr("selected-error", false),
+                loading: hasBoolAttr("selected-loading", false),
+                showDelete: hasBoolAttr("selected-show-delete", true),
+            },
+            options: {
+                options: this._parseJSON(this.getAttribute("options-options")) ?? [],
+                loading: hasBoolAttr("options-loading", false),
+                value: this.getAttribute("options-value") || "",
+                label: this.getAttribute("options-label") || "",
+                disabled: hasBoolAttr("options-disabled", false),
+                maxHeight: this.getAttribute("options-max-height") || undefined,
+                showFooter: hasBoolAttr("options-show-footer", true),
+                showFilter: hasBoolAttr("options-show-filter", true),
+            },
+            container: {},
+        });
+        if (this.getAttribute("container-position")) {
+            this._manager.container.setPosition(this.getAttribute("container-position"));
+        }
+        if (this.getAttribute("container-offset")) {
+            this._manager.container.setOffset(this.getAttribute("container-offset"));
+        }
+    }
+    disconnectedCallback() {
+        this._manager?.destroy();
+        this._manager = null;
+    }
+    attributeChangedCallback(name, _oldValue, newValue) {
+        if (!this._manager)
+            return;
+        const isTrue = newValue !== null && newValue !== "false";
+        // ── DEBUG: dump bool attrs as they change ─────────────────────────────────
+        const _boolAttrs = new Set(["selected-disabled", "selected-error", "selected-loading", "selected-show-input", "selected-show-delete", "options-loading", "options-disabled", "options-show-footer", "options-show-filter"]);
+        if (_boolAttrs.has(name)) {
+            console.log(`[composite-select][attributeChangedCallback] ${name}: isTrue=type >${typeof isTrue}< value >${isTrue}<  newValue=type >${typeof newValue}< value >${newValue}<  oldValue=type >${typeof _oldValue}< value >${_oldValue}<`);
+        }
+        // ─────────────────────────────────────────────────────────────────────────
+        switch (name) {
+            // ── selected ─────────────────────────────────────────────────────────
+            case "selected-selected": {
+                const parsed = this._parseJSON(newValue);
+                if (parsed !== undefined) {
+                    this._manager.selected.setSelected(parsed);
+                }
+                break;
+            }
+            case "selected-show-input":
+                this._manager.selected.setShowInput(isTrue);
+                break;
+            case "selected-value":
+                this._manager.selected.setValue(newValue);
+                break;
+            case "selected-label":
+                this._manager.selected.setLabel(newValue);
+                break;
+            case "selected-disabled":
+                this._manager.selected.setDisabled(isTrue);
+                break;
+            case "selected-error":
+                this._manager.selected.setError(isTrue);
+                break;
+            case "selected-loading":
+                this._manager.selected.setLoading(isTrue);
+                break;
+            case "selected-show-delete":
+                this._manager.selected.setShowDelete(isTrue);
+                break;
+            // ── options ──────────────────────────────────────────────────────────
+            case "options-options": {
+                const parsed = this._parseJSON(newValue);
+                if (parsed !== undefined) {
+                    this._manager.options.setOptions(parsed);
+                }
+                break;
+            }
+            case "options-loading":
+                this._manager.options.setLoading(isTrue);
+                break;
+            case "options-value":
+                this._manager.options.setValue(newValue);
+                break;
+            case "options-label":
+                this._manager.options.setLabel(newValue);
+                break;
+            case "options-disabled":
+                this._manager.options.setDisabled(isTrue);
+                break;
+            case "options-max-height":
+                this._manager.options.setMaxHeight(newValue);
+                break;
+            case "options-show-footer":
+                this._manager.options.setShowFooter(isTrue);
+                break;
+            case "options-show-filter":
+                this._manager.options.setShowFilter(isTrue);
+                break;
+            // ── container ────────────────────────────────────────────────────────
+            case "container-position":
+                this._manager.container.setPosition(newValue);
+                break;
+            case "container-offset":
+                this._manager.container.setOffset(newValue);
+                break;
+        }
+    }
+    // ─── Accessor ─────────────────────────────────────────────────────────────
+    getManager() {
+        return this._manager;
+    }
+    _parseJSON(val) {
+        if (!val)
+            return undefined;
+        try {
+            return JSON.parse(val);
+        }
+        catch (e) {
+            console.error(`CompositeSelect: failed to parse JSON:`, val, e);
+            return undefined;
+        }
+    }
+}
+customElements.define("composite-select", CompositeSelect);

package/dist/cjs/composite-select/debounce.js

@@ -0,0 +1,10 @@
+export default function debounce(fn, delay) {
+    var timer = null;
+    return function (...args) {
+        var context = this;
+        clearTimeout(timer);
+        timer = setTimeout(function () {
+            fn.apply(context, args);
+        }, delay);
+    };
+}

package/dist/cjs/composite-select/helpers.js

@@ -0,0 +1,96 @@
+/**
+ * Toggles an item in the selected list: adds if missing, removes if present.
+ */
+export function togglePresenceOnTheList(selected, item) {
+    const tmp = [...selected];
+    const newList = tmp.filter((i) => String(i.id) !== String(item.id));
+    if (newList.length === tmp.length) {
+        tmp.push(item);
+        return tmp;
+    }
+    return newList;
+}
+/**
+ * Resolves a list of IDs into full option objects and merges them into the current selected list (seed).
+ * This function is designed to preserve any existing items in the selected list (including "extra" items
+ * that might not exist in the current options array) while ensuring the final result is unique and deduplicated by ID.
+ */
+export function selectedFindDeduplicatedInOptionsByIds(options, ids, seed) {
+    let tmp = [];
+    if (seed) {
+        tmp = [...seed];
+    }
+    ids.forEach((id) => {
+        const found = tmp.some((i) => String(i.id) === String(id));
+        if (!found) {
+            tmp.push(options.find((o) => String(o.id) === String(id)));
+        }
+    });
+    tmp = deduplicateArrayById(tmp);
+    return tmp;
+}
+/**
+ * Updates the 'selected' flag on each option based on whether its ID exists in the provided selected list.
+ */
+export function markSelectedByIds(options, selectedIds) {
+    if (selectedIds.length === 0) {
+        return [...options];
+    }
+    return options.map((option) => {
+        const opt = { ...option };
+        opt.selected = selectedIds.includes(option.id);
+        return opt;
+    });
+}
+/**
+ * Returns a new array with duplicate items removed based on their 'id' property.
+ * Interesting trick,
+ * if you know you will have more than one instance of object by the same id then pass these which you want to keep first.
+ * It is usefull in certain circumstances:
+ * For example when onFocus is fired we can unselect objects from selected by placing
+ * [...options, ...selected] in this order
+ * then unselected options will win over selected
+ * and then after that we can filter just these which are selected still and update manager.selected.setSelected()
+ * this way we will unselect
+ */
+export function deduplicateArrayById(arr) {
+    return arr.filter((item, index) => arr.findIndex((i) => String(i.id) === String(item.id)) === index);
+}
+/**
+ * Sorts a list of elements by their ID string value.
+ */
+export function sortById(list, asc = true) {
+    return [...list].sort((a, b) => {
+        const aId = String(a.id);
+        const bId = String(b.id);
+        if (aId < bId) {
+            return asc ? -1 : 1;
+        }
+        if (aId > bId) {
+            return asc ? 1 : -1;
+        }
+        return 0;
+    });
+}
+/**
+ * Wraps matches of search terms in the provided text with a highlight span.
+ * Supports multi-word search and case-insensitive matching.
+ */
+export function markSearchWithSpan(text, search) {
+    if (!search || !search.trim()) {
+        return text;
+    }
+    // Split by whitespace, deduplicate, and remove empty strings
+    const words = Array.from(new Set(search.trim().split(/\s+/).filter(Boolean)));
+    if (words.length === 0) {
+        return text;
+    }
+    // Escape special regex characters in each word
+    const escapedWords = words.map((word) => word.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"));
+    // Sort by length descending to match longest words first (greedy matching)
+    escapedWords.sort((a, b) => b.length - a.length);
+    // Create a regex to match any of the words, case-insensitively, globally
+    const regex = new RegExp(`(${escapedWords.join("|")})`, "gi");
+    // Replace matches with the highlighted span
+    return text.replace(regex, '<span class="highlight">$1</span>');
+}

package/dist/cjs/composite-select/react.js

@@ -0,0 +1,189 @@
+// @ts-ignore
+import React from "react";
+import "./composite-select.js";
+export const CompositeSelect = React.forwardRef((props, ref) => {
+    const { "selected-selected": selectedSelected, "selected-show-input": selectedShowInput, "selected-value": selectedValue, "selected-label": selectedLabel, "selected-disabled": selectedDisabled, "selected-error": selectedError, "selected-loading": selectedLoading, "selected-show-delete": selectedShowDelete, "selected-onDelete": selectedOnDelete, "selected-onClear": selectedOnClear, "selected-onInputChange": selectedOnChangeValue, "selected-onFocus": selectedOnFocus, "selected-onChange": selectedOnChange, "selected-onComponentChange": selectedOnSelectedItemsChanged, "options-options": optionsOptions, "options-loading": optionsLoading, "options-value": optionsValue, "options-label": optionsLabel, "options-disabled": optionsDisabled, "options-max-height": optionsMaxHeight, "options-show-footer": optionsShowFooter, "options-show-filter": optionsFilter, "options-onItemPick": optionsOnItemPick, "options-onInputChange": optionsOnInputChange, "options-onCancel": optionsOnCancel, "options-onOk": optionsOnOk, "options-onHighlightChange": optionsOnHighlightChange, "options-onClear": optionsOnClear, "options-onComponentChange": optionsOnOptionsChanged, "container-position": containerPosition, "container-offset": containerOffset, "container-onClose": containerOnClose, children, ...rest } = props;
+    const internalRef = React.useRef(null);
+    const setRef = React.useCallback((node) => {
+        internalRef.current = node;
+        if (typeof ref === "function") {
+            ref(node);
+        }
+        else if (ref) {
+            ref.current = node;
+        }
+    }, [ref]);
+    React.useLayoutEffect(() => {
+        const el = internalRef.current;
+        if (el && el.getManager && el.getManager()) {
+            const mgr = el.getManager();
+            const unbinds = [];
+            // SelectedSection events
+            const selSub = mgr.selected.getSubscriber();
+            if (selSub) {
+                if (selectedOnDelete) {
+                    unbinds.push(selSub.bind("onDelete", (id) => selectedOnDelete(id)));
+                }
+                if (selectedOnClear) {
+                    unbinds.push(selSub.bind("onClear", () => selectedOnClear()));
+                }
+                if (selectedOnChangeValue) {
+                    unbinds.push(selSub.bind("onInputChange", (e, previousValue) => selectedOnChangeValue({
+                        originalEvent: e,
+                        value: e.target.value,
+                        key: e.key || "",
+                        previousValue,
+                    })));
+                }
+                if (selectedOnFocus) {
+                    unbinds.push(selSub.bind("onFocus", (e) => selectedOnFocus({ originalEvent: e })));
+                }
+                if (selectedOnChange) {
+                    unbinds.push(selSub.bind("onChange", (selected) => selectedOnChange(selected)));
+                }
+                if (selectedOnSelectedItemsChanged) {
+                    unbinds.push(selSub.bind("onComponentChange", (options, reason) => selectedOnSelectedItemsChanged(options, reason)));
+                }
+            }
+            // OptionsSection events
+            const optSub = mgr.options.getSubscriber();
+            if (optSub) {
+                if (optionsOnItemPick) {
+                    unbinds.push(optSub.bind("onItemPick", (item) => optionsOnItemPick(item)));
+                }
+                if (optionsOnInputChange) {
+                    unbinds.push(optSub.bind("onInputChange", (e, previousValue) => optionsOnInputChange({
+                        originalEvent: e,
+                        value: e.target.value,
+                        previousValue,
+                    })));
+                }
+                if (optionsOnCancel) {
+                    unbinds.push(optSub.bind("onCancel", () => optionsOnCancel()));
+                }
+                if (optionsOnOk) {
+                    unbinds.push(optSub.bind("onOk", () => optionsOnOk()));
+                }
+                if (optionsOnHighlightChange) {
+                    unbinds.push(optSub.bind("onHighlightChange", (id) => optionsOnHighlightChange(id)));
+                }
+                if (optionsOnClear) {
+                    unbinds.push(optSub.bind("onClear", () => optionsOnClear()));
+                }
+                if (optionsOnOptionsChanged) {
+                    unbinds.push(optSub.bind("onComponentChange", (options, reason) => optionsOnOptionsChanged(options, reason)));
+                }
+            }
+            // Container events
+            const conSub = mgr.container.getSubscriber();
+            if (conSub) {
+                if (containerOnClose) {
+                    unbinds.push(conSub.bind("onClose", () => containerOnClose()));
+                }
+            }
+            return () => {
+                unbinds.forEach((u) => u());
+            };
+        }
+    }, [
+        selectedOnDelete,
+        selectedOnClear,
+        selectedOnChangeValue,
+        selectedOnFocus,
+        selectedOnChange,
+        selectedOnSelectedItemsChanged,
+        optionsOnItemPick,
+        optionsOnInputChange,
+        optionsOnCancel,
+        optionsOnOk,
+        optionsOnHighlightChange,
+        optionsOnClear,
+        optionsOnOptionsChanged,
+        containerOnClose,
+    ]);
+    React.useLayoutEffect(() => {
+        const el = internalRef.current;
+        if (el && el.getManager && el.getManager()) {
+            if (selectedSelected !== undefined) {
+                el.getManager().selected.setSelected(typeof selectedSelected === "string" ? JSON.parse(selectedSelected) : selectedSelected);
+            }
+            if (optionsOptions !== undefined) {
+                el.getManager().options.setOptions(typeof optionsOptions === "string" ? JSON.parse(optionsOptions) : optionsOptions);
+            }
+        }
+    }, [selectedSelected, optionsOptions]);
+    const wcProps = { ...rest, ref: setRef };
+    // Map selected-* attributes
+    if (String(selectedShowInput) === "true") {
+        wcProps["selected-show-input"] = "true";
+    }
+    else {
+        delete wcProps["selected-show-input"];
+    }
+    if (selectedValue !== undefined)
+        wcProps["selected-value"] = selectedValue;
+    if (selectedLabel !== undefined)
+        wcProps["selected-label"] = selectedLabel;
+    if (String(selectedDisabled) === "true") {
+        wcProps["selected-disabled"] = "true";
+    }
+    else {
+        delete wcProps["selected-disabled"];
+    }
+    if (String(selectedError) === "true") {
+        wcProps["selected-error"] = "true";
+    }
+    else {
+        delete wcProps["selected-error"];
+    }
+    if (String(selectedLoading) === "true") {
+        wcProps["selected-loading"] = "true";
+    }
+    else {
+        delete wcProps["selected-loading"];
+    }
+    if (String(selectedShowDelete) === "true") {
+        wcProps["selected-show-delete"] = "true";
+    }
+    else {
+        delete wcProps["selected-show-delete"];
+    }
+    // Map options-* attributes
+    if (String(optionsLoading) === "true") {
+        wcProps["options-loading"] = "true";
+    }
+    else {
+        delete wcProps["options-loading"];
+    }
+    if (optionsValue !== undefined)
+        wcProps["options-value"] = optionsValue;
+    if (optionsLabel !== undefined)
+        wcProps["options-label"] = optionsLabel;
+    if (String(optionsDisabled) === "true") {
+        wcProps["options-disabled"] = "true";
+    }
+    else {
+        delete wcProps["options-disabled"];
+    }
+    if (optionsMaxHeight !== undefined)
+        wcProps["options-max-height"] = optionsMaxHeight;
+    if (String(optionsShowFooter) === "true") {
+        wcProps["options-show-footer"] = "true";
+    }
+    else {
+        delete wcProps["options-show-footer"];
+    }
+    if (String(optionsFilter) === "true") {
+        wcProps["options-show-filter"] = "true";
+    }
+    else {
+        delete wcProps["options-show-filter"];
+    }
+    // Map container-* attributes
+    if (containerPosition !== undefined)
+        wcProps["container-position"] = containerPosition;
+    if (containerOffset !== undefined)
+        wcProps["container-offset"] = containerOffset;
+    return React.createElement("composite-select", wcProps, children);
+});
+export default CompositeSelect;

package/dist/cjs/container/ContainerManager.js

@@ -0,0 +1,76 @@
+import createSubscriber from "../createSubscriber.js";
+export class ContainerManager {
+    parent;
+    target;
+    popover;
+    currentPosition = "cover-bottom";
+    propOptions;
+    _subscriber = createSubscriber();
+    constructor(parent, options = {}) {
+        this.parent = parent;
+        this.propOptions = {
+            ...options,
+        };
+        this.target = document.createElement("div");
+        this.popover = document.createElement("div");
+        this.popover.setAttribute("popover", "manual");
+        this.popover.setAttribute("data-popover", "");
+        this.popover.style.width = "anchor-size(width)";
+        this.popover.style.boxSizing = "border-box";
+        this.popover.style.border = "none";
+        this.setPosition(this.currentPosition);
+        this.setOffset("0px");
+        this.parent.appendChild(this.target);
+        this.parent.appendChild(this.popover);
+        this.popover.addEventListener("beforetoggle", (event) => {
+            if (event.newState === "closed") {
+                if (this.propOptions.onClose) {
+                    this.propOptions.onClose();
+                }
+                this._subscriber.trigger("onClose");
+            }
+        });
+    }
+    getSubscriber() {
+        return this._subscriber;
+    }
+    show() {
+        this.popover.showPopover({ source: this.target });
+    }
+    hide() {
+        this.popover.hidePopover();
+    }
+    getParent() {
+        return this.parent;
+    }
+    getTarget() {
+        return this.target;
+    }
+    getPopover() {
+        return this.popover;
+    }
+    getPosition() {
+        return this.currentPosition;
+    }
+    setPosition(position) {
+        if (this.currentPosition) {
+            this.popover.classList.remove(this.currentPosition);
+        }
+        this.currentPosition = position;
+        if (this.currentPosition) {
+            this.popover.classList.add(this.currentPosition);
+        }
+    }
+    setOffset(offset) {
+        this.popover.style.setProperty("--popover-offset", offset);
+    }
+    destroy() {
+        if (this.target && this.target.parentNode) {
+            this.target.parentNode.removeChild(this.target);
+        }
+        if (this.popover && this.popover.parentNode) {
+            this.popover.parentNode.removeChild(this.popover);
+        }
+        this._subscriber.destroy();
+    }
+}

package/dist/cjs/createSubscriber.cjs

@@ -0,0 +1,48 @@
+/**
+  type Events = {
+    login: [user: { id: string; name: string }];
+    logout: [];
+  };
+
+  const subscriber = createSubscriber<Events>();
+
+  const loginHandler = () => {}
+  const logoutHandler = () => {}
+
+  subscriber.bind("login", loginHandler);
+  subscriber.bind("logout", logoutHandler);
+
+  subscriber.trigger("login", { id: "1", name: "John" });
+
+  subscriber.trigger("logout");
+ */
+export default function createSubscriber() {
+    const bindings = new Map();
+    function bind(event, handler) {
+        if (!bindings.has(event)) {
+            bindings.set(event, new Set());
+        }
+        bindings.get(event).add(handler);
+        return () => unbind(event, handler);
+    }
+    function unbind(event, handler) {
+        bindings.get(event)?.delete(handler);
+    }
+    function unbindGroup(event) {
+        bindings.delete(event);
+    }
+    function trigger(event, ...args) {
+        bindings.get(event)?.forEach((handler) => {
+            handler(...args);
+        });
+    }
+    function destroy() {
+        bindings.clear();
+    }
+    function getCount() {
+        let count = 0;
+        bindings.forEach((handlers) => (count += handlers.size));
+        return count;
+    }
+    return { bind, unbind, unbindGroup, trigger, destroy, getCount };
+}