blume 1.0.3 → 1.0.4

package/src/astro/generate.ts

@@ -37,7 +37,8 @@ import { resolveDocsCollection } from "../core/sources/resolve.ts";
 import { resolveTsconfigAliases } from "../core/tsconfig-aliases.ts";
 import type { Navigation } from "../core/types.ts";
 import { buildRssFeeds, renderRssFeed } from "../deploy/rss.ts";
-import { hasScalarReferences, referenceTabs } from "../openapi/references.ts";
+import { resolveOgLogo } from "../og/logo.ts";
+import { hasScalarReferences, referenceRoutes } from "../openapi/references.ts";
 import { buildReferenceFiles } from "../openapi/scalar.ts";
 import { isOpenApiSource } from "../openapi/source.ts";
 import { registry } from "../registry/registry.ts";
@@ -626,7 +627,56 @@ const writeStagedContent = async (
   }
 };
 
-/** The logo shape the runtime consumes: an inline SVG or image URL(s). */
+interface LogoDimensions {
+  height: number;
+  width: number;
+}
+
+const SVG_ROOT = /<svg\b(?<attributes>[^>]*)>/u;
+const SVG_WIDTH = /\bwidth\s*=\s*["'](?<value>[^"']+)["']/u;
+const SVG_HEIGHT = /\bheight\s*=\s*["'](?<value>[^"']+)["']/u;
+const SVG_LENGTH = /^\s*(?<value>[\d.]+)(?:px)?\s*$/u;
+const SVG_VIEW_BOX =
+  /\bviewBox\s*=\s*["'][\d.-]+[\s,]+[\d.-]+[\s,]+(?<width>[\d.]+)[\s,]+(?<height>[\d.]+)["']/u;
+
+const parseSvgLength = (value: string | undefined): number | undefined => {
+  const length = Number(value?.match(SVG_LENGTH)?.groups?.value);
+  return length > 0 ? length : undefined;
+};
+
+/** Read dimensions from an SVG's explicit size or its view box. */
+const svgDimensions = (svg: string | undefined): LogoDimensions | undefined => {
+  const attributes = svg?.match(SVG_ROOT)?.groups?.attributes;
+  const width = parseSvgLength(attributes?.match(SVG_WIDTH)?.groups?.value);
+  const height = parseSvgLength(attributes?.match(SVG_HEIGHT)?.groups?.value);
+  if (width && height) {
+    return { height, width };
+  }
+
+  const viewBox = attributes?.match(SVG_VIEW_BOX);
+  const viewBoxWidth = Number(viewBox?.groups?.width);
+  const viewBoxHeight = Number(viewBox?.groups?.height);
+  return viewBoxWidth > 0 && viewBoxHeight > 0
+    ? { height: viewBoxHeight, width: viewBoxWidth }
+    : undefined;
+};
+
+/** Read a local SVG logo from the project root or public directory. */
+const readLogoSvg = (
+  project: BlumeProject,
+  source: string | undefined
+): string | undefined => {
+  if (!source?.toLowerCase().endsWith(".svg")) {
+    return;
+  }
+  const rel = source.replace(/^\//u, "");
+  const file = [
+    join(project.context.root, "public", rel),
+    join(project.context.root, rel),
+  ].find((path) => existsSync(path));
+  return file ? readFileSync(file, "utf-8") : undefined;
+};
+
 /**
  * Resolve the configured logo. A single SVG is read and inlined so a
  * `currentColor` logo follows the theme; other images keep their URL for an
@@ -647,18 +697,20 @@ const resolveLogo = (project: BlumeProject): BlumeLogo | null => {
   const dark = image?.dark ?? image?.light;
   const alt = image?.alt ?? "";
   const brandHref = href ?? "/";
+  const lightSvg = readLogoSvg(project, light);
+  const darkSvg = dark === light ? lightSvg : readLogoSvg(project, dark);
 
-  if (light && light === dark && light.toLowerCase().endsWith(".svg")) {
-    const rel = light.replace(/^\//u, "");
-    const file = [
-      join(project.context.root, "public", rel),
-      join(project.context.root, rel),
-    ].find((path) => existsSync(path));
-    if (file) {
-      return { alt, href: brandHref, svg: readFileSync(file, "utf-8"), text };
-    }
+  if (light && light === dark && lightSvg) {
+    return { alt, href: brandHref, svg: lightSvg, text };
   }
-  return { alt, dark, href: brandHref, light, text };
+
+  const lightDimensions = svgDimensions(lightSvg);
+  const darkDimensions = svgDimensions(darkSvg);
+  const dimensions =
+    lightDimensions || darkDimensions
+      ? { dark: darkDimensions, light: lightDimensions }
+      : undefined;
+  return { alt, dark, dimensions, href: brandHref, light, text };
 };
 
 /**
@@ -779,6 +831,10 @@ export const buildRuntimeData = (project: BlumeProject): string => {
     ? `https://github.com/${github.owner}/${github.repo}`
     : null;
   const editBase = github ? `${repoUrl}/edit/${github.branch}` : null;
+  const logo = resolveLogo(project);
+  const ogLogo = config.seo.og.logo
+    ? resolveOgLogo(project, config.seo.og.logo)
+    : logo?.svg;
 
   const editUrlFor = (sourcePath?: string): string | null => {
     if (!(editBase && sourcePath)) {
@@ -791,13 +847,12 @@ export const buildRuntimeData = (project: BlumeProject): string => {
 
   const { i18n } = config;
 
-  // API reference routes surface as header tabs alongside the content-derived
-  // ones (Blume-rendered references also own a tab-scoped sidebar of operations),
-  // so the reference stays discoverable in every locale.
-  const withReferenceTabs = (nav: Navigation): Navigation => ({
+  // Resolve the header repo link per locale. API references no longer add a tab
+  // automatically — authors point a `navigation.tabs` entry at the reference
+  // route to surface it (see `referenceRoutes`).
+  const withRepoUrl = (nav: Navigation): Navigation => ({
     ...nav,
     repoUrl: config.navigation.repo && repoUrl ? repoUrl : null,
-    tabs: [...nav.tabs, ...referenceTabs(config)],
   });
 
   // Resolved UI dictionaries: one per locale under i18n, English baseline
@@ -824,7 +879,7 @@ export const buildRuntimeData = (project: BlumeProject): string => {
     ? Object.fromEntries(
         i18n.locales.map(({ code }) => [
           code,
-          withReferenceTabs(
+          withRepoUrl(
             graph.navigationByLocale[code] ?? {
               featured: [],
               selectors: [],
@@ -865,7 +920,7 @@ export const buildRuntimeData = (project: BlumeProject): string => {
           }
         : null,
       imageZoom: config.markdown.imageZoom,
-      logo: resolveLogo(project),
+      logo,
       mcp: config.ai.mcp.enabled
         ? {
             name: config.ai.mcp.name ?? config.title,
@@ -874,7 +929,11 @@ export const buildRuntimeData = (project: BlumeProject): string => {
         : null,
       // `og.enabled` is resolved to a definite boolean in `loadConfig`; coerce
       // the optional schema type so the serialized shape stays `boolean`.
-      og: { enabled: config.seo.og.enabled ?? false },
+      og: {
+        enabled: config.seo.og.enabled ?? false,
+        logo: ogLogo,
+        palette: config.seo.og.palette,
+      },
       repoUrl,
       search: {
         enabled: config.search.provider !== "none",
@@ -894,7 +953,7 @@ export const buildRuntimeData = (project: BlumeProject): string => {
     // CSS variables for Astro's <Font> component; matches the astro.config
     // `fonts:` entries derived from the same theme.fonts config.
     fontCssVars: configuredCssVars(config.theme.fonts),
-    navigation: withReferenceTabs(graph.navigation),
+    navigation: withRepoUrl(graph.navigation),
     // Per-locale navigation; the catch-all selects the active locale's tree.
     navigationByLocale,
     routes: manifest.routes.map((route) => ({
@@ -1441,11 +1500,11 @@ export const generateRuntime = async (
 
   // Missing-navigation-target check, now that every servable route is known:
   // content routes, custom `.astro` pages, the generated changelog, and any
-  // OpenAPI reference tabs.
+  // OpenAPI reference routes (so a tab an author points at one still validates).
   const navTargetRoutes = new Set<string>([
     ...project.graph.routes.keys(),
     ...pages.map((page) => page.pattern),
-    ...referenceTabs(config).map((tab) => tab.path),
+    ...referenceRoutes(config),
   ]);
   if (hasGeneratedChangelog(project, pages)) {
     navTargetRoutes.add("/changelog");

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
@@ -263,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}),` : "";
 
@@ -410,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
@@ -909,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" },
   });
@@ -976,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" },
   });
 }
@@ -989,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;
 
@@ -997,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;
     }
@@ -1032,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",
@@ -1127,6 +1171,7 @@ 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";
@@ -1170,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 });
@@ -1239,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 });
 }
@@ -1274,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;
 };
@@ -1302,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);
 };
@@ -1414,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";
-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;
   }
@@ -1429,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;
   }
@@ -1442,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;
 };
@@ -1481,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),
@@ -1510,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) => ({
@@ -1658,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;
 
@@ -1867,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;
 ---
 
@@ -1924,6 +1975,14 @@ declare module "blume:data" {
   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/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

@@ -10,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";
@@ -94,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
@@ -155,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>

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

package/src/components/layout/PageLayout.astro

@@ -39,7 +39,7 @@ import Favicon from "./Favicon.astro";
 import Fonts from "./Fonts.astro";
 import { BANNER_INIT_SCRIPT, THEME_INIT_SCRIPT } from "./head-scripts.ts";
 import Header from "./Header.astro";
-import { isUnderPath } from "./nav-utils.ts";
+import { activeTabForRoute } from "./nav-utils.ts";
 
 interface Props {
   site: { title: string; description?: string };
@@ -137,6 +137,7 @@ const searchLocale =
 const pageTitle = page?.title ?? site.title;
 const description = page?.description ?? site.description;
 const route = page?.route ?? "/";
+const activeTab = activeTabForRoute(navigation.tabs, route);
 
 // Derive canonical + og:image from the site URL the same way the catch-all does
 // for content pages, so a custom page gets both for free. The matching OG card
@@ -267,14 +268,9 @@ const bannerKey = banner?.dismissible ? banner.key : null;
                 {navigation.tabs.map((tab) => (
                   <li>
                     <a
-                      aria-current={
-                        route === tab.path ||
-                        (tab.path !== "/" && isUnderPath(route, tab.path))
-                          ? "page"
-                          : undefined
-                      }
+                      aria-current={tab === activeTab ? "page" : undefined}
                       class="block rounded-[0.65rem] px-2.5 py-1.5 font-medium text-muted-foreground text-sm transition-colors hover:bg-muted hover:text-foreground aria-[current=page]:bg-muted aria-[current=page]:text-foreground"
-                      href={withBase(tab.path)}
+                      href={withBase(tab.href ?? tab.path)}
                     >
                       {tab.label}
                     </a>