fix: initialize hosted Studio behind HTTPS reverse proxies

app/lib/studio-guide.ts

@@ -1,4 +1,22 @@
-export const studioHelpScript = `window.addEventListener("error",function(){var s=document.getElementById("validation-state"),d=document.getElementById("diagnostics");if(s&&s.textContent==="Checking"){s.textContent="Editor could not start";if(d)d.textContent="Reload the page. If this continues, rebuild and restart the site with the latest Studio configuration. Your saved draft has not been deleted.";}});document.addEventListener("DOMContentLoaded",function(){var b=document.querySelector('[data-tab="guided"]');if(b)b.click();});`;
+export const studioHelpScript = `(() => {
+  let failed = false;
+  function report() {
+    const state = document.getElementById("validation-state");
+    const diagnostics = document.getElementById("diagnostics");
+    if (state && state.textContent === "Checking") {
+      state.textContent = "Editor could not start";
+      if (diagnostics) diagnostics.textContent = "The editor script could not initialize. Reload the page after updating the server. Your saved draft has not been deleted.";
+    }
+  }
+  function fail() { failed = true; report(); }
+  window.addEventListener("error", fail, true);
+  window.addEventListener("unhandledrejection", fail);
+  document.addEventListener("DOMContentLoaded", () => {
+    if (failed) report();
+    const button = document.querySelector('[data-tab="guided"]');
+    if (button) button.click();
+  });
+})();`;
 
 export function addStudioGuide(html: string, configured: boolean) {
   const guide = `<details open class="help"><summary><strong>How to use Design Studio</strong></summary><ol><li><strong>Describe your website.</strong> Open Guided design, enter your product and audience, then choose colors, shapes and spacing with Next.</li><li><strong>Generate and compare.</strong> Click Generate three directions, review an alternative, then choose Use reviewed proposal.</li><li><strong>Refine it.</strong> Try “make buttons square and use blue as the primary color” under Edit with words. Lock decisions you want to keep.</li><li><strong>Use it in your app.</strong> Open Review &amp; apply and export Theme config or Compiled CSS. This website previews and exports designs; it does not change your deployed app automatically.</li></ol><p>${configured ? "APIMart AI is enabled with gpt-6-luna. Generation sends your brief and current design to APIMart only when you request it." : "AI is not configured. Local presets and supported rule-based edits still work. Set APIMART_API_KEY in the server .env and restart to enable gpt-6-luna."}</p></details>`;

app/lib/studio-origin.ts

@@ -0,0 +1,43 @@
+/** Use an explicit external origin, rather than trusting proxy-supplied schemes. */
+export function studioRequest(
+  request: Request,
+  publicOrigin = process.env.STUDIO_PUBLIC_ORIGIN ??
+    "https://component.wrnexusjs.dev",
+): Request | Response {
+  const incoming = new URL(request.url);
+  const configured = new URL(publicOrigin);
+  if (
+    configured.protocol !== "https:" ||
+    configured.username ||
+    configured.password ||
+    configured.pathname !== "/" ||
+    configured.search ||
+    configured.hash
+  )
+    throw Error(
+      "STUDIO_PUBLIC_ORIGIN must be an HTTPS origin without a path or credentials.",
+    );
+  const origin = request.headers.get("origin");
+  const loopback = ["localhost", "127.0.0.1", "[::1]"].includes(
+    incoming.hostname,
+  );
+  const expected =
+    loopback && (!origin || origin === incoming.origin)
+      ? incoming.origin
+      : configured.origin;
+  if (origin && origin !== expected)
+    return Response.json(
+      { error: "Same-origin requests only." },
+      { status: 403, headers: { "cache-control": "no-store" } },
+    );
+  const normalized = new Request(
+    new URL(incoming.pathname + incoming.search, expected),
+    request,
+  );
+  normalized.headers.set(
+    "x-forwarded-proto",
+    new URL(expected).protocol.slice(0, -1),
+  );
+  normalized.headers.set("host", new URL(expected).host);
+  return normalized;
+}

app/middleware/design-studio.ts

@@ -2,6 +2,7 @@ import type { Middleware } from "@wrnexus/core";
 import type { createStudioHandler } from "@wrnexus/design-studio/server";
 import { studioAI } from "../lib/studio-ai.ts";
 import { addStudioGuide, studioHelpScript } from "../lib/studio-guide.ts";
+import { studioRequest } from "../lib/studio-origin.ts";
 
 let studio: ReturnType<typeof createStudioHandler> | undefined;
 let ai: ReturnType<typeof studioAI> | undefined;
@@ -14,8 +15,10 @@ const designStudio: Middleware = async (ctx, next) => {
       headers: { location: "/design-studio/" },
     });
   if (!url.pathname.startsWith("/design-studio/")) return next();
+  const request = studioRequest(ctx.req);
+  if (request instanceof Response) return request;
   ai ??= studioAI(process.env.APIMART_API_KEY?.trim());
-  const generated = await ai(ctx.req);
+  const generated = await ai(request);
   if (generated) return generated;
   if (
     url.pathname === "/design-studio/site-help.js" &&
@@ -39,7 +42,7 @@ const designStudio: Middleware = async (ctx, next) => {
       studio = undefined;
       throw error;
     });
-  const response = await (await studio)(ctx.req);
+  const response = await (await studio)(request);
   if (
     url.pathname === "/design-studio/" &&
     response.ok &&

app/types/wrnexus.generated.d.ts

@@ -16,7 +16,7 @@ declare namespace WRNexusGenerated {
   type RouteName = "accessibility" | "advanced.forms" | "base" | "block.library" | "blocks" | "blocks.announcement.bar" | "blocks.ctasection" | "blocks.feature.card" | "blocks.feature.grid" | "blocks.feature.icon.card" | "blocks.footer" | "blocks.hero" | "blocks.hero.actions" | "blocks.marketing.section.header" | "blocks.metric.grid" | "blocks.page.header" | "blocks.section.header" | "blocks.split.hero" | "blocks.stats.bar" | "colors" | "components.accordion" | "components.advanced.select" | "components.alert" | "components.avatar" | "components.avatar.group" | "components.back.to.top" | "components.badge" | "components.blockquote" | "components.breadcrumb" | "components.button" | "components.button.group" | "components.card" | "components.carousel" | "components.chart" | "components.chat.bubble" | "components.checkbox" | "components.clipboard" | "components.collapse" | "components.color.picker" | "components.columns" | "components.combo.box" | "components.confetti" | "components.container" | "components.context.menu" | "components.custom.scrollbar" | "components.data.map" | "components.data.table" | "components.date.picker" | "components.device.frame" | "components.divider" | "components.drag.and.drop" | "components.drawer" | "components.drawflow.canvas" | "components.dropdown" | "components.file.input" | "components.file.upload.progress" | "components.flow.canvas" | "components.grid" | "components.image" | "components.input" | "components.input.group" | "components.input.number" | "components.kbd" | "components.layout.splitter" | "components.legend.indicator" | "components.link" | "components.list" | "components.list.group" | "components.map" | "components.marquee" | "components.mega.menu" | "components.metric.card" | "components.modal" | "components.nav" | "components.navbar" | "components.pagination" | "components.pin.input" | "components.popover" | "components.preference.switcher" | "components.progress" | "components.radio" | "components.range.slider" | "components.rating" | "components.scrollspy" | "components.search.box" | "components.section" | "components.select" | "components.sidebar" | "components.skeleton" | "components.spinner" | "components.stepper" | "components.strong.password" | "components.styled.icon" | "components.switch" | "components.tabs" | "components.text.link" | "components.textarea" | "components.time.picker" | "components.timeline" | "components.toaster" | "components.toggle.count" | "components.toggle.password" | "components.tooltip" | "components.tree.view" | "components.typography" | "components.wysiwyg.editor" | "core" | "dark.mode" | "data" | "docs" | "fonts" | "forms" | "framework.guides" | "index" | "installation" | "integrations" | "layout" | "marketing" | "navigation" | "overlays" | "preview" | "preview.custom.modal" | "preview.profile" | "preview.project.board" | "preview.scheduling" | "preview.sign.in" | "preview.workspace" | "resources" | "sizing" | "tables" | "templates" | "templates.commerce" | "templates.dashboards" | "templates.marketing" | "templates.productivity" | "themes" | "v06.functions" | "v06.imports" | "v06.migration" | "v06.outputs" | "v06.runtime" | "v06.state" | "v06.stores" | "v06.types";
   type ApiRoute = "/api/teams";
   type RealtimeRoute = never;
-  type EnvironmentKey = "APIMART_API_KEY";
+  type EnvironmentKey = "APIMART_API_KEY" | "STUDIO_PUBLIC_ORIGIN";
   type TranslationKey = never;
   type QueueName = never;
   type CacheKey = never;