@localess/react 3.0.1-dev.20260408170501 → 3.0.1-dev.20260408183448

package/README.md

@@ -249,46 +249,186 @@ const Image = ({ data }) => (
 
 ---
 
+## `useLocaless` Hook
+
+`useLocaless<T>` fetches content by slug in a Client Component and automatically subscribes to Visual Editor live updates when `enableSync` is active.
+
+```tsx
+'use client';
+
+import { useLocaless, LocalessComponent } from "@localess/react";
+import type { Page } from "./.localess/localess";
+
+export function PageView({ slug }: { slug: string }) {
+  const content = useLocaless<Page>(slug, { locale: 'en' });
+
+  if (!content) return <div>Loading…</div>;
+
+  return (
+    <main>
+      {content.data.body.map(item => (
+        <LocalessComponent key={item._id} data={item} links={content.links} />
+      ))}
+    </main>
+  );
+}
+```
+
+### Parameters
+
+| Parameter | Type | Required | Description |
+|-----------|------|----------|-------------|
+| `slug` | `string \| string[]` | ✅ | Content slug. Arrays are joined with `/` — e.g. `['blog', 'post']` → `'blog/post'` |
+| `options` | `ContentFetchParams` | ❌ | Same fetch options as `getContentBySlug` (locale, version, resolveReference, resolveLink) |
+
+Returns `Content<T> | undefined` — `undefined` while the initial fetch is in progress.
+
+When `enableSync` is active and the page is rendered inside the Localess Visual Editor iframe, the hook automatically subscribes to `input` / `change` events and updates the returned content in place.
+
+---
+
+## Link Utilities
+
+### `findLink(links, link)`
+
+Resolves a `ContentLink` field to a URL string. Use it to build `href` values from Localess content links.
+
+```tsx
+import { findLink } from "@localess/react";
+
+// type: 'content' → '/' + fullSlug, or '/not-found' if not in map
+// type: 'url'     → raw URI unchanged
+const href = findLink(content.links, data.ctaLink);
+
+const NavLink = ({ data, links }) => (
+  <a href={findLink(links, data.link)}>{data.label}</a>
+);
+```
+
+---
+
 ## Visual Editor Events
 
-When your application is opened inside the Localess Visual Editor, subscribe to live-editing events via `window.localess`.
+### 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';
+
+import { useLocaless, LocalessComponent, localessEditable } from "@localess/react";
+import type { Page } from "./.localess/localess";
+
+export function PageView({ slug, locale }: { slug: string; locale?: string }) {
+  const content = useLocaless<Page>(slug, { locale });
+
+  if (!content) return null;
+
+  return (
+    <main {...localessEditable(content.data)}>
+      {content.data?.body.map(item => (
+        <LocalessComponent key={item._id} data={item} links={content.links} references={content.references} />
+      ))}
+    </main>
+  );
+}
+```
+
+### 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 { getLocalessClient } from "@localess/react";
-import type { Content } from "@localess/react";
+import { LocalessComponent, localessEditable, isSyncEnabled, isBrowser } from "@localess/react";
+import type { Content, Page } from "./.localess/localess";
 
-export function PageClient({ initialData }: { initialData: Content<Page> }) {
-  const [pageData, setPageData] = useState(initialData.data);
+export function PageClient({ initialContent }: { initialContent: Content<Page> }) {
+  const [pageData, setPageData] = useState(initialContent.data);
 
   useEffect(() => {
-    if (window.localess) {
+    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} />
+      {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";
 
@@ -296,38 +436,132 @@ localessInit({
   origin: process.env.LOCALESS_ORIGIN!,
   spaceId: process.env.LOCALESS_SPACE_ID!,
   token: process.env.LOCALESS_TOKEN!,
-  enableSync: process.env.NODE_ENV === 'development',
+  enableSync: process.env.NODE_ENV !== 'production',
   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/page.tsx (Server Component)
-import { getLocalessClient, LocalessComponent, localessEditable } from "@localess/react";
-import type { Page } from "./.localess/localess";
+import { getLocalessClient } from "@localess/react";
+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({
-  searchParams,
+  params,
 }: {
-  searchParams: Promise<{ locale?: string }>;
+  params: Promise<{ locale?: string }>;
 }) {
-  const { locale } = await searchParams;
-  const client = getLocalessClient();
-  const content = await client.getContentBySlug<Page>('home', { locale });
+  const { locale } = await params;
+  const content = await getLocalessClient().getContentBySlug<Page>('home', { 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-hook.tsx
+'use client';
+
+import { useLocaless, LocalessComponent, localessEditable } from "@localess/react";
+import type { Content, Page } from "./.localess/localess";
+
+export function PageClientHook({
+  initialContent,
+  locale,
+}: {
+  initialContent: Content<Page>;
+  locale?: string;
+}) {
+  // ?? 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>
   );
@@ -342,7 +576,9 @@ The following are re-exported for convenience so you only need to import from `@
 
 **Types:** `Content`, `ContentData`, `ContentMetadata`, `ContentDataSchema`, `ContentDataField`, `ContentAsset`, `ContentRichText`, `ContentLink`, `ContentReference`, `Links`, `References`, `Translations`, `LocalessClient`, `LocalessSync`, `EventToApp`, `EventCallback`, `EventToAppType`
 
-**Functions:** `localessEditable`, `localessEditableField`, `llEditable` *(deprecated)*, `llEditableField` *(deprecated)*, `isBrowser`, `isServer`, `isIframe`
+**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`
 
 ---
 

package/SKILL.md

@@ -174,22 +174,85 @@ 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
 
-Once the sync script is loaded, `window.localess` becomes available inside the iframe. Subscribe to it in a Client Component to apply live updates:
+The `useLocaless` hook handles the full cycle automatically — initial fetch and live sync updates — with no extra wiring needed.
+
+```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 }) {
+  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}
+        />
+      ))}
+    </main>
+  );
+}
+```
+
+### 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 } from "@localess/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 (window.localess) {
+    if (isSyncEnabled() && isBrowser() && window.localess) {
       window.localess.on(['input', 'change'], (event) => {
         if (event.type === 'input' || event.type === 'change') {
           setPageData(event.data);
@@ -230,57 +293,97 @@ export function PageClient({ initialContent }: { initialContent: Content<Page> }
 
 ### Pattern: Split Server/Client Components (Next.js App Router)
 
-The recommended pattern keeps data fetching server-side while the Client Component handles live sync:
+**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 data, no sync logic
+// 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({
-  searchParams,
+  params,
 }: {
-  searchParams: Promise<{ locale?: string }>;
+  params: Promise<{ locale?: string }>;
 }) {
-  const { locale } = await searchParams;
-  const client = getLocalessClient();
-  const content = await client.getContentBySlug<Page>('home', { locale });
+  const { locale } = await params;
+  // 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
+'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} />
+      ))}
+    </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 <PageClient initialContent={content} />;
+  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 — Client Component: renders + handles live edits
+// app/[locale]/page-client.tsx
 'use client';
 
 import { useEffect, useState } from "react";
-import { LocalessComponent, localessEditable } from "@localess/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 (window.localess) {
+    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}
-        />
+        <LocalessComponent key={item._id} data={item} links={initialContent.links} references={initialContent.references} />
       ))}
     </main>
   );
@@ -289,6 +392,67 @@ export function PageClient({ initialContent }: { initialContent: Content<Page> }
 
 ---
 
+## `useLocaless` Hook
+
+`useLocaless<T>` fetches content by slug on the client side and automatically wires up Visual Editor live updates when `enableSync` is active.
+
+```tsx
+'use client';
+
+import { useLocaless } from "@localess/react";
+import type { Page } from "./.localess/localess";
+
+export function PageView({ slug }: { slug: string }) {
+  const content = useLocaless<Page>(slug, { locale: 'en' });
+
+  if (!content) return <div>Loading…</div>;
+
+  return (
+    <main>
+      {content.data.body.map(item => (
+        <LocalessComponent key={item._id} data={item} links={content.links} />
+      ))}
+    </main>
+  );
+}
+```
+
+### Signature
+
+```typescript
+useLocaless<T extends ContentData = ContentData>(
+  slug: string | string[],  // string[] is joined with '/' — e.g. ['blog', 'post'] → 'blog/post'
+  options?: ContentFetchParams
+): Content<T> | undefined
+```
+
+- Returns `undefined` while the initial fetch is in flight.
+- When `enableSync` is active and the page is inside the Localess Visual Editor, automatically subscribes to `input` / `change` events and updates the returned value in place.
+
+---
+
+## Link Utilities
+
+### `findLink(links, link)`
+
+Resolves a `ContentLink` to a URL string. Use this to convert link fields from Localess content into href values.
+
+```typescript
+import { findLink } from "@localess/react";
+
+const href = findLink(content.links, data.ctaLink);
+// type: 'content' → '/' + fullSlug (e.g. '/blog/my-post'), or '/not-found' if not in links map
+// type: 'url'     → raw URI (e.g. 'https://example.com')
+```
+
+```tsx
+const NavLink = ({ data, links }) => (
+  <a href={findLink(links, data.link)}>{data.label}</a>
+);
+```
+
+---
+
 ## Rich Text Rendering
 
 Converts Localess `ContentRichText` (Tiptap JSON) to a React node tree.
@@ -361,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)
@@ -437,9 +601,16 @@ 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
 
+// Hooks
+export { useLocaless }              // Client-side content fetching with sync support
+
+// Utilities
+export { findLink }                 // ContentLink → URL string
+
 // Visual editor (re-exported from @localess/client)
 export { localessEditable, localessEditableField }
 export { llEditable, llEditableField }  // Deprecated

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.20260408170501",
+  "version": "3.0.1-dev.20260408183448",
   "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.20260408170501",
+    "@localess/client": "3.0.1-dev.20260408183448",
     "@tiptap/static-renderer": "^3.20.1",
     "@tiptap/html": "^3.20.1",
     "@tiptap/extension-bold": "^3.20.1",