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

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

@@ -1,874 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Button, Checkbox, SELECT_FLOATING_LAYER_NAME, SELECT_FLOATING_LAYER_Z_INDEX, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Switch, } from "@elizaos/ui";
-import { ChevronDown, X } from "lucide-react";
-import React, { useCallback, useEffect, useRef, useState } from "react";
-import { createPortal } from "react-dom";
-import { resolveDynamic } from "../../config/config-catalog";
-import { useApp } from "../../state";
-import { getConfigInputClassName, getConfigTextareaClassName, } from "./config-control-primitives";
-// ── Action binding helper ──────────────────────────────────────────────
-/**
- * Resolve DynamicValue params and fire the onAction callback.
- * No-ops when the binding or onAction is missing.
- */
-function fireAction(props, eventName) {
-    const binding = props.hint.on?.[eventName];
-    if (!binding || !props.onAction)
-        return;
-    // Resolve any DynamicValue params against a state snapshot built from the
-    // current field value (keyed by the field's own key).  The resolveDynamic
-    // function handles both literal values and { path } references.
-    let resolvedParams;
-    if (binding.params) {
-        const state = { [props.key]: props.value };
-        resolvedParams = {};
-        for (const [k, v] of Object.entries(binding.params)) {
-            resolvedParams[k] = resolveDynamic(v, state);
-        }
-    }
-    void props.onAction(binding.action, resolvedParams);
-}
-function inputCls(hasError) {
-    return getConfigInputClassName({ hasError });
-}
-function textareaCls(hasError, className) {
-    return getConfigTextareaClassName({ hasError, className });
-}
-// ── 1. Text ─────────────────────────────────────────────────────────────
-/** Single-line text input. Fallback renderer for unresolved field types. */
-export function renderTextField(props) {
-    const value = props.isSet ? String(props.value ?? "") : "";
-    const placeholder = props.hint.placeholder ??
-        (props.schema.default != null
-            ? `Default: ${props.schema.default}`
-            : "Enter value...");
-    return (_jsx("input", { className: inputCls(!!props.errors?.length), type: "text", defaultValue: value, placeholder: placeholder, "data-config-key": props.key, "data-field-type": "text", disabled: props.readonly, onChange: (e) => {
-            props.onChange(e.target.value);
-            fireAction(props, "change");
-        }, onBlur: () => fireAction(props, "blur"), onClick: () => fireAction(props, "click") }));
-}
-// ── 2. Password ─────────────────────────────────────────────────────────
-/** Masked password input with show/hide toggle and async onReveal for server-backed decryption. */
-export function renderPasswordField(props) {
-    return _jsx(PasswordFieldInner, { fp: props });
-}
-function PasswordFieldInner({ fp: props }) {
-    const maskedValue = props.isSet ? String(props.value ?? "") : "";
-    const placeholder = props.isSet
-        ? `Current: ${maskedValue || "********"}  (leave blank to keep)`
-        : (props.hint.placeholder ?? "Enter value...");
-    const [visible, setVisible] = useState(false);
-    const [busy, setBusy] = useState(false);
-    const [fieldValue, setFieldValue] = useState("");
-    const inputRef = useRef(null);
-    const onReveal = props.onReveal;
-    const handleToggle = useCallback(async () => {
-        if (visible) {
-            // Hide — just toggle visibility, value stays in React state
-            setVisible(false);
-            return;
-        }
-        // Reveal: fetch the real value from the server
-        if (onReveal) {
-            setBusy(true);
-            const realValue = await onReveal();
-            setBusy(false);
-            if (realValue != null) {
-                setVisible(true);
-                setFieldValue(realValue);
-                props.onChange(realValue);
-            }
-        }
-        else {
-            // Fallback: just toggle type (shows whatever is in the input)
-            setVisible(true);
-        }
-    }, [visible, onReveal, props]);
-    return (_jsxs("div", { className: "flex", children: [_jsx("input", { ref: inputRef, className: "flex-1 px-3 py-2 border border-border border-r-0 bg-card text-sm font-[var(--mono)] transition-all focus:border-accent focus:outline-none focus:ring-1 focus:ring-accent box-border h-9 rounded-l-sm placeholder:text-muted placeholder:opacity-60", type: visible ? "text" : "password", value: fieldValue, placeholder: placeholder, "data-config-key": props.key, "data-field-type": "password", onChange: (e) => {
-                    setFieldValue(e.target.value);
-                    props.onChange(e.target.value);
-                    fireAction(props, "change");
-                }, onBlur: () => fireAction(props, "blur") }), _jsx(Button, { type: "button", variant: "outline", size: "default", className: "px-3 border border-border bg-bg-hover text-xs-tight text-muted whitespace-nowrap min-w-[56px] text-center transition-colors hover:bg-surface hover:text-txt h-9 font-medium rounded-l-none rounded-r-sm", onClick: () => {
-                    void handleToggle();
-                    fireAction(props, "click");
-                }, title: visible ? "Hide value" : "Reveal value", children: busy ? "\u2026" : visible ? "\u{1F441} Hide" : "\u{1F441} Show" })] }));
-}
-// ── 3. Number ───────────────────────────────────────────────────────────
-/** Numeric input with min/max/step attributes derived from schema and hints. */
-export function renderNumberField(props) {
-    return _jsx(NumberFieldInner, { fp: props });
-}
-function NumberFieldInner({ fp: props }) {
-    const minVal = props.schema.minimum ?? props.hint.min ?? undefined;
-    const maxVal = props.schema.maximum ?? props.hint.max ?? undefined;
-    const stepVal = props.hint.step ?? 1;
-    const unit = props.hint.unit;
-    const placeholder = props.hint.placeholder ??
-        (props.schema.default != null
-            ? `Default: ${props.schema.default}`
-            : "Enter number...");
-    const initial = props.isSet ? String(props.value ?? "") : "";
-    const [val, setVal] = useState(initial);
-    const hasRange = minVal != null || maxVal != null;
-    const step = (direction) => {
-        const current = val === "" ? 0 : Number(val);
-        if (Number.isNaN(current))
-            return;
-        let next = current + direction * stepVal;
-        if (minVal != null && next < minVal)
-            next = minVal;
-        if (maxVal != null && next > maxVal)
-            next = maxVal;
-        const s = String(next);
-        setVal(s);
-        props.onChange(s);
-        fireAction(props, "change");
-    };
-    return (_jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-1.5", children: [!props.readonly && (_jsx(Button, { type: "button", variant: "outline", size: "default", className: "px-2 py-1.5 bg-transparent text-sm text-muted transition-colors hover:bg-surface hover:text-txt h-9 rounded-sm font-mono select-none", onClick: () => step(-1), children: "\u2212" })), _jsx("input", { className: `${inputCls(!!props.errors?.length)} ${unit ? "flex-1" : "w-full"} text-center`, type: "number", value: val, placeholder: placeholder, min: minVal, max: maxVal, step: stepVal, "data-config-key": props.key, "data-field-type": "number", disabled: props.readonly, onChange: (e) => {
-                            setVal(e.target.value);
-                            props.onChange(e.target.value);
-                            fireAction(props, "change");
-                        }, onBlur: () => fireAction(props, "blur"), onClick: () => fireAction(props, "click") }), !props.readonly && (_jsx(Button, { type: "button", variant: "outline", size: "default", className: "px-2 py-1.5 bg-transparent text-sm text-muted transition-colors hover:bg-surface hover:text-txt h-9 rounded-sm font-mono select-none", onClick: () => step(1), children: "+" })), unit && (_jsx("span", { className: "text-xs-tight text-muted font-medium shrink-0 min-w-[20px]", children: unit }))] }), hasRange && (_jsx("div", { className: "text-2xs text-muted mt-0.5 opacity-70", children: minVal != null && maxVal != null
-                    ? `Range: ${minVal}–${maxVal}${unit ? ` ${unit}` : ""}`
-                    : minVal != null
-                        ? `Min: ${minVal}${unit ? ` ${unit}` : ""}`
-                        : `Max: ${maxVal}${unit ? ` ${unit}` : ""}` }))] }));
-}
-// ── 4. Boolean ──────────────────────────────────────────────────────────
-/** Pill-shaped toggle switch. Accepts boolean or string 'true'/'false' values. */
-export function renderBooleanField(props) {
-    return _jsx(BooleanFieldInner, { fp: props });
-}
-function BooleanFieldInner({ fp: props }) {
-    const val = props.value === true || props.value === "true" || props.value === "1";
-    const initialVal = props.isSet
-        ? val
-        : props.schema.default === true || props.schema.default === "true";
-    const [localVal, setLocalVal] = useState(initialVal);
-    const handleToggle = () => {
-        const next = !localVal;
-        setLocalVal(next);
-        props.onChange(String(next));
-        fireAction(props, "change");
-    };
-    return (_jsxs("div", { className: "flex items-center gap-2.5", "data-config-key": props.key, "data-field-type": "boolean", children: [_jsx(Switch, { checked: localVal, disabled: props.readonly, onCheckedChange: () => {
-                    handleToggle();
-                    fireAction(props, "click");
-                } }), _jsx("span", { className: `text-xs transition-colors ${localVal ? "text-txt font-medium" : "text-muted"}`, children: localVal ? "Enabled" : "Disabled" })] }));
-}
-// ── 5. URL ──────────────────────────────────────────────────────────────
-/** URL input with type="url" browser validation. */
-export function renderUrlField(props) {
-    const value = props.isSet ? String(props.value ?? "") : "";
-    const placeholder = props.hint.placeholder ??
-        (props.schema.default != null
-            ? `Default: ${props.schema.default}`
-            : "https://...");
-    return (_jsx("input", { className: inputCls(!!props.errors?.length), type: "url", defaultValue: value, placeholder: placeholder, "data-config-key": props.key, "data-field-type": "url", disabled: props.readonly, onChange: (e) => {
-            props.onChange(e.target.value);
-            fireAction(props, "change");
-        }, onBlur: () => fireAction(props, "blur"), onClick: () => fireAction(props, "click") }));
-}
-// ── 6. Select ───────────────────────────────────────────────────────────
-/** Dropdown select. Options from hint.options or schema.enum. */
-export function RenderSelectField(props) {
-    const { t } = useApp();
-    const enhancedOptions = props.hint.options;
-    const plainOptions = props.schema.enum ??
-        props.schema.oneOf?.map((o) => String(o.const ?? o.description ?? "")) ??
-        [];
-    const allOptions = enhancedOptions
-        ? enhancedOptions.map((o) => ({
-            value: o.value,
-            label: o.label,
-            description: o.description,
-        }))
-        : plainOptions.map((o) => ({
-            value: o,
-            label: o,
-            description: undefined,
-        }));
-    const value = props.isSet ? String(props.value ?? "") : "";
-    const effectiveValue = value || String(props.schema.default ?? "");
-    const useSearch = allOptions.length >= 5;
-    if (useSearch) {
-        return (_jsx(SearchableSelectInner, { fp: props, options: allOptions, effectiveValue: effectiveValue }));
-    }
-    return (_jsxs(Select, { defaultValue: effectiveValue, disabled: props.readonly, onValueChange: (value) => {
-            props.onChange(value === "__none__" ? "" : value);
-            fireAction(props, "change");
-            fireAction(props, "blur");
-        }, onOpenChange: (open) => {
-            if (open)
-                fireAction(props, "click");
-        }, children: [_jsx(SelectTrigger, { className: inputCls(!!props.errors?.length), "data-config-key": props.key, "data-field-type": "select", children: _jsx(SelectValue, { placeholder: !props.required
-                        ? t("config-field.None", { defaultValue: "None" })
-                        : undefined }) }), _jsxs(SelectContent, { children: [!props.required && (_jsx(SelectItem, { value: "__none__", children: t("config-field.None", { defaultValue: "None" }) })), allOptions
-                        .filter((opt) => opt.value !== "")
-                        .map((opt) => (_jsxs(SelectItem, { value: opt.value, children: [opt.label, opt.description ? ` — ${opt.description}` : ""] }, opt.value)))] })] }));
-}
-function SearchableSelectInner({ fp: props, options, effectiveValue, }) {
-    const { t } = useApp();
-    const matchingOpt = options.find((o) => o.value === effectiveValue);
-    const [inputVal, setInputVal] = useState(matchingOpt?.label ?? effectiveValue);
-    const [open, setOpen] = useState(false);
-    const [filter, setFilter] = useState("");
-    const triggerRef = useRef(null);
-    const dropdownRef = useRef(null);
-    const [dropdownStyle, setDropdownStyle] = useState({});
-    const filtered = filter
-        ? options.filter((o) => o.label.toLowerCase().includes(filter.toLowerCase()) ||
-            o.value.toLowerCase().includes(filter.toLowerCase()))
-        : options;
-    const select = useCallback((opt) => {
-        props.onChange(opt.value);
-        setInputVal(opt.label);
-        setOpen(false);
-        setFilter("");
-        fireAction(props, "change");
-    }, [props]);
-    // Compute portal position synchronously from the trigger rect.
-    // Called in the click handler so the style is set before the portal renders.
-    const computeDropdownStyle = useCallback(() => {
-        if (!triggerRef.current)
-            return {};
-        const rect = triggerRef.current.getBoundingClientRect();
-        return {
-            position: "fixed",
-            top: rect.bottom + 4,
-            left: rect.left,
-            width: rect.width,
-            zIndex: SELECT_FLOATING_LAYER_Z_INDEX,
-        };
-    }, []);
-    // Close on click outside
-    useEffect(() => {
-        if (!open)
-            return;
-        const handler = (e) => {
-            const target = e.target;
-            if (triggerRef.current?.contains(target) ||
-                dropdownRef.current?.contains(target))
-                return;
-            setOpen(false);
-            setFilter("");
-        };
-        document.addEventListener("mousedown", handler);
-        return () => document.removeEventListener("mousedown", handler);
-    }, [open]);
-    // Close on page/ancestor scroll because the fixed-position portal would
-    // drift, but keep the menu open while its own options list scrolls.
-    useEffect(() => {
-        if (!open)
-            return;
-        const handler = (event) => {
-            const target = event.target;
-            if (target instanceof Node && dropdownRef.current?.contains(target)) {
-                return;
-            }
-            setOpen(false);
-            setFilter("");
-        };
-        window.addEventListener("scroll", handler, true);
-        return () => window.removeEventListener("scroll", handler, true);
-    }, [open]);
-    return (_jsxs("div", { children: [_jsxs(Button, { ref: triggerRef, type: "button", variant: "outline", className: `${inputCls(!!props.errors?.length)} text-left flex items-center justify-between gap-2 cursor-pointer`, disabled: props.readonly, onClick: () => {
-                    if (!open)
-                        setDropdownStyle(computeDropdownStyle());
-                    setOpen(!open);
-                    setFilter("");
-                }, "data-config-key": props.key, "data-field-type": "select", children: [_jsx("span", { className: inputVal ? "" : "text-muted opacity-60", children: inputVal || "Select..." }), _jsx("span", { className: "text-muted text-2xs shrink-0", children: open ? "\u25B2" : "\u25BC" })] }), open &&
-                createPortal(_jsxs("div", { ref: dropdownRef, "data-floating-layer": SELECT_FLOATING_LAYER_NAME, style: dropdownStyle, className: "border border-border bg-card shadow-lg rounded-sm", children: [_jsx("div", { className: "p-1.5", children: _jsx("input", { 
-                                // biome-ignore lint/a11y/noAutofocus: dropdown search needs immediate focus
-                                autoFocus: true, className: "w-full px-2 py-1.5 border border-border bg-bg text-xs font-[var(--mono)] focus:border-accent focus:outline-none rounded-sm", type: "text", value: filter, placeholder: `Search ${options.length} options...`, onChange: (e) => setFilter(e.target.value), onKeyDown: (e) => {
-                                    if (e.key === "Escape") {
-                                        setOpen(false);
-                                        setFilter("");
-                                    }
-                                    else if (e.key === "Enter" && filtered.length === 1) {
-                                        select(filtered[0]);
-                                    }
-                                } }) }), _jsxs("div", { className: "overflow-y-auto overscroll-contain max-h-[220px]", children: [!props.required && (_jsx(Button, { type: "button", variant: "ghost", className: "w-full text-left px-3 py-1.5 text-xs text-muted hover:bg-bg-hover transition-colors italic rounded-none justify-start h-auto", onClick: () => {
-                                        props.onChange("");
-                                        setInputVal("");
-                                        setOpen(false);
-                                        setFilter("");
-                                        fireAction(props, "change");
-                                    }, children: t("config-field.None", { defaultValue: "None" }) })), filtered.length === 0 && (_jsx("div", { className: "px-3 py-3 text-xs text-muted text-center", children: t("config-field.NoMatches", {
-                                        defaultValue: "No matches",
-                                    }) })), filtered.map((opt) => (_jsxs(Button, { type: "button", variant: "ghost", className: `w-full text-left px-3 py-1.5 text-xs hover:bg-bg-hover transition-colors rounded-none justify-start h-auto ${opt.value === effectiveValue
-                                        ? "bg-[color-mix(in_srgb,var(--accent)_10%,var(--card))] text-accent font-medium"
-                                        : ""}`, onClick: () => select(opt), children: [opt.label, opt.description && (_jsx("span", { className: "text-muted ml-1.5 text-xs-tight", children: opt.description }))] }, opt.value)))] }), _jsxs("div", { className: "px-3 py-1 text-2xs text-muted", children: [filtered.length, " of ", options.length, " ", t("config-field.options", { defaultValue: "options" })] })] }), document.body)] }));
-}
-// ── 7. Textarea ─────────────────────────────────────────────────────────
-/** Multi-line text input with auto-resize. Auto-detected for maxLength > 200. */
-export function renderTextareaField(props) {
-    return _jsx(TextareaFieldInner, { fp: props });
-}
-function TextareaFieldInner({ fp: props }) {
-    const value = props.isSet ? String(props.value ?? "") : "";
-    const placeholder = props.hint.placeholder ?? "Enter text...";
-    const textareaRef = useRef(null);
-    const autoResize = useCallback(() => {
-        const el = textareaRef.current;
-        if (!el)
-            return;
-        // Check if field-sizing is supported — if so, CSS handles it
-        if (globalThis.CSS?.supports?.("field-sizing", "content"))
-            return;
-        el.style.height = "auto";
-        el.style.height = `${Math.max(72, el.scrollHeight)}px`;
-    }, []);
-    return (_jsx("textarea", { ref: textareaRef, className: textareaCls(!!props.errors?.length), style: { fieldSizing: "content" }, defaultValue: value, placeholder: placeholder, "data-config-key": props.key, "data-field-type": "textarea", disabled: props.readonly, onChange: (e) => {
-            props.onChange(e.target.value);
-            fireAction(props, "change");
-            autoResize();
-        }, onBlur: () => fireAction(props, "blur"), onClick: () => fireAction(props, "click"), onFocus: autoResize }));
-}
-// ── 8. Email ────────────────────────────────────────────────────────────
-/** Email input with type="email" browser validation. */
-export function renderEmailField(props) {
-    const value = props.isSet ? String(props.value ?? "") : "";
-    const placeholder = props.hint.placeholder ?? "user@example.com";
-    return (_jsx("input", { className: inputCls(!!props.errors?.length), type: "email", defaultValue: value, placeholder: placeholder, "data-config-key": props.key, "data-field-type": "email", disabled: props.readonly, onChange: (e) => {
-            props.onChange(e.target.value);
-            fireAction(props, "change");
-        }, onBlur: () => fireAction(props, "blur"), onClick: () => fireAction(props, "click") }));
-}
-// ── 9. Color ────────────────────────────────────────────────────────────
-/** Color picker swatch paired with a hex text input. */
-export function renderColorField(props) {
-    return _jsx(ColorFieldInner, { fp: props });
-}
-function ColorFieldInner({ fp: props }) {
-    const initial = props.isSet ? String(props.value ?? "#000000") : "#000000";
-    const [color, setColor] = useState(initial);
-    const handleChange = (newColor) => {
-        setColor(newColor);
-        props.onChange(newColor);
-        fireAction(props, "change");
-    };
-    return (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("input", { className: "w-[36px] h-9 border border-border p-0.5 cursor-pointer bg-transparent rounded-sm [&::-webkit-color-swatch-wrapper]:p-0 [&::-webkit-color-swatch]:border-none [&::-webkit-color-swatch]:rounded-sm", type: "color", value: color, "data-config-key": props.key, "data-field-type": "color", disabled: props.readonly, onChange: (e) => handleChange(e.target.value), onBlur: () => fireAction(props, "blur"), onClick: () => fireAction(props, "click") }), _jsx("input", { className: `${inputCls(!!props.errors?.length)} flex-1`, type: "text", value: color, placeholder: "#000000", "data-config-key": props.key, "data-field-type": "color-text", disabled: props.readonly, onChange: (e) => handleChange(e.target.value), onBlur: () => fireAction(props, "blur"), onClick: () => fireAction(props, "click") })] }));
-}
-// ── 10. Radio ───────────────────────────────────────────────────────────
-/** Vertical radio button group. Supports per-option descriptions. */
-export function renderRadioField(props) {
-    return _jsx(RadioFieldInner, { fp: props });
-}
-function RadioFieldInner({ fp: props }) {
-    const options = props.hint.options ??
-        (props.schema.enum ?? []).map((v) => ({
-            value: String(v),
-            label: String(v),
-        }));
-    const initial = props.isSet
-        ? String(props.value ?? "")
-        : String(props.schema.default ?? "");
-    const [selected, setSelected] = useState(initial);
-    const handleChange = (val) => {
-        setSelected(val);
-        props.onChange(val);
-        fireAction(props, "change");
-    };
-    return (_jsx("div", { className: "flex flex-col gap-1.5", "data-config-key": props.key, "data-field-type": "radio", children: options.map((opt) => (_jsxs("label", { className: "flex items-start gap-2 cursor-pointer text-sm", children: [_jsx("input", { type: "radio", name: props.key, value: opt.value, checked: opt.value === selected, disabled: props.readonly || opt.disabled, onChange: () => handleChange(opt.value), onClick: () => fireAction(props, "click"), onBlur: () => fireAction(props, "blur"), className: "mt-0.5 shrink-0" }), _jsxs("span", { children: [opt.label, opt.description && (_jsx("div", { className: "text-xs-tight text-muted mt-px", children: opt.description }))] })] }, opt.value))) }));
-}
-// ── 11. Multiselect ─────────────────────────────────────────────────────
-/** Checkbox group for selecting multiple values from options. */
-export function renderMultiselectField(props) {
-    return _jsx(MultiselectFieldInner, { fp: props });
-}
-function MultiselectFieldInner({ fp: props }) {
-    const options = props.hint.options ??
-        (props.schema.items?.enum ?? []).map((v) => ({
-            value: String(v),
-            label: String(v),
-        }));
-    const rawVal = props.isSet ? props.value : [];
-    const initialSet = new Set(Array.isArray(rawVal) ? rawVal.map(String) : []);
-    const [selected, setSelected] = useState(initialSet);
-    const toggle = (optValue) => {
-        setSelected((prev) => {
-            const next = new Set(prev);
-            if (next.has(optValue)) {
-                next.delete(optValue);
-            }
-            else {
-                next.add(optValue);
-            }
-            props.onChange([...next]);
-            fireAction(props, "change");
-            return next;
-        });
-    };
-    const remove = (optValue) => {
-        setSelected((prev) => {
-            const next = new Set(prev);
-            next.delete(optValue);
-            props.onChange([...next]);
-            fireAction(props, "change");
-            return next;
-        });
-    };
-    const selectedOptions = options.filter((o) => selected.has(o.value));
-    return (_jsxs("div", { className: "flex flex-col gap-2", "data-config-key": props.key, "data-field-type": "multiselect", children: [selectedOptions.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-1", children: selectedOptions.map((opt) => (_jsxs("span", { className: "inline-flex items-center gap-1 px-2 py-0.5 text-xs-tight bg-accent-subtle text-accent border border-accent border-opacity-30 rounded-full", children: [opt.label, !props.readonly && (_jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "inline-flex items-center justify-center w-3.5 h-3.5 text-2xs rounded-full hover:bg-accent hover:text-accent-fg transition-colors", onClick: () => remove(opt.value), children: "\u00D7" }))] }, opt.value))) })), _jsx("div", { className: "flex flex-col gap-1", children: options.map((opt) => (_jsxs("label", { className: "flex items-center gap-2 cursor-pointer text-sm", children: [_jsx(Checkbox, { checked: selected.has(opt.value), disabled: props.readonly, onCheckedChange: () => {
-                                toggle(opt.value);
-                                fireAction(props, "click");
-                            } }), _jsx("span", { children: opt.label })] }, opt.value))) })] }));
-}
-// ── 12. Date ────────────────────────────────────────────────────────────
-/** Native date picker input. */
-export function renderDateField(props) {
-    const value = props.isSet ? String(props.value ?? "") : "";
-    const inputType = props.schema.format === "date-time" ? "datetime-local" : "date";
-    return (_jsx("input", { className: inputCls(!!props.errors?.length), type: inputType, defaultValue: value, "data-config-key": props.key, "data-field-type": "date", disabled: props.readonly, onChange: (e) => {
-            props.onChange(e.target.value);
-            fireAction(props, "change");
-        }, onBlur: () => fireAction(props, "blur"), onClick: () => fireAction(props, "click") }));
-}
-// ── 13. JSON ────────────────────────────────────────────────────────────
-/** JSON editor textarea with parse validation on blur. Shows inline error for invalid JSON. */
-export function renderJsonField(props) {
-    return _jsx(JsonFieldInner, { fp: props });
-}
-function JsonFieldInner({ fp: props }) {
-    const { t } = useApp();
-    const initial = props.isSet ? String(props.value ?? "") : "";
-    const [jsonError, setJsonError] = useState(null);
-    const handleBlur = (e) => {
-        const val = e.target.value.trim();
-        if (val) {
-            try {
-                const parsed = JSON.parse(val);
-                const jsonStr = JSON.stringify(parsed);
-                if (/__proto__|constructor\s*:/.test(jsonStr)) {
-                    setJsonError("Unsafe JSON: contains dangerous keys");
-                    return;
-                }
-                setJsonError(null);
-            }
-            catch (err) {
-                setJsonError(err instanceof Error ? err.message : "Invalid JSON");
-            }
-        }
-        else {
-            setJsonError(null);
-        }
-        fireAction(props, "blur");
-    };
-    return (_jsxs("div", { children: [_jsx("textarea", { className: textareaCls(Boolean(jsonError || props.errors?.length), "min-h-[100px]"), defaultValue: initial, placeholder: props.hint.placeholder ||
-                    t("config-field.KeyValue", { defaultValue: "Key-value JSON" }), rows: 6, "data-config-key": props.key, "data-field-type": "json", disabled: props.readonly, onChange: (e) => {
-                    props.onChange(e.target.value);
-                    fireAction(props, "change");
-                }, onBlur: handleBlur, onClick: () => fireAction(props, "click") }), jsonError && (_jsx("div", { className: "text-xs-tight text-destructive mt-1 leading-snug", children: jsonError }))] }));
-}
-// ── 14. Code ────────────────────────────────────────────────────────────
-/** Monospaced code editor textarea for templates and snippets. */
-export function renderCodeField(props) {
-    const value = props.isSet ? String(props.value ?? "") : "";
-    const placeholder = props.hint.placeholder ?? "Enter code...";
-    return (_jsx("textarea", { className: textareaCls(!!props.errors?.length, "min-h-[100px]"), defaultValue: value, placeholder: placeholder, rows: 6, "data-config-key": props.key, "data-field-type": "code", disabled: props.readonly, onChange: (e) => {
-            props.onChange(e.target.value);
-            fireAction(props, "change");
-        }, onBlur: () => fireAction(props, "blur"), onClick: () => fireAction(props, "click") }));
-}
-// ── 15. Array ───────────────────────────────────────────────────────────
-/** Add/remove items list. Max 100 items. Parses comma-separated strings. */
-export function renderArrayField(props) {
-    return _jsx(ArrayFieldInner, { fp: props });
-}
-function ArrayItem({ index, value, total, hasError, readonly, onChange, onRemove, onMoveUp, onMoveDown, onBlur, }) {
-    const { t } = useApp();
-    return (_jsxs("div", { className: "flex items-center gap-1", children: [!readonly && (_jsxs("div", { className: "flex flex-col shrink-0", children: [_jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "px-1 py-0 h-auto w-auto text-2xs leading-tight text-muted hover:text-txt disabled:opacity-30 disabled:cursor-not-allowed", onClick: onMoveUp, disabled: index === 0, title: t("config-field.MoveUp", {
-                            defaultValue: "Move up",
-                        }), children: "\u25B2" }), _jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "px-1 py-0 h-auto w-auto text-2xs leading-tight text-muted hover:text-txt disabled:opacity-30 disabled:cursor-not-allowed", onClick: onMoveDown, disabled: index === total - 1, title: t("config-field.MoveDown", {
-                            defaultValue: "Move down",
-                        }), children: _jsx(ChevronDown, { className: "w-3 h-3" }) })] })), _jsx("input", { className: `${inputCls(hasError)} flex-1`, type: "text", value: value, placeholder: `Item ${index + 1}`, disabled: readonly, onChange: (e) => onChange(e.target.value), onBlur: onBlur }), !readonly && (_jsx(Button, { type: "button", variant: "outline", size: "icon", className: "px-2 py-1.5 bg-bg-hover text-xs text-muted transition-colors hover:bg-surface hover:text-destructive h-9 rounded-sm", onClick: onRemove, children: _jsx(X, { className: "w-3 h-3" }) }))] }));
-}
-function ArrayFieldInner({ fp: props }) {
-    const { t } = useApp();
-    const rawVal = props.isSet ? props.value : [];
-    const initialItems = Array.isArray(rawVal)
-        ? rawVal.map(String)
-        : [];
-    const [items, setItems] = useState(initialItems);
-    const updateItems = (nextItems) => {
-        setItems(nextItems);
-        props.onChange(nextItems);
-        fireAction(props, "change");
-    };
-    const MAX_ARRAY_ITEMS = 100;
-    const addItem = () => {
-        if (items.length >= MAX_ARRAY_ITEMS)
-            return;
-        updateItems([...items, ""]);
-    };
-    const removeItem = (index) => {
-        updateItems(items.filter((_, i) => i !== index));
-    };
-    const changeItem = (index, value) => {
-        const next = [...items];
-        next[index] = value;
-        updateItems(next);
-    };
-    const moveItem = (from, to) => {
-        const next = [...items];
-        const [moved] = next.splice(from, 1);
-        next.splice(to, 0, moved);
-        updateItems(next);
-    };
-    return (_jsxs("div", { className: "flex flex-col gap-1.5", "data-config-key": props.key, "data-field-type": "array", children: [items.map((item, index) => (_jsx(ArrayItem
-            // biome-ignore lint/suspicious/noArrayIndexKey: composite key with index as tiebreaker
-            , { index: index, value: item, total: items.length, hasError: !!props.errors?.length, readonly: props.readonly, onChange: (v) => changeItem(index, v), onRemove: () => {
-                    removeItem(index);
-                    fireAction(props, "click");
-                }, onMoveUp: () => moveItem(index, index - 1), onMoveDown: () => moveItem(index, index + 1), onBlur: () => fireAction(props, "blur") }, `${index}-${items.length}`))), !props.readonly && (_jsx(Button, { type: "button", variant: "outline", size: "sm", className: "self-start px-3 py-1.5 border-dashed bg-transparent text-xs-tight text-muted transition-colors hover:bg-bg-hover hover:text-txt hover:border-accent rounded-sm", onClick: () => {
-                    addItem();
-                    fireAction(props, "click");
-                }, children: t("config-field.AddItem", { defaultValue: "Add item" }) }))] }));
-}
-// ── 16. Key-Value ───────────────────────────────────────────────────────
-/** Key-value pair editor with add/remove rows. Blocks prototype pollution keys. */
-export function renderKeyValueField(props) {
-    return _jsx(KeyValueFieldInner, { fp: props });
-}
-function KeyValueFieldInner({ fp: props }) {
-    const { t } = useApp();
-    const rawVal = props.isSet ? props.value : {};
-    const initialPairs = rawVal && typeof rawVal === "object" && !Array.isArray(rawVal)
-        ? Object.entries(rawVal).map(([k, v]) => ({
-            key: k,
-            value: String(v ?? ""),
-        }))
-        : [];
-    const [pairs, setPairs] = useState(initialPairs);
-    const emitChange = (next) => {
-        setPairs(next);
-        const obj = {};
-        for (const p of next) {
-            if (p.key)
-                obj[p.key] = p.value;
-        }
-        props.onChange(obj);
-        fireAction(props, "change");
-    };
-    const addRow = () => {
-        emitChange([...pairs, { key: "", value: "" }]);
-    };
-    const removeRow = (index) => {
-        emitChange(pairs.filter((_, i) => i !== index));
-    };
-    const BLOCKED_KEYS = ["__proto__", "constructor", "prototype"];
-    const updateRow = (index, field, val) => {
-        if (field === "key" && BLOCKED_KEYS.includes(val))
-            return;
-        const next = [...pairs];
-        next[index] = { ...next[index], [field]: val };
-        emitChange(next);
-    };
-    return (_jsxs("div", { className: "flex flex-col gap-1.5", "data-config-key": props.key, "data-field-type": "keyvalue", children: [pairs.map((pair, index) => (_jsxs("div", { className: "flex items-center gap-1", children: [_jsx("input", { className: `${inputCls(!!props.errors?.length)} flex-1`, type: "text", value: pair.key, placeholder: t("config-field.Key", { defaultValue: "Key" }), disabled: props.readonly, onChange: (e) => updateRow(index, "key", e.target.value), onBlur: () => fireAction(props, "blur") }), _jsx("input", { className: `${inputCls(!!props.errors?.length)} flex-1`, type: "text", value: pair.value, placeholder: t("common.value", { defaultValue: "Value" }), disabled: props.readonly, onChange: (e) => updateRow(index, "value", e.target.value), onBlur: () => fireAction(props, "blur") }), !props.readonly && (_jsx(Button, { type: "button", variant: "outline", size: "icon", className: "px-2 py-1.5 bg-bg-hover text-xs text-muted transition-colors hover:bg-surface hover:text-destructive h-9 rounded-sm", onClick: () => {
-                            removeRow(index);
-                            fireAction(props, "click");
-                        }, children: _jsx(X, { className: "w-3 h-3" }) }))] }, `${pair.key}:${pair.value}`))), !props.readonly && (_jsx(Button, { type: "button", variant: "outline", size: "sm", className: "self-start px-3 py-1.5 border-dashed bg-transparent text-xs-tight text-muted transition-colors hover:bg-bg-hover hover:text-txt hover:border-accent rounded-sm", onClick: () => {
-                    addRow();
-                    fireAction(props, "click");
-                }, children: t("config-field.AddRow", { defaultValue: "Add row" }) }))] }));
-}
-// ── 17. Datetime ────────────────────────────────────────────────────────
-/** Combined date and time picker (datetime-local). */
-export function renderDatetimeField(props) {
-    const value = props.isSet ? String(props.value ?? "") : "";
-    return (_jsx("input", { className: inputCls(!!props.errors?.length), type: "datetime-local", defaultValue: value, "data-config-key": props.key, "data-field-type": "datetime", disabled: props.readonly, onChange: (e) => {
-            props.onChange(e.target.value);
-            fireAction(props, "change");
-        }, onBlur: () => fireAction(props, "blur"), onClick: () => fireAction(props, "click") }));
-}
-// ── 18. File ────────────────────────────────────────────────────────────
-/** File path text input with path traversal guard. */
-export function RenderFileField(props) {
-    const { t } = useApp();
-    const value = props.isSet ? String(props.value ?? "") : "";
-    const placeholder = props.hint.placeholder ?? "/path/to/file";
-    return (_jsxs("div", { children: [_jsx("input", { className: inputCls(!!props.errors?.length), type: "text", defaultValue: value, placeholder: placeholder, "data-config-key": props.key, "data-field-type": "file", disabled: props.readonly, onChange: (e) => {
-                    const v = e.target.value;
-                    if (v.includes(".."))
-                        return; // block path traversal
-                    props.onChange(v);
-                    fireAction(props, "change");
-                }, onBlur: () => fireAction(props, "blur"), onClick: () => fireAction(props, "click") }), _jsx("div", { className: "text-xs-tight text-muted mt-0.5", children: t("config-field.EnterAFilePathOr", {
-                    defaultValue: "Enter a file path or paste one here.",
-                }) })] }));
-}
-// ── 19. Custom ──────────────────────────────────────────────────────────
-/** Placeholder for plugin-provided custom React components. */
-export function RenderCustomField(props) {
-    const { t } = useApp();
-    const componentName = props.hint.component;
-    return (_jsxs("div", { className: "px-3 py-4 border border-dashed border-border bg-bg-hover text-sm text-muted", "data-config-key": props.key, "data-field-type": "custom", children: [t("config-field.CustomComponent", {
-                defaultValue: "Custom component:",
-            }), " ", componentName ?? props.fieldType] }));
-}
-// ── 20. Markdown ─────────────────────────────────────────────────────────
-/**
- * Simple markdown renderer for preview mode.
- * Converts basic markdown patterns to React elements without external dependencies.
- */
-function renderMarkdown(text) {
-    if (!text)
-        return null;
-    const blocks = text.split(/\n\n+/);
-    const elements = [];
-    blocks.forEach((block) => {
-        const trimmed = block.trim();
-        if (!trimmed)
-            return;
-        // Fenced code block
-        if (trimmed.startsWith("```")) {
-            const lines = trimmed.split("\n");
-            const code = lines.slice(1, -1).join("\n");
-            elements.push(_jsx("pre", { className: "bg-bg-hover px-3 py-2 rounded-sm overflow-x-auto my-2", children: _jsx("code", { className: "font-mono text-xs", children: code }) }, `code:${code}`));
-            return;
-        }
-        // Heading
-        const headingMatch = trimmed.match(/^(#{1,6})\s+(.+)$/);
-        if (headingMatch) {
-            const level = headingMatch[1].length;
-            const content = processInline(headingMatch[2]);
-            const sizes = [
-                "text-xl",
-                "text-lg",
-                "text-base",
-                "text-sm",
-                "text-sm",
-                "text-xs",
-            ];
-            const cls = `${sizes[level - 1]} font-bold mb-1 mt-2`;
-            elements.push(React.createElement(`h${level}`, { key: `heading:${headingMatch[2]}`, className: cls }, content));
-            return;
-        }
-        // Unordered list
-        if (/^[-*]\s/.test(trimmed)) {
-            const items = trimmed.split("\n").filter((l) => /^[-*]\s/.test(l));
-            elements.push(_jsx("ul", { className: "list-disc pl-4 my-2 space-y-1", children: items.map((item) => (_jsx("li", { children: processInline(item.replace(/^[-*]\s/, "")) }, item))) }, `list:${trimmed}`));
-            return;
-        }
-        // Regular paragraph
-        elements.push(_jsx("p", { className: "my-2", children: processInline(trimmed) }, `paragraph:${trimmed}`));
-    });
-    return _jsx(_Fragment, { children: elements });
-}
-/**
- * Process inline markdown patterns (bold, italic, code, links).
- */
-function processInline(text) {
-    const parts = [];
-    let remaining = text;
-    let key = 0;
-    while (remaining) {
-        // Link: [text](url)
-        const linkMatch = remaining.match(/\[([^\]]+)\]\(([^)]+)\)/);
-        if (linkMatch) {
-            const before = remaining.substring(0, linkMatch.index);
-            if (before)
-                parts.push(processSimpleInline(before, key++));
-            parts.push(_jsx("a", { href: linkMatch[2], target: "_blank", rel: "noopener noreferrer", className: "text-accent underline", children: linkMatch[1] }, key++));
-            const linkIndex = linkMatch.index ?? 0;
-            remaining = remaining.substring(linkIndex + linkMatch[0].length);
-            continue;
-        }
-        // Inline code: `code`
-        const codeMatch = remaining.match(/`([^`]+)`/);
-        if (codeMatch) {
-            const before = remaining.substring(0, codeMatch.index);
-            if (before)
-                parts.push(processSimpleInline(before, key++));
-            parts.push(_jsx("code", { className: "bg-bg-hover px-1 py-0.5 rounded font-mono text-xs", children: codeMatch[1] }, key++));
-            const codeIndex = codeMatch.index ?? 0;
-            remaining = remaining.substring(codeIndex + codeMatch[0].length);
-            continue;
-        }
-        // Bold: **text**
-        const boldMatch = remaining.match(/\*\*([^*]+)\*\*/);
-        if (boldMatch) {
-            const before = remaining.substring(0, boldMatch.index);
-            if (before)
-                parts.push(processSimpleInline(before, key++));
-            parts.push(_jsx("strong", { children: boldMatch[1] }, key++));
-            const boldIndex = boldMatch.index ?? 0;
-            remaining = remaining.substring(boldIndex + boldMatch[0].length);
-            continue;
-        }
-        // Italic: *text* or _text_
-        const italicMatch = remaining.match(/(\*|_)([^*_]+)\1/);
-        if (italicMatch) {
-            const before = remaining.substring(0, italicMatch.index);
-            if (before)
-                parts.push(processSimpleInline(before, key++));
-            parts.push(_jsx("em", { children: italicMatch[2] }, key++));
-            const italicIndex = italicMatch.index ?? 0;
-            remaining = remaining.substring(italicIndex + italicMatch[0].length);
-            continue;
-        }
-        // No more patterns found
-        parts.push(remaining);
-        break;
-    }
-    return _jsx(_Fragment, { children: parts });
-}
-/**
- * Helper to handle plain text without additional patterns.
- */
-function processSimpleInline(text, key) {
-    return _jsx("span", { children: text }, key);
-}
-function MarkdownFieldInner(props) {
-    const { t } = useApp();
-    const [preview, setPreview] = useState(false);
-    const value = typeof props.value === "string" ? props.value : "";
-    return (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsxs("div", { className: "flex items-center gap-2 mb-1", children: [_jsx(Button, { type: "button", variant: !preview ? "default" : "outline", size: "sm", className: `text-xs-tight px-2 py-0.5 transition-colors h-auto ${!preview
-                            ? "bg-accent text-accent-fg border-accent"
-                            : "bg-transparent text-muted hover:text-txt"}`, onClick: () => setPreview(false), children: t("common.edit", { defaultValue: "Edit" }) }), _jsx(Button, { type: "button", variant: preview ? "default" : "outline", size: "sm", className: `text-xs-tight px-2 py-0.5 transition-colors h-auto ${preview
-                            ? "bg-accent text-accent-fg border-accent"
-                            : "bg-transparent text-muted hover:text-txt"}`, onClick: () => setPreview(true), children: t("common.preview", { defaultValue: "Preview" }) })] }), preview ? (_jsx("div", { className: "min-h-[100px] px-3 py-2 border border-border bg-surface text-sm leading-relaxed", "data-config-key": props.key, "data-field-type": "markdown", children: value ? (renderMarkdown(value)) : (_jsx("span", { className: "text-muted italic", children: t("config-field.NothingToPreview", {
-                        defaultValue: "Nothing to preview",
-                    }) })) })) : (_jsx("textarea", { className: textareaCls(!!props.errors?.length, "min-h-[100px] h-auto"), defaultValue: value, placeholder: props.hint.placeholder ?? "Markdown content...", "data-config-key": props.key, "data-field-type": "markdown", disabled: props.readonly, onChange: (e) => {
-                    props.onChange(e.target.value);
-                    fireAction(props, "change");
-                }, onBlur: () => fireAction(props, "blur") }))] }));
-}
-/** Markdown textarea with Edit/Preview toggle. */
-export const renderMarkdownField = (props) => (_jsx(MarkdownFieldInner, { ...props }));
-// ── 21. Checkbox Group ───────────────────────────────────────────────────
-function CheckboxGroupInner(props) {
-    const { t } = useApp();
-    const selected = new Set(Array.isArray(props.value)
-        ? props.value
-        : typeof props.value === "string" && props.value
-            ? props.value.split(",").map((s) => s.trim())
-            : []);
-    const options = props.hint.options ??
-        props.schema.enum?.map((v) => ({
-            value: v,
-            label: v,
-        })) ??
-        [];
-    const toggle = (val) => {
-        const next = new Set(selected);
-        if (next.has(val))
-            next.delete(val);
-        else
-            next.add(val);
-        props.onChange([...next]);
-        fireAction(props, "change");
-    };
-    return (_jsxs("div", { className: "flex flex-col gap-1.5", "data-config-key": props.key, "data-field-type": "checkbox-group", children: [options.map((opt) => (_jsxs("label", { className: `flex items-start gap-2.5 px-3 py-2 border border-border bg-card cursor-pointer transition-colors hover:bg-bg-hover ${selected.has(opt.value)
-                    ? "border-accent bg-[color-mix(in_srgb,var(--accent)_5%,var(--card))]"
-                    : ""} ${opt.disabled ? "opacity-50 pointer-events-none" : ""}`, children: [_jsx(Checkbox, { checked: selected.has(opt.value), disabled: props.readonly || opt.disabled, onCheckedChange: () => toggle(opt.value), className: "mt-0.5" }), _jsxs("div", { className: "flex flex-col", children: [_jsx("span", { className: "text-sm", children: opt.label }), opt.description && (_jsx("span", { className: "text-xs-tight text-muted mt-0.5", children: opt.description }))] })] }, opt.value))), options.length === 0 && (_jsx("span", { className: "text-xs-tight text-muted italic", children: t("config-field.NoOptionsDefined", {
-                    defaultValue: "No options defined",
-                }) }))] }));
-}
-/** Vertical checkbox list with per-option descriptions and accent highlighting. */
-export const renderCheckboxGroupField = (props) => (_jsx(CheckboxGroupInner, { ...props }));
-// ── 22. Group ────────────────────────────────────────────────────────────
-/** Fieldset container with legend label. */
-export const renderGroupField = (props) => {
-    const value = typeof props.value === "string" ? props.value : "";
-    return (_jsxs("fieldset", { className: "border border-border px-4 py-3 bg-surface", "data-config-key": props.key, "data-field-type": "group", children: [_jsx("legend", { className: "text-xs font-semibold text-muted px-1.5", children: props.hint.label ?? props.key }), _jsx("textarea", { className: textareaCls(!!props.errors?.length, "min-h-[60px] h-auto"), defaultValue: value, placeholder: props.hint.placeholder ?? "Group configuration...", disabled: props.readonly, onChange: (e) => {
-                    props.onChange(e.target.value);
-                    fireAction(props, "change");
-                }, onBlur: () => fireAction(props, "blur") })] }));
-};
-// ── 23. Table ────────────────────────────────────────────────────────────
-function TableFieldInner(props) {
-    const { t } = useApp();
-    const MAX_TABLE_ROWS = 50;
-    const columns = props.hint.columns ?? [
-        { key: "key", label: "Key" },
-        { key: "value", label: "Value" },
-    ];
-    const rawRows = Array.isArray(props.value)
-        ? props.value
-        : [];
-    const [rows, setRows] = useState(rawRows.length > 0
-        ? rawRows
-        : [Object.fromEntries(columns.map((c) => [c.key, ""]))]);
-    const emit = (next) => {
-        setRows(next);
-        props.onChange(next.filter((r) => columns.some((c) => r[c.key]?.trim())));
-        fireAction(props, "change");
-    };
-    const updateCell = (rowIdx, colKey, val) => {
-        if (["__proto__", "constructor", "prototype"].includes(colKey))
-            return;
-        const next = [...rows];
-        next[rowIdx] = { ...next[rowIdx], [colKey]: val };
-        emit(next);
-    };
-    const addRow = () => {
-        if (rows.length >= MAX_TABLE_ROWS)
-            return;
-        emit([...rows, Object.fromEntries(columns.map((c) => [c.key, ""]))]);
-    };
-    const removeRow = (idx) => {
-        if (rows.length <= 1)
-            return;
-        emit(rows.filter((_, i) => i !== idx));
-    };
-    return (_jsxs("div", { className: "flex flex-col gap-1.5", "data-config-key": props.key, "data-field-type": "table", children: [_jsx("div", { className: "border border-border overflow-x-auto", children: _jsxs("table", { className: "w-full text-sm border-collapse", children: [_jsx("thead", { children: _jsxs("tr", { className: "bg-surface", children: [columns.map((col) => (_jsx("th", { className: "text-left text-xs-tight font-semibold text-muted px-3 py-1.5", children: col.label }, col.key))), _jsx("th", { className: "w-[36px]" })] }) }), _jsx("tbody", { children: rows.map((row, ri) => (_jsxs("tr", { className: "", children: [columns.map((col) => (_jsx("td", { className: "px-1 py-0.5", children: _jsx("input", { className: "w-full px-2 py-1 bg-transparent text-sm border-none outline-none focus:bg-bg-hover", value: row[col.key] ?? "", placeholder: col.label, disabled: props.readonly, onChange: (e) => updateCell(ri, col.key, e.target.value) }) }, col.key))), _jsx("td", { className: "text-center", children: !props.readonly && rows.length > 1 && (_jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "text-muted hover:text-destructive text-sm px-1 h-auto w-auto", onClick: () => removeRow(ri), title: t("config-field.RemoveRow", {
-                                                defaultValue: "Remove row",
-                                            }), children: t("config-field.Times") })) })] }, JSON.stringify(row)))) })] }) }), !props.readonly && rows.length < MAX_TABLE_ROWS && (_jsx(Button, { type: "button", variant: "link", size: "sm", className: "self-start text-xs-tight text-accent hover:underline p-0 h-auto", onClick: addRow, children: t("config-field.AddRow", { defaultValue: "Add row" }) }))] }));
-}
-/** Tabular data editor with configurable columns. Max 50 rows. */
-export const renderTableField = (props) => (_jsx(TableFieldInner, { ...props }));
-// ── Default renderers map ───────────────────────────────────────────────
-export const defaultRenderers = {
-    text: renderTextField,
-    password: renderPasswordField,
-    number: renderNumberField,
-    boolean: renderBooleanField,
-    url: renderUrlField,
-    select: RenderSelectField,
-    textarea: renderTextareaField,
-    email: renderEmailField,
-    color: renderColorField,
-    radio: renderRadioField,
-    multiselect: renderMultiselectField,
-    date: renderDateField,
-    json: renderJsonField,
-    code: renderCodeField,
-    array: renderArrayField,
-    keyvalue: renderKeyValueField,
-    datetime: renderDatetimeField,
-    file: RenderFileField,
-    custom: RenderCustomField,
-    markdown: renderMarkdownField,
-    "checkbox-group": renderCheckboxGroupField,
-    group: renderGroupField,
-    table: renderTableField,
-};
-// ── ConfigField wrapper component ───────────────────────────────────────
-/**
- * Wraps a field renderer with the standard label row, env key display,
- * help text, and error messages.
- */
-export function ConfigField({ renderProps, renderer, pluginId, }) {
-    const { t } = useApp();
-    const label = renderProps.hint.label ?? renderProps.key;
-    const errors = renderProps.errors ?? [];
-    const hasError = errors.length > 0;
-    const isRequiredEmpty = renderProps.required && !renderProps.isSet;
-    const renderFn = renderer ??
-        defaultRenderers[renderProps.fieldType] ??
-        defaultRenderers.text;
-    return (_jsxs("div", { id: pluginId
-            ? `field-${pluginId}-${renderProps.key}`
-            : `field-${renderProps.key}`, className: `py-2.5 group/field ${renderProps.readonly ? "opacity-50 pointer-events-none" : ""} ${isRequiredEmpty ? "relative" : ""}`, children: [isRequiredEmpty && (_jsx("div", { className: "absolute left-0 top-2.5 bottom-2.5 w-[2px] bg-destructive opacity-40 rounded-full" })), _jsxs("div", { className: isRequiredEmpty ? "pl-2.5" : "", children: [_jsxs("div", { className: "flex items-center gap-2 mb-1.5", children: [_jsx("span", { className: "font-semibold leading-tight", style: {
-                                    fontSize: "var(--plugin-label-size)",
-                                    color: "var(--plugin-label)",
-                                }, children: label }), renderProps.required && !renderProps.isSet && (_jsx("span", { className: "text-2xs text-destructive font-semibold px-1.5 py-px bg-[color-mix(in_srgb,var(--destructive)_10%,transparent)] rounded-sm shrink-0", children: t("secretsview.Required") })), renderProps.isSet && (_jsxs("span", { className: "inline-flex items-center gap-1 text-2xs text-ok font-medium shrink-0", children: [_jsx("span", { className: "inline-block w-1.5 h-1.5 rounded-full bg-ok" }), t("config-field.Configured")] }))] }), renderFn(renderProps), hasError && (_jsx("div", { className: "mt-1.5 flex flex-col gap-0.5", children: errors.map((err) => (_jsxs("div", { className: "leading-snug flex items-start gap-1", style: {
-                                fontSize: "var(--plugin-error-size)",
-                                color: "var(--plugin-error)",
-                            }, children: [_jsx("span", { className: "shrink-0 mt-px", children: t("config-field.Times") }), _jsx("span", { children: err })] }, err))) })), (renderProps.hint.help || renderProps.schema.description) && (_jsxs("div", { className: "mt-1 leading-relaxed line-clamp-2", style: {
-                            fontSize: "var(--plugin-help-size)",
-                            color: "var(--plugin-help)",
-                        }, children: [renderProps.hint.help ?? renderProps.schema.description, renderProps.schema.default != null && (_jsxs("span", { className: "opacity-70", children: [" ", t("common.default", { defaultValue: "Default" }), " ", String(renderProps.schema.default), ")"] }))] }))] })] }));
-}