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

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

@@ -46,6 +46,57 @@
     0 0.08em 0.17em color-mix(in oklab, black 85%, transparent);
 }
 
+@media (scripting: none) {
+  .publishos-mod-key-slot {
+    display: none;
+  }
+}
+
+.code-block-highlight :is(.shiki, .shiki span) {
+  color: var(--shiki-light, inherit);
+}
+
+.dark .code-block-highlight :is(.shiki, .shiki span) {
+  color: var(--shiki-dark, inherit);
+}
+
+@media (scripting: none) {
+  [data-slot="copy-code-button"] {
+    display: none;
+  }
+}
+
+/* Ordinary prose follows the note; nested components keep their own tokens. */
+@layer components {
+  :where([data-slot="callout-content"]) {
+    --typography-body-foreground: currentColor;
+    --typography-quote-foreground: currentColor;
+  }
+
+  :where([data-slot="callout-content"] > ul) {
+    list-style-type: disc;
+  }
+
+  :where([data-slot="callout-content"] > ol) {
+    list-style-type: decimal;
+    padding-inline-start: 1.5em;
+  }
+}
+
+@layer utilities {
+  [data-slot="callout-content"] > :is(p, ul, ol) {
+    margin-block: 0.5em;
+  }
+
+  [data-slot="callout-content"] > :first-child {
+    margin-block-start: 0;
+  }
+
+  [data-slot="callout-content"] > :last-child {
+    margin-block-end: 0;
+  }
+}
+
 @layer components {
   code,
   kbd,
@@ -333,20 +384,6 @@
       padding-inline-start: 1.625em;
     }
 
-    & :where(code):not(.not-markdown-prose):not(:where(.not-markdown-prose *)) {
-      box-sizing: border-box;
-      height: fit-content;
-      border: 1px solid var(--stroke-2);
-      border-radius: var(--radius-inline-code);
-      background-color: var(--surface-2);
-      color: var(--foreground-1);
-      font-family: var(--font-mono);
-      font-size: 0.95em;
-      font-weight: 400;
-      line-height: 1.25;
-      padding: 0.15em 0.35em;
-    }
-
     & :where(code):not(:where(pre code))::before,
     & :where(code):not(:where(pre code))::after {
       content: none;
@@ -403,60 +440,6 @@
       content: none;
     }
 
-    & :where(kbd):not(.not-markdown-prose):not(:where(.not-markdown-prose *)) {
-      position: relative;
-      top: -0.03em;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      box-sizing: border-box;
-      height: fit-content;
-      min-width: 1.75em;
-      flex-shrink: 0;
-      user-select: none;
-      border-radius: max(var(--radius-kbd), 1px);
-      background-color: var(--surface-1);
-      box-shadow: var(--kbd-shadow);
-      color: var(--foreground-1);
-      font-family: var(--font-main);
-      font-size: 0.875rem;
-      font-weight: 400;
-      line-height: 1.7em;
-      padding: 0.05em 0.5em 0.1em;
-      vertical-align: text-top;
-      white-space: nowrap;
-      word-spacing: -0.1em;
-      transition-duration: 150ms;
-      transition-property: background-color, box-shadow;
-    }
-
-    &
-      :where(kbd):not(.not-markdown-prose):not(
-        :where(.not-markdown-prose *)
-      ):hover {
-      background-color: var(--surface-page);
-      box-shadow:
-        var(--kbd-shadow),
-        0 0 0 0.05em color-mix(in oklab, var(--stroke-2) 50%, transparent);
-    }
-
-    &
-      :where(kbd):not(.not-markdown-prose):not(
-        :where(.not-markdown-prose *)
-      ):focus-visible {
-      outline: 2px solid var(--focus-stroke);
-    }
-
-    &
-      :where(kbd):not(.not-markdown-prose):not(
-        :where(.not-markdown-prose *)
-      ):active {
-      padding-top: 0.1em;
-      padding-bottom: 0.05em;
-      background-color: var(--surface-2);
-      box-shadow: var(--kbd-shadow-active);
-    }
-
     &
       :where(blockquote):not(.not-markdown-prose):not(
         :where(.not-markdown-prose *)

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/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-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,21 +1,37 @@
+import { PublishOSThemeScope } from "@app/publish-os-theme-provider";
 import manifest from "@manifest";
 import {
   createLeafMetadata,
   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 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 = {
   group: __PUBLISHOS_GROUP_KEY__,
   manifest,
+  markdownArtifactManifest,
   ogManifest,
   Leaf,
   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

@@ -1,87 +1,23 @@
+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 { ogManifest } from "@source/.publishos/og-manifest.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 &&
   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)
-    : 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 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,
-        },
-      }
+  : siteOrigin
+    ? new URL(siteOrigin)
     : undefined;
 const agentDirectiveStyle = {
   border: 0,
@@ -103,7 +39,6 @@ export const metadata: Metadata = {
     template: `%s · ${manifest.site.name}`,
   },
   ...(siteDescription ? { description: siteDescription } : {}),
-  ...(rootSocialMetadata ?? {}),
   ...(metadataIcons ? { icons: metadataIcons } : {}),
   alternates: {
     types: {
@@ -114,21 +49,20 @@ 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">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}>
-            {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} />
+      ))}
+    </>
+  );
+}