@elizaos/app-core 2.0.0-alpha.74 → 2.0.0-alpha.76

package/src/config/config-field.tsx

@@ -1,1924 +0,0 @@
-/**
- * config-field.tsx — React port of the 19 Lit field renderers from config-field.ts.
- *
- * Each renderer is a plain function (props: FieldRenderProps) => JSX.Element.
- * Styling uses Tailwind utility classes + CSS custom properties from base.css.
- *
- * Also exports:
- *  - defaultRenderers map (field type name -> renderer)
- *  - ConfigField wrapper component (label + renderer + help + errors)
- */
-
-import { ChevronDown, X } from "lucide-react";
-import React, { useCallback, useRef, useState } from "react";
-import { useApp } from "../state";
-import type { DynamicValue } from "../types";
-import type { FieldRenderer, FieldRenderProps } from "./config-catalog";
-import { resolveDynamic } from "./config-catalog";
-
-// ── Action binding helper ──────────────────────────────────────────────
-
-/**
- * Resolve DynamicValue params and fire the onAction callback.
- * No-ops when the binding or onAction is missing.
- */
-function fireAction(props: FieldRenderProps, eventName: string): void {
-  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: Record<string, unknown> | undefined;
-  if (binding.params) {
-    const state: Record<string, unknown> = { [props.key]: props.value };
-    resolvedParams = {};
-    for (const [k, v] of Object.entries(binding.params)) {
-      resolvedParams[k] = resolveDynamic(v as DynamicValue, state);
-    }
-  }
-
-  void props.onAction(binding.action, resolvedParams);
-}
-
-// ── Shared Tailwind class constants ─────────────────────────────────────
-
-const INPUT_CLS =
-  "w-full px-3 py-2 border border-[var(--border)] bg-[var(--card)] text-[13px] font-[var(--mono)] transition-all focus:border-[var(--accent)] focus:outline-none focus:ring-1 focus:ring-[var(--accent)] box-border h-[36px] rounded-sm placeholder:text-[var(--muted)] placeholder:opacity-60";
-
-const INPUT_ERROR_CLS =
-  "w-full px-3 py-2 border border-[var(--destructive)] bg-[color-mix(in_srgb,var(--destructive)_3%,var(--card))] text-[13px] font-[var(--mono)] transition-all focus:border-[var(--accent)] focus:outline-none focus:ring-1 focus:ring-[var(--accent)] box-border h-[36px] rounded-sm placeholder:text-[var(--muted)] placeholder:opacity-60";
-
-function inputCls(hasError: boolean): string {
-  return hasError ? INPUT_ERROR_CLS : INPUT_CLS;
-}
-
-// ── 1. Text ─────────────────────────────────────────────────────────────
-
-/** Single-line text input. Fallback renderer for unresolved field types. */
-export function renderTextField(props: FieldRenderProps) {
-  const value = props.isSet ? String(props.value ?? "") : "";
-  const placeholder =
-    (props.hint.placeholder as string | undefined) ??
-    (props.schema.default != null
-      ? `Default: ${props.schema.default}`
-      : "Enter value...");
-
-  return (
-    <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: FieldRenderProps) {
-  return <PasswordFieldInner fp={props} />;
-}
-
-function PasswordFieldInner({ fp: props }: { fp: FieldRenderProps }) {
-  const maskedValue = props.isSet ? String(props.value ?? "") : "";
-  const placeholder = props.isSet
-    ? `Current: ${maskedValue || "********"}  (leave blank to keep)`
-    : ((props.hint.placeholder as string | undefined) ?? "Enter value...");
-
-  const [visible, setVisible] = useState(false);
-  const [busy, setBusy] = useState(false);
-  const [fieldValue, setFieldValue] = useState("");
-  const inputRef = useRef<HTMLInputElement>(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 (
-    <div className="flex">
-      <input
-        ref={inputRef}
-        className="flex-1 px-3 py-2 border border-[var(--border)] border-r-0 bg-[var(--card)] text-[13px] font-[var(--mono)] transition-all focus:border-[var(--accent)] focus:outline-none focus:ring-1 focus:ring-[var(--accent)] box-border h-[36px] rounded-l-sm placeholder:text-[var(--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")}
-      />
-      <button
-        type="button"
-        className="px-3 border border-[var(--border)] bg-[var(--bg-hover)] text-[11px] text-[var(--muted)] cursor-pointer whitespace-nowrap min-w-[56px] text-center transition-colors hover:bg-[var(--surface)] hover:text-[var(--text)] h-[36px] font-medium rounded-r-sm"
-        onClick={() => {
-          void handleToggle();
-          fireAction(props, "click");
-        }}
-        title={visible ? "Hide value" : "Reveal value"}
-      >
-        {busy ? "\u2026" : visible ? "\u{1F441} Hide" : "\u{1F441} Show"}
-      </button>
-    </div>
-  );
-}
-
-// ── 3. Number ───────────────────────────────────────────────────────────
-
-/** Numeric input with min/max/step attributes derived from schema and hints. */
-export function renderNumberField(props: FieldRenderProps) {
-  return <NumberFieldInner fp={props} />;
-}
-
-function NumberFieldInner({ fp: props }: { fp: FieldRenderProps }) {
-  const minVal =
-    props.schema.minimum ?? (props.hint.min as number | undefined) ?? undefined;
-  const maxVal =
-    props.schema.maximum ?? (props.hint.max as number | undefined) ?? undefined;
-  const stepVal = (props.hint.step as number | undefined) ?? 1;
-  const unit = props.hint.unit as string | undefined;
-  const placeholder =
-    (props.hint.placeholder as string | undefined) ??
-    (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: 1 | -1) => {
-    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 (
-    <div>
-      <div className="flex items-center gap-1.5">
-        {!props.readonly && (
-          <button
-            type="button"
-            className="px-2 py-1.5 border border-[var(--border)] bg-transparent text-sm text-[var(--muted)] cursor-pointer transition-colors hover:bg-[var(--surface)] hover:text-[var(--text)] h-[36px] rounded-sm font-mono select-none"
-            onClick={() => step(-1)}
-          >
-            −
-          </button>
-        )}
-        <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 && (
-          <button
-            type="button"
-            className="px-2 py-1.5 border border-[var(--border)] bg-transparent text-sm text-[var(--muted)] cursor-pointer transition-colors hover:bg-[var(--surface)] hover:text-[var(--text)] h-[36px] rounded-sm font-mono select-none"
-            onClick={() => step(1)}
-          >
-            +
-          </button>
-        )}
-        {unit && (
-          <span className="text-[11px] text-[var(--muted)] font-medium shrink-0 min-w-[20px]">
-            {unit}
-          </span>
-        )}
-      </div>
-      {hasRange && (
-        <div className="text-[10px] text-[var(--muted)] mt-0.5 opacity-70">
-          {minVal != null && maxVal != null
-            ? `Range: ${minVal}–${maxVal}${unit ? ` ${unit}` : ""}`
-            : minVal != null
-              ? `Min: ${minVal}${unit ? ` ${unit}` : ""}`
-              : `Max: ${maxVal}${unit ? ` ${unit}` : ""}`}
-        </div>
-      )}
-    </div>
-  );
-}
-
-// ── 4. Boolean ──────────────────────────────────────────────────────────
-
-/** Pill-shaped toggle switch. Accepts boolean or string 'true'/'false' values. */
-export function renderBooleanField(props: FieldRenderProps) {
-  return <BooleanFieldInner fp={props} />;
-}
-
-function BooleanFieldInner({ fp: props }: { fp: FieldRenderProps }) {
-  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 (
-    <button
-      type="button"
-      className="flex items-center gap-2.5 cursor-pointer bg-transparent border-none p-0 group"
-      disabled={props.readonly}
-      onClick={() => {
-        handleToggle();
-        fireAction(props, "click");
-      }}
-      data-config-key={props.key}
-      data-field-type="boolean"
-    >
-      <div
-        className={`relative w-10 h-[22px] rounded-full transition-colors duration-200 ${
-          localVal ? "bg-[var(--accent)]" : "bg-[var(--muted)] opacity-40"
-        }`}
-      >
-        <div
-          className={`absolute top-[3px] w-4 h-4 bg-white rounded-full shadow-sm transition-all duration-200 ${
-            localVal ? "left-[21px]" : "left-[3px]"
-          }`}
-        />
-      </div>
-      <span
-        className={`text-xs transition-colors ${localVal ? "text-[var(--text)] font-medium" : "text-[var(--muted)]"}`}
-      >
-        {localVal ? "Enabled" : "Disabled"}
-      </span>
-    </button>
-  );
-}
-
-// ── 5. URL ──────────────────────────────────────────────────────────────
-
-/** URL input with type="url" browser validation. */
-export function renderUrlField(props: FieldRenderProps) {
-  const value = props.isSet ? String(props.value ?? "") : "";
-  const placeholder =
-    (props.hint.placeholder as string | undefined) ??
-    (props.schema.default != null
-      ? `Default: ${props.schema.default}`
-      : "https://...");
-
-  return (
-    <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: FieldRenderProps) {
-  const { t } = useApp();
-  const enhancedOptions = (props.hint as Record<string, unknown>).options as
-    | Array<{ value: string; label: string; description?: string }>
-    | undefined;
-
-  const plainOptions: string[] =
-    (props.schema.enum as string[]) ??
-    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 as string | undefined,
-      }));
-
-  const value = props.isSet ? String(props.value ?? "") : "";
-  const effectiveValue = value || String(props.schema.default ?? "");
-  const useSearch = allOptions.length >= 5;
-  if (useSearch) {
-    return (
-      <SearchableSelectInner
-        fp={props}
-        options={allOptions}
-        effectiveValue={effectiveValue}
-      />
-    );
-  }
-
-  return (
-    <select
-      className={`${INPUT_CLS} appearance-auto`}
-      defaultValue={effectiveValue}
-      data-config-key={props.key}
-      data-field-type="select"
-      disabled={props.readonly}
-      onChange={(e) => {
-        props.onChange(e.target.value);
-        fireAction(props, "change");
-      }}
-      onBlur={() => fireAction(props, "blur")}
-      onClick={() => fireAction(props, "click")}
-    >
-      {!props.required && (
-        <option value="">
-          {t("config-field.None", { defaultValue: "None" })}
-        </option>
-      )}
-      {allOptions.map((opt) => (
-        <option key={opt.value} value={opt.value}>
-          {opt.label}
-          {opt.description ? ` — ${opt.description}` : ""}
-        </option>
-      ))}
-    </select>
-  );
-}
-
-function SearchableSelectInner({
-  fp: props,
-  options,
-  effectiveValue,
-}: {
-  fp: FieldRenderProps;
-  options: Array<{ value: string; label: string; description?: string }>;
-  effectiveValue: string;
-}) {
-  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 containerRef = useRef<HTMLDivElement>(null);
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  const filtered = filter
-    ? options.filter(
-        (o) =>
-          o.label.toLowerCase().includes(filter.toLowerCase()) ||
-          o.value.toLowerCase().includes(filter.toLowerCase()),
-      )
-    : options;
-
-  const select = useCallback(
-    (opt: { value: string; label: string }) => {
-      props.onChange(opt.value);
-      setInputVal(opt.label);
-      setOpen(false);
-      setFilter("");
-      fireAction(props, "change");
-    },
-    [props],
-  );
-
-  // Close on click outside
-  React.useEffect(() => {
-    if (!open) return;
-    const handler = (e: MouseEvent) => {
-      if (
-        containerRef.current &&
-        !containerRef.current.contains(e.target as Node)
-      ) {
-        setOpen(false);
-        setFilter("");
-      }
-    };
-    document.addEventListener("mousedown", handler);
-    return () => document.removeEventListener("mousedown", handler);
-  }, [open]);
-
-  return (
-    <div className="relative" ref={containerRef}>
-      {/* Trigger button that looks like a select */}
-      <button
-        type="button"
-        className={`${inputCls(!!props.errors?.length)} text-left flex items-center justify-between gap-2 cursor-pointer`}
-        disabled={props.readonly}
-        onClick={() => {
-          setOpen(!open);
-          setFilter("");
-        }}
-        data-config-key={props.key}
-        data-field-type="select"
-      >
-        <span className={inputVal ? "" : "text-[var(--muted)] opacity-60"}>
-          {inputVal || "Select..."}
-        </span>
-        <span className="text-[var(--muted)] text-[10px] shrink-0">
-          {open ? "\u25B2" : "\u25BC"}
-        </span>
-      </button>
-
-      {/* Dropdown panel */}
-      {open && (
-        <div className="absolute z-50 left-0 right-0 mt-1 border border-[var(--border)] bg-[var(--card)] shadow-lg max-h-[280px] flex flex-col rounded-sm">
-          {/* Search input */}
-          <div className="p-1.5 border-b border-[var(--border)]">
-            <input
-              ref={inputRef}
-              className="w-full px-2 py-1.5 border border-[var(--border)] bg-[var(--bg)] text-[12px] font-[var(--mono)] focus:border-[var(--accent)] focus:outline-none rounded-sm"
-              type="text"
-              value={filter}
-              placeholder={`Search ${options.length} models...`}
-              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]);
-                }
-              }}
-            />
-          </div>
-          {/* Options list */}
-          <div className="overflow-y-auto flex-1">
-            {!props.required && (
-              <button
-                type="button"
-                className="w-full text-left px-3 py-1.5 text-[12px] text-[var(--muted)] hover:bg-[var(--bg-hover)] transition-colors italic"
-                onClick={() => {
-                  props.onChange("");
-                  setInputVal("");
-                  setOpen(false);
-                  setFilter("");
-                  fireAction(props, "change");
-                }}
-              >
-                {t("config-field.None", { defaultValue: "None" })}
-              </button>
-            )}
-            {filtered.length === 0 && (
-              <div className="px-3 py-3 text-[12px] text-[var(--muted)] text-center">
-                {t("config-field.NoMatches", {
-                  defaultValue: "No matches",
-                })}
-              </div>
-            )}
-            {filtered.map((opt) => (
-              <button
-                key={opt.value}
-                type="button"
-                className={`w-full text-left px-3 py-1.5 text-[12px] hover:bg-[var(--bg-hover)] transition-colors ${
-                  opt.value === effectiveValue
-                    ? "bg-[color-mix(in_srgb,var(--accent)_10%,var(--card))] text-[var(--accent)] font-medium"
-                    : ""
-                }`}
-                onClick={() => select(opt)}
-              >
-                {opt.label}
-                {opt.description && (
-                  <span className="text-[var(--muted)] ml-1.5 text-[11px]">
-                    {opt.description}
-                  </span>
-                )}
-              </button>
-            ))}
-          </div>
-          <div className="px-3 py-1 border-t border-[var(--border)] text-[10px] text-[var(--muted)]">
-            {filtered.length} of {options.length}{" "}
-            {t("config-field.models", { defaultValue: "models" })}
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
-
-// ── 7. Textarea ─────────────────────────────────────────────────────────
-
-/** Multi-line text input with auto-resize. Auto-detected for maxLength > 200. */
-export function renderTextareaField(props: FieldRenderProps) {
-  return <TextareaFieldInner fp={props} />;
-}
-
-function TextareaFieldInner({ fp: props }: { fp: FieldRenderProps }) {
-  const value = props.isSet ? String(props.value ?? "") : "";
-  const placeholder =
-    (props.hint.placeholder as string | undefined) ?? "Enter text...";
-  const textareaRef = useRef<HTMLTextAreaElement>(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 (
-    <textarea
-      ref={textareaRef}
-      className="w-full px-3 py-2 border border-[var(--border)] bg-[var(--card)] text-[13px] font-[var(--mono)] transition-all focus:border-[var(--accent)] focus:outline-none focus:ring-1 focus:ring-[var(--accent)] box-border min-h-[72px] max-h-[400px] rounded-sm placeholder:text-[var(--muted)] placeholder:opacity-60"
-      style={{ fieldSizing: "content" } as React.CSSProperties}
-      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: FieldRenderProps) {
-  const value = props.isSet ? String(props.value ?? "") : "";
-  const placeholder =
-    (props.hint.placeholder as string | undefined) ?? "user@example.com";
-
-  return (
-    <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: FieldRenderProps) {
-  return <ColorFieldInner fp={props} />;
-}
-
-function ColorFieldInner({ fp: props }: { fp: FieldRenderProps }) {
-  const initial = props.isSet ? String(props.value ?? "#000000") : "#000000";
-  const [color, setColor] = useState(initial);
-
-  const handleChange = (newColor: string) => {
-    setColor(newColor);
-    props.onChange(newColor);
-    fireAction(props, "change");
-  };
-
-  return (
-    <div className="flex items-center gap-2">
-      <input
-        className="w-[36px] h-[36px] border border-[var(--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")}
-      />
-      <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")}
-      />
-    </div>
-  );
-}
-
-// ── 10. Radio ───────────────────────────────────────────────────────────
-
-/** Vertical radio button group. Supports per-option descriptions. */
-export function renderRadioField(props: FieldRenderProps) {
-  return <RadioFieldInner fp={props} />;
-}
-
-function RadioFieldInner({ fp: props }: { fp: FieldRenderProps }) {
-  const options: Array<{
-    value: string;
-    label: string;
-    description?: string;
-    disabled?: boolean;
-  }> =
-    ((props.hint as Record<string, unknown>).options as
-      | typeof options
-      | undefined) ??
-    ((props.schema.enum as string[]) ?? []).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: string) => {
-    setSelected(val);
-    props.onChange(val);
-    fireAction(props, "change");
-  };
-
-  return (
-    <div
-      className="flex flex-col gap-1.5"
-      data-config-key={props.key}
-      data-field-type="radio"
-    >
-      {options.map((opt) => (
-        <label
-          key={opt.value}
-          className="flex items-start gap-2 cursor-pointer text-[13px]"
-        >
-          <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"
-          />
-          <span>
-            {opt.label}
-            {opt.description && (
-              <div className="text-[11px] text-[var(--muted)] mt-px">
-                {opt.description}
-              </div>
-            )}
-          </span>
-        </label>
-      ))}
-    </div>
-  );
-}
-
-// ── 11. Multiselect ─────────────────────────────────────────────────────
-
-/** Checkbox group for selecting multiple values from options. */
-export function renderMultiselectField(props: FieldRenderProps) {
-  return <MultiselectFieldInner fp={props} />;
-}
-
-function MultiselectFieldInner({ fp: props }: { fp: FieldRenderProps }) {
-  const options: Array<{ value: string; label: string }> =
-    ((props.hint as Record<string, unknown>).options as
-      | typeof options
-      | undefined) ??
-    ((props.schema.items?.enum as string[]) ?? []).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: string) => {
-    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: string) => {
-    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 (
-    <div
-      className="flex flex-col gap-2"
-      data-config-key={props.key}
-      data-field-type="multiselect"
-    >
-      {/* Selected tag pills */}
-      {selectedOptions.length > 0 && (
-        <div className="flex flex-wrap gap-1">
-          {selectedOptions.map((opt) => (
-            <span
-              key={opt.value}
-              className="inline-flex items-center gap-1 px-2 py-0.5 text-[11px] bg-[var(--accent-subtle,rgba(59,130,246,0.1))] text-[var(--accent)] border border-[var(--accent)] border-opacity-30 rounded-full"
-            >
-              {opt.label}
-              {!props.readonly && (
-                <button
-                  type="button"
-                  className="inline-flex items-center justify-center w-3.5 h-3.5 text-[10px] rounded-full hover:bg-[var(--accent)] hover:text-[var(--accent-foreground,#1a1f26)] transition-colors cursor-pointer"
-                  onClick={() => remove(opt.value)}
-                >
-                  ×
-                </button>
-              )}
-            </span>
-          ))}
-        </div>
-      )}
-      {/* Checkbox list */}
-      <div className="flex flex-col gap-1">
-        {options.map((opt) => (
-          <label
-            key={opt.value}
-            className="flex items-center gap-2 cursor-pointer text-[13px]"
-          >
-            <input
-              type="checkbox"
-              value={opt.value}
-              checked={selected.has(opt.value)}
-              disabled={props.readonly}
-              onChange={() => toggle(opt.value)}
-              onClick={() => fireAction(props, "click")}
-              onBlur={() => fireAction(props, "blur")}
-            />
-            <span>{opt.label}</span>
-          </label>
-        ))}
-      </div>
-    </div>
-  );
-}
-
-// ── 12. Date ────────────────────────────────────────────────────────────
-
-/** Native date picker input. */
-export function renderDateField(props: FieldRenderProps) {
-  const value = props.isSet ? String(props.value ?? "") : "";
-  const inputType =
-    props.schema.format === "date-time" ? "datetime-local" : "date";
-
-  return (
-    <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: FieldRenderProps) {
-  return <JsonFieldInner fp={props} />;
-}
-
-function JsonFieldInner({ fp: props }: { fp: FieldRenderProps }) {
-  const { t } = useApp();
-  const initial = props.isSet ? String(props.value ?? "") : "";
-  const [jsonError, setJsonError] = useState<string | null>(null);
-
-  const handleBlur = (e: React.FocusEvent<HTMLTextAreaElement>) => {
-    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 (
-    <div>
-      <textarea
-        className={`w-full px-2.5 py-[7px] border ${
-          jsonError || props.errors?.length
-            ? "border-[var(--destructive)]"
-            : "border-[var(--border)]"
-        } bg-[var(--card)] text-[13px] font-mono transition-all focus:border-[var(--accent)] focus:outline-none focus:ring-1 focus:ring-[var(--accent)] box-border min-h-[100px] resize-y rounded-sm`}
-        defaultValue={initial}
-        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 && (
-        <div className="text-[11px] text-[var(--destructive)] mt-1 leading-snug">
-          {jsonError}
-        </div>
-      )}
-    </div>
-  );
-}
-
-// ── 14. Code ────────────────────────────────────────────────────────────
-
-/** Monospaced code editor textarea for templates and snippets. */
-export function renderCodeField(props: FieldRenderProps) {
-  const value = props.isSet ? String(props.value ?? "") : "";
-  const placeholder =
-    (props.hint.placeholder as string | undefined) ?? "Enter code...";
-
-  return (
-    <textarea
-      className={`w-full px-2.5 py-[7px] border ${
-        props.errors?.length
-          ? "border-[var(--destructive)]"
-          : "border-[var(--border)]"
-      } bg-[var(--card)] text-[13px] font-mono transition-all focus:border-[var(--accent)] focus:outline-none focus:ring-1 focus:ring-[var(--accent)] box-border min-h-[100px] resize-y rounded-sm`}
-      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: FieldRenderProps) {
-  return <ArrayFieldInner fp={props} />;
-}
-
-function ArrayItem({
-  index,
-  value,
-  total,
-  hasError,
-  readonly,
-  onChange,
-  onRemove,
-  onMoveUp,
-  onMoveDown,
-  onBlur,
-}: {
-  index: number;
-  value: string;
-  total: number;
-  hasError: boolean;
-  readonly?: boolean;
-  onChange: (value: string) => void;
-  onRemove: () => void;
-  onMoveUp: () => void;
-  onMoveDown: () => void;
-  onBlur: () => void;
-}) {
-  const { t } = useApp();
-  return (
-    <div className="flex items-center gap-1">
-      {!readonly && (
-        <div className="flex flex-col shrink-0">
-          <button
-            type="button"
-            className="px-1 py-0 text-[10px] leading-tight text-[var(--muted)] cursor-pointer hover:text-[var(--text)] disabled:opacity-30 disabled:cursor-not-allowed"
-            onClick={onMoveUp}
-            disabled={index === 0}
-            title={t("config-field.MoveUp", {
-              defaultValue: "Move up",
-            })}
-          >
-            ▲
-          </button>
-          <button
-            type="button"
-            className="px-1 py-0 text-[10px] leading-tight text-[var(--muted)] cursor-pointer hover:text-[var(--text)] disabled:opacity-30 disabled:cursor-not-allowed"
-            onClick={onMoveDown}
-            disabled={index === total - 1}
-            title={t("config-field.MoveDown", {
-              defaultValue: "Move down",
-            })}
-          >
-            <ChevronDown className="w-3 h-3" />
-          </button>
-        </div>
-      )}
-      <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 && (
-        <button
-          type="button"
-          className="px-2 py-1.5 border border-[var(--border)] bg-[var(--bg-hover)] text-xs text-[var(--muted)] cursor-pointer transition-colors hover:bg-[var(--surface)] hover:text-[var(--destructive)] h-[36px] rounded-sm"
-          onClick={onRemove}
-        >
-          <X className="w-3 h-3" />
-        </button>
-      )}
-    </div>
-  );
-}
-
-function ArrayFieldInner({ fp: props }: { fp: FieldRenderProps }) {
-  const { t } = useApp();
-  const rawVal = props.isSet ? props.value : [];
-  const initialItems: string[] = Array.isArray(rawVal)
-    ? rawVal.map(String)
-    : [];
-  const [items, setItems] = useState<string[]>(initialItems);
-
-  const updateItems = (nextItems: string[]) => {
-    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: number) => {
-    updateItems(items.filter((_, i) => i !== index));
-  };
-
-  const changeItem = (index: number, value: string) => {
-    const next = [...items];
-    next[index] = value;
-    updateItems(next);
-  };
-
-  const moveItem = (from: number, to: number) => {
-    const next = [...items];
-    const [moved] = next.splice(from, 1);
-    next.splice(to, 0, moved);
-    updateItems(next);
-  };
-
-  return (
-    <div
-      className="flex flex-col gap-1.5"
-      data-config-key={props.key}
-      data-field-type="array"
-    >
-      {items.map((item, index) => (
-        <ArrayItem
-          // biome-ignore lint/suspicious/noArrayIndexKey: composite key with index as tiebreaker
-          key={`${index}-${items.length}`}
-          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")}
-        />
-      ))}
-      {!props.readonly && (
-        <button
-          type="button"
-          className="self-start px-3 py-1.5 border border-dashed border-[var(--border)] bg-transparent text-[11px] text-[var(--muted)] cursor-pointer transition-colors hover:bg-[var(--bg-hover)] hover:text-[var(--text)] hover:border-[var(--accent)] rounded-sm"
-          onClick={() => {
-            addItem();
-            fireAction(props, "click");
-          }}
-        >
-          {t("config-field.AddItem", { defaultValue: "Add item" })}
-        </button>
-      )}
-    </div>
-  );
-}
-
-// ── 16. Key-Value ───────────────────────────────────────────────────────
-
-/** Key-value pair editor with add/remove rows. Blocks prototype pollution keys. */
-export function renderKeyValueField(props: FieldRenderProps) {
-  return <KeyValueFieldInner fp={props} />;
-}
-
-function KeyValueFieldInner({ fp: props }: { fp: FieldRenderProps }) {
-  const { t } = useApp();
-  const rawVal = props.isSet ? props.value : {};
-  const initialPairs: Array<{ key: string; value: string }> =
-    rawVal && typeof rawVal === "object" && !Array.isArray(rawVal)
-      ? Object.entries(rawVal as Record<string, unknown>).map(([k, v]) => ({
-          key: k,
-          value: String(v ?? ""),
-        }))
-      : [];
-  const [pairs, setPairs] = useState(initialPairs);
-
-  const emitChange = (next: Array<{ key: string; value: string }>) => {
-    setPairs(next);
-    const obj: Record<string, string> = {};
-    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: number) => {
-    emitChange(pairs.filter((_, i) => i !== index));
-  };
-
-  const BLOCKED_KEYS = ["__proto__", "constructor", "prototype"];
-  const updateRow = (index: number, field: "key" | "value", val: string) => {
-    if (field === "key" && BLOCKED_KEYS.includes(val)) return;
-    const next = [...pairs];
-    next[index] = { ...next[index], [field]: val };
-    emitChange(next);
-  };
-
-  return (
-    <div
-      className="flex flex-col gap-1.5"
-      data-config-key={props.key}
-      data-field-type="keyvalue"
-    >
-      {pairs.map((pair, index) => (
-        <div
-          key={`${pair.key}:${pair.value}`}
-          className="flex items-center gap-1"
-        >
-          <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")}
-          />
-          <input
-            className={`${inputCls(!!props.errors?.length)} flex-1`}
-            type="text"
-            value={pair.value}
-            placeholder={t("config-field.Value", { defaultValue: "Value" })}
-            disabled={props.readonly}
-            onChange={(e) => updateRow(index, "value", e.target.value)}
-            onBlur={() => fireAction(props, "blur")}
-          />
-          {!props.readonly && (
-            <button
-              type="button"
-              className="px-2 py-1.5 border border-[var(--border)] bg-[var(--bg-hover)] text-xs text-[var(--muted)] cursor-pointer transition-colors hover:bg-[var(--surface)] hover:text-[var(--destructive)] h-[36px] rounded-sm"
-              onClick={() => {
-                removeRow(index);
-                fireAction(props, "click");
-              }}
-            >
-              <X className="w-3 h-3" />
-            </button>
-          )}
-        </div>
-      ))}
-      {!props.readonly && (
-        <button
-          type="button"
-          className="self-start px-3 py-1.5 border border-dashed border-[var(--border)] bg-transparent text-[11px] text-[var(--muted)] cursor-pointer transition-colors hover:bg-[var(--bg-hover)] hover:text-[var(--text)] hover:border-[var(--accent)] rounded-sm"
-          onClick={() => {
-            addRow();
-            fireAction(props, "click");
-          }}
-        >
-          {t("config-field.AddRow", { defaultValue: "Add row" })}
-        </button>
-      )}
-    </div>
-  );
-}
-
-// ── 17. Datetime ────────────────────────────────────────────────────────
-
-/** Combined date and time picker (datetime-local). */
-export function renderDatetimeField(props: FieldRenderProps) {
-  const value = props.isSet ? String(props.value ?? "") : "";
-
-  return (
-    <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: FieldRenderProps) {
-  const { t } = useApp();
-  const value = props.isSet ? String(props.value ?? "") : "";
-  const placeholder =
-    (props.hint.placeholder as string | undefined) ?? "/path/to/file";
-
-  return (
-    <div>
-      <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")}
-      />
-      <div className="text-[11px] text-[var(--muted)] mt-0.5">
-        {t("config-field.EnterAFilePathOr", {
-          defaultValue: "Enter a file path or paste one here.",
-        })}
-      </div>
-    </div>
-  );
-}
-
-// ── 19. Custom ──────────────────────────────────────────────────────────
-
-/** Placeholder for plugin-provided custom React components. */
-export function RenderCustomField(props: FieldRenderProps) {
-  const { t } = useApp();
-  const componentName = (props.hint as Record<string, unknown>).component as
-    | string
-    | undefined;
-
-  return (
-    <div
-      className="px-3 py-4 border border-dashed border-[var(--border)] bg-[var(--bg-hover)] text-[13px] text-[var(--muted)]"
-      data-config-key={props.key}
-      data-field-type="custom"
-    >
-      {t("config-field.CustomComponent", {
-        defaultValue: "Custom component:",
-      })}{" "}
-      {componentName ?? props.fieldType}
-    </div>
-  );
-}
-
-// ── 20. Markdown ─────────────────────────────────────────────────────────
-
-/**
- * Simple markdown renderer for preview mode.
- * Converts basic markdown patterns to React elements without external dependencies.
- */
-function renderMarkdown(text: string): React.ReactNode {
-  if (!text) return null;
-
-  const blocks = text.split(/\n\n+/);
-  const elements: React.ReactNode[] = [];
-
-  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(
-        <pre
-          key={`code:${code}`}
-          className="bg-[var(--bg-hover)] px-3 py-2 rounded-sm overflow-x-auto my-2"
-        >
-          <code className="font-mono text-[12px]">{code}</code>
-        </pre>,
-      );
-      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(
-        <ul key={`list:${trimmed}`} className="list-disc pl-4 my-2 space-y-1">
-          {items.map((item) => (
-            <li key={item}>{processInline(item.replace(/^[-*]\s/, ""))}</li>
-          ))}
-        </ul>,
-      );
-      return;
-    }
-
-    // Regular paragraph
-    elements.push(
-      <p key={`paragraph:${trimmed}`} className="my-2">
-        {processInline(trimmed)}
-      </p>,
-    );
-  });
-
-  return <>{elements}</>;
-}
-
-/**
- * Process inline markdown patterns (bold, italic, code, links).
- */
-function processInline(text: string): React.ReactNode {
-  const parts: React.ReactNode[] = [];
-  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(
-        <a
-          key={key++}
-          href={linkMatch[2]}
-          target="_blank"
-          rel="noopener noreferrer"
-          className="text-[var(--accent)] underline"
-        >
-          {linkMatch[1]}
-        </a>,
-      );
-      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(
-        <code
-          key={key++}
-          className="bg-[var(--bg-hover)] px-1 py-0.5 rounded font-mono text-[12px]"
-        >
-          {codeMatch[1]}
-        </code>,
-      );
-      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(<strong key={key++}>{boldMatch[1]}</strong>);
-      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(<em key={key++}>{italicMatch[2]}</em>);
-      const italicIndex = italicMatch.index ?? 0;
-      remaining = remaining.substring(italicIndex + italicMatch[0].length);
-      continue;
-    }
-
-    // No more patterns found
-    parts.push(remaining);
-    break;
-  }
-
-  return <>{parts}</>;
-}
-
-/**
- * Helper to handle plain text without additional patterns.
- */
-function processSimpleInline(text: string, key: number): React.ReactNode {
-  return <span key={key}>{text}</span>;
-}
-
-function MarkdownFieldInner(props: FieldRenderProps) {
-  const { t } = useApp();
-  const [preview, setPreview] = useState(false);
-  const value = typeof props.value === "string" ? props.value : "";
-
-  return (
-    <div className="flex flex-col gap-1.5">
-      <div className="flex items-center gap-2 mb-1">
-        <button
-          type="button"
-          className={`text-[11px] px-2 py-0.5 border transition-colors ${
-            !preview
-              ? "bg-[var(--accent)] text-[var(--accent-fg)] border-[var(--accent)]"
-              : "bg-transparent text-[var(--muted)] border-[var(--border)] hover:text-[var(--txt)]"
-          }`}
-          onClick={() => setPreview(false)}
-        >
-          {t("config-field.Edit", { defaultValue: "Edit" })}
-        </button>
-        <button
-          type="button"
-          className={`text-[11px] px-2 py-0.5 border transition-colors ${
-            preview
-              ? "bg-[var(--accent)] text-[var(--accent-fg)] border-[var(--accent)]"
-              : "bg-transparent text-[var(--muted)] border-[var(--border)] hover:text-[var(--txt)]"
-          }`}
-          onClick={() => setPreview(true)}
-        >
-          {t("config-field.Preview", { defaultValue: "Preview" })}
-        </button>
-      </div>
-      {preview ? (
-        <div
-          className="min-h-[100px] px-3 py-2 border border-[var(--border)] bg-[var(--surface)] text-[13px] leading-relaxed"
-          data-config-key={props.key}
-          data-field-type="markdown"
-        >
-          {value ? (
-            renderMarkdown(value)
-          ) : (
-            <span className="text-[var(--muted)] italic">
-              {t("config-field.NothingToPreview", {
-                defaultValue: "Nothing to preview",
-              })}
-            </span>
-          )}
-        </div>
-      ) : (
-        <textarea
-          className={`${inputCls(!!props.errors?.length)} min-h-[100px] h-auto resize-y font-[var(--mono)]`}
-          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")}
-        />
-      )}
-    </div>
-  );
-}
-/** Markdown textarea with Edit/Preview toggle. */
-export const renderMarkdownField: FieldRenderer = (props) => (
-  <MarkdownFieldInner {...props} />
-);
-
-// ── 21. Checkbox Group ───────────────────────────────────────────────────
-
-function CheckboxGroupInner(props: FieldRenderProps) {
-  const { t } = useApp();
-  const selected = new Set(
-    Array.isArray(props.value)
-      ? (props.value as string[])
-      : typeof props.value === "string" && props.value
-        ? props.value.split(",").map((s) => s.trim())
-        : [],
-  );
-  const options: Array<{
-    value: string;
-    label: string;
-    description?: string;
-    disabled?: boolean;
-  }> =
-    props.hint.options ??
-    (props.schema.enum as string[] | undefined)?.map((v) => ({
-      value: v,
-      label: v,
-    })) ??
-    [];
-
-  const toggle = (val: string) => {
-    const next = new Set(selected);
-    if (next.has(val)) next.delete(val);
-    else next.add(val);
-    props.onChange([...next]);
-    fireAction(props, "change");
-  };
-
-  return (
-    <div
-      className="flex flex-col gap-1.5"
-      data-config-key={props.key}
-      data-field-type="checkbox-group"
-    >
-      {options.map((opt) => (
-        <label
-          key={opt.value}
-          className={`flex items-start gap-2.5 px-3 py-2 border border-[var(--border)] bg-[var(--card)] cursor-pointer transition-colors hover:bg-[var(--bg-hover)] ${
-            selected.has(opt.value)
-              ? "border-[var(--accent)] bg-[color-mix(in_srgb,var(--accent)_5%,var(--card))]"
-              : ""
-          } ${opt.disabled ? "opacity-50 pointer-events-none" : ""}`}
-        >
-          <input
-            type="checkbox"
-            checked={selected.has(opt.value)}
-            disabled={props.readonly || opt.disabled}
-            onChange={() => toggle(opt.value)}
-            className="mt-0.5 accent-[var(--accent)]"
-          />
-          <div className="flex flex-col">
-            <span className="text-[13px]">{opt.label}</span>
-            {opt.description && (
-              <span className="text-[11px] text-[var(--muted)] mt-0.5">
-                {opt.description}
-              </span>
-            )}
-          </div>
-        </label>
-      ))}
-      {options.length === 0 && (
-        <span className="text-[11px] text-[var(--muted)] italic">
-          {t("config-field.NoOptionsDefined", {
-            defaultValue: "No options defined",
-          })}
-        </span>
-      )}
-    </div>
-  );
-}
-/** Vertical checkbox list with per-option descriptions and accent highlighting. */
-export const renderCheckboxGroupField: FieldRenderer = (props) => (
-  <CheckboxGroupInner {...props} />
-);
-
-// ── 22. Group ────────────────────────────────────────────────────────────
-
-/** Fieldset container with legend label. */
-export const renderGroupField: FieldRenderer = (props) => {
-  const value = typeof props.value === "string" ? props.value : "";
-  return (
-    <fieldset
-      className="border border-[var(--border)] px-4 py-3 bg-[var(--surface)]"
-      data-config-key={props.key}
-      data-field-type="group"
-    >
-      <legend className="text-[12px] font-semibold text-[var(--muted)] px-1.5">
-        {props.hint.label ?? props.key}
-      </legend>
-      <textarea
-        className={`${inputCls(!!props.errors?.length)} min-h-[60px] h-auto resize-y`}
-        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")}
-      />
-    </fieldset>
-  );
-};
-
-// ── 23. Table ────────────────────────────────────────────────────────────
-
-function TableFieldInner(props: FieldRenderProps) {
-  const { t } = useApp();
-  const MAX_TABLE_ROWS = 50;
-  const columns: Array<{ key: string; label: string }> = ((
-    props.hint as Record<string, unknown>
-  ).columns as Array<{ key: string; label: string }>) ?? [
-    { key: "key", label: "Key" },
-    { key: "value", label: "Value" },
-  ];
-
-  const rawRows = Array.isArray(props.value)
-    ? (props.value as Record<string, string>[])
-    : [];
-  const [rows, setRows] = useState<Record<string, string>[]>(
-    rawRows.length > 0
-      ? rawRows
-      : [Object.fromEntries(columns.map((c) => [c.key, ""]))],
-  );
-
-  const emit = (next: Record<string, string>[]) => {
-    setRows(next);
-    props.onChange(next.filter((r) => columns.some((c) => r[c.key]?.trim())));
-    fireAction(props, "change");
-  };
-
-  const updateCell = (rowIdx: number, colKey: string, val: string) => {
-    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: number) => {
-    if (rows.length <= 1) return;
-    emit(rows.filter((_, i) => i !== idx));
-  };
-
-  return (
-    <div
-      className="flex flex-col gap-1.5"
-      data-config-key={props.key}
-      data-field-type="table"
-    >
-      <div className="border border-[var(--border)] overflow-x-auto">
-        <table className="w-full text-[13px] border-collapse">
-          <thead>
-            <tr className="bg-[var(--surface)]">
-              {columns.map((col) => (
-                <th
-                  key={col.key}
-                  className="text-left text-[11px] font-semibold text-[var(--muted)] px-3 py-1.5 border-b border-[var(--border)]"
-                >
-                  {col.label}
-                </th>
-              ))}
-              <th className="w-[36px] border-b border-[var(--border)]" />
-            </tr>
-          </thead>
-          <tbody>
-            {rows.map((row, ri) => (
-              <tr
-                key={JSON.stringify(row)}
-                className="border-b border-[var(--border)] last:border-b-0"
-              >
-                {columns.map((col) => (
-                  <td key={col.key} className="px-1 py-0.5">
-                    <input
-                      className="w-full px-2 py-1 bg-transparent text-[13px] border-none outline-none focus:bg-[var(--bg-hover)]"
-                      value={row[col.key] ?? ""}
-                      placeholder={col.label}
-                      disabled={props.readonly}
-                      onChange={(e) => updateCell(ri, col.key, e.target.value)}
-                    />
-                  </td>
-                ))}
-                <td className="text-center">
-                  {!props.readonly && rows.length > 1 && (
-                    <button
-                      type="button"
-                      className="text-[var(--muted)] hover:text-[var(--destructive)] text-[14px] px-1"
-                      onClick={() => removeRow(ri)}
-                      title={t("config-field.RemoveRow", {
-                        defaultValue: "Remove row",
-                      })}
-                    >
-                      {t("config-field.Times")}
-                    </button>
-                  )}
-                </td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
-      {!props.readonly && rows.length < MAX_TABLE_ROWS && (
-        <button
-          type="button"
-          className="self-start text-[11px] text-[var(--accent)] hover:underline"
-          onClick={addRow}
-        >
-          {t("config-field.AddRow", { defaultValue: "Add row" })}
-        </button>
-      )}
-    </div>
-  );
-}
-/** Tabular data editor with configurable columns. Max 50 rows. */
-export const renderTableField: FieldRenderer = (props) => (
-  <TableFieldInner {...props} />
-);
-
-// ── Default renderers map ───────────────────────────────────────────────
-
-export const defaultRenderers: Record<string, FieldRenderer> = {
-  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,
-}: {
-  renderProps: FieldRenderProps;
-  renderer: FieldRenderer;
-  pluginId?: string;
-}) {
-  const { t } = useApp();
-  const label = renderProps.hint.label ?? renderProps.key;
-  const envKey = renderProps.key;
-  const labelDiffersFromKey = label !== envKey;
-  const errors = renderProps.errors ?? [];
-  const hasError = errors.length > 0;
-  const isRequiredEmpty = renderProps.required && !renderProps.isSet;
-
-  const renderFn =
-    renderer ??
-    defaultRenderers[renderProps.fieldType] ??
-    defaultRenderers.text;
-
-  return (
-    <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" : ""}`}
-    >
-      {/* Required-but-empty accent bar */}
-      {isRequiredEmpty && (
-        <div className="absolute left-0 top-2.5 bottom-2.5 w-[2px] bg-[var(--destructive)] opacity-40 rounded-full" />
-      )}
-
-      <div className={isRequiredEmpty ? "pl-2.5" : ""}>
-        {/* Label row */}
-        <div className="flex items-center gap-2 mb-1.5">
-          <span
-            className="font-semibold leading-tight truncate"
-            style={{
-              fontSize: "var(--plugin-label-size)",
-              color: "var(--plugin-label)",
-            }}
-          >
-            {label}
-          </span>
-          {renderProps.required && !renderProps.isSet && (
-            <span className="text-[10px] text-[var(--destructive)] font-semibold px-1.5 py-px bg-[color-mix(in_srgb,var(--destructive)_10%,transparent)] rounded-sm shrink-0">
-              {t("config-field.Required")}
-            </span>
-          )}
-          {renderProps.isSet && (
-            <span className="inline-flex items-center gap-1 text-[10px] text-[var(--ok)] font-medium shrink-0">
-              <span className="inline-block w-1.5 h-1.5 rounded-full bg-[var(--ok)]" />
-
-              {t("config-field.Configured")}
-            </span>
-          )}
-          {/* Env key — right-aligned, subtle, only when label differs */}
-          {labelDiffersFromKey && (
-            <code className="text-[10px] font-mono text-[var(--muted)] opacity-0 group-hover/field:opacity-50 transition-opacity truncate ml-auto">
-              {envKey}
-            </code>
-          )}
-        </div>
-
-        {/* Field renderer */}
-        {renderFn(renderProps)}
-
-        {/* Errors */}
-        {hasError && (
-          <div className="mt-1.5 flex flex-col gap-0.5">
-            {errors.map((err) => (
-              <div
-                key={err}
-                className="leading-snug flex items-start gap-1"
-                style={{
-                  fontSize: "var(--plugin-error-size)",
-                  color: "var(--plugin-error)",
-                }}
-              >
-                <span className="shrink-0 mt-px">
-                  {t("config-field.Times")}
-                </span>
-                <span>{err}</span>
-              </div>
-            ))}
-          </div>
-        )}
-
-        {/* Help text */}
-        {(renderProps.hint.help || renderProps.schema.description) && (
-          <div
-            className="mt-1 leading-relaxed line-clamp-2"
-            style={{
-              fontSize: "var(--plugin-help-size)",
-              color: "var(--plugin-help)",
-            }}
-          >
-            {renderProps.hint.help ?? renderProps.schema.description}
-            {renderProps.schema.default != null && (
-              <span className="opacity-70">
-                {" "}
-                {t("config-field.Default", { defaultValue: "Default" })}{" "}
-                {String(renderProps.schema.default)})
-              </span>
-            )}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}