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

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

@@ -1,5 +1,6 @@
 @import "tailwindcss" source(none);
 @import "../source/globals.css";
+@reference "../source/.fonts.generated.css";
 
 /* PUBLISHOS_TAILWIND_SOURCES */
 

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

@@ -0,0 +1,50 @@
+import { Link } from "@components/ui/link";
+import type {
+  IndexPageProps,
+  PageNode,
+  TreeNode,
+} from "@publish.os/nextjs/types";
+import { log } from "@source/_internal/logger";
+
+function pageNodes(nodes: TreeNode[]): PageNode[] {
+  return nodes.flatMap((node) => {
+    if (node.type === "page") return [node];
+    if (node.type === "section" || node.type === "folder") {
+      return pageNodes(node.children);
+    }
+    return [];
+  });
+}
+
+export default function GroupPage(props: IndexPageProps) {
+  log.debug("[default:group-page]", props);
+  const { node, tree } = props;
+  const pages = pageNodes(tree);
+
+  return (
+    <div className="flex min-h-[calc(100vh-var(--layout-global-nav-height))] min-w-0 items-start justify-center px-6 pb-16 pt-[clamp(5rem,18vh,10rem)] 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="w-full max-w-md">
+        <p className="mb-6 text-sm font-semibold text-foreground-1">
+          {node.title}
+        </p>
+        <h1 className="max-w-sm text-balance text-xl font-semibold leading-7 tracking-tight text-foreground-1">
+          Browse the pages in this section.
+        </h1>
+
+        {pages.length > 0 ? (
+          <nav aria-label={`${node.title} pages`} className="mt-8">
+            <ul className="flex flex-col gap-2 text-sm">
+              {pages.map((page) => (
+                <li key={`${page.group}:${page.fileID}`}>
+                  <Link href={page.path} rightIcon="->" size="sm">
+                    {page.title}
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          </nav>
+        ) : null}
+      </div>
+    </div>
+  );
+}

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

@@ -7,11 +7,15 @@ export default function GroupLayout(props: LayoutProps) {
   log.debug("[default:group-layout]", { currentPath, group });
 
   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)] xl: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))]">
-      <aside className="fixed top-[var(--layout-global-nav-height)] z-content hidden h-[calc(100vh_-_var(--layout-global-nav-height))] min-h-0 border-l border-stroke-3 bg-surface-1 md:left-[max(0px,calc((100%-var(--layout-site-max-width))/2))] md:flex md:w-(--layout-sidebar-width) supports-[height:100dvh]:h-[calc(100dvh_-_var(--layout-global-nav-height))] supports-[top:anchor-size(--global-navbar_height)]:top-[anchor-size(--global-navbar_height,3.5rem)] supports-[top:anchor-size(--global-navbar_height)]:h-[calc(100vh_-_anchor-size(--global-navbar_height,3.5rem))] supports-[top:anchor-size(--global-navbar_height)]:supports-[height:100dvh]: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)] xl: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))]">
+      <aside className="fixed top-(--layout-global-nav-height) z-content hidden h-[calc(100vh-var(--layout-global-nav-height))] min-h-0 border-l border-stroke-3 bg-surface-1 md:left-[max(0px,calc((100%-var(--layout-site-max-width))/2))] md:flex md:w-(--layout-sidebar-width) supports-[height:100dvh]:h-[calc(100dvh-var(--layout-global-nav-height))] supports-[top:anchor-size(--global-navbar_height)]:top-[anchor-size(--global-navbar_height,3.5rem)] supports-[top:anchor-size(--global-navbar_height)]:h-[calc(100vh-anchor-size(--global-navbar_height,3.5rem))] supports-[top:anchor-size(--global-navbar_height)]:supports-[height:100dvh]:h-[calc(100dvh-anchor-size(--global-navbar_height,3.5rem))]">
         <Sidebar currentPath={currentPath} title={node.title} tree={tree} />
       </aside>
-      <main className="flex min-h-0 min-w-0 flex-1 flex-col bg-surface-1 md:col-start-2">
+      <main
+        className="flex min-h-0 min-w-0 flex-1 scroll-mt-[calc(var(--layout-global-nav-height)+1rem)] flex-col bg-surface-1 md:col-start-2"
+        id="main-content"
+        tabIndex={-1}
+      >
         {children}
       </main>
       <aside

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

@@ -1,50 +1,42 @@
-import { Link } from "@components/ui/link";
-import type {
-  IndexPageProps,
-  PageNode,
-  TreeNode,
-} from "@publish.os/nextjs/types";
+import { AgentActions } from "@components/blocks/AgentActions";
+import { NextPrev } from "@components/blocks/next-prev";
+import { MDX } from "@publish.os/nextjs/mdx";
+import type { PageProps } from "@publish.os/nextjs/types";
 import { log } from "@source/_internal/logger";
 
-function pageNodes(nodes: TreeNode[]): PageNode[] {
-  return nodes.flatMap((node) => {
-    if (node.type === "page") return [node];
-    if (node.type === "section" || node.type === "folder") {
-      return pageNodes(node.children);
-    }
-    return [];
-  });
-}
-
-export default function GroupPage(props: IndexPageProps) {
-  log.debug("[default:group-page]", props);
-  const { node, tree } = props;
-  const pages = pageNodes(tree);
+export default async function ContentPage(props: PageProps) {
+  log.debug("[default:content-page]", props);
+  const sourceUrl =
+    typeof props.page.meta.sourceUrl === "string"
+      ? props.page.meta.sourceUrl
+      : typeof props.page.meta.githubUrl === "string"
+        ? props.page.meta.githubUrl
+        : undefined;
 
   return (
-    <main className="flex min-h-[calc(100vh_-_var(--layout-global-nav-height))] min-w-0 items-start justify-center px-6 pb-16 pt-[clamp(5rem,18vh,10rem)] 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="w-full max-w-md">
-        <p className="mb-6 text-sm font-semibold text-foreground-1">
-          {node.title}
-        </p>
-        <h1 className="max-w-sm text-balance text-xl font-semibold leading-7 tracking-tight text-foreground-1">
-          Browse the pages in this section.
-        </h1>
-
-        {pages.length > 0 ? (
-          <nav aria-label={`${node.title} pages`} className="mt-8">
-            <ul className="flex flex-col gap-2 text-sm">
-              {pages.map((page) => (
-                <li key={`${page.group}:${page.fileID}`}>
-                  <Link href={page.path} rightIcon="->" size="sm">
-                    {page.title}
-                  </Link>
-                </li>
-              ))}
-            </ul>
-          </nav>
-        ) : null}
+    <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="mt-6">
+            <MDX page={props.page} />
+          </div>
+        </article>
+        <NextPrev
+          className="mt-auto pt-12"
+          currentPath={props.currentPath}
+          tree={props.tree}
+        />
       </div>
-    </main>
+    </div>
   );
 }

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

@@ -4,36 +4,47 @@ import { dirname } from "node:path";
 import { fileURLToPath } from "node:url";
 
 const projectRoot = dirname(fileURLToPath(import.meta.url));
+const ASSET_PREFIX = "__PUBLISHOS_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,
   cacheComponents: true,
+  partialPrefetching: false,
+  // Relocating Shiki as an external loses its pnpm-owned dependencies.
+  transpilePackages: ["shiki"],
   turbopack: {
     resolveAlias: {
-      "@publish.os/nextjs/kernel/framework-icons":
-        "./source/.publishos/framework-icons.generated.tsx",
+      "@publish.os/nextjs/mdx": "./source/.publishos/mdx.tsx",
     },
     root: projectRoot,
   },
-  experimental: {
-    optimizePackageImports: [
-      "@phosphor-icons/react",
-      "@tabler/icons-react",
-      "lucide-react",
-    ],
-  },
   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: "/_publishos/assets/**/images/**", search: "" },
-      { pathname: "/assets/images/**", search: "" },
+      {
+        pathname: `${ASSET_PREFIX}/_publishos/assets/**/images/**`,
+        search: "",
+      },
+      { pathname: `${ASSET_PREFIX}/assets/images/**`, search: "" },
     ],
     minimumCacheTTL: 2678400,
     qualities: [50, 60, 75, 85, 95, 100],
   },
+  async rewrites() {
+    return [
+      {
+        source: IMAGE_OPTIMIZER_PATH,
+        destination: NEXT_IMAGE_OPTIMIZER_PATH,
+      },
+    ];
+  },
   cacheLife: {
     // Published content changes with each build, which gets new use-cache keys.
     page: {

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

@@ -16,10 +16,7 @@
     "baseUrl": ".",
     "paths": {
       "@app/*": ["./app/*"],
-      "@publish.os/nextjs/icons": ["./source/.publishos/icons.generated"],
-      "@publish.os/nextjs/kernel/framework-icons": [
-        "./source/.publishos/framework-icons.generated"
-      ],
+      "@publish.os/nextjs/mdx": ["./source/.publishos/mdx"],
       "@components/*": [
         "./source/components/*",
         "./node_modules/@publish.os/nextjs/dist/kernel/components/*"

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

@@ -16,6 +16,8 @@
   --animation-enter-scale: 0.96;
   --animation-enter-y: 0.25rem;
   --animation-exit-scale: 0.98;
+  --animation-duration-search-close: 80ms;
+  --animation-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
 }
 
 @layer utilities {
@@ -79,12 +81,141 @@
     transform: translateX(100%);
   }
 
+  .animate-mobile-navigation {
+    transform: none;
+    transition-property: opacity;
+    transition-duration: 100ms;
+    transition-timing-function: var(--animation-ease-out);
+  }
+
+  .animate-mobile-navigation[data-starting-style],
+  .animate-mobile-navigation[data-ending-style] {
+    opacity: 0;
+    transform: none;
+  }
+
+  .animate-mobile-navigation[data-ending-style] {
+    transition-duration: 60ms;
+  }
+
+  .animate-search-dialog {
+    transform-origin: center;
+    transition-property: opacity, transform;
+    transition-duration: var(--animation-duration-fast);
+    transition-timing-function: var(--animation-ease-out);
+  }
+
+  .animate-search-dialog[data-starting-style] {
+    opacity: 0;
+    transform: scale(var(--animation-enter-scale));
+  }
+
+  .animate-search-dialog[data-ending-style] {
+    opacity: 0;
+    transform: scale(var(--animation-exit-scale));
+    transition-duration: var(--animation-duration-search-close);
+    transition-timing-function: var(--animation-ease-out);
+  }
+
+  .animate-search-backdrop[data-ending-style] {
+    transition-duration: var(--animation-duration-search-close);
+  }
+
+  .animate-search-drawer {
+    transform: translateY(var(--drawer-swipe-movement-y, 0px));
+    transition-property: transform, opacity;
+    transition-duration: var(--animation-duration-base);
+    transition-timing-function: var(--animation-ease-drawer);
+  }
+
+  .animate-search-drawer[data-starting-style] {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+
+  .animate-search-drawer[data-ending-style] {
+    opacity: 0;
+    transform: translateY(100%);
+    transition-duration: var(--animation-duration-search-close);
+  }
+
+  .animate-search-drawer[data-swiping] {
+    transition-duration: 0ms;
+  }
+
+  .animate-search-backdrop {
+    opacity: calc(1 - var(--drawer-swipe-progress, 0));
+    transition-property: opacity;
+    transition-duration: var(--animation-duration-fast);
+    transition-timing-function: var(--animation-ease-out);
+  }
+
+  .animate-search-backdrop[data-starting-style],
+  .animate-search-backdrop[data-ending-style] {
+    opacity: 0;
+  }
+
+  .animate-search-results {
+    grid-template-rows: 0fr;
+    opacity: 0;
+    transition:
+      grid-template-rows 180ms var(--animation-ease-out),
+      opacity 180ms var(--animation-ease-out);
+  }
+
+  .animate-search-results[data-expanded="true"] {
+    grid-template-rows: 1fr;
+    opacity: 1;
+  }
+
+  .animate-search-progress {
+    transform: scaleX(var(--search-progress));
+    transform-origin: left;
+    transition: transform 200ms var(--animation-ease-progress);
+  }
+
+  .animate-search-progress[data-state="exiting"] {
+    transform: scaleX(0);
+    transform-origin: right;
+    transition-duration: 150ms;
+    transition-timing-function: var(--animation-ease-progress-exit);
+  }
+
   @media (prefers-reduced-motion: reduce) {
+    .animate-mobile-navigation,
+    .animate-mobile-navigation[data-ending-style] {
+      transition-duration: 0ms;
+    }
+
     .animate-overlay,
     .animate-dialog-popup,
     .animate-popup,
     .animate-drawer-popup {
       transition-duration: 1ms;
     }
+
+    .animate-search-dialog,
+    .animate-search-drawer,
+    .animate-search-backdrop {
+      transition-property: opacity;
+      transition-duration: var(--animation-duration-search-close);
+    }
+
+    .animate-search-dialog[data-starting-style],
+    .animate-search-dialog[data-ending-style],
+    .animate-search-drawer[data-starting-style],
+    .animate-search-drawer[data-ending-style] {
+      transform: none;
+    }
+
+    .animate-search-results,
+    .animate-search-progress {
+      transition: none;
+    }
+
+    .animate-search-progress[data-state="exiting"] {
+      transform: none;
+      opacity: 0;
+    }
   }
 }

package/compiler-assets/nextjs/defaults/root/css/components/dialog.css

@@ -16,6 +16,9 @@
   --dialog-foreground-2: var(--floating-foreground-2);
   --dialog-foreground-3: var(--floating-foreground-3);
   --dialog-stroke-2: var(--floating-stroke-2);
-  --dialog-backdrop: var(--backdrop);
+  --dialog-backdrop: light-dark(
+    color-mix(in oklab, var(--backdrop) 30%, transparent),
+    color-mix(in oklab, var(--backdrop) 50%, transparent)
+  );
   --dialog-shadow: var(--border-shadow-1);
 }

package/compiler-assets/nextjs/defaults/root/css/components/menu.css

@@ -19,5 +19,5 @@
   --menu-stroke-3: var(--floating-stroke-3);
   --menu-highlight-surface: var(--menu-surface-3);
   --menu-highlight-foreground: var(--menu-foreground-1);
-  --menu-shadow: var(--border-shadow-2);
+  --menu-shadow: var(--floating-shadow);
 }

package/compiler-assets/nextjs/defaults/root/css/components/navigation-menu.css

@@ -21,5 +21,5 @@
   --navigation-menu-stroke-3: var(--floating-stroke-3);
   --navigation-menu-highlight-surface: var(--navigation-menu-surface-3);
   --navigation-menu-highlight-foreground: var(--navigation-menu-foreground-1);
-  --navigation-menu-shadow: var(--border-shadow-2);
+  --navigation-menu-shadow: var(--floating-shadow);
 }

package/compiler-assets/nextjs/defaults/root/css/components/popover.css

@@ -13,5 +13,5 @@
   --popover-foreground-1: var(--floating-foreground-1);
   --popover-foreground-4: var(--floating-foreground-4);
   --popover-stroke-3: var(--floating-stroke-3);
-  --popover-shadow: var(--border-shadow-2);
+  --popover-shadow: var(--floating-shadow);
 }

package/compiler-assets/nextjs/defaults/root/css/components/select.css

@@ -19,5 +19,5 @@
   --select-stroke-3: var(--floating-stroke-3);
   --select-highlight-surface: var(--select-surface-3);
   --select-highlight-foreground: var(--select-foreground-1);
-  --select-shadow: var(--border-shadow-2);
+  --select-shadow: var(--floating-shadow);
 }

package/compiler-assets/nextjs/defaults/root/css/components/tooltip.css

@@ -11,5 +11,5 @@
   --tooltip-foreground-1: var(--floating-foreground-1);
   --tooltip-foreground-4: var(--floating-foreground-4);
   --tooltip-stroke-4: var(--floating-stroke-4);
-  --tooltip-shadow: var(--border-shadow-2);
+  --tooltip-shadow: var(--floating-shadow);
 }

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

@@ -1,18 +1,19 @@
 :root {
   --shadow-edge-color: rgb(0 0 0);
   --shadow-color: rgb(0 0 0);
-  --shadow-inset-opacity: 0%;
   --shadow-edge-1-opacity: 12%;
   --shadow-edge-2-opacity: 10%;
   --shadow-edge-3-opacity: 8%;
   --shadow-edge-4-opacity: 6%;
 
+  /* Floating surfaces already draw their own translucent border. */
+  --floating-shadow:
+    0 2px 6px rgb(from var(--shadow-color) r g b / 8%),
+    0 12px 24px -8px rgb(from var(--shadow-color) r g b / 12%);
+
+  /* Inset edges blend with the surface fill, not the surrounding page. */
   --border-shadow-1:
     inset 0 0 0 1px rgb(
-      from var(--shadow-edge-color) r g b /
-      var(--shadow-inset-opacity)
-    ),
-    0 0 0 1px rgb(
       from var(--shadow-edge-color) r g b /
       var(--shadow-edge-1-opacity)
     ),
@@ -25,10 +26,6 @@
     0 40px 48px -32px rgb(from var(--shadow-color) r g b / 4%);
   --border-shadow-1-hover:
     inset 0 0 0 1px rgb(
-      from var(--shadow-edge-color) r g b /
-      var(--shadow-inset-opacity)
-    ),
-    0 0 0 1px rgb(
       from var(--shadow-edge-color) r g b /
       calc(var(--shadow-edge-1-opacity) + 2%)
     ),
@@ -42,10 +39,6 @@
 
   --border-shadow-2:
     inset 0 0 0 1px rgb(
-      from var(--shadow-edge-color) r g b /
-      var(--shadow-inset-opacity)
-    ),
-    0 0 0 1px rgb(
       from var(--shadow-edge-color) r g b /
       var(--shadow-edge-2-opacity)
     ),
@@ -55,10 +48,6 @@
     0 12px 24px -8px rgb(from var(--shadow-color) r g b / 6%);
   --border-shadow-2-hover:
     inset 0 0 0 1px rgb(
-      from var(--shadow-edge-color) r g b /
-      var(--shadow-inset-opacity)
-    ),
-    0 0 0 1px rgb(
       from var(--shadow-edge-color) r g b /
       calc(var(--shadow-edge-2-opacity) + 2%)
     ),
@@ -69,15 +58,11 @@
 
   --border-shadow-3:
     inset 0 0 0 1px
-    rgb(from var(--shadow-edge-color) r g b / var(--shadow-inset-opacity)),
-    0 0 0 1px
     rgb(from var(--shadow-edge-color) r g b / var(--shadow-edge-3-opacity)),
     0 0.5px 1px rgb(from var(--shadow-color) r g b / 10%),
     0 2px 4px -2px rgb(from var(--shadow-color) r g b / 6%);
   --border-shadow-3-hover:
     inset 0 0 0 1px
-    rgb(from var(--shadow-edge-color) r g b / var(--shadow-inset-opacity)),
-    0 0 0 1px
     rgb(
       from var(--shadow-edge-color) r g b /
       calc(var(--shadow-edge-3-opacity) + 2%)
@@ -87,15 +72,11 @@
 
   --border-shadow-4:
     inset 0 0 0 1px
-    rgb(from var(--shadow-edge-color) r g b / var(--shadow-inset-opacity)),
-    0 0 0 1px
     rgb(from var(--shadow-edge-color) r g b / var(--shadow-edge-4-opacity)),
     0 0.5px 1px rgb(from var(--shadow-color) r g b / 6%),
     0 1px 2px -1px rgb(from var(--shadow-color) r g b / 4%);
   --border-shadow-4-hover:
     inset 0 0 0 1px
-    rgb(from var(--shadow-edge-color) r g b / var(--shadow-inset-opacity)),
-    0 0 0 1px
     rgb(
       from var(--shadow-edge-color) r g b /
       calc(var(--shadow-edge-4-opacity) + 2%)

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 *)