@flyo/nitro-vue3 2.0.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

@@ -0,0 +1,76 @@
+import type { App, Component, Ref } from 'vue'
+import type {
+  Block as NitroBlock,
+  Configuration,
+  ConfigApi,
+  EntitiesApi,
+  PagesApi,
+  SitemapApi
+} from '@flyo/nitro-typescript'
+
+export interface FlyoVuePluginOptions {
+  apiToken: string
+  apiBasePath?: string
+  defaultHeaders?: Record<string, string>
+  liveEdit?: boolean
+  liveEditOrigin?: string
+}
+
+export interface FlyoFetchResult<T> {
+  response: T | null
+  error: unknown | null
+}
+
+export type FlyoConfigResponse = Awaited<ReturnType<ConfigApi['config']>>
+export type FlyoPageResponse = Awaited<ReturnType<PagesApi['page']>>
+export type FlyoEntityResponse = Awaited<ReturnType<EntitiesApi['entityByUniqueid']>>
+export type FlyoSitemapResponse = Awaited<ReturnType<SitemapApi['sitemap']>>
+
+export interface UseFlyoConfigReturn {
+  isLoading: Ref<boolean | null>
+  response: Ref<FlyoConfigResponse | null>
+  error: Ref<unknown | null>
+  fetch: () => Promise<FlyoFetchResult<FlyoConfigResponse>>
+}
+
+export interface UseFlyoPageReturn {
+  isLoading: Ref<boolean>
+  response: Ref<FlyoPageResponse | null>
+  error: Ref<unknown | null>
+  fetch: () => Promise<FlyoFetchResult<FlyoPageResponse>>
+}
+
+export interface UseFlyoEntityReturn {
+  isLoading: Ref<boolean>
+  response: Ref<FlyoEntityResponse | null>
+  error: Ref<unknown | null>
+  fetch: () => Promise<FlyoFetchResult<FlyoEntityResponse>>
+}
+
+export interface UseFlyoSitemapReturn {
+  isLoading: Ref<boolean>
+  response: Ref<FlyoSitemapResponse | null>
+  error: Ref<unknown | null>
+  fetch: () => Promise<FlyoFetchResult<FlyoSitemapResponse>>
+}
+
+export interface FlyoVuePlugin {
+  install: (app: App, options: FlyoVuePluginOptions) => void
+}
+
+declare const FlyoVue: FlyoVuePlugin
+declare const Block: Component
+declare const Page: Component
+
+export default FlyoVue
+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,11 +1,13 @@
 {
   "name": "@flyo/nitro-vue3",
-  "version": "2.0.0",
+  "version": "2.2.0",
   "description": "Vue3 Components for Flyo Nitro",
   "main": "./dist/index.cjs",
   "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs",
       "require": "./dist/index.cjs"
     }
@@ -18,7 +20,9 @@
     "dist"
   ],
   "scripts": {
-    "build": "vite build",
+    "build": "vite build && npm run build:types",
+    "build:types": "node scripts/build-types.mjs",
+    "prepublishOnly": "npm run build",
     "test": "vitest run",
     "test:watch": "vitest",
     "release": "npm publish --access=public"
@@ -38,6 +42,7 @@
     "vitest": "^1.0.0"
   },
   "dependencies": {
+    "@flyo/nitro-js-bridge": "^1.3.0",
     "@flyo/nitro-typescript": "^1.4.0"
   }
 }