elbe-ui 0.2.41 → 0.2.46

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

@@ -1,31 +1,41 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.IconButton = void 0;
-const jsx_runtime_1 = require("preact/jsx-runtime");
-const preact_1 = require("preact");
-const __1 = require("../../..");
-class IconButton extends preact_1.Component {
-    static major = (p) => _btn(p, "major");
-    static minor = (p) => _btn(p, "minor");
-    static flat = (p) => _btn(p, "flat");
-    static plain = (p) => _btn(p, "plain");
+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 } from "preact/jsx-runtime";
+import { Component } from "preact";
+import { applyProps, } from "../../..";
+export class IconButton extends Component {
     render() {
         return _btn(this.props, this.props.manner);
     }
 }
-exports.IconButton = IconButton;
-function _btn({ icon, onTap, ...elbe }, manner = "major") {
-    return ((0, jsx_runtime_1.jsx)("button", { ...(0, __1.applyProps)(elbe, [
-            "row",
-            "main-center",
-            "gap-half",
-            elbe.kind ?? (manner != "plain" && "accent"),
-            manner,
-            !onTap && "disabled",
-        ], {
-            border: "none",
-            borderRadius: "3rem",
-            height: "3rem",
-            width: "3rem",
-        }), onClick: (e) => onTap && onTap(e), children: typeof icon === "function" ? icon({}) : icon }));
+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;
+    var { icon, onTap } = _a, elbe = __rest(_a, ["icon", "onTap"]);
+    if (manner === void 0) { manner = "major"; }
+    return (_jsx("button", Object.assign({}, applyProps(elbe, [
+        "row",
+        "main-center",
+        "gap-half",
+        (_b = elbe.kind) !== null && _b !== void 0 ? _b : (manner != "plain" && "accent"),
+        manner,
+        !onTap && "disabled",
+    ], {
+        border: "none",
+        borderRadius: "3rem",
+        height: "3rem",
+        width: "3rem",
+    }), { onClick: (e) => onTap && onTap(e), children: typeof icon === "function" ? icon({}) : icon })));
 }

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

@@ -1,11 +1,20 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ToggleButton = ToggleButton;
-const jsx_runtime_1 = require("preact/jsx-runtime");
-const lucide_react_1 = require("lucide-react");
-const box_1 = require("../base/box");
-const spaced_1 = require("../layout/spaced");
-const button_1 = require("./button");
-function ToggleButton({ value, onChange, label, icon, kind, ...elbe }) {
-    return ((0, jsx_runtime_1.jsxs)(button_1.Button, { manner: value ? "minor" : "flat", kind: kind, onTap: onChange && (() => onChange(!value)), ...(0, box_1.applyProps)(elbe, "main-between", { gap: "1.5rem" }), children: [(0, jsx_runtime_1.jsxs)("div", { class: "row gap-half", children: [typeof icon === "function" ? icon({}) : icon, label && (0, jsx_runtime_1.jsx)("span", { children: label })] }), value ? (0, jsx_runtime_1.jsx)(lucide_react_1.CheckIcon, {}) : (0, jsx_runtime_1.jsx)(spaced_1.Spaced, { amount: 1.5 })] }));
+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 "preact/jsx-runtime";
+import { CheckIcon } from "lucide-react";
+import { applyProps } from "../base/box";
+import { Spaced } from "../layout/spaced";
+import { Button } from "./button";
+export function ToggleButton(_a) {
+    var { value, onChange, label, icon, kind } = _a, elbe = __rest(_a, ["value", "onChange", "label", "icon", "kind"]);
+    return (_jsxs(Button, Object.assign({ manner: value ? "minor" : "flat", kind: kind, onTap: onChange && (() => onChange(!value)) }, applyProps(elbe, "main-between", { gap: "1.5rem" }), { children: [_jsxs("div", { class: "row gap-half", children: [typeof icon === "function" ? icon({}) : icon, label && _jsx("span", { children: label })] }), value ? _jsx(CheckIcon, {}) : _jsx(Spaced, { amount: 1.5 })] })));
 }

package/dist/ui/components/dev/todo.d.ts

@@ -0,0 +1,18 @@
+import { ElbeProps } from "../base/box";
+export declare namespace ToDo {
+    function Overlay({}: {}): import("preact").JSX.Element | null;
+    function Inline({ msg, ...elbe }: {
+        msg: string;
+        width?: number;
+        height?: number;
+    } & ElbeProps): import("preact").JSX.Element;
+    function Block({ msg, width, height, ...elbe }: {
+        msg: string;
+        width?: number;
+        height?: number;
+    } & ElbeProps): import("preact").JSX.Element;
+    function Placeholder({ width, height, ...elbe }: {
+        width?: number;
+        height?: number;
+    } & ElbeProps): import("preact").JSX.Element;
+}

package/dist/ui/components/dev/todo.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 "preact/jsx-runtime";
+import { XIcon } from "lucide-react";
+import { useEffect, useState } from "preact/hooks";
+import { applyProps } from "../base/box";
+const _toDoStyle = {
+    padding: ".3rem .5rem",
+    borderRadius: ".3rem",
+    background: "#880070",
+    color: "white",
+    fontSize: ".8rem",
+};
+export var ToDo;
+(function (ToDo) {
+    function Overlay({}) {
+        const [todos, setTodos] = useState(0);
+        useEffect(() => {
+            const e = document.querySelectorAll('[data-type="todo"], [data-type="placeholder"]');
+            setTodos(e.length);
+        }, []);
+        return todos == 0 ? null : (_jsxs("div", { ["data-type"]: "todo-overlay", style: {
+                position: "fixed",
+                bottom: "0",
+                right: "0",
+                padding: ".6rem",
+                margin: ".5rem",
+                marginRight: 0,
+                background: _toDoStyle.background,
+                color: _toDoStyle.color,
+                boxShadow: "0 .125rem 1rem rgba(0,0,0,.6)",
+                fontSize: ".8rem",
+                borderRadius: ".5rem 0 0 .5rem",
+                display: "flex",
+                alignItems: "center",
+                gap: ".4rem",
+            }, children: [_jsx(XIcon, { height: "1.2rem", onClick: () => setTodos(0) }), _jsxs("span", { children: [_jsxs("b", { children: [todos, " ToDos"] }), " on this page"] })] }));
+    }
+    ToDo.Overlay = Overlay;
+    function Inline(_a) {
+        var { msg } = _a, elbe = __rest(_a, ["msg"]);
+        return (_jsxs("div", Object.assign({}, applyProps(Object.assign(Object.assign({}, elbe), { typeLabel: "todo" }), [], Object.assign(Object.assign({}, _toDoStyle), { display: "inline" })), { children: [_jsx("b", { children: "ToDo: " }), _jsx("span", { style: { fontWeight: "normal" }, children: msg })] })));
+    }
+    ToDo.Inline = Inline;
+    function Block(_a) {
+        var { msg, width, height } = _a, elbe = __rest(_a, ["msg", "width", "height"]);
+        return (_jsx("div", Object.assign({}, applyProps(Object.assign(Object.assign({}, elbe), { typeLabel: "todo" }), [], Object.assign(Object.assign({}, _toDoStyle), { display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", width: width ? width + "rem" : "auto", height: height ? height + "rem" : "auto", overflow: "hidden" })), { children: _jsxs("span", { children: [_jsx("b", { children: "ToDo: " }), _jsx("span", { style: { fontWeight: "normal" }, children: msg })] }) })));
+    }
+    ToDo.Block = Block;
+    function Placeholder(_a) {
+        var { width, height } = _a, elbe = __rest(_a, ["width", "height"]);
+        return (_jsx("div", Object.assign({}, applyProps(Object.assign(Object.assign({}, elbe), { typeLabel: "placeholder" }), [], {
+            padding: "0",
+            width: width ? width + "rem" : "auto",
+            height: height ? height + "rem" : "auto",
+            overflow: "hidden",
+        }), { children: _jsxs("svg", { width: width ? width + "rem" : "100%", height: height ? height + "rem" : "100%", preserveAspectRatio: "none", children: [_jsx("rect", { x: "0", y: "0", width: "100%", height: "100%", fill: "transparent", stroke: _toDoStyle.background, strokeWidth: ".25rem" }), _jsx("line", { x1: "0", y1: "0", x2: "100%", y2: "100%", stroke: _toDoStyle.background, strokeWidth: ".125rem" }), _jsx("line", { x1: "100%", y1: "0", x2: "0", y2: "100%", stroke: _toDoStyle.background, strokeWidth: ".125rem" })] }) })));
+    }
+    ToDo.Placeholder = Placeholder;
+})(ToDo || (ToDo = {}));

package/dist/ui/components/dialog.js

@@ -1,14 +1,11 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ElbeDialog = ElbeDialog;
-const jsx_runtime_1 = require("preact/jsx-runtime");
-const lucide_react_1 = require("lucide-react");
-const icon_button_1 = require("./button/icon_button");
-const spaced_1 = require("./layout/spaced");
-function ElbeDialog({ title, open, onClose, children, _style, }) {
-    return ((0, jsx_runtime_1.jsx)("dialog", { onClick: (e) => e.stopPropagation(), open: open, style: "text-align: start" + (_style ?? ""), children: (0, jsx_runtime_1.jsxs)("div", { class: "primary card plain-opaque padding-none", style: "max-width: 40rem; min-width: 10rem", children: [(0, jsx_runtime_1.jsxs)("div", { class: "row cross-center padded main-between", children: [(0, jsx_runtime_1.jsx)("div", { class: "body-l b", children: title }), (0, jsx_runtime_1.jsx)(icon_button_1.IconButton.plain, { icon: lucide_react_1.X, onTap: (e) => {
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+import { X } from "lucide-react";
+import { IconButton } from "./button/icon_button";
+import { Spaced } from "./layout/spaced";
+export function ElbeDialog({ title, open, onClose, children, _style, }) {
+    return (_jsx("dialog", { onClick: (e) => e.stopPropagation(), open: open, style: "text-align: start" + (_style !== null && _style !== void 0 ? _style : ""), children: _jsxs("div", { class: "primary card plain-opaque padding-none", style: "max-width: 40rem; min-width: 10rem", children: [_jsxs("div", { class: "row cross-center padded main-between", children: [_jsx("div", { class: "body-l b", children: title }), _jsx(IconButton.plain, { icon: X, onTap: (e) => {
                                 e.stopPropagation();
                                 e.preventDefault();
                                 onClose();
-                            } })] }), (0, jsx_runtime_1.jsx)(spaced_1.Spaced, { amount: 0.5 }), (0, jsx_runtime_1.jsx)("div", { class: "padded", style: "max-height: 80vh; overflow: auto", children: children })] }) }));
+                            } })] }), _jsx(Spaced, { amount: 0.5 }), _jsx("div", { class: "padded", style: "max-height: 80vh; overflow: auto", children: children })] }) }));
 }

package/dist/ui/components/error_view.js

@@ -1,26 +1,24 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ErrorView = ErrorView;
-exports.PrettyErrorView = PrettyErrorView;
-const jsx_runtime_1 = require("preact/jsx-runtime");
-const signals_1 = require("@preact/signals");
-const preact_router_1 = require("preact-router");
-const __1 = require("../..");
-const s_api_1 = require("../../service/s_api");
-const dialog_1 = require("./dialog");
-function ErrorView({ error, retry, debug, }) {
-    const apiError = (0, s_api_1.ifApiError)(error) ?? {
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+import { useSignal } from "@preact/signals";
+import { route } from "preact-router";
+import { Icons } from "../..";
+import { ifApiError } from "../../service/s_api";
+import { ElbeDialog } from "./dialog";
+export function ErrorView({ error, retry, debug, }) {
+    var _a;
+    const apiError = (_a = ifApiError(error)) !== null && _a !== void 0 ? _a : {
         code: 0,
         message: "unknown error",
         data: error,
     };
-    return !debug ? ((0, jsx_runtime_1.jsx)(PrettyErrorView, { apiError: apiError, retry: retry })) : ((0, jsx_runtime_1.jsxs)("div", { class: "column padded card inverse cross-stretch", children: [(0, jsx_runtime_1.jsxs)("h3", { style: "margin: 0", children: ["ERROR: ", apiError.code] }), (0, jsx_runtime_1.jsx)("p", { children: apiError.message }), (0, jsx_runtime_1.jsx)("pre", { children: JSON.stringify(apiError.data, null, 2) })] }));
+    return !debug ? (_jsx(PrettyErrorView, { apiError: apiError, retry: retry })) : (_jsxs("div", { class: "column padded card inverse cross-stretch", children: [_jsxs("h3", { style: "margin: 0", children: ["ERROR: ", apiError.code] }), _jsx("p", { children: apiError.message }), _jsx("pre", { children: JSON.stringify(apiError.data, null, 2) })] }));
 }
-function PrettyErrorView({ apiError, retry, labels = {
+export function PrettyErrorView({ apiError, retry, labels = {
     retry: "retry",
     home: "go home",
     details: "error details",
 }, }) {
-    const openSig = (0, signals_1.useSignal)(false);
-    return ((0, jsx_runtime_1.jsxs)("div", { class: "column padded cross-center", style: "margin: 1rem 0", children: [(0, jsx_runtime_1.jsx)(__1.Icons.OctagonAlert, {}), (0, jsx_runtime_1.jsx)("h3", { style: "margin: 0", children: apiError.code }), (0, jsx_runtime_1.jsx)("span", { class: "pointer", onClick: () => (openSig.value = true), children: apiError.message }), retry && ((0, jsx_runtime_1.jsxs)("button", { class: "action", onClick: () => retry(), children: [(0, jsx_runtime_1.jsx)(__1.Icons.RotateCcw, {}), " ", labels.retry ?? "retry"] })), apiError.code === 404 && ((0, jsx_runtime_1.jsxs)("button", { class: "action", onClick: () => (0, preact_router_1.route)("/"), children: [(0, jsx_runtime_1.jsx)(__1.Icons.House, {}), labels.home ?? "go home"] })), (0, jsx_runtime_1.jsx)(dialog_1.ElbeDialog, { title: labels.details ?? "error details", open: openSig.value, onClose: () => (openSig.value = false), children: (0, jsx_runtime_1.jsx)("pre", { class: "card inverse", children: JSON.stringify(apiError.data, null, 2) }) })] }));
+    var _a, _b, _c;
+    const openSig = useSignal(false);
+    return (_jsxs("div", { class: "column padded cross-center", style: "margin: 1rem 0", children: [_jsx(Icons.OctagonAlert, {}), _jsx("h3", { style: "margin: 0", children: apiError.code }), _jsx("span", { class: "pointer", onClick: () => (openSig.value = true), children: apiError.message }), retry && (_jsxs("button", { class: "action", onClick: () => retry(), children: [_jsx(Icons.RotateCcw, {}), " ", (_a = labels.retry) !== null && _a !== void 0 ? _a : "retry"] })), apiError.code === 404 && (_jsxs("button", { class: "action", onClick: () => route("/"), children: [_jsx(Icons.House, {}), (_b = labels.home) !== null && _b !== void 0 ? _b : "go home"] })), _jsx(ElbeDialog, { title: (_c = labels.details) !== null && _c !== void 0 ? _c : "error details", open: openSig.value, onClose: () => (openSig.value = false), children: _jsx("pre", { class: "card inverse", children: JSON.stringify(apiError.data, null, 2) }) })] }));
 }

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

@@ -1,12 +1,21 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Checkbox = Checkbox;
-const jsx_runtime_1 = require("preact/jsx-runtime");
-const box_1 = require("../base/box");
-function Checkbox({ value, label, onChange, ...elbe }) {
-    return ((0, jsx_runtime_1.jsxs)("div", { class: `row ${onChange ? "" : "disabled"}`, style: {
+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 "preact/jsx-runtime";
+import { applyProps } from "../base/box";
+export function Checkbox(_a) {
+    var { value, label, onChange } = _a, elbe = __rest(_a, ["value", "label", "onChange"]);
+    return (_jsxs("div", { class: `row ${onChange ? "" : "disabled"}`, style: {
             gap: ".75rem",
             filter: onChange ? "" : "grayscale(1)",
             opacity: onChange ? "" : "0.5",
-        }, children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", ...(0, box_1.applyProps)(elbe), disabled: !onChange, checked: value, onChange: (e) => onChange?.(e.currentTarget.checked) }), label && (0, jsx_runtime_1.jsx)("div", { style: "margin-top: -.25rem", children: label })] }));
+        }, children: [_jsx("input", Object.assign({ type: "checkbox" }, applyProps(elbe), { disabled: !onChange, checked: value, onChange: (e) => onChange === null || onChange === void 0 ? void 0 : onChange(e.currentTarget.checked) })), label && _jsx("div", { style: "margin-top: -.25rem", children: label })] }));
 }

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

@@ -1,31 +1,36 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+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;
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Field = void 0;
-const jsx_runtime_1 = require("preact/jsx-runtime");
-const compat_1 = __importDefault(require("preact/compat"));
-const box_1 = require("../base/box");
-const text_area_1 = require("./text_area");
-class Field extends compat_1.default.Component {
-    static text = (p) => (0, jsx_runtime_1.jsx)(Field, { ...p, type: "text" });
-    static number = (p) => (0, jsx_runtime_1.jsx)(Field, { ...p, type: "number" });
-    static password = (p) => (0, jsx_runtime_1.jsx)(Field, { ...p, type: "password" });
-    static date = (p) => (0, jsx_runtime_1.jsx)(Field, { ...p, type: "date" });
-    static time = (p) => (0, jsx_runtime_1.jsx)(Field, { ...p, type: "time" });
-    static email = (p) => (0, jsx_runtime_1.jsx)(Field, { ...p, type: "email" });
-    static multiLine = text_area_1._TextArea;
+import { jsx as _jsx } from "preact/jsx-runtime";
+import React from "preact/compat";
+import { applyProps } from "../base/box";
+import { _TextArea } from "./text_area";
+export class Field extends React.Component {
     render() {
-        const { label, hint, readonly, type, value, onInput, ...elbe } = this.props;
-        return ((0, jsx_runtime_1.jsx)("div", { style: {
+        var _a;
+        const _b = this.props, { label, hint, readonly, type, value, onInput } = _b, elbe = __rest(_b, ["label", "hint", "readonly", "type", "value", "onInput"]);
+        return (_jsx("div", { style: {
                 width: "12rem !important",
                 display: "flex",
                 flexDirection: "column",
                 alignItems: "stretch",
-            }, "data-tooltip": this.props?.tooltip, children: (0, jsx_runtime_1.jsx)("input", { type: this.props.type, ...(0, box_1.applyProps)(this.props, null, {
-                    width: "100%",
-                }), size: 5, label: this.props.label, placeholder: this.props.hint, value: this.props.value, onInput: (e) => this.props.onInput && this.props.onInput(e.currentTarget.value), readonly: this.props.readonly }) }));
+            }, "data-tooltip": (_a = this.props) === null || _a === void 0 ? void 0 : _a.tooltip, children: _jsx("input", Object.assign({ type: this.props.type }, applyProps(this.props, null, {
+                width: "100%",
+            }), { size: 5, label: this.props.label, placeholder: this.props.hint, value: this.props.value, onInput: (e) => this.props.onInput && this.props.onInput(e.currentTarget.value), readonly: this.props.readonly })) }));
     }
 }
-exports.Field = Field;
+Field.text = (p) => _jsx(Field, Object.assign({}, p, { type: "text" }));
+Field.number = (p) => _jsx(Field, Object.assign({}, p, { type: "number" }));
+Field.password = (p) => _jsx(Field, Object.assign({}, p, { type: "password" }));
+Field.date = (p) => _jsx(Field, Object.assign({}, p, { type: "date" }));
+Field.time = (p) => _jsx(Field, Object.assign({}, p, { type: "time" }));
+Field.email = (p) => _jsx(Field, Object.assign({}, p, { type: "email" }));
+Field.multiLine = _TextArea;

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

@@ -1,14 +1,31 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Range = Range;
-const jsx_runtime_1 = require("preact/jsx-runtime");
-const error_view_1 = require("../../util/error_view");
-const box_1 = require("../base/box");
-function Range({ value, onChange, min = 0, max = 100, step = 1, ...elbe }) {
-    return min > max ? ((0, error_view_1._ElbeErr)("Range: max is smaller than min")) : ((0, jsx_runtime_1.jsx)("input", { type: "range", ...(0, box_1.applyProps)(elbe, null, {
+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 } from "preact/jsx-runtime";
+import { _ElbeErr } from "../../util/error_view";
+import { applyProps } from "../base/box";
+import { Card } from "../base/card";
+export function Range(_a) {
+    var { value, onChange, min = 0, max = 100, step = 1 } = _a, elbe = __rest(_a, ["value", "onChange", "min", "max", "step"]);
+    return min > max ? (_ElbeErr("Range: max is smaller than min")) : (_jsx(Card, { scheme: "secondary", kind: "accent", manner: "minor", style: {
+            overflow: "unset",
+            backgroundColor: "transparent",
+            padding: "0",
+            margin: "0",
+            border: "none",
+            width: "100%",
+        }, children: _jsx("input", Object.assign({ type: "range" }, applyProps(elbe, null, {
             filter: onChange ? "" : "grayscale(1)",
             opacity: onChange ? "" : "0.5",
             cursor: onChange ? "pointer" : "not-allowed",
             width: "100%",
-        }), min: min, max: max, step: step, disabled: !onChange, value: value, onInput: (e) => onChange?.(Number(e.currentTarget.value)) }));
+        }), { min: min, max: max, step: step, disabled: !onChange, value: value, onInput: (e) => onChange === null || onChange === void 0 ? void 0 : onChange(Number(e.currentTarget.value)) })) }));
 }

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

@@ -1,8 +1,17 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Select = Select;
-const jsx_runtime_1 = require("preact/jsx-runtime");
-const box_1 = require("../base/box");
-function Select({ options, value, label, onChange, ...elbe }) {
-    return ((0, jsx_runtime_1.jsx)("select", { ...(0, box_1.applyProps)(elbe), value: value, label: label, onChange: (e) => onChange(e.currentTarget.value), children: options.map(({ key, label }) => ((0, jsx_runtime_1.jsx)("option", { value: key, children: label }, key))) }));
+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 } from "preact/jsx-runtime";
+import { applyProps } from "../base/box";
+export function Select(_a) {
+    var { options, value, label, onChange } = _a, elbe = __rest(_a, ["options", "value", "label", "onChange"]);
+    return (_jsx("select", Object.assign({}, applyProps(elbe), { value: value, label: label, onChange: (e) => onChange(e.currentTarget.value), children: options.map(({ key, label }) => (_jsx("option", { value: key, children: label }, key))) })));
 }

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

@@ -1,13 +1,22 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports._TextArea = _TextArea;
-const jsx_runtime_1 = require("preact/jsx-runtime");
-const box_1 = require("../base/box");
-function _TextArea({ label, hint, readonly, rows = 4, maxLength, value, onInput, ...elbe }) {
-    return ((0, jsx_runtime_1.jsx)("div", { style: {
+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 } from "preact/jsx-runtime";
+import { applyProps } from "../base/box";
+export function _TextArea(_a) {
+    var { label, hint, readonly, rows = 4, maxLength, value, onInput } = _a, elbe = __rest(_a, ["label", "hint", "readonly", "rows", "maxLength", "value", "onInput"]);
+    return (_jsx("div", { style: {
             width: "12rem !important",
             display: "flex",
             flexDirection: "column",
             alignItems: "stretch",
-        }, "data-tooltip": elbe.tooltip, children: (0, jsx_runtime_1.jsx)("textarea", { ...(0, box_1.applyProps)(elbe, null, { width: "100%" }), label: label, size: 5, cols: 5, placeholder: hint, rows: rows, maxLength: maxLength, value: value, onInput: (e) => onInput && onInput(e.currentTarget.value), readonly: readonly }) }));
+        }, "data-tooltip": elbe.tooltip, children: _jsx("textarea", Object.assign({}, applyProps(elbe, null, { width: "100%" }), { label: label, size: 5, cols: 5, placeholder: hint, rows: rows, maxLength: maxLength, value: value, onInput: (e) => onInput && onInput(e.currentTarget.value), readonly: readonly })) }));
 }

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

@@ -2,10 +2,11 @@ import { type ElbeProps } from "../base/box";
 export type FlexProps = {
     children: any;
     gap?: number;
-    stretch?: boolean;
     main?: "start" | "center" | "end" | "stretch" | "space-between" | "space-around" | "space-evenly";
     cross?: "start" | "center" | "end" | "stretch" | "space-between" | "space-around" | "space-evenly";
 } & ElbeProps;
 export declare function FlexSpace({}: {}): import("preact").JSX.Element;
-export declare function Column({ gap, main, cross, stretch, children, ...p }: FlexProps): import("preact").JSX.Element;
-export declare function Row({ gap, main, cross, stretch, children, ...p }: FlexProps): import("preact").JSX.Element;
+export declare function Column({ gap, main, cross, children, ...p }: FlexProps): import("preact").JSX.Element;
+export declare function Row({ gap, main, cross, wrap, children, ...p }: FlexProps & {
+    wrap?: boolean;
+}): import("preact").JSX.Element;

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

@@ -1,23 +1,31 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FlexSpace = FlexSpace;
-exports.Column = Column;
-exports.Row = Row;
-const jsx_runtime_1 = require("preact/jsx-runtime");
-const box_1 = require("../base/box");
-function FlexSpace({}) {
-    return (0, jsx_runtime_1.jsx)("div", { style: "flex:1" });
+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 } from "preact/jsx-runtime";
+import { applyProps } from "../base/box";
+export function FlexSpace({}) {
+    return _jsx("div", { style: "flex:1" });
 }
-function Column({ gap = 1, main = "start", cross = "stretch", stretch = false, children, ...p }) {
-    return _Flex(false, { gap, main, cross, stretch, children }, p);
+export function Column(_a) {
+    var { gap = 1, main = "start", cross = "stretch", children } = _a, p = __rest(_a, ["gap", "main", "cross", "children"]);
+    return _Flex(false, { gap, main, cross, children }, p, false);
 }
-function Row({ gap = 1, main = "start", cross, stretch = false, children, ...p }) {
-    return _Flex(true, { gap, main, cross, stretch, children }, p);
+export function Row(_a) {
+    var { gap = 1, main = "start", cross, wrap = false, children } = _a, p = __rest(_a, ["gap", "main", "cross", "wrap", "children"]);
+    return _Flex(true, { gap, main, cross, children }, p, wrap);
 }
-function _Flex(row, p, elbe) {
-    return ((0, jsx_runtime_1.jsx)("div", { ...(0, box_1.applyProps)(elbe, row ? "row" : "column", {
-            justifyContent: p.main,
-            alignItems: p.cross || (p.stretch ? "stretch" : "center"),
-            gap: `${p.gap}rem`,
-        }), children: p.children }));
+function _Flex(row, p, elbe, wraps) {
+    return (_jsx("div", Object.assign({}, applyProps(elbe, [row ? "row" : "column", wraps && "wrap"], {
+        justifyContent: p.main,
+        alignItems: p.cross,
+        gap: `${p.gap}rem`,
+    }), { children: p.children })));
 }

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

@@ -1,9 +1,10 @@
+import { JSX } from "preact/jsx-runtime";
 import { type ElbeColorSchemes } from "../../..";
 type HeaderParams = {
     title?: string;
-    back: null | "close" | "back";
+    back?: null | "close" | "back" | JSX.Element;
     actions?: any;
-    limitedHeight?: number;
+    _absolute?: boolean;
 };
 /**
  * Header is a layout component that provides a header for a page.
@@ -12,16 +13,18 @@ type HeaderParams = {
  * @param title - The title of the page.
  * @param actions - The actions to show on the right side of the header.
  */
-export declare function Header({ back, title, actions, limitedHeight }: HeaderParams): import("preact").JSX.Element;
+export declare function Header({ back, title, actions, _absolute }: HeaderParams): JSX.Element;
 /**
  * Scaffold is a layout component that provides a header and a content area.
  * It is used to create a consistent layout for pages.
  */
-export declare function Scaffold({ children, limited, gap, padded, scheme, ...header }: {
-    limited?: boolean;
+export declare function Scaffold({ children, baseLimited, gap, padded, scheme, scroll, height, ...header }: {
+    baseLimited?: boolean;
     children: any;
     gap?: number;
     padded?: boolean;
     scheme?: ElbeColorSchemes;
-} & HeaderParams): import("preact").JSX.Element;
+    scroll?: boolean;
+    height?: number;
+} & HeaderParams): JSX.Element;
 export {};