@obelism/content 0.1.1 → 0.3.0

package/dist/bridge.global.js

@@ -0,0 +1,158 @@
+!/*! Obelism Content bridge (@obelism/content), MIT. https://content.obelism.studio/docs/visual-editor */function(){"use strict";var e;let t="data-cms-uid",r="data-cms-entry",n="cms_environment",o="#d58a1f",a=(e="")=>`${e}[${t}]{cursor:pointer;transition:outline-color .15s}${e}[${t}]:hover{outline:2px dashed ${o};outline-offset:2px}${e}[${t}][data-cms-selected]{outline:2px solid ${o};outline-offset:2px}`,i={features:[],selectedUid:null,prompting:!1,canUndo:!1,unsaved:!1,saving:!1,publishing:!1,selecting:!1},s=()=>{let e={update:new Set,saved:new Set,published:new Set,change:new Set};return{listeners:e,on:(t,r)=>(e[t].add(r),()=>{e[t].delete(r)}),emit(t,r){for(let n of e[t])try{n(r)}catch(e){console.error("[@obelism/content bridge]",e)}}}},l=()=>Promise.reject(Error("Save and publish in the visual editor itself")),d={prompt:()=>Promise.reject(Error("Prompts only work inside the visual editor")),createPage:()=>Promise.reject(Error("New pages are made on the site itself")),undo:()=>{},save:l,publish:l,signOut:()=>{},select:()=>{},setSelecting:()=>{}},c=e=>`[${t}="${e.replace(/["\\]/g,"\\$&")}"]`,p=(e,t)=>{let r=s();e.on("saved",()=>r.emit("saved",{})),e.on("published",()=>r.emit("published",{}));let o=!1;return{isEditing:e.isEditing,mode:e.isEditing?"editor":null,entryId:e.entryId,environment:t.get(n),on:(t,n)=>("update"!==t||o||(o=!0,e.on("update",e=>{let t=e?.entry;t&&r.emit("update",{entry:t,selectedUid:null})})),r.on(t,n)),getState:()=>i,...d,destroy:()=>{}}},g={open:"Edit with a prompt",placeholder:"Describe a change, e.g. “make the heading shorter”",send:"Apply",undo:"Undo",close:"Close",scopeEntry:"Whole page",scopeBlock:"Selected block",clearBlock:"Edit the whole page instead",working:"Working on it…",save:"Save",publish:"Publish",saving:"Saving…",publishing:"Publishing…",saved:"Saved as a draft",published:"Published",unsaved:"Unsaved changes",signOut:"Exit editing",viewingDrafts:"Viewing drafts",selectHint:"Click a block to change only that block",newPage:"New page",newPageCancel:"Edit this page instead",newPagePlaceholder:"Describe the new page, e.g. “a pricing page for agencies”",path:"Path",pathPlaceholder:"/pricing",creating:"Writing the page…",created:"Opening the new page…"},u={page:'<path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/>',newPage:'<path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M9 15h6"/><path d="M12 18v-6"/>',block:'<rect width="18" height="18" x="3" y="3" rx="2"/><path d="M7 8h10"/><path d="M7 12h6"/>',undo:'<path d="M9 14 4 9l5-5"/><path d="M4 9h10.5a5.5 5.5 0 0 1 0 11H11"/>',close:'<path d="M18 6 6 18"/><path d="m6 6 12 12"/>',send:'<path d="M3.714 3.048a.498.498 0 0 0-.683.627l2.843 7.627a2 2 0 0 1 0 1.396l-2.842 7.627a.498.498 0 0 0 .682.627l18-8.5a.5.5 0 0 0 0-.904z"/><path d="M6 12h16"/>'},h=`
+:host { all: initial; }
+* { box-sizing: border-box; font: inherit; color: inherit; margin: 0; }
+.root {
+	--color-white-rgb: 248 248 248; --color-beige-rgb: 238 236 233; --color-beige-off-rgb: 228 225 217;
+	--color-grey-light-rgb: 132 132 132; --color-grey-rgb: 108 108 108; --color-grey-mid-rgb: 100 100 100; --color-grey-dark-rgb: 40 40 40;
+	--color-black-off-rgb: 20 20 20; --color-black-rgb: 12 12 12;
+	--color-orange-rgb: 212 130 30; --color-red-rgb: 240 93 93;
+	--theme-foreground-rgb: var(--color-black-rgb);
+	--theme-background-alt-rgb: var(--color-white-rgb);
+	--theme-background-actions-rgb: var(--color-beige-off-rgb);
+	--theme-border-rgb: var(--color-grey-light-rgb);
+	--theme-accent-rgb: var(--color-orange-rgb);
+	--theme-foreground-muted-rgb: var(--color-grey-mid-rgb);
+	--theme-error: #b3261e;
+	--border-radius-medium: 20px; --border-radius-pill: 5em;
+	--ease-roll: cubic-bezier(0.65, 0, 0.35, 1);
+	--shadow: 0 18px 40px -16px rgb(var(--color-black-rgb) / .3), 0 2px 6px rgb(var(--color-black-rgb) / .05);
+	--font-inter: 'InterVariable', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
+		Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
+	position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%);
+	z-index: 2147483647; width: min(640px, calc(100vw - 32px)); color-scheme: light dark;
+	font: 400 14px/1.4 var(--font-inter); color: rgb(var(--theme-foreground-rgb));
+	-webkit-font-smoothing: antialiased;
+}
+@media (prefers-color-scheme: dark) {
+	.root {
+		--theme-foreground-rgb: var(--color-white-rgb);
+		--theme-background-alt-rgb: var(--color-black-off-rgb);
+		--theme-background-actions-rgb: var(--color-grey-dark-rgb);
+		--theme-border-rgb: var(--color-grey-rgb);
+		--theme-foreground-muted-rgb: var(--color-grey-light-rgb);
+		--theme-error: rgb(var(--color-red-rgb));
+		--shadow: 0 18px 40px -14px rgb(0 0 0 / .7), 0 2px 6px rgb(0 0 0 / .3);
+	}
+}
+.icon { display: inline-flex; flex: none; }
+.icon svg {
+	width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.75;
+	stroke-linecap: round; stroke-linejoin: round;
+}
+.visually-hidden {
+	position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
+}
+button { cursor: pointer; background: none; border: 0; padding: 0; }
+button:disabled { cursor: not-allowed; }
+button:focus-visible { outline: 2px solid rgb(var(--theme-accent-rgb)); outline-offset: 2px; }
+
+/* Closed: one floating pill that reads like an empty field, with the mark. */
+.bar { display: flex; justify-content: center; }
+.pill {
+	display: flex; align-items: center; gap: 12px; width: min(560px, 100%); height: 56px;
+	padding: 0 22px 0 26px; border-radius: var(--border-radius-pill);
+	background: rgb(var(--theme-background-alt-rgb));
+	border: 1px solid rgb(var(--theme-border-rgb) / .25); box-shadow: var(--shadow);
+	color: rgb(var(--theme-foreground-muted-rgb)); font-size: 16px; text-align: left;
+	transition: transform .25s var(--ease-roll), color .25s var(--ease-roll);
+}
+button.pill:hover { color: rgb(var(--theme-foreground-rgb)); transform: translateY(-2px); }
+.pill > span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.mark { color: rgb(var(--theme-accent-rgb)); font-size: 22px; line-height: 1; }
+.pill.compact { width: auto; height: 40px; padding: 0 18px; font-size: 14px; gap: 4px; }
+
+/* Open: a floating card, the text on top and a row of pill buttons below. */
+.panel {
+	display: grid; background: rgb(var(--theme-background-alt-rgb));
+	border: 1px solid rgb(var(--theme-border-rgb) / .25); border-radius: var(--border-radius-medium);
+	box-shadow: var(--shadow); overflow: hidden;
+	transition: border-color .25s var(--ease-roll), box-shadow .25s var(--ease-roll);
+	animation: rise .25s var(--ease-roll);
+}
+.panel:focus-within {
+	border-color: rgb(var(--theme-accent-rgb) / .6);
+	box-shadow: 0 0 0 3px rgb(var(--theme-accent-rgb) / .18), var(--shadow);
+}
+@keyframes rise { from { opacity: 0; transform: translateY(8px) scale(.98); } }
+@keyframes spin { to { transform: rotate(1turn); } }
+@media (prefers-reduced-motion: reduce) {
+	.panel { animation: none; }
+	.pill { transition: none; }
+}
+.status {
+	padding: 16px 22px 0; font-size: 14px; color: rgb(var(--theme-foreground-muted-rgb));
+	display: flex; align-items: center; gap: 8px;
+}
+.status.working::before {
+	content: ''; width: 12px; height: 12px; flex: none; border-radius: 50%;
+	border: 2px solid rgb(var(--theme-border-rgb) / .3); border-top-color: rgb(var(--theme-accent-rgb));
+	animation: spin .7s linear infinite;
+}
+.status.error { color: var(--theme-error); }
+textarea {
+	display: block; width: 100%; resize: none; min-height: 76px; max-height: 200px;
+	padding: 16px 22px 6px; border: 0; outline: 0; background: transparent;
+	font-size: 16px; line-height: 1.6; color: rgb(var(--theme-foreground-rgb));
+}
+textarea::placeholder { color: rgb(var(--theme-foreground-muted-rgb)); }
+/* New page: where it goes, above what it is for. */
+.path {
+	display: flex; align-items: center; gap: 10px; padding: 16px 22px 0;
+	color: rgb(var(--theme-foreground-muted-rgb));
+}
+.path input {
+	flex: 1; min-width: 0; height: 34px; padding: 0 14px; outline: 0;
+	border: 1px solid rgb(var(--theme-border-rgb) / .25); border-radius: var(--border-radius-pill);
+	background: rgb(var(--theme-background-actions-rgb) / .45); color: rgb(var(--theme-foreground-rgb));
+	transition: border-color .25s var(--ease-roll);
+}
+.path input:focus-visible { border-color: rgb(var(--theme-accent-rgb)); }
+.path input::placeholder { color: rgb(var(--theme-foreground-muted-rgb)); }
+.path input:disabled { opacity: .5; }
+textarea:disabled { opacity: .5; }
+.toolbar { display: flex; align-items: center; gap: 6px; padding: 8px 12px 12px; }
+.spacer { flex: 1; }
+.chip {
+	display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: .4em 1.1em .4em .9em;
+	border: 1px solid rgb(var(--theme-border-rgb) / .2); border-radius: var(--border-radius-pill);
+	background: rgb(var(--theme-background-actions-rgb) / .6); white-space: nowrap;
+	transition: background-color .25s var(--ease-roll);
+}
+button.chip:hover:not(:disabled) { background: rgb(var(--theme-background-actions-rgb)); }
+button.chip:disabled { opacity: .5; }
+.scope { min-width: 0; background: transparent; }
+.scope > span:not(.icon) { overflow: hidden; text-overflow: ellipsis; }
+.scope button {
+	display: inline-flex; margin-right: -6px; padding: 3px; border-radius: 50%;
+	color: rgb(var(--theme-foreground-muted-rgb));
+}
+.scope button:hover { background: rgb(var(--theme-background-actions-rgb)); color: rgb(var(--theme-foreground-rgb)); }
+.scope button svg { width: 14px; height: 14px; }
+.icon-button {
+	display: inline-flex; align-items: center; justify-content: center;
+	width: 34px; height: 34px; border-radius: 50%; color: rgb(var(--theme-foreground-muted-rgb));
+	transition: background-color .25s var(--ease-roll), color .25s var(--ease-roll), opacity .25s var(--ease-roll);
+}
+.icon-button:hover:not(:disabled) { background: rgb(var(--theme-background-actions-rgb)); color: rgb(var(--theme-foreground-rgb)); }
+/* The one call to action: white on orange. */
+.icon-button.primary { background: rgb(var(--theme-accent-rgb)); color: #fff; }
+.icon-button.primary:hover:not(:disabled) { background: rgb(var(--theme-accent-rgb)); color: #fff; opacity: .88; }
+.icon-button.primary:disabled { opacity: .35; }
+.divider { width: 1px; height: 20px; background: rgb(var(--theme-border-rgb) / .3); margin: 0 4px; }
+
+/* On the site: storing the draft, and the way out. */
+.footer {
+	display: flex; align-items: center; gap: 8px; padding: 10px 12px 10px 22px;
+	border-top: 1px solid rgb(var(--theme-border-rgb) / .2);
+	background: rgb(var(--theme-background-actions-rgb) / .45);
+}
+.footer .chip { height: 30px; padding: .4em 1.2em; background: rgb(var(--theme-background-alt-rgb)); }
+.unsaved { color: rgb(var(--theme-foreground-muted-rgb)); display: inline-flex; align-items: center; }
+.link { color: rgb(var(--theme-foreground-muted-rgb)); text-decoration: underline; text-underline-offset: 3px; padding: 0 6px; }
+.link:hover { color: rgb(var(--theme-foreground-rgb)); }
+.dot {
+	display: inline-block; width: 7px; height: 7px; border-radius: 50%;
+	background: rgb(var(--theme-accent-rgb)); margin-right: 8px;
+}
+[hidden] { display: none !important; }
+`,b=(e,t,r={},...n)=>{let o=e.createElement(t);for(let t of(Object.assign(o,r),n))o.appendChild("string"==typeof t?e.createTextNode(t):t);return o},m=(e,t)=>{let r=b(e,"span",{className:"icon"});return r.setAttribute("aria-hidden","true"),r.innerHTML=`<svg viewBox="0 0 24 24">${u[t]}</svg>`,r},f=(e,t,r={})=>{let n={...g,...r.labels},o=b(e,"div");o.setAttribute("data-obelism-content-prompt","");let a=o.attachShadow({mode:"open"}),i="site"===t.mode,s=b(e,"span",{textContent:n.open}),l=b(e,"button",{className:"pill",type:"button"},s,b(e,"span",{className:"mark",textContent:"⁜"})),d=b(e,"span",{className:"pill compact"},`${n.viewingDrafts} \xb7 `),c=b(e,"button",{className:"link",type:"button",textContent:n.signOut});d.appendChild(c);let p=b(e,"p",{className:"status"});p.setAttribute("role","status");let u=b(e,"textarea",{placeholder:n.placeholder,rows:1});u.setAttribute("aria-label",n.open);let f=m(e,"page"),v=m(e,"block"),y=b(e,"span"),x=b(e,"button",{type:"button",title:n.clearBlock});x.setAttribute("aria-label",n.clearBlock),x.appendChild(m(e,"close"));let w=b(e,"span",{className:"chip scope"},f,v,y,x),k=b(e,"button",{className:"action chip",type:"button"},m(e,"undo"),n.undo),E=b(e,"button",{className:"action chip",type:"button"},m(e,"newPage"),n.newPage),S=b(e,"button",{type:"button",title:n.newPageCancel});S.setAttribute("aria-label",n.newPageCancel),S.appendChild(m(e,"close"));let C=b(e,"span",{className:"chip scope"},m(e,"newPage"),b(e,"span",{textContent:n.newPage}),S),N=b(e,"input",{type:"text",placeholder:n.pathPlaceholder,autocomplete:"off",spellcheck:!1}),U=b(e,"label",{className:"path"},b(e,"span",{textContent:n.path}),N),P=b(e,"button",{className:"close icon-button",type:"button",title:n.close},m(e,"close"));P.setAttribute("aria-label",n.close);let L=b(e,"button",{className:"action primary icon-button",type:"submit"},b(e,"span",{className:"visually-hidden",textContent:n.send}),m(e,"send"));L.title=n.send;let $=b(e,"span",{className:"unsaved"});$.appendChild(b(e,"span",{className:"dot"})),$.appendChild(e.createTextNode(n.unsaved));let A=b(e,"button",{className:"link",type:"button",textContent:n.signOut}),O=b(e,"button",{className:"action chip",type:"button",textContent:n.save}),I=b(e,"button",{className:"action chip",type:"button",textContent:n.publish}),M=b(e,"div",{className:"footer"},$,b(e,"span",{className:"spacer"}),A,O,I),j=b(e,"form",{className:"panel"},p,U,u,b(e,"div",{className:"toolbar"},w,C,k,E,b(e,"span",{className:"spacer"}),P,b(e,"span",{className:"divider"}),L),M),R=b(e,"div",{className:"root"},b(e,"div",{className:"bar"},l,d),j);a.append(b(e,"style",{textContent:h}),R);let z=!1,D=!1,T=null,B=e=>{let r=e.features.includes("prompt"),o=e.saving||e.publishing,a=e.prompting||o;R.hidden=!r&&!i,l.hidden=z||!r,d.hidden=r||!i,j.hidden=!z||!r;let c=i&&e.features.includes("create"),g=i&&null===t.entryId,h=g&&c;c||(D=!1),h&&(D=!0),s.textContent=h?n.newPage:n.open,S.hidden=h,w.hidden=D,C.hidden=!D,E.hidden=D||!c,E.disabled=a,U.hidden=!D,N.disabled=a,u.placeholder=D?n.newPagePlaceholder:n.placeholder,y.textContent=e.selectedUid?n.scopeBlock:n.scopeEntry,x.hidden=!e.selectedUid,f.hidden=!!e.selectedUid,v.hidden=!e.selectedUid,k.hidden=D||!e.canUndo,k.disabled=a,L.disabled=a||""===u.value.trim()||D&&""===N.value.trim(),u.disabled=a,O.hidden=!e.features.includes("save")||g,O.disabled=a||!e.unsaved,O.textContent=e.saving?n.saving:n.save,I.hidden=!e.features.includes("publish")||g,I.disabled=a,I.textContent=e.publishing?n.publishing:n.publish,A.hidden=!i,M.hidden=!i,$.hidden=!e.unsaved;let b=e.prompting?D?n.creating:n.working:T?.text??(!i||D||e.selectedUid?"":n.selectHint);p.textContent=b,p.hidden=!b,p.className=`status${e.prompting?" working":""}${!a&&T?.error?" error":""}`},q=()=>B(t.getState()),H=()=>{u.style.height="auto",u.style.height=`${u.scrollHeight}px`},Y=async()=>{let e=u.value.trim();if(e&&!t.getState().prompting){T=null;try{if(D){let r=N.value.trim();if(!r)return N.focus();await t.createPage(r,e),T={text:n.created,error:!1}}else{let{summary:r}=await t.prompt(e);T={text:r,error:!1}}u.value="",H()}catch(e){T={text:e instanceof Error?e.message:String(e),error:!0}}q(),u.focus()}},_=e=>{z=e,q(),i&&t.setSelecting(z&&!D)},V=e=>{D=e,T=null,t.setSelecting(z&&!D),D&&t.select(null),q(),(D?N:u).focus()},W=async e=>{T=null;try{await t[e](),T={text:"save"===e?n.saved:n.published,error:!1}}catch(e){T={text:e instanceof Error?e.message:String(e),error:!0}}q()};l.addEventListener("click",()=>{_(!0),(D?N:u).focus()}),P.addEventListener("click",()=>_(!1)),O.addEventListener("click",()=>void W("save")),I.addEventListener("click",()=>void W("publish")),A.addEventListener("click",()=>t.signOut()),c.addEventListener("click",()=>t.signOut()),x.addEventListener("click",()=>t.select(null)),E.addEventListener("click",()=>V(!0)),S.addEventListener("click",()=>V(!1)),N.addEventListener("input",q),N.addEventListener("keydown",e=>{"Enter"!==e.key||e.isComposing?"Escape"===e.key&&_(!1):(e.preventDefault(),u.focus())}),k.addEventListener("click",()=>{T=null,t.undo()}),j.addEventListener("submit",e=>{e.preventDefault(),Y()}),u.addEventListener("input",()=>{H(),q()}),u.addEventListener("keydown",e=>{"Enter"!==e.key||e.shiftKey||e.isComposing?"Escape"===e.key&&_(!1):(e.preventDefault(),Y())});let F=t.on("change",B);return q(),e.body.appendChild(o),()=>{F(),o.remove()}},v="https://content.obelism.studio",y=(e,t)=>JSON.stringify(e)===JSON.stringify(t),x=Symbol.for("@obelism/content/bridge"),w=p({isEditing:!1,entryId:null,on:()=>{}},new URLSearchParams),k=({url:e,prompt:o=!0,pagePath:l}={})=>{let g;if("u"<typeof window)return w;let u=window;if(u[x])return u[x];if(u.ObelismBridge)g=p(u.ObelismBridge,new URLSearchParams(u.location.search));else{let p=(g=((e,r)=>{let o=new URLSearchParams(e.location.search),l=e.parent!==e&&o.has("cms_preview"),p=s(),g=[],u={...i,selecting:!0},h=e=>{u={...u,...e},p.emit("change",u)},b={isEditing:l,mode:l?"editor":null,entryId:o.get("cms_entry"),environment:o.get(n),on:p.on,getState:()=>u,...d,destroy:()=>{g.splice(0).forEach(e=>e())}};if(!l)return b;let m=e.document,f=(t,n={})=>{e.parent.postMessage({source:"obelism-content-bridge",type:t,...n},r)},v=m.createElement("style");v.textContent=a(),m.head.appendChild(v),g.push(()=>v.remove());let y=(e,t)=>{if(m.querySelectorAll("[data-cms-selected]").forEach(e=>{e.removeAttribute("data-cms-selected")}),u.selectedUid!==(e??null)&&h({selectedUid:e??null}),!e)return;let r=m.querySelector(c(e));r&&(r.setAttribute("data-cms-selected",""),t&&r.scrollIntoView({behavior:"smooth",block:"center"}))},x=e=>{let r=e.target,n=r?.closest?.(`[${t}]`);if(!n)return;e.preventDefault(),e.stopPropagation();let o=n.getAttribute(t);y(o,!1),f("select",{uid:o})};m.addEventListener("click",x,!0),g.push(()=>m.removeEventListener("click",x,!0));let w=()=>f("ready",{url:e.location.href}),k=new Map,E=0,S=e=>{let t=k.get(e);return t?(clearTimeout(t.timer),k.delete(e),0===k.size&&h({prompting:!1}),t):null};b.prompt=(e,t={})=>{let r=e.trim();if(!r)return Promise.reject(Error("Say what to change"));if(!u.features.includes("prompt"))return Promise.reject(Error("The editor does not offer prompts here"));let n=`prompt_${++E}`,o=void 0===t.uid?u.selectedUid:t.uid;return new Promise((e,t)=>{let a=setTimeout(()=>{S(n)?.reject(Error("The editor did not answer in time"))},12e4);k.set(n,{resolve:e,reject:t,timer:a}),h({prompting:!0}),f("prompt",{id:n,prompt:r,uid:o})})},b.undo=()=>f("undo"),b.select=e=>{y(e,!1),f("select",{uid:e})},g.push(()=>{for(let e of k.keys())S(e)?.reject(Error("The bridge was destroyed"))});let C=t=>{if(t.origin!==r||t.source!==e.parent)return;let n=t.data;if(n&&"obelism-content-editor"===n.source){if("connect"===n.type)w();else if("update"===n.type&&n.entry)p.emit("update",{entry:n.entry,selectedUid:n.selectedUid??null}),e.requestAnimationFrame(()=>y(n.selectedUid,!1));else if("select"===n.type)y(n.uid,!0);else if("saved"===n.type||"published"===n.type)p.emit(n.type,{}),0===p.listeners.update.size&&e.location.reload();else if("features"===n.type&&Array.isArray(n.features))h({features:n.features.filter(e=>"string"==typeof e)});else if("promptState"===n.type)h({canUndo:!0===n.canUndo});else if("promptResult"===n.type&&"string"==typeof n.id){let e=S(n.id);if(!e)return;!0===n.ok?e.resolve({summary:"string"==typeof n.summary?n.summary:""}):e.reject(Error("string"==typeof n.error?n.error:"The prompt failed"))}}};return e.addEventListener("message",C),g.push(()=>e.removeEventListener("message",C)),"loading"===m.readyState?(m.addEventListener("DOMContentLoaded",w,{once:!0}),g.push(()=>m.removeEventListener("DOMContentLoaded",w))):w(),b})(u,new URL(e||v).origin)).isEditing||u.parent!==u?null:(e=>{for(let t of e.cookie.split(";")){let[e,...r]=t.trim().split("=");if("obelism_content_editing"===e)try{let e=decodeURIComponent(r.join("="));return e.startsWith("/")&&!e.startsWith("//")?e:null}catch{break}}return null})(u.document);if(p&&(g=((e,n,{pagePath:o=e=>`/${e}`}={})=>{let l=e.document,d=s(),p=[],g=new Map,u=[],h=new Set,b=null,m=i,f=e=>{m={...m,...e},d.emit("change",m)},v=()=>f({unsaved:[...g.values()].some(({content:e,saved:t})=>!y(e,t)),canUndo:u.length>0}),x=async(t,r)=>{let o=await e.fetch(`${n}/api/${t}`,void 0===r?{credentials:"same-origin"}:{method:"POST",credentials:"same-origin",headers:{"Content-Type":"application/json","x-obelism-content":"1"},body:JSON.stringify(r)}),a=await o.json().catch(()=>({}));if(401===o.status)throw f({features:[]}),Error("You were signed out. Sign in again to edit.");if(!o.ok)throw Error("string"==typeof a.error?a.error:`Obelism Content answered ${o.status}`);return a},w=()=>l.querySelector(`[${r}]`)?.getAttribute(r)??null,k=()=>{if(!b)return;let e=b.space.locales.map(({code:e})=>e),t=l.documentElement.lang;if(e.includes(t))return t;let r=t.split("-")[0]??"";return e.includes(r)?r:b.space.defaultLocale},E=async e=>{let t=g.get(e);if(t)return t;let r=await x(`entries/${encodeURIComponent(e)}`),n={content:r.content,saved:r.content,revision:r.draftRevision};return g.set(e,n),n},S=e=>{l.querySelectorAll("[data-cms-selected]").forEach(e=>{e.removeAttribute("data-cms-selected")}),m.selectedUid!==e&&f({selectedUid:e}),e&&l.querySelector(c(e))?.setAttribute("data-cms-selected","")},C=async t=>{if(0===d.listeners.update.size)return;let r=g.get(t)?.content,{entry:n}=await x(`entries/${encodeURIComponent(t)}/preview`,{content:r,locale:k()});d.emit("update",{entry:n,selectedUid:m.selectedUid}),e.requestAnimationFrame(()=>S(m.selectedUid))},N=t=>{d.emit(t,{}),0===d.listeners.update.size&&e.location.reload()},U=async()=>{for(let[e,t]of g){if(y(t.content,t.saved))continue;let{draftRevision:r}=await x(`entries/${encodeURIComponent(e)}/save`,{content:t.content,baseRevision:t.revision});t.saved=t.content,t.revision=r,h.add(e)}u.length=0,v()},P={isEditing:!0,mode:"site",get entryId(){return w()},environment:null,on:d.on,getState:()=>m,async prompt(e,t={}){let n,o=e.trim();if(!o)throw Error("Say what to change");if(!m.features.includes("prompt"))throw Error("You may not edit content here");let a=void 0===t.uid?m.selectedUid:t.uid,i=(n=a?l.querySelector(c(a)):null,n?.closest(`[${r}]`)?.getAttribute(r)??w());if(!i)throw Error("Nothing on this page is marked as an entry: add editable(entry)");f({prompting:!0});try{let e=await E(i),t=await x(`entries/${encodeURIComponent(i)}/prompt`,{prompt:o,content:e.content,locale:k(),uid:a});return u.push({entryId:i,content:e.content}),e.content=t.content,v(),await C(i),{summary:t.summary}}finally{f({prompting:!1})}},async createPage(t,r){let n=r.trim();if(!n)throw Error("Say what the page is for");if(!t.trim())throw Error("Say where the page goes, like /pricing");if(!m.features.includes("create"))throw Error("You may not add pages here");if(m.unsaved)throw Error("Save or undo your changes before adding a page");f({prompting:!0});try{let r=await x("entries",{path:t,prompt:n,locale:k(),from:w()}),a=o(r.path);return e.location.assign(a),{summary:r.summary,entryId:r.entryId,path:r.path,url:a}}finally{f({prompting:!1})}},undo(){let e=u.pop(),t=e&&g.get(e.entryId);e&&t&&(t.content=e.content,v(),C(e.entryId).catch(e=>console.error("[@obelism/content bridge]",e)))},async save(){if(!m.features.includes("save"))throw Error("You may not edit content here");f({saving:!0});try{await U()}finally{f({saving:!1})}N("saved")},async publish(){if(!m.features.includes("publish"))throw Error("You may not publish here");f({publishing:!0});try{await U();let e=w(),t=h.size>0?[...h]:e?[e]:[];if(0===t.length)throw Error("Nothing on this page is marked as an entry: add editable(entry)");for(let e of t)await x(`entries/${encodeURIComponent(e)}/publish`,{}),h.delete(e)}finally{f({publishing:!1})}N("published")},signOut(){if(m.unsaved&&!e.confirm("Sign out and lose the changes you have not saved?"))return;g.clear(),v();let t=e.location.pathname+e.location.search;e.location.href=`${n}/logout?return_to=${encodeURIComponent(t)}`},select(e){S(e)},setSelecting(e){e?l.documentElement.setAttribute("data-cms-selecting",""):l.documentElement.removeAttribute("data-cms-selecting"),f({selecting:e})},destroy(){p.splice(0).forEach(e=>e())}},L=l.createElement("style");L.textContent=a("html[data-cms-selecting] "),l.head.appendChild(L),p.push(()=>L.remove()),p.push(()=>l.documentElement.removeAttribute("data-cms-selecting"));let $=e=>{if(!m.selecting)return;let r=e.target,n=r?.closest?.(`[${t}]`);n&&(e.preventDefault(),e.stopPropagation(),S(n.getAttribute(t)))};l.addEventListener("click",$,!0),p.push(()=>l.removeEventListener("click",$,!0));let A=e=>{m.unsaved&&(e.preventDefault(),e.returnValue="")};return e.addEventListener("beforeunload",A),p.push(()=>e.removeEventListener("beforeunload",A)),x("session").then(e=>{b=e,f({features:e.features})}).catch(e=>console.error("[@obelism/content bridge]",e)),P})(u,p,{pagePath:l})),g.isEditing&&o){let e=f(u.document,g,!0===o?{}:o),t=g.destroy;g.destroy=()=>{e(),t()}}}return u[x]=g,g};(e=window).ObelismBridge=k((e=>{let t=e?.dataset.url,r=t||v;if(!t&&e?.src){let t=new URL(e.src);"/bridge.js"===t.pathname&&(r=t.origin)}return{url:r,prompt:e?.dataset.prompt!=="false"}})(document.currentScript)),e.ObelismContent={getContentBridge:k,mountPromptBox:f}}();

package/dist/bridge.js

@@ -64,6 +64,7 @@ const onlyOnSite = ()=>Promise.reject(new Error('Save and publish in the visual
 // What every bridge without a feature does for it.
 const INERT_METHODS = {
     prompt: inertPrompt,
+    createPage: ()=>Promise.reject(new Error('New pages are made on the site itself')),
     undo: ()=>{},
     save: onlyOnSite,
     publish: onlyOnSite,
@@ -306,11 +307,19 @@ const DEFAULT_PROMPT_LABELS = {
     unsaved: 'Unsaved changes',
     signOut: 'Exit editing',
     viewingDrafts: 'Viewing drafts',
-    selectHint: 'Click a block to change only that block'
+    selectHint: 'Click a block to change only that block',
+    newPage: 'New page',
+    newPageCancel: 'Edit this page instead',
+    newPagePlaceholder: 'Describe the new page, e.g. “a pricing page for agencies”',
+    path: 'Path',
+    pathPlaceholder: '/pricing',
+    creating: 'Writing the page…',
+    created: 'Opening the new page…'
 };
 // Icons (Lucide), drawn in the text colour.
 const ICONS = {
     page: '<path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/>',
+    newPage: '<path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M9 15h6"/><path d="M12 18v-6"/>',
     block: '<rect width="18" height="18" x="3" y="3" rx="2"/><path d="M7 8h10"/><path d="M7 12h6"/>',
     undo: '<path d="M9 14 4 9l5-5"/><path d="M4 9h10.5a5.5 5.5 0 0 1 0 11H11"/>',
     close: '<path d="M18 6 6 18"/><path d="m6 6 12 12"/>',
@@ -415,6 +424,20 @@ textarea {
 	font-size: 16px; line-height: 1.6; color: rgb(var(--theme-foreground-rgb));
 }
 textarea::placeholder { color: rgb(var(--theme-foreground-muted-rgb)); }
+/* New page: where it goes, above what it is for. */
+.path {
+	display: flex; align-items: center; gap: 10px; padding: 16px 22px 0;
+	color: rgb(var(--theme-foreground-muted-rgb));
+}
+.path input {
+	flex: 1; min-width: 0; height: 34px; padding: 0 14px; outline: 0;
+	border: 1px solid rgb(var(--theme-border-rgb) / .25); border-radius: var(--border-radius-pill);
+	background: rgb(var(--theme-background-actions-rgb) / .45); color: rgb(var(--theme-foreground-rgb));
+	transition: border-color .25s var(--ease-roll);
+}
+.path input:focus-visible { border-color: rgb(var(--theme-accent-rgb)); }
+.path input::placeholder { color: rgb(var(--theme-foreground-muted-rgb)); }
+.path input:disabled { opacity: .5; }
 textarea:disabled { opacity: .5; }
 .toolbar { display: flex; align-items: center; gap: 6px; padding: 8px 12px 12px; }
 .spacer { flex: 1; }
@@ -492,12 +515,13 @@ const mountPromptBox = (doc, bridge, options = {})=>{
         mode: 'open'
     });
     const site = bridge.mode === 'site';
+    const pillText = element(doc, 'span', {
+        textContent: labels.open
+    });
     const pill = element(doc, 'button', {
         className: 'pill',
         type: 'button'
-    }, element(doc, 'span', {
-        textContent: labels.open
-    }), // The Obelism mark.
+    }, pillText, // The Obelism mark.
     element(doc, 'span', {
         className: 'mark',
         textContent: '⁜'
@@ -540,6 +564,34 @@ const mountPromptBox = (doc, bridge, options = {})=>{
         className: 'action chip',
         type: 'button'
     }, icon(doc, 'undo'), labels.undo);
+    // New page (on the site, for people who may add pages): the scope becomes
+    // the new page, with a way back, and a path field shows above the prompt.
+    const newPage = element(doc, 'button', {
+        className: 'action chip',
+        type: 'button'
+    }, icon(doc, 'newPage'), labels.newPage);
+    const cancelNew = element(doc, 'button', {
+        type: 'button',
+        title: labels.newPageCancel
+    });
+    cancelNew.setAttribute('aria-label', labels.newPageCancel);
+    cancelNew.appendChild(icon(doc, 'close'));
+    const newScope = element(doc, 'span', {
+        className: 'chip scope'
+    }, icon(doc, 'newPage'), element(doc, 'span', {
+        textContent: labels.newPage
+    }), cancelNew);
+    const pathInput = element(doc, 'input', {
+        type: 'text',
+        placeholder: labels.pathPlaceholder,
+        autocomplete: 'off',
+        spellcheck: false
+    });
+    const pathRow = element(doc, 'label', {
+        className: 'path'
+    }, element(doc, 'span', {
+        textContent: labels.path
+    }), pathInput);
     const close = element(doc, 'button', {
         className: 'close icon-button',
         type: 'button',
@@ -583,9 +635,9 @@ const mountPromptBox = (doc, bridge, options = {})=>{
     }), signOut, save, publish);
     const panel = element(doc, 'form', {
         className: 'panel'
-    }, status, input, element(doc, 'div', {
+    }, status, pathRow, input, element(doc, 'div', {
         className: 'toolbar'
-    }, scope, undo, element(doc, 'span', {
+    }, scope, newScope, undo, newPage, element(doc, 'span', {
         className: 'spacer'
     }), close, element(doc, 'span', {
         className: 'divider'
@@ -599,6 +651,7 @@ const mountPromptBox = (doc, bridge, options = {})=>{
         textContent: CSS
     }), root);
     let open = false;
+    let creating = false;
     let message = null;
     const render = (state)=>{
         const available = state.features.includes('prompt');
@@ -608,24 +661,40 @@ const mountPromptBox = (doc, bridge, options = {})=>{
         pill.hidden = open || !available;
         viewing.hidden = available || !site;
         panel.hidden = !open || !available;
+        const canCreate = site && state.features.includes('create');
+        // A page of the site that isn't an entry (no `editable(entry)`, like a
+        // hand-written /about) has nothing to edit: only New page.
+        const pageless = site && bridge.entryId === null;
+        const onlyNew = pageless && canCreate;
+        if (!canCreate) creating = false;
+        if (onlyNew) creating = true;
+        pillText.textContent = onlyNew ? labels.newPage : labels.open;
+        cancelNew.hidden = onlyNew;
+        scope.hidden = creating;
+        newScope.hidden = !creating;
+        newPage.hidden = creating || !canCreate;
+        newPage.disabled = busy;
+        pathRow.hidden = !creating;
+        pathInput.disabled = busy;
+        input.placeholder = creating ? labels.newPagePlaceholder : labels.placeholder;
         scopeText.textContent = state.selectedUid ? labels.scopeBlock : labels.scopeEntry;
         clearBlock.hidden = !state.selectedUid;
         pageIcon.hidden = !!state.selectedUid;
         blockIcon.hidden = !state.selectedUid;
-        undo.hidden = !state.canUndo;
+        undo.hidden = creating || !state.canUndo;
         undo.disabled = busy;
-        send.disabled = busy || input.value.trim() === '';
+        send.disabled = busy || input.value.trim() === '' || creating && pathInput.value.trim() === '';
         input.disabled = busy;
-        save.hidden = !state.features.includes('save');
+        save.hidden = !state.features.includes('save') || pageless;
         save.disabled = busy || !state.unsaved;
         save.textContent = state.saving ? labels.saving : labels.save;
-        publish.hidden = !state.features.includes('publish');
+        publish.hidden = !state.features.includes('publish') || pageless;
         publish.disabled = busy;
         publish.textContent = state.publishing ? labels.publishing : labels.publish;
         signOut.hidden = !site;
         footer.hidden = !site;
         unsaved.hidden = !state.unsaved;
-        const text = state.prompting ? labels.working : message?.text ?? (site && !state.selectedUid ? labels.selectHint : '');
+        const text = state.prompting ? creating ? labels.creating : labels.working : message?.text ?? (site && !creating && !state.selectedUid ? labels.selectHint : '');
         status.textContent = text;
         status.hidden = !text;
         status.className = `status${state.prompting ? ' working' : ''}${!busy && message?.error ? ' error' : ''}`;
@@ -640,11 +709,22 @@ const mountPromptBox = (doc, bridge, options = {})=>{
         if (!prompt || bridge.getState().prompting) return;
         message = null;
         try {
-            const { summary } = await bridge.prompt(prompt);
-            message = {
-                text: summary,
-                error: false
-            };
+            if (creating) {
+                const path = pathInput.value.trim();
+                if (!path) return pathInput.focus();
+                // The bridge opens the new page; this shows until it does.
+                await bridge.createPage(path, prompt);
+                message = {
+                    text: labels.created,
+                    error: false
+                };
+            } else {
+                const { summary } = await bridge.prompt(prompt);
+                message = {
+                    text: summary,
+                    error: false
+                };
+            }
             input.value = '';
             grow();
         } catch (error) {
@@ -658,8 +738,16 @@ const mountPromptBox = (doc, bridge, options = {})=>{
     };
     const setOpen = (next)=>{
         open = next;
-        if (site) bridge.setSelecting(open);
         refresh();
+        if (site) bridge.setSelecting(open && !creating);
+    };
+    const setCreating = (next)=>{
+        creating = next;
+        message = null;
+        bridge.setSelecting(open && !creating);
+        if (creating) bridge.select(null);
+        refresh();
+        (creating ? pathInput : input).focus();
     };
     const store = async (action)=>{
         message = null;
@@ -679,7 +767,7 @@ const mountPromptBox = (doc, bridge, options = {})=>{
     };
     pill.addEventListener('click', ()=>{
         setOpen(true);
-        input.focus();
+        (creating ? pathInput : input).focus();
     });
     close.addEventListener('click', ()=>setOpen(false));
     save.addEventListener('click', ()=>void store('save'));
@@ -687,6 +775,17 @@ const mountPromptBox = (doc, bridge, options = {})=>{
     signOut.addEventListener('click', ()=>bridge.signOut());
     pillSignOut.addEventListener('click', ()=>bridge.signOut());
     clearBlock.addEventListener('click', ()=>bridge.select(null));
+    newPage.addEventListener('click', ()=>setCreating(true));
+    cancelNew.addEventListener('click', ()=>setCreating(false));
+    pathInput.addEventListener('input', refresh);
+    pathInput.addEventListener('keydown', (event)=>{
+        if (event.key === 'Enter' && !event.isComposing) {
+            event.preventDefault();
+            input.focus();
+        } else if (event.key === 'Escape') {
+            setOpen(false);
+        }
+    });
     undo.addEventListener('click', ()=>{
         message = null;
         bridge.undo();
@@ -740,7 +839,7 @@ const readSiteEditing = (doc)=>{
     return null;
 };
 const same = (a, b)=>JSON.stringify(a) === JSON.stringify(b);
-const createSiteBridge = (win, basePath)=>{
+const createSiteBridge = (win, basePath, { pagePath = (path)=>`/${path}` } = {})=>{
     const doc = win.document;
     const emitter = createEmitter();
     const cleanup = [];
@@ -903,6 +1002,39 @@ const createSiteBridge = (win, basePath)=>{
                 });
             }
         },
+        async createPage (path, prompt) {
+            const text = prompt.trim();
+            if (!text) throw new Error('Say what the page is for');
+            if (!path.trim()) throw new Error('Say where the page goes, like /pricing');
+            if (!has('create')) throw new Error('You may not add pages here');
+            // Opening the new page would lose them.
+            if (state.unsaved) {
+                throw new Error('Save or undo your changes before adding a page');
+            }
+            setState({
+                prompting: true
+            });
+            try {
+                const created = await api('entries', {
+                    path,
+                    prompt: text,
+                    locale: locale(),
+                    from: pageEntryId()
+                });
+                const url = pagePath(created.path);
+                win.location.assign(url);
+                return {
+                    summary: created.summary,
+                    entryId: created.entryId,
+                    path: created.path,
+                    url
+                };
+            } finally{
+                setState({
+                    prompting: false
+                });
+            }
+        },
         undo () {
             const last = history.pop();
             const entry = last && working.get(last.entryId);
@@ -1029,7 +1161,7 @@ const peekContentBridge = ()=>typeof window === 'undefined' ? null : window[KEY]
 //   if (bridge.isEditing) bridge.on('update', ({ entry }) => render(entry))
 //
 // The first call's options win: there is one bridge per page.
-const getContentBridge = ({ url, prompt = true } = {})=>{
+const getContentBridge = ({ url, prompt = true, pagePath } = {})=>{
     if (typeof window === 'undefined') return SERVER_BRIDGE;
     const win = window;
     if (win[KEY]) return win[KEY];
@@ -1041,7 +1173,9 @@ const getContentBridge = ({ url, prompt = true } = {})=>{
         // Not in the visual editor, but signed in to edit through the site's
         // own `/cms/login` (@obelism/content/site).
         const sitePath = bridge.isEditing || win.parent !== win ? null : readSiteEditing(win.document);
-        if (sitePath) bridge = createSiteBridge(win, sitePath);
+        if (sitePath) bridge = createSiteBridge(win, sitePath, {
+            pagePath
+        });
         if (bridge.isEditing && prompt) {
             const unmount = mountPromptBox(win.document, bridge, prompt === true ? {} : prompt);
             const destroy = bridge.destroy;
@@ -1058,4 +1192,5 @@ const getContentBridge = ({ url, prompt = true } = {})=>{
 exports.DEFAULT_PROMPT_LABELS = DEFAULT_PROMPT_LABELS;
 exports.INITIAL_STATE = INITIAL_STATE;
 exports.getContentBridge = getContentBridge;
+exports.mountPromptBox = mountPromptBox;
 exports.peekContentBridge = peekContentBridge;