@elizaos/ui 2.0.0-beta.2 → 2.0.3-beta.2

package/components/config-ui/config-field.helpers.js

@@ -0,0 +1,857 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ChevronDown, X } from "lucide-react";
+import React, { useCallback, useEffect, useId, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { resolveDynamic } from "../../config/config-catalog.js";
+import { CONFIG_SELECT_FLOATING_LAYER_NAME, CONFIG_SELECT_FLOATING_LAYER_Z_INDEX, } from "../../lib/floating-layers.js";
+import { useApp } from "../../state/index.js";
+import { Button } from "../ui/button.js";
+import { Checkbox } from "../ui/checkbox.js";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "../ui/select.js";
+import { Switch } from "../ui/switch.js";
+import { getConfigInputClassName, getConfigTextareaClassName, } from "./config-control-primitives.helpers.js";
+// ── 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 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 {
+            // Toggle type directly so the current input value stays visible.
+            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;
+    const maxVal = props.schema.maximum ?? props.hint.max;
+    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 searchInputRef = 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: CONFIG_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]);
+    useEffect(() => {
+        if (!open)
+            return;
+        searchInputRef.current?.focus();
+    }, [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": CONFIG_SELECT_FLOATING_LAYER_NAME, style: dropdownStyle, className: "border border-border bg-card rounded-sm", children: [_jsx("div", { className: "p-1.5", children: _jsx("input", { ref: searchInputRef, 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 fieldId = useId();
+    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, index) => (_jsxs("label", { htmlFor: `${fieldId}-${index}`, className: "flex items-center gap-2 cursor-pointer text-sm", children: [_jsx(Checkbox, { id: `${fieldId}-${index}`, 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-sm 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 fieldId = useId();
+    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, index) => (_jsxs("label", { htmlFor: `${fieldId}-${index}`, 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, { id: `${fieldId}-${index}`, 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,
+};