elbe-ui 0.2.26 → 0.2.34

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

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Box = void 0;
+exports.applyProps = applyProps;
+const preact_1 = require("preact");
+function applyProps(p, classes, style) {
+    if (Array.isArray(classes)) {
+        classes = classes.filter((c) => c).join(" ");
+    }
+    return {
+        id: p.id,
+        class: `${classes || ""} ${p.class || ""}`,
+        style: { ...(style ?? {}), ...(p.style ?? {}) },
+        ...(p.tooltip ? { ["data-tooltip"]: p.tooltip } : {}),
+    };
+}
+class Box extends preact_1.Component {
+    static primary = (p) => new Box({ ...p, scheme: "primary" }).render();
+    static secondary = (p) => new Box({ ...p, scheme: "secondary" }).render();
+    static inverse = (p) => new Box({ ...p, scheme: "inverse" }).render();
+    render() {
+        const { scheme, mode, padding, margin, children, ...elbe } = this.props;
+        return (0, preact_1.h)("div", applyProps(elbe, [scheme, mode], {
+            padding: `${padding}rem`,
+            margin: `${margin}rem`,
+            ...elbe.style,
+        }), children);
+    }
+}
+exports.Box = Box;

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

@@ -0,0 +1,14 @@
+import type { ElbeColorKinds, ElbeColorManners, ElbeColorModes, ElbeColorSchemes } from "../../theme/colors";
+import type { ElbeChildren } from "../../util/util";
+import { type ElbeProps } from "./box";
+export declare function Card({ mode, scheme, kind, manner, padding, margin, onTap, onLongTap, children, ...elbe }: {
+    mode?: ElbeColorModes;
+    scheme?: ElbeColorSchemes;
+    kind?: ElbeColorKinds;
+    manner?: ElbeColorManners;
+    padding?: number;
+    margin?: number;
+    onTap?: () => void;
+    onLongTap?: () => void;
+    children?: ElbeChildren;
+} & ElbeProps): import("preact").JSX.Element;

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

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Card = Card;
+const jsx_runtime_1 = require("preact/jsx-runtime");
+const box_1 = require("./box");
+function Card({ mode, scheme = "primary", kind, manner, padding = 1, margin = 0, onTap, onLongTap, children, ...elbe }) {
+    return ((0, jsx_runtime_1.jsx)("div", { ...(0, box_1.applyProps)(elbe, ["card", mode, scheme, kind, manner], {
+            padding: `${padding}rem`,
+            margin: `${margin}rem`,
+        }), onClick: onTap, onContextMenu: onLongTap, children: children }));
+}

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

@@ -0,0 +1,28 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Padded = void 0;
+const jsx_runtime_1 = require("preact/jsx-runtime");
+const compat_1 = __importDefault(require("preact/compat"));
+class Padded extends compat_1.default.Component {
+    constructor(props) {
+        super(props);
+    }
+    static all = ({ amount = 1, ...p }) => ((0, jsx_runtime_1.jsx)(Padded, { ...p, top: amount, right: amount, bottom: amount, left: amount }));
+    static symmetric = ({ vertical = 0, horizontal = 0, ...p }) => ((0, jsx_runtime_1.jsx)(Padded, { ...p,
+        top: vertical,
+        bottom: vertical,
+        left: horizontal,
+        right: horizontal }));
+    render() {
+        return ((0, jsx_runtime_1.jsx)("div", { style: {
+                paddingTop: `${this.props.top}rem`,
+                paddingRight: `${this.props.right}rem`,
+                paddingBottom: `${this.props.bottom}rem`,
+                paddingLeft: `${this.props.left}rem`,
+            }, children: this.props.children }));
+    }
+}
+exports.Padded = Padded;

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

@@ -0,0 +1,21 @@
+import { Component } from "preact";
+import type { ElbeColorKinds, ElbeColorManners } from "../../theme/colors";
+import { type ElbeProps } from "../base/box";
+import type { IconChild } from "./icon_button";
+export type ButtonProps = ElbeProps & {
+    kind?: ElbeColorKinds;
+    onTap?: (e: Event) => void;
+} & {
+    icon?: IconChild;
+    label?: string;
+    children?: any;
+};
+export declare class Button extends Component<ButtonProps & {
+    manner: ElbeColorManners;
+}> {
+    static major: (p: ButtonProps) => import("preact").JSX.Element;
+    static minor: (p: ButtonProps) => import("preact").JSX.Element;
+    static flat: (p: ButtonProps) => import("preact").JSX.Element;
+    static plain: (p: ButtonProps) => import("preact").JSX.Element;
+    render(): import("preact").JSX.Element;
+}

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

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Button = void 0;
+const jsx_runtime_1 = require("preact/jsx-runtime");
+const preact_1 = require("preact");
+const error_view_1 = require("../../util/error_view");
+const box_1 = require("../base/box");
+class Button 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");
+    render() {
+        return _btn(this.props, this.props.manner);
+    }
+}
+exports.Button = Button;
+function _btn({ kind, onTap, icon, label, children, ...elbe }, manner) {
+    return label || icon || children ? ((0, jsx_runtime_1.jsxs)("button", { ...(0, box_1.applyProps)(elbe, [
+            "row",
+            "gap-half",
+            "main-center",
+            kind ?? (manner != "plain" && "accent"),
+            manner,
+            !onTap && "disabled",
+        ]), disabled: !onTap, onClick: (e) => onTap && onTap(e), children: [typeof icon === "function" ? icon({}) : icon, label && (0, jsx_runtime_1.jsx)("span", { children: label }), children] })) : ((0, error_view_1._ElbeErr)("Button requires either an icon and or a label, or a child"));
+}

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

@@ -0,0 +1,14 @@
+import type { ElbeColorKinds } from "../../theme/colors";
+import type { IconChild } from "./icon_button";
+export interface ChooseItem<T> {
+    value: T;
+    label?: string;
+    icon?: IconChild;
+}
+export declare function ChooseButton<T>({ items, value, onChange, kind, column, }: {
+    items: ChooseItem<T>[];
+    value: T;
+    onChange?: (v: T) => void;
+    kind?: ElbeColorKinds;
+    column?: boolean;
+}): import("preact").JSX.Element;

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

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChooseButton = ChooseButton;
+const jsx_runtime_1 = require("preact/jsx-runtime");
+const lucide_react_1 = require("lucide-react");
+const spaced_1 = require("../layout/spaced");
+const button_1 = require("./button");
+function ChooseButton({ items, value, onChange, kind, column = false, }) {
+    return ((0, jsx_runtime_1.jsx)("div", { class: `${column ? "column" : "row"} gap-none rounded accent minor card padding-none cross-stretch ${!onChange ? "disabled" : ""}`, style: "background: transparent", children: items.map((e) => ((0, jsx_runtime_1.jsxs)(button_1.Button, { manner: e.value === value ? "minor" : "flat", kind: kind, onTap: onChange && (() => onChange(e.value)), class: `sharp ${column ? "main-between gap-double" : ""}`, children: [(0, jsx_runtime_1.jsxs)("div", { class: "row gap-half", children: [typeof e.icon === "function" ? e.icon({}) : e.icon, e.label && (0, jsx_runtime_1.jsx)("span", { children: e.label })] }), column &&
+                    (e.value === value ? (0, jsx_runtime_1.jsx)(lucide_react_1.CheckIcon, {}) : (0, jsx_runtime_1.jsx)(spaced_1.Spaced, { amount: 1.5 }))] }))) }));
+}

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

@@ -0,0 +1,17 @@
+import { Component } from "preact";
+import { type ElbeChild, type ElbeColorKinds, type ElbeColorManners, type ElbeProps } from "../../..";
+export type IconChild = ElbeChild | ((_: any) => ElbeChild);
+export type IconButtonProps = {
+    icon?: IconChild;
+    kind?: ElbeColorKinds;
+    onTap?: (e: Event) => void;
+} & ElbeProps;
+export declare class IconButton extends Component<IconButtonProps & {
+    manner?: ElbeColorManners;
+}> {
+    static major: (p: IconButtonProps) => import("preact").JSX.Element;
+    static minor: (p: IconButtonProps) => import("preact").JSX.Element;
+    static flat: (p: IconButtonProps) => import("preact").JSX.Element;
+    static plain: (p: IconButtonProps) => import("preact").JSX.Element;
+    render(): import("preact").JSX.Element;
+}

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

@@ -0,0 +1,31 @@
+"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");
+    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 }));
+}

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

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

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

@@ -0,0 +1,11 @@
+"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 })] }));
+}

package/dist/ui/components/dialog.js

@@ -0,0 +1,14 @@
+"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) => {
+                                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 })] }) }));
+}

package/dist/ui/components/error_view.js

@@ -0,0 +1,26 @@
+"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) ?? {
+        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) })] }));
+}
+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) }) })] }));
+}

package/dist/ui/components/input/checkbox.d.ts

@@ -1,4 +1,4 @@
-import { type ElbeProps } from "../box";
+import { type ElbeProps } from "../base/box";
 export declare function Checkbox({ value, label, onChange, ...elbe }: {
     value: boolean;
     label?: string;

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

@@ -0,0 +1,12 @@
+"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: {
+            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 })] }));
+}

package/dist/ui/components/input/input_field.d.ts

@@ -1,5 +1,5 @@
 import React from "preact/compat";
-import { type ElbeProps } from "../box";
+import { type ElbeProps } from "../base/box";
 import { _TextArea } from "./text_area";
 export type InputFieldProps = {
     label?: string;

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

@@ -0,0 +1,31 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+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;
+    render() {
+        const { label, hint, readonly, type, value, onInput, ...elbe } = this.props;
+        return ((0, jsx_runtime_1.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 }) }));
+    }
+}
+exports.Field = Field;

package/dist/ui/components/input/range.d.ts

@@ -1,4 +1,4 @@
-import { type ElbeProps } from "../box";
+import { type ElbeProps } from "../base/box";
 export declare function Range({ value, onChange, min, max, step, ...elbe }: {
     value: number;
     min?: number;

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

@@ -0,0 +1,14 @@
+"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, {
+            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)) }));
+}

package/dist/ui/components/input/select.d.ts

@@ -1,4 +1,4 @@
-import { type ElbeProps } from "../box";
+import { type ElbeProps } from "../base/box";
 export declare function Select({ options, value, label, onChange, ...elbe }: {
     options: {
         key: string;

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

@@ -0,0 +1,8 @@
+"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))) }));
+}

package/dist/ui/components/input/text_area.d.ts

@@ -1,4 +1,4 @@
-import { type ElbeProps } from "../box";
+import { type ElbeProps } from "../base/box";
 export declare function _TextArea({ label, hint, readonly, rows, maxLength, value, onInput, ...elbe }: {
     label?: string;
     hint: string;

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

@@ -0,0 +1,13 @@
+"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: {
+            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 }) }));
+}

package/dist/ui/components/{flex.d.ts → layout/flex.d.ts}

@@ -1,4 +1,4 @@
-import { type ElbeProps } from "./box";
+import { type ElbeProps } from "../base/box";
 export type FlexProps = {
     children: any;
     gap?: number;

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

@@ -0,0 +1,23 @@
+"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" });
+}
+function Column({ gap = 1, main = "start", cross = "stretch", stretch = false, children, ...p }) {
+    return _Flex(false, { gap, main, cross, stretch, children }, p);
+}
+function Row({ gap = 1, main = "start", cross, stretch = false, children, ...p }) {
+    return _Flex(true, { gap, main, cross, stretch, children }, p);
+}
+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 }));
+}

package/dist/ui/components/{scaffold.d.ts → layout/scaffold.d.ts}

@@ -1,7 +1,9 @@
+import { type ElbeColorSchemes } from "../../..";
 type HeaderParams = {
     title?: string;
     back: null | "close" | "back";
     actions?: any;
+    limitedHeight?: number;
 };
 /**
  * Header is a layout component that provides a header for a page.
@@ -10,14 +12,16 @@ 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 }: HeaderParams): import("preact/compat").JSX.Element;
+export declare function Header({ back, title, actions, limitedHeight }: HeaderParams): import("preact").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, ...header }: {
+export declare function Scaffold({ children, limited, gap, padded, scheme, ...header }: {
     limited?: boolean;
     children: any;
     gap?: number;
-} & HeaderParams): import("preact/compat").JSX.Element;
+    padded?: boolean;
+    scheme?: ElbeColorSchemes;
+} & HeaderParams): import("preact").JSX.Element;
 export {};

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

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Header = Header;
+exports.Scaffold = Scaffold;
+const jsx_runtime_1 = require("preact/jsx-runtime");
+const hooks_1 = require("preact/hooks");
+const __1 = require("../../..");
+const icon_button_1 = require("../button/icon_button");
+const flex_1 = require("./flex");
+/**
+ * Header is a layout component that provides a header for a page.
+ * It is used to create a consistent header for pages.
+ * @param back - The back button type. If null, no back button is shown. If "close", a close button is shown. If "back", a back button is shown.
+ * @param title - The title of the page.
+ * @param actions - The actions to show on the right side of the header.
+ */
+function Header({ back, title, actions, limitedHeight }) {
+    if (history.length == 0)
+        back = null;
+    const goBack = () => history.go(-1);
+    const [isScrolledTop, setIsScrolled] = (0, hooks_1.useState)(false);
+    (0, hooks_1.useEffect)(() => {
+        const _handle = () => setIsScrolled(window.scrollY > 0);
+        window.addEventListener("scroll", _handle);
+        return () => {
+            window.removeEventListener("scroll", _handle);
+        };
+    }, []);
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { style: "height: 4.5rem" }), (0, jsx_runtime_1.jsxs)("div", { class: "header", style: {
+                    borderColor: isScrolledTop ? "" : "transparent",
+                    position: limitedHeight ? "absolute" : "fixed",
+                }, children: [(0, jsx_runtime_1.jsx)("div", { class: "flex-1", children: back ? ((0, jsx_runtime_1.jsx)(icon_button_1.IconButton.plain, { icon: back === "back" ? __1.Icons.ArrowLeft : __1.Icons.X, onTap: goBack })) : null }), (0, jsx_runtime_1.jsx)(__1.Text.h4, { v: title }), (0, jsx_runtime_1.jsx)(flex_1.Row, { class: "flex-1", gap: 0.5, main: "end", children: actions })] })] }));
+}
+/**
+ * Scaffold is a layout component that provides a header and a content area.
+ * It is used to create a consistent layout for pages.
+ */
+function Scaffold({ children, limited = false, gap = 1, padded = true, scheme, ...header }) {
+    return ((0, jsx_runtime_1.jsxs)(flex_1.Column, { cross: "stretch", gap: 0, class: `${scheme ?? "primary"}`, style: {
+            overflowY: header.limitedHeight ? "scroll" : null,
+            maxHeight: header.limitedHeight ? `${header.limitedHeight}rem` : null,
+            //height: header.limitToParent ? "100px" : null,
+        }, children: [(0, jsx_runtime_1.jsx)(Header, { ...header }), (0, jsx_runtime_1.jsx)("div", { class: `${padded ? "padded" : ""} ${limited ? "base-limited" : ""}`, children: (0, jsx_runtime_1.jsx)(flex_1.Column, { cross: "stretch", gap: gap ?? 1, children: children }) })] }));
+}

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

@@ -0,0 +1,18 @@
+import { Component } from "preact";
+import { type ElbeProps } from "../base/box";
+export type ScrollProps = ElbeProps & {
+    innerClass?: string;
+    height?: number;
+    width?: number;
+    children?: any;
+};
+type _ScrollProps = ScrollProps & {
+    axis: "vertical" | "horizontal";
+};
+export declare class Scroll extends Component<_ScrollProps> {
+    constructor(props: _ScrollProps);
+    static vertical: (p: ScrollProps) => import("preact").JSX.Element;
+    static horizontal: (p: ScrollProps) => import("preact").JSX.Element;
+    render(): import("preact").JSX.Element;
+}
+export {};

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

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Scroll = void 0;
+const jsx_runtime_1 = require("preact/jsx-runtime");
+const preact_1 = require("preact");
+const box_1 = require("../base/box");
+class Scroll extends preact_1.Component {
+    constructor(props) {
+        super(props);
+    }
+    static vertical = (p) => new Scroll({ ...p, axis: "vertical" }).render();
+    static horizontal = (p) => new Scroll({ ...p, axis: "horizontal" }).render();
+    render() {
+        return ((0, jsx_runtime_1.jsx)("div", { ...(0, box_1.applyProps)(this.props, null, {
+                overflowY: this.props.axis === "vertical" ? "scroll" : "hidden",
+                overflowX: this.props.axis === "horizontal" ? "scroll" : "hidden",
+            }), children: (0, jsx_runtime_1.jsx)("div", { class: this.props.innerClass, style: this.props.axis === "horizontal" ? "min-width: min-content;" : "", children: this.props.children }) }));
+    }
+}
+exports.Scroll = Scroll;

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Spaced = Spaced;
+const jsx_runtime_1 = require("preact/jsx-runtime");
+function Spaced({ amount = 1 }) {
+    return (0, jsx_runtime_1.jsx)("div", { style: { width: amount + "rem", height: amount + "rem" } });
+}

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

@@ -1,3 +1,11 @@
-export declare function Spinner({ padding }: {
+import { Component } from "preact";
+export type SpinnerProps = {
     padding?: number;
-}): import("preact").JSX.Element;
+};
+export declare class Spinner extends Component<{
+    manner?: "flat" | "plain";
+} & SpinnerProps> {
+    static flat: (p: SpinnerProps) => import("preact").JSX.Element;
+    static plain: (p: SpinnerProps) => import("preact").JSX.Element;
+    render(): import("preact").JSX.Element;
+}

package/dist/ui/components/spinner.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Spinner = void 0;
+const jsx_runtime_1 = require("preact/jsx-runtime");
+const signals_1 = require("@preact/signals");
+const preact_1 = require("preact");
+const hooks_1 = require("preact/hooks");
+function _toPath(c, yFac, yOffset = 0, clamp = [0, 1], xFac = 1) {
+    return c
+        .filter((p) => p[0] >= clamp[0] && p[0] <= clamp[1])
+        .map((p, i) => (i === 0 ? "M" : "L") +
+        (((p[0] - 0.5) * xFac + 0.5) * 100).toFixed(2) +
+        "," +
+        (p[1] * yFac + yOffset).toFixed(2))
+        .join(" ");
+}
+class Spinner extends preact_1.Component {
+    static flat = (p) => new Spinner({ manner: "flat", ...p }).render();
+    static plain = (p) => new Spinner({ manner: "plain", ...p }).render();
+    render() {
+        const flat = (this.props.manner ?? "flat") === "flat";
+        const xSig = (0, signals_1.useSignal)(0);
+        (0, hooks_1.useEffect)(() => {
+            const interval = setInterval(() => {
+                xSig.value = (xSig.value + 2) % 100;
+            }, 16);
+            return () => clearInterval(interval);
+        });
+        const path = (0, signals_1.useComputed)(() => {
+            const x = xSig.value;
+            const path = [];
+            for (let i = 0; i <= 1; i += 0.01) {
+                const pos = (i * 1 + x * 0.01) * Math.PI * 2; // angle = 0 -> 2π
+                const y = Math.sin(pos);
+                path.push([i, y]);
+            }
+            return path;
+        });
+        return ((0, jsx_runtime_1.jsx)("div", { class: `${flat ? "accent flat" : "plain"}`, style: {
+                padding: `${this.props.padding ?? 1}rem`,
+            }, children: (0, jsx_runtime_1.jsx)("svg", { style: "width: 40px; height: 40px", viewBox: `-10 -10 120 120`, children: [
+                    _toPath(path.value, 13, 20, [0.4, 0.8], 1),
+                    _toPath(path.value, 10, 50),
+                    _toPath(path.value, 11, 80, [0.2, 0.6], 1),
+                ].map((p) => ((0, jsx_runtime_1.jsx)("path", { d: p, fill: "none", stroke: "currentcolor", "stroke-width": "10", "stroke-linecap": "round" }))) }) }));
+    }
+}
+exports.Spinner = Spinner;