@payload-onpage/react 0.0.0-stage → 0.2.0

package/dist/renderers.d.ts

@@ -0,0 +1,7 @@
+/** Framework-free Renderer adapters. Next.js's router.refresh() renderer lives in @payload-onpage/next. */
+import type { Renderer } from '@payload-onpage/core';
+/** The page renders from editor state (OnPageClient everywhere): nothing to do after a save. */
+export declare const clientState: () => Renderer;
+/** Reload the whole page after each save. A last resort for frameworks without a soft refresh. */
+export declare const fullReload: () => Renderer;
+//# sourceMappingURL=renderers.d.ts.map

package/dist/renderers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderers.d.ts","sourceRoot":"","sources":["../src/renderers.ts"],"names":[],"mappings":"AAAA,2GAA2G;AAC3G,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAA;AAEpD,gGAAgG;AAChG,eAAO,MAAM,WAAW,QAAO,QAA4D,CAAA;AAE3F,kGAAkG;AAClG,eAAO,MAAM,UAAU,QAAO,QAO5B,CAAA"}

package/dist/renderers.js

@@ -0,0 +1,12 @@
+/** The page renders from editor state (OnPageClient everywhere): nothing to do after a save. */
+export const clientState = () => ({ name: 'client', live: true, afterSave() { } });
+/** Reload the whole page after each save. A last resort for frameworks without a soft refresh. */
+export const fullReload = () => ({
+    name: 'reload',
+    live: false,
+    afterSave() {
+        window.location.reload();
+        return new Promise(() => { }); // never resolves: the page goes away
+    },
+});
+//# sourceMappingURL=renderers.js.map

package/dist/renderers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderers.js","sourceRoot":"","sources":["../src/renderers.ts"],"names":[],"mappings":"AAGA,gGAAgG;AAChG,MAAM,CAAC,MAAM,WAAW,GAAG,GAAa,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,KAAI,CAAC,EAAE,CAAC,CAAA;AAE3F,kGAAkG;AAClG,MAAM,CAAC,MAAM,UAAU,GAAG,GAAa,EAAE,CAAC,CAAC;IACzC,IAAI,EAAE,QAAQ;IACd,IAAI,EAAE,KAAK;IACX,SAAS;QACP,MAAM,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAA;QACxB,OAAO,IAAI,OAAO,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC,CAAA,CAAC,qCAAqC;IACpE,CAAC;CACF,CAAC,CAAA"}

package/dist/sanitize.d.ts

@@ -0,0 +1,2 @@
+export declare function sanitizeHtml(html: string): string;
+//# sourceMappingURL=sanitize.d.ts.map

package/dist/sanitize.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sanitize.d.ts","sourceRoot":"","sources":["../src/sanitize.ts"],"names":[],"mappings":"AA2BA,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAwBjD"}

package/dist/sanitize.js

@@ -0,0 +1,49 @@
+/**
+ * Minimal HTML sanitizer for editor-generated markup shown in ghosts (the
+ * stand-in content kept on screen until a server refresh lands). Drops active
+ * elements, event handlers and unsafe URLs.
+ */
+import { safeLinkUrl } from '@payload-onpage/core';
+const DROP = new Set([
+    'SCRIPT',
+    'STYLE',
+    'IFRAME',
+    'OBJECT',
+    'EMBED',
+    'LINK',
+    'META',
+    'BASE',
+    'FORM',
+    'INPUT',
+    'TEXTAREA',
+    'BUTTON',
+    'SELECT',
+    'TEMPLATE',
+    'SVG',
+    'MATH',
+]);
+const URL_ATTRS = new Set(['href', 'src', 'xlink:href', 'action', 'formaction', 'srcset', 'poster']);
+export function sanitizeHtml(html) {
+    const tpl = document.createElement('template');
+    tpl.innerHTML = html;
+    const walk = (node) => {
+        for (const el of Array.from(node.children)) {
+            if (DROP.has(el.tagName.toUpperCase())) {
+                el.remove();
+                continue;
+            }
+            for (const attr of Array.from(el.attributes)) {
+                const name = attr.name.toLowerCase();
+                if (name.startsWith('on') ||
+                    name === 'style' ||
+                    (URL_ATTRS.has(name) && !safeLinkUrl(attr.value))) {
+                    el.removeAttribute(attr.name);
+                }
+            }
+            walk(el);
+        }
+    };
+    walk(tpl.content);
+    return tpl.innerHTML;
+}
+//# sourceMappingURL=sanitize.js.map

package/dist/sanitize.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sanitize.js","sourceRoot":"","sources":["../src/sanitize.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAA;AAElD,MAAM,IAAI,GAAG,IAAI,GAAG,CAAC;IACnB,QAAQ;IACR,OAAO;IACP,QAAQ;IACR,QAAQ;IACR,OAAO;IACP,MAAM;IACN,MAAM;IACN,MAAM;IACN,MAAM;IACN,OAAO;IACP,UAAU;IACV,QAAQ;IACR,QAAQ;IACR,UAAU;IACV,KAAK;IACL,MAAM;CACP,CAAC,CAAA;AACF,MAAM,SAAS,GAAG,IAAI,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,YAAY,EAAE,QAAQ,EAAE,YAAY,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAA;AAEpG,MAAM,UAAU,YAAY,CAAC,IAAY;IACvC,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAA;IAC9C,GAAG,CAAC,SAAS,GAAG,IAAI,CAAA;IACpB,MAAM,IAAI,GAAG,CAAC,IAAgB,EAAE,EAAE;QAChC,KAAK,MAAM,EAAE,IAAI,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC3C,IAAI,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC,EAAE,CAAC;gBACvC,EAAE,CAAC,MAAM,EAAE,CAAA;gBACX,SAAQ;YACV,CAAC;YACD,KAAK,MAAM,IAAI,IAAI,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,EAAE,CAAC;gBAC7C,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAA;gBACpC,IACE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;oBACrB,IAAI,KAAK,OAAO;oBAChB,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EACjD,CAAC;oBACD,EAAE,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;gBAC/B,CAAC;YACH,CAAC;YACD,IAAI,CAAC,EAAE,CAAC,CAAA;QACV,CAAC;IACH,CAAC,CAAA;IACD,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,CAAA;IACjB,OAAO,GAAG,CAAC,SAAS,CAAA;AACtB,CAAC"}

package/dist/styles.d.ts

@@ -0,0 +1,8 @@
+/**
+ * The editor's own styles, injected once. Everything is prefixed `po-` and set
+ * explicitly, so the host site's CSS (and its absence) doesn't matter.
+ */
+export declare const PO_Z = 2147483000;
+export declare const PO_CSS = "\n.po-layer{position:fixed;inset:0;pointer-events:none;z-index:2147483000;font:13px/1.35 system-ui,-apple-system,\"Segoe UI\",sans-serif;color:#0f172a}\n.po-layer *{box-sizing:border-box}\n.po-outline{position:fixed;border:2px solid #4f7cff;border-radius:4px;pointer-events:none;transition:all .06s ease-out}\n.po-outline.is-block{border-style:dashed;border-color:#4f7cff99}\n.po-outline.is-item{border-color:#22a06b}\n.po-chip{position:fixed;transform:translateY(-100%);background:#3b63e0;color:#fff;font-size:11px;font-weight:600;padding:2px 6px;border-radius:4px 4px 0 0;white-space:nowrap;pointer-events:none}\n.po-chip.is-item{background:#167a45}\n.po-bar{position:fixed;display:flex;gap:2px;padding:3px;background:#0f172a;border-radius:8px;box-shadow:0 6px 24px #0f172a40;pointer-events:auto}\n.po-bar.is-item{background:#14532d}\n.po-btn{all:unset;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:28px;height:28px;padding:0 8px;border-radius:6px;color:#fff;font:600 12px/1 system-ui,-apple-system,sans-serif;cursor:pointer;white-space:nowrap}\n.po-btn:hover{background:#ffffff1f}\n.po-btn:focus-visible{outline:2px solid #93c5fd;outline-offset:1px}\n.po-btn[disabled]{opacity:.35;cursor:default;background:none}\n.po-btn.is-danger:hover{background:#ef444455}\n.po-add{position:fixed;transform:translate(-50%,-50%);pointer-events:auto}\n.po-add .po-btn{background:#3b63e0;box-shadow:0 2px 10px #4f7cff66;height:24px;font-size:11px}\n.po-add .po-btn:hover{background:#2f5bd9}\n.po-add.is-item .po-btn{background:#167a45;box-shadow:0 2px 10px #167a4555}\n.po-panel{position:fixed;width:320px;max-height:min(70vh,560px);overflow:auto;background:#fff;color:#0f172a;border-radius:12px;box-shadow:0 20px 60px #0f172a40,0 0 0 1px #0f172a14;pointer-events:auto;padding:14px}\n.po-panel .po-h3{margin:0 0 10px;font:700 13px/1.2 system-ui,sans-serif}\n.po-panel .po-h4{margin:14px 0 6px;font:600 11px/1.2 system-ui,sans-serif;text-transform:uppercase;letter-spacing:.06em;color:#64748b}\n.po-row{display:flex;flex-direction:column;gap:4px;margin:0 0 10px}\n.po-row label{font-weight:600;font-size:12px}\n.po-row small{color:#64748b;font-size:11px}\n.po-input,.po-select{all:unset;box-sizing:border-box;width:100%;height:32px;padding:0 10px;border:1px solid #cbd5e1;border-radius:8px;background:#fff;font:13px system-ui,sans-serif;color:#0f172a}\n.po-select{appearance:auto;-webkit-appearance:auto}\n.po-input:focus,.po-select:focus{border-color:#4f7cff;box-shadow:0 0 0 3px #4f7cff33}\n.po-check{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600}\n.po-seg{display:flex;flex-wrap:wrap;gap:4px}\n.po-seg button{all:unset;padding:5px 9px;border:1px solid #cbd5e1;border-radius:7px;font:12px system-ui,sans-serif;cursor:pointer;background:#fff}\n.po-seg button[aria-pressed=\"true\"]{background:#0f172a;color:#fff;border-color:#0f172a}\n.po-modal-bg{position:fixed;inset:0;background:#0f172a66;pointer-events:auto;display:flex;align-items:center;justify-content:center;padding:24px}\n.po-modal{width:min(880px,100%);max-height:85vh;display:flex;flex-direction:column;background:#fff;border-radius:14px;box-shadow:0 30px 80px #0f172a55;overflow:hidden}\n.po-modal header{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid #e2e8f0}\n.po-modal header .po-h3{margin:0;flex:1;font:700 14px system-ui,sans-serif}\n.po-modal .po-body{padding:14px 16px;overflow:auto}\n.po-modal .po-btn{color:#0f172a}\n.po-modal .po-btn:hover{background:#f1f5f9}\n.po-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}\n.po-tile{all:unset;display:flex;flex-direction:column;gap:6px;cursor:pointer;border-radius:10px;padding:6px;border:2px solid transparent}\n.po-tile:hover,.po-tile:focus-visible{border-color:#4f7cff;background:#f8fafc}\n.po-tile img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:6px;background:#f1f5f9}\n.po-tile span{font-size:11px;color:#475569;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n.po-blocks{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}\n.po-blocks button{all:unset;padding:14px;border:1px solid #e2e8f0;border-radius:10px;cursor:pointer;font:600 13px system-ui,sans-serif}\n.po-blocks button:hover,.po-blocks button:focus-visible{border-color:#4f7cff;background:#f5f8ff}\n.po-dock{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);display:flex;align-items:center;gap:4px;padding:6px;background:#0f172a;color:#fff;border-radius:12px;box-shadow:0 12px 40px #0f172a55;pointer-events:auto;max-width:calc(100vw - 24px);flex-wrap:wrap}\n.po-dock .po-status{padding:0 10px;font-size:12px;opacity:.85;white-space:nowrap}\n.po-dock .po-status.is-bad{color:#fca5a5;opacity:1}\n.po-dock .po-sep{width:1px;height:20px;background:#ffffff26;margin:0 4px}\n.po-dock .po-primary{background:#3b63e0}\n.po-dock .po-primary:hover{background:#2f5bd9}\n.po-chip-locale{padding:2px 7px;border-radius:999px;background:#ffffff1f;font-size:11px;font-weight:700;text-transform:uppercase}\n.po-notice{position:fixed;left:50%;bottom:72px;transform:translateX(-50%);max-width:min(560px,calc(100vw - 24px));padding:8px 12px;border-radius:10px;background:#fffbeb;color:#78350f;border:1px solid #fcd34d;font-size:12px;pointer-events:auto}\n.po-doc-layer{position:absolute;top:0;left:0;width:0;height:0;overflow:visible;z-index:2147483000;pointer-events:none;font:13px/1.35 system-ui,-apple-system,\"Segoe UI\",sans-serif}\n.po-inline{position:absolute;pointer-events:auto;outline:2px solid #4f7cff;outline-offset:2px;border-radius:2px;background:transparent;white-space:pre-wrap;word-break:break-word;caret-color:currentColor;cursor:text}\n.po-inline:focus{outline-color:#4f7cff}\n.po-rt{position:absolute;pointer-events:auto}\n.po-rt-surface{outline:2px solid #4f7cff;outline-offset:6px;border-radius:2px;min-height:1.5em}\n.po-rt-surface:focus{outline:2px solid #4f7cff}\n.po-rt-toolbar{position:absolute;left:0;top:-48px;display:flex;gap:2px;padding:3px;background:#0f172a;border-radius:8px;box-shadow:0 6px 24px #0f172a40}\n.po-rt-toolbar .po-btn[aria-pressed=\"true\"]{background:#ffffff2e}\n.po-pop{position:fixed;min-width:220px;max-width:340px;background:#fff;color:#0f172a;border-radius:10px;box-shadow:0 14px 40px #0f172a40,0 0 0 1px #0f172a14;pointer-events:auto;padding:10px}\n.po-pop .po-row{margin-bottom:8px}\n.po-pop-list{display:flex;flex-direction:column;gap:2px;max-height:260px;overflow:auto}\n.po-pop-list button{all:unset;padding:7px 9px;border-radius:7px;cursor:pointer;font:13px system-ui,sans-serif}\n.po-pop-list button:hover,.po-pop-list button:focus-visible,.po-pop-list button[aria-selected=\"true\"]{background:#eef2ff}\n.po-ghost{position:absolute;pointer-events:none;white-space:pre-wrap;word-break:break-word}\n.po-docs{font-size:11px;padding:2px 7px;border-radius:999px;background:#ffffff1f}\n.po-frame-bg{position:fixed;inset:0;background:#0f172acc;pointer-events:auto;display:flex;flex-direction:column;align-items:center;padding:56px 16px 16px}\n.po-frame-bg iframe{background:#fff;border:0;border-radius:12px;box-shadow:0 30px 80px #0008;height:100%;max-width:100%}\n.po-badge{padding:2px 8px;border-radius:999px;background:#f59e0b;color:#111;font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.04em}\n.po-b{font-weight:700}.po-i{font-style:italic}.po-u{text-decoration:underline}\n.po-opaque{display:inline-flex;align-items:center;gap:6px;margin:6px 0;padding:6px 10px;border:1px dashed #94a3b8;border-radius:8px;background:#f8fafc;color:#475569;font:12px system-ui,sans-serif;user-select:none}\nhtml[data-onpage-editing] [data-onpage-field]{cursor:pointer}\n[data-onpage-hidden=\"true\"]{visibility:hidden!important}\n.po-preview{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);display:flex;align-items:center;gap:6px;padding:6px;background:#0f172a;color:#fff;border-radius:12px;box-shadow:0 12px 40px #0f172a55;pointer-events:auto;max-width:calc(100vw - 24px);flex-wrap:wrap}\n.po-preview .po-status{padding:0 8px;font-size:12px;opacity:.85}\n.po-rel-item{display:flex;align-items:center;gap:6px;padding:4px 6px;border-radius:6px;background:#f1f5f9;font-size:12px;margin:0 0 4px}\n.po-rel-item button{all:unset;cursor:pointer;margin-left:auto;padding:0 4px;color:#64748b}\n\n.po-dialog-head{display:flex;align-items:center;gap:8px;margin:0 0 10px}\n.po-modal .po-dialog-head{margin:0;padding:14px 16px;border-bottom:1px solid #e2e8f0}\n.po-dialog-head .po-h3{flex:1;margin:0;font:700 14px/1.2 system-ui,sans-serif}\n.po-close{color:#0f172a;min-width:24px;height:24px}\n.po-close:hover{background:#f1f5f9}\n.po-bar-label{cursor:default;opacity:.8}\n.po-muted{color:#64748b;margin:6px 0}\n.po-error{color:#b91c1c;margin:6px 0}\n.po-center{text-align:center;margin-top:12px}\n.po-actions{display:flex;gap:6px}\n.po-inline-row{flex-direction:row;align-items:center}\n.po-search{width:240px}\n.po-picker{cursor:pointer;display:flex;align-items:center}\n.po-group{border:0;margin:0;padding:0}\n.po-primary,.po-pop .po-primary,.po-panel .po-primary{background:#3b63e0;color:#fff}\n.po-primary:hover{background:#2f5bd9}\n.po-pop .po-btn,.po-panel .po-btn{color:#0f172a}\n.po-pop .po-btn.po-primary,.po-panel .po-btn.po-primary{color:#fff}\n.po-frame-close{all:unset;position:absolute;inset:0;cursor:pointer}\n.po-frame-bg iframe{position:relative}\n.po-input[aria-invalid=\"true\"]{border-color:#dc2626}\nhtml[data-onpage-editing] [data-onpage-focusable]:focus-visible{outline:2px solid #4f7cff;outline-offset:2px}\n@media (prefers-reduced-motion:reduce){.po-outline{transition:none}}\n";
+export declare function injectStyles(): void;
+//# sourceMappingURL=styles.d.ts.map

package/dist/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,IAAI,aAAa,CAAA;AAE9B,eAAO,MAAM,MAAM,s5SAyGlB,CAAA;AAGD,wBAAgB,YAAY,SAO3B"}

package/dist/styles.js

@@ -0,0 +1,122 @@
+/**
+ * The editor's own styles, injected once. Everything is prefixed `po-` and set
+ * explicitly, so the host site's CSS (and its absence) doesn't matter.
+ */
+export const PO_Z = 2147483000;
+export const PO_CSS = `
+.po-layer{position:fixed;inset:0;pointer-events:none;z-index:${PO_Z};font:13px/1.35 system-ui,-apple-system,"Segoe UI",sans-serif;color:#0f172a}
+.po-layer *{box-sizing:border-box}
+.po-outline{position:fixed;border:2px solid #4f7cff;border-radius:4px;pointer-events:none;transition:all .06s ease-out}
+.po-outline.is-block{border-style:dashed;border-color:#4f7cff99}
+.po-outline.is-item{border-color:#22a06b}
+.po-chip{position:fixed;transform:translateY(-100%);background:#3b63e0;color:#fff;font-size:11px;font-weight:600;padding:2px 6px;border-radius:4px 4px 0 0;white-space:nowrap;pointer-events:none}
+.po-chip.is-item{background:#167a45}
+.po-bar{position:fixed;display:flex;gap:2px;padding:3px;background:#0f172a;border-radius:8px;box-shadow:0 6px 24px #0f172a40;pointer-events:auto}
+.po-bar.is-item{background:#14532d}
+.po-btn{all:unset;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:28px;height:28px;padding:0 8px;border-radius:6px;color:#fff;font:600 12px/1 system-ui,-apple-system,sans-serif;cursor:pointer;white-space:nowrap}
+.po-btn:hover{background:#ffffff1f}
+.po-btn:focus-visible{outline:2px solid #93c5fd;outline-offset:1px}
+.po-btn[disabled]{opacity:.35;cursor:default;background:none}
+.po-btn.is-danger:hover{background:#ef444455}
+.po-add{position:fixed;transform:translate(-50%,-50%);pointer-events:auto}
+.po-add .po-btn{background:#3b63e0;box-shadow:0 2px 10px #4f7cff66;height:24px;font-size:11px}
+.po-add .po-btn:hover{background:#2f5bd9}
+.po-add.is-item .po-btn{background:#167a45;box-shadow:0 2px 10px #167a4555}
+.po-panel{position:fixed;width:320px;max-height:min(70vh,560px);overflow:auto;background:#fff;color:#0f172a;border-radius:12px;box-shadow:0 20px 60px #0f172a40,0 0 0 1px #0f172a14;pointer-events:auto;padding:14px}
+.po-panel .po-h3{margin:0 0 10px;font:700 13px/1.2 system-ui,sans-serif}
+.po-panel .po-h4{margin:14px 0 6px;font:600 11px/1.2 system-ui,sans-serif;text-transform:uppercase;letter-spacing:.06em;color:#64748b}
+.po-row{display:flex;flex-direction:column;gap:4px;margin:0 0 10px}
+.po-row label{font-weight:600;font-size:12px}
+.po-row small{color:#64748b;font-size:11px}
+.po-input,.po-select{all:unset;box-sizing:border-box;width:100%;height:32px;padding:0 10px;border:1px solid #cbd5e1;border-radius:8px;background:#fff;font:13px system-ui,sans-serif;color:#0f172a}
+.po-select{appearance:auto;-webkit-appearance:auto}
+.po-input:focus,.po-select:focus{border-color:#4f7cff;box-shadow:0 0 0 3px #4f7cff33}
+.po-check{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600}
+.po-seg{display:flex;flex-wrap:wrap;gap:4px}
+.po-seg button{all:unset;padding:5px 9px;border:1px solid #cbd5e1;border-radius:7px;font:12px system-ui,sans-serif;cursor:pointer;background:#fff}
+.po-seg button[aria-pressed="true"]{background:#0f172a;color:#fff;border-color:#0f172a}
+.po-modal-bg{position:fixed;inset:0;background:#0f172a66;pointer-events:auto;display:flex;align-items:center;justify-content:center;padding:24px}
+.po-modal{width:min(880px,100%);max-height:85vh;display:flex;flex-direction:column;background:#fff;border-radius:14px;box-shadow:0 30px 80px #0f172a55;overflow:hidden}
+.po-modal header{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid #e2e8f0}
+.po-modal header .po-h3{margin:0;flex:1;font:700 14px system-ui,sans-serif}
+.po-modal .po-body{padding:14px 16px;overflow:auto}
+.po-modal .po-btn{color:#0f172a}
+.po-modal .po-btn:hover{background:#f1f5f9}
+.po-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
+.po-tile{all:unset;display:flex;flex-direction:column;gap:6px;cursor:pointer;border-radius:10px;padding:6px;border:2px solid transparent}
+.po-tile:hover,.po-tile:focus-visible{border-color:#4f7cff;background:#f8fafc}
+.po-tile img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:6px;background:#f1f5f9}
+.po-tile span{font-size:11px;color:#475569;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.po-blocks{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
+.po-blocks button{all:unset;padding:14px;border:1px solid #e2e8f0;border-radius:10px;cursor:pointer;font:600 13px system-ui,sans-serif}
+.po-blocks button:hover,.po-blocks button:focus-visible{border-color:#4f7cff;background:#f5f8ff}
+.po-dock{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);display:flex;align-items:center;gap:4px;padding:6px;background:#0f172a;color:#fff;border-radius:12px;box-shadow:0 12px 40px #0f172a55;pointer-events:auto;max-width:calc(100vw - 24px);flex-wrap:wrap}
+.po-dock .po-status{padding:0 10px;font-size:12px;opacity:.85;white-space:nowrap}
+.po-dock .po-status.is-bad{color:#fca5a5;opacity:1}
+.po-dock .po-sep{width:1px;height:20px;background:#ffffff26;margin:0 4px}
+.po-dock .po-primary{background:#3b63e0}
+.po-dock .po-primary:hover{background:#2f5bd9}
+.po-chip-locale{padding:2px 7px;border-radius:999px;background:#ffffff1f;font-size:11px;font-weight:700;text-transform:uppercase}
+.po-notice{position:fixed;left:50%;bottom:72px;transform:translateX(-50%);max-width:min(560px,calc(100vw - 24px));padding:8px 12px;border-radius:10px;background:#fffbeb;color:#78350f;border:1px solid #fcd34d;font-size:12px;pointer-events:auto}
+.po-doc-layer{position:absolute;top:0;left:0;width:0;height:0;overflow:visible;z-index:${PO_Z};pointer-events:none;font:13px/1.35 system-ui,-apple-system,"Segoe UI",sans-serif}
+.po-inline{position:absolute;pointer-events:auto;outline:2px solid #4f7cff;outline-offset:2px;border-radius:2px;background:transparent;white-space:pre-wrap;word-break:break-word;caret-color:currentColor;cursor:text}
+.po-inline:focus{outline-color:#4f7cff}
+.po-rt{position:absolute;pointer-events:auto}
+.po-rt-surface{outline:2px solid #4f7cff;outline-offset:6px;border-radius:2px;min-height:1.5em}
+.po-rt-surface:focus{outline:2px solid #4f7cff}
+.po-rt-toolbar{position:absolute;left:0;top:-48px;display:flex;gap:2px;padding:3px;background:#0f172a;border-radius:8px;box-shadow:0 6px 24px #0f172a40}
+.po-rt-toolbar .po-btn[aria-pressed="true"]{background:#ffffff2e}
+.po-pop{position:fixed;min-width:220px;max-width:340px;background:#fff;color:#0f172a;border-radius:10px;box-shadow:0 14px 40px #0f172a40,0 0 0 1px #0f172a14;pointer-events:auto;padding:10px}
+.po-pop .po-row{margin-bottom:8px}
+.po-pop-list{display:flex;flex-direction:column;gap:2px;max-height:260px;overflow:auto}
+.po-pop-list button{all:unset;padding:7px 9px;border-radius:7px;cursor:pointer;font:13px system-ui,sans-serif}
+.po-pop-list button:hover,.po-pop-list button:focus-visible,.po-pop-list button[aria-selected="true"]{background:#eef2ff}
+.po-ghost{position:absolute;pointer-events:none;white-space:pre-wrap;word-break:break-word}
+.po-docs{font-size:11px;padding:2px 7px;border-radius:999px;background:#ffffff1f}
+.po-frame-bg{position:fixed;inset:0;background:#0f172acc;pointer-events:auto;display:flex;flex-direction:column;align-items:center;padding:56px 16px 16px}
+.po-frame-bg iframe{background:#fff;border:0;border-radius:12px;box-shadow:0 30px 80px #0008;height:100%;max-width:100%}
+.po-badge{padding:2px 8px;border-radius:999px;background:#f59e0b;color:#111;font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.04em}
+.po-b{font-weight:700}.po-i{font-style:italic}.po-u{text-decoration:underline}
+.po-opaque{display:inline-flex;align-items:center;gap:6px;margin:6px 0;padding:6px 10px;border:1px dashed #94a3b8;border-radius:8px;background:#f8fafc;color:#475569;font:12px system-ui,sans-serif;user-select:none}
+html[data-onpage-editing] [data-onpage-field]{cursor:pointer}
+[data-onpage-hidden="true"]{visibility:hidden!important}
+.po-preview{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);display:flex;align-items:center;gap:6px;padding:6px;background:#0f172a;color:#fff;border-radius:12px;box-shadow:0 12px 40px #0f172a55;pointer-events:auto;max-width:calc(100vw - 24px);flex-wrap:wrap}
+.po-preview .po-status{padding:0 8px;font-size:12px;opacity:.85}
+.po-rel-item{display:flex;align-items:center;gap:6px;padding:4px 6px;border-radius:6px;background:#f1f5f9;font-size:12px;margin:0 0 4px}
+.po-rel-item button{all:unset;cursor:pointer;margin-left:auto;padding:0 4px;color:#64748b}
+
+.po-dialog-head{display:flex;align-items:center;gap:8px;margin:0 0 10px}
+.po-modal .po-dialog-head{margin:0;padding:14px 16px;border-bottom:1px solid #e2e8f0}
+.po-dialog-head .po-h3{flex:1;margin:0;font:700 14px/1.2 system-ui,sans-serif}
+.po-close{color:#0f172a;min-width:24px;height:24px}
+.po-close:hover{background:#f1f5f9}
+.po-bar-label{cursor:default;opacity:.8}
+.po-muted{color:#64748b;margin:6px 0}
+.po-error{color:#b91c1c;margin:6px 0}
+.po-center{text-align:center;margin-top:12px}
+.po-actions{display:flex;gap:6px}
+.po-inline-row{flex-direction:row;align-items:center}
+.po-search{width:240px}
+.po-picker{cursor:pointer;display:flex;align-items:center}
+.po-group{border:0;margin:0;padding:0}
+.po-primary,.po-pop .po-primary,.po-panel .po-primary{background:#3b63e0;color:#fff}
+.po-primary:hover{background:#2f5bd9}
+.po-pop .po-btn,.po-panel .po-btn{color:#0f172a}
+.po-pop .po-btn.po-primary,.po-panel .po-btn.po-primary{color:#fff}
+.po-frame-close{all:unset;position:absolute;inset:0;cursor:pointer}
+.po-frame-bg iframe{position:relative}
+.po-input[aria-invalid="true"]{border-color:#dc2626}
+html[data-onpage-editing] [data-onpage-focusable]:focus-visible{outline:2px solid #4f7cff;outline-offset:2px}
+@media (prefers-reduced-motion:reduce){.po-outline{transition:none}}
+`;
+let injected = false;
+export function injectStyles() {
+    if (injected || typeof document === 'undefined')
+        return;
+    injected = true;
+    const el = document.createElement('style');
+    el.setAttribute('data-onpage-styles', '');
+    el.textContent = PO_CSS;
+    document.head.appendChild(el);
+}
+//# sourceMappingURL=styles.js.map

package/dist/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,UAAU,CAAA;AAE9B,MAAM,CAAC,MAAM,MAAM,GAAG;+DACyC,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yFAsDsB,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkD5F,CAAA;AAED,IAAI,QAAQ,GAAG,KAAK,CAAA;AACpB,MAAM,UAAU,YAAY;IAC1B,IAAI,QAAQ,IAAI,OAAO,QAAQ,KAAK,WAAW;QAAE,OAAM;IACvD,QAAQ,GAAG,IAAI,CAAA;IACf,MAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAA;IAC1C,EAAE,CAAC,YAAY,CAAC,oBAAoB,EAAE,EAAE,CAAC,CAAA;IACzC,EAAE,CAAC,WAAW,GAAG,MAAM,CAAA;IACvB,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,CAAA;AAC/B,CAAC"}

package/dist/targets.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Keeps an index of the page's targets current: scans with the locator on
+ * mount and again whenever the page's DOM changes (a server refresh, a client
+ * re-render, lazy content), ignoring the editor's own UI. Rescans are
+ * debounced and run when the browser is idle.
+ */
+import { type Locator, type Target } from '@payload-onpage/core';
+import type { TargetIndex } from './types.ts';
+export declare const isFieldTarget: (t: Target) => boolean;
+export declare const isRowTarget: (t: Target) => boolean;
+export declare function buildIndex(all: Target[]): TargetIndex;
+/** The innermost field target and all row targets (innermost first) at or above `el`. */
+export declare function targetsAt(index: TargetIndex, el: Element | null): {
+    field?: Target;
+    rows: Target[];
+};
+export declare function useTargets(locator: Locator, root: () => ParentNode | null): TargetIndex;
+//# sourceMappingURL=targets.d.ts.map

package/dist/targets.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"targets.d.ts","sourceRoot":"","sources":["../src/targets.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AACH,OAAO,EAAa,KAAK,OAAO,EAAE,KAAK,MAAM,EAAmB,MAAM,sBAAsB,CAAA;AAI5F,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAA;AAG7C,eAAO,MAAM,aAAa,GAAI,GAAG,MAAM,KAAG,OAAkC,CAAA;AAC5E,eAAO,MAAM,WAAW,GAAI,GAAG,MAAM,KAAG,OAA4B,CAAA;AAEpE,wBAAgB,UAAU,CAAC,GAAG,EAAE,MAAM,EAAE,GAAG,WAAW,CAoBrD;AAED,yFAAyF;AACzF,wBAAgB,SAAS,CACvB,KAAK,EAAE,WAAW,EAClB,EAAE,EAAE,OAAO,GAAG,IAAI,GACjB;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,EAAE,CAAA;CAAE,CAUpC;AAYD,wBAAgB,UAAU,CAAC,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,GAAG,IAAI,GAAG,WAAW,CAkCvF"}

package/dist/targets.js

@@ -0,0 +1,86 @@
+'use client';
+/**
+ * Keeps an index of the page's targets current: scans with the locator on
+ * mount and again whenever the page's DOM changes (a server refresh, a client
+ * re-render, lazy content), ignoring the editor's own UI. Rescans are
+ * debounced and run when the browser is idle.
+ */
+import { targetKey } from '@payload-onpage/core';
+import { useEffect, useState } from 'react';
+import { ATTR } from "./annotations.js";
+import { isOurs } from "./dom.js";
+const FIELD_KINDS = new Set(['text', 'textarea', 'richtext', 'media', 'field']);
+export const isFieldTarget = (t) => FIELD_KINDS.has(t.kind);
+export const isRowTarget = (t) => t.kind === 'item';
+export function buildIndex(all) {
+    const byEl = new Map();
+    const byPath = new Map();
+    // Annotations first: they are precise, inferred targets are a fallback.
+    const sorted = [...all].sort((a, b) => Number(a.source !== 'annotation') - Number(b.source !== 'annotation'));
+    for (const t of sorted) {
+        byEl.set(t.el, [...(byEl.get(t.el) ?? []), t]);
+        const k = targetKey(t.ref, t.path);
+        byPath.set(k, [...(byPath.get(k) ?? []), t]);
+    }
+    return {
+        all: sorted,
+        at: (el) => byEl.get(el) ?? [],
+        find: (key, path, kinds) => (byPath.get(targetKey(key, path)) ?? []).find((t) => t.el.isConnected && (!kinds || kinds.includes(t.kind))),
+    };
+}
+/** The innermost field target and all row targets (innermost first) at or above `el`. */
+export function targetsAt(index, el) {
+    let field;
+    const rows = [];
+    for (let node = el; node; node = node.parentElement) {
+        for (const t of index.at(node)) {
+            if (!field && isFieldTarget(t))
+                field = t;
+            if (isRowTarget(t))
+                rows.push(t);
+        }
+    }
+    return { field, rows };
+}
+const WATCHED = [ATTR.ref, ATTR.field, ATTR.row, ATTR.list, 'alt'];
+const idle = (fn) => {
+    if (typeof requestIdleCallback === 'function') {
+        const h = requestIdleCallback(fn, { timeout: 300 });
+        return () => cancelIdleCallback(h);
+    }
+    const h = setTimeout(fn, 50);
+    return () => clearTimeout(h);
+};
+export function useTargets(locator, root) {
+    const [index, setIndex] = useState(() => buildIndex([]));
+    useEffect(() => {
+        const r = root();
+        if (!r)
+            return;
+        let debounce;
+        let cancelIdle;
+        const scan = () => setIndex(buildIndex(locator.scan(r)));
+        scan();
+        const observer = new MutationObserver((records) => {
+            if (records.every((m) => isOurs(m.target instanceof Element ? m.target : m.target.parentElement)))
+                return;
+            clearTimeout(debounce);
+            cancelIdle?.();
+            debounce = setTimeout(() => (cancelIdle = idle(scan)), 120);
+        });
+        observer.observe(r, {
+            subtree: true,
+            childList: true,
+            characterData: true,
+            attributes: true,
+            attributeFilter: WATCHED,
+        });
+        return () => {
+            observer.disconnect();
+            clearTimeout(debounce);
+            cancelIdle?.();
+        };
+    }, [locator, root]);
+    return index;
+}
+//# sourceMappingURL=targets.js.map

package/dist/targets.js.map

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

package/dist/types.d.ts

@@ -0,0 +1,131 @@
+/** Public types of the editor UI. */
+import type { ComponentType } from 'react';
+import type { DocRef, EditorSession, MediaLibrary, Renderer, SchemaField, SessionSnapshot, Target, TargetKind } from '@payload-onpage/core';
+import type { MessageKey, Translate } from './messages.ts';
+export interface EditingState {
+    /** refKey of the document */
+    key: string;
+    path: string;
+    /** Editor id from the registry ("text", "richText", …). */
+    editor: string;
+    point?: {
+        x: number;
+        y: number;
+    };
+    /** The element that was clicked (several elements may show one field). */
+    el?: Element;
+}
+export type Panel = {
+    kind: 'settings';
+    key: string;
+    path: string;
+    title: string;
+} | {
+    kind: 'blocks';
+    key: string;
+    listPath: string;
+    index: number;
+} | null;
+export interface Selection {
+    key: string;
+    path: string;
+}
+/** Props every field editor receives. */
+export interface FieldEditorProps {
+    docKey: string;
+    path: string;
+    field: SchemaField;
+    /** The element showing the field (re-resolved after each refresh). */
+    element: () => Element | null;
+    value: unknown;
+    /** Commit a value (one undo step, autosaved). */
+    commit: (value: unknown) => void;
+    /** Live preview while editing (no history entry, not saved). */
+    preview: (value: unknown) => void;
+    /** Close the editor (after commit, or to cancel: transient previews are reverted). */
+    close: () => void;
+    /** Leave a stand-in showing the new content until the page re-renders (refresh mode). */
+    ghost: (g: {
+        html: string;
+        className?: string;
+        style?: Partial<CSSStyleDeclaration>;
+    }) => void;
+    /** True when the page renders this document from editor state (instant); false = server refresh. */
+    live: boolean;
+    point?: {
+        x: number;
+        y: number;
+    };
+    /** UI strings. */
+    t: Translate;
+}
+/**
+ * A field editor (the FieldEditor port). `inline` editors replace the element
+ * in place (text, rich text); `popover` editors open beside it or as a dialog
+ * (select, date, relationship, image…). Register your own by id and refer to it
+ * from a field with `admin: { custom: { onpage: { editor: 'my-id' } } }`, or by
+ * field type ("json", "code"…) to replace or add a default.
+ */
+export interface FieldEditorDef {
+    mode: 'inline' | 'popover';
+    component: ComponentType<FieldEditorProps>;
+}
+export type EditorRegistry = Record<string, FieldEditorDef>;
+/** Navigation targets. `exit` and `mode` are endpoints the editor POSTs to. */
+export interface Links {
+    exit: string;
+    admin?: (ref: DocRef) => string;
+    mode?: (mode: 'edit' | 'view') => string;
+}
+export interface TargetIndex {
+    all: Target[];
+    /** Targets whose element is exactly `el`. */
+    at: (el: Element) => Target[];
+    find: (key: string, path: string, kinds?: TargetKind[]) => Target | undefined;
+}
+/** What extensions and field editors can use from the editor (`useOnPage()`). */
+export interface OnPageContextValue {
+    session: EditorSession;
+    snap: SessionSnapshot;
+    renderer: Renderer;
+    media?: MediaLibrary;
+    editors: EditorRegistry;
+    targets: TargetIndex;
+    links: Links;
+    t: Translate;
+    panel: Panel;
+    setPanel: (p: Panel) => void;
+    editing: EditingState | null;
+    setEditing: (e: EditingState | null) => void;
+    selected: Selection | null;
+    setSelected: (s: Selection | null) => void;
+    /** Documents shown on the current page (the session may hold others from earlier pages). */
+    docKeys: string[];
+    /** Is this document rendered from session state (client mode)? */
+    isLive: (key: string) => boolean;
+    /** Client-mode documents register here (they don't need a server refresh). */
+    registerClientDoc: (key: string) => () => void;
+    /** The page is re-rendering after a save (refresh mode). */
+    rendering: boolean;
+    /** Open the right editor for a field (registry resolution); false if none applies. */
+    edit: (key: string, path: string, opts?: {
+        point?: {
+            x: number;
+            y: number;
+        };
+        kind?: TargetKind;
+        anchor?: Element;
+    }) => boolean;
+    /** Re-render documents after an operation outside autosave (publish, reload). */
+    rerender: (refs: DocRef[]) => Promise<void>;
+    /** Show a short message in the dock. */
+    notify: (key: MessageKey | (string & {}), vars?: Record<string, string | number>, bad?: boolean) => void;
+    addGhost: (g: {
+        key: string;
+        path: string;
+        html: string;
+        className?: string;
+        style?: Partial<CSSStyleDeclaration>;
+    }) => void;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

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

package/dist/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":""}

package/dist/ui/BlockPicker.d.ts

@@ -0,0 +1,3 @@
+/** Choose a block type to insert at a position in a blocks field. */
+export declare function BlockPicker(): import("react").JSX.Element | null;
+//# sourceMappingURL=BlockPicker.d.ts.map

package/dist/ui/BlockPicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockPicker.d.ts","sourceRoot":"","sources":["../../src/ui/BlockPicker.tsx"],"names":[],"mappings":"AAMA,qEAAqE;AACrE,wBAAgB,WAAW,uCAyC1B"}

package/dist/ui/BlockPicker.js

@@ -0,0 +1,27 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { fieldAtPath, insertItem, newBlockRow, updateArray } from '@payload-onpage/core';
+import { useOnPage } from "../context.js";
+import { Dialog } from "./Dialog.js";
+/** Choose a block type to insert at a position in a blocks field. */
+export function BlockPicker() {
+    const { panel, setPanel, snap, session, setSelected, t } = useOnPage();
+    if (panel?.kind !== 'blocks')
+        return null;
+    const state = snap.docs[panel.key];
+    if (!state?.schema || !state.doc)
+        return null;
+    const { key, listPath, index } = panel;
+    const field = fieldAtPath(state.schema.fields, state.doc, listPath)?.field;
+    const blocks = field?.type === 'blocks' ? (field.blocks ?? []) : [];
+    const choose = (slug) => {
+        const block = blocks.find((b) => b.slug === slug);
+        if (!block)
+            return;
+        session.apply(key, (d) => updateArray(d, listPath, (a) => insertItem(a, index, newBlockRow(block))));
+        setPanel(null);
+        setSelected({ key, path: `${listPath}.${index}` });
+    };
+    return (_jsx(Dialog, { title: t('blocks.title'), onClose: () => setPanel(null), t: t, width: 640, testId: "onpage-block-picker", children: _jsx("div", { className: "po-blocks", children: blocks.map((b) => (_jsx("button", { type: "button", onClick: () => choose(b.slug), "data-testid": `onpage-block-${b.slug}`, children: b.labels.singular }, b.slug))) }) }));
+}
+//# sourceMappingURL=BlockPicker.js.map

package/dist/ui/BlockPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockPicker.js","sourceRoot":"","sources":["../../src/ui/BlockPicker.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAA;AACxF,OAAO,EAAE,SAAS,EAAE,MAAM,eAAgB,CAAA;AAC1C,OAAO,EAAE,MAAM,EAAE,MAAM,aAAc,CAAA;AAErC,qEAAqE;AACrE,MAAM,UAAU,WAAW;IACzB,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,WAAW,EAAE,CAAC,EAAE,GAAG,SAAS,EAAE,CAAA;IACtE,IAAI,KAAK,EAAE,IAAI,KAAK,QAAQ;QAAE,OAAO,IAAI,CAAA;IACzC,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAA;IAClC,IAAI,CAAC,KAAK,EAAE,MAAM,IAAI,CAAC,KAAK,CAAC,GAAG;QAAE,OAAO,IAAI,CAAA;IAC7C,MAAM,EAAE,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,KAAK,CAAA;IACtC,MAAM,KAAK,GAAG,WAAW,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,GAAG,EAAE,QAAQ,CAAC,EAAE,KAAK,CAAA;IAC1E,MAAM,MAAM,GAAG,KAAK,EAAE,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAA;IAEnE,MAAM,MAAM,GAAG,CAAC,IAAY,EAAE,EAAE;QAC9B,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,CAAA;QACjD,IAAI,CAAC,KAAK;YAAE,OAAM;QAClB,OAAO,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,EAAE,CACvB,WAAW,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,UAAU,CAAC,CAAC,EAAE,KAAK,EAAE,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC,CAC1E,CAAA;QACD,QAAQ,CAAC,IAAI,CAAC,CAAA;QACd,WAAW,CAAC,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,QAAQ,IAAI,KAAK,EAAE,EAAE,CAAC,CAAA;IACpD,CAAC,CAAA;IAED,OAAO,CACL,KAAC,MAAM,IACL,KAAK,EAAE,CAAC,CAAC,cAAc,CAAC,EACxB,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,EAC7B,CAAC,EAAE,CAAC,EACJ,KAAK,EAAE,GAAG,EACV,MAAM,EAAC,qBAAqB,YAE5B,cAAK,SAAS,EAAC,WAAW,YACvB,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CACjB,iBAEE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,iBAChB,gBAAgB,CAAC,CAAC,IAAI,EAAE,YAEpC,CAAC,CAAC,MAAM,CAAC,QAAQ,IALb,CAAC,CAAC,IAAI,CAMJ,CACV,CAAC,GACE,GACC,CACV,CAAA;AACH,CAAC"}

package/dist/ui/Dialog.d.ts

@@ -0,0 +1,22 @@
+/**
+ * The one dialog primitive: labelled, focus moves in on open and back on
+ * close, Tab stays inside (modal), Escape closes. `variant="popover"` is
+ * anchored next to an element and closes on an outside click.
+ */
+import { type ReactNode } from 'react';
+import type { Translate } from '../messages.ts';
+export interface DialogProps {
+    title: string;
+    onClose: () => void;
+    children: ReactNode;
+    t: Translate;
+    /** modal: centered with a backdrop. panel: fixed side panel. popover: next to `anchor`. */
+    variant?: 'modal' | 'panel' | 'popover';
+    anchor?: () => Element | null;
+    width?: number;
+    testId?: string;
+    /** Extra header content (search box, actions). */
+    actions?: ReactNode;
+}
+export declare function Dialog({ title, onClose, children, t, variant, anchor, width, testId, actions, }: DialogProps): import("react").JSX.Element;
+//# sourceMappingURL=Dialog.d.ts.map

package/dist/ui/Dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../src/ui/Dialog.tsx"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,OAAO,EAA0D,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAG9F,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAE/C,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,QAAQ,EAAE,SAAS,CAAA;IACnB,CAAC,EAAE,SAAS,CAAA;IACZ,2FAA2F;IAC3F,OAAO,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,SAAS,CAAA;IACvC,MAAM,CAAC,EAAE,MAAM,OAAO,GAAG,IAAI,CAAA;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,kDAAkD;IAClD,OAAO,CAAC,EAAE,SAAS,CAAA;CACpB;AAED,wBAAgB,MAAM,CAAC,EACrB,KAAK,EACL,OAAO,EACP,QAAQ,EACR,CAAC,EACD,OAAiB,EACjB,MAAM,EACN,KAAK,EACL,MAAM,EACN,OAAO,GACR,EAAE,WAAW,+BA0Hb"}