@olenbetong/synergi-react 2.4.0 → 2.5.1

package/es/components/AppMenu/AppMenu.css

@@ -0,0 +1,158 @@
+/* App Menu – trigger button */
+.app-menu-trigger {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	padding: var(--ds-spacing-2);
+	background: transparent;
+	border: none;
+	border-radius: var(--ds-border-radius-md);
+	color: var(--ds-color-neutral-text-default);
+	cursor: pointer;
+	line-height: 1;
+	transition: background 0.15s ease;
+}
+
+.app-menu-trigger:hover {
+	background: var(--ds-color-neutral-background-hover);
+}
+
+.app-menu-trigger:focus-visible {
+	outline: 2px solid var(--ds-color-focus-outer);
+	outline-offset: 2px;
+}
+
+.app-menu-icon {
+	display: block;
+}
+
+/* Dialog backdrop */
+.app-menu-dialog::backdrop {
+	background: rgba(0, 0, 0, 0.4);
+}
+
+/* Dialog container */
+.app-menu-dialog {
+	padding: 0;
+	border: 1px solid var(--ds-color-neutral-border-default);
+	border-radius: var(--ds-border-radius-lg);
+	background: var(--ds-color-neutral-background-default);
+	box-shadow: var(--ds-shadow-lg, 0 8px 32px rgba(0, 0, 0, 0.18));
+	max-width: min(90vw, 36rem);
+	width: 100%;
+	max-height: min(90vh, 40rem);
+	overflow: hidden;
+	display: flex;
+	flex-direction: column;
+}
+
+/* Inner wrapper – scrollable */
+.app-menu-dialog-inner {
+	display: flex;
+	flex-direction: column;
+	gap: 0;
+	padding: var(--ds-spacing-4);
+	overflow: hidden;
+	height: 100%;
+}
+
+/* Search row */
+.app-menu-search-row {
+	margin-bottom: var(--ds-spacing-3);
+}
+
+.app-menu-search {
+	width: 100%;
+	padding: var(--ds-spacing-2) var(--ds-spacing-3);
+	font-size: var(--ds-font-size-md);
+	border: 1px solid var(--ds-color-neutral-border-strong);
+	border-radius: var(--ds-border-radius-md);
+	background: var(--ds-color-neutral-background-subtle);
+	color: var(--ds-color-neutral-text-default);
+	box-sizing: border-box;
+}
+
+.app-menu-search:focus {
+	outline: 2px solid var(--ds-color-focus-outer);
+	outline-offset: 2px;
+	border-color: var(--ds-color-accent-border-strong);
+}
+
+/* Loading / empty states */
+.app-menu-loading,
+.app-menu-empty {
+	text-align: center;
+	color: var(--ds-color-neutral-text-subtle);
+	font-size: var(--ds-font-size-sm);
+	padding: var(--ds-spacing-4) 0;
+	margin: 0;
+}
+
+/* Groups scroll area */
+.app-menu-groups {
+	overflow-y: auto;
+	flex: 1 1 auto;
+	display: flex;
+	flex-direction: column;
+	gap: var(--ds-spacing-4);
+}
+
+/* Individual group */
+.app-menu-group {
+	display: flex;
+	flex-direction: column;
+	gap: var(--ds-spacing-1);
+}
+
+.app-menu-group-title {
+	font-size: var(--ds-font-size-xs);
+	font-weight: var(--ds-font-weight-medium, 600);
+	text-transform: uppercase;
+	letter-spacing: 0.06em;
+	color: var(--ds-color-neutral-text-subtle);
+	margin: 0 0 var(--ds-spacing-1);
+	padding: 0;
+}
+
+/* App list */
+.app-menu-list {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
+	gap: var(--ds-spacing-1);
+}
+
+.app-menu-item {
+	display: contents;
+}
+
+/* App link tiles */
+.app-menu-link {
+	display: flex;
+	align-items: center;
+	padding: var(--ds-spacing-2) var(--ds-spacing-3);
+	border-radius: var(--ds-border-radius-sm);
+	font-size: var(--ds-font-size-sm);
+	color: var(--ds-color-neutral-text-default);
+	text-decoration: none;
+	background: var(--ds-color-neutral-background-subtle);
+	border: 1px solid transparent;
+	transition:
+		background 0.12s ease,
+		border-color 0.12s ease;
+	word-break: break-word;
+	line-height: 1.4;
+}
+
+.app-menu-link:hover {
+	background: var(--ds-color-accent-background-hover, var(--ds-color-neutral-background-hover));
+	border-color: var(--ds-color-accent-border-default, var(--ds-color-neutral-border-default));
+	color: var(--ds-color-accent-text-default, var(--ds-color-neutral-text-default));
+}
+
+.app-menu-link:focus-visible {
+	outline: 2px solid var(--ds-color-focus-outer);
+	outline-offset: 2px;
+}

package/es/components/AppMenu/index.d.ts

@@ -0,0 +1,12 @@
+import "./AppMenu.css";
+import type { DataObject } from "@olenbetong/appframe-data";
+export type AppMenuArticle = {
+    ArticleId: string;
+    Title: string | null;
+    MenuGroup: string | null;
+    Path: string | null;
+};
+export type AppMenuProps = {
+    dataObject: DataObject<AppMenuArticle>;
+};
+export declare function AppMenu({ dataObject }: AppMenuProps): import("react/jsx-runtime").JSX.Element;

package/es/components/AppMenu/index.js

@@ -0,0 +1,85 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import "./AppMenu.css";
+import { useData, useLoading } from "@olenbetong/appframe-react";
+import { useEffect, useMemo, useRef, useState } from "react";
+/** Strip version suffixes from ArticleId for building hrefs. */
+function stripVersionSuffix(articleId) {
+    if (articleId.length > 9 && articleId[articleId.length - 8] === ".") {
+        return articleId.slice(0, -8);
+    }
+    if (articleId.length > 5 && articleId[articleId.length - 4] === ".") {
+        return articleId.slice(0, -4);
+    }
+    return articleId;
+}
+/** Group records by MenuGroup, returning an ordered list of [group, items] pairs. */
+function groupByMenuGroup(items) {
+    let map = new Map();
+    for (let item of items) {
+        let key = item.MenuGroup ?? "";
+        let list = map.get(key);
+        if (!list) {
+            list = [];
+            map.set(key, list);
+        }
+        list.push(item);
+    }
+    return [...map.entries()];
+}
+export function AppMenu({ dataObject }) {
+    let dialogRef = useRef(null);
+    let searchRef = useRef(null);
+    let [search, setSearch] = useState("");
+    let [isOpen, setIsOpen] = useState(false);
+    let isLoading = useLoading(dataObject);
+    let allArticles = useData(dataObject);
+    // Refresh data when opened for the first time
+    useEffect(() => {
+        if (isOpen && allArticles.length === 0 && !isLoading) {
+            dataObject.refreshDataSource();
+        }
+    }, [isOpen, allArticles.length, isLoading, dataObject]);
+    let filtered = useMemo(() => {
+        if (!search.trim())
+            return allArticles;
+        let lower = search.toLowerCase();
+        return allArticles.filter((a) => (a.Title ?? "").toLowerCase().includes(lower));
+    }, [allArticles, search]);
+    let groups = useMemo(() => groupByMenuGroup(filtered), [filtered]);
+    function openDialog() {
+        let dialog = dialogRef.current;
+        if (!dialog)
+            return;
+        setIsOpen(true);
+        dialog.showModal();
+        // Focus search after dialog opens
+        requestAnimationFrame(() => searchRef.current?.focus());
+    }
+    function closeDialog() {
+        let dialog = dialogRef.current;
+        if (!dialog)
+            return;
+        setSearch("");
+        setIsOpen(false);
+        dialog.close();
+    }
+    function handleBackdropClick(e) {
+        // Close when clicking outside the dialog content (on the backdrop)
+        let rect = dialogRef.current?.getBoundingClientRect();
+        if (!rect)
+            return;
+        let { clientX, clientY } = e;
+        if (clientX < rect.left || clientX > rect.right || clientY < rect.top || clientY > rect.bottom) {
+            closeDialog();
+        }
+    }
+    // Native <dialog> handles Escape automatically — just sync state
+    function handleCancel() {
+        setSearch("");
+        setIsOpen(false);
+    }
+    return (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "app-menu-trigger", "aria-label": "Open app menu", "aria-haspopup": "dialog", "aria-expanded": isOpen, onClick: openDialog, children: _jsx("svg", { className: "app-menu-icon", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", focusable: "false", width: "24", height: "24", children: _jsx("path", { d: "M4 6h4V4H4v2zm0 5h4V9H4v2zm0 5h4v-2H4v2zM10 4v2h10V4H10zm0 7h10V9H10v2zm0 5h10v-2H10v2z" }) }) }), _jsx("dialog", { ref: dialogRef, className: "app-menu-dialog", "aria-label": "App menu", onClick: handleBackdropClick, onCancel: handleCancel, children: _jsxs("div", { className: "app-menu-dialog-inner", children: [_jsxs("div", { className: "app-menu-search-row", children: [_jsx("label", { htmlFor: "app-menu-search", className: "visually-hidden", children: "Search apps" }), _jsx("input", { ref: searchRef, id: "app-menu-search", type: "search", className: "app-menu-search", placeholder: "Search apps\u2026", value: search, onChange: (e) => setSearch(e.target.value), autoComplete: "off" })] }), isLoading && _jsx("p", { className: "app-menu-loading", children: "Loading\u2026" }), !isLoading && groups.length === 0 && _jsx("p", { className: "app-menu-empty", children: "No apps found." }), _jsx("div", { className: "app-menu-groups", children: groups.map(([group, items]) => (_jsxs("section", { className: "app-menu-group", children: [group && _jsx("h2", { className: "app-menu-group-title", children: group }), _jsx("ul", { className: "app-menu-list", children: items.map((article) => {
+                                            let href = `/${stripVersionSuffix(article.ArticleId)}`;
+                                            return (_jsx("li", { className: "app-menu-item", children: _jsx("a", { href: href, className: "app-menu-link", onClick: closeDialog, children: article.Title ?? article.ArticleId }) }, article.ArticleId));
+                                        }) })] }, group))) })] }) })] }));
+}

package/es/components/AppShell/index.d.ts

@@ -0,0 +1,5 @@
+import { type ReactNode } from "react";
+export type AppShellProps = {
+    children: ReactNode;
+};
+export declare function AppShell({ children }: AppShellProps): import("react/jsx-runtime").JSX.Element;

package/es/components/AppShell/index.js

@@ -0,0 +1,112 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { StyledEngineProvider, ThemeProvider } from "@mui/material";
+import { createTheme as muiCreateTheme } from "@mui/material/styles";
+import { AppErrorBoundary } from "@olenbetong/appframe-mui";
+import { generateApiDataObject, SortOrder } from "@olenbetong/appframe-data";
+import { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+import { AppMenu } from "../AppMenu/index.js";
+// Created once — shared across all AppShell instances on a page.
+const dsMenuArticles = generateApiDataObject({
+    resource: "aviw_WebShared_Articles",
+    id: "dsMenuArticles",
+    allowUpdate: false,
+    allowInsert: false,
+    allowDelete: false,
+    dynamicLoading: false,
+    fields: [
+        { name: "ArticleId", type: "string", nullable: false },
+        { name: "Title", type: "string", nullable: true },
+        { name: "MenuGroup", type: "string", nullable: true },
+        { name: "Path", type: "string", nullable: true },
+    ],
+    parameters: {
+        maxRecords: -1,
+        whereClause: "ListOnFrontPage = 1 AND SysApp = 0 AND HideFromNav = 0 AND (IsPublishedVersion IS NULL OR IsPublishedVersion = 1) AND ISNULL(ParentArticleId, '') <> 'news'",
+        sortOrder: [{ MenuGroup: SortOrder.Asc }, { Title: SortOrder.Asc }],
+    },
+});
+function buildMuiTheme() {
+    const s = getComputedStyle(document.body);
+    const get = (v) => s.getPropertyValue(v).trim();
+    return muiCreateTheme({
+        palette: {
+            primary: {
+                main: get("--ds-color-brand-base-default") || "#116069",
+                dark: get("--ds-color-brand-base-hover") || "#0d4b52",
+                contrastText: get("--ds-color-brand-base-contrast-default") || "#ffffff",
+            },
+            secondary: {
+                main: get("--ds-color-brand-light-base-default") || "#1a95a2",
+            },
+        },
+        typography: {
+            fontFamily: [
+                "-apple-system",
+                "BlinkMacSystemFont",
+                '"Segoe UI"',
+                "Roboto",
+                '"Helvetica Neue"',
+                "Arial",
+                "sans-serif",
+                '"Apple Color Emoji"',
+                '"Segoe UI Emoji"',
+                '"Segoe UI Symbol"',
+            ].join(","),
+        },
+        components: {
+            MuiTypography: {
+                styleOverrides: {
+                    h1: { fontSize: "2.488rem" },
+                    h2: { fontSize: "2.074rem" },
+                    h3: { fontSize: "1.728rem" },
+                    h4: { fontSize: "1.44rem" },
+                    h5: { fontSize: "1.2rem" },
+                    h6: { fontSize: "1rem" },
+                },
+            },
+            MuiAppBar: {
+                styleOverrides: {
+                    root: {
+                        "& .MuiTypography-h1": {
+                            fontSize: "1.25rem",
+                            fontWeight: "500",
+                        },
+                    },
+                },
+            },
+            MuiButton: {
+                styleOverrides: {
+                    root: { borderRadius: 2 },
+                },
+            },
+            MuiDialogTitle: {
+                styleOverrides: {
+                    root: {
+                        fontSize: "1.2rem",
+                        fontWeight: 500,
+                        paddingLeft: 16,
+                        paddingRight: 16,
+                    },
+                },
+            },
+            MuiFormLabel: {
+                styleOverrides: {
+                    root: { color: "rgba(0, 0, 0, 0.72)" },
+                },
+            },
+            MuiTextField: { defaultProps: { variant: "filled" } },
+            MuiSelect: { defaultProps: { variant: "filled" } },
+            MuiFormControl: { defaultProps: { variant: "filled" } },
+        },
+    });
+}
+export function AppShell({ children }) {
+    const [theme, setTheme] = useState(() => buildMuiTheme());
+    // Re-read tokens after mount so CSS variables are fully resolved.
+    useEffect(() => {
+        setTheme(buildMuiTheme());
+    }, []);
+    const appMenuSlot = document.getElementById("ob-toolbar-app-menu");
+    return (_jsx(StyledEngineProvider, { injectFirst: true, children: _jsx(ThemeProvider, { theme: theme, children: _jsxs(AppErrorBoundary, { children: [appMenuSlot && createPortal(_jsx(AppMenu, { dataObject: dsMenuArticles }), appMenuSlot), children] }) }) }));
+}

package/es/components/Toolbar/Toolbar.css

@@ -0,0 +1,124 @@
+.ob-breadcrumbs {
+	display: flex;
+	align-items: center;
+	overflow: hidden;
+	width: 100%;
+	height: 100%;
+}
+
+.ob-breadcrumbs__list {
+	display: flex;
+	align-items: center;
+	list-style: none;
+	margin: 0;
+	padding: 0;
+	gap: var(--ds-space-100, 0.25rem);
+	flex-wrap: nowrap;
+	overflow: hidden;
+}
+
+.ob-breadcrumbs__item {
+	display: flex;
+	align-items: center;
+	font-size: var(--ds-font-size-100, 0.875rem);
+	white-space: nowrap;
+	color: var(--ds-text-subtle, currentColor);
+
+	a {
+		color: var(--ds-link-default, var(--ds-text-subtle, currentColor));
+		text-decoration: none;
+
+		&:hover {
+			text-decoration: underline;
+			color: var(--ds-link-default-hovered, var(--ds-text, currentColor));
+		}
+
+		&:focus-visible {
+			outline: 2px solid var(--ds-border-focused, currentColor);
+			outline-offset: 2px;
+			border-radius: var(--ds-border-radius-100, 2px);
+		}
+	}
+
+	&:not(:last-child)::after {
+		content: "/";
+		margin-inline-start: var(--ds-space-100, 0.25rem);
+		color: var(--ds-text-disabled, currentColor);
+		opacity: 0.5;
+	}
+
+	span[aria-current="page"] {
+		color: var(--ds-text, currentColor);
+		font-weight: var(--ds-font-weight-semibold, 500);
+	}
+}
+
+.ob-breadcrumbs__overflow {
+	position: relative;
+
+	button {
+		background: none;
+		border: 1px solid transparent;
+		border-radius: var(--ds-border-radius-100, 2px);
+		color: var(--ds-text-subtle, currentColor);
+		cursor: pointer;
+		font-size: var(--ds-font-size-100, 0.875rem);
+		line-height: 1;
+		padding: var(--ds-space-050, 0.125rem) var(--ds-space-150, 0.375rem);
+
+		&:hover {
+			background: var(--ds-background-neutral-default, rgba(0, 0, 0, 0.06));
+			border-color: var(--ds-border-default, transparent);
+			color: var(--ds-text, currentColor);
+		}
+
+		&:focus-visible {
+			outline: 2px solid var(--ds-border-focused, currentColor);
+			outline-offset: 2px;
+		}
+	}
+
+	&::after {
+		content: "/";
+		margin-inline-start: var(--ds-space-100, 0.25rem);
+		color: var(--ds-text-disabled, currentColor);
+		opacity: 0.5;
+	}
+}
+
+.ob-breadcrumbs__overflow-menu {
+	background: var(--ds-surface-overlay, #fff);
+	border: 1px solid var(--ds-border-default, currentColor);
+	border-radius: var(--ds-border-radius-100, 4px);
+	box-shadow: var(--ds-shadow-overlay, 0 4px 8px rgba(0, 0, 0, 0.16));
+	left: 0;
+	list-style: none;
+	margin: var(--ds-space-050, 0.25rem) 0 0;
+	min-width: 10rem;
+	padding: var(--ds-space-100, 0.25rem) 0;
+	position: absolute;
+	top: 100%;
+	z-index: var(--ds-z-index-modal, 400);
+
+	li {
+		a,
+		span {
+			color: var(--ds-text, inherit);
+			display: block;
+			font-size: var(--ds-font-size-100, 0.875rem);
+			padding: var(--ds-space-100, 0.25rem) var(--ds-space-200, 0.5rem);
+			text-decoration: none;
+			white-space: nowrap;
+
+			&:hover {
+				background: var(--ds-background-neutral-default, rgba(0, 0, 0, 0.06));
+				color: var(--ds-text, inherit);
+			}
+		}
+
+		a:focus-visible {
+			outline: 2px solid var(--ds-border-focused, currentColor);
+			outline-offset: -2px;
+		}
+	}
+}

package/es/components/Toolbar/index.d.ts

@@ -0,0 +1,15 @@
+import "./Toolbar.css";
+export type ToolbarPortalSlot = "breadcrumbs" | "search" | "actions";
+export type ToolbarPortalProps = {
+    slot: ToolbarPortalSlot;
+    children: React.ReactNode;
+};
+export declare function ToolbarPortal({ slot, children }: ToolbarPortalProps): import("react").ReactPortal | null;
+export type BreadcrumbItem = {
+    label: string;
+    href?: string;
+};
+export type ToolbarBreadcrumbsProps = {
+    items: BreadcrumbItem[];
+};
+export declare function ToolbarBreadcrumbs({ items }: ToolbarBreadcrumbsProps): import("react/jsx-runtime").JSX.Element;

package/es/components/Toolbar/index.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "./Toolbar.css";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+export function ToolbarPortal({ slot, children }) {
+    // Target element IDs: ob-toolbar-breadcrumbs, ob-toolbar-search, ob-toolbar-actions
+    const target = document.getElementById(`ob-toolbar-${slot}`);
+    if (!target)
+        return null;
+    return createPortal(children, target);
+}
+function BreadcrumbsInner({ items }) {
+    let [firstVisible, setFirstVisible] = useState(0);
+    let [overflowOpen, setOverflowOpen] = useState(false);
+    let navRef = useRef(null);
+    let listRef = useRef(null);
+    let overflowItemRef = useRef(null);
+    // Detect overflow: increment firstVisible until the list fits within the nav.
+    // Runs after every render so it keeps pushing items into overflow until the
+    // list stops overflowing or only the last item (current page) remains.
+    useLayoutEffect(() => {
+        let nav = navRef.current;
+        let list = listRef.current;
+        if (!nav || !list)
+            return;
+        if (list.scrollWidth > nav.clientWidth && firstVisible < items.length - 1) {
+            setFirstVisible((prev) => prev + 1);
+        }
+    });
+    // ResizeObserver resets firstVisible to 0 on container resize so that the
+    // overflow calculation starts fresh at the new container width.
+    useEffect(() => {
+        let nav = navRef.current;
+        if (!nav)
+            return;
+        let observer = new ResizeObserver(() => {
+            setFirstVisible(0);
+        });
+        observer.observe(nav);
+        return () => observer.disconnect();
+    }, []);
+    // Close the overflow dropdown when the user clicks outside of it.
+    useEffect(() => {
+        if (!overflowOpen)
+            return;
+        function handleClickOutside(event) {
+            if (overflowItemRef.current && !overflowItemRef.current.contains(event.target)) {
+                setOverflowOpen(false);
+            }
+        }
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => document.removeEventListener("mousedown", handleClickOutside);
+    }, [overflowOpen]);
+    let hiddenItems = items.slice(0, firstVisible);
+    let visibleItems = items.slice(firstVisible);
+    return (_jsx("nav", { className: "ob-breadcrumbs", "aria-label": "Breadcrumb", ref: navRef, children: _jsxs("ol", { className: "ob-breadcrumbs__list", ref: listRef, children: [firstVisible > 0 && (_jsxs("li", { className: "ob-breadcrumbs__item ob-breadcrumbs__overflow", ref: overflowItemRef, children: [_jsx("button", { type: "button", "aria-label": "Show hidden breadcrumbs", "aria-expanded": overflowOpen, "aria-haspopup": "true", onClick: () => setOverflowOpen((prev) => !prev), children: "\u2026" }), overflowOpen && (_jsx("ul", { className: "ob-breadcrumbs__overflow-menu", role: "menu", children: hiddenItems.map((item, index) => (_jsx("li", { role: "menuitem", children: item.href ? _jsx("a", { href: item.href, children: item.label }) : _jsx("span", { children: item.label }) }, index))) }))] })), visibleItems.map((item, index) => {
+                    let actualIndex = firstVisible + index;
+                    let isCurrent = actualIndex === items.length - 1;
+                    return (_jsx("li", { className: "ob-breadcrumbs__item", children: isCurrent ? (_jsx("span", { "aria-current": "page", children: item.label })) : item.href ? (_jsx("a", { href: item.href, children: item.label })) : (_jsx("span", { children: item.label })) }, actualIndex));
+                })] }) }));
+}
+export function ToolbarBreadcrumbs({ items }) {
+    return (_jsx(ToolbarPortal, { slot: "breadcrumbs", children: _jsx(BreadcrumbsInner, { items: items }) }));
+}

package/es/index.d.ts

@@ -1,3 +1,5 @@
+export { AppMenu, type AppMenuArticle, type AppMenuProps } from "./components/AppMenu/index.js";
+export { AppShell, type AppShellProps } from "./components/AppShell/index.js";
 export { Checkbox, type CheckboxProps } from "./components/Checkbox/index.js";
 export { CardColumn, CardDetail, CardLabel, CardStep, CardStepList, ColorCard } from "./components/ColorCard/index.js";
 export { DateNavigator } from "./components/DateNavigator/index.js";
@@ -8,6 +10,7 @@ export { MergeProgressDialog, type MergeProgressDialogProps } from "./components
 export { BannerImage as PageBannerImage, type BannerImageProps, PageBanner, type PageBannerProps, Tab as PageBannerTab, TabList as PageBannerTabList, type TabListProps as PageBannerTabListProps, type TabProps as PageBannerTabProps, Title as PageBannerTitle, type TitleProps as PageBannerTitleProps, } from "./components/PageBanner/index.js";
 export * from "./components/PdfViewer/index.js";
 export { Portal } from "./components/Portal/index.js";
+export { ToolbarBreadcrumbs, ToolbarPortal, type BreadcrumbItem, type ToolbarBreadcrumbsProps, type ToolbarPortalProps, type ToolbarPortalSlot, } from "./components/Toolbar/index.js";
 export { ProgressBar } from "./components/ProgressBar/index.js";
 export { Sidebar, type SidebarProps } from "./components/Sidebar/index.js";
 export { Spinner, type SpinnerProps } from "./components/Spinner/index.js";

package/es/index.js

@@ -1,3 +1,5 @@
+export { AppMenu } from "./components/AppMenu/index.js";
+export { AppShell } from "./components/AppShell/index.js";
 export { Checkbox } from "./components/Checkbox/index.js";
 export { CardColumn, CardDetail, CardLabel, CardStep, CardStepList, ColorCard } from "./components/ColorCard/index.js";
 export { DateNavigator } from "./components/DateNavigator/index.js";
@@ -8,6 +10,7 @@ export { MergeProgressDialog } from "./components/MergeProgressDialog/index.js";
 export { BannerImage as PageBannerImage, PageBanner, Tab as PageBannerTab, TabList as PageBannerTabList, Title as PageBannerTitle, } from "./components/PageBanner/index.js";
 export * from "./components/PdfViewer/index.js";
 export { Portal } from "./components/Portal/index.js";
+export { ToolbarBreadcrumbs, ToolbarPortal, } from "./components/Toolbar/index.js";
 export { ProgressBar } from "./components/ProgressBar/index.js";
 export { Sidebar } from "./components/Sidebar/index.js";
 export { Spinner } from "./components/Spinner/index.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olenbetong/synergi-react",
-  "version": "2.4.0",
+  "version": "2.5.1",
   "description": "Standalone React component for SynergiWeb and Partner Portal",
   "type": "module",
   "exports": {
@@ -22,6 +22,7 @@
   "author": "Bjørnar Vister Hansen <bvh@olenbetong.no>",
   "license": "MIT",
   "peerDependencies": {
+    "@mui/material": ">=9.0.0",
     "react": ">=18.2.0",
     "react-dom": ">=18.2.0"
   },
@@ -30,7 +31,7 @@
     "@emotion/styled": "^11.14.1",
     "clsx": "^2.1.1",
     "dynamsoft-javascript-barcode": "6.5.4",
-    "filepond": "^4.32.9",
+    "filepond": "^4.32.12",
     "filepond-plugin-file-poster": "^2.5.2",
     "filepond-plugin-image-exif-orientation": "^1.0.11",
     "filepond-plugin-image-preview": "^4.6.12",
@@ -39,11 +40,12 @@
     "localforage": "^1.10.0",
     "mitt": "^3.0.1",
     "pdf-lib": "^1.17.1",
-    "pdfjs-dist": "5.4.296",
-    "react-pdf": "^10.2.0",
+    "pdfjs-dist": "5.7.284",
+    "react-pdf": "^10.4.1",
     "@olenbetong/appframe-core": "2.11.10",
+    "@olenbetong/appframe-data": "1.5.0",
     "@olenbetong/appframe-react": "1.21.25",
-    "@olenbetong/appframe-mui": "6.1.0"
+    "@olenbetong/appframe-mui": "6.2.0"
   },
   "repository": {
     "type": "git",
@@ -57,8 +59,8 @@
     ]
   },
   "devDependencies": {
-    "react": "19.2.5",
-    "react-dom": "19.2.5",
+    "react": "19.2.6",
+    "react-dom": "19.2.6",
     "replace-in-files": "^3.0.0"
   },
   "optionalDependencies": {},