@stackql/docusaurus-plugin-aeo 0.2.0 → 0.4.0

package/CHANGELOG.md

@@ -1,5 +1,47 @@
 # Changelog
 
+## 0.4.0
+
+Visual refresh of the Ask AI button (feature 3) to match the look-and-feel of MUI-based dropdown components used elsewhere on consumer sites. No changes to features 1, 2, or 4.
+
+### Changed (breaking)
+
+- `@mui/material`, `@mui/icons-material`, `@emotion/react`, `@emotion/styled` are now required peer dependencies when `askAi.enabled` is `true`. Consumers that already use MUI (common in Docusaurus sites) get a single deduped copy at install time; consumers without MUI will get a clean npm peer-dependency install error pointing at exactly what to install. Consumers who disable the button (`askAi.enabled: false`) can skip these - the theme components are not registered and MUI is never imported.
+
+### Changed
+
+- Ask AI button reimplemented with MUI primitives: outlined `Button` (small, with `KeyboardArrowDownIcon` caret) for the trigger; `Menu` with `MenuItem`s containing `ListItemIcon` (the simple-icons brand SVGs from v0.3.0) and `ListItemText`. Menu is anchored bottom-right of the trigger and opens with transform-origin top-right.
+- Button is hidden on viewports under 997px (matches the Docusaurus mobile breakpoint).
+
+### Removed
+
+- Custom click-outside and Esc-to-close handlers. MUI `Menu` provides both natively. Net reduction in `src/theme/AskAiButton/index.jsx`: ~25 lines.
+- All custom trigger / menu CSS classes. The CSS module is now a 2-rule wrapper that controls only the responsive show/hide; all other styling lives on the MUI `sx` prop.
+
+## 0.3.0
+
+Focused UX upgrade to the Ask AI button (feature 3). No changes to features 1, 2, or 4.
+
+### Changed (breaking)
+
+- Default Ask AI button placement moved from doc / blog footer to the breadcrumb row at the top of each page. On doc pages the button sits right-aligned in the breadcrumb row; on blog posts (which have no breadcrumbs) it sits right-aligned above the post title.
+- `askAi.placement` no longer accepts `'doc-footer'`. Valid values are `'breadcrumb-row'` (the new default) and `'none'`. The v0.1.x-v0.2.x `DocItem/Footer` and `BlogPostItem/Footer` swizzles have been deleted; there is no config flag that restores them. Consumers who want footer placement (or any other custom location) should set `askAi.placement: 'none'` and swizzle `@theme/AskAiButton` manually.
+- Ask AI button restyled as a solid pill dropdown (themed background, rounded-full corners, animated caret). The trigger reads "Ask AI about this page". The menu is a right-aligned card with rounded corners and a subtle shadow.
+
+### Changed
+
+- Provider icons replaced with real brand SVGs sourced from [simple-icons](https://simpleicons.org) where available - Claude, Perplexity, Gemini. OpenAI / ChatGPT was removed from simple-icons in 2024 following a takedown; the ChatGPT menu row renders a neutral chat-bubble glyph instead. No build failure; the missing icon is logged as a warning when verbose.
+
+### Added
+
+- `simple-icons` (`^16.22.0`, CC0-1.0) as a runtime dependency. Bundle-size impact is bounded by webpack tree-shaking: the icons module uses named ESM imports so only the three referenced icons end up in the production bundle.
+
+Even though placement changes are breaking, this is 0.3.0 (not 1.0.0) - the project is still pre-1.0 and the README never promised a stable placement option set.
+
+### Migration
+
+Bump the plugin version. If `askAi.placement: 'doc-footer'` is set in plugin options, remove it (or change it to `'breadcrumb-row'` for explicitness). No other config changes needed. After rebuild, the button appears at the top of each doc and blog page.
+
 ## 0.2.0
 
 - Added: `llmsTxt.instanceSections` option for per-content-plugin-instance llms.txt section grouping. Use case: consumers with multiple content-docs instances (e.g. human docs + AI reference) can split them into named sections. Map keys are `"${pluginName}@${pluginId}"`; values are `{ title, order? }`. Unmapped instances are collected into a single appended "Other" section. `llms-full.txt` mirrors the same section structure as `llms.txt`.

package/README.md

@@ -170,7 +170,12 @@ Behavior:
 
 ## Feature 3: "Ask AI" button
 
-A swizzle-friendly dropdown is injected above the existing `DocItem/Footer` and `BlogPostItem/Footer`. Each item opens the corresponding AI surface in a new tab with a prefilled prompt that references the current page's `.md` companion.
+An outlined pill button with a caret reading "Ask AI about this page" is injected at the top of every doc and blog-post content area, right-aligned in the breadcrumb row. Each item in the dropdown opens the corresponding AI surface in a new tab with a prefilled prompt that references the current page's `.md` companion. The button is hidden on viewports under 997px to keep the breadcrumb row uncluttered on mobile.
+
+Placement specifics:
+
+- **Doc pages** - the button sits on the same row as the breadcrumb trail, flex-aligned to the right edge of the content area.
+- **Blog posts** - blog posts have no breadcrumbs, so the button sits at the very top of the post, right-aligned above the post title (the closest visual equivalent to the docs breadcrumb-row position).
 
 Providers and URL patterns:
 
@@ -189,6 +194,10 @@ Read https://your-site.example/path/to/page.md and help me with the following qu
 
 The trailing space is intentional - the cursor lands ready for the user to type.
 
+Provider icons are real brand SVGs sourced from [simple-icons](https://simpleicons.org). Three of four (Claude, Perplexity, Gemini) come from the upstream catalog directly. OpenAI / ChatGPT was removed from simple-icons in 2024 following a takedown, so the ChatGPT row shows a neutral chat-bubble glyph as a placeholder.
+
+**Trademark note.** Brand logos are trademarks of their respective owners; their inclusion via simple-icons does not imply endorsement. Consumers using the Ask AI button in commercial contexts should review each provider's brand-usage policy.
+
 Options:
 
 | Option | Default | Description |
@@ -196,17 +205,34 @@ Options:
 | `askAi.enabled` | `true` | When `false`, the theme components are not registered. |
 | `askAi.providerOrder` | `['claude', 'chatgpt', 'perplexity', 'gemini']` | Order of items in the dropdown. Drop entries to hide them. |
 | `askAi.promptTemplate` | `'Read {pageUrl}.md and help me with the following question about it: '` | Prompt sent to each provider. `{pageUrl}` is the page's canonical URL (no trailing slash). If feature 1 is disabled, the consumer should remove the `.md` from the template. |
-| `askAi.placement` | `'doc-footer'` | `'doc-footer'` injects above doc and blog footers. `'none'` does not register any theme components - swizzle manually if you want to place the button elsewhere. |
+| `askAi.placement` | `'breadcrumb-row'` | `'breadcrumb-row'` puts the button at the top of every doc/blog page (docs breadcrumb row, or above the blog title). `'none'` does not register any theme components - swizzle the button into your preferred location manually. |
 
-Styling uses CSS modules and reads from Docusaurus's theme tokens (`--ifm-color-primary`, etc.) so dark/light mode work automatically.
+The button is built from [MUI](https://mui.com) primitives - outlined `Button` with a `KeyboardArrowDownIcon` caret as the trigger, and a `Menu` of `MenuItem` rows for the providers. Theming reads `--ifm-color-primary` and `--ifm-font-family-base` via MUI's `sx` prop, so dark/light mode work automatically. The MUI `Menu` handles click-outside-to-close and Esc-to-close natively.
 
-Swizzle to move the button:
+### Peer dependencies
 
-```bash
-npm run swizzle @stackql/docusaurus-plugin-aeo AskAiButton -- --wrap
+When `askAi.enabled` is `true` (the default), the following peer dependencies must be installed by the consumer site:
+
+| Package | Range |
+| --- | --- |
+| `@mui/material` | `^5.0.0 \|\| ^6.0.0 \|\| ^7.0.0` |
+| `@mui/icons-material` | `^5.0.0 \|\| ^6.0.0 \|\| ^7.0.0` |
+| `@emotion/react` | `^11.0.0` |
+| `@emotion/styled` | `^11.0.0` |
+
+These are declared as peer dependencies (not direct dependencies) so consumers that already use MUI - common in Docusaurus sites - get a single deduped copy at install time. Consumers without MUI will get a clean npm peer-dependency error pointing at exactly what to install.
+
+Consumers who disable the Ask AI button (`askAi.enabled: false`) can ignore these peers; the theme components are not registered in that case and MUI is never imported.
+
+### Customizing placement
+
+To put the button somewhere other than the breadcrumb row - sidebar, header, a specific page region - set `askAi.placement: 'none'` to disable the bundled swizzles, then import and place the component manually wherever you want:
+
+```jsx
+import AskAiButton from '@theme/AskAiButton';
 ```
 
-The component lives at `@theme/AskAiButton`. Import and place it wherever you want.
+Wrap an existing theme component (e.g. `@theme/Layout`) the same way Docusaurus documents for any swizzle.
 
 ## Feature 4: `/ai/*` routing convention
 
@@ -342,7 +368,7 @@ The `sitemapExclude` helper, by contrast, does work with globs because `@docusau
     enabled: true,
     providerOrder: ['claude', 'chatgpt', 'perplexity', 'gemini'],
     promptTemplate: 'Read {pageUrl}.md and help me with the following question about it: ',
-    placement: 'doc-footer',  // 'doc-footer' | 'none'
+    placement: 'breadcrumb-row',  // 'breadcrumb-row' | 'none'
   },
 
   // Feature 4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stackql/docusaurus-plugin-aeo",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "description": "AEO (Answer Engine Optimization) helpers for Docusaurus: .md companion files, llms.txt / llms-full.txt, an Ask AI dropdown, and /ai/* route conventions.",
   "main": "src/index.js",
   "exports": {
@@ -21,11 +21,22 @@
   },
   "peerDependencies": {
     "@docusaurus/core": "^3.0.0",
+    "@mui/material": "^5.0.0 || ^6.0.0 || ^7.0.0",
+    "@mui/icons-material": "^5.0.0 || ^6.0.0 || ^7.0.0",
+    "@emotion/react": "^11.0.0",
+    "@emotion/styled": "^11.0.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },
+  "peerDependenciesMeta": {
+    "@mui/material": { "optional": false },
+    "@mui/icons-material": { "optional": false },
+    "@emotion/react": { "optional": false },
+    "@emotion/styled": { "optional": false }
+  },
   "dependencies": {
-    "gray-matter": "^4.0.3"
+    "gray-matter": "^4.0.3",
+    "simple-icons": "^16.22.0"
   },
   "overrides": {
     "serialize-javascript": "^7.0.5",

package/src/index.js

@@ -51,7 +51,7 @@ function normalizeOptions(raw) {
       enabled: askAi.enabled !== false,
       providerOrder: askAi.providerOrder || DEFAULT_PROVIDER_ORDER,
       promptTemplate: askAi.promptTemplate || DEFAULT_PROMPT_TEMPLATE,
-      placement: askAi.placement || 'doc-footer',
+      placement: askAi.placement || 'breadcrumb-row',
     },
     aiRoutes: {
       validate: aiRoutes.validate === true,
@@ -126,9 +126,12 @@ function validateOptions(opts) {
   if (typeof opts.askAi.promptTemplate !== 'string') {
     errs.push('askAi.promptTemplate must be a string');
   }
-  if (!['doc-footer', 'none'].includes(opts.askAi.placement)) {
+  if (!['breadcrumb-row', 'none'].includes(opts.askAi.placement)) {
+    // 'doc-footer' was the v0.1.x-v0.2.x default and is no longer
+    // accepted in v0.3.0. The wrappers that implemented it have been
+    // removed. See CHANGELOG for migration notes.
     errs.push(
-      `askAi.placement must be "doc-footer" or "none", got "${opts.askAi.placement}"`,
+      `askAi.placement must be "breadcrumb-row" or "none", got "${opts.askAi.placement}"`,
     );
   }
 

package/src/theme/AskAiButton/icons.js

@@ -1,55 +1,72 @@
-// Hand-rolled minimal SVGs for the four supported AI providers. Glyphs only;
-// outer wrapper supplies size and color. Using `currentColor` so the icon
-// inherits theme colors via CSS.
+// Brand icons for the four supported AI providers.
+//
+// Three of four come from simple-icons (siClaude, siPerplexity,
+// siGooglegemini). OpenAI / ChatGPT was removed from simple-icons in
+// 2024 following a takedown, so for that one we ship a neutral inline
+// chat-bubble glyph. The same fallback path is reused for any future
+// icon that disappears from upstream.
+//
+// All icons render as a 24x24 viewBox SVG with `fill="currentColor"`,
+// so the menu CSS can size them via font-size or width/height and tint
+// them via the surrounding text color. ESM `import` is used so webpack
+// can tree-shake unused simple-icons exports out of the bundle.
 
-const React = require('react');
+import React from 'react';
+import { siClaude, siPerplexity, siGooglegemini } from 'simple-icons';
 
-function svg(children, viewBox = '0 0 24 24') {
+function svg(children) {
   return React.createElement(
     'svg',
     {
       xmlns: 'http://www.w3.org/2000/svg',
       width: '1em',
       height: '1em',
-      viewBox,
+      viewBox: '0 0 24 24',
       fill: 'currentColor',
+      role: 'img',
       'aria-hidden': 'true',
     },
     children,
   );
 }
 
-const ClaudeIcon = () =>
-  svg(
-    React.createElement('path', {
-      d: 'M5.5 17.5 9.6 6.6h2.6l4.1 10.9h-2.4l-.9-2.5h-3.9l-.9 2.5H5.5Zm4.6-4.5h2.8l-1.4-4-1.4 4Zm6.4 4.5V6.6h2.2v10.9h-2.2Z',
-    }),
-  );
+function fromSimpleIcons(si) {
+  if (!si || typeof si.path !== 'string') {
+    return GenericAiIcon;
+  }
+  return function BrandIcon() {
+    return svg(React.createElement('path', { d: si.path }));
+  };
+}
 
-const ChatGptIcon = () =>
-  svg(
+// Neutral chat-bubble glyph - used when a brand icon isn't available
+// upstream. Not a brand mark, no trademark concerns.
+function GenericAiIcon() {
+  return svg(
     React.createElement('path', {
-      d: 'M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2Zm4.6 12.4-3.9 2.3a1.5 1.5 0 0 1-1.4 0L7.4 14.4a1.5 1.5 0 0 1-.7-1.3V8.6a1.5 1.5 0 0 1 .7-1.3l3.9-2.3a1.5 1.5 0 0 1 1.4 0l3.9 2.3a1.5 1.5 0 0 1 .7 1.3v4.5a1.5 1.5 0 0 1-.7 1.3ZM12 8.5l-3.2 1.8v3.4L12 15.5l3.2-1.8v-3.4Z',
+      d: 'M4 4h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-8l-5 4v-4H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Zm3 6h2v2H7v-2Zm4 0h2v2h-2v-2Zm4 0h2v2h-2v-2Z',
     }),
   );
+}
 
-const PerplexityIcon = () =>
-  svg(
-    React.createElement('path', {
-      d: 'M12 2 3 7v10l9 5 9-5V7l-9-5Zm0 2.3 6.7 3.7L12 11.7 5.3 8 12 4.3ZM5 9.7l6 3.3v6.6l-6-3.3V9.7Zm14 0v6.6l-6 3.3V13l6-3.3Z',
-    }),
-  );
+const icons = {
+  claude: fromSimpleIcons(siClaude),
+  // simple-icons dropped OpenAI/ChatGPT in 2024; fall back to a neutral
+  // chat-bubble glyph rather than failing the build or shipping a guess
+  // at the wordmark.
+  chatgpt: GenericAiIcon,
+  perplexity: fromSimpleIcons(siPerplexity),
+  gemini: fromSimpleIcons(siGooglegemini),
+};
 
-const GeminiIcon = () =>
-  svg(
-    React.createElement('path', {
-      d: 'M12 2 9.5 9.5 2 12l7.5 2.5L12 22l2.5-7.5L22 12l-7.5-2.5L12 2Z',
-    }),
-  );
+if (typeof console !== 'undefined') {
+  for (const [name, icon] of Object.entries(icons)) {
+    if (icon === GenericAiIcon && name !== 'chatgpt') {
+      console.warn(
+        `[plugin-aeo] AskAiButton: brand icon for "${name}" missing from simple-icons; using generic AI glyph`,
+      );
+    }
+  }
+}
 
-module.exports = {
-  claude: ClaudeIcon,
-  chatgpt: ChatGptIcon,
-  perplexity: PerplexityIcon,
-  gemini: GeminiIcon,
-};
+export default icons;

package/src/theme/AskAiButton/index.jsx

@@ -1,4 +1,10 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useState } from 'react';
+import Button from '@mui/material/Button';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import { useLocation } from '@docusaurus/router';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import { usePluginData } from '@docusaurus/useGlobalData';
@@ -19,51 +25,24 @@ const PROVIDER_URLS = {
   gemini: 'https://gemini.google.com/app?q=',
 };
 
-function buildPrompt(template, pageUrl) {
-  return template.replace('{pageUrl}', pageUrl);
-}
+const DEFAULT_PROMPT_TEMPLATE =
+  'Read {pageUrl}.md and help me with the following question about it: ';
 
-export default function AskAiButton(props) {
+export default function AskAiButton() {
   const { siteConfig } = useDocusaurusContext();
   const data = usePluginData('@stackql/docusaurus-plugin-aeo') || {};
   const cfg = data.askAi || {};
   const location = useLocation();
 
-  const [open, setOpen] = useState(false);
-  const wrapperRef = useRef(null);
-
-  useEffect(() => {
-    function onDocClick(e) {
-      if (wrapperRef.current && !wrapperRef.current.contains(e.target)) {
-        setOpen(false);
-      }
-    }
-    function onEsc(e) {
-      if (e.key === 'Escape') setOpen(false);
-    }
-    if (open) {
-      document.addEventListener('mousedown', onDocClick);
-      document.addEventListener('keydown', onEsc);
-    }
-    return () => {
-      document.removeEventListener('mousedown', onDocClick);
-      document.removeEventListener('keydown', onEsc);
-    };
-  }, [open]);
-
-  const toggle = useCallback(() => setOpen((v) => !v), []);
+  const [anchorEl, setAnchorEl] = useState(null);
+  const open = Boolean(anchorEl);
 
   if (cfg.enabled === false) return null;
 
   const baseUrl = (siteConfig.url || '').replace(/\/$/, '');
   const pageUrl = `${baseUrl}${location.pathname.replace(/\/$/, '') || ''}`;
-  const promptTemplate =
-    cfg.promptTemplate ||
-    'Read {pageUrl}.md and help me with the following question about it: ';
-  const targetUrl = cfg.companionsEnabled === false
-    ? pageUrl
-    : pageUrl; // template controls .md suffix; pageUrl is the HTML route
-  const prompt = buildPrompt(promptTemplate, targetUrl);
+  const promptTemplate = cfg.promptTemplate || DEFAULT_PROMPT_TEMPLATE;
+  const prompt = promptTemplate.replace('{pageUrl}', pageUrl);
   const encoded = encodeURIComponent(prompt);
 
   const order =
@@ -71,46 +50,76 @@ export default function AskAiButton(props) {
       ? cfg.providerOrder
       : ['claude', 'chatgpt', 'perplexity', 'gemini'];
 
+  const handleOpen = (e) => setAnchorEl(e.currentTarget);
+  const handleClose = () => setAnchorEl(null);
+
   return (
-    <div className={styles.wrapper} ref={wrapperRef}>
-      <button
-        type="button"
-        className={styles.trigger}
+    <div className={styles.dropdownWrapper}>
+      <Button
+        variant="outlined"
+        size="small"
+        endIcon={<KeyboardArrowDownIcon />}
+        onClick={handleOpen}
         aria-haspopup="menu"
         aria-expanded={open}
-        onClick={toggle}
+        sx={{
+          textTransform: 'none',
+          fontFamily: 'var(--ifm-font-family-base)',
+          fontWeight: 600,
+          fontSize: '0.75rem',
+          borderColor: 'var(--ifm-color-primary)',
+          color: 'var(--ifm-color-primary)',
+          '&:hover': {
+            borderColor: 'var(--ifm-color-primary)',
+            backgroundColor: 'rgba(0, 65, 101, 0.04)',
+          },
+        }}
+      >
+        Ask AI about this page
+      </Button>
+      <Menu
+        anchorEl={anchorEl}
+        open={open}
+        onClose={handleClose}
+        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
+        transformOrigin={{ vertical: 'top', horizontal: 'right' }}
+        sx={{
+          '& .MuiPaper-root': {
+            fontFamily: 'var(--ifm-font-family-base)',
+            minWidth: 200,
+          },
+        }}
       >
-        <span>Ask AI about this page</span>
-        <span className={styles.caret}>{open ? '▲' : '▼'}</span>
-      </button>
-      {open && (
-        <ul className={styles.menu} role="menu">
-          {order.map((key) => {
-            const Icon = icons[key];
-            const label = PROVIDER_LABELS[key] || key;
-            const base = PROVIDER_URLS[key];
-            if (!base || !Icon) return null;
-            const href = `${base}${encoded}`;
-            return (
-              <li key={key} className={styles.item} role="none">
-                <a
-                  role="menuitem"
-                  className={styles.itemLink}
-                  href={href}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  onClick={() => setOpen(false)}
-                >
-                  <span className={styles.icon}>
-                    <Icon />
-                  </span>
-                  <span>{label}</span>
-                </a>
-              </li>
-            );
-          })}
-        </ul>
-      )}
+        {order.map((key) => {
+          const Icon = icons[key];
+          const label = PROVIDER_LABELS[key];
+          const base = PROVIDER_URLS[key];
+          if (!base || !Icon) return null;
+          const href = `${base}${encoded}`;
+          return (
+            <MenuItem
+              key={key}
+              component="a"
+              href={href}
+              target="_blank"
+              rel="noopener noreferrer"
+              onClick={handleClose}
+            >
+              <ListItemIcon>
+                <Icon />
+              </ListItemIcon>
+              <ListItemText
+                primaryTypographyProps={{
+                  fontSize: '0.85rem',
+                  fontFamily: 'var(--ifm-font-family-base)',
+                }}
+              >
+                {label}
+              </ListItemText>
+            </MenuItem>
+          );
+        })}
+      </Menu>
     </div>
   );
 }

package/src/theme/AskAiButton/styles.module.css

@@ -1,74 +1,11 @@
-.wrapper {
-  position: relative;
-  display: inline-block;
-  margin: 1.5rem 0;
+.dropdownWrapper {
+  display: none;
+  flex-shrink: 0;
 }
 
-.trigger {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.5rem 1rem;
-  background: var(--ifm-color-primary);
-  color: var(--ifm-color-primary-contrast-foreground, #fff);
-  border: 1px solid var(--ifm-color-primary-dark);
-  border-radius: var(--ifm-button-border-radius, 0.4rem);
-  font: inherit;
-  font-weight: 600;
-  cursor: pointer;
-  transition: background-color 0.15s ease, transform 0.05s ease;
-}
-
-.trigger:hover {
-  background: var(--ifm-color-primary-dark);
-}
-
-.trigger:active {
-  transform: translateY(1px);
-}
-
-.caret {
-  font-size: 0.7em;
-  opacity: 0.85;
-}
-
-.menu {
-  position: absolute;
-  top: calc(100% + 0.25rem);
-  left: 0;
-  z-index: 50;
-  min-width: 12rem;
-  margin: 0;
-  padding: 0.25rem 0;
-  list-style: none;
-  background: var(--ifm-background-surface-color, var(--ifm-background-color));
-  border: 1px solid var(--ifm-color-emphasis-300);
-  border-radius: var(--ifm-button-border-radius, 0.4rem);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
-}
-
-.item {
-  margin: 0;
-}
-
-.itemLink {
-  display: flex;
-  align-items: center;
-  gap: 0.6rem;
-  padding: 0.5rem 0.85rem;
-  color: var(--ifm-font-color-base);
-  text-decoration: none;
-  font-size: 0.95em;
-}
-
-.itemLink:hover {
-  background: var(--ifm-color-emphasis-100);
-  text-decoration: none;
-}
-
-.icon {
-  display: inline-flex;
-  align-items: center;
-  font-size: 1.1em;
-  color: var(--ifm-color-primary);
+@media screen and (min-width: 997px) {
+  .dropdownWrapper {
+    display: flex;
+    align-items: center;
+  }
 }

package/src/theme/BlogPostItem/Header/Title/index.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import Title from '@theme-init/BlogPostItem/Header/Title';
+import AskAiButton from '@theme/AskAiButton';
+import styles from './styles.module.css';
+
+// Mirror the docs breadcrumb-row placement: render a flex row above the
+// post title with the Ask AI button right-aligned. Blog posts have no
+// breadcrumbs, so the title block is the closest visual analog to the
+// docs "above the H1, top of content" position.
+export default function TitleWrapper(props) {
+  return (
+    <>
+      <div className={styles.row}>
+        <AskAiButton />
+      </div>
+      <Title {...props} />
+    </>
+  );
+}

package/src/theme/BlogPostItem/Header/Title/styles.module.css

@@ -0,0 +1,8 @@
+.row {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  margin-bottom: 0.5rem;
+}

package/src/theme/DocBreadcrumbs/index.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+// See note in the AskAiButton swizzle: @theme-init resolves to the
+// initial component from the theme chain (theme-classic), avoiding the
+// recursion that @theme-original produces when a plugin (not a theme)
+// is the only contributor in the wrapper layer.
+import DocBreadcrumbs from '@theme-init/DocBreadcrumbs';
+import AskAiButton from '@theme/AskAiButton';
+import styles from './styles.module.css';
+
+export default function DocBreadcrumbsWrapper(props) {
+  return (
+    <div className={styles.row}>
+      <DocBreadcrumbs {...props} />
+      <AskAiButton />
+    </div>
+  );
+}

package/src/theme/DocBreadcrumbs/styles.module.css

@@ -0,0 +1,8 @@
+.row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  margin-bottom: 1rem;
+}

package/src/theme/BlogPostItem/Footer/index.jsx

@@ -1,15 +0,0 @@
-import React from 'react';
-// See note in src/theme/DocItem/Footer/index.jsx - @theme-init avoids the
-// SSR recursion that @theme-original triggers when a plugin (not a theme)
-// contributes the wrapper.
-import Footer from '@theme-init/BlogPostItem/Footer';
-import AskAiButton from '@theme/AskAiButton';
-
-export default function FooterWrapper(props) {
-  return (
-    <>
-      <AskAiButton />
-      <Footer {...props} />
-    </>
-  );
-}

package/src/theme/DocItem/Footer/index.jsx

@@ -1,17 +0,0 @@
-import React from 'react';
-// Use @theme-init (the initial component from the theme chain, before any
-// wrappers) instead of @theme-original. When a plugin contributes both the
-// wrapper and is the only contributor in the wrapper layer,
-// @theme-original/X resolves back to this wrapper file and renders infinitely
-// on every SSR pass. @theme-init/X always resolves to the un-wrapped origin.
-import Footer from '@theme-init/DocItem/Footer';
-import AskAiButton from '@theme/AskAiButton';
-
-export default function FooterWrapper(props) {
-  return (
-    <>
-      <AskAiButton />
-      <Footer {...props} />
-    </>
-  );
-}