@flyo/nitro-vue3 2.1.0 → 2.2.0

package/README.md

@@ -182,7 +182,49 @@ Every composable returns the same reactive shape:
 
 ## Live-edit support
 
-When your site is embedded in the Flyo preview iframe, `FlyoPage` automatically listens for `pageRefresh` messages and emits `update:page` so your component can reactively update without a full reload. Enable this by passing `liveEdit: true` to the plugin options.
+When your site is embedded in the Flyo preview iframe, you can enable a full live-editing experience by passing `liveEdit: true` to the plugin options and using the `useFlyoLiveEdit` composable together with the `editable` helper.
+
+### `useFlyoLiveEdit()`
+
+Call this composable **once** in your root layout or `App.vue`. It activates the bridge features from `@flyo/nitro-js-bridge` when `liveEdit` is enabled:
+
+- **`reload()`** — reloads the page when Flyo sends a `pageRefresh` message.
+- **`scrollTo()`** — scrolls to a specific block when Flyo sends a `scrollTo` message.
+- **`highlightAndClick()`** — adds hover highlight and click-to-edit on every element with a `data-flyo-uid` attribute. A `MutationObserver` automatically wires up elements that are added after the initial render.
+
+The composable is a no-op when `liveEdit` is `false`, so it is safe to include unconditionally.
+
+```vue
+<!-- App.vue or your root layout component -->
+<script setup>
+import { useFlyoLiveEdit } from '@flyo/nitro-vue3'
+
+useFlyoLiveEdit()
+</script>
+
+<template>
+  <router-view />
+</template>
+```
+
+### `editable(block)`
+
+Returns a `{ 'data-flyo-uid': block.uid }` attribute object for a given block, or an empty object if the block has no uid. Use `v-bind` to spread it onto the root element of your block component so `useFlyoLiveEdit` can discover it.
+
+```vue
+<script setup>
+import { editable } from '@flyo/nitro-vue3'
+
+defineProps({ block: Object })
+</script>
+
+<template>
+  <section v-bind="editable(block)" class="bg-gray-200 p-8 rounded-lg text-center">
+    <h2 class="text-3xl font-bold mb-4">{{ block?.content?.title }}</h2>
+    <p class="text-lg mb-6">{{ block?.content?.teaser }}</p>
+  </section>
+</template>
+```
 
 ---
 

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("@flyo/nitro-typescript"),e=require("vue");let m=null;const F=({apiToken:n,apiBasePath:t,defaultHeaders:o})=>{m=new u.Configuration({apiKey:n,...t&&{basePath:t},headers:o||{}})},f=()=>m,N={name:"FlyoBlock"},y=Object.assign(N,{props:{item:{type:Object,default:()=>{}}},setup(n){return(t,o)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(n.item.component),{config:n.item.config,content:n.item.content,items:n.item.items,slots:n.item.slots},null,8,["config","content","items","slots"]))}}),J={name:"FlyoPage"},d=Object.assign(J,{props:{page:{type:[Object,Boolean],default:!1}},emits:["update:page"],setup(n,{emit:t}){const o=n,s=t,{liveEdit:a,liveEditOrigin:i}=e.inject("flyo"),p=r=>{const c=r.parent||r.opener;return r.self===c?!1:r.parent||r.opener},O=r=>{a&&process.client&&p(window)&&p(window).postMessage({action:"openEdit",data:JSON.parse(JSON.stringify({page:o.page,item:r}))},i)};return process.client&&p(window)&&window.addEventListener("message",r=>{if(r.origin!==i){console.log(`Message from ${r.origin} blocked. Expected ${i}.`);return}const c=r.data;c.action==="pageRefresh"&&s("update:page",c.data)}),(r,c)=>{const S=e.resolveComponent("FlyoBlock");return e.openBlock(),e.createElementBlock("div",null,[n.page?e.renderSlot(r.$slots,"default",e.normalizeProps(e.mergeProps({key:0},n.page)),()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.page.json,g=>(e.openBlock(),e.createBlock(S,{key:g.uid,item:g,onClick:()=>O(g)},null,8,["item","onClick"]))),128))]):e.createCommentVNode("",!0)])}}}),l=e.reactive({isLoading:null,response:null,error:null}),k=()=>{const n=async()=>{try{l.error=null,l.isLoading=!0,l.response=JSON.parse(JSON.stringify(await new u.ConfigApi(f()).config())),l.isLoading=!1}catch(t){l.isLoading=!1,l.response=null,l.error=JSON.parse(JSON.stringify(t))}return{response:l.response,error:l.error}};return{...e.toRefs(l),fetch:n}},h=n=>{const t=e.ref(!1),o=e.ref(null),s=e.ref(null);return{isLoading:t,response:o,error:s,fetch:async()=>{try{s.value=null,t.value=!0,o.value=JSON.parse(JSON.stringify(await new u.EntitiesApi(f()).entityByUniqueid({uniqueid:n}))),t.value=!1}catch(i){t.value=!1,o.value=null,s.value=JSON.parse(JSON.stringify(i))}return{response:e.unref(o),error:e.unref(s)}}}},E=n=>{const t=e.ref(!1),o=e.ref(null),s=e.ref(null);return{isLoading:t,response:o,error:s,fetch:async()=>{try{s.value=null,t.value=!0,o.value=JSON.parse(JSON.stringify(await new u.PagesApi(f()).page({slug:n}))),t.value=!1}catch(i){t.value=!1,o.value=null,s.value=JSON.parse(JSON.stringify(i))}return{response:e.unref(o),error:e.unref(s)}}}},B=()=>{const n=e.ref(!1),t=e.ref(null),o=e.ref(null);return{isLoading:n,response:t,error:o,fetch:async()=>{try{o.value=null,n.value=!0,t.value=JSON.parse(JSON.stringify(await new u.SitemapApi(f()).sitemap())),n.value=!1}catch(a){n.value=!1,t.value=null,o.value=JSON.parse(JSON.stringify(a))}return{response:e.unref(t),error:e.unref(o)}}}},v={install(n,t){F(t),n.component(y.name,y),n.component(d.name,d),n.provide("flyo",{liveEdit:t.liveEdit,liveEditOrigin:t.liveEditOrigin})}};exports.Block=y;exports.FlyoVue=v;exports.Page=d;exports.default=v;exports.getFlyoConfig=f;exports.useFlyoConfig=k;exports.useFlyoEntity=h;exports.useFlyoPage=E;exports.useFlyoSitemap=B;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const O=require("@flyo/nitro-typescript"),s=require("vue");let te=null;const de=({apiToken:t,apiBasePath:n,defaultHeaders:i})=>{te=new O.Configuration({apiKey:t,...n&&{basePath:n},headers:i||{}})},N=()=>te,ce={name:"FlyoBlock"},H=Object.assign(ce,{props:{item:{type:Object,default:()=>{}}},setup(t){return(n,i)=>(s.openBlock(),s.createBlock(s.resolveDynamicComponent(t.item.component),{config:t.item.config,content:t.item.content,items:t.item.items,slots:t.item.slots},null,8,["config","content","items","slots"]))}}),fe={name:"FlyoPage"},I=Object.assign(fe,{props:{page:{type:[Object,Boolean],default:!1}},emits:["update:page"],setup(t,{emit:n}){const i=t,r=n,{liveEdit:e,liveEditOrigin:o}=s.inject("flyo"),a=u=>{const d=u.parent||u.opener;return u.self===d?!1:u.parent||u.opener},f=u=>{e&&process.client&&a(window)&&a(window).postMessage({action:"openEdit",data:JSON.parse(JSON.stringify({page:i.page,item:u}))},o)};return process.client&&a(window)&&window.addEventListener("message",u=>{if(u.origin!==o){console.log(`Message from ${u.origin} blocked. Expected ${o}.`);return}const d=u.data;d.action==="pageRefresh"&&r("update:page",d.data)}),(u,d)=>{const y=s.resolveComponent("FlyoBlock");return s.openBlock(),s.createElementBlock("div",null,[t.page?s.renderSlot(u.$slots,"default",s.normalizeProps(s.mergeProps({key:0},t.page)),()=>[(s.openBlock(!0),s.createElementBlock(s.Fragment,null,s.renderList(t.page.json,v=>(s.openBlock(),s.createBlock(y,{key:v.uid,item:v,onClick:()=>f(v)},null,8,["item","onClick"]))),128))]):s.createCommentVNode("",!0)])}}}),c=s.reactive({isLoading:null,response:null,error:null}),ye=()=>{const t=async()=>{try{c.error=null,c.isLoading=!0,c.response=JSON.parse(JSON.stringify(await new O.ConfigApi(N()).config())),c.isLoading=!1}catch(n){c.isLoading=!1,c.response=null,c.error=JSON.parse(JSON.stringify(n))}return{response:c.response,error:c.error}};return{...s.toRefs(c),fetch:t}},pe=t=>{const n=s.ref(!1),i=s.ref(null),r=s.ref(null);return{isLoading:n,response:i,error:r,fetch:async()=>{try{r.value=null,n.value=!0,i.value=JSON.parse(JSON.stringify(await new O.EntitiesApi(N()).entityByUniqueid({uniqueid:t}))),n.value=!1}catch(o){n.value=!1,i.value=null,r.value=JSON.parse(JSON.stringify(o))}return{response:s.unref(i),error:s.unref(r)}}}};function B(){return typeof window>"u"?!1:window!==window.top}function me(){return typeof window>"u"?!1:B()?window.parent:window}function ve(t){var n=me();n&&n.postMessage({action:"openEdit",data:JSON.parse(JSON.stringify({item:{uid:t}}))},"https://flyo.cloud")}function ge(){typeof window>"u"||B()&&window.addEventListener("message",t=>{var n;((n=t.data)==null?void 0:n.action)==="pageRefresh"&&window.location.reload()})}function he(){typeof window>"u"||B()&&window.addEventListener("message",t=>{var n,i,r,e;if(((n=t.data)==null?void 0:n.action)==="scrollTo"){const o=(e=(r=(i=t.data)==null?void 0:i.data)==null?void 0:r.item)==null?void 0:e.uid;if(!o)return;const a=document.querySelector(`[data-flyo-uid="${CSS.escape(o)}"]`);a&&a.scrollIntoView({behavior:"smooth",block:"start"})}})}function we(t,n){const i=()=>ve(t);if(!B()||!n)return i;const r=n,e=document.createElement("button");e.type="button",e.setAttribute("aria-label","Edit block"),e.style.position="fixed",e.style.top="0px",e.style.left="0px",e.style.zIndex="9999",e.style.width="44px",e.style.height="44px",e.style.display="none",e.style.alignItems="center",e.style.justifyContent="center",e.style.border="0px solid #000",e.style.borderRadius="9999px",e.style.boxSizing="border-box",e.style.cursor="pointer",e.style.background="#FFD466",e.innerHTML='<svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25z" fill="#111"/><path d="M20.71 7.04a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" fill="#111"/></svg>';const o=document.createElement("div");o.style.position="fixed",o.style.top="0px",o.style.left="0px",o.style.zIndex="9998",o.style.display="none",o.style.pointerEvents="none",o.style.background="transparent",o.style.border="none",e.addEventListener("click",i),document.body.appendChild(o),document.body.appendChild(e);const a=44,f=6,u=6,d=6,y=10,v=180,F=()=>window.innerWidth||document.documentElement.clientWidth,C=()=>window.innerHeight||document.documentElement.clientHeight,oe=l=>!(l.bottom<0||l.right<0||l.top>C()||l.left>F()||l.width===0&&l.height===0),$=(l,m)=>l>=d&&m>=d&&l+a<=F()-d&&m+a<=C()-d,W=(l,m)=>({x:Math.max(d,Math.min(l,F()-a-d)),y:Math.max(d,Math.min(m,C()-a-d))});function A(){const l=r.getBoundingClientRect(),m=l.width<a||l.height<a,L=Math.round(l.left),x=Math.round(l.top)-a-u,T=Math.round(l.left)+f,P=Math.round(l.top)+f;let M,S;if(m&&$(L,x))M=L,S=x;else if($(T,P))M=T,S=P;else if($(L,x))M=L,S=x;else{const _=W(L,x),q=W(T,P),ae=Math.abs(_.x-l.left)+Math.abs(_.y-l.top),ue=Math.abs(q.x-l.left)+Math.abs(q.y-l.top);({x:M,y:S}=ae<=ue?_:q)}e.style.left=`${M}px`,e.style.top=`${S}px`;const Z=Math.max(d,Math.round(l.left)-y),ee=Math.max(d,Math.round(l.top)-y),le=Math.min(F()-d,Math.round(l.right)+y),re=Math.min(C()-d,Math.round(l.bottom)+y);o.style.left=`${Z}px`,o.style.top=`${ee}px`,o.style.width=`${Math.max(0,le-Z)}px`,o.style.height=`${Math.max(0,re-ee)}px`}let g=!1,h=!1,w=!1,J=!1,E=null;const k=()=>{E!==null&&(clearTimeout(E),E=null)},j=()=>{k();try{const l=r.getBoundingClientRect();if(!oe(l)){b(!0);return}A(),e.style.display="flex",o.style.display="block",se()}catch{b(!0)}},b=(l=!1)=>{if(l){k(),e.style.display="none",o.style.display="none",R();return}k(),E=window.setTimeout(()=>{!g&&!h&&!w&&(e.style.display="none",o.style.display="none",R()),E=null},v)},z=()=>{e.style.display!=="none"&&A()},D=z;let p=null;const V=window.ResizeObserver,se=()=>{J||(J=!0,window.addEventListener("scroll",z,!0),window.addEventListener("resize",D),typeof V=="function"&&(p=new V(()=>{e.style.display!=="none"&&A()}),p==null||p.observe(r)))},R=()=>{if(J){J=!1,window.removeEventListener("scroll",z,!0),window.removeEventListener("resize",D);try{p==null||p.disconnect()}catch{}p=null}},U=()=>{g=!0,j()},K=()=>{g=!1,!h&&!w&&b()},G=()=>{h=!0,j()},Q=()=>{h=!1,!g&&!w&&b()},X=()=>{w=!0,j()},Y=()=>{w=!1,!g&&!h&&b()};r.addEventListener("mouseenter",U),r.addEventListener("mouseleave",K),e.addEventListener("mouseenter",G),e.addEventListener("mouseleave",Q),o.addEventListener("mouseenter",X),o.addEventListener("mouseleave",Y),e.addEventListener("click",i);function ie(){k(),R(),e.removeEventListener("click",i),r.removeEventListener("mouseenter",U),r.removeEventListener("mouseleave",K),e.removeEventListener("mouseenter",G),e.removeEventListener("mouseleave",Q),o.removeEventListener("mouseenter",X),o.removeEventListener("mouseleave",Y),e.parentElement===document.body&&document.body.removeChild(e),o.parentElement===document.body&&document.body.removeChild(o)}return ie}const Ee=t=>typeof(t==null?void 0:t.uid)=="string"&&t.uid.trim()!==""?{"data-flyo-uid":t.uid}:{},be=()=>{const{liveEdit:t}=s.inject("flyo");if(!t)return;let n=null;const i=[],r=()=>{i.forEach(e=>e()),i.length=0,document.querySelectorAll("[data-flyo-uid]").forEach(e=>{const o=e.getAttribute("data-flyo-uid");if(o&&e instanceof HTMLElement){const a=we(o,e);typeof a=="function"&&i.push(a)}})};s.onMounted(()=>{ge(),he(),r(),n=new MutationObserver(e=>{e.some(a=>Array.from(a.addedNodes).some(f=>{if(f.nodeType===Node.ELEMENT_NODE){const u=f;return u.hasAttribute("data-flyo-uid")||u.querySelector("[data-flyo-uid]")}return!1}))&&r()}),n.observe(document.body,{childList:!0,subtree:!0})}),s.onUnmounted(()=>{n&&n.disconnect(),i.forEach(e=>e()),i.length=0})},Le=t=>{const n=s.ref(!1),i=s.ref(null),r=s.ref(null);return{isLoading:n,response:i,error:r,fetch:async()=>{try{r.value=null,n.value=!0,i.value=JSON.parse(JSON.stringify(await new O.PagesApi(N()).page({slug:t}))),n.value=!1}catch(o){n.value=!1,i.value=null,r.value=JSON.parse(JSON.stringify(o))}return{response:s.unref(i),error:s.unref(r)}}}},xe=()=>{const t=s.ref(!1),n=s.ref(null),i=s.ref(null);return{isLoading:t,response:n,error:i,fetch:async()=>{try{i.value=null,t.value=!0,n.value=JSON.parse(JSON.stringify(await new O.SitemapApi(N()).sitemap())),t.value=!1}catch(e){t.value=!1,n.value=null,i.value=JSON.parse(JSON.stringify(e))}return{response:s.unref(n),error:s.unref(i)}}}},ne={install(t,n){de(n),t.component(H.name,H),t.component(I.name,I),t.provide("flyo",{liveEdit:n.liveEdit,liveEditOrigin:n.liveEditOrigin})}};exports.Block=H;exports.FlyoVue=ne;exports.Page=I;exports.default=ne;exports.editable=Ee;exports.getFlyoConfig=N;exports.useFlyoConfig=ye;exports.useFlyoEntity=pe;exports.useFlyoLiveEdit=be;exports.useFlyoPage=Le;exports.useFlyoSitemap=xe;

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 import type { App, Component, Ref } from 'vue'
 import type {
+  Block as NitroBlock,
   Configuration,
   ConfigApi,
   EntitiesApi,
@@ -66,7 +67,10 @@ export { FlyoVue, Block, Page }
 
 export function getFlyoConfig(): Configuration | null
 
+export function editable(block: NitroBlock): { 'data-flyo-uid'?: string }
+
 export function useFlyoConfig(): UseFlyoConfigReturn
+export function useFlyoLiveEdit(): void
 export function useFlyoPage(slug: string): UseFlyoPageReturn
 export function useFlyoEntity(uniqueid: string): UseFlyoEntityReturn
 export function useFlyoSitemap(): UseFlyoSitemapReturn

package/dist/index.mjs

@@ -1,15 +1,15 @@
-import { Configuration as h, ConfigApi as E, EntitiesApi as F, PagesApi as k, SitemapApi as w } from "@flyo/nitro-typescript";
-import { openBlock as f, createBlock as O, resolveDynamicComponent as C, inject as L, resolveComponent as B, createElementBlock as y, renderSlot as b, normalizeProps as j, mergeProps as P, Fragment as A, renderList as $, createCommentVNode as _, reactive as x, toRefs as M, ref as a, unref as i } from "vue";
-let S = null;
-const R = ({ apiToken: e, apiBasePath: n, defaultHeaders: t }) => {
-  S = new h({
-    apiKey: e,
+import { Configuration as pe, ConfigApi as ye, EntitiesApi as me, PagesApi as ve, SitemapApi as ge } from "@flyo/nitro-typescript";
+import { openBlock as k, createBlock as oe, resolveDynamicComponent as he, inject as se, resolveComponent as we, createElementBlock as ee, renderSlot as Ee, normalizeProps as be, mergeProps as Le, Fragment as xe, renderList as Me, createCommentVNode as Oe, reactive as Se, toRefs as Ne, ref as c, unref as v, onMounted as Ce, onUnmounted as Je } from "vue";
+let ie = null;
+const Fe = ({ apiToken: t, apiBasePath: n, defaultHeaders: s }) => {
+  ie = new pe({
+    apiKey: t,
     ...n && { basePath: n },
-    headers: t || {}
+    headers: s || {}
   });
-}, p = () => S, W = {
+}, $ = () => ie, ke = {
   name: "FlyoBlock"
-}, d = /* @__PURE__ */ Object.assign(W, {
+}, te = /* @__PURE__ */ Object.assign(ke, {
   props: {
     item: {
       type: Object,
@@ -17,17 +17,17 @@ const R = ({ apiToken: e, apiBasePath: n, defaultHeaders: t }) => {
       }
     }
   },
-  setup(e) {
-    return (n, t) => (f(), O(C(e.item.component), {
-      config: e.item.config,
-      content: e.item.content,
-      items: e.item.items,
-      slots: e.item.slots
+  setup(t) {
+    return (n, s) => (k(), oe(he(t.item.component), {
+      config: t.item.config,
+      content: t.item.content,
+      items: t.item.items,
+      slots: t.item.slots
     }, null, 8, ["config", "content", "items", "slots"]));
   }
-}), q = {
+}), $e = {
   name: "FlyoPage"
-}, v = /* @__PURE__ */ Object.assign(q, {
+}, ne = /* @__PURE__ */ Object.assign($e, {
   props: {
     page: {
       type: [Object, Boolean],
@@ -35,129 +35,283 @@ const R = ({ apiToken: e, apiBasePath: n, defaultHeaders: t }) => {
     }
   },
   emits: ["update:page"],
-  setup(e, { emit: n }) {
-    const t = e, o = n, { liveEdit: c, liveEditOrigin: l } = L("flyo"), g = (s) => {
-      const u = s.parent || s.opener;
-      return s.self === u ? !1 : s.parent || s.opener;
-    }, N = (s) => {
-      c && process.client && g(window) && g(window).postMessage({
+  setup(t, { emit: n }) {
+    const s = t, l = n, { liveEdit: e, liveEditOrigin: o } = se("flyo"), r = (a) => {
+      const u = a.parent || a.opener;
+      return a.self === u ? !1 : a.parent || a.opener;
+    }, f = (a) => {
+      e && process.client && r(window) && r(window).postMessage({
         action: "openEdit",
         data: JSON.parse(JSON.stringify({
-          page: t.page,
-          item: s
+          page: s.page,
+          item: a
         }))
-      }, l);
+      }, o);
     };
-    return process.client && g(window) && window.addEventListener("message", (s) => {
-      if (s.origin !== l) {
-        console.log(`Message from ${s.origin} blocked. Expected ${l}.`);
+    return process.client && r(window) && window.addEventListener("message", (a) => {
+      if (a.origin !== o) {
+        console.log(`Message from ${a.origin} blocked. Expected ${o}.`);
         return;
       }
-      const u = s.data;
-      u.action === "pageRefresh" && o("update:page", u.data);
-    }), (s, u) => {
-      const J = B("FlyoBlock");
-      return f(), y("div", null, [
-        e.page ? b(s.$slots, "default", j(P({ key: 0 }, e.page)), () => [
-          (f(!0), y(A, null, $(e.page.json, (m) => (f(), O(J, {
-            key: m.uid,
-            item: m,
-            onClick: () => N(m)
+      const u = a.data;
+      u.action === "pageRefresh" && l("update:page", u.data);
+    }), (a, u) => {
+      const p = we("FlyoBlock");
+      return k(), ee("div", null, [
+        t.page ? Ee(a.$slots, "default", be(Le({ key: 0 }, t.page)), () => [
+          (k(!0), ee(xe, null, Me(t.page.json, (g) => (k(), oe(p, {
+            key: g.uid,
+            item: g,
+            onClick: () => f(g)
           }, null, 8, ["item", "onClick"]))), 128))
-        ]) : _("", !0)
+        ]) : Oe("", !0)
       ]);
     };
   }
-}), r = x({
+}), d = Se({
   isLoading: null,
   response: null,
   error: null
-}), K = () => {
-  const e = async () => {
+}), _e = () => {
+  const t = async () => {
     try {
-      r.error = null, r.isLoading = !0, r.response = JSON.parse(JSON.stringify(await new E(p()).config())), r.isLoading = !1;
+      d.error = null, d.isLoading = !0, d.response = JSON.parse(JSON.stringify(await new ye($()).config())), d.isLoading = !1;
     } catch (n) {
-      r.isLoading = !1, r.response = null, r.error = JSON.parse(JSON.stringify(n));
+      d.isLoading = !1, d.response = null, d.error = JSON.parse(JSON.stringify(n));
     }
     return {
-      response: r.response,
-      error: r.error
+      response: d.response,
+      error: d.error
     };
   };
   return {
-    ...M(r),
-    fetch: e
+    ...Ne(d),
+    fetch: t
   };
-}, U = (e) => {
-  const n = a(!1), t = a(null), o = a(null);
+}, qe = (t) => {
+  const n = c(!1), s = c(null), l = c(null);
   return {
     isLoading: n,
-    response: t,
-    error: o,
+    response: s,
+    error: l,
     fetch: async () => {
       try {
-        o.value = null, n.value = !0, t.value = JSON.parse(JSON.stringify(await new F(p()).entityByUniqueid({ uniqueid: e }))), n.value = !1;
-      } catch (l) {
-        n.value = !1, t.value = null, o.value = JSON.parse(JSON.stringify(l));
+        l.value = null, n.value = !0, s.value = JSON.parse(JSON.stringify(await new me($()).entityByUniqueid({ uniqueid: t }))), n.value = !1;
+      } catch (o) {
+        n.value = !1, s.value = null, l.value = JSON.parse(JSON.stringify(o));
       }
       return {
-        response: i(t),
-        error: i(o)
+        response: v(s),
+        error: v(l)
       };
     }
   };
-}, G = (e) => {
-  const n = a(!1), t = a(null), o = a(null);
+};
+function A() {
+  return typeof window > "u" ? !1 : window !== window.top;
+}
+function Ae() {
+  return typeof window > "u" ? !1 : A() ? window.parent : window;
+}
+function Be(t) {
+  var n = Ae();
+  n && n.postMessage({
+    action: "openEdit",
+    data: JSON.parse(JSON.stringify({ item: { uid: t } }))
+  }, "https://flyo.cloud");
+}
+function ze() {
+  typeof window > "u" || A() && window.addEventListener("message", (t) => {
+    var n;
+    ((n = t.data) == null ? void 0 : n.action) === "pageRefresh" && window.location.reload();
+  });
+}
+function Re() {
+  typeof window > "u" || A() && window.addEventListener("message", (t) => {
+    var n, s, l, e;
+    if (((n = t.data) == null ? void 0 : n.action) === "scrollTo") {
+      const o = (e = (l = (s = t.data) == null ? void 0 : s.data) == null ? void 0 : l.item) == null ? void 0 : e.uid;
+      if (!o)
+        return;
+      const r = document.querySelector(`[data-flyo-uid="${CSS.escape(o)}"]`);
+      r && r.scrollIntoView({ behavior: "smooth", block: "start" });
+    }
+  });
+}
+function je(t, n) {
+  const s = () => Be(t);
+  if (!A() || !n)
+    return s;
+  const l = n, e = document.createElement("button");
+  e.type = "button", e.setAttribute("aria-label", "Edit block"), e.style.position = "fixed", e.style.top = "0px", e.style.left = "0px", e.style.zIndex = "9999", e.style.width = "44px", e.style.height = "44px", e.style.display = "none", e.style.alignItems = "center", e.style.justifyContent = "center", e.style.border = "0px solid #000", e.style.borderRadius = "9999px", e.style.boxSizing = "border-box", e.style.cursor = "pointer", e.style.background = "#FFD466", e.innerHTML = '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25z" fill="#111"/><path d="M20.71 7.04a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" fill="#111"/></svg>';
+  const o = document.createElement("div");
+  o.style.position = "fixed", o.style.top = "0px", o.style.left = "0px", o.style.zIndex = "9998", o.style.display = "none", o.style.pointerEvents = "none", o.style.background = "transparent", o.style.border = "none", e.addEventListener("click", s), document.body.appendChild(o), document.body.appendChild(e);
+  const r = 44, f = 6, a = 6, u = 6, p = 10, g = 180, N = () => window.innerWidth || document.documentElement.clientWidth, C = () => window.innerHeight || document.documentElement.clientHeight, le = (i) => !(i.bottom < 0 || i.right < 0 || i.top > C() || i.left > N() || i.width === 0 && i.height === 0), B = (i, m) => i >= u && m >= u && i + r <= N() - u && m + r <= C() - u, I = (i, m) => ({
+    x: Math.max(u, Math.min(i, N() - r - u)),
+    y: Math.max(u, Math.min(m, C() - r - u))
+  });
+  function z() {
+    const i = l.getBoundingClientRect(), m = i.width < r || i.height < r, x = Math.round(i.left), M = Math.round(i.top) - r - a, P = Math.round(i.left) + f, _ = Math.round(i.top) + f;
+    let O, S;
+    if (m && B(x, M))
+      O = x, S = M;
+    else if (B(P, _))
+      O = P, S = _;
+    else if (B(x, M))
+      O = x, S = M;
+    else {
+      const q = I(x, M), H = I(P, _), ce = Math.abs(q.x - i.left) + Math.abs(q.y - i.top), fe = Math.abs(H.x - i.left) + Math.abs(H.y - i.top);
+      ({ x: O, y: S } = ce <= fe ? q : H);
+    }
+    e.style.left = `${O}px`, e.style.top = `${S}px`;
+    const Y = Math.max(u, Math.round(i.left) - p), Z = Math.max(u, Math.round(i.top) - p), ue = Math.min(N() - u, Math.round(i.right) + p), de = Math.min(C() - u, Math.round(i.bottom) + p);
+    o.style.left = `${Y}px`, o.style.top = `${Z}px`, o.style.width = `${Math.max(0, ue - Y)}px`, o.style.height = `${Math.max(0, de - Z)}px`;
+  }
+  let h = !1, w = !1, E = !1, J = !1, b = null;
+  const F = () => {
+    b !== null && (clearTimeout(b), b = null);
+  }, R = () => {
+    F();
+    try {
+      const i = l.getBoundingClientRect();
+      if (!le(i)) {
+        L(!0);
+        return;
+      }
+      z(), e.style.display = "flex", o.style.display = "block", re();
+    } catch {
+      L(!0);
+    }
+  }, L = (i = !1) => {
+    if (i) {
+      F(), e.style.display = "none", o.style.display = "none", T();
+      return;
+    }
+    F(), b = window.setTimeout(() => {
+      !h && !w && !E && (e.style.display = "none", o.style.display = "none", T()), b = null;
+    }, g);
+  }, j = () => {
+    e.style.display !== "none" && z();
+  }, W = j;
+  let y = null;
+  const D = window.ResizeObserver, re = () => {
+    J || (J = !0, window.addEventListener("scroll", j, !0), window.addEventListener("resize", W), typeof D == "function" && (y = new D(() => {
+      e.style.display !== "none" && z();
+    }), y == null || y.observe(l)));
+  }, T = () => {
+    if (J) {
+      J = !1, window.removeEventListener("scroll", j, !0), window.removeEventListener("resize", W);
+      try {
+        y == null || y.disconnect();
+      } catch {
+      }
+      y = null;
+    }
+  }, U = () => {
+    h = !0, R();
+  }, V = () => {
+    h = !1, !w && !E && L();
+  }, K = () => {
+    w = !0, R();
+  }, G = () => {
+    w = !1, !h && !E && L();
+  }, Q = () => {
+    E = !0, R();
+  }, X = () => {
+    E = !1, !h && !w && L();
+  };
+  l.addEventListener("mouseenter", U), l.addEventListener("mouseleave", V), e.addEventListener("mouseenter", K), e.addEventListener("mouseleave", G), o.addEventListener("mouseenter", Q), o.addEventListener("mouseleave", X), e.addEventListener("click", s);
+  function ae() {
+    F(), T(), e.removeEventListener("click", s), l.removeEventListener("mouseenter", U), l.removeEventListener("mouseleave", V), e.removeEventListener("mouseenter", K), e.removeEventListener("mouseleave", G), o.removeEventListener("mouseenter", Q), o.removeEventListener("mouseleave", X), e.parentElement === document.body && document.body.removeChild(e), o.parentElement === document.body && document.body.removeChild(o);
+  }
+  return ae;
+}
+const He = (t) => typeof (t == null ? void 0 : t.uid) == "string" && t.uid.trim() !== "" ? { "data-flyo-uid": t.uid } : {}, Ie = () => {
+  const { liveEdit: t } = se("flyo");
+  if (!t)
+    return;
+  let n = null;
+  const s = [], l = () => {
+    s.forEach((e) => e()), s.length = 0, document.querySelectorAll("[data-flyo-uid]").forEach((e) => {
+      const o = e.getAttribute("data-flyo-uid");
+      if (o && e instanceof HTMLElement) {
+        const r = je(o, e);
+        typeof r == "function" && s.push(r);
+      }
+    });
+  };
+  Ce(() => {
+    ze(), Re(), l(), n = new MutationObserver((e) => {
+      e.some(
+        (r) => Array.from(r.addedNodes).some((f) => {
+          if (f.nodeType === Node.ELEMENT_NODE) {
+            const a = f;
+            return a.hasAttribute("data-flyo-uid") || a.querySelector("[data-flyo-uid]");
+          }
+          return !1;
+        })
+      ) && l();
+    }), n.observe(document.body, {
+      childList: !0,
+      subtree: !0
+    });
+  }), Je(() => {
+    n && n.disconnect(), s.forEach((e) => e()), s.length = 0;
+  });
+}, We = (t) => {
+  const n = c(!1), s = c(null), l = c(null);
   return {
     isLoading: n,
-    response: t,
-    error: o,
+    response: s,
+    error: l,
     fetch: async () => {
       try {
-        o.value = null, n.value = !0, t.value = JSON.parse(JSON.stringify(await new k(p()).page({ slug: e }))), n.value = !1;
-      } catch (l) {
-        n.value = !1, t.value = null, o.value = JSON.parse(JSON.stringify(l));
+        l.value = null, n.value = !0, s.value = JSON.parse(JSON.stringify(await new ve($()).page({ slug: t }))), n.value = !1;
+      } catch (o) {
+        n.value = !1, s.value = null, l.value = JSON.parse(JSON.stringify(o));
       }
       return {
-        response: i(t),
-        error: i(o)
+        response: v(s),
+        error: v(l)
       };
     }
   };
-}, H = () => {
-  const e = a(!1), n = a(null), t = a(null);
+}, De = () => {
+  const t = c(!1), n = c(null), s = c(null);
   return {
-    isLoading: e,
+    isLoading: t,
     response: n,
-    error: t,
+    error: s,
     fetch: async () => {
       try {
-        t.value = null, e.value = !0, n.value = JSON.parse(JSON.stringify(await new w(p()).sitemap())), e.value = !1;
-      } catch (c) {
-        e.value = !1, n.value = null, t.value = JSON.parse(JSON.stringify(c));
+        s.value = null, t.value = !0, n.value = JSON.parse(JSON.stringify(await new ge($()).sitemap())), t.value = !1;
+      } catch (e) {
+        t.value = !1, n.value = null, s.value = JSON.parse(JSON.stringify(e));
       }
       return {
-        response: i(n),
-        error: i(t)
+        response: v(n),
+        error: v(s)
       };
     }
   };
-}, I = {
-  install(e, n) {
-    R(n), e.component(d.name, d), e.component(v.name, v), e.provide("flyo", {
+}, Ue = {
+  install(t, n) {
+    Fe(n), t.component(te.name, te), t.component(ne.name, ne), t.provide("flyo", {
       liveEdit: n.liveEdit,
       liveEditOrigin: n.liveEditOrigin
     });
   }
 };
 export {
-  d as Block,
-  I as FlyoVue,
-  v as Page,
-  I as default,
-  p as getFlyoConfig,
-  K as useFlyoConfig,
-  U as useFlyoEntity,
-  G as useFlyoPage,
-  H as useFlyoSitemap
+  te as Block,
+  Ue as FlyoVue,
+  ne as Page,
+  Ue as default,
+  He as editable,
+  $ as getFlyoConfig,
+  _e as useFlyoConfig,
+  qe as useFlyoEntity,
+  Ie as useFlyoLiveEdit,
+  We as useFlyoPage,
+  De as useFlyoSitemap
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flyo/nitro-vue3",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "Vue3 Components for Flyo Nitro",
   "main": "./dist/index.cjs",
   "module": "./dist/index.mjs",
@@ -42,6 +42,7 @@
     "vitest": "^1.0.0"
   },
   "dependencies": {
+    "@flyo/nitro-js-bridge": "^1.3.0",
     "@flyo/nitro-typescript": "^1.4.0"
   }
 }