elbe-ui 0.4.27 → 1.0.3

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

@@ -9,8 +9,8 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
-import React from "preact/compat";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
 import { KindAlertIcon, Text } from "../../../..";
 import { randomAlphaNum } from "../../../util/util";
 import { applyProps } from "../../base/box";
@@ -38,14 +38,14 @@ export class Field extends React.Component {
                     ? this.props.flex === true
                         ? 1
                         : this.props.flex
-                    : null,
-                width: this.props.flex ? null : ((_b = this.props.width) !== null && _b !== void 0 ? _b : 12) + "rem",
+                    : undefined,
+                width: this.props.flex ? undefined : ((_b = this.props.width) !== null && _b !== void 0 ? _b : 12) + "rem",
                 display: "flex",
                 flexDirection: "column",
                 alignItems: "stretch",
-                filter: this.props.onInput ? null : "grayscale(1) opacity(0.5)",
-                pointerEvents: this.props.onInput ? null : "none",
-                cursor: this.props.onInput ? null : "not-allowed",
+                filter: this.props.onInput ? undefined : "grayscale(1) opacity(0.5)",
+                pointerEvents: this.props.onInput ? undefined : "none",
+                cursor: this.props.onInput ? undefined : "not-allowed",
             }, "data-tooltip": (_c = this.props) === null || _c === void 0 ? void 0 : _c.tooltip, children: [_jsx("label", { htmlFor: id, style: {
                         display: this.props.hideLabel ? "none" : "block",
                         fontSize: "0.8rem",

package/dist/ui/components/input/text/multi_line.d.ts

@@ -7,4 +7,4 @@ export interface MLInputFieldProps extends InputFieldProps {
 export declare function _MultiLineField(p: {
     props: MLInputFieldProps;
     id: string;
-}): import("preact").JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "preact/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { applyProps } from "../../base/box";
 export function _MultiLineField(p) {
     var _a, _b;
@@ -10,10 +10,10 @@ export function _MultiLineField(p) {
         padding: "1rem",
         margin: "0 0",
         resize: p.props.notResizable ? "none" : "vertical",
-    }), { size: 5, cols: 5, placeholder: p.props.hint, rows: (_b = p.props.rows) !== null && _b !== void 0 ? _b : 5, maxLength: p.props.maxLength, value: p.props.value, onInput: (e) => {
+    }), { cols: 5, placeholder: p.props.hint, rows: (_b = p.props.rows) !== null && _b !== void 0 ? _b : 5, maxLength: p.props.maxLength, value: p.props.value, onInput: (e) => {
             var _a, _b;
             e.stopPropagation();
             e.preventDefault();
             (_b = (_a = p.props).onInput) === null || _b === void 0 ? void 0 : _b.call(_a, e.currentTarget.value);
-        }, readonly: p.props.onInput ? false : true })));
+        }, readOnly: p.props.onInput ? false : true })));
 }

package/dist/ui/components/input/text/single_line.d.ts

@@ -14,5 +14,5 @@ export declare function _SingleLineField(p: {
     msg: _InputMsg | null;
     type: string;
     id: string;
-}): import("preact").JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { applyProps, Card, IconButton, Row, Spaced, } from "../../../..";
 export function _SingleLineField(p) {
     var _a, _b, _c;
@@ -9,17 +9,17 @@ export function _SingleLineField(p) {
                 border: "none",
                 outline: "none",
                 background: "none",
-            }), { size: 5, label: p.props.label, placeholder: p.props.hint, value: p.props.value, onInput: (e) => p.props.onInput && p.props.onInput(e.currentTarget.value), readonly: p.props.onInput ? false : true })), _jsx(_Supplement, { kind: (_c = p.msg) === null || _c === void 0 ? void 0 : _c.kind, trailing: true, icon: p.props.trailing, onTap: p.props.onTrailingTap })] }));
+            }), { size: 5, placeholder: p.props.hint, value: p.props.value, onInput: (e) => p.props.onInput && p.props.onInput(e.currentTarget.value), readOnly: p.props.onInput ? false : true })), _jsx(_Supplement, { kind: (_c = p.msg) === null || _c === void 0 ? void 0 : _c.kind, trailing: true, icon: p.props.trailing, onTap: p.props.onTrailingTap })] }));
 }
 function _Supplement(p) {
     if (!p.icon)
         return _jsx(Spaced, { width: 0.75 });
     return (_jsx(Card, { sharp: true, padding: 0, style: {
             border: "none",
-            background: p.onTap ? null : "transparent",
+            background: p.onTap ? undefined : "transparent",
         }, children: _jsx(IconButton, { kind: p.kind, manner: p.kind ? "minor" : "plain", ariaLabel: p.trailing ? "trailing icon" : "leading icon", icon: p.icon, style: {
                 borderRadius: 0,
-                background: p.onTap ? null : "transparent",
+                background: p.onTap ? undefined : "transparent",
             }, onTap: (e) => {
                 var _a;
                 e.stopPropagation();

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

@@ -1,3 +1,4 @@
+import { ElbeChildren } from "../../util/types";
 export type Alignment = "start_start" | "start_center" | "start_end" | "center_start" | "center" | "center_end" | "end_start" | "end_center" | "end_end";
 export declare function Align({ alignment, height, width, size, class: className, children, }: {
     alignment?: Alignment;
@@ -5,5 +6,5 @@ export declare function Align({ alignment, height, width, size, class: className
     width?: string | number;
     size?: string | number;
     class?: string;
-    children: React.ReactNode;
-}): import("preact").JSX.Element;
+    children: ElbeChildren;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "preact/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Column } from "./flex";
 export function Align({ alignment = "center", height, width, size, class: className, children, }) {
     var _a, _b;
@@ -9,5 +9,5 @@ export function Align({ alignment = "center", height, width, size, class: classN
         width = `${width}rem`;
     if (typeof size === "number")
         size = `${size}rem`;
-    return (_jsx(Column, { class: className, cross: (_a = cross) !== null && _a !== void 0 ? _a : "center", style: { height: height !== null && height !== void 0 ? height : size, width: width !== null && width !== void 0 ? width : size }, main: (_b = main) !== null && _b !== void 0 ? _b : "center", children: children }));
+    return (_jsx(Column, { className: className, cross: (_a = cross) !== null && _a !== void 0 ? _a : "center", style: { height: height !== null && height !== void 0 ? height : size, width: width !== null && width !== void 0 ? width : size }, main: (_b = main) !== null && _b !== void 0 ? _b : "center", children: children }));
 }

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

@@ -12,4 +12,4 @@ export type AppBaseProps = HeaderLogos & {
  *
  * Provide `wouter.Route` or `MenuRoute` components as children to define the routes and menu items.
  */
-export declare function AppBase(p: AppBaseProps): import("preact/compat").JSX.Element;
+export declare function AppBase(p: AppBaseProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,8 +1,6 @@
-import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
-import { useMemo, useState } from "preact/compat";
-import { Router } from "wouter";
-import { useHashLocation } from "wouter/use-hash-location";
-import { Box, isMenuRoute, wouter, } from "../../..";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { Box, isMenuRoute, Wouter, } from "../../..";
 import { AppBaseContext } from "./ctx_app_base";
 import { Menu } from "./menu";
 /**
@@ -14,7 +12,10 @@ import { Menu } from "./menu";
  * Provide `wouter.Route` or `MenuRoute` components as children to define the routes and menu items.
  */
 export function AppBase(p) {
-    return (_jsx(Router, { hook: p.hashBasedRouting ? useHashLocation : undefined, children: _jsx(_AppBase, Object.assign({}, p)) }));
+    return _jsx(Wouter.Router, { children: _jsx(_AppBase, Object.assign({}, p)) });
+}
+function _initialLocation() {
+    return (window.location.pathname + window.location.search + window.location.hash);
 }
 function _AppBase(p) {
     var _a;
@@ -22,7 +23,8 @@ function _AppBase(p) {
     const menuItems = useMemo(() => {
         return _extractMenuItems(p.children);
     }, [p.children]);
-    const [location, navigate] = wouter.useLocation();
+    const [location, navigate] = Wouter.useLocation();
+    const [history, setHistory] = useState([_initialLocation()]);
     return (_jsx(AppBaseContext.Provider, { value: {
             menuOpen: menuOpen,
             icons: {
@@ -33,12 +35,34 @@ function _AppBase(p) {
             },
             globalActions: (_a = p.globalActions) !== null && _a !== void 0 ? _a : [],
             setMenuOpen: (b) => setMenuOpen(b),
-            go: (p, replace) => navigate(p, { replace: replace !== null && replace !== void 0 ? replace : false }),
+            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: _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 }) })] }) }));
+            }, children: [menuItems.length > 0 && _jsx(Menu, { items: menuItems }), _jsx("div", { style: { flex: 1, width: "0px" }, children: _jsx(Wouter.Switch, { children: p.children }) })] }) }));
 }
 function _extractMenuItems(children) {
     const childs = Array.isArray(children) ? children : [children];

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

@@ -1,14 +1,19 @@
-import { ElbeChild } from "../../util/types";
+import { ElbeChild, int } from "../../util/types";
 import { HeaderLogos } from "./header";
 export interface _AppBaseState {
     menuOpen: boolean;
     icons: HeaderLogos;
     globalActions: ElbeChild[];
-    go: (path: string, replace?: boolean) => void;
+    router: {
+        go: (path: string, replace?: int | "all") => void;
+        goBack: (steps?: number) => void;
+        history: string[];
+        location: string;
+    };
 }
 export interface _AppBaseControl extends _AppBaseState {
     setMenuOpen: (open: boolean) => void;
 }
-export declare const AppBaseContext: import("preact").Context<_AppBaseControl | null>;
+export declare const AppBaseContext: import("react").Context<_AppBaseControl | null>;
 export declare function useAppBase(): _AppBaseControl;
 export declare function maybeAppBase(): _AppBaseControl | null;

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

@@ -1,5 +1,4 @@
-import { createContext } from "preact";
-import { useContext } from "preact/hooks";
+import { createContext, useContext } from "react";
 export const AppBaseContext = createContext(null);
 export function useAppBase() {
     const ctx = useContext(AppBaseContext);

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

@@ -7,8 +7,8 @@ export type FlexProps = {
     main?: "start" | "center" | "end" | "stretch" | "space-between" | "space-around" | "space-evenly";
     cross?: "start" | "center" | "end" | "stretch" | "space-between" | "space-around" | "space-evenly";
 } & ElbeProps;
-export declare function FlexSpace({}: {}): import("preact").JSX.Element;
-export declare function Column({ gap, main, cross, children, noScrollbar, scroll, ...p }: FlexProps): import("preact").JSX.Element;
+export declare function FlexSpace({}: {}): import("react/jsx-runtime").JSX.Element;
+export declare function Column({ gap, main, cross, children, noScrollbar, scroll, ...p }: FlexProps): import("react/jsx-runtime").JSX.Element;
 export declare function Row({ gap, main, cross, wrap, children, noScrollbar, scroll, ...p }: FlexProps & {
     wrap?: boolean;
-}): import("preact").JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -9,10 +9,10 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "preact/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { applyProps } from "../base/box";
 export function FlexSpace({}) {
-    return _jsx("div", { style: "flex:1" });
+    return _jsx("div", { style: { flex: 1 } });
 }
 export function Column(_a) {
     var { gap = 1, main = "start", cross = "stretch", children, noScrollbar = false, scroll = false } = _a, p = __rest(_a, ["gap", "main", "cross", "children", "noScrollbar", "scroll"]);
@@ -32,8 +32,8 @@ function _Flex(row, p, elbe, wraps) {
         justifyContent: p.main,
         alignItems: p.cross,
         gap: `${p.gap}rem`,
-        overflowX: !row ? null : p.scroll ? "auto" : null,
-        overflowY: row ? null : p.scroll ? "auto" : null,
-        flex: ((_a = p.flex) !== null && _a !== void 0 ? _a : p.scroll) ? 1 : null,
+        overflowX: !row ? undefined : p.scroll ? "auto" : undefined,
+        overflowY: row ? undefined : p.scroll ? "auto" : undefined,
+        flex: ((_a = p.flex) !== null && _a !== void 0 ? _a : p.scroll) ? 1 : undefined,
     }), { children: p.children })));
 }

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

@@ -12,21 +12,18 @@ export type HeaderProps = HeaderLogos & {
     actions?: ElbeChild[];
     scheme?: ElbeColorSchemes;
 };
-export declare function Header(p: HeaderProps): import("preact").JSX.Element;
+export declare function Header(p: HeaderProps): import("react/jsx-runtime").JSX.Element;
 export declare function _Logo(p: {
     flex?: boolean;
     logo: string | ElbeChild;
     logoDark?: string | ElbeChild | null;
     lMargin?: number;
     rMargin?: number;
-}): import("preact").JSX.Element | null;
+}): import("react/jsx-runtime").JSX.Element | null;
 export declare function BackButton(p: {
-    onTap: () => void;
-}): import("preact").JSX.Element;
-export declare function CloseButton(p: {
-    onTap: () => void;
-}): import("preact").JSX.Element;
+    close?: boolean;
+}): import("react/jsx-runtime").JSX.Element | null;
 export declare function _HeaderTitle(p: {
     title: string | ElbeChild;
     center: boolean;
-}): import("preact").JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -1,11 +1,9 @@
-import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ChevronLeft, MenuIcon, XIcon } from "lucide-react";
-import { useEffect, useMemo, useState } from "preact/hooks";
+import { useMemo, useState } from "react";
 import { Card, IconButton, Text, useLayoutMode, useSiteScroll, useTheme, useThemeConfig, } from "../../..";
 import { maybeAppBase } from "./ctx_app_base";
 import { _Toolbar } from "./toolbar";
-const _backBtn = _jsx(BackButton, { onTap: () => history.go(-1) });
-const _closeBtn = _jsx(CloseButton, { onTap: () => history.go(-1) });
 export function Header(p) {
     var _a, _b, _c, _d, _e, _f, _g, _h;
     const appBase = maybeAppBase();
@@ -25,21 +23,21 @@ export function Header(p) {
             borderTop: "none",
             borderLeft: "none",
             borderRight: "none",
-            borderColor: tConfig.highVis || scroll ? null : "transparent",
+            borderColor: tConfig.highVis || scroll ? undefined : "transparent",
             gap: "1rem",
             zIndex: 80,
         }, children: [p.leading && p.leading !== "back" && p.leading !== "close"
                 ? p.leading
                 : appBase &&
-                    !layoutMode.isWide && (_jsx(IconButton.plain, { ariaLabel: "open/close menu", onTap: () => appBase.setMenuOpen(!appBase.menuOpen), icon: MenuIcon })), p.leading === "back" && _backBtn, p.leading === "close" && _closeBtn, !layoutMode.isMobile && (_jsx(_Logo, { logo: (_b = p.logo) !== null && _b !== void 0 ? _b : appBase === null || appBase === void 0 ? void 0 : appBase.icons.logo, logoDark: (_c = p.logoDark) !== null && _c !== void 0 ? _c : appBase === null || appBase === void 0 ? void 0 : appBase.icons.logoDark, lMargin: 0.5 })), (!appBase || layoutMode.isWide) && (_jsx("div", { style: { margin: "-1rem", width: "1.5rem" } })), _jsx(_HeaderTitle, { title: p.title, center: (_d = p.centerTitle) !== null && _d !== void 0 ? _d : false }), _jsx(_Toolbar, { actions: [...((_e = p.actions) !== null && _e !== void 0 ? _e : []), ...((_f = appBase === null || appBase === void 0 ? void 0 : appBase.globalActions) !== null && _f !== void 0 ? _f : [])] }), layoutMode.isWide && (_jsx(_Logo, { logo: (_g = p.endLogo) !== null && _g !== void 0 ? _g : appBase === null || appBase === void 0 ? void 0 : appBase.icons.endLogo, logoDark: (_h = p.endLogoDark) !== null && _h !== void 0 ? _h : appBase === null || appBase === void 0 ? void 0 : appBase.icons.endLogoDark, rMargin: 0.5 }))] }));
+                    !layoutMode.isWide && (_jsx(IconButton.plain, { ariaLabel: "open/close menu", onTap: () => appBase.setMenuOpen(!appBase.menuOpen), 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 : appBase === null || appBase === void 0 ? void 0 : appBase.icons.logo, logoDark: (_c = p.logoDark) !== null && _c !== void 0 ? _c : appBase === null || appBase === void 0 ? void 0 : appBase.icons.logoDark, lMargin: 0.5 })), (!appBase || layoutMode.isWide) && (_jsx("div", { style: { margin: "-1rem", width: "1.5rem" } })), _jsx(_HeaderTitle, { title: p.title, center: (_d = p.centerTitle) !== null && _d !== void 0 ? _d : false }), _jsx(_Toolbar, { actions: [...((_e = p.actions) !== null && _e !== void 0 ? _e : []), ...((_f = appBase === null || appBase === void 0 ? void 0 : appBase.globalActions) !== null && _f !== void 0 ? _f : [])] }), layoutMode.isWide && (_jsx(_Logo, { logo: (_g = p.endLogo) !== null && _g !== void 0 ? _g : appBase === null || appBase === void 0 ? void 0 : appBase.icons.endLogo, logoDark: (_h = p.endLogoDark) !== null && _h !== void 0 ? _h : appBase === null || appBase === void 0 ? void 0 : appBase.icons.endLogoDark, rMargin: 0.5 }))] }));
 }
 export function _Logo(p) {
     var _a, _b;
     const tConfig = useThemeConfig();
     const [logo, setLogo] = useState(p.logo);
-    useEffect(() => { var _a; return setLogo(tConfig.dark ? (_a = p.logoDark) !== null && _a !== void 0 ? _a : p.logo : p.logo); }, [tConfig]);
+    useMemo(() => { var _a; return setLogo(tConfig.dark ? (_a = p.logoDark) !== null && _a !== void 0 ? _a : p.logo : p.logo); }, [tConfig]);
     return !logo ? null : (_jsx("div", { style: {
-            flex: p.flex ? 1 : null,
+            flex: p.flex ? 1 : undefined,
             display: "flex",
             alignItems: "center",
             justifyContent: "center",
@@ -47,13 +45,13 @@ export function _Logo(p) {
             marginRight: `${(_b = p.rMargin) !== null && _b !== void 0 ? _b : 0}rem`,
         }, children: typeof logo === "string" ? (_jsx("img", { src: logo, style: {
                 height: "1.25rem",
-            } })) : (p.logo) }));
+            } })) : (logo) }));
 }
 export function BackButton(p) {
-    return (_jsx(IconButton.plain, { ariaLabel: "go back", onTap: p.onTap, icon: ChevronLeft }));
-}
-export function CloseButton(p) {
-    return _jsx(IconButton.plain, { ariaLabel: "close", onTap: p.onTap, icon: XIcon });
+    var _a, _b;
+    const appBase = maybeAppBase();
+    const hidden = ((_b = (_a = appBase === null || appBase === void 0 ? void 0 : appBase.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: () => appBase === null || appBase === void 0 ? void 0 : appBase.router.goBack(), icon: p.close ? XIcon : ChevronLeft }, "hello-back"));
 }
 export function _HeaderTitle(p) {
     const layoutMode = useLayoutMode();

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

@@ -1,4 +1,4 @@
 import { MenuItem } from "../../..";
 export declare function Menu(p: {
     items: MenuItem[];
-}): import("preact").JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -1,6 +1,5 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "preact/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { MenuIcon } from "lucide-react";
-import { useLocation } from "wouter";
 import { _Logo, useLayoutMode, useTheme, useThemeConfig, } from "../../..";
 import { Card, elevatedShadow } from "../base/card";
 import { Button } from "../button/button";
@@ -42,7 +41,7 @@ export function Menu(p) {
                     appBase.setMenuOpen(false);
                 }, sharp: layoutMode.isMobile, bordered: true, scheme: "primary", padding: wideOrOpen() ? 0.5 : 0, style: Object.assign({ zIndex: 101, position: "fixed", left: 0, top: 0, height: "100vh", overflow: "hidden", width: menuWidth(), display: "flex", 
                     //display: appBase.menuOpen || layoutMode == "wide" ? "flex" : "none",
-                    flexDirection: "column", justifyContent: "start", alignItems: "stretch", borderTopLeftRadius: 0, borderBottomLeftRadius: 0, borderLeft: "none", borderTop: "none", borderBottom: "none", borderColor: tConfig.highVis ? null : "transparent", gap: "1rem", transition: tConfig.reducedMotion
+                    flexDirection: "column", justifyContent: "start", alignItems: "stretch", borderTopLeftRadius: 0, borderBottomLeftRadius: 0, borderLeft: "none", borderTop: "none", borderBottom: "none", borderColor: tConfig.highVis ? undefined : "transparent", gap: "1rem", transition: tConfig.reducedMotion
                         ? "none"
                         : "width 200ms ease-in-out" }, (layoutMode.isNarrow && appBase.menuOpen
                     ? {
@@ -54,9 +53,10 @@ export function Menu(p) {
                             }, children: !layoutMode.isWide && (_jsx(_Logo, { logo: appBase === null || appBase === void 0 ? void 0 : appBase.icons.logo, logoDark: appBase === null || appBase === void 0 ? void 0 : appBase.icons.logoDark, lMargin: 0.5 })) }), _jsx(Column, { flex: 1, scroll: true, noScrollbar: true, children: topBot.top.map((i) => (_jsx(_MenuItemView, { item: i }))) }), topBot.bottom.map((i) => (_jsx(_MenuItemView, { item: i })))] })) })] }));
 }
 function _MenuItemView({ item }) {
-    const [location, navigate] = useLocation();
     const appBase = useAppBase();
-    return (_jsx(Button, { ariaLabel: item.label, contentAlign: "start", manner: (item.path === "/" ? location === "/" : location.startsWith(item.path))
+    return (_jsx(Button, { ariaLabel: item.label, contentAlign: "start", manner: (item.path === "/"
+            ? appBase.router.location === "/"
+            : appBase.router.location.startsWith(item.path))
             ? "major"
-            : "plain", label: appBase.menuOpen ? item.label : undefined, icon: item.icon, onTap: item.disabled ? undefined : () => navigate(item.path) }));
+            : "plain", label: appBase.menuOpen ? item.label : undefined, icon: item.icon, onTap: item.disabled ? undefined : () => appBase.router.go(item.path, "all") }));
 }

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

@@ -14,9 +14,11 @@ type ContentBaseProps = {
  * ### Properties:
  * - `narrow` will limit the width of the content to `900px`, and center it.
  * - `padding` will add padding around the content, defaulting to `1rem`.
+ * - `leading` can be used to add a back or close button to the header. Setting it
+ *   "back" or "close" will automatically show the button if there is history to go back to.
  */
 export declare function Page(p: HeaderProps & ContentBaseProps & {
     children?: ElbeChildren;
     footer?: ElbeChild;
-}): import("preact").JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Column } from "../../..";
 import { Box } from "../base/box";
 import { Header } from "./header";
@@ -13,6 +13,8 @@ function _hasMoreThan(p, expected) {
  * ### Properties:
  * - `narrow` will limit the width of the content to `900px`, and center it.
  * - `padding` will add padding around the content, defaulting to `1rem`.
+ * - `leading` can be used to add a back or close button to the header. Setting it
+ *   "back" or "close" will automatically show the button if there is history to go back to.
  */
 export function Page(p) {
     var _a;

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

@@ -1,4 +1,4 @@
-import { Component } from "preact";
+import { Component } from "react";
 import { type ElbeProps } from "../base/box";
 export type ScrollProps = ElbeProps & {
     innerClass?: string;
@@ -11,8 +11,8 @@ type _ScrollProps = ScrollProps & {
 };
 export declare class Scroll extends Component<_ScrollProps> {
     constructor(props: _ScrollProps);
-    static vertical: (p: ScrollProps) => import("preact").JSX.Element;
-    static horizontal: (p: ScrollProps) => import("preact").JSX.Element;
-    render(): import("preact").JSX.Element;
+    static vertical: (p: ScrollProps) => import("react/jsx-runtime").JSX.Element;
+    static horizontal: (p: ScrollProps) => import("react/jsx-runtime").JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
 }
 export {};

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

@@ -1,5 +1,5 @@
-import { jsx as _jsx } from "preact/jsx-runtime";
-import { Component } from "preact";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Component } from "react";
 import { applyProps } from "../base/box";
 export class Scroll extends Component {
     constructor(props) {
@@ -9,7 +9,7 @@ export class Scroll extends Component {
         return (_jsx("div", Object.assign({}, applyProps("scroll", this.props, null, {
             overflowY: this.props.axis === "vertical" ? "scroll" : "hidden",
             overflowX: this.props.axis === "horizontal" ? "scroll" : "hidden",
-        }), { children: _jsx("div", { class: this.props.innerClass, style: this.props.axis === "horizontal" ? "min-width: min-content;" : "", children: this.props.children }) })));
+        }), { children: _jsx("div", { className: this.props.innerClass, style: this.props.axis === "horizontal" ? { minWidth: "min-content" } : {}, children: this.props.children }) })));
     }
 }
 Scroll.vertical = (p) => new Scroll(Object.assign(Object.assign({}, p), { axis: "vertical" })).render();

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

@@ -2,4 +2,4 @@ export declare function Spaced({ width, height, amount, }: {
     amount?: number;
     width?: number;
     height?: number;
-}): import("preact").JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "preact/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 export function Spaced({ width, height, amount = 1, }) {
     const fromWH = !!(width || height);
     return (_jsx("div", { style: {

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

@@ -1,7 +1,7 @@
 import { ElbeChild } from "../../..";
 export declare function _Toolbar(p: {
     actions: ElbeChild[];
-}): import("preact").JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;
 export declare function OverflowMenu(p: {
     items: ElbeChild[];
-}): import("preact").JSX.Element | null;
+}): import("react/jsx-runtime").JSX.Element | null;

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

@@ -1,16 +1,14 @@
-import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { MoreVertical } from "lucide-react";
-import { useEffect, useState } from "preact/hooks";
+import { useMemo, useState } from "react";
 import { Card, elevatedShadow, IconButton, ToolbarContext, useLayoutMode, useThemeConfig, } from "../../..";
-import { maybeAppBase } from "./ctx_app_base";
 export function _Toolbar(p) {
     const [sections, setSections] = useState([
         [],
         [],
     ]);
-    const appBase = maybeAppBase();
     const layoutMode = useLayoutMode();
-    useEffect(() => {
+    useMemo(() => {
         const cutoff = layoutMode.isWide ? 5 : layoutMode.screenWidth < 400 ? 1 : 2;
         const bar = [];
         const overflow = [];
@@ -54,7 +52,7 @@ export function OverflowMenu(p) {
                     transform: open ? "scale(1)" : "scale(.6)",
                     opacity: open ? 1 : 0,
                     transition: tConfig.reducedMotion
-                        ? null
+                        ? undefined
                         : "transform 200ms ease-in-out, opacity 200ms ease-in-out",
                 }, children: open && (_jsx(ToolbarContext.Provider, { value: "overflow", children: _jsx(Card, { onTap: () => setOpen(false), scheme: "primary", elevated: true, style: {
                             display: "flex",

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

@@ -7,4 +7,4 @@ export declare function Link(p: {
     noIcon?: boolean;
     underline?: boolean;
     color?: string;
-}): import("preact").JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/link.js

@@ -1,7 +1,7 @@
-import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ExternalLinkIcon } from "lucide-react";
 export function Link(p) {
-    return (_jsxs("a", { class: p.plain ? "plain" : "accent action", href: p.href, target: p.external ? "_blank" : undefined, rel: p.external ? "noopener noreferrer" : undefined, style: {
+    return (_jsxs("a", { className: p.plain ? "plain" : "accent action", href: p.href, target: p.external ? "_blank" : undefined, rel: p.external ? "noopener noreferrer" : undefined, style: {
             color: p.color,
             display: "inline-flex",
             textDecoration: p.underline ? "underline" : "none",

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

@@ -3,4 +3,4 @@ export declare function ProgressBar({ value, max, plain, ...elbe }: {
     value: number;
     max?: number;
     plain?: boolean;
-} & ElbeProps): import("preact").JSX.Element;
+} & ElbeProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/progress_bar.js

@@ -9,7 +9,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "preact/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { applyProps, clamp, useTheme, useThemeConfig } from "../..";
 export function ProgressBar(_a) {
     var { value, max = 100, plain } = _a, elbe = __rest(_a, ["value", "max", "plain"]);

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

@@ -1,5 +1,5 @@
-import { VNode } from "preact";
-import { ElbeChildren, IconChild, wouter } from "../../..";
+import React from "react";
+import { ElbeChildren, IconChild, Wouter } from "../../..";
 export type MenuItem = {
     path: string;
     label: string;
@@ -10,9 +10,9 @@ export type MenuItem = {
 type _MenuRouteProps = MenuItem & {
     children?: ElbeChildren;
 };
-export type ElbeRoute = VNode<{
+export type ElbeRoute = React.ReactElement<{
     path: string;
-}> | VNode<_MenuRouteProps>;
+}> | React.ReactElement<_MenuRouteProps>;
 /**
  * a route that also renders a menu item in the <AppBase> component.
  * place it as a child of <AppBase> to have it rendered in the menu.
@@ -21,10 +21,10 @@ export type ElbeRoute = VNode<{
  *
  * ⚠️ a route with path "/" can't be used for nesting
  */
-export declare function MenuRoute(p: _MenuRouteProps): import("preact").JSX.Element;
+export declare function MenuRoute(p: _MenuRouteProps): import("react/jsx-runtime").JSX.Element;
 /**
- * a helper function to create a <wouter.Route> with a path.
+ * 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 VNode<_MenuRouteProps>;
+export declare const Route: typeof Wouter.Route;
+export declare function isMenuRoute(r: ElbeRoute): r is React.ReactElement<_MenuRouteProps>;
 export {};

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

@@ -1,5 +1,5 @@
-import { jsx as _jsx } from "preact/jsx-runtime";
-import { wouter } from "../../..";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Wouter } from "../../..";
 /**
  * a route that also renders a menu item in the <AppBase> component.
  * place it as a child of <AppBase> to have it rendered in the menu.
@@ -12,9 +12,9 @@ export function MenuRoute(p) {
     return (_jsx(Route, { nest: true, path: p.path, children: p.children }));
 }
 /**
- * a helper function to create a <wouter.Route> with a path.
+ * a helper function to create a <Wouter.Route> with a path.
  */
-export const Route = wouter.Route;
+export const Route = Wouter.Route;
 export function isMenuRoute(r) {
     return "path" in r.props && "label" in r.props && "icon" in r.props;
 }