ferro-json-ui 0.3.7

//! Form-control renderers.
//!
//! Each function emits a single typed form control or the surrounding
//! `<form>` element with signature `(el, spec, data, depth) -> String`.
//! Decode failures surface as HTML diagnostic comments via the shared
//! `decode_diagnostic` helper.
//!
//! Behaviors worth flagging for spec authors:
//! - **Switch auto-form wrap** — when `SwitchProps.action` is `Some`, the
//!   switch is wrapped inside a `<form>` that submits on change via
//!   `onchange="this.closest('form').submit()"`.
//! - **Input / Select / Checkbox / Switch `data_path` pre-fill** — resolves
//!   the path against the render-time `data` via
//!   [`crate::data::resolve_path`] / [`crate::data::resolve_path_string`] to
//!   populate `value=""` or `checked` attributes. `default_value` wins over
//!   `data_path` for `Input` and `Select`.
//! - **Form method spoofing** — `PUT` / `PATCH` / `DELETE` rewrite to
//!   `POST` + a hidden `_method` input.

use serde_json::Value;

use crate::action::HttpMethod;
use crate::component::{
    CheckboxListProps, CheckboxProps, FormMaxWidth, FormProps, InputProps, InputType, SelectOption,
    SelectProps, SwitchProps,
};
use crate::data::{resolve_path, resolve_path_string};
use crate::spec::{Element, Spec};

use super::classes::{DISABLED_BASE, FOCUS_RING, MOTION_FAST};
use super::{html_escape, render_element};

/// Renders a `<form>` element. Child IDs in `el.children` become the form
/// body; `FormProps.action` controls submission target and method (with
/// HTTP-method spoofing for PUT/PATCH/DELETE → POST + hidden `_method`
/// input). When `action.url` is `None`, the form falls back to `action="#"`
/// and emits a diagnostic HTML comment.
pub(crate) fn render_form(el: &Element, spec: &Spec, data: &Value, depth: usize) -> String {
    let props: FormProps = match serde_json::from_value(el.props.clone()) {
        Ok(p) => p,
        Err(e) => {
            return format!(
                "<!-- ferro-json-ui: failed to decode Form props: {} -->",
                html_escape(&e.to_string())
            );
        }
    };

    // Effective method — `props.method` overrides `props.action.method`.
    let effective_method = props
        .method
        .as_ref()
        .unwrap_or(&props.action.method)
        .clone();

    let (form_method, needs_spoofing) = match effective_method {
        HttpMethod::Get => ("get", false),
        HttpMethod::Post => ("post", false),
        HttpMethod::Put | HttpMethod::Patch | HttpMethod::Delete => ("post", true),
    };

    // Resolve action URL. Priority:
    //   1. `props.action.url` — populated by `resolve_actions` for the
    //      enclosing element. Not populated for FormProps.action because
    //      `resolve_actions` only walks `el.action`, not `el.props.action`.
    //   2. `props.action.handler` literal path — when the handler is a
    //      `/path` string, use it directly. Covers the FormProps case where
    //      authoring code passes either a literal URL or a `{$data}` binding
    //      that `resolve_expressions` materialised into a literal URL.
    //   3. Fall through to "#" with a diagnostic comment.
    let handler_str = props.action.handler.as_str();
    let (action_url, diagnostic) = if let Some(u) = props.action.url.as_deref() {
        (u.to_string(), String::new())
    } else if handler_str.starts_with('/') {
        (handler_str.to_string(), String::new())
    } else {
        (
            "#".to_string(),
            format!(
                "<!-- ferro-json-ui: action '{}' has no resolved url -->",
                html_escape(handler_str)
            ),
        )
    };

    let id_attr = match props.id.as_deref() {
        Some(i) => format!(" id=\"{}\"", html_escape(i)),
        None => String::new(),
    };
    let enctype_attr = match props.enctype.as_deref() {
        Some(e) => format!(" enctype=\"{}\"", html_escape(e)),
        None => String::new(),
    };
    // Fill mode (Register layout, 256 D-15): the Form joins the fill-viewport
    // height chain so the inner panes Grid's `h-full` resolves against a real
    // height and each pane scrolls independently. Full literals for the
    // Tailwind @source scanner (render::classes discipline).
    let form_classes = if props.fill == Some(true) {
        "flex flex-col h-full min-h-0 [&>*]:flex-1 [&>*]:min-h-0"
    } else {
        "flex flex-wrap gap-4 [&>*]:w-full [&>button]:w-auto [&>a]:w-auto"
    };
    let mut html = match &props.guard {
        Some(g) => format!(
            "<form{id_attr} action=\"{}\" method=\"{}\"{enctype_attr} data-form-guard=\"{}\" class=\"{form_classes}\">",
            html_escape(&action_url),
            form_method,
            html_escape(g)
        ),
        None => format!(
            "<form{id_attr} action=\"{}\" method=\"{}\"{enctype_attr} class=\"{form_classes}\">",
            html_escape(&action_url),
            form_method
        ),
    };

    if needs_spoofing {
        let method_value = match effective_method {
            HttpMethod::Put => "PUT",
            HttpMethod::Patch => "PATCH",
            HttpMethod::Delete => "DELETE",
            _ => unreachable!(),
        };
        html.push_str(&format!(
            "<input type=\"hidden\" name=\"_method\" value=\"{method_value}\">"
        ));
    }

    // Form fields come from `el.children`. Each child ID is looked up and
    // rendered via the walker, which applies visibility and depth guards.
    for child_id in &el.children {
        html.push_str(&render_element(child_id, spec, data, depth + 1));
    }

    html.push_str("</form>");

    // Max-width wrapper when specified. Anchors LEFT (no mx-auto) so a
    // constrained form aligns with the page header edge; centering belongs to
    // the layout (AuthLayout centers its whole content area itself).
    let html = match props.max_width.as_ref().unwrap_or(&FormMaxWidth::Default) {
        FormMaxWidth::Default => html,
        FormMaxWidth::Narrow => format!("<div class=\"max-w-2xl\">{html}</div>"),
        FormMaxWidth::Wide => format!("<div class=\"max-w-4xl\">{html}</div>"),
    };

    format!("{diagnostic}{html}")
}

/// Renders an `<input>` (or `<textarea>` for `InputType::Textarea`).
///
/// Value-resolution precedence: explicit `default_value` wins over a
/// `data_path`-resolved string. Hidden inputs skip the label and wrapper
/// `<div>`; all other input types render inside a `space-y-1` wrapper with
/// a `<label>` above and optional description / error `<p>` below.
pub(crate) fn render_input(el: &Element, _spec: &Spec, data: &Value, _depth: usize) -> String {
    let props: InputProps = match serde_json::from_value(el.props.clone()) {
        Ok(p) => p,
        Err(e) => {
            return format!(
                "<!-- ferro-json-ui: failed to decode Input props: {} -->",
                html_escape(&e.to_string())
            );
        }
    };

    // Effective value: default_value wins, else data_path, else none.
    let resolved_value = if let Some(ref dv) = props.default_value {
        Some(dv.clone())
    } else if let Some(ref dp) = props.data_path {
        resolve_path_string(data, dp)
    } else {
        None
    };

    // Hidden inputs emit no label or wrapper div.
    if matches!(props.input_type, InputType::Hidden) {
        let val = resolved_value.as_deref().unwrap_or("");
        return format!(
            "<input type=\"hidden\" id=\"{}\" name=\"{}\" value=\"{}\">",
            html_escape(&props.field),
            html_escape(&props.field),
            html_escape(val)
        );
    }

    let has_error = props.error.is_some();
    // The error ring is semantic (destructive) and intentionally NOT the
    // `--color-ring` token; only the non-error branch uses the shared ring.
    let focus_ring_class = if has_error {
        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-destructive focus-visible:ring-offset-2"
    } else {
        FOCUS_RING
    };

    let mut html = String::from("<div class=\"space-y-1\">");
    html.push_str(&format!(
        "<label class=\"block text-sm font-medium text-text\" for=\"{}\">{}</label>",
        html_escape(&props.field),
        html_escape(&props.label)
    ));

    match props.input_type {
        InputType::Hidden => unreachable!("handled by early return above"),
        InputType::Textarea => {
            // fjui-textarea: skin owns border/bg/padding/min-height/font-family/line-height.
            // DISABLED_BASE + FOCUS_RING are D-02 allowlist behavior utilities (kept inline).
            let val = resolved_value.as_deref().unwrap_or("");
            let error_class = if has_error {
                " fjui-textarea--error"
            } else {
                ""
            };
            html.push_str(&format!(
                "<textarea id=\"{}\" name=\"{}\" class=\"fjui-textarea{error_class} w-full {MOTION_FAST} {DISABLED_BASE} {}\"",
                html_escape(&props.field),
                html_escape(&props.field),
                focus_ring_class
            ));
            if let Some(ref placeholder) = props.placeholder {
                html.push_str(&format!(" placeholder=\"{}\"", html_escape(placeholder)));
            }
            if props.required == Some(true) {
                html.push_str(" required");
            }
            if props.disabled == Some(true) {
                html.push_str(" disabled");
            }
            if has_error {
                html.push_str(&format!(
                    " aria-invalid=\"true\" aria-describedby=\"err-{}\"",
                    html_escape(&props.field)
                ));
            }
            html.push_str(&format!(">{}</textarea>", html_escape(val)));
        }
        InputType::File => {
            let file_ring_class = if has_error {
                " ring-1 ring-destructive"
            } else {
                ""
            };
            html.push_str(&format!(
                "<input type=\"file\" id=\"{}\" name=\"{}\" class=\"block w-full text-sm text-text file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-medium file:bg-surface file:text-text hover:file:bg-surface/80{}\"",
                html_escape(&props.field),
                html_escape(&props.field),
                file_ring_class,
            ));
            if let Some(ref accept) = props.accept {
                html.push_str(&format!(" accept=\"{}\"", html_escape(accept)));
            }
            if props.required == Some(true) {
                html.push_str(" required");
            }
            if props.disabled == Some(true) {
                html.push_str(" disabled");
            }
            if has_error {
                html.push_str(&format!(
                    " aria-invalid=\"true\" aria-describedby=\"err-{}\"",
                    html_escape(&props.field)
                ));
            }
            html.push('>');
        }
        _ => {
            let input_type = match props.input_type {
                InputType::Text => "text",
                InputType::Email => "email",
                InputType::Password => "password",
                InputType::Number => "number",
                InputType::Date => "date",
                InputType::Time => "time",
                InputType::Url => "url",
                InputType::Tel => "tel",
                InputType::Search => "search",
                InputType::Textarea | InputType::Hidden | InputType::File => unreachable!(),
            };

            // Date-picker progressive enhancement (ENTRY-02).
            //
            // When `date_picker = true` on a date or time input, wrap the native
            // input in the `[data-date-picker]` contract markup so the client-side
            // calendar runtime (date_picker.rs) can bind to it:
            //
            //   [data-date-picker]             — wrapper
            //   [data-date-picker-native]       — <input> form value carrier (sr-only)
            //   [data-date-picker-trigger]      — <button> that opens the dialog
            //   [data-date-picker-dialog]       — <dialog> element (built by JS)
            //
            // The native input is the sole form value carrier; `class="sr-only"` keeps
            // it accessible but visually hidden so the JS trigger replaces it visually.
            // If `showModal` is unsupported the runtime exits early, leaving the native
            // input functional (no-JS fallback, D-08).
            let use_date_picker = props.date_picker == Some(true)
                && matches!(props.input_type, InputType::Date | InputType::Time);

            if use_date_picker {
                // Wrapper — runtime binds to this attribute.
                html.push_str("<div data-date-picker class=\"fjui-datepicker\">");

                // Native input: sr-only form value carrier.
                let error_attr = if has_error {
                    format!(
                        " aria-invalid=\"true\" aria-describedby=\"err-{}\"",
                        html_escape(&props.field)
                    )
                } else {
                    String::new()
                };
                html.push_str(&format!(
                    "<input type=\"{}\" id=\"{}\" name=\"{}\" class=\"sr-only\" data-date-picker-native",
                    input_type,
                    html_escape(&props.field),
                    html_escape(&props.field),
                ));
                if let Some(ref val) = resolved_value {
                    html.push_str(&format!(" value=\"{}\"", html_escape(val)));
                }
                if props.required == Some(true) {
                    html.push_str(" required");
                }
                if props.disabled == Some(true) {
                    html.push_str(" disabled");
                }
                html.push_str(&error_attr);
                html.push('>');

                // Trigger button — visible, opens the dialog.
                let trigger_label = if input_type == "time" {
                    "Seleziona orario"
                } else {
                    "Seleziona data"
                };
                html.push_str(&format!(
                    "<button type=\"button\" class=\"fjui-datepicker__trigger\" \
                     aria-label=\"{}\" data-date-picker-trigger>{}</button>",
                    html_escape(trigger_label),
                    html_escape(trigger_label),
                ));

                // Dialog shell — JS builds the calendar grid inside on first open.
                html.push_str(
                    "<dialog data-date-picker-dialog class=\"fjui-datepicker__dialog\"></dialog>",
                );

                html.push_str("</div>");
            } else {
                // Standard input (no date picker).
                // fjui-input: skin owns border/bg/padding/border-radius/font-size (incl 16px iOS floor).
                // fjui-input--error: skin owns destructive border color when in error state.
                // DISABLED_BASE + FOCUS_RING are D-02 allowlist behavior utilities (kept inline).
                let error_class = if has_error { " fjui-input--error" } else { "" };
                html.push_str(&format!(
                    "<input type=\"{}\" id=\"{}\" name=\"{}\" class=\"fjui-input{error_class} w-full {MOTION_FAST} {DISABLED_BASE} {}\"",
                    input_type,
                    html_escape(&props.field),
                    html_escape(&props.field),
                    focus_ring_class
                ));
                if let Some(ref placeholder) = props.placeholder {
                    html.push_str(&format!(" placeholder=\"{}\"", html_escape(placeholder)));
                }
                if let Some(ref val) = resolved_value {
                    html.push_str(&format!(" value=\"{}\"", html_escape(val)));
                }
                if let Some(ref step) = props.step {
                    html.push_str(&format!(" step=\"{}\"", html_escape(step)));
                }
                if let Some(ref list_id) = props.list {
                    html.push_str(&format!(" list=\"{}\"", html_escape(list_id)));
                }
                if props.required == Some(true) {
                    html.push_str(" required");
                }
                if props.disabled == Some(true) {
                    html.push_str(" disabled");
                }
                if has_error {
                    html.push_str(&format!(
                        " aria-invalid=\"true\" aria-describedby=\"err-{}\"",
                        html_escape(&props.field)
                    ));
                }
                html.push('>');

                // Optional `<datalist>` companion: looks up `list_id` as a flat
                // key on the root data object and emits one `<option>` per
                // string entry.
                if let Some(ref list_id) = props.list {
                    if let Some(arr) = data.get(list_id).and_then(|v| v.as_array()) {
                        html.push_str(&format!("<datalist id=\"{}\">", html_escape(list_id)));
                        for opt in arr {
                            if let Some(s) = opt.as_str() {
                                html.push_str(&format!("<option value=\"{}\">", html_escape(s)));
                            }
                        }
                        html.push_str("</datalist>");
                    }
                }
            }
        }
    }

    if let Some(ref desc) = props.description {
        html.push_str(&format!(
            "<p class=\"text-sm text-text-muted\">{}</p>",
            html_escape(desc)
        ));
    }

    if let Some(ref error) = props.error {
        html.push_str(&format!(
            "<p id=\"err-{}\" class=\"fjui-form-message--error\">{}</p>",
            html_escape(&props.field),
            html_escape(error)
        ));
    }
    html.push_str("</div>");
    html
}

/// Renders a `<select>` element. Same `default_value` > `data_path`
/// precedence as [`render_input`]. The resolved value marks the matching
/// `<option>` with the `selected` attribute. Optional `placeholder` is
/// emitted as a first `<option value="">` entry.
pub(crate) fn render_select(el: &Element, _spec: &Spec, data: &Value, _depth: usize) -> String {
    let props: SelectProps = match serde_json::from_value(el.props.clone()) {
        Ok(p) => p,
        Err(e) => {
            return format!(
                "<!-- ferro-json-ui: failed to decode Select props: {} -->",
                html_escape(&e.to_string())
            );
        }
    };

    let selected_value = if let Some(ref dv) = props.default_value {
        Some(dv.clone())
    } else if let Some(ref dp) = props.data_path {
        resolve_path_string(data, dp)
    } else {
        None
    };

    let has_error = props.error.is_some();
    // The error ring is semantic (destructive) and intentionally NOT the
    // `--color-ring` token; only the non-error branch uses the shared ring.
    let focus_ring_class = if has_error {
        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-destructive focus-visible:ring-offset-2"
    } else {
        FOCUS_RING
    };

    let mut html = String::from("<div class=\"space-y-1\">");
    html.push_str(&format!(
        "<label class=\"block text-sm font-medium text-text\" for=\"{}\">{}</label>",
        html_escape(&props.field),
        html_escape(&props.label)
    ));

    html.push_str("<div class=\"relative\">");
    // fjui-select: skin owns border/bg/padding/border-radius/font-size/appearance.
    // fjui-select--error: skin owns destructive border when in error state.
    // DISABLED_BASE + FOCUS_RING are D-02 allowlist behavior utilities (kept inline).
    //
    // When searchable=true the native <select> is the hidden form value carrier:
    // it gets class="sr-only" and data-combobox-native instead of the visible skin
    // classes. The combobox.rs runtime syncs value back via nativeSelect.value.
    let select_error_class = if has_error { " fjui-select--error" } else { "" };
    if props.searchable == Some(true) {
        html.push_str(&format!(
            "<select id=\"{}\" name=\"{}\" class=\"sr-only\" data-combobox-native",
            html_escape(&props.field),
            html_escape(&props.field),
        ));
    } else {
        html.push_str(&format!(
            "<select id=\"{}\" name=\"{}\" class=\"fjui-select{select_error_class} w-full pr-10 {MOTION_FAST} {DISABLED_BASE} {}\"",
            html_escape(&props.field),
            html_escape(&props.field),
            focus_ring_class
        ));
    }
    if props.required == Some(true) {
        html.push_str(" required");
    }
    if props.disabled == Some(true) {
        html.push_str(" disabled");
    }
    if has_error {
        html.push_str(&format!(
            " aria-invalid=\"true\" aria-describedby=\"err-{}\"",
            html_escape(&props.field)
        ));
    }
    html.push('>');

    if let Some(ref placeholder) = props.placeholder {
        html.push_str(&format!(
            "<option value=\"\">{}</option>",
            html_escape(placeholder)
        ));
    }

    for opt in &props.options {
        let is_selected = selected_value.as_deref() == Some(&opt.value);
        let selected_attr = if is_selected { " selected" } else { "" };
        html.push_str(&format!(
            "<option value=\"{}\"{}>{}</option>",
            html_escape(&opt.value),
            selected_attr,
            html_escape(&opt.label)
        ));
    }

    html.push_str("</select>");

    if props.searchable == Some(true) {
        // Combobox progressive enhancement overlay.
        // The native <select> above becomes the hidden form value carrier
        // (class="sr-only" data-combobox-native). The visible widget is
        // emitted below; the runtime (combobox.rs) binds the two on init.
        //
        // All fjui-* class names are full string literals (D-01 lock — no
        // format! interpolation of class names). Interpolation is only for
        // id/aria/data attribute VALUES, and every user-supplied value goes
        // through html_escape.

        let field_esc = html_escape(&props.field);
        let placeholder = props.placeholder.as_deref().unwrap_or("Cerca\u{2026}");
        let listbox_id = format!("fjui-combo-listbox-{field_esc}");
        let controls_id = html_escape(&listbox_id);

        html.push_str(&format!(
            "<div class=\"fjui-combobox\" data-combobox>\
             <input class=\"fjui-combobox__input\" data-combobox-input \
              type=\"text\" role=\"combobox\" \
              aria-expanded=\"false\" \
              aria-controls=\"{controls_id}\" \
              aria-autocomplete=\"list\" \
              aria-activedescendant \
              placeholder=\"{placeholder_esc}\" \
              autocomplete=\"off\" spellcheck=\"false\">\
             <ul class=\"fjui-combobox__listbox\" id=\"{controls_id}\" role=\"listbox\" hidden>",
            controls_id = controls_id,
            placeholder_esc = html_escape(placeholder),
        ));

        for (i, opt) in props.options.iter().enumerate() {
            let opt_id = format!("fjui-combo-opt-{}-{}", html_escape(&props.field), i);
            html.push_str(&format!(
                "<li class=\"fjui-combobox__option\" role=\"option\"\
                  id=\"{opt_id}\" data-value=\"{val}\" aria-selected=\"false\">{label}</li>",
                opt_id = html_escape(&opt_id),
                val = html_escape(&opt.value),
                label = html_escape(&opt.label),
            ));
        }

        html.push_str("</ul></div>");
    } else {
        html.push_str(concat!(
            "<span class=\"pointer-events-none absolute inset-y-0 right-3 flex items-center\" aria-hidden=\"true\">",
            "<svg class=\"h-4 w-4 text-text-muted\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\">",
            "<path fill-rule=\"evenodd\" d=\"M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z\" clip-rule=\"evenodd\"/>",
            "</svg></span>"
        ));
    }
    html.push_str("</div>");

    if let Some(ref desc) = props.description {
        html.push_str(&format!(
            "<p class=\"text-sm text-text-muted\">{}</p>",
            html_escape(desc)
        ));
    }

    if let Some(ref error) = props.error {
        html.push_str(&format!(
            "<p id=\"err-{}\" class=\"fjui-form-message--error\">{}</p>",
            html_escape(&props.field),
            html_escape(error)
        ));
    }
    html.push_str("</div>");
    html
}

/// Renders a `<input type="checkbox">`.
///
/// `checked` prop wins over `data_path` truthy resolution. When `props.value`
/// is set, the checkbox id is scoped as `"{field}_{value}"` so multiple
/// checkboxes in a group can share the same name without id collisions.
pub(crate) fn render_checkbox(el: &Element, _spec: &Spec, data: &Value, _depth: usize) -> String {
    let props: CheckboxProps = match serde_json::from_value(el.props.clone()) {
        Ok(p) => p,
        Err(e) => {
            return format!(
                "<!-- ferro-json-ui: failed to decode Checkbox props: {} -->",
                html_escape(&e.to_string())
            );
        }
    };

    let is_checked = resolve_checked(props.checked, props.data_path.as_deref(), data);

    let has_error = props.error.is_some();
    let border_class = if has_error {
        "border-destructive"
    } else {
        "border-border"
    };
    // The error ring is semantic (destructive) and intentionally NOT the
    // `--color-ring` token; only the non-error branch uses the shared ring.
    let focus_ring_class = if has_error {
        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-destructive focus-visible:ring-offset-2"
    } else {
        FOCUS_RING
    };

    let value_attr = props.value.as_deref().unwrap_or("1");
    let checkbox_id = match &props.value {
        Some(v) => format!("{}_{}", props.field, v),
        None => props.field.clone(),
    };

    let mut html = String::from("<div class=\"space-y-1\">");
    html.push_str("<div class=\"flex items-center gap-2\">");
    html.push_str(&format!(
        "<input type=\"checkbox\" id=\"{}\" name=\"{}\" value=\"{}\" class=\"h-4 w-4 rounded-sm {} text-primary {MOTION_FAST} {DISABLED_BASE} {}\"",
        html_escape(&checkbox_id),
        html_escape(&props.field),
        html_escape(value_attr),
        border_class,
        focus_ring_class,
    ));
    if is_checked {
        html.push_str(" checked");
    }
    if props.required == Some(true) {
        html.push_str(" required");
    }
    if props.disabled == Some(true) {
        html.push_str(" disabled");
    }
    if has_error {
        html.push_str(&format!(
            " aria-invalid=\"true\" aria-describedby=\"err-{}\"",
            html_escape(&props.field)
        ));
    }
    html.push('>');
    html.push_str(&format!(
        "<label class=\"text-sm font-medium text-text\" for=\"{}\">{}</label>",
        html_escape(&checkbox_id),
        html_escape(&props.label)
    ));
    html.push_str("</div>");

    if let Some(ref desc) = props.description {
        html.push_str(&format!(
            "<p class=\"ml-6 text-sm text-text-muted\">{}</p>",
            html_escape(desc)
        ));
    }

    if let Some(ref error) = props.error {
        html.push_str(&format!(
            "<p id=\"err-{}\" class=\"ml-6 text-sm text-destructive\">{}</p>",
            html_escape(&props.field),
            html_escape(error)
        ));
    }
    html.push_str("</div>");
    html
}

/// Renders a multi-select checkbox group from static `options` or a data-driven
/// `options_path`. Pre-checked options are resolved from `selected_path` as a
/// `Vec<String>`. All string interpolations pass through `html_escape`.
pub(crate) fn render_checkbox_list(
    el: &Element,
    _spec: &Spec,
    data: &Value,
    _depth: usize,
) -> String {
    let props: CheckboxListProps = match serde_json::from_value(el.props.clone()) {
        Ok(p) => p,
        Err(e) => {
            return format!(
                "<!-- ferro-json-ui: failed to decode CheckboxList props: {} -->",
                html_escape(&e.to_string())
            );
        }
    };

    // Resolve options: data-driven path wins when static `options` is empty.
    let options: Vec<SelectOption> = if props.options.is_empty() {
        props
            .options_path
            .as_deref()
            .and_then(|path| resolve_path(data, path))
            .and_then(|v| v.as_array())
            .map(|arr| {
                arr.iter()
                    .filter_map(|v| serde_json::from_value::<SelectOption>(v.clone()).ok())
                    .collect()
            })
            .unwrap_or_default()
    } else {
        props.options.clone()
    };

    // Resolve pre-selected values.
    let selected: Vec<String> = props
        .selected_path
        .as_deref()
        .and_then(|path| resolve_path(data, path))
        .and_then(|v| v.as_array())
        .map(|arr| {
            arr.iter()
                .filter_map(|v| v.as_str().map(|s| s.to_string()))
                .collect()
        })
        .unwrap_or_default();

    let has_error = props.error.is_some();
    let mut html = if has_error {
        format!(
            "<fieldset class=\"space-y-2\" aria-invalid=\"true\" aria-describedby=\"err-{}\">",
            html_escape(&props.field)
        )
    } else {
        String::from("<fieldset class=\"space-y-2\">")
    };
    if let Some(ref label) = props.label {
        html.push_str(&format!(
            "<legend class=\"text-sm font-medium text-text\">{}</legend>",
            html_escape(label)
        ));
    }
    if let Some(ref desc) = props.description {
        html.push_str(&format!(
            "<p class=\"text-sm text-text-muted mb-2\">{}</p>",
            html_escape(desc)
        ));
    }
    let checkbox_border = if has_error {
        "border-destructive"
    } else {
        "border-border"
    };
    for option in &options {
        let is_checked = selected.contains(&option.value);
        let checkbox_id = format!("{}_{}", props.field, option.value);
        html.push_str("<div class=\"flex items-center gap-2\">");
        html.push_str(&format!(
            "<input type=\"checkbox\" id=\"{}\" name=\"{}\" value=\"{}\" \
             class=\"h-4 w-4 rounded-sm {} text-primary {MOTION_FAST} {DISABLED_BASE} {FOCUS_RING}\"",
            html_escape(&checkbox_id),
            html_escape(&props.field),
            html_escape(&option.value),
            checkbox_border,
        ));
        if is_checked {
            html.push_str(" checked");
        }
        if props.disabled == Some(true) {
            html.push_str(" disabled");
        }
        html.push('>');
        html.push_str(&format!(
            "<label class=\"text-sm font-medium text-text\" for=\"{}\">{}</label>",
            html_escape(&checkbox_id),
            html_escape(&option.label)
        ));
        html.push_str("</div>");
    }
    if let Some(ref err) = props.error {
        html.push_str(&format!(
            "<p id=\"err-{}\" class=\"text-sm text-destructive mt-1\">{}</p>",
            html_escape(&props.field),
            html_escape(err)
        ));
    }
    html.push_str("</fieldset>");
    html
}

/// Renders a switch (styled checkbox with `role="switch"`).
///
/// Auto-form wrap: when `props.action` is `Some`, the switch renders inside
/// a minimal `<form>` and fires an `onchange` submit. When `action.url` is
/// `None`, the form falls back to `action="#"` with a diagnostic HTML
/// comment preceding the rendered markup.
pub(crate) fn render_switch(el: &Element, _spec: &Spec, data: &Value, _depth: usize) -> String {
    let props: SwitchProps = match serde_json::from_value(el.props.clone()) {
        Ok(p) => p,
        Err(e) => {
            return format!(
                "<!-- ferro-json-ui: failed to decode Switch props: {} -->",
                html_escape(&e.to_string())
            );
        }
    };

    let is_checked = resolve_checked(props.checked, props.data_path.as_deref(), data);

    let has_error = props.error.is_some();
    // Error keeps the semantic destructive ring; the non-error ring sources
    // the `--color-ring` token (peer-focus /30 opacity — Switch-specific).
    let peer_ring_class = if has_error {
        "peer-focus:ring-2 peer-focus:ring-destructive/30"
    } else {
        "peer-focus:ring-2 peer-focus:ring-ring/30"
    };

    let compact_class = if props.compact == Some(true) {
        " scale-75 origin-left"
    } else {
        ""
    };

    let auto_submit = props.action.is_some();
    let onchange = if auto_submit {
        " onchange=\"this.closest('form').submit()\""
    } else {
        ""
    };

    let mut diagnostic = String::new();
    let mut html = String::new();

    if let Some(ref action) = props.action {
        let (action_url, diag) = match action.url.as_deref() {
            Some(u) => (u.to_string(), String::new()),
            None => (
                "#".to_string(),
                format!(
                    "<!-- ferro-json-ui: action '{}' has no resolved url -->",
                    html_escape(action.handler.as_str())
                ),
            ),
        };
        diagnostic = diag;

        let (form_method, needs_spoofing) = match action.method {
            HttpMethod::Get => ("get", false),
            HttpMethod::Post => ("post", false),
            HttpMethod::Put | HttpMethod::Patch | HttpMethod::Delete => ("post", true),
        };
        html.push_str(&format!(
            "<form action=\"{}\" method=\"{}\">",
            html_escape(&action_url),
            form_method
        ));
        if needs_spoofing {
            let method_value = match action.method {
                HttpMethod::Put => "PUT",
                HttpMethod::Patch => "PATCH",
                HttpMethod::Delete => "DELETE",
                _ => unreachable!(),
            };
            html.push_str(&format!(
                "<input type=\"hidden\" name=\"_method\" value=\"{method_value}\">"
            ));
        }
    }

    html.push_str(&format!("<div class=\"space-y-1{compact_class}\">"));
    html.push_str("<div class=\"flex items-center justify-between\">");

    // Left side: label + description.
    html.push_str("<div>");
    html.push_str(&format!(
        "<label class=\"text-sm font-medium text-text\" for=\"{}\">{}</label>",
        html_escape(&props.field),
        html_escape(&props.label)
    ));
    if let Some(ref desc) = props.description {
        html.push_str(&format!(
            "<p class=\"text-sm text-text-muted\">{}</p>",
            html_escape(desc)
        ));
    }
    html.push_str("</div>");

    // Right side: toggle.
    html.push_str("<label class=\"relative inline-flex items-center cursor-pointer\">");
    let aria_checked = if is_checked { "true" } else { "false" };
    html.push_str(&format!(
        "<input type=\"checkbox\" id=\"{}\" name=\"{}\" value=\"1\" role=\"switch\" aria-checked=\"{}\" class=\"sr-only peer\"{}",
        html_escape(&props.field),
        html_escape(&props.field),
        aria_checked,
        onchange,
    ));
    if is_checked {
        html.push_str(" checked");
    }
    if props.required == Some(true) {
        html.push_str(" required");
    }
    if props.disabled == Some(true) {
        html.push_str(" disabled");
    }
    if has_error {
        html.push_str(&format!(
            " aria-invalid=\"true\" aria-describedby=\"err-{}\"",
            html_escape(&props.field)
        ));
    }
    html.push('>');
    html.push_str(&format!(
        "<div class=\"w-11 h-6 bg-border rounded-full peer peer-checked:bg-primary {peer_ring_class} after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-background after:rounded-full after:h-5 after:w-5 after:transition-all after:duration-fast after:ease-base peer-checked:after:translate-x-full\"></div>",
    ));
    html.push_str("</label>");
    html.push_str("</div>");

    if let Some(ref error) = props.error {
        html.push_str(&format!(
            "<p id=\"err-{}\" class=\"text-sm text-destructive\">{}</p>",
            html_escape(&props.field),
            html_escape(error)
        ));
    }
    html.push_str("</div>");

    if props.action.is_some() {
        html.push_str("</form>");
    }

    format!("{diagnostic}{html}")
}

/// Shared truthiness rule for `Checkbox.data_path` and `Switch.data_path`.
/// Per-JSON-variant semantics: `Bool` is its own value; `Number` is truthy
/// iff nonzero; `String` is truthy iff non-empty AND not the literal
/// `"false"` / `"0"`; `Null` is always falsy; arrays and objects are always
/// truthy.
fn resolve_checked(explicit: Option<bool>, data_path: Option<&str>, data: &Value) -> bool {
    if let Some(c) = explicit {
        return c;
    }
    match data_path {
        Some(dp) => resolve_path(data, dp)
            .map(|v| match v {
                Value::Bool(b) => *b,
                Value::Number(n) => n.as_f64().map(|f| f != 0.0).unwrap_or(false),
                Value::String(s) => !s.is_empty() && s != "false" && s != "0",
                Value::Null => false,
                _ => true,
            })
            .unwrap_or(false),
        None => false,
    }
}

#[cfg(test)]
mod tests {
    use super::*;
    use crate::action::{Action, HttpMethod};
    use crate::spec::{Element, Spec};
    use serde_json::json;

    fn mk_spec(root: &str, el: Element) -> Spec {
        let mut spec = Spec::builder()
            .element("__tmp__", Element::new("Text"))
            .build()
            .expect("builder accepts trivial spec");
        spec.root = root.to_string();
        spec.elements.clear();
        spec.elements.insert(root.to_string(), el);
        spec
    }

    fn mk_element(type_name: &str, props: Value) -> Element {
        Element {
            type_name: type_name.to_string(),
            props,
            children: Vec::new(),
            action: None,
            visible: None,
            each: None,
            if_: None,
        }
    }

    // ── Input ────────────────────────────────────────────────────────────

    #[test]
    fn input_data_path_prefills_value() {
        let el = mk_element(
            "Input",
            json!({"field": "name", "label": "Name", "data_path": "/user/name"}),
        );
        let spec = mk_spec("root", el.clone());
        let data = json!({"user": {"name": "Alice"}});
        let html = render_input(&el, &spec, &data, 1);
        assert!(html.contains("value=\"Alice\""), "got: {html}");
    }

    #[test]
    fn input_default_value_wins_over_data_path() {
        // Precedence: explicit default_value wins over data_path.
        let el = mk_element(
            "Input",
            json!({
                "field": "name",
                "label": "Name",
                "default_value": "explicit",
                "data_path": "/user/name",
            }),
        );
        let spec = mk_spec("root", el.clone());
        let data = json!({"user": {"name": "Alice"}});
        let html = render_input(&el, &spec, &data, 1);
        assert!(html.contains("value=\"explicit\""), "got: {html}");
        assert!(!html.contains("value=\"Alice\""), "got: {html}");
    }

    #[test]
    fn input_hidden_emits_no_label() {
        let el = mk_element(
            "Input",
            json!({"field": "token", "label": "t", "input_type": "hidden", "default_value": "abc"}),
        );
        let spec = mk_spec("root", el.clone());
        let html = render_input(&el, &spec, &json!({}), 1);
        assert!(html.starts_with("<input type=\"hidden\""), "got: {html}");
        assert!(!html.contains("<label"), "got: {html}");
        assert!(html.contains("value=\"abc\""), "got: {html}");
    }

    #[test]
    fn input_xss_in_value_is_escaped() {
        // Attribute-breakout via data_path — the resolved value must be
        // html-escaped before interpolation into `value=""`.
        let el = mk_element(
            "Input",
            json!({"field": "name", "label": "n", "data_path": "/payload"}),
        );
        let spec = mk_spec("root", el.clone());
        let data = json!({"payload": "\"><script>x</script>"});
        let html = render_input(&el, &spec, &data, 1);
        assert!(!html.contains("<script>x</script>"), "got: {html}");
        assert!(html.contains("&quot;"), "got: {html}");
    }

    #[test]
    fn input_error_emits_aria_describedby() {
        let el = mk_element(
            "Input",
            json!({"field": "email", "label": "Email", "error": "required"}),
        );
        let spec = mk_spec("root", el.clone());
        let html = render_input(&el, &spec, &json!({}), 1);
        assert!(html.contains("aria-invalid=\"true\""), "got: {html}");
        assert!(
            html.contains("aria-describedby=\"err-email\""),
            "got: {html}"
        );
        assert!(
            html.contains("<p id=\"err-email\" class=\"fjui-form-message--error\">required</p>"),
            "got: {html}"
        );
    }

    /// INT-pass (251-02): the non-error focus ring sources the `--color-ring`
    /// token and the disabled treatment is the uniform D-16 pair.
    #[test]
    fn input_non_error_carries_token_ring_and_disabled_base() {
        let el = mk_element("Input", json!({"field": "email", "label": "Email"}));
        let spec = mk_spec("root", el.clone());
        let html = render_input(&el, &spec, &json!({}), 1);
        assert!(
            html.contains("focus-visible:ring-ring"),
            "non-error input must carry the ring token; got: {html}"
        );
        assert!(
            !html.contains("focus-visible:ring-destructive"),
            "no error ring without error; got: {html}"
        );
        assert!(
            html.contains("disabled:pointer-events-none"),
            "uniform disabled treatment (D-16); got: {html}"
        );
        assert!(
            !html.contains("disabled:cursor-not-allowed"),
            "retired disabled cursor class must not survive; got: {html}"
        );
        assert!(
            html.contains("duration-fast"),
            "fast motion tier on form controls; got: {html}"
        );
    }

    /// INT-pass (251-02): Switch non-error peer ring sources the ring token.
    #[test]
    fn switch_non_error_carries_token_peer_ring() {
        let el = mk_element("Switch", json!({"field": "notify", "label": "Notify"}));
        let spec = mk_spec("root", el.clone());
        let html = render_switch(&el, &spec, &json!({}), 1);
        assert!(
            html.contains("peer-focus:ring-ring/30"),
            "non-error Switch must carry peer-focus:ring-ring/30; got: {html}"
        );
        assert!(
            !html.contains("peer-focus:ring-destructive/30"),
            "no error peer ring without error; got: {html}"
        );
    }

    // ── Date picker opt-in ───────────────────────────────────────────────

    /// date_picker=true on a date input emits the [data-date-picker] wrapper,
    /// the sr-only native input as value carrier, the trigger button, and the
    /// dialog shell. No plain fjui-input class must appear (that class belongs
    /// to the un-enhanced path).
    #[test]
    fn input_date_picker_true_emits_wrapper_markup() {
        let el = mk_element(
            "Input",
            json!({
                "field": "date",
                "label": "Data",
                "input_type": "date",
                "date_picker": true,
                "default_value": "2026-07-22"
            }),
        );
        let spec = mk_spec("root", el.clone());
        let html = render_input(&el, &spec, &json!({}), 1);

        // Wrapper attribute present.
        assert!(
            html.contains("data-date-picker"),
            "wrapper attr missing; got: {html}"
        );
        // Native input is the value carrier with data-date-picker-native.
        assert!(
            html.contains("data-date-picker-native"),
            "native value-carrier attr missing; got: {html}"
        );
        // Native input carries sr-only (visually hidden, accessible).
        assert!(
            html.contains("sr-only"),
            "sr-only missing on native input; got: {html}"
        );
        // Native input carries the default value.
        assert!(
            html.contains("value=\"2026-07-22\""),
            "default value missing on native input; got: {html}"
        );
        // Trigger button present.
        assert!(
            html.contains("data-date-picker-trigger"),
            "trigger button attr missing; got: {html}"
        );
        // Dialog shell present.
        assert!(
            html.contains("data-date-picker-dialog"),
            "dialog shell attr missing; got: {html}"
        );
        // No plain fjui-input class — that is the un-enhanced path.
        assert!(
            !html.contains("class=\"fjui-input"),
            "fjui-input class must not appear on the date-picker path; got: {html}"
        );
    }

    /// date_picker=true on a time input emits "Seleziona orario" trigger label.
    #[test]
    fn input_date_picker_true_time_emits_orario_label() {
        let el = mk_element(
            "Input",
            json!({
                "field": "booking_time",
                "label": "Orario",
                "input_type": "time",
                "date_picker": true
            }),
        );
        let spec = mk_spec("root", el.clone());
        let html = render_input(&el, &spec, &json!({}), 1);

        assert!(
            html.contains("data-date-picker"),
            "wrapper attr missing; got: {html}"
        );
        assert!(
            html.contains("Seleziona orario"),
            "time trigger must say 'Seleziona orario'; got: {html}"
        );
        assert!(
            !html.contains("Seleziona data"),
            "time trigger must not say 'Seleziona data'; got: {html}"
        );
    }

    /// date_picker absent (default) on a date input emits the plain fjui-input path.
    /// Regression guard: the enhancement must not alter existing plain date inputs.
    #[test]
    fn input_date_no_picker_emits_plain_input() {
        let el = mk_element(
            "Input",
            json!({"field": "date", "label": "Data", "input_type": "date"}),
        );
        let spec = mk_spec("root", el.clone());
        let html = render_input(&el, &spec, &json!({}), 1);

        assert!(
            !html.contains("data-date-picker"),
            "plain date input must not emit data-date-picker; got: {html}"
        );
        assert!(
            html.contains("class=\"fjui-input"),
            "plain date input must emit fjui-input class; got: {html}"
        );
        assert!(
            html.contains("type=\"date\""),
            "plain date input must emit type=\"date\"; got: {html}"
        );
    }

    /// date_picker=true propagates error ARIA to the native sr-only input.
    #[test]
    fn input_date_picker_error_aria_on_native_input() {
        let el = mk_element(
            "Input",
            json!({
                "field": "date",
                "label": "Data",
                "input_type": "date",
                "date_picker": true,
                "error": "obbligatorio"
            }),
        );
        let spec = mk_spec("root", el.clone());
        let html = render_input(&el, &spec, &json!({}), 1);

        assert!(
            html.contains("aria-invalid=\"true\""),
            "aria-invalid missing; got: {html}"
        );
        assert!(
            html.contains("aria-describedby=\"err-date\""),
            "aria-describedby missing; got: {html}"
        );
        // Error message paragraph still rendered.
        assert!(
            html.contains("<p id=\"err-date\""),
            "error <p> missing; got: {html}"
        );
    }

    // ── Checkbox ─────────────────────────────────────────────────────────

    #[test]
    fn checkbox_error_renders_destructive_class_and_aria() {
        let el = mk_element(
            "Checkbox",
            json!({"field": "agreed", "label": "Agree", "error": "required"}),
        );
        let spec = mk_spec("root", el.clone());
        let html = render_checkbox(&el, &spec, &json!({}), 1);

        // Pitfall 3 guard: border-destructive must be ON the <input>, not on an outer <div>.
        let input_pos = html
            .find("<input type=\"checkbox\"")
            .expect("<input type=\"checkbox\" not found in rendered output");
        let input_close_rel = html[input_pos..]
            .find('>')
            .expect("closing > for <input> not found");
        let input_tag = &html[input_pos..=(input_pos + input_close_rel)];
        assert!(
            input_tag.contains("border-destructive"),
            "border-destructive must be on the <input> tag itself; input tag: {input_tag}"
        );
        assert!(
            input_tag.contains("focus-visible:ring-destructive"),
            "focus-visible:ring-destructive must be on the <input>; input tag: {input_tag}"
        );
        assert!(
            input_tag.contains("aria-invalid=\"true\""),
            "aria-invalid must be on the <input>; input tag: {input_tag}"
        );
        assert!(
            input_tag.contains("aria-describedby=\"err-agreed\""),
            "aria-describedby must be on the <input>; input tag: {input_tag}"
        );

        // Locked error <p> DOM shape per UI-SPEC.md.
        assert!(
            html.contains(
                "<p id=\"err-agreed\" class=\"ml-6 text-sm text-destructive\">required</p>"
            ),
            "error <p> must have id=\"err-agreed\" and locked class chain; got: {html}"
        );

        // Diagnostic-comment guard (RESEARCH Pattern Map §Decode-Failure).
        assert!(
            !html.contains("<!-- ferro-json-ui:"),
            "no diagnostic comments in happy path; got: {html}"
        );
    }

    #[test]
    fn checkbox_list_error_renders_fieldset_aria() {
        let el = mk_element(
            "CheckboxList",
            json!({
                "field": "topics",
                "label": "Topics",
                "options": [
                    {"value": "a", "label": "A"},
                    {"value": "b", "label": "B"}
                ],
                "error": "pick at least one"
            }),
        );
        let spec = mk_spec("root", el.clone());
        let html = render_checkbox_list(&el, &spec, &json!({}), 1);

        // Fieldset must carry the ARIA pairing.
        let fieldset_pos = html
            .find("<fieldset")
            .expect("<fieldset not found in rendered output");
        let fieldset_close_rel = html[fieldset_pos..]
            .find('>')
            .expect("closing > for <fieldset> not found");
        let fieldset_tag = &html[fieldset_pos..=(fieldset_pos + fieldset_close_rel)];
        assert!(
            fieldset_tag.contains("aria-invalid=\"true\""),
            "aria-invalid must be on <fieldset>; fieldset tag: {fieldset_tag}"
        );
        assert!(
            fieldset_tag.contains("aria-describedby=\"err-topics\""),
            "aria-describedby must be on <fieldset>; fieldset tag: {fieldset_tag}"
        );

        // Each per-option <input type="checkbox"> must carry border-destructive.
        let input_count = html.matches("<input type=\"checkbox\"").count();
        assert_eq!(
            input_count, 2,
            "expected 2 option inputs; got {input_count} in: {html}"
        );
        let destructive_input_count = html
            .split("<input type=\"checkbox\"")
            .skip(1)
            .filter(|chunk| {
                let close_rel = chunk
                    .find('>')
                    .expect(">/closing not found in option input");
                chunk[..close_rel].contains("border-destructive")
            })
            .count();
        assert_eq!(
            destructive_input_count, 2,
            "both option inputs must carry border-destructive; got {destructive_input_count} of 2 in: {html}"
        );

        // Per-option inputs MUST NOT carry their own aria-invalid (group-level ARIA only).
        // The single aria-invalid above on <fieldset> is the only occurrence we expect.
        let aria_count = html.matches("aria-invalid=\"true\"").count();
        assert_eq!(
            aria_count, 1,
            "aria-invalid should appear only on <fieldset> (count=1); got {aria_count} in: {html}"
        );

        // Locked error <p> DOM shape per UI-SPEC.md.
        assert!(
            html.contains("<p id=\"err-topics\" class=\"text-sm text-destructive mt-1\">pick at least one</p>"),
            "error <p> must have id=\"err-topics\" and locked class chain; got: {html}"
        );

        assert!(
            !html.contains("<!-- ferro-json-ui:"),
            "no diagnostic comments; got: {html}"
        );
    }

    #[test]
    fn switch_error_renders_destructive_ring_and_aria() {
        let el = mk_element(
            "Switch",
            json!({"field": "notify", "label": "Notify me", "error": "required"}),
        );
        let spec = mk_spec("root", el.clone());
        let html = render_switch(&el, &spec, &json!({}), 1);

        // Hidden checkbox <input> must carry aria-invalid + aria-describedby.
        // We isolate the hidden input (it has class "sr-only peer") to make sure the
        // ARIA is on the form control element, not on a sibling div.
        let input_pos = html
            .find("<input")
            .expect("<input not found in rendered output");
        let input_close_rel = html[input_pos..]
            .find('>')
            .expect("closing > for <input> not found");
        let input_tag = &html[input_pos..=(input_pos + input_close_rel)];
        assert!(
            input_tag.contains("sr-only peer"),
            "the first <input> should be the hidden sr-only peer; tag: {input_tag}"
        );
        assert!(
            input_tag.contains("aria-invalid=\"true\""),
            "aria-invalid must be on the hidden <input>; tag: {input_tag}"
        );
        assert!(
            input_tag.contains("aria-describedby=\"err-notify\""),
            "aria-describedby must be on the hidden <input>; tag: {input_tag}"
        );

        // The visible pill <div> must carry peer-focus:ring-destructive/30,
        // NOT the non-error `--color-ring` token ring.
        assert!(
            html.contains("peer-focus:ring-destructive/30"),
            "pill must carry peer-focus:ring-destructive/30; got: {html}"
        );
        assert!(
            !html.contains("peer-focus:ring-ring/30"),
            "pill must NOT carry peer-focus:ring-ring/30 when has_error; got: {html}"
        );

        // Locked error <p> DOM shape per UI-SPEC.md.
        assert!(
            html.contains("<p id=\"err-notify\" class=\"text-sm text-destructive\">required</p>"),
            "error <p> must have id=\"err-notify\" and locked class chain; got: {html}"
        );

        assert!(
            !html.contains("<!-- ferro-json-ui:"),
            "no diagnostic comments; got: {html}"
        );
    }

    #[test]
    fn input_file_error_renders_destructive_ring_and_aria() {
        let el = mk_element(
            "Input",
            json!({
                "field": "avatar",
                "label": "Avatar",
                "input_type": "file",
                "error": "must be PNG"
            }),
        );
        let spec = mk_spec("root", el.clone());
        let html = render_input(&el, &spec, &json!({}), 1);

        // Isolate the <input type="file"> tag bytes (Pitfall 3 guard).
        let input_pos = html
            .find("<input type=\"file\"")
            .expect("<input type=\"file\" not found in rendered output");
        let input_close_rel = html[input_pos..]
            .find('>')
            .expect("closing > for <input type=\"file\"> not found");
        let input_tag = &html[input_pos..=(input_pos + input_close_rel)];

        assert!(
            input_tag.contains("ring-1 ring-destructive"),
            "ring-1 ring-destructive must be on the <input type=\"file\">; tag: {input_tag}"
        );
        assert!(
            input_tag.contains("aria-invalid=\"true\""),
            "aria-invalid must be on the <input type=\"file\">; tag: {input_tag}"
        );
        assert!(
            input_tag.contains("aria-describedby=\"err-avatar\""),
            "aria-describedby must be on the <input type=\"file\">; tag: {input_tag}"
        );

        // Shared error <p> already has id — confirm it survives with the migrated class.
        assert!(
            html.contains(
                "<p id=\"err-avatar\" class=\"fjui-form-message--error\">must be PNG</p>"
            ),
            "shared error <p> must carry id and fjui-form-message--error class; got: {html}"
        );

        assert!(
            !html.contains("<!-- ferro-json-ui:"),
            "no diagnostic comments; got: {html}"
        );
    }

    // ── Select ───────────────────────────────────────────────────────────

    #[test]
    fn select_data_path_marks_option_selected() {
        let el = mk_element(
            "Select",
            json!({
                "field": "role",
                "label": "Role",
                "data_path": "/role",
                "options": [
                    {"value": "a", "label": "A"},
                    {"value": "b", "label": "B"},
                ],
            }),
        );
        let spec = mk_spec("root", el.clone());
        let data = json!({"role": "b"});
        let html = render_select(&el, &spec, &data, 1);
        assert!(
            html.contains("<option value=\"b\" selected>B</option>"),
            "got: {html}"
        );
        assert!(
            html.contains("<option value=\"a\">A</option>"),
            "got: {html}"
        );
    }

    #[test]
    fn select_default_value_wins_over_data_path() {
        let el = mk_element(
            "Select",
            json!({
                "field": "role",
                "label": "Role",
                "default_value": "a",
                "data_path": "/role",
                "options": [
                    {"value": "a", "label": "A"},
                    {"value": "b", "label": "B"},
                ],
            }),
        );
        let spec = mk_spec("root", el.clone());
        let data = json!({"role": "b"});
        let html = render_select(&el, &spec, &data, 1);
        assert!(
            html.contains("<option value=\"a\" selected>A</option>"),
            "got: {html}"
        );
    }

    // ── Checkbox ─────────────────────────────────────────────────────────

    #[test]
    fn checkbox_data_path_truthy_renders_checked() {
        let el = mk_element(
            "Checkbox",
            json!({"field": "agreed", "label": "Agree", "data_path": "/agreed"}),
        );
        let spec = mk_spec("root", el.clone());
        let data = json!({"agreed": true});
        let html = render_checkbox(&el, &spec, &data, 1);
        assert!(html.contains(" checked"), "got: {html}");
    }

    #[test]
    fn checkbox_data_path_false_omits_checked() {
        let el = mk_element(
            "Checkbox",
            json!({"field": "agreed", "label": "Agree", "data_path": "/agreed"}),
        );
        let spec = mk_spec("root", el.clone());
        let data = json!({"agreed": false});
        let html = render_checkbox(&el, &spec, &data, 1);
        assert!(!html.contains(" checked"), "got: {html}");
    }

    #[test]
    fn checkbox_with_value_scopes_id() {
        let el = mk_element(
            "Checkbox",
            json!({"field": "topic", "value": "news", "label": "News"}),
        );
        let spec = mk_spec("root", el.clone());
        let html = render_checkbox(&el, &spec, &json!({}), 1);
        assert!(html.contains("id=\"topic_news\""), "got: {html}");
        assert!(html.contains("name=\"topic\""), "got: {html}");
        assert!(html.contains("value=\"news\""), "got: {html}");
    }

    // ── Switch ───────────────────────────────────────────────────────────

    #[test]
    fn switch_with_action_wraps_in_form() {
        let action = Action {
            handler: "users.toggle".into(),
            url: Some("/users/1/toggle".into()),
            method: HttpMethod::Post,
            confirm: None,
            on_success: None,
            on_error: None,
            target: None,
        };
        let el = mk_element(
            "Switch",
            json!({
                "field": "active",
                "label": "Active",
                "action": action,
            }),
        );
        let spec = mk_spec("root", el.clone());
        let html = render_switch(&el, &spec, &json!({}), 1);
        assert!(
            html.contains("<form action=\"/users/1/toggle\" method=\"post\">"),
            "got: {html}"
        );
        assert!(
            html.contains("onchange=\"this.closest('form').submit()\""),
            "got: {html}"
        );
        assert!(html.contains("</form>"), "got: {html}");
    }

    #[test]
    fn switch_without_action_no_form_wrap() {
        let el = mk_element("Switch", json!({"field": "active", "label": "Active"}));
        let spec = mk_spec("root", el.clone());
        let html = render_switch(&el, &spec, &json!({}), 1);
        assert!(
            !html.contains("<form"),
            "switch without action must not wrap in form; got: {html}"
        );
        assert!(
            !html.contains("onchange"),
            "switch without action must not have onchange; got: {html}"
        );
    }

    #[test]
    fn switch_action_without_url_emits_diagnostic() {
        let action = Action {
            handler: "users.toggle".into(),
            url: None,
            method: HttpMethod::Post,
            confirm: None,
            on_success: None,
            on_error: None,
            target: None,
        };
        let el = mk_element(
            "Switch",
            json!({"field": "active", "label": "Active", "action": action}),
        );
        let spec = mk_spec("root", el.clone());
        let html = render_switch(&el, &spec, &json!({}), 1);
        assert!(
            html.contains("<!-- ferro-json-ui: action 'users.toggle' has no resolved url -->"),
            "got: {html}"
        );
        assert!(html.contains("<form action=\"#\""), "got: {html}");
    }

    #[test]
    fn switch_put_method_spoofs_post() {
        let action = Action {
            handler: "users.update".into(),
            url: Some("/users/1".into()),
            method: HttpMethod::Put,
            confirm: None,
            on_success: None,
            on_error: None,
            target: None,
        };
        let el = mk_element(
            "Switch",
            json!({"field": "x", "label": "X", "action": action}),
        );
        let spec = mk_spec("root", el.clone());
        let html = render_switch(&el, &spec, &json!({}), 1);
        assert!(
            html.contains("<form action=\"/users/1\" method=\"post\">"),
            "got: {html}"
        );
        assert!(
            html.contains("<input type=\"hidden\" name=\"_method\" value=\"PUT\">"),
            "got: {html}"
        );
    }

    // ── Form ─────────────────────────────────────────────────────────────

    #[test]
    fn form_recurses_children_as_fields() {
        // Build with the regular builder so the walker can resolve children.
        let spec = Spec::builder()
            .element(
                "root",
                Element::new("Form")
                    .prop(
                        "action",
                        json!({"handler": "save", "method": "POST", "url": "/save"}),
                    )
                    .child("i1")
                    .child("i2"),
            )
            .element(
                "i1",
                Element::new("Input").prop("field", "a").prop("label", "A"),
            )
            .element(
                "i2",
                Element::new("Input").prop("field", "b").prop("label", "B"),
            )
            .build()
            .expect("spec builds");

        let el = spec.elements.get("root").unwrap();
        let html = render_form(el, &spec, &json!({}), 1);
        assert!(html.contains("<form"), "got: {html}");
        // Both labels appear — confirms recursion into render_element which
        // dispatches to render_input for each child.
        assert!(html.contains(">A</label>"), "got: {html}");
        assert!(html.contains(">B</label>"), "got: {html}");
    }

    #[test]
    fn form_action_url_resolved_in_action_attr() {
        let el = mk_element(
            "Form",
            json!({"action": {"handler": "save", "method": "POST", "url": "/submit"}}),
        );
        let spec = mk_spec("root", el.clone());
        let html = render_form(&el, &spec, &json!({}), 1);
        assert!(html.contains("action=\"/submit\""), "got: {html}");
        assert!(!html.contains("<!-- ferro-json-ui: action"), "got: {html}");
    }

    #[test]
    fn form_action_url_unresolved_falls_back_with_diagnostic() {
        let el = mk_element(
            "Form",
            json!({"action": {"handler": "save", "method": "POST"}}),
        );
        let spec = mk_spec("root", el.clone());
        let html = render_form(&el, &spec, &json!({}), 1);
        assert!(html.contains("action=\"#\""), "got: {html}");
        assert!(
            html.contains("<!-- ferro-json-ui: action 'save' has no resolved url -->"),
            "got: {html}"
        );
    }

    #[test]
    fn form_put_method_spoofs_post_with_hidden_input() {
        let el = mk_element(
            "Form",
            json!({"action": {"handler": "update", "method": "PUT", "url": "/r/1"}}),
        );
        let spec = mk_spec("root", el.clone());
        let html = render_form(&el, &spec, &json!({}), 1);
        assert!(
            html.contains("method=\"post\""),
            "PUT must spoof to POST; got: {html}"
        );
        assert!(
            html.contains("<input type=\"hidden\" name=\"_method\" value=\"PUT\">"),
            "got: {html}"
        );
    }

    // ── Decode-failure diagnostics ───────────────────────────────────────

    #[test]
    fn input_props_decode_failure_emits_diagnostic() {
        let el = mk_element("Input", json!(42));
        let spec = mk_spec("root", el.clone());
        let html = render_input(&el, &spec, &json!({}), 1);
        assert!(
            html.contains("<!-- ferro-json-ui: failed to decode Input props"),
            "got: {html}"
        );
    }

    #[test]
    fn form_props_decode_failure_emits_diagnostic() {
        let el = mk_element("Form", json!(42));
        let spec = mk_spec("root", el.clone());
        let html = render_form(&el, &spec, &json!({}), 1);
        assert!(
            html.contains("<!-- ferro-json-ui: failed to decode Form props"),
            "got: {html}"
        );
    }

    /// Fill mode (256 D-15 / 257-04): a Form with `fill:true` joins the
    /// fill-viewport height chain so the inner panes Grid's `h-full` resolves
    /// against the viewport-constrained cell instead of content height.
    /// Expected class string: `flex flex-col h-full min-h-0 [&>*]:flex-1
    /// [&>*]:min-h-0` — mirrors the SelectionPanel shell pattern.
    #[test]
    fn render_form_fill_true_emits_height_chain() {
        let el = mk_element(
            "Form",
            json!({"action": {"handler": "/x", "method": "POST"}, "fill": true}),
        );
        let spec = mk_spec("root", el.clone());
        let html = render_form(&el, &spec, &json!({}), 1);
        assert!(
            html.contains("flex flex-col h-full min-h-0 [&>*]:flex-1 [&>*]:min-h-0"),
            "fill:true form must carry the height-chain class string; got: {html}"
        );
        assert!(
            !html.contains("flex flex-wrap"),
            "fill:true form must NOT emit flex flex-wrap; got: {html}"
        );
    }

    /// Non-fill Form emits the byte-identical default class string.
    /// Proves the fill:absent path is unaffected by the fill feature (every
    /// existing Form render is unchanged — backward-compatibility guard).
    #[test]
    fn render_form_default_class_is_byte_identical() {
        let el = mk_element(
            "Form",
            json!({"action": {"handler": "/x", "method": "POST"}}),
        );
        let spec = mk_spec("root", el.clone());
        let html = render_form(&el, &spec, &json!({}), 1);
        assert!(
            html.contains(
                "class=\"flex flex-wrap gap-4 [&>*]:w-full [&>button]:w-auto [&>a]:w-auto\""
            ),
            "default form must carry the byte-identical default class string; got: {html}"
        );
        assert!(
            !html.contains("h-full"),
            "default form must NOT contain h-full; got: {html}"
        );
        assert!(
            !html.contains("min-h-0"),
            "default form must NOT contain min-h-0; got: {html}"
        );
    }

    // ── CheckboxList ─────────────────────────────────────────────────────

    #[test]
    fn checkbox_list_renders_one_checkbox_per_option() {
        let el = mk_element(
            "CheckboxList",
            json!({
                "field": "services",
                "options": [{"value": "a", "label": "A"}, {"value": "b", "label": "B"}]
            }),
        );
        let spec = mk_spec("root", el.clone());
        let html = render_checkbox_list(&el, &spec, &json!({}), 1);
        assert_eq!(
            html.matches("<input type=\"checkbox\"").count(),
            2,
            "expected 2 checkboxes; got: {html}"
        );
        assert!(html.contains("name=\"services\""), "got: {html}");
        assert!(html.contains("value=\"a\""), "got: {html}");
        assert!(html.contains("value=\"b\""), "got: {html}");
    }

    #[test]
    fn checkbox_list_selected_path_prechecks_matching_options() {
        let el = mk_element(
            "CheckboxList",
            json!({
                "field": "services",
                "options": [{"value": "a", "label": "A"}, {"value": "b", "label": "B"}],
                "selected_path": "/sel"
            }),
        );
        let spec = mk_spec("root", el.clone());
        let data = json!({"sel": ["a"]});
        let html = render_checkbox_list(&el, &spec, &data, 1);
        // Only option "a" should be checked
        let checked_count = html.matches(" checked").count();
        assert_eq!(checked_count, 1, "expected 1 checked; got: {html}");
        // The checked input must be the one with value="a"
        let a_pos = html.find("value=\"a\"").expect("value=a not found");
        let checked_pos = html.find(" checked").expect("checked not found");
        assert!(
            checked_pos > a_pos,
            "checked attribute should follow value=a; got: {html}"
        );
    }

    #[test]
    fn checkbox_list_options_path_resolves_dynamic_options() {
        let el = mk_element(
            "CheckboxList",
            json!({
                "field": "services",
                "options_path": "/opts"
            }),
        );
        let spec = mk_spec("root", el.clone());
        let data = json!({"opts": [{"value": "x", "label": "X"}]});
        let html = render_checkbox_list(&el, &spec, &data, 1);
        assert!(html.contains("value=\"x\""), "got: {html}");
        assert_eq!(
            html.matches("<input type=\"checkbox\"").count(),
            1,
            "got: {html}"
        );
    }

    #[test]
    fn checkbox_list_escapes_html_in_option_label() {
        let el = mk_element(
            "CheckboxList",
            json!({
                "field": "services",
                "options": [{"value": "a", "label": "<script>alert(1)</script>"}]
            }),
        );
        let spec = mk_spec("root", el.clone());
        let html = render_checkbox_list(&el, &spec, &json!({}), 1);
        assert!(
            html.contains("&lt;script&gt;"),
            "label must be HTML-escaped; got: {html}"
        );
        assert!(
            !html.contains("<script>"),
            "raw <script> must not appear; got: {html}"
        );
    }

    #[test]
    fn checkbox_list_disabled_propagates_to_each_input() {
        let el = mk_element(
            "CheckboxList",
            json!({
                "field": "services",
                "options": [{"value": "a", "label": "A"}, {"value": "b", "label": "B"}],
                "disabled": true
            }),
        );
        let spec = mk_spec("root", el.clone());
        let html = render_checkbox_list(&el, &spec, &json!({}), 1);
        // Match the bare attribute (` disabled>` closes the tag) — the class
        // string legitimately contains `disabled:*` DISABLED_BASE fragments.
        let disabled_count = html.matches(" disabled>").count();
        assert_eq!(
            disabled_count, 2,
            "every input must carry disabled; got: {html}"
        );
    }

    // ── Switch.compact ───────────────────────────────────────────────────

    #[test]
    fn switch_compact_adds_scale_class() {
        // compact=true must produce scale-75 and origin-left in the output
        let el = mk_element(
            "Switch",
            json!({"field": "x", "label": "L", "compact": true}),
        );
        let spec = mk_spec("root", el.clone());
        let html = render_switch(&el, &spec, &json!({}), 1);
        assert!(
            html.contains("scale-75"),
            "compact=true must emit scale-75; got: {html}"
        );
        assert!(
            html.contains("origin-left"),
            "compact=true must emit origin-left; got: {html}"
        );

        // compact=false must NOT produce the compact classes
        let el_false = mk_element(
            "Switch",
            json!({"field": "x", "label": "L", "compact": false}),
        );
        let html_false = render_switch(&el_false, &spec, &json!({}), 1);
        assert!(
            !html_false.contains("scale-75"),
            "compact=false must not emit scale-75; got: {html_false}"
        );

        // compact absent must NOT produce the compact classes
        let el_none = mk_element("Switch", json!({"field": "x", "label": "L"}));
        let html_none = render_switch(&el_none, &spec, &json!({}), 1);
        assert!(
            !html_none.contains("scale-75"),
            "compact=None must not emit scale-75; got: {html_none}"
        );
    }

    // ── File input + enctype (F5) ─────────────────────────────────────────

    #[test]
    fn input_file_renders_file_type_and_accept() {
        // Build a spec with a Form root and one file Input child.
        let spec = Spec::builder()
            .element(
                "root",
                Element::new("Form")
                    .prop(
                        "action",
                        json!({"handler": "upload", "method": "POST", "url": "/upload"}),
                    )
                    .child("avatar_input"),
            )
            .element(
                "avatar_input",
                Element::new("Input")
                    .prop("field", json!("avatar"))
                    .prop("label", json!("Avatar"))
                    .prop("input_type", json!("file"))
                    .prop("accept", json!("image/jpeg,image/png,image/webp")),
            )
            .build()
            .expect("spec builds");

        let html = crate::render::render_spec_to_html(&spec, &serde_json::Value::Null);
        assert!(
            html.contains("type=\"file\""),
            "file input must emit type=\"file\"; got: {html}"
        );
        assert!(
            html.contains("accept=\"image/jpeg,image/png,image/webp\""),
            "file input must emit accept attribute; got: {html}"
        );
        // File inputs MUST NOT emit value="" — browser security restriction.
        assert!(
            !html.contains("value=\"\""),
            "file input must not emit value attribute; got: {html}"
        );
        assert!(
            html.contains("<label"),
            "file input must still render a label; got: {html}"
        );
        assert!(
            html.contains("Avatar"),
            "label must contain the label text; got: {html}"
        );
    }

    #[test]
    fn form_enctype_emitted_when_set() {
        // Form with enctype set must emit the attribute on the opening <form> tag.
        let el_with_enctype = mk_element(
            "Form",
            json!({
                "action": {"handler": "upload", "method": "POST", "url": "/upload"},
                "enctype": "multipart/form-data"
            }),
        );
        let spec = mk_spec("root", el_with_enctype.clone());
        let html = render_form(&el_with_enctype, &spec, &json!({}), 1);
        assert!(
            html.contains("enctype=\"multipart/form-data\""),
            "enctype must appear in HTML; got: {html}"
        );
        // enctype attribute must appear on the opening <form> tag (between <form and first >)
        let form_start = html.find("<form").expect("<form not found");
        let tag_end = html[form_start..]
            .find('>')
            .expect("> not found after <form");
        let opening_tag = &html[form_start..form_start + tag_end];
        assert!(
            opening_tag.contains("enctype=\"multipart/form-data\""),
            "enctype must be on the opening <form> tag, not a child; got opening tag: {opening_tag}"
        );

        // Form without enctype must NOT emit the attribute.
        let el_no_enctype = mk_element(
            "Form",
            json!({"action": {"handler": "save", "method": "POST", "url": "/save"}}),
        );
        let spec2 = mk_spec("root", el_no_enctype.clone());
        let html2 = render_form(&el_no_enctype, &spec2, &json!({}), 1);
        assert!(
            !html2.contains("enctype=\""),
            "form without enctype must not emit enctype attribute; got: {html2}"
        );
    }

    #[test]
    fn multipart_form_roundtrip() {
        // End-to-end: staff create form with enctype + file input + text input + submit button.
        let spec = Spec::builder()
            .element(
                "root",
                Element::new("Form")
                    .prop(
                        "action",
                        json!({"handler": "staff.create", "method": "POST", "url": "/staff"}),
                    )
                    .prop("enctype", json!("multipart/form-data"))
                    .child("name_input")
                    .child("avatar_input")
                    .child("submit_btn"),
            )
            .element(
                "name_input",
                Element::new("Input")
                    .prop("field", json!("name"))
                    .prop("label", json!("Nome"))
                    .prop("input_type", json!("text")),
            )
            .element(
                "avatar_input",
                Element::new("Input")
                    .prop("field", json!("avatar"))
                    .prop("label", json!("Avatar"))
                    .prop("input_type", json!("file"))
                    .prop("accept", json!("image/jpeg,image/png,image/webp")),
            )
            .element(
                "submit_btn",
                Element::new("Button")
                    .prop("label", json!("Salva"))
                    .prop("button_type", json!("submit")),
            )
            .build()
            .expect("spec builds");

        let html = crate::render::render_spec_to_html(&spec, &serde_json::Value::Null);
        assert!(
            html.contains("enctype=\"multipart/form-data\""),
            "form must emit enctype; got: {html}"
        );
        assert!(
            html.contains("type=\"file\""),
            "avatar input must emit type=file; got: {html}"
        );
        assert!(
            html.contains("accept=\"image/jpeg,image/png,image/webp\""),
            "avatar input must emit accept; got: {html}"
        );
        assert!(
            html.contains("type=\"text\""),
            "name input must emit type=text; got: {html}"
        );
        assert!(
            html.contains("type=\"submit\""),
            "submit button must emit type=submit; got: {html}"
        );
    }

    // ── Switch depth-8 regression (F1 + F4 closure) ──────────────────────

    #[test]
    fn switch_at_depth_8_renders_role_switch() {
        // Consumer's staff-detail nesting:
        // dashboard (depth 1) → root layout (2) → DetailPage (3) → Tabs (4)
        // → Card (5) → Form (6) → Grid (7, "row") → Switch (8)
        //
        // Before Phase 175-01 (F1): MAX_NESTING_DEPTH = 5 → the walker tripwire
        // fired at depth 7+, emitting a "depth limit exceeded" comment instead of
        // dispatching to render_switch. The consumer's Switch was invisibly stripped.
        //
        // After Phase 175-01: MAX_NESTING_DEPTH = 16 → depth 8 is well within
        // the limit, dispatch reaches render_switch, and the role="switch" markup
        // emerges.
        //
        // This test pins the F1+F4 closure: if a future regression lowers the
        // depth limit below 8 or breaks Switch dispatch, this test fires.
        // Spec::builder() validates structure at build() time — a DepthExceeded
        // error here means MAX_NESTING_DEPTH was reverted below 8.
        let spec = Spec::builder()
            // depth 1: g1 → g2
            .element(
                "g1",
                Element::new("Grid").prop("columns", json!(1)).child("g2"),
            )
            // depth 2: g2 → g3
            .element(
                "g2",
                Element::new("Grid").prop("columns", json!(1)).child("g3"),
            )
            // depth 3: g3 → g4
            .element(
                "g3",
                Element::new("Grid").prop("columns", json!(1)).child("g4"),
            )
            // depth 4: g4 → g5
            .element(
                "g4",
                Element::new("Grid").prop("columns", json!(1)).child("g5"),
            )
            // depth 5: g5 → g6
            .element(
                "g5",
                Element::new("Grid").prop("columns", json!(1)).child("g6"),
            )
            // depth 6: g6 → g7
            .element(
                "g6",
                Element::new("Grid").prop("columns", json!(1)).child("g7"),
            )
            // depth 7: g7 → leaf
            .element(
                "g7",
                Element::new("Grid").prop("columns", json!(1)).child("leaf"),
            )
            // depth 8: Switch leaf (the consumer's per-day open/closed toggle)
            .element(
                "leaf",
                Element::new("Switch")
                    .prop("field", json!("day_1_is_open"))
                    .prop("label", json!("Aperto")),
            )
            .build()
            .expect("depth-8 spec must build after Phase 175-01 raises MAX_NESTING_DEPTH to 16");

        let html = crate::render::render_spec_to_html(&spec, &serde_json::Value::Null);

        assert!(
            html.contains("role=\"switch\""),
            "Switch at depth 8 must render role=\"switch\"; got: {html}"
        );
        assert!(
            !html.contains("depth limit exceeded"),
            "Switch at depth 8 must not be stripped by the walker tripwire; got: {html}"
        );
        assert!(
            !html.contains("cycle guard tripped"),
            "Walker tripwire must not emit the deprecated cycle-guard diagnostic; got: {html}"
        );
    }

    // ── CheckboxGroup (alias for CheckboxList) ────────────────────────────

    #[test]
    fn checkbox_group_renders_fieldset() {
        // CheckboxGroup dispatches to render_checkbox_list — same props, same renderer.
        // A spec with type "CheckboxGroup" must produce a <fieldset> with N
        // <input type="checkbox"> children whose name attributes carry the field name.
        let el = mk_element(
            "CheckboxGroup",
            json!({
                "field": "copy_to",
                "label": "Copia su",
                "options": [
                    {"value": "tue", "label": "Martedì"},
                    {"value": "wed", "label": "Mercoledì"}
                ]
            }),
        );
        let spec = mk_spec("root", el.clone());
        let html = crate::render::render_spec_to_html(&spec, &serde_json::Value::Null);
        assert!(
            html.contains("<fieldset"),
            "CheckboxGroup must render a <fieldset>; got: {html}"
        );
        assert!(
            html.contains("type=\"checkbox\""),
            "CheckboxGroup must render <input type=\"checkbox\"> children; got: {html}"
        );
        assert!(
            html.contains("name=\"copy_to\""),
            "CheckboxGroup must emit a name attribute on its children; got: {html}"
        );
        assert_eq!(
            html.matches("<input type=\"checkbox\"").count(),
            2,
            "expected 2 checkboxes for 2 options; got: {html}"
        );
    }

    // ── Plan 08: fjui- classes for Input/Select/Textarea/FormSection/FormGroup ──

    /// D-08 migration: render_input emits fjui-input class.
    #[test]
    fn input_emits_fjui_input_class() {
        let el = mk_element("Input", json!({"field": "email", "label": "Email"}));
        let spec = mk_spec("root", el.clone());
        let html = render_input(&el, &spec, &json!({}), 1);
        assert!(
            html.contains("fjui-input"),
            "render_input must emit fjui-input class; got: {html}"
        );
    }

    /// D-08 migration: render_input with error emits fjui-input--error modifier.
    #[test]
    fn input_with_error_emits_fjui_input_error_modifier() {
        let el = mk_element(
            "Input",
            json!({"field": "email", "label": "Email", "error": "required"}),
        );
        let spec = mk_spec("root", el.clone());
        let html = render_input(&el, &spec, &json!({}), 1);
        assert!(
            html.contains("fjui-input--error"),
            "input with error must emit fjui-input--error; got: {html}"
        );
    }

    /// D-08 migration: render_select emits fjui-select class.
    #[test]
    fn select_emits_fjui_select_class() {
        let el = mk_element(
            "Select",
            json!({
                "field": "role",
                "label": "Role",
                "options": [{"value": "a", "label": "A"}],
            }),
        );
        let spec = mk_spec("root", el.clone());
        let html = render_select(&el, &spec, &json!({}), 1);
        assert!(
            html.contains("fjui-select"),
            "render_select must emit fjui-select class; got: {html}"
        );
    }

    /// D-08 migration: render_input (textarea) emits fjui-textarea class.
    #[test]
    fn textarea_emits_fjui_textarea_class() {
        let el = mk_element(
            "Input",
            json!({"field": "notes", "label": "Notes", "input_type": "textarea"}),
        );
        let spec = mk_spec("root", el.clone());
        let html = render_input(&el, &spec, &json!({}), 1);
        assert!(
            html.contains("fjui-textarea"),
            "textarea input must emit fjui-textarea class; got: {html}"
        );
    }

    /// D-08 migration: error message paragraph emits fjui-form-message--error.
    #[test]
    fn input_error_paragraph_emits_fjui_form_message_error() {
        let el = mk_element(
            "Input",
            json!({"field": "email", "label": "Email", "error": "is required"}),
        );
        let spec = mk_spec("root", el.clone());
        let html = render_input(&el, &spec, &json!({}), 1);
        assert!(
            html.contains("fjui-form-message--error"),
            "error paragraph must emit fjui-form-message--error class; got: {html}"
        );
    }

    // ── Select / Combobox ────────────────────────────────────────────────

    /// Searchable=true must produce the combobox overlay markup with the native
    /// select as a hidden form value carrier.
    #[test]
    fn searchable_true_emits_combobox_markup() {
        let el = mk_element(
            "Select",
            json!({
                "field": "customer_id",
                "label": "Cliente",
                "searchable": true,
                "options": [
                    {"value": "1", "label": "Alice"},
                    {"value": "2", "label": "Bob"}
                ]
            }),
        );
        let spec = mk_spec("root", el.clone());
        let html = render_select(&el, &spec, &json!({}), 1);

        // Native select must be hidden as form value carrier.
        assert!(
            html.contains("data-combobox-native"),
            "hidden native select must carry data-combobox-native; got: {html}"
        );
        assert!(
            html.contains("class=\"sr-only\""),
            "native select must have class=sr-only; got: {html}"
        );

        // Combobox wrapper and input ARIA.
        assert!(
            html.contains("data-combobox"),
            "combobox wrapper must carry data-combobox; got: {html}"
        );
        assert!(
            html.contains("role=\"combobox\""),
            "filter input must carry role=combobox; got: {html}"
        );
        assert!(
            html.contains("aria-autocomplete=\"list\""),
            "filter input must carry aria-autocomplete=list; got: {html}"
        );

        // Stable option ids — index-based, never value-based.
        assert!(
            html.contains("id=\"fjui-combo-opt-customer_id-0\""),
            "first option must have stable id fjui-combo-opt-customer_id-0; got: {html}"
        );
        assert!(
            html.contains("id=\"fjui-combo-opt-customer_id-1\""),
            "second option must have stable id fjui-combo-opt-customer_id-1; got: {html}"
        );

        // No diagnostic comments in the happy path.
        assert!(
            !html.contains("<!-- ferro-json-ui:"),
            "no diagnostic comments in happy path; got: {html}"
        );
    }

    /// Searchable=false (or None) must preserve the original native select unchanged.
    #[test]
    fn searchable_false_emits_native_select_only() {
        let el = mk_element(
            "Select",
            json!({
                "field": "status",
                "label": "Stato",
                "options": [{"value": "a", "label": "Active"}]
            }),
        );
        let spec = mk_spec("root", el.clone());
        let html = render_select(&el, &spec, &json!({}), 1);

        assert!(
            !html.contains("data-combobox"),
            "non-searchable select must not emit combobox markup; got: {html}"
        );
        assert!(
            html.contains("class=\"fjui-select"),
            "non-searchable select must keep fjui-select class; got: {html}"
        );
    }
}