elbe-ui 1.0.8 → 2.0.1

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

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { useApp } from "../../app/app_ctxt";
+export function WithStateTheme(p) {
+    const { _appThemeContext } = useApp();
+    const [elState, setElState] = useState("neutral");
+    if (!p.theme) {
+        console.error("WithStateTheme: No theme provided");
+    }
+    const theme = p.theme.useWith(({ color }) => {
+        var _a;
+        return ({
+            color: Object.assign(Object.assign({}, color), { selection: Object.assign(Object.assign({}, color.selection), { manner: (_a = p.manner) !== null && _a !== void 0 ? _a : color.selection.manner, state: p.disabled ? "disabled" : elState }) }),
+        });
+    }, [p.theme, elState, p.disabled, p.manner]);
+    return (_jsx(_appThemeContext.WithTheme, { theme: theme, children: _jsx("div", { onMouseEnter: (e) => {
+                e.stopPropagation();
+                setElState("hover");
+            }, onMouseLeave: (e) => {
+                //e.stopPropagation();
+                setElState("neutral");
+            }, onMouseDown: (e) => {
+                e.stopPropagation();
+                setElState("active");
+            }, onMouseUp: (e) => {
+                e.stopPropagation();
+                setElState("hover");
+            }, style: {
+                display: "contents",
+                pointerEvents: p.disabled ? "none" : undefined,
+                cursor: p.disabled ? "auto" : "pointer",
+            }, children: p.children }) }));
+}

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

@@ -1,12 +1,14 @@
 import React, { Component } from "react";
-import type { ElbeColorKinds, ElbeColorManners } from "../../theme/colors";
+import { ColorSelection } from "../../..";
 import { ElbeChildren } from "../../util/types";
-import { ActionElbeProps } from "../base/box";
+import { ElbeActionProps } from "../base/box";
 import { type IconChild } from "./icon_button";
-export type ButtonProps = ActionElbeProps & {
-    kind?: ElbeColorKinds;
+export type ButtonProps = ElbeActionProps & {
+    kind?: ColorSelection.Kinds;
     transparent?: boolean;
-    contentAlign?: "start" | "center" | "end";
+    contentAlign?: "start" | "center" | "end" | "space-between";
+    gap?: number;
+    sharp?: boolean;
     onTap?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
 } & {
     icon?: IconChild;
@@ -14,7 +16,7 @@ export type ButtonProps = ActionElbeProps & {
     children?: ElbeChildren;
 };
 export declare class Button extends Component<ButtonProps & {
-    manner: ElbeColorManners;
+    manner: ColorSelection.Manners;
 }> {
     static major: (p: ButtonProps) => import("react/jsx-runtime").JSX.Element;
     static minor: (p: ButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/button/button.js

@@ -11,8 +11,12 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Component } from "react";
+import { Row, Text } from "../../..";
+import { useApp } from "../../app/app_ctxt";
 import { useToolbar } from "../../util/ctx_toolbar";
 import { applyProps } from "../base/box";
+import { WithStateTheme } from "../base/state_builder";
+import { WithTooltip } from "../tooltip";
 import { Icon } from "./icon_button";
 export class Button extends Component {
     render() {
@@ -24,24 +28,31 @@ Button.minor = (p) => _jsx(_Btn, Object.assign({}, p, { manner: "minor" }));
 Button.flat = (p) => _jsx(_Btn, Object.assign({}, p, { manner: "flat" }));
 Button.plain = (p) => _jsx(_Btn, Object.assign({}, p, { manner: "plain" }));
 function _Btn(_a) {
-    var _b;
+    var _b, _c;
     var { manner, kind, onTap, icon, label, children, contentAlign } = _a, elbe = __rest(_a, ["manner", "kind", "onTap", "icon", "label", "children", "contentAlign"]);
     const toolbarCtx = useToolbar();
-    return label || icon || children ? (_jsxs("button", Object.assign({}, applyProps("button", Object.assign(Object.assign({ role: "button" }, elbe), { flex: (toolbarCtx === null || toolbarCtx === void 0 ? void 0 : toolbarCtx.isInOverflow) ? 1 : elbe.flex }), [
-        "row",
-        "gap-half",
-        kind !== null && kind !== void 0 ? kind : (manner != "plain" && "accent"),
-        manner,
-        !onTap && "disabled",
-    ], {
-        overflow: "hidden",
-        justifyContent: contentAlign !== null && contentAlign !== void 0 ? contentAlign : ((toolbarCtx === null || toolbarCtx === void 0 ? void 0 : toolbarCtx.isInOverflow) ? "start" : "center"),
-        backgroundColor: elbe.transparent ? "transparent" : undefined,
-    }), { title: (_b = elbe.ariaLabel) !== null && _b !== void 0 ? _b : label, disabled: !onTap, onClick: (e) => onTap && onTap(e), children: [_jsx(Icon, { icon: icon }), !(toolbarCtx === null || toolbarCtx === void 0 ? void 0 : toolbarCtx.isInToolbar) && label && (_jsx("div", { style: {
-                    whiteSpace: "nowrap",
-                    overflow: "hidden",
-                    textOverflow: "ellipsis",
-                }, children: label })), children] }))) : (_jsx("div", {})
+    const { _appThemeContext } = useApp();
+    const baseTheme = _appThemeContext.useTheme().useWith(({ color }) => ({
+        color: Object.assign(Object.assign({}, color), { selection: Object.assign(Object.assign({}, color.selection), { kind: kind !== null && kind !== void 0 ? kind : color.selection.kind, manner: manner }) }),
+    }), [kind, manner]);
+    return label || icon || children ? (_jsx(WithTooltip, { tooltip: elbe.tooltip, children: _jsx(WithStateTheme, { theme: baseTheme, disabled: !onTap, children: _jsx("button", Object.assign({}, applyProps("button", Object.assign(Object.assign({ role: "button" }, elbe), { flex: (toolbarCtx === null || toolbarCtx === void 0 ? void 0 : toolbarCtx.isInOverflow) ? 1 : elbe.flex }), ["elbe_colored"], {
+                /*backgroundColor: elbe.transparent
+                ? "transparent"
+                : usedTheme.theme.color.currentColor.back.asCss(),*/
+                cursor: "inherit",
+                padding: "0.25rem .75rem",
+                minHeight: "3rem",
+                minWidth: "3rem",
+                border: "none",
+                backgroundColor: elbe.transparent ? "transparent" : undefined,
+                borderRadius: elbe.sharp
+                    ? 0
+                    : baseTheme.theme.geometry.radius + "rem",
+            }), { title: elbe.tooltip ? undefined : (_b = elbe.ariaLabel) !== null && _b !== void 0 ? _b : label, disabled: !onTap, onClick: (e) => onTap && onTap(e), children: _jsxs(Row, { cross: "center", main: contentAlign !== null && contentAlign !== void 0 ? contentAlign : ((toolbarCtx === null || toolbarCtx === void 0 ? void 0 : toolbarCtx.isInOverflow) ? "start" : "center"), gap: (_c = elbe.gap) !== null && _c !== void 0 ? _c : 0.5, children: [_jsx(Icon, { icon: icon }), !(toolbarCtx === null || toolbarCtx === void 0 ? void 0 : toolbarCtx.isInToolbar) && label && (_jsx(Text, { bold: true, style: {
+                                whiteSpace: "nowrap",
+                                overflow: "hidden",
+                                textOverflow: "ellipsis",
+                            }, v: label })), children] }) })) }) })) : (_jsx("div", {})
     //_ElbeErr("Button requires either an icon and or a label, or a child")
     );
 }

package/dist/ui/components/button/choose_button.d.ts

@@ -1,4 +1,4 @@
-import type { ElbeColorKinds } from "../../theme/colors";
+import { ColorSelection } from "../../..";
 import { type IconChild } from "./icon_button";
 export interface ChooseItem<T> {
     value: T;
@@ -6,10 +6,12 @@ export interface ChooseItem<T> {
     icon?: IconChild;
     ariaLabel?: string;
 }
-export declare function ChooseButton<T>({ items, value, onChange, kind, column, }: {
+export declare function ChooseButton<T>({ items, value, onChange, kind, column, tooltip, }: {
     items: ChooseItem<T>[];
     value: T;
     onChange?: (v: T) => void;
-    kind?: ElbeColorKinds;
+    kind?: ColorSelection.Kinds;
     column?: boolean;
+    sharp?: boolean;
+    tooltip?: string;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/button/choose_button.js

@@ -1,13 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CheckIcon } from "lucide-react";
+import { FlexLayout, Row, Text } from "../../..";
 import { Card } from "../base/card";
 import { Spaced } from "../layout/spaced";
 import { Button } from "./button";
 import { Icon } from "./icon_button";
-export function ChooseButton({ items, value, onChange, kind, column = false, }) {
-    return (_jsx(Card, { kind: "accent", manner: "major", padding: 0, overflow: "hidden", role: "radiogroup", disabled: !onChange, className: `${column ? "column" : "row"} gap-none`, children: items.map((e, i) => {
-            var _a, _b;
-            return (_jsxs(Button, { ariaLabel: (_b = (_a = e.ariaLabel) !== null && _a !== void 0 ? _a : e.label) !== null && _b !== void 0 ? _b : null, manner: e.value === value ? "major" : "flat", kind: kind, onTap: onChange && (() => onChange(e.value)), className: `sharp ${column ? "main-between gap-double" : ""}`, children: [_jsxs("div", { className: "row gap-half", children: [_jsx(Icon, { icon: Icon }), e.label && _jsx("span", { children: e.label })] }), column &&
-                        (e.value === value ? _jsx(CheckIcon, {}) : _jsx(Spaced, { amount: 1.5 }))] }, i));
-        }) }));
+export function ChooseButton({ items, value, onChange, kind, column = false, tooltip, }) {
+    return (_jsx(Card, { kind: "accent", manner: "major", state: onChange ? "neutral" : "disabled", padding: 0, overflow: "hidden", role: "radiogroup", bordered: true, tooltip: tooltip, onTap: onChange ? undefined : null, style: {
+            maxWidth: "fit-content",
+        }, children: _jsx(FlexLayout, { direction: column ? "column" : "row", cross: "stretch", gap: 0, children: items.map((e, i) => {
+                var _a, _b;
+                return (_jsxs(Button, { ariaLabel: (_b = (_a = e.ariaLabel) !== null && _a !== void 0 ? _a : e.label) !== null && _b !== void 0 ? _b : null, manner: e.value === value ? "major" : "flat", kind: kind, onTap: onChange && (() => onChange(e.value)), sharp: true, contentAlign: "space-between", gap: column ? 2 : undefined, children: [_jsxs(Row, { gap: 0.5, children: [e.icon && _jsx(Icon, { icon: e.icon }), e.label && _jsx(Text, { bold: true, v: e.label })] }), column &&
+                            (e.value === value ? _jsx(CheckIcon, {}) : _jsx(Spaced, { amount: 1.5 }))] }, i));
+            }) }) }));
 }

package/dist/ui/components/button/icon_button.d.ts

@@ -1,14 +1,15 @@
 import React, { Component } from "react";
-import { ActionElbeProps, ElbeProps, type ElbeChild, type ElbeColorKinds, type ElbeColorManners } from "../../..";
+import { ColorSelection, ElbeActionProps, ElbeProps, type ElbeChild } from "../../..";
 export type IconChild = ElbeChild | ((_: any) => ElbeChild);
-export type IconButtonProps = {
+export type IconButtonProps = ElbeActionProps & {
     icon?: IconChild;
-    kind?: ElbeColorKinds;
+    kind?: ColorSelection.Kinds;
     transparent?: boolean;
+    sharp?: boolean;
     onTap?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-} & ActionElbeProps;
+};
 export declare class IconButton extends Component<IconButtonProps & {
-    manner?: ElbeColorManners;
+    manner?: ColorSelection.Manners;
 }> {
     static major: (p: IconButtonProps) => import("react/jsx-runtime").JSX.Element;
     static minor: (p: IconButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/button/icon_button.js

@@ -12,33 +12,43 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import React, { Component } from "react";
 import { applyProps, } from "../../..";
+import { useApp } from "../../app/app_ctxt";
+import { WithStateTheme } from "../base/state_builder";
+import { WithTooltip } from "../tooltip";
 export class IconButton extends Component {
     render() {
-        return _btn(this.props, this.props.manner);
+        var _a;
+        return _jsx(_btn, Object.assign({}, this.props, { manner: (_a = this.props.manner) !== null && _a !== void 0 ? _a : "plain" }));
     }
 }
-IconButton.major = (p) => _btn(p, "major");
-IconButton.minor = (p) => _btn(p, "minor");
-IconButton.flat = (p) => _btn(p, "flat");
-IconButton.plain = (p) => _btn(p, "plain");
-function _btn(_a, manner) {
-    var _b, _c;
-    var { icon, onTap } = _a, elbe = __rest(_a, ["icon", "onTap"]);
-    if (manner === void 0) { manner = "major"; }
-    return (_jsx("button", Object.assign({}, applyProps("icon_button", elbe, [
-        "row",
-        "main-center",
-        "gap-half",
-        (_b = elbe.kind) !== null && _b !== void 0 ? _b : (manner != "plain" && "accent"),
-        manner,
-        !onTap && "disabled",
-    ], {
-        backgroundColor: elbe.transparent ? "transparent" : undefined,
-        border: "none",
-        borderRadius: "3rem",
-        height: "3rem",
-        width: "3rem",
-    }), { title: (_c = elbe.ariaLabel) !== null && _c !== void 0 ? _c : undefined, onClick: (e) => onTap && onTap(e), children: _jsx(Icon, { icon: icon }) })));
+IconButton.major = (p) => _jsx(_btn, Object.assign({}, p, { manner: "major" }));
+IconButton.minor = (p) => _jsx(_btn, Object.assign({}, p, { manner: "minor" }));
+IconButton.flat = (p) => _jsx(_btn, Object.assign({}, p, { manner: "flat" }));
+IconButton.plain = (p) => _jsx(_btn, Object.assign({}, p, { manner: "plain" }));
+function _btn(_a) {
+    var _b;
+    var { icon, onTap, manner } = _a, elbe = __rest(_a, ["icon", "onTap", "manner"]);
+    const { _appThemeContext } = useApp();
+    const baseTheme = _appThemeContext.useTheme().useWith(({ color }) => {
+        var _a, _b;
+        return ({
+            color: Object.assign(Object.assign({}, color), { selection: Object.assign(Object.assign({}, color.selection), { kind: (_b = (_a = elbe.kind) !== null && _a !== void 0 ? _a : color.selection.kind) !== null && _b !== void 0 ? _b : "accent", manner: manner }) }),
+        });
+    }, [elbe.kind, manner]);
+    return (_jsx(WithTooltip, { tooltip: elbe.tooltip, children: _jsx(WithStateTheme, { theme: baseTheme, disabled: !onTap, children: _jsx("button", Object.assign({}, applyProps("icon_button", elbe, ["elbe_colored"], {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                cursor: "inherit",
+                backgroundColor: elbe.transparent ? "transparent" : undefined,
+                border: "none",
+                borderRadius: elbe.sharp ? 0 : "3rem",
+                height: "3rem",
+                width: "3rem",
+            }), { title: elbe.tooltip ? undefined : (_b = elbe.ariaLabel) !== null && _b !== void 0 ? _b : undefined, onClick: (e) => {
+                    e.stopPropagation();
+                    onTap && onTap(e);
+                }, children: _jsx(Icon, { icon: icon }) })) }) }));
 }
 export function Icon(p) {
     if (!p.icon)

package/dist/ui/components/button/toggle_button.d.ts

@@ -1,10 +1,10 @@
-import type { ElbeColorKinds } from "../../theme/colors";
-import { ActionElbeProps } from "../base/box";
+import { ColorSelection } from "../../..";
+import { ElbeActionProps } from "../base/box";
 import { type IconChild } from "./icon_button";
-export declare function ToggleButton({ value, onChange, label, icon, kind, ...elbe }: {
+export declare function ToggleButton({ value, onChange, label, icon, kind, ...elbe }: ElbeActionProps & {
     value: boolean;
     onChange?: (v: boolean) => void;
-    kind?: ElbeColorKinds;
+    kind?: ColorSelection.Kinds;
     label: string;
     icon?: IconChild;
-} & ActionElbeProps): import("react/jsx-runtime").JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/button/toggle_button.js

@@ -11,20 +11,26 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CheckIcon } from "lucide-react";
-import { useThemeConfig } from "../../theme/theme_context";
+import { Row, Text } from "../../..";
+import { useApp } from "../../app/app_ctxt";
 import { applyProps } from "../base/box";
-import { Padded } from "../base/padded";
 import { Spaced } from "../layout/spaced";
 import { Button } from "./button";
 import { Icon } from "./icon_button";
 export function ToggleButton(_a) {
     var _b;
     var { value, onChange, label, icon, kind } = _a, elbe = __rest(_a, ["value", "onChange", "label", "icon", "kind"]);
-    const tConfig = useThemeConfig();
-    return (_jsxs(Button, Object.assign({ manner: value ? "major" : "flat", kind: kind, onTap: onChange && (() => onChange(!value)), ariaLabel: (_b = elbe.ariaLabel) !== null && _b !== void 0 ? _b : label }, applyProps("toggle_button", elbe, "main-between"), { children: [_jsxs("div", { className: "row gap-none", children: [_jsx(Icon, { icon: icon }), icon && _jsx(Spaced, { width: 0.5 }), label && _jsx("span", { children: label })] }), _jsx("div", { style: {
-                    transition: tConfig.reducedMotion
+    const { _appThemeContext } = useApp();
+    const { theme } = _appThemeContext.useTheme();
+    return (_jsxs(Button, Object.assign({ manner: value ? "major" : "flat", kind: kind, tooltip: elbe.tooltip, onTap: onChange && (() => onChange(!value)), ariaLabel: (_b = elbe.ariaLabel) !== null && _b !== void 0 ? _b : label, contentAlign: "space-between" }, applyProps("toggle_button", elbe, [], {
+        overflow: "hidden",
+    }), { children: [_jsxs(Row, { gap: 0, children: [_jsx(Icon, { icon: icon }), icon && _jsx(Spaced, { width: 0.5 }), label && _jsx(Text, { bold: true, v: label })] }), _jsx("div", { style: {
+                    transition: theme.motion.reduced
                         ? undefined
                         : "width 0.2s ease-in-out",
-                    width: value ? "2.5rem" : "0rem",
-                }, children: value && (_jsx(Padded, { className: "centered", left: 1, children: _jsx(CheckIcon, {}) })) })] })));
+                    width: value ? "2rem" : "0rem",
+                    display: "flex",
+                    alignItems: "center",
+                    overflow: "hidden",
+                }, children: value && (_jsx(CheckIcon, { style: { marginLeft: ".5rem", minWidth: ".5rem" } })) })] })));
 }

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

@@ -0,0 +1,13 @@
+import { ColorSelection, ElbeThemeComputed, ElbeThemeData } from "../../..";
+import type { ElbeChildren } from "../../util/types";
+export declare function elevatedBackdropStyle(open: boolean, theme?: ElbeThemeComputed<ElbeThemeData>, openMergeStyle?: React.CSSProperties): React.CSSProperties;
+export type ElbeDialogProps = {
+    title: string;
+    open: boolean;
+    onClose: () => void;
+    kind?: ColorSelection.KindsAlert;
+    dismissible?: "none" | "button" | "barrier";
+    maxWidth?: number;
+    children?: ElbeChildren;
+};
+export declare function Dialog({ dismissible, ...p }: ElbeDialogProps): import("react").ReactPortal | null;

package/dist/ui/components/dialog/dialog.js

@@ -0,0 +1,69 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { X } from "lucide-react";
+import { useEffect, useMemo } from "react";
+import ReactDOM from "react-dom";
+import { Card, KindAlertIcon, } from "../../..";
+import { useApp } from "../../app/app_ctxt";
+import { getRootElement } from "../../util/root";
+import { IconButton } from "../button/icon_button";
+import { Column, Row } from "../layout/flex";
+import { Text } from "../text";
+export function elevatedBackdropStyle(open, theme, openMergeStyle) {
+    return Object.assign({ transition: (theme === null || theme === void 0 ? void 0 : theme.motion.reduced)
+            ? undefined
+            : "background-color 200ms ease-in-out, backdrop-filter 200ms ease-in-out", backgroundColor: open
+            ? theme === null || theme === void 0 ? void 0 : theme.color.currentColor.front.withAlpha(0.3).hex()
+            : "transparent", backdropFilter: open ? "blur(2px)" : "none" }, ((open && openMergeStyle) || {}));
+}
+export function Dialog(_a) {
+    var { dismissible = "button" } = _a, p = __rest(_a, ["dismissible"]);
+    const { _appThemeContext } = useApp();
+    const theme = _appThemeContext.useTheme().useWith((c) => ({
+        color: Object.assign(Object.assign({}, c.color), { selection: Object.assign(Object.assign({}, c.color.selection), { scheme: "primary", kind: "accent", manner: "plain", state: "neutral" }) }),
+    }), []);
+    const rootDOM = useMemo(() => getRootElement("elbe_dialog"), []);
+    useEffect(() => {
+        if (p.open) {
+            document.body.style.overflow = "hidden";
+        }
+        else {
+            document.body.style.overflow = "";
+        }
+        return () => {
+            document.body.style.overflow = "";
+        };
+    }, [p.open]);
+    if (!p.open)
+        return null;
+    return ReactDOM.createPortal(_jsx(_appThemeContext.WithTheme, { theme: theme, children: _jsxs("div", { style: Object.assign({ position: "fixed", left: 0, top: 0, width: "100%", height: "100%", display: "flex", alignItems: "center", justifyContent: "center" }, elevatedBackdropStyle(p.open, theme.theme)), className: "elbe_dialog-base", onClick: (e) => {
+                e.stopPropagation();
+                e.preventDefault();
+                if (dismissible === "barrier")
+                    p.onClose();
+            }, children: [_jsx("dialog", { open: p.open, style: {
+                        position: "static",
+                        display: "flex",
+                        border: "none",
+                        background: "transparent",
+                        margin: 0,
+                        padding: 0,
+                    }, children: _jsxs(Card, { padding: 0.25, bordered: true, elevated: true, kind: p.kind, style: {
+                            maxWidth: p.maxWidth ? `min(${p.maxWidth}rem, 90vw)` : "90%",
+                            minWidth: "min(17rem, 90vw)",
+                        }, children: [_jsxs(Row, { cross: "center", gap: 1, style: { marginLeft: "1rem" }, children: [p.kind && _jsx(KindAlertIcon, { kind: p.kind }), _jsx(Text.h4, { v: p.title, flex: true, style: { marginRight: "1rem" } }), ["button", "barrier"].includes(dismissible) && (_jsx(IconButton.plain, { ariaLabel: "Close", icon: X, onTap: (e) => {
+                                            e.stopPropagation();
+                                            e.preventDefault();
+                                            p.onClose();
+                                        } }))] }), _jsx(Column, { style: { padding: "1rem" }, children: p.children })] }) }), ","] }) }), rootDOM);
+}

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

@@ -0,0 +1,34 @@
+import { ColorSelection, ElbeChildren } from "../../..";
+declare const _dialogs: {
+    showConfirmDialog: DialogsConfig<{
+        message: string;
+        labelYes?: string;
+        labelNo?: string;
+        highlight?: "yes" | "no" | "none";
+    }, boolean>;
+    showAlertDialog: DialogsConfig<{
+        message: string;
+        labelOkay?: string;
+    }, null>;
+};
+type AllDialogParams = {
+    title: string;
+    dismissible?: "none" | "button" | "barrier";
+    maxWidth?: number;
+    kind?: ColorSelection.KindsAlert;
+};
+export type DialogsConfig<I extends Dict<any>, O> = {
+    onClose: (value: O | null) => O;
+    children: (p: AllDialogParams & I, close: (t: O | null) => void) => ElbeChildren;
+};
+type _DialogsType<T extends DialogsConfig<any, any>> = (p: AllDialogParams & (T extends DialogsConfig<infer I, any> ? I : never)) => Promise<ReturnType<T["onClose"]>>;
+export type DialogsCtrl = {
+    [K in keyof typeof _dialogs]: _DialogsType<(typeof _dialogs)[K]>;
+} & {
+    showDialog: <I extends AllDialogParams & Dict<any>, O>(config: DialogsConfig<I, O>, params: I) => Promise<O>;
+};
+export declare function useDialogs(): DialogsCtrl;
+export declare function DialogsProvider(p: {
+    children: ElbeChildren;
+}): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/ui/components/dialog/dialog_ctx.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// ToastContext.js
+import { createContext, useContext, useMemo, useState } from "react";
+import ReactDOM from "react-dom";
+import { Dialog, dictMap, getRootElement, } from "../../..";
+import { showAlertDialog } from "./dialogs/_alert";
+import { showConfirmDialog } from "./dialogs/_confirm";
+const _dialogs = {
+    showConfirmDialog,
+    showAlertDialog,
+};
+const _DialogsContext = createContext(null);
+export function useDialogs() {
+    return useContext(_DialogsContext);
+}
+export function DialogsProvider(p) {
+    const rootDOM = useMemo(() => getRootElement("elbe_dialog"), []);
+    const [dialogs, setDialogs] = useState([]);
+    function showDialog(dialog, params) {
+        return new Promise((resolve) => {
+            const id = Date.now() + "";
+            setDialogs([
+                ...dialogs,
+                {
+                    id,
+                    params,
+                    config: dialog,
+                    onClose: (p) => resolve(dialog.onClose(p)),
+                },
+            ]);
+        });
+    }
+    function _closeDialog(id, value) {
+        const dialog = dialogs.find((d) => d.id === id);
+        setDialogs((d) => d.filter((dialog) => dialog.id !== id));
+        if (dialog)
+            dialog.onClose(value);
+    }
+    const provVal = useMemo(() => dictMap(_dialogs, (config) => (p) => showDialog(config, p)), [dialogs]);
+    return (_jsxs(_DialogsContext.Provider, { value: Object.assign(Object.assign({}, provVal), { showDialog }), children: [p.children, ReactDOM.createPortal(_jsx("div", { children: dialogs.map((dialog) => {
+                    var _a, _b;
+                    return (_jsx(Dialog, { title: dialog.params.title, open: true, dismissible: (_a = dialog.params.dismissible) !== null && _a !== void 0 ? _a : "button", maxWidth: (_b = dialog.params.maxWidth) !== null && _b !== void 0 ? _b : undefined, onClose: () => _closeDialog(dialog.id, null), kind: dialog.params.kind, children: dialog.config.children(dialog.params, (value) => _closeDialog(dialog.id, value)) }, dialog.id));
+                }) }), rootDOM)] }));
+}

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

@@ -0,0 +1,7 @@
+import { DialogsConfig } from "../../../..";
+type _Params = {
+    message: string;
+    labelOkay?: string;
+};
+export declare const showAlertDialog: DialogsConfig<_Params, null>;
+export {};

package/dist/ui/components/dialog/dialogs/_alert.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Column, Row, Text } from "../../../..";
+export const showAlertDialog = {
+    onClose: () => null,
+    children: (p, close) => {
+        var _a;
+        return (_jsxs(Column, { gap: 2, children: [_jsx(Text, { v: p.message }), _jsx(Row, { children: _jsx(Button.major, { flex: true, ariaLabel: "close dialog", label: (_a = p.labelOkay) !== null && _a !== void 0 ? _a : "Yes", onTap: () => close(null) }) })] }));
+    },
+};

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

@@ -0,0 +1,9 @@
+import { DialogsConfig } from "../../../..";
+type _Params = {
+    message: string;
+    labelYes?: string;
+    labelNo?: string;
+    highlight?: "yes" | "no" | "none";
+};
+export declare const showConfirmDialog: DialogsConfig<_Params, boolean>;
+export {};

package/dist/ui/components/dialog/dialogs/_confirm.js

@@ -0,0 +1,21 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Column, Row, Text } from "../../../..";
+export const showConfirmDialog = {
+    onClose: (value) => value !== null && value !== void 0 ? value : false,
+    children: (_a, close) => {
+        var _b, _c;
+        var { highlight = "no" } = _a, p = __rest(_a, ["highlight"]);
+        return (_jsxs(Column, { gap: 2, children: [_jsx(Text, { v: p.message }), _jsxs(Row, { children: [_jsx(Button, { flex: true, ariaLabel: "select no", manner: highlight === "no" ? "major" : "minor", label: (_b = p.labelNo) !== null && _b !== void 0 ? _b : "No", onTap: () => close(false) }), _jsx(Button, { flex: true, ariaLabel: "select yes", manner: highlight === "yes" ? "major" : "minor", label: (_c = p.labelYes) !== null && _c !== void 0 ? _c : "Yes", onTap: () => close(true) })] })] }));
+    },
+};

package/dist/ui/components/error_view.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { icons } from "lucide-react";
 import { useState } from "react";
-import { ElbeDialog, Icon, Icons, toElbeError, Wouter, } from "../..";
+import { Card, Column, Dialog, Icon, Icons, toElbeError, Wouter, } from "../..";
 import { _maybeL10n } from "../util/l10n/_l10n_util";
 export function ErrorView({ error, retry, debug, }) {
     var _a;
@@ -10,7 +10,7 @@ export function ErrorView({ error, retry, debug, }) {
     const fallback = typeof apiError.message === "string"
         ? apiError.message
         : "An error occurred";
-    return !debug ? (_jsx(PrettyErrorView, { error: apiError, retry: retry })) : (_jsxs("div", { className: "column padded card inverse cross-stretch", children: [_jsxs("h3", { style: { margin: 0 }, children: ["ERROR: ", apiError.code] }), _jsx("p", { children: (_a = l10n === null || l10n === void 0 ? void 0 : l10n.inline(apiError.message)) !== null && _a !== void 0 ? _a : fallback }), _jsx("pre", { children: JSON.stringify(apiError, null, 2) })] }));
+    return !debug ? (_jsx(PrettyErrorView, { error: apiError, retry: retry })) : (_jsx(Card, { scheme: "inverse", children: _jsxs(Column, { children: [_jsxs("h3", { style: { margin: 0 }, children: ["ERROR: ", apiError.code] }), _jsx("p", { children: (_a = l10n === null || l10n === void 0 ? void 0 : l10n.inline(apiError.message)) !== null && _a !== void 0 ? _a : fallback }), _jsx("pre", { children: JSON.stringify(apiError, null, 2) })] }) }));
 }
 export function PrettyErrorView({ error, retry, labels = {
     retry: {
@@ -42,5 +42,5 @@ export function PrettyErrorView({ error, retry, labels = {
     const l10n = _maybeL10n();
     const [open, setOpen] = useState(false);
     const [loc, navigate] = Wouter.useLocation();
-    return (_jsxs("div", { className: "column padded cross-center", style: { margin: "1rem 0" }, children: [_jsx(Icon, { icon: (_a = error.icon) !== null && _a !== void 0 ? _a : icons.OctagonAlert }), _jsx("h4", { style: { margin: 0 }, children: (_b = l10n === null || l10n === void 0 ? void 0 : l10n.inline(error.message)) !== null && _b !== void 0 ? _b : "error" }), _jsx("span", { className: "pointer", onClick: () => setOpen(true), children: (_c = l10n === null || l10n === void 0 ? void 0 : l10n.inline(error.description)) !== null && _c !== void 0 ? _c : "" }), retry && (_jsxs("button", { className: "action", onClick: () => retry(), children: [_jsx(Icons.RotateCcw, {}), " ", (_d = l10n === null || l10n === void 0 ? void 0 : l10n.inline(labels.retry)) !== null && _d !== void 0 ? _d : "retry"] })), error.code === 404 && (_jsxs("button", { className: "action", onClick: () => navigate("/", { replace: true }), children: [_jsx(Icons.House, {}), (_e = l10n === null || l10n === void 0 ? void 0 : l10n.inline(labels.home)) !== null && _e !== void 0 ? _e : "go home"] })), _jsx(ElbeDialog, { title: (_f = l10n === null || l10n === void 0 ? void 0 : l10n.inline(labels.details)) !== null && _f !== void 0 ? _f : "error details", open: open, onClose: () => setOpen(false), children: _jsx("pre", { className: "card inverse", children: `code: ${error.code}\n\n` + JSON.stringify(error.details, null, 2) }) })] }));
+    return (_jsxs(Column, { cross: "center", style: { margin: "1rem 0", padding: "1rem" }, children: [_jsx(Icon, { icon: (_a = error.icon) !== null && _a !== void 0 ? _a : icons.OctagonAlert }), _jsx("h4", { style: { margin: 0 }, children: (_b = l10n === null || l10n === void 0 ? void 0 : l10n.inline(error.message)) !== null && _b !== void 0 ? _b : "error" }), _jsx("span", { className: "pointer", onClick: () => setOpen(true), children: (_c = l10n === null || l10n === void 0 ? void 0 : l10n.inline(error.description)) !== null && _c !== void 0 ? _c : "" }), retry && (_jsxs("button", { className: "action", onClick: () => retry(), children: [_jsx(Icons.RotateCcw, {}), " ", (_d = l10n === null || l10n === void 0 ? void 0 : l10n.inline(labels.retry)) !== null && _d !== void 0 ? _d : "retry"] })), error.code === 404 && (_jsxs("button", { className: "action", onClick: () => navigate("/", { replace: true }), children: [_jsx(Icons.House, {}), (_e = l10n === null || l10n === void 0 ? void 0 : l10n.inline(labels.home)) !== null && _e !== void 0 ? _e : "go home"] })), _jsx(Dialog, { title: (_f = l10n === null || l10n === void 0 ? void 0 : l10n.inline(labels.details)) !== null && _f !== void 0 ? _f : "error details", open: open, onClose: () => setOpen(false), children: _jsx("pre", { className: "card inverse", children: `code: ${error.code}\n\n` + JSON.stringify(error.details, null, 2) }) })] }));
 }

package/dist/ui/components/footer.js

@@ -1,17 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { HeartIcon } from "lucide-react";
-import { Card, Column, FlexSpace, Link, Row, useLayoutMode, } from "../..";
+import { Card, Column, FlexSpace, Link, Row, Text, useLayoutMode, } from "../..";
 export function Footer({ left, right, copyright, version, legal, marginTop, }) {
     const layoutMode = useLayoutMode();
     return (_jsx(Card, { scheme: "secondary", sharp: true, role: "contentinfo", ariaLabel: "footer", style: {
-            borderLeft: "none",
-            borderRight: "none",
-            borderBottom: "none",
+            borderLeftStyle: "none",
+            borderRightStyle: "none",
+            borderBottomStyle: "none",
             borderTopLeftRadius: layoutMode.isWide ? "var(--g-radius)" : undefined,
             color: "color-mix(in srgb, var(--c-context-front) 60%, transparent)",
             marginTop: `${marginTop !== null && marginTop !== void 0 ? marginTop : 0}rem`,
-        }, children: _jsxs(Column, { gap: 0.5, children: [(left || right) && (_jsxs(Row, { main: "space-between", cross: "start", children: [left && (_jsx(Column, { gap: 0.5, flex: 1, cross: "start", children: left.map((item, i) => item.label ? _jsx(_Link, Object.assign({}, item), i) : item) })), right && (_jsx(Column, { gap: 0.5, flex: 1, cross: "end", children: right.map((item, i) => item.label ? _jsx(_Link, Object.assign({}, item), i) : item) }))] })), (left || right) && (copyright || version || legal) && (_jsx("hr", { style: { opacity: 0.7 } })), (copyright || version || legal) && (_jsxs(Row, { children: [copyright &&
-                            (typeof copyright === "string" ? _jsx("b", { children: copyright }) : copyright), version && _jsx(_Version, { version: version }), _jsx(FlexSpace, {}), legal && _jsx(_Link, Object.assign({}, legal))] }))] }) }));
+        }, children: _jsxs(Column, { gap: 1, children: [(left || right) && (_jsxs(Row, { main: "space-between", cross: "start", children: [left && (_jsx(Column, { gap: 0.5, flex: 1, cross: "start", children: left.map((item, i) => item.label ? _jsx(_Link, Object.assign({}, item), i) : item) })), right && (_jsx(Column, { gap: 0.5, flex: 1, cross: "end", children: right.map((item, i) => item.label ? _jsx(_Link, Object.assign({}, item), i) : item) }))] })), (left || right) && (copyright || version || legal) && _jsx("hr", {}), (copyright || version || legal) && (_jsxs(Row, { children: [copyright &&
+                            (typeof copyright === "string" ? (_jsx(Text, { bold: true, v: copyright })) : (copyright)), version && _jsx(_Version, { version: version }), _jsx(FlexSpace, {}), legal && _jsx(_Link, Object.assign({}, legal))] }))] }) }));
 }
 function _Version({ version }) {
     return (_jsx("pre", { style: {
@@ -21,7 +21,7 @@ function _Version({ version }) {
         }, children: version }));
 }
 function _Link({ href, label }) {
-    return (_jsx(Link, { color: "inherit", plain: true, noIcon: true, href: href, label: label, external: true }));
+    return (_jsx(Link, { color: "inherit", manner: "plain", noIcon: true, href: href, label: label, external: true }));
 }
 export function _WrittenIn({ city = "Hamburg", href, }) {
     return (_jsxs("a", { href: href, style: {