pne-ui 3.0.29 → 3.0.31

package/README.md

@@ -279,6 +279,87 @@ export const Dashboard = () => (
 `WidgetBoard` сам обновляет выбранный лейаут, следит за состоянием виджетов и при изменениях дергает `saveLayouts`
 с актуальным набором опций.
 
+## OverlayHost и уведомления
+
+`OverlayHost` рендерит snackbars из `overlayActions` и принимает декларативные постоянные оверлеи через `PermanentOverlay`
+(по одному на слот: `top-left/top-right/bottom-left/bottom-right`).
+```tsx
+import React from 'react'
+import { OverlayHost, PermanentOverlay, PneFloatingActionButtons, overlayActions } from 'pne-ui'
+
+const AppShell = () => (
+    <OverlayHost>
+        <PermanentOverlay
+            id='page-fab'
+            slot='bottom-right'
+            render={() => (
+                <PneFloatingActionButtons
+                    actions={[
+                        {
+                            id: 'save',
+                            label: 'Save',
+                            onClick: () => overlayActions.showSuccess({ message: 'Saved!' }),
+                        },
+                        { id: 'divider', kind: 'divider' },
+                        {
+                            id: 'info',
+                            label: 'Info',
+                            onClick: () => overlayActions.showInfo({ message: 'Something happened' }),
+                        },
+                    ]}
+                />
+            )}
+        />
+        {/* ваш layout, роутер, модалки и т.д. */}
+    </OverlayHost>
+)
+```
+
+- Для уведомлений используйте `overlayActions.showSuccess/showError/showWarning/showInfo` или `showSnackbar`.
+- `PermanentOverlay` можно размещать на любом уровне дерева под хостом; последний зарегистрированный в слоте заменяет предыдущий.
+- Слоты фиксированы четырьмя углами; сместить позицию можно через `offset`/`zIndex` пропы на `PermanentOverlay`.
+
+## PneFloatingActionButtons
+
+Плавающее меню действий: на десктопе показывает стек FAB над триггером и параллельно меню, на мобильных все пункты уходят
+в меню. Поддерживает экшены, произвольные блоки контента и разделители. По умолчанию мобильным считается ширина `<= 800px`
+(`mobileBreakpoint`), на десктопе action-кнопки остаются доступны и в меню, и в стеке.
+
+Ключевые пропы:
+- `actions: PneFabItem[]` — массив элементов: action `{ id, label, onClick, icon?, disabled?, tooltip? }`,
+  divider `{ kind: 'divider' }`, content `{ kind: 'content', node }`.
+- `mobileBreakpoint` (default `800`) — ширина, ниже которой показываем только меню.
+- `position` (`{ bottom?: number; right?: number }`) — смещение от края.
+- `fabLabel`/`fabIcon` — подпись и иконка триггера.
+- `bannerText` — необязательный блок внизу меню.
+
+Минимальный пример:
+
+```tsx
+import { PneFloatingActionButtons, overlayActions } from 'pne-ui'
+
+const actions = [
+    { id: 'reset', label: 'Reset layout', onClick: () => overlayActions.showInfo({ message: 'Reset' }) },
+    { id: 'save', label: 'Save', onClick: () => overlayActions.showSuccess({ message: 'Saved' }) },
+    { id: 'divider', kind: 'divider' as const },
+    { id: 'custom', kind: 'content' as const, node: <div style={{ padding: 8 }}>Any JSX here</div> },
+]
+
+export const FabDemo = () => (
+    <PneFloatingActionButtons
+        actions={actions}
+        fabLabel='Actions'
+        bannerText='Edit widgets'
+        position={{ bottom: 24, right: 24 }}
+        mobileBreakpoint={900} // считать мобильным до 900px, иначе поведение как на десктопе
+    />
+)
+```
+
+Поведение по размерам:
+- Ширина > `mobileBreakpoint`: стек FAB над триггером + меню (все action-пункты дублируются в меню).
+- Ширина <= `mobileBreakpoint`: только триггер + меню, стек FAB скрыт.
+
 [npm-url]: https://www.npmjs.com/package/pne-ui
 
 [npm-image]: https://img.shields.io/npm/v/pne-ui

package/cjs/component/overlay/OverlayHost.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { type SnackbarOrigin } from '@mui/material';
+type OverlayHostProps = {
+    anchorOrigin?: SnackbarOrigin;
+    maxSnack?: number;
+    children?: React.ReactNode;
+};
+/**
+ * Renders overlay elements (currently snackbars) driven by the shared overlay store.
+ * Mount this once near the root of the app and trigger notifications via `overlayActions`.
+ * Permanent overlays are registered declaratively via `<PermanentOverlay />` components.
+ */
+export declare function OverlayHost({ anchorOrigin, maxSnack, children, }: OverlayHostProps): React.JSX.Element;
+export default OverlayHost;

package/cjs/component/overlay/OverlayHost.js

@@ -0,0 +1,120 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OverlayHost = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const material_1 = require("@mui/material");
+const useBreakpoint_1 = require("../responsive/useBreakpoint");
+const overlayStore_1 = require("./overlayStore");
+const material_2 = require("@mui/material");
+const PermanentOverlayContext_1 = require("./PermanentOverlayContext");
+const STACK_GAP = 12;
+const STACK_OFFSET = 24;
+const PERMANENT_OFFSET = 24;
+/**
+ * Renders overlay elements (currently snackbars) driven by the shared overlay store.
+ * Mount this once near the root of the app and trigger notifications via `overlayActions`.
+ * Permanent overlays are registered declaratively via `<PermanentOverlay />` components.
+ */
+function OverlayHost({ anchorOrigin = { vertical: 'bottom', horizontal: 'left' }, maxSnack = 10, children, }) {
+    const snackbars = (0, overlayStore_1.useOverlayStore)(state => state.snackbars);
+    const removeSnackbar = (0, overlayStore_1.useOverlayStore)(state => state.removeSnackbar);
+    const breakpoint = (0, useBreakpoint_1.useBreakpoint)();
+    const [permanentOverlays, setPermanentOverlays] = (0, react_1.useState)(() => new Map());
+    const registerPermanentOverlay = (0, react_1.useCallback)((overlay) => {
+        setPermanentOverlays(prev => {
+            const next = new Map(prev);
+            next.set(overlay.slot, overlay);
+            return next;
+        });
+    }, []);
+    const unregisterPermanentOverlay = (0, react_1.useCallback)((id, slot) => {
+        setPermanentOverlays(prev => {
+            const next = new Map(prev);
+            if (slot) {
+                const current = next.get(slot);
+                if (current?.id === id)
+                    next.delete(slot);
+            }
+            else {
+                for (const [key, value] of next.entries()) {
+                    if (value.id === id)
+                        next.delete(key);
+                }
+            }
+            return next;
+        });
+    }, []);
+    const contextValue = (0, react_1.useMemo)(() => ({ register: registerPermanentOverlay, unregister: unregisterPermanentOverlay }), [registerPermanentOverlay, unregisterPermanentOverlay]);
+    const visibleSnackbars = (0, react_1.useMemo)(() => {
+        if (typeof maxSnack === 'number' && maxSnack > 0 && snackbars.length > maxSnack) {
+            return snackbars.slice(snackbars.length - maxSnack);
+        }
+        return snackbars;
+    }, [maxSnack, snackbars]);
+    const groupedSnackbars = (0, react_1.useMemo)(() => {
+        const groups = [];
+        const map = new Map();
+        visibleSnackbars.forEach(snack => {
+            const anchor = snack.anchorOrigin ?? anchorOrigin;
+            const key = `${anchor.vertical}-${anchor.horizontal}`;
+            if (!map.has(key)) {
+                const group = { anchor, items: [] };
+                map.set(key, group);
+                groups.push(group);
+            }
+            map.get(key).items.push(snack);
+        });
+        return groups;
+    }, [anchorOrigin, visibleSnackbars]);
+    const permanentContent = (0, react_1.useMemo)(() => {
+        const entries = Array.from(permanentOverlays.values());
+        return entries
+            .map(entry => {
+            const content = entry.render({ breakpoint });
+            if (!content)
+                return null;
+            const offset = entry.offset ?? PERMANENT_OFFSET;
+            const vertical = entry.slot.startsWith('top') ? 'top' : 'bottom';
+            const horizontal = entry.slot.endsWith('left') ? 'left' : 'right';
+            return (react_1.default.createElement(material_2.Box, { key: entry.slot, sx: {
+                    position: 'fixed',
+                    zIndex: entry.zIndex ?? 1300,
+                    [vertical]: offset,
+                    [horizontal]: offset,
+                } }, content));
+        })
+            .filter(Boolean);
+    }, [breakpoint, permanentOverlays]);
+    return (react_1.default.createElement(PermanentOverlayContext_1.PermanentOverlayContext.Provider, { value: contextValue },
+        children,
+        groupedSnackbars.map(group => {
+            const { anchor, items } = group;
+            const horizontalStyles = anchor.horizontal === 'left'
+                ? { left: STACK_OFFSET, right: 'auto', transform: 'none' }
+                : anchor.horizontal === 'right'
+                    ? { right: STACK_OFFSET, left: 'auto', transform: 'none' }
+                    : { left: '50%', transform: 'translateX(-50%)' };
+            const verticalStyles = anchor.vertical === 'top'
+                ? { top: STACK_OFFSET, bottom: 'auto', flexDirection: 'column-reverse' }
+                : { bottom: STACK_OFFSET, top: 'auto', flexDirection: 'column-reverse' };
+            return (react_1.default.createElement(material_2.Box, { key: `${anchor.vertical}-${anchor.horizontal}`, sx: {
+                    position: 'fixed',
+                    zIndex: 1400,
+                    display: 'flex',
+                    gap: `${STACK_GAP}px`,
+                    pointerEvents: 'none',
+                    ...horizontalStyles,
+                    ...verticalStyles,
+                } }, items.map(snack => (react_1.default.createElement(material_1.Snackbar, { key: snack.id, open: true, anchorOrigin: anchor, autoHideDuration: snack.autoHideMs, onClose: (_event, reason) => {
+                    if (reason === 'clickaway')
+                        return;
+                    snack.id && removeSnackbar(snack.id);
+                }, sx: { position: 'static', transform: 'none', pointerEvents: 'auto', minWidth: 288 } },
+                react_1.default.createElement(material_1.Alert, { elevation: 1, onClose: () => snack.id && removeSnackbar(snack.id), severity: snack.variant ?? 'info', action: snack.action, sx: { alignItems: 'center' } }, snack.message))))));
+        }),
+        permanentContent));
+}
+exports.OverlayHost = OverlayHost;
+exports.default = OverlayHost;
+//# sourceMappingURL=OverlayHost.js.map

package/cjs/component/overlay/OverlayHost.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverlayHost.js","sourceRoot":"","sources":["../../../src/component/overlay/OverlayHost.tsx"],"names":[],"mappings":"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"}

package/cjs/component/overlay/PermanentOverlay.d.ts

@@ -0,0 +1,14 @@
+import type { PermanentOverlayRender, PermanentOverlaySlot } from './types';
+type PermanentOverlayProps = {
+    id: string;
+    slot?: PermanentOverlaySlot;
+    render: PermanentOverlayRender;
+    offset?: number;
+    zIndex?: number;
+};
+/**
+ * Declaratively registers a permanent overlay with the nearest `<OverlayHost />` in the tree.
+ * Only one overlay per slot is kept; the latest registered wins.
+ */
+export declare function PermanentOverlay({ id, slot, render, offset, zIndex }: PermanentOverlayProps): null;
+export default PermanentOverlay;

package/cjs/component/overlay/PermanentOverlay.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PermanentOverlay = void 0;
+const react_1 = require("react");
+const PermanentOverlayContext_1 = require("./PermanentOverlayContext");
+const DEFAULT_SLOT = 'bottom-right';
+/**
+ * Declaratively registers a permanent overlay with the nearest `<OverlayHost />` in the tree.
+ * Only one overlay per slot is kept; the latest registered wins.
+ */
+function PermanentOverlay({ id, slot = DEFAULT_SLOT, render, offset, zIndex }) {
+    const ctx = (0, react_1.useContext)(PermanentOverlayContext_1.PermanentOverlayContext);
+    const renderRef = (0, react_1.useRef)(render);
+    (0, react_1.useEffect)(() => {
+        renderRef.current = render;
+    }, [render]);
+    (0, react_1.useEffect)(() => {
+        if (!ctx)
+            return;
+        ctx.register({
+            id,
+            slot,
+            offset,
+            zIndex,
+            render: context => renderRef.current(context),
+        });
+        return () => ctx.unregister(id, slot);
+    }, [ctx, id, slot, offset, zIndex]);
+    return null;
+}
+exports.PermanentOverlay = PermanentOverlay;
+exports.default = PermanentOverlay;
+//# sourceMappingURL=PermanentOverlay.js.map

package/cjs/component/overlay/PermanentOverlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PermanentOverlay.js","sourceRoot":"","sources":["../../../src/component/overlay/PermanentOverlay.tsx"],"names":[],"mappings":";;;AAAA,iCAAqD;AACrD,uEAAmE;AAGnE,MAAM,YAAY,GAAyB,cAAc,CAAA;AAUzD;;;GAGG;AACH,SAAgB,gBAAgB,CAAC,EAAE,EAAE,EAAE,IAAI,GAAG,YAAY,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAyB;IACvG,MAAM,GAAG,GAAG,IAAA,kBAAU,EAAC,iDAAuB,CAAC,CAAA;IAC/C,MAAM,SAAS,GAAG,IAAA,cAAM,EAAC,MAAM,CAAC,CAAA;IAEhC,IAAA,iBAAS,EAAC,GAAG,EAAE;QACX,SAAS,CAAC,OAAO,GAAG,MAAM,CAAA;IAC9B,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAA;IAEZ,IAAA,iBAAS,EAAC,GAAG,EAAE;QACX,IAAI,CAAC,GAAG;YAAE,OAAM;QAChB,GAAG,CAAC,QAAQ,CAAC;YACT,EAAE;YACF,IAAI;YACJ,MAAM;YACN,MAAM;YACN,MAAM,EAAE,OAAO,CAAC,EAAE,CAAC,SAAS,CAAC,OAAO,CAAC,OAAO,CAAC;SAChD,CAAC,CAAA;QACF,OAAO,GAAG,EAAE,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE,EAAE,IAAI,CAAC,CAAA;IACzC,CAAC,EAAE,CAAC,GAAG,EAAE,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC,CAAA;IAEnC,OAAO,IAAI,CAAA;AACf,CAAC;AArBD,4CAqBC;AAED,kBAAe,gBAAgB,CAAA"}

package/cjs/component/overlay/PermanentOverlayContext.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import type { PermanentOverlayInstance, PermanentOverlaySlot } from './types';
+export type PermanentOverlayContextValue = {
+    register: (overlay: PermanentOverlayInstance) => void;
+    unregister: (id: string, slot?: PermanentOverlaySlot) => void;
+};
+export declare const PermanentOverlayContext: import("react").Context<PermanentOverlayContextValue | null>;

package/cjs/component/overlay/PermanentOverlayContext.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PermanentOverlayContext = void 0;
+const react_1 = require("react");
+exports.PermanentOverlayContext = (0, react_1.createContext)(null);
+//# sourceMappingURL=PermanentOverlayContext.js.map

package/cjs/component/overlay/PermanentOverlayContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PermanentOverlayContext.js","sourceRoot":"","sources":["../../../src/component/overlay/PermanentOverlayContext.ts"],"names":[],"mappings":";;;AAAA,iCAAqC;AAQxB,QAAA,uBAAuB,GAAG,IAAA,qBAAa,EAAsC,IAAI,CAAC,CAAA"}

package/cjs/component/overlay/types.d.ts

@@ -18,9 +18,11 @@ export type OverlayState = {
 export type PermanentOverlayRender = (context: {
     breakpoint: number;
 }) => React.ReactNode;
-export type PermanentPosition = {
-    vertical?: 'top' | 'bottom';
-    horizontal?: 'left' | 'right';
+export type PermanentOverlaySlot = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+export type PermanentOverlayInstance = {
+    id: string;
+    slot: PermanentOverlaySlot;
+    render: PermanentOverlayRender;
     offset?: number;
     zIndex?: number;
 };

package/cjs/exports/overlay.d.ts

@@ -1,3 +1,4 @@
-export { PneOverlayHost } from '../component/overlay/PneOverlayHost';
+export { OverlayHost } from '../component/overlay/OverlayHost';
+export { PermanentOverlay } from '../component/overlay/PermanentOverlay';
 export { useOverlayStore, overlayActions } from '../component/overlay/overlayStore';
 export * from '../component/overlay/types';

package/cjs/exports/overlay.js

@@ -1,9 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.overlayActions = exports.useOverlayStore = exports.PneOverlayHost = void 0;
+exports.overlayActions = exports.useOverlayStore = exports.PermanentOverlay = exports.OverlayHost = void 0;
 const tslib_1 = require("tslib");
-var PneOverlayHost_1 = require("../component/overlay/PneOverlayHost");
-Object.defineProperty(exports, "PneOverlayHost", { enumerable: true, get: function () { return PneOverlayHost_1.PneOverlayHost; } });
+var OverlayHost_1 = require("../component/overlay/OverlayHost");
+Object.defineProperty(exports, "OverlayHost", { enumerable: true, get: function () { return OverlayHost_1.OverlayHost; } });
+var PermanentOverlay_1 = require("../component/overlay/PermanentOverlay");
+Object.defineProperty(exports, "PermanentOverlay", { enumerable: true, get: function () { return PermanentOverlay_1.PermanentOverlay; } });
 var overlayStore_1 = require("../component/overlay/overlayStore");
 Object.defineProperty(exports, "useOverlayStore", { enumerable: true, get: function () { return overlayStore_1.useOverlayStore; } });
 Object.defineProperty(exports, "overlayActions", { enumerable: true, get: function () { return overlayStore_1.overlayActions; } });

package/cjs/exports/overlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"overlay.js","sourceRoot":"","sources":["../../src/exports/overlay.ts"],"names":[],"mappings":";;;;AAAA,sEAAoE;AAA3D,gHAAA,cAAc,OAAA;AACvB,kEAAmF;AAA1E,+GAAA,eAAe,OAAA;AAAE,8GAAA,cAAc,OAAA;AACxC,qEAA0C"}
+{"version":3,"file":"overlay.js","sourceRoot":"","sources":["../../src/exports/overlay.ts"],"names":[],"mappings":";;;;AAAA,gEAA8D;AAArD,0GAAA,WAAW,OAAA;AACpB,0EAAwE;AAA/D,oHAAA,gBAAgB,OAAA;AACzB,kEAAmF;AAA1E,+GAAA,eAAe,OAAA;AAAE,8GAAA,cAAc,OAAA;AACxC,qEAA0C"}

package/esm/component/overlay/OverlayHost.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { type SnackbarOrigin } from '@mui/material';
+type OverlayHostProps = {
+    anchorOrigin?: SnackbarOrigin;
+    maxSnack?: number;
+    children?: React.ReactNode;
+};
+/**
+ * Renders overlay elements (currently snackbars) driven by the shared overlay store.
+ * Mount this once near the root of the app and trigger notifications via `overlayActions`.
+ * Permanent overlays are registered declaratively via `<PermanentOverlay />` components.
+ */
+export declare function OverlayHost({ anchorOrigin, maxSnack, children, }: OverlayHostProps): React.JSX.Element;
+export default OverlayHost;

package/esm/component/overlay/OverlayHost.js

@@ -0,0 +1,115 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import { Alert, Snackbar } from '@mui/material';
+import { useBreakpoint } from '../responsive/useBreakpoint';
+import { useOverlayStore } from './overlayStore';
+import { Box } from '@mui/material';
+import { PermanentOverlayContext } from './PermanentOverlayContext';
+const STACK_GAP = 12;
+const STACK_OFFSET = 24;
+const PERMANENT_OFFSET = 24;
+/**
+ * Renders overlay elements (currently snackbars) driven by the shared overlay store.
+ * Mount this once near the root of the app and trigger notifications via `overlayActions`.
+ * Permanent overlays are registered declaratively via `<PermanentOverlay />` components.
+ */
+export function OverlayHost({ anchorOrigin = { vertical: 'bottom', horizontal: 'left' }, maxSnack = 10, children, }) {
+    const snackbars = useOverlayStore(state => state.snackbars);
+    const removeSnackbar = useOverlayStore(state => state.removeSnackbar);
+    const breakpoint = useBreakpoint();
+    const [permanentOverlays, setPermanentOverlays] = useState(() => new Map());
+    const registerPermanentOverlay = useCallback((overlay) => {
+        setPermanentOverlays(prev => {
+            const next = new Map(prev);
+            next.set(overlay.slot, overlay);
+            return next;
+        });
+    }, []);
+    const unregisterPermanentOverlay = useCallback((id, slot) => {
+        setPermanentOverlays(prev => {
+            const next = new Map(prev);
+            if (slot) {
+                const current = next.get(slot);
+                if (current?.id === id)
+                    next.delete(slot);
+            }
+            else {
+                for (const [key, value] of next.entries()) {
+                    if (value.id === id)
+                        next.delete(key);
+                }
+            }
+            return next;
+        });
+    }, []);
+    const contextValue = useMemo(() => ({ register: registerPermanentOverlay, unregister: unregisterPermanentOverlay }), [registerPermanentOverlay, unregisterPermanentOverlay]);
+    const visibleSnackbars = useMemo(() => {
+        if (typeof maxSnack === 'number' && maxSnack > 0 && snackbars.length > maxSnack) {
+            return snackbars.slice(snackbars.length - maxSnack);
+        }
+        return snackbars;
+    }, [maxSnack, snackbars]);
+    const groupedSnackbars = useMemo(() => {
+        const groups = [];
+        const map = new Map();
+        visibleSnackbars.forEach(snack => {
+            const anchor = snack.anchorOrigin ?? anchorOrigin;
+            const key = `${anchor.vertical}-${anchor.horizontal}`;
+            if (!map.has(key)) {
+                const group = { anchor, items: [] };
+                map.set(key, group);
+                groups.push(group);
+            }
+            map.get(key).items.push(snack);
+        });
+        return groups;
+    }, [anchorOrigin, visibleSnackbars]);
+    const permanentContent = useMemo(() => {
+        const entries = Array.from(permanentOverlays.values());
+        return entries
+            .map(entry => {
+            const content = entry.render({ breakpoint });
+            if (!content)
+                return null;
+            const offset = entry.offset ?? PERMANENT_OFFSET;
+            const vertical = entry.slot.startsWith('top') ? 'top' : 'bottom';
+            const horizontal = entry.slot.endsWith('left') ? 'left' : 'right';
+            return (React.createElement(Box, { key: entry.slot, sx: {
+                    position: 'fixed',
+                    zIndex: entry.zIndex ?? 1300,
+                    [vertical]: offset,
+                    [horizontal]: offset,
+                } }, content));
+        })
+            .filter(Boolean);
+    }, [breakpoint, permanentOverlays]);
+    return (React.createElement(PermanentOverlayContext.Provider, { value: contextValue },
+        children,
+        groupedSnackbars.map(group => {
+            const { anchor, items } = group;
+            const horizontalStyles = anchor.horizontal === 'left'
+                ? { left: STACK_OFFSET, right: 'auto', transform: 'none' }
+                : anchor.horizontal === 'right'
+                    ? { right: STACK_OFFSET, left: 'auto', transform: 'none' }
+                    : { left: '50%', transform: 'translateX(-50%)' };
+            const verticalStyles = anchor.vertical === 'top'
+                ? { top: STACK_OFFSET, bottom: 'auto', flexDirection: 'column-reverse' }
+                : { bottom: STACK_OFFSET, top: 'auto', flexDirection: 'column-reverse' };
+            return (React.createElement(Box, { key: `${anchor.vertical}-${anchor.horizontal}`, sx: {
+                    position: 'fixed',
+                    zIndex: 1400,
+                    display: 'flex',
+                    gap: `${STACK_GAP}px`,
+                    pointerEvents: 'none',
+                    ...horizontalStyles,
+                    ...verticalStyles,
+                } }, items.map(snack => (React.createElement(Snackbar, { key: snack.id, open: true, anchorOrigin: anchor, autoHideDuration: snack.autoHideMs, onClose: (_event, reason) => {
+                    if (reason === 'clickaway')
+                        return;
+                    snack.id && removeSnackbar(snack.id);
+                }, sx: { position: 'static', transform: 'none', pointerEvents: 'auto', minWidth: 288 } },
+                React.createElement(Alert, { elevation: 1, onClose: () => snack.id && removeSnackbar(snack.id), severity: snack.variant ?? 'info', action: snack.action, sx: { alignItems: 'center' } }, snack.message))))));
+        }),
+        permanentContent));
+}
+export default OverlayHost;
+//# sourceMappingURL=OverlayHost.js.map

package/esm/component/overlay/OverlayHost.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverlayHost.js","sourceRoot":"","sources":["../../../src/component/overlay/OverlayHost.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAC7D,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAuB,MAAM,eAAe,CAAA;AACpE,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAA;AAC3D,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAA;AAEhD,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAA;AACnC,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAA;AAQnE,MAAM,SAAS,GAAG,EAAE,CAAA;AACpB,MAAM,YAAY,GAAG,EAAE,CAAA;AACvB,MAAM,gBAAgB,GAAG,EAAE,CAAA;AAE3B;;;;GAIG;AACH,MAAM,UAAU,WAAW,CAAC,EACxB,YAAY,GAAG,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,EAAE,EACzD,QAAQ,GAAG,EAAE,EACb,QAAQ,GACO;IACf,MAAM,SAAS,GAAG,eAAe,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,CAAA;IAC3D,MAAM,cAAc,GAAG,eAAe,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,cAAc,CAAC,CAAA;IACrE,MAAM,UAAU,GAAG,aAAa,EAAE,CAAA;IAElC,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CACtD,GAAG,EAAE,CAAC,IAAI,GAAG,EAAE,CAClB,CAAA;IAED,MAAM,wBAAwB,GAAG,WAAW,CAAC,CAAC,OAAiC,EAAE,EAAE;QAC/E,oBAAoB,CAAC,IAAI,CAAC,EAAE;YACxB,MAAM,IAAI,GAAG,IAAI,GAAG,CAAC,IAAI,CAAC,CAAA;YAC1B,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC,CAAA;YAC/B,OAAO,IAAI,CAAA;QACf,CAAC,CAAC,CAAA;IACN,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,MAAM,0BAA0B,GAAG,WAAW,CAAC,CAAC,EAAU,EAAE,IAA2B,EAAE,EAAE;QACvF,oBAAoB,CAAC,IAAI,CAAC,EAAE;YACxB,MAAM,IAAI,GAAG,IAAI,GAAG,CAAC,IAAI,CAAC,CAAA;YAC1B,IAAI,IAAI,EAAE,CAAC;gBACP,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,CAAA;gBAC9B,IAAI,OAAO,EAAE,EAAE,KAAK,EAAE;oBAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAA;YAC7C,CAAC;iBAAM,CAAC;gBACJ,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,IAAI,CAAC,OAAO,EAAE,EAAE,CAAC;oBACxC,IAAI,KAAK,CAAC,EAAE,KAAK,EAAE;wBAAE,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA;gBACzC,CAAC;YACL,CAAC;YACD,OAAO,IAAI,CAAA;QACf,CAAC,CAAC,CAAA;IACN,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,MAAM,YAAY,GAAG,OAAO,CACxB,GAAG,EAAE,CAAC,CAAC,EAAE,QAAQ,EAAE,wBAAwB,EAAE,UAAU,EAAE,0BAA0B,EAAE,CAAC,EACtF,CAAC,wBAAwB,EAAE,0BAA0B,CAAC,CACzD,CAAA;IAED,MAAM,gBAAgB,GAAG,OAAO,CAAC,GAAG,EAAE;QAClC,IAAI,OAAO,QAAQ,KAAK,QAAQ,IAAI,QAAQ,GAAG,CAAC,IAAI,SAAS,CAAC,MAAM,GAAG,QAAQ,EAAE,CAAC;YAC9E,OAAO,SAAS,CAAC,KAAK,CAAC,SAAS,CAAC,MAAM,GAAG,QAAQ,CAAC,CAAA;QACvD,CAAC;QACD,OAAO,SAAS,CAAA;IACpB,CAAC,EAAE,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC,CAAA;IAEzB,MAAM,gBAAgB,GAAG,OAAO,CAAC,GAAG,EAAE;QAClC,MAAM,MAAM,GAAsE,EAAE,CAAA;QACpF,MAAM,GAAG,GAAG,IAAI,GAAG,EAAsE,CAAA;QACzF,gBAAgB,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;YAC7B,MAAM,MAAM,GAAG,KAAK,CAAC,YAAY,IAAI,YAAY,CAAA;YACjD,MAAM,GAAG,GAAG,GAAG,MAAM,CAAC,QAAQ,IAAI,MAAM,CAAC,UAAU,EAAE,CAAA;YACrD,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC;gBAChB,MAAM,KAAK,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,EAA6B,EAAE,CAAA;gBAC9D,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,KAAK,CAAC,CAAA;gBACnB,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;YACtB,CAAC;YACD,GAAG,CAAC,GAAG,CAAC,GAAG,CAAE,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;QACnC,CAAC,CAAC,CAAA;QACF,OAAO,MAAM,CAAA;IACjB,CAAC,EAAE,CAAC,YAAY,EAAE,gBAAgB,CAAC,CAAC,CAAA;IAEpC,MAAM,gBAAgB,GAAG,OAAO,CAAC,GAAG,EAAE;QAClC,MAAM,OAAO,GAAG,KAAK,CAAC,IAAI,CAAC,iBAAiB,CAAC,MAAM,EAAE,CAAC,CAAA;QACtD,OAAO,OAAO;aACT,GAAG,CAAC,KAAK,CAAC,EAAE;YACT,MAAM,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,EAAE,UAAU,EAAE,CAAC,CAAA;YAC5C,IAAI,CAAC,OAAO;gBAAE,OAAO,IAAI,CAAA;YACzB,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,IAAI,gBAAgB,CAAA;YAC/C,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAA;YAChE,MAAM,UAAU,GAAG,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAA;YACjE,OAAO,CACH,oBAAC,GAAG,IACA,GAAG,EAAE,KAAK,CAAC,IAAI,EACf,EAAE,EAAE;oBACA,QAAQ,EAAE,OAAO;oBACjB,MAAM,EAAE,KAAK,CAAC,MAAM,IAAI,IAAI;oBAC5B,CAAC,QAAQ,CAAC,EAAE,MAAM;oBAClB,CAAC,UAAU,CAAC,EAAE,MAAM;iBACvB,IAEA,OAAO,CACN,CACT,CAAA;QACL,CAAC,CAAC;aACD,MAAM,CAAC,OAAO,CAAC,CAAA;IACxB,CAAC,EAAE,CAAC,UAAU,EAAE,iBAAiB,CAAC,CAAC,CAAA;IAEnC,OAAO,CACH,oBAAC,uBAAuB,CAAC,QAAQ,IAAC,KAAK,EAAE,YAAY;QAChD,QAAQ;QACR,gBAAgB,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;YAC1B,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,CAAA;YAC/B,MAAM,gBAAgB,GAClB,MAAM,CAAC,UAAU,KAAK,MAAM;gBACxB,CAAC,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE;gBAC1D,CAAC,CAAC,MAAM,CAAC,UAAU,KAAK,OAAO;oBAC3B,CAAC,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE;oBAC1D,CAAC,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAAA;YAE5D,MAAM,cAAc,GAChB,MAAM,CAAC,QAAQ,KAAK,KAAK;gBACrB,CAAC,CAAC,EAAE,GAAG,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,EAAE,aAAa,EAAE,gBAAyB,EAAE;gBACjF,CAAC,CAAC,EAAE,MAAM,EAAE,YAAY,EAAE,GAAG,EAAE,MAAM,EAAE,aAAa,EAAE,gBAAyB,EAAE,CAAA;YAEzF,OAAO,CACH,oBAAC,GAAG,IACA,GAAG,EAAE,GAAG,MAAM,CAAC,QAAQ,IAAI,MAAM,CAAC,UAAU,EAAE,EAC9C,EAAE,EAAE;oBACA,QAAQ,EAAE,OAAO;oBACjB,MAAM,EAAE,IAAI;oBACZ,OAAO,EAAE,MAAM;oBACf,GAAG,EAAE,GAAG,SAAS,IAAI;oBACrB,aAAa,EAAE,MAAM;oBACrB,GAAG,gBAAgB;oBACnB,GAAG,cAAc;iBACpB,IAEA,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,CAChB,oBAAC,QAAQ,IACL,GAAG,EAAE,KAAK,CAAC,EAAE,EACb,IAAI,QACJ,YAAY,EAAE,MAAM,EACpB,gBAAgB,EAAE,KAAK,CAAC,UAAU,EAClC,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,EAAE;oBACxB,IAAI,MAAM,KAAK,WAAW;wBAAE,OAAM;oBAClC,KAAK,CAAC,EAAE,IAAI,cAAc,CAAC,KAAK,CAAC,EAAE,CAAC,CAAA;gBACxC,CAAC,EACD,EAAE,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,EAAE;gBAEnF,oBAAC,KAAK,IACF,SAAS,EAAE,CAAC,EACZ,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,EAAE,IAAI,cAAc,CAAC,KAAK,CAAC,EAAE,CAAC,EACnD,QAAQ,EAAE,KAAK,CAAC,OAAO,IAAI,MAAM,EACjC,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,EAAE,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,IAE3B,KAAK,CAAC,OAAO,CACV,CACD,CACd,CAAC,CACA,CACT,CAAA;QACL,CAAC,CAAC;QACD,gBAAgB,CACc,CACtC,CAAA;AACL,CAAC;AAED,eAAe,WAAW,CAAA"}

package/esm/component/overlay/PermanentOverlay.d.ts

@@ -0,0 +1,14 @@
+import type { PermanentOverlayRender, PermanentOverlaySlot } from './types';
+type PermanentOverlayProps = {
+    id: string;
+    slot?: PermanentOverlaySlot;
+    render: PermanentOverlayRender;
+    offset?: number;
+    zIndex?: number;
+};
+/**
+ * Declaratively registers a permanent overlay with the nearest `<OverlayHost />` in the tree.
+ * Only one overlay per slot is kept; the latest registered wins.
+ */
+export declare function PermanentOverlay({ id, slot, render, offset, zIndex }: PermanentOverlayProps): null;
+export default PermanentOverlay;

package/esm/component/overlay/PermanentOverlay.js

@@ -0,0 +1,29 @@
+import { useContext, useEffect, useRef } from 'react';
+import { PermanentOverlayContext } from './PermanentOverlayContext';
+const DEFAULT_SLOT = 'bottom-right';
+/**
+ * Declaratively registers a permanent overlay with the nearest `<OverlayHost />` in the tree.
+ * Only one overlay per slot is kept; the latest registered wins.
+ */
+export function PermanentOverlay({ id, slot = DEFAULT_SLOT, render, offset, zIndex }) {
+    const ctx = useContext(PermanentOverlayContext);
+    const renderRef = useRef(render);
+    useEffect(() => {
+        renderRef.current = render;
+    }, [render]);
+    useEffect(() => {
+        if (!ctx)
+            return;
+        ctx.register({
+            id,
+            slot,
+            offset,
+            zIndex,
+            render: context => renderRef.current(context),
+        });
+        return () => ctx.unregister(id, slot);
+    }, [ctx, id, slot, offset, zIndex]);
+    return null;
+}
+export default PermanentOverlay;
+//# sourceMappingURL=PermanentOverlay.js.map

package/esm/component/overlay/PermanentOverlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PermanentOverlay.js","sourceRoot":"","sources":["../../../src/component/overlay/PermanentOverlay.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AACrD,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAA;AAGnE,MAAM,YAAY,GAAyB,cAAc,CAAA;AAUzD;;;GAGG;AACH,MAAM,UAAU,gBAAgB,CAAC,EAAE,EAAE,EAAE,IAAI,GAAG,YAAY,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAyB;IACvG,MAAM,GAAG,GAAG,UAAU,CAAC,uBAAuB,CAAC,CAAA;IAC/C,MAAM,SAAS,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA;IAEhC,SAAS,CAAC,GAAG,EAAE;QACX,SAAS,CAAC,OAAO,GAAG,MAAM,CAAA;IAC9B,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAA;IAEZ,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,CAAC,GAAG;YAAE,OAAM;QAChB,GAAG,CAAC,QAAQ,CAAC;YACT,EAAE;YACF,IAAI;YACJ,MAAM;YACN,MAAM;YACN,MAAM,EAAE,OAAO,CAAC,EAAE,CAAC,SAAS,CAAC,OAAO,CAAC,OAAO,CAAC;SAChD,CAAC,CAAA;QACF,OAAO,GAAG,EAAE,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE,EAAE,IAAI,CAAC,CAAA;IACzC,CAAC,EAAE,CAAC,GAAG,EAAE,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC,CAAA;IAEnC,OAAO,IAAI,CAAA;AACf,CAAC;AAED,eAAe,gBAAgB,CAAA"}

package/esm/component/overlay/PermanentOverlayContext.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import type { PermanentOverlayInstance, PermanentOverlaySlot } from './types';
+export type PermanentOverlayContextValue = {
+    register: (overlay: PermanentOverlayInstance) => void;
+    unregister: (id: string, slot?: PermanentOverlaySlot) => void;
+};
+export declare const PermanentOverlayContext: import("react").Context<PermanentOverlayContextValue | null>;

package/esm/component/overlay/PermanentOverlayContext.js

@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+export const PermanentOverlayContext = createContext(null);
+//# sourceMappingURL=PermanentOverlayContext.js.map

package/esm/component/overlay/PermanentOverlayContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PermanentOverlayContext.js","sourceRoot":"","sources":["../../../src/component/overlay/PermanentOverlayContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAQrC,MAAM,CAAC,MAAM,uBAAuB,GAAG,aAAa,CAAsC,IAAI,CAAC,CAAA"}

package/esm/component/overlay/types.d.ts

@@ -18,9 +18,11 @@ export type OverlayState = {
 export type PermanentOverlayRender = (context: {
     breakpoint: number;
 }) => React.ReactNode;
-export type PermanentPosition = {
-    vertical?: 'top' | 'bottom';
-    horizontal?: 'left' | 'right';
+export type PermanentOverlaySlot = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+export type PermanentOverlayInstance = {
+    id: string;
+    slot: PermanentOverlaySlot;
+    render: PermanentOverlayRender;
     offset?: number;
     zIndex?: number;
 };

package/esm/exports/overlay.d.ts

@@ -1,3 +1,4 @@
-export { PneOverlayHost } from '../component/overlay/PneOverlayHost';
+export { OverlayHost } from '../component/overlay/OverlayHost';
+export { PermanentOverlay } from '../component/overlay/PermanentOverlay';
 export { useOverlayStore, overlayActions } from '../component/overlay/overlayStore';
 export * from '../component/overlay/types';

package/esm/exports/overlay.js

@@ -1,4 +1,5 @@
-export { PneOverlayHost } from '../component/overlay/PneOverlayHost';
+export { OverlayHost } from '../component/overlay/OverlayHost';
+export { PermanentOverlay } from '../component/overlay/PermanentOverlay';
 export { useOverlayStore, overlayActions } from '../component/overlay/overlayStore';
 export * from '../component/overlay/types';
 //# sourceMappingURL=overlay.js.map

package/esm/exports/overlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"overlay.js","sourceRoot":"","sources":["../../src/exports/overlay.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,qCAAqC,CAAA;AACpE,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAA;AACnF,cAAc,4BAA4B,CAAA"}
+{"version":3,"file":"overlay.js","sourceRoot":"","sources":["../../src/exports/overlay.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAA;AAC9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,uCAAuC,CAAA;AACxE,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAA;AACnF,cAAc,4BAA4B,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "pne-ui",
-    "version": "3.0.29",
+    "version": "3.0.31",
     "description": "",
     "repository": {
         "type": "git",