@xosen/site-sdk 0.0.11 → 0.0.12

package/dist/composables/useDynamicLayout.d.ts

@@ -0,0 +1,37 @@
+export interface GridBreakpoint {
+    areas?: string[];
+    columns?: string;
+    rows?: string;
+    gap?: string;
+}
+export interface LayoutZone {
+    type?: 'slot';
+    component?: string;
+    class?: string;
+    container?: boolean;
+    containerStyle?: Record<string, string>;
+}
+export interface LayoutConfig {
+    grid?: Record<string, GridBreakpoint>;
+    zones: Record<string, LayoutZone>;
+}
+/**
+ * Generate responsive CSS for a layout config.
+ * Returns a CSS string with media queries for each breakpoint.
+ */
+export declare function buildLayoutCSS(layout: LayoutConfig, selector: string): string;
+/**
+ * Resolve the current layout config from site data, route, and preview state.
+ *
+ * Returns:
+ * - `layoutName` — current layout name (e.g. 'default', 'sidebar')
+ * - `layoutConfig` — resolved LayoutConfig with grid + zones
+ * - `layoutCSS` — generated responsive CSS string
+ * - `layoutClass` — unique CSS class for this layout instance
+ */
+export declare function useDynamicLayout(): {
+    layoutName: import("vue").ComputedRef<any>;
+    layoutConfig: import("vue").ComputedRef<LayoutConfig>;
+    layoutCSS: import("vue").ComputedRef<string>;
+    layoutClass: import("vue").ComputedRef<string[]>;
+};

package/dist/index.d.ts

@@ -7,6 +7,8 @@ export { usePageData } from './composables/usePageData.js';
 export type { UsePageDataReturn } from './composables/usePageData.js';
 export { useSiteComponents } from './composables/useSiteComponents.js';
 export { useLocaleSwitcher } from './composables/useLocaleSwitcher.js';
+export { useDynamicLayout, buildLayoutCSS } from './composables/useDynamicLayout.js';
+export type { LayoutConfig, LayoutZone, GridBreakpoint } from './composables/useDynamicLayout.js';
 export type { PreviewMessage } from './composables/useLivePreview.js';
 export { createSiteWorker } from './worker/index.js';
 export type { WorkerEnv, WorkerConfig, PageData } from './worker/index.js';

package/dist/index.js

@@ -1,11 +1,12 @@
-import { ref as y, onMounted as T, watch as _, computed as u, onUnmounted as C, provide as L } from "vue";
+import { ref as w, onMounted as T, watch as _, computed as u, onUnmounted as N, provide as I } from "vue";
 import { useI18n as $ } from "vue-i18n";
-function k(o, n) {
-  const t = y(null), { locale: e } = $(), s = window.__SITE_DATA__, a = s?.locale;
-  function l() {
-    return s && s[o] && e.value === a ? (t.value = s[o], !0) : !1;
+import { useRoute as P } from "vue-router";
+function B(o, n) {
+  const t = w(null), { locale: e } = $(), a = window.__SITE_DATA__, s = a?.locale;
+  function i() {
+    return a && a[o] && e.value === s ? (t.value = a[o], !0) : !1;
   }
-  async function i() {
+  async function l() {
     try {
       const c = await fetch(`/api/content/${n}:${e.value}`);
       c.ok && (t.value = await c.json());
@@ -13,35 +14,35 @@ function k(o, n) {
     }
   }
   return T(() => {
-    l() || i();
+    i() || l();
   }), _(e, () => {
-    i();
+    l();
   }), t;
 }
-function M() {
-  const o = window.__SITE_DATA__, n = u(() => o?.config || null), t = u(() => o?.components || {}), e = u(() => n.value?.navigation || []), s = u(() => n.value?.locales || []), a = u(() => n.value?.defaultLocale || "en"), l = u(() => n.value?.branding || {}), i = u(() => n.value?.footer || {}), c = u(() => n.value?.features || {});
-  function v(w) {
-    const g = c.value[w];
-    return typeof g == "boolean" ? g : typeof g == "object";
+function G() {
+  const o = window.__SITE_DATA__, n = u(() => o?.config || null), t = u(() => o?.components || {}), e = u(() => n.value?.navigation || []), a = u(() => n.value?.locales || []), s = u(() => n.value?.defaultLocale || "en"), i = u(() => n.value?.branding || {}), l = u(() => n.value?.footer || {}), c = u(() => n.value?.features || {});
+  function f(d) {
+    const v = c.value[d];
+    return typeof v == "boolean" ? v : typeof v == "object";
   }
   return {
     config: n,
     components: t,
     navigation: e,
-    locales: s,
-    defaultLocale: a,
-    branding: l,
-    footer: i,
+    locales: a,
+    defaultLocale: s,
+    branding: i,
+    footer: l,
     features: c,
-    hasFeature: v
+    hasFeature: f
   };
 }
-function U(o) {
+function Y(o) {
   function n(t) {
     const e = document.documentElement;
     if (t.colors)
-      for (const [s, a] of Object.entries(t.colors))
-        a && e.style.setProperty(`--x-color-${N(s)}`, a);
+      for (const [a, s] of Object.entries(t.colors))
+        s && e.style.setProperty(`--x-color-${x(a)}`, 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(() => {
@@ -57,177 +58,252 @@ function U(o) {
     });
   });
 }
-function N(o) {
+function x(o) {
   return o.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
 }
-function J() {
+function X() {
   const n = window.__SITE_DATA__?.apiBase || "";
-  async function t(a) {
-    const l = await fetch(`${n}${a}`);
-    if (!l.ok)
-      throw new Error(`API error: ${l.status}`);
-    return l.json();
+  async function t(s) {
+    const i = await fetch(`${n}${s}`);
+    if (!i.ok)
+      throw new Error(`API error: ${i.status}`);
+    return i.json();
   }
   async function e() {
     return t("/v1/billing/tariffs");
   }
-  async function s() {
+  async function a() {
     return t("/v1/billing/services");
   }
   return {
     get: t,
     getTariffs: e,
-    getProducts: s
+    getProducts: a
   };
 }
-function E() {
+function b() {
   try {
     return window.self !== window.top;
   } catch {
     return !0;
   }
 }
-function z(o) {
-  E() && o.beforeEach((n, t) => !t.name);
+function Z(o) {
+  b() && o.beforeEach((n, t) => !t.name);
 }
-function P() {
-  const o = y(null), n = y(E());
+function C() {
+  const o = w(null), n = w(b());
   function t(e) {
-    const s = e.data;
-    s?.type === "xosen-preview-update" && s.page && (o.value = s.page, n.value = !0);
+    const a = e.data;
+    a?.type === "xosen-preview-update" && a.page && (o.value = a.page, n.value = !0);
   }
   return T(() => {
     window.addEventListener("message", t);
-  }), C(() => {
+  }), N(() => {
     window.removeEventListener("message", t);
   }), {
     previewPage: o,
     isPreviewMode: n
   };
 }
-const x = /* @__PURE__ */ Symbol("pageContext");
-function K(o) {
-  const { locale: n } = $(), { previewPage: t, isPreviewMode: e } = P(), s = window.__SITE_DATA__, a = y(null), l = y(!0), i = y(!1), c = u(() => typeof o == "string" ? o : o.value), v = u(() => `page:${c.value}`), w = u(() => {
-    const r = e.value ? t.value : a.value;
+const D = /* @__PURE__ */ Symbol("pageContext");
+function H(o) {
+  const { locale: n } = $(), { previewPage: t, isPreviewMode: e } = C(), a = window.__SITE_DATA__, s = w(null), i = w(!0), l = w(!1), c = u(() => typeof o == "string" ? o : o.value), f = u(() => `page:${c.value}`), d = u(() => {
+    const r = e.value ? t.value : s.value;
     if (!r) return {};
-    const { blocks: h, meta: f, slug: d, locale: O, ...A } = r;
-    return A;
+    const { blocks: y, meta: p, slug: m, locale: z, ...L } = r;
+    return L;
   });
-  L(x, w);
-  const g = u(() => e.value && t.value?.slug === c.value ? t.value.blocks || [] : a.value?.blocks || []);
+  I(D, d);
+  const v = u(() => e.value && t.value?.slug === c.value ? t.value.blocks || [] : s.value?.blocks || []);
   function S() {
-    const r = s?.[v.value];
-    return r && n.value === s?.locale ? (a.value = r, i.value = !1, m(), !0) : !1;
+    const r = a?.[f.value];
+    return r && n.value === a?.locale ? (s.value = r, l.value = !1, h(), !0) : !1;
   }
-  async function p() {
-    l.value = !0, i.value = !1;
+  async function g() {
+    i.value = !0, l.value = !1;
     try {
-      const r = await fetch(`/api/content/${v.value}:${n.value}`);
-      r.ok ? (a.value = await r.json(), m()) : (a.value = null, i.value = !0);
+      const r = await fetch(`/api/content/${f.value}:${n.value}`);
+      r.ok ? (s.value = await r.json(), h()) : (s.value = null, l.value = !0);
     } catch {
-      a.value = null, i.value = !0;
+      s.value = null, l.value = !0;
     } finally {
-      l.value = !1;
+      i.value = !1;
     }
   }
-  function m() {
-    if (!a.value) return;
-    if (a.value.title) {
-      const h = s?.config?.branding, f = h?.siteName ? ` — ${h.siteName}` : "";
-      document.title = `${a.value.title}${f}`;
+  function h() {
+    if (!s.value) return;
+    if (s.value.title) {
+      const y = a?.config?.branding, p = y?.siteName ? ` — ${y.siteName}` : "";
+      document.title = `${s.value.title}${p}`;
     }
-    const r = a.value.meta?.description;
+    const r = s.value.meta?.description;
     if (r) {
-      const h = document.querySelector('meta[name="description"]');
-      h && h.setAttribute("content", r);
+      const y = document.querySelector('meta[name="description"]');
+      y && y.setAttribute("content", r);
     }
   }
   return _(t, (r) => {
-    r?.slug === c.value && (l.value = !1, i.value = !1, (r.title || r.blocks) && (a.value = {
-      ...a.value || {},
+    r?.slug === c.value && (i.value = !1, l.value = !1, (r.title || r.blocks) && (s.value = {
+      ...s.value || {},
       ...r.title ? { title: r.title } : {},
       ...r.blocks ? { blocks: r.blocks } : {}
-    }, m()));
+    }, h()));
   }), T(() => {
-    S() ? l.value = !1 : p();
-  }), _(n, () => p()), _(c, () => {
-    S() ? l.value = !1 : p();
+    S() ? i.value = !1 : g();
+  }), _(n, () => g()), _(c, () => {
+    S() ? i.value = !1 : g();
   }), {
-    page: a,
-    blocks: g,
-    pageContext: w,
-    loading: l,
-    notFound: i,
+    page: s,
+    blocks: v,
+    pageContext: d,
+    loading: i,
+    notFound: l,
     isPreviewMode: e,
-    reload: p
+    reload: g
   };
 }
-function W() {
-  const { locale: o } = $(), n = window.__SITE_DATA__, t = n?.locale, e = y({ ...n?.components || {} });
-  async function s(l) {
-    if (l === t) {
+function Q() {
+  const { locale: o } = $(), n = window.__SITE_DATA__, t = n?.locale, e = w({ ...n?.components || {} });
+  async function a(i) {
+    if (i === t) {
       e.value = { ...n?.components || {} };
       return;
     }
     try {
-      const i = await fetch(`/api/content/components:${l}`);
-      i.ok && (e.value = await i.json());
+      const l = await fetch(`/api/content/components:${i}`);
+      l.ok && (e.value = await l.json());
     } catch {
     }
   }
-  _(o, (l) => s(l)), T(() => {
-    o.value !== t && s(o.value);
+  _(o, (i) => a(i)), T(() => {
+    o.value !== t && a(o.value);
   });
-  function a(l) {
-    return u(() => e.value[l] || null);
+  function s(i) {
+    return u(() => e.value[i] || null);
   }
   return {
     /** All components (reactive, locale-aware) */
     components: e,
     /** Get a single component by key */
-    getComponent: a,
+    getComponent: s,
     /** Force refetch for current locale */
-    reload: () => s(o.value)
+    reload: () => a(o.value)
   };
 }
-function B() {
-  const { locale: o } = $(), n = window.__SITE_DATA__, t = u(() => n?.config?.locales || []), e = u(() => n?.config?.defaultLocale || "en"), s = u(() => t.value.length > 1);
-  function a(i) {
-    o.value = i, localStorage.setItem("x-site-locale", i);
+function V() {
+  const { locale: o } = $(), n = window.__SITE_DATA__, t = u(() => n?.config?.locales || []), e = u(() => n?.config?.defaultLocale || "en"), a = u(() => t.value.length > 1);
+  function s(l) {
+    o.value = l, localStorage.setItem("x-site-locale", l);
   }
-  function l(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: s,
-    switchLocale: a,
-    resolveText: l
+    hasMultipleLocales: a,
+    switchLocale: s,
+    resolveText: i
+  };
+}
+const j = {
+  sm: 600,
+  md: 960,
+  lg: 1280,
+  xl: 1920
+}, O = {
+  grid: {
+    default: {
+      areas: ["header", "main", "footer"],
+      rows: "auto 1fr auto"
+    }
+  },
+  zones: {
+    header: { component: "nav-menu" },
+    main: { type: "slot" },
+    footer: { component: "footer" }
+  }
+}, R = {
+  grid: {
+    default: {
+      areas: ["main"]
+    }
+  },
+  zones: {
+    main: { type: "slot" }
+  }
+};
+function A(o, n) {
+  const t = [];
+  if (o.areas?.length) {
+    const e = o.areas.map((a) => `"${a}"`).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 ? `${n} { ${t.join("; ")}; }` : "";
+}
+function F(o, n) {
+  const t = [`${n} { display: grid; min-height: 100vh; }`], e = o.grid;
+  if (!e) return t.join(`
+`);
+  if (e.default) {
+    const a = A(e.default, n);
+    a && t.push(a);
+  }
+  for (const a of ["sm", "md", "lg", "xl"]) {
+    const s = e[a];
+    if (!s) continue;
+    const i = A(s, n);
+    i && t.push(`@media (min-width: ${j[a]}px) { ${i} }`);
+  }
+  return t.join(`
+`);
+}
+function q() {
+  const o = P(), { previewPage: n, isPreviewMode: t } = C(), e = window.__SITE_DATA__, a = `dl-${Math.random().toString(36).slice(2, 8)}`, s = u(() => ["dynamic-layout", a]), i = u(() => {
+    if (o.path === "/_preview_")
+      return n.value?.layout || "landing";
+    if (t.value && n.value?.layout)
+      return n.value.layout;
+    const f = o.path === "/" ? "page:home" : `page:${o.params.slug || ""}`;
+    return e?.[f]?.layout || "default";
+  }), l = u(() => {
+    const f = e?.config?.layouts;
+    if (f) {
+      const d = f[i.value] || f.default;
+      if (d?.zones) return d;
+    }
+    return i.value === "landing" ? R : O;
+  }), c = u(() => F(l.value, `.${a}`));
+  return {
+    layoutName: i,
+    layoutConfig: l,
+    layoutCSS: c,
+    layoutClass: s
   };
 }
-const I = /\.(js|css|png|jpg|jpeg|gif|svg|ico|woff2?|ttf|eot|webp|avif|map|json|txt|xml|webmanifest)$/;
-function R(o, n) {
+const M = /\.(js|css|png|jpg|jpeg|gif|svg|ico|woff2?|ttf|eot|webp|avif|map|json|txt|xml|webmanifest)$/;
+function k(o, n) {
   const e = new URL(o.url).searchParams.get("lang");
   if (e && n.supportedLocales?.includes(e)) return e;
   if (n.supportedLocales?.length) {
-    const s = o.headers.get("Accept-Language") || "";
-    for (const a of n.supportedLocales)
-      if (s.includes(a)) return a;
+    const a = o.headers.get("Accept-Language") || "";
+    for (const s of n.supportedLocales)
+      if (a.includes(s)) return s;
   }
   return n.defaultLocale;
 }
-function j(o, n, t) {
+function U(o, n, t) {
   if (!o.pathname.startsWith("/api/content/")) return null;
   const e = decodeURIComponent(o.pathname.replace("/api/content/", ""));
   return e ? (async () => {
-    let s = await n.SITE_CONTENT.get(e);
-    if (!s) {
-      const a = e.lastIndexOf(":");
-      a > 0 && e.slice(a + 1) !== t && (s = await n.SITE_CONTENT.get(e.slice(0, a + 1) + t));
+    let a = await n.SITE_CONTENT.get(e);
+    if (!a) {
+      const s = e.lastIndexOf(":");
+      s > 0 && e.slice(s + 1) !== t && (a = await n.SITE_CONTENT.get(e.slice(0, s + 1) + t));
     }
-    return s ? new Response(s, {
+    return a ? new Response(a, {
       headers: {
         "Content-Type": "application/json",
         "Cache-Control": "public, max-age=60",
@@ -236,53 +312,53 @@ function j(o, n, t) {
     }) : Response.json({ error: "Not found" }, { status: 404 });
   })() : Promise.resolve(Response.json({ error: "Key is required" }, { status: 400 }));
 }
-function b(o, n, t) {
+function E(o, n, t) {
   let e = o;
   if (n.title) {
-    const s = t ? ` — ${t}` : "";
-    e = e.replace(/<title>[^<]*<\/title>/, `<title>${n.title}${s}</title>`);
+    const a = t ? ` — ${t}` : "";
+    e = e.replace(/<title>[^<]*<\/title>/, `<title>${n.title}${a}</title>`);
   }
   return n.meta?.description && (e = e.replace(/(<meta\s+name="description"\s+content=")[^"]*(")/, `$1${n.meta.description}$2`)), n.meta?.ogTitle && (e = e.replace(/(<meta\s+property="og:title"\s+content=")[^"]*(")/, `$1${n.meta.ogTitle}$2`)), n.html && (e = e.replace('<div id="app"></div>', `<div id="app">${n.html}</div>`)), e;
 }
-function X(o) {
+function ee(o) {
   return {
     async fetch(n, t) {
-      const e = new URL(n.url), s = j(e, t, o.defaultLocale);
-      if (s) return s;
-      if (I.test(e.pathname))
+      const e = new URL(n.url), a = U(e, t, o.defaultLocale);
+      if (a) return a;
+      if (M.test(e.pathname))
         return t.ASSETS.fetch(n);
-      const a = R(n, o), l = new URL("/index.html", n.url);
-      let c = await (await t.ASSETS.fetch(new Request(l))).text();
-      const v = o.defaultLocale, [w, g] = await Promise.all([
+      const s = k(n, o), i = new URL("/index.html", n.url);
+      let c = await (await t.ASSETS.fetch(new Request(i))).text();
+      const f = o.defaultLocale, [d, v] = await Promise.all([
         t.SITE_CONTENT.get("config"),
-        t.SITE_CONTENT.get(`content:${a}`)
-      ]), S = w ? JSON.parse(w) : {};
-      let p = g ? JSON.parse(g) : {};
-      if (!g && a !== v) {
-        const f = await t.SITE_CONTENT.get(`content:${v}`);
-        f && (p = JSON.parse(f));
+        t.SITE_CONTENT.get(`content:${s}`)
+      ]), S = d ? JSON.parse(d) : {};
+      let g = v ? JSON.parse(v) : {};
+      if (!v && s !== f) {
+        const p = await t.SITE_CONTENT.get(`content:${f}`);
+        p && (g = JSON.parse(p));
       }
-      const m = e.pathname.match(/^\/p\/(.+)$/);
-      if (m) {
-        const f = m[1];
-        if (!p[f]) {
-          let d = await t.SITE_CONTENT.get(`page:${f}:${a}`);
-          !d && a !== v && (d = await t.SITE_CONTENT.get(`page:${f}:${v}`)), d && (p[f] = JSON.parse(d));
+      const h = e.pathname.match(/^\/p\/(.+)$/);
+      if (h) {
+        const p = h[1];
+        if (!g[p]) {
+          let m = await t.SITE_CONTENT.get(`page:${p}:${s}`);
+          !m && s !== f && (m = await t.SITE_CONTENT.get(`page:${p}:${f}`)), m && (g[p] = JSON.parse(m));
         }
       }
       const r = {
-        locale: a,
+        locale: s,
         config: S
       };
-      for (const [f, d] of Object.entries(p))
-        r[`page:${f}`] = d;
-      if (m) {
-        const f = m[1], d = r[`page:${f}`];
-        d && (c = b(c, d, o.siteName));
+      for (const [p, m] of Object.entries(g))
+        r[`page:${p}`] = m;
+      if (h) {
+        const p = h[1], m = r[`page:${p}`];
+        m && (c = E(c, m, o.siteName));
       }
-      e.pathname === "/" && p.home && (c = b(c, p.home, o.siteName));
-      const h = `<script>window.__SITE_DATA__ = ${JSON.stringify(r)};<\/script>`;
-      return c = c.replace("</head>", `${h}
+      e.pathname === "/" && g.home && (c = E(c, g.home, o.siteName));
+      const y = `<script>window.__SITE_DATA__ = ${JSON.stringify(r)};<\/script>`;
+      return c = c.replace("</head>", `${y}
 </head>`), new Response(c, {
         headers: {
           "Content-Type": "text/html;charset=utf-8",
@@ -293,16 +369,18 @@ function X(o) {
   };
 }
 export {
-  x as PAGE_CONTEXT_KEY,
-  X as createSiteWorker,
-  E as isInPreview,
-  z as setupPreviewRouter,
-  P as useLivePreview,
-  B as useLocaleSwitcher,
-  K as usePageData,
-  J as useSiteApi,
-  W as useSiteComponents,
-  M as useSiteConfig,
-  k as useSiteData,
-  U as useSkin
+  D as PAGE_CONTEXT_KEY,
+  F as buildLayoutCSS,
+  ee as createSiteWorker,
+  b as isInPreview,
+  Z as setupPreviewRouter,
+  q as useDynamicLayout,
+  C as useLivePreview,
+  V as useLocaleSwitcher,
+  H as usePageData,
+  X as useSiteApi,
+  Q as useSiteComponents,
+  G as useSiteConfig,
+  B as useSiteData,
+  Y as useSkin
 };

package/dist/types/config.d.ts

@@ -33,6 +33,24 @@ export interface SiteConfig {
         }>;
     };
     features?: Record<string, boolean | Record<string, any>>;
+    layouts?: Record<string, LayoutConfig>;
+}
+export interface LayoutZone {
+    type?: 'slot';
+    component?: string;
+    class?: string;
+    container?: boolean;
+    containerStyle?: Record<string, string>;
+}
+export interface LayoutGridBreakpoint {
+    areas: string[];
+    columns?: string;
+    rows?: string;
+    gap?: string;
+}
+export interface LayoutConfig {
+    grid: Record<string, LayoutGridBreakpoint>;
+    zones: Record<string, LayoutZone>;
 }
 export interface NavItem {
     text: string | Record<string, string>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xosen/site-sdk",
-  "version": "0.0.11",
+  "version": "0.0.12",
   "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": "catalog:",
-    "vue-i18n": "catalog:",
-    "vue-router": "catalog:",
-    "vue-tsc": "catalog:",
-    "typescript": "catalog:",
-    "vite": "catalog:",
-    "@vitejs/plugin-vue": "catalog:"
+    "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"
   }
-}
+}

package/src/composables/useDynamicLayout.ts

@@ -0,0 +1,146 @@
+import { computed, type Ref } from 'vue';
+import { useRoute } from 'vue-router';
+
+import type { SiteData } from '../types/config.js';
+import { useLivePreview } from './useLivePreview.js';
+
+export interface GridBreakpoint {
+  areas?: string[];
+  columns?: string;
+  rows?: string;
+  gap?: string;
+}
+
+export interface LayoutZone {
+  type?: 'slot';
+  component?: string;
+  class?: string;
+  container?: boolean;
+  containerStyle?: Record<string, string>;
+}
+
+export interface LayoutConfig {
+  grid?: Record<string, GridBreakpoint>;
+  zones: Record<string, LayoutZone>;
+}
+
+const BREAKPOINTS: Record<string, number> = {
+  sm: 600,
+  md: 960,
+  lg: 1280,
+  xl: 1920,
+};
+
+const DEFAULT_LAYOUT: LayoutConfig = {
+  grid: {
+    default: {
+      areas: ['header', 'main', 'footer'],
+      rows: 'auto 1fr auto',
+    },
+  },
+  zones: {
+    header: { component: 'nav-menu' },
+    main: { type: 'slot' },
+    footer: { component: 'footer' },
+  },
+};
+
+const LANDING_LAYOUT: LayoutConfig = {
+  grid: {
+    default: {
+      areas: ['main'],
+    },
+  },
+  zones: {
+    main: { type: 'slot' },
+  },
+};
+
+function buildGridCSS(bp: GridBreakpoint, selector: string): string {
+  const rules: string[] = [];
+  if (bp.areas?.length) {
+    const areas = bp.areas.map((row) => `"${row}"`).join(' ');
+    rules.push(`grid-template-areas: ${areas}`);
+  }
+  if (bp.columns) rules.push(`grid-template-columns: ${bp.columns}`);
+  if (bp.rows) rules.push(`grid-template-rows: ${bp.rows}`);
+  if (bp.gap) rules.push(`gap: ${bp.gap}`);
+  if (!rules.length) return '';
+  return `${selector} { ${rules.join('; ')}; }`;
+}
+
+/**
+ * Generate responsive CSS for a layout config.
+ * Returns a CSS string with media queries for each breakpoint.
+ */
+export function buildLayoutCSS(layout: LayoutConfig, selector: string): string {
+  const parts: string[] = [`${selector} { display: grid; min-height: 100vh; }`];
+  const grid = layout.grid;
+
+  if (!grid) return parts.join('\n');
+
+  if (grid.default) {
+    const css = buildGridCSS(grid.default, selector);
+    if (css) parts.push(css);
+  }
+
+  for (const bp of ['sm', 'md', 'lg', 'xl']) {
+    const config = grid[bp];
+    if (!config) continue;
+    const css = buildGridCSS(config, selector);
+    if (css) {
+      parts.push(`@media (min-width: ${BREAKPOINTS[bp]}px) { ${css} }`);
+    }
+  }
+
+  return parts.join('\n');
+}
+
+/**
+ * Resolve the current layout config from site data, route, and preview state.
+ *
+ * Returns:
+ * - `layoutName` — current layout name (e.g. 'default', 'sidebar')
+ * - `layoutConfig` — resolved LayoutConfig with grid + zones
+ * - `layoutCSS` — generated responsive CSS string
+ * - `layoutClass` — unique CSS class for this layout instance
+ */
+export function useDynamicLayout() {
+  const route = useRoute();
+  const { previewPage, isPreviewMode } = useLivePreview();
+  const siteData = (window as any).__SITE_DATA__ as SiteData | undefined;
+
+  const layoutId = `dl-${Math.random().toString(36).slice(2, 8)}`;
+  const layoutClass = computed(() => ['dynamic-layout', layoutId]);
+
+  const layoutName = computed(() => {
+    if (route.path === '/_preview_') {
+      return previewPage.value?.layout || 'landing';
+    }
+    if (isPreviewMode.value && previewPage.value?.layout) {
+      return previewPage.value.layout;
+    }
+    const pageKey = route.path === '/' ? 'page:home' : `page:${route.params.slug || ''}`;
+    const pageData = siteData?.[pageKey];
+    return pageData?.layout || 'default';
+  });
+
+  const layoutConfig = computed<LayoutConfig>(() => {
+    const layouts = siteData?.config?.layouts;
+    if (layouts) {
+      const config = layouts[layoutName.value] || layouts.default;
+      if (config?.zones) return config;
+    }
+    if (layoutName.value === 'landing') return LANDING_LAYOUT;
+    return DEFAULT_LAYOUT;
+  });
+
+  const layoutCSS = computed(() => buildLayoutCSS(layoutConfig.value, `.${layoutId}`));
+
+  return {
+    layoutName,
+    layoutConfig,
+    layoutCSS,
+    layoutClass,
+  };
+}

package/src/index.ts

@@ -8,6 +8,8 @@ export { usePageData } from './composables/usePageData.js';
 export type { UsePageDataReturn } from './composables/usePageData.js';
 export { useSiteComponents } from './composables/useSiteComponents.js';
 export { useLocaleSwitcher } from './composables/useLocaleSwitcher.js';
+export { useDynamicLayout, buildLayoutCSS } from './composables/useDynamicLayout.js';
+export type { LayoutConfig, LayoutZone, GridBreakpoint } from './composables/useDynamicLayout.js';
 export type { PreviewMessage } from './composables/useLivePreview.js';
 
 // Worker

package/src/types/config.ts

@@ -38,6 +38,28 @@ export interface SiteConfig {
   };
 
   features?: Record<string, boolean | Record<string, any>>;
+
+  layouts?: Record<string, LayoutConfig>;
+}
+
+export interface LayoutZone {
+  type?: 'slot';
+  component?: string;
+  class?: string;
+  container?: boolean;
+  containerStyle?: Record<string, string>;
+}
+
+export interface LayoutGridBreakpoint {
+  areas: string[];
+  columns?: string;
+  rows?: string;
+  gap?: string;
+}
+
+export interface LayoutConfig {
+  grid: Record<string, LayoutGridBreakpoint>;
+  zones: Record<string, LayoutZone>;
 }
 
 export interface NavItem {