@xosen/site-sdk 0.0.3 → 0.0.4

package/dist/index.js

@@ -1,5 +1,5 @@
-import { onMounted as B, computed as f, defineComponent as y, openBlock as n, createElementBlock as a, Fragment as h, renderList as v, normalizeClass as k, toDisplayString as _, ref as j, onUnmounted as M, resolveComponent as A, createElementVNode as u, createVNode as I, withCtx as X, createBlock as T, createTextVNode as N, createCommentVNode as d, renderSlot as H, normalizeStyle as U, resolveDynamicComponent as E, watch as P, mergeProps as z } from "vue";
-import { useI18n as R } from "vue-i18n";
+import { onMounted as C, computed as f, defineComponent as y, openBlock as n, createElementBlock as a, Fragment as h, renderList as v, normalizeClass as k, toDisplayString as _, ref as w, onUnmounted as A, resolveComponent as E, createElementVNode as u, createVNode as P, withCtx as B, createBlock as T, createTextVNode as L, createCommentVNode as d, renderSlot as H, normalizeStyle as U, resolveDynamicComponent as R, watch as I, mergeProps as z } from "vue";
+import { useI18n as M } from "vue-i18n";
 function G(r) {
   function o(e) {
     const t = document.documentElement;
@@ -8,7 +8,7 @@ function G(r) {
         i && t.style.setProperty(`--x-color-${J(c)}`, i);
     e.typography?.fontFamily && t.style.setProperty("--x-font-family", e.typography.fontFamily), e.typography?.headingFont && t.style.setProperty("--x-font-heading", e.typography.headingFont), e.typography?.baseFontSize && t.style.setProperty("--x-font-size", e.typography.baseFontSize), e.shape?.borderRadius && t.style.setProperty("--x-border-radius", e.shape.borderRadius), e.shape?.maxWidth && t.style.setProperty("--x-max-width", e.shape.maxWidth);
   }
-  B(() => {
+  C(() => {
     if (r) {
       o(r);
       return;
@@ -48,7 +48,7 @@ const V = /* @__PURE__ */ y({
   },
   setup(r, { expose: o }) {
     o();
-    const { locale: e } = R();
+    const { locale: e } = M();
     function t(i) {
       e.value = i, localStorage.setItem("site-locale", i);
     }
@@ -80,11 +80,11 @@ const Z = /* @__PURE__ */ x(V, [["render", Y], ["__scopeId", "data-v-675f0bbd"],
   __name: "XSiteNav",
   setup(r, { expose: o }) {
     o();
-    const { navigation: e, branding: t, locales: c } = F(), i = j(!1), s = j(!1);
+    const { navigation: e, branding: t, locales: c } = F(), i = w(!1), s = w(!1);
     function l() {
       i.value = window.scrollY > 20;
     }
-    B(() => window.addEventListener("scroll", l)), M(() => window.removeEventListener("scroll", l));
+    C(() => window.addEventListener("scroll", l)), A(() => window.removeEventListener("scroll", l));
     const p = { navigation: e, branding: t, locales: c, scrolled: i, menuOpen: s, onScroll: l, XLocaleSwitcher: Z };
     return Object.defineProperty(p, "__isScriptSetup", { enumerable: !1, value: !0 }), p;
   }
@@ -93,7 +93,7 @@ const Z = /* @__PURE__ */ x(V, [["render", Y], ["__scopeId", "data-v-675f0bbd"],
   class: "x-nav__logo-text"
 }, oe = ["href"];
 function ne(r, o, e, t, c, i) {
-  const s = A("router-link");
+  const s = E("router-link");
   return n(), a(
     "nav",
     {
@@ -101,11 +101,11 @@ function ne(r, o, e, t, c, i) {
     },
     [
       u("div", ee, [
-        I(s, {
+        P(s, {
           to: "/",
           class: "x-nav__logo"
         }, {
-          default: X(() => [
+          default: B(() => [
             t.branding.logo ? (n(), a("img", {
               key: 0,
               src: t.branding.logo,
@@ -149,8 +149,8 @@ function ne(r, o, e, t, c, i) {
                     class: "x-nav__link",
                     onClick: o[1] || (o[1] = (p) => t.menuOpen = !1)
                   }, {
-                    default: X(() => [
-                      N(
+                    default: B(() => [
+                      L(
                         _(l.text),
                         1
                         /* TEXT */
@@ -221,7 +221,7 @@ const ae = /* @__PURE__ */ x(Q, [["render", ne], ["__scopeId", "data-v-07c4b748"
   class: "x-footer__copyright"
 };
 function de(r, o, e, t, c, i) {
-  const s = A("router-link");
+  const s = E("router-link");
   return n(), a("footer", ce, [
     u("div", ie, [
       t.footerConfig.links?.length ? (n(), a("div", le, [
@@ -233,8 +233,8 @@ function de(r, o, e, t, c, i) {
             to: l.url,
             class: "x-footer__link"
           }, {
-            default: X(() => [
-              N(
+            default: B(() => [
+              L(
                 _(l.text),
                 1
                 /* TEXT */
@@ -267,11 +267,11 @@ const ue = /* @__PURE__ */ x(re, [["render", de], ["__scopeId", "data-v-f9b38381
 }), fe = { class: "x-site-layout" }, me = { class: "x-site-layout__main" };
 function he(r, o, e, t, c, i) {
   return n(), a("div", fe, [
-    I(t.XSiteNav),
+    P(t.XSiteNav),
     u("main", me, [
       H(r.$slots, "default", {}, void 0, !0)
     ]),
-    I(t.XSiteFooter)
+    P(t.XSiteFooter)
   ]);
 }
 const ts = /* @__PURE__ */ x(pe, [["render", he], ["__scopeId", "data-v-41b0f2a9"], ["__file", "/Users/yariksav/projects/xosen/xosen-monorepo/packages/site-sdk/src/components/layout/XSiteLayout.vue"]]), ve = /* @__PURE__ */ y({
@@ -382,7 +382,7 @@ const Ce = /* @__PURE__ */ x(ve, [["render", Te], ["__scopeId", "data-v-d8cfe56f
     return Object.defineProperty(e, "__isScriptSetup", { enumerable: !1, value: !0 }), e;
   }
 }), Be = { class: "x-html-block" }, Oe = ["innerHTML"];
-function Ie(r, o, e, t, c, i) {
+function Pe(r, o, e, t, c, i) {
   return n(), a("section", Be, [
     u("div", {
       class: "x-html-block__content",
@@ -390,7 +390,7 @@ function Ie(r, o, e, t, c, i) {
     }, null, 8, Oe)
   ]);
 }
-const Pe = /* @__PURE__ */ x(Xe, [["render", Ie], ["__scopeId", "data-v-abfd69e8"], ["__file", "/Users/yariksav/projects/xosen/xosen-monorepo/packages/site-sdk/src/components/blocks/XHtmlBlock.vue"]]), Ne = /* @__PURE__ */ y({
+const Ie = /* @__PURE__ */ x(Xe, [["render", Pe], ["__scopeId", "data-v-abfd69e8"], ["__file", "/Users/yariksav/projects/xosen/xosen-monorepo/packages/site-sdk/src/components/blocks/XHtmlBlock.vue"]]), Le = /* @__PURE__ */ y({
   __name: "XCardsBlock",
   props: {
     data: { type: Object, required: !0 },
@@ -423,21 +423,21 @@ const Pe = /* @__PURE__ */ x(Xe, [["render", Ie], ["__scopeId", "data-v-abfd69e8
     const l = { props: e, gridStyle: t, iconStyle: c, iconMap: i, iconDisplay: s };
     return Object.defineProperty(l, "__isScriptSetup", { enumerable: !1, value: !0 }), l;
   }
-}), Le = { class: "x-cards-block__container" }, Ae = {
+}), Ne = { class: "x-cards-block__container" }, Ae = {
   key: 0,
   class: "x-cards-block__title"
-}, Ue = {
+}, Ee = {
   key: 1,
   class: "x-cards-block__subtitle"
-}, Ee = ["src", "alt"], Re = { class: "x-card__title" }, Fe = { class: "x-card__desc" };
-function qe(r, o, e, t, c, i) {
+}, Ue = ["src", "alt"], Re = { class: "x-card__title" }, Me = { class: "x-card__desc" };
+function Fe(r, o, e, t, c, i) {
   return n(), a(
     "section",
     {
       class: k(["x-cards-block", `x-cards-block--${e.variant}`])
     },
     [
-      u("div", Le, [
+      u("div", Ne, [
         e.data.title ? (n(), a(
           "h2",
           Ae,
@@ -447,7 +447,7 @@ function qe(r, o, e, t, c, i) {
         )) : d("v-if", !0),
         e.data.subtitle ? (n(), a(
           "p",
-          Ue,
+          Ee,
           _(e.data.subtitle),
           1
           /* TEXT */
@@ -462,18 +462,18 @@ function qe(r, o, e, t, c, i) {
             (n(!0), a(
               h,
               null,
-              v(e.data.cards, (s, l) => (n(), T(E(s.link ? "a" : "div"), {
+              v(e.data.cards, (s, l) => (n(), T(R(s.link ? "a" : "div"), {
                 key: l,
                 class: "x-card",
                 href: s.link
               }, {
-                default: X(() => [
+                default: B(() => [
                   s.image && e.variant === "image-cards" ? (n(), a("img", {
                     key: 0,
                     src: s.image,
                     alt: s.title,
                     class: "x-card__image"
-                  }, null, 8, Ee)) : d("v-if", !0),
+                  }, null, 8, Ue)) : d("v-if", !0),
                   s.icon && e.variant !== "image-cards" ? (n(), a(
                     "div",
                     {
@@ -494,7 +494,7 @@ function qe(r, o, e, t, c, i) {
                   ),
                   u(
                     "p",
-                    Fe,
+                    Me,
                     _(s.desc),
                     1
                     /* TEXT */
@@ -516,7 +516,7 @@ function qe(r, o, e, t, c, i) {
     /* CLASS */
   );
 }
-const De = /* @__PURE__ */ x(Ne, [["render", qe], ["__scopeId", "data-v-a1505674"], ["__file", "/Users/yariksav/projects/xosen/xosen-monorepo/packages/site-sdk/src/components/blocks/XCardsBlock.vue"]]), Me = /* @__PURE__ */ y({
+const qe = /* @__PURE__ */ x(Le, [["render", Fe], ["__scopeId", "data-v-a1505674"], ["__file", "/Users/yariksav/projects/xosen/xosen-monorepo/packages/site-sdk/src/components/blocks/XCardsBlock.vue"]]), De = /* @__PURE__ */ y({
   __name: "XImageTextBlock",
   props: {
     data: { type: Object, required: !0 },
@@ -570,7 +570,7 @@ function Ze(r, o, e, t, c, i) {
                   1
                   /* TEXT */
                 ),
-                N(
+                L(
                   " " + _(s.text),
                   1
                   /* TEXT */
@@ -594,9 +594,9 @@ function Ze(r, o, e, t, c, i) {
     /* CLASS */
   );
 }
-const Qe = /* @__PURE__ */ x(Me, [["render", Ze], ["__scopeId", "data-v-5ca1e218"], ["__file", "/Users/yariksav/projects/xosen/xosen-monorepo/packages/site-sdk/src/components/blocks/XImageTextBlock.vue"]]);
+const Qe = /* @__PURE__ */ x(De, [["render", Ze], ["__scopeId", "data-v-5ca1e218"], ["__file", "/Users/yariksav/projects/xosen/xosen-monorepo/packages/site-sdk/src/components/blocks/XImageTextBlock.vue"]]);
 function q(r, o) {
-  const e = j(null), { locale: t } = R(), c = window.__SITE_DATA__, i = c?.locale;
+  const e = w(null), { locale: t } = M(), c = window.__SITE_DATA__, i = c?.locale;
   function s() {
     return c && c[r] && t.value === i ? (e.value = c[r], !0) : !1;
   }
@@ -607,9 +607,9 @@ function q(r, o) {
     } catch {
     }
   }
-  return B(() => {
+  return C(() => {
     s() || l();
-  }), P(t, () => {
+  }), I(t, () => {
     l();
   }), e;
 }
@@ -642,14 +642,14 @@ const tt = /* @__PURE__ */ y({
   },
   setup(r, { expose: o }) {
     o();
-    const e = r, t = f(() => e.data?.title), c = f(() => e.data?.subtitle), i = j([]), s = j(""), l = q("tariffs", "tariffs"), p = et();
-    B(async () => {
+    const e = r, t = f(() => e.data?.title), c = f(() => e.data?.subtitle), i = w([]), s = w(""), l = q("tariffs", "tariffs"), p = et();
+    C(async () => {
       if (e.source === "api")
         try {
           i.value = await p.getTariffs();
         } catch {
         }
-    }), P(
+    }), I(
       l,
       (m) => {
         m && e.source === "kv" && (i.value = m);
@@ -657,18 +657,18 @@ const tt = /* @__PURE__ */ y({
       { immediate: !0 }
     );
     const g = f(() => {
-      const m = new Set(i.value.map((w) => w.tariffGroupName).filter(Boolean));
+      const m = new Set(i.value.map((j) => j.tariffGroupName).filter(Boolean));
       return Array.from(m);
     });
-    P(
+    I(
       g,
       (m) => {
         m.length > 0 && !s.value && (s.value = m[0]);
       },
       { immediate: !0 }
     );
-    const b = f(() => !s.value || g.value.length <= 1 ? i.value : i.value.filter((m) => m.tariffGroupName === s.value)), C = { props: e, title: t, subtitle: c, plans: i, activeGroup: s, kvTariffs: l, api: p, groups: g, activePlans: b };
-    return Object.defineProperty(C, "__isScriptSetup", { enumerable: !1, value: !0 }), C;
+    const b = f(() => !s.value || g.value.length <= 1 ? i.value : i.value.filter((m) => m.tariffGroupName === s.value)), X = { props: e, title: t, subtitle: c, plans: i, activeGroup: s, kvTariffs: l, api: p, groups: g, activePlans: b };
+    return Object.defineProperty(X, "__isScriptSetup", { enumerable: !1, value: !0 }), X;
   }
 }), st = { class: "x-pricing" }, ot = { class: "x-pricing__container" }, nt = {
   key: 0,
@@ -884,7 +884,7 @@ function Bt(r, o, e, t, c, i) {
     ])
   ]);
 }
-const Ot = /* @__PURE__ */ x(yt, [["render", Bt], ["__scopeId", "data-v-e873ba26"], ["__file", "/Users/yariksav/projects/xosen/xosen-monorepo/packages/site-sdk/src/components/blocks/XContactsBlock.vue"]]), It = /* @__PURE__ */ y({
+const Ot = /* @__PURE__ */ x(yt, [["render", Bt], ["__scopeId", "data-v-e873ba26"], ["__file", "/Users/yariksav/projects/xosen/xosen-monorepo/packages/site-sdk/src/components/blocks/XContactsBlock.vue"]]), Pt = /* @__PURE__ */ y({
   __name: "XGalleryBlock",
   props: {
     data: { type: Object, required: !0 }
@@ -894,20 +894,20 @@ const Ot = /* @__PURE__ */ x(yt, [["render", Bt], ["__scopeId", "data-v-e873ba26
     const e = {};
     return Object.defineProperty(e, "__isScriptSetup", { enumerable: !1, value: !0 }), e;
   }
-}), Pt = { class: "x-gallery-block" }, Nt = {
+}), It = { class: "x-gallery-block" }, Lt = {
   key: 0,
   class: "x-gallery-block__title"
-}, Lt = { class: "x-gallery-block__grid" }, At = ["src", "alt"], Ut = { key: 0 };
-function Et(r, o, e, t, c, i) {
-  return n(), a("section", Pt, [
+}, Nt = { class: "x-gallery-block__grid" }, At = ["src", "alt"], Et = { key: 0 };
+function Ut(r, o, e, t, c, i) {
+  return n(), a("section", It, [
     e.data.title ? (n(), a(
       "h2",
-      Nt,
+      Lt,
       _(e.data.title),
       1
       /* TEXT */
     )) : d("v-if", !0),
-    u("div", Lt, [
+    u("div", Nt, [
       (n(!0), a(
         h,
         null,
@@ -922,7 +922,7 @@ function Et(r, o, e, t, c, i) {
           }, null, 8, At),
           s.caption ? (n(), a(
             "figcaption",
-            Ut,
+            Et,
             _(s.caption),
             1
             /* TEXT */
@@ -934,7 +934,7 @@ function Et(r, o, e, t, c, i) {
     ])
   ]);
 }
-const Rt = /* @__PURE__ */ x(It, [["render", Et], ["__scopeId", "data-v-b99bb987"], ["__file", "/Users/yariksav/projects/xosen/xosen-monorepo/packages/site-sdk/src/components/blocks/XGalleryBlock.vue"]]), Ft = /* @__PURE__ */ y({
+const Rt = /* @__PURE__ */ x(Pt, [["render", Ut], ["__scopeId", "data-v-b99bb987"], ["__file", "/Users/yariksav/projects/xosen/xosen-monorepo/packages/site-sdk/src/components/blocks/XGalleryBlock.vue"]]), Mt = /* @__PURE__ */ y({
   __name: "XMapBlock",
   props: {
     data: { type: Object, required: !0 }
@@ -947,20 +947,20 @@ const Rt = /* @__PURE__ */ x(It, [["render", Et], ["__scopeId", "data-v-b99bb987
     }), c = { props: e, mapUrl: t };
     return Object.defineProperty(c, "__isScriptSetup", { enumerable: !1, value: !0 }), c;
   }
-}), qt = { class: "x-map-block" }, Dt = {
+}), Ft = { class: "x-map-block" }, qt = {
   key: 0,
   class: "x-map-block__title"
-}, Mt = { class: "x-map-block__container" }, Ht = ["src"];
+}, Dt = { class: "x-map-block__container" }, Ht = ["src"];
 function zt(r, o, e, t, c, i) {
-  return n(), a("section", qt, [
+  return n(), a("section", Ft, [
     e.data.title ? (n(), a(
       "h2",
-      Dt,
+      qt,
       _(e.data.title),
       1
       /* TEXT */
     )) : d("v-if", !0),
-    u("div", Mt, [
+    u("div", Dt, [
       u("iframe", {
         src: t.mapUrl,
         width: "100%",
@@ -973,7 +973,7 @@ function zt(r, o, e, t, c, i) {
     ])
   ]);
 }
-const Gt = /* @__PURE__ */ x(Ft, [["render", zt], ["__scopeId", "data-v-583f4762"], ["__file", "/Users/yariksav/projects/xosen/xosen-monorepo/packages/site-sdk/src/components/blocks/XMapBlock.vue"]]), Jt = /* @__PURE__ */ y({
+const Gt = /* @__PURE__ */ x(Mt, [["render", zt], ["__scopeId", "data-v-583f4762"], ["__file", "/Users/yariksav/projects/xosen/xosen-monorepo/packages/site-sdk/src/components/blocks/XMapBlock.vue"]]), Jt = /* @__PURE__ */ y({
   __name: "XBlockRenderer",
   props: {
     blocks: { type: Array, required: !0 }
@@ -982,8 +982,8 @@ const Gt = /* @__PURE__ */ x(Ft, [["render", zt], ["__scopeId", "data-v-583f4762
     o();
     const e = r, t = {
       hero: Ce,
-      html: Pe,
-      cards: De,
+      html: Ie,
+      cards: qe,
       "image-text": Qe,
       pricing: vt,
       contacts: Ot,
@@ -1006,7 +1006,7 @@ function Wt(r, o, e, t, c, i) {
         h,
         { key: l },
         [
-          t.getBlockComponent(s.type) ? (n(), T(E(t.getBlockComponent(s.type)), z({
+          t.getBlockComponent(s.type) ? (n(), T(R(t.getBlockComponent(s.type)), z({
             key: 0,
             data: s.data || s.props
           }, { ref_for: !0 }, s.settings, {
@@ -1021,7 +1021,23 @@ function Wt(r, o, e, t, c, i) {
     ))
   ]);
 }
-const ss = /* @__PURE__ */ x(Jt, [["render", Wt], ["__file", "/Users/yariksav/projects/xosen/xosen-monorepo/packages/site-sdk/src/components/blocks/XBlockRenderer.vue"]]), Kt = /\.(js|css|png|jpg|jpeg|gif|svg|ico|woff2?|ttf|eot|webp|avif|map|json|txt|xml|webmanifest)$/;
+const ss = /* @__PURE__ */ x(Jt, [["render", Wt], ["__file", "/Users/yariksav/projects/xosen/xosen-monorepo/packages/site-sdk/src/components/blocks/XBlockRenderer.vue"]]);
+function os() {
+  const r = w(null), o = w(!1);
+  function e(t) {
+    const c = t.data;
+    c?.type === "xosen-preview-update" && c.page && (r.value = c.page, o.value = !0);
+  }
+  return C(() => {
+    window.addEventListener("message", e), window.parent !== window && window.parent.postMessage({ type: "xosen-preview-ready" }, "*");
+  }), A(() => {
+    window.removeEventListener("message", e);
+  }), {
+    previewPage: r,
+    isPreviewMode: o
+  };
+}
+const Kt = /\.(js|css|png|jpg|jpeg|gif|svg|ico|woff2?|ttf|eot|webp|avif|map|json|txt|xml|webmanifest)$/;
 function Yt(r, o) {
   const t = new URL(r.url).searchParams.get("lang");
   if (t && o.supportedLocales?.includes(t)) return t;
@@ -1046,7 +1062,7 @@ function Zt(r, o) {
     }) : Response.json({ error: "Not found" }, { status: 404 });
   })() : Promise.resolve(Response.json({ error: "Key is required" }, { status: 400 }));
 }
-function L(r, o, e) {
+function N(r, o, e) {
   let t = r;
   if (o.title) {
     const c = e ? ` — ${e}` : "";
@@ -1054,7 +1070,7 @@ function L(r, o, e) {
   }
   return o.meta?.description && (t = t.replace(/(<meta\s+name="description"\s+content=")[^"]*(")/, `$1${o.meta.description}$2`)), o.meta?.ogTitle && (t = t.replace(/(<meta\s+property="og:title"\s+content=")[^"]*(")/, `$1${o.meta.ogTitle}$2`)), o.html && (t = t.replace('<div id="app"></div>', `<div id="app">${o.html}</div>`)), t;
 }
-function os(r) {
+function ns(r) {
   return {
     async fetch(o, e) {
       const t = new URL(o.url), c = Zt(t, e);
@@ -1066,9 +1082,9 @@ function os(r) {
       const [g, b] = await Promise.all([
         e.SITE_CONTENT.get("config"),
         e.SITE_CONTENT.get(`content:${i}`)
-      ]), C = g ? JSON.parse(g) : {}, m = b ? JSON.parse(b) : {}, w = t.pathname.match(/^\/p\/(.+)$/);
-      if (w) {
-        const $ = w[1];
+      ]), X = g ? JSON.parse(g) : {}, m = b ? JSON.parse(b) : {}, j = t.pathname.match(/^\/p\/(.+)$/);
+      if (j) {
+        const $ = j[1];
         if (!m[$]) {
           const S = await e.SITE_CONTENT.get(`page:${$}:${i}`);
           S && (m[$] = JSON.parse(S));
@@ -1076,15 +1092,15 @@ function os(r) {
       }
       const O = {
         locale: i,
-        config: C
+        config: X
       };
       for (const [$, S] of Object.entries(m))
         O[`page:${$}`] = S;
-      if (w) {
-        const $ = w[1], S = O[`page:${$}`];
-        S && (p = L(p, S, r.siteName));
+      if (j) {
+        const $ = j[1], S = O[`page:${$}`];
+        S && (p = N(p, S, r.siteName));
       }
-      t.pathname === "/" && m.home && (p = L(p, m.home, r.siteName));
+      t.pathname === "/" && m.home && (p = N(p, m.home, r.siteName));
       const D = `<script>window.__SITE_DATA__ = ${JSON.stringify(O)};<\/script>`;
       return p = p.replace("</head>", `${D}
 </head>`), new Response(p, {
@@ -1098,11 +1114,11 @@ function os(r) {
 }
 export {
   ss as XBlockRenderer,
-  De as XCardsBlock,
+  qe as XCardsBlock,
   Ot as XContactsBlock,
   Rt as XGalleryBlock,
   Ce as XHeroBlock,
-  Pe as XHtmlBlock,
+  Ie as XHtmlBlock,
   Qe as XImageTextBlock,
   Z as XLocaleSwitcher,
   Gt as XMapBlock,
@@ -1110,7 +1126,8 @@ export {
   ue as XSiteFooter,
   ts as XSiteLayout,
   ae as XSiteNav,
-  os as createSiteWorker,
+  ns as createSiteWorker,
+  os as useLivePreview,
   et as useSiteApi,
   F as useSiteConfig,
   q as useSiteData,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xosen/site-sdk",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "Shared Vue components and composables for Xosen site templates",
   "type": "module",
   "main": "./dist/index.js",

package/src/composables/useLivePreview.ts

@@ -0,0 +1,53 @@
+import { ref, onMounted, onUnmounted } from 'vue';
+
+export interface PreviewMessage {
+  type: 'xosen-preview-update';
+  page: {
+    slug: string;
+    locale: string;
+    title?: string;
+    blocks?: any[];
+    meta?: Record<string, any>;
+  };
+}
+
+/**
+ * Listen for live preview messages from the admin UI.
+ * When the admin sends page data via postMessage, this composable
+ * provides reactive access to the preview data.
+ *
+ * Usage in template ContentPage:
+ * ```ts
+ * const { previewPage } = useLivePreview();
+ * // If previewPage matches current slug+locale, use it instead of KV/API data
+ * ```
+ */
+export function useLivePreview() {
+  const previewPage = ref<PreviewMessage['page'] | null>(null);
+  const isPreviewMode = ref(false);
+
+  function handleMessage(event: MessageEvent) {
+    const data = event.data;
+    if (data?.type === 'xosen-preview-update' && data.page) {
+      previewPage.value = data.page;
+      isPreviewMode.value = true;
+    }
+  }
+
+  onMounted(() => {
+    window.addEventListener('message', handleMessage);
+    // Notify parent that preview is ready
+    if (window.parent !== window) {
+      window.parent.postMessage({ type: 'xosen-preview-ready' }, '*');
+    }
+  });
+
+  onUnmounted(() => {
+    window.removeEventListener('message', handleMessage);
+  });
+
+  return {
+    previewPage,
+    isPreviewMode,
+  };
+}

package/src/index.ts

@@ -22,6 +22,8 @@ export { useSiteData } from './composables/useSiteData.js';
 export { useSiteConfig } from './composables/useSiteConfig.js';
 export { useSkin } from './composables/useSkin.js';
 export { useSiteApi } from './composables/useSiteApi.js';
+export { useLivePreview } from './composables/useLivePreview.js';
+export type { PreviewMessage } from './composables/useLivePreview.js';
 
 // Worker
 export { createSiteWorker } from './worker/index.js';