@xosen/site-sdk 0.0.12 → 0.0.13

package/dist/composables/useDynamicLayout.d.ts

@@ -1,20 +1,4 @@
-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>;
-}
+import type { LayoutConfig } from '../types/layout.js';
 /**
  * Generate responsive CSS for a layout config.
  * Returns a CSS string with media queries for each breakpoint.

package/dist/index.d.ts

@@ -8,7 +8,8 @@ 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 { LayoutConfig, LayoutZone, GridBreakpoint, LayoutSchemaDefinition, LayoutField } from './types/layout.js';
+export { layoutSchema, layoutPresets } from './types/layout.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,87 +1,87 @@
-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";
-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;
+import { ref as w, onMounted as _, watch as b, computed as c, onUnmounted as E, provide as N } from "vue";
+import { useI18n as S } from "vue-i18n";
+import { useRoute as L } from "vue-router";
+function J(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 l() {
+  async function i() {
     try {
-      const c = await fetch(`/api/content/${n}:${e.value}`);
-      c.ok && (t.value = await c.json());
+      const u = await fetch(`/api/content/${a}:${e.value}`);
+      u.ok && (t.value = await u.json());
     } catch {
     }
   }
-  return T(() => {
-    i() || l();
-  }), _(e, () => {
-    l();
+  return _(() => {
+    r() || i();
+  }), b(e, () => {
+    i();
   }), t;
 }
-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 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 v = c.value[d];
-    return typeof v == "boolean" ? v : typeof v == "object";
+    const y = u.value[d];
+    return typeof y == "boolean" ? y : typeof y == "object";
   }
   return {
-    config: n,
+    config: a,
     components: t,
     navigation: e,
-    locales: a,
+    locales: n,
     defaultLocale: s,
-    branding: i,
-    footer: l,
-    features: c,
+    branding: r,
+    footer: i,
+    features: u,
     hasFeature: f
   };
 }
 function Y(o) {
-  function n(t) {
+  function a(t) {
     const e = document.documentElement;
     if (t.colors)
-      for (const [a, s] of Object.entries(t.colors))
-        s && e.style.setProperty(`--x-color-${x(a)}`, s);
+      for (const [n, s] of Object.entries(t.colors))
+        s && e.style.setProperty(`--x-color-${P(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) {
-      n(o);
+      a(o);
       return;
     }
     const e = window.__SITE_DATA__?.skin;
-    e && (e.colors || e.typography || e.shape) && n({
+    e && (e.colors || e.typography || e.shape) && a({
       colors: e.colors || {},
       typography: e.typography || {},
       shape: e.shape || {}
     });
   });
 }
-function x(o) {
+function P(o) {
   return o.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
 }
 function X() {
-  const n = window.__SITE_DATA__?.apiBase || "";
+  const a = window.__SITE_DATA__?.apiBase || "";
   async function t(s) {
-    const i = await fetch(`${n}${s}`);
-    if (!i.ok)
-      throw new Error(`API error: ${i.status}`);
-    return i.json();
+    const r = await fetch(`${a}${s}`);
+    if (!r.ok)
+      throw new Error(`API error: ${r.status}`);
+    return r.json();
   }
   async function e() {
     return t("/v1/billing/tariffs");
   }
-  async function a() {
+  async function n() {
     return t("/v1/billing/services");
   }
   return {
     get: t,
     getTariffs: e,
-    getProducts: a
+    getProducts: n
   };
 }
-function b() {
+function x() {
   try {
     return window.self !== window.top;
   } catch {
@@ -89,98 +89,98 @@ function b() {
   }
 }
 function Z(o) {
-  b() && o.beforeEach((n, t) => !t.name);
+  x() && o.beforeEach((a, t) => !t.name);
 }
-function C() {
-  const o = w(null), n = w(b());
+function A() {
+  const o = w(null), a = w(x());
   function t(e) {
-    const a = e.data;
-    a?.type === "xosen-preview-update" && a.page && (o.value = a.page, n.value = !0);
+    const n = e.data;
+    n?.type === "xosen-preview-update" && n.page && (o.value = n.page, a.value = !0);
   }
-  return T(() => {
+  return _(() => {
     window.addEventListener("message", t);
-  }), N(() => {
+  }), E(() => {
     window.removeEventListener("message", t);
   }), {
     previewPage: o,
-    isPreviewMode: n
+    isPreviewMode: a
   };
 }
-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: y, meta: p, slug: m, locale: z, ...L } = r;
-    return L;
+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 l = e.value ? t.value : s.value;
+    if (!l) return {};
+    const { blocks: v, meta: p, slug: g, locale: M, ...C } = l;
+    return C;
   });
-  I(D, d);
-  const v = u(() => e.value && t.value?.slug === c.value ? t.value.blocks || [] : s.value?.blocks || []);
-  function S() {
-    const r = a?.[f.value];
-    return r && n.value === a?.locale ? (s.value = r, l.value = !1, h(), !0) : !1;
+  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;
   }
-  async function g() {
-    i.value = !0, l.value = !1;
+  async function m() {
+    r.value = !0, i.value = !1;
     try {
-      const r = await fetch(`/api/content/${f.value}:${n.value}`);
-      r.ok ? (s.value = await r.json(), h()) : (s.value = null, l.value = !0);
+      const l = await fetch(`/api/content/${f.value}:${a.value}`);
+      l.ok ? (s.value = await l.json(), h()) : (s.value = null, i.value = !0);
     } catch {
-      s.value = null, l.value = !0;
+      s.value = null, i.value = !0;
     } finally {
-      i.value = !1;
+      r.value = !1;
     }
   }
   function h() {
     if (!s.value) return;
     if (s.value.title) {
-      const y = a?.config?.branding, p = y?.siteName ? ` — ${y.siteName}` : "";
+      const v = n?.config?.branding, p = v?.siteName ? ` — ${v.siteName}` : "";
       document.title = `${s.value.title}${p}`;
     }
-    const r = s.value.meta?.description;
-    if (r) {
-      const y = document.querySelector('meta[name="description"]');
-      y && y.setAttribute("content", r);
+    const l = s.value.meta?.description;
+    if (l) {
+      const v = document.querySelector('meta[name="description"]');
+      v && v.setAttribute("content", l);
     }
   }
-  return _(t, (r) => {
-    r?.slug === c.value && (i.value = !1, l.value = !1, (r.title || r.blocks) && (s.value = {
+  return b(t, (l) => {
+    l?.slug === u.value && (r.value = !1, i.value = !1, (l.title || l.blocks) && (s.value = {
       ...s.value || {},
-      ...r.title ? { title: r.title } : {},
-      ...r.blocks ? { blocks: r.blocks } : {}
+      ...l.title ? { title: l.title } : {},
+      ...l.blocks ? { blocks: l.blocks } : {}
     }, h()));
-  }), T(() => {
-    S() ? i.value = !1 : g();
-  }), _(n, () => g()), _(c, () => {
-    S() ? i.value = !1 : g();
+  }), _(() => {
+    T() ? r.value = !1 : m();
+  }), b(a, () => m()), b(u, () => {
+    T() ? r.value = !1 : m();
   }), {
     page: s,
-    blocks: v,
+    blocks: y,
     pageContext: d,
-    loading: i,
-    notFound: l,
+    loading: r,
+    notFound: i,
     isPreviewMode: e,
-    reload: g
+    reload: m
   };
 }
-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 || {} };
+function H() {
+  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 l = await fetch(`/api/content/components:${i}`);
-      l.ok && (e.value = await l.json());
+      const i = await fetch(`/api/content/components:${r}`);
+      i.ok && (e.value = await i.json());
     } catch {
     }
   }
-  _(o, (i) => a(i)), T(() => {
-    o.value !== t && a(o.value);
+  b(o, (r) => n(r)), _(() => {
+    o.value !== t && n(o.value);
   });
-  function s(i) {
-    return u(() => e.value[i] || null);
+  function s(r) {
+    return c(() => e.value[r] || null);
   }
   return {
     /** All components (reactive, locale-aware) */
@@ -188,32 +188,32 @@ function Q() {
     /** Get a single component by key */
     getComponent: s,
     /** Force refetch for current locale */
-    reload: () => a(o.value)
+    reload: () => n(o.value)
   };
 }
-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 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 s(i) {
+    o.value = i, localStorage.setItem("x-site-locale", i);
   }
-  function i(l) {
-    return typeof l == "string" ? l : l[o.value] || l[e.value] || Object.values(l)[0] || "";
+  function r(i) {
+    return typeof i == "string" ? i : i[o.value] || i[e.value] || Object.values(i)[0] || "";
   }
   return {
     locale: o,
     locales: t,
     defaultLocale: e,
-    hasMultipleLocales: a,
+    hasMultipleLocales: n,
     switchLocale: s,
-    resolveText: i
+    resolveText: r
   };
 }
-const j = {
+const R = {
   sm: 600,
   md: 960,
   lg: 1280,
   xl: 1920
-}, O = {
+}, D = {
   grid: {
     default: {
       areas: ["header", "main", "footer"],
@@ -225,7 +225,7 @@ const j = {
     main: { type: "slot" },
     footer: { component: "footer" }
   }
-}, R = {
+}, j = {
   grid: {
     default: {
       areas: ["main"]
@@ -235,75 +235,177 @@ const j = {
     main: { type: "slot" }
   }
 };
-function A(o, n) {
+function $(o, a) {
   const t = [];
   if (o.areas?.length) {
-    const e = o.areas.map((a) => `"${a}"`).join(" ");
+    const e = o.areas.map((n) => `"${n}"`).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("; ")}; }` : "";
+  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 F(o, n) {
-  const t = [`${n} { display: grid; min-height: 100vh; }`], e = o.grid;
+function O(o, a) {
+  const t = [`${a} { 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);
+    const n = $(e.default, a);
+    n && t.push(n);
   }
-  for (const a of ["sm", "md", "lg", "xl"]) {
-    const s = e[a];
+  for (const n of ["sm", "md", "lg", "xl"]) {
+    const s = e[n];
     if (!s) continue;
-    const i = A(s, n);
-    i && t.push(`@media (min-width: ${j[a]}px) { ${i} }`);
+    const r = $(s, a);
+    r && t.push(`@media (min-width: ${R[n]}px) { ${r} }`);
   }
   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(() => {
+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(() => {
     if (o.path === "/_preview_")
-      return n.value?.layout || "landing";
-    if (t.value && n.value?.layout)
-      return n.value.layout;
+      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";
-  }), l = u(() => {
+  }), i = c(() => {
     const f = e?.config?.layouts;
     if (f) {
-      const d = f[i.value] || f.default;
+      const d = f[r.value] || f.default;
       if (d?.zones) return d;
     }
-    return i.value === "landing" ? R : O;
-  }), c = u(() => F(l.value, `.${a}`));
+    return r.value === "landing" ? j : D;
+  }), u = c(() => O(i.value, `.${n}`));
   return {
-    layoutName: i,
-    layoutConfig: l,
-    layoutCSS: c,
+    layoutName: r,
+    layoutConfig: i,
+    layoutCSS: u,
     layoutClass: s
   };
 }
-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 ee = {
+  type: "layout",
+  displayName: "Layout",
+  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.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" },
+    // Tablet (sm — 600px)
+    { key: "grid.sm.areas", type: "grid-areas", label: "Grid Areas (sm 600px+)", breakpoint: "sm" },
+    { key: "grid.sm.columns", type: "text", label: "Columns (sm)", breakpoint: "sm" },
+    { key: "grid.sm.rows", type: "text", label: "Rows (sm)", breakpoint: "sm" },
+    { key: "grid.sm.gap", type: "text", label: "Gap (sm)", breakpoint: "sm" },
+    // Desktop (md — 960px)
+    { key: "grid.md.areas", type: "grid-areas", label: "Grid Areas (md 960px+)", breakpoint: "md" },
+    { key: "grid.md.columns", type: "text", label: "Columns (md)", breakpoint: "md" },
+    { key: "grid.md.rows", type: "text", label: "Rows (md)", breakpoint: "md" },
+    { key: "grid.md.gap", type: "text", label: "Gap (md)", breakpoint: "md" },
+    // Large desktop (lg — 1280px)
+    { key: "grid.lg.areas", type: "grid-areas", label: "Grid Areas (lg 1280px+)", breakpoint: "lg" },
+    { key: "grid.lg.columns", type: "text", label: "Columns (lg)", breakpoint: "lg" },
+    { key: "grid.lg.rows", type: "text", label: "Rows (lg)", breakpoint: "lg" },
+    { key: "grid.lg.gap", type: "text", label: "Gap (lg)", breakpoint: "lg" },
+    // Zones
+    { key: "zones", type: "zone-list", label: "Zones", required: !0 }
+  ],
+  zoneFields: [
+    { key: "type", type: "select", label: "Type", options: ["slot", "component"] },
+    { key: "component", type: "text", label: "Component Key" },
+    { key: "class", type: "text", label: "CSS Class" },
+    { key: "container", type: "switch", label: "Wrap in Container" }
+  ]
+}, te = {
+  default: {
+    displayName: "Full Width",
+    config: {
+      grid: {
+        default: { areas: ["header", "main", "footer"], rows: "auto 1fr auto" }
+      },
+      zones: {
+        header: { component: "nav-menu" },
+        main: { type: "slot" },
+        footer: { component: "footer" }
+      }
+    }
+  },
+  sidebar: {
+    displayName: "Sidebar",
+    config: {
+      grid: {
+        default: { areas: ["header", "main", "sidebar", "footer"], columns: "1fr", rows: "auto 1fr auto auto" },
+        md: { areas: ["header header", "sidebar main", "footer footer"], columns: "280px 1fr", rows: "auto 1fr auto" }
+      },
+      zones: {
+        header: { component: "nav-menu" },
+        sidebar: { component: "sidebar-menu" },
+        main: { type: "slot" },
+        footer: { component: "footer" }
+      }
+    }
+  },
+  article: {
+    displayName: "Article",
+    config: {
+      grid: {
+        default: { areas: ["header", "main", "footer"], rows: "auto 1fr auto" }
+      },
+      zones: {
+        header: { component: "nav-menu" },
+        main: { type: "slot", container: !0, containerStyle: { "max-width": "900px" } },
+        footer: { component: "footer" }
+      }
+    }
+  },
+  landing: {
+    displayName: "Landing (no nav)",
+    config: {
+      grid: {
+        default: { areas: ["main"] }
+      },
+      zones: {
+        main: { type: "slot" }
+      }
+    }
+  },
+  magazine: {
+    displayName: "Magazine",
+    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" }
+      },
+      zones: {
+        header: { component: "nav-menu" },
+        main: { type: "slot" },
+        aside: { component: "sidebar-menu" },
+        footer: { component: "footer" }
+      }
+    }
+  }
+}, z = /\.(js|css|png|jpg|jpeg|gif|svg|ico|woff2?|ttf|eot|webp|avif|map|json|txt|xml|webmanifest)$/;
+function F(o, a) {
   const e = new URL(o.url).searchParams.get("lang");
-  if (e && n.supportedLocales?.includes(e)) return e;
-  if (n.supportedLocales?.length) {
-    const a = o.headers.get("Accept-Language") || "";
-    for (const s of n.supportedLocales)
-      if (a.includes(s)) return s;
+  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;
   }
-  return n.defaultLocale;
+  return a.defaultLocale;
 }
-function U(o, n, t) {
+function G(o, a, t) {
   if (!o.pathname.startsWith("/api/content/")) return null;
   const e = decodeURIComponent(o.pathname.replace("/api/content/", ""));
   return e ? (async () => {
-    let a = await n.SITE_CONTENT.get(e);
-    if (!a) {
+    let n = await a.SITE_CONTENT.get(e);
+    if (!n) {
       const s = e.lastIndexOf(":");
-      s > 0 && e.slice(s + 1) !== t && (a = await n.SITE_CONTENT.get(e.slice(0, s + 1) + t));
+      s > 0 && e.slice(s + 1) !== t && (n = await a.SITE_CONTENT.get(e.slice(0, s + 1) + t));
     }
-    return a ? new Response(a, {
+    return n ? new Response(n, {
       headers: {
         "Content-Type": "application/json",
         "Cache-Control": "public, max-age=60",
@@ -312,54 +414,54 @@ function U(o, n, t) {
     }) : Response.json({ error: "Not found" }, { status: 404 });
   })() : Promise.resolve(Response.json({ error: "Key is required" }, { status: 400 }));
 }
-function E(o, n, t) {
+function k(o, a, t) {
   let e = o;
-  if (n.title) {
-    const a = t ? ` — ${t}` : "";
-    e = e.replace(/<title>[^<]*<\/title>/, `<title>${n.title}${a}</title>`);
+  if (a.title) {
+    const n = t ? ` — ${t}` : "";
+    e = e.replace(/<title>[^<]*<\/title>/, `<title>${a.title}${n}</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;
+  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 ee(o) {
+function ae(o) {
   return {
-    async fetch(n, t) {
-      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 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([
+    async fetch(a, t) {
+      const e = new URL(a.url), n = G(e, t, o.defaultLocale);
+      if (n) return n;
+      if (z.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([
         t.SITE_CONTENT.get("config"),
         t.SITE_CONTENT.get(`content:${s}`)
-      ]), S = d ? JSON.parse(d) : {};
-      let g = v ? JSON.parse(v) : {};
-      if (!v && s !== f) {
+      ]), 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 && (g = JSON.parse(p));
+        p && (m = JSON.parse(p));
       }
       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));
+        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 r = {
+      const l = {
         locale: s,
-        config: S
+        config: T
       };
-      for (const [p, m] of Object.entries(g))
-        r[`page:${p}`] = m;
+      for (const [p, g] of Object.entries(m))
+        l[`page:${p}`] = g;
       if (h) {
-        const p = h[1], m = r[`page:${p}`];
-        m && (c = E(c, m, o.siteName));
+        const p = h[1], g = l[`page:${p}`];
+        g && (u = k(u, g, o.siteName));
       }
-      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, {
+      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, {
         headers: {
           "Content-Type": "text/html;charset=utf-8",
           "Cache-Control": "public, max-age=60"
@@ -369,18 +471,20 @@ function ee(o) {
   };
 }
 export {
-  D as PAGE_CONTEXT_KEY,
-  F as buildLayoutCSS,
-  ee as createSiteWorker,
-  b as isInPreview,
+  I as PAGE_CONTEXT_KEY,
+  O as buildLayoutCSS,
+  ae as createSiteWorker,
+  x as isInPreview,
+  te as layoutPresets,
+  ee as layoutSchema,
   Z as setupPreviewRouter,
-  q as useDynamicLayout,
-  C as useLivePreview,
-  V as useLocaleSwitcher,
-  H as usePageData,
+  V as useDynamicLayout,
+  A as useLivePreview,
+  Q as useLocaleSwitcher,
+  q as usePageData,
   X as useSiteApi,
-  Q as useSiteComponents,
-  G as useSiteConfig,
-  B as useSiteData,
+  H as useSiteComponents,
+  B as useSiteConfig,
+  J as useSiteData,
   Y as useSkin
 };

package/dist/types/blocks.d.ts

@@ -12,9 +12,12 @@ export interface Block<T = any> {
     settings?: BlockSettings & Record<string, any>;
 }
 export interface HeroBlockData {
+    variant?: 'default' | 'minimal' | 'video';
     title: string;
     subtitle?: string;
+    badge?: string;
     image?: string;
+    backgroundImage?: string;
     overlay?: boolean;
     buttons?: Array<{
         text: string;

package/dist/types/layout.d.ts

@@ -0,0 +1,48 @@
+/**
+ * Layout schema definition for the editor.
+ * Describes the editable structure of a layout config.
+ */
+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>;
+}
+export interface LayoutField {
+    key: string;
+    type: 'text' | 'grid-areas' | 'select' | 'switch' | 'zone-list';
+    label: string;
+    breakpoint?: string;
+    options?: string[];
+    required?: boolean;
+}
+export interface LayoutSchemaDefinition {
+    type: string;
+    displayName: string;
+    description?: string;
+    fields: LayoutField[];
+    zoneFields: LayoutField[];
+}
+/**
+ * Schema describing how to edit a layout in the editor.
+ * Used to render a form for creating/editing layout configs.
+ */
+export declare const layoutSchema: LayoutSchemaDefinition;
+/**
+ * Built-in layout presets for quick layout creation.
+ */
+export declare const layoutPresets: Record<string, {
+    displayName: string;
+    config: LayoutConfig;
+}>;

package/package.json

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

package/src/composables/useDynamicLayout.ts

@@ -2,28 +2,9 @@ import { computed, type Ref } 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';
 
-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,

package/src/index.ts

@@ -9,7 +9,8 @@ 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 { LayoutConfig, LayoutZone, GridBreakpoint, LayoutSchemaDefinition, LayoutField } from './types/layout.js';
+export { layoutSchema, layoutPresets } from './types/layout.js';
 export type { PreviewMessage } from './composables/useLivePreview.js';
 
 // Worker

package/src/types/blocks.ts

@@ -14,9 +14,12 @@ export interface Block<T = any> {
 }
 
 export interface HeroBlockData {
+  variant?: 'default' | 'minimal' | 'video';
   title: string;
   subtitle?: string;
+  badge?: string;
   image?: string;
+  backgroundImage?: string;
   overlay?: boolean;
   buttons?: Array<{ text: string; url: string; variant?: 'primary' | 'outline' | 'white' }>;
   stats?: Array<{ value: string; label: string }>;

package/src/types/layout.ts

@@ -0,0 +1,158 @@
+/**
+ * Layout schema definition for the editor.
+ * Describes the editable structure of a layout config.
+ */
+
+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>;
+}
+
+export interface LayoutField {
+  key: string;
+  type: 'text' | 'grid-areas' | 'select' | 'switch' | 'zone-list';
+  label: string;
+  breakpoint?: string;
+  options?: string[];
+  required?: boolean;
+}
+
+export interface LayoutSchemaDefinition {
+  type: string;
+  displayName: string;
+  description?: string;
+  fields: LayoutField[];
+  zoneFields: LayoutField[];
+}
+
+/**
+ * Schema describing how to edit a layout in the editor.
+ * Used to render a form for creating/editing layout configs.
+ */
+export const layoutSchema: LayoutSchemaDefinition = {
+  type: 'layout',
+  displayName: 'Layout',
+  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.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' },
+
+    // Tablet (sm — 600px)
+    { key: 'grid.sm.areas', type: 'grid-areas', label: 'Grid Areas (sm 600px+)', breakpoint: 'sm' },
+    { key: 'grid.sm.columns', type: 'text', label: 'Columns (sm)', breakpoint: 'sm' },
+    { key: 'grid.sm.rows', type: 'text', label: 'Rows (sm)', breakpoint: 'sm' },
+    { key: 'grid.sm.gap', type: 'text', label: 'Gap (sm)', breakpoint: 'sm' },
+
+    // Desktop (md — 960px)
+    { key: 'grid.md.areas', type: 'grid-areas', label: 'Grid Areas (md 960px+)', breakpoint: 'md' },
+    { key: 'grid.md.columns', type: 'text', label: 'Columns (md)', breakpoint: 'md' },
+    { key: 'grid.md.rows', type: 'text', label: 'Rows (md)', breakpoint: 'md' },
+    { key: 'grid.md.gap', type: 'text', label: 'Gap (md)', breakpoint: 'md' },
+
+    // Large desktop (lg — 1280px)
+    { key: 'grid.lg.areas', type: 'grid-areas', label: 'Grid Areas (lg 1280px+)', breakpoint: 'lg' },
+    { key: 'grid.lg.columns', type: 'text', label: 'Columns (lg)', breakpoint: 'lg' },
+    { key: 'grid.lg.rows', type: 'text', label: 'Rows (lg)', breakpoint: 'lg' },
+    { key: 'grid.lg.gap', type: 'text', label: 'Gap (lg)', breakpoint: 'lg' },
+
+    // Zones
+    { key: 'zones', type: 'zone-list', label: 'Zones', required: true },
+  ],
+  zoneFields: [
+    { key: 'type', type: 'select', label: 'Type', options: ['slot', 'component'] },
+    { key: 'component', type: 'text', label: 'Component Key' },
+    { key: 'class', type: 'text', label: 'CSS Class' },
+    { key: 'container', type: 'switch', label: 'Wrap in Container' },
+  ],
+};
+
+/**
+ * Built-in layout presets for quick layout creation.
+ */
+export const layoutPresets: Record<string, { displayName: string; config: LayoutConfig }> = {
+  default: {
+    displayName: 'Full Width',
+    config: {
+      grid: {
+        default: { areas: ['header', 'main', 'footer'], rows: 'auto 1fr auto' },
+      },
+      zones: {
+        header: { component: 'nav-menu' },
+        main: { type: 'slot' },
+        footer: { component: 'footer' },
+      },
+    },
+  },
+  sidebar: {
+    displayName: 'Sidebar',
+    config: {
+      grid: {
+        default: { areas: ['header', 'main', 'sidebar', 'footer'], columns: '1fr', rows: 'auto 1fr auto auto' },
+        md: { areas: ['header header', 'sidebar main', 'footer footer'], columns: '280px 1fr', rows: 'auto 1fr auto' },
+      },
+      zones: {
+        header: { component: 'nav-menu' },
+        sidebar: { component: 'sidebar-menu' },
+        main: { type: 'slot' },
+        footer: { component: 'footer' },
+      },
+    },
+  },
+  article: {
+    displayName: 'Article',
+    config: {
+      grid: {
+        default: { areas: ['header', 'main', 'footer'], rows: 'auto 1fr auto' },
+      },
+      zones: {
+        header: { component: 'nav-menu' },
+        main: { type: 'slot', container: true, containerStyle: { 'max-width': '900px' } },
+        footer: { component: 'footer' },
+      },
+    },
+  },
+  landing: {
+    displayName: 'Landing (no nav)',
+    config: {
+      grid: {
+        default: { areas: ['main'] },
+      },
+      zones: {
+        main: { type: 'slot' },
+      },
+    },
+  },
+  magazine: {
+    displayName: 'Magazine',
+    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' },
+      },
+      zones: {
+        header: { component: 'nav-menu' },
+        main: { type: 'slot' },
+        aside: { component: 'sidebar-menu' },
+        footer: { component: 'footer' },
+      },
+    },
+  },
+};