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

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

@@ -3,21 +3,21 @@ 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 (
-    <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
-        aria-label={`${site.name} secondary navigation`}
-        className="hidden bg-surface-1 xl:block"
-      />
     </section>
   );
 }

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

@@ -1,50 +1,51 @@
-import { Link } from "@components/ui/link";
-import type {
-  IndexPageProps,
-  PageNode,
-  TreeNode,
-} from "@publish.os/nextjs/types";
+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";
 
-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="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>
       </div>
-    </main>
+    </div>
   );
 }

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

@@ -4,36 +4,56 @@ import { dirname } from "node:path";
 import { fileURLToPath } from "node:url";
 
 const projectRoot = dirname(fileURLToPath(import.meta.url));
+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: 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/kernel/framework-icons":
-        "./source/.publishos/framework-icons.generated.tsx",
+      "@publish.os/nextjs/mdx": "./source/.publishos/mdx.tsx",
+      "next/image": "@publish.os/nextjs/kernel/components/next-image",
+      ...__PUBLISHOS_COMPONENT_ALIASES__,
     },
     root: projectRoot,
   },
-  experimental: {
-    optimizePackageImports: [
-      "@phosphor-icons/react",
-      "@tabler/icons-react",
-      "lucide-react",
-    ],
+  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],
-    localPatterns: [
-      { pathname: "/_publishos/assets/**/images/**", search: "" },
-      { pathname: "/assets/images/**", search: "" },
-    ],
-    minimumCacheTTL: 2678400,
+    path: IMAGE_OPTIMIZER_PATH,
+    localPatterns: [{ pathname: `${SOURCE_ASSET_PREFIX}/**` }],
+    remotePatterns: [],
+    minimumCacheTTL: 0,
     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

@@ -4,6 +4,7 @@
     "lib": ["dom", "dom.iterable", "esnext"],
     "module": "esnext",
     "moduleResolution": "bundler",
+    "jsxImportSource": "@publish.os/nextjs",
     "jsx": "react-jsx",
     "allowJs": true,
     "strict": true,
@@ -16,9 +17,15 @@
     "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"],
+      "@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/*",

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/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/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%)