@xosen/site-sdk 0.0.1

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@xosen/site-sdk",
+  "version": "0.0.1",
+  "description": "Shared Vue components and composables for Xosen site templates",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "development": "./src/index.ts",
+      "default": "./dist/index.js"
+    },
+    "./style.css": "./dist/index.css",
+    "./worker": {
+      "types": "./src/worker/index.ts",
+      "default": "./src/worker/index.ts"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "vue-tsc --declaration --emitDeclarationOnly --outDir dist && vite build",
+    "dev": "vite build --watch",
+    "clean": "rm -rf dist"
+  },
+  "peerDependencies": {
+    "vue": "catalog:",
+    "vue-i18n": "catalog:",
+    "vue-router": "catalog:"
+  },
+  "devDependencies": {
+    "vue": "catalog:",
+    "vue-i18n": "catalog:",
+    "vue-router": "catalog:",
+    "vue-tsc": "catalog:",
+    "typescript": "catalog:",
+    "vite": "catalog:",
+    "@vitejs/plugin-vue": "catalog:"
+  }
+}

package/src/components/blocks/XBlockRenderer.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="x-block-renderer">
+    <template v-for="(block, i) in visibleBlocks" :key="i">
+      <component
+        :is="getBlockComponent(block.type)"
+        v-if="getBlockComponent(block.type)"
+        :data="block.data || block.props"
+        v-bind="block.settings"
+        :class="block.settings?.className"
+      />
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, type Component } from 'vue';
+
+import type { Block } from '../../types/blocks.js';
+import XHeroBlock from './XHeroBlock.vue';
+import XHtmlBlock from './XHtmlBlock.vue';
+import XCardsBlock from './XCardsBlock.vue';
+import XImageTextBlock from './XImageTextBlock.vue';
+import XPricingBlock from './XPricingBlock.vue';
+import XContactsBlock from './XContactsBlock.vue';
+
+const props = defineProps<{
+  blocks: Block[];
+}>();
+
+const blockRegistry: Record<string, Component> = {
+  hero: XHeroBlock,
+  html: XHtmlBlock,
+  cards: XCardsBlock,
+  'image-text': XImageTextBlock,
+  pricing: XPricingBlock,
+  contacts: XContactsBlock,
+};
+
+function getBlockComponent(type: string): Component | undefined {
+  return blockRegistry[type];
+}
+
+const visibleBlocks = computed(() => props.blocks.filter((b) => b.settings?.visible !== false));
+</script>

package/src/components/blocks/XCardsBlock.vue

@@ -0,0 +1,165 @@
+<template>
+  <section class="x-cards-block" :class="`x-cards-block--${variant}`">
+    <div class="x-cards-block__container">
+      <h2 v-if="data.title" class="x-cards-block__title">{{ data.title }}</h2>
+      <p v-if="data.subtitle" class="x-cards-block__subtitle">{{ data.subtitle }}</p>
+
+      <div class="x-cards-block__grid" :style="gridStyle">
+        <component
+          :is="card.link ? 'a' : 'div'"
+          v-for="(card, i) in data.cards"
+          :key="i"
+          class="x-card"
+          :href="card.link"
+        >
+          <img
+            v-if="card.image && variant === 'image-cards'"
+            :src="card.image"
+            :alt="card.title"
+            class="x-card__image"
+          />
+          <div v-if="card.icon && variant !== 'image-cards'" class="x-card__icon" :style="iconStyle">{{ iconDisplay(card.icon) }}</div>
+          <h3 class="x-card__title">{{ card.title }}</h3>
+          <p class="x-card__desc">{{ card.desc }}</p>
+        </component>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import type { CardsBlockData } from '../../types/blocks.js';
+
+const props = withDefaults(
+  defineProps<{
+    data: CardsBlockData;
+    variant?: 'default' | 'icon-cards' | 'image-cards';
+    columns?: 2 | 3 | 4;
+  }>(),
+  { variant: 'default', columns: undefined },
+);
+
+const gridStyle = computed(() => {
+  const cols = props.columns || Math.min(props.data.cards.length, 4);
+  return { '--columns': cols };
+});
+
+const iconStyle = { color: 'var(--x-color-primary, #1e73be)' };
+
+// Map mdi-* icon names to emoji, or pass through if already an emoji/character
+const iconMap: Record<string, string> = {
+  'mdi-lightbulb': '💡',
+  'mdi-code-braces': '⚙️',
+  'mdi-headset': '🎧',
+  'mdi-check-circle': '✅',
+  'mdi-shield': '🛡️',
+  'mdi-chart-line': '📈',
+  'mdi-rocket': '🚀',
+  'mdi-heart': '❤️',
+  'mdi-star': '⭐',
+  'mdi-cog': '⚙️',
+  'mdi-email': '📧',
+  'mdi-phone': '📞',
+  'mdi-map-marker': '📍',
+  'mdi-clock': '🕐',
+  'mdi-account': '👤',
+  'mdi-team': '👥',
+};
+
+function iconDisplay(icon: string): string {
+  return iconMap[icon] || icon;
+}
+</script>
+
+<style scoped>
+.x-cards-block {
+  padding: 80px 24px;
+}
+
+.x-cards-block__container {
+  max-width: var(--x-max-width, 1200px);
+  margin: 0 auto;
+}
+
+.x-cards-block__title {
+  text-align: center;
+  font-size: 2rem;
+  font-weight: 700;
+  color: var(--x-color-text, #2c3e50);
+  margin: 0 0 8px;
+}
+
+.x-cards-block__subtitle {
+  text-align: center;
+  color: var(--x-color-text-light, #6b7c93);
+  margin: 0 0 48px;
+}
+
+.x-cards-block__grid {
+  display: grid;
+  grid-template-columns: repeat(var(--columns, 4), 1fr);
+  gap: 24px;
+}
+
+@media (max-width: 768px) {
+  .x-cards-block__grid {
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  }
+}
+
+.x-card {
+  background: var(--x-color-surface, #fff);
+  border: 1px solid var(--x-color-border, #e2e8f0);
+  border-radius: var(--x-border-radius, 12px);
+  padding: 32px 24px;
+  text-align: center;
+  text-decoration: none;
+  color: inherit;
+  transition:
+    transform 0.2s,
+    box-shadow 0.2s;
+}
+
+.x-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
+}
+
+.x-card__icon {
+  font-size: 2.5rem;
+  margin-bottom: 16px;
+  width: 64px;
+  height: 64px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: auto;
+  margin-right: auto;
+  background: var(--x-color-background-alt, #f7f9fc);
+  border-radius: 50%;
+}
+
+.x-card__image {
+  width: 100%;
+  aspect-ratio: 16/9;
+  object-fit: cover;
+  border-radius: calc(var(--x-border-radius, 12px) - 4px);
+  margin-bottom: 16px;
+}
+
+.x-card__title {
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: var(--x-color-text, #2c3e50);
+  margin: 0 0 8px;
+}
+
+.x-card__desc {
+  font-size: 0.9rem;
+  color: var(--x-color-text-light, #6b7c93);
+  line-height: 1.6;
+  margin: 0;
+}
+</style>

package/src/components/blocks/XContactsBlock.vue

@@ -0,0 +1,110 @@
+<template>
+  <section class="x-contacts">
+    <div class="x-contacts__container">
+      <h2 v-if="data?.title" class="x-contacts__title">{{ data.title }}</h2>
+
+      <div v-if="offices" class="x-contacts__grid">
+        <div
+          v-for="(office, i) in offices"
+          :key="i"
+          class="x-contacts__card"
+          :class="{ 'x-contacts__card--main': office.isMain }"
+        >
+          <h3 class="x-contacts__name">{{ office.name }}</h3>
+          <p v-if="office.address" class="x-contacts__info">{{ office.address }}</p>
+          <p v-if="office.phone" class="x-contacts__info">
+            <a :href="`tel:${office.phone}`">{{ office.phone }}</a>
+          </p>
+          <p v-if="office.email" class="x-contacts__info">
+            <a :href="`mailto:${office.email}`">{{ office.email }}</a>
+          </p>
+          <p v-if="office.hours" class="x-contacts__hours">{{ office.hours }}</p>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import type { ContactsBlockData } from '../../types/blocks.js';
+import { useSiteData } from '../../composables/useSiteData.js';
+
+interface Office {
+  name: string;
+  address?: string;
+  phone?: string;
+  email?: string;
+  hours?: string;
+  isMain?: boolean;
+}
+
+defineProps<{
+  data?: ContactsBlockData;
+}>();
+
+const kvOffices = useSiteData<Office[]>('contacts:offices', 'contacts:offices');
+const offices = computed(() => kvOffices.value || []);
+</script>
+
+<style scoped>
+.x-contacts {
+  padding: 80px 24px;
+}
+
+.x-contacts__container {
+  max-width: var(--x-max-width, 1200px);
+  margin: 0 auto;
+}
+
+.x-contacts__title {
+  text-align: center;
+  font-size: 2rem;
+  font-weight: 700;
+  color: var(--x-color-text, #2c3e50);
+  margin: 0 0 48px;
+}
+
+.x-contacts__grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 24px;
+}
+
+.x-contacts__card {
+  background: var(--x-color-surface, #fff);
+  border: 1px solid var(--x-color-border, #e2e8f0);
+  border-radius: var(--x-border-radius, 12px);
+  padding: 24px;
+}
+
+.x-contacts__card--main {
+  border-color: var(--x-color-primary, #1e73be);
+  background: var(--x-color-primary-light, #e8f2fc);
+}
+
+.x-contacts__name {
+  font-size: 1.125rem;
+  font-weight: 600;
+  margin: 0 0 12px;
+  color: var(--x-color-text, #2c3e50);
+}
+
+.x-contacts__info {
+  margin: 0 0 8px;
+  font-size: 0.9rem;
+  color: var(--x-color-text, #2c3e50);
+}
+
+.x-contacts__info a {
+  color: var(--x-color-primary, #1e73be);
+  text-decoration: none;
+}
+
+.x-contacts__hours {
+  margin: 8px 0 0;
+  font-size: 0.85rem;
+  color: var(--x-color-text-light, #6b7c93);
+}
+</style>

package/src/components/blocks/XHeroBlock.vue

@@ -0,0 +1,152 @@
+<template>
+  <section class="x-hero" :class="{ 'x-hero--fullscreen': variant === 'fullscreen' }" :style="bgStyle">
+    <div v-if="data.image && data.overlay !== false" class="x-hero__overlay" />
+    <div class="x-hero__content">
+      <h1 v-if="data.title" class="x-hero__title">{{ data.title }}</h1>
+      <p v-if="data.subtitle" class="x-hero__subtitle">{{ data.subtitle }}</p>
+
+      <div v-if="data.buttons?.length" class="x-hero__buttons">
+        <a
+          v-for="(btn, i) in data.buttons"
+          :key="i"
+          :href="btn.url"
+          class="x-btn"
+          :class="`x-btn--${btn.variant || 'primary'}`"
+        >
+          {{ btn.text }}
+        </a>
+      </div>
+
+      <div v-if="data.stats?.length" class="x-hero__stats">
+        <div v-for="(stat, i) in data.stats" :key="i" class="x-hero__stat">
+          <span class="x-hero__stat-value">{{ stat.value }}</span>
+          <span class="x-hero__stat-label">{{ stat.label }}</span>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import type { HeroBlockData } from '../../types/blocks.js';
+
+const props = withDefaults(
+  defineProps<{
+    data: HeroBlockData;
+    variant?: 'fullscreen' | 'compact' | 'centered';
+  }>(),
+  { variant: 'fullscreen' },
+);
+
+const bgStyle = computed(() => {
+  if (!props.data.image) return {};
+  return { backgroundImage: `url(${props.data.image})` };
+});
+</script>
+
+<style scoped>
+.x-hero {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 400px;
+  padding: 120px 24px;
+  background: linear-gradient(135deg, var(--x-color-primary, #1e73be) 0%, var(--x-color-secondary, #2c3e50) 100%);
+  background-size: cover;
+  background-position: center;
+  color: white;
+  text-align: center;
+}
+
+.x-hero--fullscreen {
+  min-height: 100vh;
+}
+
+.x-hero__overlay {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+}
+
+.x-hero__content {
+  position: relative;
+  max-width: var(--x-max-width, 1200px);
+  z-index: 1;
+}
+
+.x-hero__title {
+  font-family: var(--x-font-heading, var(--x-font-family, inherit));
+  font-size: clamp(2rem, 5vw, 3.5rem);
+  font-weight: 800;
+  margin: 0 0 16px;
+}
+
+.x-hero__subtitle {
+  font-size: clamp(1rem, 2vw, 1.25rem);
+  opacity: 0.9;
+  max-width: 600px;
+  margin: 0 auto 32px;
+}
+
+.x-hero__buttons {
+  display: flex;
+  gap: 16px;
+  justify-content: center;
+  flex-wrap: wrap;
+  margin-bottom: 48px;
+}
+
+.x-hero__stats {
+  display: flex;
+  gap: 48px;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.x-hero__stat {
+  display: flex;
+  flex-direction: column;
+}
+
+.x-hero__stat-value {
+  font-size: 2rem;
+  font-weight: 700;
+}
+
+.x-hero__stat-label {
+  font-size: 0.875rem;
+  opacity: 0.8;
+}
+
+.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;
+  border: 2px solid transparent;
+}
+
+.x-btn--primary {
+  background: white;
+  color: var(--x-color-primary, #1e73be);
+}
+
+.x-btn--outline {
+  border-color: white;
+  color: white;
+  background: transparent;
+}
+
+.x-btn--white {
+  background: rgba(255, 255, 255, 0.15);
+  color: white;
+  border-color: rgba(255, 255, 255, 0.3);
+}
+</style>

package/src/components/blocks/XHtmlBlock.vue

@@ -0,0 +1,64 @@
+<template>
+  <section class="x-html-block">
+    <div class="x-html-block__content" v-html="data.content" />
+  </section>
+</template>
+
+<script setup lang="ts">
+import type { HtmlBlockData } from '../../types/blocks.js';
+
+defineProps<{
+  data: HtmlBlockData;
+}>();
+</script>
+
+<style scoped>
+.x-html-block {
+  padding: 48px 24px;
+}
+
+.x-html-block__content {
+  max-width: 800px;
+  margin: 0 auto;
+  font-family: var(--x-font-family, inherit);
+  color: var(--x-color-text, #2c3e50);
+  line-height: 1.8;
+}
+
+.x-html-block__content :deep(h2) {
+  font-size: 1.75rem;
+  font-weight: 700;
+  margin: 32px 0 16px;
+  color: var(--x-color-text, #2c3e50);
+}
+
+.x-html-block__content :deep(h3) {
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin: 24px 0 12px;
+}
+
+.x-html-block__content :deep(p) {
+  margin: 0 0 16px;
+}
+
+.x-html-block__content :deep(ul),
+.x-html-block__content :deep(ol) {
+  padding-left: 24px;
+  margin: 0 0 16px;
+}
+
+.x-html-block__content :deep(img) {
+  max-width: 100%;
+  border-radius: var(--x-border-radius, 8px);
+  margin: 16px 0;
+}
+
+.x-html-block__content :deep(blockquote) {
+  border-left: 4px solid var(--x-color-primary, #1e73be);
+  margin: 16px 0;
+  padding: 12px 24px;
+  background: var(--x-color-background-alt, #f7f9fc);
+  border-radius: 0 var(--x-border-radius, 8px) var(--x-border-radius, 8px) 0;
+}
+</style>

package/src/components/blocks/XImageTextBlock.vue

@@ -0,0 +1,101 @@
+<template>
+  <section class="x-image-text" :class="{ 'x-image-text--reverse': reverse }">
+    <div class="x-image-text__container">
+      <div class="x-image-text__text">
+        <h2 v-if="data.title" class="x-image-text__title">{{ data.title }}</h2>
+        <div v-if="data.content" class="x-image-text__content" v-html="data.content" />
+        <ul v-if="data.items?.length" class="x-image-text__checklist">
+          <li v-for="(item, i) in data.items" :key="i">
+            <span class="x-image-text__check-icon">{{ item.icon || '✓' }}</span>
+            {{ item.text }}
+          </li>
+        </ul>
+      </div>
+      <div v-if="data.image" class="x-image-text__image-wrap">
+        <img :src="data.image" :alt="data.title || ''" class="x-image-text__image" />
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+import type { ImageTextBlockData } from '../../types/blocks.js';
+
+withDefaults(
+  defineProps<{
+    data: ImageTextBlockData;
+    reverse?: boolean;
+  }>(),
+  { reverse: false },
+);
+</script>
+
+<style scoped>
+.x-image-text {
+  padding: 80px 24px;
+}
+
+.x-image-text__container {
+  max-width: var(--x-max-width, 1200px);
+  margin: 0 auto;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 48px;
+  align-items: center;
+}
+
+.x-image-text--reverse .x-image-text__container {
+  direction: rtl;
+}
+
+.x-image-text--reverse .x-image-text__text {
+  direction: ltr;
+}
+
+.x-image-text__title {
+  font-size: 2rem;
+  font-weight: 700;
+  color: var(--x-color-text, #2c3e50);
+  margin: 0 0 16px;
+}
+
+.x-image-text__content {
+  color: var(--x-color-text, #2c3e50);
+  line-height: 1.8;
+}
+
+.x-image-text__checklist {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.x-image-text__checklist li {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 0;
+  font-size: 1rem;
+  color: var(--x-color-text, #2c3e50);
+}
+
+.x-image-text__check-icon {
+  color: var(--x-color-success, #00d084);
+  font-weight: bold;
+}
+
+.x-image-text__image {
+  width: 100%;
+  border-radius: var(--x-border-radius, 12px);
+}
+
+@media (max-width: 768px) {
+  .x-image-text__container {
+    grid-template-columns: 1fr;
+  }
+
+  .x-image-text--reverse .x-image-text__container {
+    direction: ltr;
+  }
+}
+</style>