docs(docs): add Carousel component and embed in topological‑sort page, replace static spine image with interactive component

apps/docs/components/CarouselImage.astro

@@ -0,0 +1,45 @@
+---
+/**
+ * One slide of a <Carousel>: Blume's own <Frame> around an <img>, so a slide
+ * is pixel-identical to a framed image elsewhere on the site — `alt` doubles
+ * as the frame's hint line and `caption` is Markdown, exactly as in Frame.
+ *
+ * `src` accepts what MDX authors already write for images: a URL, a
+ * root-relative `/file.png` (served from public/, prefixed with the deploy
+ * base), or the page-relative `../../public/file.png` form. A relative path
+ * that does not pass through public/ has nothing to serve it, so it is a
+ * build error rather than a silent 404.
+ */
+import Frame from "blume/components/content/Frame.astro";
+import { withBase } from "blume/components/islands/base-path.ts";
+
+interface Props {
+  src: string;
+  alt?: string;
+  caption?: string;
+}
+
+const { src, alt, caption } = Astro.props;
+
+const resolveSrc = (value: string): string => {
+  if (URL.canParse(value)) return value;
+  if (value.startsWith("/")) return withBase(value);
+  const at = value.indexOf("public/");
+  if (at === -1) {
+    throw new Error(
+      `<CarouselImage src="${value}">: a relative src must point into public/ (or use /file.png)`
+    );
+  }
+  return withBase(`/${value.slice(at + "public/".length)}`);
+};
+---
+
+<blume-carousel-image
+  class="block w-full shrink-0 snap-center [&_blume-frame]:my-0"
+  role="group"
+  aria-roledescription="slide"
+>
+  <Frame caption={caption} hint={alt}>
+    <img alt={alt ?? ""} src={resolveSrc(src)} loading="lazy" draggable="false" />
+  </Frame>
+</blume-carousel-image>