@xosen/site-sdk 0.0.13 → 0.0.14

package/dist/composables/pageDataStore.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Shared reactive store for page data loaded via usePageData.
+ * Allows useDynamicLayout to reactively read layout from fetched pages.
+ */
+export declare const pageDataStore: Record<string, any>;
+/**
+ * Initialize store with preloaded data from __SITE_DATA__.
+ */
+export declare function initPageDataStore(): void;

package/dist/index.js

@@ -1,29 +1,29 @@
-import { ref as w, onMounted as _, watch as b, computed as c, onUnmounted as E, provide as N } from "vue";
+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 { useRoute as L } from "vue-router";
-function J(o, a) {
+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;
   }
   async function i() {
     try {
-      const u = await fetch(`/api/content/${a}:${e.value}`);
-      u.ok && (t.value = await u.json());
+      const c = await fetch(`/api/content/${a}:${e.value}`);
+      c.ok && (t.value = await c.json());
     } catch {
     }
   }
-  return _(() => {
+  return T(() => {
     r() || i();
-  }), b(e, () => {
+  }), _(e, () => {
     i();
   }), t;
 }
-function B() {
-  const o = window.__SITE_DATA__, a = c(() => o?.config || null), t = c(() => o?.components || {}), e = c(() => a.value?.navigation || []), n = c(() => a.value?.locales || []), s = c(() => a.value?.defaultLocale || "en"), r = c(() => a.value?.branding || {}), i = c(() => a.value?.footer || {}), u = c(() => a.value?.features || {});
-  function f(d) {
-    const y = u.value[d];
-    return typeof y == "boolean" ? y : typeof y == "object";
+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];
+    return typeof g == "boolean" ? g : typeof g == "object";
   }
   return {
     config: a,
@@ -33,19 +33,19 @@ function B() {
     defaultLocale: s,
     branding: r,
     footer: i,
-    features: u,
-    hasFeature: f
+    features: c,
+    hasFeature: p
   };
 }
-function Y(o) {
+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-${P(n)}`, s);
+        s && e.style.setProperty(`--x-color-${D(n)}`, s);
     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(() => {
     if (o) {
       a(o);
       return;
@@ -58,10 +58,10 @@ function Y(o) {
     });
   });
 }
-function P(o) {
+function D(o) {
   return o.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
 }
-function X() {
+function Q() {
   const a = window.__SITE_DATA__?.apiBase || "";
   async function t(s) {
     const r = await fetch(`${a}${s}`);
@@ -81,89 +81,99 @@ function X() {
     getProducts: n
   };
 }
-function x() {
+function A() {
   try {
     return window.self !== window.top;
   } catch {
     return !0;
   }
 }
-function Z(o) {
-  x() && o.beforeEach((a, t) => !t.name);
+function V(o) {
+  A() && o.beforeEach((a, t) => !t.name);
 }
-function A() {
-  const o = w(null), a = w(x());
+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);
   }
-  return _(() => {
+  return T(() => {
     window.addEventListener("message", t);
-  }), E(() => {
+  }), N(() => {
     window.removeEventListener("message", t);
   }), {
     previewPage: o,
     isPreviewMode: a
   };
 }
-const I = /* @__PURE__ */ Symbol("pageContext");
-function q(o) {
-  const { locale: a } = S(), { previewPage: t, isPreviewMode: e } = A(), n = window.__SITE_DATA__, s = w(null), r = w(!0), i = w(!1), u = c(() => typeof o == "string" ? o : o.value), f = c(() => `page:${u.value}`), d = c(() => {
+const R = /* @__PURE__ */ Symbol("pageContext"), $ = L({});
+function j() {
+  const o = window.__SITE_DATA__;
+  if (o)
+    for (const a of Object.keys(o))
+      a.startsWith("page:") && ($[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: v, meta: p, slug: g, locale: M, ...C } = l;
-    return C;
+    const { blocks: f, meta: d, slug: W, locale: J, ...E } = l;
+    return E;
   });
-  N(I, d);
-  const y = c(() => e.value && t.value?.slug === u.value ? t.value.blocks || [] : s.value?.blocks || []);
-  function T() {
-    const l = n?.[f.value];
-    return l && a.value === n?.locale ? (s.value = l, i.value = !1, h(), !0) : !1;
+  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);
+  }
+  function y() {
+    const l = n?.[p.value];
+    return l && a.value === n?.locale ? (b(l), i.value = !1, v(), !0) : !1;
   }
-  async function m() {
+  async function h() {
     r.value = !0, i.value = !1;
     try {
-      const l = await fetch(`/api/content/${f.value}:${a.value}`);
-      l.ok ? (s.value = await l.json(), h()) : (s.value = null, i.value = !0);
+      const l = await fetch(`/api/content/${p.value}:${a.value}`);
+      l.ok ? (b(await l.json()), v()) : (b(null), i.value = !0);
     } catch {
-      s.value = null, i.value = !0;
+      b(null), i.value = !0;
     } finally {
       r.value = !1;
     }
   }
-  function h() {
+  function v() {
     if (!s.value) return;
     if (s.value.title) {
-      const v = n?.config?.branding, p = v?.siteName ? ` — ${v.siteName}` : "";
-      document.title = `${s.value.title}${p}`;
+      const f = n?.config?.branding, d = f?.siteName ? ` — ${f.siteName}` : "";
+      document.title = `${s.value.title}${d}`;
     }
     const l = s.value.meta?.description;
     if (l) {
-      const v = document.querySelector('meta[name="description"]');
-      v && v.setAttribute("content", l);
+      const f = document.querySelector('meta[name="description"]');
+      f && f.setAttribute("content", l);
     }
   }
-  return b(t, (l) => {
-    l?.slug === u.value && (r.value = !1, i.value = !1, (l.title || l.blocks) && (s.value = {
+  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 } : {}
-    }, h()));
-  }), _(() => {
-    T() ? r.value = !1 : m();
-  }), b(a, () => m()), b(u, () => {
-    T() ? r.value = !1 : m();
+    }, v()));
+  }), T(() => {
+    y() ? r.value = !1 : h();
+  }), _(a, () => h()), _(c, () => {
+    y() ? r.value = !1 : h();
   }), {
     page: s,
-    blocks: y,
-    pageContext: d,
+    blocks: g,
+    pageContext: m,
     loading: r,
     notFound: i,
     isPreviewMode: e,
-    reload: m
+    reload: h
   };
 }
-function 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) {
@@ -176,11 +186,11 @@ function H() {
     } catch {
     }
   }
-  b(o, (r) => n(r)), _(() => {
+  _(o, (r) => n(r)), T(() => {
     o.value !== t && n(o.value);
   });
   function s(r) {
-    return c(() => e.value[r] || null);
+    return u(() => e.value[r] || null);
   }
   return {
     /** All components (reactive, locale-aware) */
@@ -191,8 +201,8 @@ function H() {
     reload: () => n(o.value)
   };
 }
-function Q() {
-  const { locale: o } = S(), a = window.__SITE_DATA__, t = c(() => a?.config?.locales || []), e = c(() => a?.config?.defaultLocale || "en"), n = c(() => t.value.length > 1);
+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);
   }
@@ -208,12 +218,12 @@ function Q() {
     resolveText: r
   };
 }
-const R = {
+const O = {
   sm: 600,
   md: 960,
   lg: 1280,
   xl: 1920
-}, D = {
+}, z = {
   grid: {
     default: {
       areas: ["header", "main", "footer"],
@@ -225,7 +235,7 @@ const R = {
     main: { type: "slot" },
     footer: { component: "footer" }
   }
-}, j = {
+}, F = {
   grid: {
     default: {
       areas: ["main"]
@@ -235,7 +245,7 @@ const R = {
     main: { type: "slot" }
   }
 };
-function $(o, a) {
+function k(o, a) {
   const t = [];
   if (o.areas?.length) {
     const e = o.areas.map((n) => `"${n}"`).join(" ");
@@ -243,47 +253,47 @@ function $(o, a) {
   }
   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("; ")}; }` : "";
 }
-function O(o, a) {
+function G(o, a) {
   const t = [`${a} { display: grid; min-height: 100vh; }`], e = o.grid;
   if (!e) return t.join(`
 `);
   if (e.default) {
-    const n = $(e.default, a);
+    const n = k(e.default, a);
     n && t.push(n);
   }
   for (const n of ["sm", "md", "lg", "xl"]) {
     const s = e[n];
     if (!s) continue;
-    const r = $(s, a);
-    r && t.push(`@media (min-width: ${R[n]}px) { ${r} }`);
+    const r = k(s, a);
+    r && t.push(`@media (min-width: ${O[n]}px) { ${r} }`);
   }
   return t.join(`
 `);
 }
-function V() {
-  const o = L(), { previewPage: a, isPreviewMode: t } = A(), e = window.__SITE_DATA__, n = `dl-${Math.random().toString(36).slice(2, 8)}`, s = c(() => ["dynamic-layout", n]), r = c(() => {
+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(() => {
     if (o.path === "/_preview_")
       return a.value?.layout || "landing";
     if (t.value && a.value?.layout)
       return a.value.layout;
-    const f = o.path === "/" ? "page:home" : `page:${o.params.slug || ""}`;
-    return e?.[f]?.layout || "default";
-  }), i = c(() => {
-    const f = e?.config?.layouts;
-    if (f) {
-      const d = f[r.value] || f.default;
-      if (d?.zones) return d;
+    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;
+      if (m?.zones) return m;
     }
-    return r.value === "landing" ? j : D;
-  }), u = c(() => O(i.value, `.${n}`));
+    return r.value === "landing" ? F : z;
+  }), c = u(() => G(i.value, `.${n}`));
   return {
     layoutName: r,
     layoutConfig: i,
-    layoutCSS: u,
+    layoutCSS: c,
     layoutClass: s
   };
 }
-const ee = {
+const ne = {
   type: "layout",
   displayName: "Layout",
   description: "CSS Grid layout with responsive breakpoints and component zones",
@@ -317,7 +327,7 @@ const ee = {
     { key: "class", type: "text", label: "CSS Class" },
     { key: "container", type: "switch", label: "Wrap in Container" }
   ]
-}, te = {
+}, se = {
   default: {
     displayName: "Full Width",
     config: {
@@ -385,8 +395,8 @@ const ee = {
       }
     }
   }
-}, z = /\.(js|css|png|jpg|jpeg|gif|svg|ico|woff2?|ttf|eot|webp|avif|map|json|txt|xml|webmanifest)$/;
-function F(o, a) {
+}, M = /\.(js|css|png|jpg|jpeg|gif|svg|ico|woff2?|ttf|eot|webp|avif|map|json|txt|xml|webmanifest)$/;
+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) {
@@ -396,7 +406,7 @@ function F(o, a) {
   }
   return a.defaultLocale;
 }
-function G(o, a, t) {
+function K(o, a, t) {
   if (!o.pathname.startsWith("/api/content/")) return null;
   const e = decodeURIComponent(o.pathname.replace("/api/content/", ""));
   return e ? (async () => {
@@ -414,7 +424,7 @@ function G(o, a, t) {
     }) : Response.json({ error: "Not found" }, { status: 404 });
   })() : Promise.resolve(Response.json({ error: "Key is required" }, { status: 400 }));
 }
-function k(o, a, t) {
+function x(o, a, t) {
   let e = o;
   if (a.title) {
     const n = t ? ` — ${t}` : "";
@@ -422,46 +432,46 @@ function k(o, a, t) {
   }
   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 ae(o) {
+function re(o) {
   return {
     async fetch(a, t) {
-      const e = new URL(a.url), n = G(e, t, o.defaultLocale);
+      const e = new URL(a.url), n = K(e, t, o.defaultLocale);
       if (n) return n;
-      if (z.test(e.pathname))
+      if (M.test(e.pathname))
         return t.ASSETS.fetch(a);
-      const s = F(a, o), r = new URL("/index.html", a.url);
-      let u = await (await t.ASSETS.fetch(new Request(r))).text();
-      const f = o.defaultLocale, [d, y] = await Promise.all([
+      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([
         t.SITE_CONTENT.get("config"),
         t.SITE_CONTENT.get(`content:${s}`)
-      ]), T = d ? JSON.parse(d) : {};
-      let m = y ? JSON.parse(y) : {};
-      if (!y && s !== f) {
-        const p = await t.SITE_CONTENT.get(`content:${f}`);
-        p && (m = JSON.parse(p));
+      ]), 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));
       }
       const h = e.pathname.match(/^\/p\/(.+)$/);
       if (h) {
-        const p = h[1];
-        if (!m[p]) {
-          let g = await t.SITE_CONTENT.get(`page:${p}:${s}`);
-          !g && s !== f && (g = await t.SITE_CONTENT.get(`page:${p}:${f}`)), g && (m[p] = JSON.parse(g));
+        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 l = {
+      const v = {
         locale: s,
-        config: T
+        config: b
       };
-      for (const [p, g] of Object.entries(m))
-        l[`page:${p}`] = g;
+      for (const [f, d] of Object.entries(y))
+        v[`page:${f}`] = d;
       if (h) {
-        const p = h[1], g = l[`page:${p}`];
-        g && (u = k(u, g, o.siteName));
+        const f = h[1], d = v[`page:${f}`];
+        d && (c = x(c, d, o.siteName));
       }
-      e.pathname === "/" && m.home && (u = k(u, m.home, o.siteName));
-      const v = `<script>window.__SITE_DATA__ = ${JSON.stringify(l)};<\/script>`;
-      return u = u.replace("</head>", `${v}
-</head>`), new Response(u, {
+      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, {
         headers: {
           "Content-Type": "text/html;charset=utf-8",
           "Cache-Control": "public, max-age=60"
@@ -471,20 +481,20 @@ function ae(o) {
   };
 }
 export {
-  I as PAGE_CONTEXT_KEY,
-  O as buildLayoutCSS,
-  ae as createSiteWorker,
-  x as isInPreview,
-  te as layoutPresets,
-  ee as layoutSchema,
-  Z as setupPreviewRouter,
-  V as useDynamicLayout,
-  A as useLivePreview,
-  Q as useLocaleSwitcher,
-  q as usePageData,
-  X as useSiteApi,
-  H as useSiteComponents,
-  B as useSiteConfig,
-  J as useSiteData,
-  Y as useSkin
+  R as PAGE_CONTEXT_KEY,
+  G as buildLayoutCSS,
+  re as createSiteWorker,
+  A as isInPreview,
+  se as layoutPresets,
+  ne as layoutSchema,
+  V as setupPreviewRouter,
+  oe as useDynamicLayout,
+  C as useLivePreview,
+  ae as useLocaleSwitcher,
+  ee as usePageData,
+  Q as useSiteApi,
+  te as useSiteComponents,
+  q as useSiteConfig,
+  Z as useSiteData,
+  H as useSkin
 };

package/package.json

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

package/src/composables/pageDataStore.ts

@@ -0,0 +1,24 @@
+import { reactive } from 'vue';
+
+/**
+ * Shared reactive store for page data loaded via usePageData.
+ * Allows useDynamicLayout to reactively read layout from fetched pages.
+ */
+export const pageDataStore = reactive<Record<string, any>>({});
+
+/**
+ * Initialize store with preloaded data from __SITE_DATA__.
+ */
+export function initPageDataStore() {
+  const siteData = (window as any).__SITE_DATA__;
+  if (!siteData) return;
+
+  for (const key of Object.keys(siteData)) {
+    if (key.startsWith('page:')) {
+      pageDataStore[key] = siteData[key];
+    }
+  }
+}
+
+// Auto-init on import
+initPageDataStore();

package/src/composables/useDynamicLayout.ts

@@ -1,9 +1,10 @@
-import { computed, type Ref } from 'vue';
+import { computed } from 'vue';
 import { useRoute } from 'vue-router';
 
 import type { SiteData } from '../types/config.js';
 import type { GridBreakpoint, LayoutConfig } from '../types/layout.js';
 import { useLivePreview } from './useLivePreview.js';
+import { pageDataStore } from './pageDataStore.js';
 
 const BREAKPOINTS: Record<string, number> = {
   sm: 600,
@@ -102,7 +103,8 @@ export function useDynamicLayout() {
       return previewPage.value.layout;
     }
     const pageKey = route.path === '/' ? 'page:home' : `page:${route.params.slug || ''}`;
-    const pageData = siteData?.[pageKey];
+    // Read from reactive store (updated by usePageData on fetch)
+    const pageData = pageDataStore[pageKey] || siteData?.[pageKey];
     return pageData?.layout || 'default';
   });
 

package/src/composables/usePageData.ts

@@ -5,6 +5,7 @@ import type { Block } from '../types/blocks.js';
 import type { PageConfig, PageContext, SiteData } from '../types/config.js';
 import { PAGE_CONTEXT_KEY } from '../types/config.js';
 import { useLivePreview } from './useLivePreview.js';
+import { pageDataStore } from './pageDataStore.js';
 
 export interface UsePageDataReturn {
   /** Resolved page data (from preload, API, or preview) */
@@ -46,7 +47,7 @@ export function usePageData(slug: Ref<string> | string): UsePageDataReturn {
   const pageContext = computed<PageContext>(() => {
     const p = isPreviewMode.value ? previewPage.value : page.value;
     if (!p) return {};
-    const { blocks, meta, slug: _s, locale: _l, ...rest } = p as any;
+    const { blocks: _blocks, meta: _meta, slug: _s, locale: _l, ...rest } = p as any;
     return rest;
   });
 
@@ -61,10 +62,17 @@ export function usePageData(slug: Ref<string> | string): UsePageDataReturn {
     return page.value?.blocks || [];
   });
 
+  function setPage(data: PageConfig | null) {
+    page.value = data;
+    if (data) {
+      pageDataStore[pageKey.value] = data;
+    }
+  }
+
   function loadFromPreloaded(): boolean {
     const preloaded = siteData?.[pageKey.value];
     if (preloaded && locale.value === siteData?.locale) {
-      page.value = preloaded as PageConfig;
+      setPage(preloaded as PageConfig);
       notFound.value = false;
       applyMeta();
       return true;
@@ -78,14 +86,14 @@ export function usePageData(slug: Ref<string> | string): UsePageDataReturn {
     try {
       const res = await fetch(`/api/content/${pageKey.value}:${locale.value}`);
       if (res.ok) {
-        page.value = await res.json();
+        setPage(await res.json());
         applyMeta();
       } else {
-        page.value = null;
+        setPage(null);
         notFound.value = true;
       }
     } catch {
-      page.value = null;
+      setPage(null);
       notFound.value = true;
     } finally {
       loading.value = false;