@payload-onpage/react 0.0.0-stage → 0.1.0

package/dist/ui/SettingsPanel.js

@@ -0,0 +1,130 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * Settings for one section or item, generated from the schema: every value
+ * that isn't edited directly on the page — selects (layout, background, width,
+ * spacing…), checkboxes, numbers, dates, relationships, URLs and other plain
+ * text, images that aren't on the page. Changes apply immediately.
+ */
+import { fieldAtPath, getAt, relationTitle, toText } from '@payload-onpage/core';
+import { useId, useRef, useState } from 'react';
+import { useOnPage } from "../context.js";
+import { Dialog } from "./Dialog.js";
+const SKIP = new Set(['id', 'blockType', 'blockName']);
+const TEXTUAL = new Set(['text', 'textarea', 'email', 'number', 'date', 'relationship', 'upload']);
+const INPUT_TYPES = new Set(['text', 'textarea', 'email', 'number']);
+function settable(field, path, key, targets) {
+    if (SKIP.has(field.name))
+        return false;
+    const full = `${path}.${field.name}`;
+    switch (field.type) {
+        case 'select':
+        case 'radio':
+        case 'checkbox':
+            return true;
+        case 'group':
+            return (field.fields ?? []).some((f) => settable(f, full, key, targets));
+        default:
+            // Shown on the page? Edit it there.
+            return TEXTUAL.has(field.type) && !targets.find(key, full);
+    }
+}
+export const hasSettings = (fields, path, key, targets) => fields.some((f) => settable(f, path, key, targets));
+const display = (v, t) => {
+    if (v == null || v === '')
+        return t('common.none');
+    if (Array.isArray(v))
+        return v.length ? t('common.selected', { count: v.length }) : t('common.none');
+    return typeof v === 'object' ? relationTitle(v) : toText(v);
+};
+function TextInput({ docKey, path, field, id, }) {
+    const { session, snap } = useOnPage();
+    const value = getAt(snap.docs[docKey]?.doc, path);
+    const [draft, setDraft] = useState(null);
+    const shown = draft ?? toText(value);
+    const parse = (v) => (field.type === 'number' ? (v === '' ? null : Number(v)) : v);
+    const commit = () => {
+        if (draft === null)
+            return;
+        session.setValue(docKey, path, parse(draft));
+        setDraft(null);
+    };
+    return (_jsx("input", { id: id, className: "po-input", type: field.type === 'number' ? 'number' : field.type === 'email' ? 'email' : 'text', value: shown, onChange: (e) => {
+            setDraft(e.target.value);
+            session.setValue(docKey, path, parse(e.target.value), { transient: true });
+        }, onBlur: commit, onKeyDown: (e) => e.key === 'Enter' && e.target.blur(), "data-testid": `onpage-setting-${path}` }));
+}
+/** A radio group with arrow-key navigation (WAI-ARIA radio pattern). */
+function Segmented({ docKey, path, field, labelId, }) {
+    const { session, snap } = useOnPage();
+    const options = field.options ?? [];
+    const current = getAt(snap.docs[docKey]?.doc, path) ?? field.defaultValue ?? '';
+    const index = Math.max(0, options.findIndex((o) => o.value === current));
+    const onKey = (e) => {
+        const step = e.key === 'ArrowRight' || e.key === 'ArrowDown'
+            ? 1
+            : e.key === 'ArrowLeft' || e.key === 'ArrowUp'
+                ? -1
+                : 0;
+        if (!step)
+            return;
+        e.preventDefault();
+        const next = options[(index + step + options.length) % options.length];
+        if (next)
+            session.setValue(docKey, path, next.value);
+        const group = e.currentTarget.parentElement;
+        requestAnimationFrame(() => group?.querySelector('[aria-checked="true"]')?.focus());
+    };
+    return (_jsx("div", { className: "po-seg", role: "radiogroup", "aria-labelledby": labelId, children: options.map((o, i) => (_jsx("button", { type: "button", role: "radio", "aria-checked": current === o.value, tabIndex: i === index ? 0 : -1, onClick: () => session.setValue(docKey, path, o.value), onKeyDown: onKey, "data-testid": `onpage-setting-${path}-${o.value}`, children: o.label }, o.value))) }));
+}
+function Control({ docKey, path, field, anchor, id, labelId, }) {
+    const { session, snap, edit, t } = useOnPage();
+    const value = getAt(snap.docs[docKey]?.doc, path);
+    const set = (v) => session.setValue(docKey, path, v);
+    if ((field.type === 'select' || field.type === 'radio') && !field.hasMany) {
+        const options = field.options ?? [];
+        if (options.length <= 5)
+            return _jsx(Segmented, { docKey: docKey, path: path, field: field, labelId: labelId });
+        return (_jsxs("select", { id: id, className: "po-select", value: toText(value ?? field.defaultValue), onChange: (e) => set(e.target.value || null), "data-testid": `onpage-setting-${path}`, children: [!field.required && _jsx("option", { value: "", children: t('common.none') }), options.map((o) => (_jsx("option", { value: o.value, children: o.label }, o.value)))] }));
+    }
+    if (field.type === 'checkbox') {
+        return (_jsxs("label", { className: "po-check", children: [_jsx("input", { type: "checkbox", checked: Boolean(value ?? field.defaultValue), onChange: (e) => set(e.target.checked), "data-testid": `onpage-setting-${path}` }), field.label] }));
+    }
+    if (INPUT_TYPES.has(field.type))
+        return _jsx(TextInput, { docKey: docKey, path: path, field: field, id: id });
+    // Everything else opens its field editor, anchored to the panel row.
+    return (_jsx("button", { id: id, type: "button", className: "po-input po-picker", onClick: () => edit(docKey, path, { anchor: anchor.current ?? undefined }), "data-testid": `onpage-setting-${path}`, children: field.type === 'upload'
+            ? t(value ? 'settings.changeImage' : 'settings.chooseImage')
+            : display(value, t) }));
+}
+function Row({ docKey, path, field }) {
+    const anchor = useRef(null);
+    const id = useId();
+    const labelId = `${id}-label`;
+    return (_jsxs("div", { className: "po-row", ref: anchor, children: [field.type !== 'checkbox' && (_jsx("label", { id: labelId, htmlFor: id, children: field.label })), _jsx(Control, { docKey: docKey, path: path, field: field, anchor: anchor, id: id, labelId: labelId }), field.description && _jsx("small", { children: field.description })] }));
+}
+function Fields({ docKey, fields, path }) {
+    const { targets } = useOnPage();
+    return (_jsx(_Fragment, { children: fields
+            .filter((f) => settable(f, path, docKey, targets))
+            .map((f) => {
+            const full = `${path}.${f.name}`;
+            if (f.type === 'group') {
+                return (_jsxs("fieldset", { className: "po-group", children: [_jsx("legend", { className: "po-h4", children: f.label }), _jsx(Fields, { docKey: docKey, fields: f.fields ?? [], path: full })] }, f.name));
+            }
+            return _jsx(Row, { docKey: docKey, path: full, field: f }, f.name);
+        }) }));
+}
+export function SettingsPanel() {
+    const { panel, setPanel, snap, t } = useOnPage();
+    if (panel?.kind !== 'settings')
+        return null;
+    const state = snap.docs[panel.key];
+    if (!state?.schema || !state.doc)
+        return null;
+    const owner = fieldAtPath(state.schema.fields, state.doc, panel.path);
+    // Row fields: the block's fields for a blocks row, the item fields for an array row.
+    const fields = owner?.field.type === 'blocks' ? (owner.block?.fields ?? []) : (owner?.field.fields ?? []);
+    return (_jsx(Dialog, { variant: "panel", title: t('settings.title', { label: panel.title }), onClose: () => setPanel(null), t: t, testId: "onpage-settings", children: _jsx(Fields, { docKey: panel.key, fields: fields, path: panel.path }) }));
+}
+//# sourceMappingURL=SettingsPanel.js.map

package/dist/ui/SettingsPanel.js.map

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

package/dist/useEvent.d.ts

@@ -0,0 +1,7 @@
+/**
+ * A stable function that always calls the latest `fn` (the `useEffectEvent`
+ * pattern). Our own, because the React bundled with Next.js 15 doesn't export
+ * `useEffectEvent`. Call it from effects and event handlers, not during render.
+ */
+export declare function useEvent<A extends unknown[], R>(fn: (...args: A) => R): (...args: A) => R;
+//# sourceMappingURL=useEvent.d.ts.map

package/dist/useEvent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useEvent.d.ts","sourceRoot":"","sources":["../src/useEvent.ts"],"names":[],"mappings":"AAIA;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,CAAC,SAAS,OAAO,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,GAAG,IAAI,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,IAAI,EAAE,CAAC,KAAK,CAAC,CAMzF"}

package/dist/useEvent.js

@@ -0,0 +1,15 @@
+'use client';
+import { useCallback, useInsertionEffect, useRef } from 'react';
+/**
+ * A stable function that always calls the latest `fn` (the `useEffectEvent`
+ * pattern). Our own, because the React bundled with Next.js 15 doesn't export
+ * `useEffectEvent`. Call it from effects and event handlers, not during render.
+ */
+export function useEvent(fn) {
+    const latest = useRef(fn);
+    useInsertionEffect(() => {
+        latest.current = fn;
+    });
+    return useCallback((...args) => latest.current(...args), []);
+}
+//# sourceMappingURL=useEvent.js.map

package/dist/useEvent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useEvent.js","sourceRoot":"","sources":["../src/useEvent.ts"],"names":[],"mappings":"AAAA,YAAY,CAAA;AAEZ,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAE/D;;;;GAIG;AACH,MAAM,UAAU,QAAQ,CAAyB,EAAqB;IACpE,MAAM,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC,CAAA;IACzB,kBAAkB,CAAC,GAAG,EAAE;QACtB,MAAM,CAAC,OAAO,GAAG,EAAE,CAAA;IACrB,CAAC,CAAC,CAAA;IACF,OAAO,WAAW,CAAC,CAAC,GAAG,IAAO,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC,CAAA;AACjE,CAAC"}

package/package.json

@@ -1,6 +1,73 @@
 {
   "name": "@payload-onpage/react",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "description": "payload-onpage React editor: overlay, toolbars, field editors, annotations and client mode.",
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": false,
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/jellologic/payload-onpage.git",
+    "directory": "packages/react"
+  },
+  "homepage": "https://github.com/jellologic/payload-onpage#readme",
+  "bugs": "https://github.com/jellologic/payload-onpage/issues",
+  "keywords": [
+    "payload",
+    "payloadcms",
+    "payload-plugin",
+    "nextjs",
+    "visual-editing",
+    "live-preview",
+    "inline-editing",
+    "cms"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./annotations": {
+      "types": "./dist/annotations.d.ts",
+      "default": "./dist/annotations.js"
+    },
+    "./client": {
+      "types": "./dist/OnPageClient.d.ts",
+      "default": "./dist/OnPageClient.js"
+    },
+    "./editor-kit": {
+      "types": "./dist/editor-kit.d.ts",
+      "default": "./dist/editor-kit.js"
+    }
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "!dist/.tsbuildinfo",
+    "src",
+    "!src/**/__tests__",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "tsc -b",
+    "typecheck": "tsc -b",
+    "test": "bun test src",
+    "clean": "rm -rf dist tsconfig.tsbuildinfo"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "dependencies": {
+    "@payload-onpage/core": "0.1.0"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "engines": {
+    "node": ">=20.9.0"
+  }
+}

package/src/OnPageClient.tsx

@@ -0,0 +1,67 @@
+'use client'
+
+/**
+ * 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.ts'
+import { encodeDocument, refKey, type DocRef } from '@payload-onpage/core'
+import { useEffect, useMemo, type ReactNode } from 'react'
+import { editable, editableOff, type Editable } from './annotations.ts'
+import { useOnPageOptional } from './context.tsx'
+
+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 function OnPageClient<T extends { id?: string | number } | null | undefined>(
+  props: OnPageClientProps<T>,
+) {
+  const { doc, render, global: globalSlug, collection } = props
+  const ctx = useOnPageOptional()
+  const id = doc?.id
+  const ref = useMemo<DocRef | null>(
+    () =>
+      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: DocRef) => {
+    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 <>{render(current as T, e)}</>
+}

package/src/annotations.ts

@@ -0,0 +1,83 @@
+/**
+ * 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, 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 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',
+} as const
+
+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
+}
+
+const none = (): Attrs => ({})
+export const editableOff: Editable = {
+  enabled: false,
+  field: none,
+  media: none,
+  row: none,
+  list: none,
+}
+
+export type EditableTarget =
+  | DocRef
+  | { collection: string; doc: { id?: string | number } | null | undefined }
+  | { global: string }
+
+export function toRef(t: EditableTarget): DocRef | null {
+  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: EditableTarget, opts: { enabled: boolean }): Editable {
+  const ref = opts.enabled ? toRef(target) : null
+  if (!ref) return editableOff
+  const key = refKey(ref)
+  const base = (extra: Attrs, label?: string): Attrs => ({
+    [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: Array<string | number>): string => parts.join('.')

package/src/context.tsx

@@ -0,0 +1,23 @@
+'use client'
+
+import { createContext, useContext, useSyncExternalStore } from 'react'
+import { hub } from './hub.ts'
+import type { OnPageContextValue } from './types.ts'
+
+export const OnPageContext = createContext<OnPageContextValue | null>(null)
+
+/** The editor, for code rendered inside it (field editors, panels). */
+export function useOnPage(): OnPageContextValue {
+  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(): OnPageContextValue | null {
+  const inside = useContext(OnPageContext)
+  const outside = useSyncExternalStore(hub.subscribe, hub.get, getNull)
+  return inside ?? outside
+}

package/src/dom.ts

@@ -0,0 +1,118 @@
+/** 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',
+] as const
+
+export function copyTypography(from: Element, to: HTMLElement): void {
+  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: HTMLElement): Partial<CSSStyleDeclaration> {
+  const out: Partial<CSSStyleDeclaration> = {}
+  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: HTMLElement,
+  el: Element,
+  opts: { minWidth?: number; minHeight?: boolean } = {},
+): void {
+  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: EventTarget | null): boolean =>
+  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: EventTarget | null): boolean =>
+  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: { x: number; y: number },
+  within: Element,
+): { node: Node; offset: number } | null {
+  const doc = document as Document & {
+    caretPositionFromPoint?: (x: number, y: number) => { offsetNode: Node; offset: number } | null
+    caretRangeFromPoint?: (x: number, y: number) => Range | null
+  }
+  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: HTMLElement, point?: { x: number; y: number }): void {
+  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: Element | null,
+  size = { width: 300, height: 320 },
+): { top: number; left: number } {
+  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: Element): HTMLElement[] =>
+  Array.from(root.querySelectorAll<HTMLElement>(FOCUSABLE)).filter(
+    (el) => !el.hasAttribute('disabled'),
+  )

package/src/editor/FieldHost.tsx

@@ -0,0 +1,66 @@
+'use client'
+
+import { fieldAtPath, getAt } from '@payload-onpage/core'
+import { Suspense, useCallback } from 'react'
+import { useOnPage } from '../context.tsx'
+import type { FieldEditorProps } from '../types.ts'
+
+/** Renders the open field editor, if it belongs to this layer. */
+export function FieldHost({ mode }: { mode: 'inline' | 'popover' }) {
+  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: unknown) => {
+      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: unknown) => session.setValue(key, path, value, { transient: true }),
+    [session, key, path],
+  )
+  const ghost = useCallback<FieldEditorProps['ghost']>(
+    (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 (
+    <Suspense fallback={null}>
+      <Editor
+        key={`${key}|${path}`}
+        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}
+      />
+    </Suspense>
+  )
+}