feat(next-web): visual editor support

Author: adamhake

.claude/settings.local.json

@@ -70,7 +70,8 @@
       "mcp__context7__query-docs",
       "Bash(cd /Users/adamhake/chimbo-park-conservancy/apps/next-web && npx vitest run 2>&1 | tail -50)",
       "Bash(pnpm --filter @chimborazo/next-web build 2>&1 | tail -80)",
-      "Bash(cd /Users/adamhake/chimbo-park-conservancy/apps/next-web && pnpm test 2>&1)"
+      "Bash(cd /Users/adamhake/chimbo-park-conservancy/apps/next-web && pnpm test 2>&1)",
+      "Bash(ls -la \"/Users/adamhake/chimbo-park-conservancy/node_modules/.pnpm/next-sanity@12.1.1_@emotion+is-prop-valid@1.4.0_@sanity+client@7.16.0_@sanity+types@5.1_44bc6ab29d8209a74397e93bcb6d823d/node_modules/next-sanity/dist/\" | grep -E \"^d|\\\\.d\\\\.ts$|live|draft|visual\")"
     ],
     "deny": [],
     "ask": []

apps/next-web/.gitignore

@@ -0,0 +1,2 @@
+# next-agents-md
+.next-docs/

apps/next-web/CLAUDE.md

@@ -0,0 +1,3 @@
+
+
+<!-- NEXT-AGENTS-MD-START -->[Next.js Docs Index]|root: ./.next-docs|STOP. What you remember about Next.js is WRONG for this project. Always search docs and read before any task.|If docs missing, run this command first: npx @next/codemod agents-md --output CLAUDE.md|01-app:{04-glossary.mdx}|01-app/01-getting-started:{01-installation.mdx,02-project-structure.mdx,03-layouts-and-pages.mdx,04-linking-and-navigating.mdx,05-server-and-client-components.mdx,06-cache-components.mdx,07-fetching-data.mdx,08-updating-data.mdx,09-caching-and-revalidating.mdx,10-error-handling.mdx,11-css.mdx,12-images.mdx,13-fonts.mdx,14-metadata-and-og-images.mdx,15-route-handlers.mdx,16-proxy.mdx,17-deploying.mdx,18-upgrading.mdx}|01-app/02-guides:{analytics.mdx,authentication.mdx,backend-for-frontend.mdx,caching.mdx,ci-build-caching.mdx,content-security-policy.mdx,css-in-js.mdx,custom-server.mdx,data-security.mdx,debugging.mdx,draft-mode.mdx,environment-variables.mdx,forms.mdx,incremental-static-regeneration.mdx,instrumentation.mdx,internationalization.mdx,json-ld.mdx,lazy-loading.mdx,local-development.mdx,mcp.mdx,mdx.mdx,memory-usage.mdx,multi-tenant.mdx,multi-zones.mdx,open-telemetry.mdx,package-bundling.mdx,prefetching.mdx,production-checklist.mdx,progressive-web-apps.mdx,public-static-pages.mdx,redirecting.mdx,sass.mdx,scripts.mdx,self-hosting.mdx,single-page-applications.mdx,static-exports.mdx,tailwind-v3-css.mdx,third-party-libraries.mdx,videos.mdx}|01-app/02-guides/migrating:{app-router-migration.mdx,from-create-react-app.mdx,from-vite.mdx}|01-app/02-guides/testing:{cypress.mdx,jest.mdx,playwright.mdx,vitest.mdx}|01-app/02-guides/upgrading:{codemods.mdx,version-14.mdx,version-15.mdx,version-16.mdx}|01-app/03-api-reference:{07-edge.mdx,08-turbopack.mdx}|01-app/03-api-reference/01-directives:{use-cache-private.mdx,use-cache-remote.mdx,use-cache.mdx,use-client.mdx,use-server.mdx}|01-app/03-api-reference/02-components:{font.mdx,form.mdx,image.mdx,link.mdx,script.mdx}|01-app/03-api-reference/03-file-conventions/01-metadata:{app-icons.mdx,manifest.mdx,opengraph-image.mdx,robots.mdx,sitemap.mdx}|01-app/03-api-reference/03-file-conventions:{default.mdx,dynamic-routes.mdx,error.mdx,forbidden.mdx,instrumentation-client.mdx,instrumentation.mdx,intercepting-routes.mdx,layout.mdx,loading.mdx,mdx-components.mdx,not-found.mdx,page.mdx,parallel-routes.mdx,proxy.mdx,public-folder.mdx,route-groups.mdx,route-segment-config.mdx,route.mdx,src-folder.mdx,template.mdx,unauthorized.mdx}|01-app/03-api-reference/04-functions:{after.mdx,cacheLife.mdx,cacheTag.mdx,connection.mdx,cookies.mdx,draft-mode.mdx,fetch.mdx,forbidden.mdx,generate-image-metadata.mdx,generate-metadata.mdx,generate-sitemaps.mdx,generate-static-params.mdx,generate-viewport.mdx,headers.mdx,image-response.mdx,next-request.mdx,next-response.mdx,not-found.mdx,permanentRedirect.mdx,redirect.mdx,refresh.mdx,revalidatePath.mdx,revalidateTag.mdx,unauthorized.mdx,unstable_cache.mdx,unstable_noStore.mdx,unstable_rethrow.mdx,updateTag.mdx,use-link-status.mdx,use-params.mdx,use-pathname.mdx,use-report-web-vitals.mdx,use-router.mdx,use-search-params.mdx,use-selected-layout-segment.mdx,use-selected-layout-segments.mdx,userAgent.mdx}|01-app/03-api-reference/05-config/01-next-config-js:{adapterPath.mdx,allowedDevOrigins.mdx,appDir.mdx,assetPrefix.mdx,authInterrupts.mdx,basePath.mdx,browserDebugInfoInTerminal.mdx,cacheComponents.mdx,cacheHandlers.mdx,cacheLife.mdx,compress.mdx,crossOrigin.mdx,cssChunking.mdx,devIndicators.mdx,distDir.mdx,env.mdx,expireTime.mdx,exportPathMap.mdx,generateBuildId.mdx,generateEtags.mdx,headers.mdx,htmlLimitedBots.mdx,httpAgentOptions.mdx,images.mdx,incrementalCacheHandlerPath.mdx,inlineCss.mdx,isolatedDevBuild.mdx,logging.mdx,mdxRs.mdx,onDemandEntries.mdx,optimizePackageImports.mdx,output.mdx,pageExtensions.mdx,poweredByHeader.mdx,productionBrowserSourceMaps.mdx,proxyClientMaxBodySize.mdx,reactCompiler.mdx,reactMaxHeadersLength.mdx,reactStrictMode.mdx,redirects.mdx,rewrites.mdx,sassOptions.mdx,serverActions.mdx,serverComponentsHmrCache.mdx,serverExternalPackages.mdx,staleTimes.mdx,staticGeneration.mdx,taint.mdx,trailingSlash.mdx,transpilePackages.mdx,turbopack.mdx,turbopackFileSystemCache.mdx,typedRoutes.mdx,typescript.mdx,urlImports.mdx,useLightningcss.mdx,viewTransition.mdx,webVitalsAttribution.mdx,webpack.mdx}|01-app/03-api-reference/05-config:{02-typescript.mdx,03-eslint.mdx}|01-app/03-api-reference/06-cli:{create-next-app.mdx,next.mdx}|02-pages/01-getting-started:{01-installation.mdx,02-project-structure.mdx,04-images.mdx,05-fonts.mdx,06-css.mdx,11-deploying.mdx}|02-pages/02-guides:{analytics.mdx,authentication.mdx,babel.mdx,ci-build-caching.mdx,content-security-policy.mdx,css-in-js.mdx,custom-server.mdx,debugging.mdx,draft-mode.mdx,environment-variables.mdx,forms.mdx,incremental-static-regeneration.mdx,instrumentation.mdx,internationalization.mdx,lazy-loading.mdx,mdx.mdx,multi-zones.mdx,open-telemetry.mdx,package-bundling.mdx,post-css.mdx,preview-mode.mdx,production-checklist.mdx,redirecting.mdx,sass.mdx,scripts.mdx,self-hosting.mdx,static-exports.mdx,tailwind-v3-css.mdx,third-party-libraries.mdx}|02-pages/02-guides/migrating:{app-router-migration.mdx,from-create-react-app.mdx,from-vite.mdx}|02-pages/02-guides/testing:{cypress.mdx,jest.mdx,playwright.mdx,vitest.mdx}|02-pages/02-guides/upgrading:{codemods.mdx,version-10.mdx,version-11.mdx,version-12.mdx,version-13.mdx,version-14.mdx,version-9.mdx}|02-pages/03-building-your-application/01-routing:{01-pages-and-layouts.mdx,02-dynamic-routes.mdx,03-linking-and-navigating.mdx,05-custom-app.mdx,06-custom-document.mdx,07-api-routes.mdx,08-custom-error.mdx}|02-pages/03-building-your-application/02-rendering:{01-server-side-rendering.mdx,02-static-site-generation.mdx,04-automatic-static-optimization.mdx,05-client-side-rendering.mdx}|02-pages/03-building-your-application/03-data-fetching:{01-get-static-props.mdx,02-get-static-paths.mdx,03-forms-and-mutations.mdx,03-get-server-side-props.mdx,05-client-side.mdx}|02-pages/03-building-your-application/06-configuring:{12-error-handling.mdx}|02-pages/04-api-reference:{06-edge.mdx,08-turbopack.mdx}|02-pages/04-api-reference/01-components:{font.mdx,form.mdx,head.mdx,image-legacy.mdx,image.mdx,link.mdx,script.mdx}|02-pages/04-api-reference/02-file-conventions:{instrumentation.mdx,proxy.mdx,public-folder.mdx,src-folder.mdx}|02-pages/04-api-reference/03-functions:{get-initial-props.mdx,get-server-side-props.mdx,get-static-paths.mdx,get-static-props.mdx,next-request.mdx,next-response.mdx,use-params.mdx,use-report-web-vitals.mdx,use-router.mdx,use-search-params.mdx,userAgent.mdx}|02-pages/04-api-reference/04-config/01-next-config-js:{adapterPath.mdx,allowedDevOrigins.mdx,assetPrefix.mdx,basePath.mdx,bundlePagesRouterDependencies.mdx,compress.mdx,crossOrigin.mdx,devIndicators.mdx,distDir.mdx,env.mdx,exportPathMap.mdx,generateBuildId.mdx,generateEtags.mdx,headers.mdx,httpAgentOptions.mdx,images.mdx,isolatedDevBuild.mdx,onDemandEntries.mdx,optimizePackageImports.mdx,output.mdx,pageExtensions.mdx,poweredByHeader.mdx,productionBrowserSourceMaps.mdx,proxyClientMaxBodySize.mdx,reactStrictMode.mdx,redirects.mdx,rewrites.mdx,serverExternalPackages.mdx,trailingSlash.mdx,transpilePackages.mdx,turbopack.mdx,typescript.mdx,urlImports.mdx,useLightningcss.mdx,webVitalsAttribution.mdx,webpack.mdx}|02-pages/04-api-reference/04-config:{01-typescript.mdx,02-eslint.mdx}|02-pages/04-api-reference/05-cli:{create-next-app.mdx,next.mdx}|03-architecture:{accessibility.mdx,fast-refresh.mdx,nextjs-compiler.mdx,supported-browsers.mdx}|04-community:{01-contribution-guide.mdx,02-rspack.mdx}<!-- NEXT-AGENTS-MD-END -->

apps/next-web/eslint.config.js

@@ -0,0 +1,25 @@
+import js from "@eslint/js";
+import tseslint from "typescript-eslint";
+import reactHooks from "eslint-plugin-react-hooks";
+
+export default tseslint.config(
+  js.configs.recommended,
+  ...tseslint.configs.recommended,
+  {
+    plugins: {
+      "react-hooks": reactHooks,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      "react-hooks/set-state-in-effect": "error",
+      "@typescript-eslint/no-unused-vars": [
+        "warn",
+        { argsIgnorePattern: "^_", varsIgnorePattern: "^_" },
+      ],
+      "@typescript-eslint/no-explicit-any": "warn",
+    },
+  },
+  {
+    ignores: [".next/", "node_modules/", "dist/"],
+  },
+);

apps/next-web/next.config.ts

@@ -1,6 +1,13 @@
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
+  cacheLife: {
+    sanity: {
+      stale: 60,
+      revalidate: 1800,
+      expire: 7776000, // 90 days — Sanity Live handles on-demand revalidation
+    },
+  },
   images: {
     remotePatterns: [
       {

apps/next-web/package.json

@@ -6,7 +6,7 @@
     "dev": "next dev --turbopack -p 3001",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint",
+    "lint": "eslint .",
     "type-check": "tsc --noEmit",
     "test": "vitest run"
   },
@@ -43,13 +43,17 @@
     "zod": "^4.3.6"
   },
   "devDependencies": {
+    "@eslint/js": "catalog:",
     "@netlify/plugin-nextjs": "^5.12.0",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@types/node": "^25.3.1",
     "@types/react": "catalog:",
     "@types/react-dom": "^19.2.3",
+    "eslint": "catalog:",
+    "eslint-plugin-react-hooks": "^7.0.1",
     "typescript": "catalog:",
+    "typescript-eslint": "catalog:",
     "vitest": "^4.0.18"
   }
 }

apps/next-web/src/app/about/page.tsx

@@ -25,10 +25,10 @@ export const metadata: Metadata = {
 };
 
 export default async function AboutPage() {
-  const pageData = await sanityFetch<SanityAboutPage | null>({
+  const { data: pageData } = (await sanityFetch({
     query: getAboutPageQuery,
     tags: [CACHE_TAGS.ABOUT],
-  });
+  })) as { data: SanityAboutPage | null };
 
   const heroData = pageData?.pageHero?.image
     ? {

apps/next-web/src/app/amenities/page.tsx

@@ -64,10 +64,10 @@ export const metadata: Metadata = {
 };
 
 export default async function AmenitiesPage() {
-  const amenitiesPageData = await sanityFetch<SanityAmenitiesPage | null>({
+  const { data: amenitiesPageData } = (await sanityFetch({
     query: getAmenitiesPageQuery,
     tags: [CACHE_TAGS.AMENITIES],
-  });
+  })) as { data: SanityAmenitiesPage | null };
 
   // Prepare hero data from Sanity or use defaults
   const heroData = amenitiesPageData?.pageHero?.image

apps/next-web/src/app/api/draft/route.ts

@@ -1,41 +1,9 @@
+import { defineEnableDraftMode } from "next-sanity/draft-mode";
+import { sanityClient } from "@/lib/sanity";
 import { env } from "@/env";
-import { getSafeRedirectPath } from "@/lib/safe-redirect";
-import { sanityPreviewClient } from "@/lib/sanity";
-import { validatePreviewUrl } from "@sanity/preview-url-secret";
-import { draftMode } from "next/headers";
-import { redirect } from "next/navigation";
 
-export async function GET(request: Request) {
-  const url = new URL(request.url);
-
-  console.log("[Draft Mode] Enable request received:", url.pathname + url.search);
-
-  if (!env.SANITY_API_TOKEN) {
-    console.error("[Draft Mode] SANITY_API_TOKEN is not set");
-    return new Response("Server misconfiguration: missing API token", { status: 500 });
-  }
-
-  let isValid: boolean;
-  let redirectTo: string;
-  try {
-    const result = await validatePreviewUrl(sanityPreviewClient(), url.toString());
-    isValid = result.isValid;
-    redirectTo = result.redirectTo ?? "/";
-  } catch (error) {
-    console.error("[Draft Mode] validatePreviewUrl threw:", error);
-    return new Response("Failed to validate preview secret", { status: 500 });
-  }
-
-  if (!isValid) {
-    console.warn("[Draft Mode] Invalid secret – returning 401");
-    return new Response("Invalid secret", { status: 401 });
-  }
-
-  console.log("[Draft Mode] Secret valid, enabling preview. Redirecting to:", redirectTo);
-
-  const dm = await draftMode();
-  dm.enable();
-
-  const safeRedirect = getSafeRedirectPath(redirectTo);
-  redirect(safeRedirect);
-}
+export const { GET } = defineEnableDraftMode({
+  client: sanityClient.withConfig({
+    token: env.SANITY_API_TOKEN,
+  }),
+});

apps/next-web/src/app/api/media/route.ts

@@ -1,15 +1,14 @@
 import { NextResponse } from "next/server";
 import type { NextRequest } from "next/server";
-import { getSanityClient } from "@/lib/sanity";
+import { sanityClient } from "@/lib/sanity";
 import { paginatedMediaImagesQuery } from "@chimborazo/sanity-config/queries";
 
 export async function GET(request: NextRequest) {
   const { searchParams } = request.nextUrl;
   const start = parseInt(searchParams.get("start") || "0", 10);
   const end = parseInt(searchParams.get("end") || "9", 10);
 
-  const client = getSanityClient();
-  const images = await client.fetch(paginatedMediaImagesQuery, { start, end });
+  const images = await sanityClient.fetch(paginatedMediaImagesQuery, { start, end });
 
   return NextResponse.json(images);
 }