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

package/README.md

@@ -1,9 +1,7 @@
 # @publish.os/nextjs
 
-PublishOS runtime package for generated Next.js applications. Tenant source
-pins its exact version in `publish.os.config.json`; the CLI obtains and verifies
-it automatically. Do not install it into the host application.
+> **Beta:** publish.os is in beta. Commands and package interfaces can change before the stable release.
 
-## License
+The publish.os CLI installs and manages this framework package.
 
-Proprietary. All rights reserved.
+[Read the `@publish.os/cli` README](https://www.npmjs.com/package/@publish.os/cli).

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

@@ -0,0 +1,6 @@
+@import "tailwindcss" source(none);
+@import "../source/globals.css";
+
+/* PUBLISHOS_TAILWIND_SOURCES */
+
+@custom-variant dark (&:where(.dark, .dark *));

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

@@ -0,0 +1,23 @@
+import { Sidebar } from "@components/blocks/sidebar";
+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;
+  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))]">
+        <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">
+        {children}
+      </main>
+      <aside
+        aria-label={`${site.name} secondary navigation`}
+        className="hidden bg-surface-1 xl:block"
+      />
+    </section>
+  );
+}

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

@@ -0,0 +1,48 @@
+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";
+import { mdxComponents } from "@source/_internal/mdx-components.generated";
+
+export default async function LeafPage(props: PageProps) {
+  log.debug("[default:leaf-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 (
+    <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.url}
+            sourceUrl={sourceUrl}
+          />
+          <div className="mt-6">
+            <MDX
+              components={mdxComponents}
+              content={props.page.body}
+              pageId={props.page.fileID}
+              slug={props.page.slug}
+            />
+          </div>
+        </article>
+        <NextPrev
+          className="mt-auto pt-12"
+          currentPath={props.currentPath}
+          tree={props.tree}
+        />
+      </div>
+    </div>
+  );
+}

package/compiler-assets/nextjs/defaults/group/page.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 (
+    <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>
+    </main>
+  );
+}

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

@@ -0,0 +1,45 @@
+// Generated by the PublishOS framework - do not edit.
+
+import { dirname } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const projectRoot = dirname(fileURLToPath(import.meta.url));
+
+/** @type {import("next").NextConfig} */
+export default {
+  cacheComponents: true,
+  turbopack: {
+    resolveAlias: {
+      "@publish.os/nextjs/kernel/framework-icons":
+        "./source/.publishos/framework-icons.generated.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],
+    localPatterns: [
+      { pathname: "/_publishos/assets/**/images/**", search: "" },
+      { pathname: "/assets/images/**", search: "" },
+    ],
+    minimumCacheTTL: 2678400,
+    qualities: [50, 60, 75, 85, 95, 100],
+  },
+  cacheLife: {
+    // Published content changes with each build, which gets new use-cache keys.
+    page: {
+      stale: 60 * 5,
+      revalidate: 60 * 60 * 24 * 30,
+      expire: 60 * 60 * 24 * 365,
+    },
+  },
+};

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

@@ -0,0 +1,5 @@
+export default {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};

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

@@ -0,0 +1,41 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "allowJs": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "incremental": true,
+    "baseUrl": ".",
+    "paths": {
+      "@app/*": ["./app/*"],
+      "@publish.os/nextjs/icons": ["./source/.publishos/icons.generated"],
+      "@publish.os/nextjs/kernel/framework-icons": [
+        "./source/.publishos/framework-icons.generated"
+      ],
+      "@components/*": [
+        "./source/components/*",
+        "./node_modules/@publish.os/nextjs/dist/kernel/components/*"
+      ],
+      "@source/*": ["./source/*"],
+      "@manifest": ["./manifest.generated"]
+    },
+    "plugins": [{ "name": "next" }]
+  },
+  "include": [
+    "source/**/*",
+    "app/**/*",
+    "next-env.d.ts",
+    "manifest.generated.ts",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
+  ],
+  "exclude": ["node_modules"]
+}

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

@@ -0,0 +1,90 @@
+:root {
+  /*
+   * Motion defaults
+   * Keep these short and composited. Components use Base UI data attributes
+   * for enter/exit states and animate only opacity/transform by default.
+   */
+
+  --animation-duration-fast: 150ms;
+  --animation-duration-base: 200ms;
+  --animation-duration-slow: 300ms;
+  --animation-ease-in: cubic-bezier(0.32, 0, 0.67, 0);
+  --animation-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+  --animation-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
+  --animation-ease-progress: cubic-bezier(0.21, 0.65, 0.35, 1);
+  --animation-ease-progress-exit: cubic-bezier(0.55, 0.06, 0.68, 0.19);
+  --animation-enter-scale: 0.96;
+  --animation-enter-y: 0.25rem;
+  --animation-exit-scale: 0.98;
+}
+
+@layer utilities {
+  .animate-overlay {
+    transition-duration: var(--animation-duration-fast);
+    transition-property: opacity;
+    transition-timing-function: var(--animation-ease-out);
+  }
+
+  .animate-overlay[data-starting-style],
+  .animate-overlay[data-ending-style] {
+    opacity: 0;
+  }
+
+  .animate-dialog-popup {
+    transform-origin: center;
+    transition-duration: var(--animation-duration-base);
+    transition-property: opacity, transform;
+    transition-timing-function: var(--animation-ease-out);
+  }
+
+  .animate-dialog-popup[data-starting-style] {
+    opacity: 0;
+    transform: scale(var(--animation-enter-scale));
+  }
+
+  .animate-dialog-popup[data-ending-style] {
+    opacity: 0;
+    transform: scale(var(--animation-exit-scale));
+    transition-timing-function: var(--animation-ease-in);
+  }
+
+  .animate-popup {
+    transform-origin: var(--transform-origin);
+    transition-duration: var(--animation-duration-base);
+    transition-property: opacity, transform;
+    transition-timing-function: var(--animation-ease-out);
+  }
+
+  .animate-popup[data-starting-style] {
+    opacity: 0;
+    transform: translateY(calc(var(--animation-enter-y) * -0.5))
+      scale(var(--animation-enter-scale));
+  }
+
+  .animate-popup[data-ending-style] {
+    opacity: 0;
+    transform: translateY(calc(var(--animation-enter-y) * -0.25))
+      scale(var(--animation-exit-scale));
+    transition-timing-function: var(--animation-ease-in);
+  }
+
+  .animate-drawer-popup {
+    transition-duration: var(--animation-duration-slow);
+    transition-property: transform;
+    transition-timing-function: var(--animation-ease-out);
+  }
+
+  .animate-drawer-popup[data-starting-style],
+  .animate-drawer-popup[data-ending-style] {
+    transform: translateX(100%);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .animate-overlay,
+    .animate-dialog-popup,
+    .animate-popup,
+    .animate-drawer-popup {
+      transition-duration: 1ms;
+    }
+  }
+}

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

@@ -0,0 +1,21 @@
+@theme inline {
+  --color-dialog-surface-1: var(--dialog-surface-1);
+  --color-dialog-surface-3: var(--dialog-surface-3);
+  --color-dialog-foreground-1: var(--dialog-foreground-1);
+  --color-dialog-foreground-2: var(--dialog-foreground-2);
+  --color-dialog-foreground-3: var(--dialog-foreground-3);
+  --color-dialog-stroke-2: var(--dialog-stroke-2);
+  --color-dialog-backdrop: var(--dialog-backdrop);
+  --shadow-dialog: var(--dialog-shadow);
+}
+
+:root {
+  --dialog-surface-1: var(--floating-surface-1);
+  --dialog-surface-3: var(--floating-surface-3);
+  --dialog-foreground-1: var(--floating-foreground-1);
+  --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-shadow: var(--border-shadow-1);
+}

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

@@ -0,0 +1,21 @@
+@theme inline {
+  --color-drawer-surface-1: var(--drawer-surface-1);
+  --color-drawer-surface-3: var(--drawer-surface-3);
+  --color-drawer-foreground-1: var(--drawer-foreground-1);
+  --color-drawer-foreground-2: var(--drawer-foreground-2);
+  --color-drawer-foreground-3: var(--drawer-foreground-3);
+  --color-drawer-stroke-2: var(--drawer-stroke-2);
+  --color-drawer-backdrop: var(--drawer-backdrop);
+  --shadow-drawer: var(--drawer-shadow);
+}
+
+:root {
+  --drawer-surface-1: var(--floating-surface-1);
+  --drawer-surface-3: var(--floating-surface-3);
+  --drawer-foreground-1: var(--floating-foreground-1);
+  --drawer-foreground-2: var(--floating-foreground-2);
+  --drawer-foreground-3: var(--floating-foreground-3);
+  --drawer-stroke-2: var(--floating-stroke-2);
+  --drawer-backdrop: var(--backdrop);
+  --drawer-shadow: var(--border-shadow-1);
+}

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

@@ -0,0 +1,23 @@
+@theme inline {
+  --color-menu-surface-1: var(--menu-surface-1);
+  --color-menu-surface-3: var(--menu-surface-3);
+  --color-menu-surface-4: var(--menu-surface-4);
+  --color-menu-foreground-1: var(--menu-foreground-1);
+  --color-menu-foreground-4: var(--menu-foreground-4);
+  --color-menu-stroke-3: var(--menu-stroke-3);
+  --color-menu-highlight-surface: var(--menu-highlight-surface);
+  --color-menu-highlight-foreground: var(--menu-highlight-foreground);
+  --shadow-menu: var(--menu-shadow);
+}
+
+:root {
+  --menu-surface-1: var(--floating-surface-1);
+  --menu-surface-3: var(--floating-surface-3);
+  --menu-surface-4: var(--floating-surface-4);
+  --menu-foreground-1: var(--floating-foreground-1);
+  --menu-foreground-4: var(--floating-foreground-4);
+  --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);
+}

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

@@ -0,0 +1,25 @@
+@theme inline {
+  --color-navigation-menu-surface-1: var(--navigation-menu-surface-1);
+  --color-navigation-menu-surface-3: var(--navigation-menu-surface-3);
+  --color-navigation-menu-foreground-1: var(--navigation-menu-foreground-1);
+  --color-navigation-menu-foreground-4: var(--navigation-menu-foreground-4);
+  --color-navigation-menu-stroke-3: var(--navigation-menu-stroke-3);
+  --color-navigation-menu-highlight-surface: var(
+    --navigation-menu-highlight-surface
+  );
+  --color-navigation-menu-highlight-foreground: var(
+    --navigation-menu-highlight-foreground
+  );
+  --shadow-navigation-menu: var(--navigation-menu-shadow);
+}
+
+:root {
+  --navigation-menu-surface-1: var(--floating-surface-1);
+  --navigation-menu-surface-3: var(--floating-surface-3);
+  --navigation-menu-foreground-1: var(--floating-foreground-1);
+  --navigation-menu-foreground-4: var(--floating-foreground-4);
+  --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);
+}

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

@@ -0,0 +1,17 @@
+@theme inline {
+  --color-popover-surface-1: var(--popover-surface-1);
+  --color-popover-surface-3: var(--popover-surface-3);
+  --color-popover-foreground-1: var(--popover-foreground-1);
+  --color-popover-foreground-4: var(--popover-foreground-4);
+  --color-popover-stroke-3: var(--popover-stroke-3);
+  --shadow-popover: var(--popover-shadow);
+}
+
+:root {
+  --popover-surface-1: var(--floating-surface-1);
+  --popover-surface-3: var(--floating-surface-3);
+  --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);
+}

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

@@ -0,0 +1,23 @@
+@theme inline {
+  --color-select-surface-1: var(--select-surface-1);
+  --color-select-surface-3: var(--select-surface-3);
+  --color-select-surface-4: var(--select-surface-4);
+  --color-select-foreground-1: var(--select-foreground-1);
+  --color-select-foreground-4: var(--select-foreground-4);
+  --color-select-stroke-3: var(--select-stroke-3);
+  --color-select-highlight-surface: var(--select-highlight-surface);
+  --color-select-highlight-foreground: var(--select-highlight-foreground);
+  --shadow-select: var(--select-shadow);
+}
+
+:root {
+  --select-surface-1: var(--floating-surface-1);
+  --select-surface-3: var(--floating-surface-3);
+  --select-surface-4: var(--floating-surface-4);
+  --select-foreground-1: var(--floating-foreground-1);
+  --select-foreground-4: var(--floating-foreground-4);
+  --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);
+}

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

@@ -0,0 +1,19 @@
+@theme inline {
+  --color-toast-surface-1: var(--toast-surface-1);
+  --color-toast-surface-3: var(--toast-surface-3);
+  --color-toast-foreground-1: var(--toast-foreground-1);
+  --color-toast-foreground-2: var(--toast-foreground-2);
+  --color-toast-foreground-3: var(--toast-foreground-3);
+  --color-toast-stroke-2: var(--toast-stroke-2);
+  --shadow-toast: var(--toast-shadow);
+}
+
+:root {
+  --toast-surface-1: var(--floating-surface-1);
+  --toast-surface-3: var(--floating-surface-3);
+  --toast-foreground-1: var(--floating-foreground-1);
+  --toast-foreground-2: var(--floating-foreground-2);
+  --toast-foreground-3: var(--floating-foreground-3);
+  --toast-stroke-2: var(--floating-stroke-2);
+  --toast-shadow: var(--border-shadow-2);
+}

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

@@ -0,0 +1,15 @@
+@theme inline {
+  --color-tooltip-surface-1: var(--tooltip-surface-1);
+  --color-tooltip-foreground-1: var(--tooltip-foreground-1);
+  --color-tooltip-foreground-4: var(--tooltip-foreground-4);
+  --color-tooltip-stroke-4: var(--tooltip-stroke-4);
+  --shadow-tooltip: var(--tooltip-shadow);
+}
+
+:root {
+  --tooltip-surface-1: var(--floating-surface-1);
+  --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);
+}

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

@@ -0,0 +1,22 @@
+:root {
+  /*
+   * Docs layout constants.
+   * Projects can override the resolved variables in theme.css while keeping
+   * components on the same primitive contract.
+   */
+
+  /* Defaults */
+  --layout-site-max-width-full: 100vw;
+  --layout-site-max-width-centered: 1440px;
+  --layout-sidebar-width-default: 272px;
+  --layout-content-max-width-default: 760px;
+  --layout-toc-width-default: 224px;
+  --layout-global-nav-height-default: 3.5rem;
+
+  /* Variables */
+  --layout-site-max-width: var(--layout-site-max-width-centered);
+  --layout-sidebar-width: var(--layout-sidebar-width-default);
+  --layout-content-max-width: var(--layout-content-max-width-default);
+  --layout-toc-width: var(--layout-toc-width-default);
+  --layout-global-nav-height: var(--layout-global-nav-height-default);
+}

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

@@ -0,0 +1,81 @@
+[data-rmiz] {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+[data-rmiz-ghost] {
+  position: absolute;
+  pointer-events: none;
+}
+
+[data-rmiz-btn-zoom],
+[data-rmiz-btn-unzoom] {
+  display: none !important;
+}
+
+[data-rmiz-content="found"] img,
+[data-rmiz-content="found"] svg,
+[data-rmiz-content="found"] [role="img"],
+[data-rmiz-content="found"] [data-zoom] {
+  cursor: zoom-in;
+}
+
+[data-rmiz-modal]::backdrop {
+  display: none;
+}
+
+[data-rmiz-modal][open] {
+  position: fixed;
+  width: 100dvw;
+  height: 100dvh;
+  max-width: none;
+  max-height: none;
+  padding: 0;
+  margin: 0;
+  overflow: hidden;
+  overscroll-behavior: none;
+  pointer-events: all;
+  background: transparent;
+  border: 0;
+  z-index: var(--z-modal);
+}
+
+[data-rmiz-modal-overlay] {
+  position: absolute;
+  inset: 0;
+  transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1);
+  backdrop-filter: blur(4px);
+}
+
+[data-rmiz-modal-overlay="hidden"] {
+  background-color: transparent;
+}
+
+[data-rmiz-modal-overlay="visible"] {
+  background-color: var(--media-backdrop);
+}
+
+[data-rmiz-modal-content] {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+[data-rmiz-modal-img] {
+  position: absolute;
+  cursor: zoom-out;
+  image-rendering: high-quality;
+  transform-origin: top left;
+  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
+  border: 1px solid var(--stroke-2) !important;
+  border-radius: var(--radius-media) !important;
+  box-shadow: var(--border-shadow-2) !important;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-rmiz-modal-overlay],
+  [data-rmiz-modal-img] {
+    transition-duration: 0.01ms !important;
+  }
+}

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

@@ -0,0 +1,49 @@
+:root {
+  /*
+   * Presets for --theme-radius in theme.css.
+   * Use none, xs, sm, md, lg, xl, 2xl, or full by assigning one of these vars.
+   */
+
+  --theme-radius-none: 0px;
+  --theme-radius-xs: 2px;
+  --theme-radius-sm: 4px;
+  --theme-radius-md: 6px;
+  --theme-radius-lg: 8px;
+  --theme-radius-xl: 12px;
+  --theme-radius-2xl: 16px;
+  --theme-radius-full: 9999px;
+
+  /*
+   * Component radius aliases.
+   * Tailwind exposes these as rounded-button, rounded-card, rounded-popup, etc.
+   */
+
+  --radius-button: var(--theme-radius);
+  --radius-input: var(--theme-radius);
+  --radius-tag: var(--theme-radius);
+  --radius-avatar: var(--theme-radius);
+  --radius-tooltip: var(--theme-radius);
+
+  --radius-inline-code: min(var(--theme-radius), 6px);
+  --radius-card: min(var(--theme-radius), 16px);
+  --radius-callout: min(var(--theme-radius), 16px);
+  --radius-codeblock: min(var(--theme-radius), 16px);
+  --radius-container: min(var(--theme-radius), 16px);
+  --radius-dialog: min(var(--theme-radius), 16px);
+  --radius-media: min(var(--theme-radius), 16px);
+  --radius-panel: min(var(--theme-radius), 16px);
+  --radius-scrollarea: min(var(--theme-radius), 16px);
+  --radius-table: min(var(--theme-radius), 16px);
+
+  --radius-menu: min(var(--theme-radius), 12px);
+  --radius-popup: min(var(--theme-radius), 12px);
+  --radius-select: min(var(--theme-radius), 12px);
+
+  --radius-checkbox: clamp(2px, var(--theme-radius), 6px);
+  --radius-kbd: clamp(3px, var(--theme-radius), 4.5px);
+  --radius-radio: 9999px;
+  --radius-spinner: 9999px;
+  --radius-switch-thumb: max(calc(var(--theme-radius) - 2px), 0px);
+  --radius-switch-track: var(--theme-radius);
+  --radius-scrollbar-thumb: min(var(--theme-radius), 4px);
+}