@xosen/site-sdk 0.0.14 → 0.0.16

package/dist/composables/useLivePreview.d.ts

@@ -1,6 +1,12 @@
 import type { Router } from 'vue-router';
+export interface PreviewSiteData {
+    config?: Record<string, any>;
+    skin?: Record<string, any>;
+    components?: Record<string, any>;
+}
 export interface PreviewMessage {
     type: 'xosen-preview-update';
+    site?: PreviewSiteData;
     page: {
         slug: string;
         locale: string;
@@ -50,5 +56,14 @@ export declare function useLivePreview(): {
         meta?: Record<string, any> | undefined;
         layout?: string | undefined;
     } | null>;
+    previewSite: import("vue").Ref<{
+        config?: Record<string, any> | undefined;
+        skin?: Record<string, any> | undefined;
+        components?: Record<string, any> | undefined;
+    } | null, PreviewSiteData | {
+        config?: Record<string, any> | undefined;
+        skin?: Record<string, any> | undefined;
+        components?: Record<string, any> | undefined;
+    } | null>;
     isPreviewMode: import("vue").Ref<boolean, boolean>;
 };

package/dist/index.d.ts

@@ -10,7 +10,7 @@ export { useLocaleSwitcher } from './composables/useLocaleSwitcher.js';
 export { useDynamicLayout, buildLayoutCSS } from './composables/useDynamicLayout.js';
 export type { LayoutConfig, LayoutZone, GridBreakpoint, LayoutSchemaDefinition, LayoutField } from './types/layout.js';
 export { layoutSchema, layoutPresets } from './types/layout.js';
-export type { PreviewMessage } from './composables/useLivePreview.js';
+export type { PreviewMessage, PreviewSiteData } from './composables/useLivePreview.js';
 export { createSiteWorker } from './worker/index.js';
 export type { WorkerEnv, WorkerConfig, PageData } from './worker/index.js';
 export type { Block, BlockSettings, HeroBlockData, HtmlBlockData, CardsBlockData, ImageTextBlockData, PricingBlockData, PricingPlan, ContactsBlockData, Office, GalleryBlockData, MapBlockData, } from './types/blocks.js';

package/dist/index.js

@@ -1,51 +1,51 @@
-import { ref as w, onMounted as T, watch as _, computed as u, onUnmounted as N, reactive as L, provide as P } from "vue";
-import { useI18n as S } from "vue-i18n";
+import { ref as v, onMounted as S, watch as _, computed as f, onUnmounted as N, reactive as L, provide as P } from "vue";
+import { useI18n as T } from "vue-i18n";
 import { useRoute as I } from "vue-router";
 function Z(o, a) {
-  const t = w(null), { locale: e } = S(), n = window.__SITE_DATA__, s = n?.locale;
-  function r() {
-    return n && n[o] && e.value === s ? (t.value = n[o], !0) : !1;
+  const t = v(null), { locale: e } = T(), s = window.__SITE_DATA__, n = s?.locale;
+  function i() {
+    return s && s[o] && e.value === n ? (t.value = s[o], !0) : !1;
   }
-  async function i() {
+  async function l() {
     try {
-      const c = await fetch(`/api/content/${a}:${e.value}`);
-      c.ok && (t.value = await c.json());
+      const r = await fetch(`/api/content/${a}:${e.value}`);
+      r.ok && (t.value = await r.json());
     } catch {
     }
   }
-  return T(() => {
-    r() || i();
+  return S(() => {
+    i() || l();
   }), _(e, () => {
-    i();
+    l();
   }), t;
 }
 function q() {
-  const o = window.__SITE_DATA__, a = u(() => o?.config || null), t = u(() => o?.components || {}), e = u(() => a.value?.navigation || []), n = u(() => a.value?.locales || []), s = u(() => a.value?.defaultLocale || "en"), r = u(() => a.value?.branding || {}), i = u(() => a.value?.footer || {}), c = u(() => a.value?.features || {});
-  function p(m) {
-    const g = c.value[m];
+  const o = window.__SITE_DATA__, a = f(() => o?.config || null), t = f(() => o?.components || {}), e = f(() => a.value?.navigation || []), s = f(() => a.value?.locales || []), n = f(() => a.value?.defaultLocale || "en"), i = f(() => a.value?.branding || {}), l = f(() => a.value?.footer || {}), r = f(() => a.value?.features || {});
+  function u(m) {
+    const g = r.value[m];
     return typeof g == "boolean" ? g : typeof g == "object";
   }
   return {
     config: a,
     components: t,
     navigation: e,
-    locales: n,
-    defaultLocale: s,
-    branding: r,
-    footer: i,
-    features: c,
-    hasFeature: p
+    locales: s,
+    defaultLocale: n,
+    branding: i,
+    footer: l,
+    features: r,
+    hasFeature: u
   };
 }
 function H(o) {
   function a(t) {
     const e = document.documentElement;
     if (t.colors)
-      for (const [n, s] of Object.entries(t.colors))
-        s && e.style.setProperty(`--x-color-${D(n)}`, s);
+      for (const [s, n] of Object.entries(t.colors))
+        n && e.style.setProperty(`--x-color-${D(s)}`, n);
     t.typography?.fontFamily && e.style.setProperty("--x-font-family", t.typography.fontFamily), t.typography?.headingFont && e.style.setProperty("--x-font-heading", t.typography.headingFont), t.typography?.baseFontSize && e.style.setProperty("--x-font-size", t.typography.baseFontSize), t.shape?.borderRadius && e.style.setProperty("--x-border-radius", t.shape.borderRadius), t.shape?.maxWidth && e.style.setProperty("--x-max-width", t.shape.maxWidth);
   }
-  T(() => {
+  S(() => {
     if (o) {
       a(o);
       return;
@@ -63,25 +63,25 @@ function D(o) {
 }
 function Q() {
   const a = window.__SITE_DATA__?.apiBase || "";
-  async function t(s) {
-    const r = await fetch(`${a}${s}`);
-    if (!r.ok)
-      throw new Error(`API error: ${r.status}`);
-    return r.json();
+  async function t(n) {
+    const i = await fetch(`${a}${n}`);
+    if (!i.ok)
+      throw new Error(`API error: ${i.status}`);
+    return i.json();
   }
   async function e() {
     return t("/v1/billing/tariffs");
   }
-  async function n() {
+  async function s() {
     return t("/v1/billing/services");
   }
   return {
     get: t,
     getTariffs: e,
-    getProducts: n
+    getProducts: s
   };
 }
-function A() {
+function $() {
   try {
     return window.self !== window.top;
   } catch {
@@ -89,133 +89,141 @@ function A() {
   }
 }
 function V(o) {
-  A() && o.beforeEach((a, t) => !t.name);
+  $() && o.beforeEach((a, t) => !t.name);
 }
 function C() {
-  const o = w(null), a = w(A());
-  function t(e) {
-    const n = e.data;
-    n?.type === "xosen-preview-update" && n.page && (o.value = n.page, a.value = !0);
+  const o = v(null), a = v(null), t = v($());
+  function e(s) {
+    const n = s.data;
+    n?.type === "xosen-preview-update" && n.page && (o.value = n.page, n.site && (a.value = n.site), t.value = !0);
   }
-  return T(() => {
-    window.addEventListener("message", t);
+  return S(() => {
+    window.addEventListener("message", e);
   }), N(() => {
-    window.removeEventListener("message", t);
+    window.removeEventListener("message", e);
   }), {
     previewPage: o,
-    isPreviewMode: a
+    previewSite: a,
+    isPreviewMode: t
   };
 }
-const R = /* @__PURE__ */ Symbol("pageContext"), $ = L({});
+const R = /* @__PURE__ */ Symbol("pageContext"), k = L({});
 function j() {
   const o = window.__SITE_DATA__;
   if (o)
     for (const a of Object.keys(o))
-      a.startsWith("page:") && ($[a] = o[a]);
+      a.startsWith("page:") && (k[a] = o[a]);
 }
 j();
 function ee(o) {
-  const { locale: a } = S(), { previewPage: t, isPreviewMode: e } = C(), n = window.__SITE_DATA__, s = w(null), r = w(!0), i = w(!1), c = u(() => typeof o == "string" ? o : o.value), p = u(() => `page:${c.value}`), m = u(() => {
-    const l = e.value ? t.value : s.value;
-    if (!l) return {};
-    const { blocks: f, meta: d, slug: W, locale: J, ...E } = l;
+  const { locale: a } = T(), { previewPage: t, isPreviewMode: e } = C(), s = window.__SITE_DATA__, n = v(null), i = v(!0), l = v(!1), r = f(() => typeof o == "string" ? o : o.value), u = f(() => `page:${r.value}`), m = f(() => {
+    const c = e.value ? t.value : n.value;
+    if (!c) return {};
+    const { blocks: p, meta: d, slug: W, locale: J, ...E } = c;
     return E;
   });
   P(R, m);
-  const g = u(() => e.value && t.value?.slug === c.value ? t.value.blocks || [] : s.value?.blocks || []);
-  function b(l) {
-    s.value = l, l && ($[p.value] = l);
+  const g = f(() => e.value && t.value?.slug === r.value ? t.value.blocks || [] : n.value?.blocks || []);
+  function b(c) {
+    n.value = c, c && (k[u.value] = c);
   }
   function y() {
-    const l = n?.[p.value];
-    return l && a.value === n?.locale ? (b(l), i.value = !1, v(), !0) : !1;
+    const c = s?.[u.value];
+    return c && a.value === s?.locale ? (b(c), l.value = !1, w(), !0) : !1;
   }
   async function h() {
-    r.value = !0, i.value = !1;
+    i.value = !0, l.value = !1;
     try {
-      const l = await fetch(`/api/content/${p.value}:${a.value}`);
-      l.ok ? (b(await l.json()), v()) : (b(null), i.value = !0);
+      const c = await fetch(`/api/content/${u.value}:${a.value}`);
+      c.ok ? (b(await c.json()), w()) : (b(null), l.value = !0);
     } catch {
-      b(null), i.value = !0;
+      b(null), l.value = !0;
     } finally {
-      r.value = !1;
+      i.value = !1;
     }
   }
-  function v() {
-    if (!s.value) return;
-    if (s.value.title) {
-      const f = n?.config?.branding, d = f?.siteName ? ` — ${f.siteName}` : "";
-      document.title = `${s.value.title}${d}`;
+  function w() {
+    if (!n.value) return;
+    if (n.value.title) {
+      const p = s?.config?.branding, d = p?.siteName ? ` — ${p.siteName}` : "";
+      document.title = `${n.value.title}${d}`;
     }
-    const l = s.value.meta?.description;
-    if (l) {
-      const f = document.querySelector('meta[name="description"]');
-      f && f.setAttribute("content", l);
+    const c = n.value.meta?.description;
+    if (c) {
+      const p = document.querySelector('meta[name="description"]');
+      p && p.setAttribute("content", c);
     }
   }
-  return _(t, (l) => {
-    l?.slug === c.value && (r.value = !1, i.value = !1, (l.title || l.blocks) && (s.value = {
-      ...s.value || {},
-      ...l.title ? { title: l.title } : {},
-      ...l.blocks ? { blocks: l.blocks } : {}
-    }, v()));
-  }), T(() => {
-    y() ? r.value = !1 : h();
-  }), _(a, () => h()), _(c, () => {
-    y() ? r.value = !1 : h();
+  return _(t, (c) => {
+    c?.slug === r.value && (i.value = !1, l.value = !1, (c.title || c.blocks) && (n.value = {
+      ...n.value || {},
+      ...c.title ? { title: c.title } : {},
+      ...c.blocks ? { blocks: c.blocks } : {}
+    }, w()));
+  }), S(() => {
+    y() ? i.value = !1 : h();
+  }), _(a, () => h()), _(r, () => {
+    y() ? i.value = !1 : h();
   }), {
-    page: s,
+    page: n,
     blocks: g,
     pageContext: m,
-    loading: r,
-    notFound: i,
+    loading: i,
+    notFound: l,
     isPreviewMode: e,
     reload: h
   };
 }
 function te() {
-  const { locale: o } = S(), a = window.__SITE_DATA__, t = a?.locale, e = w({ ...a?.components || {} });
-  async function n(r) {
-    if (r === t) {
-      e.value = { ...a?.components || {} };
-      return;
-    }
-    try {
-      const i = await fetch(`/api/content/components:${r}`);
-      i.ok && (e.value = await i.json());
-    } catch {
+  const { locale: o } = T(), a = window.__SITE_DATA__, t = a?.locale, e = v({ ...a?.components || {} });
+  let s = t, n = null;
+  async function i(r) {
+    if (!$() && r !== s) {
+      if (r === t) {
+        e.value = { ...a?.components || {} }, s = r;
+        return;
+      }
+      n || (n = (async () => {
+        try {
+          const u = await fetch(`/api/content/components:${r}`);
+          u.ok && (e.value = await u.json(), s = r);
+        } catch {
+        } finally {
+          n = null;
+        }
+      })(), await n);
     }
   }
-  _(o, (r) => n(r)), T(() => {
-    o.value !== t && n(o.value);
+  _(o, (r) => i(r)), S(() => {
+    o.value !== t && i(o.value);
   });
-  function s(r) {
-    return u(() => e.value[r] || null);
+  function l(r) {
+    return f(() => e.value[r] || null);
   }
   return {
     /** All components (reactive, locale-aware) */
     components: e,
     /** Get a single component by key */
-    getComponent: s,
+    getComponent: l,
     /** Force refetch for current locale */
-    reload: () => n(o.value)
+    reload: () => i(o.value)
   };
 }
 function ae() {
-  const { locale: o } = S(), a = window.__SITE_DATA__, t = u(() => a?.config?.locales || []), e = u(() => a?.config?.defaultLocale || "en"), n = u(() => t.value.length > 1);
-  function s(i) {
-    o.value = i, localStorage.setItem("x-site-locale", i);
+  const { locale: o } = T(), a = window.__SITE_DATA__, t = f(() => a?.config?.locales || []), e = f(() => a?.config?.defaultLocale || "en"), s = f(() => t.value.length > 1);
+  function n(l) {
+    o.value = l, localStorage.setItem("x-site-locale", l);
   }
-  function r(i) {
-    return typeof i == "string" ? i : i[o.value] || i[e.value] || Object.values(i)[0] || "";
+  function i(l) {
+    return typeof l == "string" ? l : l[o.value] || l[e.value] || Object.values(l)[0] || "";
   }
   return {
     locale: o,
     locales: t,
     defaultLocale: e,
-    hasMultipleLocales: n,
-    switchLocale: s,
-    resolveText: r
+    hasMultipleLocales: s,
+    switchLocale: n,
+    resolveText: i
   };
 }
 const O = {
@@ -245,10 +253,10 @@ const O = {
     main: { type: "slot" }
   }
 };
-function k(o, a) {
+function x(o, a) {
   const t = [];
   if (o.areas?.length) {
-    const e = o.areas.map((n) => `"${n}"`).join(" ");
+    const e = o.areas.map((s) => `"${s}"`).join(" ");
     t.push(`grid-template-areas: ${e}`);
   }
   return o.columns && t.push(`grid-template-columns: ${o.columns}`), o.rows && t.push(`grid-template-rows: ${o.rows}`), o.gap && t.push(`gap: ${o.gap}`), t.length ? `${a} { ${t.join("; ")}; }` : "";
@@ -258,39 +266,39 @@ function G(o, a) {
   if (!e) return t.join(`
 `);
   if (e.default) {
-    const n = k(e.default, a);
-    n && t.push(n);
+    const s = x(e.default, a);
+    s && t.push(s);
   }
-  for (const n of ["sm", "md", "lg", "xl"]) {
-    const s = e[n];
-    if (!s) continue;
-    const r = k(s, a);
-    r && t.push(`@media (min-width: ${O[n]}px) { ${r} }`);
+  for (const s of ["sm", "md", "lg", "xl"]) {
+    const n = e[s];
+    if (!n) continue;
+    const i = x(n, a);
+    i && t.push(`@media (min-width: ${O[s]}px) { ${i} }`);
   }
   return t.join(`
 `);
 }
 function oe() {
-  const o = I(), { previewPage: a, isPreviewMode: t } = C(), e = window.__SITE_DATA__, n = `dl-${Math.random().toString(36).slice(2, 8)}`, s = u(() => ["dynamic-layout", n]), r = u(() => {
+  const o = I(), { previewPage: a, isPreviewMode: t } = C(), e = window.__SITE_DATA__, s = `dl-${Math.random().toString(36).slice(2, 8)}`, n = f(() => ["dynamic-layout", s]), i = f(() => {
     if (o.path === "/_preview_")
       return a.value?.layout || "landing";
     if (t.value && a.value?.layout)
       return a.value.layout;
-    const p = o.path === "/" ? "page:home" : `page:${o.params.slug || ""}`;
-    return ($[p] || e?.[p])?.layout || "default";
-  }), i = u(() => {
-    const p = e?.config?.layouts;
-    if (p) {
-      const m = p[r.value] || p.default;
+    const u = o.path === "/" ? "page:home" : `page:${o.params.slug || ""}`;
+    return (k[u] || e?.[u])?.layout || "default";
+  }), l = f(() => {
+    const u = e?.config?.layouts;
+    if (u) {
+      const m = u[i.value] || u.default;
       if (m?.zones) return m;
     }
-    return r.value === "landing" ? F : z;
-  }), c = u(() => G(i.value, `.${n}`));
+    return i.value === "landing" ? F : z;
+  }), r = f(() => G(l.value, `.${s}`));
   return {
-    layoutName: r,
-    layoutConfig: i,
-    layoutCSS: c,
-    layoutClass: s
+    layoutName: i,
+    layoutConfig: l,
+    layoutCSS: r,
+    layoutClass: n
   };
 }
 const ne = {
@@ -299,7 +307,13 @@ const ne = {
   description: "CSS Grid layout with responsive breakpoints and component zones",
   fields: [
     // Mobile (default)
-    { key: "grid.default.areas", type: "grid-areas", label: "Grid Areas (mobile)", breakpoint: "default", required: !0 },
+    {
+      key: "grid.default.areas",
+      type: "grid-areas",
+      label: "Grid Areas (mobile)",
+      breakpoint: "default",
+      required: !0
+    },
     { key: "grid.default.columns", type: "text", label: "Columns (mobile)", breakpoint: "default" },
     { key: "grid.default.rows", type: "text", label: "Rows (mobile)", breakpoint: "default" },
     { key: "grid.default.gap", type: "text", label: "Gap (mobile)", breakpoint: "default" },
@@ -385,7 +399,12 @@ const ne = {
     config: {
       grid: {
         default: { areas: ["header", "main", "aside", "footer"], columns: "1fr", rows: "auto 1fr auto auto" },
-        md: { areas: ["header header header", "main main aside", "footer footer footer"], columns: "1fr 1fr 300px", rows: "auto 1fr auto", gap: "24px" }
+        md: {
+          areas: ["header header header", "main main aside", "footer footer footer"],
+          columns: "1fr 1fr 300px",
+          rows: "auto 1fr auto",
+          gap: "24px"
+        }
       },
       zones: {
         header: { component: "nav-menu" },
@@ -400,9 +419,9 @@ function U(o, a) {
   const e = new URL(o.url).searchParams.get("lang");
   if (e && a.supportedLocales?.includes(e)) return e;
   if (a.supportedLocales?.length) {
-    const n = o.headers.get("Accept-Language") || "";
-    for (const s of a.supportedLocales)
-      if (n.includes(s)) return s;
+    const s = o.headers.get("Accept-Language") || "";
+    for (const n of a.supportedLocales)
+      if (s.includes(n)) return n;
   }
   return a.defaultLocale;
 }
@@ -410,12 +429,12 @@ function K(o, a, t) {
   if (!o.pathname.startsWith("/api/content/")) return null;
   const e = decodeURIComponent(o.pathname.replace("/api/content/", ""));
   return e ? (async () => {
-    let n = await a.SITE_CONTENT.get(e);
-    if (!n) {
-      const s = e.lastIndexOf(":");
-      s > 0 && e.slice(s + 1) !== t && (n = await a.SITE_CONTENT.get(e.slice(0, s + 1) + t));
+    let s = await a.SITE_CONTENT.get(e);
+    if (!s) {
+      const n = e.lastIndexOf(":");
+      n > 0 && e.slice(n + 1) !== t && (s = await a.SITE_CONTENT.get(e.slice(0, n + 1) + t));
     }
-    return n ? new Response(n, {
+    return s ? new Response(s, {
       headers: {
         "Content-Type": "application/json",
         "Cache-Control": "public, max-age=60",
@@ -424,54 +443,54 @@ function K(o, a, t) {
     }) : Response.json({ error: "Not found" }, { status: 404 });
   })() : Promise.resolve(Response.json({ error: "Key is required" }, { status: 400 }));
 }
-function x(o, a, t) {
+function A(o, a, t) {
   let e = o;
   if (a.title) {
-    const n = t ? ` — ${t}` : "";
-    e = e.replace(/<title>[^<]*<\/title>/, `<title>${a.title}${n}</title>`);
+    const s = t ? ` — ${t}` : "";
+    e = e.replace(/<title>[^<]*<\/title>/, `<title>${a.title}${s}</title>`);
   }
   return a.meta?.description && (e = e.replace(/(<meta\s+name="description"\s+content=")[^"]*(")/, `$1${a.meta.description}$2`)), a.meta?.ogTitle && (e = e.replace(/(<meta\s+property="og:title"\s+content=")[^"]*(")/, `$1${a.meta.ogTitle}$2`)), a.html && (e = e.replace('<div id="app"></div>', `<div id="app">${a.html}</div>`)), e;
 }
 function re(o) {
   return {
     async fetch(a, t) {
-      const e = new URL(a.url), n = K(e, t, o.defaultLocale);
-      if (n) return n;
+      const e = new URL(a.url), s = K(e, t, o.defaultLocale);
+      if (s) return s;
       if (M.test(e.pathname))
         return t.ASSETS.fetch(a);
-      const s = U(a, o), r = new URL("/index.html", a.url);
-      let c = await (await t.ASSETS.fetch(new Request(r))).text();
-      const p = o.defaultLocale, [m, g] = await Promise.all([
+      const n = U(a, o), i = new URL("/index.html", a.url);
+      let r = await (await t.ASSETS.fetch(new Request(i))).text();
+      const u = o.defaultLocale, [m, g] = await Promise.all([
         t.SITE_CONTENT.get("config"),
-        t.SITE_CONTENT.get(`content:${s}`)
+        t.SITE_CONTENT.get(`content:${n}`)
       ]), b = m ? JSON.parse(m) : {};
       let y = g ? JSON.parse(g) : {};
-      if (!g && s !== p) {
-        const f = await t.SITE_CONTENT.get(`content:${p}`);
-        f && (y = JSON.parse(f));
+      if (!g && n !== u) {
+        const p = await t.SITE_CONTENT.get(`content:${u}`);
+        p && (y = JSON.parse(p));
       }
       const h = e.pathname.match(/^\/p\/(.+)$/);
       if (h) {
-        const f = h[1];
-        if (!y[f]) {
-          let d = await t.SITE_CONTENT.get(`page:${f}:${s}`);
-          !d && s !== p && (d = await t.SITE_CONTENT.get(`page:${f}:${p}`)), d && (y[f] = JSON.parse(d));
+        const p = h[1];
+        if (!y[p]) {
+          let d = await t.SITE_CONTENT.get(`page:${p}:${n}`);
+          !d && n !== u && (d = await t.SITE_CONTENT.get(`page:${p}:${u}`)), d && (y[p] = JSON.parse(d));
         }
       }
-      const v = {
-        locale: s,
+      const w = {
+        locale: n,
         config: b
       };
-      for (const [f, d] of Object.entries(y))
-        v[`page:${f}`] = d;
+      for (const [p, d] of Object.entries(y))
+        w[`page:${p}`] = d;
       if (h) {
-        const f = h[1], d = v[`page:${f}`];
-        d && (c = x(c, d, o.siteName));
+        const p = h[1], d = w[`page:${p}`];
+        d && (r = A(r, d, o.siteName));
       }
-      e.pathname === "/" && y.home && (c = x(c, y.home, o.siteName));
-      const l = `<script>window.__SITE_DATA__ = ${JSON.stringify(v)};<\/script>`;
-      return c = c.replace("</head>", `${l}
-</head>`), new Response(c, {
+      e.pathname === "/" && y.home && (r = A(r, y.home, o.siteName));
+      const c = `<script>window.__SITE_DATA__ = ${JSON.stringify(w)};<\/script>`;
+      return r = r.replace("</head>", `${c}
+</head>`), new Response(r, {
         headers: {
           "Content-Type": "text/html;charset=utf-8",
           "Cache-Control": "public, max-age=60"
@@ -484,7 +503,7 @@ export {
   R as PAGE_CONTEXT_KEY,
   G as buildLayoutCSS,
   re as createSiteWorker,
-  A as isInPreview,
+  $ as isInPreview,
   se as layoutPresets,
   ne as layoutSchema,
   V as setupPreviewRouter,

package/dist/types/blocks.d.ts

@@ -18,7 +18,8 @@ export interface HeroBlockData {
     badge?: string;
     image?: string;
     backgroundImage?: string;
-    overlay?: boolean;
+    /** Overlay: false to disable, number (0-1) for opacity, or CSS string for custom gradient */
+    overlay?: boolean | number | string;
     buttons?: Array<{
         text: string;
         url: string;

package/dist/types/layout.d.ts

@@ -12,6 +12,7 @@ export interface LayoutZone {
     type?: 'slot';
     component?: string;
     class?: string;
+    style?: Record<string, string>;
     container?: boolean;
     containerStyle?: Record<string, string>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xosen/site-sdk",
-  "version": "0.0.14",
+  "version": "0.0.16",
   "description": "Shared Vue components and composables for Xosen site templates",
   "type": "module",
   "main": "./dist/index.js",
@@ -24,23 +24,23 @@
     "dist",
     "src"
   ],
+  "scripts": {
+    "build": "vite build && vue-tsc --declaration --emitDeclarationOnly --outDir dist",
+    "dev": "vite build --watch",
+    "clean": "rm -rf dist"
+  },
   "peerDependencies": {
     "vue": "^3.5.0",
     "vue-i18n": "^11.0.0",
     "vue-router": "^5.0.0"
   },
   "devDependencies": {
-    "vue": "^3.5.30",
-    "vue-i18n": "^11.3.0",
-    "vue-router": "^5.0.3",
-    "vue-tsc": "^3.2.5",
-    "typescript": "^5.9.3",
-    "vite": "^7.3.1",
-    "@vitejs/plugin-vue": "^6.0.5"
-  },
-  "scripts": {
-    "build": "vite build && vue-tsc --declaration --emitDeclarationOnly --outDir dist",
-    "dev": "vite build --watch",
-    "clean": "rm -rf dist"
+    "vue": "catalog:",
+    "vue-i18n": "catalog:",
+    "vue-router": "catalog:",
+    "vue-tsc": "catalog:",
+    "typescript": "catalog:",
+    "vite": "catalog:",
+    "@vitejs/plugin-vue": "catalog:"
   }
-}
+}

package/src/composables/useLivePreview.ts

@@ -1,8 +1,15 @@
 import { ref, onMounted, onUnmounted } from 'vue';
 import type { Router } from 'vue-router';
 
+export interface PreviewSiteData {
+  config?: Record<string, any>;
+  skin?: Record<string, any>;
+  components?: Record<string, any>;
+}
+
 export interface PreviewMessage {
   type: 'xosen-preview-update';
+  site?: PreviewSiteData;
   page: {
     slug: string;
     locale: string;
@@ -45,12 +52,16 @@ export function setupPreviewRouter(router: Router) {
  */
 export function useLivePreview() {
   const previewPage = ref<PreviewMessage['page'] | null>(null);
+  const previewSite = ref<PreviewSiteData | null>(null);
   const isPreviewMode = ref(isInPreview());
 
   function handleMessage(event: MessageEvent) {
     const data = event.data;
     if (data?.type === 'xosen-preview-update' && data.page) {
       previewPage.value = data.page;
+      if (data.site) {
+        previewSite.value = data.site;
+      }
       isPreviewMode.value = true;
     }
   }
@@ -65,6 +76,7 @@ export function useLivePreview() {
 
   return {
     previewPage,
+    previewSite,
     isPreviewMode,
   };
 }

package/src/composables/usePageData.ts

@@ -40,7 +40,7 @@ export function usePageData(slug: Ref<string> | string): UsePageDataReturn {
   const loading = ref(true);
   const notFound = ref(false);
 
-  const resolvedSlug = computed(() => typeof slug === 'string' ? slug : slug.value);
+  const resolvedSlug = computed(() => (typeof slug === 'string' ? slug : slug.value));
   const pageKey = computed(() => `page:${resolvedSlug.value}`);
 
   // Page context: page metadata without blocks (for injection)
@@ -121,7 +121,7 @@ export function usePageData(slug: Ref<string> | string): UsePageDataReturn {
       notFound.value = false;
       if (p.title || p.blocks) {
         page.value = {
-          ...(page.value || {} as PageConfig),
+          ...(page.value || ({} as PageConfig)),
           ...(p.title ? { title: p.title } : {}),
           ...(p.blocks ? { blocks: p.blocks as Block[] } : {}),
         };

package/src/composables/useSiteComponents.ts

@@ -2,6 +2,7 @@ import { ref, computed, watch, onMounted, type Ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import type { SiteData } from '../types/config.js';
+import { isInPreview } from './useLivePreview.js';
 
 /**
  * Locale-aware access to site components (navigation, footer, sidebar, etc.).
@@ -14,22 +15,42 @@ export function useSiteComponents() {
   const siteData = (window as any).__SITE_DATA__ as SiteData | undefined;
   const initialLocale = siteData?.locale;
 
-  const components = ref<Record<string, any>>({ ...(siteData as any)?.components || {} });
+  const components = ref<Record<string, any>>({ ...((siteData as any)?.components || {}) });
+  let lastFetchedLocale: string | undefined = initialLocale;
+  let fetchPromise: Promise<void> | null = null;
 
   async function fetchComponents(loc: string) {
+    // Skip fetching in preview mode — components come via postMessage
+    if (isInPreview()) return;
+
+    // Skip if already fetched/loaded for this locale
+    if (loc === lastFetchedLocale) return;
+
     // If same as initial locale, use preloaded data
     if (loc === initialLocale) {
-      components.value = { ...(siteData as any)?.components || {} };
+      components.value = { ...((siteData as any)?.components || {}) };
+      lastFetchedLocale = loc;
       return;
     }
-    try {
-      const res = await fetch(`/api/content/components:${loc}`);
-      if (res.ok) {
-        components.value = await res.json();
+
+    // Deduplicate concurrent fetches
+    if (fetchPromise) return;
+
+    fetchPromise = (async () => {
+      try {
+        const res = await fetch(`/api/content/components:${loc}`);
+        if (res.ok) {
+          components.value = await res.json();
+          lastFetchedLocale = loc;
+        }
+      } catch {
+        // Keep current
+      } finally {
+        fetchPromise = null;
       }
-    } catch {
-      // Keep current
-    }
+    })();
+
+    await fetchPromise;
   }
 
   watch(locale, (newLocale) => fetchComponents(newLocale));

package/src/index.ts

@@ -11,7 +11,7 @@ export { useLocaleSwitcher } from './composables/useLocaleSwitcher.js';
 export { useDynamicLayout, buildLayoutCSS } from './composables/useDynamicLayout.js';
 export type { LayoutConfig, LayoutZone, GridBreakpoint, LayoutSchemaDefinition, LayoutField } from './types/layout.js';
 export { layoutSchema, layoutPresets } from './types/layout.js';
-export type { PreviewMessage } from './composables/useLivePreview.js';
+export type { PreviewMessage, PreviewSiteData } from './composables/useLivePreview.js';
 
 // Worker
 export { createSiteWorker } from './worker/index.js';

package/src/types/blocks.ts

@@ -20,7 +20,8 @@ export interface HeroBlockData {
   badge?: string;
   image?: string;
   backgroundImage?: string;
-  overlay?: boolean;
+  /** Overlay: false to disable, number (0-1) for opacity, or CSS string for custom gradient */
+  overlay?: boolean | number | string;
   buttons?: Array<{ text: string; url: string; variant?: 'primary' | 'outline' | 'white' }>;
   stats?: Array<{ value: string; label: string }>;
 }

package/src/types/layout.ts

@@ -14,6 +14,7 @@ export interface LayoutZone {
   type?: 'slot';
   component?: string;
   class?: string;
+  style?: Record<string, string>;
   container?: boolean;
   containerStyle?: Record<string, string>;
 }
@@ -50,7 +51,13 @@ export const layoutSchema: LayoutSchemaDefinition = {
   description: 'CSS Grid layout with responsive breakpoints and component zones',
   fields: [
     // Mobile (default)
-    { key: 'grid.default.areas', type: 'grid-areas', label: 'Grid Areas (mobile)', breakpoint: 'default', required: true },
+    {
+      key: 'grid.default.areas',
+      type: 'grid-areas',
+      label: 'Grid Areas (mobile)',
+      breakpoint: 'default',
+      required: true,
+    },
     { key: 'grid.default.columns', type: 'text', label: 'Columns (mobile)', breakpoint: 'default' },
     { key: 'grid.default.rows', type: 'text', label: 'Rows (mobile)', breakpoint: 'default' },
     { key: 'grid.default.gap', type: 'text', label: 'Gap (mobile)', breakpoint: 'default' },
@@ -145,7 +152,12 @@ export const layoutPresets: Record<string, { displayName: string; config: Layout
     config: {
       grid: {
         default: { areas: ['header', 'main', 'aside', 'footer'], columns: '1fr', rows: 'auto 1fr auto auto' },
-        md: { areas: ['header header header', 'main main aside', 'footer footer footer'], columns: '1fr 1fr 300px', rows: 'auto 1fr auto', gap: '24px' },
+        md: {
+          areas: ['header header header', 'main main aside', 'footer footer footer'],
+          columns: '1fr 1fr 300px',
+          rows: 'auto 1fr auto',
+          gap: '24px',
+        },
       },
       zones: {
         header: { component: 'nav-menu' },