@elizaos/agent 2.0.0-alpha.520 → 2.0.0-alpha.521

package/packages/app-core/src/components/config-ui/ui-renderer.js

@@ -1,826 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Button, Checkbox, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@elizaos/ui";
-import React, { createContext, useCallback, useContext, useMemo, useState, } from "react";
-import { getByPath, setByPath } from "../../config/config-catalog";
-import { useApp } from "../../state";
-import { confirmDesktopAction, resolveAppAssetUrl } from "../../utils";
-import { ConfigFieldErrors, getConfigInputClassName, getConfigTextareaClassName, } from "./config-control-primitives";
-const UiContext = createContext(null);
-const BLOCKED_LINK_PROTOCOLS = new Set([
-    "javascript",
-    "data",
-    "vbscript",
-    "file",
-]);
-function useUiCtx() {
-    const ctx = useContext(UiContext);
-    if (!ctx)
-        throw new Error("UiRenderer context missing");
-    return ctx;
-}
-// ── Dynamic value resolution ────────────────────────────────────────
-function resolveProp(value, ctx) {
-    if (value == null)
-        return value;
-    // $data.path string prefix (simpler syntax for AI)
-    if (typeof value === "string" && value.startsWith("$data.")) {
-        const path = value.slice(6); // strip "$data."
-        if (path.startsWith("$item/") && ctx.repeatItem) {
-            return ctx.repeatItem[path.slice(6)];
-        }
-        return getByPath(ctx.state, path);
-    }
-    // $path reference
-    if (typeof value === "object" &&
-        "$path" in value) {
-        const path = value.$path;
-        if (path.startsWith("$item/") && ctx.repeatItem) {
-            return ctx.repeatItem[path.slice(6)];
-        }
-        return getByPath(ctx.state, path);
-    }
-    // $cond expression
-    if (typeof value === "object" &&
-        "$cond" in value) {
-        const expr = value;
-        const cond = expr.$cond;
-        let result = false;
-        if (cond.eq) {
-            const [a, b] = cond.eq.map((v) => resolveProp(v, ctx));
-            result = a === b;
-        }
-        else if (cond.neq) {
-            const [a, b] = cond.neq.map((v) => resolveProp(v, ctx));
-            result = a !== b;
-        }
-        else if (cond.gt) {
-            const [a, b] = cond.gt.map((v) => resolveProp(v, ctx));
-            result = Number(a) > Number(b);
-        }
-        else if (cond.lt) {
-            const [a, b] = cond.lt.map((v) => resolveProp(v, ctx));
-            result = Number(a) < Number(b);
-        }
-        else if (cond.truthy) {
-            result = !!resolveProp(cond.truthy, ctx);
-        }
-        else if (cond.falsy) {
-            result = !resolveProp(cond.falsy, ctx);
-        }
-        else if (cond.path) {
-            result = !!getByPath(ctx.state, cond.path);
-        }
-        return result ? resolveProp(expr.$then, ctx) : resolveProp(expr.$else, ctx);
-    }
-    // Object with path references
-    if (typeof value === "object" &&
-        value !== null &&
-        "path" in value) {
-        const p = value.path;
-        if (p.startsWith("$item/") && ctx.repeatItem) {
-            return ctx.repeatItem[p.slice(6)];
-        }
-        return getByPath(ctx.state, p);
-    }
-    return value;
-}
-function resolveProps(props, ctx) {
-    const resolved = {};
-    for (const [k, v] of Object.entries(props)) {
-        resolved[k] = resolveProp(v, ctx);
-    }
-    return resolved;
-}
-// ── Visibility evaluation ────────────────────────────────────────────
-export function evaluateUiVisibility(condition, state, auth) {
-    if (!condition)
-        return true;
-    // Path-based
-    if ("path" in condition && "operator" in condition) {
-        const val = getByPath(state, condition.path);
-        const target = condition.value;
-        switch (condition.operator) {
-            case "eq":
-                return val === target;
-            case "ne":
-                return val !== target;
-            case "gt":
-                return Number(val) > Number(target);
-            case "gte":
-                return Number(val) >= Number(target);
-            case "lt":
-                return Number(val) < Number(target);
-            case "lte":
-                return Number(val) <= Number(target);
-            default:
-                return true;
-        }
-    }
-    // Auth-based
-    if ("auth" in condition) {
-        if (!auth)
-            return false;
-        switch (condition.auth) {
-            case "signedIn":
-                return auth.isSignedIn;
-            case "signedOut":
-                return !auth.isSignedIn;
-            case "admin":
-                return auth.roles?.includes("admin") ?? false;
-            default:
-                return auth.roles?.includes(condition.auth) ?? false;
-        }
-    }
-    // Logic combinators
-    if ("and" in condition)
-        return condition.and.every((c) => evaluateUiVisibility(c, state, auth));
-    if ("or" in condition)
-        return condition.or.some((c) => evaluateUiVisibility(c, state, auth));
-    if ("not" in condition)
-        return !evaluateUiVisibility(condition.not, state, auth);
-    return true;
-}
-export function sanitizeLinkHref(href) {
-    // Strip ASCII control chars (tab, LF, CR) that browsers silently remove
-    // during URL parsing, preventing bypass attacks like "java\nscript:alert(1)".
-    const raw = String(href ?? "#")
-        .trim()
-        .replace(/[\t\n\r]/g, "");
-    if (!raw)
-        return "#";
-    // Keep relative/hash links unchanged.
-    if (raw.startsWith("#") ||
-        raw.startsWith("/") ||
-        raw.startsWith("./") ||
-        raw.startsWith("../") ||
-        raw.startsWith("?")) {
-        return raw;
-    }
-    const match = /^([a-zA-Z][a-zA-Z\d+.-]*):/.exec(raw);
-    if (!match)
-        return raw;
-    const protocol = match[1].toLowerCase();
-    if (BLOCKED_LINK_PROTOCOLS.has(protocol))
-        return "#";
-    return raw;
-}
-// ── Built-in validators ─────────────────────────────────────────────
-const BUILTIN_VALIDATORS = {
-    required: (v) => v != null && v !== "",
-    email: (v) => typeof v === "string" &&
-        v.length <= 254 &&
-        /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v),
-    minLength: (v, args) => typeof v === "string" && v.length >= Number(args?.length ?? 0),
-    maxLength: (v, args) => typeof v === "string" && v.length <= Number(args?.length ?? Infinity),
-    pattern: (v, args) => {
-        if (typeof v !== "string" || !args?.pattern)
-            return true;
-        try {
-            return new RegExp(String(args.pattern)).test(v);
-        }
-        catch {
-            return true;
-        }
-    },
-    min: (v, args) => Number(v) >= Number(args?.value ?? -Infinity),
-    max: (v, args) => Number(v) <= Number(args?.value ?? Infinity),
-};
-// ── Validation runner ───────────────────────────────────────────────
-export function runValidation(checks, value, customValidators) {
-    const errors = [];
-    for (const check of checks) {
-        const fn = BUILTIN_VALIDATORS[check.fn] ?? customValidators?.[check.fn];
-        if (fn) {
-            const result = fn(value, check.args);
-            // Handle sync validators only (async handled separately)
-            if (result === false)
-                errors.push(check.message);
-        }
-    }
-    return errors;
-}
-// ── State helpers ───────────────────────────────────────────────────
-function useStatePath(statePath, ctx) {
-    const value = statePath ? getByPath(ctx.state, statePath) : undefined;
-    const setValue = useCallback((v) => {
-        if (statePath)
-            ctx.setState(statePath, v);
-    }, [statePath, ctx]);
-    return [value, setValue];
-}
-// ── Fire event action ───────────────────────────────────────────────
-function fireEvent(action, ctx) {
-    if (!action)
-        return;
-    const execute = () => {
-        if (action.action === "setState" && action.params) {
-            const p = action.params;
-            ctx.setState(p.path, p.value);
-            if (action.onSuccess && ctx.onAction) {
-                ctx.onAction(action.onSuccess.action, action.onSuccess.params);
-            }
-        }
-        else if (ctx.onAction) {
-            try {
-                ctx.onAction(action.action, action.params);
-                if (action.onSuccess)
-                    ctx.onAction(action.onSuccess.action, action.onSuccess.params);
-            }
-            catch {
-                if (action.onError && ctx.onAction)
-                    ctx.onAction(action.onError.action, action.onError.params);
-            }
-        }
-    };
-    void (async () => {
-        if (action.confirm) {
-            const ok = await confirmDesktopAction({
-                title: action.confirm.title,
-                message: action.confirm.message ?? "",
-                confirmLabel: "Confirm",
-                cancelLabel: "Cancel",
-                type: "question",
-            });
-            if (!ok)
-                return;
-        }
-        execute();
-    })();
-}
-// ── Gap / size maps ─────────────────────────────────────────────────
-const GAP = {
-    none: "gap-0",
-    xs: "gap-0.5",
-    sm: "gap-1.5",
-    md: "gap-3",
-    lg: "gap-5",
-    xl: "gap-8",
-};
-const ALIGN = {
-    start: "items-start",
-    center: "items-center",
-    end: "items-end",
-    stretch: "items-stretch",
-};
-const JUSTIFY = {
-    start: "justify-start",
-    center: "justify-center",
-    end: "justify-end",
-    between: "justify-between",
-    around: "justify-around",
-};
-// ── Layout ──────────────────────────────────────────────────────────
-const StackComponent = (props, children) => {
-    const dir = props.direction === "horizontal" ? "flex-row" : "flex-col";
-    const gap = GAP[String(props.gap ?? "md")] ?? "gap-3";
-    const align = ALIGN[String(props.align ?? "stretch")] ?? "";
-    const justify = JUSTIFY[String(props.justify ?? "start")] ?? "";
-    return (_jsx("div", { className: `flex ${dir} ${gap} ${align} ${justify}`, children: children }));
-};
-const GridComponent = (props, children) => {
-    const cols = Number(props.columns ?? 2);
-    const gap = GAP[String(props.gap ?? "md")] ?? "gap-3";
-    return (_jsx("div", { className: `grid ${gap}`, style: { gridTemplateColumns: `repeat(${cols}, 1fr)` }, children: children }));
-};
-const CardComponent = (props, children) => {
-    const maxW = props.maxWidth === "full" ? "max-w-full" : "";
-    return (_jsxs("div", { className: `border border-border bg-card p-4 ${maxW}`, children: [props.title ? (_jsx("div", { className: "font-bold text-sm mb-0.5", children: String(props.title) })) : null, props.description ? (_jsx("div", { className: "text-xs text-muted mb-3", children: String(props.description) })) : null, children] }));
-};
-const SeparatorComponent = (props) => {
-    const isVert = props.orientation === "vertical";
-    return isVert ? (_jsx("div", { className: "w-px bg-border self-stretch" })) : (_jsx("hr", { className: "my-2" }));
-};
-// ── Typography ──────────────────────────────────────────────────────
-const HeadingComponent = (props) => {
-    const text = String(props.text ?? "");
-    const level = String(props.level ?? "h2");
-    const cls = level === "h1"
-        ? "text-xl font-bold"
-        : level === "h3"
-            ? "text-sm font-bold"
-            : "text-base font-bold";
-    return _jsx("div", { className: cls, children: text });
-};
-const TextComponent = (props) => {
-    const text = String(props.text ?? "");
-    const variant = String(props.variant ?? "body");
-    const cls = {
-        body: "text-sm",
-        caption: "text-xs text-muted",
-        muted: "text-sm text-muted",
-        lead: "text-sm font-medium",
-        code: "text-xs font-mono bg-[var(--bg-hover)] px-1.5 py-0.5 border border-border",
-    };
-    return _jsx("div", { className: cls[variant] ?? "text-sm", children: text });
-};
-// ── Form ────────────────────────────────────────────────────────────
-const InputComponent = (props, _children, ctx, el) => {
-    const [value, setValue] = useStatePath(props.statePath, ctx);
-    const sp = props.statePath;
-    const errors = sp ? ctx.fieldErrors?.[sp] : undefined;
-    const validateOn = el.validation?.validateOn ?? "blur";
-    const handleChange = (v) => {
-        setValue(v);
-        if (validateOn === "change" && sp && ctx.validateField)
-            ctx.validateField(sp);
-    };
-    const handleBlur = () => {
-        if (validateOn === "blur" && sp && ctx.validateField)
-            ctx.validateField(sp);
-    };
-    return (_jsxs("div", { className: "flex flex-col gap-1", children: [props.label ? (_jsx("span", { className: "text-xs font-semibold", children: String(props.label) })) : null, _jsx("input", { className: getConfigInputClassName({
-                    density: "compact",
-                    hasError: !!errors?.length,
-                }), type: String(props.type ?? "text"), name: String(props.name ?? ""), placeholder: String(props.placeholder ?? ""), value: String(value ?? ""), onChange: (e) => handleChange(e.target.value), onBlur: handleBlur }), _jsx(ConfigFieldErrors, { errors: errors })] }));
-};
-const TextareaComponent = (props, _children, ctx, el) => {
-    const [value, setValue] = useStatePath(props.statePath, ctx);
-    const sp = props.statePath;
-    const errors = sp ? ctx.fieldErrors?.[sp] : undefined;
-    const validateOn = el.validation?.validateOn ?? "blur";
-    const handleChange = (v) => {
-        setValue(v);
-        if (validateOn === "change" && sp && ctx.validateField)
-            ctx.validateField(sp);
-    };
-    const handleBlur = () => {
-        if (validateOn === "blur" && sp && ctx.validateField)
-            ctx.validateField(sp);
-    };
-    return (_jsxs("div", { className: "flex flex-col gap-1", children: [props.label ? (_jsx("span", { className: "text-xs font-semibold", children: String(props.label) })) : null, _jsx("textarea", { className: getConfigTextareaClassName({
-                    density: "compact",
-                    hasError: !!errors?.length,
-                }), name: String(props.name ?? ""), placeholder: String(props.placeholder ?? ""), rows: Number(props.rows ?? 3), value: String(value ?? ""), onChange: (e) => handleChange(e.target.value), onBlur: handleBlur }), _jsx(ConfigFieldErrors, { errors: errors })] }));
-};
-const SelectComponent = (props, _children, ctx, el) => {
-    const [value, setValue] = useStatePath(props.statePath, ctx);
-    const options = props.options ?? [];
-    const sp = props.statePath;
-    const errors = sp ? ctx.fieldErrors?.[sp] : undefined;
-    const validateOn = el.validation?.validateOn ?? "blur";
-    const handleChange = (v) => {
-        setValue(v);
-        if (validateOn === "change" && sp && ctx.validateField)
-            ctx.validateField(sp);
-    };
-    const handleBlur = () => {
-        if (validateOn === "blur" && sp && ctx.validateField)
-            ctx.validateField(sp);
-    };
-    return (_jsxs("div", { className: "flex flex-col gap-1", children: [props.label ? (_jsx("span", { className: "text-xs font-semibold", children: String(props.label) })) : null, _jsxs(Select, { value: String(value ?? "") || "__none__", onValueChange: (v) => {
-                    handleChange(v === "__none__" ? "" : v);
-                    handleBlur();
-                }, children: [_jsx(SelectTrigger, { className: getConfigInputClassName({
-                            density: "compact",
-                            hasError: !!errors?.length,
-                        }), children: _jsx(SelectValue, { placeholder: props.placeholder ? String(props.placeholder) : undefined }) }), _jsxs(SelectContent, { children: [props.placeholder ? (_jsx(SelectItem, { value: "__none__", children: String(props.placeholder) })) : null, options
-                                .filter((o) => o.value !== "")
-                                .map((o) => (_jsx(SelectItem, { value: o.value, children: o.label }, o.value)))] })] }), _jsx(ConfigFieldErrors, { errors: errors })] }));
-};
-const CheckboxComponent = (props, _children, ctx) => {
-    const [value, setValue] = useStatePath(props.statePath, ctx);
-    return (_jsxs("div", { className: "flex items-center gap-2 text-xs cursor-pointer", children: [_jsx(Checkbox, { checked: !!value, onCheckedChange: (checked) => setValue(!!checked) }), _jsx("span", { className: "font-semibold", children: String(props.label ?? "") })] }));
-};
-const RadioComponent = (props, _children, ctx) => {
-    const [value, setValue] = useStatePath(props.statePath, ctx);
-    const options = props.options ?? [];
-    return (_jsxs("div", { className: "flex flex-col gap-1", children: [props.label ? (_jsx("span", { className: "text-xs font-semibold mb-0.5", children: String(props.label) })) : null, options.map((o) => (_jsxs("span", { className: "flex items-center gap-2 text-xs cursor-pointer", children: [_jsx("input", { type: "radio", name: String(props.name ?? ""), value: o.value, checked: value === o.value, onChange: () => setValue(o.value) }), _jsx("span", { children: o.label })] }, o.value)))] }));
-};
-const SwitchComponent = (props, _children, ctx) => {
-    const [value, setValue] = useStatePath(props.statePath, ctx);
-    const checked = !!value;
-    return (_jsxs("span", { className: "flex items-center gap-2 cursor-pointer", children: [_jsx(Button, { type: "button", variant: "ghost", className: `relative w-9 h-[18px] p-0 transition-colors rounded-none ${checked ? "bg-accent" : "bg-muted"}`, onClick: () => setValue(!checked), children: _jsx("div", { className: `absolute top-0.5 w-[14px] h-[14px] bg-card transition-all ${checked ? "left-5" : "left-0.5"}` }) }), _jsx("span", { className: "text-xs font-semibold", children: String(props.label ?? "") })] }));
-};
-const SliderComponent = (props, _children, ctx) => {
-    const [value, setValue] = useStatePath(props.statePath, ctx);
-    return (_jsxs("div", { className: "flex flex-col gap-1", children: [props.label ? (_jsxs("div", { className: "flex justify-between text-xs", children: [_jsx("span", { className: "font-semibold", children: String(props.label) }), _jsx("span", { className: "text-muted", children: String(value ?? props.min ?? 0) })] })) : null, _jsx("input", { type: "range", min: Number(props.min ?? 0), max: Number(props.max ?? 100), step: Number(props.step ?? 1), value: Number(value ?? props.min ?? 0), onChange: (e) => setValue(Number(e.target.value)), className: "w-full", style: { accentColor: "var(--accent)" } })] }));
-};
-const ToggleComponent = (props, _children, ctx, el) => {
-    const [value, setValue] = useStatePath(props.statePath, ctx);
-    const pressed = !!value;
-    return (_jsx(Button, { type: "button", variant: pressed ? "default" : "outline", className: `px-3 py-1.5 text-xs transition-colors ${pressed
-            ? "bg-accent text-accent-fg border-accent"
-            : "bg-card text-txt hover:bg-[var(--bg-hover)]"}`, onClick: () => {
-            setValue(!pressed);
-            fireEvent(el.on?.press, ctx);
-        }, children: String(props.label ?? "Toggle") }));
-};
-const ToggleGroupComponent = (props, _children, ctx) => {
-    const [value, setValue] = useStatePath(props.statePath, ctx);
-    const items = props.items ?? [];
-    const isMultiple = props.type === "multiple";
-    const selected = new Set(Array.isArray(value) ? value : []);
-    const toggle = (v) => {
-        if (isMultiple) {
-            const next = new Set(selected);
-            if (next.has(v))
-                next.delete(v);
-            else
-                next.add(v);
-            setValue([...next]);
-        }
-        else {
-            setValue(v);
-        }
-    };
-    return (_jsx("div", { className: "flex gap-1", children: items.map((item) => {
-            const active = isMultiple
-                ? selected.has(item.value)
-                : value === item.value;
-            return (_jsx(Button, { type: "button", variant: active ? "default" : "outline", className: `px-2.5 py-1 text-xs transition-colors ${active
-                    ? "bg-accent text-accent-fg border-accent"
-                    : "bg-card text-txt hover:bg-[var(--bg-hover)]"}`, onClick: () => toggle(item.value), children: item.label }, item.value));
-        }) }));
-};
-const ButtonGroupComponent = (props, _children, ctx) => {
-    const [value, setValue] = useStatePath(props.statePath, ctx);
-    const buttons = props.buttons ?? [];
-    return (_jsx("div", { className: "flex gap-1", children: buttons.map((btn) => {
-            const active = value === btn.value;
-            return (_jsx(Button, { type: "button", variant: active ? "default" : "outline", className: `px-3 py-1.5 text-xs transition-colors ${active
-                    ? "bg-accent text-accent-fg border-accent"
-                    : "bg-card text-txt hover:bg-[var(--bg-hover)]"}`, onClick: () => setValue(btn.value), children: btn.label }, btn.value));
-        }) }));
-};
-// ── Data Display ────────────────────────────────────────────────────
-const TableComponent = (props) => {
-    const columns = props.columns ?? [];
-    const rows = props.rows ?? [];
-    return (_jsxs("div", { className: "overflow-x-auto", children: [props.caption ? (_jsx("div", { className: "text-xs font-semibold mb-1.5", children: String(props.caption) })) : null, _jsxs("table", { className: "w-full text-xs border-collapse", children: [_jsx("thead", { children: _jsx("tr", { children: columns.map((col) => (_jsx("th", { className: "text-left px-2.5 py-1.5 font-semibold text-muted", children: col }, col))) }) }), _jsx("tbody", { children: rows.map((row) => (_jsx("tr", { className: "", children: row.map((cell) => (_jsx("td", { className: "px-2.5 py-1.5", children: cell }, cell))) }, row.join("|")))) })] })] }));
-};
-const CarouselComponent = (props) => {
-    const { t } = useApp();
-    const items = props.items ?? [];
-    const [current, setCurrent] = useState(0);
-    return (_jsxs("div", { className: "relative", children: [_jsx("div", { className: "border border-border bg-[var(--bg-hover)] p-4 min-h-[60px]", children: items[current] && (_jsxs("div", { children: [_jsx("div", { className: "text-xs font-bold", children: items[current].title }), _jsx("div", { className: "text-xs text-muted mt-0.5", children: items[current].description })] })) }), _jsxs("div", { className: "flex justify-center gap-2 mt-2", children: [_jsx(Button, { type: "button", variant: "outline", size: "sm", className: "text-xs px-2 py-0.5", onClick: () => setCurrent((p) => Math.max(0, p - 1)), disabled: current === 0, children: t("ui-renderer.Larr") }), _jsxs("span", { className: "text-2xs text-muted self-center", children: [current + 1, " / ", items.length] }), _jsx(Button, { type: "button", variant: "outline", size: "sm", className: "text-xs px-2 py-0.5", onClick: () => setCurrent((p) => Math.min(items.length - 1, p + 1)), disabled: current === items.length - 1, children: t("ui-renderer.Rarr") })] })] }));
-};
-const BadgeComponent = (props) => {
-    const variant = String(props.variant ?? "default");
-    const cls = {
-        default: "bg-[var(--surface)] text-txt border-border",
-        success: "bg-[rgba(22,163,106,0.1)] text-ok border-ok",
-        warning: "bg-[rgba(243,156,18,0.1)] text-[var(--warn,#f39c12)] border-[var(--warn,#f39c12)]",
-        error: "bg-[rgba(231,76,60,0.1)] text-destructive border-destructive",
-        info: "bg-[rgba(52,152,219,0.1)] text-accent border-accent",
-    };
-    return (_jsx("span", { className: `inline-block text-2xs font-medium px-2 py-0.5 border ${cls[variant] ?? cls.default}`, children: String(props.text ?? "") }));
-};
-const AvatarComponent = (props) => {
-    const name = String(props.name ?? "?");
-    const size = props.size === "lg"
-        ? "w-10 h-10 text-sm"
-        : props.size === "sm"
-            ? "w-6 h-6 text-2xs"
-            : "w-8 h-8 text-xs";
-    const initials = name
-        .split(" ")
-        .map((w) => w[0])
-        .join("")
-        .slice(0, 2)
-        .toUpperCase();
-    return (_jsx("div", { className: `${size} rounded-full bg-accent text-accent-fg flex items-center justify-center font-bold shrink-0`, children: initials }));
-};
-const ImageComponent = (props) => {
-    const src = props.src;
-    const resolvedSrc = src ? resolveAppAssetUrl(src) : undefined;
-    const alt = String(props.alt ?? "");
-    const w = props.width ? `${props.width}px` : "auto";
-    const h = props.height ? `${props.height}px` : "auto";
-    return resolvedSrc ? (_jsx("img", { src: resolvedSrc, alt: alt, style: { width: w, height: h }, className: "object-cover border border-border" })) : (_jsx("div", { className: "bg-[var(--bg-hover)] border border-border flex items-center justify-center text-xs text-muted", style: { width: w, height: h }, children: alt || "Image" }));
-};
-// ── Feedback ────────────────────────────────────────────────────────
-const AlertComponent = (props) => {
-    const type = String(props.type ?? "info");
-    const borderCls = {
-        info: "border-accent",
-        success: "border-ok",
-        warning: "border-[var(--warn,#f39c12)]",
-        error: "border-destructive",
-    };
-    const textCls = {
-        info: "text-accent",
-        success: "text-ok",
-        warning: "text-[var(--warn,#f39c12)]",
-        error: "text-destructive",
-    };
-    return (_jsxs("div", { className: `border-l-[3px] ${borderCls[type] ?? ""} bg-[var(--bg-hover)] px-3 py-2`, children: [props.title ? (_jsx("div", { className: `text-xs font-bold ${textCls[type] ?? ""}`, children: String(props.title) })) : null, props.message ? (_jsx("div", { className: "text-xs text-txt mt-0.5", children: String(props.message) })) : null] }));
-};
-const ProgressComponent = (props) => {
-    const value = Number(props.value ?? 0);
-    const max = Number(props.max ?? 100);
-    const pct = Math.min(100, Math.max(0, (value / max) * 100));
-    return (_jsxs("div", { className: "flex flex-col gap-1", children: [props.label ? (_jsxs("div", { className: "flex justify-between text-xs", children: [_jsx("span", { className: "font-semibold", children: String(props.label) }), _jsxs("span", { className: "text-muted", children: [Math.round(pct), "%"] })] })) : null, _jsx("div", { className: "w-full h-2 bg-[var(--bg-hover)] border border-border overflow-hidden", children: _jsx("div", { className: "h-full bg-accent transition-[width] duration-300", style: { width: `${pct}%` } }) })] }));
-};
-const RatingComponent = (props) => {
-    const value = Number(props.value ?? 0);
-    const max = Number(props.max ?? 5);
-    return (_jsxs("div", { className: "flex flex-col gap-1", children: [props.label ? (_jsx("div", { className: "text-xs font-semibold", children: String(props.label) })) : null, _jsx("div", { className: "flex gap-0.5", children: Array.from({ length: max }, (_, i) => i + 1).map((starValue) => (_jsx("span", { className: `text-sm ${starValue <= value ? "text-[var(--warn,#f39c12)]" : "text-muted opacity-30"}`, children: "\u2605" }, starValue))) })] }));
-};
-const SkeletonComponent = (props) => {
-    const w = props.width ? String(props.width) : "100%";
-    const h = props.height ? String(props.height) : "20px";
-    const rounded = props.rounded ? "rounded" : "";
-    return (_jsx("div", { className: `bg-[var(--bg-hover)] animate-pulse ${rounded}`, style: { width: w, height: h } }));
-};
-const SpinnerComponent = (props) => {
-    const size = props.size === "lg"
-        ? "w-8 h-8"
-        : props.size === "sm"
-            ? "w-4 h-4"
-            : "w-6 h-6";
-    return (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: `${size} border-2 border-border border-t-accent rounded-full animate-spin` }), props.label ? (_jsx("span", { className: "text-xs text-muted", children: String(props.label) })) : null] }));
-};
-// ── Navigation ──────────────────────────────────────────────────────
-const ButtonComponent = (props, _children, ctx, el) => {
-    const variant = String(props.variant ?? "primary");
-    const cls = {
-        primary: "bg-accent text-accent-fg border-accent hover:opacity-90",
-        secondary: "bg-card text-txt border-border hover:bg-[var(--bg-hover)]",
-        danger: "bg-destructive text-white border-destructive hover:opacity-90",
-        ghost: "bg-transparent text-txt border-transparent hover:bg-[var(--bg-hover)]",
-    };
-    return (_jsx(Button, { type: "button", variant: variant === "danger"
-            ? "destructive"
-            : variant === "ghost"
-                ? "ghost"
-                : variant === "secondary"
-                    ? "outline"
-                    : "default", className: `px-3 py-1.5 text-xs font-medium transition-colors ${cls[variant] ?? cls.primary}`, disabled: !!props.disabled, onClick: () => fireEvent(el.on?.press, ctx), children: String(props.label ?? "Button") }));
-};
-const LinkComponent = (props, _children, ctx, el) => {
-    const safeHref = sanitizeLinkHref(props.href);
-    return (_jsx("a", { href: safeHref, className: "text-xs text-accent underline hover:opacity-80", target: props.external ? "_blank" : undefined, rel: props.external ? "noopener noreferrer" : undefined, onClick: (e) => {
-            if (el.on?.press) {
-                e.preventDefault();
-                fireEvent(el.on.press, ctx);
-            }
-        }, children: String(props.label ?? props.href ?? "Link") }));
-};
-const DropdownMenuComponent = (props, _children, ctx) => {
-    const [open, setOpen] = useState(false);
-    const items = props.items ?? [];
-    return (_jsxs("div", { className: "relative inline-block", children: [_jsxs(Button, { type: "button", variant: "outline", size: "sm", className: "px-3 py-1.5 text-xs", onClick: () => setOpen(!open), children: [String(props.label ?? "Menu"), " \u25BE"] }), open && (_jsx("div", { className: "absolute top-full left-0 mt-1 min-w-[120px] border border-border bg-card shadow-md z-10", children: items.map((item) => (_jsx(Button, { type: "button", variant: "ghost", className: "block w-full text-left px-3 py-1.5 text-xs hover:bg-[var(--bg-hover)] rounded-none justify-start h-auto", onClick: () => {
-                        setOpen(false);
-                        if (ctx.onAction)
-                            ctx.onAction("menuSelect", {
-                                value: item.value,
-                                label: item.label,
-                            });
-                    }, children: item.label }, item.value))) }))] }));
-};
-const TabsComponent = (props, _children, ctx) => {
-    const tabs = props.tabs ??
-        [];
-    const [value, setValue] = useStatePath(props.statePath, ctx);
-    const active = String(value ?? props.defaultValue ?? tabs[0]?.value ?? "");
-    const activeTab = tabs.find((t) => t.value === active);
-    return (_jsxs("div", { children: [_jsx("div", { className: "flex", children: tabs.map((tab) => (_jsx(Button, { type: "button", variant: "ghost", className: `px-3 py-1.5 text-xs rounded-none transition-colors h-auto ${tab.value === active
-                        ? "border-b-2 border-accent text-accent font-semibold"
-                        : "text-muted hover:text-txt"}`, onClick: () => setValue(tab.value), children: tab.label }, tab.value))) }), activeTab && _jsx("div", { className: "py-3 text-xs", children: activeTab.content })] }));
-};
-const PaginationComponent = (props, _children, ctx) => {
-    const total = Number(props.totalPages ?? 1);
-    const [value, setValue] = useStatePath(props.statePath, ctx);
-    const current = Number(value ?? 1);
-    return (_jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Button, { type: "button", variant: "outline", size: "sm", className: "px-2 py-1 text-xs disabled:opacity-40", disabled: current <= 1, onClick: () => setValue(current - 1), children: "\u2190" }), Array.from({ length: total }, (_, i) => i + 1).map((page) => (_jsx(Button, { type: "button", variant: page === current ? "default" : "outline", size: "sm", className: `px-2 py-1 text-xs ${page === current
-                    ? "bg-accent text-accent-fg border-accent"
-                    : "hover:bg-[var(--bg-hover)]"}`, onClick: () => setValue(page), children: page }, page))), _jsx(Button, { type: "button", variant: "outline", size: "sm", className: "px-2 py-1 text-xs disabled:opacity-40", disabled: current >= total, onClick: () => setValue(current + 1), children: "\u2192" })] }));
-};
-// ── Metric / KPI ────────────────────────────────────────────────────
-const MetricComponent = (props) => {
-    const trend = props.trend;
-    const trendColor = trend === "up"
-        ? "text-status-success"
-        : trend === "down"
-            ? "text-status-danger"
-            : "text-muted";
-    return (_jsxs("div", { className: "flex flex-col gap-0.5 p-3 rounded-lg border border-border bg-card", children: [_jsx("div", { className: "text-2xs text-muted uppercase tracking-wider font-medium", children: String(props.label ?? "") }), _jsxs("div", { className: "flex items-baseline gap-1.5", children: [_jsx("span", { className: "text-xl font-semibold text-[var(--txt)]", children: props.value != null ? String(props.value) : "—" }), props.unit != null && (_jsx("span", { className: "text-xs text-muted", children: String(props.unit) }))] }), props.change != null && (_jsx("div", { className: `text-xs-tight font-medium ${trendColor}`, children: String(props.change) }))] }));
-};
-// ── Visualization ───────────────────────────────────────────────────
-const BarGraphComponent = (props) => {
-    const data = props.data ?? [];
-    const maxVal = Math.max(...data.map((d) => d.value), 1);
-    return (_jsxs("div", { children: [props.title ? (_jsx("div", { className: "text-xs font-bold mb-2", children: String(props.title) })) : null, _jsx("div", { className: "flex items-end gap-2 h-[100px]", children: data.map((d) => (_jsxs("div", { className: "flex-1 flex flex-col items-center gap-0.5", children: [_jsx("div", { className: "text-3xs text-muted", children: d.value }), _jsx("div", { className: "w-full bg-accent transition-all duration-300 min-h-[2px]", style: { height: `${(d.value / maxVal) * 80}px` } }), _jsx("div", { className: "text-3xs text-muted truncate max-w-full", children: d.label })] }, d.label))) })] }));
-};
-const LineGraphComponent = (props) => {
-    const data = props.data ?? [];
-    const maxVal = Math.max(...data.map((d) => d.value), 1);
-    const h = 80;
-    const w = 100;
-    const points = data.map((d, i) => ({
-        x: (i / Math.max(data.length - 1, 1)) * w,
-        y: h - (d.value / maxVal) * h,
-    }));
-    const pathD = points
-        .map((p, i) => `${i === 0 ? "M" : "L"} ${p.x} ${p.y}`)
-        .join(" ");
-    return (_jsxs("div", { children: [props.title ? (_jsx("div", { className: "text-xs font-bold mb-2", children: String(props.title) })) : null, _jsxs("svg", { viewBox: `0 0 ${w} ${h + 20}`, className: "w-full h-[100px]", preserveAspectRatio: "none", children: [_jsx("title", { children: String(props.title ?? "Line graph") }), _jsx("path", { d: pathD, fill: "none", stroke: "var(--accent)", strokeWidth: "2", vectorEffect: "non-scaling-stroke" }), points.map((p) => (_jsx("circle", { cx: p.x, cy: p.y, r: "3", fill: "var(--accent)", vectorEffect: "non-scaling-stroke" }, `${p.x}:${p.y}`))), data.map((d, i) => (_jsx("text", { x: points[i].x, y: h + 14, textAnchor: "middle", fontSize: "8", fill: "var(--muted)", children: d.label }, `${d.label}:${d.value}`)))] })] }));
-};
-// ── Interaction ─────────────────────────────────────────────────────
-const TooltipComponent = (props) => {
-    const [show, setShow] = useState(false);
-    return (_jsxs(Button, { type: "button", variant: "ghost", className: "relative inline-block p-0 h-auto", onMouseEnter: () => setShow(true), onMouseLeave: () => setShow(false), onFocus: () => setShow(true), onBlur: () => setShow(false), onClick: () => setShow((prev) => !prev), children: [_jsx("span", { className: "text-xs text-accent underline cursor-help", children: String(props.text ?? "Hover") }), show && (_jsx("div", { className: "absolute bottom-full left-1/2 -translate-x-1/2 mb-1 px-2 py-1 text-2xs bg-txt text-card whitespace-nowrap z-10", children: String(props.content ?? "") }))] }));
-};
-const PopoverComponent = (props) => {
-    const [open, setOpen] = useState(false);
-    return (_jsxs("div", { className: "relative inline-block", children: [_jsx(Button, { type: "button", variant: "link", className: "text-xs text-accent underline p-0 h-auto", onClick: () => setOpen(!open), children: String(props.trigger ?? "Click") }), open && (_jsxs("div", { className: "absolute top-full left-0 mt-1 p-3 border border-border bg-card shadow-md z-10 min-w-[150px]", children: [_jsx("div", { className: "text-xs", children: String(props.content ?? "") }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", className: "text-2xs text-muted mt-1 hover:text-txt p-0 h-auto", onClick: () => setOpen(false), children: "Close" })] }))] }));
-};
-const CollapsibleComponent = (props, children) => {
-    const [open, setOpen] = useState(!!props.defaultOpen);
-    return (_jsxs("div", { className: "border border-border", children: [_jsxs(Button, { type: "button", variant: "ghost", className: "w-full flex items-center gap-2 px-3 py-2 text-xs font-semibold hover:bg-[var(--bg-hover)] transition-colors rounded-none justify-start h-auto", onClick: () => setOpen(!open), children: [_jsx("span", { className: "text-2xs transition-transform", style: { transform: open ? "rotate(90deg)" : "none" }, children: "\u25B6" }), String(props.title ?? "Collapsible")] }), open && _jsx("div", { className: "px-3 pb-3", children: children })] }));
-};
-const AccordionComponent = (props) => {
-    const items = props.items ?? [];
-    const isSingle = props.type === "single";
-    const [openSet, setOpenSet] = useState(new Set());
-    const toggle = (idx) => {
-        setOpenSet((prev) => {
-            const next = isSingle ? new Set() : new Set(prev);
-            if (prev.has(idx))
-                next.delete(idx);
-            else
-                next.add(idx);
-            return next;
-        });
-    };
-    return (_jsx("div", { className: "border border-border divide-y divide-border", children: items.map((item, i) => (_jsxs("div", { children: [_jsxs(Button, { type: "button", variant: "ghost", className: "w-full flex items-center gap-2 px-3 py-2 text-xs font-semibold hover:bg-[var(--bg-hover)] rounded-none justify-start h-auto", onClick: () => toggle(i), children: [_jsx("span", { className: "text-2xs transition-transform", style: { transform: openSet.has(i) ? "rotate(90deg)" : "none" }, children: "\u25B6" }), item.title] }), openSet.has(i) && (_jsx("div", { className: "px-3 pb-3 text-xs", children: item.content }))] }, `${item.title}:${item.content}`))) }));
-};
-const DialogComponent = (props, children, ctx) => {
-    const openPath = props.openPath;
-    const isOpen = openPath ? !!getByPath(ctx.state, openPath) : false;
-    if (!isOpen)
-        return null;
-    const close = () => {
-        if (openPath)
-            ctx.setState(openPath, false);
-    };
-    return (_jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50", onClick: (e) => {
-            if (e.target === e.currentTarget)
-                close();
-        }, onKeyDown: (e) => {
-            if (e.key === "Escape" || e.key === "Enter" || e.key === " ") {
-                e.preventDefault();
-                close();
-            }
-        }, role: "dialog", "aria-modal": "true", children: _jsxs("div", { className: "w-full max-w-md border border-border bg-card p-5 shadow-lg", children: [_jsxs("div", { className: "flex items-center justify-between mb-3", children: [_jsxs("div", { children: [props.title ? (_jsx("div", { className: "font-bold text-sm", children: String(props.title) })) : null, props.description ? (_jsx("div", { className: "text-xs text-muted mt-0.5", children: String(props.description) })) : null] }), _jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "text-muted hover:text-txt text-lg leading-none px-1 h-auto w-auto", onClick: close, children: "\u00D7" })] }), children] }) }));
-};
-const DrawerComponent = (props, children, ctx) => {
-    const openPath = props.openPath;
-    const isOpen = openPath ? !!getByPath(ctx.state, openPath) : false;
-    if (!isOpen)
-        return null;
-    const close = () => {
-        if (openPath)
-            ctx.setState(openPath, false);
-    };
-    return (_jsx("div", { className: "fixed inset-0 z-50 flex items-end bg-black/50", onClick: (e) => {
-            if (e.target === e.currentTarget)
-                close();
-        }, onKeyDown: (e) => {
-            if (e.key === "Escape" || e.key === "Enter" || e.key === " ") {
-                e.preventDefault();
-                close();
-            }
-        }, role: "dialog", "aria-modal": "true", children: _jsxs("div", { className: "w-full max-h-[80vh] bg-card p-5 shadow-lg overflow-y-auto animate-[slide-up_200ms_ease]", children: [_jsx("div", { className: "w-10 h-1 bg-border mx-auto mb-3 rounded-full" }), props.title ? (_jsx("div", { className: "font-bold text-sm", children: String(props.title) })) : null, props.description ? (_jsx("div", { className: "text-xs text-muted mt-0.5 mb-3", children: String(props.description) })) : null, children] }) }));
-};
-// ── Component map ───────────────────────────────────────────────────
-const COMPONENTS = {
-    // Layout
-    Stack: StackComponent,
-    Grid: GridComponent,
-    Card: CardComponent,
-    Separator: SeparatorComponent,
-    // Typography
-    Heading: HeadingComponent,
-    Text: TextComponent,
-    // Form
-    Input: InputComponent,
-    Textarea: TextareaComponent,
-    Select: SelectComponent,
-    Checkbox: CheckboxComponent,
-    Radio: RadioComponent,
-    Switch: SwitchComponent,
-    Slider: SliderComponent,
-    Toggle: ToggleComponent,
-    ToggleGroup: ToggleGroupComponent,
-    ButtonGroup: ButtonGroupComponent,
-    // Data
-    Table: TableComponent,
-    Carousel: CarouselComponent,
-    Badge: BadgeComponent,
-    Avatar: AvatarComponent,
-    Image: ImageComponent,
-    // Feedback
-    Alert: AlertComponent,
-    Progress: ProgressComponent,
-    Rating: RatingComponent,
-    Skeleton: SkeletonComponent,
-    Spinner: SpinnerComponent,
-    // Navigation
-    Button: ButtonComponent,
-    Link: LinkComponent,
-    DropdownMenu: DropdownMenuComponent,
-    Tabs: TabsComponent,
-    Pagination: PaginationComponent,
-    // Metric
-    Metric: MetricComponent,
-    // Visualization
-    BarGraph: BarGraphComponent,
-    LineGraph: LineGraphComponent,
-    // Interaction
-    Tooltip: TooltipComponent,
-    Popover: PopoverComponent,
-    Collapsible: CollapsibleComponent,
-    Accordion: AccordionComponent,
-    Dialog: DialogComponent,
-    Drawer: DrawerComponent,
-};
-// ══════════════════════════════════════════════════════════════════════
-// ELEMENT RENDERER
-// ══════════════════════════════════════════════════════════════════════
-function ElementRenderer({ elementId }) {
-    const { t } = useApp();
-    const ctx = useUiCtx();
-    const el = ctx.spec.elements[elementId];
-    if (!el)
-        return null;
-    // Visibility check
-    if (el.visible && !evaluateUiVisibility(el.visible, ctx.state, ctx.auth)) {
-        return null;
-    }
-    const component = COMPONENTS[el.type];
-    if (!component) {
-        return (_jsxs("div", { className: "text-2xs text-destructive border border-dashed border-destructive p-2", children: [t("ui-renderer.UnknownComponent"), " ", el.type] }));
-    }
-    const resolvedProps = resolveProps(el.props, ctx);
-    // Handle repeat / list rendering
-    if (el.repeat) {
-        const listData = getByPath(ctx.state, el.repeat.path);
-        if (!Array.isArray(listData))
-            return null;
-        return (_jsx(_Fragment, { children: listData.map((item) => {
-                const itemCtx = { ...ctx, repeatItem: item };
-                const childNodes = el.children.map((childId) => (_jsx(UiContext.Provider, { value: itemCtx, children: _jsx(ElementRenderer, { elementId: childId }) }, childId)));
-                const repeatKey = el.repeat?.key;
-                const itemKey = String(repeatKey != null ? item[repeatKey] : Math.random());
-                return (_jsx(React.Fragment, { children: component(resolvedProps, childNodes, itemCtx, el) }, itemKey));
-            }) }));
-    }
-    // Normal rendering: resolve children
-    const childNodes = el.children.map((childId) => (_jsx(ElementRenderer, { elementId: childId }, childId)));
-    return _jsx(_Fragment, { children: component(resolvedProps, childNodes, ctx, el) });
-}
-export function UiRenderer({ spec, onAction, loading, auth, validators, }) {
-    const [state, setStateRaw] = useState(() => ({
-        ...spec.state,
-    }));
-    const [fieldErrors, setFieldErrors] = useState({});
-    const setState = useCallback((path, value) => {
-        setStateRaw((prev) => {
-            const next = { ...prev };
-            setByPath(next, path, value);
-            return next;
-        });
-    }, []);
-    const validateField = useCallback((statePath) => {
-        // Find the element that has this statePath
-        for (const el of Object.values(spec.elements)) {
-            if (el.props.statePath === statePath && el.validation) {
-                const value = getByPath(state, statePath);
-                const errors = runValidation(el.validation.checks, value, validators);
-                setFieldErrors((prev) => ({ ...prev, [statePath]: errors }));
-                return;
-            }
-        }
-    }, [spec.elements, state, validators]);
-    const ctx = useMemo(() => ({
-        spec,
-        state,
-        setState,
-        onAction,
-        auth,
-        loading,
-        validators,
-        fieldErrors,
-        validateField,
-    }), [
-        spec,
-        state,
-        setState,
-        onAction,
-        auth,
-        loading,
-        validators,
-        fieldErrors,
-        validateField,
-    ]);
-    // Loading skeleton when no elements
-    if (loading && Object.keys(spec.elements).length === 0) {
-        return (_jsxs("div", { className: "flex flex-col gap-3 animate-pulse", children: [_jsx("div", { className: "h-4 bg-[var(--bg-hover)] w-3/4" }), _jsx("div", { className: "h-3 bg-[var(--bg-hover)] w-1/2" }), _jsx("div", { className: "h-3 bg-[var(--bg-hover)] w-5/6" })] }));
-    }
-    return (_jsx(UiContext.Provider, { value: ctx, children: _jsx(ElementRenderer, { elementId: spec.root }) }));
-}
-/** Get the full list of supported component types. */
-export function getSupportedComponents() {
-    return Object.keys(COMPONENTS);
-}