# `lr-json-schema-viewer` - **Import** `import '@aceshooting/lyra-ui/components/lr-json-schema-viewer.js';` (stable tag alias; registers the tag) - **Class** `LyraJsonSchemaViewer`, also available unregistered from `@aceshooting/lyra-ui/components/agent-tools/schema-viewer/schema-viewer.class.js` - **Family** `components/agent-tools/` — see `llms/index.md` for its siblings - **Status** `stable` since `9.0.0` — see the maturity and deprecation policy in `llms/shared.md` - **Release history** [CHANGELOG.md](../../CHANGELOG.md); family-wide breaking-change summaries: [llms-full.txt](../../llms-full.txt) - **Deprecations** none - **Optional peers** none - **Themeable via** 14 parts, 8 custom properties — see this component's own `@csspart`/`@cssprop` list below - **Library-wide behavior** (events, form association, `locale`/`strings`, tokens, TS types): `llms/shared.md` --- ## `lr-json-schema-viewer` Recursive JSON Schema inspector with property/branch selection, required and constraint display, validation issues, `$ref` visibility, composition branches, cycle protection, and a depth ceiling. It intentionally does not fetch remote references or validate values. **Properties:** clone-owned, bounded, frozen `schema: JsonSchemaNode | null = null` and `issues: readonly SchemaValidationIssue[] = []` (attribute: false); reassign a new schema record or issue array after changes. `selectedPath: string | null = null` (attribute `selected-path`) — `null` means no selection, while the empty string is the valid JSON Pointer for the schema root; `maxDepth: number = 20` (attribute `max-depth`, clamped to 100); `label: string = ''`. **Exported types:** `JsonSchemaNode` covers `$ref`, type/title/description, properties/items, readonly required/enum/examples and oneOf/anyOf/allOf collections, and const/default while preserving unknown schema keywords. `SchemaValidationIssue = { path: string; message: string; severity?: 'error' | 'warning' | 'info' }`. At runtime, a Swagger-style boolean or string `required` keyword is treated as no JSON-Schema required-property list instead of rejecting the entire tree. **Events:** `lr-schema-select` (`{ schemaPath, schema }`, with an RFC 6901-style JSON Pointer). **CSS parts:** `base`, `tree`, `node`, `node-selected`, `node-trigger`, `name`, `type`, `required`, `description`, `constraints`, `issue`, `limit`, `issue-limit`, `empty`. `issue-limit` is the localized resource-ceiling status shown when caller-supplied validation issues exceed the rendered issue cap. `[part='issue']` carries `data-severity` and each severity has its own styling: `error` reads the danger tokens, `warning` the warning tokens, and `info` its own pair — `--lr-schema-viewer-info-border` (default `var(--lr-color-brand)`) and `--lr-schema-viewer-info-bg` (default `var(--lr-color-brand-quiet)`). Brand rather than a dedicated info palette because this library has no `--lr-color-info-*` token; before these existed an `info` issue rendered identically to an `error`, which read as a false alarm. Both are inline `var()` fallbacks at their point of use, so either can be set on the element or on any ancestor — `::part(issue)[data-severity='info']` is invalid CSS, so this is the only way to recolor one severity without touching the others. **Themeable custom properties:** `--lr-schema-viewer-max-indent` (default `var(--lr-size-12rem)`) caps visual nesting indentation while preserving complete JSON Pointer paths; `--lr-schema-viewer-info-border`, `--lr-schema-viewer-info-bg` (see above); otherwise shared tokens only. Rendering is capped independently at 500 schema nodes and 500 validation issues; `limit` and `issue-limit` show their respective truncation as ordinary, non-live status text. Newly reaching or changing either ceiling after the initial baseline appends the localized message to the shared polite light-DOM announcement sink; initial and reconnect renders stay silent. Issues are indexed by path once before recursive rendering instead of rescanning the full input for every node. Cycles stop at the repeated node rather than recursing. **Slots:** none. **Optional peer deps:** none. ```ts import '@aceshooting/lyra-ui/components/lr-json-schema-viewer.js'; ``` **Additional API surface:** - `part="limit"` — Resource-ceiling status shown when additional nodes are omitted. - `part="issue-limit"` — Resource-ceiling status shown when additional validation issues are omitted. - `--lr-schema-viewer-selected-border` — Selected node branch. Default: `var(--lr-color-brand)`. - `--lr-schema-viewer-error-border` — Error issue border. Default: `var(--lr-color-danger)`. - `--lr-schema-viewer-error-bg` — Error issue background. Default: `var(--lr-color-danger-quiet)`. - `--lr-schema-viewer-warning-border` — Warning issue border. Default: `var(--lr-color-warning)`. - `--lr-schema-viewer-warning-bg` — Warning issue background. Default: `var(--lr-color-warning-quiet)`.