@olenbetong/appframe-ds 0.2.0 → 0.3.0

package/es/layout/AppLayoutMobile.css

@@ -0,0 +1,75 @@
+.LayoutSmall-root:has(> .ObPageContainer-fullHeight, > .app-view) {
+	display: grid;
+	grid-template-rows: auto 1fr;
+	height: 100dvh;
+	overflow: hidden;
+}
+
+.partner-nav {
+	color: white;
+}
+
+/* Minimal toggle-only bar shown when there's a sidebar menu but no server AppBar */
+.LayoutSmall-menuBar {
+	display: flex;
+	align-items: center;
+	height: var(--navbar-height, 3.5rem);
+}
+
+.LayoutSmall-toggle {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: transparent;
+	border: none;
+	color: inherit;
+	cursor: pointer;
+	border-radius: 50%;
+	height: var(--navbar-height, 3.5rem);
+	width: var(--navbar-height, 3.5rem);
+	font-size: 1.5rem;
+	flex-shrink: 0;
+}
+
+.LayoutSmall-toggle:hover {
+	background-color: rgb(0 0 0 / 0.06);
+}
+
+/* Drawer overlay */
+.LayoutSmall-drawerOverlay {
+	position: fixed;
+	inset: 0;
+	background-color: rgb(0 0 0 / 50%);
+	z-index: 1199;
+	opacity: 0;
+	pointer-events: none;
+	transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.LayoutSmall-drawerOverlay.open {
+	opacity: 1;
+	pointer-events: auto;
+}
+
+/* Drawer panel */
+.LayoutSmall-drawer {
+	position: fixed;
+	top: 0;
+	left: 0;
+	bottom: 0;
+	max-width: 90%;
+	width: var(--navbar-drawer-width, 20rem);
+	z-index: 1200;
+	background-color: var(--ds-color-neutral-background-default, #fff);
+	box-shadow:
+		rgb(0 0 0 / 20%) 0px 8px 10px -5px,
+		rgb(0 0 0 / 14%) 0px 16px 24px 2px,
+		rgb(0 0 0 / 12%) 0px 6px 30px 5px;
+	transform: translateX(-100%);
+	transition: transform 225ms cubic-bezier(0, 0, 0.2, 1);
+	overflow: hidden;
+}
+
+.LayoutSmall-drawer.open {
+	transform: translateX(0);
+}

package/es/layout/AppLayoutMobile.d.ts

@@ -0,0 +1,3 @@
+import "./AppLayoutMobile.css";
+import type { AppLayoutProps } from "./index.js";
+export declare function AppLayoutMobile({ AppMenuProps, children, menu, partner }: AppLayoutProps): import("react/jsx-runtime").JSX.Element;

package/es/layout/AppLayoutMobile.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import "./AppLayoutMobile.css";
+import { useEffect, useState } from "react";
+import { useLocation } from "react-router";
+import { AppMenu } from "./AppMenu.js";
+import { PartnerToggle } from "./PartnerToggle.js";
+function Toggle({ onToggle }) {
+    return (_jsx("button", { type: "button", className: "LayoutSmall-toggle", onClick: onToggle, "aria-label": "Toggle menu", children: "\u2630" }));
+}
+export function AppLayoutMobile({ AppMenuProps, children, menu, partner }) {
+    let [drawerOpen, setDrawerOpen] = useState(false);
+    let location = useLocation();
+    // biome-ignore lint/correctness/useExhaustiveDependencies: close drawer on navigation
+    useEffect(() => {
+        setDrawerOpen(false);
+    }, [location]);
+    return (_jsxs("div", { className: "LayoutSmall-root", children: [partner && menu && (_jsx(PartnerToggle, { open: drawerOpen, onClick: () => setDrawerOpen((c) => !c) })), !partner && menu && (_jsx("div", { className: "LayoutSmall-menuBar", children: _jsx(Toggle, { onToggle: () => setDrawerOpen((c) => !c) }) })), menu && (_jsxs(_Fragment, { children: [_jsx("div", { className: `LayoutSmall-drawerOverlay${drawerOpen ? " open" : ""}`, onClick: () => setDrawerOpen(false), "aria-hidden": "true" }), _jsx("div", { className: `LayoutSmall-drawer AppMenu-drawer${drawerOpen ? " open" : ""}`, children: _jsx(AppMenu, { ...AppMenuProps, children: menu }) })] })), children] }));
+}

package/es/layout/AppMenu.css

@@ -0,0 +1,67 @@
+.AppMenu-header {
+	padding: 1rem;
+}
+
+.AppMenu-header .AppMenu-title {
+	font-weight: 500;
+	letter-spacing: -0.02rem;
+	font-size: var(--ds-font-size-xl, 1.5rem);
+	margin: 0;
+}
+
+.AppMenu-header .AppMenu-subTitle {
+	font-size: var(--ds-font-size-sm, 1.1rem);
+	margin: 0;
+	color: var(--ds-color-neutral-text-subtle, #555);
+}
+
+.AppMenu-divider {
+	border: none;
+	border-top: 1px solid var(--ds-color-neutral-border-default, #dfdfdf);
+	margin: 0;
+}
+
+.AppMenu-pendingCount {
+	color: var(--ds-color-neutral-text-subtle, #666) !important;
+	font-size: 0.8em;
+	font-weight: 700;
+	padding-right: 0.5rem;
+}
+
+.MenuItems-root {
+	overflow-y: auto;
+	scrollbar-width: thin;
+	scrollbar-color: var(--ds-color-neutral-border-default, #dfdfdf) transparent;
+}
+
+.MenuItems-root::-webkit-scrollbar {
+	width: 0.4rem;
+}
+
+.MenuItems-root::-webkit-scrollbar-button {
+	display: none;
+}
+
+.MenuItems-root::-webkit-scrollbar-thumb {
+	width: 0.4rem;
+	background-color: var(--ds-color-neutral-border-default, #dfdfdf);
+}
+
+.MenuItems-root .AppMenuList-nested .AppMenuItem-root {
+	padding-left: 3rem;
+	padding-block: 0.25rem;
+}
+
+.MenuItems-root .AppMenuList-nested .AppMenuItem-root .AppMenuItem-text {
+	font-size: 0.9rem;
+}
+
+.MenuItems-collapse {
+	margin-bottom: -0.5rem;
+	margin-top: -0.5rem;
+}
+
+.MenuItem-noWrap {
+	overflow: hidden;
+	white-space: nowrap;
+}

package/es/layout/AppMenu.d.ts

@@ -0,0 +1,8 @@
+import "./AppMenu.css";
+import type React from "react";
+export type AppMenuProps = Pick<React.HTMLProps<HTMLElement>, "aria-label" | "aria-labelledby" | "className" | "id"> & {
+    children?: React.ReactNode[] | React.ReactNode;
+    headerPrimary?: string;
+    headerSecondary?: string;
+};
+export declare function AppMenu({ children, className, headerPrimary, headerSecondary, ...props }: AppMenuProps): import("react/jsx-runtime").JSX.Element;

package/es/layout/AppMenu.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import "./AppMenu.css";
+import { getLocalizedString } from "@olenbetong/appframe-core";
+import clsx from "clsx";
+function MenuHeader({ primary, secondary }) {
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "AppMenu-header", children: [_jsx("h1", { className: "AppMenu-title", id: "NavigationHeader", children: primary }), secondary && _jsx("p", { className: "AppMenu-subTitle", children: secondary })] }), _jsx("hr", { className: "AppMenu-divider" })] }));
+}
+function handleKeyDown(evt) {
+    let nextElement = null;
+    let appMenu = evt.currentTarget;
+    if (!document.activeElement || !(appMenu instanceof HTMLElement) || !appMenu.contains(document.activeElement))
+        return;
+    let links = Array.from(appMenu.querySelectorAll("a, button"));
+    let currentIndex = links.indexOf(document.activeElement);
+    if (evt.key === "ArrowDown" || evt.key === "ArrowRight") {
+        if (currentIndex < links.length) {
+            nextElement = links[currentIndex + 1];
+        }
+    }
+    else if (evt.key === "ArrowUp" || evt.key === "ArrowLeft") {
+        if (currentIndex > 0) {
+            nextElement = links[currentIndex - 1];
+        }
+    }
+    else if (evt.key === "Home" || evt.key === "End") {
+        nextElement = links.at(evt.key === "Home" ? 0 : -1);
+    }
+    if (nextElement instanceof HTMLElement) {
+        evt.preventDefault();
+        nextElement.scrollIntoView({ block: "nearest" });
+        nextElement.focus();
+    }
+}
+export function AppMenu({ children, className, headerPrimary, headerSecondary, ...props }) {
+    return (_jsxs("nav", { "aria-labelledby": headerPrimary ? "NavigationHeader" : undefined, "aria-label": headerPrimary ? undefined : getLocalizedString("Application pages"), className: clsx(className, "MenuItems-root"), onKeyDown: handleKeyDown, ...props, children: [headerPrimary && _jsx(MenuHeader, { primary: headerPrimary, secondary: headerSecondary }), children] }));
+}

package/es/layout/AppMenuItem.css

@@ -0,0 +1,97 @@
+.AppMenuItem-root {
+	display: flex;
+	align-items: center;
+	position: relative;
+	border-radius: var(--ds-border-radius-md, 0.25rem);
+	overflow: hidden;
+	margin: 0.5rem;
+	padding: 0.5rem;
+	width: calc(100% - 1rem);
+	box-sizing: border-box;
+	text-decoration: none;
+	color: var(--ds-color-neutral-text-default, rgba(0, 0, 0, 0.87));
+	background: transparent;
+	border: none;
+	cursor: pointer;
+	font-family: inherit;
+	font-size: inherit;
+	text-align: left;
+}
+
+@media (pointer: fine) {
+	.AppMenuItem-root {
+		margin: 0.2rem 0.5rem;
+	}
+}
+
+.AppMenuItem-icon {
+	display: flex;
+	align-items: center;
+	min-width: 2.5rem;
+	color: inherit;
+	flex-shrink: 0;
+}
+
+.AppMenuItem-text {
+	flex: 1;
+	font-weight: 500;
+	color: var(--ds-color-neutral-text-default, rgba(0, 0, 0, 0.87));
+	min-width: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.AppMenuItem-info {
+	margin-left: auto;
+	flex-shrink: 0;
+}
+
+.AppMenuItem-root::before {
+	background-color: #000;
+	opacity: 0;
+	transition:
+		opacity 30ms linear,
+		background-color 30ms linear;
+	content: "";
+	position: absolute;
+	top: 0;
+	left: 0;
+	height: 100%;
+	width: 100%;
+	pointer-events: none;
+}
+
+.AppMenuItem-root:hover,
+.AppMenuItem-root:focus,
+.AppMenuItem-root:active {
+	text-decoration: none;
+	outline: none;
+}
+
+.AppMenuItem-root:hover::before {
+	opacity: 0.04;
+}
+
+.AppMenuItem-root:active::before {
+	opacity: 0.16;
+}
+
+.AppMenuItem-root.active::before,
+.AppMenuItem-root.active:hover::before {
+	background-color: var(--ds-color-brand-base-default, var(--brand-primary, #0062ba));
+	opacity: 0.16;
+}
+
+.AppMenuItem-root.active:hover::before {
+	opacity: 0.2;
+}
+
+.AppMenuItem-root.active:active::before {
+	opacity: 0.24;
+}
+
+.AppMenuItem-root.active .AppMenuItem-text,
+.AppMenuItem-root.active .AppMenuItem-icon {
+	color: var(--ds-color-brand-base-default, var(--brand-primary, #0062ba));
+}

package/es/layout/AppMenuItem.d.ts

@@ -0,0 +1,50 @@
+import "./AppMenuItem.css";
+import type { To } from "react-router";
+import { type NavLinkProps } from "react-router";
+import type React from "react";
+export type AppMenuItemProps = Omit<NavLinkProps, "className"> & {
+    children: React.ReactNode | React.ReactNode[];
+    info?: React.ReactNode | React.ReactNode[];
+    icon?: React.ReactNode;
+    onClick?: React.MouseEventHandler<HTMLAnchorElement>;
+    to: To;
+    end?: boolean;
+    className?: string;
+};
+export declare const AppMenuItem: React.ForwardRefExoticComponent<Omit<NavLinkProps, "className"> & {
+    children: React.ReactNode | React.ReactNode[];
+    info?: React.ReactNode | React.ReactNode[];
+    icon?: React.ReactNode;
+    onClick?: React.MouseEventHandler<HTMLAnchorElement>;
+    to: To;
+    end?: boolean;
+    className?: string;
+} & React.RefAttributes<HTMLAnchorElement>>;
+export type AppMenuItemExternalLinkProps = Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "href"> & {
+    children: React.ReactNode | React.ReactNode[];
+    info?: React.ReactNode | React.ReactNode[];
+    icon?: React.ReactNode;
+    href: string;
+    target?: string;
+};
+export declare const AppMenuItemExternalLink: React.ForwardRefExoticComponent<Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "href"> & {
+    children: React.ReactNode | React.ReactNode[];
+    info?: React.ReactNode | React.ReactNode[];
+    icon?: React.ReactNode;
+    href: string;
+    target?: string;
+} & React.RefAttributes<HTMLAnchorElement>>;
+export type AppMenuItemButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onClick"> & {
+    active?: boolean;
+    children: React.ReactNode | React.ReactNode[];
+    info?: React.ReactNode | React.ReactNode[];
+    icon?: React.ReactNode;
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+};
+export declare const AppMenuItemButton: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onClick"> & {
+    active?: boolean;
+    children: React.ReactNode | React.ReactNode[];
+    info?: React.ReactNode | React.ReactNode[];
+    icon?: React.ReactNode;
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+} & React.RefAttributes<HTMLButtonElement>>;

package/es/layout/AppMenuItem.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "./AppMenuItem.css";
+import clsx from "clsx";
+import { forwardRef } from "react";
+import { NavLink } from "react-router";
+export const AppMenuItem = forwardRef(function AppMenuItem({ children, className, end = true, info, to, icon, ...props }, ref) {
+    return (_jsxs(NavLink, { viewTransition: true, to: to, className: clsx("AppMenuItem-root", className), end: end, ...props, ref: ref, children: [icon && _jsx("span", { className: "AppMenuItem-icon", children: icon }), _jsx("span", { className: "AppMenuItem-text", children: children }), info && _jsx("span", { className: "AppMenuItem-info", children: info })] }));
+});
+export const AppMenuItemExternalLink = forwardRef(function AppMenuItemExternalLink({ children, className, href, info, icon, target, ...props }, ref) {
+    return (_jsxs("a", { href: href, className: clsx("AppMenuItem-root", className), target: target, ...props, ref: ref, children: [icon && _jsx("span", { className: "AppMenuItem-icon", children: icon }), _jsx("span", { className: "AppMenuItem-text", children: children }), info && _jsx("span", { className: "AppMenuItem-info", children: info })] }));
+});
+export const AppMenuItemButton = forwardRef(function AppMenuItemButton({ children, className, active = false, info, onClick, icon, ...props }, ref) {
+    return (_jsxs("button", { type: "button", onClick: onClick, className: clsx("AppMenuItem-root", className, active && "active"), ...props, ref: ref, children: [icon && _jsx("span", { className: "AppMenuItem-icon", children: icon }), _jsx("span", { className: "AppMenuItem-text", children: children }), info && _jsx("span", { className: "AppMenuItem-info", children: info })] }));
+});

package/es/layout/AppMenuSubheader.css

@@ -0,0 +1,18 @@
+.AppMenuSubheader-root {
+	font-size: var(--ds-font-size-xs, 0.75rem);
+	font-weight: 600;
+	letter-spacing: 0.08em;
+	text-transform: uppercase;
+	padding: 0.5rem 1rem;
+	color: var(--ds-color-neutral-text-subtle, #555);
+	background-color: var(--ds-color-neutral-background-default, transparent);
+	position: sticky;
+	top: 0;
+	z-index: 1;
+}
+
+@media (pointer: fine) {
+	.AppMenuSubheader-root {
+		line-height: 36px;
+	}
+}

package/es/layout/AppMenuSubheader.d.ts

@@ -0,0 +1,4 @@
+import "./AppMenuSubheader.css";
+import type React from "react";
+export type AppMenuSubheaderProps = React.HTMLAttributes<HTMLDivElement>;
+export declare function AppMenuSubheader({ children, className, ...props }: AppMenuSubheaderProps): import("react/jsx-runtime").JSX.Element;

package/es/layout/AppMenuSubheader.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "./AppMenuSubheader.css";
+import clsx from "clsx";
+export function AppMenuSubheader({ children, className, ...props }) {
+    return (_jsx("div", { className: clsx("AppMenuSubheader-root", className), ...props, children: children }));
+}

package/es/layout/ErrorBoundary.css

@@ -0,0 +1,101 @@
+.AppErrorBoundary-root {
+	height: 100vh;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.AppErrorBoundary-inner {
+	max-width: 36rem;
+	width: 100%;
+	margin: 0 auto;
+	padding: 1rem;
+	text-align: center;
+}
+
+.AppErrorBoundary-image {
+	opacity: 0.6;
+	max-height: 30vh;
+	max-width: 50vw;
+}
+
+.AppErrorBoundary-title {
+	margin-top: var(--ds-size-6, 1.5rem);
+	font-size: var(--ds-font-size-6, 1.5rem);
+	font-weight: 700;
+}
+
+.AppErrorBoundary-alert {
+	margin-block: var(--ds-size-6, 1.5rem);
+	background: var(--ds-color-danger-surface-default, #fde8e8);
+	color: var(--ds-color-danger-text-default, #c01c2c);
+	border: 1px solid var(--ds-color-danger-border-default, #f5a6ae);
+	border-radius: var(--ds-border-radius-md, 0.25rem);
+	padding: var(--ds-size-3, 0.75rem) var(--ds-size-4, 1rem);
+	text-align: left;
+}
+
+.AppErrorBoundary-message {
+	margin-bottom: var(--ds-size-6, 1.5rem);
+}
+
+.AppErrorBoundary-reload {
+	appearance: none;
+	border: 1px solid currentColor;
+	border-radius: var(--ds-border-radius-md, 0.25rem);
+	background: transparent;
+	color: inherit;
+	cursor: pointer;
+	font: inherit;
+	font-size: var(--ds-font-size-3, 1rem);
+	padding: var(--ds-size-2, 0.5rem) var(--ds-size-4, 1rem);
+	margin-block: var(--ds-size-6, 1.5rem);
+}
+
+.AppErrorBoundary-reload:hover {
+	background: rgb(0 0 0 / 0.05);
+}
+
+.ErrorAlertFallback-root {
+	display: flex;
+	align-items: flex-start;
+	gap: var(--ds-size-2, 0.5rem);
+	background: var(--ds-color-danger-surface-default, #fde8e8);
+	color: var(--ds-color-danger-text-default, #c01c2c);
+	border: 1px solid var(--ds-color-danger-border-default, #f5a6ae);
+	border-radius: var(--ds-border-radius-md, 0.25rem);
+	padding: var(--ds-size-3, 0.75rem) var(--ds-size-4, 1rem);
+}
+
+.ErrorAlertFallback-content {
+	flex: 1;
+}
+
+.ErrorAlertFallback-title {
+	font-weight: 600;
+	margin-bottom: var(--ds-size-1, 0.25rem);
+}
+
+.ErrorAlertFallback-reload {
+	appearance: none;
+	background: transparent;
+	border: none;
+	color: inherit;
+	cursor: pointer;
+	font: inherit;
+	font-weight: 600;
+	padding: 0;
+	text-decoration: underline;
+	flex-shrink: 0;
+}
+
+.RouteErrorPage-stack {
+	background: rgb(0 0 0 / 0.07);
+	border: 2px solid rgb(0 0 0 / 0.15);
+	border-radius: var(--ds-border-radius-md, 0.25rem);
+	padding: var(--ds-size-4, 1rem);
+	overflow-x: auto;
+	white-space: pre-wrap;
+	word-break: break-all;
+	font-size: var(--ds-font-size-1, 0.75rem);
+}

package/es/layout/ErrorBoundary.d.ts

@@ -0,0 +1,30 @@
+import "./ErrorBoundary.css";
+import type { DataObject } from "@olenbetong/appframe-data";
+import { Component } from "react";
+export type AppErrorBoundaryProps = {
+    children?: React.ReactNode;
+    message?: string | ((error: unknown) => string);
+    imgSrc?: string;
+    image?: React.ReactNode;
+};
+type AppErrorBoundaryState = {
+    hasError: boolean;
+    error: unknown;
+};
+export declare class AppErrorBoundary extends Component<AppErrorBoundaryProps, AppErrorBoundaryState> {
+    constructor(props: AppErrorBoundaryProps);
+    static getDerivedStateFromError(error: unknown): AppErrorBoundaryState;
+    componentDidCatch(error: unknown, errorInfo: unknown): void;
+    render(): React.ReactNode;
+}
+export type ErrorAlertFallbackProps = {
+    error: unknown;
+    className?: string;
+};
+export declare function ErrorAlertFallback({ error, className }: ErrorAlertFallbackProps): import("react/jsx-runtime").JSX.Element;
+export declare function RouteErrorPage(): import("react/jsx-runtime").JSX.Element;
+export declare function AsyncErrorAlert(): import("react/jsx-runtime").JSX.Element;
+export declare function DataObjectErrorAlert({ dataObject }: {
+    dataObject: DataObject<any>;
+}): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/es/layout/ErrorBoundary.js

@@ -0,0 +1,81 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "./ErrorBoundary.css";
+import { getLocalizedString } from "@olenbetong/appframe-core";
+import { useError } from "@olenbetong/appframe-react";
+import { Component, useEffect } from "react";
+import { useAsyncError, useRouteError } from "react-router";
+import { PageContainer } from "./PageContainer.js";
+function parseError(error) {
+    let message = "Unspecified error";
+    let stackTrace = null;
+    let title = getLocalizedString("Unexpected application error");
+    if (typeof error === "string") {
+        message = error;
+    }
+    else if (error && typeof error === "object") {
+        const err = error;
+        if (err.status) {
+            title = `${err.status} ${err.statusText}`;
+            message = err.message ?? "";
+        }
+        else if (err.message) {
+            message = err.message;
+            if (err.type) {
+                message = `${err.type}: ${message}`;
+            }
+        }
+        else {
+            message = String(error);
+        }
+        if (err.stack || err.stackTrace) {
+            stackTrace = err.stack ?? err.stackTrace;
+        }
+    }
+    return { message, stackTrace, title };
+}
+export class AppErrorBoundary extends Component {
+    constructor(props) {
+        super(props);
+        this.state = { hasError: false, error: null };
+    }
+    static getDerivedStateFromError(error) {
+        return { hasError: true, error };
+    }
+    componentDidCatch(error, errorInfo) {
+        console.error(error, errorInfo);
+    }
+    render() {
+        if (this.state.hasError) {
+            const { imgSrc, message, image } = this.props;
+            const { message: errorMessage } = parseError(this.state.error);
+            const customMessage = typeof message === "function" ? message(this.state.error) : message;
+            return (_jsx("div", { className: "AppErrorBoundary-root", children: _jsxs("div", { className: "AppErrorBoundary-inner", children: [image ?? (_jsx("img", { alt: "", src: imgSrc ?? "/file/site/graphic/error-broken-robot.svg", className: "AppErrorBoundary-image" })), _jsx("h1", { className: "AppErrorBoundary-title", children: getLocalizedString("Something went terribly wrong!") }), _jsx("div", { className: "AppErrorBoundary-alert", children: errorMessage }), _jsx("p", { className: "AppErrorBoundary-message", children: customMessage ??
+                                getLocalizedString("Sometimes it is enough to simply refresh the page. If the error persists, contact the IT department.") }), _jsx("button", { type: "button", className: "AppErrorBoundary-reload", onClick: () => window.location.reload(), children: getLocalizedString("Refresh page") })] }) }));
+        }
+        return this.props.children;
+    }
+}
+export function ErrorAlertFallback({ error, className }) {
+    const message = error instanceof Error ? error.message : String(error);
+    return (_jsxs("div", { className: `ErrorAlertFallback-root${className ? ` ${className}` : ""}`, children: [_jsxs("div", { className: "ErrorAlertFallback-content", children: [_jsx("p", { className: "ErrorAlertFallback-title", children: getLocalizedString("An error occured. Try refreshing the page") }), _jsx("p", { children: message })] }), _jsx("button", { type: "button", className: "ErrorAlertFallback-reload", onClick: () => window.location.reload(), children: getLocalizedString("Reload page") })] }));
+}
+// ── RouteErrorPage ────────────────────────────────────────────────────────────
+export function RouteErrorPage() {
+    const error = useRouteError();
+    const { message, stackTrace, title } = parseError(error);
+    useEffect(() => {
+        globalThis.af?.common?.logError?.(error);
+    }, [error]);
+    return (_jsxs(PageContainer, { className: "flow", children: [_jsx("h1", { children: title }), message && _jsx("p", { children: message }), stackTrace && _jsx("pre", { className: "RouteErrorPage-stack", children: stackTrace })] }));
+}
+// ── AsyncErrorAlert ───────────────────────────────────────────────────────────
+export function AsyncErrorAlert() {
+    const error = useAsyncError();
+    const message = typeof error === "string" ? error : error?.message;
+    return _jsx("div", { className: "ErrorAlertFallback-root", children: message });
+}
+// ── DataObjectErrorAlert ──────────────────────────────────────────────────────
+export function DataObjectErrorAlert({ dataObject }) {
+    const error = useError(dataObject);
+    return error ? _jsx("div", { className: "ErrorAlertFallback-root", children: error }) : null;
+}

package/es/layout/PageContainer.css

@@ -0,0 +1,29 @@
+@media screen {
+	.ObPageContainer-root {
+		max-height: 100%;
+		overflow: auto;
+		height: auto;
+	}
+
+	.ObPageContainer-root.ObPageContainer-fullHeight {
+		height: 100%;
+	}
+
+	.ObPageContainer-inner {
+		margin-left: 0;
+		height: auto;
+		padding: 1rem;
+		box-sizing: border-box;
+		max-width: 100%;
+	}
+
+	.ObPageContainer-fullHeight .ObPageContainer-inner {
+		height: 100%;
+	}
+}
+
+@media screen and (min-width: 600px) {
+	.ObPageContainer-inner {
+		padding: 1rem 1.5rem;
+	}
+}

package/es/layout/PageContainer.d.ts

@@ -0,0 +1,7 @@
+import "./PageContainer.css";
+import type React from "react";
+export type PageContainerProps = React.HTMLAttributes<HTMLDivElement> & {
+    fullHeight?: boolean;
+    maxWidth?: "xs" | "sm" | "md" | "lg" | "xl" | false;
+};
+export declare function PageContainer({ children, className, fullHeight, maxWidth, ...props }: PageContainerProps): import("react/jsx-runtime").JSX.Element;

package/es/layout/PageContainer.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "./PageContainer.css";
+import clsx from "clsx";
+export function PageContainer({ children, className, fullHeight, maxWidth, ...props }) {
+    return (_jsx("div", { className: clsx("ObPageContainer-root", fullHeight && "ObPageContainer-fullHeight"), children: _jsx("div", { className: clsx("ObPageContainer-inner", className), ...props, children: children }) }));
+}

package/es/layout/PartnerToggle.d.ts

@@ -0,0 +1,5 @@
+import type React from "react";
+export declare function PartnerToggle({ onClick, open, }: {
+    open: boolean;
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+}): React.ReactNode;