dh-remixer-sdk 0.0.28-23f57ed → 0.0.28-6c514b2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dh-remixer-sdk",
-  "version": "0.0.28-23f57ed",
+  "version": "0.0.28-6c514b2",
   "type": "module",
   "files": [
     "templates",

package/scripts/sdk-update/cmd-utils.mjs

@@ -1,31 +1,13 @@
 import { spawn } from "child_process";
 import { TARGET_ENVIRONMENT } from "./vars.mjs";
 
-const TAG_BY_ENV = {
-  production: "latest",
-  staging: "staging",
-  develop: "develop",
-};
-
 export async function getSdkVersion() {
-  const tag = TAG_BY_ENV[TARGET_ENVIRONMENT];
-
-  if (!tag) {
-    throw new Error(
-      `[sdk-update] Unknown NEXT_PUBLIC_ENVIRONMENT "${TARGET_ENVIRONMENT}". ` +
-        `Expected one of: ${Object.keys(TAG_BY_ENV).join(", ")}`,
-    );
-  }
-
   const res = await fetch("https://registry.npmjs.org/dh-remixer-sdk");
   const data = await res.json();
-  const sdkVersion = data["dist-tags"]?.[tag];
-
-  if (!sdkVersion) {
-    throw new Error(
-      `[sdk-update] No "${tag}" dist-tag published for dh-remixer-sdk on npm`,
-    );
-  }
+  const sdkVersion =
+    TARGET_ENVIRONMENT === "production"
+      ? data["dist-tags"].latest
+      : data["dist-tags"].dev;
 
   return sdkVersion;
 }

package/scripts/sdk-update/sdk-utils.mjs

@@ -5,19 +5,7 @@ import { SDK_ROOT } from "./vars.mjs";
 import { jsonMerge } from "./type-utils.mjs";
 
 
-function assertTemplateExists(templateType) {
-  if (templateType === "base") return;
-  const templateRoot = path.join(SDK_ROOT, "templates", templateType);
-  if (!fssync.existsSync(templateRoot)) {
-    throw new Error(
-      `[sdk-update] Template "${templateType}" not found in installed dh-remixer-sdk (${templateRoot}). ` +
-        `Run: npm install dh-remixer-sdk@latest`,
-    );
-  }
-}
-
 export async function getDeletionList(templateType) {
-  assertTemplateExists(templateType);
   const baseRoot = path.join(SDK_ROOT, "templates", "base");
   const templateRoot = path.join(SDK_ROOT, "templates", templateType);
   const templateCleanupPath = path.join(templateRoot, "cleanup.json");
@@ -35,7 +23,6 @@ export async function getDeletionList(templateType) {
 }
 
 export async function getExtractionList(templateType) {
-  assertTemplateExists(templateType);
   const baseRoot = path.join(SDK_ROOT, "templates", "base");
   const templateRoot = path.join(SDK_ROOT, "templates", templateType);
   const templateFilemapPath = path.join(templateRoot, "filemap.json");

package/scripts/ssg-helmet/build-sitemap-xml.mjs

@@ -6,6 +6,12 @@ const CHANGEFREQ_HOME = "daily";
 const CHANGEFREQ_NORMAL = "weekly";
 const CHANGEFREQ_TEMPLATED = "weekly";
 
+const ensureTrailingSlash = (p) => {
+  const [base, suffix] = p.split(/([?#].*)/); // keep query/hash intact
+  const normalized = base.endsWith("/") ? base : base + "/";
+  return suffix ? normalized + suffix : normalized;
+};
+
 export function buildSitemapXml(origin, routes) {
   if (!/^https?:\/\//i.test(origin)) origin = "https://" + origin;
   const cleanOrigin = origin.replace(/\/+$/, "");
@@ -60,7 +66,7 @@ export function buildSitemapXml(origin, routes) {
           : CHANGEFREQ_NORMAL;
 
     return `  <url>
-    <loc>${esc(abs(path))}</loc>
+    <loc>${esc(abs(ensureTrailingSlash(path)))}</loc>
     <lastmod>${today}</lastmod>
     <changefreq>${changefreq}</changefreq>
     <priority>${priority.toFixed(1)}</priority>

package/scripts/ssg-helmet/prerenderer.mjs

@@ -202,15 +202,6 @@ export class Prerenderer {
     this.#client = await CDP({ port: this.#cdpPort, target: pageTarget });
     await this.#client.Page.enable();
     await this.#client.Runtime.enable();
-
-    // Signal to the app that we are in SSG prerender mode, BEFORE any page
-    // scripts run. Components (e.g. ScrollScene, useScrollProgress) can read
-    // window.__PRERENDER__ to skip WebGL/Lenis and render a static fallback,
-    // which keeps headless Chrome from hanging on canvas rendering and
-    // guarantees meaningful HTML for SEO.
-    await this.#client.Page.addScriptToEvaluateOnNewDocument({
-      source: "window.__PRERENDER__ = true;",
-    });
   }
 
   async #launchDirect() {

package/templates/base/index.tsx

@@ -1,6 +1,5 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
-import { HelmetProvider } from "react-helmet-async";
 import tailwindConfig from "@/tailwind.config";
 import App from "@/App";
 import { GOOGLE_FONTS_URL } from "@/fonts";
@@ -28,10 +27,8 @@ if (!rootElement) {
 const root = ReactDOM.createRoot(rootElement);
 root.render(
   <React.StrictMode>
-    <HelmetProvider>
-      <LanguageProvider>
-        <App />
-      </LanguageProvider>
-    </HelmetProvider>
+    <LanguageProvider>
+      <App />
+    </LanguageProvider>
   </React.StrictMode>
-);
+);

package/templates/base/package.json

@@ -8,7 +8,7 @@
     "start": "vite preview --host 0.0.0.0 --mode production --port ${PORT:-4173}",
     "dev": "vite --host 0.0.0.0 --port ${PORT:-4173} --mode development",
     "lint": "echo 'Linting not implemented!'",
-    "remixer-sdk:update": "bun install dh-remixer-sdk@${REMIXER_SDK_TAG:-latest} && sdk-update"
+    "remixer-sdk:update": "npm cache clean --force && npm install dh-remixer-sdk@latest && sdk-update"
   },
   "dependencies": {
     "@openobserve/browser-logs": "0.3.1",
@@ -21,7 +21,7 @@
     "react": "19.2.0",
     "react-aria-components": "1.11.0",
     "react-dom": "19.2.0",
-    "react-helmet-async": "3.0.0",
+    "react-helmet": "6.1.0",
     "react-router-dom": "7.9.6"
   },
   "devDependencies": {

package/templates/base/vite.config.ts

@@ -1,10 +1,113 @@
-import { defineConfig, loadEnv, Plugin } from "vite";
+import { defineConfig, Plugin } from "vite";
 import react from "@vitejs/plugin-react";
 import tailwindcss from "tailwindcss";
 import autoprefixer from "autoprefixer";
 import tailwindConfig from "./tailwind.config.ts";
 import path from "path";
 
+const REMIXER_LOGO_SVG = `
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <path d="M18.0005 12.0025C14.6877 12.0025 12.0012 14.6889 12.0012 18.0016V24.0006H24.0024V12H18.0031L18.0005 12.0025Z" fill="url(#paint0_linear_14487_36369)"/>
+  <path d="M12.0012 5.99904V0H0V12.0006H5.99932C9.31215 12.0006 11.9986 9.31423 11.9986 6.00155L12.0012 5.99904Z" fill="url(#paint1_linear_14487_36369)"/>
+  <path d="M5.99902 11.999C9.31222 11.999 11.9988 14.6851 11.999 17.998C11.999 21.3112 9.31236 23.9971 5.99902 23.9971C2.68583 23.9969 0 21.3111 0 17.998C0.00021569 14.6852 2.68596 11.9992 5.99902 11.999ZM18 0C21.3133 0 24 2.68585 24 5.99902C24 9.3122 21.3133 11.998 18 11.998C14.6869 11.9978 12.001 9.31205 12.001 5.99902C12.001 2.68601 14.6869 0.00024737 18 0Z" fill="url(#paint2_linear_14487_36369)"/>
+  <path d="M12.0012 6H18.0005V11.999C14.6877 11.999 12.0012 9.31016 12.0012 6Z" fill="white"/>
+  <path d="M5.99927 12V6.00096H11.9986C11.9986 9.31364 9.30958 12 5.99927 12Z" fill="white"/>
+  <path d="M12.0012 18H6.0019L6.0019 12.001C9.31473 12.001 12.0012 14.6898 12.0012 18Z" fill="white"/>
+  <path d="M18.0005 12V17.999H12.0012C12.0012 14.6864 14.6902 12 18.0005 12Z" fill="white"/>
+  <defs>
+    <linearGradient id="paint0_linear_14487_36369" x1="12.0024" y1="12" x2="24.0018" y2="24" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#3F3F46"/>
+      <stop offset="1" stop-color="#71717A"/>
+    </linearGradient>
+    <linearGradient id="paint1_linear_14487_36369" x1="0.001139" y1="3.18903e-07" x2="12.0005" y2="12" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#71717A"/>
+      <stop offset="1" stop-color="#3F3F46"/>
+    </linearGradient>
+    <linearGradient id="paint2_linear_14487_36369" x1="-8.53364" y1="33.7017" x2="-6.30119" y2="-14.057" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#BE59FF"/>
+      <stop offset="0.19" stop-color="#9D60FF"/>
+      <stop offset="0.74" stop-color="#4274FF"/>
+      <stop offset="1" stop-color="#1F7CFF"/>
+    </linearGradient>
+  </defs>
+</svg>`
+
+const ARROW_SVG = `
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+  <path d="M11.1635 10.0004L7.60246 6.43958C7.48718 6.32417 7.42816 6.19646 7.42538 6.05646C7.42274 5.9166 7.48177 5.78625 7.60246 5.66542C7.72329 5.54472 7.85232 5.48438 7.98954 5.48438C8.12677 5.48438 8.25579 5.54472 8.37663 5.66542L12.2468 9.53563C12.3109 9.59979 12.3589 9.67167 12.391 9.75125C12.4231 9.83083 12.4391 9.91389 12.4391 10.0004C12.4391 10.0869 12.4231 10.17 12.391 10.2496C12.3589 10.3292 12.3109 10.401 12.2468 10.4652L8.37663 14.3354C8.26121 14.4507 8.13697 14.5063 8.00392 14.5021C7.871 14.4978 7.74413 14.4353 7.62329 14.3146C7.5026 14.1938 7.44225 14.0647 7.44225 13.9275C7.44225 13.7903 7.5026 13.6613 7.62329 13.5404L11.1635 10.0004Z" fill="#A18AFB" fill-opacity="0.7"/>
+</svg>`
+
+const BUILT_WITH_REMIXER_TEXT = (classes?: string) => `
+<div class="flex gap-[12px] items-center">
+  ${REMIXER_LOGO_SVG}
+  <p class="${classes} text-[#FFF] text-[14px] font-[400]">Built with <span class="font-[600]">Remixer</span></p>
+</div>`
+
+const CTA_LINK = (title: string, href: string, isShowArrow: boolean = false) => `
+<a href="${href}" target="_blank" class="group text-[14px] text-[#B6A3FE] font-[600] flex gap-[6px] items-center cursor-pointer relative">
+  ${title}
+  ${isShowArrow ? ARROW_SVG : ''}
+  <div class="bg-[#B6A3FE] absolute left-0 bottom-0 h-[1px] right-[100%] transition-all duration-150 ${isShowArrow ? 'group-hover:right-[4px]' : 'group-hover:right-[0px]'}"></div>
+</a>`
+
+const BADGE_CONTAINER = (cta_links?: string) => `
+<div class="fixed bottom-[0px] right-[0px] z-[2147483647] flex p-[8px] gap-[16px] mx-[16px] mb-[16px] bg-[#09090B] border-[#3F3F46] border-[1px] border-solid rounded-[12px] items-center shadow-[0_2px_32px_0_rgba(0,0,0,0.25)]">
+  <div class="flex gap-[12px] items-center">
+    ${cta_links ?
+    [
+      BUILT_WITH_REMIXER_TEXT('hidden md:block'),
+      '<div class="h-[20px] w-[1px] bg-[#3F3F46]"></div>',
+      cta_links
+    ].join('\n') :
+    BUILT_WITH_REMIXER_TEXT()
+  }
+  </div>
+</div>`
+
+const PREVIEW_DOMAINS = [
+  '.remixer.ai',
+  '.dreamhosters.ai',
+];
+
+function injectRemixerBadgePlugin(): Plugin {
+  return {
+    name: "vite-plugin-inject-remixer-badge",
+    apply: "build",
+
+    transformIndexHtml(html) {
+      try {
+        const IS_SHOW_REMIXER_BADGE: boolean = process.env.IS_SHOW_REMIXER_BADGE as boolean | undefined || false;
+        const REMIXER_BADGE_TYPE: string = process.env.REMIXER_BADGE_TYPE || 'DEFAULT';
+
+        const domain = process.env.NEXT_PUBLIC_DOMAIN || '';
+        const isPreviewService = PREVIEW_DOMAINS.some(pd => domain.endsWith(pd));
+
+        if (!IS_SHOW_REMIXER_BADGE && !isPreviewService) return html
+
+        const DICTIONARY: Record<string, string> = {
+          DEFAULT: BADGE_CONTAINER(),
+          UPGRADE_PLAN: BADGE_CONTAINER([
+            CTA_LINK(`Upgrade Plan`, 'https://www.dreamhost.com/remixer-website-builder/', true)
+
+          ].join('\n')),
+          NAVBAR: BADGE_CONTAINER([
+            CTA_LINK(`Upgrade plan`, 'https://www.dreamhost.com/remixer-website-builder/'),
+            CTA_LINK(`Get Access`, 'https://www.dreamhost.com/remixer-website-builder/'),
+            CTA_LINK(`Signup`, 'https://www.dreamhost.com/remixer-website-builder/')
+          ].join('\n')),
+        }
+
+        const BADGE_CONTENT = DICTIONARY[REMIXER_BADGE_TYPE]
+
+        return html.replace(/<\/body>/, `${BADGE_CONTENT}\n</body>`);
+      } catch (e) {
+        console.warn('Remixer badge failed to inject', e);
+        return html;
+      }
+    },
+  };
+}
+
 // Switches from Tailwind CDN to regular Tailwind CSS with PostCSS for production builds
 function tailwindProdPlugin(): Plugin {
   return {
@@ -34,7 +137,7 @@ function tailwindProdPlugin(): Plugin {
 
     transformIndexHtml(html) {
       return html.replace(
-        /\s*<script\s+src=["']https:\/\/cdn\.tailwindcss\.com["']\s*><\/script>\s*/g,
+        /\s*<script\s+src=["']https:\/\/cdn\.tailwindcss\.com[^"']*["']\s*><\/script>\s*/g,
         "\n"
       );
     },
@@ -56,16 +159,10 @@ const VIRTUAL_OO_ID = "virtual:openobserve";
 const RESOLVED_OO_ID = "\0" + VIRTUAL_OO_ID;
 
 function openobservePlugin(): Plugin {
-  let env: Record<string, string> = {};
-
   return {
     name: "vite-plugin-openobserve",
     apply: "build",
 
-    config(_, { mode }) {
-      env = loadEnv(mode, process.cwd(), "VITE_OO_");
-    },
-
     resolveId(id) {
       if (id === VIRTUAL_OO_ID) return RESOLVED_OO_ID;
     },
@@ -73,47 +170,55 @@ function openobservePlugin(): Plugin {
     load(id) {
       if (id !== RESOLVED_OO_ID) return;
 
-      const token = env.VITE_OO_CLIENT_TOKEN;
+      const token = process.env.VITE_OO_CLIENT_TOKEN;
       if (!token) return "export default false;";
 
-      const site = env.VITE_OO_SITE || "api.openobserve.ai";
-      const org = env.VITE_OO_ORG || "";
-      const appId = env.VITE_OO_APP_ID || "";
-      const service = env.VITE_OO_SERVICE || "";
-      const version = env.VITE_OO_VERSION || "0.0.1";
+      const domain = process.env.NEXT_PUBLIC_DOMAIN || "";
+      if (PREVIEW_DOMAINS.some(pd => domain.endsWith(pd))) return "export default false;";
+
+      const site = process.env.VITE_OO_SITE || "api.openobserve.ai";
+      const org = process.env.VITE_OO_ORG || "";
+      const appId = process.env.VITE_OO_APP_ID || "";
+      const service = domain;
+      const version = process.env.VITE_OO_VERSION || "0.0.0";
+      const env = process.env.NEXT_PUBLIC_ENVIRONMENT || "production";
 
       return `
 import { openobserveRum } from "@openobserve/browser-rum-slim";
 import { openobserveLogs } from "@openobserve/browser-logs";
 
-openobserveRum.init({
-  applicationId: ${JSON.stringify(appId)},
-  clientToken: ${JSON.stringify(token)},
-  site: ${JSON.stringify(site)},
-  organizationIdentifier: ${JSON.stringify(org)},
-  service: ${JSON.stringify(service)},
-  env: "production",
-  version: ${JSON.stringify(version)},
-  trackResources: true,
-  trackLongTasks: true,
-  trackUserInteractions: true,
-  insecureHTTP: false,
-  apiVersion: "v1",
-  defaultPrivacyLevel: "allow",
-  sessionSampleRate: 100,
-});
-
-openobserveLogs.init({
-  clientToken: ${JSON.stringify(token)},
-  site: ${JSON.stringify(site)},
-  organizationIdentifier: ${JSON.stringify(org)},
-  service: ${JSON.stringify(service)},
-  env: "production",
-  version: ${JSON.stringify(version)},
-  forwardErrorsToLogs: true,
-  insecureHTTP: false,
-  apiVersion: "v1",
-});
+try {
+  openobserveRum.init({
+    applicationId: ${JSON.stringify(appId)},
+    clientToken: ${JSON.stringify(token)},
+    site: ${JSON.stringify(site)},
+    organizationIdentifier: ${JSON.stringify(org)},
+    service: ${JSON.stringify(service)},
+    env: ${JSON.stringify(env)},
+    version: ${JSON.stringify(version)},
+    trackResources: true,
+    trackLongTasks: true,
+    trackUserInteractions: true,
+    insecureHTTP: false,
+    apiVersion: "v1",
+    defaultPrivacyLevel: "allow",
+    sessionSampleRate: 100,
+  });
+
+  openobserveLogs.init({
+    clientToken: ${JSON.stringify(token)},
+    site: ${JSON.stringify(site)},
+    organizationIdentifier: ${JSON.stringify(org)},
+    service: ${JSON.stringify(service)},
+    env: ${JSON.stringify(env)},
+    version: ${JSON.stringify(version)},
+    forwardErrorsToLogs: true,
+    insecureHTTP: false,
+    apiVersion: "v1",
+  });
+} catch (e) {
+  console.warn('RemixerObserve failed to initialize', e);
+}
 
 export default true;
 `;
@@ -129,6 +234,7 @@ export default true;
 
 export default defineConfig({
   plugins: [
+    injectRemixerBadgePlugin(),
     openobservePlugin(),
     tailwindProdPlugin(),
     react(),

package/templates/landing-page/package.json

@@ -3,4 +3,4 @@
   "remixerMetadata": {
     "template": "landing-page"
   }
-}
+}

package/templates/base/SEOHead.tsx

@@ -1,43 +0,0 @@
-import { Helmet } from "react-helmet-async";
-import { useLanguage } from "@/context/LanguageContext";
-import images from "@/assets/images.json";
-
-interface SEOHeadProps {
-  titleKey?: string;
-  descriptionKey?: string;
-  ogImage?: string;
-  ogImageKey?: string;
-}
-
-// Canonical <head> for every page. Render exactly one <SEOHead /> per page
-// inside pages/*.tsx; no raw <Helmet> anywhere else. Pulls og:image from
-// assets/images.json by default so social sharing works without extra wiring.
-export function SEOHead({
-  titleKey = "home.title",
-  descriptionKey = "home.description",
-  ogImage,
-  ogImageKey = "og_image",
-}: SEOHeadProps) {
-  const { t } = useLanguage();
-  const siteTitle = import.meta.env.VITE_METADATA_TITLE as string | undefined;
-  const translated = t(titleKey);
-  const title = siteTitle ? `${translated} | ${siteTitle}` : translated;
-  const description = t(descriptionKey);
-  const resolvedOg =
-    ogImage ?? (images as Record<string, string>)[ogImageKey];
-
-  return (
-    <Helmet>
-      <title>{title}</title>
-      <meta name="description" content={description} />
-      <meta property="og:title" content={title} />
-      <meta property="og:description" content={description} />
-      <meta property="og:type" content="website" />
-      {resolvedOg ? <meta property="og:image" content={resolvedOg} /> : null}
-      <meta name="twitter:card" content="summary_large_image" />
-      {resolvedOg ? <meta name="twitter:image" content={resolvedOg} /> : null}
-    </Helmet>
-  );
-}
-
-export default SEOHead;

package/templates/immersive/Anchor3D.tsx

@@ -1,62 +0,0 @@
-import {
-  useContext,
-  useEffect,
-  useId,
-  useRef,
-  type CSSProperties,
-  type ReactNode,
-} from 'react';
-import { StageContext, type AnchorRegistration } from './StageContext';
-
-interface Anchor3DProps {
-  // Scene factory — invoked inside <Stage3D>'s Canvas. Read the live scroll
-  // signal via useAnchor().
-  render: () => ReactNode;
-  // When to keep the scene subtree mounted. Default: w > 0.02.
-  keepMountedWhen?: (w: number) => boolean;
-  // DOM wrapped by the anchor. The scroll signal is derived from this
-  // wrapper's bounding rect.
-  children?: ReactNode;
-  className?: string;
-  style?: CSSProperties;
-}
-
-// Binds a scroll-driven scene to a DOM region and registers it with the
-// parent <Stage3D>, which hoists the scene into its Canvas.
-export function Anchor3D({
-  render,
-  keepMountedWhen,
-  children,
-  className,
-  style,
-}: Anchor3DProps) {
-  const id = useId();
-  const elementRef = useRef<HTMLDivElement | null>(null);
-  const stage = useContext(StageContext);
-
-  // Stash render/keepMountedWhen in refs so re-registration only fires on
-  // structural changes (id), not every parent re-render.
-  const renderRef = useRef(render);
-  renderRef.current = render;
-  const keepRef = useRef(keepMountedWhen);
-  keepRef.current = keepMountedWhen;
-
-  useEffect(() => {
-    if (!stage) return;
-    const reg: AnchorRegistration = {
-      id,
-      getElement: () => elementRef.current,
-      render: () => renderRef.current(),
-      keepMountedWhen: keepRef.current
-        ? (w: number) => (keepRef.current as (w: number) => boolean)(w)
-        : undefined,
-    };
-    return stage.registerAnchor(reg);
-  }, [id, stage]);
-
-  return (
-    <div ref={elementRef} className={className} style={style}>
-      {children}
-    </div>
-  );
-}

package/templates/immersive/Atmosphere.tsx

@@ -1,134 +0,0 @@
-import { useMemo, useRef } from 'react';
-import { useFrame } from '@react-three/fiber';
-import * as THREE from 'three';
-import type { StagePalette } from './StageContext';
-
-function triLerp(
-  out: THREE.Color,
-  a: THREE.Color,
-  b: THREE.Color,
-  c: THREE.Color,
-  p: number,
-): void {
-  if (p < 0.5) out.copy(a).lerp(b, p * 2);
-  else out.copy(b).lerp(c, (p - 0.5) * 2);
-}
-
-function getPageProgress(): number {
-  if (typeof window === 'undefined') return 0;
-  const max = document.documentElement.scrollHeight - window.innerHeight || 1;
-  return Math.max(0, Math.min(1, window.scrollY / max));
-}
-
-// Back-faced gradient sphere whose two stop colors lerp across page progress.
-// Gives every immersive page a mood that evolves with scroll — for free, no
-// per-site shader authoring.
-export function Atmosphere({ palette }: { palette: StagePalette }) {
-  const inner = useMemo(
-    () => palette.sky.map((c) => new THREE.Color(c)),
-    [palette.sky],
-  );
-  const outer = useMemo(
-    () => palette.ground.map((c) => new THREE.Color(c)),
-    [palette.ground],
-  );
-
-  const uniforms = useRef({
-    uInner: { value: inner[0].clone() },
-    uOuter: { value: outer[0].clone() },
-  });
-  const innerNow = useRef(inner[0].clone());
-  const outerNow = useRef(outer[0].clone());
-  const ti = useMemo(() => new THREE.Color(), []);
-  const to = useMemo(() => new THREE.Color(), []);
-
-  useFrame((_, dt) => {
-    const p = getPageProgress();
-    const k = Math.min(dt * 2, 1);
-    triLerp(ti, inner[0], inner[1], inner[2], p);
-    triLerp(to, outer[0], outer[1], outer[2], p);
-    innerNow.current.lerp(ti, k);
-    outerNow.current.lerp(to, k);
-    uniforms.current.uInner.value.copy(innerNow.current);
-    uniforms.current.uOuter.value.copy(outerNow.current);
-  });
-
-  return (
-    <mesh scale={[50, 50, 50]}>
-      <sphereGeometry args={[1, 32, 32]} />
-      <shaderMaterial
-        side={THREE.BackSide}
-        uniforms={uniforms.current}
-        vertexShader={`
-          varying vec3 vPos;
-          void main() {
-            vPos = position;
-            gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
-          }
-        `}
-        fragmentShader={`
-          varying vec3 vPos;
-          uniform vec3 uInner;
-          uniform vec3 uOuter;
-          void main() {
-            float t = smoothstep(-0.9, 0.7, normalize(vPos).y);
-            vec3 c = mix(uOuter, uInner, t);
-            gl_FragColor = vec4(c, 1.0);
-          }
-        `}
-      />
-    </mesh>
-  );
-}
-
-// Three-point rig whose key + rim colors lerp with page progress. Fill light
-// stays neutral. Shadow-casting key light is on; Stage3D decides whether the
-// Canvas has `shadows` enabled via a prop.
-export function SceneLighting({ palette }: { palette: StagePalette }) {
-  const keyLight = useRef<THREE.DirectionalLight>(null);
-  const rimLight = useRef<THREE.PointLight>(null);
-
-  const keyColors = useMemo(
-    () => palette.key.map((c) => new THREE.Color(c)),
-    [palette.key],
-  );
-  const rimColors = useMemo(
-    () => palette.rim.map((c) => new THREE.Color(c)),
-    [palette.rim],
-  );
-
-  const keyNow = useRef(keyColors[0].clone());
-  const rimNow = useRef(rimColors[0].clone());
-  const tK = useMemo(() => new THREE.Color(), []);
-  const tR = useMemo(() => new THREE.Color(), []);
-
-  useFrame((_, dt) => {
-    const p = getPageProgress();
-    const k = Math.min(dt * 2.2, 1);
-    triLerp(tK, keyColors[0], keyColors[1], keyColors[2], p);
-    triLerp(tR, rimColors[0], rimColors[1], rimColors[2], p);
-    keyNow.current.lerp(tK, k);
-    rimNow.current.lerp(tR, k);
-    if (keyLight.current) keyLight.current.color.copy(keyNow.current);
-    if (rimLight.current) rimLight.current.color.copy(rimNow.current);
-  });
-
-  return (
-    <>
-      <ambientLight intensity={0.35} />
-      <directionalLight
-        ref={keyLight}
-        position={[3.5, 5, 3]}
-        intensity={1.2}
-        castShadow
-      />
-      <pointLight
-        ref={rimLight}
-        position={[-3, 1.5, -2.5]}
-        intensity={1.8}
-        distance={12}
-      />
-      <pointLight position={[2, -1.5, 2.5]} intensity={0.6} distance={10} />
-    </>
-  );
-}