elbe-ui 2.0.10 → 2.0.12

package/dist/ui/app/app.d.ts

@@ -23,7 +23,8 @@ type AppProps = _AppProps & {
  * - `themeSelector` (function | undefined): An optional function to further customize the theme based on the current theme configuration.
  * - `routerConfig` (object | undefined): Configuration options for the router, such as basePath.
  * - `noGlobalStyles` (boolean | undefined): If true, global styles will not be applied to the document. Useful if you have multiple Elbe apps on the same page.
- * - `children` (ElbeRoute | ElbeRoute[] | undefined): The route components to be rendered within the application.
+ * - `children` (ElbeRoute | ElbeRoute[] | undefined): The route components to be rendered within the application. Pass
+ *   `MenuRoute` components here to define the application's routes and menu items. You may also wrap the menu routes Fragments (<></>).
  * - `globalActions` (ElbeChild[] | undefined): An array of global action components to be displayed in the application header.
  * - `footer` (ElbeChild | undefined): A footer component to be displayed at the bottom of the application.
  *

package/dist/ui/app/app.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo, useState } from "react";
 import { Box, DialogsProvider, isMenuRoute, omit, ToastProvider, Wouter, } from "../..";
 import { Menu } from "../components/layout/menu";
+import { unwrapFragments } from "../util/_util";
 import { AppContext } from "./app_ctxt";
 /** The main application component that sets up the application context, theme, and routing.
  * Render this component at the root of your application to initialize Elbe UI features:
@@ -17,7 +18,8 @@ import { AppContext } from "./app_ctxt";
  * - `themeSelector` (function | undefined): An optional function to further customize the theme based on the current theme configuration.
  * - `routerConfig` (object | undefined): Configuration options for the router, such as basePath.
  * - `noGlobalStyles` (boolean | undefined): If true, global styles will not be applied to the document. Useful if you have multiple Elbe apps on the same page.
- * - `children` (ElbeRoute | ElbeRoute[] | undefined): The route components to be rendered within the application.
+ * - `children` (ElbeRoute | ElbeRoute[] | undefined): The route components to be rendered within the application. Pass
+ *   `MenuRoute` components here to define the application's routes and menu items. You may also wrap the menu routes Fragments (<></>).
  * - `globalActions` (ElbeChild[] | undefined): An array of global action components to be displayed in the application header.
  * - `footer` (ElbeChild | undefined): A footer component to be displayed at the bottom of the application.
  *
@@ -76,12 +78,19 @@ function _App(p) {
         document.documentElement.style.backgroundColor = bg;
         document.body.style.backgroundColor = bg;
     }, [themeSelected, p.config.noGlobalStyles]);
-    const menuItems = useMemo(() => {
-        return _extractMenuItems(p.children);
-    }, [p.children]);
     const [location, navigate] = Wouter.useLocation();
     const [history, setHistory] = useState([_initialLocation()]);
     const [menuOpen, setMenuOpen] = useState(false);
+    const { children, menuItems } = useMemo(() => {
+        const childsOrFrags = Array.isArray(p.children)
+            ? p.children
+            : p.children
+                ? [p.children]
+                : [];
+        const children = unwrapFragments(childsOrFrags);
+        const menuItems = _extractMenuItems(children);
+        return { children, menuItems };
+    }, [p.children]);
     return (_jsx(p.themeContext.WithTheme, { theme: themeSelected, children: _jsx(AppContext.Provider, { value: {
                 appConfig: p.config,
                 _appThemeContext: p.themeContext,
@@ -118,14 +127,13 @@ function _App(p) {
                             display: "flex",
                             width: "100%",
                             minHeight: "100vh",
-                        }, children: [menuItems.length > 0 && _jsx(Menu, { items: menuItems }), _jsx("div", { style: { flex: 1, width: "0px" }, children: _jsx(Wouter.Switch, { children: p.children }) })] }) }) }) }) }));
+                        }, children: [menuItems.length > 0 && _jsx(Menu, { items: menuItems }), _jsx("div", { style: { flex: 1, width: "0px" }, children: _jsx(Wouter.Switch, { children: children }) })] }) }) }) }) }));
 }
 function _extractMenuItems(children) {
     if (!children)
         return [];
-    const childs = Array.isArray(children) ? children : [children];
     const items = [];
-    for (const child of childs) {
+    for (const child of children) {
         if (!isMenuRoute(child))
             continue;
         items.push(child.props);

package/dist/ui/app/app_ctxt.d.ts

@@ -3,7 +3,7 @@ import { ElbeThemeContext } from "../theme/theme_context";
 import { ElbeChild, ElbeChildren, int } from "../util/types";
 export type AppConfig = {
     title?: string;
-    icons?: HeaderLogos;
+    branding?: HeaderLogos;
     globalActions?: ElbeChild[];
     footer?: ElbeChildren | null;
     routerConfig?: {
@@ -32,6 +32,8 @@ export interface AppState {
     _appThemeContext: ElbeThemeContext;
 }
 export declare const AppContext: import("react").Context<AppState | null>;
-export declare function useApp(): AppState;
+export declare function useApp({ useFallback }?: {
+    useFallback?: boolean | undefined;
+}): AppState;
 export declare function useMaybeApp(): AppState | null;
 export {};

package/dist/ui/app/app_ctxt.js

@@ -1,9 +1,22 @@
 import { createContext, useContext } from "react";
+import { makeThemeContext } from "../theme/theme_context";
 import { throwError, tryOrNull } from "../util/util";
 export const AppContext = createContext(null);
-export function useApp() {
+const _fallbackAppContext = {
+    appConfig: {},
+    router: {
+        go: () => { },
+        goBack: () => { },
+        history: [],
+        location: "/",
+    },
+    _appThemeContext: makeThemeContext({}),
+};
+export function useApp({ useFallback = false } = {}) {
     var _a;
-    return ((_a = tryOrNull(() => useContext(AppContext))) !== null && _a !== void 0 ? _a : throwError("useApp must be used within an ElbeApp context. try using useMaybeApp()"));
+    return ((_a = tryOrNull(() => useContext(AppContext))) !== null && _a !== void 0 ? _a : (useFallback
+        ? _fallbackAppContext
+        : throwError("useApp must be used within an ElbeApp context. try using useMaybeApp() or useApp({ useFallback: true }) instead.")));
 }
 export function useMaybeApp() {
     return tryOrNull(() => useContext(AppContext));

package/dist/ui/components/base/box.js

@@ -61,7 +61,7 @@ Box.inverse = (p) => createElement(Box, Object.assign(Object.assign({}, p), { sc
  * @returns
  */
 export function _Box(p) {
-    const { _appThemeContext } = useApp();
+    const { _appThemeContext } = useApp({ useFallback: true });
     const usedTheme = _appThemeContext.useTheme().useWith(({ color }) => {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
         return {

package/dist/ui/components/base/card.js

@@ -18,7 +18,7 @@ import { WithTooltip } from "../tooltip";
 export function Card(_a) {
     var _b, _c;
     var { mode, scheme, kind, manner, state, padding = 1, margin = 0, onTap, onLongTap, frosted, bordered, elevated, sharp, overflow, children } = _a, elbe = __rest(_a, ["mode", "scheme", "kind", "manner", "state", "padding", "margin", "onTap", "onLongTap", "frosted", "bordered", "elevated", "sharp", "overflow", "children"]);
-    const { _appThemeContext } = useApp();
+    const { _appThemeContext } = useApp({ useFallback: true });
     const { theme } = _appThemeContext.useTheme();
     const isBordered = useMemo(() => {
         return (bordered !== null && bordered !== void 0 ? bordered : false) || theme.color.isContrast;
@@ -31,7 +31,7 @@ export function Card(_a) {
             ? "var(--elbe-context-color-border, transparent)"
             : undefined,
     };
-    return (_jsx(WithTooltip, { tooltip: elbe.tooltip, children: _jsx(_Box, { mode: mode, scheme: scheme, kind: kind, manner: manner, padding: padding, margin: margin, state: state, className: elbe.className, flex: elbe.flex, elevated: elevated, frosted: frosted, style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ overflow: overflow }, css.borderRadius(styles.radius)), css.borderStyle(styles.borderStyle)), css.borderWidth(styles.borderWidth)), css.borderColor(styles.borderColor)), { opacity: onTap === null ? 0.5 : 1 }), ((_b = elbe.style) !== null && _b !== void 0 ? _b : {})), native: Object.assign(Object.assign(Object.assign({}, (onTap !== undefined
+    return (_jsx(WithTooltip, { tooltip: elbe.tooltip, children: _jsx(_Box, { mode: mode, scheme: scheme, kind: kind, manner: manner, padding: padding, margin: margin, state: state, className: elbe.className, flex: elbe.flex, elevated: elevated, frosted: frosted, typeLabel: elbe.typeLabel, style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ overflow: overflow }, css.borderRadius(styles.radius)), css.borderStyle(styles.borderStyle)), css.borderWidth(styles.borderWidth)), css.borderColor(styles.borderColor)), { opacity: onTap === null ? 0.5 : 1 }), ((_b = elbe.style) !== null && _b !== void 0 ? _b : {})), native: Object.assign(Object.assign(Object.assign({}, (onTap !== undefined
                 ? {
                     onClick: (e) => {
                         e.preventDefault();

package/dist/ui/components/base/state_builder.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useState } from "react";
 import { useApp } from "../../app/app_ctxt";
 export function WithStateTheme(p) {
-    const { _appThemeContext } = useApp();
+    const { _appThemeContext } = useApp({ useFallback: true });
     const [elState, setElState] = useState("neutral");
     if (!p.theme) {
         console.error("WithStateTheme: No theme provided");

package/dist/ui/components/button/button.js

@@ -32,7 +32,7 @@ function _Btn(_a) {
     var _b, _c;
     var { manner, kind, onTap, icon, label, children, contentAlign } = _a, elbe = __rest(_a, ["manner", "kind", "onTap", "icon", "label", "children", "contentAlign"]);
     const toolbarCtx = useToolbar();
-    const { _appThemeContext } = useApp();
+    const { _appThemeContext } = useApp({ useFallback: true });
     const baseTheme = _appThemeContext.useTheme().useWith(({ color }) => ({
         color: Object.assign(Object.assign({}, color), { selection: Object.assign(Object.assign({}, color.selection), { kind: kind !== null && kind !== void 0 ? kind : color.selection.kind, manner: manner }) }),
     }), [kind, manner]);

package/dist/ui/components/button/icon_button.js

@@ -28,7 +28,7 @@ IconButton.plain = (p) => _jsx(_btn, Object.assign({}, p, { manner: "plain" }));
 function _btn(_a) {
     var _b;
     var { icon, onTap, manner } = _a, elbe = __rest(_a, ["icon", "onTap", "manner"]);
-    const { _appThemeContext } = useApp();
+    const { _appThemeContext } = useApp({ useFallback: true });
     const baseTheme = _appThemeContext.useTheme().useWith(({ color }) => {
         var _a, _b;
         return ({

package/dist/ui/components/button/toggle_button.js

@@ -20,7 +20,7 @@ import { Icon } from "./icon_button";
 export function ToggleButton(_a) {
     var _b;
     var { value, onChange, label, icon, kind } = _a, elbe = __rest(_a, ["value", "onChange", "label", "icon", "kind"]);
-    const { _appThemeContext } = useApp();
+    const { _appThemeContext } = useApp({ useFallback: true });
     const { theme } = _appThemeContext.useTheme();
     return (_jsxs(Button, Object.assign({ manner: value ? "major" : "flat", kind: kind, tooltip: elbe.tooltip, onTap: onChange && (() => onChange(!value)), ariaLabel: (_b = elbe.ariaLabel) !== null && _b !== void 0 ? _b : label, contentAlign: "space-between" }, applyProps("toggle_button", elbe, [], {
         overflow: "hidden",

package/dist/ui/components/dialog/dialog.d.ts

@@ -18,7 +18,7 @@ export type ElbeDialogProps = {
  * - `kind` (ColorSelection.KindsAlert | undefined): An optional kind to display an alert icon next to the title.
  * - `dismissible` ("none" | "button" | "barrier" | undefined): Controls how the dialog can be dismissed.
  *    - "none": The dialog cannot be dismissed by user actions.
- *    - "button": A close button is provided in the title bar.
+ *    - "button": A close button is provided in the title bar. (**DEFAULT**)
  *    - "barrier": Clicking outside the dialog will close it.
  *    Default is "button".
  * - `maxWidth` (number | undefined): The maximum width of the dialog in rem units. Defaults to 90vw if not provided.

package/dist/ui/components/dialog/dialog.js

@@ -34,7 +34,7 @@ export function elevatedBackdropStyle(open, theme, openMergeStyle) {
  * - `kind` (ColorSelection.KindsAlert | undefined): An optional kind to display an alert icon next to the title.
  * - `dismissible` ("none" | "button" | "barrier" | undefined): Controls how the dialog can be dismissed.
  *    - "none": The dialog cannot be dismissed by user actions.
- *    - "button": A close button is provided in the title bar.
+ *    - "button": A close button is provided in the title bar. (**DEFAULT**)
  *    - "barrier": Clicking outside the dialog will close it.
  *    Default is "button".
  * - `maxWidth` (number | undefined): The maximum width of the dialog in rem units. Defaults to 90vw if not provided.
@@ -55,7 +55,7 @@ export function elevatedBackdropStyle(open, theme, openMergeStyle) {
  */
 export function Dialog(_a) {
     var { dismissible = "button" } = _a, p = __rest(_a, ["dismissible"]);
-    const { _appThemeContext } = useApp();
+    const { _appThemeContext } = useApp({ useFallback: true });
     const theme = _appThemeContext.useTheme().useWith((c) => ({
         color: Object.assign(Object.assign({}, c.color), { selection: Object.assign(Object.assign({}, c.color.selection), { scheme: "primary", kind: "accent", manner: "plain", state: "neutral" }) }),
     }), []);

package/dist/ui/components/error_view.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { icons } from "lucide-react";
 import { useState } from "react";
-import { Card, Column, Dialog, Icon, Icons, toElbeError, Wouter, } from "../..";
+import { Button, Card, Column, Dialog, Icon, Icons, Text, toElbeError, } from "../..";
 import { _maybeL10n } from "../util/l10n/_l10n_util";
 /** * A component to display error messages in a user-friendly manner.
  *
@@ -45,9 +45,8 @@ export function PrettyErrorView({ error, retry, labels = {
         pt: "detalhes do erro",
     },
 }, }) {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     const l10n = _maybeL10n();
     const [open, setOpen] = useState(false);
-    const [loc, navigate] = Wouter.useLocation();
-    return (_jsxs(Column, { cross: "center", style: { margin: "1rem 0", padding: "1rem" }, children: [_jsx(Icon, { icon: (_a = error.icon) !== null && _a !== void 0 ? _a : icons.OctagonAlert }), _jsx("h4", { style: { margin: 0 }, children: (_b = l10n === null || l10n === void 0 ? void 0 : l10n.inline(error.message)) !== null && _b !== void 0 ? _b : "error" }), _jsx("span", { className: "pointer", onClick: () => setOpen(true), children: (_c = l10n === null || l10n === void 0 ? void 0 : l10n.inline(error.description)) !== null && _c !== void 0 ? _c : "" }), retry && (_jsxs("button", { className: "action", onClick: () => retry(), children: [_jsx(Icons.RotateCcw, {}), " ", (_d = l10n === null || l10n === void 0 ? void 0 : l10n.inline(labels.retry)) !== null && _d !== void 0 ? _d : "retry"] })), error.code === 404 && (_jsxs("button", { className: "action", onClick: () => navigate("/", { replace: true }), children: [_jsx(Icons.House, {}), (_e = l10n === null || l10n === void 0 ? void 0 : l10n.inline(labels.home)) !== null && _e !== void 0 ? _e : "go home"] })), _jsx(Dialog, { title: (_f = l10n === null || l10n === void 0 ? void 0 : l10n.inline(labels.details)) !== null && _f !== void 0 ? _f : "error details", open: open, onClose: () => setOpen(false), children: _jsx("pre", { className: "card inverse", children: `code: ${error.code}\n\n` + JSON.stringify(error.details, null, 2) }) })] }));
+    return (_jsxs(Column, { cross: "center", style: { margin: "1rem 0", padding: "1rem" }, children: [_jsx(Icon, { icon: (_a = error.icon) !== null && _a !== void 0 ? _a : icons.OctagonAlert }), _jsx(Text.h4, { v: (_b = l10n === null || l10n === void 0 ? void 0 : l10n.inline(error.message)) !== null && _b !== void 0 ? _b : "error" }), _jsx(Text, { align: "center", v: (_c = l10n === null || l10n === void 0 ? void 0 : l10n.inline(error.description)) !== null && _c !== void 0 ? _c : "", style: { cursor: "pointer" }, native: { onClick: () => setOpen(true) } }), retry && (_jsx(Button.flat, { ariaLabel: (_d = l10n === null || l10n === void 0 ? void 0 : l10n.inline(labels.retry)) !== null && _d !== void 0 ? _d : "retry", label: (_e = l10n === null || l10n === void 0 ? void 0 : l10n.inline(labels.retry)) !== null && _e !== void 0 ? _e : "retry", icon: Icons.RotateCcw, onTap: () => retry() })), error.code === 404 && (_jsx(Button.flat, { ariaLabel: (_f = l10n === null || l10n === void 0 ? void 0 : l10n.inline(labels.home)) !== null && _f !== void 0 ? _f : "go home", label: (_g = l10n === null || l10n === void 0 ? void 0 : l10n.inline(labels.home)) !== null && _g !== void 0 ? _g : "go home", icon: Icons.House, onTap: () => (window.location.href = "/") })), _jsx(Dialog, { title: (_h = l10n === null || l10n === void 0 ? void 0 : l10n.inline(labels.details)) !== null && _h !== void 0 ? _h : "error details", open: open, onClose: () => setOpen(false), children: _jsx("pre", { children: `code: ${error.code}\n\n` + JSON.stringify(error.details, null, 2) }) })] }));
 }

package/dist/ui/components/footer.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { HeartIcon } from "lucide-react";
 import { Card, Column, FlexSpace, Link, Row, Text, useLayoutMode, } from "../..";
+import { useApp } from "../app/app_ctxt";
 /**
  * Footer component. Can contain links, copyright info, version and legal link.
  *
@@ -13,14 +14,21 @@ import { Card, Column, FlexSpace, Link, Row, Text, useLayoutMode, } from "../.."
  * - `marginTop` (number): Margin top in rem units to add space above the footer.
  */
 export function Footer({ left, right, copyright, version, legal, marginTop, }) {
+    const app = useApp({ useFallback: true });
+    const { theme } = app._appThemeContext.useTheme();
     const layoutMode = useLayoutMode();
     return (_jsx(Card, { scheme: "secondary", sharp: true, role: "contentinfo", ariaLabel: "footer", style: {
             borderLeftStyle: "none",
             borderRightStyle: "none",
             borderBottomStyle: "none",
-            borderTopLeftRadius: layoutMode.isWide ? "var(--g-radius)" : undefined,
-            color: "color-mix(in srgb, var(--c-context-front) 60%, transparent)",
+            borderTopLeftRadius: layoutMode.isWide
+                ? `${theme.geometry.radius}rem`
+                : undefined,
+            /*color: theme.color.currentColor.front
+              .inter(theme.color.currentColor.back, 0.6)
+              .asCss(),*/
             marginTop: `${marginTop !== null && marginTop !== void 0 ? marginTop : 0}rem`,
+            marginLeft: layoutMode.isWide && !!app.menu ? "1rem" : undefined,
         }, children: _jsxs(Column, { gap: 1, children: [(left || right) && (_jsxs(Row, { main: "space-between", cross: "start", children: [left && (_jsx(Column, { gap: 0.5, flex: 1, cross: "start", children: left.map((item, i) => item.label ? _jsx(_Link, Object.assign({}, item), i) : item) })), right && (_jsx(Column, { gap: 0.5, flex: 1, cross: "end", children: right.map((item, i) => item.label ? _jsx(_Link, Object.assign({}, item), i) : item) }))] })), (left || right) && (copyright || version || legal) && _jsx("hr", {}), (copyright || version || legal) && (_jsxs(Row, { children: [copyright &&
                             (typeof copyright === "string" ? (_jsx(Text, { bold: true, v: copyright })) : (copyright)), version && _jsx(_Version, { version: version }), _jsx(FlexSpace, {}), legal && _jsx(_Link, Object.assign({}, legal))] }))] }) }));
 }

package/dist/ui/components/input/_labeled_input.js

@@ -11,7 +11,7 @@ import { WithTooltip } from "../tooltip";
  */
 export function LabeledInput(p) {
     var _a, _b;
-    const { _appThemeContext } = useApp();
+    const { _appThemeContext } = useApp({ useFallback: true });
     const baseTheme = _appThemeContext.useTheme();
     return (_jsx(WithTooltip, { tooltip: p.tooltip, children: _jsx(WithStateTheme, { disabled: (_a = p.disabled) !== null && _a !== void 0 ? _a : false, theme: baseTheme, manner: p.manner, children: _jsxs("div", Object.assign({}, applyProps(p.typeLabel, p, [], Object.assign({ flex: p.flex ? (p.flex === true ? 1 : p.flex) : undefined, width: p.flex ? undefined : ((_b = p.width) !== null && _b !== void 0 ? _b : 12) + "rem", display: "flex", flexDirection: "column", alignItems: "stretch" }, p.style)), { children: [_jsx("label", { htmlFor: p.id, style: {
                             display: p.hideLabel ? "none" : "block",

package/dist/ui/components/input/checkbox.js

@@ -17,7 +17,7 @@ import { WithTooltip } from "../tooltip";
  * - `manner` ("flat" | "plain" | undefined): The visual style of the checkbox when it is unchecked.
  */
 export function Checkbox(p) {
-    const { _appThemeContext } = useApp();
+    const { _appThemeContext } = useApp({ useFallback: true });
     const baseTheme = _appThemeContext.useTheme().useWith(({ color }) => {
         var _a;
         return ({

package/dist/ui/components/input/range.js

@@ -31,7 +31,7 @@ export function Range(p) {
 function _StyledRange(_a) {
     var _b, _c;
     var { min = 0, max = 100, step = 1, value, onChange } = _a, elbe = __rest(_a, ["min", "max", "step", "value", "onChange"]);
-    const { _appThemeContext } = useApp();
+    const { _appThemeContext } = useApp({ useFallback: true });
     const { theme } = _appThemeContext.useTheme().useWith((c) => ({
         color: Object.assign(Object.assign({}, c.color), { selection: Object.assign(Object.assign({}, c.color.selection), { manner: "major" }) }),
     }), []);

package/dist/ui/components/input/switch.js

@@ -17,7 +17,7 @@ import { WithTooltip } from "../tooltip";
  * - `manner` ("flat" | "plain" | undefined): The visual style of the switch when it is off.
  */
 export function Switch(p) {
-    const { _appThemeContext } = useApp();
+    const { _appThemeContext } = useApp({ useFallback: true });
     const baseTheme = _appThemeContext.useTheme().useWith(({ color }) => {
         var _a;
         return ({

package/dist/ui/components/input/text/input_field.js

@@ -92,7 +92,7 @@ export var Field;
 function _Field(p) {
     var _a, _b, _c, _d;
     {
-        const { _appThemeContext } = useApp();
+        const { _appThemeContext } = useApp({ useFallback: true });
         const usedTheme = _appThemeContext.useTheme();
         const id = (_a = p.id) !== null && _a !== void 0 ? _a : randomAlphaNum(8, "input_field_");
         const manner = (_b = p.manner) !== null && _b !== void 0 ? _b : "plain";

package/dist/ui/components/layout/header.d.ts

@@ -1,9 +1,12 @@
-import { ColorSelection, ElbeChild } from "../../..";
+import { ColorSelection, ElbeChild, remSize } from "../../..";
+/**
+ * props for the Header component. Provide logos to the application.
+ *
+ * You can provide either a custom ElbeChild component or use the AssetLogo component to display an image logo.
+ */
 export type HeaderLogos = {
-    logo?: string | ElbeChild;
-    logoDark?: string | ElbeChild;
-    endLogo?: string | ElbeChild;
-    endLogoDark?: string | ElbeChild;
+    logo?: ElbeChild;
+    endLogo?: ElbeChild;
 };
 export type HeaderProps = HeaderLogos & {
     leading?: ElbeChild | "back" | "close";
@@ -13,10 +16,34 @@ export type HeaderProps = HeaderLogos & {
     scheme?: ColorSelection.Schemes;
 };
 export declare function Header(p: HeaderProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Component to display an image logo from asset files.
+ *
+ * Props:
+ * - src: string - The source path for the light theme logo image.
+ * - srcDark?: string - Optional source path for the dark theme logo image.
+ * - onTap?: () => void - Optional callback function to be called when the logo is clicked.
+ * - height?: remSize - Optional height of the logo in rem units (default is 1.25rem).
+ *
+ * Example usage:
+ * ```tsx
+ * <AssetLogo
+ *   src="/assets/logo_light.png"
+ *   srcDark="/assets/logo_dark.png"
+ *   onTap={() => window.open("https://example.com", "_blank")}
+ *   height={2}
+ * />
+ * ```
+ */
+export declare function AssetLogo(p: {
+    src: string;
+    srcDark?: string;
+    onTap?: () => void;
+    height?: remSize;
+}): import("react/jsx-runtime").JSX.Element;
 export declare function _Logo(p: {
     flex?: boolean;
-    logo: string | ElbeChild;
-    logoDark?: string | ElbeChild | null;
+    logo: ElbeChild;
     lMargin?: number;
     rMargin?: number;
 }): import("react/jsx-runtime").JSX.Element | null;

package/dist/ui/components/layout/header.js

@@ -1,19 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ChevronLeft, MenuIcon, XIcon } from "lucide-react";
-import { useMemo, useState } from "react";
-import { Card, IconButton, Text, useLayoutMode, useSiteScroll, } from "../../..";
+import { useMemo } from "react";
+import { Card, IconButton, metaTagContent, Text, useLayoutMode, useSiteScroll, } from "../../..";
 import { useApp } from "../../app/app_ctxt";
 import { _Toolbar } from "./toolbar";
 export function Header(p) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
-    const { _appThemeContext, appConfig, menu } = useApp();
-    const { theme, useWith } = _appThemeContext.useTheme();
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    const gap = 1;
+    const { _appThemeContext, appConfig, menu } = useApp({ useFallback: true });
+    const { theme } = _appThemeContext.useTheme();
     const layoutMode = useLayoutMode();
     const scroll = useSiteScroll();
-    const secTheme = useWith((t) => ({
-        color: Object.assign(Object.assign({}, t.color), { selection: Object.assign(Object.assign({}, t.color.selection), { scheme: "secondary", manner: "plain" }) }),
-    }), [theme]);
-    return (_jsxs(Card, { padding: 0, scheme: (_a = p.scheme) !== null && _a !== void 0 ? _a : "primary", manner: "plain", frosted: !theme.color.isContrast, 
+    return (_jsxs(Card, { typeLabel: "elbe_header", padding: 0, scheme: (_a = p.scheme) !== null && _a !== void 0 ? _a : "primary", manner: "plain", frosted: !theme.color.isContrast, 
         //elevated={!!scroll}
         bordered: true, sharp: true, style: {
             position: "sticky",
@@ -27,39 +25,85 @@ export function Header(p) {
             borderTopStyle: "none",
             borderLeftStyle: "none",
             borderRightStyle: "none",
-            borderColor: theme.color.isContrast || scroll
+            borderBottomColor: theme.color.isContrast || scroll
                 ? theme.color.currentColor.border
                     .withAlpha(theme.color.isContrast ? 1 : 0.25)
                     .asCss()
                 : "transparent",
-            borderWidth: theme.geometry.borderWidth + "rem",
-            gap: "1rem",
+            borderBottomWidth: theme.geometry.borderWidth + "rem",
+            gap: `${gap}rem`,
             zIndex: 80,
-        }, children: [p.leading && p.leading !== "back" && p.leading !== "close"
-                ? p.leading
-                : !layoutMode.isWide &&
-                    menu && (_jsx(IconButton.plain, { ariaLabel: "open/close menu", onTap: () => menu.setOpen(!menu.isOpen), icon: MenuIcon })), p.leading === "back" && _jsx(BackButton, {}), p.leading === "close" && _jsx(BackButton, { close: true }), !layoutMode.isMobile && (_jsx(_Logo, { logo: (_b = p.logo) !== null && _b !== void 0 ? _b : (_c = appConfig === null || appConfig === void 0 ? void 0 : appConfig.icons) === null || _c === void 0 ? void 0 : _c.logo, logoDark: (_d = p.logoDark) !== null && _d !== void 0 ? _d : (_e = appConfig === null || appConfig === void 0 ? void 0 : appConfig.icons) === null || _e === void 0 ? void 0 : _e.logoDark, lMargin: 0.5 })), (!appConfig || layoutMode.isWide) && (_jsx("div", { style: { margin: "-1rem", width: "1.5rem" } })), _jsx(_HeaderTitle, { title: p.title, center: (_f = p.centerTitle) !== null && _f !== void 0 ? _f : false }), _jsx(_Toolbar, { actions: [...((_g = p.actions) !== null && _g !== void 0 ? _g : []), ...((_h = appConfig === null || appConfig === void 0 ? void 0 : appConfig.globalActions) !== null && _h !== void 0 ? _h : [])] }), layoutMode.isWide && (_jsx(_Logo, { logo: (_j = p.endLogo) !== null && _j !== void 0 ? _j : (_k = appConfig === null || appConfig === void 0 ? void 0 : appConfig.icons) === null || _k === void 0 ? void 0 : _k.endLogo, logoDark: (_l = p.endLogoDark) !== null && _l !== void 0 ? _l : (_m = appConfig === null || appConfig === void 0 ? void 0 : appConfig.icons) === null || _m === void 0 ? void 0 : _m.endLogoDark, rMargin: 0.5 }))] }));
+        }, children: [_jsx(_LeadingIcon, { leading: (_b = p.leading) !== null && _b !== void 0 ? _b : null, isWide: layoutMode.isWide, gap: gap }), !layoutMode.isMobile && (_jsx(_Logo, { logo: (_c = p.logo) !== null && _c !== void 0 ? _c : (_d = appConfig === null || appConfig === void 0 ? void 0 : appConfig.branding) === null || _d === void 0 ? void 0 : _d.logo })), _jsx(_HeaderTitle, { title: p.title, center: (_e = p.centerTitle) !== null && _e !== void 0 ? _e : false }), _jsx(_Toolbar, { actions: [...((_f = p.actions) !== null && _f !== void 0 ? _f : []), ...((_g = appConfig === null || appConfig === void 0 ? void 0 : appConfig.globalActions) !== null && _g !== void 0 ? _g : [])] }), layoutMode.isWide && (_jsx(_Logo, { logo: (_h = p.endLogo) !== null && _h !== void 0 ? _h : (_j = appConfig === null || appConfig === void 0 ? void 0 : appConfig.branding) === null || _j === void 0 ? void 0 : _j.endLogo, rMargin: 0.5 }))] }));
 }
-export function _Logo(p) {
+function _LeadingIcon(p) {
     var _a, _b;
-    const { _appThemeContext } = useApp();
+    const { router, menu } = useApp({ useFallback: true });
+    const canGoBack = ((_b = (_a = router.history) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) < 2;
+    // if leading is custom component, just return it
+    if (p.leading && typeof p.leading !== "string")
+        return p.leading;
+    // if you can go back and leading is "back" or "close", show it
+    if ((p.leading === "back" || p.leading === "close") && canGoBack) {
+        return _jsx(BackButton, { close: p.leading === "close" });
+    }
+    // if the layout is not wide and there is a menu, show menu button
+    if (!p.isWide && menu) {
+        return (_jsx(IconButton.plain, { ariaLabel: "open/close menu", onTap: () => menu.setOpen(!(menu === null || menu === void 0 ? void 0 : menu.isOpen)), icon: MenuIcon }));
+    }
+    // return a spacer so content is not squeezed to the left if there is no icon
+    return (_jsx("div", { style: {
+            marginRight: `-${p.gap}rem`,
+            width: ".5rem",
+        } }));
+}
+/**
+ * Component to display an image logo from asset files.
+ *
+ * Props:
+ * - src: string - The source path for the light theme logo image.
+ * - srcDark?: string - Optional source path for the dark theme logo image.
+ * - onTap?: () => void - Optional callback function to be called when the logo is clicked.
+ * - height?: remSize - Optional height of the logo in rem units (default is 1.25rem).
+ *
+ * Example usage:
+ * ```tsx
+ * <AssetLogo
+ *   src="/assets/logo_light.png"
+ *   srcDark="/assets/logo_dark.png"
+ *   onTap={() => window.open("https://example.com", "_blank")}
+ *   height={2}
+ * />
+ * ```
+ */
+export function AssetLogo(p) {
+    var _a;
+    const { _appThemeContext } = useApp({ useFallback: true });
     const { theme } = _appThemeContext.useTheme();
-    const [logo, setLogo] = useState(p.logo);
-    useMemo(() => { var _a; return setLogo(theme.color.isDark ? (_a = p.logoDark) !== null && _a !== void 0 ? _a : p.logo : p.logo); }, [theme]);
-    return !logo ? null : (_jsx("div", { style: {
+    const trueSrc = getTrueSrc(theme.color.isDark && p.srcDark ? p.srcDark : p.src);
+    return (_jsx("img", { src: trueSrc, onClick: (e) => {
+            var _a;
+            (_a = p.onTap) === null || _a === void 0 ? void 0 : _a.call(p);
+            e.preventDefault();
+            e.stopPropagation();
+        }, style: {
+            cursor: p.onTap ? "pointer" : "default",
+            height: `${(_a = p.height) !== null && _a !== void 0 ? _a : 1.25}rem`,
+        } }));
+}
+export function _Logo(p) {
+    var _a, _b;
+    return !p.logo ? null : (_jsx("div", { style: {
             flex: p.flex ? 1 : undefined,
             display: "flex",
             alignItems: "center",
             justifyContent: "center",
             marginLeft: `${(_a = p.lMargin) !== null && _a !== void 0 ? _a : 0}rem`,
             marginRight: `${(_b = p.rMargin) !== null && _b !== void 0 ? _b : 0}rem`,
-        }, children: typeof logo === "string" ? (_jsx("img", { src: logo, style: {
-                height: "1.25rem",
-            } })) : (logo) }));
+        }, children: p.logo }));
 }
 export function BackButton(p) {
     var _a, _b;
-    const { router } = useApp();
+    const { router } = useApp({ useFallback: true });
     const hidden = ((_b = (_a = router.history) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) < 2;
     return hidden ? null : (_jsx(IconButton.plain, { ariaLabel: p.close ? "close" : "go back", onTap: () => router.goBack(), icon: p.close ? XIcon : ChevronLeft }, "hello-back"));
 }
@@ -81,3 +125,10 @@ export function _HeaderTitle(p) {
                 left: globalCenter ? "50%" : "0",
             }, children: typeof p.title === "string" ? (_jsx(Text.h3, { align: p.center ? "center" : "start", v: p.title })) : (p.title) }) }));
 }
+function getTrueSrc(src) {
+    var _a;
+    const _basePath = (_a = metaTagContent("basepath")) !== null && _a !== void 0 ? _a : "/";
+    return src.startsWith("./") && typeof window !== "undefined"
+        ? window.location.origin + _basePath + src.slice(2)
+        : src;
+}

package/dist/ui/components/layout/menu.js

@@ -7,7 +7,7 @@ import { Card } from "../base/card";
 import { Button } from "../button/button";
 import { Column } from "./flex";
 export function Menu(p) {
-    const { _appThemeContext, menu } = useApp();
+    const { _appThemeContext, menu } = useApp({ useFallback: true });
     const { theme } = _appThemeContext.useTheme();
     const layoutMode = useLayoutMode();
     const isWideOrOpen = useMemo(() => {
@@ -42,8 +42,8 @@ export function Menu(p) {
                 })) }), _jsx(_Menu, { topBot: topBot, wideOrOpen: isWideOrOpen, menuWidth: menuWidth })] }));
 }
 function _Menu(p) {
-    var _a, _b;
-    const { _appThemeContext, menu, appConfig } = useApp();
+    var _a;
+    const { _appThemeContext, menu, appConfig } = useApp({ useFallback: true });
     const { theme } = _appThemeContext.useTheme();
     const layoutMode = useLayoutMode();
     if (!menu)
@@ -73,10 +73,10 @@ function _Menu(p) {
             transition: theme.motion.reduced ? "none" : "width 200ms ease-in-out",
         }, children: p.wideOrOpen && (_jsxs(_Fragment, { children: [_jsx(Button.plain, { sharp: layoutMode.isWide, contentAlign: "start", ariaLabel: "open/close menu", onTap: () => menu.setOpen(!menu.isOpen), icon: MenuIcon, style: {
                         marginBottom: ".5rem",
-                    }, children: !layoutMode.isWide && (_jsx(_Logo, { logo: (_a = appConfig.icons) === null || _a === void 0 ? void 0 : _a.logo, logoDark: (_b = appConfig.icons) === null || _b === void 0 ? void 0 : _b.logoDark, lMargin: 0.5 })) }), _jsx(Column, { flex: 1, scroll: true, noScrollbar: true, children: p.topBot.top.map((i, index) => (_jsx(_MenuItemView, { item: i }, index))) }), p.topBot.bottom.map((i, index) => (_jsx(_MenuItemView, { item: i }, index)))] })) }));
+                    }, children: !layoutMode.isWide && (_jsx(_Logo, { logo: (_a = appConfig.branding) === null || _a === void 0 ? void 0 : _a.logo, lMargin: 0.5 })) }), _jsx(Column, { flex: 1, scroll: true, noScrollbar: true, children: p.topBot.top.map((i, index) => (_jsx(_MenuItemView, { item: i }, index))) }), p.topBot.bottom.map((i, index) => (_jsx(_MenuItemView, { item: i }, index)))] })) }));
 }
 function _MenuItemView({ item }) {
-    const { menu, router } = useApp();
+    const { menu, router } = useApp({ useFallback: true });
     if (!menu)
         return null;
     return (_jsx(Button

package/dist/ui/components/layout/page.js

@@ -25,7 +25,7 @@ function _hasMoreThan(p, expected) {
  */
 export function Page(p) {
     var _a, _b;
-    const appConfig = useApp();
+    const appConfig = useApp({ useFallback: true });
     const hasHeader = _hasMoreThan(p, [
         "children",
         "footer",

package/dist/ui/components/layout/toolbar.js

@@ -32,7 +32,7 @@ export function _Toolbar(p) {
 }
 export function OverflowMenu(p) {
     var _a;
-    const { _appThemeContext } = useApp();
+    const { _appThemeContext } = useApp({ useFallback: true });
     const { theme } = _appThemeContext.useTheme();
     const [open, setOpen] = useState(false);
     return !((_a = p.items) === null || _a === void 0 ? void 0 : _a.length) ? null : (_jsxs("div", { style: {

package/dist/ui/components/link.js

@@ -19,7 +19,7 @@ import { WithTooltip } from "./tooltip";
  */
 export function Link(p) {
     var _a;
-    const { _appThemeContext } = useApp();
+    const { _appThemeContext } = useApp({ useFallback: true });
     const baseTheme = _appThemeContext.useTheme().useWith(({ color }) => {
         var _a;
         return ({

package/dist/ui/components/progress_bar.js

@@ -21,7 +21,7 @@ import { useApp } from "../app/app_ctxt";
  */
 export function ProgressBar(_a) {
     var { value, max = 100, manner = "flat" } = _a, elbe = __rest(_a, ["value", "max", "manner"]);
-    const { _appThemeContext } = useApp();
+    const { _appThemeContext } = useApp({ useFallback: true });
     const theme = _appThemeContext.useTheme().useWith(({ color }) => ({
         color: Object.assign(Object.assign({}, color), { selection: Object.assign(Object.assign({}, color.selection), { manner: manner }) }),
     }), [manner]);

package/dist/ui/components/routing/route.d.ts

@@ -26,5 +26,5 @@ export declare function MenuRoute(p: _MenuRouteProps): import("react/jsx-runtime
  * a helper function to create a <Wouter.Route> with a path.
  */
 export declare const Route: typeof Wouter.Route;
-export declare function isMenuRoute(r: ElbeRoute): r is React.ReactElement<_MenuRouteProps>;
+export declare function isMenuRoute(r: React.ReactNode): r is React.ReactElement<_MenuRouteProps>;
 export {};

package/dist/ui/components/routing/route.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
 import { Wouter } from "../../..";
 /**
  * a route that also renders a menu item in the <AppBase> component.
@@ -16,5 +17,11 @@ export function MenuRoute(p) {
  */
 export const Route = Wouter.Route;
 export function isMenuRoute(r) {
-    return "path" in r.props && "label" in r.props && "icon" in r.props;
+    // check if r is a React element with props path, label and icon
+    if (!React.isValidElement(r))
+        return false;
+    const rEl = r;
+    if (!rEl.props || typeof rEl.props !== "object")
+        return false;
+    return "path" in rEl.props && "label" in rEl.props && "icon" in rEl.props;
 }

package/dist/ui/components/section_card.js

@@ -28,13 +28,13 @@ import { useApp } from "../app/app_ctxt";
  */
 export function SectionCard(p) {
     var _a;
-    const _app = useApp();
+    const _app = useApp({ useFallback: true });
     const _appTheme = _app._appThemeContext.useTheme();
     const [collapsed, setCollapsed] = useState(p.collapsed);
     const [hintOpen, setHintOpen] = useState(false);
     return (_jsxs(Card, { bordered: p.bordered, style: {
             padding: `  ${1 - (p.bordered ? _appTheme.theme.geometry.borderWidth : 0)}rem`,
-        }, children: [_jsx(Dialog, { title: p.title + " - Info", open: hintOpen, onClose: () => setHintOpen(false), children: typeof p.hint === "string" ? (_jsx("div", { className: "elbe-hint-markdown", children: _jsx(Markdown, { children: p.hint, allowElement: () => true }) })) : (p.hint) }), _jsxs(Column, { children: [_jsxs(Card, { onTap: collapsed === undefined
+        }, children: [_jsx(Dialog, { title: p.title + " - Info", open: hintOpen, maxWidth: 35, onClose: () => setHintOpen(false), children: typeof p.hint === "string" ? (_jsx("div", { className: "elbe-hint-markdown", children: _jsx(Markdown, { children: p.hint, allowElement: () => true }) })) : (p.hint) }), _jsxs(Column, { children: [_jsxs(Card, { onTap: collapsed === undefined
                             ? undefined
                             : () => setCollapsed(!collapsed), margin: -1, padding: 1, className: collapsed === undefined ? undefined : "hoverable_card", style: {
                             border: "none",

package/dist/ui/components/spinner.js

@@ -19,7 +19,7 @@ function _toPath(c, yFac, yOffset = 0, clamp = [0, 1], xFac = 1) {
 export function Spinner(p) {
     var _a;
     const [x, setX] = useState(0);
-    const { _appThemeContext } = useApp();
+    const { _appThemeContext } = useApp({ useFallback: true });
     const theme = _appThemeContext.useTheme().useWith(({ color }) => {
         var _a;
         return ({

package/dist/ui/components/table.js

@@ -29,7 +29,7 @@ import { useApp } from "../app/app_ctxt";
  */
 export function Table(p) {
     var _a, _b;
-    const _app = useApp();
+    const _app = useApp({ useFallback: true });
     const _appTheme = _app._appThemeContext.useTheme();
     const themeSec = _appTheme.useWith(({ color }) => ({
         color: Object.assign(Object.assign({}, color), { selection: Object.assign(Object.assign({}, color.selection), { scheme: "secondary" }) }),

package/dist/ui/components/text.js

@@ -45,7 +45,7 @@ Text.defaultProps = {
     variant: "bodyM",
 };
 function _Text(p) {
-    const { _appThemeContext } = useApp();
+    const { _appThemeContext } = useApp({ useFallback: true });
     const usedTheme = _appThemeContext.useTheme();
     const tVariant = useMemo(() => {
         var _a;

package/dist/ui/components/tooltip.js

@@ -8,7 +8,7 @@ export function WithTooltip(p) {
     const timeoutRef = useRef(null);
     const [visible, setVisible] = useState(false);
     const [coords, setCoords] = useState({ x: 0, y: 0, top: false, left: false });
-    const { _appThemeContext } = useApp();
+    const { _appThemeContext } = useApp({ useFallback: true });
     const { theme } = _appThemeContext.useTheme().useWith((c) => ({
         color: Object.assign(Object.assign({}, c.color), { selection: Object.assign(Object.assign({}, c.color.selection), { scheme: "inverse", kind: "accent", manner: "plain", state: "neutral" }) }),
     }), []);

package/dist/ui/util/_util.d.ts

@@ -6,3 +6,5 @@ export declare namespace css {
     function borderWidth(v: React.CSSProperties["borderLeftWidth"] | undefined): React.CSSProperties;
     function borderColor(v: React.CSSProperties["borderLeftColor"] | undefined): React.CSSProperties;
 }
+export declare function isFragment(child: any): child is React.ReactElement;
+export declare function unwrapFragments(children: React.ReactNode): React.ReactNode[];

package/dist/ui/util/_util.js

@@ -1,3 +1,4 @@
+import React from "react";
 export function elevatedShadow(dark) {
     return `0px 0px .625rem -.125rem ${dark ? "#ffffff60" : "#00000060"}`;
 }
@@ -40,3 +41,14 @@ export var css;
     }
     css.borderColor = borderColor;
 })(css || (css = {}));
+export function isFragment(child) {
+    return React.isValidElement(child) && child.type === React.Fragment;
+}
+export function unwrapFragments(children) {
+    return React.Children.toArray(children).flatMap((child) => {
+        var _a, _b;
+        return isFragment(child)
+            ? React.Children.toArray((_b = (_a = child.props) === null || _a === void 0 ? void 0 : _a["children"]) !== null && _b !== void 0 ? _b : [])
+            : child;
+    });
+}

package/dist/ui/util/toast/toast_ctx.js

@@ -17,7 +17,7 @@ export function useToast() {
  * @returns a context provider for toast messages
  */
 export function ToastProvider(p) {
-    const { _appThemeContext } = useApp();
+    const { _appThemeContext } = useApp({ useFallback: true });
     const { theme } = _appThemeContext.useTheme();
     const rootDOM = useMemo(() => getRootElement("elbe_toast"), []);
     const [toasts, setToasts] = useState([]);

package/dist/ui/util/types.d.ts

@@ -9,3 +9,4 @@ export type ElbeChildren = ReactNode;
 export type s = string;
 export type n = number;
 export type b = boolean;
+export type remSize = float;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "elbe-ui",
-  "version": "2.0.10",
+  "version": "2.0.12",
   "author": "Robin Naumann",
   "license": "MIT",
   "repository": {
@@ -23,7 +23,7 @@
     "build:dts": "tsc --declaration",
     "build:css": "sass -q style/elbe-util.scss dist/elbe.css",
     "build": "rm -rf ./dist && bun run build:ts && bun run build:dts && bun run build:css ",
-    "dev": "bun run build && (cd example && bun run dev)",
+    "serve": "bun run build && (cd example && bun run dev)",
     "pub": "npm login && bun run build && npm publish && bun run pub:example",
     "pub:example": "bun run build && (cd example && bun run build) && open example/dist"
   },