@payload-onpage/react 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 jellologic
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,14 @@
-# Temporary Holding Version
+# @payload-onpage/react
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+The editor UI: overlay, row toolbars, settings, dock, preview toolbar, field editors, locators, annotations and client mode. Framework-agnostic; [`@payload-onpage/next`](../next) mounts it for Next.js.
+
+```tsx
+import { editable } from '@payload-onpage/react/annotations' // server-safe
+import { OnPageClient } from '@payload-onpage/react/client' // client mode, ~1.7 KB
+```
+
+Entries: `.` (editor, editors, locators, messages), `./annotations`, `./client`, `./editor-kit` (building blocks for [custom field editors](https://github.com/jellologic/payload-onpage/blob/main/docs/guides/custom-field-editor.md)).
+
+Part of [**payload-onpage**](https://github.com/jellologic/payload-onpage): on-page editing and draft previews for Payload CMS + Next.js. Start with the [getting started guide](https://github.com/jellologic/payload-onpage/blob/main/docs/getting-started.md).
+
+MIT licensed.

package/dist/OnPageClient.d.ts

@@ -0,0 +1,18 @@
+import { type ReactNode } from 'react';
+import { type Editable } from './annotations.ts';
+export type OnPageClientProps<T> = {
+    doc: T;
+    render: (doc: T, e: Editable) => ReactNode;
+    /** Mark rendered text so it maps to its fields without annotations. Default true. */
+    autoMap?: boolean;
+} & ({
+    collection: string;
+    global?: never;
+} | {
+    global: string;
+    collection?: never;
+});
+export declare function OnPageClient<T extends {
+    id?: string | number;
+} | null | undefined>(props: OnPageClientProps<T>): import("react").JSX.Element;
+//# sourceMappingURL=OnPageClient.d.ts.map

package/dist/OnPageClient.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OnPageClient.d.ts","sourceRoot":"","sources":["../src/OnPageClient.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAsB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAC1D,OAAO,EAAyB,KAAK,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAGvE,MAAM,MAAM,iBAAiB,CAAC,CAAC,IAAI;IACjC,GAAG,EAAE,CAAC,CAAA;IACN,MAAM,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,CAAC,EAAE,QAAQ,KAAK,SAAS,CAAA;IAC1C,qFAAqF;IACrF,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,GAAG,CAAC;IAAE,UAAU,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,KAAK,CAAA;CAAE,GAAG;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC,CAAA;AAErF,wBAAgB,YAAY,CAAC,CAAC,SAAS;IAAE,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,GAAG,IAAI,GAAG,SAAS,EAChF,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC,+BAuC5B"}

package/dist/OnPageClient.js

@@ -0,0 +1,51 @@
+'use client';
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Client mode: render a document from editor state, so edits show instantly
+ * (no save → server render round trip). Outside an editor it just renders the
+ * document it was given.
+ *
+ *   <OnPageClient doc={page} collection="pages" render={(page, e) => <Page page={page} e={e} />} />
+ *
+ * `e` is the document's annotation helper (`e.field('title')`, `e.row('layout.0')`).
+ * Text is auto-mapped as in refresh mode: the rendered state carries the same
+ * invisible markers (turn off with `autoMap={false}`).
+ */
+import { useEvent } from "./useEvent.js";
+import { encodeDocument, refKey } from '@payload-onpage/core';
+import { useEffect, useMemo } from 'react';
+import { editable, editableOff } from "./annotations.js";
+import { useOnPageOptional } from "./context.js";
+export function OnPageClient(props) {
+    const { doc, render, global: globalSlug, collection } = props;
+    const ctx = useOnPageOptional();
+    const id = doc?.id;
+    const ref = useMemo(() => globalSlug
+        ? { kind: 'global', slug: globalSlug }
+        : collection && id != null
+            ? { kind: 'collection', slug: collection, id }
+            : null, [globalSlug, collection, id]);
+    const key = ref ? refKey(ref) : null;
+    const enabled = !!ctx && !!ref;
+    // Join the editor once it's there: render from its state (it adopts this page's value).
+    const join = useEvent((r) => {
+        if (!ctx)
+            return undefined;
+        const off = ctx.registerClientDoc(refKey(r));
+        void ctx.session.open(r, doc ?? undefined);
+        return off;
+    });
+    useEffect(() => (enabled && ref ? join(ref) : undefined), [enabled, ref, join]);
+    const state = key ? ctx?.snap.docs[key] : undefined;
+    const stateDoc = state?.doc;
+    const fields = state?.schema?.fields;
+    const autoMap = props.autoMap !== false;
+    const current = useMemo(() => {
+        if (!stateDoc)
+            return doc;
+        return autoMap && fields && key ? encodeDocument(stateDoc, fields, key) : stateDoc;
+    }, [stateDoc, fields, key, autoMap, doc]);
+    const e = useMemo(() => (enabled && ref ? editable(ref, { enabled: true }) : editableOff), [enabled, ref]);
+    return _jsx(_Fragment, { children: render(current, e) });
+}
+//# sourceMappingURL=OnPageClient.js.map

package/dist/OnPageClient.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OnPageClient.js","sourceRoot":"","sources":["../src/OnPageClient.tsx"],"names":[],"mappings":"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"}

package/dist/annotations.d.ts

@@ -0,0 +1,55 @@
+/**
+ * Annotations — optional, precise mapping from elements to fields. Pure and
+ * dependency-free, so they work in server components. When `enabled` is false
+ * every helper returns `{}`: public HTML carries nothing.
+ *
+ *   const e = editable({ collection: 'pages', doc: page }, { enabled })
+ *   <section {...e.row('layout.2')}>
+ *     <h2 {...e.field('layout.2.heading')}>…</h2>
+ *     <img {...e.media('layout.2.image')} />
+ *     <ul {...e.list('layout.2.items', 'Item')}> <li {...e.row('layout.2.items.0')}>
+ *
+ * Auto-mapping (stega) already maps most text without any of this; annotate
+ * images that have no alt, layout rows you want exact, and lists ("+ Add").
+ */
+import { type DocRef, type TargetKind } from '@payload-onpage/core';
+/** What an annotated element shows (`field` = resolve from the schema). */
+export type FieldKind = Exclude<TargetKind, 'item' | 'list'>;
+export declare const ATTR: {
+    readonly ref: "data-onpage-ref";
+    readonly field: "data-onpage-field";
+    readonly kind: "data-onpage-kind";
+    readonly row: "data-onpage-row";
+    readonly list: "data-onpage-list";
+    readonly label: "data-onpage-label";
+};
+type Attrs = Record<string, string>;
+export interface Editable {
+    enabled: boolean;
+    /** An element showing one field. `kind` defaults to "field" (resolved from the schema). */
+    field(path: string, kind?: FieldKind, label?: string): Attrs;
+    /** An element showing an upload field (image). */
+    media(path: string, label?: string): Attrs;
+    /** A row of a blocks or array field (a section, a card, a button). */
+    row(path: string, label?: string): Attrs;
+    /** The element holding an array's rows (gets "+ Add"). `itemLabel` names one row. */
+    list(path: string, itemLabel?: string): Attrs;
+}
+export declare const editableOff: Editable;
+export type EditableTarget = DocRef | {
+    collection: string;
+    doc: {
+        id?: string | number;
+    } | null | undefined;
+} | {
+    global: string;
+};
+export declare function toRef(t: EditableTarget): DocRef | null;
+/** Annotation helpers bound to one document. */
+export declare function editable(target: EditableTarget, opts: {
+    enabled: boolean;
+}): Editable;
+/** Join path parts: p("layout", 2, "heading") → "layout.2.heading". */
+export declare const p: (...parts: Array<string | number>) => string;
+export {};
+//# sourceMappingURL=annotations.d.ts.map

package/dist/annotations.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"annotations.d.ts","sourceRoot":"","sources":["../src/annotations.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AACH,OAAO,EAAU,KAAK,MAAM,EAAE,KAAK,UAAU,EAAE,MAAM,sBAAsB,CAAA;AAE3E,2EAA2E;AAC3E,MAAM,MAAM,SAAS,GAAG,OAAO,CAAC,UAAU,EAAE,MAAM,GAAG,MAAM,CAAC,CAAA;AAE5D,eAAO,MAAM,IAAI;;;;;;;CAOP,CAAA;AAEV,KAAK,KAAK,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;AAEnC,MAAM,WAAW,QAAQ;IACvB,OAAO,EAAE,OAAO,CAAA;IAChB,2FAA2F;IAC3F,KAAK,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,SAAS,EAAE,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,CAAA;IAC5D,kDAAkD;IAClD,KAAK,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,CAAA;IAC1C,sEAAsE;IACtE,GAAG,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,CAAA;IACxC,qFAAqF;IACrF,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,MAAM,GAAG,KAAK,CAAA;CAC9C;AAGD,eAAO,MAAM,WAAW,EAAE,QAMzB,CAAA;AAED,MAAM,MAAM,cAAc,GACtB,MAAM,GACN;IAAE,UAAU,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE;QAAE,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,GAAG,IAAI,GAAG,SAAS,CAAA;CAAE,GACxE;IAAE,MAAM,EAAE,MAAM,CAAA;CAAE,CAAA;AAEtB,wBAAgB,KAAK,CAAC,CAAC,EAAE,cAAc,GAAG,MAAM,GAAG,IAAI,CAItD;AAED,gDAAgD;AAChD,wBAAgB,QAAQ,CAAC,MAAM,EAAE,cAAc,EAAE,IAAI,EAAE;IAAE,OAAO,EAAE,OAAO,CAAA;CAAE,GAAG,QAAQ,CAgBrF;AAED,uEAAuE;AACvE,eAAO,MAAM,CAAC,GAAI,GAAG,OAAO,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,KAAG,MAAyB,CAAA"}

package/dist/annotations.js

@@ -0,0 +1,60 @@
+/**
+ * Annotations — optional, precise mapping from elements to fields. Pure and
+ * dependency-free, so they work in server components. When `enabled` is false
+ * every helper returns `{}`: public HTML carries nothing.
+ *
+ *   const e = editable({ collection: 'pages', doc: page }, { enabled })
+ *   <section {...e.row('layout.2')}>
+ *     <h2 {...e.field('layout.2.heading')}>…</h2>
+ *     <img {...e.media('layout.2.image')} />
+ *     <ul {...e.list('layout.2.items', 'Item')}> <li {...e.row('layout.2.items.0')}>
+ *
+ * Auto-mapping (stega) already maps most text without any of this; annotate
+ * images that have no alt, layout rows you want exact, and lists ("+ Add").
+ */
+import { refKey } from '@payload-onpage/core';
+export const ATTR = {
+    ref: 'data-onpage-ref',
+    field: 'data-onpage-field',
+    kind: 'data-onpage-kind',
+    row: 'data-onpage-row',
+    list: 'data-onpage-list',
+    label: 'data-onpage-label',
+};
+const none = () => ({});
+export const editableOff = {
+    enabled: false,
+    field: none,
+    media: none,
+    row: none,
+    list: none,
+};
+export function toRef(t) {
+    if ('kind' in t)
+        return t;
+    if ('global' in t)
+        return { kind: 'global', slug: t.global };
+    return t.doc?.id == null ? null : { kind: 'collection', slug: t.collection, id: t.doc.id };
+}
+/** Annotation helpers bound to one document. */
+export function editable(target, opts) {
+    const ref = opts.enabled ? toRef(target) : null;
+    if (!ref)
+        return editableOff;
+    const key = refKey(ref);
+    const base = (extra, label) => ({
+        [ATTR.ref]: key,
+        ...extra,
+        ...(label ? { [ATTR.label]: label } : {}),
+    });
+    return {
+        enabled: true,
+        field: (path, kind = 'field', label) => base({ [ATTR.field]: path, [ATTR.kind]: kind }, label),
+        media: (path, label) => base({ [ATTR.field]: path, [ATTR.kind]: 'media' }, label),
+        row: (path, label) => base({ [ATTR.row]: path }, label),
+        list: (path, itemLabel) => base({ [ATTR.list]: path }, itemLabel),
+    };
+}
+/** Join path parts: p("layout", 2, "heading") → "layout.2.heading". */
+export const p = (...parts) => parts.join('.');
+//# sourceMappingURL=annotations.js.map

package/dist/annotations.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"annotations.js","sourceRoot":"","sources":["../src/annotations.ts"],"names":[],"mappings":"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"}

package/dist/context.d.ts

@@ -0,0 +1,7 @@
+import type { OnPageContextValue } from './types.ts';
+export declare const OnPageContext: import("react").Context<OnPageContextValue | null>;
+/** The editor, for code rendered inside it (field editors, panels). */
+export declare function useOnPage(): OnPageContextValue;
+/** The editor, from inside it or anywhere on the page; null when no editor is mounted (public pages). */
+export declare function useOnPageOptional(): OnPageContextValue | null;
+//# sourceMappingURL=context.d.ts.map

package/dist/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../src/context.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAA;AAEpD,eAAO,MAAM,aAAa,oDAAiD,CAAA;AAE3E,uEAAuE;AACvE,wBAAgB,SAAS,IAAI,kBAAkB,CAI9C;AAID,yGAAyG;AACzG,wBAAgB,iBAAiB,IAAI,kBAAkB,GAAG,IAAI,CAI7D"}

package/dist/context.js

@@ -0,0 +1,19 @@
+'use client';
+import { createContext, useContext, useSyncExternalStore } from 'react';
+import { hub } from "./hub.js";
+export const OnPageContext = createContext(null);
+/** The editor, for code rendered inside it (field editors, panels). */
+export function useOnPage() {
+    const ctx = useContext(OnPageContext);
+    if (!ctx)
+        throw new Error('useOnPage must be used inside <OnPageEditor>');
+    return ctx;
+}
+const getNull = () => null;
+/** The editor, from inside it or anywhere on the page; null when no editor is mounted (public pages). */
+export function useOnPageOptional() {
+    const inside = useContext(OnPageContext);
+    const outside = useSyncExternalStore(hub.subscribe, hub.get, getNull);
+    return inside ?? outside;
+}
+//# sourceMappingURL=context.js.map

package/dist/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","sourceRoot":"","sources":["../src/context.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;AAEZ,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAA;AACvE,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAA;AAG9B,MAAM,CAAC,MAAM,aAAa,GAAG,aAAa,CAA4B,IAAI,CAAC,CAAA;AAE3E,uEAAuE;AACvE,MAAM,UAAU,SAAS;IACvB,MAAM,GAAG,GAAG,UAAU,CAAC,aAAa,CAAC,CAAA;IACrC,IAAI,CAAC,GAAG;QAAE,MAAM,IAAI,KAAK,CAAC,8CAA8C,CAAC,CAAA;IACzE,OAAO,GAAG,CAAA;AACZ,CAAC;AAED,MAAM,OAAO,GAAG,GAAG,EAAE,CAAC,IAAI,CAAA;AAE1B,yGAAyG;AACzG,MAAM,UAAU,iBAAiB;IAC/B,MAAM,MAAM,GAAG,UAAU,CAAC,aAAa,CAAC,CAAA;IACxC,MAAM,OAAO,GAAG,oBAAoB,CAAC,GAAG,CAAC,SAAS,EAAE,GAAG,CAAC,GAAG,EAAE,OAAO,CAAC,CAAA;IACrE,OAAO,MAAM,IAAI,OAAO,CAAA;AAC1B,CAAC"}

package/dist/dom.d.ts

@@ -0,0 +1,42 @@
+/** DOM helpers shared by the editor UI (browser-only, no React). */
+/** Attribute that hides a page element while an editor or ghost stands in for it. */
+export declare const HIDDEN = "data-onpage-hidden";
+/** Marks the editor's own UI, which locators and click handling ignore. */
+export declare const UI = "data-onpage-ui";
+/** Computed styles copied onto an inline editor so it looks like the element it replaces. */
+export declare const TYPOGRAPHY: readonly ["fontFamily", "fontSize", "fontWeight", "fontStyle", "lineHeight", "letterSpacing", "wordSpacing", "textTransform", "textAlign", "textIndent", "color", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft"];
+export declare function copyTypography(from: Element, to: HTMLElement): void;
+/** The typography inline styles of an element (for a ghost that must look like it). */
+export declare function typographyOf(el: HTMLElement): Partial<CSSStyleDeclaration>;
+/** Place an absolutely positioned (document layer) box over `el`. */
+export declare function placeOver(box: HTMLElement, el: Element, opts?: {
+    minWidth?: number;
+    minHeight?: boolean;
+}): void;
+/** Inside the editor's own UI? */
+export declare const isOurs: (node: EventTarget | null) => boolean;
+/** Focus is in a text input or editable region (keyboard shortcuts stay out of the way). */
+export declare const isTyping: (t: EventTarget | null) => boolean;
+/** The DOM caret position under a viewport point, if it falls inside `within`. */
+export declare function caretAt(point: {
+    x: number;
+    y: number;
+}, within: Element): {
+    node: Node;
+    offset: number;
+} | null;
+/** Place the caret at a viewport point inside `el`, else at the end. */
+export declare function placeCaret(el: HTMLElement, point?: {
+    x: number;
+    y: number;
+}): void;
+/** Position a fixed popover below (or above) an element, kept inside the viewport. */
+export declare function popoverPosition(el: Element | null, size?: {
+    width: number;
+    height: number;
+}): {
+    top: number;
+    left: number;
+};
+export declare const focusableIn: (root: Element) => HTMLElement[];
+//# sourceMappingURL=dom.d.ts.map

package/dist/dom.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dom.d.ts","sourceRoot":"","sources":["../src/dom.ts"],"names":[],"mappings":"AAAA,oEAAoE;AAEpE,qFAAqF;AACrF,eAAO,MAAM,MAAM,uBAAuB,CAAA;AAC1C,2EAA2E;AAC3E,eAAO,MAAM,EAAE,mBAAmB,CAAA;AAElC,6FAA6F;AAC7F,eAAO,MAAM,UAAU,iOAgBb,CAAA;AAEV,wBAAgB,cAAc,CAAC,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,WAAW,GAAG,IAAI,CAGnE;AAED,uFAAuF;AACvF,wBAAgB,YAAY,CAAC,EAAE,EAAE,WAAW,GAAG,OAAO,CAAC,mBAAmB,CAAC,CAI1E;AAED,qEAAqE;AACrE,wBAAgB,SAAS,CACvB,GAAG,EAAE,WAAW,EAChB,EAAE,EAAE,OAAO,EACX,IAAI,GAAE;IAAE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,OAAO,CAAA;CAAO,GACpD,IAAI,CAMN;AAED,kCAAkC;AAClC,eAAO,MAAM,MAAM,GAAI,MAAM,WAAW,GAAG,IAAI,KAAG,OACI,CAAA;AAEtD,4FAA4F;AAC5F,eAAO,MAAM,QAAQ,GAAI,GAAG,WAAW,GAAG,IAAI,KAAG,OAKtB,CAAA;AAE3B,kFAAkF;AAClF,wBAAgB,OAAO,CACrB,KAAK,EAAE;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,EAC/B,MAAM,EAAE,OAAO,GACd;IAAE,IAAI,EAAE,IAAI,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAWvC;AAED,wEAAwE;AACxE,wBAAgB,UAAU,CAAC,EAAE,EAAE,WAAW,EAAE,KAAK,CAAC,EAAE;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAalF;AAED,sFAAsF;AACtF,wBAAgB,eAAe,CAC7B,EAAE,EAAE,OAAO,GAAG,IAAI,EAClB,IAAI;;;CAA8B,GACjC;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CAS/B;AAKD,eAAO,MAAM,WAAW,GAAI,MAAM,OAAO,KAAG,WAAW,EAGpD,CAAA"}

package/dist/dom.js

@@ -0,0 +1,95 @@
+/** DOM helpers shared by the editor UI (browser-only, no React). */
+/** Attribute that hides a page element while an editor or ghost stands in for it. */
+export const HIDDEN = 'data-onpage-hidden';
+/** Marks the editor's own UI, which locators and click handling ignore. */
+export const UI = 'data-onpage-ui';
+/** Computed styles copied onto an inline editor so it looks like the element it replaces. */
+export const TYPOGRAPHY = [
+    'fontFamily',
+    'fontSize',
+    'fontWeight',
+    'fontStyle',
+    'lineHeight',
+    'letterSpacing',
+    'wordSpacing',
+    'textTransform',
+    'textAlign',
+    'textIndent',
+    'color',
+    'paddingTop',
+    'paddingRight',
+    'paddingBottom',
+    'paddingLeft',
+];
+export function copyTypography(from, to) {
+    const cs = getComputedStyle(from);
+    for (const k of TYPOGRAPHY)
+        to.style[k] = cs[k];
+}
+/** The typography inline styles of an element (for a ghost that must look like it). */
+export function typographyOf(el) {
+    const out = {};
+    for (const k of TYPOGRAPHY)
+        out[k] = el.style[k];
+    return out;
+}
+/** Place an absolutely positioned (document layer) box over `el`. */
+export function placeOver(box, el, opts = {}) {
+    const r = el.getBoundingClientRect();
+    box.style.top = `${r.top + window.scrollY}px`;
+    box.style.left = `${r.left + window.scrollX}px`;
+    box.style.width = `${Math.max(r.width, opts.minWidth ?? 0)}px`;
+    if (opts.minHeight)
+        box.style.minHeight = `${r.height}px`;
+}
+/** Inside the editor's own UI? */
+export const isOurs = (node) => node instanceof Element && !!node.closest(`[${UI}]`);
+/** Focus is in a text input or editable region (keyboard shortcuts stay out of the way). */
+export const isTyping = (t) => t instanceof HTMLElement &&
+    (t.isContentEditable ||
+        t.tagName === 'INPUT' ||
+        t.tagName === 'TEXTAREA' ||
+        t.tagName === 'SELECT');
+/** The DOM caret position under a viewport point, if it falls inside `within`. */
+export function caretAt(point, within) {
+    const doc = document;
+    const pos = doc.caretPositionFromPoint?.(point.x, point.y);
+    if (pos && within.contains(pos.offsetNode))
+        return { node: pos.offsetNode, offset: pos.offset };
+    const r = doc.caretRangeFromPoint?.(point.x, point.y);
+    if (r && within.contains(r.startContainer))
+        return { node: r.startContainer, offset: r.startOffset };
+    return null;
+}
+/** Place the caret at a viewport point inside `el`, else at the end. */
+export function placeCaret(el, point) {
+    const sel = window.getSelection();
+    if (!sel)
+        return;
+    const range = document.createRange();
+    const hit = point ? caretAt(point, el) : null;
+    if (hit)
+        range.setStart(hit.node, hit.offset);
+    else {
+        range.selectNodeContents(el);
+        range.collapse(false);
+    }
+    range.collapse(true);
+    sel.removeAllRanges();
+    sel.addRange(range);
+}
+/** Position a fixed popover below (or above) an element, kept inside the viewport. */
+export function popoverPosition(el, size = { width: 300, height: 320 }) {
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+    if (!el)
+        return { top: 80, left: Math.max(8, vw / 2 - size.width / 2) };
+    const r = el.getBoundingClientRect();
+    const below = r.bottom + 8;
+    const top = below + size.height < vh ? below : Math.max(8, r.top - 8 - size.height);
+    const left = Math.min(Math.max(8, r.left), vw - size.width - 8);
+    return { top, left };
+}
+const FOCUSABLE = 'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])';
+export const focusableIn = (root) => Array.from(root.querySelectorAll(FOCUSABLE)).filter((el) => !el.hasAttribute('disabled'));
+//# sourceMappingURL=dom.js.map

package/dist/dom.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dom.js","sourceRoot":"","sources":["../src/dom.ts"],"names":[],"mappings":"AAAA,oEAAoE;AAEpE,qFAAqF;AACrF,MAAM,CAAC,MAAM,MAAM,GAAG,oBAAoB,CAAA;AAC1C,2EAA2E;AAC3E,MAAM,CAAC,MAAM,EAAE,GAAG,gBAAgB,CAAA;AAElC,6FAA6F;AAC7F,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,YAAY;IACZ,UAAU;IACV,YAAY;IACZ,WAAW;IACX,YAAY;IACZ,eAAe;IACf,aAAa;IACb,eAAe;IACf,WAAW;IACX,YAAY;IACZ,OAAO;IACP,YAAY;IACZ,cAAc;IACd,eAAe;IACf,aAAa;CACL,CAAA;AAEV,MAAM,UAAU,cAAc,CAAC,IAAa,EAAE,EAAe;IAC3D,MAAM,EAAE,GAAG,gBAAgB,CAAC,IAAI,CAAC,CAAA;IACjC,KAAK,MAAM,CAAC,IAAI,UAAU;QAAE,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,CAAA;AACjD,CAAC;AAED,uFAAuF;AACvF,MAAM,UAAU,YAAY,CAAC,EAAe;IAC1C,MAAM,GAAG,GAAiC,EAAE,CAAA;IAC5C,KAAK,MAAM,CAAC,IAAI,UAAU;QAAE,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAA;IAChD,OAAO,GAAG,CAAA;AACZ,CAAC;AAED,qEAAqE;AACrE,MAAM,UAAU,SAAS,CACvB,GAAgB,EAChB,EAAW,EACX,OAAmD,EAAE;IAErD,MAAM,CAAC,GAAG,EAAE,CAAC,qBAAqB,EAAE,CAAA;IACpC,GAAG,CAAC,KAAK,CAAC,GAAG,GAAG,GAAG,CAAC,CAAC,GAAG,GAAG,MAAM,CAAC,OAAO,IAAI,CAAA;IAC7C,GAAG,CAAC,KAAK,CAAC,IAAI,GAAG,GAAG,CAAC,CAAC,IAAI,GAAG,MAAM,CAAC,OAAO,IAAI,CAAA;IAC/C,GAAG,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,IAAI,CAAC,CAAC,IAAI,CAAA;IAC9D,IAAI,IAAI,CAAC,SAAS;QAAE,GAAG,CAAC,KAAK,CAAC,SAAS,GAAG,GAAG,CAAC,CAAC,MAAM,IAAI,CAAA;AAC3D,CAAC;AAED,kCAAkC;AAClC,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,IAAwB,EAAW,EAAE,CAC1D,IAAI,YAAY,OAAO,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,GAAG,CAAC,CAAA;AAEtD,4FAA4F;AAC5F,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,CAAqB,EAAW,EAAE,CACzD,CAAC,YAAY,WAAW;IACxB,CAAC,CAAC,CAAC,iBAAiB;QAClB,CAAC,CAAC,OAAO,KAAK,OAAO;QACrB,CAAC,CAAC,OAAO,KAAK,UAAU;QACxB,CAAC,CAAC,OAAO,KAAK,QAAQ,CAAC,CAAA;AAE3B,kFAAkF;AAClF,MAAM,UAAU,OAAO,CACrB,KAA+B,EAC/B,MAAe;IAEf,MAAM,GAAG,GAAG,QAGX,CAAA;IACD,MAAM,GAAG,GAAG,GAAG,CAAC,sBAAsB,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,CAAA;IAC1D,IAAI,GAAG,IAAI,MAAM,CAAC,QAAQ,CAAC,GAAG,CAAC,UAAU,CAAC;QAAE,OAAO,EAAE,IAAI,EAAE,GAAG,CAAC,UAAU,EAAE,MAAM,EAAE,GAAG,CAAC,MAAM,EAAE,CAAA;IAC/F,MAAM,CAAC,GAAG,GAAG,CAAC,mBAAmB,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,CAAA;IACrD,IAAI,CAAC,IAAI,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,cAAc,CAAC;QACxC,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,cAAc,EAAE,MAAM,EAAE,CAAC,CAAC,WAAW,EAAE,CAAA;IAC1D,OAAO,IAAI,CAAA;AACb,CAAC;AAED,wEAAwE;AACxE,MAAM,UAAU,UAAU,CAAC,EAAe,EAAE,KAAgC;IAC1E,MAAM,GAAG,GAAG,MAAM,CAAC,YAAY,EAAE,CAAA;IACjC,IAAI,CAAC,GAAG;QAAE,OAAM;IAChB,MAAM,KAAK,GAAG,QAAQ,CAAC,WAAW,EAAE,CAAA;IACpC,MAAM,GAAG,GAAG,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAA;IAC7C,IAAI,GAAG;QAAE,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;SACxC,CAAC;QACJ,KAAK,CAAC,kBAAkB,CAAC,EAAE,CAAC,CAAA;QAC5B,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;IACvB,CAAC;IACD,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAA;IACpB,GAAG,CAAC,eAAe,EAAE,CAAA;IACrB,GAAG,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;AACrB,CAAC;AAED,sFAAsF;AACtF,MAAM,UAAU,eAAe,CAC7B,EAAkB,EAClB,IAAI,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE;IAElC,MAAM,EAAE,GAAG,MAAM,CAAC,UAAU,CAAA;IAC5B,MAAM,EAAE,GAAG,MAAM,CAAC,WAAW,CAAA;IAC7B,IAAI,CAAC,EAAE;QAAE,OAAO,EAAE,GAAG,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,EAAE,CAAA;IACvE,MAAM,CAAC,GAAG,EAAE,CAAC,qBAAqB,EAAE,CAAA;IACpC,MAAM,KAAK,GAAG,CAAC,CAAC,MAAM,GAAG,CAAC,CAAA;IAC1B,MAAM,GAAG,GAAG,KAAK,GAAG,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,GAAG,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,CAAA;IACnF,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,EAAE,EAAE,GAAG,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,CAAA;IAC/D,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,CAAA;AACtB,CAAC;AAED,MAAM,SAAS,GACb,sIAAsI,CAAA;AAExI,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,IAAa,EAAiB,EAAE,CAC1D,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAc,SAAS,CAAC,CAAC,CAAC,MAAM,CAC9D,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC,CACrC,CAAA"}

package/dist/editor/FieldHost.d.ts

@@ -0,0 +1,5 @@
+/** Renders the open field editor, if it belongs to this layer. */
+export declare function FieldHost({ mode }: {
+    mode: 'inline' | 'popover';
+}): import("react").JSX.Element | null;
+//# sourceMappingURL=FieldHost.d.ts.map

package/dist/editor/FieldHost.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldHost.d.ts","sourceRoot":"","sources":["../../src/editor/FieldHost.tsx"],"names":[],"mappings":"AAOA,kEAAkE;AAClE,wBAAgB,SAAS,CAAC,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,QAAQ,GAAG,SAAS,CAAA;CAAE,sCAyDjE"}

package/dist/editor/FieldHost.js

@@ -0,0 +1,36 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { fieldAtPath, getAt } from '@payload-onpage/core';
+import { Suspense, useCallback } from 'react';
+import { useOnPage } from "../context.js";
+/** Renders the open field editor, if it belongs to this layer. */
+export function FieldHost({ mode }) {
+    const { editing, editors, session, snap, targets, setEditing, addGhost, isLive, t } = useOnPage();
+    const def = editing ? editors[editing.editor] : undefined;
+    const state = editing ? snap.docs[editing.key] : undefined;
+    const key = editing?.key ?? '';
+    const path = editing?.path ?? '';
+    const live = isLive(key);
+    const clicked = editing?.el;
+    const element = useCallback(() => (clicked?.isConnected ? clicked : (targets.find(key, path)?.el ?? null)), [clicked, targets, key, path]);
+    const close = useCallback(() => {
+        session.cancelTransient(key);
+        setEditing(null);
+    }, [session, key, setEditing]);
+    const commit = useCallback((value) => {
+        session.setValue(key, path, value);
+        if (!live)
+            void session.flush(); // refresh mode: show it as soon as possible
+    }, [session, key, path, live]);
+    const preview = useCallback((value) => session.setValue(key, path, value, { transient: true }), [session, key, path]);
+    const ghost = useCallback((g) => addGhost({ key, path, ...g }), [addGhost, key, path]);
+    if (!editing || !def || def.mode !== mode || !state?.schema || !state.doc)
+        return null;
+    const field = fieldAtPath(state.schema.fields, state.doc, path)?.field;
+    if (!field)
+        return null;
+    const Editor = def.component;
+    // Editors may be lazy (the rich-text editor is): render nothing until they've loaded.
+    return (_jsx(Suspense, { fallback: null, children: _jsx(Editor, { docKey: key, path: path, field: field, element: element, value: getAt(state.doc, path), commit: commit, preview: preview, close: close, ghost: ghost, live: live, point: editing.point, t: t }, `${key}|${path}`) }));
+}
+//# sourceMappingURL=FieldHost.js.map

package/dist/editor/FieldHost.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldHost.js","sourceRoot":"","sources":["../../src/editor/FieldHost.tsx"],"names":[],"mappings":"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"}

package/dist/editor/Ghosts.d.ts

@@ -0,0 +1,6 @@
+import type { Ghost } from './useGhosts.ts';
+/** Refresh mode: committed content stays on screen until the server render shows it. */
+export declare function Ghosts({ ghosts }: {
+    ghosts: Ghost[];
+}): import("react").JSX.Element;
+//# sourceMappingURL=Ghosts.d.ts.map

package/dist/editor/Ghosts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Ghosts.d.ts","sourceRoot":"","sources":["../../src/editor/Ghosts.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AAE3C,wFAAwF;AACxF,wBAAgB,MAAM,CAAC,EAAE,MAAM,EAAE,EAAE;IAAE,MAAM,EAAE,KAAK,EAAE,CAAA;CAAE,+BAQrD"}

package/dist/editor/Ghosts.js

@@ -0,0 +1,37 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { useOnPage } from "../context.js";
+import { HIDDEN, placeOver } from "../dom.js";
+import { useLayoutTick } from "../layout.js";
+import { sanitizeHtml } from "../sanitize.js";
+/** Refresh mode: committed content stays on screen until the server render shows it. */
+export function Ghosts({ ghosts }) {
+    return (_jsx(_Fragment, { children: ghosts.map((g) => (_jsx(GhostView, { ghost: g }, g.id))) }));
+}
+function GhostView({ ghost }) {
+    const { targets, editing } = useOnPage();
+    const box = useRef(null);
+    const hidden = useRef(null);
+    const tick = useLayoutTick();
+    const reopened = editing?.key === ghost.key && editing.path === ghost.path;
+    useEffect(() => {
+        const el = targets.find(ghost.key, ghost.path)?.el ?? null;
+        if (hidden.current && hidden.current !== el)
+            hidden.current.removeAttribute(HIDDEN);
+        hidden.current = el;
+        const b = box.current;
+        if (!b)
+            return;
+        if (!el || reopened) {
+            b.style.visibility = 'hidden';
+            return;
+        }
+        el.setAttribute(HIDDEN, 'true');
+        placeOver(b, el, { minHeight: true });
+        b.style.visibility = 'visible';
+    }, [targets, ghost.key, ghost.path, reopened, tick]);
+    useEffect(() => () => hidden.current?.removeAttribute(HIDDEN), []);
+    return (_jsx("div", { ref: box, className: `po-ghost${ghost.className ? ` ${ghost.className}` : ''}`, style: ghost.style, dangerouslySetInnerHTML: { __html: sanitizeHtml(ghost.html) }, "aria-hidden": true, "data-testid": "onpage-ghost" }));
+}
+//# sourceMappingURL=Ghosts.js.map

package/dist/editor/Ghosts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Ghosts.js","sourceRoot":"","sources":["../../src/editor/Ghosts.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,eAAgB,CAAA;AAC1C,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,WAAW,CAAA;AAC7C,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAA;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAG7C,wFAAwF;AACxF,MAAM,UAAU,MAAM,CAAC,EAAE,MAAM,EAAuB;IACpD,OAAO,CACL,4BACG,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CACjB,KAAC,SAAS,IAAY,KAAK,EAAE,CAAC,IAAd,CAAC,CAAC,EAAE,CAAc,CACnC,CAAC,GACD,CACJ,CAAA;AACH,CAAC;AAED,SAAS,SAAS,CAAC,EAAE,KAAK,EAAoB;IAC5C,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,SAAS,EAAE,CAAA;IACxC,MAAM,GAAG,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IACxC,MAAM,MAAM,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IAC3C,MAAM,IAAI,GAAG,aAAa,EAAE,CAAA;IAC5B,MAAM,QAAQ,GAAG,OAAO,EAAE,GAAG,KAAK,KAAK,CAAC,GAAG,IAAI,OAAO,CAAC,IAAI,KAAK,KAAK,CAAC,IAAI,CAAA;IAE1E,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,CAAC,EAAE,EAAE,IAAI,IAAI,CAAA;QAC1D,IAAI,MAAM,CAAC,OAAO,IAAI,MAAM,CAAC,OAAO,KAAK,EAAE;YAAE,MAAM,CAAC,OAAO,CAAC,eAAe,CAAC,MAAM,CAAC,CAAA;QACnF,MAAM,CAAC,OAAO,GAAG,EAAE,CAAA;QACnB,MAAM,CAAC,GAAG,GAAG,CAAC,OAAO,CAAA;QACrB,IAAI,CAAC,CAAC;YAAE,OAAM;QACd,IAAI,CAAC,EAAE,IAAI,QAAQ,EAAE,CAAC;YACpB,CAAC,CAAC,KAAK,CAAC,UAAU,GAAG,QAAQ,CAAA;YAC7B,OAAM;QACR,CAAC;QACD,EAAE,CAAC,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;QAC/B,SAAS,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAA;QACrC,CAAC,CAAC,KAAK,CAAC,UAAU,GAAG,SAAS,CAAA;IAChC,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,CAAC,CAAA;IAEpD,SAAS,CAAC,GAAG,EAAE,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,eAAe,CAAC,MAAM,CAAC,EAAE,EAAE,CAAC,CAAA;IAElE,OAAO,CACL,cACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,WAAW,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,KAAK,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE,EACpE,KAAK,EAAE,KAAK,CAAC,KAA4B,EACzC,uBAAuB,EAAE,EAAE,MAAM,EAAE,YAAY,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,sCAEjD,cAAc,GAC1B,CACH,CAAA;AACH,CAAC"}

package/dist/editor/OnPageEditor.d.ts

@@ -0,0 +1,25 @@
+import { type DataSource, type Locator, type MediaLibrary, type Renderer } from '@payload-onpage/core';
+import { type Messages } from '../messages.ts';
+import type { FieldEditorDef, Links } from '../types.ts';
+export interface OnPageEditorProps {
+    dataSource: DataSource;
+    /** Image search/upload (e.g. `payloadUploads()`). Without it, upload fields can't be changed. */
+    media?: MediaLibrary;
+    /** How elements map to fields. Default: composite(annotations(), stega()). */
+    locator?: Locator;
+    /** How saved changes reach the page. Default: clientState() (no server refresh). */
+    renderer?: Renderer;
+    /** Extra or replacement field editors by id; `null` removes a default. */
+    editors?: Record<string, FieldEditorDef | null>;
+    links: Links;
+    /** Content locale to edit. */
+    locale?: string;
+    /** Autosave debounce, ms. Default: 250 with a refreshing renderer; else the collection's autosave interval, else 800. */
+    autosaveDelay?: number;
+    /** Where to look for editable content. Default: document.body. */
+    root?: () => ParentNode | null;
+    /** Override any UI string (see `defaultMessages`). */
+    messages?: Messages;
+}
+export declare function OnPageEditor(props: OnPageEditorProps): import("react").JSX.Element | null;
+//# sourceMappingURL=OnPageEditor.d.ts.map

package/dist/editor/OnPageEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OnPageEditor.d.ts","sourceRoot":"","sources":["../../src/editor/OnPageEditor.tsx"],"names":[],"mappings":"AAUA,OAAO,EAKL,KAAK,UAAU,EAEf,KAAK,OAAO,EACZ,KAAK,YAAY,EACjB,KAAK,QAAQ,EAEd,MAAM,sBAAsB,CAAA;AAS7B,OAAO,EAAmB,KAAK,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAK/D,OAAO,KAAK,EAGV,cAAc,EACd,KAAK,EAIN,MAAM,aAAa,CAAA;AAUpB,MAAM,WAAW,iBAAiB;IAChC,UAAU,EAAE,UAAU,CAAA;IACtB,iGAAiG;IACjG,KAAK,CAAC,EAAE,YAAY,CAAA;IACpB,8EAA8E;IAC9E,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,oFAAoF;IACpF,QAAQ,CAAC,EAAE,QAAQ,CAAA;IACnB,0EAA0E;IAC1E,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,cAAc,GAAG,IAAI,CAAC,CAAA;IAC/C,KAAK,EAAE,KAAK,CAAA;IACZ,8BAA8B;IAC9B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,yHAAyH;IACzH,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,kEAAkE;IAClE,IAAI,CAAC,EAAE,MAAM,UAAU,GAAG,IAAI,CAAA;IAC9B,sDAAsD;IACtD,QAAQ,CAAC,EAAE,QAAQ,CAAA;CACpB;AAKD,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,sCA6OpD"}