T48a Docs · Frame: guides render at build in a Vite plugin, so a bad one fails the build; focus rings whole in the rail and list; plain heading words, unique ids, captions only when named, code under example= refused

frontend/vite.config.ts

@@ -1,8 +1,34 @@
 import react from "@vitejs/plugin-react";
-import { defineConfig } from "vite";
+import { defineConfig, type Plugin } from "vite";
+import { render } from "./src/docs/guides";
+
+const GUIDES = "\0virtual:guides";
+
+/** The guides, rendered at build; a bad one fails the build. */
+function docs(): Plugin {
+  let files: string[] = [];
+  return {
+    name: "ely-docs",
+    resolveId: (id) => (id === "virtual:guides" ? GUIDES : undefined),
+    load(id) {
+      if (id !== GUIDES) return;
+      const out = render();
+      files = out.files;
+      files.forEach((file) => this.addWatchFile(file));
+      return `export const guides = ${JSON.stringify(out.guides)};`;
+    },
+    handleHotUpdate({ file, server }) {
+      if (!files.includes(file)) return;
+      const module = server.moduleGraph.getModuleById(GUIDES);
+      if (module) server.moduleGraph.invalidateModule(module);
+      server.ws.send({ type: "full-reload" });
+      return [];
+    },
+  };
+}
 
 // The manifest lives beside the gallery, one folder up.
 export default defineConfig({
-  plugins: [react()],
+  plugins: [react(), docs()],
   server: { fs: { allow: [".."] } },
 });