feat: add ai explain buttons to code block (#29533)

* feat: add ai explain buttons to code block

* fix: load explain plugin into ec

This somehow got lost during rebase.

* fix: account for title bars in btn placement

* feat: match copy btn style, DOM

This allows for better theming and maintainability.

* Fixed formatting, all checks pass, LGTM

Co-authored-by: mvvmm <mvvmm@users.noreply.github.com>

* 💄 Style adjustments for content width and the tooltip

* ✨ Increased the height of the skeleton loader to closer match the content returned

---------

Co-authored-by: ask-bonk[bot] <ask-bonk[bot]@users.noreply.github.com>
Co-authored-by: mvvmm <mvvmm@users.noreply.github.com>
Co-authored-by: Amy Haywood Dutton <adutton@cloudflare.com>

Author: 4 people

.gitignore

@@ -25,7 +25,7 @@ yarn-error.log*
 pnpm-debug.log*
 
 # environment variables
-.env
+.env*
 .env.production
 
 # macOS-specific files

AGENTS.md

@@ -352,6 +352,20 @@ Tests use Vitest with three workspace projects (`vitest.workspace.ts`):
 
 Run all tests: `npm run test`
 
+## Web components
+
+New web components in this codebase should use the `cfdocs-` prefix for custom element names (e.g., `<cfdocs-sheet>`, `<cfdocs-explain-code>`). This establishes a consistent naming pattern going forward.
+
+### Naming conventions
+
+- **Custom element names**: Use kebab-case with `cfdocs-` prefix (e.g., `cfdocs-sheet`)
+- **Class names**: Use PascalCase with `Element` suffix (e.g., `SheetElement`, `ExplainCodeElement`)
+- **File locations**: Place components in `src/components/{component-name}/` directories
+
+### Existing components
+
+Existing components (`warp-download`, `stream-player`, `rule-id`, `check-box`, `r2-local-uploads-diagram`, `animated-workflow-diagram`, `autoconfig-diagram`) are exempt from the `cfdocs-` prefix requirement and do not need to be renamed.
+
 ## Commit conventions
 
 - Format: `[Product] description` or `type: description`

ec.config.mjs

@@ -8,6 +8,7 @@ import pluginWorkersPlayground from "./src/plugins/expressive-code/workers-playg
 import pluginOutputFrame from "./src/plugins/expressive-code/output-frame.js";
 import pluginDefaultTitles from "./src/plugins/expressive-code/default-titles.js";
 import pluginGraphqlApiExplorer from "./src/plugins/expressive-code/graphql-api-explorer.js";
+import pluginExplainCode from "./src/plugins/expressive-code/explain-code.js";
 
 import { pluginCollapsibleSections } from "@expressive-code/plugin-collapsible-sections";
 import { pluginLineNumbers } from "@expressive-code/plugin-line-numbers";
@@ -20,6 +21,7 @@ export default defineEcConfig({
 		pluginCollapsibleSections(),
 		pluginGraphqlApiExplorer(),
 		pluginLineNumbers(),
+		pluginExplainCode(),
 	],
 	defaultProps: {
 		showLineNumbers: false,