@weaverse/hydrogen 5.12.0 → 5.12.1

package/dist/index.d.mts

@@ -12,6 +12,27 @@ import { ReactNode, ComponentType, JSX, ForwardRefExoticComponent } from 'react'
 import { NavigateFunction, UIMatch } from 'react-router';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
+/**
+ * Minimal mutable store for design-mode static text overrides.
+ *
+ * useSyncExternalStore-compatible. Passed into ThemeTextProvider which
+ * subscribes internally and merges overrides into merchantOverrides.
+ * The studio bridge calls updateOverrides() via weaverse.internal.themeTextStore.
+ *
+ * Shape: flat Record<string, string> — dot-notation keys map to values
+ * (e.g. "cart.title" → "Shopping Cart").
+ */
+declare class ThemeTextStore {
+    overrides: Record<string, string>;
+    private listeners;
+    setOverrides: (overrides: Record<string, string>) => void;
+    updateOverrides: (newOverrides: Record<string, string>) => void;
+    getSnapshot: () => Record<string, string>;
+    getServerSnapshot: () => Record<string, string>;
+    subscribe: (callback: () => void) => () => void;
+    private emit;
+}
+
 type WeaverseThemeData = {
     theme: HydrogenThemeSettings;
     schema?: HydrogenThemeSchema;
@@ -59,7 +80,7 @@ type ThemeTextValue = {
      *
      * Priority chain (highest wins):
      * 1. External `t`        (passed into `withWeaverse` / `ThemeTextProvider`)
-     * 2. `merchantOverrides` (DB overrides for the current locale)
+     * 2. `merchantOverrides` (DB overrides for the current locale + design overrides)
      * 3. `staticContent`     (theme default JSON)
      * 4. The key itself      (fallback)
      *
@@ -68,6 +89,10 @@ type ThemeTextValue = {
      * t('badge.sale', { percentage: 15 })       // => "-15% Off"
      */
     t: TranslateFunction;
+    /** Exposed for useStudio to attach to weaverse.internal. Null in production. */
+    themeTextStore: ThemeTextStore | null;
+    /** Active-locale translated keys loaded from the storefront API. */
+    merchantOverrides: Record<string, unknown> | null;
 };
 type ThemeTextProviderProps = {
     staticContent: Record<string, unknown>;
@@ -79,6 +104,8 @@ type ThemeTextProviderProps = {
      * that value is used; otherwise the internal resolution chain continues.
      */
     t?: TranslateFunction;
+    /** Optional store for live design-mode text overrides from the builder. */
+    themeTextStore?: ThemeTextStore | null;
     children: ReactNode;
 };
 /**
@@ -86,8 +113,9 @@ type ThemeTextProviderProps = {
  *
  * - `staticContent`      – the theme's default locale JSON (from themeSchema.i18n)
  * - `merchantOverrides`  – locale-specific overrides fetched from the API
+ * - `themeTextStore`     – optional store for live design-mode text overrides
  */
-declare function ThemeTextProvider({ staticContent, merchantOverrides, t: externalT, children, }: ThemeTextProviderProps): react_jsx_runtime.JSX.Element;
+declare function ThemeTextProvider({ staticContent, merchantOverrides, t: externalT, themeTextStore, children, }: ThemeTextProviderProps): react_jsx_runtime.JSX.Element;
 /**
  * Hook to access the theme text `t()` function.
  *
@@ -489,6 +517,8 @@ type WeaverseInternal = {
     navigate: NavigateFunction;
     revalidate: () => void;
     themeSettingsStore: ThemeSettingsStore;
+    themeTextStore?: ThemeTextStore | null;
+    merchantOverrides?: Record<string, unknown> | null;
 };
 /**
  * Optimized: Use direct type alias to maintain consistency
@@ -1097,4 +1127,4 @@ declare const IMAGES_PLACEHOLDERS: {
     product_18: string;
 };
 
-export { type CacheResponseValidator, type ComponentDataValue, type ComponentLoaderArgs, type CreateHydrogenSchemaOptions, type DirectFetchResponse, type FetchProjectPayload, type FetchProjectRequestBody, type HydrogenComponent, type HydrogenComponentData, type HydrogenComponentPresets, type HydrogenComponentProps, type HydrogenComponentSchema, type HydrogenElement, type HydrogenPageAssignment, type HydrogenPageData, type HydrogenProjectType, type HydrogenSchemaValidationResult, type HydrogenThemeSchema, type HydrogenThemeSettings, IMAGES_PLACEHOLDERS, type LoadPageParams, type ProjectIdValidationResult, type ProjectIdValue, type PublicEnv, type RouteLoaderArgs, type ThemeSettingsResponse, ThemeTextProvider, type ThemeTextProviderProps, type ThemeTextValue, type TranslateFunction, type TranslationChanges, type TranslationEntry, type TranslationItemEntry, type TranslationMap, type TranslationMapEntry, type WeaverseArticle, type WeaverseBlog, WeaverseClient, type WeaverseClientArgs, type WeaverseCollection, type WeaverseDataContext, WeaverseError, WeaverseHydrogen, WeaverseHydrogenItem, type WeaverseHydrogenParams, WeaverseHydrogenRoot, type WeaverseI18n, type WeaverseInternal, type WeaverseLoaderData, type WeaverseLoaderRequestInfo, type WeaverseMetaObject, type WeaverseProduct, type WeaverseProjectConfigs, type WeaverseStudioQueries, type WithCacheFetchResponse, type WithWeaverseOptions, createWeaverseDataContext, defaultComponents, generateDataFromSchema, getNestedKey, getPreviewData, getRequestQueries, getSelectedProductOptions, getWeaverseConfigs, hasError, hasWeaverseStudio, interpolate, isFetchProjectPayload, isProjectIdFunction, isThemeSettingsResponse, isValidHydrogenSchema, isWithCacheFetchResponse, registerComponent, useThemeSettings, useThemeText, useWeaverseDataContext, withWeaverse };
+export { type CacheResponseValidator, type ComponentDataValue, type ComponentLoaderArgs, type CreateHydrogenSchemaOptions, type DirectFetchResponse, type FetchProjectPayload, type FetchProjectRequestBody, type HydrogenComponent, type HydrogenComponentData, type HydrogenComponentPresets, type HydrogenComponentProps, type HydrogenComponentSchema, type HydrogenElement, type HydrogenPageAssignment, type HydrogenPageData, type HydrogenProjectType, type HydrogenSchemaValidationResult, type HydrogenThemeSchema, type HydrogenThemeSettings, IMAGES_PLACEHOLDERS, type LoadPageParams, type ProjectIdValidationResult, type ProjectIdValue, type PublicEnv, type RouteLoaderArgs, type ThemeSettingsResponse, ThemeTextProvider, type ThemeTextProviderProps, ThemeTextStore, type ThemeTextValue, type TranslateFunction, type TranslationChanges, type TranslationEntry, type TranslationItemEntry, type TranslationMap, type TranslationMapEntry, type WeaverseArticle, type WeaverseBlog, WeaverseClient, type WeaverseClientArgs, type WeaverseCollection, type WeaverseDataContext, WeaverseError, WeaverseHydrogen, WeaverseHydrogenItem, type WeaverseHydrogenParams, WeaverseHydrogenRoot, type WeaverseI18n, type WeaverseInternal, type WeaverseLoaderData, type WeaverseLoaderRequestInfo, type WeaverseMetaObject, type WeaverseProduct, type WeaverseProjectConfigs, type WeaverseStudioQueries, type WithCacheFetchResponse, type WithWeaverseOptions, createWeaverseDataContext, defaultComponents, generateDataFromSchema, getNestedKey, getPreviewData, getRequestQueries, getSelectedProductOptions, getWeaverseConfigs, hasError, hasWeaverseStudio, interpolate, isFetchProjectPayload, isProjectIdFunction, isThemeSettingsResponse, isValidHydrogenSchema, isWithCacheFetchResponse, registerComponent, useThemeSettings, useThemeText, useWeaverseDataContext, withWeaverse };

package/dist/index.d.ts

@@ -12,6 +12,27 @@ import { ReactNode, ComponentType, JSX, ForwardRefExoticComponent } from 'react'
 import { NavigateFunction, UIMatch } from 'react-router';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
+/**
+ * Minimal mutable store for design-mode static text overrides.
+ *
+ * useSyncExternalStore-compatible. Passed into ThemeTextProvider which
+ * subscribes internally and merges overrides into merchantOverrides.
+ * The studio bridge calls updateOverrides() via weaverse.internal.themeTextStore.
+ *
+ * Shape: flat Record<string, string> — dot-notation keys map to values
+ * (e.g. "cart.title" → "Shopping Cart").
+ */
+declare class ThemeTextStore {
+    overrides: Record<string, string>;
+    private listeners;
+    setOverrides: (overrides: Record<string, string>) => void;
+    updateOverrides: (newOverrides: Record<string, string>) => void;
+    getSnapshot: () => Record<string, string>;
+    getServerSnapshot: () => Record<string, string>;
+    subscribe: (callback: () => void) => () => void;
+    private emit;
+}
+
 type WeaverseThemeData = {
     theme: HydrogenThemeSettings;
     schema?: HydrogenThemeSchema;
@@ -59,7 +80,7 @@ type ThemeTextValue = {
      *
      * Priority chain (highest wins):
      * 1. External `t`        (passed into `withWeaverse` / `ThemeTextProvider`)
-     * 2. `merchantOverrides` (DB overrides for the current locale)
+     * 2. `merchantOverrides` (DB overrides for the current locale + design overrides)
      * 3. `staticContent`     (theme default JSON)
      * 4. The key itself      (fallback)
      *
@@ -68,6 +89,10 @@ type ThemeTextValue = {
      * t('badge.sale', { percentage: 15 })       // => "-15% Off"
      */
     t: TranslateFunction;
+    /** Exposed for useStudio to attach to weaverse.internal. Null in production. */
+    themeTextStore: ThemeTextStore | null;
+    /** Active-locale translated keys loaded from the storefront API. */
+    merchantOverrides: Record<string, unknown> | null;
 };
 type ThemeTextProviderProps = {
     staticContent: Record<string, unknown>;
@@ -79,6 +104,8 @@ type ThemeTextProviderProps = {
      * that value is used; otherwise the internal resolution chain continues.
      */
     t?: TranslateFunction;
+    /** Optional store for live design-mode text overrides from the builder. */
+    themeTextStore?: ThemeTextStore | null;
     children: ReactNode;
 };
 /**
@@ -86,8 +113,9 @@ type ThemeTextProviderProps = {
  *
  * - `staticContent`      – the theme's default locale JSON (from themeSchema.i18n)
  * - `merchantOverrides`  – locale-specific overrides fetched from the API
+ * - `themeTextStore`     – optional store for live design-mode text overrides
  */
-declare function ThemeTextProvider({ staticContent, merchantOverrides, t: externalT, children, }: ThemeTextProviderProps): react_jsx_runtime.JSX.Element;
+declare function ThemeTextProvider({ staticContent, merchantOverrides, t: externalT, themeTextStore, children, }: ThemeTextProviderProps): react_jsx_runtime.JSX.Element;
 /**
  * Hook to access the theme text `t()` function.
  *
@@ -489,6 +517,8 @@ type WeaverseInternal = {
     navigate: NavigateFunction;
     revalidate: () => void;
     themeSettingsStore: ThemeSettingsStore;
+    themeTextStore?: ThemeTextStore | null;
+    merchantOverrides?: Record<string, unknown> | null;
 };
 /**
  * Optimized: Use direct type alias to maintain consistency
@@ -1097,4 +1127,4 @@ declare const IMAGES_PLACEHOLDERS: {
     product_18: string;
 };
 
-export { type CacheResponseValidator, type ComponentDataValue, type ComponentLoaderArgs, type CreateHydrogenSchemaOptions, type DirectFetchResponse, type FetchProjectPayload, type FetchProjectRequestBody, type HydrogenComponent, type HydrogenComponentData, type HydrogenComponentPresets, type HydrogenComponentProps, type HydrogenComponentSchema, type HydrogenElement, type HydrogenPageAssignment, type HydrogenPageData, type HydrogenProjectType, type HydrogenSchemaValidationResult, type HydrogenThemeSchema, type HydrogenThemeSettings, IMAGES_PLACEHOLDERS, type LoadPageParams, type ProjectIdValidationResult, type ProjectIdValue, type PublicEnv, type RouteLoaderArgs, type ThemeSettingsResponse, ThemeTextProvider, type ThemeTextProviderProps, type ThemeTextValue, type TranslateFunction, type TranslationChanges, type TranslationEntry, type TranslationItemEntry, type TranslationMap, type TranslationMapEntry, type WeaverseArticle, type WeaverseBlog, WeaverseClient, type WeaverseClientArgs, type WeaverseCollection, type WeaverseDataContext, WeaverseError, WeaverseHydrogen, WeaverseHydrogenItem, type WeaverseHydrogenParams, WeaverseHydrogenRoot, type WeaverseI18n, type WeaverseInternal, type WeaverseLoaderData, type WeaverseLoaderRequestInfo, type WeaverseMetaObject, type WeaverseProduct, type WeaverseProjectConfigs, type WeaverseStudioQueries, type WithCacheFetchResponse, type WithWeaverseOptions, createWeaverseDataContext, defaultComponents, generateDataFromSchema, getNestedKey, getPreviewData, getRequestQueries, getSelectedProductOptions, getWeaverseConfigs, hasError, hasWeaverseStudio, interpolate, isFetchProjectPayload, isProjectIdFunction, isThemeSettingsResponse, isValidHydrogenSchema, isWithCacheFetchResponse, registerComponent, useThemeSettings, useThemeText, useWeaverseDataContext, withWeaverse };
+export { type CacheResponseValidator, type ComponentDataValue, type ComponentLoaderArgs, type CreateHydrogenSchemaOptions, type DirectFetchResponse, type FetchProjectPayload, type FetchProjectRequestBody, type HydrogenComponent, type HydrogenComponentData, type HydrogenComponentPresets, type HydrogenComponentProps, type HydrogenComponentSchema, type HydrogenElement, type HydrogenPageAssignment, type HydrogenPageData, type HydrogenProjectType, type HydrogenSchemaValidationResult, type HydrogenThemeSchema, type HydrogenThemeSettings, IMAGES_PLACEHOLDERS, type LoadPageParams, type ProjectIdValidationResult, type ProjectIdValue, type PublicEnv, type RouteLoaderArgs, type ThemeSettingsResponse, ThemeTextProvider, type ThemeTextProviderProps, ThemeTextStore, type ThemeTextValue, type TranslateFunction, type TranslationChanges, type TranslationEntry, type TranslationItemEntry, type TranslationMap, type TranslationMapEntry, type WeaverseArticle, type WeaverseBlog, WeaverseClient, type WeaverseClientArgs, type WeaverseCollection, type WeaverseDataContext, WeaverseError, WeaverseHydrogen, WeaverseHydrogenItem, type WeaverseHydrogenParams, WeaverseHydrogenRoot, type WeaverseI18n, type WeaverseInternal, type WeaverseLoaderData, type WeaverseLoaderRequestInfo, type WeaverseMetaObject, type WeaverseProduct, type WeaverseProjectConfigs, type WeaverseStudioQueries, type WithCacheFetchResponse, type WithWeaverseOptions, createWeaverseDataContext, defaultComponents, generateDataFromSchema, getNestedKey, getPreviewData, getRequestQueries, getSelectedProductOptions, getWeaverseConfigs, hasError, hasWeaverseStudio, interpolate, isFetchProjectPayload, isProjectIdFunction, isThemeSettingsResponse, isValidHydrogenSchema, isWithCacheFetchResponse, registerComponent, useThemeSettings, useThemeText, useWeaverseDataContext, withWeaverse };

package/dist/index.js

@@ -58,12 +58,39 @@ function interpolate(template, variables) {
 }
 var ThemeTextContext = react$1.createContext(null);
 ThemeTextContext.displayName = "WeaverseThemeTextContext";
+function unflattenKeys(flat) {
+  const result = {};
+  for (const [dotPath, value] of Object.entries(flat)) {
+    const keys = dotPath.split(".");
+    let current = result;
+    for (let i = 0; i < keys.length - 1; i++) {
+      const k = keys[i];
+      if (!(k in current) || typeof current[k] !== "object") {
+        current[k] = {};
+      }
+      current = current[k];
+    }
+    current[keys[keys.length - 1]] = value;
+  }
+  return result;
+}
+var EMPTY = {};
+var NOOP_SUBSCRIBE = () => () => {
+};
+var NOOP_SNAPSHOT = () => EMPTY;
 function ThemeTextProvider({
   staticContent,
   merchantOverrides,
   t: externalT,
+  themeTextStore,
   children
 }) {
+  const designOverrides = react.useSafeExternalStore(
+    themeTextStore?.subscribe ?? NOOP_SUBSCRIBE,
+    themeTextStore?.getSnapshot ?? NOOP_SNAPSHOT,
+    themeTextStore?.getServerSnapshot ?? NOOP_SNAPSHOT
+  );
+  const mergedOverrides = designOverrides !== EMPTY && Object.keys(designOverrides).length > 0 ? { ...merchantOverrides, ...unflattenKeys(designOverrides) } : merchantOverrides;
   const value = react$1.useMemo(() => {
     const t = (key, variables) => {
       if (externalT) {
@@ -72,13 +99,23 @@ function ThemeTextProvider({
           return external;
         }
       }
-      const override = merchantOverrides ? getNestedKey(merchantOverrides, key) : void 0;
+      const override = mergedOverrides ? getNestedKey(mergedOverrides, key) : void 0;
       const staticValue = getNestedKey(staticContent, key);
       const raw = override ?? staticValue ?? key;
       return interpolate(raw, variables);
     };
-    return { t };
-  }, [staticContent, merchantOverrides, externalT]);
+    return {
+      t,
+      themeTextStore: themeTextStore ?? null,
+      merchantOverrides: merchantOverrides ?? null
+    };
+  }, [
+    staticContent,
+    merchantOverrides,
+    mergedOverrides,
+    externalT,
+    themeTextStore
+  ]);
   return /* @__PURE__ */ jsxRuntime.jsx(ThemeTextContext.Provider, { value, children });
 }
 function useThemeText() {
@@ -349,6 +386,37 @@ function getPreviewData(type, components, weaverseHost) {
     }
   };
 }
+
+// src/utils/theme-text-store.ts
+var ThemeTextStore = 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("ThemeTextStore: Listener error", error);
+      }
+    }
+  };
+};
 var ThemeSettingsStore = class {
   settings = {};
   schema;
@@ -459,6 +527,7 @@ function useStudio(weaverse) {
   let { pathname, search } = reactRouter.useLocation();
   let navigate = reactRouter.useNavigate();
   let themeSettingsStore = useThemeSettingsStore();
+  let { themeTextStore, merchantOverrides } = useThemeText();
   let {
     isDesignMode,
     weaverseHost,
@@ -476,7 +545,9 @@ function useStudio(weaverse) {
           ...weaverse.internal,
           navigate,
           revalidate,
-          themeSettingsStore
+          merchantOverrides,
+          themeSettingsStore,
+          themeTextStore
         };
         let studioSrc = `${weaverseHost}/static/studio/hydrogen/index.js?v=${weaverseVersion}`;
         react.loadScript(studioSrc).then(() => {
@@ -761,12 +832,17 @@ function withWeaverse(Component, options) {
   return (props) => {
     const themeSettingsStore = useCreateThemeSettingsStore();
     const themeTextData = useThemeTextData();
+    const themeTextStoreRef = react$1.useRef(null);
+    if (!themeTextStoreRef.current) {
+      themeTextStoreRef.current = new ThemeTextStore();
+    }
     return /* @__PURE__ */ jsxRuntime.jsx(ThemeSettingsStoreContext.Provider, { value: themeSettingsStore, children: /* @__PURE__ */ jsxRuntime.jsx(
       ThemeTextProvider,
       {
         merchantOverrides: themeTextData.merchantOverrides,
         staticContent: themeTextData.staticContent,
         t: options?.t,
+        themeTextStore: themeTextStoreRef.current,
         children: /* @__PURE__ */ jsxRuntime.jsx(Component, { ...props })
       }
     ) });
@@ -1584,6 +1660,7 @@ Object.defineProperty(exports, "useWeaverse", {
 });
 exports.IMAGES_PLACEHOLDERS = IMAGES_PLACEHOLDERS;
 exports.ThemeTextProvider = ThemeTextProvider;
+exports.ThemeTextStore = ThemeTextStore;
 exports.WeaverseClient = WeaverseClient;
 exports.WeaverseError = WeaverseError;
 exports.WeaverseHydrogen = WeaverseHydrogen;