elbe-ui 0.4.0 → 0.4.2

package/dist/index.d.ts

@@ -4,7 +4,9 @@ export * from "./bit/ctrl_bit";
 export * from "./service/s_api";
 export * from "./ui/util/confirm_dialog";
 export * from "./ui/util/ctx_toolbar";
+export * from "./ui/util/l10n/l10n";
 export * from "./ui/util/toast";
+export * from "./ui/util/types";
 export * from "./ui/util/util";
 export * from "./ui/components/base/box";
 export * from "./ui/components/base/card";

package/dist/index.js

@@ -7,7 +7,9 @@ export * from "./bit/ctrl_bit";
 export * from "./service/s_api";
 export * from "./ui/util/confirm_dialog";
 export * from "./ui/util/ctx_toolbar";
+export * from "./ui/util/l10n/l10n";
 export * from "./ui/util/toast";
+export * from "./ui/util/types";
 export * from "./ui/util/util";
 export * from "./ui/components/base/box";
 export * from "./ui/components/base/card";

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

@@ -1,6 +1,6 @@
 import React from "preact/compat";
 import type { ElbeColorKinds } from "../theme/colors";
-import type { ElbeChild, ElbeChildren } from "../util/util";
+import type { ElbeChild, ElbeChildren } from "../util/types";
 import type { ElbeProps } from "./base/box";
 export type BadgeProps = {
     count?: number;

package/dist/ui/components/base/box.d.ts

@@ -1,6 +1,5 @@
 import { Component } from "preact";
-import type { ElbeColorModes, ElbeColorSchemes } from "../../theme/colors";
-import type { ElbeChildren } from "../../util/util";
+import { ElbeChildren, ElbeColorModes, ElbeColorSchemes } from "../../..";
 import { AriaRoles } from "./roles";
 export type ElbeProps = {
     id?: string;
@@ -26,12 +25,6 @@ export declare function applyProps(typeLabel: string, p: ElbeProps, classes?: st
         flex?: string | number | null | undefined;
         cssText?: string | null;
         [Symbol.iterator]?: string | number | null | undefined;
-        clipPath?: string | number | null | undefined;
-        filter?: string | number | null | undefined;
-        marker?: string | number | null | undefined;
-        mask?: string | number | null | undefined;
-        font?: string | number | null | undefined;
-        resize?: string | number | null | undefined;
         border?: string | number | null | undefined;
         accentColor?: string | number | null | undefined;
         alignContent?: string | number | null | undefined;
@@ -138,6 +131,7 @@ export declare function applyProps(typeLabel: string, p: ElbeProps, classes?: st
         caretColor?: string | number | null | undefined;
         clear?: string | number | null | undefined;
         clip?: string | number | null | undefined;
+        clipPath?: string | number | null | undefined;
         clipRule?: string | number | null | undefined;
         color?: string | number | null | undefined;
         colorInterpolation?: string | number | null | undefined;
@@ -179,6 +173,7 @@ export declare function applyProps(typeLabel: string, p: ElbeProps, classes?: st
         fill?: string | number | null | undefined;
         fillOpacity?: string | number | null | undefined;
         fillRule?: string | number | null | undefined;
+        filter?: string | number | null | undefined;
         flexBasis?: string | number | null | undefined;
         flexDirection?: string | number | null | undefined;
         flexFlow?: string | number | null | undefined;
@@ -188,6 +183,7 @@ export declare function applyProps(typeLabel: string, p: ElbeProps, classes?: st
         float?: string | number | null | undefined;
         floodColor?: string | number | null | undefined;
         floodOpacity?: string | number | null | undefined;
+        font?: string | number | null | undefined;
         fontFamily?: string | number | null | undefined;
         fontFeatureSettings?: string | number | null | undefined;
         fontKerning?: string | number | null | undefined;
@@ -268,9 +264,11 @@ export declare function applyProps(typeLabel: string, p: ElbeProps, classes?: st
         marginLeft?: string | number | null | undefined;
         marginRight?: string | number | null | undefined;
         marginTop?: string | number | null | undefined;
+        marker?: string | number | null | undefined;
         markerEnd?: string | number | null | undefined;
         markerMid?: string | number | null | undefined;
         markerStart?: string | number | null | undefined;
+        mask?: string | number | null | undefined;
         maskClip?: string | number | null | undefined;
         maskComposite?: string | number | null | undefined;
         maskImage?: string | number | null | undefined;
@@ -345,6 +343,7 @@ export declare function applyProps(typeLabel: string, p: ElbeProps, classes?: st
         printColorAdjust?: string | number | null | undefined;
         quotes?: string | number | null | undefined;
         r?: string | number | null | undefined;
+        resize?: string | number | null | undefined;
         right?: string | number | null | undefined;
         rotate?: string | number | null | undefined;
         rowGap?: string | number | null | undefined;
@@ -545,12 +544,6 @@ export declare class Box extends Component<ElbeBoxProps & {
             flex?: string | number | null | undefined;
             cssText?: string | null;
             [Symbol.iterator]?: string | number | null | undefined;
-            clipPath?: string | number | null | undefined;
-            filter?: string | number | null | undefined;
-            marker?: string | number | null | undefined;
-            mask?: string | number | null | undefined;
-            font?: string | number | null | undefined;
-            resize?: string | number | null | undefined;
             border?: string | number | null | undefined;
             accentColor?: string | number | null | undefined;
             alignContent?: string | number | null | undefined;
@@ -657,6 +650,7 @@ export declare class Box extends Component<ElbeBoxProps & {
             caretColor?: string | number | null | undefined;
             clear?: string | number | null | undefined;
             clip?: string | number | null | undefined;
+            clipPath?: string | number | null | undefined;
             clipRule?: string | number | null | undefined;
             color?: string | number | null | undefined;
             colorInterpolation?: string | number | null | undefined;
@@ -698,6 +692,7 @@ export declare class Box extends Component<ElbeBoxProps & {
             fill?: string | number | null | undefined;
             fillOpacity?: string | number | null | undefined;
             fillRule?: string | number | null | undefined;
+            filter?: string | number | null | undefined;
             flexBasis?: string | number | null | undefined;
             flexDirection?: string | number | null | undefined;
             flexFlow?: string | number | null | undefined;
@@ -707,6 +702,7 @@ export declare class Box extends Component<ElbeBoxProps & {
             float?: string | number | null | undefined;
             floodColor?: string | number | null | undefined;
             floodOpacity?: string | number | null | undefined;
+            font?: string | number | null | undefined;
             fontFamily?: string | number | null | undefined;
             fontFeatureSettings?: string | number | null | undefined;
             fontKerning?: string | number | null | undefined;
@@ -787,9 +783,11 @@ export declare class Box extends Component<ElbeBoxProps & {
             marginLeft?: string | number | null | undefined;
             marginRight?: string | number | null | undefined;
             marginTop?: string | number | null | undefined;
+            marker?: string | number | null | undefined;
             markerEnd?: string | number | null | undefined;
             markerMid?: string | number | null | undefined;
             markerStart?: string | number | null | undefined;
+            mask?: string | number | null | undefined;
             maskClip?: string | number | null | undefined;
             maskComposite?: string | number | null | undefined;
             maskImage?: string | number | null | undefined;
@@ -864,6 +862,7 @@ export declare class Box extends Component<ElbeBoxProps & {
             printColorAdjust?: string | number | null | undefined;
             quotes?: string | number | null | undefined;
             r?: string | number | null | undefined;
+            resize?: string | number | null | undefined;
             right?: string | number | null | undefined;
             rotate?: string | number | null | undefined;
             rowGap?: string | number | null | undefined;
@@ -1055,12 +1054,6 @@ export declare class Box extends Component<ElbeBoxProps & {
             flex?: string | number | null | undefined;
             cssText?: string | null;
             [Symbol.iterator]?: string | number | null | undefined;
-            clipPath?: string | number | null | undefined;
-            filter?: string | number | null | undefined;
-            marker?: string | number | null | undefined;
-            mask?: string | number | null | undefined;
-            font?: string | number | null | undefined;
-            resize?: string | number | null | undefined;
             border?: string | number | null | undefined;
             accentColor?: string | number | null | undefined;
             alignContent?: string | number | null | undefined;
@@ -1167,6 +1160,7 @@ export declare class Box extends Component<ElbeBoxProps & {
             caretColor?: string | number | null | undefined;
             clear?: string | number | null | undefined;
             clip?: string | number | null | undefined;
+            clipPath?: string | number | null | undefined;
             clipRule?: string | number | null | undefined;
             color?: string | number | null | undefined;
             colorInterpolation?: string | number | null | undefined;
@@ -1208,6 +1202,7 @@ export declare class Box extends Component<ElbeBoxProps & {
             fill?: string | number | null | undefined;
             fillOpacity?: string | number | null | undefined;
             fillRule?: string | number | null | undefined;
+            filter?: string | number | null | undefined;
             flexBasis?: string | number | null | undefined;
             flexDirection?: string | number | null | undefined;
             flexFlow?: string | number | null | undefined;
@@ -1217,6 +1212,7 @@ export declare class Box extends Component<ElbeBoxProps & {
             float?: string | number | null | undefined;
             floodColor?: string | number | null | undefined;
             floodOpacity?: string | number | null | undefined;
+            font?: string | number | null | undefined;
             fontFamily?: string | number | null | undefined;
             fontFeatureSettings?: string | number | null | undefined;
             fontKerning?: string | number | null | undefined;
@@ -1297,9 +1293,11 @@ export declare class Box extends Component<ElbeBoxProps & {
             marginLeft?: string | number | null | undefined;
             marginRight?: string | number | null | undefined;
             marginTop?: string | number | null | undefined;
+            marker?: string | number | null | undefined;
             markerEnd?: string | number | null | undefined;
             markerMid?: string | number | null | undefined;
             markerStart?: string | number | null | undefined;
+            mask?: string | number | null | undefined;
             maskClip?: string | number | null | undefined;
             maskComposite?: string | number | null | undefined;
             maskImage?: string | number | null | undefined;
@@ -1374,6 +1372,7 @@ export declare class Box extends Component<ElbeBoxProps & {
             printColorAdjust?: string | number | null | undefined;
             quotes?: string | number | null | undefined;
             r?: string | number | null | undefined;
+            resize?: string | number | null | undefined;
             right?: string | number | null | undefined;
             rotate?: string | number | null | undefined;
             rowGap?: string | number | null | undefined;
@@ -1565,12 +1564,6 @@ export declare class Box extends Component<ElbeBoxProps & {
             flex?: string | number | null | undefined;
             cssText?: string | null;
             [Symbol.iterator]?: string | number | null | undefined;
-            clipPath?: string | number | null | undefined;
-            filter?: string | number | null | undefined;
-            marker?: string | number | null | undefined;
-            mask?: string | number | null | undefined;
-            font?: string | number | null | undefined;
-            resize?: string | number | null | undefined;
             border?: string | number | null | undefined;
             accentColor?: string | number | null | undefined;
             alignContent?: string | number | null | undefined;
@@ -1677,6 +1670,7 @@ export declare class Box extends Component<ElbeBoxProps & {
             caretColor?: string | number | null | undefined;
             clear?: string | number | null | undefined;
             clip?: string | number | null | undefined;
+            clipPath?: string | number | null | undefined;
             clipRule?: string | number | null | undefined;
             color?: string | number | null | undefined;
             colorInterpolation?: string | number | null | undefined;
@@ -1718,6 +1712,7 @@ export declare class Box extends Component<ElbeBoxProps & {
             fill?: string | number | null | undefined;
             fillOpacity?: string | number | null | undefined;
             fillRule?: string | number | null | undefined;
+            filter?: string | number | null | undefined;
             flexBasis?: string | number | null | undefined;
             flexDirection?: string | number | null | undefined;
             flexFlow?: string | number | null | undefined;
@@ -1727,6 +1722,7 @@ export declare class Box extends Component<ElbeBoxProps & {
             float?: string | number | null | undefined;
             floodColor?: string | number | null | undefined;
             floodOpacity?: string | number | null | undefined;
+            font?: string | number | null | undefined;
             fontFamily?: string | number | null | undefined;
             fontFeatureSettings?: string | number | null | undefined;
             fontKerning?: string | number | null | undefined;
@@ -1807,9 +1803,11 @@ export declare class Box extends Component<ElbeBoxProps & {
             marginLeft?: string | number | null | undefined;
             marginRight?: string | number | null | undefined;
             marginTop?: string | number | null | undefined;
+            marker?: string | number | null | undefined;
             markerEnd?: string | number | null | undefined;
             markerMid?: string | number | null | undefined;
             markerStart?: string | number | null | undefined;
+            mask?: string | number | null | undefined;
             maskClip?: string | number | null | undefined;
             maskComposite?: string | number | null | undefined;
             maskImage?: string | number | null | undefined;
@@ -1884,6 +1882,7 @@ export declare class Box extends Component<ElbeBoxProps & {
             printColorAdjust?: string | number | null | undefined;
             quotes?: string | number | null | undefined;
             r?: string | number | null | undefined;
+            resize?: string | number | null | undefined;
             right?: string | number | null | undefined;
             rotate?: string | number | null | undefined;
             rowGap?: string | number | null | undefined;
@@ -2075,12 +2074,6 @@ export declare class Box extends Component<ElbeBoxProps & {
             flex?: string | number | null | undefined;
             cssText?: string | null;
             [Symbol.iterator]?: string | number | null | undefined;
-            clipPath?: string | number | null | undefined;
-            filter?: string | number | null | undefined;
-            marker?: string | number | null | undefined;
-            mask?: string | number | null | undefined;
-            font?: string | number | null | undefined;
-            resize?: string | number | null | undefined;
             border?: string | number | null | undefined;
             accentColor?: string | number | null | undefined;
             alignContent?: string | number | null | undefined;
@@ -2187,6 +2180,7 @@ export declare class Box extends Component<ElbeBoxProps & {
             caretColor?: string | number | null | undefined;
             clear?: string | number | null | undefined;
             clip?: string | number | null | undefined;
+            clipPath?: string | number | null | undefined;
             clipRule?: string | number | null | undefined;
             color?: string | number | null | undefined;
             colorInterpolation?: string | number | null | undefined;
@@ -2228,6 +2222,7 @@ export declare class Box extends Component<ElbeBoxProps & {
             fill?: string | number | null | undefined;
             fillOpacity?: string | number | null | undefined;
             fillRule?: string | number | null | undefined;
+            filter?: string | number | null | undefined;
             flexBasis?: string | number | null | undefined;
             flexDirection?: string | number | null | undefined;
             flexFlow?: string | number | null | undefined;
@@ -2237,6 +2232,7 @@ export declare class Box extends Component<ElbeBoxProps & {
             float?: string | number | null | undefined;
             floodColor?: string | number | null | undefined;
             floodOpacity?: string | number | null | undefined;
+            font?: string | number | null | undefined;
             fontFamily?: string | number | null | undefined;
             fontFeatureSettings?: string | number | null | undefined;
             fontKerning?: string | number | null | undefined;
@@ -2317,9 +2313,11 @@ export declare class Box extends Component<ElbeBoxProps & {
             marginLeft?: string | number | null | undefined;
             marginRight?: string | number | null | undefined;
             marginTop?: string | number | null | undefined;
+            marker?: string | number | null | undefined;
             markerEnd?: string | number | null | undefined;
             markerMid?: string | number | null | undefined;
             markerStart?: string | number | null | undefined;
+            mask?: string | number | null | undefined;
             maskClip?: string | number | null | undefined;
             maskComposite?: string | number | null | undefined;
             maskImage?: string | number | null | undefined;
@@ -2394,6 +2392,7 @@ export declare class Box extends Component<ElbeBoxProps & {
             printColorAdjust?: string | number | null | undefined;
             quotes?: string | number | null | undefined;
             r?: string | number | null | undefined;
+            resize?: string | number | null | undefined;
             right?: string | number | null | undefined;
             rotate?: string | number | null | undefined;
             rowGap?: string | number | null | undefined;

package/dist/ui/components/base/card.d.ts

@@ -1,6 +1,4 @@
-import type { ElbeColorKinds, ElbeColorManners, ElbeColorModes, ElbeColorSchemes } from "../../theme/colors";
-import type { ElbeChildren } from "../../util/util";
-import { type ElbeProps } from "./box";
+import { ElbeChildren, ElbeColorKinds, ElbeColorManners, ElbeColorModes, ElbeColorSchemes, ElbeProps } from "../../..";
 export declare const elevatedShadow = "0 0 15px rgba(0,0,0,.2)";
 export declare function Card({ mode, scheme, kind, manner, padding, margin, onTap, onLongTap, frosted, bordered, elevated, sharp, disabled, overflow, children, ...elbe }: {
     mode?: ElbeColorModes;

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

@@ -10,7 +10,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "preact/jsx-runtime";
-import { applyProps } from "./box";
+import { applyProps, } from "../../..";
 export const elevatedShadow = "0 0 15px rgba(0,0,0,.2)";
 export function Card(_a) {
     var { mode, scheme = "primary", kind, manner, padding = 1, margin = 0, onTap, onLongTap, frosted, bordered, elevated, sharp, disabled, overflow, children } = _a, elbe = __rest(_a, ["mode", "scheme", "kind", "manner", "padding", "margin", "onTap", "onLongTap", "frosted", "bordered", "elevated", "sharp", "disabled", "overflow", "children"]);

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

@@ -1,4 +1,4 @@
-import type { ElbeChildren } from "../util/util";
+import type { ElbeChildren } from "../util/types";
 export declare function ElbeDialog({ title, open, onClose, children, _style, }: {
     _style?: string;
     title: string;

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

@@ -1,4 +1,4 @@
-import { ElbeChild } from "../../util/util";
+import { ElbeChild } from "../../util/types";
 import { HeaderLogos } from "./header";
 export interface _AppBaseState {
     menuSelected: string | null;

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

@@ -28,7 +28,7 @@ export function Header(p) {
             borderColor: tConfig.highVis || scroll ? null : "transparent",
             gap: "1rem",
             zIndex: 80,
-        }, children: [p.leading === "back" && _backBtn, p.leading === "close" && _closeBtn, typeof p.leading === "function"
+        }, children: [p.leading === "back" && _backBtn, p.leading === "close" && _closeBtn, 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 })), _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: {

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

@@ -1,4 +1,4 @@
-import { ElbeChild } from "../../util/util";
+import { ElbeChild } from "../../..";
 import { IconChild } from "../button/icon_button";
 export type MenuItem = {
     id: string;

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

@@ -1,7 +1,6 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "preact/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "preact/jsx-runtime";
 import { MenuIcon } from "lucide-react";
-import { useThemeConfig } from "../../..";
-import { useLayoutMode } from "../../util/util";
+import { useLayoutMode, useTheme, useThemeConfig } from "../../..";
 import { Card, elevatedShadow } from "../base/card";
 import { Button } from "../button/button";
 import { useAppBase } from "./ctx_app_base";
@@ -10,6 +9,7 @@ export function Menu(p) {
     const layoutMode = useLayoutMode();
     const appBase = useAppBase();
     const tConfig = useThemeConfig();
+    const theme = useTheme();
     const topBot = { top: [], bottom: [] };
     for (let i of p.items) {
         if (i.bottom)
@@ -17,12 +17,13 @@ export function Menu(p) {
         else
             topBot.top.push(i);
     }
+    const wideOrOpen = () => appBase.menuOpen || layoutMode == "wide";
     const menuWidth = () => appBase.menuOpen
         ? layoutMode === "mobile"
             ? "100vw"
-            : "260px"
+            : `${17 + theme.geometry.borderWidth}rem`
         : layoutMode === "wide"
-            ? "4rem"
+            ? `${4 + theme.geometry.borderWidth}rem`
             : "0";
     return (_jsxs(_Fragment, { children: [layoutMode == "wide" && (_jsx("div", { style: {
                     width: menuWidth(),
@@ -33,20 +34,22 @@ export function Menu(p) {
                         width: "100vw",
                         height: "100vh",
                     }
-                    : {})) }), _jsxs(Card, { onTap: () => {
+                    : {})) }), _jsx(Card, { onTap: () => {
                     if (layoutMode == "wide")
                         return;
                     appBase.setMenuOpen(false);
-                }, scheme: "primary", padding: 0.5, style: Object.assign({ zIndex: 101, position: "fixed", left: 0, top: 0, height: "100vh", overflow: "hidden", width: menuWidth(), display: appBase.menuOpen || layoutMode == "wide" ? "flex" : "none", flexDirection: "column", justifyContent: "start", alignItems: "stretch", borderTopLeftRadius: 0, borderBottomLeftRadius: 0, border: "none", borderRight: tConfig.highVis
-                        ? "1px solid var(--c-context-front)"
-                        : "none", gap: "1rem", transition: "width 200ms ease-in-out" }, (layoutMode === "narrow" && appBase.menuOpen
+                }, sharp: layoutMode == "mobile", 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
+                        ? "none"
+                        : "width 200ms ease-in-out" }, (layoutMode === "narrow" && appBase.menuOpen
                     ? {
                         boxShadow: elevatedShadow,
                     }
-                    : {})), children: [_jsx(Button.plain, { contentAlign: "start", ariaLabel: "open/close menu", onTap: () => appBase.setMenuOpen(!appBase.menuOpen), icon: MenuIcon, style: {
-                            marginBottom: ".5rem",
-                            borderRadius: "3rem",
-                        } }), _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 })))] })] }));
+                    : {})), children: wideOrOpen() && (_jsxs(_Fragment, { children: [_jsx(Button.plain, { contentAlign: "start", ariaLabel: "open/close menu", onTap: () => appBase.setMenuOpen(!appBase.menuOpen), icon: MenuIcon, style: {
+                                marginBottom: ".5rem",
+                                borderRadius: "3rem",
+                            } }), _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 appBase = useAppBase();

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

@@ -1,6 +1,6 @@
 import React from "preact/compat";
 import type { ElbeTypeVariants } from "../theme/type_theme";
-import type { ElbeChildren } from "../util/util";
+import type { ElbeChildren } from "../util/types";
 import { type ElbeProps } from "./base/box";
 export type TextProps = {
     align?: "start" | "center" | "end";

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

@@ -0,0 +1,35 @@
+import React from "preact/compat";
+import { ElbeChildren } from "../types";
+type _LocaleID = `${string}_${string}` | `${string}`;
+type _LocaleIDEasy = `${string}_${string}_easy` | _LocaleID;
+type _L10nData = {
+    [key: string]: any;
+};
+export interface _L10nState<T extends _L10nData> {
+    /** the current locale */
+    c: T;
+    locale: string;
+    easyLang: boolean;
+    setLocale: (locale: string) => void;
+    setEasyLang: (easyLang: boolean) => void;
+}
+type _L10nProps = {
+    children: ElbeChildren;
+    initialLocale?: _LocaleID;
+    initialEasyLang?: boolean;
+};
+/**
+ * L10nBase is a function that creates a localization context provider and a hook to use the localization context.
+ * @param fallback this is the fallback locale, which is used if no other locale is found. It is the basis for the locale type and must thus be complete.
+ * @param supported this is a list of supported locales. It is a map of locale IDs to partial localization data. The keys are the locale IDs, and the values are the localization data.
+ * @returns an object with the L10n component and the useL10n hook.
+ */
+export declare function makeL10n<T extends _L10nData>(fallback: {
+    [locale: _LocaleIDEasy]: T;
+}, supported: {
+    [locale: _LocaleIDEasy]: Partial<T>;
+}): {
+    L10n: React.FunctionComponent<_L10nProps>;
+    useL10n: () => _L10nState<T>;
+};
+export {};

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

@@ -0,0 +1,68 @@
+import { jsx as _jsx } from "preact/jsx-runtime";
+import { createContext } from "preact";
+import { useContext, useEffect, useState } from "preact/hooks";
+const _L10nContext = createContext(null);
+function _useL10n() {
+    const ctx = useContext(_L10nContext);
+    if (!ctx)
+        throw new Error("useL10n must be used within a L10n");
+    return ctx;
+}
+/**
+ * L10nBase is a function that creates a localization context provider and a hook to use the localization context.
+ * @param fallback this is the fallback locale, which is used if no other locale is found. It is the basis for the locale type and must thus be complete.
+ * @param supported this is a list of supported locales. It is a map of locale IDs to partial localization data. The keys are the locale IDs, and the values are the localization data.
+ * @returns an object with the L10n component and the useL10n hook.
+ */
+export function makeL10n(fallback, supported) {
+    if (Object.keys(supported).length === 0) {
+        throw new Error("L10nBase: No fallback locales provided");
+    }
+    const fallbackLocale = Object.keys(fallback)[0];
+    const fallbackValue = fallback[fallbackLocale];
+    const supportedLocales = Object.assign(Object.assign({}, supported), fallback);
+    const useL10n = (_useL10n);
+    const L10n = (p) => {
+        var _a, _b;
+        const [loc, setLoc] = useState((_a = p.initialLocale) !== null && _a !== void 0 ? _a : navigator.language);
+        const [easy, setEasy] = useState((_b = p.initialEasyLang) !== null && _b !== void 0 ? _b : false);
+        const [currentLang, setCurrentLang] = useState(fallbackValue);
+        useEffect(() => {
+            var _a;
+            const match = _bestMatch(loc, easy, Object.keys(supportedLocales));
+            setCurrentLang(Object.assign(Object.assign({}, fallbackValue), ((_a = supportedLocales[match !== null && match !== void 0 ? match : ""]) !== null && _a !== void 0 ? _a : {})));
+        }, [loc, easy]);
+        return (_jsx(_L10nContext.Provider, { value: {
+                c: currentLang,
+                locale: loc,
+                easyLang: easy,
+                setLocale: (l) => setLoc(l),
+                setEasyLang: (e) => setEasy(e),
+            }, children: p.children }));
+    };
+    return { L10n, useL10n };
+}
+function _locale(l) {
+    const parts = l.split("_");
+    const easy = parts.length > 2 && parts[2] === "easy";
+    const region = parts.length > 1 ? parts[1].toLowerCase() : null;
+    const lang = parts[0].toLowerCase();
+    return { full: l, lang, region, easy };
+}
+function _bestMatch(locale, easy, locales) {
+    const loc = _locale(locale.replaceAll("-", "_"));
+    const asLocales = locales.map((l) => _locale(l));
+    // filter by language
+    const langMatch = asLocales.filter((l) => loc.lang === l.lang);
+    // filter by easy
+    const easyMatch = langMatch.filter((l) => l.easy === easy);
+    // filter by region
+    const regionMatch = easyMatch.filter((l) => l.region === loc.region);
+    if (regionMatch.length > 0)
+        return regionMatch[0].full;
+    if (easyMatch.length > 0)
+        return easyMatch[0].full;
+    if (langMatch.length > 0)
+        return langMatch[0].full;
+    return null;
+}

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

@@ -0,0 +1,11 @@
+/**
+ * @see https://stackoverflow.com/questions/53953814/typescript-check-if-a-type-is-a-union/53955431
+ */
+type IsSingleton<T> = [T] extends [UnionToIntersection<T>] ? true : false;
+/**
+ * @author https://stackoverflow.com/users/2887218/jcalz
+ * @see https://stackoverflow.com/a/50375286/10325032
+ */
+type UnionToIntersection<Union> = (Union extends any ? (argument: Union) => void : never) extends (argument: infer Intersection) => void ? Intersection : never;
+export type SingletonOnly<T> = IsSingleton<T> extends true ? T : never;
+export {};

package/dist/ui/util/single_key.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,9 @@
+export type int = number;
+export type float = number;
+/** a unix epoch timestamp in milliseconds */
+export type UnixMS = int;
+export type ElbeChild = React.ReactNode;
+export type ElbeChildren = ElbeChild[] | ElbeChild;
+export type s = string;
+export type n = number;
+export type b = boolean;

package/dist/ui/util/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -1,8 +1,4 @@
-import type React from "preact/compat";
-export type int = number;
-export type float = number;
-export type ElbeChild = React.ReactNode;
-export type ElbeChildren = ElbeChild[] | ElbeChild;
+import { int } from "../..";
 export declare function clamp(value: number, min: number, max: number): number;
 export declare function classString(classes: (string | false | null | undefined)[]): string;
 /**

package/dist/ui/util/util.js

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "preact/compat";
-import { showToast } from "./toast";
+import { showToast } from "../..";
 export function clamp(value, min, max) {
     return Math.min(Math.max(value, min), max);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "elbe-ui",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "author": "Robin Naumann",
   "license": "MIT",
   "repository": {