feat(mdx): click-to-expand images in docs and blog

[kubeboiii]

Closes #362

Summary

Adds click-to-expand for images in docs and blog MDX. Markdown images route through MdxFigure, which renders a clickable thumbnail and opens a dialog with a larger view of the same file. Two doc/blog pages that used raw <img> tags now use MdxFigure or markdown image syntax so they get the same behavior.

After review feedback, inline images also use a central size config (default, compact, large) so screenshots render smaller in the prose column. Click still opens the full image in the lightbox.

Changes

• src/components/mdx/mdx-figure.tsx: Client component with next/image thumbnail, optional figcaption from markdown title, lazy-loaded lightbox (next/dynamic, ssr: false), aria-label / dialog attributes. Optional style / className apply to <figure> for page-specific layout. Resolves inline size via usePathname() and config; figures use mx-auto.
• src/config/mdx-image-sizes.ts: Presets (default 75%/800px max, compact 65%/640px, large 90%/960px). PAGE_IMAGE_SIZES for /docs/kagent/examples/slack-a2a (compact) and /docs/kmcp/quickstart (large). IMAGE_SIZE_BY_SRC for slack and discord hero PNGs (large).
• src/components/mdx/mdx-figure-lightbox.tsx: Radix dialog; native <img> with viewport max dimensions; DialogContent uses w-auto so the modal fits the image.
• src/components/ui/dialog.tsx: shadcn dialog primitive.
• package.json: @radix-ui/react-dialog.
• src/mdx-components.tsx: img maps to <MdxFigure />; export MdxFigure for explicit MDX use.
• src/app/docs/kagent/examples/telegram-bot/page.mdx: Replace two <img> elements with <MdxFigure /> (width: 55% / minWidth: 300px and width: 50% / minWidth: 280px on <figure>).
• src/blogContent/kagent-celebrating-100-days.mdx: Replace one HTML <img> with markdown ![...](...).

Default markdown images use the default preset (75% width, max 800px). Slack-a2a uses compact; kmcp quickstart uses large; slack and discord hero diagrams use per-src large overrides. Telegram bot keeps explicit percentage widths on <MdxFigure />. The lightbox still shows the full image on click.

Also fixes MDX img alt: main passed props.title to Image alt instead of props.alt.

Out of scope

Homepage and other non-MDX images are unchanged.

Test plan

• npm run lint
• npm run build
• /docs/kagent/examples/slack-a2a: compact preset; slack hero uses large override; open dialog, close with X / Escape
• /docs/kagent/examples/telegram-bot: GIF and architecture diagram size; open dialog on architecture image
• /docs/kagent/getting-started/first-agent: default preset; sample docs page
• /docs/kmcp/quickstart: large preset on step screenshots; lightbox works
• /docs/kagent/examples/discord-a2a: discord hero diagram uses large via src override
• /blog/kagent-celebrating-100-days: markdown image and dialog

Screenshots

Default docs (markdown images)

Inline — default preset; image is clickable.

Lightbox — click opens dialog; image fits viewport; close with X or Escape.

Custom layout (explicit MdxFigure)

Telegram bot page — GIF (~55%) and architecture diagram (~50%) in flex layout.

Lightbox — architecture diagram enlarged in dialog.

Blog

Markdown image — same click-to-expand behavior as docs.

Inline sizing (follow-up)

Quickstart welcome wizard — default preset.

Slack workspace step — compact preset.

kmcp echo success — large preset.

[peterj]

thanks for the PR -- could you also do a pass on other images in the docs (e.g. quickstart) as some of those are rendered too big to start with -- perhaps use this new component there too and set the minwidth/width so the original image doesn't render too big?

[kubeboiii]

@peterj Addressed the sizing feedback in ed2d259.

• Inline images now use src/config/mdx-image-sizes.ts instead of per-page <MdxFigure style={...}> in MDX.
• slack-a2a: compact for step screenshots; hero diagram large via src override.
• kmcp/quickstart: large preset for the page.
• Discord hero diagram: large via src override.
• Docs/blog pages stay markdown ![...](); telegram-bot keeps explicit MdxFigure widths for the flex layout.

Updated the PR description with the sizing notes. Let me know if any page still needs tuning.