@flyo/nitro-vue3 2.1.0 → 2.2.1

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flyo/nitro-vue3",
-  "version": "2.1.0",
+  "version": "2.2.1",
   "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"
   }
 }