elbe-ui 0.4.18 → 0.4.20

package/dist/index.d.ts

@@ -1,10 +1,9 @@
 import "./elbe.css";
+export * as wouter from "wouter";
 export * from "./api/api_worker";
 export * from "./api/error";
 export * from "./api/errors";
 export * from "./bit/bit";
-export * from "./bit/old/old_bit";
-export * from "./bit/old/old_ctrl_bit";
 export * from "./ui/util/confirm_dialog";
 export * from "./ui/util/ctx_toolbar";
 export * from "./ui/util/l10n/l10n";
@@ -14,12 +13,14 @@ export * from "./ui/util/util";
 export * from "./ui/components/base/box";
 export * from "./ui/components/base/card";
 export * from "./ui/components/base/padded";
+export * from "./ui/components/routing/route";
 export * from "./ui/components/button/button";
 export * from "./ui/components/button/choose_button";
 export * from "./ui/components/button/icon_button";
 export * from "./ui/components/button/toggle_button";
 export * from "./ui/components/layout/alignment";
 export * from "./ui/components/layout/app_base";
+export * from "./ui/components/layout/ctx_app_base";
 export * from "./ui/components/layout/flex";
 export * from "./ui/components/layout/header";
 export * from "./ui/components/layout/page";

package/dist/index.js

@@ -1,13 +1,12 @@
 import { jsx as _jsx } from "preact/jsx-runtime";
 import * as Lucide from "lucide-react";
 import "./elbe.css";
+export * as wouter from "wouter";
 // exports
 export * from "./api/api_worker";
 export * from "./api/error";
 export * from "./api/errors";
 export * from "./bit/bit";
-export * from "./bit/old/old_bit";
-export * from "./bit/old/old_ctrl_bit";
 export * from "./ui/util/confirm_dialog";
 export * from "./ui/util/ctx_toolbar";
 export * from "./ui/util/l10n/l10n";
@@ -17,12 +16,14 @@ export * from "./ui/util/util";
 export * from "./ui/components/base/box";
 export * from "./ui/components/base/card";
 export * from "./ui/components/base/padded";
+export * from "./ui/components/routing/route";
 export * from "./ui/components/button/button";
 export * from "./ui/components/button/choose_button";
 export * from "./ui/components/button/icon_button";
 export * from "./ui/components/button/toggle_button";
 export * from "./ui/components/layout/alignment";
 export * from "./ui/components/layout/app_base";
+export * from "./ui/components/layout/ctx_app_base";
 export * from "./ui/components/layout/flex";
 export * from "./ui/components/layout/header";
 export * from "./ui/components/layout/page";

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

@@ -43,5 +43,9 @@ function _btn(_a, manner) {
 export function Icon(p) {
     if (!p.icon)
         return null;
-    return (_jsx("span", Object.assign({}, applyProps("icon", p), { children: typeof p.icon === "function" ? p.icon({}) : p.icon })));
+    return (_jsx("div", Object.assign({}, applyProps("icon", p, null, {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+    }), { children: typeof p.icon === "function" ? p.icon({}) : p.icon })));
 }

package/dist/ui/components/error_view.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
 import { useSignal } from "@preact/signals";
 import { icons } from "lucide-react";
-import { route } from "preact-router";
+import { useLocation } from "wouter";
 import { ElbeDialog, Icon, Icons, toElbeError, } from "../..";
 import { _maybeL10n } from "../util/l10n/_l10n_util";
 export function ErrorView({ error, retry, debug, }) {
@@ -37,5 +37,6 @@ export function PrettyErrorView({ error, retry, labels = {
     var _a, _b, _c, _d, _e, _f;
     const l10n = _maybeL10n();
     const openSig = useSignal(false);
-    return (_jsxs("div", { class: "column padded cross-center", style: "margin: 1rem 0", children: [_jsx(Icon, { icon: (_a = error.icon) !== null && _a !== void 0 ? _a : icons.OctagonAlert }), _jsx("h4", { style: "margin: 0", children: (_b = l10n === null || l10n === void 0 ? void 0 : l10n.inline(error.message)) !== null && _b !== void 0 ? _b : "error" }), _jsx("span", { class: "pointer", onClick: () => (openSig.value = true), children: (_c = l10n === null || l10n === void 0 ? void 0 : l10n.inline(error.description)) !== null && _c !== void 0 ? _c : "" }), retry && (_jsxs("button", { class: "action", onClick: () => retry(), children: [_jsx(Icons.RotateCcw, {}), " ", (_d = l10n === null || l10n === void 0 ? void 0 : l10n.inline(labels.retry)) !== null && _d !== void 0 ? _d : "retry"] })), error.code === 404 && (_jsxs("button", { class: "action", onClick: () => route("/"), children: [_jsx(Icons.House, {}), (_e = l10n === null || l10n === void 0 ? void 0 : l10n.inline(labels.home)) !== null && _e !== void 0 ? _e : "go home"] })), _jsx(ElbeDialog, { title: (_f = l10n === null || l10n === void 0 ? void 0 : l10n.inline(labels.details)) !== null && _f !== void 0 ? _f : "error details", open: openSig.value, onClose: () => (openSig.value = false), children: _jsx("pre", { class: "card inverse", children: `code: ${error.code}\n\n` + JSON.stringify(error.details, null, 2) }) })] }));
+    const [loc, navigate] = useLocation();
+    return (_jsxs("div", { class: "column padded cross-center", style: "margin: 1rem 0", children: [_jsx(Icon, { icon: (_a = error.icon) !== null && _a !== void 0 ? _a : icons.OctagonAlert }), _jsx("h4", { style: "margin: 0", children: (_b = l10n === null || l10n === void 0 ? void 0 : l10n.inline(error.message)) !== null && _b !== void 0 ? _b : "error" }), _jsx("span", { class: "pointer", onClick: () => (openSig.value = true), children: (_c = l10n === null || l10n === void 0 ? void 0 : l10n.inline(error.description)) !== null && _c !== void 0 ? _c : "" }), retry && (_jsxs("button", { class: "action", onClick: () => retry(), children: [_jsx(Icons.RotateCcw, {}), " ", (_d = l10n === null || l10n === void 0 ? void 0 : l10n.inline(labels.retry)) !== null && _d !== void 0 ? _d : "retry"] })), error.code === 404 && (_jsxs("button", { class: "action", onClick: () => navigate("/", { replace: true }), children: [_jsx(Icons.House, {}), (_e = l10n === null || l10n === void 0 ? void 0 : l10n.inline(labels.home)) !== null && _e !== void 0 ? _e : "go home"] })), _jsx(ElbeDialog, { title: (_f = l10n === null || l10n === void 0 ? void 0 : l10n.inline(labels.details)) !== null && _f !== void 0 ? _f : "error details", open: openSig.value, onClose: () => (openSig.value = false), children: _jsx("pre", { class: "card inverse", children: `code: ${error.code}\n\n` + JSON.stringify(error.details, null, 2) }) })] }));
 }

package/dist/ui/components/footer.js

@@ -10,7 +10,7 @@ export function Footer({ left, right, copyright, version, legal, marginTop, }) {
             borderTopLeftRadius: layoutMode === "wide" ? "var(--g-radius)" : null,
             color: "color-mix(in srgb, var(--c-context-front) 60%, transparent)",
             marginTop: `${marginTop !== null && marginTop !== void 0 ? marginTop : 0}rem`,
-        }, children: _jsxs(Column, { gap: 0.5, children: [_jsxs(Row, { main: "space-between", cross: "start", children: [left && (_jsx(Column, { gap: 0.5, flex: 1, cross: "start", children: left.map((item) => item.label ? _jsx(_Link, Object.assign({}, item)) : item) })), right && (_jsx(Column, { gap: 0.5, flex: 1, cross: "end", children: right.map((item) => item.label ? _jsx(_Link, Object.assign({}, item)) : item) }))] }), (left || right) && (copyright || version || legal) && (_jsx("hr", { style: { opacity: 0.7 } })), (copyright || version || legal) && (_jsxs(Row, { children: [copyright &&
+        }, children: _jsxs(Column, { gap: 0.5, 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) => item.label ? _jsx(_Link, Object.assign({}, item)) : item) })), right && (_jsx(Column, { gap: 0.5, flex: 1, cross: "end", children: right.map((item) => item.label ? _jsx(_Link, Object.assign({}, item)) : item) }))] })), (left || right) && (copyright || version || legal) && (_jsx("hr", { style: { opacity: 0.7 } })), (copyright || version || legal) && (_jsxs(Row, { children: [copyright &&
                             (typeof copyright === "string" ? _jsx("b", { children: copyright }) : copyright), version && _jsx(_Version, { version: version }), _jsx(FlexSpace, {}), legal && _jsx(_Link, Object.assign({}, legal))] }))] }) }));
 }
 function _Version({ version }) {

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

@@ -1,21 +1,15 @@
-import { VNode } from "preact";
-import { NestedArray } from "preact-iso";
-import { ElbeChild, HeaderLogos } from "../../..";
-import { MenuItem } from "./menu";
+import { ElbeChild, ElbeRoute, HeaderLogos } from "../../..";
 export type AppBaseProps = HeaderLogos & {
-    initial?: string;
-    menu: MenuItem[];
     globalActions?: ElbeChild[];
-    children: NestedArray<VNode>;
+    children: ElbeRoute | ElbeRoute[];
+    hashBasedRouting?: boolean;
 };
 /**
- * app base is a layout component that provides a side menu and a content area.
+ * app base is a layout component that provides an optional side menu and a content area.
  * it is designed to be used as a base for other components and is
  * used to create a consistent layout for pages. You can also pass global actions
  * that will be displayed in the header of all pages.
+ *
+ * Provide `wouter.Route` or `MenuRoute` components as children to define the routes and menu items.
  */
-export declare function AppBase(p: AppBaseProps): import("preact").JSX.Element;
-export declare const Redirect: (p: {
-    path: string;
-    to: string;
-}) => null;
+export declare function AppBase(p: AppBaseProps): import("preact/compat").JSX.Element;

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

@@ -1,18 +1,28 @@
 import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
-import { Router, useLocation } from "preact-iso";
-import { useEffect, useState } from "preact/compat";
-import { Box } from "../../..";
+import { useMemo, useState } from "preact/compat";
+import { Router } from "wouter";
+import { useHashLocation } from "wouter/use-hash-location";
+import { Box, isMenuRoute, wouter, } from "../../..";
 import { AppBaseContext } from "./ctx_app_base";
 import { Menu } from "./menu";
 /**
- * app base is a layout component that provides a side menu and a content area.
+ * app base is a layout component that provides an optional side menu and a content area.
  * it is designed to be used as a base for other components and is
  * used to create a consistent layout for pages. You can also pass global actions
  * that will be displayed in the header of all pages.
+ *
+ * Provide `wouter.Route` or `MenuRoute` components as children to define the routes and menu items.
  */
 export function AppBase(p) {
-    var _a, _b;
+    return (_jsx(Router, { hook: p.hashBasedRouting ? useHashLocation : undefined, children: _jsx(_AppBase, Object.assign({}, p)) }));
+}
+function _AppBase(p) {
+    var _a;
     const [menuOpen, setMenuOpen] = useState(false);
+    const menuItems = useMemo(() => {
+        return _extractMenuItems(p.children);
+    }, [p.children]);
+    const [location, navigate] = wouter.useLocation();
     return (_jsx(AppBaseContext.Provider, { value: {
             menuOpen: menuOpen,
             icons: {
@@ -23,16 +33,20 @@ export 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 }),
         }, children: _jsxs(Box, { scheme: "primary", style: {
                 display: "flex",
                 width: "100%",
                 minHeight: "100vh",
-            }, children: [_jsx(Menu, { items: p.menu }), _jsx("div", { style: { flex: 1 }, children: _jsxs(Router, { children: [_jsx(Redirect, { path: "/", to: `/${(_b = p.initial) !== null && _b !== void 0 ? _b : p.menu[0].id}` }), p.children] }) })] }) }));
+            }, children: [menuItems.length > 0 && _jsx(Menu, { items: menuItems }), _jsx("div", { style: { flex: 1 }, children: _jsx(wouter.Switch, { children: p.children }) })] }) }));
+}
+function _extractMenuItems(children) {
+    const childs = Array.isArray(children) ? children : [children];
+    const items = [];
+    for (const child of childs) {
+        if (!isMenuRoute(child))
+            continue;
+        items.push(child.props);
+    }
+    return items;
 }
-export const Redirect = (p) => {
-    const location = useLocation();
-    useEffect(() => {
-        location.route(p.to, true);
-    }, [p.to]);
-    return null; // This component doesn't render anything
-};

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

@@ -4,11 +4,11 @@ export interface _AppBaseState {
     menuOpen: boolean;
     icons: HeaderLogos;
     globalActions: ElbeChild[];
+    go: (path: string, replace?: boolean) => void;
 }
-interface _AppBaseControl extends _AppBaseState {
+export interface _AppBaseControl extends _AppBaseState {
     setMenuOpen: (open: boolean) => void;
 }
 export declare const AppBaseContext: import("preact").Context<_AppBaseControl | null>;
 export declare function useAppBase(): _AppBaseControl;
 export declare function maybeAppBase(): _AppBaseControl | null;
-export {};

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

@@ -1,4 +1,4 @@
-import { ElbeChild } from "../../..";
+import { ElbeChild, ElbeColorSchemes } from "../../..";
 export type HeaderLogos = {
     logo?: string | ElbeChild;
     logoDark?: string | ElbeChild;
@@ -10,6 +10,7 @@ export type HeaderProps = HeaderLogos & {
     title: string | ElbeChild;
     centerTitle?: boolean;
     actions?: ElbeChild[];
+    scheme?: ElbeColorSchemes;
 };
 export declare function Header(p: HeaderProps): import("preact").JSX.Element;
 export declare function BackButton(p: {
@@ -18,3 +19,7 @@ export declare function BackButton(p: {
 export declare function CloseButton(p: {
     onTap: () => void;
 }): import("preact").JSX.Element;
+export declare function _HeaderTitle(p: {
+    title: string | ElbeChild;
+    center: boolean;
+}): import("preact").JSX.Element;

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

@@ -1,19 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
 import { ChevronLeft, MenuIcon, XIcon } from "lucide-react";
-import { useEffect, useState } from "preact/hooks";
+import { useEffect, useMemo, useState } from "preact/hooks";
 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;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     const appBase = maybeAppBase();
     const layoutMode = useLayoutMode();
     const scroll = useSiteScroll();
     const tConfig = useThemeConfig();
     const theme = useTheme();
-    return (_jsxs(Card, { padding: 0, scheme: "primary", bordered: true, frosted: !tConfig.highVis, sharp: true, style: {
+    return (_jsxs(Card, { padding: 0, scheme: (_a = p.scheme) !== null && _a !== void 0 ? _a : "primary", bordered: true, frosted: !tConfig.highVis, sharp: true, style: {
             position: "sticky",
             top: 0,
             left: 0,
@@ -31,9 +31,7 @@ export function Header(p) {
         }, children: [p.leading && p.leading !== "back" && p.leading !== "close"
                 ? p.leading
                 : appBase &&
-                    layoutMode != "wide" && (_jsx(IconButton.plain, { ariaLabel: "open/close menu", onTap: () => appBase.setMenuOpen(!appBase.menuOpen), icon: MenuIcon })), p.leading === "back" && _backBtn, p.leading === "close" && _closeBtn, _jsx(_Logo, { logo: (_a = p.logo) !== null && _a !== void 0 ? _a : appBase === null || appBase === void 0 ? void 0 : appBase.icons.logo, logoDark: (_b = p.logoDark) !== null && _b !== void 0 ? _b : appBase === null || appBase === void 0 ? void 0 : appBase.icons.logoDark, lMargin: 0.5 }), typeof p.title === "string" ? (_jsx(Text.h3, { style: {
-                    marginLeft: !appBase || layoutMode === "wide" ? ".5rem" : 0,
-                }, align: p.centerTitle ? "center" : "start", flex: 1, v: p.title })) : (_jsx("div", { style: { flex: 1 }, children: p.title })), _jsx(_Toolbar, { actions: [...((_c = p.actions) !== null && _c !== void 0 ? _c : []), ...((_d = appBase === null || appBase === void 0 ? void 0 : appBase.globalActions) !== null && _d !== void 0 ? _d : [])] }), layoutMode === "wide" && (_jsx(_Logo, { logo: (_e = p.endLogo) !== null && _e !== void 0 ? _e : appBase === null || appBase === void 0 ? void 0 : appBase.icons.endLogo, logoDark: (_f = p.endLogoDark) !== null && _f !== void 0 ? _f : appBase === null || appBase === void 0 ? void 0 : appBase.icons.endLogoDark, rMargin: 0.5 }))] }));
+                    layoutMode != "wide" && (_jsx(IconButton.plain, { ariaLabel: "open/close menu", onTap: () => appBase.setMenuOpen(!appBase.menuOpen), icon: MenuIcon })), p.leading === "back" && _backBtn, p.leading === "close" && _closeBtn, layoutMode !== "mobile" && (_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 === "wide") && (_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 === "wide" && (_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 }))] }));
 }
 function _Logo(p) {
     var _a, _b;
@@ -56,3 +54,21 @@ export function BackButton(p) {
 export function CloseButton(p) {
     return _jsx(IconButton.plain, { ariaLabel: "close", onTap: p.onTap, icon: XIcon });
 }
+export function _HeaderTitle(p) {
+    const layoutMode = useLayoutMode();
+    const globalCenter = useMemo(() => {
+        return layoutMode !== "mobile" && p.center;
+    }, [layoutMode]);
+    return (_jsx("div", { style: {
+            flex: 1,
+            display: "flex",
+            justifyContent: p.center ? "center" : "flex-start",
+        }, children: _jsx("div", { style: {
+                transform: globalCenter
+                    ? "translateX(-50%) translateY(-50%)"
+                    : "none",
+                // align to center of the screen:
+                position: globalCenter ? "absolute" : "static",
+                left: globalCenter ? "50%" : "0",
+            }, children: typeof p.title === "string" ? (_jsx(Text.h3, { align: p.center ? "center" : "start", v: p.title })) : (p.title) }) }));
+}

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

@@ -1,11 +1,4 @@
-import { IconChild } from "../button/icon_button";
-export type MenuItem = {
-    id: string;
-    label: string;
-    icon?: IconChild;
-    bottom?: boolean;
-    disabled?: boolean;
-};
+import { MenuItem } from "../../..";
 export declare function Menu(p: {
     items: MenuItem[];
 }): import("preact").JSX.Element;

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "preact/jsx-runtime";
 import { MenuIcon } from "lucide-react";
-import { useLocation } from "preact-iso";
+import { useLocation } from "wouter";
 import { useLayoutMode, useTheme, useThemeConfig } from "../../..";
 import { Card, elevatedShadow } from "../base/card";
 import { Button } from "../button/button";
@@ -53,7 +53,9 @@ export function Menu(p) {
                             } }), _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 = useLocation();
+    const [location, navigate] = useLocation();
     const appBase = useAppBase();
-    return (_jsx(Button, { ariaLabel: item.label, contentAlign: "start", manner: location.path.startsWith(`/${item.id}`) ? "major" : "plain", label: appBase.menuOpen ? item.label : undefined, icon: item.icon, onTap: item.disabled ? undefined : () => location.route(`/${item.id}`, true) }));
+    return (_jsx(Button, { ariaLabel: item.label, contentAlign: "start", manner: (item.path === "/" ? location === "/" : location.startsWith(item.path))
+            ? "major"
+            : "plain", label: appBase.menuOpen ? item.label : undefined, icon: item.icon, onTap: item.disabled ? undefined : () => navigate(item.path) }));
 }

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

@@ -3,6 +3,8 @@ import { HeaderProps } from "./header";
 type ContentBaseProps = {
     padding?: number;
     narrow?: boolean;
+    noScroll?: boolean;
+    scheme?: string;
 };
 /**
  * A component that represents a full page layout with a header and footer.
@@ -14,7 +16,7 @@ type ContentBaseProps = {
  * - `padding` will add padding around the content, defaulting to `1rem`.
  */
 export declare function Page(p: HeaderProps & ContentBaseProps & {
-    children: ElbeChildren;
-    footer: ElbeChild;
+    children?: ElbeChildren;
+    footer?: ElbeChild;
 }): import("preact").JSX.Element;
 export {};

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

@@ -13,6 +13,7 @@ import { Header } from "./header";
  * - `padding` will add padding around the content, defaulting to `1rem`.
  */
 export function Page(p) {
+    var _a;
     const [hasHeader, setHasHeader] = useState(false);
     useEffect(() => {
         const headerProps = Object.assign({}, p);
@@ -20,18 +21,21 @@ export function Page(p) {
         delete headerProps.footer;
         delete headerProps.padding;
         delete headerProps.narrow;
+        delete headerProps.noScroll;
         setHasHeader(Object.keys(headerProps).length > 0);
     });
-    return (_jsxs(Box, { scheme: "primary", typeLabel: "page", style: {
+    return (_jsxs(Box, { scheme: (_a = p.scheme) !== null && _a !== void 0 ? _a : "primary", typeLabel: "page", style: {
             display: "flex",
             flexDirection: "column",
             alignItems: "stretch",
             minHeight: "100vh",
+            height: p.noScroll ? "100vh" : "auto",
         }, children: [hasHeader && _jsx(Header, Object.assign({}, p)), _jsx(_ContentBase, { padding: p.padding, narrow: p.narrow, children: p.children }), p.footer] }));
 }
 function _ContentBase(p) {
     return (_jsx(Column, { style: {
             flex: 1,
+            minHeight: 0,
             padding: p.padding ? `${p.padding}rem` : "1rem",
             width: p.narrow ? "min(100%, 900px)" : "auto",
             margin: p.narrow ? "0 auto" : "0",

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

@@ -0,0 +1,30 @@
+import { VNode } from "preact";
+import { ElbeChildren, IconChild, wouter } from "../../..";
+export type MenuItem = {
+    path: string;
+    label: string;
+    icon: IconChild;
+    bottom?: boolean;
+    disabled?: boolean;
+};
+type _MenuRouteProps = MenuItem & {
+    children?: ElbeChildren;
+};
+export type ElbeRoute = VNode<{
+    path: string;
+}> | VNode<_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.
+ *
+ * it automatically creates a nestable route
+ *
+ * ⚠️ a route with path "/" can't be used for nesting
+ */
+export declare function MenuRoute(p: _MenuRouteProps): import("preact").JSX.Element;
+/**
+ * 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 {};

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

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "preact/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.
+ *
+ * it automatically creates a nestable route
+ *
+ * ⚠️ a route with path "/" can't be used for nesting
+ */
+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.
+ */
+export const Route = wouter.Route;
+export function isMenuRoute(r) {
+    return "path" in r.props && "label" in r.props && "icon" in r.props;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "elbe-ui",
-  "version": "0.4.18",
+  "version": "0.4.20",
   "author": "Robin Naumann",
   "license": "MIT",
   "repository": {
@@ -38,8 +38,7 @@
     "colors-convert": "^1.4.1",
     "lucide-react": "^0.438.0",
     "preact": "^10.24.2",
-    "preact-iso": "^2.9.1",
-    "preact-router": "^4.1.2",
-    "vite": "^5.4.10"
+    "vite": "^5.4.10",
+    "wouter": "^3.7.1"
   }
 }

package/dist/bit/old/old_bit.d.ts

@@ -1,37 +0,0 @@
-import { Signal } from "@preact/signals";
-import { type PreactContext } from "preact";
-export interface OldBitUseInterface<C, T> {
-    signal: Signal<OldBitState<T>>;
-    ctrl: C;
-    map: <D>(m: OldTriMap<T, D>) => D | preact.JSX.Element;
-    onData: <D>(f: (d: T) => any, { onLoading, onError, }?: {
-        onLoading?: () => any;
-        onError?: (e: string) => any;
-    }) => any;
-}
-interface OldBitData<C, T> {
-    ctrl: C;
-    state: Signal<OldBitState<T>>;
-}
-export interface OldBitState<T> {
-    loading?: boolean;
-    error?: any;
-    data?: T;
-}
-export type OldBitContext<T, C> = PreactContext<OldBitData<T, C> | null>;
-export interface OldTriMap<T, D> {
-    onLoading?: () => D;
-    onError?: (e: string) => D;
-    onData?: (value: T) => D;
-}
-export interface OldTWParams<T> {
-    emit: (t: T) => void;
-    emitLoading: () => void;
-    emitError: (e: any) => void;
-    map: <D>(m: OldTriMap<T, D>) => D;
-    signal: Signal<OldBitState<T>>;
-}
-export declare function makeOldBit<C, T>(name: string): OldBitContext<C, T>;
-export declare function ProvideOldBit<I, C, T>(context: OldBitContext<C, T>, parameters: I, worker: (p: I, d: OldTWParams<T>, ctrl: C) => void, ctrl: (p: I, d: OldTWParams<T>) => C, children: any): import("preact").JSX.Element;
-export declare function useOldBit<C, T>(context: OldBitContext<C, T>): OldBitUseInterface<C, T>;
-export {};

package/dist/bit/old/old_bit.js

@@ -1,79 +0,0 @@
-import { jsx as _jsx } from "preact/jsx-runtime";
-import { useSignal } from "@preact/signals";
-import { createContext } from "preact";
-import { useContext } from "preact/hooks";
-import { ErrorView } from "../../ui/components/error_view";
-import { Column } from "../../ui/components/layout/flex";
-import { Spinner } from "../../ui/components/spinner";
-export function makeOldBit(name) {
-    const c = createContext(null);
-    c.displayName = name;
-    return c;
-}
-export function ProvideOldBit(context, parameters, worker, ctrl, children) {
-    const s = useSignal({ loading: true });
-    const _set = (n) => {
-        try {
-            if (JSON.stringify(n) === JSON.stringify(s.peek()))
-                return;
-        }
-        catch (e) { }
-        s.value = n;
-    };
-    const emit = (data) => _set({ data });
-    const emitLoading = () => _set({ loading: true });
-    const emitError = (error) => {
-        console.warn(`BIT: ${context.displayName} emitted ERROR`, error);
-        return _set({ error });
-    };
-    function map(m) {
-        var _a;
-        const st = s.value;
-        if (st.loading)
-            return m.onLoading();
-        if (st.error)
-            return m.onError(st.error);
-        return m.onData((_a = st.data) !== null && _a !== void 0 ? _a : null);
-    }
-    const c = ctrl(parameters, { emit, emitLoading, emitError, map, signal: s });
-    worker(parameters, { emit, emitLoading, emitError, map, signal: s }, c);
-    return (_jsx(context.Provider, { value: { ctrl: c, state: s }, children: children }));
-}
-export function useOldBit(context) {
-    try {
-        const { ctrl, state } = useContext(context);
-        const v = state.value;
-        function map(m) {
-            var _a;
-            if (v.loading)
-                return (m.onLoading ||
-                    (() => (_jsx(Column, { cross: "center", children: _jsx(Spinner, {}) }))))();
-            if (v.error)
-                return (m.onError ||
-                    ((e) => { var _a; return _jsx(ErrorView, { error: e, retry: (_a = ctrl.reload) !== null && _a !== void 0 ? _a : null }); }))(v.error);
-            return m.onData((_a = v.data) !== null && _a !== void 0 ? _a : null);
-        }
-        return {
-            signal: state,
-            ctrl,
-            map,
-            /**
-             * this is a quality of life function that allows
-             * you to chain the map function with the onData function
-             * @param f the builder function
-             * @returns the built component
-             */
-            onData: (f, { onLoading, onError, } = {}) => map({ onData: f, onLoading: onLoading, onError: onError }),
-        };
-    }
-    catch (e) {
-        const err = `BIT ERROR: NO ${context.displayName} PROVIDED`;
-        console.error(err, e);
-        return {
-            map: (_) => _jsx("div", { children: err }),
-            ctrl: null,
-            signal: null,
-            onData: () => _jsx("div", { children: err }),
-        };
-    }
-}

package/dist/bit/old/old_ctrl_bit.d.ts

@@ -1,30 +0,0 @@
-import type { JSX } from "preact/jsx-runtime";
-import { OldBitUseInterface, OldTWParams } from "./old_bit";
-declare abstract class OldBitControl<I, DT> {
-    p: I;
-    bit: OldTWParams<DT>;
-    constructor(p: I, bit: OldTWParams<DT>);
-    act(fn: (b: DT) => Promise<void>): void;
-    /**
-     * Clean up resources. This is called once
-     * the element is removed from the DOM.
-     */
-    dispose(): void;
-}
-export declare abstract class WorkerControl<I, DT> extends OldBitControl<I, DT> {
-    reload: (() => Promise<void>) | null;
-    abstract worker(): Promise<DT>;
-}
-export declare abstract class StreamControl<I, DT, Stream> extends OldBitControl<I, DT> {
-    protected stream: Stream | null;
-    abstract listen(): Stream;
-    dispose(): void;
-    abstract disposeStream(stream: Stream): void;
-}
-export declare function CtrlBit<I, DT, C extends OldBitControl<I, DT>>(ctrl: (p: I, d: OldTWParams<DT>) => C, name?: string): {
-    Provide: (props: I & {
-        children: React.ReactNode;
-    }) => JSX.Element;
-    use: () => OldBitUseInterface<C, DT>;
-};
-export {};

package/dist/bit/old/old_ctrl_bit.js

@@ -1,108 +0,0 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { useEffect } from "preact/hooks";
-import { makeOldBit, ProvideOldBit, useOldBit, } from "./old_bit";
-class OldBitControl {
-    constructor(p, bit) {
-        this.bit = bit;
-        this.p = p;
-    }
-    act(fn) {
-        this.bit.map({
-            onData: (d) => __awaiter(this, void 0, void 0, function* () {
-                try {
-                    yield fn(d);
-                }
-                catch (e) {
-                    if (e && e.code && e.message)
-                        console.error(`[BitERROR] act: ${e.code} (${e.message})`);
-                    else
-                        console.error("[BitERROR] act: ", e);
-                }
-            }),
-        });
-    }
-    /**
-     * Clean up resources. This is called once
-     * the element is removed from the DOM.
-     */
-    dispose() { }
-}
-export class WorkerControl extends OldBitControl {
-    constructor() {
-        super(...arguments);
-        this.reload = null;
-    }
-}
-export class StreamControl extends OldBitControl {
-    constructor() {
-        super(...arguments);
-        this.stream = null;
-    }
-    dispose() {
-        if (this.stream)
-            this.disposeStream(this.stream);
-    }
-}
-function make(name) {
-    return makeOldBit(name);
-}
-function use(b) {
-    return useOldBit(b);
-}
-export function CtrlBit(ctrl, name) {
-    const context = make((name || "Unknown") + "Bit");
-    function Provide(_a) {
-        var { children } = _a, p = __rest(_a, ["children"]);
-        return ProvideOldBit(context, p, (p, b, c) => __awaiter(this, void 0, void 0, function* () {
-            b.emitLoading();
-            try {
-                if (c instanceof WorkerControl) {
-                    if (c.reload)
-                        yield c.reload();
-                }
-                if (c instanceof StreamControl) {
-                    c.stream = c.listen();
-                }
-            }
-            catch (e) {
-                b.emitError(e);
-            }
-        }), (p, b) => {
-            const c = ctrl(p, b);
-            // clean up on unmount
-            useEffect(() => () => c.dispose(), []);
-            if (c instanceof WorkerControl) {
-                c.reload = () => __awaiter(this, void 0, void 0, function* () {
-                    b.emitLoading();
-                    try {
-                        b.emit(yield c.worker());
-                    }
-                    catch (e) {
-                        b.emitError(e);
-                    }
-                });
-            }
-            return c;
-        }, children);
-    }
-    return { Provide: Provide, use: () => use(context) };
-}