dh-remixer-sdk 0.0.29-dfab95e → 0.0.29-eafb9f2

package/package.json

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

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/filemap.json

@@ -9,13 +9,17 @@
   "robots.txt": "public/robots.txt",
   ".htaccess": "public/.htaccess",
   "components/seo/SEOHead.tsx": "components/seo/SEOHead.tsx",
-  "supabase.ts": "lib/supabase.ts",
   "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/storage.ts": "lib/remixer/storage.ts",
+  "remixer/supabase.ts": "lib/remixer/supabase.ts"
 }

package/templates/base/index.tsx

@@ -34,4 +34,4 @@ root.render(
       </LanguageProvider>
     </HelmetProvider>
   </React.StrictMode>
-);
+);

package/templates/base/package.json

@@ -11,18 +11,23 @@
     "remixer-sdk:update": "bun install dh-remixer-sdk@${REMIXER_SDK_TAG:-latest} && sdk-update"
   },
   "dependencies": {
+    "@internationalized/date": "3.10.0",
     "@openobserve/browser-logs": "0.3.1",
     "@openobserve/browser-rum-slim": "0.3.1",
-    "@internationalized/date": "3.10.0",
+    "@react-three/drei": "10.0.6",
+    "@react-three/fiber": "9.5.0",
+    "@react-three/postprocessing": "3.0.4",
     "@supabase/supabase-js": "2.86.0",
     "date-fns": "4.1.0",
     "framer-motion": "12.23.24",
     "lucide-react": "0.554.0",
+    "postprocessing": "6.37.0",
     "react": "19.2.0",
     "react-aria-components": "1.11.0",
     "react-dom": "19.2.0",
     "react-helmet-async": "3.0.0",
-    "react-router-dom": "7.9.6"
+    "react-router-dom": "7.9.6",
+    "three": "0.171.0"
   },
   "devDependencies": {
     "@types/node": "22.19.1",

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

@@ -1,4 +1,40 @@
-import { getProjectSession, isValidProjectSession, supabase } from '../supabase';
+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,
@@ -15,6 +51,36 @@ export const auth = {
       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

@@ -1,18 +1,62 @@
-import { authHeader } from '../supabase';
+import { getProjectSession } from './supabase';
+import { clearAnonymousToken, getAnonymousToken } from './anonToken';
+import { getRuntimeUrl } from './context';
+import { createDpopProof } from './dpop';
 
 export type RemixerRecordData = Record<string, unknown>;
 
-export async function runtimeDataFetch<T>(path: string, body: RemixerRecordData): Promise<T> {
-  const headers = await authHeader();
-  const response = await fetch(`${import.meta.env.VITE_SUPABASE_URL}/functions/v1/${path}`, {
-    method: 'POST',
+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: JSON.stringify(body),
+    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})`);
@@ -25,20 +69,12 @@ export async function remixerFunctionFetch<T>(
   path: string,
   options: { method?: 'GET' | 'POST'; body?: RemixerRecordData; query?: Record<string, string | number | boolean | undefined> } = {},
 ): Promise<T> {
-  const headers = await authHeader();
-  const url = new URL(`${import.meta.env.VITE_SUPABASE_URL}/functions/v1/${path}`);
+  const url = new URL(`${getRuntimeUrl()}/${path}`);
   Object.entries(options.query || {}).forEach(([key, value]) => {
     if (value !== undefined) url.searchParams.set(key, String(value));
   });
-
-  const response = await fetch(url.toString(), {
-    method: options.method || 'POST',
-    headers: {
-      ...headers,
-      'Content-Type': 'application/json',
-    },
-    body: options.body ? JSON.stringify(options.body) : undefined,
-  });
+  const method = options.method || 'POST';
+  const response = await runtimeJsonFetch(url.toString(), method, options.body);
 
   if (!response.ok) {
     const error = await response.json().catch(() => ({}));

package/templates/base/remixer/data.ts

@@ -1,4 +1,4 @@
-import { supabase } from '../supabase';
+import { supabase } from './supabase';
 import { runtimeDataFetch } from './core';
 import type { RemixerRecordData } from './core';
 

package/templates/base/remixer/dpop.ts

@@ -0,0 +1,128 @@
+const DB_NAME = 'remixer-dpop';
+const STORE_NAME = 'keys';
+const KEY_ID = 'default';
+
+type StoredKeyPair = {
+  privateKey: CryptoKey;
+  publicKey: CryptoKey;
+};
+
+let cachedKeyPair: Promise<StoredKeyPair> | null = null;
+let cachedPublicJwk: Promise<JsonWebKey> | null = null;
+let cachedThumbprint: Promise<string> | null = null;
+
+function openDb(): Promise<IDBDatabase> {
+  return new Promise((resolve, reject) => {
+    const request = indexedDB.open(DB_NAME, 1);
+    request.onupgradeneeded = () => {
+      request.result.createObjectStore(STORE_NAME);
+    };
+    request.onsuccess = () => resolve(request.result);
+    request.onerror = () => reject(request.error);
+  });
+}
+
+async function idbGet<T>(key: string): Promise<T | undefined> {
+  const db = await openDb();
+  return new Promise((resolve, reject) => {
+    const tx = db.transaction(STORE_NAME, 'readonly');
+    const request = tx.objectStore(STORE_NAME).get(key);
+    request.onsuccess = () => resolve(request.result as T | undefined);
+    request.onerror = () => reject(request.error);
+    tx.oncomplete = () => db.close();
+  });
+}
+
+async function idbSet(key: string, value: unknown): Promise<void> {
+  const db = await openDb();
+  return new Promise((resolve, reject) => {
+    const tx = db.transaction(STORE_NAME, 'readwrite');
+    const request = tx.objectStore(STORE_NAME).put(value, key);
+    request.onsuccess = () => resolve();
+    request.onerror = () => reject(request.error);
+    tx.oncomplete = () => db.close();
+  });
+}
+
+function base64Url(bytes: ArrayBuffer | Uint8Array) {
+  let raw = '';
+  for (const byte of new Uint8Array(bytes)) raw += String.fromCharCode(byte);
+  return btoa(raw).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/g, '');
+}
+
+function canonicalizeJwk(jwk: JsonWebKey) {
+  return {
+    crv: jwk.crv,
+    kty: jwk.kty,
+    x: jwk.x,
+    y: jwk.y,
+  };
+}
+
+async function generateKeyPair() {
+  return crypto.subtle.generateKey(
+    { name: 'ECDSA', namedCurve: 'P-256' },
+    false,
+    ['sign', 'verify'],
+  ) as Promise<CryptoKeyPair>;
+}
+
+export async function getDpopKeyPair() {
+  if (!cachedKeyPair) {
+    cachedKeyPair = (async () => {
+      const stored = await idbGet<StoredKeyPair>(KEY_ID);
+      if (stored?.privateKey && stored?.publicKey) return stored;
+
+      const pair = await generateKeyPair();
+      const value = { privateKey: pair.privateKey, publicKey: pair.publicKey };
+      await idbSet(KEY_ID, value);
+      return value;
+    })();
+  }
+  return cachedKeyPair;
+}
+
+export async function getPublicJwk() {
+  if (!cachedPublicJwk) {
+    cachedPublicJwk = (async () => {
+      const { publicKey } = await getDpopKeyPair();
+      const jwk = await crypto.subtle.exportKey('jwk', publicKey);
+      return canonicalizeJwk(jwk);
+    })();
+  }
+  return cachedPublicJwk;
+}
+
+export async function getThumbprint() {
+  if (!cachedThumbprint) {
+    cachedThumbprint = (async () => {
+      const canonical = JSON.stringify(await getPublicJwk());
+      const digest = await crypto.subtle.digest('SHA-256', new TextEncoder().encode(canonical));
+      return base64Url(digest);
+    })();
+  }
+  return cachedThumbprint;
+}
+
+export async function createDpopProof(url: string, method: string) {
+  const { privateKey } = await getDpopKeyPair();
+  const publicJwk = await getPublicJwk();
+  const header = {
+    typ: 'dpop+jwt',
+    alg: 'ES256',
+    jwk: publicJwk,
+  };
+  const payload = {
+    htm: method.toUpperCase(),
+    htu: url,
+    iat: Math.floor(Date.now() / 1000),
+    jti: crypto.randomUUID(),
+  };
+  const signingInput = `${base64Url(new TextEncoder().encode(JSON.stringify(header)))}.${base64Url(new TextEncoder().encode(JSON.stringify(payload)))}`;
+  const signature = await crypto.subtle.sign(
+    { name: 'ECDSA', hash: 'SHA-256' },
+    privateKey,
+    new TextEncoder().encode(signingInput),
+  );
+  return `${signingInput}.${base64Url(signature)}`;
+}

package/templates/base/remixer/ecommerce.ts

@@ -81,9 +81,28 @@ export type RemixerStripeSubscription = {
   created_at: string | null;
 };
 
+export type RemixerParcel = {
+  length: string;
+  width: string;
+  height: string;
+  distanceUnit: 'in' | 'cm';
+  weight: string;
+  massUnit: 'lb' | 'kg';
+};
+
+export type RemixerShippingLineItem = {
+  quantity: number;
+  totalPrice: string;
+  currency: string;
+  weight: string;
+  weightUnit: 'lb' | 'kg' | 'oz' | 'g';
+  title?: string;
+  sku?: string;
+};
+
 export type RemixerShippingRate = {
   object_id: string;
-  amount: string | number;
+  amount: string;
   currency: string;
   provider: string;
   provider_image_75?: string;
@@ -94,10 +113,10 @@ export type RemixerShippingRate = {
 };
 
 export type RemixerShippingRatesParams = {
-  address_from?: Record<string, unknown>;
-  address_to: RemixerShippingAddress;
-  parcel?: Record<string, unknown>;
-  line_items?: Record<string, unknown>[];
+  addressTo: RemixerShippingAddress;
+  addressFrom?: RemixerShippingAddress;
+  parcel?: RemixerParcel;
+  lineItems?: RemixerShippingLineItem[];
 };
 
 export type RemixerShippingRatesResponse = {
@@ -134,6 +153,29 @@ export type RemixerTrackingResponse = {
   eta?: string | null;
 };
 
+function mapParcel(parcel: RemixerParcel) {
+  return {
+    length: parcel.length,
+    width: parcel.width,
+    height: parcel.height,
+    distance_unit: parcel.distanceUnit,
+    weight: parcel.weight,
+    mass_unit: parcel.massUnit,
+  };
+}
+
+function mapLineItem(item: RemixerShippingLineItem) {
+  return {
+    quantity: item.quantity,
+    total_price: item.totalPrice,
+    currency: item.currency,
+    weight: item.weight,
+    weight_unit: item.weightUnit,
+    title: item.title,
+    sku: item.sku,
+  };
+}
+
 export const ecommerce = {
   createCheckoutSession(params: RemixerCheckoutParams) {
     return runtimeDataFetch<RemixerCheckoutSession>('remixer-runtime/ecommerce/checkout-session', {
@@ -162,7 +204,12 @@ export const ecommerce = {
 
   shipping: {
     getRates(params: RemixerShippingRatesParams) {
-      return runtimeDataFetch<RemixerShippingRatesResponse>('remixer-runtime/shipping/rates', params as unknown as RemixerRecordData);
+      return runtimeDataFetch<RemixerShippingRatesResponse>('remixer-runtime/shipping/rates', {
+        address_to: params.addressTo,
+        address_from: params.addressFrom,
+        parcel: params.parcel ? mapParcel(params.parcel) : undefined,
+        line_items: params.lineItems ? params.lineItems.map(mapLineItem) : undefined,
+      });
     },
 
     validateAddress(address: RemixerShippingAddress) {

package/templates/base/remixer/forms.ts

@@ -0,0 +1,12 @@
+import { remixerFunctionFetch } from './core';
+
+export type RemixerFormPayload = Record<string, unknown>;
+
+export const forms = {
+  submit<T = unknown>(payload: RemixerFormPayload): Promise<T> {
+    return remixerFunctionFetch<T>('remixer-runtime/forms/submit', {
+      method: 'POST',
+      body: payload,
+    });
+  },
+};

package/templates/base/remixer/runtime.ts

@@ -1,4 +1,5 @@
-import { authHeader } from '../supabase';
+import { getRuntimeUrl } from './context';
+import { runtimeJsonFetch } from './core';
 
 type RemixerActionPayload = Record<string, unknown>;
 
@@ -53,15 +54,9 @@ async function sha256Hex(file: File): Promise<string> {
 }
 
 async function runtimeFetch<T>(path: string, body: RemixerActionPayload): Promise<T> {
-  const headers = await authHeader();
-  const response = await fetch(`${import.meta.env.VITE_SUPABASE_URL}/functions/v1/${path}`, {
-    method: 'POST',
-    headers: {
-      ...headers,
-      'Content-Type': 'application/json',
-    },
-    body: JSON.stringify(body),
-  });
+  const url = `${getRuntimeUrl()}/${path}`;
+  const method = 'POST';
+  const response = await runtimeJsonFetch(url, method, body);
 
   if (!response.ok) {
     const error = await response.json().catch(() => ({}));

package/templates/base/remixer/supabase.ts

@@ -0,0 +1,49 @@
+import { createClient } from '@supabase/supabase-js';
+import type { Session } from '@supabase/supabase-js';
+import { getAnonymousToken } from './anonToken';
+import { getProjectId, getSupabaseAnonKey, getSupabaseUrl } from './context';
+
+/**
+ * User-scoped Supabase client for auth session state and realtime channels.
+ * Data reads/writes should go through remixer.data so runtime enforcement
+ * stays centralized.
+ */
+export const supabase = createClient(
+  getSupabaseUrl(),
+  getSupabaseAnonKey(),
+);
+
+export function isValidProjectSession(session: Session | null) {
+  if (!session) return true;
+  const sessionProjectId = session?.user?.app_metadata?.project_id;
+  return sessionProjectId === getProjectId();
+}
+
+export async function getProjectSession() {
+  const {
+    data: { session },
+  } = await supabase.auth.getSession();
+
+  if (!isValidProjectSession(session)) {
+    await supabase.auth.signOut({ scope: 'local' });
+    return null;
+  }
+
+  return session;
+}
+
+/**
+ * authHeader() — helper for manual fetch() calls (Edge Functions/REST)
+ *  • Returns `{ Authorization: 'Bearer <token>' }` where `<token>` is:
+ *      - the logged-in user's JWT (if session exists), or
+ *      - a short-lived anonymous project token minted by the auth broker
+ *
+ *  project_id is stamped into app_metadata by the auth broker at login
+ *  time — no client-side updateUser() needed.
+ */
+export async function authHeader() {
+  const session = await getProjectSession();
+  const token = session?.access_token ?? await getAnonymousToken();
+
+  return { Authorization: `Bearer ${token}` };
+}

package/templates/base/remixer.ts

@@ -2,6 +2,7 @@ import { actions } from './remixer/actions';
 import { auth } from './remixer/auth';
 import { data } from './remixer/data';
 import { ecommerce } from './remixer/ecommerce';
+import { forms } from './remixer/forms';
 import { storage } from './remixer/storage';
 
 export type { RemixerRecordData } from './remixer/core';
@@ -26,7 +27,9 @@ export type {
   RemixerCheckoutItem,
   RemixerCheckoutParams,
   RemixerCheckoutSession,
+  RemixerParcel,
   RemixerShippingAddress,
+  RemixerShippingLineItem,
   RemixerShippingRate,
   RemixerShippingRatesParams,
   RemixerShippingRatesResponse,
@@ -43,6 +46,7 @@ export const remixer = {
   auth,
   data,
   ecommerce,
+  forms,
   storage,
 };
 

package/templates/base/vite.config.ts

@@ -17,7 +17,7 @@ function injectRemixerBadgePlugin(): Plugin {
 
     transformIndexHtml(html) {
       try {
-        const IS_SHOW_REMIXER_BADGE: boolean = process.env.IS_SHOW_REMIXER_BADGE as boolean | undefined || false;
+        const IS_SHOW_REMIXER_BADGE = process.env.IS_SHOW_REMIXER_BADGE === 'true';
         const REMIXER_BADGE_TYPE: string = process.env.REMIXER_BADGE_TYPE || 'DEFAULT';
 
         const domain = process.env.NEXT_PUBLIC_DOMAIN || '';

package/templates/ecommerce/filemap.json

@@ -1,5 +1 @@
-{
-  "stripe-checkout.ts": "lib/stripe-checkout.ts",
-  "supabase.ts": "lib/supabase.ts",
-  "shipping.ts": "lib/shipping.ts"
-}
+{}

package/templates/immersive/ImmersiveStory.tsx

@@ -95,36 +95,32 @@ export function ImmersiveStory<K extends string>({
 
   const activeOverlay = activeBeat ? beats[activeBeat]?.overlay : null;
 
-  return (
-    <>
-      <Stage3D
-        palette={palette}
-        environment={environment}
-        camera={camera}
-        effects={effects}
-        shadows={shadows}
-      >
-        <ScrollStory beats={beatHeights}>{scene}</ScrollStory>
-      </Stage3D>
-      {activeBeat && activeOverlay ? (
-        <div
-          className="fixed inset-0 z-20 pointer-events-none"
-          aria-hidden="false"
+  const overlayNode =
+    activeBeat && activeOverlay ? (
+      <AnimatePresence mode="wait">
+        <motion.div
+          key={activeBeat}
+          className="absolute inset-0"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          transition={overlayTransition}
         >
-          <AnimatePresence mode="wait">
-            <motion.div
-              key={activeBeat}
-              className="absolute inset-0"
-              initial={{ opacity: 0 }}
-              animate={{ opacity: 1 }}
-              exit={{ opacity: 0 }}
-              transition={overlayTransition}
-            >
-              {activeOverlay}
-            </motion.div>
-          </AnimatePresence>
-        </div>
-      ) : null}
-    </>
+          {activeOverlay}
+        </motion.div>
+      </AnimatePresence>
+    ) : null;
+
+  return (
+    <Stage3D
+      palette={palette}
+      environment={environment}
+      camera={camera}
+      effects={effects}
+      shadows={shadows}
+      overlay={overlayNode}
+    >
+      <ScrollStory beats={beatHeights}>{scene}</ScrollStory>
+    </Stage3D>
   );
 }

package/templates/immersive/Stage3D.tsx

@@ -39,6 +39,10 @@ interface Stage3DProps {
   maxDprDesktop?: number;
   maxDprMobile?: number;
   className?: string;
+  // DOM laid over the canvas inside the same sticky viewport-locked layer.
+  // Use this instead of a sibling `position: fixed` overlay — the canvas and
+  // overlay share the story section's bounds and cannot paint outside it.
+  overlay?: ReactNode;
   children: ReactNode;
 }
 
@@ -64,7 +68,10 @@ function isAnchorActive(reg: AnchorRegistration): boolean {
   return threshold(w);
 }
 
-// One Canvas per page. Mounts lazily only while at least one anchor is active.
+// One Canvas per immersive section. Canvas + overlay live inside a sticky
+// viewport-locked layer scoped to the section's DOM, so they cannot paint
+// over content that follows. Canvas mounts lazily only while an anchor is
+// active.
 export function Stage3D({
   palette,
   fallback = null,
@@ -75,6 +82,7 @@ export function Stage3D({
   maxDprDesktop = 2,
   maxDprMobile = 1.5,
   className,
+  overlay,
   children,
 }: Stage3DProps) {
   const [anchors, setAnchors] = useState<AnchorRegistration[]>([]);
@@ -154,41 +162,49 @@ export function Stage3D({
 
   return (
     <StageContext.Provider value={contextValue}>
-      {shouldMountCanvas ? (
+      <section
+        className={['relative grid', className].filter(Boolean).join(' ')}
+        style={{ gridTemplateColumns: '1fr', gridTemplateRows: 'auto' }}
+      >
         <div
-          className={['fixed inset-0 z-0 pointer-events-none', className]
-            .filter(Boolean)
-            .join(' ')}
-          aria-hidden="true"
+          className="sticky top-0 h-screen overflow-hidden pointer-events-none"
+          style={{ gridArea: '1 / 1' }}
         >
-          <PrerenderGate fallback={fallback} className="absolute inset-0">
-            <CanvasErrorBoundary fallback={fallback}>
-              <Canvas
-                dpr={[1, maxDpr]}
-                shadows={shadows}
-                camera={{
-                  position: camera?.position ?? [0, 0, 5],
-                  fov: camera?.fov ?? 42,
-                }}
-                gl={{ antialias: true, powerPreference: 'high-performance' }}
-              >
-                <Suspense fallback={null}>
-                  <Atmosphere palette={palette} />
-                  <SceneLighting palette={palette} />
-                  {environment && (
-                    <Environment preset={environment as any} />
-                  )}
-                  <AnchorsRenderer anchors={anchors} />
-                </Suspense>
-                {effectNodes.length > 0 ? (
-                  <EffectComposer>{effectNodes}</EffectComposer>
-                ) : null}
-              </Canvas>
-            </CanvasErrorBoundary>
-          </PrerenderGate>
+          {shouldMountCanvas ? (
+            <div className="absolute inset-0" aria-hidden="true">
+              <PrerenderGate fallback={fallback} className="absolute inset-0">
+                <CanvasErrorBoundary fallback={fallback}>
+                  <Canvas
+                    dpr={[1, maxDpr]}
+                    shadows={shadows}
+                    camera={{
+                      position: camera?.position ?? [0, 0, 5],
+                      fov: camera?.fov ?? 42,
+                    }}
+                    gl={{ antialias: true, powerPreference: 'high-performance' }}
+                  >
+                    <Suspense fallback={null}>
+                      <Atmosphere palette={palette} />
+                      <SceneLighting palette={palette} />
+                      {environment && (
+                        <Environment preset={environment as any} />
+                      )}
+                      <AnchorsRenderer anchors={anchors} />
+                    </Suspense>
+                    {effectNodes.length > 0 ? (
+                      <EffectComposer>{effectNodes}</EffectComposer>
+                    ) : null}
+                  </Canvas>
+                </CanvasErrorBoundary>
+              </PrerenderGate>
+            </div>
+          ) : null}
+          {overlay ? (
+            <div className="absolute inset-0">{overlay}</div>
+          ) : null}
         </div>
-      ) : null}
-      {children}
+        <div style={{ gridArea: '1 / 1' }}>{children}</div>
+      </section>
     </StageContext.Provider>
   );
 }

package/templates/immersive/package.json

@@ -2,12 +2,5 @@
   "name": "remixer-immersive",
   "remixerMetadata": {
     "template": "immersive"
-  },
-  "dependencies": {
-    "three": "0.171.0",
-    "@react-three/fiber": "9.5.0",
-    "@react-three/drei": "10.0.6",
-    "@react-three/postprocessing": "3.0.4",
-    "postprocessing": "6.37.0"
   }
 }

package/templates/base/supabase.ts

@@ -1,73 +0,0 @@
-
-import { createClient } from '@supabase/supabase-js';
-import type { Session } from '@supabase/supabase-js';
-
-/**
- * 1) supabase — user-scoped client
- *    • Before login: uses the project access token
- *    • After login: automatically swaps to the user's JWT
- */
-export const supabase = createClient(
-  import.meta.env.VITE_SUPABASE_URL!,
-  import.meta.env.VITE_SUPABASE_ANON_KEY!,
-);
-
-/**
- * 2) supabaseProject — tenant-wide client
- *    • Always uses the project access token
- *    • For public or calendar-style views where you want every project's data
- */
-export const supabaseProject = createClient(
-  import.meta.env.VITE_SUPABASE_URL!,
-  import.meta.env.VITE_SUPABASE_ANON_KEY!,
-  {
-    global: {
-      headers: {
-        Authorization: `Bearer ${import.meta.env.VITE_PROJECT_ACCESS_TOKEN}`,
-      },
-    },
-    auth: {
-      // disable session persistence so it never picks up a user JWT
-      storageKey: 'sb-project-client',
-      detectSessionInUrl: false,
-      persistSession: false,
-      autoRefreshToken: false,
-    },
-  }
-);
-
-export function isValidProjectSession(session: Session | null) {
-  if (!session) return true;
-  const sessionProjectId = session?.user?.app_metadata?.project_id;
-  return sessionProjectId === import.meta.env.VITE_PROJECT_ID;
-}
-
-export async function getProjectSession() {
-  const {
-    data: { session },
-  } = await supabase.auth.getSession();
-
-  if (!isValidProjectSession(session)) {
-    await supabase.auth.signOut({ scope: 'local' });
-    return null;
-  }
-
-  return session;
-}
-
-/**
- * authHeader() — helper for manual fetch() calls (Edge Functions/REST)
- *  • Returns `{ Authorization: 'Bearer <token>' }` where `<token>` is:
- *      - the logged-in user's JWT (if session exists), or
- *      - the project access token (anonymous)
- *
- *  project_id is stamped into app_metadata by the auth broker at login
- *  time — no client-side updateUser() needed.
- */
-export async function authHeader() {
-  const session = await getProjectSession();
-  const token =
-    session?.access_token ?? import.meta.env.VITE_PROJECT_ACCESS_TOKEN;
-
-  return { Authorization: `Bearer ${token}` };
-}

package/templates/ecommerce/shipping.ts

@@ -1,68 +0,0 @@
-import { remixer } from "@/lib/remixer";
-import type { RemixerShippingAddress } from "@/lib/remixer";
-
-export type ShippingAddress = RemixerShippingAddress;
-
-export interface Parcel {
-  length: string;
-  width: string;
-  height: string;
-  distance_unit: "in" | "cm";
-  weight: string;
-  mass_unit: "lb" | "kg";
-}
-
-export interface ShippingLineItem {
-  quantity: number;
-  total_price: string;
-  currency: string;
-  weight: string;
-  weight_unit: "lb" | "kg" | "oz" | "g";
-  title?: string;
-  sku?: string;
-}
-
-export interface ShippingRate {
-  object_id: string;
-  amount: string;
-  currency: string;
-  provider: string;
-  provider_image_75: string;
-  servicelevel_name: string;
-  servicelevel_token: string;
-  estimated_days: number;
-  duration_terms: string;
-}
-
-export interface ShippingRatesResponse {
-  rates: ShippingRate[];
-  shipment_id: string;
-}
-
-export interface AddressValidationResponse {
-  is_valid: boolean;
-  messages: { source: string; code: string; type: string; text: string }[];
-}
-
-export async function getShippingRates(
-  addressTo: ShippingAddress,
-  options: {
-    lineItems?: ShippingLineItem[];
-    parcel?: Parcel;
-    addressFrom?: ShippingAddress;
-  }
-): Promise<ShippingRatesResponse> {
-  const response = await remixer.ecommerce.shipping.getRates({
-    address_to: addressTo,
-    address_from: options.addressFrom as unknown as Record<string, unknown> | undefined,
-    parcel: options.parcel as unknown as Record<string, unknown> | undefined,
-    line_items: options.lineItems as unknown as Record<string, unknown>[] | undefined,
-  });
-  return response as ShippingRatesResponse;
-}
-
-export async function validateAddress(
-  address: ShippingAddress
-): Promise<AddressValidationResponse> {
-  return remixer.ecommerce.shipping.validateAddress(address) as Promise<AddressValidationResponse>;
-}

package/templates/ecommerce/stripe-checkout.ts

@@ -1,41 +0,0 @@
-import { remixer } from "@/lib/remixer";
-import type { RemixerCheckoutParams, RemixerCheckoutSession, RemixerShippingAddress } from "@/lib/remixer";
-
-export interface CreateCheckoutSessionParams {
-  items: { priceId: string; quantity: number }[];
-  mode: "payment" | "subscription";
-  successUrl: string;
-  cancelUrl: string;
-  guestEmail?: string;
-  shippingRateId?: string;
-  shippingCost?: number;
-  shippingLabel?: string;
-  shippingAddress?: RemixerShippingAddress;
-}
-
-export type CheckoutSessionResponse = RemixerCheckoutSession;
-
-export const createCheckoutSession = async (
-  params: CreateCheckoutSessionParams
-): Promise<CheckoutSessionResponse> => {
-  const user = await remixer.auth.getUser();
-  const payload: RemixerCheckoutParams = {
-    items: params.items,
-    mode: params.mode,
-    successUrl: params.successUrl,
-    cancelUrl: params.cancelUrl,
-  };
-
-  if (!user && params.guestEmail) {
-    payload.guestEmail = params.guestEmail;
-  }
-
-  if (params.shippingRateId && params.mode !== 'subscription') {
-    payload.shippingRateId = params.shippingRateId;
-    payload.shippingCost = params.shippingCost;
-    payload.shippingLabel = params.shippingLabel;
-    payload.shippingAddress = params.shippingAddress;
-  }
-
-  return remixer.ecommerce.createCheckoutSession(payload);
-};

package/templates/ecommerce/supabase.ts

@@ -1,73 +0,0 @@
-
-import { createClient } from '@supabase/supabase-js';
-import type { Session } from '@supabase/supabase-js';
-
-/**
- * 1) supabase — user-scoped client
- *    • Before login: uses the project access token
- *    • After login: automatically swaps to the user's JWT
- */
-export const supabase = createClient(
-  import.meta.env.VITE_SUPABASE_URL!,
-  import.meta.env.VITE_SUPABASE_ANON_KEY!,
-);
-
-/**
- * 2) supabaseProject — tenant-wide client
- *    • Always uses the project access token
- *    • For public or calendar-style views where you want every project's data
- */
-export const supabaseProject = createClient(
-  import.meta.env.VITE_SUPABASE_URL!,
-  import.meta.env.VITE_SUPABASE_ANON_KEY!,
-  {
-    global: {
-      headers: {
-        Authorization: `Bearer ${import.meta.env.VITE_PROJECT_ACCESS_TOKEN}`,
-      },
-    },
-    auth: {
-      // disable session persistence so it never picks up a user JWT
-      storageKey: 'sb-project-client',
-      detectSessionInUrl: false,
-      persistSession: false,
-      autoRefreshToken: false,
-    },
-  }
-);
-
-export function isValidProjectSession(session: Session | null) {
-  if (!session) return true;
-  const sessionProjectId = session?.user?.app_metadata?.project_id;
-  return sessionProjectId === import.meta.env.VITE_PROJECT_ID;
-}
-
-export async function getProjectSession() {
-  const {
-    data: { session },
-  } = await supabase.auth.getSession();
-
-  if (!isValidProjectSession(session)) {
-    await supabase.auth.signOut({ scope: 'local' });
-    return null;
-  }
-
-  return session;
-}
-
-/**
- * authHeader() — helper for manual fetch() calls (Edge Functions/REST)
- *  • Returns `{ Authorization: 'Bearer <token>' }` where `<token>` is:
- *      - the logged-in user's JWT (if session exists), or
- *      - the project access token (anonymous)
- *
- *  project_id is stamped into app_metadata by the auth broker at login
- *  time — no client-side updateUser() needed.
- */
-export async function authHeader() {
-  const session = await getProjectSession();
-  const token =
-    session?.access_token ?? import.meta.env.VITE_PROJECT_ACCESS_TOKEN;
-
-  return { Authorization: `Bearer ${token}` };
-}