elbe-ui 0.3.1 → 0.4.1

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

@@ -1,18 +1,30 @@
-import { ColorSeedColors, ColorThemeSeed, PartialColorThemeSeed } from "./seed";
+import { ColorThemeSeed, PartialColorThemeSeed, ThemeColors } from "./seed";
+export type ElbeColorContrasts = "normal" | "highvis";
 export type ElbeColorModes = "light" | "dark";
 export type ElbeColorSchemes = "primary" | "secondary" | "inverse";
 export type ElbeAlertKinds = "success" | "warning" | "error" | "info";
 export type ElbeColorKinds = ElbeAlertKinds | "plain" | "accent";
 export type ElbeColorManners = "major" | "minor" | "flat" | "plain";
+export declare const cContrasts: ElbeColorContrasts[];
 export declare const cModes: ElbeColorModes[];
 export declare const cSchemes: ElbeColorSchemes[];
 export declare const cKinds: ElbeColorKinds[];
 export declare const cManners: ElbeColorManners[];
 export declare const cStates: string[];
 export declare const cLayers: string[];
-export type SeedSelector = (seed: ColorThemeSeed, base: LayerColor) => LayerColor;
-export type SeedFlatSelector = (seed: ColorThemeSeed, base: LayerColor, style?: LayerColor) => LayerColor;
-export type SeedStyleSelector = (seed: ColorThemeSeed, base: LayerColor, style: LayerColor) => LayerColor;
+type _SeedSelInput = {
+    path: string[];
+    seed: ColorThemeSeed;
+    base: LayerColor;
+};
+export type SeedSelector = (p: _SeedSelInput) => LayerColor;
+export type SeedModifier = (p: _SeedSelInput) => ColorThemeSeed;
+export type SeedFlatSelector = (p: _SeedSelInput & {
+    style?: LayerColor;
+}) => LayerColor;
+export type SeedStyleSelector = (p: _SeedSelInput & {
+    style: LayerColor;
+}) => LayerColor;
 export declare class RGBAColor {
     r: number;
     g: number;
@@ -67,7 +79,7 @@ export declare class StateColor extends LayerColor {
     disabled: LayerColor;
     constructor(neutral: LayerColor, hover: LayerColor, active: LayerColor, disabled: LayerColor);
     asCss(): string;
-    static generate(_: ColorThemeSeed, context: LayerColor, style: LayerColor, fromFront?: boolean): StateColor;
+    static generate(p: string[], _: ColorThemeSeed, context: LayerColor, style: LayerColor, fromFront?: boolean): StateColor;
 }
 export declare class MannerColor extends StateColor {
     major: StateColor | null;
@@ -76,7 +88,7 @@ export declare class MannerColor extends StateColor {
     constructor(major: StateColor | null, minor: StateColor | null, flat: StateColor);
     asCss(fallback?: MannerColor): string;
     raisedCss(): string;
-    static generate(s: ColorThemeSeed, c: LayerColor, style?: LayerColor): MannerColor;
+    static generate(path: string[], seed: ColorThemeSeed, base: LayerColor, style?: LayerColor): MannerColor;
 }
 export declare class KindColor extends MannerColor {
     plain: MannerColor;
@@ -87,7 +99,7 @@ export declare class KindColor extends MannerColor {
     error: MannerColor;
     constructor(plain: MannerColor, accent: MannerColor, info: MannerColor, success: MannerColor, warning: MannerColor, error: MannerColor);
     asCss(): string;
-    static generate(s: ColorThemeSeed, c: LayerColor): KindColor;
+    static generate(path: string[], seed: ColorThemeSeed, base: LayerColor): KindColor;
 }
 export declare class SchemeColor extends KindColor {
     primary: KindColor;
@@ -95,19 +107,27 @@ export declare class SchemeColor extends KindColor {
     inverse: KindColor;
     constructor(primary: KindColor, secondary: KindColor, inverse: KindColor);
     asCss(): string;
-    static generate(seed: ColorThemeSeed, c: LayerColor): SchemeColor;
+    static generate(path: string[], seed: ColorThemeSeed, base: LayerColor): SchemeColor;
 }
 export declare class ModeColor extends SchemeColor {
     light: SchemeColor;
     dark: SchemeColor;
     constructor(light: SchemeColor, dark: SchemeColor);
     asCss(): string;
-    static generate(seed: ColorThemeSeed): ModeColor;
+    static generate(path: string[], seed: ColorThemeSeed): ModeColor;
+}
+export declare class ContrastColor extends ModeColor {
+    normal: ModeColor;
+    highvis: ModeColor;
+    constructor(normal: ModeColor, highvis: ModeColor);
+    asCss(): string;
+    static generate(path: string[], seed: ColorThemeSeed): ContrastColor;
 }
 export declare class ColorTheme {
-    colors: ColorSeedColors;
-    color: ModeColor;
-    constructor(colors: ColorSeedColors, color: ModeColor);
+    colors: ThemeColors;
+    color: ContrastColor;
+    constructor(colors: ThemeColors, color: ContrastColor);
     asCss(): string;
-    static generate(seed?: Partial<PartialColorThemeSeed>, highVis?: boolean): ColorTheme;
+    static generate(seed?: Partial<PartialColorThemeSeed>): ColorTheme;
 }
+export {};

package/dist/ui/theme/colors.js

@@ -1,6 +1,8 @@
 import { hslToRgb, rgbToHsl } from "colors-convert";
 import { clamp } from "../util/util";
 import { colorThemePreset } from "./color_theme";
+import { lColor, } from "./seed";
+export const cContrasts = ["normal", "highvis"];
 export const cModes = ["light", "dark"];
 export const cSchemes = ["primary", "secondary", "inverse"];
 export const cKinds = [
@@ -159,7 +161,7 @@ export class StateColor extends LayerColor {
             `${activeS} { ${this.active.asCss()} }\n` +
             `${disS} { ${this.disabled.asCss()} }`);
     }
-    static generate(_, context, style, fromFront) {
+    static generate(p, _, context, style, fromFront) {
         function _make(factor) {
             const front = style.front;
             return new LayerColor((fromFront
@@ -192,8 +194,12 @@ export class MannerColor extends StateColor {
         return ((maj ? ` .major { ${maj.asCss()} } \n` : "") +
             (min ? ` .minor { ${min.asCss()} } \n` : ""));
     }
-    static generate(s, c, style) {
-        return new MannerColor(style ? StateColor.generate(s, c, s.variant.major(s, c, style)) : null, style ? StateColor.generate(s, c, s.variant.minor(s, c, style)) : null, StateColor.generate(s, c, s.variant.flat(s, c, style), true));
+    static generate(path, seed, base, style) {
+        return new MannerColor(style
+            ? StateColor.generate([...path, "major"], seed, base, seed.variant.major({ path, seed, base, style }))
+            : null, style
+            ? StateColor.generate([...path, "minor"], seed, base, seed.variant.minor({ path, seed, base, style }))
+            : null, StateColor.generate([...path, "flat"], seed, base, seed.variant.flat({ path, seed, base, style }), true));
         /*
         if (!style) {
           return new MannerColor(null, null, StateColor.generate(s, c, c, true));
@@ -226,8 +232,8 @@ export class KindColor extends MannerColor {
             `.warning { ${this.warning.asCss()} }\n` +
             `.error { ${this.error.asCss()} }`);
     }
-    static generate(s, c) {
-        return new KindColor(MannerColor.generate(s, c), MannerColor.generate(s, c, s.style.accent(s, c, s.accent)), MannerColor.generate(s, c, s.style.info(s, c, s.info)), MannerColor.generate(s, c, s.style.success(s, c, s.success)), MannerColor.generate(s, c, s.style.warning(s, c, s.warning)), MannerColor.generate(s, c, s.style.error(s, c, s.error)));
+    static generate(path, seed, base) {
+        return new KindColor(MannerColor.generate([...path, "plain"], seed, base), MannerColor.generate([...path, "accent"], seed, base, seed.style.accent({ path, seed, base, style: lColor(seed.accent) })), MannerColor.generate([...path, "info"], seed, base, seed.style.info({ path, seed, base, style: lColor(seed.info) })), MannerColor.generate([...path, "success"], seed, base, seed.style.success({ path, seed, base, style: lColor(seed.success) })), MannerColor.generate([...path, "warning"], seed, base, seed.style.warning({ path, seed, base, style: lColor(seed.warning) })), MannerColor.generate([...path, "error"], seed, base, seed.style.error({ path, seed, base, style: lColor(seed.error) })));
     }
 }
 export class SchemeColor extends KindColor {
@@ -243,9 +249,9 @@ export class SchemeColor extends KindColor {
             `.secondary { ${this.secondary.asCss()} }\n` +
             `.inverse { ${this.inverse.asCss()} }`);
     }
-    static generate(seed, c) {
+    static generate(path, seed, base) {
         const m = seed.scheme;
-        return new SchemeColor(KindColor.generate(seed, m.primary(seed, c)), KindColor.generate(seed, m.secondary(seed, c)), KindColor.generate(seed, m.inverse(seed, c)));
+        return new SchemeColor(KindColor.generate([...path, "primary"], seed, m.primary({ path, seed, base })), KindColor.generate([...path, "secondary"], seed, m.secondary({ path, seed, base })), KindColor.generate([...path, "inverse"], seed, m.inverse({ path, seed, base })));
     }
 }
 export class ModeColor extends SchemeColor {
@@ -255,10 +261,24 @@ export class ModeColor extends SchemeColor {
         this.dark = dark;
     }
     asCss() {
-        return (`.elbe { ${this.light.asCss()}}` + `.elbe.dark { ${this.dark.asCss()}}`);
+        return `&{ ${this.light.asCss()}}` + `&.dark { ${this.dark.asCss()}}`;
     }
-    static generate(seed) {
-        return new ModeColor(SchemeColor.generate(seed, seed.base), SchemeColor.generate(seed, seed.mode.dark(seed, seed.base)));
+    static generate(path, seed) {
+        return new ModeColor(SchemeColor.generate(path, seed, lColor(seed.base)), SchemeColor.generate([...path, "dark"], seed, seed.mode.dark({ path, seed, base: lColor(seed.base) })));
+    }
+}
+export class ContrastColor extends ModeColor {
+    constructor(normal, highvis) {
+        super(normal.light, normal.dark);
+        this.normal = normal;
+        this.highvis = highvis;
+    }
+    asCss() {
+        return (`& { ${this.normal.asCss()}}` + `&.highvis { ${this.highvis.asCss()}}`);
+    }
+    static generate(path, seed) {
+        const p = { path, base: lColor(seed.base), seed };
+        return new ContrastColor(ModeColor.generate(path, seed.contrast.normal(p)), ModeColor.generate([...path, "highvis"], seed.contrast.highvis(p)));
     }
 }
 export class ColorTheme {
@@ -267,17 +287,24 @@ export class ColorTheme {
         this.color = color;
     }
     asCss() {
-        return (`:root {
+        return `
   --c-accent: ${this.colors.accent.back.asCss()};
   --c-info: ${this.colors.info.back.asCss()};
   --c-success: ${this.colors.success.back.asCss()};
   --c-warning: ${this.colors.warning.back.asCss()};
   --c-error: ${this.colors.error.back.asCss()};
-}` + this.color.asCss());
+  ${this.color.asCss()}`;
     }
-    static generate(seed, highVis) {
-        const s = colorThemePreset(seed, highVis !== null && highVis !== void 0 ? highVis : false);
-        return new ColorTheme(s, ModeColor.generate(s));
+    static generate(seed) {
+        const s = colorThemePreset(seed);
+        return new ColorTheme({
+            base: lColor(s.base),
+            accent: lColor(s.accent),
+            info: lColor(s.info),
+            success: lColor(s.success),
+            warning: lColor(s.warning),
+            error: lColor(s.error),
+        }, ContrastColor.generate([], s));
     }
 }
 //Bun.write("./example.css", ColorTheme.generate().asCss());

package/dist/ui/theme/geometry_theme.js

@@ -6,12 +6,10 @@ export class GeometryTheme {
         this.borderWidth = borderWidth;
     }
     asCss() {
-        return (`:root{` +
-            `--g-size: ${this.size}px;` +
+        return (`--g-size: ${this.size}px;` +
             `--g-radius: ${this.radius}rem;` +
             `--g-padding: ${this.padding}rem;` +
-            `--g-border-width: ${this.borderWidth}rem;` +
-            "}");
+            `--g-border-width: ${this.borderWidth}rem;`);
     }
     static generate(seed) {
         const s = geometryThemePreset(seed);

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

@@ -1,11 +1,18 @@
-import { LayerColor, SeedFlatSelector, SeedSelector, SeedStyleSelector } from "../..";
-export type ColorSeedColors = {
-    base: LayerColor;
-    accent: LayerColor;
-    info: LayerColor;
-    success: LayerColor;
-    warning: LayerColor;
-    error: LayerColor;
+import { LayerColor, SeedFlatSelector, SeedModifier, SeedSelector, SeedStyleSelector } from "../..";
+export type HexColor = `#${string}`;
+export type ColorSeedColors = _Colors<LayerColor | HexColor>;
+export type ThemeColors = _Colors<LayerColor>;
+type _Colors<T> = {
+    base: T;
+    accent: T;
+    info: T;
+    success: T;
+    warning: T;
+    error: T;
+};
+type _ContrastSeed = {
+    highvis: SeedModifier;
+    normal: SeedModifier;
 };
 type _ModeSeed = {
     light: SeedSelector;
@@ -29,15 +36,18 @@ type _VariantSeed = {
     flat: SeedFlatSelector;
 };
 export type ColorThemeSeed = ColorSeedColors & {
+    contrast: _ContrastSeed;
     mode: _ModeSeed;
     scheme: _SchemeSeed;
     style: _StyleSeed;
     variant: _VariantSeed;
 };
 export type PartialColorThemeSeed = Partial<ColorSeedColors> & {
+    contrast?: Partial<_ContrastSeed>;
     mode?: Partial<_ModeSeed>;
     scheme?: Partial<_SchemeSeed>;
     style?: Partial<_StyleSeed>;
     variant?: Partial<_VariantSeed>;
 };
+export declare function lColor(color: LayerColor | HexColor): LayerColor;
 export {};

package/dist/ui/theme/seed.js

@@ -1 +1,4 @@
-export {};
+import { LayerColor, } from "../..";
+export function lColor(color) {
+    return typeof color === "string" ? LayerColor.fromHex(color) : color;
+}

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

@@ -2,6 +2,7 @@ import "../../elbe.css";
 import { ColorTheme } from "./colors";
 import { GeometryTheme, type GeometryThemeSeed } from "./geometry_theme";
 import { PartialColorThemeSeed } from "./seed";
+import { ElbeThemeConfig } from "./theme_context";
 import { TypeTheme, type TypeThemeSeed } from "./type_theme";
 export * from "./color_theme";
 export * from "./colors";
@@ -18,15 +19,12 @@ export declare class ElbeThemeData {
     readonly geometry: GeometryTheme;
     constructor(color: ColorTheme, type: TypeTheme, geometry: GeometryTheme);
     asCss(): string;
-    _pageBackground(dark?: boolean): string;
-    static fromSeed(seed: ElbeThemeSeed, highVis: boolean): ElbeThemeData;
+    static fromSeed(seed: ElbeThemeSeed): ElbeThemeData;
 }
 export declare function ElbeTheme(p: {
     children: any;
-    dark?: boolean;
     todoOverlay?: boolean;
-    highVis?: boolean;
-} & ({
+} & Partial<ElbeThemeConfig> & ({
     theme: ElbeThemeData;
 } | {
     seed?: ElbeThemeSeed;

package/dist/ui/theme/theme.js

@@ -3,6 +3,7 @@ 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";
@@ -15,22 +16,18 @@ export class ElbeThemeData {
         this.geometry = geometry;
     }
     asCss() {
-        return [this.color, this.type, this.geometry]
+        const inner = [this.color, this.type, this.geometry]
             .map((s) => s.asCss())
             .join("\n");
+        return `.elbe {${inner}}`;
     }
-    _pageBackground(dark) {
-        const c = this.color.color;
-        return `html,:root {${(!!dark ? c.dark : c.light).asCss()};`;
-    }
-    static fromSeed(seed, highVis) {
-        return new ElbeThemeData(ColorTheme.generate(seed.color, highVis), TypeTheme.generate(seed.type), GeometryTheme.generate(seed.geometry));
+    static fromSeed(seed) {
+        return new ElbeThemeData(ColorTheme.generate(seed.color), TypeTheme.generate(seed.type), GeometryTheme.generate(seed.geometry));
     }
 }
 export function ElbeTheme(p) {
-    var _a, _b;
-    const theme = "theme" in p
-        ? p.theme
-        : ElbeThemeData.fromSeed((_a = p.seed) !== null && _a !== void 0 ? _a : {}, (_b = p.highVis) !== null && _b !== void 0 ? _b : false);
-    return (_jsxs("div", { class: `elbe ${p.dark ? "dark" : ""} ${p.highVis ? "high_vis" : ""}`, children: [p.todoOverlay && _jsx(ToDo.Overlay, {}), _jsx("style", { children: theme.asCss() }), _jsx("style", { children: theme._pageBackground(p.dark) }), p.children] }));
+    var _a;
+    const theme = "theme" in p ? p.theme : ElbeThemeData.fromSeed((_a = p.seed) !== null && _a !== void 0 ? _a : {});
+    const config = makeThemeConfig(p);
+    return (_jsxs("div", { class: `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 }) })] }));
 }

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

@@ -0,0 +1,18 @@
+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;
+};
+export declare const ThemeConfigContext: import("preact").Context<ElbeThemeConfig>;
+export declare function _configCss(t: ElbeThemeData, c: ElbeThemeConfig): string;
+export declare const ThemeContext: import("preact").Context<ElbeThemeData>;
+export declare function useThemeConfig(): ElbeThemeConfig;
+export declare function useTheme(): ElbeThemeData;

package/dist/ui/theme/theme_context.js

@@ -0,0 +1,26 @@
+import { createContext } from "preact";
+import { useContext } from "preact/hooks";
+import { ElbeThemeData } from "./theme";
+export function makeThemeConfig(p) {
+    var _a, _b, _c, _d;
+    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,
+    };
+}
+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()};}`;
+}
+export const ThemeContext = createContext(ElbeThemeData.fromSeed({}));
+export function useThemeConfig() {
+    return useContext(ThemeConfigContext);
+}
+export function useTheme() {
+    return useContext(ThemeContext);
+}

package/dist/ui/theme/type_theme.js

@@ -51,7 +51,7 @@ export function typeThemePreset(merge) {
     return Object.assign({ heading: {
             bold: true,
             family: ["Calistoga", "Arial", "sans-serif"],
-            size: 2.2,
+            size: 2,
         }, body: {
             bold: false,
             family: ["Helvetica", "Arial", "sans-serif"],
@@ -61,7 +61,10 @@ export function typeThemePreset(merge) {
             family: ["Courier", "monospace"],
             size: 1,
         }, headingVariants: (style, variant) => {
-            const size = style.size * (1 - (variant - 1) * 0.1);
+            const reg = 1;
+            const diff = style.size - reg;
+            const varFac = (4 - (variant - 2)) / 6;
+            const size = reg + diff * Math.pow(varFac, 1.5);
             return Object.assign(Object.assign({}, style), { size });
         }, bodyVariants: (style, variant) => {
             const size = style.size * (variant === "s" ? 0.8 : 1.2);

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

@@ -0,0 +1,8 @@
+import React from "preact/compat";
+type _ToolbarState = "toolbar" | "overflow" | null;
+export declare const ToolbarContext: React.Context<_ToolbarState>;
+export declare function useToolbar(): {
+    isInToolbar: boolean;
+    isInOverflow: boolean;
+};
+export {};

package/dist/ui/util/ctx_toolbar.js

@@ -0,0 +1,9 @@
+import React, { useContext } from "preact/compat";
+export const ToolbarContext = React.createContext(null);
+export function useToolbar() {
+    const ctx = useContext(ToolbarContext);
+    return {
+        isInToolbar: ctx === "toolbar",
+        isInOverflow: ctx === "overflow",
+    };
+}

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,6 +1,4 @@
-import type React from "preact/compat";
-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;
 /**
@@ -20,3 +18,7 @@ export declare function share(data: {
  */
 export declare function copyToClipboard(text: string, toastMsg?: string): void;
 export declare function scrollToId(id: string): void;
+export declare function randomAlphaNum(length: int, prefix?: string): string;
+export type LayoutModes = "mobile" | "narrow" | "wide";
+export declare function useLayoutMode(): LayoutModes;
+export declare function useSiteScroll(): number;

package/dist/ui/util/util.js

@@ -1,4 +1,5 @@
-import { showToast } from "./toast";
+import { useEffect, useState } from "preact/compat";
+import { showToast } from "../..";
 export function clamp(value, min, max) {
     return Math.min(Math.max(value, min), max);
 }
@@ -36,3 +37,37 @@ export function scrollToId(id) {
     if (el)
         el.scrollIntoView({ behavior: "smooth" });
 }
+export function randomAlphaNum(length, prefix = "") {
+    const chars = "abcdefghijklmnopqrstuvwxyz0123456789";
+    let result = prefix;
+    for (let i = 0; i < length; i++) {
+        result += chars.charAt(Math.floor(Math.random() * chars.length));
+    }
+    return result;
+}
+function _layoutMode() {
+    const w = window.innerWidth;
+    if (w < 700)
+        return "mobile";
+    if (w < 1100)
+        return "narrow";
+    return "wide";
+}
+export function useLayoutMode() {
+    const [mode, setMode] = useState(_layoutMode());
+    useEffect(() => {
+        const onResize = () => setMode(_layoutMode());
+        window.addEventListener("resize", onResize);
+        return () => window.removeEventListener("resize", onResize);
+    });
+    return mode;
+}
+export function useSiteScroll() {
+    const [scroll, setScroll] = useState(0);
+    useEffect(() => {
+        const onScroll = () => setScroll(window.scrollY);
+        window.addEventListener("scroll", onScroll);
+        return () => window.removeEventListener("scroll", onScroll);
+    }, []);
+    return scroll;
+}

package/package.json

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