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

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

@@ -3,7 +3,7 @@ import type { LayoutProps } from "@publish.os/nextjs/types";
 import { log } from "@source/_internal/logger";
 
 export default function GroupLayout(props: LayoutProps) {
-  const { children, currentPath, group, node, site, tree } = props;
+  const { children, currentPath, group, node, tree } = props;
   log.debug("[default:group-layout]", { currentPath, group });
 
   return (
@@ -18,10 +18,6 @@ export default function GroupLayout(props: LayoutProps) {
       >
         {children}
       </main>
-      <aside
-        aria-label={`${site.name} secondary navigation`}
-        className="hidden bg-surface-1 xl:block"
-      />
     </section>
   );
 }

package/compiler-assets/nextjs/defaults/group/page.tsx

@@ -1,5 +1,6 @@
-import { AgentActions } from "@components/blocks/AgentActions";
+import { AgentActions } from "@components/blocks/agent-actions";
 import { NextPrev } from "@components/blocks/next-prev";
+import { Toc } from "@components/blocks/toc";
 import { MDX } from "@publish.os/nextjs/mdx";
 import type { PageProps } from "@publish.os/nextjs/types";
 import { log } from "@source/_internal/logger";
@@ -14,28 +15,36 @@ export default async function ContentPage(props: PageProps) {
         : undefined;
 
   return (
-    <div className="flex min-h-[calc(100vh-var(--layout-global-nav-height))] min-w-0 flex-1 flex-col px-6 py-10 text-foreground-1 lg:px-10 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="mx-auto flex w-full max-w-(--layout-content-max-width) flex-1 flex-col">
-        <article className="min-h-0 min-w-0 flex-1">
-          <h1 className="text-3xl font-semibold tracking-tight text-foreground-1">
-            {props.page.title}
-          </h1>
-          <AgentActions
-            className="mt-4"
-            markdown={props.page.body}
-            pagePath={props.currentPath}
-            siteUrl={props.site.origin}
-            sourceUrl={sourceUrl}
+    <div className="relative flex min-h-[calc(100vh-var(--layout-global-nav-height))] min-w-0 flex-1 flex-col text-foreground-1 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))]">
+      <Toc
+        content={props.page.body}
+        desktopClassName="xl:absolute xl:inset-y-0 xl:start-full xl:w-(--layout-toc-width) xl:px-3 xl:py-10"
+        desktopListClassName="xl:sticky xl:top-[calc(var(--layout-global-nav-height)_+_1.5rem)] xl:max-h-[calc(100dvh-var(--layout-global-nav-height)-3rem)] xl:overflow-y-auto supports-[top:anchor-size(--global-navbar_height)]:xl:top-[calc(anchor-size(--global-navbar_height,3.5rem)_+_1.5rem)] supports-[top:anchor-size(--global-navbar_height)]:xl:max-h-[calc(100dvh-anchor-size(--global-navbar_height,3.5rem)-3rem)]"
+        mobileQuery="(max-width: 1279px)"
+      />
+      <div className="flex min-w-0 flex-1 flex-col px-6 py-10 lg:px-10">
+        <div className="mx-auto flex w-full max-w-(--layout-content-max-width) flex-1 flex-col">
+          <article className="min-h-0 min-w-0 flex-1">
+            <h1 className="text-3xl font-semibold tracking-tight text-foreground-1">
+              {props.page.title}
+            </h1>
+            <AgentActions
+              className="mt-4"
+              markdownRevision={props.markdownRevision}
+              pagePath={props.currentPath}
+              siteUrl={props.site.origin}
+              sourceUrl={sourceUrl}
+            />
+            <div className="mt-6">
+              <MDX page={props.page} />
+            </div>
+          </article>
+          <NextPrev
+            className="mt-auto pt-12"
+            currentPath={props.currentPath}
+            tree={props.tree}
           />
-          <div className="mt-6">
-            <MDX page={props.page} />
-          </div>
-        </article>
-        <NextPrev
-          className="mt-auto pt-12"
-          currentPath={props.currentPath}
-          tree={props.tree}
-        />
+        </div>
       </div>
     </div>
   );

package/compiler-assets/nextjs/defaults/project/next.config.mjs

@@ -4,37 +4,46 @@ import { dirname } from "node:path";
 import { fileURLToPath } from "node:url";
 
 const projectRoot = dirname(fileURLToPath(import.meta.url));
-const ASSET_PREFIX = "__PUBLISHOS_ASSET_PREFIX__";
+const INTERNAL_PREFIX = "__PUBLISHOS_INTERNAL_PREFIX__";
+const SOURCE_ASSET_PREFIX = "__PUBLISHOS_SOURCE_ASSET_PREFIX__";
 const IMAGE_OPTIMIZER_PATH = "__PUBLISHOS_IMAGE_PATH__";
 const NEXT_IMAGE_OPTIMIZER_PATH = "__PUBLISHOS_NEXT_IMAGE_PATH__";
 
 /** @type {import("next").NextConfig} */
 export default {
-  assetPrefix: ASSET_PREFIX,
+  assetPrefix: INTERNAL_PREFIX,
   cacheComponents: true,
+  // Preserve loopback origins so internal rewrites do not proxy back into this app.
+  skipProxyUrlNormalize: true,
+  experimental: { globalNotFound: true },
   partialPrefetching: false,
+  // macOS native notifications can delay preview updates. Use Next's fallback.
+  watchOptions:
+    process.platform === "darwin" ? { pollIntervalMs: 1_000 } : undefined,
   // Relocating Shiki as an external loses its pnpm-owned dependencies.
   transpilePackages: ["shiki"],
   turbopack: {
     resolveAlias: {
       "@publish.os/nextjs/mdx": "./source/.publishos/mdx.tsx",
+      "next/image": "@publish.os/nextjs/kernel/components/next-image",
+      ...__PUBLISHOS_COMPONENT_ALIASES__,
     },
     root: projectRoot,
   },
+  webpack(config) {
+    config.resolve.alias["next/image"] =
+      "@publish.os/nextjs/kernel/components/next-image";
+    return config;
+  },
   images: {
     dangerouslyAllowSVG: false,
     deviceSizes: [640, 828, 1080, 1200, 1600, 1920, 2560, 3840],
     formats: ["image/webp"],
     imageSizes: [32, 48, 64, 96, 128, 256, 384],
     path: IMAGE_OPTIMIZER_PATH,
-    localPatterns: [
-      {
-        pathname: `${ASSET_PREFIX}/_publishos/assets/**/images/**`,
-        search: "",
-      },
-      { pathname: `${ASSET_PREFIX}/assets/images/**`, search: "" },
-    ],
-    minimumCacheTTL: 2678400,
+    localPatterns: [{ pathname: `${SOURCE_ASSET_PREFIX}/**` }],
+    remotePatterns: [],
+    minimumCacheTTL: 0,
     qualities: [50, 60, 75, 85, 95, 100],
   },
   async rewrites() {

package/compiler-assets/nextjs/defaults/project/tsconfig.json.template

@@ -4,6 +4,7 @@
     "lib": ["dom", "dom.iterable", "esnext"],
     "module": "esnext",
     "moduleResolution": "bundler",
+    "jsxImportSource": "@publish.os/nextjs",
     "jsx": "react-jsx",
     "allowJs": true,
     "strict": true,
@@ -17,6 +18,15 @@
     "paths": {
       "@app/*": ["./app/*"],
       "@publish.os/nextjs/mdx": ["./source/.publishos/mdx"],
+      "@publish.os/nextjs/components/ui/button": [
+        "./node_modules/@publish.os/nextjs/dist/kernel/components/ui/button"
+      ],
+      "@publish.os/nextjs/components/blocks/toc": [
+        "./node_modules/@publish.os/nextjs/dist/kernel/components/blocks/toc"
+      ],
+      "@publish.os/nextjs/components/blocks/agent-actions": [
+        "./node_modules/@publish.os/nextjs/dist/kernel/components/blocks/agent-actions"
+      ],
       "@components/*": [
         "./source/components/*",
         "./node_modules/@publish.os/nextjs/dist/kernel/components/*"

package/compiler-assets/nextjs/defaults/root/css/components/code-block.css

@@ -0,0 +1,18 @@
+[data-slot="copy-code-button"] {
+  transition: opacity 150ms ease-out;
+}
+
+@media (hover: hover) and (pointer: fine) and (any-pointer: fine) and (
+    any-hover: hover
+  ) and (not (any-pointer: coarse)) {
+  [data-slot="code-block"]:not(:hover):not(:focus-within)
+    [data-slot="copy-code-button"]:not([data-copied="true"]) {
+    opacity: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-slot="copy-code-button"] {
+    transition: none;
+  }
+}

package/compiler-assets/nextjs/shims/document.tsx

@@ -0,0 +1,38 @@
+import { Providers } from "@app/providers";
+import manifest from "@manifest";
+import { preloadRootFonts, rootFontClassName } from "@source/.fonts.generated";
+import RootLayout from "@source/layout";
+import { type ComponentType, Fragment, type ReactNode } from "react";
+import "@source/.fonts.generated.css";
+import "@app/globals.css";
+
+/** Shared document and authored shell for successful pages and routing-level 404s. */
+export default function SiteDocument({
+  children,
+  head,
+  beforeShell,
+  bodyWrapper: BodyWrapper = Fragment,
+}: {
+  children: ReactNode;
+  head?: ReactNode;
+  beforeShell?: ReactNode;
+  bodyWrapper?: ComponentType<{ children: ReactNode }>;
+}) {
+  preloadRootFonts();
+  return (
+    <html className={rootFontClassName} lang="en" suppressHydrationWarning>
+      {/* biome-ignore lint/style/noHeadElement: global-not-found owns a full document outside the Next metadata layout tree. */}
+      {head ? <head>{head}</head> : null}
+      <body className="publish-os-app-root">
+        {beforeShell}
+        <BodyWrapper>
+          <Providers>
+            <RootLayout site={manifest.site} tree={manifest.tree}>
+              {children}
+            </RootLayout>
+          </Providers>
+        </BodyWrapper>
+      </body>
+    </html>
+  );
+}

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

@@ -5,6 +5,7 @@ import {
   createLeafPage,
   createLeafStaticParams,
 } from "@publish.os/nextjs/kernel/routes/pages/leaf";
+import { markdownArtifactManifest } from "@source/.publishos/markdown-index.generated";
 import { ogManifest } from "@source/.publishos/og-manifest.generated";
 import { groupThemes } from "@source/.theme.generated";
 import Leaf from "@source/__PUBLISHOS_OWNER_KEY__/page";
@@ -13,6 +14,7 @@ import { PoweredByFooter } from "@source/_internal/powered-by-footer.generated";
 const route = {
   group: __PUBLISHOS_GROUP_KEY__,
   manifest,
+  markdownArtifactManifest,
   ogManifest,
   Leaf,
   PoweredByFooter,

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

@@ -1,12 +1,8 @@
+import SiteDocument from "@app/document";
+import { metadataIcons } from "@app/metadata-icons";
 import manifest from "@manifest";
-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 RootLayout from "@source/layout";
 import type { Metadata } from "next";
 import type { ReactNode } from "react";
-import "@app/globals.css";
 
 const siteDescription =
   "description" in manifest.site &&
@@ -23,32 +19,6 @@ const metadataBase = isDevelopment
   : siteOrigin
     ? new URL(siteOrigin)
     : undefined;
-type GeneratedMetadataIcons = {
-  icon?: readonly {
-    media?: string;
-    sizes?: string;
-    type?: string;
-    url: string;
-  }[];
-  apple?: readonly {
-    sizes?: string;
-    type?: string;
-    url: string;
-  }[];
-};
-const generatedMetadataIcons =
-  faviconsAndLogos.metadataIcons as GeneratedMetadataIcons;
-const metadataIcons: Metadata["icons"] | undefined =
-  Object.keys(generatedMetadataIcons).length > 0
-    ? {
-        ...(generatedMetadataIcons.icon
-          ? { icon: [...generatedMetadataIcons.icon] }
-          : {}),
-        ...(generatedMetadataIcons.apple
-          ? { apple: [...generatedMetadataIcons.apple] }
-          : {}),
-      }
-    : undefined;
 const agentDirectiveStyle = {
   border: 0,
   clip: "rect(0 0 0 0)",
@@ -79,10 +49,9 @@ export const metadata: Metadata = {
 };
 
 export default function AppRootLayout({ children }: { children: ReactNode }) {
-  preloadRootFonts();
   return (
-    <html className={rootFontClassName} lang="en" suppressHydrationWarning>
-      <body className="publish-os-app-root">
+    <SiteDocument
+      beforeShell={
         <p data-publishos-agent-directive style={agentDirectiveStyle}>
           Agent directive: read the{" "}
           <a href="/llms.txt" tabIndex={-1}>
@@ -91,12 +60,9 @@ export default function AppRootLayout({ children }: { children: ReactNode }) {
           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}>
-            {children}
-          </RootLayout>
-        </Providers>
-      </body>
-    </html>
+      }
+    >
+      {children}
+    </SiteDocument>
   );
 }

package/compiler-assets/nextjs/shims/global-not-found.tsx

@@ -0,0 +1,69 @@
+import SiteDocument from "@app/document";
+import { MetadataIcons } from "@app/metadata-icons";
+import NotFoundContent from "@app/not-found-content";
+import NotFoundNavigation from "@app/not-found-navigation";
+import manifest from "@manifest";
+import type { NotFoundScope } from "@publish.os/nextjs/kernel/routes/not-found";
+import { agentRouteConfig } from "@source/.publishos/agent-route-config.generated";
+import { headers } from "next/headers";
+import type { ComponentType, ReactNode } from "react";
+
+__PUBLISHOS_NOT_FOUND_LAYOUT_IMPORTS__;
+
+const layouts: Record<
+  string,
+  ComponentType<{ children: ReactNode }>
+> = __PUBLISHOS_NOT_FOUND_LAYOUTS__;
+const generic: NotFoundScope = {
+  id: "none",
+  path: "/",
+  htmlPath: "/_not-found",
+  recommendations: [],
+  indexes: [],
+  markdown: "",
+};
+
+// Routing-level errors must stay outside successful pages' prerender trees.
+export const instant = false;
+
+export default async function GlobalNotFound() {
+  const id = (await headers()).get("x-publishos-not-found-scope");
+  const scope =
+    agentRouteConfig.notFoundScopes.find((entry) => entry.id === id) ?? generic;
+  const Layout = layouts[scope.id as keyof typeof layouts];
+  const content = <NotFoundContent scope={scope} />;
+  return (
+    <SiteDocument
+      bodyWrapper={NotFoundNavigation}
+      head={
+        <>
+          <title>{`Page not found · ${manifest.site.name}`}</title>
+          <meta name="robots" content="noindex" />
+          <MetadataIcons />
+          {agentRouteConfig.enabled && agentRouteConfig.discoveryHeaders ? (
+            <>
+              {scope.describedBy ? (
+                <link href={scope.describedBy} rel="describedby" />
+              ) : null}
+              {scope.indexes.map((link) => (
+                <link href={link.href} key={link.href} rel="related" />
+              ))}
+            </>
+          ) : null}
+        </>
+      }
+    >
+      {Layout ? (
+        <Layout>{content}</Layout>
+      ) : (
+        <main
+          className="flex min-h-0 flex-1 flex-col"
+          id="main-content"
+          tabIndex={-1}
+        >
+          {content}
+        </main>
+      )}
+    </SiteDocument>
+  );
+}

package/compiler-assets/nextjs/shims/markdown-route.ts

@@ -1,4 +1,5 @@
 import { createMarkdownRouteHandlers } from "@publish.os/nextjs/kernel/routes/agent/markdown";
+import { agentRouteConfig } from "@source/.publishos/agent-route-config.generated";
 import {
   loadMarkdownArtifact,
   markdownArtifactManifest,
@@ -11,6 +12,7 @@ const handlers = createMarkdownRouteHandlers(
   },
   {
     discoveryLinks: __PUBLISHOS_MARKDOWN_DISCOVERY_LINKS__,
+    notFoundScopes: agentRouteConfig.notFoundScopes,
   },
 );
 

package/compiler-assets/nextjs/shims/metadata-icons.tsx

@@ -0,0 +1,39 @@
+import { faviconsAndLogos } from "@source/.publishos/favicons-and-logos.generated";
+import type { Metadata } from "next";
+
+type GeneratedMetadataIcons = {
+  icon?: readonly {
+    media?: string;
+    sizes?: string;
+    type?: string;
+    url: string;
+  }[];
+  apple?: readonly {
+    sizes?: string;
+    type?: string;
+    url: string;
+  }[];
+};
+
+const generated = faviconsAndLogos.metadataIcons as GeneratedMetadataIcons;
+
+export const metadataIcons = Object.keys(generated).length
+  ? ({
+      ...(generated.icon ? { icon: [...generated.icon] } : {}),
+      ...(generated.apple ? { apple: [...generated.apple] } : {}),
+    } satisfies Metadata["icons"])
+  : undefined;
+
+/** Global errors bypass Next's layout metadata but use the same resolved icons. */
+export function MetadataIcons() {
+  return (
+    <>
+      {metadataIcons?.icon?.map(({ url, ...attributes }) => (
+        <link href={url} key={url} rel="icon" {...attributes} />
+      ))}
+      {metadataIcons?.apple?.map(({ url, ...attributes }) => (
+        <link href={url} key={url} rel="apple-touch-icon" {...attributes} />
+      ))}
+    </>
+  );
+}

package/compiler-assets/nextjs/shims/not-found-content.tsx

@@ -0,0 +1,53 @@
+import { Link } from "@components/ui/link";
+import type { NotFoundScope } from "@publish.os/nextjs/kernel/routes/not-found";
+
+export default function NotFoundContent({ scope }: { scope: NotFoundScope }) {
+  const sections = [
+    { title: "Recommendations", links: scope.recommendations },
+    { title: "For crawlers and agents", links: scope.indexes },
+  ];
+  return (
+    <section
+      className="mx-auto flex w-full max-w-xl flex-1 flex-col items-center justify-center px-6 py-16 font-main sm:px-8 sm:py-24"
+      data-publishos-not-found={scope.id}
+    >
+      <h1 className="text-center font-mono text-8xl leading-none font-medium tracking-tight text-foreground-1 sm:text-9xl">
+        404<span className="sr-only"> — Page not found</span>
+      </h1>
+      <p className="mt-6 max-w-md text-center text-sm leading-6 text-pretty text-foreground-3">
+        This page does not exist. Please check the URL and try again.
+      </p>
+      <div className="mt-10 w-full space-y-8">
+        {sections.map(({ title, links }) =>
+          links.length ? (
+            <section aria-label={title} key={title}>
+              <h2 className="text-xs font-medium text-foreground-3">{title}</h2>
+              <ul className="mt-2 space-y-0">
+                {links.map((link) => (
+                  <li className="flex items-baseline gap-3" key={link.href}>
+                    <span
+                      aria-hidden="true"
+                      className="shrink-0 text-sm text-foreground-3"
+                    >
+                      -
+                    </span>
+                    <Link
+                      className="inline-flex min-h-10 min-w-0 max-w-full items-center py-1 text-start wrap-anywhere"
+                      href={link.href}
+                      prefetch={false}
+                      size="sm"
+                      target="_self"
+                      variant="link.inline"
+                    >
+                      {link.title}
+                    </Link>
+                  </li>
+                ))}
+              </ul>
+            </section>
+          ) : null,
+        )}
+      </div>
+    </section>
+  );
+}

package/compiler-assets/nextjs/shims/not-found-navigation.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import type { MouseEvent, ReactNode } from "react";
+
+/** Next's routing-level error document has no app-router tree to navigate from. */
+export default function NotFoundNavigation({
+  children,
+}: {
+  children: ReactNode;
+}) {
+  function navigate(event: MouseEvent<HTMLDivElement>) {
+    if (
+      event.defaultPrevented ||
+      event.button !== 0 ||
+      event.altKey ||
+      event.ctrlKey ||
+      event.metaKey ||
+      event.shiftKey
+    )
+      return;
+
+    const target = event.target as Node;
+    const element =
+      target.nodeType === 1 ? (target as Element) : target.parentElement;
+    const link = element?.closest<HTMLAnchorElement>("a[href]");
+    const view = event.currentTarget.ownerDocument.defaultView;
+    if (
+      !link ||
+      !view ||
+      link.hasAttribute("download") ||
+      (link.target && link.target !== "_self")
+    )
+      return;
+
+    let destination: URL;
+    try {
+      destination = new URL(link.href, view.location.href);
+    } catch {
+      return;
+    }
+    if (
+      !["http:", "https:"].includes(destination.protocol) ||
+      destination.origin !== view.location.origin ||
+      (destination.pathname === view.location.pathname &&
+        destination.search === view.location.search &&
+        destination.hash)
+    )
+      return;
+
+    event.preventDefault();
+    event.stopPropagation();
+    view.location.assign(destination.href);
+  }
+
+  return (
+    <div className="contents" onClickCapture={navigate}>
+      {children}
+    </div>
+  );
+}