pne-ui 3.0.19 → 3.0.21

package/cjs/component/fab/PneFloatingActionButtons.d.ts

@@ -7,8 +7,18 @@ export type PneFabAction = {
     disabled?: boolean;
     tooltip?: string;
 };
+export type PneFabContent = {
+    id: string;
+    kind: 'content';
+    node: React.ReactNode;
+};
+export type PneFabDivider = {
+    id: string;
+    kind: 'divider';
+};
+export type PneFabItem = PneFabAction | PneFabContent | PneFabDivider;
 export type PneFloatingActionButtonsProps = {
-    actions: PneFabAction[];
+    actions: PneFabItem[];
     breakpoints?: readonly number[];
     mobileBreakpoint?: number;
     position?: {
@@ -18,10 +28,13 @@ export type PneFloatingActionButtonsProps = {
     fabLabel?: React.ReactNode;
     fabIcon?: React.ReactNode;
     className?: string;
+    bannerText?: React.ReactNode;
 };
 /**
- * Responsive FAB menu: shows a single floating button with a menu on small screens,
- * and a sticky action rail on larger screens. Breakpoint set defaults to 6-step layout.
+ * Floating action menu:
+ * - on mobile: actions/content rendered inside a Menu
+ * - on desktop: actions rendered as floating Fabs stacked above the trigger; Menu still opens for content/banner
+ * Actions array may include content blocks (`{ kind: 'content', node: <...> }`) to embed custom UI.
  */
-export declare function PneFloatingActionButtons({ actions, breakpoints, mobileBreakpoint, position, fabLabel, fabIcon, className, }: PneFloatingActionButtonsProps): React.JSX.Element;
+export declare function PneFloatingActionButtons({ actions, breakpoints, mobileBreakpoint, position, fabLabel, fabIcon, className, bannerText, }: PneFloatingActionButtonsProps): React.JSX.Element;
 export default PneFloatingActionButtons;

package/cjs/component/fab/PneFloatingActionButtons.js

@@ -3,15 +3,20 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PneFloatingActionButtons = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
-const Add_1 = tslib_1.__importDefault(require("@mui/icons-material/Add"));
+const Edit_1 = tslib_1.__importDefault(require("@mui/icons-material/Edit"));
 const material_1 = require("@mui/material");
 const breakpoints_1 = require("../../common/responsive/breakpoints");
 const useBreakpoint_1 = require("../responsive/useBreakpoint");
+const isContentItem = (item) => 'kind' in item && item.kind === 'content';
+const isDividerItem = (item) => 'kind' in item && item.kind === 'divider';
+const isActionItem = (item) => !isContentItem(item) && !isDividerItem(item);
 /**
- * Responsive FAB menu: shows a single floating button with a menu on small screens,
- * and a sticky action rail on larger screens. Breakpoint set defaults to 6-step layout.
+ * Floating action menu:
+ * - on mobile: actions/content rendered inside a Menu
+ * - on desktop: actions rendered as floating Fabs stacked above the trigger; Menu still opens for content/banner
+ * Actions array may include content blocks (`{ kind: 'content', node: <...> }`) to embed custom UI.
  */
-function PneFloatingActionButtons({ actions, breakpoints = breakpoints_1.DEFAULT_BREAKPOINTS, mobileBreakpoint = 800, position = { bottom: 24, right: 24 }, fabLabel = 'Actions', fabIcon = react_1.default.createElement(Add_1.default, null), className, }) {
+function PneFloatingActionButtons({ actions, breakpoints = breakpoints_1.DEFAULT_BREAKPOINTS, mobileBreakpoint = 800, position = { bottom: 24, right: 24 }, fabLabel = 'Actions', fabIcon = react_1.default.createElement(Edit_1.default, null), className, bannerText, }) {
     const breakpoint = (0, useBreakpoint_1.useBreakpoint)({ breakpoints });
     const isMobile = breakpoint <= mobileBreakpoint;
     const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
@@ -21,20 +26,37 @@ function PneFloatingActionButtons({ actions, breakpoints = breakpoints_1.DEFAULT
         handleClose();
         action.onClick();
     };
-    const renderedActions = (0, react_1.useMemo)(() => actions.map(action => (react_1.default.createElement(material_1.Tooltip, { key: action.id, title: action.tooltip ?? '', placement: 'left' },
-        react_1.default.createElement("span", null,
-            react_1.default.createElement(material_1.Button, { onClick: () => handleAction(action), startIcon: action.icon, disabled: action.disabled, fullWidth: true, variant: 'contained', color: 'primary', size: 'small', sx: { justifyContent: 'flex-start', textTransform: 'none' } }, action.label))))), [actions]);
-    if (isMobile) {
-        return (react_1.default.createElement(material_1.Box, { position: 'fixed', bottom: position.bottom ?? 24, right: position.right ?? 24, zIndex: 1300, className: className },
-            react_1.default.createElement(material_1.Tooltip, { title: fabLabel },
-                react_1.default.createElement(material_1.Fab, { color: 'primary', onClick: handleOpen, "aria-label": typeof fabLabel === 'string' ? fabLabel : 'Actions' }, fabIcon)),
-            react_1.default.createElement(material_1.Menu, { anchorEl: anchorEl, open: Boolean(anchorEl), onClose: handleClose, anchorOrigin: { vertical: 'top', horizontal: 'left' } }, actions.map(action => (react_1.default.createElement(material_1.MenuItem, { key: action.id, disabled: action.disabled, onClick: () => handleAction(action) },
-                action.icon ? react_1.default.createElement(material_1.ListItemIcon, null, action.icon) : null,
-                react_1.default.createElement(material_1.ListItemText, null, action.label)))))));
-    }
+    const renderMenuItems = (items) => items.map(item => isContentItem(item) ? (react_1.default.createElement(material_1.Box, { key: item.id }, item.node)) : isDividerItem(item) ? (react_1.default.createElement(material_1.Divider, { key: item.id, component: 'li', role: 'presentation', sx: { my: 2 } })) : isActionItem(item) ? (react_1.default.createElement(material_1.MenuItem, { key: item.id, disabled: item.disabled, onClick: () => handleAction(item), sx: { fontSize: '0.875rem', display: 'flex', alignItems: 'center', gap: 1 } },
+        react_1.default.createElement(material_1.ListItemText, { primaryTypographyProps: { fontSize: '0.875rem' }, sx: { flex: 1 } }, item.label),
+        item.icon ? (react_1.default.createElement(material_1.Box, { component: 'span', sx: { display: 'inline-flex', color: 'inherit', lineHeight: 0 } }, item.icon)) : null)) : null);
+    const menuItems = isMobile ? actions : actions.filter(item => !isActionItem(item));
+    const actionItems = isMobile ? [] : actions.filter(isActionItem);
     return (react_1.default.createElement(material_1.Box, { position: 'fixed', bottom: position.bottom ?? 24, right: position.right ?? 24, zIndex: 1300, className: className },
-        react_1.default.createElement(material_1.Paper, { elevation: 3, sx: { borderRadius: 2, p: 1, minWidth: 200 } },
-            react_1.default.createElement(material_1.Stack, { spacing: 1 }, renderedActions))));
+        react_1.default.createElement(material_1.Stack, { spacing: 1, alignItems: 'flex-end' },
+            !isMobile
+                ? actionItems.map(item => {
+                    const title = item.tooltip ?? (typeof item.label === 'string' ? item.label : typeof fabLabel === 'string' ? fabLabel : 'Action');
+                    return (react_1.default.createElement(material_1.Tooltip, { key: item.id, title: title, placement: 'left' },
+                        react_1.default.createElement("span", null,
+                            react_1.default.createElement(material_1.Fab, { color: 'primary', onClick: () => handleAction(item), "aria-label": typeof title === 'string' ? title : 'Action' }, item.icon ?? (typeof item.label === 'string' ? item.label.charAt(0) : fabIcon)))));
+                })
+                : null,
+            react_1.default.createElement(material_1.Tooltip, { title: fabLabel },
+                react_1.default.createElement(material_1.Fab, { color: 'primary', onClick: handleOpen, "aria-label": typeof fabLabel === 'string' ? fabLabel : 'Actions' }, fabIcon))),
+        react_1.default.createElement(material_1.Menu, { anchorEl: anchorEl, open: Boolean(anchorEl), onClose: handleClose, anchorOrigin: { vertical: 'top', horizontal: 'left' }, MenuListProps: { sx: { py: 0 } } },
+            renderMenuItems(menuItems),
+            bannerText ? (react_1.default.createElement(material_1.MenuItem, { disabled: true, sx: {
+                    pointerEvents: 'none',
+                    bgcolor: theme => theme.palette.primary.main,
+                    color: theme => theme.palette.primary.contrastText,
+                    '&.Mui-disabled': { opacity: 1 },
+                    minHeight: 60,
+                } },
+                react_1.default.createElement(material_1.ListItemIcon, { sx: { minWidth: 36, color: 'inherit' } }, fabIcon),
+                react_1.default.createElement(material_1.ListItemText, { primaryTypographyProps: {
+                        fontWeight: 600,
+                        fontSize: '20px',
+                    } }, bannerText))) : null)));
 }
 exports.PneFloatingActionButtons = PneFloatingActionButtons;
 exports.default = PneFloatingActionButtons;

package/cjs/component/fab/PneFloatingActionButtons.js.map

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

package/cjs/component/widget-board/PneLayoutsPanel.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+export type PneLayoutOption = {
+    id: string;
+    name: string;
+};
+export type PneLayoutsPanelProps = {
+    items: PneLayoutOption[];
+    selectedId?: string;
+    onSelect?: (id: string) => void;
+    onDelete?: (id: string) => void;
+    onUpdate?: (id: string) => void;
+    onAdd?: (name: string) => void;
+    title?: React.ReactNode;
+    addLabel?: React.ReactNode;
+    className?: string;
+};
+export declare const PneLayoutsPanel: React.FC<PneLayoutsPanelProps>;
+export default PneLayoutsPanel;

package/cjs/component/widget-board/PneLayoutsPanel.js

@@ -0,0 +1,86 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PneLayoutsPanel = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const Delete_1 = tslib_1.__importDefault(require("@mui/icons-material/Delete"));
+const Refresh_1 = tslib_1.__importDefault(require("@mui/icons-material/Refresh"));
+const material_1 = require("@mui/material");
+const PneModal_1 = tslib_1.__importDefault(require("../PneModal"));
+const PneTextField_1 = tslib_1.__importDefault(require("../PneTextField"));
+const PneButton_1 = tslib_1.__importDefault(require("../PneButton"));
+const defaultTitle = 'Layouts';
+const defaultAddLabel = 'Add new layout';
+const PneLayoutsPanel = ({ items, selectedId, onSelect, onDelete, onUpdate, onAdd, title = defaultTitle, addLabel = defaultAddLabel, className, }) => {
+    const [modalOpen, setModalOpen] = (0, react_1.useState)(false);
+    const [name, setName] = (0, react_1.useState)('');
+    const handleSave = () => {
+        const trimmed = name.trim();
+        if (!trimmed || !onAdd)
+            return;
+        onAdd(trimmed);
+        setName('');
+        setModalOpen(false);
+    };
+    const hasAdd = Boolean(onAdd);
+    return (react_1.default.createElement(material_1.Box, { sx: { width: 320, maxWidth: '100%', bgcolor: '#fff', fontSize: '14px', lineHeight: '20px' }, className: className },
+        react_1.default.createElement(material_1.Box, { sx: {
+                bgcolor: '#fff',
+                color: '#8A94A6',
+                px: 2,
+                minHeight: 32,
+                display: 'flex',
+                alignItems: 'center',
+                borderBottom: '1px solid #0000001F',
+            } },
+            react_1.default.createElement(material_1.Typography, { variant: 'subtitle2', sx: { lineHeight: '20px', fontWeight: 400, fontSize: '14px' } }, title)),
+        react_1.default.createElement(material_1.Stack, null, items.length === 0 ? (react_1.default.createElement(material_1.Box, { sx: { px: 2, minHeight: 32, display: 'flex', alignItems: 'center', color: 'text.secondary' } }, "No layouts yet")) : (items.map(item => {
+            const selected = item.id === selectedId;
+            return (react_1.default.createElement(material_1.Box, { key: item.id, onClick: () => onSelect?.(item.id), sx: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 0.5,
+                    px: 2,
+                    minHeight: 32,
+                    cursor: onSelect ? 'pointer' : 'default',
+                    bgcolor: selected ? '#EFF2F5' : '#fff',
+                    color: selected ? 'primary.main' : 'text.primary',
+                    transition: 'background-color 0.2s ease, color 0.2s ease',
+                } },
+                react_1.default.createElement(material_1.Box, { sx: { flex: 1, fontWeight: 400, fontSize: '14px', lineHeight: '20px' } }, item.name),
+                onUpdate && selected ? (react_1.default.createElement(material_1.IconButton, { size: 'small', color: 'inherit', onClick: event => {
+                        event.stopPropagation();
+                        onUpdate(item.id);
+                    } },
+                    react_1.default.createElement(Refresh_1.default, { fontSize: 'small' }))) : null,
+                onDelete ? (react_1.default.createElement(material_1.IconButton, { size: 'small', color: 'inherit', onClick: event => {
+                        event.stopPropagation();
+                        onDelete(item.id);
+                    } },
+                    react_1.default.createElement(Delete_1.default, { fontSize: 'small' }))) : null));
+        }))),
+        hasAdd ? (react_1.default.createElement(material_1.Box, null,
+            react_1.default.createElement(PneButton_1.default, { fullWidth: true, pneStyle: 'text', size: 'small', onClick: () => setModalOpen(true), sx: {
+                    height: 32,
+                    justifyContent: 'flex-start',
+                    px: 2,
+                    fontSize: '14px',
+                    lineHeight: '20px',
+                    color: 'primary.main',
+                    textDecoration: 'none',
+                    minWidth: 0,
+                    '&:hover': {
+                        backgroundColor: 'transparent',
+                        textDecoration: 'none',
+                    },
+                } }, addLabel))) : null,
+        hasAdd ? (react_1.default.createElement(PneModal_1.default, { open: modalOpen, onClose: () => setModalOpen(false), title: 'New layout' },
+            react_1.default.createElement(material_1.Stack, { spacing: 2 },
+                react_1.default.createElement(PneTextField_1.default, { label: 'Template name', fullWidth: true, value: name, onChange: event => setName(event.target.value), autoFocus: true }),
+                react_1.default.createElement(material_1.Box, { sx: { display: 'flex', gap: 1, justifyContent: 'flex-end' } },
+                    react_1.default.createElement(PneButton_1.default, { pneStyle: 'text', size: 'small', onClick: () => setModalOpen(false), sx: { height: 32, fontSize: '14px', lineHeight: '20px' } }, "Cancel"),
+                    react_1.default.createElement(PneButton_1.default, { pneStyle: 'contained', size: 'small', onClick: handleSave, disabled: !name.trim(), sx: { height: 32, fontSize: '14px', lineHeight: '20px' } }, "Save"))))) : null));
+};
+exports.PneLayoutsPanel = PneLayoutsPanel;
+exports.default = exports.PneLayoutsPanel;
+//# sourceMappingURL=PneLayoutsPanel.js.map

package/cjs/component/widget-board/PneLayoutsPanel.js.map

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

package/cjs/component/widget-board/WidgetBoard.js

@@ -8,9 +8,7 @@ const board_item_1 = tslib_1.__importDefault(require("@cloudscape-design/board-c
 const Close_1 = tslib_1.__importDefault(require("@mui/icons-material/Close"));
 const ExpandLess_1 = tslib_1.__importDefault(require("@mui/icons-material/ExpandLess"));
 const ExpandMore_1 = tslib_1.__importDefault(require("@mui/icons-material/ExpandMore"));
-const RestartAlt_1 = tslib_1.__importDefault(require("@mui/icons-material/RestartAlt"));
 const material_1 = require("@mui/material");
-const PneButton_1 = tslib_1.__importDefault(require("../PneButton"));
 const CloudscapeBoardStyles_1 = require("../cloudscape/CloudscapeBoardStyles");
 const CloudscapeThemeProvider_1 = require("../cloudscape/CloudscapeThemeProvider");
 const boardI18n_1 = require("../cloudscape/boardI18n");
@@ -87,20 +85,168 @@ const getLayoutConfigForWidth = (width, layoutMap, breakpoints) => {
     const breakpoint = resolveBreakpoint(width, breakpoints);
     return { breakpoint, layout: layoutMap[breakpoint] };
 };
-const buildStoragePayload = (state) => JSON.stringify({
+const buildStoragePayload = (state) => ({
     items: state.items.map(({ id, columnSpan, columnOffset, rowSpan }) => ({ id, columnSpan, columnOffset, rowSpan })),
     hidden: state.hidden,
     collapsed: state.collapsed,
     sizeMemory: state.sizeMemory,
 });
-const hydrateStoragePayload = (raw) => JSON.parse(raw);
-exports.WidgetBoard = (0, react_1.forwardRef)(function WidgetBoard({ widgets, layoutByBreakpoint, breakpoints: customBreakpoints, storageKey = 'pne-widget-board-layout', loadRemoteLayout, controls, empty, hideNavigationArrows = true, onLayoutPersist, isWidgetEnabled, className, }, ref) {
-    const breakpoints = (0, react_1.useMemo)(() => customBreakpoints ?? Object.keys(layoutByBreakpoint).map(Number).sort((a, b) => a - b), [customBreakpoints, layoutByBreakpoint]);
+const hydrateStoragePayload = (raw) => (typeof raw === 'string' ? JSON.parse(raw) : raw);
+const readPersistedLayouts = (storageKey) => {
+    if (typeof window === 'undefined')
+        return null;
+    const raw = window.localStorage.getItem(storageKey);
+    if (!raw)
+        return null;
+    try {
+        const parsed = JSON.parse(raw);
+        if (parsed && typeof parsed === 'object' && 'layouts' in parsed) {
+            const layouts = parsed.layouts ?? {};
+            const selectedLayoutId = parsed.selectedLayoutId;
+            return { layouts, selectedLayoutId };
+        }
+        if (parsed && typeof parsed === 'object' && 'items' in parsed) {
+            return {
+                layouts: { __legacy: parsed },
+                selectedLayoutId: '__legacy',
+            };
+        }
+    }
+    catch {
+        // ignore corrupt storage payloads
+    }
+    return null;
+};
+const buildLayoutOptions = (options, layoutByBreakpoint) => {
+    if (options?.length) {
+        return options.map(option => ({
+            ...option,
+            preset: option.preset ?? {
+                layoutByBreakpoint,
+                source: 'static',
+            },
+        }));
+    }
+    return [
+        {
+            id: 'default',
+            name: 'Default layout',
+            preset: {
+                layoutByBreakpoint,
+                source: 'static',
+            },
+        },
+    ];
+};
+const layoutOptionsEqual = (a, b) => a.length === b.length && a.every((option, index) => option.id === b[index]?.id && option.name === b[index]?.name && option.preset === b[index]?.preset);
+exports.WidgetBoard = (0, react_1.forwardRef)(function WidgetBoard({ widgets, layoutByBreakpoint, breakpoints: customBreakpoints, storageKey = 'pne-widget-board-layout', loadLayouts, layouts, empty, hideNavigationArrows = true, onLayoutPersist, isWidgetEnabled, className, }, ref) {
+    const initialPersistedLayouts = typeof window !== 'undefined' ? readPersistedLayouts(storageKey) : null;
+    const persistedLayoutsRef = (0, react_1.useRef)(initialPersistedLayouts ?? { layouts: {} });
+    const [layoutOptions, setLayoutOptions] = (0, react_1.useState)(() => buildLayoutOptions(layouts?.options, layoutByBreakpoint));
+    (0, react_1.useEffect)(() => {
+        if (loadLayouts)
+            return;
+        const nextOptions = buildLayoutOptions(layouts?.options, layoutByBreakpoint);
+        setLayoutOptions(prev => (layoutOptionsEqual(prev, nextOptions) ? prev : nextOptions));
+    }, [layoutByBreakpoint, layouts?.options, loadLayouts]);
+    const layoutOptionsMap = (0, react_1.useMemo)(() => new Map(layoutOptions.map(option => [option.id, option])), [layoutOptions]);
+    const initialLayoutId = (0, react_1.useMemo)(() => {
+        const fromLayouts = layouts?.selectedId;
+        if (fromLayouts && layoutOptionsMap.has(fromLayouts))
+            return fromLayouts;
+        const persistedId = persistedLayoutsRef.current.selectedLayoutId;
+        if (persistedId && layoutOptionsMap.has(persistedId))
+            return persistedId;
+        if (layouts?.initialSelectedId && layoutOptionsMap.has(layouts.initialSelectedId))
+            return layouts.initialSelectedId;
+        return layoutOptions[0]?.id;
+    }, [layoutOptions, layoutOptionsMap, layouts?.initialSelectedId, layouts?.selectedId]);
     const [layoutSource, setLayoutSource] = (0, react_1.useState)(() => ({
-        layoutByBreakpoint,
-        source: 'static',
+        ...(layoutOptionsMap.get(initialLayoutId ?? '')?.preset ?? { layoutByBreakpoint, source: 'static' }),
     }));
+    const breakpoints = (0, react_1.useMemo)(() => customBreakpoints ?? Object.keys(layoutSource.layoutByBreakpoint).map(Number).sort((a, b) => a - b), [customBreakpoints, layoutSource.layoutByBreakpoint]);
     const [layoutPreset, setLayoutPreset] = (0, react_1.useState)(() => getLayoutConfigForWidth(typeof window !== 'undefined' ? window.innerWidth : undefined, layoutSource.layoutByBreakpoint, breakpoints));
+    (0, react_1.useEffect)(() => {
+        setLayoutPreset(getLayoutConfigForWidth(typeof window !== 'undefined' ? window.innerWidth : undefined, layoutSource.layoutByBreakpoint, breakpoints));
+    }, [breakpoints, layoutSource.layoutByBreakpoint]);
+    const [selectedLayoutId, setSelectedLayoutId] = (0, react_1.useState)(initialLayoutId);
+    const selectedLayoutRef = (0, react_1.useRef)(initialLayoutId);
+    (0, react_1.useEffect)(() => {
+        selectedLayoutRef.current = selectedLayoutId;
+    }, [selectedLayoutId]);
+    (0, react_1.useEffect)(() => {
+        if (!selectedLayoutId || layoutOptionsMap.has(selectedLayoutId))
+            return;
+        const fallbackId = layoutOptions[0]?.id;
+        if (fallbackId && fallbackId !== selectedLayoutId) {
+            setSelectedLayoutId(fallbackId);
+            layouts?.onSelect?.(fallbackId);
+        }
+    }, [layoutOptions, layoutOptionsMap, layouts?.onSelect, selectedLayoutId]);
+    (0, react_1.useEffect)(() => {
+        const externalSelected = layouts?.selectedId;
+        if (!externalSelected)
+            return;
+        if (!layoutOptionsMap.has(externalSelected))
+            return;
+        if (externalSelected !== selectedLayoutId) {
+            setSelectedLayoutId(externalSelected);
+        }
+    }, [layoutOptionsMap, layouts?.selectedId, selectedLayoutId]);
+    (0, react_1.useEffect)(() => {
+        if (!selectedLayoutId || !layouts?.onSelect)
+            return;
+        if (layouts.selectedId === selectedLayoutId)
+            return;
+        layouts.onSelect(selectedLayoutId);
+    }, [layouts?.onSelect, layouts?.selectedId, selectedLayoutId]);
+    (0, react_1.useEffect)(() => {
+        const nextSource = layoutOptionsMap.get(selectedLayoutId ?? '')?.preset ?? {
+            layoutByBreakpoint,
+            source: 'static',
+        };
+        setLayoutSource(prev => (prev === nextSource ? prev : nextSource));
+    }, [layoutByBreakpoint, layoutOptionsMap, selectedLayoutId]);
+    (0, react_1.useEffect)(() => {
+        if (typeof window === 'undefined')
+            return;
+        const nextPersisted = readPersistedLayouts(storageKey) ?? { layouts: {} };
+        persistedLayoutsRef.current = nextPersisted;
+        if (nextPersisted.selectedLayoutId &&
+            layoutOptionsMap.has(nextPersisted.selectedLayoutId) &&
+            nextPersisted.selectedLayoutId !== selectedLayoutId) {
+            setSelectedLayoutId(nextPersisted.selectedLayoutId);
+        }
+    }, [layoutOptionsMap, selectedLayoutId, storageKey]);
+    (0, react_1.useEffect)(() => {
+        let cancelled = false;
+        if (!loadLayouts)
+            return undefined;
+        loadLayouts().then(result => {
+            if (cancelled || !result?.options)
+                return;
+            const nextOptions = buildLayoutOptions(result.options, layoutByBreakpoint);
+            setLayoutOptions(prev => (layoutOptionsEqual(prev, nextOptions) ? prev : nextOptions));
+            const currentSelected = selectedLayoutRef.current;
+            let nextSelected = currentSelected && nextOptions.some(option => option.id === currentSelected) ? currentSelected : undefined;
+            if (result.selectedId && nextOptions.some(option => option.id === result.selectedId)) {
+                nextSelected = result.selectedId;
+            }
+            else if (!nextSelected) {
+                nextSelected = nextOptions[0]?.id;
+            }
+            if (nextSelected && nextSelected !== currentSelected) {
+                setSelectedLayoutId(nextSelected);
+                layouts?.onSelect?.(nextSelected);
+            }
+            else if (!currentSelected && nextSelected) {
+                setSelectedLayoutId(nextSelected);
+            }
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [layoutByBreakpoint, loadLayouts, layouts?.onSelect]);
     const fallbackLayoutConfig = (0, react_1.useMemo)(() => {
         const firstKey = breakpoints[0];
         return layoutSource.layoutByBreakpoint[firstKey] ?? Object.values(layoutSource.layoutByBreakpoint)[0];
@@ -110,10 +256,11 @@ exports.WidgetBoard = (0, react_1.forwardRef)(function WidgetBoard({ widgets, la
     const definitionsMap = (0, react_1.useMemo)(() => new Map(activeDefinitions.map(def => [def.id, def])), [activeDefinitions]);
     const [layoutState, setLayoutState] = (0, react_1.useState)(() => buildDefaultState(activeDefinitions));
     (0, react_1.useEffect)(() => {
-        const savedState = typeof window !== 'undefined' ? window.localStorage.getItem(storageKey) : null;
-        if (savedState) {
+        const storagePayload = (selectedLayoutId && persistedLayoutsRef.current.layouts[selectedLayoutId]) ??
+            persistedLayoutsRef.current.layouts.__legacy;
+        if (storagePayload) {
             try {
-                const parsed = hydrateStoragePayload(savedState);
+                const parsed = hydrateStoragePayload(storagePayload);
                 const items = (parsed.items || []).flatMap(item => {
                     const definition = definitionsMap.get(item.id);
                     if (!definition)
@@ -142,7 +289,7 @@ exports.WidgetBoard = (0, react_1.forwardRef)(function WidgetBoard({ widgets, la
             }
         }
         setLayoutState(buildDefaultState(activeDefinitions));
-    }, [activeDefinitions, definitionsMap, storageKey]);
+    }, [activeDefinitions, definitionsMap, selectedLayoutId]);
     (0, react_1.useEffect)(() => {
         if (typeof window === 'undefined')
             return;
@@ -151,35 +298,26 @@ exports.WidgetBoard = (0, react_1.forwardRef)(function WidgetBoard({ widgets, la
         return () => window.removeEventListener('resize', handleResize);
     }, [breakpoints, layoutSource.layoutByBreakpoint]);
     (0, react_1.useEffect)(() => {
-        let mounted = true;
-        if (!loadRemoteLayout)
-            return undefined;
-        loadRemoteLayout().then(preset => {
-            if (!mounted || !preset?.layoutByBreakpoint)
-                return;
-            setLayoutSource(preset);
-            const nextPreset = getLayoutConfigForWidth(typeof window !== 'undefined' ? window.innerWidth : undefined, preset.layoutByBreakpoint, breakpoints);
-            const nextLayout = nextPreset.layout ?? Object.values(preset.layoutByBreakpoint)[0] ?? fallbackLayoutConfig;
-            setLayoutPreset(nextPreset);
-            const nextDefinitions = withLayout(widgets, nextLayout);
-            const nextActiveDefinitions = nextDefinitions.filter(def => (isWidgetEnabled ? isWidgetEnabled(def) : true));
-            setLayoutState(buildDefaultState(nextActiveDefinitions));
-        });
-        return () => {
-            mounted = false;
-        };
-    }, [breakpoints, fallbackLayoutConfig, isWidgetEnabled, loadRemoteLayout, widgets]);
-    (0, react_1.useEffect)(() => {
-        if (typeof window === 'undefined')
+        if (typeof window === 'undefined' || !selectedLayoutId)
             return;
         try {
-            window.localStorage.setItem(storageKey, buildStoragePayload(layoutState));
+            const payload = buildStoragePayload(layoutState);
+            const nextPersisted = {
+                ...persistedLayoutsRef.current,
+                selectedLayoutId,
+                layouts: {
+                    ...persistedLayoutsRef.current.layouts,
+                    [selectedLayoutId]: payload,
+                },
+            };
+            persistedLayoutsRef.current = nextPersisted;
+            window.localStorage.setItem(storageKey, JSON.stringify(nextPersisted));
             onLayoutPersist?.(layoutState);
         }
         catch {
             // ignore storage failures
         }
-    }, [layoutState, onLayoutPersist, storageKey]);
+    }, [layoutState, onLayoutPersist, selectedLayoutId, storageKey]);
     const hideItem = (0, react_1.useCallback)((id) => {
         setLayoutState(prev => ({
             ...prev,
@@ -286,17 +424,9 @@ exports.WidgetBoard = (0, react_1.forwardRef)(function WidgetBoard({ widgets, la
         return (react_1.default.createElement(board_item_1.default, { key: item.id, i18nStrings: boardI18n_1.boardItemI18nStrings, header: headerElement, settings: settingsElement, disableContentPaddings: true },
             react_1.default.createElement(material_1.Box, { sx: { p: 2, height: '100%', boxSizing: 'border-box', overflow: 'hidden' } }, isCollapsed ? react_1.default.createElement(material_1.Typography, { sx: { color: 'text.secondary', fontSize: 14 } }, "Collapsed") : definition.render())));
     };
-    const controlsConfig = controls ?? {};
-    const showControls = controlsConfig.hideReset !== true || (controlsConfig.hideRestore !== true && layoutState.hidden.length > 0);
     return (react_1.default.createElement(CloudscapeThemeProvider_1.CloudscapeThemeProvider, null,
         react_1.default.createElement(CloudscapeBoardStyles_1.CloudscapeBoardStyles, { hideNavigationArrows: hideNavigationArrows }),
-        react_1.default.createElement(material_1.Stack, { spacing: 1.5, className: className },
-            showControls && (react_1.default.createElement(material_1.Stack, { direction: { xs: 'column', sm: 'row' }, alignItems: { xs: 'flex-start', sm: 'center' }, justifyContent: 'space-between', spacing: 1 },
-                react_1.default.createElement(material_1.Typography, { variant: 'h6', fontWeight: 700 }, controlsConfig.title ?? 'Widgets layout'),
-                react_1.default.createElement(material_1.Stack, { direction: 'row', spacing: 1 },
-                    controlsConfig.hideReset !== true && (react_1.default.createElement(PneButton_1.default, { onClick: resetLayout, pneStyle: 'outlined', startIcon: react_1.default.createElement(RestartAlt_1.default, null) }, controlsConfig.resetLabel ?? 'Reset to default')),
-                    layoutState.hidden.length > 0 && controlsConfig.hideRestore !== true && (react_1.default.createElement(PneButton_1.default, { pneStyle: 'text', onClick: () => layoutState.hidden.forEach(restoreItem) }, controlsConfig.restoreLabel ?? 'Restore hidden'))))),
-            layoutState.hidden.length > 0 && (react_1.default.createElement(material_1.Stack, { direction: 'row', spacing: 1, flexWrap: 'wrap' }, layoutState.hidden.map(id => (react_1.default.createElement(material_1.Chip, { key: id, variant: 'outlined', label: `Show ${definitionsMap.get(id)?.title ?? id}`, onClick: () => restoreItem(id), size: 'small' }))))),
+        react_1.default.createElement(material_1.Box, { className: className },
             react_1.default.createElement(board_1.default, { items: visibleItems, renderItem: renderItem, i18nStrings: boardI18nStrings, onItemsChange: handleItemsChange, empty: empty ?? react_1.default.createElement(material_1.Box, { sx: { p: 2, color: 'text.secondary' } }, "No widgets available") }))));
 });
 //# sourceMappingURL=WidgetBoard.js.map