blume 1.0.2 → 1.0.4

package/src/astro/templates.ts

@@ -80,6 +80,30 @@ const ADAPTER_OPTIONS: Record<string, string> = {
   node: '{ mode: "standalone" }',
 };
 
+const WRANGLER_CONFIG_FILES = [
+  "wrangler.jsonc",
+  "wrangler.json",
+  "wrangler.toml",
+];
+
+const resolveCloudflareAdapterArgs = (context: ProjectContext): string => {
+  const args: string[] = ['prerenderEnvironment: "node"'];
+  const wranglerPath = WRANGLER_CONFIG_FILES.map((file) =>
+    join(context.root, file)
+  ).find((file) => existsSync(file));
+  if (wranglerPath) {
+    let configPath = relative(context.outDir, wranglerPath);
+    // The wrangler config always lives at the project root, above the `.blume`
+    // runtime, so `relative` yields a `../…` path; normalize the theoretical
+    // sibling case to an explicit `./` so it reads as a relative import.
+    if (!configPath.startsWith(".") && !configPath.startsWith("/")) {
+      configPath = `./${configPath}`;
+    }
+    args.push(`configPath: ${JSON.stringify(configPath)}`);
+  }
+  return `{ ${args.join(", ")} }`;
+};
+
 /**
  * Integration packages the generated runtime imports. Declaring them in
  * `.blume/package.json` lets Astro's framework-package crawl discover and bundle
@@ -222,6 +246,8 @@ export const astroConfigTemplate = (options: {
   needsSvelte?: boolean;
   pages: BlumePageRoute[];
   contentRoutes: string[];
+  /** The generated Ask trigger (`blume:ask`); renders nothing when Ask is off. */
+  askPath: string;
   dataPath: string;
   examplesPath: string;
   /** The example-preview Tailwind entry (`blume:examples-theme`). */
@@ -240,6 +266,7 @@ export const astroConfigTemplate = (options: {
 }): string => {
   const { context, config, needsReact, pages, dataPath, themePath } = options;
   const {
+    askPath,
     contentRoutes,
     examplesPath,
     examplesThemePath,
@@ -260,10 +287,15 @@ export const astroConfigTemplate = (options: {
     server && deployment.adapter
       ? `import adapter from "${ADAPTER_IMPORTS[deployment.adapter]}";\n`
       : "";
-  const adapterArgs =
-    server && deployment.adapter
-      ? (ADAPTER_OPTIONS[deployment.adapter] ?? "")
-      : "";
+  const adapterArgs = (() => {
+    if (!server || !deployment.adapter) {
+      return "";
+    }
+    if (deployment.adapter === "cloudflare") {
+      return resolveCloudflareAdapterArgs(context);
+    }
+    return ADAPTER_OPTIONS[deployment.adapter] ?? "";
+  })();
   const adapterOption =
     server && deployment.adapter ? `\n  adapter: adapter(${adapterArgs}),` : "";
 
@@ -407,6 +439,18 @@ export default defineConfig({
   devToolbar: { enabled: false },
   vite: {
     plugins: [tailwindcss(), prerenderDepsPlugin(), serverAppResolvePlugin()],
+    // Mermaid (lazy-loaded client-side for diagrams) statically imports dayjs as
+    // CJS (\`dayjs/dayjs.min.js\`). In dev, an un-pre-bundled dependency is served
+    // as raw ESM, and that UMD file exposes no \`default\` export, so mermaid
+    // throws on load and diagrams render blank. Forcing mermaid through the dep
+    // optimizer bundles dayjs with correct CJS interop. In a standalone install
+    // Blume's dynamic \`import("mermaid")\` lives inside \`node_modules/blume\`,
+    // which Vite's optimizer scan doesn't crawl, so mermaid is never discovered
+    // on its own — hence the explicit include. mermaid resolves through the
+    // \`blume\` package (it isn't a direct dep of the generated project), so the
+    // nested \`blume > mermaid\` form is required. Production (Rollup) already
+    // handles the interop, so this only affects dev.
+    optimizeDeps: { include: ["blume > mermaid"] },
     // Blume's render-time deps are forced external on both build environments so
     // native bindings resolve at runtime and isolated linkers don't bundle
     // symlinked store copies (which would surface their children as unresolvable
@@ -425,6 +469,7 @@ export default defineConfig({
     },
     resolve: {
       alias: {
+        "blume:ask": ${JSON.stringify(askPath)},
         "blume:data": ${JSON.stringify(dataPath)},
         "blume:examples": ${JSON.stringify(examplesPath)},
         "blume:examples-theme": ${JSON.stringify(examplesThemePath)},
@@ -694,6 +739,42 @@ ${handler}
 `;
 };
 
+/**
+ * Generate `.blume/src/generated/Ask.astro` — the component behind the
+ * `blume:ask` alias that the shared header renders in place of a per-page slot.
+ *
+ * The header can't import the Ask AI island directly: it's a React component, so
+ * the import alone would drag the JSX renderer into the module graph of every
+ * project — including the ones that never enable Ask AI and therefore have no
+ * React integration wired into their generated Astro config (see `needsReact`).
+ * Routing the import through a generated component keeps that dependency behind
+ * the config switch: enabled projects get the island, disabled ones get a
+ * component that renders nothing and imports no React.
+ *
+ * `strings` comes from the header (the active locale's dictionary); the empty-
+ * state suggestions are read straight from the data snapshot, which is why no
+ * page has to pass them.
+ */
+export const askComponentTemplate = (askEnabled: boolean): string =>
+  askEnabled
+    ? `---
+// Generated by Blume. Do not edit.
+import AskAI from "blume/components/islands/AskAI.astro";
+import data from "blume:data";
+
+const { strings } = Astro.props;
+---
+
+<AskAI strings={strings ?? data.ui.ask} suggestions={data.config.ask?.suggestions ?? []} />
+`
+    : `---
+// Generated by Blume. Do not edit.
+// Ask AI is off (\`ai.ask.enabled\`), so the header's Ask trigger renders nothing.
+// Deliberately imports no React island, keeping the JSX renderer out of projects
+// that don't need it.
+---
+`;
+
 /** Generate the static search index endpoint (`/blume-search.json`). */
 export const searchEndpointTemplate = (): string =>
   `// Generated by Blume. Do not edit.
@@ -869,10 +950,11 @@ export function getStaticPaths() {
   }));
 }
 
-export function GET({ props }) {
-  const entry = raw[props.route];
+export function GET({ props }: { props: { route: string } }) {
+  const entries = raw as Record<string, { md?: string; mdx?: string }>;
+  const entry = entries[props.route];
   return new Response(entry ? ${
-    kind === "md" ? "(entry.md ?? entry.mdx)" : "entry.mdx"
+    kind === "md" ? '(entry.md ?? entry.mdx ?? "")' : '(entry.mdx ?? "")'
   } : "", {
     headers: { "Content-Type": "text/markdown; charset=utf-8" },
   });
@@ -936,8 +1018,9 @@ export function getStaticPaths() {
   }));
 }
 
-export function GET({ props }) {
-  return new Response(feeds[props.section] ?? "", {
+export function GET({ props }: { props: { section: string } }) {
+  const bySection = feeds as Record<string, string>;
+  return new Response(bySection[props.section] ?? "", {
     headers: { "Content-Type": "application/rss+xml; charset=utf-8" },
   });
 }
@@ -949,7 +1032,7 @@ export const ogEndpointTemplate = (
 ): string =>
   `// Generated by Blume. Do not edit.
 import { renderOgImage } from "blume/og";
-import data from "../../generated/data.json";
+import data from "blume:data";
 
 export const prerender = true;
 
@@ -957,9 +1040,9 @@ export const prerender = true;
 const customRoutes = ${JSON.stringify(customRoutes)};
 
 export function getStaticPaths() {
-  const seen = new Set();
-  const paths = [];
-  const add = (slug, title) => {
+  const seen = new Set<string>();
+  const paths: { params: { slug: string }; props: { title: string } }[] = [];
+  const add = (slug: string, title: string) => {
     if (seen.has(slug)) {
       return;
     }
@@ -992,17 +1075,18 @@ const siteHost = (() => {
   }
 })();
 
-export async function GET({ props }) {
+export async function GET({ props }: { props: { title: string } }) {
   const png = await renderOgImage({
-    accent: data.config.theme.accent.light,
+    accent: data.config.og.palette?.accent ?? data.config.theme.accent.light,
     brand: data.config.title,
     description: data.config.description,
-    logo: data.config.logo?.svg,
+    logo: data.config.og.logo,
+    palette: data.config.og.palette,
     repo: repoSlug,
     site: siteHost,
     title: props.title,
   });
-  return new Response(png, {
+  return new Response(new Uint8Array(png), {
     headers: {
       "Cache-Control": "public, max-age=31536000, immutable",
       "Content-Type": "image/png",
@@ -1069,19 +1153,12 @@ const htmlLang = i18n ? i18n.defaultLocale : "en";
 `;
 
 export const catchAllPageTemplate = (options: {
-  askEnabled: boolean;
   exportEpub: boolean;
   exportPdf: boolean;
   mathEnabled: boolean;
   /** Serialize the island-hooks snapshot; only needed when React is enabled. */
   needsReact: boolean;
 }): string => {
-  const askImport = options.askEnabled
-    ? 'import AskAI from "blume/components/islands/AskAI.astro";\n'
-    : "";
-  const askSlot = options.askEnabled
-    ? '\n  <AskAI slot="ask" strings={ui.ask} suggestions={data.config.ask?.suggestions ?? []} />'
-    : "";
   const mathImport = options.mathEnabled
     ? 'import Math from "blume/components/content/Math.astro";\n'
     : "";
@@ -1094,10 +1171,10 @@ export const catchAllPageTemplate = (options: {
   return `---
 // Generated by Blume. Do not edit.
 import { getEntry, render } from "astro:content";
+import type { CollectionKey } from "astro:content";
 import RootLayout from "blume/components/layout/RootLayout.astro";
 import { withBase } from "blume/components/islands/base-path.ts";
 import { resolveSlot } from "blume/components/layout/overrides.ts";
-${askImport}
 import Accordion from "blume/components/content/Accordion.astro";
 import AccordionItem from "blume/components/content/AccordionItem.astro";
 import AutoTypeTable from "blume/components/content/AutoTypeTable.astro";
@@ -1138,7 +1215,7 @@ import ApiTagOperations from "blume/components/openapi/ApiTagOperations.astro";
 import Operation from "blume/components/openapi/Operation.astro";
 ${mathImport}import { mdxComponents as userMdx, layoutOverrides } from "../generated/components.ts";
 import { islandComponents } from "../generated/islands.ts";
-import data from "../generated/data.json";
+import data from "blume:data";
 
 const Color = Object.assign(ColorRoot, { Item: ColorItem, Row: ColorRow });
 const Tree = Object.assign(TreeRoot, { File: TreeFile, Folder: TreeFolder });
@@ -1207,7 +1284,7 @@ export function getStaticPaths() {
 }
 
 const { entryId, collection, route, title, indexable, editUrl, lastModified, locale, alternates, fallback } = Astro.props;
-const entry = await getEntry(collection, entryId);
+const entry = await getEntry(collection as CollectionKey, entryId);
 if (!entry) {
   return new Response(null, { status: 404 });
 }
@@ -1242,18 +1319,18 @@ const canonical =
 // Locale resolution. With i18n on, pick the active locale's nav + dictionary,
 // build hreflang alternates, and derive the language-switcher targets.
 const i18n = data.config.i18n;
-const localePrefix = (codeArg) =>
+const localePrefix = (codeArg: string) =>
   i18n && codeArg === i18n.defaultLocale && i18n.hideDefaultLocalePrefix
     ? ""
     : \`/\${codeArg}\`;
-const localizeRoute = (logical, codeArg) => {
+const localizeRoute = (logical: string, codeArg: string) => {
   const prefix = localePrefix(codeArg);
   if (!prefix) {
     return logical;
   }
   return logical === "/" ? prefix : \`\${prefix}\${logical}\`;
 };
-const stripLocale = (path, codeArg) => {
+const stripLocale = (path: string, codeArg: string) => {
   const prefix = localePrefix(codeArg);
   return prefix && path.startsWith(prefix) ? path.slice(prefix.length) || "/" : path;
 };
@@ -1270,7 +1347,7 @@ const contentLocale =
 const contentDir = i18n
   ? (i18n.locales.find((l) => l.code === contentLocale)?.dir ?? "ltr")
   : "ltr";
-const absolute = (path) => {
+const absolute = (path: string) => {
   const p = withBase(path);
   return base + (p === "/" ? "" : p);
 };
@@ -1334,7 +1411,6 @@ const LayoutComponent = resolveSlot(layoutOverrides.Layout, RootLayout);
   canonical={canonical}
   editUrl={editUrl}
   feedback={data.config.feedback}
-  askEnabled={${options.askEnabled}}
   exportPdf={${options.exportPdf}}
   exportEpub={${options.exportEpub}}
   feeds={data.feeds}
@@ -1344,7 +1420,7 @@ const LayoutComponent = resolveSlot(layoutOverrides.Layout, RootLayout);
   lastModified={lastModified}
   noindex={seo.noindex}
   structuredDataEnabled={data.config.structuredData}
->${askSlot}
+>
   <h1>{title}</h1>
   {frontmatter.description && <p class="text-lg text-muted-foreground">{frontmatter.description}</p>}
   <Content components={components} />
@@ -1359,7 +1435,6 @@ const LayoutComponent = resolveSlot(layoutOverrides.Layout, RootLayout);
  * by {@link generateAstroProject} when changelog entries exist.
  */
 export const changelogIndexTemplate = (options: {
-  askEnabled: boolean;
   exportEpub: boolean;
   exportPdf: boolean;
   /** Serialize the island-hooks snapshot; only needed when React is enabled. */
@@ -1367,12 +1442,6 @@ export const changelogIndexTemplate = (options: {
   /** Whether a `staged` collection exists (non-filesystem changelog sources). */
   staged: boolean;
 }): string => {
-  const askImport = options.askEnabled
-    ? 'import AskAI from "blume/components/islands/AskAI.astro";\n'
-    : "";
-  const askSlot = options.askEnabled
-    ? '\n  <AskAI slot="ask" strings={data.ui.ask} suggestions={data.config.ask?.suggestions ?? []} />'
-    : "";
   const clientData = options.needsReact
     ? '\n  clientData={{ config: data.config, navigation: data.navigation, page: { route: "/changelog", title: pageTitle } }}'
     : "";
@@ -1390,14 +1459,15 @@ import Update from "blume/components/content/Update.astro";
 import { withBase } from "blume/components/islands/base-path.ts";
 import { resolveSlot } from "blume/components/layout/overrides.ts";
 import { layoutOverrides } from "../generated/components.ts";
-${askImport}import data from "../generated/data.json";
+import data from "blume:data";
 
 export const prerender = true;
 
-const entryDate = (entry) =>
-  entry.data.date ?? entry.data.changelog?.date ?? null;
+const entryDate = (entry: {
+  data: { date?: string | null; changelog?: { date?: string | null } | null };
+}) => entry.data.date ?? entry.data.changelog?.date ?? null;
 
-const toTime = (value) => {
+const toTime = (value: string | null | undefined) => {
   if (!value) {
     return 0;
   }
@@ -1405,7 +1475,7 @@ const toTime = (value) => {
   return Number.isNaN(date.getTime()) ? 0 : date.getTime();
 };
 
-const formatDate = (value) => {
+const formatDate = (value: string | null | undefined) => {
   if (!value) {
     return;
   }
@@ -1418,14 +1488,14 @@ const formatDate = (value) => {
       }).format(date);
 };
 
-const slugify = (text) =>
+const slugify = (text: string) =>
   text.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "") ||
   "update";
 
 // The major of a version's embedded semver (\`1.2.3\` -> 1, \`pkg@2.0.0\` -> 2), or
 // null when there is no full major.minor.patch to key on. Drives the changelog's
 // group-by-major pagination, so it tolerates the scoped tags monorepos publish.
-const majorVersion = (version) => {
+const majorVersion = (version: string | null | undefined) => {
   const match = /(\\d+)\\.\\d+\\.\\d+/.exec(String(version ?? ""));
   return match ? Number(match[1]) : null;
 };
@@ -1457,7 +1527,7 @@ const items = await Promise.all(
     return {
       Content: (await render(entry)).Content,
       date: formatDate(entryDate(entry)),
-      href: routeByEntry.get(entry.id) ?? null,
+      href: routeByEntry.get(entry.id) ?? undefined,
       id: slugify(label),
       label,
       major: majorVersion(entry.data.changelog?.version),
@@ -1486,7 +1556,9 @@ for (const item of items) {
 // semver and they span more than one major line. Older majors then collapse
 // into groups the reader reveals one at a time; otherwise the timeline is flat.
 const majors = items.every((item) => item.major !== null)
-  ? [...new Set(items.map((item) => item.major))].toSorted((a, b) => b - a)
+  ? [...new Set(items.map((item) => item.major))]
+      .filter((major): major is number => major !== null)
+      .toSorted((a, b) => b - a)
   : [];
 const paginate = majors.length > 1;
 const majorGroups = majors.map((major) => ({
@@ -1559,14 +1631,13 @@ const LayoutComponent = resolveSlot(layoutOverrides.Layout, RootLayout);
   ogImage={null}
   x={data.config.x}
   canonical={canonical}
-  askEnabled={${options.askEnabled}}
   exportPdf={${options.exportPdf}}
   exportEpub={${options.exportEpub}}
   feeds={data.feeds}
   siteUrl={data.config.site}
   noindex={false}
   structuredDataEnabled={data.config.structuredData}
->${askSlot}
+>
   <h1>{changelogTitle}</h1>
   {
     items.length === 0 ? (
@@ -1635,7 +1706,7 @@ export const notFoundPageTemplate = (): string => `---
 // Generated by Blume. Do not edit. Override by adding \`pages/404.astro\`.
 import PageLayout from "blume/components/layout/PageLayout.astro";
 import { withBase } from "blume/components/islands/base-path.ts";
-import data from "../generated/data.json";
+import data from "blume:data";
 
 export const prerender = true;
 
@@ -1844,7 +1915,10 @@ export const getStaticPaths = () =>
   Object.keys(examples).map((path) => ({ params: { path } }));
 
 const { path } = Astro.params;
-const entry = examples[path];
+const entry = path ? examples[path] : undefined;
+if (!entry) {
+  return new Response(null, { status: 404 });
+}
 const Example = entry.Component;
 ---
 
@@ -1891,11 +1965,24 @@ export const envTemplate =
   (): string => `/// <reference path="../.astro/types.d.ts" />
 /// <reference types="astro/client" />
 
+declare module "blume:ask" {
+  const Ask: typeof import("blume/components/islands/AskAI.astro").default;
+  export default Ask;
+}
+
 declare module "blume:data" {
   const data: import("blume").BlumeData;
   export default data;
 }
 
+declare module "blume:examples" {
+  type Examples = typeof import("./generated/examples.ts").examples;
+  export const examples: Record<string, Examples[keyof Examples]>;
+  export const examplesBase: string;
+}
+
+declare module "blume:examples-theme";
+
 declare module "blume:openapi" {
   const specs: import("blume/openapi/model.ts").OpenApiData;
   export default specs;

package/src/blume-modules.d.ts

@@ -15,6 +15,12 @@ declare module "blume:search-client" {
   export const createSearch: () => Fn | Promise<Fn>;
 }
 
+declare module "blume:ask" {
+  /** The generated Ask trigger (see `askComponentTemplate`); empty when Ask is off. */
+  const Ask: (props: Record<string, unknown>) => unknown;
+  export default Ask;
+}
+
 declare module "blume:data" {
   /** The generated per-project data snapshot (see `core/data.ts`). */
   // biome-ignore lint/style/useImportType: ambient module must stay a global script

package/src/components/content/Callout.astro

@@ -60,8 +60,14 @@ const iconClass: Record<CalloutType, string> = {
   <span class:list={["mt-0.5 shrink-0", color ? "" : iconClass[type]]}>
     <Icon color={color} icon={icon ?? iconByType[type]} size={16} />
   </span>
-  <div class="flex-1 [&>:first-child]:mt-0! [&>:last-child]:mb-0!">
-    {title && <p class="mb-1 font-semibold text-foreground">{title}</p>}
+  {/* The global prose rule leaks a 1rem margin onto these paragraphs/lists even
+      though the callout is not-prose; with a title the body isn't the first
+      child, so that margin stacks under the title's own gap and reads as too
+      much space. Override it here for a uniform, compact gap (important beats
+      the unlayered prose rule): every child a small top margin, none on the
+      first, and no trailing bottom margin. */}
+  <div class="flex-1 [&>*]:mt-2! [&>*]:mb-0! [&>:first-child]:mt-0!">
+    {title && <p class="font-semibold text-foreground">{title}</p>}
     <slot />
   </div>
 </aside>

package/src/components/content/Prompt.astro

@@ -59,7 +59,15 @@ const secondaryButton =
               data-blume-prompt-copy
               type="button"
             >
-              <span data-blume-prompt-copy-label>Copy prompt</span>
+              {/* Both labels share one grid cell so the button is always sized
+                  to the wider ("Copy prompt") — swapping to "Copied" on copy
+                  can't resize it and shift the description beside it. */}
+              <span class="grid *:col-start-1 *:row-start-1 *:text-center">
+                <span data-blume-prompt-copy-idle>Copy prompt</span>
+                <span aria-hidden="true" class="invisible" data-blume-prompt-copy-done>
+                  Copied
+                </span>
+              </span>
             </button>
           )}
           {enabledActions.has("cursor") && (
@@ -99,6 +107,13 @@ const secondaryButton =
       const copy = this.querySelector<HTMLButtonElement>(
         "[data-blume-prompt-copy]"
       );
+      const idle = copy?.querySelector<HTMLElement>(
+        "[data-blume-prompt-copy-idle]"
+      );
+      const done = copy?.querySelector<HTMLElement>(
+        "[data-blume-prompt-copy-done]"
+      );
+      let resetTimer: ReturnType<typeof setTimeout> | undefined;
       copy?.addEventListener("click", async () => {
         const text = promptText();
         if (!text) {
@@ -110,18 +125,15 @@ const secondaryButton =
           return;
         }
 
-        const label = copy.querySelector<HTMLElement>(
-          "[data-blume-prompt-copy-label]"
-        );
-        if (!label) {
-          return;
-        }
-        // Remember the real label once — capturing at click time would
-        // capture "Copied" on a double-click and stick until reload.
-        label.dataset.blumeLabel ??= label.textContent ?? "Copy prompt";
-        label.textContent = "Copied";
-        setTimeout(() => {
-          label.textContent = label.dataset.blumeLabel ?? "Copy prompt";
+        // Toggle visibility rather than swapping text: both labels occupy the
+        // same grid cell, so the button width never changes. Clearing the timer
+        // keeps the "Copied" state 1.5s past the last of several rapid clicks.
+        clearTimeout(resetTimer);
+        idle?.classList.add("invisible");
+        done?.classList.remove("invisible");
+        resetTimer = setTimeout(() => {
+          idle?.classList.remove("invisible");
+          done?.classList.add("invisible");
         }, 1500);
       });
     }

package/src/components/layout/Header.astro

@@ -1,4 +1,6 @@
 ---
+import Ask from "blume:ask";
+import data from "blume:data";
 import { withBase } from "../islands/base-path.ts";
 import type { ComponentOverride } from "../../core/define-components.ts";
 import { EN_UI } from "../../core/i18n-ui.ts";
@@ -8,7 +10,7 @@ import { GITHUB_MARK } from "../github-mark.ts";
 import Icon from "../Icon.astro";
 import LanguageSwitcher from "./LanguageSwitcher.astro";
 import Logo from "./Logo.astro";
-import { isUnderPath } from "./nav-utils.ts";
+import { activeTabForRoute } from "./nav-utils.ts";
 import NavSelector from "./NavSelector.astro";
 import { resolveSlot } from "./overrides.ts";
 import Search from "./Search.astro";
@@ -26,7 +28,14 @@ interface Props {
   navigation: Navigation;
   route: string;
   searchEnabled: boolean;
+  /**
+   * Whether the search modal offers an "Ask AI" hand-off. Defaults to whether
+   * Ask AI is configured, so no page has to pass it; a layout can still opt a
+   * shell out explicitly.
+   */
   askEnabled?: boolean;
+  /** Localized Ask AI strings for the active locale. */
+  askStrings?: UIStrings["ask"];
   // The mobile menu button toggles the docs sidebar drawer; custom pages
   // without a sidebar (e.g. a landing page) pass `false` to hide it.
   hasSidebar?: boolean;
@@ -57,7 +66,11 @@ const {
   navigation,
   route,
   searchEnabled,
-  askEnabled = false,
+  // `config.ask` is null whenever Ask AI is off, so the header is the one place
+  // that has to know — the Ask trigger below and the search modal's hand-off to
+  // it both switch on this, and every page gets both for free.
+  askEnabled = Boolean(data.config.ask),
+  askStrings,
   hasSidebar = true,
   hasDrawer = true,
   searchStrings,
@@ -81,6 +94,7 @@ const SearchSlot = resolveSlot(layout.Search, Search);
 // PageLayout) it's a tabs-only drawer the layout renders — so the button is also
 // needed whenever there are tabs to reveal.
 const showNavToggle = hasDrawer && (hasSidebar || navigation.tabs.length > 0);
+const activeTab = activeTabForRoute(navigation.tabs, route);
 // Where the header's inline tab bar appears. With a sidebar it shares the `md`
 // breakpoint with the docs drawer; without one, the tabs-only drawer is the sole
 // mobile nav below `lg`, so the inline tabs wait until `lg` to avoid duplicating
@@ -142,14 +156,9 @@ const clickScript = `(()=>{const dr=()=>{const h=document.querySelector("[data-b
       <nav aria-label={n.sections} class={tabsNavClass}>
         {navigation.tabs.map((tab) => (
           <a
-            aria-current={
-              route === tab.path ||
-              (tab.path !== "/" && isUnderPath(route, tab.path))
-                ? "page"
-                : undefined
-            }
+            aria-current={tab === activeTab ? "page" : undefined}
             class="rounded-full px-3 py-1.5 font-medium text-muted-foreground text-sm transition-colors hover:bg-muted hover:text-foreground aria-[current=page]:text-foreground"
-            href={withBase(tab.path)}
+            href={withBase(tab.href ?? tab.path)}
           >
             {tab.label}
           </a>
@@ -208,7 +217,7 @@ const clickScript = `(()=>{const dr=()=>{const h=document.querySelector("[data-b
       <span class="inline-flex dark:hidden"><Icon name="sun" size={18} /></span>
       <span class="hidden dark:inline-flex"><Icon name="moon" size={18} /></span>
     </button>
-    <slot name="ask" />
+    {askEnabled && <Ask strings={askStrings} />}
   </div>
 </header>
 <script is:inline set:html={clickScript} />

package/src/components/layout/Logo.astro

@@ -18,6 +18,8 @@ const { site, logo } = Astro.props;
 const logoSvg = logo?.svg;
 const logoLight = logo?.light;
 const logoDark = logo?.dark ?? logo?.light;
+const logoLightDimensions = logo?.dimensions?.light;
+const logoDarkDimensions = logo?.dimensions?.dark ?? logo?.dimensions?.light;
 const logoAlt = logo?.alt ?? "";
 const brandHref = logo?.href ?? "/";
 // Wordmark beside the mark: the configured `logo.text`, or the site title when
@@ -43,18 +45,28 @@ const brandText = logo?.text ?? site.title;
     !logoSvg &&
       logoLight &&
       (logoLight === logoDark ? (
-        <img alt={logoAlt} class="h-5 w-auto" src={withBase(logoLight)} />
+        <img
+          alt={logoAlt}
+          class="h-5 w-auto"
+          height={logoLightDimensions?.height}
+          src={withBase(logoLight)}
+          width={logoLightDimensions?.width}
+        />
       ) : (
         <>
           <img
             alt={logoAlt}
             class="h-5 w-auto dark:hidden"
+            height={logoLightDimensions?.height}
             src={withBase(logoLight)}
+            width={logoLightDimensions?.width}
           />
           <img
             alt={logoAlt}
             class="hidden h-5 w-auto dark:block"
+            height={logoDarkDimensions?.height}
             src={withBase(logoDark)}
+            width={logoDarkDimensions?.width}
           />
         </>
       ))

package/src/components/layout/PageFeedback.astro

@@ -15,7 +15,7 @@ const { strings } = Astro.props;
 const f = { ...EN_UI.feedback, ...strings };
 
 const buttonClass =
-  "inline-flex items-center gap-2 rounded-full border border-border px-4 py-2 text-foreground text-sm transition-colors hover:border-foreground";
+  "inline-flex items-center gap-2 rounded-blume border border-border px-4 py-2 text-foreground text-sm transition-colors hover:border-foreground";
 ---
 
 <section