blume 0.0.0 → 0.1.0

package/src/components/content/auto-type-table.ts

@@ -0,0 +1,141 @@
+/**
+ * TypeScript type extraction for `<AutoTypeTable>`.
+ *
+ * Reads an interface or type alias — from a file path or inline source — via the
+ * TypeScript compiler API and returns one row per property: the shape
+ * `<TypeTable>` renders. `typescript` is loaded lazily (dynamic import) so the
+ * dependency is only pulled into the build when a page actually uses
+ * `<AutoTypeTable>`.
+ */
+import nodePath from "node:path";
+
+import type * as TypeScriptApi from "typescript";
+
+/** A single documented property — one generated row of a type table. */
+export interface TypeTableProperty {
+  default?: string;
+  description?: string;
+  name: string;
+  required: boolean;
+  type: string;
+}
+
+export interface ExtractOptions {
+  /** Named interface or type alias to document. */
+  name: string;
+  /** File to read the type from, resolved relative to {@link ExtractOptions.root}. */
+  path?: string;
+  /** Base directory for resolving a relative {@link ExtractOptions.path}. */
+  root?: string;
+  /** Inline TypeScript source. Used when {@link ExtractOptions.path} is omitted. */
+  source?: string;
+}
+
+/** Virtual file name backing the in-memory program when `source` is supplied. */
+const VIRTUAL_FILE = "__blume_auto_type_table__.ts";
+
+/** Build a compiler host that serves a single in-memory file plus the real libs. */
+const inMemoryHost = (
+  ts: typeof TypeScriptApi,
+  options: TypeScriptApi.CompilerOptions,
+  source: string
+): TypeScriptApi.CompilerHost => {
+  const host = ts.createCompilerHost(options, true);
+  const getSourceFile = host.getSourceFile.bind(host);
+  host.getSourceFile = (requested, languageVersion, onError, shouldCreate) =>
+    requested === VIRTUAL_FILE
+      ? ts.createSourceFile(VIRTUAL_FILE, source, languageVersion, true)
+      : getSourceFile(requested, languageVersion, onError, shouldCreate);
+  const fileExists = host.fileExists.bind(host);
+  host.fileExists = (requested) =>
+    requested === VIRTUAL_FILE || fileExists(requested);
+  const readFile = host.readFile.bind(host);
+  host.readFile = (requested) =>
+    requested === VIRTUAL_FILE ? source : readFile(requested);
+  return host;
+};
+
+/**
+ * Extract the documented properties of `name` from a TypeScript file or inline
+ * source. Property rows carry the declared type text, JSDoc description,
+ * `@default` tag, and whether the property is required.
+ */
+export const extractTypeTable = async (
+  options: ExtractOptions
+): Promise<TypeTableProperty[]> => {
+  const { name, path, root = process.cwd(), source } = options;
+  const tsModule = await import("typescript");
+  const ts = (tsModule.default ?? tsModule) as typeof TypeScriptApi;
+
+  const compilerOptions: TypeScriptApi.CompilerOptions = {
+    allowJs: true,
+    module: ts.ModuleKind.ESNext,
+    moduleResolution: ts.ModuleResolutionKind.Bundler,
+    noEmit: true,
+    skipLibCheck: true,
+    strict: true,
+    target: ts.ScriptTarget.ESNext,
+  };
+
+  let fileName: string;
+  let program: TypeScriptApi.Program;
+  if (source === undefined) {
+    if (path === undefined) {
+      throw new Error("AutoTypeTable needs a `path` or inline `type` source.");
+    }
+    fileName = nodePath.isAbsolute(path) ? path : nodePath.join(root, path);
+    program = ts.createProgram([fileName], compilerOptions);
+  } else {
+    fileName = VIRTUAL_FILE;
+    program = ts.createProgram(
+      [fileName],
+      compilerOptions,
+      inMemoryHost(ts, compilerOptions, source)
+    );
+  }
+
+  const sourceFile = program.getSourceFile(fileName);
+  if (!sourceFile) {
+    throw new Error(`Could not read "${path ?? VIRTUAL_FILE}".`);
+  }
+
+  const declaration = sourceFile.statements.find(
+    (statement): statement is TypeScriptApi.DeclarationStatement =>
+      (ts.isInterfaceDeclaration(statement) ||
+        ts.isTypeAliasDeclaration(statement)) &&
+      statement.name?.text === name
+  );
+  if (!declaration) {
+    throw new Error(`No interface or type named "${name}" found.`);
+  }
+
+  const checker = program.getTypeChecker();
+  const type = checker.getTypeAtLocation(declaration);
+
+  return checker.getPropertiesOfType(type).map((symbol) => {
+    const decl = symbol.declarations?.[0];
+    const signature = decl && ts.isPropertySignature(decl) ? decl : undefined;
+    const typeText = signature?.type
+      ? signature.type.getText(sourceFile)
+      : checker.typeToString(
+          checker.getTypeOfSymbolAtLocation(symbol, decl ?? declaration)
+        );
+    const description = ts
+      .displayPartsToString(symbol.getDocumentationComment(checker))
+      .trim();
+    const defaultTag = symbol
+      .getJsDocTags(checker)
+      .find((tag) => tag.name === "default" || tag.name === "defaultValue");
+    const defaultValue = defaultTag
+      ? ts.displayPartsToString(defaultTag.text).trim()
+      : "";
+
+    return {
+      default: defaultValue || undefined,
+      description: description || undefined,
+      name: symbol.getName(),
+      required: !signature?.questionToken,
+      type: typeText,
+    };
+  });
+};

package/src/components/content/github-info.ts

@@ -0,0 +1,79 @@
+/**
+ * Build-time GitHub repository lookup for `<GithubInfo>`.
+ *
+ * Fetches a repo's star and fork counts (plus description) from the GitHub REST
+ * API. Results are cached per repo for the lifetime of the build, and any
+ * failure — network error, rate limit, missing repo — resolves to `null` rather
+ * than throwing, so a card never breaks the build when the API is unreachable.
+ */
+
+export interface RepositoryInfo {
+  description: string | null;
+  forks: number;
+  stars: number;
+}
+
+export interface FetchRepositoryOptions {
+  baseUrl?: string;
+  owner: string;
+  repo: string;
+  token?: string;
+}
+
+const DEFAULT_BASE_URL = "https://api.github.com";
+
+/** In-process dedupe so the same repo is fetched once per build. */
+const cache = new Map<string, Promise<RepositoryInfo | null>>();
+
+const load = async (
+  options: FetchRepositoryOptions
+): Promise<RepositoryInfo | null> => {
+  const { baseUrl = DEFAULT_BASE_URL, owner, repo, token } = options;
+  const headers = new Headers({ Accept: "application/vnd.github+json" });
+  if (token) {
+    headers.set("Authorization", `Bearer ${token}`);
+  }
+
+  const response = await fetch(`${baseUrl}/repos/${owner}/${repo}`, {
+    headers,
+  });
+  if (!response.ok) {
+    return null;
+  }
+
+  const data = (await response.json()) as {
+    description: string | null;
+    forks_count: number;
+    stargazers_count: number;
+  };
+  return {
+    description: data.description,
+    forks: data.forks_count,
+    stars: data.stargazers_count,
+  };
+};
+
+const loadSafe = async (
+  options: FetchRepositoryOptions
+): Promise<RepositoryInfo | null> => {
+  try {
+    return await load(options);
+  } catch {
+    return null;
+  }
+};
+
+/** Fetch repo info, deduped per `owner/repo` and never throwing. */
+export const fetchRepositoryInfo = (
+  options: FetchRepositoryOptions
+): Promise<RepositoryInfo | null> => {
+  const key = `${options.baseUrl ?? DEFAULT_BASE_URL}/${options.owner}/${options.repo}`;
+  const existing = cache.get(key);
+  if (existing) {
+    return existing;
+  }
+
+  const promise = loadSafe(options);
+  cache.set(key, promise);
+  return promise;
+};

package/src/components/content/mermaid-element.ts

@@ -0,0 +1,68 @@
+/**
+ * Client behaviour for the `<blume-mermaid>` custom element emitted by the
+ * Mermaid markdown plugin. Mermaid is lazy-loaded — it needs a DOM and is large,
+ * so the dependency only downloads on pages that actually contain a diagram —
+ * and each diagram re-renders when the color theme flips so it tracks light/dark.
+ *
+ * Imported for its side effect (registers the element) from RootLayout's script.
+ */
+
+const importMermaid = async () => {
+  const mod = await import("mermaid");
+  return mod.default;
+};
+
+// Memoize the import so a page with several diagrams loads Mermaid once.
+let loader: ReturnType<typeof importMermaid> | null = null;
+const loadMermaid = () => {
+  loader ??= importMermaid();
+  return loader;
+};
+
+const prefersDark = () => document.documentElement.dataset.theme === "dark";
+
+let counter = 0;
+
+class BlumeMermaid extends HTMLElement {
+  connectedCallback() {
+    const source = this.dataset.source ?? "";
+    if (!source.trim()) {
+      return;
+    }
+
+    const output = document.createElement("div");
+    output.setAttribute("aria-busy", "true");
+    this.replaceChildren(output);
+
+    const render = async () => {
+      const mermaid = await loadMermaid();
+      mermaid.initialize({
+        securityLevel: "strict",
+        startOnLoad: false,
+        theme: prefersDark() ? "dark" : "default",
+      });
+      try {
+        counter += 1;
+        const { svg } = await mermaid.render(
+          `blume-mermaid-${counter}`,
+          source
+        );
+        output.innerHTML = svg;
+      } catch {
+        output.textContent = "Could not render this diagram.";
+      }
+      output.removeAttribute("aria-busy");
+    };
+
+    render();
+
+    // Re-render on color-theme changes so the diagram tracks light and dark.
+    new MutationObserver(() => render()).observe(document.documentElement, {
+      attributeFilter: ["data-theme"],
+    });
+  }
+}
+
+if (!customElements.get("blume-mermaid")) {
+  customElements.define("blume-mermaid", BlumeMermaid);
+}

package/src/components/github-mark.ts

@@ -0,0 +1,9 @@
+/**
+ * Inner markup of the official GitHub mark — a filled glyph on a 16×16 viewBox.
+ * Shared by the header repo link, the "Edit on GitHub" action, and
+ * `<GithubInfo>`; each wraps it in its own sized `<svg>` (via `set:html`). Kept
+ * out of the stroke-based `icons` set, which renders at 24×24 and can't express
+ * a filled mark.
+ */
+export const GITHUB_MARK =
+  '<path fill-rule="evenodd" clip-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z"/>';

package/src/components/index.ts

@@ -0,0 +1,14 @@
+/**
+ * Public component contracts.
+ *
+ * Prop types for built-in components are exported here so users can type their
+ * overrides (`import type { CalloutProps } from "blume/components"`). Concrete
+ * component types are added as components land; the override descriptor types
+ * below are stable today.
+ */
+export type {
+  ComponentOverride,
+  ComponentOverrides,
+  IslandDescriptor,
+} from "../core/define-components.ts";
+export type { HydrationMode } from "../core/schema.ts";

package/src/components/islands/AskAI.astro

@@ -0,0 +1,12 @@
+---
+import type { UIStrings } from "../../core/i18n-ui.ts";
+import AskAI from "./ask-ai.tsx";
+
+interface Props {
+  strings?: UIStrings["ask"];
+}
+
+const { strings } = Astro.props;
+---
+
+<AskAI client:load strings={strings} />

package/src/components/islands/ask-ai.tsx

@@ -0,0 +1,156 @@
+import { useEffect, useState } from "react";
+import type { FormEvent } from "react";
+
+import type { UIStrings } from "../../core/i18n-ui.ts";
+
+interface ChatMessage {
+  id: number;
+  role: "user" | "assistant";
+  content: string;
+}
+
+// English fallback so the island renders even if no dictionary is passed.
+const DEFAULT_ASK: UIStrings["ask"] = {
+  empty: "Ask a question about the docs.",
+  error: "Sorry, something went wrong.",
+  label: "Ask a question",
+  placeholder: "Ask a question…",
+  send: "Send",
+  title: "Ask AI",
+};
+
+let idCounter = 0;
+const nextId = (): number => {
+  idCounter += 1;
+  return idCounter;
+};
+
+const BUTTON_CLASS =
+  "inline-flex h-9 cursor-pointer items-center gap-2 rounded-blume border border-border bg-muted px-2.5 text-muted-foreground text-sm hover:border-accent disabled:opacity-50";
+
+const AskAI = ({ strings }: { strings?: UIStrings["ask"] }) => {
+  const t = strings ?? DEFAULT_ASK;
+  const [open, setOpen] = useState(false);
+  const [input, setInput] = useState("");
+  const [messages, setMessages] = useState<ChatMessage[]>([]);
+  const [busy, setBusy] = useState(false);
+
+  useEffect(() => {
+    const handler = (event: Event) => {
+      // The search modal forwards the typed query so "Ask AI: <query>" carries
+      // straight into the chat input.
+      const query = (event as CustomEvent<{ query?: string }>).detail?.query;
+      if (query) {
+        setInput(query);
+      }
+      setOpen(true);
+    };
+    window.addEventListener("blume:open-ask-ai", handler);
+    return () => window.removeEventListener("blume:open-ask-ai", handler);
+  }, []);
+
+  const send = async (event: FormEvent) => {
+    event.preventDefault();
+    const question = input.trim();
+    if (!question || busy) {
+      return;
+    }
+
+    const userMessage: ChatMessage = {
+      content: question,
+      id: nextId(),
+      role: "user",
+    };
+    const history = [...messages, userMessage];
+    const assistant: ChatMessage = {
+      content: "",
+      id: nextId(),
+      role: "assistant",
+    };
+    setMessages([...history, assistant]);
+    setInput("");
+    setBusy(true);
+
+    try {
+      const response = await fetch("/api/ask", {
+        body: JSON.stringify({
+          messages: history.map((m) => ({ content: m.content, role: m.role })),
+        }),
+        headers: { "content-type": "application/json" },
+        method: "POST",
+      });
+      const reader = response.body?.getReader();
+      const decoder = new TextDecoder();
+      if (reader) {
+        let done = false;
+        while (!done) {
+          // oxlint-disable-next-line no-await-in-loop -- sequential stream reads
+          const chunk = await reader.read();
+          ({ done } = chunk);
+          if (chunk.value) {
+            assistant.content += decoder.decode(chunk.value);
+            setMessages((current) => [
+              ...current.slice(0, -1),
+              { ...assistant },
+            ]);
+          }
+        }
+      }
+    } catch {
+      assistant.content = t.error;
+      setMessages((current) => [...current.slice(0, -1), { ...assistant }]);
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <div className="relative">
+      <button
+        className={BUTTON_CLASS}
+        onClick={() => setOpen(!open)}
+        type="button"
+      >
+        {t.title}
+      </button>
+      {open && (
+        <div className="absolute top-[calc(100%+0.5rem)] end-0 z-50 flex max-h-[70vh] w-[min(24rem,90vw)] flex-col overflow-hidden rounded-blume border border-border bg-background shadow-xl">
+          <div className="flex flex-1 flex-col gap-2.5 overflow-y-auto p-3.5">
+            {messages.length === 0 && (
+              <p className="m-0 text-muted-foreground text-sm">{t.empty}</p>
+            )}
+            {messages.map((message) => (
+              <div
+                className={`whitespace-pre-wrap rounded-blume px-2.5 py-2 text-sm ${
+                  message.role === "user"
+                    ? "self-end bg-accent/15"
+                    : "self-start bg-muted"
+                }`}
+                key={message.id}
+              >
+                {message.content}
+              </div>
+            ))}
+          </div>
+          <form
+            className="flex gap-2 border-border border-t p-2.5"
+            onSubmit={send}
+          >
+            <input
+              aria-label={t.label}
+              className="flex-1 rounded-blume border border-border bg-transparent px-2.5 py-1.5 text-sm"
+              onChange={(event) => setInput(event.target.value)}
+              placeholder={t.placeholder}
+              value={input}
+            />
+            <button className={BUTTON_CLASS} disabled={busy} type="submit">
+              {t.send}
+            </button>
+          </form>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default AskAI;

package/src/components/layout/Analytics.astro

@@ -0,0 +1,63 @@
+---
+import VercelAnalytics from "@vercel/analytics/astro";
+
+// Analytics scripts injected into <head>. PostHog and custom providers use the
+// inline-snippet house style (banner/theme/JSON-LD); Vercel uses its official
+// Astro component. Loads ONLY in production builds so `blume dev` stays clean
+// and local traffic never reaches your analytics.
+interface AnalyticsScript {
+  attributes?: Record<string, string>;
+  content?: string;
+  src?: string;
+  strategy?: "async" | "defer";
+}
+
+interface Props {
+  analytics?: {
+    posthog?: { host?: string; key: string };
+    scripts?: AnalyticsScript[];
+    vercel?: boolean;
+  } | null;
+}
+
+const { analytics } = Astro.props;
+const enabled = import.meta.env.PROD && Boolean(analytics);
+
+// Vercel Web Analytics: rendered via the official @vercel/analytics/astro
+// component, which injects the first-party script Vercel serves at
+// /_vercel/insights once Web Analytics is enabled for the project.
+const vercelEnabled = enabled && analytics?.vercel === true;
+
+// PostHog: the official array.js loader snippet, keyed off config. The host
+// defaults to PostHog Cloud US; EU/self-hosted users override `posthog.host`.
+const POSTHOG_LOADER =
+  '!function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.crossOrigin="anonymous",p.async=!0,p.src=s.api_host.replace(".i.posthog.com","-assets.i.posthog.com")+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="init capture register register_once register_for_session unregister unregister_for_session getFeatureFlag getFeatureFlagPayload isFeatureEnabled reloadFeatureFlags updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures on onFeatureFlags onSessionId getSurveys getActiveMatchingSurveys renderSurvey canRenderSurvey getNextSurveyStep identify setPersonProperties group resetGroups setPersonPropertiesForFlags resetPersonPropertiesForFlags setGroupPropertiesForFlags resetGroupPropertiesForFlags reset get_distinct_id getGroups get_session_id get_session_replay_url alias set_config startSessionRecording stopSessionRecording sessionRecordingStarted captureException loadToolbar get_property getSessionProperty createPersonProfile opt_in_capturing opt_out_capturing has_opted_in_capturing has_opted_out_capturing clear_opt_in_out_capturing debug getPageViewId captureTraceFeedback captureTraceMetric".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);';
+const posthog = enabled ? analytics?.posthog : undefined;
+const posthogSnippet = posthog
+  ? `${POSTHOG_LOADER}posthog.init(${JSON.stringify(posthog.key)},{api_host:${JSON.stringify(posthog.host ?? "https://us.i.posthog.com")}});`
+  : null;
+
+// Custom scripts: any other provider. Each is either external (`src`) or inline
+// (`content`). Explicit fields win over spread `attributes`.
+const customScripts = enabled ? (analytics?.scripts ?? []) : [];
+const externalScripts = customScripts
+  .filter((script) => script.src)
+  .map((script) => ({
+    ...script.attributes,
+    ...(script.strategy === "async" ? { async: true } : {}),
+    ...(script.strategy === "defer" ? { defer: true } : {}),
+    src: script.src,
+  }));
+const inlineScripts = customScripts
+  .filter((script) => script.content)
+  .map((script) => ({ attributes: script.attributes ?? {}, content: script.content }));
+---
+
+{vercelEnabled && <VercelAnalytics />}
+{posthogSnippet && <script is:inline set:html={posthogSnippet} />}
+{externalScripts.map((attrs) => <script is:inline {...attrs} />)}
+{
+  inlineScripts.map((script) => (
+    <script is:inline set:html={script.content} {...script.attributes} />
+  ))
+}

package/src/components/layout/Banner.astro

@@ -0,0 +1,50 @@
+---
+import Icon from "../Icon.astro";
+
+// The site-wide announcement banner, shared by RootLayout and ReferenceLayout so
+// every shell shows the same bar. The pre-paint hide for a dismissed banner and
+// the dismiss click handler live in the layout/Header, not here.
+interface Props {
+  banner:
+    | {
+        content: string;
+        link?: { text: string; href: string };
+        dismissible: boolean;
+        key: string;
+      }
+    | null;
+}
+
+const { banner } = Astro.props;
+---
+
+{
+  banner && (
+    <div
+      class="relative flex items-center justify-center gap-x-2 gap-y-0.5 bg-foreground px-10 py-3 text-center text-background text-sm max-sm:flex-wrap dark:border-border dark:border-b dark:bg-background dark:text-foreground [:where([data-blume-banner-hidden])_&]:hidden"
+      data-banner-key={banner.key}
+      data-blume-banner
+    >
+      <span>{banner.content}</span>
+      {banner.link && (
+        <a
+          class="inline-flex items-center gap-1 font-medium underline underline-offset-2"
+          href={banner.link.href}
+        >
+          {banner.link.text}
+          <Icon name="arrow-right" size={14} />
+        </a>
+      )}
+      {banner.dismissible && (
+        <button
+          aria-label="Dismiss announcement"
+          class="absolute end-1.5 inline-flex size-7 items-center justify-center rounded-full text-background/80 transition-colors hover:bg-white/10 hover:text-background dark:text-foreground/70 dark:hover:bg-foreground/10 dark:hover:text-foreground"
+          data-blume-banner-dismiss
+          type="button"
+        >
+          <Icon name="x" size={16} />
+        </button>
+      )}
+    </div>
+  )
+}

package/src/components/layout/Breadcrumbs.astro

@@ -0,0 +1,31 @@
+---
+import type { Crumb } from "./nav-utils.ts";
+
+interface Props {
+  /** Full breadcrumb trail from the site root to the current page. */
+  crumbs: Crumb[];
+}
+
+const { crumbs } = Astro.props;
+
+// The built-in shows a single "eyebrow" crumb — the parent group — rather than
+// the whole trail. An override receives the complete list and can render more.
+const eyebrowCrumb = crumbs.length > 1 ? crumbs[crumbs.length - 2] : null;
+---
+
+{
+  eyebrowCrumb && (
+    <nav
+      aria-label="Breadcrumb"
+      class="mx-auto mb-2 max-w-[42rem] text-muted-foreground text-sm"
+    >
+      {eyebrowCrumb.route ? (
+        <a class="hover:text-foreground" href={eyebrowCrumb.route}>
+          {eyebrowCrumb.label}
+        </a>
+      ) : (
+        <span>{eyebrowCrumb.label}</span>
+      )}
+    </nav>
+  )
+}

package/src/components/layout/Favicon.astro

@@ -0,0 +1,15 @@
+---
+// Emits the favicon <link> for the document <head>. The href is either a URL to
+// a file the project ships in public/, or a data URI (a root-level icon, or the
+// bundled Blume default) — both resolved by the generator's resolveFavicon.
+interface Props {
+  favicon?: {
+    href: string;
+    type?: string;
+  } | null;
+}
+
+const { favicon } = Astro.props;
+---
+
+{favicon && <link href={favicon.href} rel="icon" type={favicon.type} />}

package/src/components/layout/Fonts.astro

@@ -0,0 +1,14 @@
+---
+// Emits the optimized @font-face declarations + preload links for each
+// configured font (Astro's Fonts API). Renders nothing when no fonts are set;
+// the CSS variables match the astro.config `fonts:` entries.
+import { Font } from "astro:assets";
+
+interface Props {
+  cssVars: string[];
+}
+
+const { cssVars } = Astro.props;
+---
+
+{cssVars.map((cssVar) => <Font cssVariable={cssVar} preload />)}