@publish.os/nextjs 0.0.1-alpha.5 → 0.0.1-alpha.7

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

@@ -0,0 +1,191 @@
+@theme inline {
+  --font-main: var(--font-main);
+  --font-sans: var(--font-main);
+  --font-mono: var(--font-mono);
+
+  --color-surface-page: var(--surface-page);
+  --color-surface-1: var(--surface-1);
+  --color-surface-2: var(--surface-2);
+  --color-surface-3: var(--surface-3);
+  --color-surface-4: var(--surface-4);
+  --color-surface-hover: var(--surface-hover);
+  --color-surface-active: var(--surface-active);
+  --color-foreground-1: var(--foreground-1);
+  --color-foreground-2: var(--foreground-2);
+  --color-foreground-3: var(--foreground-3);
+  --color-foreground-4: var(--foreground-4);
+  --color-stroke-1: var(--stroke-1);
+  --color-stroke-2: var(--stroke-2);
+  --color-stroke-3: var(--stroke-3);
+  --color-stroke-4: var(--stroke-4);
+  --color-backdrop: var(--backdrop);
+  --color-focus-stroke: var(--focus-stroke);
+
+  --color-accent-1: var(--accent-1);
+  --color-accent-1-foreground: var(--accent-1-foreground);
+  --color-accent-1-stroke: var(--accent-1-stroke);
+  --color-accent-1-hover: var(--accent-1-hover);
+  --color-accent-1-active: var(--accent-1-active);
+  --color-accent-2: var(--accent-2);
+  --color-accent-2-foreground: var(--accent-2-foreground);
+  --color-accent-2-stroke: var(--accent-2-stroke);
+  --color-accent-2-hover: var(--accent-2-hover);
+  --color-accent-2-active: var(--accent-2-active);
+  --color-accent-3: var(--accent-3);
+  --color-accent-3-foreground: var(--accent-3-foreground);
+  --color-accent-3-stroke: var(--accent-3-stroke);
+  --color-accent-3-hover: var(--accent-3-hover);
+  --color-accent-3-active: var(--accent-3-active);
+  --color-accent-4: var(--accent-4);
+  --color-accent-4-foreground: var(--accent-4-foreground);
+  --color-accent-4-stroke: var(--accent-4-stroke);
+  --color-accent-4-hover: var(--accent-4-hover);
+  --color-accent-4-active: var(--accent-4-active);
+
+  --color-selection-surface: var(--selection-surface);
+  --color-selection-foreground: var(--selection-foreground);
+  --color-progress-track-surface: var(--progress-track-surface);
+  --color-progress-indicator-surface: var(--progress-indicator-surface);
+  --color-media-backdrop: var(--media-backdrop);
+  --color-media-surface: var(--media-surface);
+  --color-media-preview-backdrop: var(--media-preview-backdrop);
+  --color-media-preview-backdrop-hover: var(--media-preview-backdrop-hover);
+  --color-media-control-surface: var(--media-control-surface);
+  --color-media-control-foreground: var(--media-control-foreground);
+  --color-media-control-stroke: var(--media-control-stroke);
+
+  --color-success-100: var(--success-100);
+  --color-success-200: var(--success-200);
+  --color-success-300: var(--success-300);
+  --color-success-400: var(--success-400);
+  --color-success-500: var(--success-500);
+  --color-success-600: var(--success-600);
+  --color-success-700: var(--success-700);
+  --color-success-800: var(--success-800);
+  --color-success-900: var(--success-900);
+  --color-success-1000: var(--success-1000);
+  --color-success-1100: var(--success-1100);
+  --color-success-1200: var(--success-1200);
+  --color-warning-100: var(--warning-100);
+  --color-warning-200: var(--warning-200);
+  --color-warning-300: var(--warning-300);
+  --color-warning-400: var(--warning-400);
+  --color-warning-500: var(--warning-500);
+  --color-warning-600: var(--warning-600);
+  --color-warning-700: var(--warning-700);
+  --color-warning-800: var(--warning-800);
+  --color-warning-900: var(--warning-900);
+  --color-warning-1000: var(--warning-1000);
+  --color-warning-1100: var(--warning-1100);
+  --color-warning-1200: var(--warning-1200);
+  --color-danger-100: var(--danger-100);
+  --color-danger-200: var(--danger-200);
+  --color-danger-300: var(--danger-300);
+  --color-danger-400: var(--danger-400);
+  --color-danger-500: var(--danger-500);
+  --color-danger-600: var(--danger-600);
+  --color-danger-700: var(--danger-700);
+  --color-danger-800: var(--danger-800);
+  --color-danger-900: var(--danger-900);
+  --color-danger-1000: var(--danger-1000);
+  --color-danger-1100: var(--danger-1100);
+  --color-danger-1200: var(--danger-1200);
+  --color-info-100: var(--info-100);
+  --color-info-200: var(--info-200);
+  --color-info-300: var(--info-300);
+  --color-info-400: var(--info-400);
+  --color-info-500: var(--info-500);
+  --color-info-600: var(--info-600);
+  --color-info-700: var(--info-700);
+  --color-info-800: var(--info-800);
+  --color-info-900: var(--info-900);
+  --color-info-1000: var(--info-1000);
+  --color-info-1100: var(--info-1100);
+  --color-info-1200: var(--info-1200);
+
+  --color-floating-surface-1: var(--floating-surface-1);
+  --color-floating-surface-2: var(--floating-surface-2);
+  --color-floating-surface-3: var(--floating-surface-3);
+  --color-floating-surface-4: var(--floating-surface-4);
+  --color-floating-foreground-1: var(--floating-foreground-1);
+  --color-floating-foreground-2: var(--floating-foreground-2);
+  --color-floating-foreground-3: var(--floating-foreground-3);
+  --color-floating-foreground-4: var(--floating-foreground-4);
+  --color-floating-stroke-1: var(--floating-stroke-1);
+  --color-floating-stroke-2: var(--floating-stroke-2);
+  --color-floating-stroke-3: var(--floating-stroke-3);
+  --color-floating-stroke-4: var(--floating-stroke-4);
+
+  --radius-avatar: var(--radius-avatar);
+  --radius-button: var(--radius-button);
+  --radius-callout: var(--radius-callout);
+  --radius-card: var(--radius-card);
+  --radius-checkbox: var(--radius-checkbox);
+  --radius-codeblock: var(--radius-codeblock);
+  --radius-container: var(--radius-container);
+  --radius-dialog: var(--radius-dialog);
+  --radius-inline-code: var(--radius-inline-code);
+  --radius-input: var(--radius-input);
+  --radius-kbd: var(--radius-kbd);
+  --radius-media: var(--radius-media);
+  --radius-menu: var(--radius-menu);
+  --radius-panel: var(--radius-panel);
+  --radius-popup: var(--radius-popup);
+  --radius-radio: var(--radius-radio);
+  --radius-scrollarea: var(--radius-scrollarea);
+  --radius-scrollbar-thumb: var(--radius-scrollbar-thumb);
+  --radius-select: var(--radius-select);
+  --radius-spinner: var(--radius-spinner);
+  --radius-switch-thumb: var(--radius-switch-thumb);
+  --radius-switch-track: var(--radius-switch-track);
+  --radius-table: var(--radius-table);
+  --radius-tag: var(--radius-tag);
+  --radius-tooltip: var(--radius-tooltip);
+
+  --z-index-content: var(--z-content);
+  --z-index-nav: var(--z-nav);
+  --z-index-overlay: var(--z-overlay);
+  --z-index-modal: var(--z-modal);
+  --z-index-search: var(--z-search);
+  --z-index-toast: var(--z-toast);
+  --z-index-progress: var(--z-progress);
+
+  --spacing-layout-site-max-width: var(--layout-site-max-width);
+  --spacing-layout-sidebar-width: var(--layout-sidebar-width);
+  --spacing-layout-content-max-width: var(--layout-content-max-width);
+  --spacing-layout-toc-width: var(--layout-toc-width);
+}
+
+@layer base {
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  html {
+    min-height: 100%;
+    font-family: var(--font-main);
+    -webkit-font-smoothing: antialiased;
+  }
+
+  [data-theme-root] {
+    font-family: var(--font-main);
+  }
+
+  body {
+    min-height: 100%;
+    margin: 0;
+    background-color: var(--surface-page);
+    color: var(--foreground-2);
+  }
+
+  .publish-os-app-root {
+    isolation: isolate;
+  }
+
+  ::selection {
+    background-color: var(--selection-surface);
+    color: var(--selection-foreground);
+  }
+}

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

@@ -0,0 +1,19 @@
+import { Navbar } from "@components/blocks/navbar";
+import type { RootLayoutProps } from "@publish.os/nextjs/types";
+import { faviconsAndLogos } from "@source/.publishos/favicons-and-logos.generated";
+import { log } from "@source/_internal/logger";
+
+export default function DefaultRootLayout(props: RootLayoutProps) {
+  const { children, site, tree } = props;
+  log.debug("[default:root-layout]", {
+    site: site.name,
+    treeItems: tree.length,
+  });
+
+  return (
+    <div className="flex min-h-dvh flex-col bg-surface-2">
+      <Navbar logo={faviconsAndLogos.logo} site={site} tree={tree} />
+      <main className="flex w-full flex-1 flex-col">{children}</main>
+    </div>
+  );
+}

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

@@ -0,0 +1,61 @@
+import { Link } from "@components/ui/link";
+import type {
+  LinkNode,
+  RootPageProps,
+  SectionNode,
+  TreeNode,
+} from "@publish.os/nextjs/types";
+import { log } from "@source/_internal/logger";
+
+type RootNavNode = LinkNode | (SectionNode & { path: string });
+
+function rootNavNodes(nodes: TreeNode[]): RootNavNode[] {
+  return nodes.filter((node): node is RootNavNode => {
+    if (node.type === "link") return true;
+    return node.type === "section" && typeof node.path === "string";
+  });
+}
+
+export default function HomePage(props: RootPageProps) {
+  log.debug("[default:root-page]", props);
+  const { site, tree } = props;
+  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))]">
+      <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">
+        <div className="w-full max-w-md">
+          <p className="mb-6 text-sm font-semibold text-foreground-1">
+            {site.name}
+          </p>
+          <h1 className="max-w-sm text-balance text-xl font-semibold leading-7 tracking-tight text-foreground-1">
+            {site.description ??
+              "Documentation, guides, and reference content for this site."}
+          </h1>
+
+          {navNodes.length > 0 ? (
+            <nav aria-label="Site sections" className="mt-8">
+              <ul className="flex flex-col gap-2 text-sm">
+                {navNodes.map((node) => (
+                  <li key={node.id}>
+                    {node.type === "link" ? (
+                      <Link href={node.href} rightIcon="->" size="sm">
+                        {node.title}
+                      </Link>
+                    ) : (
+                      <Link href={node.path} rightIcon="->" size="sm">
+                        {node.title}
+                      </Link>
+                    )}
+                  </li>
+                ))}
+              </ul>
+            </nav>
+          ) : null}
+        </div>
+      </main>
+      <div className="hidden md:block" />
+    </section>
+  );
+}

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

@@ -0,0 +1,50 @@
+/* Complete monochrome defaults. Project theme.css loads after this file. */
+
+: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-800: #737373;
+  --gray-900: #525252;
+  --gray-1000: #404040;
+  --gray-1100: #262626;
+  --gray-1200: #000000;
+
+  --neutral-100: var(--gray-100);
+  --neutral-200: var(--gray-200);
+  --neutral-300: var(--gray-300);
+  --neutral-400: var(--gray-400);
+  --neutral-500: var(--gray-500);
+  --neutral-600: var(--gray-600);
+  --neutral-700: var(--gray-700);
+  --neutral-800: var(--gray-800);
+  --neutral-900: var(--gray-900);
+  --neutral-1000: var(--gray-1000);
+  --neutral-1100: var(--gray-1100);
+  --neutral-1200: var(--gray-1200);
+
+  --accent: var(--gray-1200);
+}
+
+.dark {
+  --gray-100: #000000;
+  --gray-200: #0a0a0a;
+  --gray-300: #171717;
+  --gray-400: #262626;
+  --gray-500: #404040;
+  --gray-600: #525252;
+  --gray-700: #737373;
+  --gray-800: #a3a3a3;
+  --gray-900: #d4d4d4;
+  --gray-1000: #e5e5e5;
+  --gray-1100: #f5f5f5;
+  --gray-1200: #ffffff;
+
+  --accent: var(--gray-1200);
+}

package/compiler-assets/nextjs/defaults/source/_internal/logger.ts

@@ -0,0 +1,21 @@
+const isDev = process.env.NODE_ENV !== "production";
+const isDebugEnabled = process.env.NEXT_PRIVATE_DEBUG_CACHE === "1";
+
+export const log = {
+  debug(...args: unknown[]) {
+    // biome-ignore lint/suspicious/noConsole: generated runtime logger intentionally writes render diagnostics.
+    if (isDev && isDebugEnabled) console.debug("[publish.os:debug]", ...args);
+  },
+  info(...args: unknown[]) {
+    // biome-ignore lint/suspicious/noConsole: generated runtime logger intentionally writes render diagnostics.
+    console.log("[publish.os]", ...args);
+  },
+  warn(...args: unknown[]) {
+    // biome-ignore lint/suspicious/noConsole: generated runtime logger intentionally writes render diagnostics.
+    console.warn("[publish.os:warn]", ...args);
+  },
+  error(...args: unknown[]) {
+    // biome-ignore lint/suspicious/noConsole: generated runtime logger intentionally writes render diagnostics.
+    console.error("[publish.os:error]", ...args);
+  },
+};

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

@@ -0,0 +1,19 @@
+import manifest from "@manifest";
+import { createGroupLayout } from "@publish.os/nextjs/kernel/routes/layouts/group";
+import type { ReactNode } from "react";
+
+__PUBLISHOS_THEME_IMPORTS__;
+__PUBLISHOS_LAYOUT_IMPORTS__;
+
+const route = {
+  group: __PUBLISHOS_GROUP_KEY__,
+  manifest,
+  layouts: [__PUBLISHOS_LAYOUTS__],
+} as const;
+
+const GroupLayout = createGroupLayout(route);
+
+export default function GeneratedGroupLayout(props: { children: ReactNode }) {
+  __PUBLISHOS_FONT_PRELOADS__;
+  return <GroupLayout {...props} />;
+}

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

@@ -0,0 +1,18 @@
+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 type { Metadata } from "next";
+
+const route = {
+  group: __PUBLISHOS_GROUP_KEY__,
+  manifest,
+  ogManifest,
+  IndexPage,
+} as const;
+
+export default createGroupPage(route);
+export const metadata: Metadata = createGroupMetadata(route);

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

@@ -0,0 +1,21 @@
+import manifest from "@manifest";
+import {
+  createLeafMetadata,
+  createLeafPage,
+  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 { PoweredByFooter } from "@source/_internal/powered-by-footer.generated";
+
+const route = {
+  group: __PUBLISHOS_GROUP_KEY__,
+  manifest,
+  ogManifest,
+  Leaf,
+  PoweredByFooter,
+} as const;
+
+export default createLeafPage(route);
+export const generateMetadata = createLeafMetadata(route);
+export const generateStaticParams = createLeafStaticParams(route);

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

@@ -0,0 +1,134 @@
+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
+    : 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,
+        },
+      }
+    : undefined;
+const agentDirectiveStyle = {
+  border: 0,
+  clip: "rect(0 0 0 0)",
+  clipPath: "inset(50%)",
+  height: "1px",
+  margin: "-1px",
+  overflow: "hidden",
+  padding: 0,
+  position: "absolute",
+  whiteSpace: "nowrap",
+  width: "1px",
+} as const;
+
+export const metadata: Metadata = {
+  ...(metadataBase ? { metadataBase } : {}),
+  title: {
+    default: manifest.site.name,
+    template: `%s · ${manifest.site.name}`,
+  },
+  ...(siteDescription ? { description: siteDescription } : {}),
+  ...(rootSocialMetadata ?? {}),
+  ...(metadataIcons ? { icons: metadataIcons } : {}),
+  alternates: {
+    types: {
+      "text/markdown": "/sitemap.md",
+      "text/plain": "/llms.txt",
+    },
+  },
+};
+
+export default function AppRootLayout({ children }: { children: ReactNode }) {
+  preloadRootFonts();
+  return (
+    <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.
+        </p>
+        <Providers>
+          <RootLayout site={manifest.site} tree={manifest.tree}>
+            {children}
+          </RootLayout>
+        </Providers>
+      </body>
+    </html>
+  );
+}

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

@@ -0,0 +1,29 @@
+import { createMarkdownRouteHandlers } from "@publish.os/nextjs/kernel/routes/agent/markdown";
+import {
+  loadMarkdownArtifact,
+  markdownArtifactManifest,
+} from "@source/.publishos/markdown-index.generated";
+
+const handlers = createMarkdownRouteHandlers(
+  {
+    index: markdownArtifactManifest.byMarkdownPath,
+    loadArtifact: loadMarkdownArtifact,
+  },
+  {
+    discoveryLinks: __PUBLISHOS_MARKDOWN_DISCOVERY_LINKS__,
+  },
+);
+
+type RouteContext = {
+  params: Promise<{ path?: string[] }>;
+};
+
+export function GET(request: Request, context: RouteContext) {
+  return handlers.GET(request, context);
+}
+
+export function HEAD(request: Request, context: RouteContext) {
+  return handlers.HEAD(request, context);
+}
+
+export const generateStaticParams = handlers.generateStaticParams;

package/compiler-assets/nextjs/shims/og-image-route.ts

@@ -0,0 +1,18 @@
+import {
+  createOgImageRoute,
+  createOgImageStaticParams,
+} from "@publish.os/nextjs/kernel/routes/metadata/og-image";
+import { ogManifest } from "@source/.publishos/og-manifest.generated";
+
+const getOgImage = createOgImageRoute({ manifest: ogManifest });
+
+type RouteContext = {
+  params: Promise<{ key: string }>;
+};
+
+export function GET(request: Request, context: RouteContext) {
+  return getOgImage(request, context);
+}
+
+export const generateStaticParams = () =>
+  createOgImageStaticParams({ manifest: ogManifest });

package/compiler-assets/nextjs/shims/powered-by-footer.tsx

@@ -0,0 +1,40 @@
+import type { ResolvedAttribution } from "@publish.os/nextjs/types";
+
+type PoweredByFooterProps = {
+  attribution: ResolvedAttribution;
+};
+
+const styles = {
+  attr: "flex min-h-6 w-full justify-end font-sans text-[max(12px,0.8rem)] leading-[max(16px,1.5rem)] tracking-normal",
+  hrefLabel:
+    "inline underline decoration-stroke-3 decoration-1 underline-offset-[0.16em] transition-colors duration-100 ease-out group-hover/link:decoration-stroke-2 group-active/link:decoration-stroke-2 group-hover/link:text-foreground-1",
+  link: "group/link inline-flex items-center gap-1 px-1 rounded-button text-foreground-3 !no-underline transition-colors duration-100 ease-out hover:!no-underline active:!no-underline focus-visible:outline-2 focus-visible:outline-offset-0 focus-visible:outline-focus-stroke",
+  root: "!visible !block w-full py-8 !opacity-100",
+  rule: "mb-3.5 w-full border-stroke-3 border-t",
+} as const;
+
+export function PoweredByFooter({ attribution }: PoweredByFooterProps) {
+  if (!attribution.enabled) {
+    return null;
+  }
+
+  const label = attribution.label ?? "Powered by";
+  const hrefLabel = attribution.hrefLabel ?? "publish.dev";
+
+  return (
+    <footer className={styles.root} data-publishos-attribution-footer>
+      <div className={styles.rule} />
+      <div className={styles.attr}>
+        <a
+          className={styles.link}
+          href={attribution.href}
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          <span>{label}</span>
+          <span className={styles.hrefLabel}>{hrefLabel}</span>
+        </a>
+      </div>
+    </footer>
+  );
+}

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

@@ -0,0 +1,13 @@
+"use client";
+
+import { PublishOSThemeProvider } from "@app/publish-os-theme-provider";
+import { KeyboardShortcutsProvider } from "@publish.os/nextjs/keyboard-shortcuts";
+import type { ReactNode } from "react";
+
+export function Providers({ children }: { children: ReactNode }) {
+  return (
+    <KeyboardShortcutsProvider>
+      <PublishOSThemeProvider>{children}</PublishOSThemeProvider>
+    </KeyboardShortcutsProvider>
+  );
+}