elbe-ui 2.0.0 → 2.0.2

package/dist/bit/_bit_provider.d.ts

@@ -1,6 +1,6 @@
 import { Context } from "react";
 import { BitParams, BitUseInterface } from "..";
-import { _BitCtrlMaker, _BitProvider } from "./_bit_utils";
+import { _BitCtrlMaker, _BitProvider } from "./_bit_types";
 export declare function _makeBitProvider<D, P, I>(context: Context<BitUseInterface<D, P, I>>, bitP: BitParams<D, P, I> & {
     control: _BitCtrlMaker<D, P, I>;
 }): _BitProvider<P>;

package/dist/bit/_bit_provider.js

@@ -8,9 +8,9 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useState } from "react";
 import { Column, ErrorView, Spinner, } from "..";
-import { _isFn } from "./_bit_utils";
+import { _isFn } from "./_bit_types";
 function _LoadView({}) {
     return (_jsx(Column, { cross: "center", children: _jsx(Spinner, {}) }));
 }
@@ -128,7 +128,7 @@ export function _makeBitProvider(context, bitP) {
             const userCtrl = bitP.control(Object.assign(Object.assign({}, baseCtrl), { parameters: p, reload: _reload, consider: consider }));
             return Object.assign(Object.assign(Object.assign({}, baseCtrl), userCtrl), { reload: _reload, parameters: p, consider: consider });
         }
-        const ctrl = useMemo(() => _make(), [state]);
+        const ctrl = _make();
         useEffect(() => {
             ctrl.reload(true);
             return () => {
@@ -147,7 +147,7 @@ export function _makeBitProvider(context, bitP) {
             };
         }, []);
         // ========== DEFINE THE JSX ELEMENT ==========
-        return _jsx(context.Provider, { value: ctrl, children: p.children });
+        return (_jsx(context.Provider, { value: Object.assign({}, ctrl), children: p.children }));
     }
     return _BitProvider;
 }

package/dist/bit/bit.d.ts

@@ -1,6 +1,6 @@
 import { Context } from "react";
 import { Maybe, PromiseOr } from "..";
-import { _BitCtrlInput, _BitCtrlMaker, _BitData, _BitGetInterface, _BitInterface } from "./_bit_utils";
+import { _BitCtrlInput, _BitCtrlMaker, _BitData, _BitGetInterface, _BitInterface } from "./_bit_types";
 export type BitStates = "loading" | "error" | "data";
 export type BitContext<D> = Context<_BitData<D> | null>;
 export type BitTriMap<T, D> = {

package/dist/bit/bit.js

@@ -14,6 +14,7 @@ import { _makeBitProvider } from "./_bit_provider";
 export function createBit(_a) {
     var { control = () => ({}) } = _a, p = __rest(_a, ["control"]);
     const context = createContext(null);
+    context.displayName = p.debugLabel || "BitContext";
     {
         return {
             Provider: _makeBitProvider(context, Object.assign(Object.assign({}, p), { control })),

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

@@ -1,12 +1,13 @@
-import { ElbeRoute, ElbeThemeContext } from "../..";
+import { ElbeRoute, ElbeThemeConfig, ElbeThemeContext, ElbeThemeData } from "../..";
 import { AppConfig } from "./app_ctxt";
 type _AppThemeConfig = {
     themeContext: ElbeThemeContext;
     themeSeed?: Partial<Parameters<_AppThemeConfig["themeContext"]["WithTheme"]>[0]["seed"]>;
+    themeSelector?: (config: ElbeThemeConfig<ElbeThemeData>) => Partial<ElbeThemeConfig<ElbeThemeData>>;
 };
 type _AppProps = AppConfig & _AppThemeConfig;
 type AppProps = _AppProps & {
-    children: ElbeRoute | ElbeRoute[];
+    children?: ElbeRoute | ElbeRoute[];
 };
 export declare function ElbeApp(p: AppProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/ui/app/app.js

@@ -9,55 +9,70 @@ export function ElbeApp(p) {
         if (p.title)
             document.title = p.title;
     }, [p.title]);
-    return (_jsx(p.themeContext.WithTheme, { seed: p.themeSeed, children: _jsx(Wouter.Router, { base: (_a = p.routerConfig) === null || _a === void 0 ? void 0 : _a.basePath, children: _jsx(_App, { config: omit(p, "children", "themeContext", "themeSeed"), themeContext: p.themeContext, children: p.children }) }) }));
+    const trueBase = useMemo(() => {
+        var _a, _b;
+        const path = (_b = (_a = p.routerConfig) === null || _a === void 0 ? void 0 : _a.basePath) !== null && _b !== void 0 ? _b : "/";
+        return path === "/" ? undefined : path;
+    }, [(_a = p.routerConfig) === null || _a === void 0 ? void 0 : _a.basePath]);
+    return (_jsx(p.themeContext.WithTheme, { seed: p.themeSeed, children: _jsx(Wouter.Router, { base: trueBase, children: _jsx(_App, { config: omit(p, "children", "themeContext", "themeSeed", "themeSelector"), themeContext: p.themeContext, themeSelector: p.themeSelector, children: p.children }) }) }));
 }
 function _initialLocation() {
     return (window.location.pathname + window.location.search + window.location.hash);
 }
 function _App(p) {
+    var _a;
+    const theme = p.themeContext.useTheme();
+    const themeSelected = theme.useWith((_a = p.themeSelector) !== null && _a !== void 0 ? _a : (() => ({})), [
+        p.config,
+        p.themeSelector,
+    ]);
     const menuItems = useMemo(() => {
         return _extractMenuItems(p.children);
     }, [p.children]);
     const [location, navigate] = Wouter.useLocation();
     const [history, setHistory] = useState([_initialLocation()]);
     const [menuOpen, setMenuOpen] = useState(false);
-    return (_jsx(AppContext.Provider, { value: {
-            appConfig: p.config,
-            _appThemeContext: p.themeContext,
-            router: {
-                goBack: (steps = 1) => {
-                    if (history.length === 0)
-                        return;
-                    const targetIndex = Math.max(0, history.length - 1 - steps);
-                    const target = history[targetIndex];
-                    setHistory((h) => h.slice(0, targetIndex + 1));
-                    navigate(target, { replace: true });
-                },
-                go: (p, replace) => {
-                    setHistory((h) => {
-                        if (replace === "all")
-                            return [p];
-                        const repl = Math.max(0, replace !== null && replace !== void 0 ? replace : 0);
-                        if (repl === 0)
-                            return [...h, p];
-                        return [...h.slice(0, -repl), p];
-                    });
-                    navigate(p, { replace: (replace !== null && replace !== void 0 ? replace : 0) !== 0 });
+    return (_jsx(p.themeContext.WithTheme, { theme: themeSelected, children: _jsx(AppContext.Provider, { value: {
+                appConfig: p.config,
+                _appThemeContext: p.themeContext,
+                router: {
+                    goBack: (steps = 1) => {
+                        if (history.length === 0)
+                            return;
+                        const targetIndex = Math.max(0, history.length - 1 - steps);
+                        const target = history[targetIndex];
+                        setHistory((h) => h.slice(0, targetIndex + 1));
+                        navigate(target, { replace: true });
+                    },
+                    go: (p, replace) => {
+                        setHistory((h) => {
+                            if (replace === "all")
+                                return [p];
+                            const repl = Math.max(0, replace !== null && replace !== void 0 ? replace : 0);
+                            if (repl === 0)
+                                return [...h, p];
+                            return [...h.slice(0, -repl), p];
+                        });
+                        navigate(p, { replace: (replace !== null && replace !== void 0 ? replace : 0) !== 0 });
+                    },
+                    history: history,
+                    location: location,
                 },
-                history: history,
-                location: location,
-            },
-            menu: {
-                isOpen: menuOpen,
-                setOpen: (s) => setMenuOpen(s),
-            },
-        }, children: _jsx(ToastProvider, { children: _jsx(DialogsProvider, { children: _jsxs(Box, { typeLabel: "app_base", scheme: "primary", style: {
-                        display: "flex",
-                        width: "100%",
-                        minHeight: "100vh",
-                    }, children: [menuItems.length > 0 && _jsx(Menu, { items: menuItems }), _jsx("div", { style: { flex: 1, width: "0px" }, children: _jsx(Wouter.Switch, { children: p.children }) })] }) }) }) }));
+                menu: menuItems.length === 0
+                    ? undefined
+                    : {
+                        isOpen: menuOpen,
+                        setOpen: (s) => setMenuOpen(s),
+                    },
+            }, children: _jsx(ToastProvider, { children: _jsx(DialogsProvider, { children: _jsxs(Box, { typeLabel: "app_base", scheme: "primary", style: {
+                            display: "flex",
+                            width: "100%",
+                            minHeight: "100vh",
+                        }, children: [menuItems.length > 0 && _jsx(Menu, { items: menuItems }), _jsx("div", { style: { flex: 1, width: "0px" }, children: _jsx(Wouter.Switch, { children: p.children }) })] }) }) }) }) }));
 }
 function _extractMenuItems(children) {
+    if (!children)
+        return [];
     const childs = Array.isArray(children) ? children : [children];
     const items = [];
     for (const child of childs) {

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

@@ -23,7 +23,7 @@ type _RouterState = {
 export interface AppState {
     appConfig: AppConfig;
     router: _RouterState;
-    menu: _MenuState;
+    menu?: _MenuState;
     /**
      * @private this field is only to be used within elbe components.
      */

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

@@ -13,6 +13,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { _Box, } from "../../..";
 import { useApp } from "../../app/app_ctxt";
+import { css } from "../../util/_util";
 import { WithTooltip } from "../tooltip";
 export function Card(_a) {
     var _b, _c;
@@ -22,11 +23,15 @@ export function Card(_a) {
     const isBordered = useMemo(() => {
         return (bordered !== null && bordered !== void 0 ? bordered : false) || theme.color.isContrast;
     }, [bordered, theme.color.isContrast]);
-    return (_jsx(WithTooltip, { tooltip: elbe.tooltip, children: _jsx(_Box, { mode: mode, scheme: scheme, kind: kind, manner: manner, padding: padding, margin: margin, state: state, className: elbe.className, flex: elbe.flex, elevated: elevated, frosted: frosted, style: Object.assign({ overflow: overflow, borderRadius: sharp ? 0 : `${theme.geometry.radius}rem`, borderStyle: isBordered ? "solid" : undefined, borderWidth: isBordered
-                    ? `${theme.geometry.borderWidth}rem`
-                    : undefined, borderColor: isBordered
-                    ? "var(--elbe-context-color-border, transparent)"
-                    : undefined, opacity: onTap === null ? 0.5 : 1 }, ((_b = elbe.style) !== null && _b !== void 0 ? _b : {})), native: Object.assign(Object.assign(Object.assign({}, (onTap !== undefined
+    const styles = {
+        radius: sharp ? 0 : `${theme.geometry.radius}rem`,
+        borderStyle: isBordered ? "solid" : undefined,
+        borderWidth: isBordered ? `${theme.geometry.borderWidth}rem` : undefined,
+        borderColor: isBordered
+            ? "var(--elbe-context-color-border, transparent)"
+            : undefined,
+    };
+    return (_jsx(WithTooltip, { tooltip: elbe.tooltip, children: _jsx(_Box, { mode: mode, scheme: scheme, kind: kind, manner: manner, padding: padding, margin: margin, state: state, className: elbe.className, flex: elbe.flex, elevated: elevated, frosted: frosted, style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ overflow: overflow }, css.borderRadius(styles.radius)), css.borderStyle(styles.borderStyle)), css.borderWidth(styles.borderWidth)), css.borderColor(styles.borderColor)), { opacity: onTap === null ? 0.5 : 1 }), ((_b = elbe.style) !== null && _b !== void 0 ? _b : {})), native: Object.assign(Object.assign(Object.assign({}, (onTap !== undefined
                 ? {
                     onClick: (e) => {
                         e.preventDefault();

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

@@ -11,19 +11,13 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useApp } from "../../app/app_ctxt";
+import { css } from "../../util/_util";
 import { _ElbeErr } from "../../util/error_view";
 import { applyProps } from "../base/box";
 import { Card } from "../base/card";
 export function Range(p) {
     var _a, _b;
-    return ((_a = p.min) !== null && _a !== void 0 ? _a : 0) > ((_b = p.max) !== null && _b !== void 0 ? _b : 100) ? (_ElbeErr("Range: max is smaller than min")) : (_jsx(Card, { ariaLabel: null, scheme: "secondary", kind: "accent", manner: "minor", tooltip: p.tooltip, style: {
-            overflow: "unset",
-            backgroundColor: "transparent",
-            padding: "0",
-            margin: "0",
-            borderStyle: "none",
-            width: "100%",
-        }, children: _jsx(_StyledRange, Object.assign({}, p)) }));
+    return ((_a = p.min) !== null && _a !== void 0 ? _a : 0) > ((_b = p.max) !== null && _b !== void 0 ? _b : 100) ? (_ElbeErr("Range: max is smaller than min")) : (_jsx(Card, { ariaLabel: null, scheme: "secondary", kind: "accent", manner: "minor", tooltip: p.tooltip, style: Object.assign({ overflow: "unset", backgroundColor: "transparent", padding: "0", margin: "0", width: "100%" }, css.borderStyle("none")), children: _jsx(_StyledRange, Object.assign({}, p)) }));
 }
 function _StyledRange(_a) {
     var _b, _c;

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

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { KindAlertIcon, Text } from "../../../..";
 import { useApp } from "../../../app/app_ctxt";
+import { css } from "../../../util/_util";
 import { randomAlphaNum } from "../../../util/util";
 import { Card } from "../../base/card";
 import { Row } from "../../layout/flex";
@@ -54,12 +55,7 @@ function _Field(p) {
                     : p.successMessage
                         ? { kind: "success", msg: p.successMessage }
                         : null;
-        return (_jsx(LabeledInput, Object.assign({}, p, { id: id, disabled: !p.onInput, typeLabel: "text-field", manner: manner, children: _jsxs(Card, { className: "elbe-focussink", style: {
-                    display: "flex",
-                    flexDirection: "column",
-                    alignItems: "stretch",
-                    borderStyle: "none",
-                }, kind: msg === null || msg === void 0 ? void 0 : msg.kind, padding: 0, manner: msg ? "major" : undefined, children: [_jsx(Card
+        return (_jsx(LabeledInput, Object.assign({}, p, { id: id, disabled: !p.onInput, typeLabel: "text-field", manner: manner, children: _jsxs(Card, { className: "elbe-focussink", style: Object.assign({ display: "flex", flexDirection: "column", alignItems: "stretch" }, css.borderStyle("none")), kind: msg === null || msg === void 0 ? void 0 : msg.kind, padding: 0, manner: msg ? "major" : undefined, children: [_jsx(Card
                     // inner card for input only
                     , { 
                         // inner card for input only

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

@@ -35,7 +35,8 @@ export function Header(p) {
             zIndex: 80,
         }, children: [p.leading && p.leading !== "back" && p.leading !== "close"
                 ? p.leading
-                : !layoutMode.isWide && (_jsx(IconButton.plain, { ariaLabel: "open/close menu", onTap: () => menu.setOpen(!menu.isOpen), icon: MenuIcon })), p.leading === "back" && _jsx(BackButton, {}), p.leading === "close" && _jsx(BackButton, { close: true }), !layoutMode.isMobile && (_jsx(_Logo, { logo: (_b = p.logo) !== null && _b !== void 0 ? _b : (_c = appConfig === null || appConfig === void 0 ? void 0 : appConfig.icons) === null || _c === void 0 ? void 0 : _c.logo, logoDark: (_d = p.logoDark) !== null && _d !== void 0 ? _d : (_e = appConfig === null || appConfig === void 0 ? void 0 : appConfig.icons) === null || _e === void 0 ? void 0 : _e.logoDark, lMargin: 0.5 })), (!appConfig || layoutMode.isWide) && (_jsx("div", { style: { margin: "-1rem", width: "1.5rem" } })), _jsx(_HeaderTitle, { title: p.title, center: (_f = p.centerTitle) !== null && _f !== void 0 ? _f : false }), _jsx(_Toolbar, { actions: [...((_g = p.actions) !== null && _g !== void 0 ? _g : []), ...((_h = appConfig === null || appConfig === void 0 ? void 0 : appConfig.globalActions) !== null && _h !== void 0 ? _h : [])] }), layoutMode.isWide && (_jsx(_Logo, { logo: (_j = p.endLogo) !== null && _j !== void 0 ? _j : (_k = appConfig === null || appConfig === void 0 ? void 0 : appConfig.icons) === null || _k === void 0 ? void 0 : _k.endLogo, logoDark: (_l = p.endLogoDark) !== null && _l !== void 0 ? _l : (_m = appConfig === null || appConfig === void 0 ? void 0 : appConfig.icons) === null || _m === void 0 ? void 0 : _m.endLogoDark, rMargin: 0.5 }))] }));
+                : !layoutMode.isWide &&
+                    menu && (_jsx(IconButton.plain, { ariaLabel: "open/close menu", onTap: () => menu.setOpen(!menu.isOpen), icon: MenuIcon })), p.leading === "back" && _jsx(BackButton, {}), p.leading === "close" && _jsx(BackButton, { close: true }), !layoutMode.isMobile && (_jsx(_Logo, { logo: (_b = p.logo) !== null && _b !== void 0 ? _b : (_c = appConfig === null || appConfig === void 0 ? void 0 : appConfig.icons) === null || _c === void 0 ? void 0 : _c.logo, logoDark: (_d = p.logoDark) !== null && _d !== void 0 ? _d : (_e = appConfig === null || appConfig === void 0 ? void 0 : appConfig.icons) === null || _e === void 0 ? void 0 : _e.logoDark, lMargin: 0.5 })), (!appConfig || layoutMode.isWide) && (_jsx("div", { style: { margin: "-1rem", width: "1.5rem" } })), _jsx(_HeaderTitle, { title: p.title, center: (_f = p.centerTitle) !== null && _f !== void 0 ? _f : false }), _jsx(_Toolbar, { actions: [...((_g = p.actions) !== null && _g !== void 0 ? _g : []), ...((_h = appConfig === null || appConfig === void 0 ? void 0 : appConfig.globalActions) !== null && _h !== void 0 ? _h : [])] }), layoutMode.isWide && (_jsx(_Logo, { logo: (_j = p.endLogo) !== null && _j !== void 0 ? _j : (_k = appConfig === null || appConfig === void 0 ? void 0 : appConfig.icons) === null || _k === void 0 ? void 0 : _k.endLogo, logoDark: (_l = p.endLogoDark) !== null && _l !== void 0 ? _l : (_m = appConfig === null || appConfig === void 0 ? void 0 : appConfig.icons) === null || _m === void 0 ? void 0 : _m.endLogoDark, rMargin: 0.5 }))] }));
 }
 export function _Logo(p) {
     var _a, _b;

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

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

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

@@ -30,6 +30,8 @@ export function Menu(p) {
         }
         return topBot;
     }, [p.items]);
+    if (!menu)
+        return null;
     return (_jsxs(_Fragment, { children: [layoutMode.isWide && (_jsx("div", { style: {
                     width: menuWidth,
                     minWidth: menuWidth,
@@ -44,6 +46,8 @@ function _Menu(p) {
     const { _appThemeContext, menu, appConfig } = useApp();
     const { theme } = _appThemeContext.useTheme();
     const layoutMode = useLayoutMode();
+    if (!menu)
+        return null;
     return (_jsx(Card, { onTap: () => {
             if (layoutMode.isWide)
                 return;
@@ -73,6 +77,8 @@ function _Menu(p) {
 }
 function _MenuItemView({ item }) {
     const { menu, router } = useApp();
+    if (!menu)
+        return null;
     return (_jsx(Button
     //sharp
     , { 

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

@@ -1 +1,8 @@
+import React from "react";
 export declare function elevatedShadow(dark: boolean): string;
+export declare namespace css {
+    function borderRadius(v: React.CSSProperties["borderTopLeftRadius"] | undefined): React.CSSProperties;
+    function borderStyle(v: React.CSSProperties["borderLeftStyle"] | undefined): React.CSSProperties;
+    function borderWidth(v: React.CSSProperties["borderLeftWidth"] | undefined): React.CSSProperties;
+    function borderColor(v: React.CSSProperties["borderLeftColor"] | undefined): React.CSSProperties;
+}

package/dist/ui/util/_util.js

@@ -1,3 +1,42 @@
 export function elevatedShadow(dark) {
     return `0px 0px .625rem -.125rem ${dark ? "#ffffff60" : "#00000060"}`;
 }
+export var css;
+(function (css) {
+    function borderRadius(v) {
+        return {
+            borderTopLeftRadius: v,
+            borderTopRightRadius: v,
+            borderBottomLeftRadius: v,
+            borderBottomRightRadius: v,
+        };
+    }
+    css.borderRadius = borderRadius;
+    function borderStyle(v) {
+        return {
+            borderLeftStyle: v,
+            borderRightStyle: v,
+            borderTopStyle: v,
+            borderBottomStyle: v,
+        };
+    }
+    css.borderStyle = borderStyle;
+    function borderWidth(v) {
+        return {
+            borderLeftWidth: v,
+            borderRightWidth: v,
+            borderTopWidth: v,
+            borderBottomWidth: v,
+        };
+    }
+    css.borderWidth = borderWidth;
+    function borderColor(v) {
+        return {
+            borderLeftColor: v,
+            borderRightColor: v,
+            borderTopColor: v,
+            borderBottomColor: v,
+        };
+    }
+    css.borderColor = borderColor;
+})(css || (css = {}));

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

@@ -45,3 +45,10 @@ 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;
+/**
+ * get the content of a metatag by its name. A metatag is like:
+ * `<meta name="name" content="content">`
+ * @param name the name of the metatag
+ * @returns the content of the metatag or null if not found
+ */
+export declare function metaTagContent(name: string): string | null;

package/dist/ui/util/util.js

@@ -141,3 +141,18 @@ export function hash(v) {
     }
     return hash.toString();
 }
+/**
+ * get the content of a metatag by its name. A metatag is like:
+ * `<meta name="name" content="content">`
+ * @param name the name of the metatag
+ * @returns the content of the metatag or null if not found
+ */
+export function metaTagContent(name) {
+    const metas = document.getElementsByTagName("meta");
+    for (let i = 0; i < metas.length; i++) {
+        if (metas[i].getAttribute("name") === name) {
+            return metas[i].getAttribute("content");
+        }
+    }
+    return null;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "elbe-ui",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "author": "Robin Naumann",
   "license": "MIT",
   "repository": {
@@ -19,7 +19,7 @@
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
-    "build:ts": "tsc",
+    "build:ts": "bun i && tsc",
     "build:dts": "tsc --declaration",
     "build:css": "sass -q style/elbe-util.scss dist/elbe.css",
     "build": "rm -rf ./dist && bun run build:ts && bun run build:dts && bun run build:css ",
@@ -31,14 +31,14 @@
     "sass": "^1.97.0"
   },
   "peerDependencies": {
-    "typescript": "^5.9.3"
+    "@types/react-dom": "^19.2.3",
+    "typescript": "^5.9.3",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3"
   },
   "dependencies": {
-    "@types/react-dom": "^19.2.3",
     "colors-convert": "^1.4.1",
     "lucide-react": "^0.561.0",
-    "react": "^19.2.3",
-    "react-dom": "^19.2.3",
     "wouter": "^3.8.1"
   }
 }