dh-remixer-sdk 0.0.28 → 0.0.29-12e235f

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dh-remixer-sdk",
-  "version": "0.0.28",
+  "version": "0.0.29-12e235f",
   "type": "module",
   "files": [
     "templates",

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

@@ -1,13 +1,31 @@
 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 =
-    TARGET_ENVIRONMENT === "production"
-      ? data["dist-tags"].latest
-      : data["dist-tags"].dev;
+  const sdkVersion = data["dist-tags"]?.[tag];
+
+  if (!sdkVersion) {
+    throw new Error(
+      `[sdk-update] No "${tag}" dist-tag published for dh-remixer-sdk on npm`,
+    );
+  }
 
   return sdkVersion;
 }

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

@@ -5,7 +5,19 @@ 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");
@@ -23,6 +35,7 @@ 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,6 +202,15 @@ 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/cleanup.json

@@ -5,6 +5,7 @@
   "public/.htaccess",
   "public/robots.txt",
   ".gitignore",
+  "lib/supabase.ts",
   "tsconfig.json",
   "vite.config.ts",
   "new.package.json"

package/templates/base/components/seo/SEOHead.tsx

@@ -0,0 +1,43 @@
+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/base/filemap.json

@@ -8,5 +8,18 @@
   "vite.config.ts": "vite.config.ts",
   "robots.txt": "public/robots.txt",
   ".htaccess": "public/.htaccess",
-  "supabase.ts": "lib/supabase.ts"
+  "components/seo/SEOHead.tsx": "components/seo/SEOHead.tsx",
+  "remixer.ts": "lib/remixer.ts",
+  "remixer/actions.ts": "lib/remixer/actions.ts",
+  "remixer/anonToken.ts": "lib/remixer/anonToken.ts",
+  "remixer/auth.ts": "lib/remixer/auth.ts",
+  "remixer/context.ts": "lib/remixer/context.ts",
+  "remixer/core.ts": "lib/remixer/core.ts",
+  "remixer/data.ts": "lib/remixer/data.ts",
+  "remixer/dpop.ts": "lib/remixer/dpop.ts",
+  "remixer/ecommerce.ts": "lib/remixer/ecommerce.ts",
+  "remixer/forms.ts": "lib/remixer/forms.ts",
+  "remixer/runtime.ts": "lib/remixer/runtime.ts",
+  "remixer/storage.ts": "lib/remixer/storage.ts",
+  "remixer/supabase.ts": "lib/remixer/supabase.ts"
 }

package/templates/base/index.tsx

@@ -1,5 +1,6 @@
 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";
@@ -27,8 +28,10 @@ if (!rootElement) {
 const root = ReactDOM.createRoot(rootElement);
 root.render(
   <React.StrictMode>
-    <LanguageProvider>
-      <App />
-    </LanguageProvider>
+    <HelmetProvider>
+      <LanguageProvider>
+        <App />
+      </LanguageProvider>
+    </HelmetProvider>
   </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": "npm cache clean --force && npm install dh-remixer-sdk@latest && sdk-update"
+    "remixer-sdk:update": "bun install dh-remixer-sdk@${REMIXER_SDK_TAG:-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": "6.1.0",
+    "react-helmet-async": "3.0.0",
     "react-router-dom": "7.9.6"
   },
   "devDependencies": {

package/templates/base/remixer/actions.ts

@@ -0,0 +1,5 @@
+import { runRemixerAction } from './runtime';
+
+export const actions = {
+  run: runRemixerAction,
+};

package/templates/base/remixer/anonToken.ts

@@ -0,0 +1,85 @@
+import { getAuthBrokerBaseUrl, getProjectId } from './context';
+import { getPublicJwk } from './dpop';
+
+type CachedToken = {
+  token: string;
+  expiresAt: number;
+};
+
+let memoryToken: CachedToken | null = null;
+let pendingToken: Promise<string> | null = null;
+
+function storageKey() {
+  return `remixer:${getProjectId()}:anonymous-token`;
+}
+
+function isUsableToken(token: CachedToken | null) {
+  return Boolean(token?.token && token.expiresAt - Math.floor(Date.now() / 1000) > 5 * 60);
+}
+
+function readSessionToken() {
+  try {
+    const raw = sessionStorage.getItem(storageKey());
+    return raw ? JSON.parse(raw) as CachedToken : null;
+  } catch {
+    return null;
+  }
+}
+
+function writeSessionToken(token: CachedToken) {
+  try {
+    sessionStorage.setItem(storageKey(), JSON.stringify(token));
+  } catch {
+    // Session storage can be disabled. In-memory cache still covers this page lifetime.
+  }
+}
+
+export function clearAnonymousToken() {
+  memoryToken = null;
+  pendingToken = null;
+  try {
+    sessionStorage.removeItem(storageKey());
+  } catch {
+    // Session storage can be disabled.
+  }
+}
+
+async function mintAnonymousToken() {
+  const publicJwk = await getPublicJwk();
+  const response = await fetch(`${getAuthBrokerBaseUrl()}/anonymous/bootstrap`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ publicJwk }),
+  });
+
+  const body = await response.json().catch(() => ({}));
+  if (!response.ok) {
+    throw new Error(body.message || body.error || `Anonymous bootstrap failed (${response.status})`);
+  }
+
+  const cached = {
+    token: body.token,
+    expiresAt: body.expiresAt,
+  };
+  memoryToken = cached;
+  writeSessionToken(cached);
+  return cached.token;
+}
+
+export async function getAnonymousToken() {
+  if (isUsableToken(memoryToken)) return memoryToken!.token;
+
+  const sessionToken = readSessionToken();
+  if (isUsableToken(sessionToken)) {
+    memoryToken = sessionToken;
+    return sessionToken!.token;
+  }
+
+  if (!pendingToken) {
+    pendingToken = mintAnonymousToken().finally(() => {
+      pendingToken = null;
+    });
+  }
+
+  return pendingToken;
+}

package/templates/base/remixer/auth.ts

@@ -0,0 +1,87 @@
+import { getProjectSession, isValidProjectSession, supabase } from './supabase';
+import { getAuthBrokerBaseUrl } from './context';
+
+export type SignInWithGoogleOptions = {
+  returnTo?: string;
+};
+
+export type SignupMetadata = Record<string, unknown>;
+
+async function brokerEmailAuth(path: 'signin' | 'signup', email: string, password: string, metadata?: SignupMetadata) {
+  const res = await fetch(`${getAuthBrokerBaseUrl()}/auth/email/${path}`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({
+      email,
+      password,
+      metadata,
+      return_to: window.location.origin,
+    }),
+  });
+
+  if (!res.ok) {
+    const body = await res.json().catch(() => ({}));
+    throw new Error(body.error || `Email auth failed (${res.status})`);
+  }
+
+  const payload = await res.json();
+  if (payload.access_token && payload.refresh_token) {
+    const { error } = await supabase.auth.setSession({
+      access_token: payload.access_token,
+      refresh_token: payload.refresh_token,
+    });
+    if (error) throw error;
+  }
+
+  return payload;
+}
+
+export const auth = {
+  getSession: getProjectSession,
+  async getUser() {
+    return (await getProjectSession())?.user ?? null;
+  },
+  isValidProjectSession,
+  onAuthStateChange(callback: Parameters<typeof supabase.auth.onAuthStateChange>[0]) {
+    return supabase.auth.onAuthStateChange(callback);
+  },
+  setSession(accessToken: string, refreshToken: string) {
+    return supabase.auth.setSession({
+      access_token: accessToken,
+      refresh_token: refreshToken,
+    });
+  },
+  signInWithGoogle(options: SignInWithGoogleOptions = {}) {
+    const startUrl = new URL(`${getAuthBrokerBaseUrl()}/auth/start`);
+    startUrl.searchParams.set('return_to', options.returnTo || `${window.location.origin}/account`);
+    startUrl.searchParams.set('nonce', crypto.randomUUID());
+    window.location.href = startUrl.toString();
+  },
+  signInWithEmail(email: string, password: string) {
+    return brokerEmailAuth('signin', email, password);
+  },
+  signUpWithEmail(email: string, password: string, metadata?: SignupMetadata) {
+    return brokerEmailAuth('signup', email, password, metadata);
+  },
+  async completeAuthExchange(exchangeCode: string) {
+    const res = await fetch(`${getAuthBrokerBaseUrl()}/auth/exchange`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ exchange_code: exchangeCode }),
+    });
+
+    if (!res.ok) {
+      const body = await res.json().catch(() => ({}));
+      throw new Error(body.error || `Exchange failed (${res.status})`);
+    }
+
+    const payload = await res.json();
+    return supabase.auth.setSession({
+      access_token: payload.access_token,
+      refresh_token: payload.refresh_token,
+    });
+  },
+  signOut() {
+    return supabase.auth.signOut();
+  },
+};

package/templates/base/remixer/context.ts

@@ -0,0 +1,49 @@
+export type RemixerContext = {
+  supabaseUrl: string;
+  supabaseAnonKey: string;
+  projectId: string;
+  runtimeUrl?: string;
+  authBrokerBaseUrl: string;
+};
+
+declare global {
+  interface Window {
+    __REMIXER_CTX__?: RemixerContext;
+  }
+}
+
+function requireContextValue<K extends keyof RemixerContext>(ctx: RemixerContext, key: K): RemixerContext[K] {
+  const value = ctx[key];
+  if (!value) {
+    throw new Error(`Remixer context is missing ${String(key)}`);
+  }
+  return value;
+}
+
+export function getRemixerContext() {
+  if (typeof window === 'undefined' || !window.__REMIXER_CTX__) {
+    throw new Error('Remixer context is not available');
+  }
+  return window.__REMIXER_CTX__;
+}
+
+export function getSupabaseUrl() {
+  return requireContextValue(getRemixerContext(), 'supabaseUrl');
+}
+
+export function getSupabaseAnonKey() {
+  return requireContextValue(getRemixerContext(), 'supabaseAnonKey');
+}
+
+export function getProjectId() {
+  return requireContextValue(getRemixerContext(), 'projectId');
+}
+
+export function getAuthBrokerBaseUrl() {
+  return requireContextValue(getRemixerContext(), 'authBrokerBaseUrl').replace(/\/+$/, '');
+}
+
+export function getRuntimeUrl() {
+  const ctx = getRemixerContext();
+  return (ctx.runtimeUrl || `${getSupabaseUrl().replace(/\/+$/, '')}/functions/v1`).replace(/\/+$/, '');
+}

package/templates/base/remixer/core.ts

@@ -0,0 +1,85 @@
+import { getProjectSession } from './supabase';
+import { clearAnonymousToken, getAnonymousToken } from './anonToken';
+import { getRuntimeUrl } from './context';
+import { createDpopProof } from './dpop';
+
+export type RemixerRecordData = Record<string, unknown>;
+
+type RuntimeAuthHeaders = {
+  headers: Record<string, string>;
+  tokenSource: 'anonymous' | 'session';
+};
+
+async function runtimeAuthHeaders(url: string, method: string): Promise<RuntimeAuthHeaders> {
+  const session = await getProjectSession();
+  const tokenSource = session?.access_token ? 'session' : 'anonymous';
+  const token = session?.access_token ?? await getAnonymousToken();
+
+  return {
+    headers: {
+      Authorization: `Bearer ${token}`,
+      DPoP: await createDpopProof(url, method),
+    },
+    tokenSource,
+  };
+}
+
+export async function runtimeHeaders(url: string, method: string) {
+  return (await runtimeAuthHeaders(url, method)).headers;
+}
+
+export async function runtimeJsonFetch(
+  url: string,
+  method: 'GET' | 'POST',
+  body?: RemixerRecordData,
+  retryOnUnauthorized = true,
+) {
+  const { headers, tokenSource } = await runtimeAuthHeaders(url, method);
+  const response = await fetch(url, {
+    method,
+    headers: {
+      ...headers,
+      'Content-Type': 'application/json',
+    },
+    body: body ? JSON.stringify(body) : undefined,
+  });
+
+  if (response.status === 401 && retryOnUnauthorized && tokenSource === 'anonymous') {
+    clearAnonymousToken();
+    return runtimeJsonFetch(url, method, body, false);
+  }
+
+  return response;
+}
+
+export async function runtimeDataFetch<T>(path: string, body: RemixerRecordData): Promise<T> {
+  const url = `${getRuntimeUrl()}/${path}`;
+  const method = 'POST';
+  const response = await runtimeJsonFetch(url, method, body);
+
+  if (!response.ok) {
+    const error = await response.json().catch(() => ({}));
+    throw new Error(error.message || error.error || `Remixer data request failed (${response.status})`);
+  }
+
+  return response.json();
+}
+
+export async function remixerFunctionFetch<T>(
+  path: string,
+  options: { method?: 'GET' | 'POST'; body?: RemixerRecordData; query?: Record<string, string | number | boolean | undefined> } = {},
+): Promise<T> {
+  const url = new URL(`${getRuntimeUrl()}/${path}`);
+  Object.entries(options.query || {}).forEach(([key, value]) => {
+    if (value !== undefined) url.searchParams.set(key, String(value));
+  });
+  const method = options.method || 'POST';
+  const response = await runtimeJsonFetch(url.toString(), method, options.body);
+
+  if (!response.ok) {
+    const error = await response.json().catch(() => ({}));
+    throw new Error(error.message || error.error || `Remixer request failed (${response.status})`);
+  }
+
+  return response.json();
+}