@elizaos/ui 2.0.0-alpha.85 → 2.0.0-beta.2

package/components/config-ui/ui-renderer.js

@@ -0,0 +1,826 @@
+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.js";
+import { useApp } from "../../state/index.js";
+import { confirmDesktopAction, resolveAppAssetUrl } from "../../utils/index.js";
+import { ConfigFieldErrors, getConfigInputClassName, getConfigTextareaClassName, } from "./config-control-primitives.js";
+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);
+}