elbe-ui 0.2.30 → 0.2.37

package/dist/ui/theme/colors.js

@@ -0,0 +1,317 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColorTheme = exports.ModeColor = exports.SchemeColor = exports.KindColor = exports.MannerColor = exports.StateColor = exports.LayerColor = exports.colors = exports.cLayers = exports.cStates = exports.cManners = exports.cKinds = exports.cSchemes = exports.cModes = void 0;
+const colors_convert_1 = require("colors-convert");
+const util_1 = require("../util/util");
+const color_theme_1 = require("./color_theme");
+exports.cModes = ["light", "dark"];
+exports.cSchemes = ["primary", "secondary", "inverse"];
+exports.cKinds = [
+    "plain",
+    "accent",
+    "info",
+    "success",
+    "warning",
+    "error",
+];
+exports.cManners = ["major", "minor", "flat", "plain"];
+exports.cStates = ["neutral", "hover", "active", "disabled"];
+exports.cLayers = ["back", "front", "border"];
+class RGBAColor {
+    r;
+    g;
+    b;
+    a;
+    constructor(r, g, b, a) {
+        this.r = r;
+        this.g = g;
+        this.b = b;
+        this.a = a;
+    }
+    asCss() {
+        return `rgba(${this.r}, ${this.g}, ${this.b}, ${this.a})`;
+    }
+    get isDark() {
+        return this.luminance < 0.5;
+    }
+    get luminance() {
+        const [r, g, b] = [this.r, this.g, this.b].map((v) => {
+            v /= 255;
+            return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
+        });
+        return r * 0.2126 + g * 0.7152 + b * 0.0722;
+    }
+    get hex() {
+        const c = [this.r, this.g, this.b].map((v) => Math.round(v).toString(16).padStart(2, "0"));
+        const a = Math.round(this.a * 255)
+            .toString(16)
+            .padStart(2, "0");
+        return `#${c.join("")}${a}`;
+    }
+    static _fromHex(hex) {
+        if (!hex)
+            return new RGBAColor(0, 0, 0, 0);
+        const c = hex.replace("#", "").padEnd(6, "0").padEnd(8, "f").toLowerCase();
+        console.log(c);
+        return new RGBAColor(parseInt(c.substring(0, 2), 16), parseInt(c.substring(2, 4), 16), parseInt(c.substring(4, 6), 16), parseInt(c.substring(6, 8), 16) / 255);
+    }
+    desaturated(f = 1) {
+        const avg = (this.r + this.g + this.b) / 3;
+        return new RGBAColor(this.r + (avg - this.r) * f, this.g + (avg - this.g) * f, this.b + (avg - this.b) * f, this.a);
+    }
+    withAlpha(a) {
+        return new RGBAColor(this.r, this.g, this.b, a);
+    }
+    inter(other, factor) {
+        return new RGBAColor(this.r + (other.r - this.r) * factor, this.g + (other.g - this.g) * factor, this.b + (other.b - this.b) * factor, this.a + (other.a - this.a) * factor);
+    }
+    mirrorBrightness(factor = 1) {
+        const hsl = (0, colors_convert_1.rgbToHsl)({ r: this.r, g: this.g, b: this.b });
+        const newL = (50 - hsl.l) * (factor * 2 - 1) + 50;
+        const rgb = (0, colors_convert_1.hslToRgb)({
+            ...hsl,
+            l: (0, util_1.clamp)(newL, 0, 100),
+            s: (0, util_1.clamp)(hsl.s, 0, 100),
+            //s: -Math.abs(2 * newL - 100) + 100,
+        });
+        return new RGBAColor(rgb.r, rgb.g, rgb.b, this.a);
+    }
+    get values() {
+        return [this.r, this.g, this.b, this.a];
+    }
+    hasWCAGContrast(color) {
+        return this.contrastRatio(color) >= 3;
+    }
+    contrastRatio(color) {
+        const l1 = this.luminance;
+        const l2 = color.luminance;
+        return (Math.max(l1, l2) + 0.05) / (Math.min(l1, l2) + 0.05);
+    }
+}
+exports.colors = {
+    transparent: new RGBAColor(0, 0, 0, 0),
+    white: new RGBAColor(255, 255, 255, 1),
+    black: new RGBAColor(0, 0, 0, 1),
+    blueAccent: new RGBAColor(60, 119, 246, 1),
+    blue: new RGBAColor(32, 89, 153, 1),
+    green: new RGBAColor(35, 144, 78, 1),
+    yellow: new RGBAColor(240, 221, 21, 1),
+    red: new RGBAColor(243, 67, 67, 1),
+};
+class LayerColor extends RGBAColor {
+    back;
+    border;
+    borderContext;
+    front;
+    constructor(back, front, border, borderContext) {
+        super(back.r, back.g, back.b, back.a);
+        this.back = back;
+        this.border = border;
+        this.borderContext = borderContext;
+        this.front = front ?? (back.isDark ? exports.colors.white : exports.colors.black);
+    }
+    asCss() {
+        return (`background-color: ${this.back.asCss()};\n` +
+            `color: ${this.front.asCss()};\n` +
+            `border-color: ${this.border?.asCss() ?? "transparent"};\n` +
+            //`border-color: ${this.border?.asCss() ?? "transparent"};\n` +
+            this.contextCss());
+    }
+    inter(other, factor) {
+        return new LayerColor(this.back.inter(other.back, factor), this.front.inter(other.front, factor), this.border?.inter(other.border ?? exports.colors.transparent, factor), this.borderContext?.inter(other.borderContext ?? exports.colors.transparent, factor));
+    }
+    mirrorBrightness(factor) {
+        return new LayerColor(this.back.mirrorBrightness(factor), this.front.mirrorBrightness(factor), this.border?.mirrorBrightness(factor), this.borderContext?.mirrorBrightness(factor));
+    }
+    desaturated() {
+        return new LayerColor(this.back.desaturated(), this.front.desaturated(), this.border?.desaturated(), this.borderContext?.desaturated());
+    }
+    static fromHex(back, front, border) {
+        if (front === undefined && border === undefined) {
+            return LayerColor.fromBack(RGBAColor._fromHex(back));
+        }
+        return new LayerColor(RGBAColor._fromHex(back), RGBAColor._fromHex(front ?? null), RGBAColor._fromHex(border ?? null));
+    }
+    static fromBack(back, c) {
+        const front = back.isDark ? exports.colors.white : exports.colors.black;
+        return new LayerColor(back, c?.front ?? front, c?.border ?? front);
+    }
+    contextCss() {
+        return (`--c-context-back: ${this.back.asCss()};\n` +
+            `--c-context-front: ${this.front.asCss()};` +
+            `--c-context-border: ${(this.borderContext ?? this.border)?.asCss() ?? "transparent"};`);
+    }
+}
+exports.LayerColor = LayerColor;
+class StateColor extends LayerColor {
+    neutral;
+    hover;
+    active;
+    disabled;
+    constructor(neutral, hover, active, disabled) {
+        super(neutral.back, neutral.front, neutral.border);
+        this.neutral = neutral;
+        this.hover = hover;
+        this.active = active;
+        this.disabled = disabled;
+    }
+    asCss() {
+        const els = [
+            ".action",
+            ":is(button)",
+            ":is(a)",
+            ":is(input)",
+            ":is(select)",
+        ];
+        const disS = "&.disabled, & :disabled, &:disabled";
+        const hoverS = els.map((e) => `&${e}:hover:not(${disS})`).join(", ");
+        const activeS = els.map((e) => `&${e}:active:not(${disS})`).join(", ");
+        return (`${this.neutral.asCss()} \n` +
+            `${hoverS} { ${this.hover.asCss()} }\n` +
+            `${activeS} { ${this.active.asCss()} }\n` +
+            `${disS} { ${this.disabled.asCss()} }`);
+    }
+    static generate(_, context, style, fromFront) {
+        function _make(factor) {
+            const front = style.front;
+            return new LayerColor((fromFront
+                ? context.back.inter(front, factor)
+                : style.back.inter(context.back.mirrorBrightness(), factor)).withAlpha(Math.max(style.back.a, 0.2)), front, style.border, style.borderContext);
+        }
+        return new StateColor(style, _make(0.075), _make(0.25), style.desaturated());
+    }
+}
+exports.StateColor = StateColor;
+class MannerColor extends StateColor {
+    major;
+    minor;
+    flat;
+    constructor(major, minor, flat) {
+        const m = major ?? flat;
+        super(m.neutral, m.hover, m.active, m.disabled);
+        this.major = major;
+        this.minor = minor;
+        this.flat = flat;
+    }
+    asCss(fallback) {
+        const maj = this.major ?? fallback?.major;
+        const min = this.minor ?? fallback?.minor;
+        return (`${this.flat.asCss()}\n` +
+            (maj ? `&.major { ${maj.asCss()} } \n` : "") +
+            (min ? `&.minor { ${min.asCss()} } \n` : "") +
+            `&.flat { ${this.flat.asCss()} }\n`);
+    }
+    raisedCss() {
+        const maj = this.major;
+        const min = this.minor;
+        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));
+        /*
+        if (!style) {
+          return new MannerColor(null, null, StateColor.generate(s, c, c, true));
+        }
+        return new MannerColor(
+          StateColor.generate(s, c, s.variant.major(s, c, style)),
+          StateColor.generate(s, c, s.variant.minor(s, c, style)),
+          StateColor.generate(s, c, s.variant.flat(s, c, style), true)
+        );
+        */
+    }
+}
+exports.MannerColor = MannerColor;
+class KindColor extends MannerColor {
+    plain;
+    accent;
+    info;
+    success;
+    warning;
+    error;
+    constructor(plain, accent, info, success, warning, error) {
+        super(plain.major, plain.minor, plain.flat);
+        this.plain = plain;
+        this.accent = accent;
+        this.info = info;
+        this.success = success;
+        this.warning = warning;
+        this.error = error;
+    }
+    asCss() {
+        return (`${this.plain.asCss()}\n` +
+            `${this.accent.raisedCss()}\n` +
+            `.plain {${this.plain.asCss()}}\n` +
+            `.accent { ${this.accent.asCss()} }\n` +
+            `.info { ${this.info.asCss()} }\n` +
+            `.success { ${this.success.asCss()} }\n` +
+            `.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)));
+    }
+}
+exports.KindColor = KindColor;
+class SchemeColor extends KindColor {
+    primary;
+    secondary;
+    inverse;
+    constructor(primary, secondary, inverse) {
+        super(primary.plain, primary.accent, primary.info, primary.success, primary.warning, primary.error);
+        this.primary = primary;
+        this.secondary = secondary;
+        this.inverse = inverse;
+    }
+    asCss() {
+        return (`${this.primary.asCss()}\n` +
+            `.primary { ${this.primary.asCss()}} \n` +
+            `.secondary { ${this.secondary.asCss()} }\n` +
+            `.inverse { ${this.inverse.asCss()} }`);
+    }
+    static generate(seed, c) {
+        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)));
+    }
+}
+exports.SchemeColor = SchemeColor;
+class ModeColor extends SchemeColor {
+    light;
+    dark;
+    constructor(light, dark) {
+        super(light.primary, light.secondary, light.inverse);
+        this.light = light;
+        this.dark = dark;
+    }
+    asCss() {
+        return (`.elbe { ${this.light.asCss()}}` + `.elbe.dark { ${this.dark.asCss()}}`);
+    }
+    static generate(seed) {
+        return new ModeColor(SchemeColor.generate(seed, seed.base), SchemeColor.generate(seed, seed.mode.dark(seed, seed.base)));
+    }
+}
+exports.ModeColor = ModeColor;
+class ColorTheme {
+    colors;
+    color;
+    constructor(colors, color) {
+        this.colors = colors;
+        this.color = color;
+    }
+    asCss() {
+        return (":root {" +
+            `--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()};` +
+            "}\n" +
+            this.color.asCss());
+    }
+    static generate(seed) {
+        const s = (0, color_theme_1.colorThemePreset)(seed);
+        return new ColorTheme(s, ModeColor.generate(s));
+    }
+}
+exports.ColorTheme = ColorTheme;
+//Bun.write("./example.css", ColorTheme.generate().asCss());

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

@@ -0,0 +1,16 @@
+export interface GeometryThemeSeed {
+    size: number;
+    radius: number;
+    padding: number;
+    borderWidth: number;
+}
+export declare class GeometryTheme {
+    readonly size: number;
+    readonly radius: number;
+    readonly padding: number;
+    readonly borderWidth: number;
+    constructor(size: number, radius: number, padding: number, borderWidth: number);
+    asCss(): string;
+    static generate(seed?: Partial<GeometryTheme>): GeometryTheme;
+}
+export declare function geometryThemePreset(merge?: Partial<GeometryThemeSeed>): GeometryThemeSeed;

package/dist/ui/theme/geometry_theme.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GeometryTheme = void 0;
+exports.geometryThemePreset = geometryThemePreset;
+class GeometryTheme {
+    size;
+    radius;
+    padding;
+    borderWidth;
+    constructor(size, radius, padding, borderWidth) {
+        this.size = size;
+        this.radius = radius;
+        this.padding = padding;
+        this.borderWidth = borderWidth;
+    }
+    asCss() {
+        return (`:root{` +
+            `--g-size: ${this.size}px;` +
+            `--g-radius: ${this.radius}rem;` +
+            `--g-padding: ${this.padding}rem;` +
+            `--g-border-width: ${this.borderWidth}rem;` +
+            "}");
+    }
+    static generate(seed) {
+        const s = geometryThemePreset(seed);
+        return new GeometryTheme(s.size, s.radius, s.padding, s.borderWidth);
+    }
+}
+exports.GeometryTheme = GeometryTheme;
+function geometryThemePreset(merge) {
+    const seed = merge ?? {};
+    return {
+        size: seed.size ?? 16,
+        radius: seed.radius ?? 0.75,
+        padding: seed.padding ?? 1,
+        borderWidth: seed.borderWidth ?? 0.125,
+    };
+}

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

@@ -0,0 +1,28 @@
+import { ColorTheme, type ColorThemeSeed } from "./colors";
+import { GeometryTheme, type GeometryThemeSeed } from "./geometry_theme";
+import { TypeTheme, type TypeThemeSeed } from "./type_theme";
+export * from "./color_theme";
+export * from "./colors";
+export * from "./geometry_theme";
+export * from "./type_theme";
+export interface ElbeThemeSeed {
+    color?: Partial<ColorThemeSeed>;
+    type?: Partial<TypeThemeSeed>;
+    geometry?: Partial<GeometryThemeSeed>;
+}
+export declare class ElbeThemeData {
+    readonly color: ColorTheme;
+    readonly type: TypeTheme;
+    readonly geometry: GeometryTheme;
+    constructor(color: ColorTheme, type: TypeTheme, geometry: GeometryTheme);
+    asCss(): string;
+    static fromSeed(seed: ElbeThemeSeed): ElbeThemeData;
+}
+export declare function ElbeTheme(p: {
+    children: any;
+    dark?: boolean;
+} & ({
+    seed: ElbeThemeSeed;
+} | {
+    theme: ElbeThemeData;
+})): import("preact").JSX.Element;

package/dist/ui/theme/theme.js

@@ -0,0 +1,49 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ElbeThemeData = void 0;
+exports.ElbeTheme = ElbeTheme;
+const jsx_runtime_1 = require("preact/jsx-runtime");
+const colors_1 = require("./colors");
+const geometry_theme_1 = require("./geometry_theme");
+const type_theme_1 = require("./type_theme");
+__exportStar(require("./color_theme"), exports);
+__exportStar(require("./colors"), exports);
+__exportStar(require("./geometry_theme"), exports);
+__exportStar(require("./type_theme"), exports);
+class ElbeThemeData {
+    color;
+    type;
+    geometry;
+    constructor(color, type, geometry) {
+        this.color = color;
+        this.type = type;
+        this.geometry = geometry;
+    }
+    asCss() {
+        return [this.color, this.type, this.geometry]
+            .map((s) => s.asCss())
+            .join("\n");
+    }
+    static fromSeed(seed) {
+        return new ElbeThemeData(colors_1.ColorTheme.generate(seed.color), type_theme_1.TypeTheme.generate(seed.type), geometry_theme_1.GeometryTheme.generate(seed.geometry));
+    }
+}
+exports.ElbeThemeData = ElbeThemeData;
+function ElbeTheme(p) {
+    const theme = "seed" in p ? ElbeThemeData.fromSeed(p.seed) : p.theme;
+    return ((0, jsx_runtime_1.jsxs)("div", { class: `elbe ${p.dark ? "dark" : ""}`, children: [(0, jsx_runtime_1.jsx)("style", { children: theme.asCss() }), p.children] }));
+}

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

@@ -0,0 +1,38 @@
+interface TypeStyle {
+    bold?: boolean;
+    italic?: boolean;
+    underline?: boolean;
+    family: string[];
+    size: number;
+}
+export type ElbeTypeVariants = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "body-l" | "body-m" | "body-s" | "code";
+export declare const tVariants: readonly ["h1", "h2", "h3", "h4", "h5", "h6", "body-l", "body-m", "body-s", "code"];
+export type VariantSelector<T> = (style: TypeStyle, variant: T) => TypeStyle;
+export interface TypeThemeSeed {
+    /**
+     * the base style for headings. Refers to h1
+     */
+    heading: TypeStyle;
+    body: TypeStyle;
+    code: TypeStyle;
+    headingVariants: VariantSelector<2 | 3 | 4 | 5 | 6>;
+    bodyVariants: VariantSelector<"s" | "l">;
+}
+export declare class TypeTheme {
+    h1: TypeStyle;
+    h2: TypeStyle;
+    h3: TypeStyle;
+    h4: TypeStyle;
+    h5: TypeStyle;
+    h6: TypeStyle;
+    bodyL: TypeStyle;
+    body: TypeStyle;
+    bodyS: TypeStyle;
+    code: TypeStyle;
+    constructor(h1: TypeStyle, h2: TypeStyle, h3: TypeStyle, h4: TypeStyle, h5: TypeStyle, h6: TypeStyle, bodyL: TypeStyle, body: TypeStyle, bodyS: TypeStyle, code: TypeStyle);
+    private get headers();
+    asCss(): string;
+    static generate(seed?: Partial<TypeThemeSeed>): TypeTheme;
+}
+export declare function typeThemePreset(merge?: Partial<TypeThemeSeed>): TypeThemeSeed;
+export {};

package/dist/ui/theme/type_theme.js

@@ -0,0 +1,98 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TypeTheme = exports.tVariants = void 0;
+exports.typeThemePreset = typeThemePreset;
+exports.tVariants = [
+    "h1",
+    "h2",
+    "h3",
+    "h4",
+    "h5",
+    "h6",
+    "body-l",
+    "body-m",
+    "body-s",
+    "code",
+];
+function _typeStyleAsCss(t) {
+    return (`font-family: ${t.family};\n` +
+        `font-size: ${t.size}rem;\n` +
+        `font-weight: ${t.bold ? "bold" : "normal"};\n` +
+        `font-style: ${t.italic ? "italic" : "normal"};\n` +
+        `text-decoration: ${t.underline ? "underline" : "none"};\n`);
+}
+class TypeTheme {
+    h1;
+    h2;
+    h3;
+    h4;
+    h5;
+    h6;
+    bodyL;
+    body;
+    bodyS;
+    code;
+    constructor(h1, h2, h3, h4, h5, h6, bodyL, body, bodyS, code) {
+        this.h1 = h1;
+        this.h2 = h2;
+        this.h3 = h3;
+        this.h4 = h4;
+        this.h5 = h5;
+        this.h6 = h6;
+        this.bodyL = bodyL;
+        this.body = body;
+        this.bodyS = bodyS;
+        this.code = code;
+    }
+    get headers() {
+        return [this.h1, this.h2, this.h3, this.h4, this.h5, this.h6];
+    }
+    asCss() {
+        return (this.headers
+            .map((v, i) => `h${i + 1}, .h${i + 1} {${_typeStyleAsCss(v)}}`)
+            .join("\n") +
+            `body, .body, .body-m {${_typeStyleAsCss(this.body)}}\n` +
+            `large, .body-l {${_typeStyleAsCss(this.bodyL)}}\n` +
+            `small, .body-s {${_typeStyleAsCss(this.bodyS)}}\n` +
+            `.code {${_typeStyleAsCss(this.code)}}\n`);
+    }
+    static generate(seed) {
+        const s = typeThemePreset(seed);
+        return new TypeTheme(s.heading, s.headingVariants(s.heading, 2), s.headingVariants(s.heading, 3), s.headingVariants(s.heading, 4), s.headingVariants(s.heading, 5), s.headingVariants(s.heading, 6), s.bodyVariants(s.body, "l"), s.body, s.bodyVariants(s.body, "s"), s.code);
+    }
+}
+exports.TypeTheme = TypeTheme;
+function typeThemePreset(merge) {
+    return {
+        heading: {
+            bold: true,
+            family: ["Calistoga", "Arial", "sans-serif"],
+            size: 2.2,
+        },
+        body: {
+            bold: false,
+            family: ["Helvetica", "Arial", "sans-serif"],
+            size: 1,
+        },
+        code: {
+            bold: false,
+            family: ["Courier", "monospace"],
+            size: 1,
+        },
+        headingVariants: (style, variant) => {
+            const size = style.size * (1 - (variant - 1) * 0.1);
+            return {
+                ...style,
+                size,
+            };
+        },
+        bodyVariants: (style, variant) => {
+            const size = style.size * (variant === "s" ? 0.8 : 1.2);
+            return {
+                ...style,
+                size,
+            };
+        },
+        ...merge,
+    };
+}

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

@@ -0,0 +1,10 @@
+/**
+ * show a simple confirm dialog
+ * @param param0 the title and message of the dialog
+ * @returns a promise that resolves to true if the user clicks "yes" or "okay" and false if the user clicks "no"
+ */
+export declare function showConfirmDialog({ title, message, okay, }: {
+    message: string;
+    title: string;
+    okay?: boolean;
+}): Promise<boolean>;

package/dist/ui/util/confirm_dialog.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.showConfirmDialog = showConfirmDialog;
+/**
+ * show a simple confirm dialog
+ * @param param0 the title and message of the dialog
+ * @returns a promise that resolves to true if the user clicks "yes" or "okay" and false if the user clicks "no"
+ */
+function showConfirmDialog({ title, message, okay = false, }) {
+    return new Promise((resolve, reject) => {
+        const dialog = document.createElement("div");
+        dialog.classList.add("dialog");
+        dialog.innerHTML = `<dialog open>
+        <div
+          class="elbe card primary"
+          style="max-width: 30rem; min-width: 10rem"
+        >
+          <div class="row cross-center">
+            <div class="flex-1 body-l b">
+            ${title}
+            </div>
+            <button class="plain round" style="width: 3rem" onclick="conf_resolve(false)">
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x "><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg>
+            </button>
+          </div>
+         <div style="margin-top: 1rem; margin-bottom: 1rem">
+          ${message}
+          </div>
+          <div class="row main-end gap">
+  
+        ${okay
+            ? '<button class="accent" style="padding-left:1rem; padding-right:1rem" onclick="conf_resolve(true)">okay</button>'
+            : '<button class="minor" style="padding-left:1rem; padding-right:1rem" onclick="conf_resolve(false)">no</button>' +
+                '<button class="accent" style="padding-left:1rem; padding-right:1rem" onclick="conf_resolve(true)">yes</button>'}
+      </div>
+  
+        </div>
+      </dialog>
+    `;
+        document.body.appendChild(dialog);
+        window["conf_resolve"] = (v) => {
+            document.body.removeChild(dialog);
+            resolve(v);
+        };
+    });
+}

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

@@ -0,0 +1 @@
+export declare function _ElbeErr(msg: string): import("preact").JSX.Element;

package/dist/ui/util/error_view.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports._ElbeErr = _ElbeErr;
+const jsx_runtime_1 = require("preact/jsx-runtime");
+const __1 = require("../..");
+function _ElbeErr(msg) {
+    return ((0, jsx_runtime_1.jsxs)("div", { class: "row text-s gap-half", style: "background: #ee0044; color: white; border-radius: 4px; text-align: left; padding: .5rem", children: [(0, jsx_runtime_1.jsx)(__1.Icons.CircleX, {}), (0, jsx_runtime_1.jsxs)("div", { class: "column gap-none cross-stretch", children: [(0, jsx_runtime_1.jsx)("b", { class: "text-s", children: "elbe error" }), (0, jsx_runtime_1.jsx)("span", { style: "margin-top: -.125rem", children: msg })] })] }));
+}

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

@@ -0,0 +1,5 @@
+/**
+ * show a toast message at the bottom of the screen
+ * @param message the message to show
+ */
+export declare function showToast(message: string): void;

package/dist/ui/util/toast.js

@@ -0,0 +1,17 @@
+"use strict";
+/**
+ * show a toast message at the bottom of the screen
+ * @param message the message to show
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.showToast = showToast;
+function showToast(message) {
+    const toast = document.createElement("div");
+    toast.classList.add("toast");
+    toast.classList.add("inverse");
+    toast.innerText = message;
+    document.body.appendChild(toast);
+    setTimeout(() => {
+        toast.remove();
+    }, 3000);
+}