fix: enhance local development and presentation configuration

- Updated local development check to ensure compatibility with Astro's environment.
- Modified preview URL handling to include initial value and allow origins for iframe communication.
- Clarified environment variable documentation for SANITY_API_READ_TOKEN and added notes for local visual editing setup.

Author: codercatdev

apps/sanity/sanity.config.ts

@@ -59,7 +59,9 @@ const presentationEnabled =
 	process.env.SANITY_STUDIO_DISABLE_PRESENTATION !== "true";
 
 // Use local Astro dev server for presentation preview when running Studio locally
-const isLocal = typeof import.meta !== "undefined" && import.meta.env?.DEV;
+const isLocal =
+  typeof import.meta !== "undefined" &&
+  (import.meta as unknown as { env?: { DEV?: boolean } }).env?.DEV;
 const localPreviewOrigin = "http://localhost:4321";
 
 // ── Shared helpers ───────────────────────────────────────────────────
@@ -223,12 +225,14 @@ function buildPlugins(previewUrl: string): PluginOptions[] {
               },
             },
             previewUrl: {
-              origin: previewUrl,
+              initial: previewUrl,
               previewMode: {
                 enable: "/api/draft-mode/enable",
                 disable: "/api/draft-mode/disable",
               },
             },
+            // Required: allow preview iframe origin to send postMessage to Studio (visual editing)
+            allowOrigins: [previewUrl],
           }),
         ]
       : []),

apps/web/.env.example

@@ -2,7 +2,12 @@
 SANITY_PROJECT_ID=hfh83o0w
 SANITY_DATASET=production
 SANITY_API_TOKEN=
-# SANITY_API_READ_TOKEN = viewer token for draft mode / Visual Editing (optional; required for Presentation tool)
+# SANITY_API_READ_TOKEN = viewer token for draft mode / Visual Editing (required for Presentation tool; set in .dev.vars for Cloudflare)
+
+# Visual Editing (optional; for local dev or when not using draft-mode cookie)
+# PUBLIC_SANITY_VISUAL_EDITING_ENABLED=true
+# When running Studio locally, point overlay "edit" links to your Studio:
+# PUBLIC_SANITY_STUDIO_URL=http://localhost:3333
 
 # Auth (better-auth)
 BETTER_AUTH_SECRET=

apps/web/src/pages/api/draft-mode/enable.ts

@@ -6,6 +6,8 @@
  * the Sanity dataset). Sets a __sanity_preview cookie and redirects.
  *
  * Requires SANITY_API_READ_TOKEN (viewer rights). No SANITY_PREVIEW_SECRET needed.
+ * With Cloudflare: set in .dev.vars (local) or Wrangler secrets (production).
+ * Astro v6: use only 'import { env } from "cloudflare:workers"' (locals.runtime.env was removed).
  */
 import type { APIRoute } from "astro";
 import { createClient } from "@sanity/client";