elbe-ui 1.0.8 → 2.0.0

package/dist/ui/theme/theme.js

@@ -1,83 +1,15 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect } from "react";
 import "../../elbe.css";
-import { ToDo } from "../components/dev/todo";
-import { ColorTheme } from "./colors";
-import { GeometryTheme } from "./geometry_theme";
-import { _configCss, makeThemeConfig, ThemeConfigContext, ThemeContext, } from "./theme_context";
-import { TypeTheme } from "./type_theme";
-export * from "./color_theme";
-export * from "./colors";
-export * from "./geometry_theme";
-export * from "./type_theme";
-export class ElbeThemeData {
-    constructor(color, type, geometry) {
-        this.color = color;
-        this.type = type;
-        this.geometry = geometry;
-    }
-    asCss() {
-        const inner = [this.color, this.type, this.geometry]
-            .map((s) => s.asCss())
-            .join("\n");
-        return `.elbe {${inner}}`;
-    }
-    static fromSeed(seed) {
-        return new ElbeThemeData(ColorTheme.generate(seed.color), TypeTheme.generate(seed.type), GeometryTheme.generate(seed.geometry));
-    }
-}
-export function ElbeTheme(p) {
-    var _a;
-    const theme = "theme" in p ? p.theme : ElbeThemeData.fromSeed((_a = p.seed) !== null && _a !== void 0 ? _a : {});
-    const config = makeThemeConfig(p);
-    _addTooltip();
-    return (_jsxs("div", { ["type-label"]: "elbe-theme", style: {
-            width: "100%",
-        }, className: `elbe ${config.dark ? "dark" : ""} ${config.highVis ? "highvis" : ""} ${config.reducedMotion ? "reduced_motion" : ""}`, children: [p.todoOverlay && _jsx(ToDo.Overlay, {}), _jsx("style", { children: theme.asCss() }), _jsx("style", { children: _configCss(theme, config) }), _jsx(ThemeConfigContext.Provider, { value: config, children: _jsx(ThemeContext.Provider, { value: theme, children: p.children }) })] }));
-}
-function _addTooltip() {
-    return useEffect(() => {
-        const _gap = 8;
-        const onHover = (e) => {
-            var _a;
-            const target = (_a = e.target) === null || _a === void 0 ? void 0 : _a.closest("[data-tooltip]");
-            if (!target)
-                return;
-            // remove existing tooltip
-            const existingTooltip = document.querySelector("._elbe_tooltip");
-            if (existingTooltip)
-                existingTooltip.remove();
-            // create new tooltip
-            let tooltip = document.createElement("div");
-            tooltip.className = "_elbe_tooltip";
-            tooltip.textContent = target.getAttribute("data-tooltip");
-            document.body.appendChild(tooltip);
-            const rect = target.getBoundingClientRect();
-            let top = rect.top - tooltip.offsetHeight - _gap;
-            let left = rect.left + rect.width / 2 - tooltip.offsetWidth / 2;
-            // Adjust if out of viewport
-            if (top < 0)
-                top = rect.bottom + _gap;
-            if (left < 0)
-                left = _gap;
-            if (left + tooltip.offsetWidth > window.innerWidth)
-                left = window.innerWidth - tooltip.offsetWidth - _gap;
-            tooltip.style.top = `${top}px`;
-            tooltip.style.left = `${left}px`;
-            // remove tooltip when target is removed or mouse leaves
-            const observer = new MutationObserver(() => {
-                if (!document.body.contains(target) ||
-                    target === null) {
-                    tooltip.remove();
-                    observer.disconnect();
-                }
-            });
-            observer.observe(document.body, { childList: true, subtree: true });
-            target.addEventListener("mouseleave", () => tooltip.remove(), {
-                once: true,
-            });
-        };
-        document.addEventListener("mouseover", onHover);
-        return () => document.removeEventListener("mouseover", onHover);
-    });
-}
+import { geometryThemeData } from "./subthemes/_theme_geometry";
+import { menuThemeData } from "./subthemes/_theme_menu";
+import { motionThemeData } from "./subthemes/_theme_motion";
+import { toastThemeData } from "./subthemes/_theme_toast";
+import { typeThemeData } from "./subthemes/_theme_type";
+import { colorThemeData } from "./subthemes/color/_theme_color";
+export const elbeCoreThemes = {
+    motion: motionThemeData,
+    geometry: geometryThemeData,
+    type: typeThemeData,
+    color: colorThemeData,
+    toast: toastThemeData,
+    menu: menuThemeData,
+};

package/dist/ui/theme/theme_context.d.ts

@@ -1,18 +1,16 @@
-import { ElbeThemeData } from "./theme";
-export interface ElbeThemeConfig {
-    highVis: boolean;
-    dark: boolean;
-    reducedMotion: boolean;
-    scale: number;
-}
-export declare function makeThemeConfig(p: Partial<ElbeThemeConfig>): {
-    highVis: boolean;
-    dark: boolean;
-    reducedMotion: boolean;
-    scale: number;
+import { ElbeChildren } from "../..";
+import { ElbeThemeConfig, ElbeThemeContextData, ElbeThemeData, ElbeThemeSeed } from "./theme";
+export declare function makeThemeContext<T extends ElbeThemeData = {}>(p: {
+    definitions?: T;
+    config?: Partial<ElbeThemeConfig<T>>;
+    seed?: Partial<ElbeThemeSeed<T>>;
+}): {
+    useTheme: () => ElbeThemeContextData<T>;
+    WithTheme: (p: {
+        children: ElbeChildren;
+        theme?: ElbeThemeContextData<T>;
+        seed?: Partial<ElbeThemeSeed<T>>;
+        themeConfig?: ElbeThemeConfig<T> | null;
+    }) => import("react/jsx-runtime").JSX.Element;
 };
-export declare const ThemeConfigContext: import("react").Context<ElbeThemeConfig>;
-export declare function _configCss(t: ElbeThemeData, c: ElbeThemeConfig): string;
-export declare const ThemeContext: import("react").Context<ElbeThemeData>;
-export declare function useThemeConfig(): ElbeThemeConfig;
-export declare function useTheme(): ElbeThemeData;
+export type ElbeThemeContext = ReturnType<typeof makeThemeContext>;

package/dist/ui/theme/theme_context.js

@@ -1,25 +1,86 @@
-import { createContext, useContext } from "react";
-import { ElbeThemeData } from "./theme";
-export function makeThemeConfig(p) {
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useMemo } from "react";
+import { deepMerge } from "../util/merge_deep";
+import { dictMap, throwError, tryOrNull } from "../util/util";
+import { elbeCoreThemes, } from "./theme";
+//const DEMO_TypeData = elbeCoreThemes.type.fromSeed(elbeCoreThemes.type.seed);
+//const DEMO_ColorData = elbeCoreThemes.color.fromSeed(elbeCoreThemes.color.seed);
+//const DEMO_ColorComp = elbeCoreThemes.color.compute(DEMO_ColorData);
+export function makeThemeContext(p) {
     var _a, _b, _c, _d;
+    const allDefinitions = Object.assign(Object.assign({}, elbeCoreThemes), ((_a = p.definitions) !== null && _a !== void 0 ? _a : {}));
+    const config = _configFromSeed(Object.assign(Object.assign({}, elbeCoreThemes), ((_b = p.definitions) !== null && _b !== void 0 ? _b : {})), (_c = p.config) !== null && _c !== void 0 ? _c : {}, (_d = p.seed) !== null && _d !== void 0 ? _d : {});
+    const computedContext = _computeContext(allDefinitions, config);
+    const ElbeThemeContext = createContext(computedContext);
+    function useMaybeTheme() {
+        return tryOrNull(() => useContext(ElbeThemeContext));
+    }
+    function useTheme() {
+        var _a;
+        return (_a = useMaybeTheme()) !== null && _a !== void 0 ? _a : throwError("No theme data");
+    }
+    function WithTheme(p) {
+        const theme = useTheme();
+        const newTheme = useMemo(() => {
+            var _a, _b;
+            if (p.seed) {
+                const newConfig = _configFromSeed(allDefinitions, {}, //p.themeConfig ?? theme.themeConfig,
+                p.seed);
+                return _computeContext(allDefinitions, newConfig);
+            }
+            return ((_a = p.theme) !== null && _a !== void 0 ? _a : _computeContext(allDefinitions, (_b = p.themeConfig) !== null && _b !== void 0 ? _b : theme.themeConfig));
+        }, [allDefinitions, p.theme, p.themeConfig, theme.themeConfig, p.seed]);
+        const css = useMemo(() => {
+            var _a, _b, _c;
+            let css = {};
+            for (let key in newTheme.themeDefinitions) {
+                const def = newTheme.themeDefinitions[key];
+                const subCss = def.asCss((_a = newTheme.theme[key]) !== null && _a !== void 0 ? _a : {});
+                const subCssContext = _toCssVars((_b = def.asCssContext) === null || _b === void 0 ? void 0 : _b.call(def, (_c = newTheme.theme[key]) !== null && _c !== void 0 ? _c : {}), key);
+                css = Object.assign(Object.assign(Object.assign({}, css), subCss), subCssContext);
+            }
+            return css;
+        }, [newTheme]);
+        return (_jsx(ElbeThemeContext.Provider, { value: newTheme, children: _jsx("div", { style: Object.assign({ display: "contents" }, css), children: p.children }) }));
+    }
     return {
-        highVis: (_a = p.highVis) !== null && _a !== void 0 ? _a : false,
-        dark: (_b = p.dark) !== null && _b !== void 0 ? _b : false,
-        reducedMotion: (_c = p.reducedMotion) !== null && _c !== void 0 ? _c : false,
-        scale: (_d = p.scale) !== null && _d !== void 0 ? _d : 1,
+        useTheme,
+        WithTheme,
     };
 }
-export const ThemeConfigContext = createContext(makeThemeConfig({}));
-export function _configCss(t, c) {
-    const cBack = c.dark ? t.color.color.dark : t.color.color.light;
-    return `html,:root {
-  font-size: ${c.scale * 16}px;
-  ${cBack.asCss()};}`;
+function _configFromSeed(defs, config, seed) {
+    var _a, _b;
+    const conf = {};
+    for (let key in defs) {
+        if (key === "with")
+            continue;
+        //if (!(key in seed)) continue;
+        const fullSeed = deepMerge(defs[key].seed, (_a = seed === null || seed === void 0 ? void 0 : seed[key]) !== null && _a !== void 0 ? _a : {});
+        conf[key] = Object.assign(Object.assign({}, defs[key].fromSeed(fullSeed)), ((_b = config === null || config === void 0 ? void 0 : config[key]) !== null && _b !== void 0 ? _b : {}));
+    }
+    return conf;
 }
-export const ThemeContext = createContext(ElbeThemeData.fromSeed({}));
-export function useThemeConfig() {
-    return useContext(ThemeConfigContext);
+function _with(definitions, config, worker) {
+    const partConf = worker(Object.assign({}, config));
+    const newConf = Object.assign(Object.assign({}, config), partConf);
+    return _computeContext(definitions, newConf);
 }
-export function useTheme() {
-    return useContext(ThemeContext);
+function _computeContext(definitions, config) {
+    return {
+        themeDefinitions: definitions,
+        themeConfig: config,
+        theme: dictMap(config, (v, k) => definitions[k].compute(v)),
+        useWith: (worker, dependencies) => useMemo(() => {
+            return _with(definitions, config, worker);
+        }, [...dependencies, config]),
+    };
+}
+function _toCssVars(p, prefix) {
+    if (!p)
+        return {};
+    let cssVars = {};
+    for (let key in p) {
+        cssVars = Object.assign(Object.assign({}, cssVars), { [`--elbe-context-${prefix}-${key}`]: p[key] });
+    }
+    return cssVars;
 }

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

@@ -0,0 +1 @@
+export declare function elevatedShadow(dark: boolean): string;

package/dist/ui/util/_util.js

@@ -0,0 +1,3 @@
+export function elevatedShadow(dark) {
+    return `0px 0px .625rem -.125rem ${dark ? "#ffffff60" : "#00000060"}`;
+}

package/dist/ui/util/error_view.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Icons } from "../..";
+import { Column, Icons, Row } from "../..";
 export function _ElbeErr(msg) {
-    return (_jsxs("div", { className: "row text-s gap-half", style: {
+    return (_jsxs(Row, { style: {
             background: "#ee0044",
             color: "white",
             borderRadius: "4px",
             textAlign: "left",
             padding: ".5rem",
-        }, children: [_jsx(Icons.CircleX, {}), _jsxs("div", { className: "column gap-none cross-stretch", children: [_jsx("b", { className: "text-s", children: "elbe error" }), _jsx("span", { style: { marginTop: "-.125rem" }, children: msg })] })] }));
+        }, children: [_jsx(Icons.CircleX, {}), _jsxs(Column, { gap: 0, children: [_jsx("b", { className: "text-s", children: "elbe error" }), _jsx("span", { style: { marginTop: "-.125rem" }, children: msg })] })] }));
 }

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

@@ -0,0 +1 @@
+export declare function deepMerge<T extends Dict<any>>(original: T, toMerge: Partial<T>, depth?: number): T;

package/dist/ui/util/merge_deep.js

@@ -0,0 +1,18 @@
+export function deepMerge(original, toMerge, depth = 5000) {
+    const output = {};
+    const keys = Object.keys(toMerge !== null && toMerge !== void 0 ? toMerge : {}).concat(Object.keys(original !== null && original !== void 0 ? original : {}));
+    function isPlainObject(v) {
+        return v !== null && typeof v === "object" && !Array.isArray(v);
+    }
+    for (const key of new Set(keys)) {
+        const vOriginal = original === null || original === void 0 ? void 0 : original[key];
+        const vToMerge = toMerge === null || toMerge === void 0 ? void 0 : toMerge[key];
+        if (isPlainObject(vOriginal) && isPlainObject(vToMerge) && depth > 0) {
+            output[key] = deepMerge(vOriginal, vToMerge, depth - 1);
+        }
+        else {
+            output[key] = vToMerge !== undefined ? vToMerge : vOriginal;
+        }
+    }
+    return output;
+}

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

@@ -0,0 +1,17 @@
+import { ElbeChild } from "./types";
+export declare const elbeDomElements: {
+    readonly elbe_app: {
+        readonly zindex: 0;
+    };
+    readonly elbe_dialog: {
+        readonly zindex: 1000;
+    };
+    readonly elbe_tooltip: {
+        readonly zindex: 2000;
+    };
+    readonly elbe_toast: {
+        readonly zindex: 3000;
+    };
+};
+export declare function getRootElement(id: keyof typeof elbeDomElements): HTMLElement;
+export declare function renderElbe(children: ElbeChild): void;

package/dist/ui/util/root.js

@@ -0,0 +1,23 @@
+import { createRoot } from "react-dom/client";
+export const elbeDomElements = {
+    elbe_app: { zindex: 0 },
+    elbe_dialog: { zindex: 1000 },
+    elbe_tooltip: { zindex: 2000 },
+    elbe_toast: { zindex: 3000 },
+};
+export function getRootElement(id) {
+    const existing = document.getElementById(id);
+    if (existing)
+        return existing;
+    console.info(`ELBE: root element '${id}' not found. Creating...`);
+    const el = document.createElement("div");
+    el.id = id;
+    el.style.zIndex = `${elbeDomElements[id].zindex}`;
+    el.setAttribute("note", "auto-created by elbe-ui");
+    document.body.appendChild(el);
+    return el;
+}
+export function renderElbe(children) {
+    const rootEl = getRootElement("elbe_app");
+    createRoot(rootEl).render(children);
+}

package/dist/ui/util/toast/_toast.d.ts

@@ -0,0 +1,5 @@
+import { ToastModel } from "./toast_ctx";
+export declare function _Toast(p: {
+    model: ToastModel;
+    onClose?: () => void;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Icons, Row, Text } from "../../..";
+import { Card } from "../../components/base/card";
+import { Icon, IconButton } from "../../components/button/icon_button";
+export function _Toast(p) {
+    return (_jsx(Card, { elevated: true, padding: 0, scheme: "inverse", manner: p.model.kind ? "minor" : "plain", kind: p.model.kind, className: "toast-animated", style: { pointerEvents: "auto" }, children: _jsxs(Row, { cross: "center", gap: 0.5, style: { minHeight: "3.5rem", paddingLeft: "1rem" }, children: [p.model.icon && _jsx(Icon, { icon: p.model.icon }), _jsx(Text, { flex: true, bold: true, v: p.model.message, style: { padding: ".5rem 0" } }), p.onClose && (_jsx(IconButton, { manner: p.model.kind ? "minor" : "plain", transparent: true, ariaLabel: "dismiss the toast", icon: Icons.X, onTap: () => p.onClose && p.onClose() }))] }) }));
+}

package/dist/ui/util/toast/toast_ctx.d.ts

@@ -0,0 +1,28 @@
+import { IconChild } from "../../components/button/icon_button";
+import { ColorSelection } from "../../theme/subthemes/color/colors/colors";
+import { ElbeChildren } from "../types";
+/**
+ * Options for showing a toast notification.
+ * If you set `duration` to null, the toast will not auto-dismiss.
+ * You have to set `dismissible` to true to allow manual dismissal in that case.
+ */
+export type ToastOptions = {
+    icon?: IconChild;
+    kind?: ColorSelection.KindsAlert;
+    duration?: number | null;
+    dismissible?: boolean;
+};
+export type ToastModel = ToastOptions & {
+    message: string;
+};
+export type ToastCtrl = {
+    showToast: (message: string, options?: ToastOptions) => void;
+};
+export declare function useToast(): ToastCtrl;
+/**
+ * must be inside of a theme provider (such as `WithTheme`)
+ * @returns a context provider for toast messages
+ */
+export declare function ToastProvider(p: {
+    children: ElbeChildren;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// ToastContext.js
+import { createContext, useContext, useMemo, useState } from "react";
+import ReactDOM from "react-dom";
+import { useApp } from "../../app/app_ctxt";
+import { getRootElement } from "../root";
+import { _Toast } from "./_toast";
+const ToastContext = createContext({
+    showToast: () => console.error("toast context was not initialized"),
+});
+export function useToast() {
+    return useContext(ToastContext);
+}
+/**
+ * must be inside of a theme provider (such as `WithTheme`)
+ * @returns a context provider for toast messages
+ */
+export function ToastProvider(p) {
+    const { _appThemeContext } = useApp();
+    const { theme } = _appThemeContext.useTheme();
+    const rootDOM = useMemo(() => getRootElement("elbe_toast"), []);
+    const [toasts, setToasts] = useState([]);
+    const [vert, hori] = useMemo(() => {
+        var _a;
+        const alignment = (_a = theme.toast.alignment) !== null && _a !== void 0 ? _a : "bottom_center";
+        return alignment.split("_");
+    }, [theme.toast.alignment]);
+    function addToast(toast) {
+        var _a, _b;
+        const id = Date.now() + "";
+        setToasts([...toasts, Object.assign(Object.assign({}, toast), { id })]);
+        if (toast.duration === null && toast.dismissible === true)
+            return;
+        setTimeout(() => removeToast(id), (_b = (_a = toast.duration) !== null && _a !== void 0 ? _a : theme.toast.duration) !== null && _b !== void 0 ? _b : 3000);
+    }
+    function removeToast(id) {
+        setToasts((t) => t.filter((toast) => toast.id !== id));
+    }
+    return (_jsxs(ToastContext.Provider, { value: {
+            showToast: (message, options) => addToast(Object.assign(Object.assign({}, (options !== null && options !== void 0 ? options : {})), { message })),
+        }, children: [p.children, ReactDOM.createPortal(_jsx("div", { className: "elbe", style: {
+                    background: "transparent",
+                    position: "fixed",
+                    zIndex: 2001,
+                    top: 0,
+                    left: 0,
+                    bottom: 0,
+                    right: 0,
+                    display: "flex",
+                    flexDirection: "column",
+                    justifyContent: vert === "top" ? "start" : "end",
+                    alignItems: hori,
+                    pointerEvents: "none",
+                }, children: _jsx("div", { style: {
+                        display: "flex",
+                        gap: ".5rem",
+                        flexDirection: vert === "top" ? "column-reverse" : "column",
+                        alignItems: "stretch",
+                        width: "40rem",
+                        margin: "1rem 2rem",
+                    }, children: toasts.map((toast) => (_jsx(_Toast, { model: toast, onClose: toast.dismissible ? () => removeToast(toast.id) : undefined }, toast.id))) }) }), rootDOM)] }));
+}

package/dist/ui/util/toast/toast_legacy.d.ts

@@ -0,0 +1,5 @@
+/**
+ * @deprecated use the new `const {showToast} = useToast()` hook based model instead
+ * @param message the message you want to display
+ */
+export declare function showToast(message: string): void;

package/dist/ui/util/{toast.js → toast/toast_legacy.js}

@@ -1,12 +1,12 @@
 /**
- * show a toast message at the bottom of the screen
- * @param message the message to show
+ * @deprecated use the new `const {showToast} = useToast()` hook based model instead
+ * @param message the message you want to display
  */
 export function showToast(message) {
     // find the 'elbe' element
-    const elbe = document.querySelector(".elbe");
+    const elbe = document.getElementById("elbe-app");
     if (!elbe) {
-        console.warn("could not show toast, no base element with '.elbe' 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/util.d.ts

@@ -37,3 +37,11 @@ export type LayoutModeInfo = {
  */
 export declare function useLayoutMode(): LayoutModeInfo;
 export declare function useSiteScroll(): number;
+export declare function throwError(message: string): never;
+export declare function tryOrNull<T>(w: () => T | null): T | null;
+export declare function omit<T extends Dict<any>>(obj: T, ...keys: string[]): T;
+export declare function dictMap<T extends Dict<any>, U extends Dict<any>>(obj: T, f: (v: T[keyof T], k: keyof T) => U[keyof U] | undefined): U;
+export declare function dictWithoutUndefined<T extends Dict<any>>(obj?: T): {
+    [key in keyof T]: Exclude<T[key], undefined>;
+};
+export declare function hash(v: any): string;

package/dist/ui/util/util.js

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { showToast } from "../..";
+import { showToast } from "./toast/toast_legacy";
 export function clamp(value, min, max) {
     return Math.min(Math.max(value, min), max);
 }
@@ -88,3 +88,56 @@ export function useSiteScroll() {
     }, []);
     return scroll;
 }
+export function throwError(message) {
+    throw new Error(message);
+}
+export function tryOrNull(w) {
+    try {
+        return w();
+    }
+    catch (e) {
+        console.warn(e);
+        return null;
+    }
+}
+export function omit(obj, ...keys) {
+    const res = Object.assign({}, obj);
+    for (const key of keys) {
+        if (key in obj)
+            delete res[key];
+    }
+    return res;
+}
+export function dictMap(obj, f) {
+    const res = {};
+    for (const key in obj) {
+        const v = f(obj[key], key);
+        if (v !== undefined)
+            res[key] = v;
+    }
+    return res;
+}
+export function dictWithoutUndefined(obj) {
+    if (!obj)
+        return {};
+    const res = {};
+    for (const key in obj) {
+        const v = obj[key];
+        if (v !== undefined)
+            res[key] = v;
+    }
+    return res;
+}
+/// A simple hash function to create a hash from any value
+export function hash(v) {
+    const s = JSON.stringify(v);
+    let hash = 0, i, chr;
+    if (s.length === 0)
+        return hash.toString();
+    for (i = 0; i < s.length; i++) {
+        chr = s.charCodeAt(i);
+        hash = (hash << 5) - hash + chr;
+        hash |= 0; // Convert to 32bit integer
+    }
+    return hash.toString();
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "elbe-ui",
-  "version": "1.0.8",
+  "version": "2.0.0",
   "author": "Robin Naumann",
   "license": "MIT",
   "repository": {
@@ -21,22 +21,24 @@
   "scripts": {
     "build:ts": "tsc",
     "build:dts": "tsc --declaration",
-    "build:css": "sass -q style/elbe.scss dist/elbe.css",
+    "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)",
     "pub": "bun run build && npm publish"
   },
   "devDependencies": {
-    "@types/bun": "latest",
-    "sass": "^1.93.2"
+    "@types/bun": "^1.3.4",
+    "sass": "^1.97.0"
   },
   "peerDependencies": {
-    "typescript": "^5.5.4"
+    "typescript": "^5.9.3"
   },
   "dependencies": {
+    "@types/react-dom": "^19.2.3",
     "colors-convert": "^1.4.1",
-    "lucide-react": "^0.438.0",
-    "react": "^19.2.0",
-    "wouter": "^3.7.1"
+    "lucide-react": "^0.561.0",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
+    "wouter": "^3.8.1"
   }
 }

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

@@ -1,10 +0,0 @@
-import type { ElbeChildren } from "../util/types";
-export declare function ElbeDialog({ title, open, onClose, children, _style, barrierDismissible, maxWidth, }: {
-    _style?: React.CSSProperties;
-    title: string;
-    open: boolean;
-    onClose: () => void;
-    children: ElbeChildren;
-    barrierDismissible?: boolean;
-    maxWidth?: number;
-}): import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/dialog.js

@@ -1,35 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { X } from "lucide-react";
-import { useEffect } from "react";
-import { IconButton } from "./button/icon_button";
-import { Spaced } from "./layout/spaced";
-export function ElbeDialog({ title, open, onClose, children, _style, barrierDismissible, maxWidth, }) {
-    useEffect(() => {
-        if (open) {
-            document.body.style.overflow = "hidden";
-        }
-        else {
-            document.body.style.overflow = "";
-        }
-        return () => {
-            document.body.style.overflow = "";
-        };
-    }, [open]);
-    return (_jsx("dialog", { onClick: (e) => {
-            e.stopPropagation();
-            e.preventDefault();
-            if (barrierDismissible)
-                onClose();
-        }, open: open, style: Object.assign({ textAlign: "start" }, (_style !== null && _style !== void 0 ? _style : {})), children: _jsxs("div", { className: "elbe_dialog_base primary card plain-opaque padding-none", style: {
-                maxWidth: `min(${maxWidth !== null && maxWidth !== void 0 ? maxWidth : 40}rem, 100%)`,
-                minWidth: "10rem",
-            }, children: [_jsxs("div", { className: "row cross-center padded main-between", children: [_jsx("div", { className: "body-l b", children: title }), _jsx(IconButton.plain, { ariaLabel: "Close", icon: X, onTap: (e) => {
-                                e.stopPropagation();
-                                e.preventDefault();
-                                onClose();
-                            } })] }), _jsx(Spaced, { amount: 0.5 }), _jsx("div", { className: "padded", style: {
-                        paddingTop: 0,
-                        maxHeight: "80vh",
-                        overflow: "auto",
-                    }, children: children })] }) }));
-}

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

@@ -1,15 +0,0 @@
-import { ElbeChild, ElbeRoute, HeaderLogos } from "../../..";
-export type AppBaseProps = HeaderLogos & {
-    globalActions?: ElbeChild[];
-    children: ElbeRoute | ElbeRoute[];
-    hashBasedRouting?: boolean;
-};
-/**
- * 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("react/jsx-runtime").JSX.Element;