@localess/react 3.3.0-dev.20260708090119 → 3.3.0-dev.20260708124505

package/README.md

@@ -122,7 +122,7 @@ localessInit({
 
 ## `LocalessComponent`
 
-`LocalessComponent` is a dynamic renderer that maps Localess content data to your registered React components by schema key. It automatically applies Visual Editor attributes when sync is enabled.
+`LocalessComponent` is a dynamic renderer that maps Localess content data to your registered React components by schema key. It always applies Visual Editor attributes (`data-ll-id` / `data-ll-schema`) — they're inert outside the Visual Editor iframe.
 
 ```tsx
 import { LocalessComponent } from "@localess/react";
@@ -424,20 +424,17 @@ If you manage content state yourself without `useLocaless` or `LocalessDocument`
 'use client';
 
 import { useEffect, useState } from "react";
-import { LocalessComponent, localessEditable, isSyncEnabled, isBrowser } from "@localess/react";
+import { LocalessComponent, localessEditable, localessSyncOn } from "@localess/react";
 import type { Content, Page } from "./.localess/localess";
 
 export function PageClient({ initialContent }: { initialContent: Content<Page> }) {
   const [pageData, setPageData] = useState(initialContent.data);
 
   useEffect(() => {
-    if (isSyncEnabled() && isBrowser() && window.localess) {
-      window.localess.on(['input', 'change'], (event) => {
-        if (event.type === 'input' || event.type === 'change') {
-          setPageData(event.data);
-        }
-      });
-    }
+    // No-op if sync isn't enabled/usable; `event` is narrowed to the 'input' | 'change' variant
+    localessSyncOn(['input', 'change'], (event) => {
+      setPageData(event.data);
+    });
     // No cleanup needed: window.localess has no .off() method
   }, []);
 
@@ -465,6 +462,8 @@ export function PageClient({ initialContent }: { initialContent: Content<Page> }
 
 > `window.localess` only exposes `.on()` and `.onChange()` — there is no `.off()` method.
 
+`localessSyncOn(event, callback)` wraps `.on()`; `localessSyncOnChange(callback)` wraps `.onChange()` — equivalent to `localessSyncOn(['input', 'change'], callback)`, firing only for content-change events (`callback` receives the `input`/`change` variant, not the full `EventToApp` union). Both handle the `isSyncEnabled()` check and the `localessSyncReady()` wait internally.
+
 ---
 
 ## Full Example — SPA / Default (`@localess/react`)
@@ -582,7 +581,7 @@ Full control over state and sync subscription. Use when you need custom logic ar
 'use client';
 
 import { useEffect, useState } from "react";
-import { LocalessComponent, localessEditable, isSyncEnabled, isBrowser } from "@localess/react";
+import { LocalessComponent, localessEditable, localessSyncOn } from "@localess/react";
 import type { Content, Page } from "./.localess/localess";
 
 export function PageClientManual({
@@ -594,13 +593,10 @@ export function PageClientManual({
   const [pageData, setPageData] = useState(initialContent.data);
 
   useEffect(() => {
-    if (isSyncEnabled() && isBrowser() && window.localess) {
-      window.localess.on(['input', 'change'], (event) => {
-        if (event.type === 'input' || event.type === 'change') {
-          setPageData(event.data);
-        }
-      });
-    }
+    // No-op if sync isn't enabled/usable; `event` is narrowed to the 'input' | 'change' variant
+    localessSyncOn(['input', 'change'], (event) => {
+      setPageData(event.data);
+    });
     // No cleanup needed: window.localess has no .off() method
   }, []);
 
@@ -760,7 +756,7 @@ The table below shows which symbols are available in each export.
 | `useLocaless`                                          |         ✅         |           ❌           |           ✅           |
 | `localessEditable` / `localessEditableField`           |         ✅         |           ❌           |           ✅           |
 | `isBrowser` / `isIframe`                               |         ✅         |           ❌           |           ✅           |
-| `isSyncEnabled`                                        |         ✅         |           ❌           |           ✅           |
+| `isSyncEnabled` / `localessSyncOn` / `localessSyncOnChange` / `localessSyncReady` |         ✅         |           ❌           |           ✅           |
 | Sync event types (`LocalessSync`, `EventToApp`, …)     |         ✅         |           ❌           |           ✅           |
 
 ---

package/SKILL.md

@@ -76,7 +76,7 @@ import { LocalessComponent } from "@localess/react";
 
 1. Read `data._schema` as the component registry key
 2. Look up registered component by that key
-3. If found → render component with `data`, `links`, `references`; when sync is enabled, also injects `data-ll-id` and `data-ll-schema` as props (user components should spread `{...localessEditable(data)}` on their root element)
+3. If found → render component with `data`, `links`, `references`; always injects `data-ll-id` and `data-ll-schema` as props (harmless outside the Visual Editor iframe; user components should spread `{...localessEditable(data)}` on their root element)
 4. If not found → try `fallbackComponent`
 5. If no fallback → render error message
 
@@ -155,13 +155,14 @@ import { localessEditable, localessEditableField } from "@localess/react";
 
 ## Visual Editor Sync
 
-`localessInit()` is the **single entry point** for Visual Editor integration. Setting `enableSync: true` handles everything: injecting the sync script, registering components, and enabling editable attribute injection on `LocalessComponent`.
+`localessInit()` is the **single entry point** for Visual Editor integration. Setting `enableSync: true` injects the sync script and enables live event subscription; component registration is independent of it.
 
 ### What `enableSync: true` activates
 
 1. Injects the Localess sync script (`loadLocalessSync`) into `<head>`
-2. Makes `LocalessComponent` inject `data-ll-id` and `data-ll-schema` on rendered elements
-3. Makes `localessEditable()` / `localessEditableField()` emit their `data-ll-*` attributes (no-op when sync is off)
+2. Makes `isSyncEnabled()` — and therefore `useLocaless`, `LocalessDocument`, `localessSyncOn`, `localessSyncOnChange` — actually subscribe to live editor events
+
+`LocalessComponent`'s `data-ll-id` / `data-ll-schema` injection and `localessEditable()` / `localessEditableField()` are unconditional — they always emit their `data-ll-*` attributes regardless of `enableSync`. They're inert outside the Visual Editor iframe, so leaving them on in production is harmless (though sync itself should stay off — see below).
 
 ```typescript
 localessInit({
@@ -246,22 +247,17 @@ If you manage content state yourself without `useLocaless` or `LocalessDocument`
 'use client';
 
 import { useEffect, useState } from "react";
-import { LocalessComponent, localessEditable, isSyncEnabled, localessSyncReady } from "@localess/react";
+import { LocalessComponent, localessEditable, localessSyncOn } from "@localess/react";
 import type { Content, Page } from "./.localess/localess";
 
 export function PageClient({ initialContent }: { initialContent: Content<Page> }) {
   const [pageData, setPageData] = useState(initialContent.data);
 
   useEffect(() => {
-    if (isSyncEnabled()) {
-      localessSyncReady().then(() => {
-        window.localess?.on(['input', 'change'], (event) => {
-          if (event.type === 'input' || event.type === 'change') {
-            setPageData(event.data);
-          }
-        });
-      });
-    }
+    // No-op if sync isn't enabled/usable; `event` is narrowed to the 'input' | 'change' variant
+    localessSyncOn(['input', 'change'], (event) => {
+      setPageData(event.data);
+    });
     // No cleanup needed: window.localess has no .off() method
   }, []);
 
@@ -294,6 +290,8 @@ export function PageClient({ initialContent }: { initialContent: Content<Page> }
 
 > `window.localess` only exposes `.on()` and `.onChange()` — there is no `.off()`.
 
+`localessSyncOn(event, callback)` wraps `.on()`; `localessSyncOnChange(callback)` wraps `.onChange()` — equivalent to `localessSyncOn(['input', 'change'], callback)`, firing only for content-change events (`callback` receives the `input`/`change` variant, not the full `EventToApp` union). Both handle the `isSyncEnabled()` check and the `localessSyncReady()` wait internally.
+
 ### Pattern: Split Server/Client Components (Next.js App Router)
 
 **Preload data server-side** and pass it to the Client Component. The page renders immediately with server data — no loading flash — and Visual Editor sync kicks in on top.
@@ -365,7 +363,7 @@ export default async function HomePage({ params }: { params: Promise<{ locale?:
 'use client';
 
 import { useEffect, useState } from "react";
-import { LocalessComponent, localessEditable, isSyncEnabled, localessSyncReady } from "@localess/react";
+import { LocalessComponent, localessEditable, localessSyncOn } from "@localess/react";
 import type { Content, Page } from "./.localess/localess";
 
 export function PageClient({ initialContent }: { initialContent: Content<Page> }) {
@@ -373,15 +371,10 @@ export function PageClient({ initialContent }: { initialContent: Content<Page> }
   const [pageData, setPageData] = useState(initialContent.data);
 
   useEffect(() => {
-    if (isSyncEnabled()) {
-      localessSyncReady().then(() => {
-        window.localess?.on(['input', 'change'], (event) => {
-          if (event.type === 'input' || event.type === 'change') {
-            setPageData(event.data);
-          }
-        });
-      });
-    }
+    // No-op if sync isn't enabled/usable; `event` is narrowed to the 'input' | 'change' variant
+    localessSyncOn(['input', 'change'], (event) => {
+      setPageData(event.data);
+    });
     // No cleanup needed: window.localess has no .off() method
   }, []);
 
@@ -623,7 +616,7 @@ export { localessInit, getLocalessClient }
 
 // Component registry
 export { registerComponent, unregisterComponent, setComponents, getComponent }
-export { setFallbackComponent, getFallbackComponent, isSyncEnabled }
+export { setFallbackComponent, getFallbackComponent, isSyncEnabled, localessSyncOn, localessSyncOnChange, localessSyncReady }
 
 // Rendering
 export { LocalessComponent }        // Dynamic schema-to-component renderer
@@ -647,7 +640,7 @@ export { isBrowser, isServer, isIframe }
 // Types (re-exported from @localess/client + local)
 export type { AssetTransformParams }            // Image transform params for resolveAsset
 export type { LocalessClient, LocalessOptions }
-export type { LocalessSync, EventToApp, EventCallback, EventToAppType }
+export type { LocalessSync, EventToApp, EventToAppOf, EventCallback, EventToAppType }
 export type {
   Content, ContentData, ContentMetadata, ContentDataSchema, ContentDataField,
   ContentAsset, ContentRichText, ContentLink, ContentReference,

package/dist/core/components/localess-component.d.ts

@@ -30,8 +30,8 @@ export type LocalessComponentProps<T extends ContentData = ContentData> = {
  * Dynamic schema-to-component renderer for use in SPA and client-side contexts.
  *
  * Looks up `data._schema` in the component registry (set via `localessInit` or `setComponents`),
- * renders the matched component, and — when Visual Editor sync is active — automatically
- * spreads `localessEditable` attributes on the root element for live targeting.
+ * renders the matched component, and always spreads `localessEditable` attributes on the root
+ * element (`data-ll-id` / `data-ll-schema`) so the Visual Editor can target it for live editing.
  *
  * Falls back to the `fallbackComponent` (if registered) when the schema key is not found,
  * or renders an inline error message as a last resort.

package/dist/core/components/localess-document.js

@@ -1 +1 @@
-const e=require("../../console.js"),t=require("../state.js"),n=require("./localess-component.js");let r=require("react"),i=require("react/jsx-runtime");var a=(0,r.forwardRef)(({document:a},o)=>{let[s,c]=(0,r.useState)(a.data);return(0,r.useEffect)(()=>{t.isSyncEnabled()&&t.localessSyncReady().then(()=>{window.localess?.on([`input`,`change`],e=>{(e.type===`change`||e.type===`input`)&&c(e.data)})})},[]),s?(0,i.jsx)(n.LocalessComponent,{ref:o,data:s,assets:a.assets,links:a.links,references:a.references}):(console.error(`LocalessDocument property %cdocument.data%c is not provided.`,e.FONT_BOLD,e.FONT_NORMAL),(0,i.jsxs)(`div`,{children:[`LocalessDocument property `,(0,i.jsx)(`b`,{children:`document.data`}),` is not provided.`]}))});exports.LocalessDocument=a;
+const e=require("../../console.js"),t=require("../state.js"),n=require("./localess-component.js");let r=require("react"),i=require("react/jsx-runtime");var a=(0,r.forwardRef)(({document:a},o)=>{let[s,c]=(0,r.useState)(a.data);return(0,r.useEffect)(()=>{t.localessSyncOn([`input`,`change`],e=>{c(e.data)})},[]),s?(0,i.jsx)(n.LocalessComponent,{ref:o,data:s,assets:a.assets,links:a.links,references:a.references}):(console.error(`LocalessDocument property %cdocument.data%c is not provided.`,e.FONT_BOLD,e.FONT_NORMAL),(0,i.jsxs)(`div`,{children:[`LocalessDocument property `,(0,i.jsx)(`b`,{children:`document.data`}),` is not provided.`]}))});exports.LocalessDocument=a;

package/dist/core/components/localess-document.mjs

@@ -1,28 +1,26 @@
 import { FONT_BOLD as e, FONT_NORMAL as t } from "../../console.mjs";
-import { isSyncEnabled as n, localessSyncReady as r } from "../state.mjs";
-import { LocalessComponent as i } from "./localess-component.mjs";
-import { forwardRef as a, useEffect as o, useState as s } from "react";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { localessSyncOn as n } from "../state.mjs";
+import { LocalessComponent as r } from "./localess-component.mjs";
+import { forwardRef as i, useEffect as a, useState as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
 //#region src/core/components/localess-document.tsx
-var u = a(({ document: a }, u) => {
-	let [d, f] = s(a.data);
-	return o(() => {
-		n() && r().then(() => {
-			window.localess?.on(["input", "change"], (e) => {
-				(e.type === "change" || e.type === "input") && f(e.data);
-			});
+var l = i(({ document: i }, l) => {
+	let [u, d] = o(i.data);
+	return a(() => {
+		n(["input", "change"], (e) => {
+			d(e.data);
 		});
-	}, []), d ? /* @__PURE__ */ c(i, {
-		ref: u,
-		data: d,
-		assets: a.assets,
-		links: a.links,
-		references: a.references
-	}) : (console.error("LocalessDocument property %cdocument.data%c is not provided.", e, t), /* @__PURE__ */ l("div", { children: [
+	}, []), u ? /* @__PURE__ */ s(r, {
+		ref: l,
+		data: u,
+		assets: i.assets,
+		links: i.links,
+		references: i.references
+	}) : (console.error("LocalessDocument property %cdocument.data%c is not provided.", e, t), /* @__PURE__ */ c("div", { children: [
 		"LocalessDocument property ",
-		/* @__PURE__ */ c("b", { children: "document.data" }),
+		/* @__PURE__ */ s("b", { children: "document.data" }),
 		" is not provided."
 	] }));
 });
 //#endregion
-export { u as LocalessDocument };
+export { l as LocalessDocument };

package/dist/core/hooks/use-localess.js

@@ -1 +1 @@
-const e=require("../state.js");let t=require("react");var n=(n,r={})=>{let[i,a]=(0,t.useState)(),o=e.getLocalessClient(),s;return s=Array.isArray(n)?n.join(`/`):n,(0,t.useEffect)(()=>{async function t(){let t=await o.getContentBySlug(s,r);a(t),e.isSyncEnabled()&&(await e.localessSyncReady(),window.localess?.on([`input`,`change`],e=>{(e.type===`change`||e.type===`input`)&&a({...t,data:e.data})}))}t()},[n,r,o]),i};exports.useLocaless=n;
+const e=require("../state.js");let t=require("react");var n=(n,r={})=>{let[i,a]=(0,t.useState)(),o=e.getLocalessClient(),s;return s=Array.isArray(n)?n.join(`/`):n,(0,t.useEffect)(()=>{async function t(){let t=await o.getContentBySlug(s,r);a(t),e.localessSyncOn([`input`,`change`],e=>{a({...t,data:e.data})})}t()},[n,r,o]),i};exports.useLocaless=n;

package/dist/core/hooks/use-localess.mjs

@@ -1,24 +1,24 @@
-import { getLocalessClient as e, isSyncEnabled as t, localessSyncReady as n } from "../state.mjs";
-import { useEffect as r, useState as i } from "react";
+import { getLocalessClient as e, localessSyncOn as t } from "../state.mjs";
+import { useEffect as n, useState as r } from "react";
 //#region src/core/hooks/use-localess.ts
-var a = (a, o = {}) => {
-	let [s, c] = i(), l = e(), u;
-	return u = Array.isArray(a) ? a.join("/") : a, r(() => {
+var i = (i, a = {}) => {
+	let [o, s] = r(), c = e(), l;
+	return l = Array.isArray(i) ? i.join("/") : i, n(() => {
 		async function e() {
-			let e = await l.getContentBySlug(u, o);
-			c(e), t() && (await n(), window.localess?.on(["input", "change"], (t) => {
-				(t.type === "change" || t.type === "input") && c({
+			let e = await c.getContentBySlug(l, a);
+			s(e), t(["input", "change"], (t) => {
+				s({
 					...e,
 					data: t.data
 				});
-			}));
+			});
 		}
 		e();
 	}, [
+		i,
 		a,
-		o,
-		l
-	]), s;
+		c
+	]), o;
 };
 //#endregion
-export { a as useLocaless };
+export { i as useLocaless };

package/dist/core/models/sync.d.ts

@@ -1 +1 @@
-export type { EventCallback, EventToApp, EventToAppType, LocalessSync } from '@localess/client';
+export type { EventCallback, EventToApp, EventToAppOf, EventToAppType, LocalessSync } from '@localess/client';

package/dist/core/state.d.ts

@@ -1,4 +1,4 @@
-import { AssetTransformParams, LocalessClient } from '@localess/client';
+import { AssetTransformParams, EventToAppOf, EventToAppType, LocalessClient } from '@localess/client';
 import { default as React } from 'react';
 import { ContentAsset, LocalessOptions } from './models';
 /**
@@ -107,8 +107,8 @@ export declare function getFallbackComponent(): React.ElementType | undefined;
  *
  * Self-sufficient: callers don't need to separately check {@link isBrowser} or {@link isIframe}.
  *
- * Used internally by {@link LocalessComponent}, {@link LocalessDocument}, and {@link useLocaless}
- * to decide whether to inject editable attributes and subscribe to sync events.
+ * Used internally by {@link localessSyncOn} and {@link localessSyncOnChange} to decide whether to
+ * subscribe to sync events — and therefore indirectly by {@link LocalessDocument} and {@link useLocaless}.
  *
  * @returns `true` if sync is enabled and usable, `false` otherwise.
  */
@@ -120,8 +120,9 @@ export declare function isSyncEnabled(): boolean;
  * loaded. Never rejects — a failed script load is logged via {@link loadLocalessSync} and resolves
  * anyway, since the rest of the app functions without live editing.
  *
- * Use this before subscribing to `window.localess.on(...)` to avoid a race where the listener is
- * attached before the sync script has run.
+ * Use this before subscribing directly to `window.localess.on(...)` to avoid a race where the
+ * listener is attached before the sync script has run. Prefer {@link localessSyncOn} instead —
+ * it wraps this exact pattern.
  *
  * @returns A promise that resolves when sync is ready (or immediately, if not applicable).
  *
@@ -137,6 +138,43 @@ export declare function isSyncEnabled(): boolean;
  * ```
  */
 export declare function localessSyncReady(): Promise<void>;
+/**
+ * Subscribes to Visual Editor sync event(s), handling the `isSyncEnabled()` check and the
+ * {@link localessSyncReady} wait internally so call sites don't have to.
+ *
+ * No-op if sync isn't enabled or usable in the current context (see {@link isSyncEnabled}).
+ *
+ * @param event - A single event type or array of event types to subscribe to.
+ * @param callback - Called with the event, narrowed to the variant(s) matching `event`.
+ *
+ * @example
+ * ```ts
+ * useEffect(() => {
+ *   localessSyncOn(['input', 'change'], event => setContentData(event.data));
+ * }, []);
+ * ```
+ */
+export declare function localessSyncOn<T extends EventToAppType>(event: T | T[], callback: (event: EventToAppOf<T>) => void): void;
+/**
+ * Subscribes to content-change Visual Editor sync events (`input` and `change`), handling the
+ * `isSyncEnabled()` check and the {@link localessSyncReady} wait internally so call sites don't
+ * have to.
+ *
+ * Equivalent to `localessSyncOn(['input', 'change'], callback)` (mirrors `window.localess.onChange`).
+ * For other event types (`save`, `publish`, `pong`, `enterSchema`, `hoverSchema`), use {@link localessSyncOn}.
+ *
+ * No-op if sync isn't enabled or usable in the current context (see {@link isSyncEnabled}).
+ *
+ * @param callback - Called with the `input`/`change` event.
+ *
+ * @example
+ * ```ts
+ * useEffect(() => {
+ *   localessSyncOnChange(event => setContentData(event.data));
+ * }, []);
+ * ```
+ */
+export declare function localessSyncOnChange(callback: (event: EventToAppOf<'change' | 'input'>) => void): void;
 export declare function getOrigin(): string;
 /**
  * Resolves a {@link ContentAsset} to its full URL string.

package/dist/core/state.js

@@ -1 +1 @@
-const e=require("../console.js");let t=require("@localess/client");var n=void 0,r=void 0,i={},a=void 0,o=!1,s=void 0,c=``;function l(e){let{components:l,fallbackComponent:u,enableSync:d,...f}=e;return r=(0,t.localessClient)(f),n=f.origin,c=`${e.origin}/api/v1/spaces/${e.spaceId}/assets/`,i=l||{},a=u,d&&(o=!0,s=(0,t.loadLocalessSync)(f.origin).catch(e=>{console.error(`[Localess] Failed to load sync script.`,e)})),r}function u(){if(!r)throw console.error(`[Localess] No client found. Please check if the Localess is initialized. Use localessInit function.`),Error(`[Localess] No client found.`);return r}function d(e,t){i[e]=t}function f(e){delete i[e]}function p(e){i=e}function m(t){if(Object.hasOwn(i,t))return i[t];console.error(`[Localess] component %c${t}%c can't be found.`,e.FONT_BOLD,e.FONT_NORMAL)}function h(e){a=e}function g(){return a}function _(){return o&&(0,t.isBrowser)()&&(0,t.isIframe)()}function v(){return s??Promise.resolve()}function y(){if(!n)throw console.error(`[Localess] No origin found. Please check if the Localess is initialized. Use localessInit function.`),Error(`[Localess] No origin found.`);return n}function b(e,n){let r=`${c}${e.uri}`,i=(0,t.buildAssetQueryString)(n);return i?`${r}?${i}`:r}exports.getComponent=m,exports.getFallbackComponent=g,exports.getLocalessClient=u,exports.getOrigin=y,exports.isSyncEnabled=_,exports.localessInit=l,exports.localessSyncReady=v,exports.registerComponent=d,exports.resolveAsset=b,exports.setComponents=p,exports.setFallbackComponent=h,exports.unregisterComponent=f;
+const e=require("../console.js");let t=require("@localess/client");var n=void 0,r=void 0,i={},a=void 0,o=!1,s=void 0,c=``;function l(e){let{components:l,fallbackComponent:u,enableSync:d,...f}=e;return r=(0,t.localessClient)(f),n=f.origin,c=`${e.origin}/api/v1/spaces/${e.spaceId}/assets/`,i=l||{},a=u,d&&(o=!0,s=(0,t.loadLocalessSync)(f.origin).catch(e=>{console.error(`[Localess] Failed to load sync script.`,e)})),r}function u(){if(!r)throw console.error(`[Localess] No client found. Please check if the Localess is initialized. Use localessInit function.`),Error(`[Localess] No client found.`);return r}function d(e,t){i[e]=t}function f(e){delete i[e]}function p(e){i=e}function m(t){if(Object.hasOwn(i,t))return i[t];console.error(`[Localess] component %c${t}%c can't be found.`,e.FONT_BOLD,e.FONT_NORMAL)}function h(e){a=e}function g(){return a}function _(){return o&&(0,t.isBrowser)()&&(0,t.isIframe)()}function v(){return s??Promise.resolve()}function y(e,t){_()&&v().then(()=>{window.localess?.on(e,t)})}function b(e){_()&&v().then(()=>{window.localess?.onChange(e)})}function x(){if(!n)throw console.error(`[Localess] No origin found. Please check if the Localess is initialized. Use localessInit function.`),Error(`[Localess] No origin found.`);return n}function S(e,n){let r=`${c}${e.uri}`,i=(0,t.buildAssetQueryString)(n);return i?`${r}?${i}`:r}exports.getComponent=m,exports.getFallbackComponent=g,exports.getLocalessClient=u,exports.getOrigin=x,exports.isSyncEnabled=_,exports.localessInit=l,exports.localessSyncOn=y,exports.localessSyncOnChange=b,exports.localessSyncReady=v,exports.registerComponent=d,exports.resolveAsset=S,exports.setComponents=p,exports.setFallbackComponent=h,exports.unregisterComponent=f;

package/dist/core/state.mjs

@@ -37,13 +37,23 @@ function S() {
 function C() {
 	return f ?? Promise.resolve();
 }
-function w() {
+function w(e, t) {
+	S() && C().then(() => {
+		window.localess?.on(e, t);
+	});
+}
+function T(e) {
+	S() && C().then(() => {
+		window.localess?.onChange(e);
+	});
+}
+function E() {
 	if (!s) throw console.error("[Localess] No origin found. Please check if the Localess is initialized. Use localessInit function."), Error("[Localess] No origin found.");
 	return s;
 }
-function T(e, t) {
+function D(e, t) {
 	let r = `${p}${e.uri}`, i = n(t);
 	return i ? `${r}?${i}` : r;
 }
 //#endregion
-export { y as getComponent, x as getFallbackComponent, h as getLocalessClient, w as getOrigin, S as isSyncEnabled, m as localessInit, C as localessSyncReady, g as registerComponent, T as resolveAsset, v as setComponents, b as setFallbackComponent, _ as unregisterComponent };
+export { y as getComponent, x as getFallbackComponent, h as getLocalessClient, E as getOrigin, S as isSyncEnabled, m as localessInit, w as localessSyncOn, T as localessSyncOnChange, C as localessSyncReady, g as registerComponent, D as resolveAsset, v as setComponents, b as setFallbackComponent, _ as unregisterComponent };

package/dist/index.js

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./core/state.js"),t=require("./core/utils/link.util.js"),n=require("./core/components/localess-component.js"),r=require("./core/components/localess-document.js"),i=require("./core/hooks/use-localess.js"),a=require("./core/richtext.js");let o=require("@localess/client");exports.LocalessComponent=n.LocalessComponent,exports.LocalessDocument=r.LocalessDocument,exports.findLink=t.findLink,exports.getComponent=e.getComponent,exports.getFallbackComponent=e.getFallbackComponent,exports.getLocalessClient=e.getLocalessClient,exports.getOrigin=e.getOrigin,Object.defineProperty(exports,"isBrowser",{enumerable:!0,get:function(){return o.isBrowser}}),Object.defineProperty(exports,"isIframe",{enumerable:!0,get:function(){return o.isIframe}}),Object.defineProperty(exports,"isServer",{enumerable:!0,get:function(){return o.isServer}}),exports.isSyncEnabled=e.isSyncEnabled,Object.defineProperty(exports,"localessEditable",{enumerable:!0,get:function(){return o.localessEditable}}),Object.defineProperty(exports,"localessEditableField",{enumerable:!0,get:function(){return o.localessEditableField}}),exports.localessInit=e.localessInit,exports.localessSyncReady=e.localessSyncReady,exports.registerComponent=e.registerComponent,exports.renderRichTextToReact=a.renderRichTextToReact,exports.resolveAsset=e.resolveAsset,exports.setComponents=e.setComponents,exports.setFallbackComponent=e.setFallbackComponent,exports.unregisterComponent=e.unregisterComponent,exports.useLocaless=i.useLocaless;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./core/state.js"),t=require("./core/utils/link.util.js"),n=require("./core/components/localess-component.js"),r=require("./core/components/localess-document.js"),i=require("./core/hooks/use-localess.js"),a=require("./core/richtext.js");let o=require("@localess/client");exports.LocalessComponent=n.LocalessComponent,exports.LocalessDocument=r.LocalessDocument,exports.findLink=t.findLink,exports.getComponent=e.getComponent,exports.getFallbackComponent=e.getFallbackComponent,exports.getLocalessClient=e.getLocalessClient,exports.getOrigin=e.getOrigin,Object.defineProperty(exports,"isBrowser",{enumerable:!0,get:function(){return o.isBrowser}}),Object.defineProperty(exports,"isIframe",{enumerable:!0,get:function(){return o.isIframe}}),Object.defineProperty(exports,"isServer",{enumerable:!0,get:function(){return o.isServer}}),exports.isSyncEnabled=e.isSyncEnabled,Object.defineProperty(exports,"localessEditable",{enumerable:!0,get:function(){return o.localessEditable}}),Object.defineProperty(exports,"localessEditableField",{enumerable:!0,get:function(){return o.localessEditableField}}),exports.localessInit=e.localessInit,exports.localessSyncOn=e.localessSyncOn,exports.localessSyncOnChange=e.localessSyncOnChange,exports.localessSyncReady=e.localessSyncReady,exports.registerComponent=e.registerComponent,exports.renderRichTextToReact=a.renderRichTextToReact,exports.resolveAsset=e.resolveAsset,exports.setComponents=e.setComponents,exports.setFallbackComponent=e.setFallbackComponent,exports.unregisterComponent=e.unregisterComponent,exports.useLocaless=i.useLocaless;

package/dist/index.mjs

@@ -1,8 +1,8 @@
-import { getComponent as e, getFallbackComponent as t, getLocalessClient as n, getOrigin as r, isSyncEnabled as i, localessInit as a, localessSyncReady as o, registerComponent as s, resolveAsset as c, setComponents as l, setFallbackComponent as u, unregisterComponent as d } from "./core/state.mjs";
-import { findLink as f } from "./core/utils/link.util.mjs";
-import { isBrowser as p, isIframe as m, isServer as h, localessEditable as g, localessEditableField as _ } from "./core/utils/index.mjs";
-import { LocalessComponent as v } from "./core/components/localess-component.mjs";
-import { LocalessDocument as y } from "./core/components/localess-document.mjs";
-import { useLocaless as b } from "./core/hooks/use-localess.mjs";
-import { renderRichTextToReact as x } from "./core/richtext.mjs";
-export { v as LocalessComponent, y as LocalessDocument, f as findLink, e as getComponent, t as getFallbackComponent, n as getLocalessClient, r as getOrigin, p as isBrowser, m as isIframe, h as isServer, i as isSyncEnabled, g as localessEditable, _ as localessEditableField, a as localessInit, o as localessSyncReady, s as registerComponent, x as renderRichTextToReact, c as resolveAsset, l as setComponents, u as setFallbackComponent, d as unregisterComponent, b as useLocaless };
+import { getComponent as e, getFallbackComponent as t, getLocalessClient as n, getOrigin as r, isSyncEnabled as i, localessInit as a, localessSyncOn as o, localessSyncOnChange as s, localessSyncReady as c, registerComponent as l, resolveAsset as u, setComponents as d, setFallbackComponent as f, unregisterComponent as p } from "./core/state.mjs";
+import { findLink as m } from "./core/utils/link.util.mjs";
+import { isBrowser as h, isIframe as g, isServer as _, localessEditable as v, localessEditableField as y } from "./core/utils/index.mjs";
+import { LocalessComponent as b } from "./core/components/localess-component.mjs";
+import { LocalessDocument as x } from "./core/components/localess-document.mjs";
+import { useLocaless as S } from "./core/hooks/use-localess.mjs";
+import { renderRichTextToReact as C } from "./core/richtext.mjs";
+export { b as LocalessComponent, x as LocalessDocument, m as findLink, e as getComponent, t as getFallbackComponent, n as getLocalessClient, r as getOrigin, h as isBrowser, g as isIframe, _ as isServer, i as isSyncEnabled, v as localessEditable, y as localessEditableField, a as localessInit, o as localessSyncOn, s as localessSyncOnChange, c as localessSyncReady, l as registerComponent, C as renderRichTextToReact, u as resolveAsset, d as setComponents, f as setFallbackComponent, p as unregisterComponent, S as useLocaless };

package/dist/rsc/index.d.ts

@@ -25,6 +25,6 @@
  * NOT compatible with Next.js `output: 'export'` — use `@localess/react/ssr` for static exports.
  */
 export * from '../core/components/localess-component';
-export { isSyncEnabled, localessSyncReady } from '../core/state';
+export { isSyncEnabled, localessSyncOn, localessSyncOnChange, localessSyncReady } from '../core/state';
 export * from '../ssr';
 export * from './localess-document';

package/dist/rsc/index.js

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../core/state.js"),t=require("../core/utils/link.util.js"),n=require("../core/components/localess-component.js"),r=require("../core/richtext.js"),i=require("../ssr/localess-component.js"),a=require("../ssr/localess-document.js"),o=require("./localess-document.js");let s=require("@localess/client");exports.LocalessComponent=n.LocalessComponent,exports.LocalessDocument=o.LocalessDocument,exports.LocalessServerComponent=i.LocalessServerComponent,exports.LocalessServerDocument=a.LocalessServerDocument,exports.findLink=t.findLink,exports.getComponent=e.getComponent,exports.getFallbackComponent=e.getFallbackComponent,exports.getLocalessClient=e.getLocalessClient,Object.defineProperty(exports,"isBrowser",{enumerable:!0,get:function(){return s.isBrowser}}),Object.defineProperty(exports,"isIframe",{enumerable:!0,get:function(){return s.isIframe}}),Object.defineProperty(exports,"isServer",{enumerable:!0,get:function(){return s.isServer}}),exports.isSyncEnabled=e.isSyncEnabled,Object.defineProperty(exports,"localessEditable",{enumerable:!0,get:function(){return s.localessEditable}}),Object.defineProperty(exports,"localessEditableField",{enumerable:!0,get:function(){return s.localessEditableField}}),exports.localessInit=e.localessInit,exports.localessSyncReady=e.localessSyncReady,exports.registerComponent=e.registerComponent,exports.renderRichTextToReact=r.renderRichTextToReact,exports.resolveAsset=e.resolveAsset,exports.unregisterComponent=e.unregisterComponent;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../core/state.js"),t=require("../core/utils/link.util.js"),n=require("../core/components/localess-component.js"),r=require("../core/richtext.js"),i=require("../ssr/localess-component.js"),a=require("../ssr/localess-document.js"),o=require("./localess-document.js");let s=require("@localess/client");exports.LocalessComponent=n.LocalessComponent,exports.LocalessDocument=o.LocalessDocument,exports.LocalessServerComponent=i.LocalessServerComponent,exports.LocalessServerDocument=a.LocalessServerDocument,exports.findLink=t.findLink,exports.getComponent=e.getComponent,exports.getFallbackComponent=e.getFallbackComponent,exports.getLocalessClient=e.getLocalessClient,Object.defineProperty(exports,"isBrowser",{enumerable:!0,get:function(){return s.isBrowser}}),Object.defineProperty(exports,"isIframe",{enumerable:!0,get:function(){return s.isIframe}}),Object.defineProperty(exports,"isServer",{enumerable:!0,get:function(){return s.isServer}}),exports.isSyncEnabled=e.isSyncEnabled,Object.defineProperty(exports,"localessEditable",{enumerable:!0,get:function(){return s.localessEditable}}),Object.defineProperty(exports,"localessEditableField",{enumerable:!0,get:function(){return s.localessEditableField}}),exports.localessInit=e.localessInit,exports.localessSyncOn=e.localessSyncOn,exports.localessSyncOnChange=e.localessSyncOnChange,exports.localessSyncReady=e.localessSyncReady,exports.registerComponent=e.registerComponent,exports.renderRichTextToReact=r.renderRichTextToReact,exports.resolveAsset=e.resolveAsset,exports.unregisterComponent=e.unregisterComponent;

package/dist/rsc/index.mjs

@@ -1,9 +1,9 @@
-import { getComponent as e, getFallbackComponent as t, getLocalessClient as n, isSyncEnabled as r, localessInit as i, localessSyncReady as a, registerComponent as o, resolveAsset as s, unregisterComponent as c } from "../core/state.mjs";
-import { findLink as l } from "../core/utils/link.util.mjs";
-import { isBrowser as u, isIframe as d, isServer as f, localessEditable as p, localessEditableField as m } from "../core/utils/index.mjs";
-import { LocalessComponent as h } from "../core/components/localess-component.mjs";
-import { renderRichTextToReact as g } from "../core/richtext.mjs";
-import { LocalessServerComponent as _ } from "../ssr/localess-component.mjs";
-import { LocalessServerDocument as v } from "../ssr/localess-document.mjs";
-import { LocalessDocument as y } from "./localess-document.mjs";
-export { h as LocalessComponent, y as LocalessDocument, _ as LocalessServerComponent, v as LocalessServerDocument, l as findLink, e as getComponent, t as getFallbackComponent, n as getLocalessClient, u as isBrowser, d as isIframe, f as isServer, r as isSyncEnabled, p as localessEditable, m as localessEditableField, i as localessInit, a as localessSyncReady, o as registerComponent, g as renderRichTextToReact, s as resolveAsset, c as unregisterComponent };
+import { getComponent as e, getFallbackComponent as t, getLocalessClient as n, isSyncEnabled as r, localessInit as i, localessSyncOn as a, localessSyncOnChange as o, localessSyncReady as s, registerComponent as c, resolveAsset as l, unregisterComponent as u } from "../core/state.mjs";
+import { findLink as d } from "../core/utils/link.util.mjs";
+import { isBrowser as f, isIframe as p, isServer as m, localessEditable as h, localessEditableField as g } from "../core/utils/index.mjs";
+import { LocalessComponent as _ } from "../core/components/localess-component.mjs";
+import { renderRichTextToReact as v } from "../core/richtext.mjs";
+import { LocalessServerComponent as y } from "../ssr/localess-component.mjs";
+import { LocalessServerDocument as b } from "../ssr/localess-document.mjs";
+import { LocalessDocument as x } from "./localess-document.mjs";
+export { _ as LocalessComponent, x as LocalessDocument, y as LocalessServerComponent, b as LocalessServerDocument, d as findLink, e as getComponent, t as getFallbackComponent, n as getLocalessClient, f as isBrowser, p as isIframe, m as isServer, r as isSyncEnabled, h as localessEditable, g as localessEditableField, i as localessInit, a as localessSyncOn, o as localessSyncOnChange, s as localessSyncReady, c as registerComponent, v as renderRichTextToReact, l as resolveAsset, u as unregisterComponent };

package/dist/rsc/localess-sync.js

@@ -1 +1 @@
-"use client";let e=require("react"),t=require("@localess/client");var n=n=>(console.info(`LocalessSync:init`),(0,e.useEffect)(()=>{async function e(){n.enableSync&&(0,t.isBrowser)()&&(0,t.isIframe)()&&(await(0,t.loadLocalessSync)(n.origin),window.localess?.on([`input`,`change`],e=>{console.info(`LocalessSync:change:`,e),(e.type===`change`||e.type===`input`)&&(n.document.data=e.data)}))}e()},[]),null);exports.LocalessSync=n;
+"use client";const e=require("../core/state.js");let t=require("react"),n=require("@localess/client");var r=r=>(console.info(`LocalessSync:init`),(0,t.useEffect)(()=>{async function t(){r.enableSync&&(0,n.isBrowser)()&&(0,n.isIframe)()&&(await(0,n.loadLocalessSync)(r.origin),e.localessSyncOnChange(e=>{console.info(`LocalessSync:change:`,e),r.document.data=e.data}))}t()},[]),null);exports.LocalessSync=r;

package/dist/rsc/localess-sync.mjs

@@ -1,15 +1,16 @@
 "use client";
-import { isBrowser as e, isIframe as t } from "../core/utils/index.mjs";
-import { useEffect as n } from "react";
-import { loadLocalessSync as r } from "@localess/client";
+import { localessSyncOnChange as e } from "../core/state.mjs";
+import { isBrowser as t, isIframe as n } from "../core/utils/index.mjs";
+import { useEffect as r } from "react";
+import { loadLocalessSync as i } from "@localess/client";
 //#region src/rsc/localess-sync.tsx
-var i = (i) => (console.info("LocalessSync:init"), n(() => {
-	async function n() {
-		i.enableSync && e() && t() && (await r(i.origin), window.localess?.on(["input", "change"], (e) => {
-			console.info("LocalessSync:change:", e), (e.type === "change" || e.type === "input") && (i.document.data = e.data);
+var a = (a) => (console.info("LocalessSync:init"), r(() => {
+	async function r() {
+		a.enableSync && t() && n() && (await i(a.origin), e((e) => {
+			console.info("LocalessSync:change:", e), a.document.data = e.data;
 		}));
 	}
-	n();
+	r();
 }, []), null);
 //#endregion
-export { i as LocalessSync };
+export { a as LocalessSync };

package/dist/ssr/index.d.ts

@@ -22,8 +22,8 @@
  * - LocalessDocument   (requires 'use client')
  * - useLocaless        (requires 'use client')
  * - localessEditable / localessEditableField / isBrowser / isIframe (browser-only)
- * - isSyncEnabled      (not meaningful without live editing)
- * - Sync event types   (LocalessSync, EventToApp, EventCallback, EventToAppType)
+ * - isSyncEnabled / localessSyncOn / localessSyncOnChange (not meaningful without live editing)
+ * - Sync event types   (LocalessSync, EventToApp, EventToAppOf, EventCallback, EventToAppType)
  */
 export type * from '../core/models';
 export { renderRichTextToReact } from '../core/richtext';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@localess/react",
-  "version": "3.3.0-dev.20260708090119",
+  "version": "3.3.0-dev.20260708124505",
   "description": "ReactJS JavaScript/TypeScript SDK for Localess's API.",
   "keywords": [
     "localess",
@@ -61,7 +61,7 @@
     "react-dom": "^17 || ^18 || ^19"
   },
   "dependencies": {
-    "@localess/client": "3.3.0-dev.20260708090119",
+    "@localess/client": "3.3.0-dev.20260708124505",
     "@tiptap/extension-bold": "^3.22.5",
     "@tiptap/extension-bullet-list": "^3.22.5",
     "@tiptap/extension-code": "^3.22.5",