elbe-ui 2.0.11 → 2.0.15

package/dist/bit/_bit_provider.js

@@ -84,7 +84,7 @@ export function _makeBitProvider(context, bitP) {
                         if (streamCancel)
                             streamCancel();
                         const cancel = _bit.stream(p, _partCtrl);
-                        setStreamCancel(() => cancel);
+                        setStreamCancel(() => cancel());
                         return;
                     }
                     catch (e) {
@@ -107,14 +107,14 @@ export function _makeBitProvider(context, bitP) {
                 if (state.v.type === "data") {
                     return _isFn(onData)
                         ? onData(state.v.value)
-                        : (_a = onData) !== null && _a !== void 0 ? _a : null;
+                        : ((_a = onData) !== null && _a !== void 0 ? _a : null);
                 }
                 if (state.v.type === "error") {
                     return _isFn(onError)
                         ? onError(state.v.value)
-                        : (_b = onError) !== null && _b !== void 0 ? _b : null;
+                        : ((_b = onError) !== null && _b !== void 0 ? _b : null);
                 }
-                return _isFn(onLoading) ? onLoading() : (_c = onLoading) !== null && _c !== void 0 ? _c : null;
+                return _isFn(onLoading) ? onLoading() : ((_c = onLoading) !== null && _c !== void 0 ? _c : null);
             }
             function mapUI(onData, onError, onLoading) {
                 return map((d) => onData(d), (e) => (onError !== null && onError !== void 0 ? onError : ((e) => _jsx(ErrorView, { error: e, retry: () => _reload(false) })))(e), () => (onLoading !== null && onLoading !== void 0 ? onLoading : (() => _jsx(_LoadView, {})))());

package/dist/index.d.ts

@@ -47,7 +47,9 @@ export * from "./ui/components/section_card";
 export * from "./ui/components/spinner";
 export * from "./ui/components/table";
 export * from "./ui/components/text";
+export * from "./ui/components/tooltip";
 export * from "./ui/app/app";
+export * from "./ui/app/app_ctxt";
 export * from "./ui/components/dev/todo";
 export * from "./ui/theme/subthemes/color/colors/colors";
 export * from "./ui/theme/theme";

package/dist/index.js

@@ -49,7 +49,9 @@ export * from "./ui/components/section_card";
 export * from "./ui/components/spinner";
 export * from "./ui/components/table";
 export * from "./ui/components/text";
+export * from "./ui/components/tooltip";
 export * from "./ui/app/app";
+export * from "./ui/app/app_ctxt";
 export * from "./ui/components/dev/todo";
 export * from "./ui/theme/subthemes/color/colors/colors";
 export * from "./ui/theme/theme";

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

@@ -1,7 +1,8 @@
 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 { Box, DialogsProvider, Icons, isMenuRoute, omit, PrettyErrorView, Route, ToastProvider, WithL10nOrDefault, 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,59 +78,81 @@ 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);
-    return (_jsx(p.themeContext.WithTheme, { theme: themeSelected, children: _jsx(AppContext.Provider, { value: {
-                appConfig: p.config,
-                _appThemeContext: p.themeContext,
-                router: {
-                    goBack: (steps = 1) => {
-                        if (history.length === 0)
-                            return;
-                        const targetIndex = Math.max(0, history.length - 1 - steps);
-                        const target = history[targetIndex];
-                        setHistory((h) => h.slice(0, targetIndex + 1));
-                        navigate(target, { replace: true });
-                    },
-                    go: (p, replace) => {
-                        setHistory((h) => {
-                            if (replace === "all")
-                                return [p];
-                            const repl = Math.max(0, replace !== null && replace !== void 0 ? replace : 0);
-                            if (repl === 0)
-                                return [...h, p];
-                            return [...h.slice(0, -repl), p];
-                        });
-                        navigate(p, { replace: (replace !== null && replace !== void 0 ? replace : 0) !== 0 });
-                    },
-                    history: history,
-                    location: location,
-                },
-                menu: menuItems.length === 0
-                    ? undefined
-                    : {
-                        isOpen: menuOpen,
-                        setOpen: (s) => setMenuOpen(s),
+    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(WithL10nOrDefault, { children: _jsx(AppContext.Provider, { value: {
+                    appConfig: p.config,
+                    _appThemeContext: p.themeContext,
+                    router: {
+                        goBack: (steps = 1) => {
+                            if (history.length === 0)
+                                return;
+                            const targetIndex = Math.max(0, history.length - 1 - steps);
+                            const target = history[targetIndex];
+                            setHistory((h) => h.slice(0, targetIndex + 1));
+                            navigate(target, { replace: true });
+                        },
+                        go: (p, replace) => {
+                            setHistory((h) => {
+                                if (replace === "all")
+                                    return [p];
+                                const repl = Math.max(0, replace !== null && replace !== void 0 ? replace : 0);
+                                if (repl === 0)
+                                    return [...h, p];
+                                return [...h.slice(0, -repl), p];
+                            });
+                            navigate(p, { replace: (replace !== null && replace !== void 0 ? replace : 0) !== 0 });
+                        },
+                        history: history,
+                        location: location,
                     },
-            }, children: _jsx(ToastProvider, { children: _jsx(DialogsProvider, { children: _jsxs(Box, { typeLabel: "app_base", scheme: "primary", style: {
-                            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 }) })] }) }) }) }) }));
+                    menu: menuItems.length === 0
+                        ? undefined
+                        : {
+                            isOpen: menuOpen,
+                            setOpen: (s) => setMenuOpen(s),
+                        },
+                }, children: _jsx(ToastProvider, { children: _jsx(DialogsProvider, { children: _jsxs(Box, { typeLabel: "app_base", scheme: "primary", style: {
+                                display: "flex",
+                                width: "100%",
+                                minHeight: "100vh",
+                            }, children: [menuItems.length > 0 && _jsx(Menu, { items: menuItems }), _jsx("div", { style: {
+                                        flex: 1,
+                                        width: "0px",
+                                        display: "flex",
+                                        flexDirection: "column",
+                                    }, children: _jsxs(Wouter.Switch, { children: [children, ",", _jsx(_404Route, {})] }) })] }) }) }) }) }) }));
 }
 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);
     }
     return items;
 }
+function _404Route() {
+    return (_jsx(Route, { path: "*", children: _jsx(PrettyErrorView, { flex: true, error: {
+                icon: Icons.Frown,
+                code: "404",
+                message: "404 - Not Found",
+                description: "The requested page could not be found.",
+            }, retry: () => {
+                //set browser location to / manuall:
+                window.location.href = "/";
+            } }) }));
+}

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 ({
@@ -45,7 +45,7 @@ function _btn(_a) {
                 borderRadius: elbe.sharp ? 0 : "3rem",
                 height: "3rem",
                 width: "3rem",
-            }), { title: elbe.tooltip ? undefined : (_b = elbe.ariaLabel) !== null && _b !== void 0 ? _b : undefined, onClick: (e) => {
+            }), { title: elbe.tooltip ? undefined : ((_b = elbe.ariaLabel) !== null && _b !== void 0 ? _b : undefined), onClick: (e) => {
                     e.stopPropagation();
                     onTap && onTap(e);
                 }, children: _jsx(Icon, { icon: icon }) })) }) }));

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.js

@@ -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.d.ts

@@ -11,7 +11,7 @@ export declare function ErrorView({ error, retry, debug, }: {
     retry?: () => any;
     debug?: boolean;
 }): import("react/jsx-runtime").JSX.Element;
-export declare function PrettyErrorView({ error, retry, labels, }: {
+export declare function PrettyErrorView({ error, retry, labels, flex, }: {
     error: ElbeError;
     retry?: () => any;
     labels?: {
@@ -19,4 +19,5 @@ export declare function PrettyErrorView({ error, retry, labels, }: {
         home?: L10nInlinePlain;
         details: L10nInlinePlain;
     };
+    flex?: boolean;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/error_view.js

@@ -44,9 +44,9 @@ export function PrettyErrorView({ error, retry, labels = {
         it: "dettagli dell'errore",
         pt: "detalhes do erro",
     },
-}, }) {
+}, flex = false, }) {
     var _a, _b, _c, _d, _e, _f, _g, _h;
     const l10n = _maybeL10n();
     const [open, setOpen] = useState(false);
-    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) }) })] }));
+    return (_jsxs(Column, { cross: "center", main: "center", flex: flex, 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.color.isContrast
+                ? `${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/flex.js

@@ -38,5 +38,7 @@ function _FlexLayout(row, p, elbe, wraps) {
         overflowX: !row ? undefined : p.scroll ? "auto" : undefined,
         overflowY: row ? undefined : p.scroll ? "auto" : undefined,
         flex: ((_c = elbe.flex) !== null && _c !== void 0 ? _c : p.scroll) ? 1 : undefined,
+        minWidth: 0,
+        minHeight: 0,
     }), { children: p.children })));
 }

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,16 +28,19 @@ 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",
+                            borderLeftStyle: "none",
+                            borderTopStyle: "none",
+                            borderRightStyle: "none",
+                            borderBottomStyle: "none",
                             display: "flex",
                             alignItems: "center",
                             backgroundColor: "transparent",

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.d.ts

@@ -1,5 +1,8 @@
 import { ElbeChildren } from "../util/types";
 export declare function WithTooltip(p: {
-    tooltip?: string;
+    tooltip?: string | ElbeChildren;
+    delay?: number;
+    alignHorizontal?: "left" | "center" | "right" | "auto";
+    alignVertical?: "top" | "center" | "bottom" | "auto";
     children?: ElbeChildren;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/tooltip.js

@@ -8,14 +8,41 @@ 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" }) }),
     }), []);
+    const align = useMemo(() => {
+        var _a, _b;
+        let xVals = { xOffset: -12, xTransform: "-100%" };
+        let yVals = { yOffset: -12, yTransform: "-100%" };
+        let xAlign = (_a = p.alignHorizontal) !== null && _a !== void 0 ? _a : "auto";
+        let yAlign = (_b = p.alignVertical) !== null && _b !== void 0 ? _b : "auto";
+        // if center-center, align above cursor to avoid covering it
+        if (xAlign === "center" && yAlign === "center") {
+            console.warn("Center-Center alignment may cause the tooltip" +
+                " to cover the cursor. Aligning to top-center instead.");
+            yAlign = "top";
+        }
+        if (xAlign === "auto")
+            xAlign = coords.left ? "right" : "left";
+        if (yAlign === "auto")
+            yAlign = coords.top ? "bottom" : "top";
+        if (xAlign === "center")
+            xVals = { xOffset: 0, xTransform: "-50%" };
+        if (xAlign === "right")
+            xVals = { xOffset: 12, xTransform: "0%" };
+        if (yAlign === "center")
+            yVals = { yOffset: 0, yTransform: "-50%" };
+        if (yAlign === "bottom")
+            yVals = { yOffset: 12, yTransform: "0%" };
+        return Object.assign(Object.assign({}, xVals), yVals);
+    }, [p.alignHorizontal, coords.left]);
     if (!p.tooltip)
         return _jsx(_Fragment, { children: p.children });
     return (_jsxs("span", { onMouseEnter: () => {
-            timeoutRef.current = window.setTimeout(() => setVisible(true), 1000);
+            var _a;
+            timeoutRef.current = window.setTimeout(() => setVisible(true), (_a = p.delay) !== null && _a !== void 0 ? _a : 1000);
         }, onMouseLeave: () => {
             console.log("leave");
             if (timeoutRef.current) {
@@ -31,18 +58,14 @@ export function WithTooltip(p) {
                 left: e.clientX > window.innerWidth / 2,
             });
         }, style: { display: "contents" }, children: [p.children, visible &&
-                createPortal(_jsx("div", { role: "tooltip", className: "elbe_tooltip", style: {
-                        position: "fixed",
-                        pointerEvents: "none",
-                        zIndex: 1001,
-                        top: coords.y + (coords.top ? -12 : 12), // offset below cursor
-                        left: coords.x + (coords.left ? -12 : 12), // offset right of cursor
-                        background: theme.color.currentColor.back
-                            .inter(theme.color.currentColor.front, 0.2)
-                            .asCss(),
-                        color: theme.color.currentColor.front.asCss(),
-                        padding: ".125rem .3rem",
-                        borderRadius: ".25rem",
-                        transform: `translate(${coords.left ? "-100%" : "0"}, ${coords.top ? "-100%" : "0"})`,
-                    }, children: p.tooltip }), rootDOM)] }));
+                createPortal(_jsx("div", { role: "tooltip", className: "elbe_tooltip", style: Object.assign({ position: "fixed", pointerEvents: "none", zIndex: 1001, top: coords.y + align.yOffset, left: coords.x + align.xOffset, transform: `translate(${align.xTransform}, ${align.yTransform})` }, (typeof p.tooltip === "string"
+                        ? {
+                            background: theme.color.currentColor.back
+                                .inter(theme.color.currentColor.front, 0.2)
+                                .asCss(),
+                            color: theme.color.currentColor.front.asCss(),
+                            padding: ".125rem .3rem",
+                            borderRadius: ".25rem",
+                        }
+                        : {})), children: p.tooltip }), rootDOM)] }));
 }

package/dist/ui/theme/subthemes/color/_seed.js

@@ -19,7 +19,7 @@ const _makeSecondary = ({ base, seed }) => LayerColor.new({
     border: base.border,
 });
 const _makeInverse = ({ base }) => base.mirrorBrightnessLayer();
-const _makeMajor = ({ style, path }) => {
+const _makeMajor = ({ style }) => {
     return LayerColor.fromBack(style.back, { border: style.back });
 };
 const _makeMinor = ({ base, style }) => {

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/l10n/l10n.d.ts

@@ -23,4 +23,7 @@ export declare function makeL10n<T extends _L10nData>(fallback: {
     L10n: React.FunctionComponent<_L10nProps>;
     useL10n: () => _L10nState<T>;
 };
+export declare function WithL10nOrDefault(p: {
+    children: ElbeChildren;
+}): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/ui/util/l10n/l10n.js

@@ -1,6 +1,6 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
-import { _bestMatch, _L10nContext, _useL10n, } from "./_l10n_util";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { _bestMatch, _L10nContext, _maybeL10n, _useL10n, } from "./_l10n_util";
 /**
  * L10nBase is a function that creates a localization context provider and a hook to use the localization context.
  * @param fallback this is the fallback locale, which is used if no other locale is found. It is the basis for the locale type and must thus be complete.
@@ -44,3 +44,10 @@ function _l10nInlineResolver(locale) {
         return (_d = (_c = value[bestMatch !== null && bestMatch !== void 0 ? bestMatch : anyEnglish]) !== null && _c !== void 0 ? _c : value[locales[0]]) !== null && _d !== void 0 ? _d : "";
     };
 }
+export function WithL10nOrDefault(p) {
+    const l10n = useMemo(() => makeL10n({ en: {} }, {}), []);
+    const existing = _maybeL10n();
+    if (!!existing)
+        return _jsx(_Fragment, { children: p.children });
+    return _jsx(l10n.L10n, { children: p.children });
+}

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/toast/toast_legacy.js

@@ -4,9 +4,9 @@
  */
 export function showToast(message) {
     // find the 'elbe' element
-    const elbe = document.getElementById("elbe-app");
+    const elbe = document.getElementById("elbe_app");
     if (!elbe) {
-        console.warn("could not show legacy toast, no base element with '#elbe-app' found");
+        console.warn("could not show legacy toast, no base element with '#elbe_app' found");
         return;
     }
     const toast = document.createElement("div");

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.11",
+  "version": "2.0.15",
   "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"
   },