@weaverse/next 0.1.0-alpha.1 → 0.1.0-alpha.11

package/dist/index.mjs

@@ -1,19 +1,91 @@
-import { buildWeaverseNextRequestInfo, generateDataFromSchema } from './chunk-SS6QUKYY.mjs';
-export { buildWeaverseNextRequestInfo, runWeaverseComponentLoaders } from './chunk-SS6QUKYY.mjs';
-import { WeaverseRoot, Weaverse, WeaverseItemStore } from '@weaverse/react';
+import { buildWeaverseNextRequestInfo, generateDataFromSchema } from './chunk-XXGMPTWH.mjs';
+export { buildWeaverseNextRequestInfo, formatWeaverseNextSeoMetadata, generateDataFromSchema, getWeaverseNextSeoMetadata, runWeaverseComponentLoaders } from './chunk-XXGMPTWH.mjs';
+import { WeaverseRoot, Weaverse, WeaverseItemStore, useSafeExternalStore } from '@weaverse/react';
 export { isBrowser, isIframe, useChildInstances, useItemInstance, useParentInstance, useWeaverse } from '@weaverse/react';
 import { createSchema } from '@weaverse/schema';
-export { createSchema } from '@weaverse/schema';
+export * from '@weaverse/schema';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { createContext, memo, useContext, useMemo, useRef, useEffect, useSyncExternalStore } from 'react';
+import { createContext, memo, useContext, useMemo, useEffect, useLayoutEffect, useRef, useSyncExternalStore } from 'react';
+import { useRouter } from 'next/navigation';
 
+function flattenItemData(update) {
+  let { data, ...rest } = update;
+  if (!(data && typeof data === "object" && !Array.isArray(data))) {
+    return rest;
+  }
+  return { ...data, ...rest };
+}
+var deferredItemUpdates = null;
+function collectDeferredItemUpdates(create) {
+  let previousQueue = deferredItemUpdates;
+  let queue = /* @__PURE__ */ new Set();
+  deferredItemUpdates = queue;
+  try {
+    return [create(), [...queue]];
+  } finally {
+    deferredItemUpdates = previousQueue;
+  }
+}
 var WeaverseNextItem = class extends WeaverseItemStore {
+  /**
+   * Cached merged snapshot (base `_store` + translations). Reset whenever the
+   * `_store` ref or the item's translation entry ref changes, so
+   * `useSyncExternalStore` sees a stable object between unrelated re-renders.
+   */
+  _cachedSnapshot = null;
+  _snapshotStoreRef = null;
+  _snapshotTranslationRef = null;
   constructor(initialData, weaverse) {
     super(initialData, weaverse);
-    let { data, ...rest } = initialData;
     let schemaData = generateDataFromSchema(this.Element?.schema);
-    Object.assign(this._store, schemaData, data, rest);
+    Object.assign(this._store, schemaData, flattenItemData(initialData));
   }
+  /**
+   * Flatten nested `data` on updates exactly like the constructor does. Core's
+   * `initProject()` calls `setData(item)` when a new runtime serves a page
+   * whose item instances already exist (e.g. locale/client navigation), and
+   * the inherited shallow merge would leave stale top-level props behind.
+   * Assigning through the inherited `data` setter swaps the `_store` ref,
+   * which invalidates the memoized snapshot below. The subscriber emit is
+   * queued instead of fired when a render-phase deferral is active (see
+   * `collectDeferredItemUpdates`).
+   */
+  setData = (update) => {
+    this.data = flattenItemData(update);
+    if (deferredItemUpdates) {
+      deferredItemUpdates.add(this);
+    } else {
+      this.triggerUpdate();
+    }
+    return this.data;
+  };
+  /**
+   * Overlay item-level translations onto the base store when the runtime is in
+   * translation mode. Mirrors Hydrogen's `WeaverseHydrogenItem.getSnapShot()`:
+   * memoized by `_store` ref + translation entry ref so the returned object is
+   * referentially stable, and a fast path that returns the base store untouched
+   * when the item has no translations.
+   */
+  getSnapShot = () => {
+    let base = this._store;
+    let translations = this.weaverse.translationMap[this._id];
+    if (!translations) {
+      return base;
+    }
+    if (this._cachedSnapshot && this._snapshotStoreRef === base && this._snapshotTranslationRef === translations) {
+      return this._cachedSnapshot;
+    }
+    let merged = { ...base };
+    for (let [key, entry] of Object.entries(translations)) {
+      if (entry.translatedValue !== void 0) {
+        merged[key] = entry.translatedValue;
+      }
+    }
+    this._cachedSnapshot = merged;
+    this._snapshotStoreRef = base;
+    this._snapshotTranslationRef = translations;
+    return merged;
+  };
 };
 function ensureNextItemConstructor() {
   if (!Weaverse.ItemConstructor || Weaverse.ItemConstructor === WeaverseItemStore || Weaverse.ItemConstructor === WeaverseNextItem) {
@@ -138,30 +210,258 @@ function createWeaverseNextThemeSettingsStore(options = {}) {
   };
   return store;
 }
+function getNestedKey(obj, path, fallback) {
+  let keys = path.split(".");
+  let current = obj;
+  for (let key of keys) {
+    if (current == null || typeof current !== "object") {
+      return fallback;
+    }
+    current = current[key];
+  }
+  if (typeof current === "string") {
+    return current;
+  }
+  return fallback;
+}
+function interpolate(template, variables) {
+  if (!variables) {
+    return template;
+  }
+  return template.replace(/\{\{(\w+)\}\}/g, (match, key) => {
+    let value = variables[key];
+    return value === void 0 ? match : String(value);
+  });
+}
+var TranslationContext = createContext(null);
+TranslationContext.displayName = "WeaverseNextTranslationContext";
+function createTranslate(sources) {
+  let { staticContent, merchantOverrides, designOverrides, externalT } = sources;
+  return (key, variables) => {
+    if (externalT) {
+      let external = externalT(key, variables);
+      if (external && external !== key) {
+        return external;
+      }
+    }
+    let design = designOverrides && Object.hasOwn(designOverrides, key) ? designOverrides[key] : void 0;
+    let override = merchantOverrides ? getNestedKey(merchantOverrides, key) : void 0;
+    let staticValue = getNestedKey(staticContent, key);
+    let raw = design ?? override ?? staticValue ?? key;
+    return interpolate(raw, variables);
+  };
+}
+var EMPTY = {};
+var NOOP_SUBSCRIBE = () => () => {
+};
+var NOOP_SNAPSHOT = () => EMPTY;
+function TranslationProvider({
+  staticContent,
+  merchantOverrides,
+  t: externalT,
+  translationStore,
+  themeTextStore,
+  children
+}) {
+  let store = translationStore ?? themeTextStore ?? null;
+  let designOverrides = useSafeExternalStore(
+    store?.subscribe ?? NOOP_SUBSCRIBE,
+    store?.getSnapshot ?? NOOP_SNAPSHOT,
+    store?.getServerSnapshot ?? NOOP_SNAPSHOT
+  );
+  let value = useMemo(
+    () => ({
+      t: createTranslate({
+        staticContent,
+        merchantOverrides,
+        designOverrides,
+        externalT
+      }),
+      translationStore: store,
+      // Deprecated alias — same instance, kept for backward compatibility.
+      themeTextStore: store,
+      merchantOverrides: merchantOverrides ?? null
+    }),
+    [staticContent, merchantOverrides, designOverrides, externalT, store]
+  );
+  return /* @__PURE__ */ jsx(TranslationContext.Provider, { value, children });
+}
+function useTranslation() {
+  let ctx = useContext(TranslationContext);
+  if (!ctx) {
+    throw new Error(
+      "useTranslation must be used within <TranslationProvider>. Wrap your app with <WeaverseNextRootProvider>."
+    );
+  }
+  return ctx;
+}
+var ThemeTextProvider = TranslationProvider;
+var useThemeText = useTranslation;
+
+// src/translation-store.ts
+var TranslationStore = class {
+  overrides = {};
+  listeners = /* @__PURE__ */ new Set();
+  setOverrides = (overrides) => {
+    this.overrides = { ...overrides };
+    this.emit();
+  };
+  updateOverrides = (newOverrides) => {
+    this.overrides = { ...this.overrides, ...newOverrides };
+    this.emit();
+  };
+  getSnapshot = () => this.overrides;
+  getServerSnapshot = () => this.overrides;
+  subscribe = (callback) => {
+    this.listeners.add(callback);
+    return () => {
+      this.listeners.delete(callback);
+    };
+  };
+  emit = () => {
+    for (const listener of Array.from(this.listeners)) {
+      try {
+        listener();
+      } catch (error) {
+        console.error("TranslationStore: Listener error", error);
+      }
+    }
+  };
+};
+var ThemeTextStore = TranslationStore;
+var WeaverseNextRootContext = createContext(null);
+function WeaverseNextRootProvider(props) {
+  let {
+    children,
+    initialThemeSettings,
+    merchantOverrides,
+    staticContent,
+    t,
+    themeSchema,
+    publicEnv
+  } = props;
+  let storeRef = useRef(null);
+  if (!storeRef.current) {
+    storeRef.current = createWeaverseNextThemeSettingsStore({
+      publicEnv,
+      schema: themeSchema,
+      settings: initialThemeSettings
+    });
+  }
+  let themeSettingsStore = storeRef.current;
+  let translationStoreRef = useRef(null);
+  if (!translationStoreRef.current) {
+    translationStoreRef.current = new TranslationStore();
+  }
+  let translationStore = translationStoreRef.current;
+  let appliedThemeSettingsRef = useRef(initialThemeSettings);
+  useEffect(() => {
+    if (initialThemeSettings && appliedThemeSettingsRef.current !== initialThemeSettings) {
+      themeSettingsStore.updateThemeSettings(initialThemeSettings);
+      appliedThemeSettingsRef.current = initialThemeSettings;
+    }
+  }, [initialThemeSettings, themeSettingsStore]);
+  let resolvedStaticContent = staticContent ?? getSchemaStaticContent(themeSchema);
+  let rootContextValue = useMemo(
+    () => ({
+      merchantOverrides,
+      staticContent: resolvedStaticContent,
+      themeSettingsStore,
+      translationStore
+    }),
+    [
+      merchantOverrides,
+      resolvedStaticContent,
+      themeSettingsStore,
+      translationStore
+    ]
+  );
+  let contextValue = useMemo(
+    () => ({
+      merchantOverrides,
+      themeSettings: themeSettingsStore.getSnapshot(),
+      themeSettingsStore,
+      translationStore
+    }),
+    [merchantOverrides, themeSettingsStore, translationStore]
+  );
+  return /* @__PURE__ */ jsx(WeaverseNextRootContext.Provider, { value: rootContextValue, children: /* @__PURE__ */ jsx(WeaverseNextContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    TranslationProvider,
+    {
+      merchantOverrides,
+      staticContent: resolvedStaticContent,
+      t,
+      translationStore,
+      children
+    }
+  ) }) });
+}
 var EMPTY_THEME_SETTINGS = {};
+var EMPTY_STATIC_CONTENT = {};
+function getSchemaStaticContent(schema) {
+  let i18n = schema?.i18n;
+  return i18n?.staticContent ?? EMPTY_STATIC_CONTENT;
+}
 var WeaverseNextContext = createContext(null);
 function WeaverseNextProvider(props) {
   let { children, client, rootData, pageData, commerce, themeSettings } = props;
+  let rootContext = useContext(WeaverseNextRootContext);
   let themeSettingsValue = themeSettings ?? client?.themeSettings ?? EMPTY_THEME_SETTINGS;
-  let themeSettingsStore = useMemo(
-    () => createWeaverseNextThemeSettingsStore({
+  let ownTranslationStoreRef = useRef(null);
+  if (!(rootContext || ownTranslationStoreRef.current)) {
+    ownTranslationStoreRef.current = new TranslationStore();
+  }
+  let translationStore = rootContext?.translationStore ?? ownTranslationStoreRef.current;
+  let staticContent = props.staticContent ?? rootContext?.staticContent ?? getSchemaStaticContent(client?.themeSchema);
+  let merchantOverrides = props.merchantOverrides ?? rootContext?.merchantOverrides;
+  let ownThemeSettingsStore = useMemo(() => {
+    if (rootContext) {
+      return null;
+    }
+    return createWeaverseNextThemeSettingsStore({
       schema: client?.themeSchema,
       settings: themeSettingsValue
-    }),
-    [client?.themeSchema, themeSettingsValue]
-  );
+    });
+  }, [rootContext, client?.themeSchema, themeSettingsValue]);
+  let themeSettingsStore = rootContext?.themeSettingsStore ?? ownThemeSettingsStore;
+  let mergedIntoRootRef = useRef(void 0);
+  useEffect(() => {
+    if (rootContext && themeSettingsValue !== EMPTY_THEME_SETTINGS && mergedIntoRootRef.current !== themeSettingsValue) {
+      rootContext.themeSettingsStore.updateThemeSettings(themeSettingsValue);
+      mergedIntoRootRef.current = themeSettingsValue;
+    }
+  }, [rootContext, themeSettingsValue]);
   let value = useMemo(
     () => ({
       client,
       rootData,
       pageData,
       commerce: commerce ?? client?.commerce,
+      merchantOverrides,
       themeSettings: themeSettingsStore.getSnapshot(),
-      themeSettingsStore
+      themeSettingsStore,
+      translationStore
     }),
-    [client, rootData, pageData, commerce, themeSettingsStore]
+    [
+      client,
+      rootData,
+      pageData,
+      commerce,
+      merchantOverrides,
+      themeSettingsStore,
+      translationStore
+    ]
   );
-  return /* @__PURE__ */ jsx(WeaverseNextContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx(WeaverseNextContext.Provider, { value, children: /* @__PURE__ */ jsx(
+    TranslationProvider,
+    {
+      merchantOverrides,
+      staticContent,
+      t: props.t,
+      translationStore,
+      children
+    }
+  ) });
 }
 
 // src/hooks.ts
@@ -245,9 +545,31 @@ var WeaverseNextRuntime = class extends Weaverse {
   isPreviewMode;
   isRevisionPreview;
   sectionType;
+  // ─── Item-level translation sidecar (design mode only) ─────────────
+  /**
+   * Translation map received from Builder in design mode, keyed by item ID.
+   * `WeaverseNextItem.getSnapShot()` overlays these onto the data handed to
+   * components, so translations render without mutating the base `_store`.
+   */
   translationMap = {};
-  translationLocale = "";
-  translationLanguageId = "";
+  translationLocale = String();
+  translationLanguageId = String();
+  /**
+   * Fresh page data captured while React was rendering. Runtime reuse happens
+   * inside the renderer's render phase (`useMemo`), where applying it through
+   * `setProjectData()` would emit item updates to `useSyncExternalStore`
+   * subscribers mid-render. The renderer applies it post-commit via
+   * `flushRenderPhaseUpdates()`. Never set on design-mode runtimes — the live
+   * Studio tree owns the page data there.
+   */
+  pendingProjectData;
+  /**
+   * Reused item instances whose data was refreshed while this runtime was
+   * constructed during render (core `initProject()` calls `setData()` on
+   * them). Their data is already fresh; only the subscriber notification was
+   * deferred to `flushRenderPhaseUpdates()`.
+   */
+  pendingItemUpdates = [];
   constructor(config) {
     let { client, data } = config;
     let page = getRenderablePage(data);
@@ -269,7 +591,9 @@ var WeaverseNextRuntime = class extends Weaverse {
     this.isPreviewMode = requestContext?.isPreviewMode ?? false;
     this.isRevisionPreview = requestContext?.isRevisionPreview ?? false;
     this.sectionType = requestContext?.sectionType;
+    let translationStore = config.translationStore ?? new TranslationStore();
     this.internal = {
+      merchantOverrides: config.merchantOverrides,
       navigate: config.navigate,
       pageAssignment: data.pageAssignment,
       project: data.project,
@@ -277,17 +601,119 @@ var WeaverseNextRuntime = class extends Weaverse {
       themeSettingsStore: config.themeSettingsStore ?? createWeaverseNextThemeSettingsStore({
         schema: client?.themeSchema,
         settings: client?.themeSettings
-      })
+      }),
+      translationStore,
+      themeTextStore: translationStore
     };
+    this.extractTranslationSidecar();
   }
-  extractTranslationSidecar = () => void 0;
+  /**
+   * Pull `translationMap` / `translationLocale` / `translationLanguageId` off
+   * the current page data (Builder attaches them in design mode). Unlike
+   * Hydrogen, this also clears the sidecar to defaults when the new page data
+   * carries none, so a reused runtime / project-data swap can't leave a stale
+   * map overlaying the fresh tree.
+   */
+  extractTranslationSidecar = () => {
+    let pageData = this.data;
+    let translationMap = pageData?.translationMap;
+    if (translationMap) {
+      this.translationMap = translationMap;
+      this.translationLocale = pageData?.translationLocale || "";
+      this.translationLanguageId = pageData?.translationLanguageId || "";
+    } else {
+      this.translationMap = {};
+      this.translationLocale = "";
+      this.translationLanguageId = "";
+    }
+  };
+  /**
+   * Replace the translation sidecar (Builder pushes this when translation data
+   * arrives or the active language changes) and refresh every item so their
+   * merged snapshots recompute.
+   */
   setTranslationSidecar = (map = {}, locale = "", languageId = "") => {
     this.translationMap = map;
     this.translationLocale = locale;
     this.translationLanguageId = languageId;
+    this.refreshAllItems();
+  };
+  /**
+   * Update a single translatable field for one item. Assigns a new per-item
+   * entry object so `WeaverseNextItem.getSnapShot()`'s translation-ref cache
+   * invalidates, then triggers only that item's subscribers.
+   */
+  updateTranslation = (itemId, key, originalValue, translatedValue) => {
+    if (!this.translationMap[itemId]) {
+      this.translationMap[itemId] = {};
+    }
+    this.translationMap[itemId] = {
+      ...this.translationMap[itemId],
+      [key]: { originalValue, translatedValue }
+    };
+    let instance = this.itemInstances.get(itemId);
+    if (instance) {
+      instance.triggerUpdate();
+    }
+  };
+  /**
+   * Collect translation changes for the save flow. Returns `undefined` unless
+   * both the locale and language ID are set and at least one entry exists;
+   * each entry key is namespaced as `data.<field>` to match Builder.
+   */
+  getTranslationChanges = () => {
+    let languageId = this.translationLanguageId;
+    if (!(this.translationLocale && languageId)) {
+      return;
+    }
+    let entries = [];
+    for (let [itemId, fields] of Object.entries(this.translationMap)) {
+      for (let [key, entry] of Object.entries(fields)) {
+        entries.push({
+          itemId,
+          key: `data.${key}`,
+          originalValue: entry.originalValue,
+          translatedValue: entry.translatedValue
+        });
+      }
+    }
+    if (entries.length === 0) {
+      return;
+    }
+    return { languageId, entries };
+  };
+  /**
+   * Re-extract the translation sidecar whenever project data is replaced (route
+   * change / non-design reuse), before rebuilding item stores. Takes the
+   * renderable page shape (`rootId` resolved) that `getRenderablePage()` and
+   * the reuse branch pass in.
+   */
+  setProjectData = (data) => {
+    this.data = data;
+    this.extractTranslationSidecar();
+    this.initProject();
+  };
+  /**
+   * Apply updates deferred off the render phase: swap in any pending page data
+   * captured on runtime reuse, then notify items whose data was refreshed
+   * during construction. The renderer calls this from a layout effect right
+   * after commit, so subscribers re-render before paint (no content flash) and
+   * without React's setState-in-render warning.
+   */
+  flushRenderPhaseUpdates = () => {
+    let pendingData = this.pendingProjectData;
+    if (pendingData) {
+      this.pendingProjectData = void 0;
+      this.setProjectData(pendingData);
+    }
+    let pendingItems = this.pendingItemUpdates;
+    if (pendingItems.length > 0) {
+      this.pendingItemUpdates = [];
+      for (let item of pendingItems) {
+        item.triggerUpdate();
+      }
+    }
   };
-  updateTranslation = () => void 0;
-  getTranslationChanges = () => void 0;
 };
 function createWeaverseNextRuntime(config) {
   let requestInfo = buildWeaverseNextRequestInfo(config.client?.requestContext);
@@ -297,9 +723,12 @@ function createWeaverseNextRuntime(config) {
   let requestKey = getRuntimeKey(page.id, requestInfo);
   if (existing?.__weaverseNextRequestKey === requestKey) {
     let nextIsDesignMode = config.client?.requestContext?.isDesignMode ?? false;
-    if (!(existing.isDesignMode || nextIsDesignMode)) {
-      existing.setProjectData(page);
+    if (existing.isDesignMode || nextIsDesignMode) {
+      existing.pendingProjectData = void 0;
+    } else {
+      existing.pendingProjectData = page;
     }
+    existing.__weaverseNextLatestData = page;
     existing.dataContext = resolveDataContext(config);
     existing.requestInfo = requestInfo;
     existing.projectId = resolveProjectId(config.client, config.data, page.id);
@@ -320,11 +749,20 @@ function createWeaverseNextRuntime(config) {
     if (config.themeSettingsStore) {
       existing.internal.themeSettingsStore = config.themeSettingsStore;
     }
+    if (config.translationStore) {
+      existing.internal.translationStore = config.translationStore;
+      existing.internal.themeTextStore = config.translationStore;
+    }
+    existing.internal.merchantOverrides = config.merchantOverrides;
     registerRuntime(existing);
     return existing;
   }
-  let runtime = new WeaverseNextRuntime(config);
+  let [runtime, refreshedItems] = collectDeferredItemUpdates(
+    () => new WeaverseNextRuntime(config)
+  );
+  runtime.pendingItemUpdates = refreshedItems;
   runtime.__weaverseNextRequestKey = requestKey;
+  runtime.__weaverseNextLatestData = page;
   registerRuntime(runtime);
   return runtime;
 }
@@ -337,22 +775,48 @@ function bindWeaverseNextStudioRuntime(runtime) {
     return false;
   }
   let boundRuntime = runtime;
-  if (!boundRuntime.__weaverseNextStudioBound) {
+  let activeRuntime = studio.weaverse;
+  let activeRequestInfo = activeRuntime?.requestInfo;
+  let isActiveUrl = !activeRequestInfo || activeRequestInfo.pathname === runtime.requestInfo.pathname && activeRequestInfo.search === runtime.requestInfo.search;
+  if (!(boundRuntime.__weaverseNextStudioBound && isActiveUrl)) {
     studio.init?.(runtime);
     boundRuntime.__weaverseNextStudioBound = true;
     return true;
   }
   studio.refreshStudio?.({
-    data: runtime.data,
+    data: boundRuntime.__weaverseNextLatestData ?? runtime.data,
     pageId: runtime.pageId,
     requestInfo: runtime.requestInfo
   });
   return true;
 }
+
+// src/revalidate-item.ts
+var DEFAULT_REVALIDATE_ENDPOINT = "/api/weaverse/revalidate";
+async function revalidateWeaverseNextItem(runtime, draftItem, endpoint = DEFAULT_REVALIDATE_ENDPOINT) {
+  let instance = runtime.itemInstances.get(draftItem.id);
+  if (!instance) {
+    throw new Error(
+      `[weaverse-next] No live item instance for "${draftItem.id}".`
+    );
+  }
+  let response = await fetch(endpoint, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ draftItem })
+  });
+  if (!response.ok) {
+    throw new Error(
+      `[weaverse-next] Revalidate endpoint responded ${response.status}.`
+    );
+  }
+  let { loaderData } = await response.json();
+  instance.setData({ loaderData: loaderData ?? null });
+}
 var STUDIO_BIND_RETRY_INTERVAL_MS = 50;
 var STUDIO_BIND_MAX_ATTEMPTS = 100;
 function WeaverseNextStudioBridge(props) {
-  let { runtime, navigate, revalidate } = props;
+  let { runtime, navigate, revalidate, revalidateItem } = props;
   let lastRuntimeRef = useRef(runtime);
   let lastRuntimeDataRef = useRef(runtime.data);
   let lastRequestInfoRef = useRef(runtime.requestInfo);
@@ -363,6 +827,9 @@ function WeaverseNextStudioBridge(props) {
     if (revalidate) {
       runtime.internal.revalidate = revalidate;
     }
+    if (revalidateItem) {
+      runtime.internal.revalidateItem = revalidateItem;
+    }
     if (bindWeaverseNextStudioRuntime(runtime) || !runtime.isDesignMode) {
       return;
     }
@@ -374,7 +841,7 @@ function WeaverseNextStudioBridge(props) {
       }
     }, STUDIO_BIND_RETRY_INTERVAL_MS);
     return () => window.clearInterval(interval);
-  }, [runtime, navigate, revalidate]);
+  }, [runtime, navigate, revalidate, revalidateItem]);
   useEffect(() => {
     if (lastRuntimeRef.current !== runtime) {
       lastRuntimeRef.current = runtime;
@@ -391,7 +858,65 @@ function WeaverseNextStudioBridge(props) {
   }, [runtime, runtime.data, runtime.requestInfo]);
   return null;
 }
+
+// src/studio-router.ts
+function shouldResetScroll(options) {
+  if (!options || typeof options !== "object") {
+    return true;
+  }
+  return !options.preventScrollReset;
+}
+function createWeaverseNextStudioInternals(router, options = {}) {
+  return {
+    navigate: (to, navigateOptions) => {
+      let scroll = shouldResetScroll(navigateOptions);
+      if (options.replace) {
+        router.replace(to, { scroll });
+      } else {
+        router.push(to, { scroll });
+      }
+    },
+    revalidate: () => {
+      router.refresh();
+    }
+  };
+}
+function useWeaverseNextStudioInternals(options) {
+  let router = useRouter();
+  let ref = useRef(null);
+  if (!ref.current || ref.current.router !== router || ref.current.replace !== options?.replace) {
+    ref.current = {
+      internals: createWeaverseNextStudioInternals(router, options),
+      replace: options?.replace,
+      router
+    };
+  }
+  return ref.current.internals;
+}
+function WeaverseNextStudio(props) {
+  let { runtime, replace, revalidateEndpoint } = props;
+  let { navigate, revalidate } = useWeaverseNextStudioInternals({ replace });
+  let endpoint = revalidateEndpoint ?? DEFAULT_REVALIDATE_ENDPOINT;
+  let revalidateItemRef = useRef(null);
+  if (revalidateItemRef.current?.endpoint !== endpoint || revalidateItemRef.current.runtime !== runtime) {
+    revalidateItemRef.current = {
+      endpoint,
+      revalidateItem: (draftItem) => revalidateWeaverseNextItem(runtime, draftItem, endpoint),
+      runtime
+    };
+  }
+  return /* @__PURE__ */ jsx(
+    WeaverseNextStudioBridge,
+    {
+      navigate,
+      revalidate,
+      revalidateItem: revalidateItemRef.current.revalidateItem,
+      runtime
+    }
+  );
+}
 var EMPTY_DATA_CONTEXT = {};
+var useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
 function getRenderablePage2(data) {
   let page = data?.page;
   if (!page) {
@@ -414,15 +939,28 @@ var WeaverseNextRenderer = memo(function WeaverseNextRendererComponent(props) {
       client,
       data: { ...data, page },
       dataContext,
-      themeSettingsStore: context?.themeSettingsStore
+      merchantOverrides: context?.merchantOverrides,
+      themeSettingsStore: context?.themeSettingsStore,
+      translationStore: context?.translationStore
     });
-  }, [client, page, data, dataContext, context?.themeSettingsStore]);
+  }, [
+    client,
+    page,
+    data,
+    dataContext,
+    context?.merchantOverrides,
+    context?.themeSettingsStore,
+    context?.translationStore
+  ]);
+  useIsomorphicLayoutEffect(() => {
+    weaverse?.flushRenderPhaseUpdates();
+  }, [weaverse]);
   if (!weaverse) {
     return null;
   }
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(WeaverseRoot, { context: weaverse }),
-    /* @__PURE__ */ jsx(WeaverseNextStudioBridge, { runtime: weaverse })
+    /* @__PURE__ */ jsx(WeaverseNextStudio, { runtime: weaverse })
   ] });
 });
 
@@ -489,10 +1027,9 @@ function resolveWeaverseNextStudioScriptSrc(context, options = {}) {
   if (!isTrustedStudioOrigin(origin, storefrontHostname)) {
     return null;
   }
-  let framework = options.framework ?? "hydrogen";
   let bundle = isDesignMode ? "index.js" : "preview.js";
   let version = last(searchParams, "weaverseVersion");
-  let url = `${origin}/static/studio/${framework}/${bundle}`;
+  let url = `${origin}/static/studio/next/${bundle}`;
   return version ? `${url}?v=${encodeURIComponent(version)}` : url;
 }
 
@@ -516,25 +1053,30 @@ function loadScript(src) {
   document.head.appendChild(script);
   loadedScriptSrcs.add(src);
 }
+function loadWeaverseNextStudioScript(context, options = {}) {
+  let resolvedContext = context;
+  if (!resolvedContext && typeof window !== "undefined") {
+    resolvedContext = {
+      searchParams: new URLSearchParams(window.location.search),
+      url: window.location.href
+    };
+  }
+  let src = resolveWeaverseNextStudioScriptSrc(resolvedContext, {
+    storefrontHostname: options.storefrontHostname ?? (typeof window === "undefined" ? void 0 : window.location.hostname)
+  });
+  if (src) {
+    loadScript(src);
+  }
+}
 function WeaverseNextStudioConnect(props) {
   useEffect(() => {
-    let context = props.context;
-    if (!context && typeof window !== "undefined") {
-      context = {
-        searchParams: new URLSearchParams(window.location.search),
-        url: window.location.href
-      };
-    }
-    let src = resolveWeaverseNextStudioScriptSrc(context, {
-      storefrontHostname: props.storefrontHostname ?? (typeof window === "undefined" ? void 0 : window.location.hostname)
+    loadWeaverseNextStudioScript(props.context, {
+      storefrontHostname: props.storefrontHostname
     });
-    if (src) {
-      loadScript(src);
-    }
   }, [props.context, props.storefrontHostname]);
   return null;
 }
 
-export { WeaverseNextProvider, WeaverseNextRenderer, WeaverseNextRuntime, WeaverseNextStudioBridge, WeaverseNextStudioConnect, bindWeaverseNextStudioRuntime, createWeaverseNextClient, createWeaverseNextRuntime, createWeaverseNextThemeSettingsStore, resolveWeaverseNextStudioScriptSrc, useThemeSettings, useWeaverseCommerce, useWeaversePageData, useWeaverseRootData };
+export { DEFAULT_REVALIDATE_ENDPOINT, ThemeTextProvider, ThemeTextStore, TranslationProvider, TranslationStore, WeaverseNextProvider, WeaverseNextRenderer, WeaverseNextRootProvider, WeaverseNextRuntime, WeaverseNextStudio, WeaverseNextStudioBridge, WeaverseNextStudioConnect, bindWeaverseNextStudioRuntime, createTranslate, createWeaverseNextClient, createWeaverseNextRuntime, createWeaverseNextStudioInternals, createWeaverseNextThemeSettingsStore, getNestedKey, interpolate, loadWeaverseNextStudioScript, resolveWeaverseNextStudioScriptSrc, revalidateWeaverseNextItem, useThemeSettings, useThemeText, useTranslation, useWeaverseCommerce, useWeaverseNextStudioInternals, useWeaversePageData, useWeaverseRootData };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map