@heymantle/litho 0.0.3 → 0.0.5

package/dist/esm/stories/PopoverManager.stories.js

@@ -0,0 +1,1201 @@
+function _array_like_to_array(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_with_holes(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _array_without_holes(arr) {
+    if (Array.isArray(arr)) return _array_like_to_array(arr);
+}
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _iterable_to_array(iter) {
+    if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+}
+function _iterable_to_array_limit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _non_iterable_spread() {
+    throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+function _sliced_to_array(arr, i) {
+    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
+}
+function _to_consumable_array(arr) {
+    return _array_without_holes(arr) || _iterable_to_array(arr) || _unsupported_iterable_to_array(arr) || _non_iterable_spread();
+}
+function _unsupported_iterable_to_array(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
+}
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { transformStorySource } from "../utilities/transformers.js";
+import Stack from "../components/Stack.js";
+import PopoverManager from "../components/PopoverManager.js";
+import Popover from "../components/Popover.js";
+import Text from "../components/Text.js";
+import Card from "../components/Card.js";
+import Button from "../components/Button.js";
+import Page from "../components/Page.js";
+import Box from "../components/Box.js";
+export default {
+    title: "Litho/PopoverManager",
+    component: PopoverManager,
+    parameters: {
+        layout: "padded",
+        docs: {
+            description: {
+                component: "A PopoverManager utility that manages the state of multiple popovers in an application. It provides methods to open, close, and track active popovers, ensuring proper layering and interaction management."
+            },
+            source: {
+                transform: transformStorySource
+            }
+        }
+    },
+    tags: [
+        "autodocs"
+    ]
+};
+export var BasicUsage = {
+    render: function() {
+        var _useState = _sliced_to_array(useState([]), 2), activePopovers = _useState[0], setActivePopovers = _useState[1];
+        var _useState1 = _sliced_to_array(useState(false), 2), popover1Active = _useState1[0], setPopover1Active = _useState1[1];
+        var _useState2 = _sliced_to_array(useState(false), 2), popover2Active = _useState2[0], setPopover2Active = _useState2[1];
+        useEffect(function() {
+            var handleManagerChange = function() {
+                setActivePopovers(_to_consumable_array(PopoverManager.activePopovers));
+            };
+            PopoverManager.on("change", handleManagerChange);
+            return function() {
+                PopoverManager.removeListener("change", handleManagerChange);
+            };
+        }, []);
+        var openPopover1 = function() {
+            PopoverManager.open("popover1");
+            setPopover1Active(true);
+        };
+        var closePopover1 = function() {
+            PopoverManager.close("popover1");
+            setPopover1Active(false);
+        };
+        var openPopover2 = function() {
+            PopoverManager.open("popover2");
+            setPopover2Active(true);
+        };
+        var closePopover2 = function() {
+            PopoverManager.close("popover2");
+            setPopover2Active(false);
+        };
+        var closeAll = function() {
+            PopoverManager.closeAll();
+            setPopover1Active(false);
+            setPopover2Active(false);
+        };
+        return /*#__PURE__*/ _jsx(Card, {
+            title: "PopoverManager Basic Usage",
+            padded: true,
+            children: /*#__PURE__*/ _jsxs(Stack, {
+                gap: "lg",
+                children: [
+                    /*#__PURE__*/ _jsxs(Stack, {
+                        gap: "md",
+                        children: [
+                            /*#__PURE__*/ _jsx(Text, {
+                                children: "The PopoverManager helps coordinate multiple popovers to prevent conflicts and manage layering. Click the buttons below to see it in action."
+                            }),
+                            /*#__PURE__*/ _jsxs(Stack, {
+                                horizontal: true,
+                                gap: "md",
+                                children: [
+                                    /*#__PURE__*/ _jsx(Popover, {
+                                        active: popover1Active,
+                                        activator: /*#__PURE__*/ _jsx(Button, {
+                                            onClick: openPopover1,
+                                            children: "Open Popover 1"
+                                        }),
+                                        onClose: closePopover1,
+                                        children: /*#__PURE__*/ _jsx(Box, {
+                                            padding: "4",
+                                            minWidth: "200px",
+                                            children: /*#__PURE__*/ _jsxs(Stack, {
+                                                gap: "sm",
+                                                children: [
+                                                    /*#__PURE__*/ _jsx(Text, {
+                                                        variant: "headingSm",
+                                                        children: "Popover 1"
+                                                    }),
+                                                    /*#__PURE__*/ _jsx(Text, {
+                                                        children: "This is the first popover managed by PopoverManager."
+                                                    }),
+                                                    /*#__PURE__*/ _jsx(Button, {
+                                                        size: "slim",
+                                                        onClick: closePopover1,
+                                                        children: "Close"
+                                                    })
+                                                ]
+                                            })
+                                        })
+                                    }),
+                                    /*#__PURE__*/ _jsx(Popover, {
+                                        active: popover2Active,
+                                        activator: /*#__PURE__*/ _jsx(Button, {
+                                            onClick: openPopover2,
+                                            children: "Open Popover 2"
+                                        }),
+                                        onClose: closePopover2,
+                                        children: /*#__PURE__*/ _jsx(Box, {
+                                            padding: "4",
+                                            minWidth: "200px",
+                                            children: /*#__PURE__*/ _jsxs(Stack, {
+                                                gap: "sm",
+                                                children: [
+                                                    /*#__PURE__*/ _jsx(Text, {
+                                                        variant: "headingSm",
+                                                        children: "Popover 2"
+                                                    }),
+                                                    /*#__PURE__*/ _jsx(Text, {
+                                                        children: "This is the second popover managed by PopoverManager."
+                                                    }),
+                                                    /*#__PURE__*/ _jsx(Button, {
+                                                        size: "slim",
+                                                        onClick: closePopover2,
+                                                        children: "Close"
+                                                    })
+                                                ]
+                                            })
+                                        })
+                                    }),
+                                    /*#__PURE__*/ _jsx(Button, {
+                                        onClick: closeAll,
+                                        destructive: true,
+                                        children: "Close All Popovers"
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx(Box, {
+                        padding: "4",
+                        background: "subdued",
+                        borderRadius: "default",
+                        children: /*#__PURE__*/ _jsxs(Stack, {
+                            gap: "sm",
+                            children: [
+                                /*#__PURE__*/ _jsx(Text, {
+                                    variant: "headingSm",
+                                    children: "PopoverManager State"
+                                }),
+                                /*#__PURE__*/ _jsxs(Stack, {
+                                    gap: "xs",
+                                    children: [
+                                        /*#__PURE__*/ _jsxs(Text, {
+                                            variant: "bodySm",
+                                            children: [
+                                                "Active Popovers: ",
+                                                activePopovers.length
+                                            ]
+                                        }),
+                                        /*#__PURE__*/ _jsxs(Text, {
+                                            variant: "bodySm",
+                                            children: [
+                                                "Popover IDs: ",
+                                                activePopovers.length > 0 ? activePopovers.join(", ") : "None"
+                                            ]
+                                        }),
+                                        /*#__PURE__*/ _jsxs(Text, {
+                                            variant: "bodySm",
+                                            children: [
+                                                "Latest Active: ",
+                                                PopoverManager.getActivePopoverId() || "None"
+                                            ]
+                                        })
+                                    ]
+                                })
+                            ]
+                        })
+                    })
+                ]
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "Basic usage of PopoverManager to coordinate multiple popovers."
+            }
+        }
+    }
+};
+export var ConflictResolution = {
+    render: function() {
+        var _useState = _sliced_to_array(useState([]), 2), activePopovers = _useState[0], setActivePopovers = _useState[1];
+        var _useState1 = _sliced_to_array(useState(false), 2), contextMenuActive = _useState1[0], setContextMenuActive = _useState1[1];
+        var _useState2 = _sliced_to_array(useState(false), 2), settingsActive = _useState2[0], setSettingsActive = _useState2[1];
+        var _useState3 = _sliced_to_array(useState(false), 2), helpActive = _useState3[0], setHelpActive = _useState3[1];
+        useEffect(function() {
+            var handleManagerChange = function() {
+                setActivePopovers(_to_consumable_array(PopoverManager.activePopovers));
+            };
+            PopoverManager.on("change", handleManagerChange);
+            return function() {
+                PopoverManager.removeListener("change", handleManagerChange);
+            };
+        }, []);
+        var openContextMenu = function() {
+            // Close other conflicting popovers first
+            PopoverManager.close("settings");
+            PopoverManager.close("help");
+            setSettingsActive(false);
+            setHelpActive(false);
+            PopoverManager.open("contextMenu");
+            setContextMenuActive(true);
+        };
+        var closeContextMenu = function() {
+            PopoverManager.close("contextMenu");
+            setContextMenuActive(false);
+        };
+        var openSettings = function() {
+            // Close conflicting popovers
+            PopoverManager.close("contextMenu");
+            PopoverManager.close("help");
+            setContextMenuActive(false);
+            setHelpActive(false);
+            PopoverManager.open("settings");
+            setSettingsActive(true);
+        };
+        var closeSettings = function() {
+            PopoverManager.close("settings");
+            setSettingsActive(false);
+        };
+        var openHelp = function() {
+            // Close conflicting popovers
+            PopoverManager.close("contextMenu");
+            PopoverManager.close("settings");
+            setContextMenuActive(false);
+            setSettingsActive(false);
+            PopoverManager.open("help");
+            setHelpActive(true);
+        };
+        var closeHelp = function() {
+            PopoverManager.close("help");
+            setHelpActive(false);
+        };
+        return /*#__PURE__*/ _jsx(Card, {
+            title: "Popover Conflict Resolution",
+            padded: true,
+            children: /*#__PURE__*/ _jsxs(Stack, {
+                gap: "lg",
+                children: [
+                    /*#__PURE__*/ _jsxs(Stack, {
+                        gap: "md",
+                        children: [
+                            /*#__PURE__*/ _jsx(Text, {
+                                children: "When multiple popovers might conflict (like context menus and settings panels), PopoverManager helps resolve conflicts by allowing controlled opening and closing."
+                            }),
+                            /*#__PURE__*/ _jsxs(Stack, {
+                                horizontal: true,
+                                gap: "md",
+                                children: [
+                                    /*#__PURE__*/ _jsx(Popover, {
+                                        active: contextMenuActive,
+                                        activator: /*#__PURE__*/ _jsx(Button, {
+                                            onClick: openContextMenu,
+                                            children: "Context Menu"
+                                        }),
+                                        onClose: closeContextMenu,
+                                        children: /*#__PURE__*/ _jsx(Box, {
+                                            padding: "4",
+                                            minWidth: "150px",
+                                            children: /*#__PURE__*/ _jsxs(Stack, {
+                                                gap: "sm",
+                                                children: [
+                                                    /*#__PURE__*/ _jsx(Text, {
+                                                        variant: "headingSm",
+                                                        children: "Context Menu"
+                                                    }),
+                                                    /*#__PURE__*/ _jsxs(Stack, {
+                                                        gap: "xs",
+                                                        children: [
+                                                            /*#__PURE__*/ _jsx(Button, {
+                                                                size: "slim",
+                                                                plain: true,
+                                                                textAlign: "left",
+                                                                children: "Cut"
+                                                            }),
+                                                            /*#__PURE__*/ _jsx(Button, {
+                                                                size: "slim",
+                                                                plain: true,
+                                                                textAlign: "left",
+                                                                children: "Copy"
+                                                            }),
+                                                            /*#__PURE__*/ _jsx(Button, {
+                                                                size: "slim",
+                                                                plain: true,
+                                                                textAlign: "left",
+                                                                children: "Paste"
+                                                            }),
+                                                            /*#__PURE__*/ _jsx(Box, {
+                                                                paddingBlockStart: "2",
+                                                                paddingBlockEnd: "2",
+                                                                children: /*#__PURE__*/ _jsx("hr", {})
+                                                            }),
+                                                            /*#__PURE__*/ _jsx(Button, {
+                                                                size: "slim",
+                                                                plain: true,
+                                                                textAlign: "left",
+                                                                children: "Delete"
+                                                            })
+                                                        ]
+                                                    })
+                                                ]
+                                            })
+                                        })
+                                    }),
+                                    /*#__PURE__*/ _jsx(Popover, {
+                                        active: settingsActive,
+                                        activator: /*#__PURE__*/ _jsx(Button, {
+                                            onClick: openSettings,
+                                            children: "Settings Panel"
+                                        }),
+                                        onClose: closeSettings,
+                                        children: /*#__PURE__*/ _jsx(Box, {
+                                            padding: "4",
+                                            minWidth: "200px",
+                                            children: /*#__PURE__*/ _jsxs(Stack, {
+                                                gap: "md",
+                                                children: [
+                                                    /*#__PURE__*/ _jsx(Text, {
+                                                        variant: "headingSm",
+                                                        children: "Settings"
+                                                    }),
+                                                    /*#__PURE__*/ _jsxs(Stack, {
+                                                        gap: "md",
+                                                        children: [
+                                                            /*#__PURE__*/ _jsxs(Stack, {
+                                                                horizontal: true,
+                                                                gap: "sm",
+                                                                blockAlign: "center",
+                                                                children: [
+                                                                    /*#__PURE__*/ _jsx("input", {
+                                                                        type: "checkbox",
+                                                                        defaultChecked: true
+                                                                    }),
+                                                                    /*#__PURE__*/ _jsx(Text, {
+                                                                        variant: "bodySm",
+                                                                        children: "Enable notifications"
+                                                                    })
+                                                                ]
+                                                            }),
+                                                            /*#__PURE__*/ _jsxs(Stack, {
+                                                                horizontal: true,
+                                                                gap: "sm",
+                                                                blockAlign: "center",
+                                                                children: [
+                                                                    /*#__PURE__*/ _jsx("input", {
+                                                                        type: "checkbox"
+                                                                    }),
+                                                                    /*#__PURE__*/ _jsx(Text, {
+                                                                        variant: "bodySm",
+                                                                        children: "Auto-save"
+                                                                    })
+                                                                ]
+                                                            }),
+                                                            /*#__PURE__*/ _jsxs(Stack, {
+                                                                gap: "sm",
+                                                                children: [
+                                                                    /*#__PURE__*/ _jsx(Text, {
+                                                                        variant: "bodySm",
+                                                                        children: "Theme"
+                                                                    }),
+                                                                    /*#__PURE__*/ _jsx(Box, {
+                                                                        children: /*#__PURE__*/ _jsxs("select", {
+                                                                            style: {
+                                                                                width: "100%",
+                                                                                padding: "0.25rem"
+                                                                            },
+                                                                            children: [
+                                                                                /*#__PURE__*/ _jsx("option", {
+                                                                                    children: "Light"
+                                                                                }),
+                                                                                /*#__PURE__*/ _jsx("option", {
+                                                                                    children: "Dark"
+                                                                                }),
+                                                                                /*#__PURE__*/ _jsx("option", {
+                                                                                    children: "Auto"
+                                                                                })
+                                                                            ]
+                                                                        })
+                                                                    })
+                                                                ]
+                                                            })
+                                                        ]
+                                                    })
+                                                ]
+                                            })
+                                        })
+                                    }),
+                                    /*#__PURE__*/ _jsx(Popover, {
+                                        active: helpActive,
+                                        activator: /*#__PURE__*/ _jsx(Button, {
+                                            onClick: openHelp,
+                                            children: "Help Menu"
+                                        }),
+                                        onClose: closeHelp,
+                                        children: /*#__PURE__*/ _jsx(Box, {
+                                            padding: "4",
+                                            minWidth: "180px",
+                                            children: /*#__PURE__*/ _jsxs(Stack, {
+                                                gap: "sm",
+                                                children: [
+                                                    /*#__PURE__*/ _jsx(Text, {
+                                                        variant: "headingSm",
+                                                        children: "Help & Support"
+                                                    }),
+                                                    /*#__PURE__*/ _jsxs(Stack, {
+                                                        gap: "xs",
+                                                        children: [
+                                                            /*#__PURE__*/ _jsx(Button, {
+                                                                size: "slim",
+                                                                plain: true,
+                                                                textAlign: "left",
+                                                                children: "User Guide"
+                                                            }),
+                                                            /*#__PURE__*/ _jsx(Button, {
+                                                                size: "slim",
+                                                                plain: true,
+                                                                textAlign: "left",
+                                                                children: "Keyboard Shortcuts"
+                                                            }),
+                                                            /*#__PURE__*/ _jsx(Button, {
+                                                                size: "slim",
+                                                                plain: true,
+                                                                textAlign: "left",
+                                                                children: "Contact Support"
+                                                            }),
+                                                            /*#__PURE__*/ _jsx(Box, {
+                                                                paddingBlockStart: "2",
+                                                                paddingBlockEnd: "2",
+                                                                children: /*#__PURE__*/ _jsx("hr", {})
+                                                            }),
+                                                            /*#__PURE__*/ _jsx(Button, {
+                                                                size: "slim",
+                                                                plain: true,
+                                                                textAlign: "left",
+                                                                children: "About"
+                                                            })
+                                                        ]
+                                                    })
+                                                ]
+                                            })
+                                        })
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsx(Text, {
+                                variant: "bodySm",
+                                color: "subdued",
+                                children: "Notice how opening one popover automatically closes the others to prevent conflicts."
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx(Box, {
+                        padding: "4",
+                        background: "subdued",
+                        borderRadius: "default",
+                        children: /*#__PURE__*/ _jsxs(Stack, {
+                            gap: "sm",
+                            children: [
+                                /*#__PURE__*/ _jsx(Text, {
+                                    variant: "headingSm",
+                                    children: "Conflict Resolution Status"
+                                }),
+                                /*#__PURE__*/ _jsxs(Stack, {
+                                    gap: "xs",
+                                    children: [
+                                        /*#__PURE__*/ _jsxs(Text, {
+                                            variant: "bodyXs",
+                                            children: [
+                                                "Active Popover: ",
+                                                PopoverManager.getActivePopoverId() || "None"
+                                            ]
+                                        }),
+                                        /*#__PURE__*/ _jsxs(Text, {
+                                            variant: "bodyXs",
+                                            children: [
+                                                "Total Open: ",
+                                                activePopovers.length
+                                            ]
+                                        }),
+                                        /*#__PURE__*/ _jsxs(Text, {
+                                            variant: "bodyXs",
+                                            children: [
+                                                "Context Menu: ",
+                                                contextMenuActive ? "✓ Open" : "✗ Closed"
+                                            ]
+                                        }),
+                                        /*#__PURE__*/ _jsxs(Text, {
+                                            variant: "bodyXs",
+                                            children: [
+                                                "Settings Panel: ",
+                                                settingsActive ? "✓ Open" : "✗ Closed"
+                                            ]
+                                        }),
+                                        /*#__PURE__*/ _jsxs(Text, {
+                                            variant: "bodyXs",
+                                            children: [
+                                                "Help Menu: ",
+                                                helpActive ? "✓ Open" : "✗ Closed"
+                                            ]
+                                        })
+                                    ]
+                                })
+                            ]
+                        })
+                    })
+                ]
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "Demonstrates how PopoverManager resolves conflicts between competing popovers."
+            }
+        }
+    }
+};
+export var ApplicationIntegration = {
+    render: function() {
+        var _useState = _sliced_to_array(useState([]), 2), activePopovers = _useState[0], setActivePopovers = _useState[1];
+        var _useState1 = _sliced_to_array(useState(false), 2), userMenuActive = _useState1[0], setUserMenuActive = _useState1[1];
+        var _useState2 = _sliced_to_array(useState(false), 2), notificationsActive = _useState2[0], setNotificationsActive = _useState2[1];
+        var _useState3 = _sliced_to_array(useState(false), 2), searchActive = _useState3[0], setSearchActive = _useState3[1];
+        useEffect(function() {
+            var handleManagerChange = function() {
+                setActivePopovers(_to_consumable_array(PopoverManager.activePopovers));
+            };
+            PopoverManager.on("change", handleManagerChange);
+            return function() {
+                PopoverManager.removeListener("change", handleManagerChange);
+            };
+        }, []);
+        var toggleUserMenu = function() {
+            if (userMenuActive) {
+                PopoverManager.close("userMenu");
+                setUserMenuActive(false);
+            } else {
+                PopoverManager.open("userMenu");
+                setUserMenuActive(true);
+            }
+        };
+        var toggleNotifications = function() {
+            if (notificationsActive) {
+                PopoverManager.close("notifications");
+                setNotificationsActive(false);
+            } else {
+                PopoverManager.open("notifications");
+                setNotificationsActive(true);
+            }
+        };
+        var toggleSearch = function() {
+            if (searchActive) {
+                PopoverManager.close("search");
+                setSearchActive(false);
+            } else {
+                PopoverManager.open("search");
+                setSearchActive(true);
+            }
+        };
+        var closeAll = function() {
+            PopoverManager.closeAll();
+            setUserMenuActive(false);
+            setNotificationsActive(false);
+            setSearchActive(false);
+        };
+        return /*#__PURE__*/ _jsxs(Page, {
+            title: "Application Header",
+            children: [
+                /*#__PURE__*/ _jsx(Box, {
+                    padding: "4",
+                    background: "subdued",
+                    borderRadius: "lg",
+                    marginBlockEnd: "8",
+                    children: /*#__PURE__*/ _jsxs(Stack, {
+                        horizontal: true,
+                        align: "space-between",
+                        blockAlign: "center",
+                        children: [
+                            /*#__PURE__*/ _jsx(Text, {
+                                variant: "headingLg",
+                                children: "My Application"
+                            }),
+                            /*#__PURE__*/ _jsxs(Stack, {
+                                horizontal: true,
+                                gap: "md",
+                                blockAlign: "center",
+                                children: [
+                                    /*#__PURE__*/ _jsx(Popover, {
+                                        active: searchActive,
+                                        activator: /*#__PURE__*/ _jsx(Button, {
+                                            plain: true,
+                                            onClick: toggleSearch,
+                                            children: "\uD83D\uDD0D Search"
+                                        }),
+                                        onClose: function() {
+                                            PopoverManager.close("search");
+                                            setSearchActive(false);
+                                        },
+                                        children: /*#__PURE__*/ _jsx(Box, {
+                                            padding: "4",
+                                            minWidth: "300px",
+                                            children: /*#__PURE__*/ _jsxs(Stack, {
+                                                gap: "md",
+                                                children: [
+                                                    /*#__PURE__*/ _jsx("input", {
+                                                        type: "text",
+                                                        placeholder: "Search anything...",
+                                                        style: {
+                                                            width: "100%",
+                                                            padding: "0.5rem",
+                                                            border: "1px solid #ccc",
+                                                            borderRadius: "4px"
+                                                        }
+                                                    }),
+                                                    /*#__PURE__*/ _jsxs(Stack, {
+                                                        gap: "xs",
+                                                        children: [
+                                                            /*#__PURE__*/ _jsx(Text, {
+                                                                variant: "bodySm",
+                                                                color: "subdued",
+                                                                children: "Recent searches:"
+                                                            }),
+                                                            /*#__PURE__*/ _jsx(Button, {
+                                                                size: "slim",
+                                                                plain: true,
+                                                                textAlign: "left",
+                                                                children: "User management"
+                                                            }),
+                                                            /*#__PURE__*/ _jsx(Button, {
+                                                                size: "slim",
+                                                                plain: true,
+                                                                textAlign: "left",
+                                                                children: "Product catalog"
+                                                            }),
+                                                            /*#__PURE__*/ _jsx(Button, {
+                                                                size: "slim",
+                                                                plain: true,
+                                                                textAlign: "left",
+                                                                children: "Analytics dashboard"
+                                                            })
+                                                        ]
+                                                    })
+                                                ]
+                                            })
+                                        })
+                                    }),
+                                    /*#__PURE__*/ _jsx(Popover, {
+                                        active: notificationsActive,
+                                        activator: /*#__PURE__*/ _jsx(Button, {
+                                            plain: true,
+                                            onClick: toggleNotifications,
+                                            children: "\uD83D\uDD14 Notifications (3)"
+                                        }),
+                                        onClose: function() {
+                                            PopoverManager.close("notifications");
+                                            setNotificationsActive(false);
+                                        },
+                                        children: /*#__PURE__*/ _jsx(Box, {
+                                            padding: "4",
+                                            minWidth: "280px",
+                                            children: /*#__PURE__*/ _jsxs(Stack, {
+                                                gap: "md",
+                                                children: [
+                                                    /*#__PURE__*/ _jsx(Text, {
+                                                        variant: "headingSm",
+                                                        children: "Notifications"
+                                                    }),
+                                                    /*#__PURE__*/ _jsx(Stack, {
+                                                        gap: "sm",
+                                                        children: [
+                                                            {
+                                                                title: "New order received",
+                                                                time: "2 minutes ago",
+                                                                unread: true
+                                                            },
+                                                            {
+                                                                title: "System maintenance scheduled",
+                                                                time: "1 hour ago",
+                                                                unread: true
+                                                            },
+                                                            {
+                                                                title: "Monthly report ready",
+                                                                time: "3 hours ago",
+                                                                unread: false
+                                                            }
+                                                        ].map(function(notification, index) {
+                                                            return /*#__PURE__*/ _jsx(Box, {
+                                                                padding: "3",
+                                                                background: notification.unread ? "surface-neutral-subdued" : "surface-neutral",
+                                                                borderRadius: "default",
+                                                                style: {
+                                                                    borderLeft: notification.unread ? "3px solid #007bff" : "3px solid transparent"
+                                                                },
+                                                                children: /*#__PURE__*/ _jsxs(Stack, {
+                                                                    gap: "xs",
+                                                                    children: [
+                                                                        /*#__PURE__*/ _jsx(Text, {
+                                                                            variant: "bodySm",
+                                                                            fontWeight: notification.unread ? "bold" : "normal",
+                                                                            children: notification.title
+                                                                        }),
+                                                                        /*#__PURE__*/ _jsx(Text, {
+                                                                            variant: "bodyXs",
+                                                                            color: "subdued",
+                                                                            children: notification.time
+                                                                        })
+                                                                    ]
+                                                                })
+                                                            }, index);
+                                                        })
+                                                    }),
+                                                    /*#__PURE__*/ _jsx(Stack, {
+                                                        inlineAlign: "center",
+                                                        children: /*#__PURE__*/ _jsx(Button, {
+                                                            size: "slim",
+                                                            children: "View all notifications"
+                                                        })
+                                                    })
+                                                ]
+                                            })
+                                        })
+                                    }),
+                                    /*#__PURE__*/ _jsx(Popover, {
+                                        active: userMenuActive,
+                                        activator: /*#__PURE__*/ _jsx(Button, {
+                                            plain: true,
+                                            onClick: toggleUserMenu,
+                                            children: "\uD83D\uDC64 John Doe"
+                                        }),
+                                        onClose: function() {
+                                            PopoverManager.close("userMenu");
+                                            setUserMenuActive(false);
+                                        },
+                                        children: /*#__PURE__*/ _jsx(Box, {
+                                            padding: "4",
+                                            minWidth: "200px",
+                                            children: /*#__PURE__*/ _jsxs(Stack, {
+                                                gap: "md",
+                                                children: [
+                                                    /*#__PURE__*/ _jsxs(Stack, {
+                                                        gap: "sm",
+                                                        inlineAlign: "center",
+                                                        children: [
+                                                            /*#__PURE__*/ _jsx("div", {
+                                                                style: {
+                                                                    width: "40px",
+                                                                    height: "40px",
+                                                                    borderRadius: "50%",
+                                                                    backgroundColor: "#007bff",
+                                                                    color: "white",
+                                                                    display: "flex",
+                                                                    alignItems: "center",
+                                                                    justifyContent: "center"
+                                                                },
+                                                                children: "JD"
+                                                            }),
+                                                            /*#__PURE__*/ _jsx(Text, {
+                                                                variant: "headingSm",
+                                                                children: "John Doe"
+                                                            }),
+                                                            /*#__PURE__*/ _jsx(Text, {
+                                                                variant: "bodySm",
+                                                                color: "subdued",
+                                                                children: "john@example.com"
+                                                            })
+                                                        ]
+                                                    }),
+                                                    /*#__PURE__*/ _jsxs(Stack, {
+                                                        gap: "xs",
+                                                        children: [
+                                                            /*#__PURE__*/ _jsx(Button, {
+                                                                size: "slim",
+                                                                plain: true,
+                                                                textAlign: "left",
+                                                                children: "Profile Settings"
+                                                            }),
+                                                            /*#__PURE__*/ _jsx(Button, {
+                                                                size: "slim",
+                                                                plain: true,
+                                                                textAlign: "left",
+                                                                children: "Account"
+                                                            }),
+                                                            /*#__PURE__*/ _jsx(Button, {
+                                                                size: "slim",
+                                                                plain: true,
+                                                                textAlign: "left",
+                                                                children: "Preferences"
+                                                            }),
+                                                            /*#__PURE__*/ _jsx(Box, {
+                                                                paddingBlockStart: "2",
+                                                                paddingBlockEnd: "2",
+                                                                children: /*#__PURE__*/ _jsx("hr", {})
+                                                            }),
+                                                            /*#__PURE__*/ _jsx(Button, {
+                                                                size: "slim",
+                                                                plain: true,
+                                                                textAlign: "left",
+                                                                children: "Help & Support"
+                                                            }),
+                                                            /*#__PURE__*/ _jsx(Button, {
+                                                                size: "slim",
+                                                                plain: true,
+                                                                textAlign: "left",
+                                                                destructive: true,
+                                                                children: "Sign Out"
+                                                            })
+                                                        ]
+                                                    })
+                                                ]
+                                            })
+                                        })
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                }),
+                /*#__PURE__*/ _jsxs(Card, {
+                    title: "PopoverManager in Real Applications",
+                    padded: true,
+                    children: [
+                        /*#__PURE__*/ _jsxs(Stack, {
+                            gap: "md",
+                            children: [
+                                /*#__PURE__*/ _jsx(Text, {
+                                    children: "The header above demonstrates how PopoverManager works in a real application scenario, coordinating multiple interface elements like search, notifications, and user menus."
+                                }),
+                                /*#__PURE__*/ _jsx(Stack, {
+                                    horizontal: true,
+                                    gap: "md",
+                                    children: /*#__PURE__*/ _jsx(Button, {
+                                        onClick: closeAll,
+                                        destructive: true,
+                                        size: "slim",
+                                        children: "Close All Popovers"
+                                    })
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsx(Box, {
+                            marginBlockStart: "8",
+                            padding: "4",
+                            background: "subdued",
+                            borderRadius: "default",
+                            children: /*#__PURE__*/ _jsxs(Stack, {
+                                gap: "sm",
+                                children: [
+                                    /*#__PURE__*/ _jsx(Text, {
+                                        variant: "headingSm",
+                                        children: "Application State"
+                                    }),
+                                    /*#__PURE__*/ _jsxs(Stack, {
+                                        gap: "xs",
+                                        children: [
+                                            /*#__PURE__*/ _jsxs(Text, {
+                                                variant: "bodyXs",
+                                                children: [
+                                                    "Active Popovers: ",
+                                                    activePopovers.join(", ") || "None"
+                                                ]
+                                            }),
+                                            /*#__PURE__*/ _jsxs(Text, {
+                                                variant: "bodyXs",
+                                                children: [
+                                                    "Search: ",
+                                                    searchActive ? "✓ Open" : "✗ Closed"
+                                                ]
+                                            }),
+                                            /*#__PURE__*/ _jsxs(Text, {
+                                                variant: "bodyXs",
+                                                children: [
+                                                    "Notifications: ",
+                                                    notificationsActive ? "✓ Open" : "✗ Closed"
+                                                ]
+                                            }),
+                                            /*#__PURE__*/ _jsxs(Text, {
+                                                variant: "bodyXs",
+                                                children: [
+                                                    "User Menu: ",
+                                                    userMenuActive ? "✓ Open" : "✗ Closed"
+                                                ]
+                                            })
+                                        ]
+                                    })
+                                ]
+                            })
+                        })
+                    ]
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "Real-world application integration showing PopoverManager coordinating header elements."
+            }
+        }
+    }
+};
+export var EventHandling = {
+    render: function() {
+        var _useState = _sliced_to_array(useState([]), 2), eventLog = _useState[0], setEventLog = _useState[1];
+        var _useState1 = _sliced_to_array(useState({
+            popover1: false,
+            popover2: false,
+            popover3: false
+        }), 2), popoverStates = _useState1[0], setPopoverStates = _useState1[1];
+        useEffect(function() {
+            var handleManagerChange = function() {
+                var timestamp = new Date().toLocaleTimeString();
+                var activeIds = _to_consumable_array(PopoverManager.activePopovers);
+                setEventLog(function(prev) {
+                    return [
+                        "".concat(timestamp, ": Manager state changed - Active: [").concat(activeIds.join(", "), "]")
+                    ].concat(_to_consumable_array(prev.slice(0, 9)));
+                });
+            };
+            PopoverManager.on("change", handleManagerChange);
+            return function() {
+                PopoverManager.removeListener("change", handleManagerChange);
+            };
+        }, []);
+        var togglePopover = function(id) {
+            if (popoverStates[id]) {
+                PopoverManager.close(id);
+                setPopoverStates(function(prev) {
+                    return _object_spread_props(_object_spread({}, prev), _define_property({}, id, false));
+                });
+            } else {
+                PopoverManager.open(id);
+                setPopoverStates(function(prev) {
+                    return _object_spread_props(_object_spread({}, prev), _define_property({}, id, true));
+                });
+            }
+        };
+        var clearEventLog = function() {
+            setEventLog([]);
+        };
+        return /*#__PURE__*/ _jsx(Card, {
+            title: "PopoverManager Event Handling",
+            padded: true,
+            children: /*#__PURE__*/ _jsxs(Stack, {
+                gap: "lg",
+                children: [
+                    /*#__PURE__*/ _jsxs(Stack, {
+                        gap: "md",
+                        children: [
+                            /*#__PURE__*/ _jsx(Text, {
+                                children: "PopoverManager emits events when its state changes. This is useful for debugging and for components that need to react to popover state changes."
+                            }),
+                            /*#__PURE__*/ _jsx(Stack, {
+                                horizontal: true,
+                                gap: "md",
+                                children: [
+                                    1,
+                                    2,
+                                    3
+                                ].map(function(num) {
+                                    return /*#__PURE__*/ _jsx(Popover, {
+                                        active: popoverStates["popover".concat(num)],
+                                        activator: /*#__PURE__*/ _jsxs(Button, {
+                                            onClick: function() {
+                                                return togglePopover("popover".concat(num));
+                                            },
+                                            children: [
+                                                "Toggle Popover ",
+                                                num
+                                            ]
+                                        }),
+                                        onClose: function() {
+                                            PopoverManager.close("popover".concat(num));
+                                            setPopoverStates(function(prev) {
+                                                return _object_spread_props(_object_spread({}, prev), _define_property({}, "popover".concat(num), false));
+                                            });
+                                        },
+                                        children: /*#__PURE__*/ _jsx(Box, {
+                                            padding: "4",
+                                            minWidth: "150px",
+                                            children: /*#__PURE__*/ _jsxs(Stack, {
+                                                gap: "sm",
+                                                children: [
+                                                    /*#__PURE__*/ _jsxs(Text, {
+                                                        variant: "headingSm",
+                                                        children: [
+                                                            "Popover ",
+                                                            num
+                                                        ]
+                                                    }),
+                                                    /*#__PURE__*/ _jsxs(Text, {
+                                                        children: [
+                                                            "This is popover number ",
+                                                            num,
+                                                            "."
+                                                        ]
+                                                    }),
+                                                    /*#__PURE__*/ _jsx(Button, {
+                                                        size: "slim",
+                                                        onClick: function() {
+                                                            return togglePopover("popover".concat(num));
+                                                        },
+                                                        children: "Close"
+                                                    })
+                                                ]
+                                            })
+                                        })
+                                    }, num);
+                                })
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx(Box, {
+                        padding: "4",
+                        background: "subdued",
+                        borderRadius: "default",
+                        children: /*#__PURE__*/ _jsxs(Stack, {
+                            gap: "md",
+                            children: [
+                                /*#__PURE__*/ _jsxs(Stack, {
+                                    horizontal: true,
+                                    align: "space-between",
+                                    blockAlign: "center",
+                                    children: [
+                                        /*#__PURE__*/ _jsx(Text, {
+                                            variant: "headingSm",
+                                            children: "Event Log"
+                                        }),
+                                        /*#__PURE__*/ _jsx(Button, {
+                                            size: "slim",
+                                            onClick: clearEventLog,
+                                            children: "Clear Log"
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsx("div", {
+                                    style: {
+                                        maxHeight: "200px",
+                                        overflowY: "auto",
+                                        backgroundColor: "#000",
+                                        color: "#00ff00",
+                                        padding: "0.5rem",
+                                        borderRadius: "4px",
+                                        fontFamily: "monospace",
+                                        fontSize: "0.8rem"
+                                    },
+                                    children: eventLog.length > 0 ? eventLog.map(function(event, index) {
+                                        return /*#__PURE__*/ _jsx("div", {
+                                            children: event
+                                        }, index);
+                                    }) : /*#__PURE__*/ _jsx("div", {
+                                        style: {
+                                            color: "#666"
+                                        },
+                                        children: "No events logged yet..."
+                                    })
+                                })
+                            ]
+                        })
+                    })
+                ]
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "Demonstrates event handling and logging capabilities of PopoverManager."
+            }
+        }
+    }
+};