Schema Inspector FAQ Block for React

FAQS at the top of the file. A SCHEMA object is built from it once: a FAQPage with a Question for each entry and its acceptedAnswer. The tree draws that object, the Copy JSON button copies it pretty-printed, and the block's script tag carries it compact, with every < escaped as < so an answer can never close the tag. Answers should be plain text.

The tree names each node with a hash of its path, such as $.mainEntity.2, and the block computes the same hash with pathId to know which node is a question's. The open question's node is expanded and tinted with a ring; closing the question clears it. That hash is the tree's own detail: if a later version changes it, the tree keeps working and only the automatic expanding and highlighting stop.

No. The tree's string, number and boolean tones are set to the theme's foreground, so it reads the same in every preset, light or dark; the keys are medium weight and the structure comes from indentation and the expand arrows. The tree keeps room for its tallest state, so opening a question never moves the page.

Yes. The Accordion takes hiddenUntilFound, so closed answers stay in the markup as hidden="until-found" and the browser's find in page opens the one that holds a match.

Each question is a button inside its own h3 under the section's h2; the inspector's heading is an h3 too. The tree is a keyboard tree: Tab enters it and the arrow keys move between nodes, expanding and collapsing them, and each node has a label that says what it holds. The copy button announces "Copied" politely.

Below the lg breakpoint the tinted panel goes under the questions, under a rule, with a ghost "View the schema" button that opens and closes the inspector (it's aria-expanded, and the inspector stays in the page either way). From lg the button is gone and the inspector stays in view as you scroll the list.