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.

[kristin-kronstain-brown]

@kubeboiii We just migrated the docs to use Hugo instead, so this functionality won't affect the rendering of images in docs now. I opened an issue to add the functionality to the Hugo theme we use for the docs separately. This feature could still apply to blogs though.

To change the scope of this PR, drop the page.mdx/telegram-bot doc changes, keep MdxFigure, the dialog, and the blog .mdx change. Also resolve the merge conflicts. Thank you!