@publish.os/nextjs 0.0.1-alpha.81 → 0.0.1-alpha.90

package/compiler-assets/nextjs/defaults/root/globals.css

@@ -22,6 +22,7 @@
   --color-focus-stroke: var(--focus-stroke);
 
   --color-accent-1: var(--accent-1);
+  --color-accent-text-foreground: var(--accent-text-foreground);
   --color-accent-1-foreground: var(--accent-1-foreground);
   --color-accent-1-stroke: var(--accent-1-stroke);
   --color-accent-1-hover: var(--accent-1-hover);
@@ -157,6 +158,23 @@
 }
 
 @layer base {
+  /* Keep light-dark() tokens valid when Next.js lowers them for older browsers. */
+  :root {
+    color-scheme: light;
+  }
+
+  :root,
+  .light {
+    --logo-block-light-display: block;
+    --logo-block-dark-display: none;
+  }
+
+  .dark {
+    color-scheme: dark;
+    --logo-block-light-display: none;
+    --logo-block-dark-display: block;
+  }
+
   *,
   *::before,
   *::after {
@@ -188,4 +206,11 @@
     background-color: var(--selection-surface);
     color: var(--selection-foreground);
   }
+
+  @media (forced-colors: active) {
+    ::selection {
+      background-color: Highlight;
+      color: HighlightText;
+    }
+  }
 }

package/compiler-assets/nextjs/defaults/root/{page.tsx → index.tsx}

@@ -22,9 +22,13 @@ export default function HomePage(props: RootPageProps) {
   const navNodes = rootNavNodes(tree);
 
   return (
-    <section className="mx-auto grid min-h-[calc(100vh_-_var(--layout-global-nav-height))] w-full max-w-(--layout-site-max-width) grid-cols-1 border-x border-stroke-3 bg-surface-1 md:grid-cols-[var(--layout-sidebar-width)_minmax(0,1fr)_var(--layout-toc-width)] supports-[height:100dvh]:min-h-[calc(100dvh_-_var(--layout-global-nav-height))] supports-[top:anchor-size(--global-navbar_height)]:min-h-[calc(100vh_-_anchor-size(--global-navbar_height,3.5rem))] supports-[top:anchor-size(--global-navbar_height)]:supports-[height:100dvh]:min-h-[calc(100dvh_-_anchor-size(--global-navbar_height,3.5rem))]">
+    <section className="mx-auto grid min-h-[calc(100vh-var(--layout-global-nav-height))] w-full max-w-(--layout-site-max-width) grid-cols-1 border-x border-stroke-3 bg-surface-1 md:grid-cols-[var(--layout-sidebar-width)_minmax(0,1fr)_var(--layout-toc-width)] supports-[height:100dvh]:min-h-[calc(100dvh-var(--layout-global-nav-height))] supports-[top:anchor-size(--global-navbar_height)]:min-h-[calc(100vh-anchor-size(--global-navbar_height,3.5rem))] supports-[top:anchor-size(--global-navbar_height)]:supports-[height:100dvh]:min-h-[calc(100dvh-anchor-size(--global-navbar_height,3.5rem))]">
       <div className="hidden md:block" />
-      <main className="flex min-w-0 items-start justify-center px-6 pb-16 pt-[clamp(5rem,18vh,10rem)] text-foreground-1 lg:px-10">
+      <main
+        className="flex min-w-0 scroll-mt-[calc(var(--layout-global-nav-height)+1rem)] items-start justify-center px-6 pb-16 pt-[clamp(5rem,18vh,10rem)] text-foreground-1 lg:px-10"
+        id="main-content"
+        tabIndex={-1}
+      >
         <div className="w-full max-w-md">
           <p className="mb-6 text-sm font-semibold text-foreground-1">
             {site.name}

package/compiler-assets/nextjs/defaults/root/layout.tsx

@@ -12,8 +12,14 @@ export default function DefaultRootLayout(props: RootLayoutProps) {
 
   return (
     <div className="flex min-h-dvh flex-col bg-surface-2">
+      <a
+        className="sr-only focus:not-sr-only focus:fixed focus:start-4 focus:top-2 focus:z-toast focus:rounded-button focus:bg-surface-1 focus:px-4 focus:py-3 focus:text-sm focus:text-foreground-1 focus:outline-2 focus:outline-focus-stroke"
+        href="#main-content"
+      >
+        Skip to content
+      </a>
       <Navbar logo={faviconsAndLogos.logo} site={site} tree={tree} />
-      <main className="flex w-full flex-1 flex-col">{children}</main>
+      <div className="flex w-full flex-1 flex-col">{children}</div>
     </div>
   );
 }

package/compiler-assets/nextjs/defaults/root/theme.css

@@ -3,18 +3,18 @@
 :root {
   --theme-radius: var(--theme-radius-md);
 
-  --gray-100: #ffffff;
-  --gray-200: #fafafa;
-  --gray-300: #f5f5f5;
-  --gray-400: #eeeeee;
-  --gray-500: #e5e5e5;
-  --gray-600: #d4d4d4;
-  --gray-700: #a3a3a3;
+  --gray-100: #fcfcfc;
+  --gray-200: #f9f9f9;
+  --gray-300: #f3f3f3;
+  --gray-400: #f0f0f0;
+  --gray-500: #e0e0e0;
+  --gray-600: #c6c6c6;
+  --gray-700: #999999;
   --gray-800: #737373;
-  --gray-900: #525252;
-  --gray-1000: #404040;
-  --gray-1100: #262626;
-  --gray-1200: #000000;
+  --gray-900: #5d5d5d;
+  --gray-1000: #464646;
+  --gray-1100: #2e2e2e;
+  --gray-1200: #171717;
 
   --neutral-100: var(--gray-100);
   --neutral-200: var(--gray-200);
@@ -33,18 +33,18 @@
 }
 
 .dark {
-  --gray-100: #000000;
-  --gray-200: #0a0a0a;
-  --gray-300: #171717;
-  --gray-400: #262626;
-  --gray-500: #404040;
+  --gray-100: #131313;
+  --gray-200: #1a1a1a;
+  --gray-300: #212121;
+  --gray-400: #292929;
+  --gray-500: #383838;
   --gray-600: #525252;
-  --gray-700: #737373;
-  --gray-800: #a3a3a3;
-  --gray-900: #d4d4d4;
-  --gray-1000: #e5e5e5;
-  --gray-1100: #f5f5f5;
-  --gray-1200: #ffffff;
+  --gray-700: #767676;
+  --gray-800: #b3b3b3;
+  --gray-900: #c4c4c4;
+  --gray-1000: #d2d2d2;
+  --gray-1100: #e6e6e6;
+  --gray-1200: #f5f5f5;
 
   --accent: var(--gray-1200);
 }

package/compiler-assets/nextjs/shims/generated-group-page.tsx

@@ -1,10 +1,12 @@
+import { PublishOSThemeScope } from "@app/publish-os-theme-provider";
 import manifest from "@manifest";
 import {
   createGroupMetadata,
   createGroupPage,
 } from "@publish.os/nextjs/kernel/routes/pages/group";
 import { ogManifest } from "@source/.publishos/og-manifest.generated";
-import IndexPage from "@source/__PUBLISHOS_OWNER_KEY__/page";
+import { groupThemes } from "@source/.theme.generated";
+import IndexPage from "@source/__PUBLISHOS_OWNER_KEY__/index";
 import type { Metadata } from "next";
 
 const route = {
@@ -14,5 +16,20 @@ const route = {
   IndexPage,
 } as const;
 
-export default createGroupPage(route);
+const GroupPage = createGroupPage(route);
+
+export default function GeneratedGroupPage() {
+  return (
+    <PublishOSThemeScope group={groupThemes[route.group].group}>
+      <GroupPage />
+    </PublishOSThemeScope>
+  );
+}
+
 export const metadata: Metadata = createGroupMetadata(route);
+
+export const ensureStatic = "navigation";
+
+// Next 16.4 still misclassifies redirect() during instant validation.
+// Keep its HTTP response; ensureStatic independently validates prerendering.
+export const instant = false;

package/compiler-assets/nextjs/shims/generated-leaf-page.tsx

@@ -1,3 +1,4 @@
+import { PublishOSThemeScope } from "@app/publish-os-theme-provider";
 import manifest from "@manifest";
 import {
   createLeafMetadata,
@@ -5,7 +6,8 @@ import {
   createLeafStaticParams,
 } from "@publish.os/nextjs/kernel/routes/pages/leaf";
 import { ogManifest } from "@source/.publishos/og-manifest.generated";
-import Leaf from "@source/__PUBLISHOS_OWNER_KEY__/leaf";
+import { groupThemes } from "@source/.theme.generated";
+import Leaf from "@source/__PUBLISHOS_OWNER_KEY__/page";
 import { PoweredByFooter } from "@source/_internal/powered-by-footer.generated";
 
 const route = {
@@ -16,6 +18,18 @@ const route = {
   PoweredByFooter,
 } as const;
 
-export default createLeafPage(route);
+const LeafPage = createLeafPage(route);
+
+export default function GeneratedLeafPage(props: {
+  params: Promise<{ slug: string[] }>;
+}) {
+  return (
+    <PublishOSThemeScope group={groupThemes[route.group].group}>
+      <LeafPage {...props} />
+    </PublishOSThemeScope>
+  );
+}
+
 export const generateMetadata = createLeafMetadata(route);
 export const generateStaticParams = createLeafStaticParams(route);
+export const ensureStatic = "navigation";

package/compiler-assets/nextjs/shims/global-layout.tsx

@@ -3,7 +3,6 @@ import "@source/.fonts.generated.css";
 import { Providers } from "@app/providers";
 import { preloadRootFonts, rootFontClassName } from "@source/.fonts.generated";
 import { faviconsAndLogos } from "@source/.publishos/favicons-and-logos.generated";
-import { ogManifest } from "@source/.publishos/og-manifest.generated";
 import RootLayout from "@source/layout";
 import type { Metadata } from "next";
 import type { ReactNode } from "react";
@@ -14,15 +13,15 @@ const siteDescription =
   typeof manifest.site.description === "string"
     ? manifest.site.description
     : undefined;
-const siteUrl =
-  "url" in manifest.site && typeof manifest.site.url === "string"
-    ? manifest.site.url
+const siteOrigin =
+  "origin" in manifest.site && typeof manifest.site.origin === "string"
+    ? manifest.site.origin
     : undefined;
 const isDevelopment = process.env.NODE_ENV === "development";
 const metadataBase = isDevelopment
   ? new URL(`http://localhost:${process.env.PORT ?? "3000"}`)
-  : siteUrl
-    ? new URL(siteUrl)
+  : siteOrigin
+    ? new URL(siteOrigin)
     : undefined;
 type GeneratedMetadataIcons = {
   icon?: readonly {
@@ -50,39 +49,6 @@ const metadataIcons: Metadata["icons"] | undefined =
           : {}),
       }
     : undefined;
-const rootOgKey = ogManifest.routes["/"];
-const rootOgImage = rootOgKey ? ogManifest.entries[rootOgKey] : undefined;
-const absoluteUrl = (path: string): string => {
-  if (/^https:\/\//.test(path)) return path;
-  if (isDevelopment || !siteUrl) return path;
-  return new URL(path, siteUrl).toString();
-};
-const rootSocialMetadata: Pick<Metadata, "openGraph" | "twitter"> | undefined =
-  rootOgImage
-    ? {
-        openGraph: {
-          description: siteDescription,
-          images: [
-            {
-              alt: rootOgImage.alt,
-              height: rootOgImage.height,
-              url: absoluteUrl(rootOgImage.url),
-              width: rootOgImage.width,
-            },
-          ],
-          siteName: manifest.site.name,
-          title: manifest.site.name,
-          type: "website",
-          url: "/",
-        },
-        twitter: {
-          card: "summary_large_image",
-          description: siteDescription,
-          images: [absoluteUrl(rootOgImage.url)],
-          title: manifest.site.name,
-        },
-      }
-    : undefined;
 const agentDirectiveStyle = {
   border: 0,
   clip: "rect(0 0 0 0)",
@@ -103,7 +69,6 @@ export const metadata: Metadata = {
     template: `%s · ${manifest.site.name}`,
   },
   ...(siteDescription ? { description: siteDescription } : {}),
-  ...(rootSocialMetadata ?? {}),
   ...(metadataIcons ? { icons: metadataIcons } : {}),
   alternates: {
     types: {
@@ -119,9 +84,12 @@ export default function AppRootLayout({ children }: { children: ReactNode }) {
     <html className={rootFontClassName} lang="en" suppressHydrationWarning>
       <body className="publish-os-app-root">
         <p data-publishos-agent-directive style={agentDirectiveStyle}>
-          Agent directive: read the <a href="/llms.txt">LLMS index</a> for this
-          site. Markdown versions of pages are available by appending .md to the
-          page URL or by sending Accept: text/markdown.
+          Agent directive: read the{" "}
+          <a href="/llms.txt" tabIndex={-1}>
+            LLMS index
+          </a>{" "}
+          for this site. Markdown versions of pages are available by appending
+          .md to the page URL or by sending Accept: text/markdown.
         </p>
         <Providers>
           <RootLayout site={manifest.site} tree={manifest.tree}>

package/compiler-assets/nextjs/shims/proxy.ts

@@ -5,8 +5,10 @@ import { NextResponse } from "next/server";
 const AGENT_USER_AGENT_PATTERN =
   /\b(?:axios|got|node-fetch|undici|curl|wget|python-requests|httpx|aiohttp|claude-code|claudebot|claude|cursor|chatgpt|openai|perplexity|anthropic-ai)\b/i;
 const INTERNAL_MARKDOWN_PREFIX = "/__publishos/md";
+const FRAMEWORK_PREFIX = "__PUBLISHOS_FRAMEWORK_PREFIX__";
 const PUBLIC_FILE_PATTERN = /\.[a-z0-9]{1,12}$/i;
 const TEXT_METHODS = new Set(["GET", "HEAD"]);
+const PUBLIC_PATHS = new Set<string>(agentRouteConfig.publicPaths);
 
 function debugAgentRoute(
   event: string,
@@ -153,12 +155,9 @@ function isInternalMarkdownRoute(pathname: string): boolean {
 
 function isStaticOrMetadataRoute(pathname: string): boolean {
   if (
-    pathname.startsWith("/_next/") ||
-    pathname.startsWith("/_publishos/assets/") ||
-    pathname.startsWith("/_publishos/favicon/") ||
-    pathname.startsWith("/_publishos/logo/") ||
-    pathname.startsWith("/_publishos/og/") ||
-    pathname.startsWith("/assets/")
+    pathname === FRAMEWORK_PREFIX ||
+    pathname.startsWith(`${FRAMEWORK_PREFIX}/`) ||
+    pathname.startsWith("/_next/")
   ) {
     return true;
   }
@@ -243,6 +242,8 @@ function withDiscoveryHeaders(
 export function proxy(request: NextRequest) {
   const { pathname } = request.nextUrl;
 
+  if (pathname === "/_not-found") return NextResponse.next();
+
   if (isInternalMarkdownRoute(pathname)) {
     if (request.headers.get("x-publishos-agent-route") === "markdown") {
       return NextResponse.next();
@@ -288,6 +289,19 @@ export function proxy(request: NextRequest) {
     return rewriteToMarkdown(request, markdownReason);
   }
 
+  let pagePath: string;
+  try {
+    pagePath = normalizePagePath(decodeURIComponent(pathname));
+  } catch {
+    pagePath = pathname;
+  }
+  if (!PUBLIC_PATHS.has(pagePath)) {
+    // Use Next's static 404 before an unknown catch-all reaches error recovery.
+    const url = request.nextUrl.clone();
+    url.pathname = "/_not-found";
+    return NextResponse.rewrite(url, { status: 404 });
+  }
+
   if (!agentRouteConfig.enabled || !agentRouteConfig.discoveryHeaders) {
     debugAgentRoute("pass", {
       method: request.method,
@@ -311,7 +325,5 @@ export function proxy(request: NextRequest) {
 }
 
 export const config = {
-  matcher: [
-    "/((?!_next/static|_next/image|_next/webpack-hmr|_publishos/assets|_publishos/favicon|_publishos/logo|_publishos/og|assets).*)",
-  ],
+  matcher: ["/__PUBLISHOS_MATCHER__"],
 };

package/compiler-assets/nextjs/shims/publish-os-theme-provider.tsx

@@ -6,9 +6,9 @@ import {
   ROOT_FORCED_MODE,
   routeThemes,
 } from "@source/.theme.generated";
-import { useSelectedLayoutSegments } from "next/navigation";
+import { usePathname } from "next/navigation";
 import { ThemeProvider as NextThemes } from "next-themes";
-import type { ReactNode } from "react";
+import { type ReactNode, Suspense, useLayoutEffect, useState } from "react";
 
 type ForcedMode = "dark" | "light" | "none";
 type RouteTheme = {
@@ -16,24 +16,20 @@ type RouteTheme = {
   forcedMode?: ForcedMode;
 };
 
-function selectedPathFromSegments(segments: readonly string[]): string {
-  const path = segments
-    .filter((segment) => segment !== "" && !segment.startsWith("("))
-    .join("/");
-
-  return path ? `/${path}` : "/";
-}
-
 function resolveRouteTheme(
-  segments: readonly string[],
+  pathname: string,
+  themes: Readonly<Record<string, RouteTheme>>,
 ): RouteTheme | undefined {
-  const selectedPath = selectedPathFromSegments(segments);
   let match: RouteTheme | undefined;
   let matchLength = 0;
 
-  const entries = Object.entries(routeThemes) as Array<[string, RouteTheme]>;
+  const entries = Object.entries(themes);
   for (const [basePath, routeTheme] of entries) {
-    if (selectedPath === basePath || selectedPath.startsWith(`${basePath}/`)) {
+    if (
+      basePath === "/" ||
+      pathname === basePath ||
+      pathname.startsWith(`${basePath}/`)
+    ) {
       if (basePath.length > matchLength) {
         match = routeTheme;
         matchLength = basePath.length;
@@ -50,8 +46,57 @@ function effectiveForcedMode(routeTheme: RouteTheme | undefined): ForcedMode {
   return ROOT_FORCED_MODE ?? "none";
 }
 
+function RouteThemeSync({
+  onChange,
+}: {
+  onChange: (theme: RouteTheme | undefined) => void;
+}) {
+  const routeTheme = resolveRouteTheme(usePathname(), routeThemes);
+  useLayoutEffect(() => onChange(routeTheme), [onChange, routeTheme]);
+  return null;
+}
+
+function initialRouteTheme(): RouteTheme | undefined {
+  return typeof window === "undefined"
+    ? undefined
+    : resolveRouteTheme(window.location.pathname, routeThemes);
+}
+
+// Both bootstrap and hydration use the same compiler-generated route mapping.
+const initialThemeScript = `{
+  const route = (${resolveRouteTheme.toString()})(location.pathname, ${JSON.stringify(routeThemes).replaceAll("<", "\\u003c")});
+  document.currentScript.parentElement.setAttribute("data-group", route?.group ?? "");
+  const forcedMode = route?.forcedMode ?? ${JSON.stringify(ROOT_FORCED_MODE) ?? "undefined"};
+  let mode = ${JSON.stringify(ROOT_DEFAULT_MODE)};
+  try { mode = localStorage.getItem("theme") || mode; } catch {}
+  if (forcedMode && forcedMode !== "none") mode = forcedMode;
+  if (mode === "system") mode = matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  if (mode === "light" || mode === "dark") {
+    const root = document.documentElement;
+    root.classList.remove("light", "dark");
+    root.classList.add(mode);
+    root.style.colorScheme = mode;
+  }
+}`;
+
+export function PublishOSThemeScope({
+  children,
+  group,
+}: {
+  children: ReactNode;
+  group: string;
+}) {
+  return (
+    <ThemeScopeProvider group={group}>
+      <div className="contents" data-theme-root="" data-group={group}>
+        {children}
+      </div>
+    </ThemeScopeProvider>
+  );
+}
+
 export function PublishOSThemeProvider({ children }: { children: ReactNode }) {
-  const routeTheme = resolveRouteTheme(useSelectedLayoutSegments());
+  const [routeTheme, setRouteTheme] = useState(initialRouteTheme);
   const forcedMode = effectiveForcedMode(routeTheme);
   const forcedTheme = forcedMode === "none" ? undefined : forcedMode;
 
@@ -62,13 +107,29 @@ export function PublishOSThemeProvider({ children }: { children: ReactNode }) {
       disableTransitionOnChange
       enableSystem
       forcedTheme={forcedTheme}
+      scriptProps={{
+        type: typeof window === "undefined" ? "text/javascript" : "text/plain",
+      }}
     >
       <ThemeScopeProvider group={routeTheme?.group}>
         <div
           className="contents"
+          id="publish-os-theme-root"
           data-theme-root=""
           data-group={routeTheme?.group ?? ""}
+          suppressHydrationWarning
         >
+          <script
+            type={
+              typeof window === "undefined" ? "text/javascript" : "text/plain"
+            }
+            suppressHydrationWarning
+            // biome-ignore lint/security/noDangerouslySetInnerHtml: Compiler-only route metadata escapes HTML; the script must run before paint.
+            dangerouslySetInnerHTML={{ __html: initialThemeScript }}
+          />
+          <Suspense fallback={null}>
+            <RouteThemeSync onChange={setRouteTheme} />
+          </Suspense>
           {children}
         </div>
       </ThemeScopeProvider>

package/compiler-assets/nextjs/shims/root-page.tsx

@@ -4,10 +4,16 @@ import {
   createRootPage,
 } from "@publish.os/nextjs/kernel/routes/pages/root";
 import { ogManifest } from "@source/.publishos/og-manifest.generated";
-import RootPage from "@source/page";
+import RootPage from "@source/index";
 import type { Metadata } from "next";
 
 const route = { manifest, ogManifest, RootPage } as const;
 
 export default createRootPage(route);
 export const metadata: Metadata = createRootMetadata(route);
+
+export const ensureStatic = "navigation";
+
+// Next 16.4 still misclassifies redirect() during instant validation.
+// Keep its HTTP response; ensureStatic independently validates prerendering.
+export const instant = false;

package/compiler-assets/nextjs/shims/site-fenced-code-block.tsx

@@ -0,0 +1,34 @@
+import { CodeBlock } from "@components/mdx/code-block";
+import {
+  type ComponentPropsWithoutRef,
+  isValidElement,
+  type ReactNode,
+} from "react";
+
+type CodeChildProps = {
+  children?: ReactNode;
+  className?: string;
+  title?: string;
+};
+
+export function FencedCodeBlock({
+  children,
+  title,
+  ...props
+}: ComponentPropsWithoutRef<"pre">) {
+  const codeElement = isValidElement<CodeChildProps>(children)
+    ? children
+    : null;
+  const code = codeElement?.props.children ?? children;
+  const language = /(?:^|\s)language-([^\s]+)/.exec(
+    codeElement?.props.className ?? "",
+  )?.[1];
+  return (
+    <CodeBlock
+      {...props}
+      code={typeof code === "string" ? code : ""}
+      language={language}
+      title={title ?? codeElement?.props.title}
+    />
+  );
+}

package/compiler-assets/nextjs/shims/site-heading-level.tsx

@@ -0,0 +1,14 @@
+import type { ComponentType, HTMLAttributes } from "react";
+
+type HeadingTag = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+
+export function headingWithLevel(
+  Heading: ComponentType<
+    { as: HeadingTag } & HTMLAttributes<HTMLHeadingElement>
+  >,
+  as: HeadingTag,
+) {
+  return function HeadingLevel(props: HTMLAttributes<HTMLHeadingElement>) {
+    return <Heading as={as} {...props} />;
+  };
+}

package/compiler-assets/nextjs/shims/site-mdx-components.tsx

@@ -0,0 +1,100 @@
+import type { MDXComponents } from "@publish.os/nextjs/mdx/mdx";
+import {
+  Figure as PublishOsFigure,
+  Image as PublishOsImage,
+  Link as PublishOsLink,
+  Video as PublishOsVideo,
+} from "@publish.os/nextjs/mdx/mdx";
+import { mediaManifest } from "@source/.publishos/media-manifest.generated";
+import {
+  mediaOverrides,
+  sourceMdxComponents,
+} from "@source/_internal/mdx-source-components.generated";
+import type { ComponentProps } from "react";
+
+type ImageProps = ComponentProps<typeof PublishOsImage>;
+type LinkProps = ComponentProps<typeof PublishOsLink>;
+type VideoProps = ComponentProps<typeof PublishOsVideo>;
+type ResolvedMediaAsset = {
+  aspect?: number;
+  height?: number;
+  intrinsicHeight?: number;
+  intrinsicWidth?: number;
+  mediaType: string;
+  mimeType?: string;
+  optimized?: boolean;
+  outputPath: string;
+  width?: number;
+};
+
+const sourceMedia = mediaOverrides as MDXComponents;
+const LinkComponent = (sourceMedia.link ??
+  PublishOsLink) as typeof PublishOsLink;
+const ImageComponent = (sourceMedia.image ??
+  PublishOsImage) as typeof PublishOsImage;
+const VideoComponent = (sourceMedia.video ??
+  PublishOsVideo) as typeof PublishOsVideo;
+const FigureComponent = (sourceMedia.figure ??
+  PublishOsFigure) as typeof PublishOsFigure;
+
+function resolveMediaAsset(src: unknown): ResolvedMediaAsset | undefined {
+  if (typeof src !== "string" || !src.startsWith("/assets/")) return undefined;
+  return mediaManifest.assets[src as keyof typeof mediaManifest.assets] as
+    | ResolvedMediaAsset
+    | undefined;
+}
+
+function Link(props: LinkProps) {
+  const asset = resolveMediaAsset(props.href);
+  const shouldDownload =
+    asset?.mediaType === "document" || asset?.mediaType === "file";
+  return (
+    <LinkComponent
+      {...props}
+      download={props.download ?? (shouldDownload ? "" : undefined)}
+      href={asset?.outputPath ?? props.href}
+    />
+  );
+}
+
+function Image(props: ImageProps) {
+  const asset = resolveMediaAsset(props.src);
+  return (
+    <ImageComponent
+      {...props}
+      aspect={props.aspect ?? asset?.aspect}
+      height={props.height ?? asset?.height}
+      intrinsicHeight={asset?.intrinsicHeight ?? asset?.height}
+      intrinsicWidth={asset?.intrinsicWidth ?? asset?.width}
+      optimized={asset?.optimized}
+      src={asset?.outputPath ?? props.src}
+      width={props.width ?? asset?.width}
+    />
+  );
+}
+
+function Video(props: VideoProps) {
+  const asset = resolveMediaAsset(props.src);
+  const poster = resolveMediaAsset(props.poster);
+  return (
+    <VideoComponent
+      {...props}
+      height={props.height ?? asset?.height}
+      poster={poster?.outputPath ?? props.poster}
+      src={asset?.outputPath ?? props.src}
+      width={props.width ?? asset?.width}
+    />
+  );
+}
+
+export const mdxComponents = {
+  ...sourceMdxComponents,
+  a: Link,
+  Link,
+  img: Image,
+  Image,
+  figure: FigureComponent,
+  Figure: FigureComponent,
+  video: Video,
+  Video,
+} satisfies MDXComponents;