Diagnostics block

<Diagnostics /> renders project-load diagnostics (parser errors, resolver warnings, disabled-axis validation) as a collapsible list. Green OK badge when clean; auto-expands with a severity summary when warnings or errors are present.

<Diagnostics />

Props: caption?: string overrides the summary heading.

Every loadProject() call returns a diagnostics: Diagnostic[] list, and the block renders it directly. The Diagnostic interface, the severity semantics, and the full catalog by group live in the Diagnostics reference.

Failing CI on errors

The block surfaces diagnostics without failing the Storybook build. For CI that should fail on error-severity diagnostics, check them in a pre-build script:

import { loadProject } from '@unpunnyfuns/swatchbook-core';
import config from './swatchbook.config.ts';

const project = await loadProject(config, process.cwd());
const errors = project.diagnostics.filter((d) => d.severity === 'error');
if (errors.length > 0) {
  console.error(errors);
  process.exit(1);
}