@localess/react 3.0.1-dev.20260408172608 → 3.0.1-dev.20260408183951

package/README.md

@@ -309,7 +309,9 @@ const NavLink = ({ data, links }) => (
 
 ## Visual Editor Events
 
-When `enableSync: true` is set in `localessInit`, Visual Editor live-editing is handled **automatically** by the `useLocaless` hook — no manual event wiring needed.
+### With `useLocaless` Hook
+
+When `enableSync: true` is set in `localessInit`, the `useLocaless` hook handles the full cycle automatically — initial fetch and live sync updates — with no extra wiring needed.
 
 ```tsx
 'use client';
@@ -318,7 +320,6 @@ import { useLocaless, LocalessComponent, localessEditable } from "@localess/reac
 import type { Page } from "./.localess/localess";
 
 export function PageView({ slug, locale }: { slug: string; locale?: string }) {
-  // Automatically subscribes to Visual Editor input/change events when enableSync is active
   const content = useLocaless<Page>(slug, { locale });
 
   if (!content) return null;
@@ -333,14 +334,101 @@ export function PageView({ slug, locale }: { slug: string; locale?: string }) {
 }
 ```
 
-> `useLocaless` handles the full cycle: initial fetch + live sync updates when inside the editor iframe.
+### With `LocalessDocument` Component
+
+`LocalessDocument` is a component alternative to the hook. Pass it server-fetched content data and it handles live sync updates internally, delegating rendering to `LocalessComponent`.
+
+```tsx
+// app/[locale]/page.tsx (Server Component — fetches data)
+import { getLocalessClient, LocalessDocument } from "@localess/react";
+import type { Page } from "./.localess/localess";
+
+export default async function HomePage({ params }: { params: Promise<{ locale?: string }> }) {
+  const { locale } = await params;
+  const client = getLocalessClient();
+  const content = await client.getContentBySlug<Page>('home', { locale });
+
+  return (
+    <LocalessDocument
+      data={content.data}
+      links={content.links}
+      references={content.references}
+    />
+  );
+}
+```
+
+**Props:**
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `data` | `ContentData` | ✅ | Initial content data (typically server-fetched) |
+| `links` | `Links` | ❌ | Resolved links map, forwarded to the inner `LocalessComponent` |
+| `references` | `References` | ❌ | Resolved references map, forwarded to the inner `LocalessComponent` |
+| `ref` | `React.Ref<HTMLElement>` | ❌ | Forwarded to the rendered root element |
+| `...rest` | `any` | ❌ | Any additional props are forwarded |
+
+> `LocalessDocument` subscribes to `input` / `change` editor events automatically when `enableSync` is active. It is a Client Component internally — no `'use client'` directive needed at the call site in Server Components.
+
+### Manual Integration
+
+If you manage content state yourself without `useLocaless` or `LocalessDocument`, subscribe to editor events directly via `window.localess`:
+
+```tsx
+'use client';
+
+import { useEffect, useState } from "react";
+import { LocalessComponent, localessEditable, isSyncEnabled, isBrowser } 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 cleanup needed: window.localess has no .off() method
+  }, []);
+
+  return (
+    <main {...localessEditable(pageData)}>
+      {pageData?.body.map(item => (
+        <LocalessComponent key={item._id} data={item} links={initialContent.links} references={initialContent.references} />
+      ))}
+    </main>
+  );
+}
+```
+
+**Available events via `window.localess.on()`:**
+
+| Event | When |
+|-------|------|
+| `input` | User is typing in a field (real-time preview) |
+| `change` | Field value confirmed |
+| `save` | Content saved |
+| `publish` | Content published |
+| `pong` | Editor heartbeat response |
+| `enterSchema` | Editor cursor enters a schema block |
+| `hoverSchema` | Editor cursor hovers over a schema block |
+
+> `window.localess` only exposes `.on()` and `.onChange()` — there is no `.off()` method.
 
 ---
 
-## Full Example (Next.js 15 App Router)
+## Full Example (Next.js 16.2 App Router)
+
+The recommended Next.js pattern is to **preload data server-side** and pass it to the Client Component. This avoids a loading flash — the page renders immediately with server data, then Visual Editor sync kicks in if active.
+
+### Setup — `app/layout.tsx`
 
 ```tsx
-// app/layout.tsx (Server Component — safe to use API token here)
+// Server Component — safe to use API token here
 import { localessInit } from "@localess/react";
 import { Page, Header, Teaser, Footer } from "@/components";
 
@@ -352,16 +440,21 @@ localessInit({
   components: { Page, Header, Teaser, Footer },
 });
 
-export default function RootLayout({ children }) {
+export default function RootLayout({ children }: { children: React.ReactNode }) {
   return <html><body>{children}</body></html>;
 }
 ```
 
+### Server Component — `app/[locale]/page.tsx`
+
+Fetches content during SSR and passes it as a prop. The client component receives it already populated — no loading state needed.
+
 ```tsx
-// app/[locale]/page.tsx (Server Component — fetches initial data)
 import { getLocalessClient } from "@localess/react";
-import { PageClient } from "./page-client";
-import type { Page } from "./.localess/localess";
+import type { Content, Page } from "./.localess/localess";
+
+// Choose one of the three client components below
+import { PageClientHook } from "./page-client-hook";
 
 export default async function HomePage({
   params,
@@ -369,39 +462,106 @@ export default async function HomePage({
   params: Promise<{ locale?: string }>;
 }) {
   const { locale } = await params;
-  const client = getLocalessClient();
-  const content = await client.getContentBySlug<Page>('home', { locale });
+  const content = await getLocalessClient().getContentBySlug<Page>('home', { locale });
 
-  return <PageClient initialContent={content} locale={locale} />;
+  return <PageClientHook initialContent={content} locale={locale} />;
 }
 ```
 
+### Client Component — Option A: `useLocaless` Hook
+
+The hook re-fetches on the client and falls back to the server-preloaded data until it resolves. Live sync is wired automatically.
+
 ```tsx
-// app/[locale]/page-client.tsx (Client Component — renders + auto-syncs with Visual Editor)
+// app/[locale]/page-client-hook.tsx
 'use client';
 
 import { useLocaless, LocalessComponent, localessEditable } from "@localess/react";
 import type { Content, Page } from "./.localess/localess";
 
-export function PageClient({
+export function PageClientHook({
   initialContent,
   locale,
 }: {
   initialContent: Content<Page>;
   locale?: string;
 }) {
-  // Handles initial fetch and Visual Editor live updates automatically
+  // ?? initialContent: renders with server data immediately, switches to hook result once ready
   const content = useLocaless<Page>('home', { locale }) ?? initialContent;
 
   return (
     <main {...localessEditable(content.data)}>
       {content.data?.body.map(item => (
-        <LocalessComponent
-          key={item._id}
-          data={item}
-          links={content.links}
-          references={content.references}
-        />
+        <LocalessComponent key={item._id} data={item} links={content.links} references={content.references} />
+      ))}
+    </main>
+  );
+}
+```
+
+### Client Component — Option B: `LocalessDocument` Component
+
+Skips client re-fetch entirely — uses server-preloaded data and only subscribes to live sync events. Simpler when you don't need client-side refetching.
+
+```tsx
+// app/[locale]/page.tsx (Server Component — no separate client file needed)
+import { getLocalessClient, LocalessDocument } from "@localess/react";
+import type { Page } from "./.localess/localess";
+
+export default async function HomePage({
+  params,
+}: {
+  params: Promise<{ locale?: string }>;
+}) {
+  const { locale } = await params;
+  const content = await getLocalessClient().getContentBySlug<Page>('home', { locale });
+
+  // LocalessDocument handles sync internally — no 'use client' wrapper needed here
+  return (
+    <LocalessDocument
+      data={content.data}
+      links={content.links}
+      references={content.references}
+    />
+  );
+}
+```
+
+### Client Component — Option C: Manual
+
+Full control over state and sync subscription. Use when you need custom logic around live updates.
+
+```tsx
+// app/[locale]/page-client-manual.tsx
+'use client';
+
+import { useEffect, useState } from "react";
+import { LocalessComponent, localessEditable, isSyncEnabled, isBrowser } from "@localess/react";
+import type { Content, Page } from "./.localess/localess";
+
+export function PageClientManual({
+  initialContent,
+}: {
+  initialContent: Content<Page>;
+}) {
+  // Initialize with server-preloaded data — no loading state needed
+  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 cleanup needed: window.localess has no .off() method
+  }, []);
+
+  return (
+    <main {...localessEditable(pageData)}>
+      {pageData?.body.map(item => (
+        <LocalessComponent key={item._id} data={item} links={initialContent.links} references={initialContent.references} />
       ))}
     </main>
   );
@@ -418,6 +578,8 @@ The following are re-exported for convenience so you only need to import from `@
 
 **Functions:** `localessEditable`, `localessEditableField`, `llEditable` *(deprecated)*, `llEditableField` *(deprecated)*, `isBrowser`, `isServer`, `isIframe`, `resolveAsset`, `findLink`, `useLocaless`, `renderRichTextToReact`, `localessInit`, `getLocalessClient`, `registerComponent`, `unregisterComponent`, `setComponents`, `getComponent`, `setFallbackComponent`, `getFallbackComponent`, `isSyncEnabled`
 
+**Components:** `LocalessComponent`, `LocalessDocument`
+
 ---
 
 ## AI Coding Agents

package/SKILL.md

@@ -174,9 +174,9 @@ localessInit({
 
 > Never enable sync in production — the script is only meaningful inside the Localess Visual Editor iframe.
 
-### Receiving Real-time Editor Events
+### With `useLocaless` Hook
 
-Use the `useLocaless` hook in a Client Component — it **automatically subscribes** to `input` / `change` events when `enableSync` is active. No manual `window.localess.on()` wiring needed.
+The `useLocaless` hook handles the full cycle automatically — initial fetch and live sync updates — with no extra wiring needed.
 
 ```tsx
 'use client';
@@ -185,7 +185,6 @@ import { useLocaless, LocalessComponent, localessEditable } from "@localess/reac
 import type { Content, Page } from "./.localess/localess";
 
 export function PageClient({ initialContent, locale }: { initialContent: Content<Page>; locale?: string }) {
-  // Fetches content and auto-syncs with Visual Editor live updates
   const content = useLocaless<Page>('home', { locale }) ?? initialContent;
 
   return (
@@ -203,7 +202,82 @@ export function PageClient({ initialContent, locale }: { initialContent: Content
 }
 ```
 
-**Available events (handled internally by `useLocaless`):**
+### With `LocalessDocument` Component
+
+`LocalessDocument` is a component alternative to the hook. It accepts server-fetched `data` and manages live sync updates internally, delegating rendering to `LocalessComponent`. Useful when you prefer a component-based approach over hooks.
+
+```tsx
+// Server Component — pass fetched data directly to LocalessDocument
+import { getLocalessClient, LocalessDocument } from "@localess/react";
+import type { Page } from "./.localess/localess";
+
+export default async function HomePage({ params }: { params: Promise<{ locale?: string }> }) {
+  const { locale } = await params;
+  const client = getLocalessClient();
+  const content = await client.getContentBySlug<Page>('home', { locale });
+
+  return (
+    <LocalessDocument
+      data={content.data}
+      links={content.links}
+      references={content.references}
+    />
+  );
+}
+```
+
+**Props** (same shape as `LocalessComponent`):
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `data` | `ContentData` | ✅ | Initial content data |
+| `links` | `Links` | ❌ | Resolved links map |
+| `references` | `References` | ❌ | Resolved references map |
+| `ref` | `React.Ref<HTMLElement>` | ❌ | Forwarded to the rendered root element |
+
+> Subscribes to `input` / `change` events automatically when `enableSync` is active. Unlike `useLocaless`, it does not fetch content — it only handles live sync for data passed in as props.
+
+### Manual Integration
+
+If you manage content state yourself without `useLocaless` or `LocalessDocument`, subscribe to editor events directly via `window.localess`:
+
+```tsx
+'use client';
+
+import { useEffect, useState } from "react";
+import { LocalessComponent, localessEditable, isSyncEnabled, isBrowser } 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 cleanup needed: window.localess has no .off() method
+  }, []);
+
+  return (
+    <main {...localessEditable(pageData)}>
+      {pageData?.body?.map(item => (
+        <LocalessComponent
+          key={item._id}
+          data={item}
+          links={initialContent.links}
+          references={initialContent.references}
+        />
+      ))}
+    </main>
+  );
+}
+```
+
+**Available events via `window.localess.on()`:**
 
 | Event         | When                                          |
 |---------------|-----------------------------------------------|
@@ -219,13 +293,14 @@ export function PageClient({ initialContent, locale }: { initialContent: Content
 
 ### Pattern: Split Server/Client Components (Next.js App Router)
 
-Keep data fetching server-side and delegate rendering + sync to a Client Component using `useLocaless`:
+**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.
+
+**Server Component** (same for all three options below):
 
 ```tsx
-// app/[locale]/page.tsx — Server Component: fetches initial data
+// app/[locale]/page.tsx
 import { getLocalessClient } from "@localess/react";
-import { PageClient } from "./page-client";
-import type { Page } from "./.localess/localess";
+import type { Content, Page } from "./.localess/localess";
 
 export default async function HomePage({
   params,
@@ -233,32 +308,82 @@ export default async function HomePage({
   params: Promise<{ locale?: string }>;
 }) {
   const { locale } = await params;
-  const client = getLocalessClient();
-  const content = await client.getContentBySlug<Page>('home', { locale });
+  // Data fetched during SSR — preloaded into the client component as a prop
+  const content = await getLocalessClient().getContentBySlug<Page>('home', { locale });
 
   return <PageClient initialContent={content} locale={locale} />;
 }
 ```
 
+**Option A — `useLocaless` hook**: re-fetches on client, falls back to server data until resolved, auto-syncs with editor.
+
 ```tsx
-// app/[locale]/page-client.tsx — Client Component: renders + auto-syncs
+// app/[locale]/page-client.tsx
 'use client';
 
 import { useLocaless, LocalessComponent, localessEditable } from "@localess/react";
 import type { Content, Page } from "./.localess/localess";
 
 export function PageClient({ initialContent, locale }: { initialContent: Content<Page>; locale?: string }) {
+  // ?? initialContent: renders server data immediately, switches to hook result once ready
   const content = useLocaless<Page>('home', { locale }) ?? initialContent;
 
   return (
     <main {...localessEditable(content.data)}>
       {content.data?.body?.map(item => (
-        <LocalessComponent
-          key={item._id}
-          data={item}
-          links={content.links}
-          references={content.references}
-        />
+        <LocalessComponent key={item._id} data={item} links={content.links} references={content.references} />
+      ))}
+    </main>
+  );
+}
+```
+
+**Option B — `LocalessDocument` component**: no client re-fetch, uses server data directly, auto-syncs with editor.
+
+```tsx
+// app/[locale]/page.tsx — no separate client file needed
+import { getLocalessClient, LocalessDocument } from "@localess/react";
+import type { Page } from "./.localess/localess";
+
+export default async function HomePage({ params }: { params: Promise<{ locale?: string }> }) {
+  const { locale } = await params;
+  const content = await getLocalessClient().getContentBySlug<Page>('home', { locale });
+
+  return (
+    <LocalessDocument data={content.data} links={content.links} references={content.references} />
+  );
+}
+```
+
+**Option C — Manual**: full control, initialise state with server-preloaded data, subscribe to sync yourself.
+
+```tsx
+// app/[locale]/page-client.tsx
+'use client';
+
+import { useEffect, useState } from "react";
+import { LocalessComponent, localessEditable, isSyncEnabled, isBrowser } from "@localess/react";
+import type { Content, Page } from "./.localess/localess";
+
+export function PageClient({ initialContent }: { initialContent: Content<Page> }) {
+  // Server-preloaded data used as initial state — no loading flash
+  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 cleanup needed: window.localess has no .off() method
+  }, []);
+
+  return (
+    <main {...localessEditable(pageData)}>
+      {pageData?.body?.map(item => (
+        <LocalessComponent key={item._id} data={item} links={initialContent.links} references={initialContent.references} />
       ))}
     </main>
   );
@@ -400,7 +525,7 @@ const [content, translations] = await Promise.all([
 
 ---
 
-## Full Next.js 15 App Router Setup
+## Full Next.js 16.2 App Router Setup
 
 ```typescript
 // app/layout.tsx (Server Component)
@@ -476,6 +601,7 @@ export { setFallbackComponent, getFallbackComponent, isSyncEnabled }
 
 // Rendering
 export { LocalessComponent }        // Dynamic schema-to-component renderer
+export { LocalessDocument }         // Schema renderer + built-in Visual Editor sync
 export { renderRichTextToReact }    // Rich text → React nodes
 export { resolveAsset }             // ContentAsset → full URL
 

package/dist/index.d.mts

@@ -10,6 +10,13 @@ type LocalessComponentProps<T extends ContentData = ContentData> = {
 };
 declare const LocalessComponent: React.ForwardRefExoticComponent<LocalessComponentProps<ContentData> & React.RefAttributes<HTMLElement>>;
 
+type LocalessDocumentProps<T extends ContentData = ContentData> = {
+    data: T;
+    links?: Links;
+    references?: References;
+};
+declare const LocalessDocument: React.ForwardRefExoticComponent<LocalessDocumentProps<ContentData> & React.RefAttributes<HTMLElement>>;
+
 type LocalessOptions = LocalessClientOptions & {
     /**
      * Components mapping for Localess Component integration
@@ -91,4 +98,4 @@ declare function isSyncEnabled(): boolean;
  */
 declare function resolveAsset(asset: ContentAsset): string;
 
-export { LocalessComponent, type LocalessComponentProps, type LocalessOptions, type UseLocalessOptions, findLink, getComponent, getFallbackComponent, getLocalessClient, isSyncEnabled, localessInit, registerComponent, renderRichTextToReact, resolveAsset, setComponents, setFallbackComponent, unregisterComponent, useLocaless };
+export { LocalessComponent, type LocalessComponentProps, LocalessDocument, type LocalessDocumentProps, type LocalessOptions, type UseLocalessOptions, findLink, getComponent, getFallbackComponent, getLocalessClient, isSyncEnabled, localessInit, registerComponent, renderRichTextToReact, resolveAsset, setComponents, setFallbackComponent, unregisterComponent, useLocaless };

package/dist/index.d.ts

@@ -10,6 +10,13 @@ type LocalessComponentProps<T extends ContentData = ContentData> = {
 };
 declare const LocalessComponent: React.ForwardRefExoticComponent<LocalessComponentProps<ContentData> & React.RefAttributes<HTMLElement>>;
 
+type LocalessDocumentProps<T extends ContentData = ContentData> = {
+    data: T;
+    links?: Links;
+    references?: References;
+};
+declare const LocalessDocument: React.ForwardRefExoticComponent<LocalessDocumentProps<ContentData> & React.RefAttributes<HTMLElement>>;
+
 type LocalessOptions = LocalessClientOptions & {
     /**
      * Components mapping for Localess Component integration
@@ -91,4 +98,4 @@ declare function isSyncEnabled(): boolean;
  */
 declare function resolveAsset(asset: ContentAsset): string;
 
-export { LocalessComponent, type LocalessComponentProps, type LocalessOptions, type UseLocalessOptions, findLink, getComponent, getFallbackComponent, getLocalessClient, isSyncEnabled, localessInit, registerComponent, renderRichTextToReact, resolveAsset, setComponents, setFallbackComponent, unregisterComponent, useLocaless };
+export { LocalessComponent, type LocalessComponentProps, LocalessDocument, type LocalessDocumentProps, type LocalessOptions, type UseLocalessOptions, findLink, getComponent, getFallbackComponent, getLocalessClient, isSyncEnabled, localessInit, registerComponent, renderRichTextToReact, resolveAsset, setComponents, setFallbackComponent, unregisterComponent, useLocaless };

package/dist/index.js

@@ -21,16 +21,17 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   LocalessComponent: () => LocalessComponent,
+  LocalessDocument: () => LocalessDocument,
   findLink: () => findLink,
   getComponent: () => getComponent,
   getFallbackComponent: () => getFallbackComponent,
   getLocalessClient: () => getLocalessClient,
-  isBrowser: () => import_client4.isBrowser,
-  isIframe: () => import_client4.isIframe,
-  isServer: () => import_client4.isServer,
+  isBrowser: () => import_client5.isBrowser,
+  isIframe: () => import_client5.isIframe,
+  isServer: () => import_client5.isServer,
   isSyncEnabled: () => isSyncEnabled,
-  localessEditable: () => import_client4.localessEditable,
-  localessEditableField: () => import_client4.localessEditableField,
+  localessEditable: () => import_client5.localessEditable,
+  localessEditableField: () => import_client5.localessEditableField,
   localessInit: () => localessInit,
   registerComponent: () => registerComponent,
   renderRichTextToReact: () => renderRichTextToReact,
@@ -41,7 +42,7 @@ __export(index_exports, {
   useLocaless: () => useLocaless
 });
 module.exports = __toCommonJS(index_exports);
-var import_client4 = require("@localess/client");
+var import_client5 = require("@localess/client");
 
 // src/components/localess-component.tsx
 var import_react = require("react");
@@ -137,11 +138,30 @@ var LocalessComponent = (0, import_react.forwardRef)(({ data, links, references,
   ] });
 });
 
-// src/hooks/use-localess.ts
+// src/components/localess-document.tsx
 var import_react2 = require("react");
 var import_client3 = require("@localess/client");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var LocalessDocument = (0, import_react2.forwardRef)(({ data, links, references, ...restProps }, ref) => {
+  const [contentData, setContentData] = (0, import_react2.useState)(data);
+  (0, import_react2.useEffect)(() => {
+    if (isSyncEnabled() && (0, import_client3.isBrowser)()) {
+      window.localess?.on(["input", "change"], (event) => {
+        console.log("Localess:event", event);
+        if (event.type === "change" || event.type === "input") {
+          setContentData(event.data);
+        }
+      });
+    }
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(LocalessComponent, { data: contentData, links, references, ...restProps });
+});
+
+// src/hooks/use-localess.ts
+var import_react3 = require("react");
+var import_client4 = require("@localess/client");
 var useLocaless = (slug, options = {}) => {
-  const [document, setDocument] = (0, import_react2.useState)();
+  const [document, setDocument] = (0, import_react3.useState)();
   const client = getLocalessClient();
   let normalizedSlug;
   if (Array.isArray(slug)) {
@@ -149,11 +169,11 @@ var useLocaless = (slug, options = {}) => {
   } else {
     normalizedSlug = slug;
   }
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     async function loadDocument() {
       const document2 = await client.getContentBySlug(normalizedSlug, options);
       setDocument(document2);
-      if (isSyncEnabled() && (0, import_client3.isBrowser)()) {
+      if (isSyncEnabled() && (0, import_client4.isBrowser)()) {
         window.localess?.on(["input", "change"], (event) => {
           if (event.type === "change" || event.type === "input") {
             setDocument({ ...document2, data: event.data });
@@ -188,7 +208,7 @@ function findLink(links, link) {
 }
 
 // src/richtext.ts
-var import_react3 = require("@tiptap/static-renderer/pm/react");
+var import_react4 = require("@tiptap/static-renderer/pm/react");
 var import_extension_document = require("@tiptap/extension-document");
 var import_extension_text = require("@tiptap/extension-text");
 var import_extension_paragraph = require("@tiptap/extension-paragraph");
@@ -205,7 +225,7 @@ var import_extension_code = require("@tiptap/extension-code");
 var import_extension_code_block_lowlight = require("@tiptap/extension-code-block-lowlight");
 var import_extension_link = require("@tiptap/extension-link");
 function renderRichTextToReact(content) {
-  return (0, import_react3.renderToReactElement)({
+  return (0, import_react4.renderToReactElement)({
     content,
     extensions: [
       import_extension_document.Document,
@@ -231,6 +251,7 @@ function renderRichTextToReact(content) {
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   LocalessComponent,
+  LocalessDocument,
   findLink,
   getComponent,
   getFallbackComponent,

package/dist/index.mjs

@@ -1,5 +1,5 @@
 // src/index.ts
-import { localessEditable as localessEditable2, localessEditableField, isBrowser as isBrowser2, isServer, isIframe } from "@localess/client";
+import { localessEditable as localessEditable2, localessEditableField, isBrowser as isBrowser3, isServer, isIframe } from "@localess/client";
 
 // src/components/localess-component.tsx
 import { forwardRef } from "react";
@@ -95,11 +95,30 @@ var LocalessComponent = forwardRef(({ data, links, references, ...restProps }, r
   ] });
 });
 
-// src/hooks/use-localess.ts
-import { useEffect, useState } from "react";
+// src/components/localess-document.tsx
+import { forwardRef as forwardRef2, useEffect, useState } from "react";
 import { isBrowser } from "@localess/client";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var LocalessDocument = forwardRef2(({ data, links, references, ...restProps }, ref) => {
+  const [contentData, setContentData] = useState(data);
+  useEffect(() => {
+    if (isSyncEnabled() && isBrowser()) {
+      window.localess?.on(["input", "change"], (event) => {
+        console.log("Localess:event", event);
+        if (event.type === "change" || event.type === "input") {
+          setContentData(event.data);
+        }
+      });
+    }
+  });
+  return /* @__PURE__ */ jsx2(LocalessComponent, { data: contentData, links, references, ...restProps });
+});
+
+// src/hooks/use-localess.ts
+import { useEffect as useEffect2, useState as useState2 } from "react";
+import { isBrowser as isBrowser2 } from "@localess/client";
 var useLocaless = (slug, options = {}) => {
-  const [document, setDocument] = useState();
+  const [document, setDocument] = useState2();
   const client = getLocalessClient();
   let normalizedSlug;
   if (Array.isArray(slug)) {
@@ -107,11 +126,11 @@ var useLocaless = (slug, options = {}) => {
   } else {
     normalizedSlug = slug;
   }
-  useEffect(() => {
+  useEffect2(() => {
     async function loadDocument() {
       const document2 = await client.getContentBySlug(normalizedSlug, options);
       setDocument(document2);
-      if (isSyncEnabled() && isBrowser()) {
+      if (isSyncEnabled() && isBrowser2()) {
         window.localess?.on(["input", "change"], (event) => {
           if (event.type === "change" || event.type === "input") {
             setDocument({ ...document2, data: event.data });
@@ -188,11 +207,12 @@ function renderRichTextToReact(content) {
 }
 export {
   LocalessComponent,
+  LocalessDocument,
   findLink,
   getComponent,
   getFallbackComponent,
   getLocalessClient,
-  isBrowser2 as isBrowser,
+  isBrowser3 as isBrowser,
   isIframe,
   isServer,
   isSyncEnabled,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@localess/react",
-  "version": "3.0.1-dev.20260408172608",
+  "version": "3.0.1-dev.20260408183951",
   "description": "ReactJS JavaScript/TypeScript SDK for Localess's API.",
   "keywords": [
     "localess",
@@ -46,7 +46,7 @@
     "react-dom": "^17 || ^18 || ^19"
   },
   "dependencies": {
-    "@localess/client": "3.0.1-dev.20260408172608",
+    "@localess/client": "3.0.1-dev.20260408183951",
     "@tiptap/static-renderer": "^3.20.1",
     "@tiptap/html": "^3.20.1",
     "@tiptap/extension-bold": "^3.20.1",