Help Improvement 5 — Screenshot Section Type

export interface HelpSectionScreenshot {
  kind: "screenshot";
  src: string;        // path relative to /public, e.g. "/help/blog-pipeline.png"
  alt: string;        // required for accessibility
  caption?: string;   // optional label below image
}
 
// Add to HelpSection union:
export type HelpSection =
  | HelpSectionText
  | HelpSectionPipeline
  | HelpSectionSteps
  | HelpSectionStatus
  | HelpSectionFeatures
  | HelpSectionActions
  | HelpSectionInfo
  | HelpSectionOl
  | HelpSectionLinkForward
  | HelpSectionScreenshot;   // ← new

// packages/ui/src/HelpPage.tsx
 
case "screenshot": {
  return (
    <figure key={i} className="my-6">
      <img
        src={section.src}
        alt={section.alt}
        className="rounded-lg border w-full object-cover shadow-sm"
        loading="lazy"
      />
      {section.caption && (
        <figcaption className="mt-2 text-center text-xs text-muted-foreground">
          {section.caption}
        </figcaption>
      )}
    </figure>
  );
}

// In _data/index.ts — blog help page
{
  kind: "screenshot",
  src: "/help/blog-status-flow.png",
  alt: "Blog post status flow from draft to published",
  caption: "A blog post moves through five stages before it is published.",
}