@xosen/site-sdk 0.0.1

package/src/components/blocks/XPricingBlock.vue

@@ -0,0 +1,261 @@
+<template>
+  <section class="x-pricing">
+    <div class="x-pricing__container">
+      <h2 v-if="title" class="x-pricing__title">{{ title }}</h2>
+      <p v-if="subtitle" class="x-pricing__subtitle">{{ subtitle }}</p>
+
+      <!-- Tabs for tariff groups -->
+      <div v-if="groups.length > 1" class="x-pricing__tabs">
+        <button
+          v-for="group in groups"
+          :key="group"
+          class="x-pricing__tab"
+          :class="{ 'x-pricing__tab--active': activeGroup === group }"
+          @click="activeGroup = group"
+        >
+          {{ group }}
+        </button>
+      </div>
+
+      <div class="x-pricing__grid">
+        <div
+          v-for="(plan, i) in activePlans"
+          :key="plan.id || i"
+          class="x-pricing-card"
+          :class="{ 'x-pricing-card--featured': i === featuredIndex }"
+        >
+          <h3 class="x-pricing-card__name">{{ plan.name }}</h3>
+          <p v-if="plan.description" class="x-pricing-card__desc">{{ plan.description }}</p>
+          <div class="x-pricing-card__price">
+            <span class="x-pricing-card__amount">{{ plan.price }}</span>
+            <span v-if="plan.period" class="x-pricing-card__period">/{{ plan.period }}</span>
+          </div>
+          <ul v-if="plan.features?.length" class="x-pricing-card__features">
+            <li v-for="(feature, fi) in plan.features" :key="fi">{{ feature }}</li>
+          </ul>
+          <a v-if="plan.actionUrl" :href="plan.actionUrl" class="x-btn x-btn--primary x-pricing-card__action">
+            {{ plan.actionText || 'Choose' }}
+          </a>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, watch } from 'vue';
+
+import type { PricingBlockData } from '../../types/blocks.js';
+import { useSiteData } from '../../composables/useSiteData.js';
+import { useSiteApi } from '../../composables/useSiteApi.js';
+
+interface Plan {
+  id?: string;
+  name: string;
+  description?: string;
+  price: string | number;
+  period?: string;
+  features?: string[];
+  actionUrl?: string;
+  actionText?: string;
+  tariffGroupName?: string;
+}
+
+const props = withDefaults(
+  defineProps<{
+    data?: PricingBlockData;
+    source?: 'api' | 'kv';
+    featuredIndex?: number;
+  }>(),
+  { source: 'kv', featuredIndex: 1 },
+);
+
+const title = computed(() => props.data?.title);
+const subtitle = computed(() => props.data?.subtitle);
+
+const plans = ref<Plan[]>([]);
+const activeGroup = ref('');
+
+// Load from KV (preloaded)
+const kvTariffs = useSiteData<Plan[]>('tariffs', 'tariffs');
+
+// Load from API if source is 'api'
+const api = useSiteApi();
+
+onMounted(async () => {
+  if (props.source === 'api') {
+    try {
+      plans.value = await api.getTariffs();
+    } catch {
+      // Fallback to KV
+    }
+  }
+});
+
+watch(
+  kvTariffs,
+  (val) => {
+    if (val && props.source === 'kv') {
+      plans.value = val;
+    }
+  },
+  { immediate: true },
+);
+
+const groups = computed(() => {
+  const names = new Set(plans.value.map((p) => p.tariffGroupName).filter(Boolean));
+  return Array.from(names) as string[];
+});
+
+watch(
+  groups,
+  (g) => {
+    if (g.length > 0 && !activeGroup.value) {
+      activeGroup.value = g[0];
+    }
+  },
+  { immediate: true },
+);
+
+const activePlans = computed(() => {
+  if (!activeGroup.value || groups.value.length <= 1) return plans.value;
+  return plans.value.filter((p) => p.tariffGroupName === activeGroup.value);
+});
+</script>
+
+<style scoped>
+.x-pricing {
+  padding: 80px 24px;
+  background: var(--x-color-background-alt, #f7f9fc);
+}
+
+.x-pricing__container {
+  max-width: var(--x-max-width, 1200px);
+  margin: 0 auto;
+}
+
+.x-pricing__title {
+  text-align: center;
+  font-size: 2rem;
+  font-weight: 700;
+  color: var(--x-color-text, #2c3e50);
+  margin: 0 0 8px;
+}
+
+.x-pricing__subtitle {
+  text-align: center;
+  color: var(--x-color-text-light, #6b7c93);
+  margin: 0 0 32px;
+}
+
+.x-pricing__tabs {
+  display: flex;
+  justify-content: center;
+  gap: 8px;
+  margin-bottom: 32px;
+}
+
+.x-pricing__tab {
+  padding: 8px 24px;
+  border: 2px solid var(--x-color-border, #e2e8f0);
+  border-radius: var(--x-border-radius, 8px);
+  background: transparent;
+  cursor: pointer;
+  font-weight: 500;
+  transition: all 0.2s;
+}
+
+.x-pricing__tab--active {
+  background: var(--x-color-primary, #1e73be);
+  border-color: var(--x-color-primary, #1e73be);
+  color: white;
+}
+
+.x-pricing__grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 24px;
+  align-items: start;
+}
+
+.x-pricing-card {
+  background: var(--x-color-surface, #fff);
+  border: 1px solid var(--x-color-border, #e2e8f0);
+  border-radius: var(--x-border-radius, 12px);
+  padding: 32px;
+  text-align: center;
+  transition: transform 0.2s;
+}
+
+.x-pricing-card--featured {
+  transform: scale(1.04);
+  border-color: var(--x-color-primary, #1e73be);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+}
+
+.x-pricing-card__name {
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin: 0 0 8px;
+}
+
+.x-pricing-card__desc {
+  color: var(--x-color-text-light, #6b7c93);
+  font-size: 0.9rem;
+  margin: 0 0 16px;
+}
+
+.x-pricing-card__price {
+  margin: 16px 0;
+}
+
+.x-pricing-card__amount {
+  font-size: 2.5rem;
+  font-weight: 800;
+  color: var(--x-color-primary, #1e73be);
+}
+
+.x-pricing-card__period {
+  color: var(--x-color-text-light, #6b7c93);
+}
+
+.x-pricing-card__features {
+  list-style: none;
+  padding: 0;
+  margin: 0 0 24px;
+  text-align: left;
+}
+
+.x-pricing-card__features li {
+  padding: 6px 0;
+  border-bottom: 1px solid var(--x-color-border, #e2e8f0);
+  font-size: 0.9rem;
+}
+
+.x-pricing-card__features li::before {
+  content: '✓ ';
+  color: var(--x-color-success, #00d084);
+  font-weight: bold;
+}
+
+.x-pricing-card__action {
+  width: 100%;
+  justify-content: center;
+}
+
+.x-btn {
+  display: inline-flex;
+  align-items: center;
+  padding: 12px 32px;
+  border-radius: var(--x-border-radius, 8px);
+  font-weight: 600;
+  text-decoration: none;
+  transition: all 0.2s;
+  cursor: pointer;
+}
+
+.x-btn--primary {
+  background: var(--x-color-primary, #1e73be);
+  color: white;
+}
+</style>

package/src/components/common/XLocaleSwitcher.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="x-locale-switcher">
+    <button
+      v-for="loc in locales"
+      :key="loc"
+      class="x-locale-switcher__btn"
+      :class="{ 'x-locale-switcher__btn--active': locale === loc }"
+      @click="switchLocale(loc)"
+    >
+      {{ loc.toUpperCase() }}
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n';
+
+defineProps<{
+  locales: string[];
+}>();
+
+const { locale } = useI18n();
+
+function switchLocale(loc: string) {
+  locale.value = loc;
+  localStorage.setItem('site-locale', loc);
+}
+</script>
+
+<style scoped>
+.x-locale-switcher {
+  display: flex;
+  gap: 4px;
+}
+
+.x-locale-switcher__btn {
+  padding: 4px 8px;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  background: transparent;
+  cursor: pointer;
+  font-size: 0.75rem;
+  font-weight: 600;
+  opacity: 0.6;
+  transition: all 0.2s;
+}
+
+.x-locale-switcher__btn--active {
+  opacity: 1;
+  border-color: currentColor;
+}
+
+.x-locale-switcher__btn:hover {
+  opacity: 1;
+}
+</style>

package/src/components/layout/XSiteFooter.vue

@@ -0,0 +1,64 @@
+<template>
+  <footer class="x-footer">
+    <div class="x-footer__container">
+      <div v-if="footerConfig.links?.length" class="x-footer__links">
+        <a v-for="link in footerConfig.links" :key="link.url" :href="link.url" class="x-footer__link">
+          {{ link.text }}
+        </a>
+      </div>
+      <p v-if="copyright" class="x-footer__copyright">{{ copyright }}</p>
+    </div>
+  </footer>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { useSiteConfig } from '../../composables/useSiteConfig.js';
+
+const { footer: footerConfig, branding } = useSiteConfig();
+
+const copyright = computed(() => {
+  if (footerConfig.value.copyright) return footerConfig.value.copyright;
+  const year = new Date().getFullYear();
+  return `© ${year} ${branding.value.siteName || ''}`;
+});
+</script>
+
+<style scoped>
+.x-footer {
+  background: var(--x-color-text, #2c3e50);
+  color: rgba(255, 255, 255, 0.7);
+  padding: 32px 24px;
+  text-align: center;
+}
+
+.x-footer__container {
+  max-width: var(--x-max-width, 1200px);
+  margin: 0 auto;
+}
+
+.x-footer__links {
+  display: flex;
+  gap: 24px;
+  justify-content: center;
+  margin-bottom: 16px;
+  flex-wrap: wrap;
+}
+
+.x-footer__link {
+  color: rgba(255, 255, 255, 0.7);
+  text-decoration: none;
+  font-size: 0.9rem;
+}
+
+.x-footer__link:hover {
+  color: white;
+}
+
+.x-footer__copyright {
+  font-size: 0.85rem;
+  margin: 0;
+  opacity: 0.6;
+}
+</style>

package/src/components/layout/XSiteLayout.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="x-site-layout">
+    <XSiteNav />
+    <main class="x-site-layout__main">
+      <slot />
+    </main>
+    <XSiteFooter />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted } from 'vue';
+
+import { useSkin } from '../../composables/useSkin.js';
+import XSiteNav from './XSiteNav.vue';
+import XSiteFooter from './XSiteFooter.vue';
+
+// Apply skin CSS variables on mount
+useSkin();
+</script>
+
+<style scoped>
+.x-site-layout {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  font-family: var(--x-font-family, 'Inter', sans-serif);
+  color: var(--x-color-text, #2c3e50);
+  background: var(--x-color-background, #ffffff);
+}
+
+.x-site-layout__main {
+  flex: 1;
+}
+</style>

package/src/components/layout/XSiteNav.vue

@@ -0,0 +1,178 @@
+<template>
+  <nav class="x-nav" :class="{ 'x-nav--scrolled': scrolled }">
+    <div class="x-nav__container">
+      <a href="/" class="x-nav__logo">
+        <img v-if="branding.logo" :src="branding.logo" :alt="branding.siteName || ''" class="x-nav__logo-img" />
+        <span v-else class="x-nav__logo-text">{{ branding.siteName || '' }}</span>
+      </a>
+
+      <div class="x-nav__links" :class="{ 'x-nav__links--open': menuOpen }">
+        <a
+          v-for="item in navigation"
+          :key="item.url"
+          :href="item.url"
+          class="x-nav__link"
+          :target="item.external ? '_blank' : undefined"
+          @click="menuOpen = false"
+        >
+          {{ item.text }}
+        </a>
+
+        <XLocaleSwitcher v-if="locales.length > 1" :locales="locales" />
+      </div>
+
+      <button class="x-nav__hamburger" @click="menuOpen = !menuOpen">
+        <span />
+        <span />
+        <span />
+      </button>
+    </div>
+  </nav>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue';
+
+import { useSiteConfig } from '../../composables/useSiteConfig.js';
+import XLocaleSwitcher from '../common/XLocaleSwitcher.vue';
+
+const { navigation, branding, locales } = useSiteConfig();
+
+const scrolled = ref(false);
+const menuOpen = ref(false);
+
+function onScroll() {
+  scrolled.value = window.scrollY > 20;
+}
+
+onMounted(() => window.addEventListener('scroll', onScroll));
+onUnmounted(() => window.removeEventListener('scroll', onScroll));
+</script>
+
+<style scoped>
+.x-nav {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 100;
+  transition:
+    background 0.3s,
+    box-shadow 0.3s;
+}
+
+.x-nav--scrolled {
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(10px);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+}
+
+.x-nav__container {
+  max-width: var(--x-max-width, 1200px);
+  margin: 0 auto;
+  padding: 0 24px;
+  height: 64px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.x-nav__logo {
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+}
+
+.x-nav__logo-img {
+  height: 36px;
+}
+
+.x-nav__logo-text {
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: var(--x-color-text, #2c3e50);
+}
+
+.x-nav--scrolled .x-nav__logo-text {
+  color: var(--x-color-text, #2c3e50);
+}
+
+.x-nav:not(.x-nav--scrolled) .x-nav__logo-text {
+  color: white;
+}
+
+.x-nav__links {
+  display: flex;
+  align-items: center;
+  gap: 24px;
+}
+
+.x-nav__link {
+  text-decoration: none;
+  font-weight: 500;
+  font-size: 0.9rem;
+  transition: color 0.2s;
+}
+
+.x-nav--scrolled .x-nav__link {
+  color: var(--x-color-text, #2c3e50);
+}
+
+.x-nav:not(.x-nav--scrolled) .x-nav__link {
+  color: rgba(255, 255, 255, 0.9);
+}
+
+.x-nav__link:hover {
+  color: var(--x-color-primary, #1e73be);
+}
+
+.x-nav__hamburger {
+  display: none;
+  flex-direction: column;
+  gap: 5px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 4px;
+}
+
+.x-nav__hamburger span {
+  width: 24px;
+  height: 2px;
+  background: var(--x-color-text, #2c3e50);
+  transition: all 0.2s;
+}
+
+.x-nav:not(.x-nav--scrolled) .x-nav__hamburger span {
+  background: white;
+}
+
+@media (max-width: 768px) {
+  .x-nav__hamburger {
+    display: flex;
+  }
+
+  .x-nav__links {
+    display: none;
+    position: fixed;
+    top: 64px;
+    right: 0;
+    width: 280px;
+    height: calc(100vh - 64px);
+    background: var(--x-color-surface, #fff);
+    flex-direction: column;
+    padding: 24px;
+    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.1);
+    align-items: flex-start;
+  }
+
+  .x-nav__links--open {
+    display: flex;
+  }
+
+  .x-nav__links .x-nav__link {
+    color: var(--x-color-text, #2c3e50) !important;
+    padding: 8px 0;
+  }
+}
+</style>

package/src/composables/useSiteApi.ts

@@ -0,0 +1,32 @@
+import type { SiteData } from '../types/config.js';
+
+/**
+ * Fetch data from the Xosen org API (for live data like tariffs, products).
+ * Uses the API base URL from site config.
+ */
+export function useSiteApi() {
+  const siteData = (window as any).__SITE_DATA__ as SiteData | undefined;
+  const apiBase = siteData?.apiBase || '';
+
+  async function get<T>(path: string): Promise<T> {
+    const response = await fetch(`${apiBase}${path}`);
+    if (!response.ok) {
+      throw new Error(`API error: ${response.status}`);
+    }
+    return response.json();
+  }
+
+  async function getTariffs() {
+    return get<any[]>('/v1/billing/tariffs');
+  }
+
+  async function getProducts() {
+    return get<any[]>('/v1/billing/services');
+  }
+
+  return {
+    get,
+    getTariffs,
+    getProducts,
+  };
+}

package/src/composables/useSiteConfig.ts

@@ -0,0 +1,37 @@
+import { computed } from 'vue';
+
+import type { SiteConfig, SiteData } from '../types/config.js';
+
+/**
+ * Access the site configuration injected by the CF Worker.
+ */
+export function useSiteConfig() {
+  const siteData = (window as any).__SITE_DATA__ as SiteData | undefined;
+
+  const config = computed<SiteConfig | null>(() => siteData?.config || null);
+
+  const navigation = computed(() => config.value?.navigation || []);
+  const locales = computed(() => config.value?.locales || []);
+  const defaultLocale = computed(() => config.value?.defaultLocale || 'en');
+  const branding = computed(() => config.value?.branding || {});
+  const footer = computed(() => config.value?.footer || {});
+  const features = computed(() => config.value?.features || {});
+
+  function hasFeature(key: string): boolean {
+    const val = features.value[key];
+    if (typeof val === 'boolean') return val;
+    if (typeof val === 'object') return true;
+    return false;
+  }
+
+  return {
+    config,
+    navigation,
+    locales,
+    defaultLocale,
+    branding,
+    footer,
+    features,
+    hasFeature,
+  };
+}

package/src/composables/useSiteData.ts

@@ -0,0 +1,51 @@
+import { ref, onMounted, watch, type Ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import type { SiteData } from '../types/config.js';
+
+/**
+ * Read preloaded site data from window.__SITE_DATA__ or fetch from API.
+ *
+ * @param key - Key in __SITE_DATA__ object (e.g. 'tariffs', 'contacts:offices')
+ * @param kvKey - KV key suffix for API fallback (e.g. 'tariffs', 'contacts:offices')
+ */
+export function useSiteData<T>(key: string, kvKey: string): Ref<T | null> {
+  const data = ref<T | null>(null) as Ref<T | null>;
+  const { locale } = useI18n();
+
+  const siteData = (window as any).__SITE_DATA__ as SiteData | undefined;
+  const initialLocale = siteData?.locale;
+  const tenantPrefix = siteData?.config?.tenantPrefix || 'tenant';
+
+  function loadFromPreloaded(): boolean {
+    if (siteData && siteData[key] && locale.value === initialLocale) {
+      data.value = siteData[key] as T;
+      return true;
+    }
+    return false;
+  }
+
+  async function fetchFromApi() {
+    try {
+      const fullKey = `${tenantPrefix}:${kvKey}:${locale.value}`;
+      const response = await fetch(`/api/content/${fullKey}`);
+      if (response.ok) {
+        data.value = await response.json();
+      }
+    } catch {
+      // Silently fail — data stays null
+    }
+  }
+
+  onMounted(() => {
+    if (!loadFromPreloaded()) {
+      fetchFromApi();
+    }
+  });
+
+  watch(locale, () => {
+    fetchFromApi();
+  });
+
+  return data;
+}