@xosen/site-sdk 0.0.6 → 0.0.8

package/package.json

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

package/src/composables/useLivePreview.ts

@@ -9,6 +9,9 @@ export interface PreviewMessage {
     title?: string;
     blocks?: any[];
     meta?: Record<string, any>;
+    layout?: string;
+    /** Page-level context fields (author, featuredImage, excerpt, etc.) */
+    [key: string]: any;
   };
 }
 

package/src/index.ts

@@ -1,22 +1,3 @@
-// Layout
-export { default as XSiteLayout } from './components/layout/XSiteLayout.vue';
-export { default as XSiteNav } from './components/layout/XSiteNav.vue';
-export { default as XSiteFooter } from './components/layout/XSiteFooter.vue';
-
-// Blocks
-export { default as XBlockRenderer } from './components/blocks/XBlockRenderer.vue';
-export { default as XHeroBlock } from './components/blocks/XHeroBlock.vue';
-export { default as XHtmlBlock } from './components/blocks/XHtmlBlock.vue';
-export { default as XCardsBlock } from './components/blocks/XCardsBlock.vue';
-export { default as XImageTextBlock } from './components/blocks/XImageTextBlock.vue';
-export { default as XPricingBlock } from './components/blocks/XPricingBlock.vue';
-export { default as XContactsBlock } from './components/blocks/XContactsBlock.vue';
-export { default as XGalleryBlock } from './components/blocks/XGalleryBlock.vue';
-export { default as XMapBlock } from './components/blocks/XMapBlock.vue';
-
-// Common
-export { default as XLocaleSwitcher } from './components/common/XLocaleSwitcher.vue';
-
 // Composables
 export { useSiteData } from './composables/useSiteData.js';
 export { useSiteConfig } from './composables/useSiteConfig.js';
@@ -44,5 +25,6 @@ export type {
   GalleryBlockData,
   MapBlockData,
 } from './types/blocks.js';
-export type { SiteConfig, NavItem, PageConfig, SiteData } from './types/config.js';
+export type { SiteConfig, NavItem, PageConfig, SiteData, PageContext } from './types/config.js';
+export { PAGE_CONTEXT_KEY } from './types/config.js';
 export type { Skin } from './types/skin.js';

package/src/types/blocks.ts

@@ -82,7 +82,7 @@ export interface ContactsBlockData {
 
 export interface GalleryBlockData {
   title?: string;
-  images: Array<{ src: string; alt?: string; caption?: string }>;
+  images: Array<{ url: string; alt?: string; caption?: string }>;
 }
 
 export interface MapBlockData {

package/src/types/config.ts

@@ -1,5 +1,20 @@
+import type { InjectionKey, Ref } from 'vue';
 import type { Block } from './blocks.js';
 
+export interface PageContext {
+  title?: string;
+  type?: string;
+  author?: string;
+  featuredImage?: string;
+  excerpt?: string;
+  isGated?: boolean;
+  termIds?: string[];
+  layout?: string;
+  publishedAt?: string;
+}
+
+export const PAGE_CONTEXT_KEY: InjectionKey<Ref<PageContext>> = Symbol('pageContext');
+
 export interface SiteConfig {
   template: string;
   version: string;

package/src/worker/types.ts

@@ -36,4 +36,10 @@ export interface PageData {
     ogTitle?: string;
     ogImage?: string;
   };
+  type?: string;
+  author?: string;
+  featuredImage?: string;
+  excerpt?: string;
+  termIds?: string[];
+  layout?: string;
 }

package/dist/index.css

@@ -1 +0,0 @@
-.x-locale-switcher[data-v-675f0bbd]{display:flex;gap:4px}.x-locale-switcher__btn[data-v-675f0bbd]{padding:4px 8px;border:1px solid transparent;border-radius:4px;background:transparent;cursor:pointer;font-size:.75rem;font-weight:600;opacity:.6;transition:all .2s}.x-locale-switcher__btn--active[data-v-675f0bbd]{opacity:1;border-color:currentColor}.x-locale-switcher__btn[data-v-675f0bbd]:hover{opacity:1}.x-nav[data-v-07c4b748]{position:fixed;top:0;left:0;right:0;z-index:100;transition:background .3s,box-shadow .3s}.x-nav--scrolled[data-v-07c4b748]{background:#fffffff2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 2px 8px #00000014}.x-nav__container[data-v-07c4b748]{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[data-v-07c4b748]{text-decoration:none;display:flex;align-items:center}.x-nav__logo-img[data-v-07c4b748]{height:36px}.x-nav__logo-text[data-v-07c4b748]{font-size:1.25rem;font-weight:700;color:var(--x-color-text, #2c3e50)}.x-nav--scrolled .x-nav__logo-text[data-v-07c4b748]{color:var(--x-color-text, #2c3e50)}.x-nav:not(.x-nav--scrolled) .x-nav__logo-text[data-v-07c4b748]{color:#fff}.x-nav__links[data-v-07c4b748]{display:flex;align-items:center;gap:24px}.x-nav__link[data-v-07c4b748]{text-decoration:none;font-weight:500;font-size:.9rem;transition:color .2s}.x-nav--scrolled .x-nav__link[data-v-07c4b748]{color:var(--x-color-text, #2c3e50)}.x-nav:not(.x-nav--scrolled) .x-nav__link[data-v-07c4b748]{color:#ffffffe6}.x-nav__link[data-v-07c4b748]:hover{color:var(--x-color-primary, #1e73be)}.x-nav__hamburger[data-v-07c4b748]{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:4px}.x-nav__hamburger span[data-v-07c4b748]{width:24px;height:2px;background:var(--x-color-text, #2c3e50);transition:all .2s}.x-nav:not(.x-nav--scrolled) .x-nav__hamburger span[data-v-07c4b748]{background:#fff}@media(max-width:768px){.x-nav__hamburger[data-v-07c4b748]{display:flex}.x-nav__links[data-v-07c4b748]{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 #0000001a;align-items:flex-start}.x-nav__links--open[data-v-07c4b748]{display:flex}.x-nav__links .x-nav__link[data-v-07c4b748]{color:var(--x-color-text, #2c3e50)!important;padding:8px 0}}.x-footer[data-v-f9b38381]{background:var(--x-color-text, #2c3e50);color:#ffffffb3;padding:32px 24px;text-align:center}.x-footer__container[data-v-f9b38381]{max-width:var(--x-max-width, 1200px);margin:0 auto}.x-footer__links[data-v-f9b38381]{display:flex;gap:24px;justify-content:center;margin-bottom:16px;flex-wrap:wrap}.x-footer__link[data-v-f9b38381]{color:#ffffffb3;text-decoration:none;font-size:.9rem}.x-footer__link[data-v-f9b38381]:hover{color:#fff}.x-footer__copyright[data-v-f9b38381]{font-size:.85rem;margin:0;opacity:.6}.x-site-layout[data-v-41b0f2a9]{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[data-v-41b0f2a9]{flex:1}.x-hero[data-v-d8cfe56f]{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:#fff;text-align:center}.x-hero--fullscreen[data-v-d8cfe56f]{min-height:100vh}.x-hero__overlay[data-v-d8cfe56f]{position:absolute;inset:0;background:#00000080}.x-hero__content[data-v-d8cfe56f]{position:relative;max-width:var(--x-max-width, 1200px);z-index:1}.x-hero__title[data-v-d8cfe56f]{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[data-v-d8cfe56f]{font-size:clamp(1rem,2vw,1.25rem);opacity:.9;max-width:600px;margin:0 auto 32px}.x-hero__buttons[data-v-d8cfe56f]{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-bottom:48px}.x-hero__stats[data-v-d8cfe56f]{display:flex;gap:48px;justify-content:center;flex-wrap:wrap}.x-hero__stat[data-v-d8cfe56f]{display:flex;flex-direction:column}.x-hero__stat-value[data-v-d8cfe56f]{font-size:2rem;font-weight:700}.x-hero__stat-label[data-v-d8cfe56f]{font-size:.875rem;opacity:.8}.x-btn[data-v-d8cfe56f]{display:inline-flex;align-items:center;padding:12px 32px;border-radius:var(--x-border-radius, 8px);font-weight:600;text-decoration:none;transition:all .2s;cursor:pointer;border:2px solid transparent}.x-btn--primary[data-v-d8cfe56f]{background:#fff;color:var(--x-color-primary, #1e73be)}.x-btn--outline[data-v-d8cfe56f]{border-color:#fff;color:#fff;background:transparent}.x-btn--white[data-v-d8cfe56f]{background:#ffffff26;color:#fff;border-color:#ffffff4d}.x-html-block[data-v-abfd69e8]{padding:48px 24px}.x-html-block__content[data-v-abfd69e8]{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[data-v-abfd69e8] h2{font-size:1.75rem;font-weight:700;margin:32px 0 16px;color:var(--x-color-text, #2c3e50)}.x-html-block__content[data-v-abfd69e8] h3{font-size:1.25rem;font-weight:600;margin:24px 0 12px}.x-html-block__content[data-v-abfd69e8] p{margin:0 0 16px}.x-html-block__content[data-v-abfd69e8] ul,.x-html-block__content[data-v-abfd69e8] ol{padding-left:24px;margin:0 0 16px}.x-html-block__content[data-v-abfd69e8] img{max-width:100%;border-radius:var(--x-border-radius, 8px);margin:16px 0}.x-html-block__content[data-v-abfd69e8] 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}.x-cards-block[data-v-a1505674]{padding:80px 24px}.x-cards-block__container[data-v-a1505674]{max-width:var(--x-max-width, 1200px);margin:0 auto}.x-cards-block__title[data-v-a1505674]{text-align:center;font-size:2rem;font-weight:700;color:var(--x-color-text, #2c3e50);margin:0 0 8px}.x-cards-block__subtitle[data-v-a1505674]{text-align:center;color:var(--x-color-text-light, #6b7c93);margin:0 0 48px}.x-cards-block__grid[data-v-a1505674]{display:grid;grid-template-columns:repeat(var(--columns, 4),1fr);gap:24px}@media(max-width:768px){.x-cards-block__grid[data-v-a1505674]{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}}.x-card[data-v-a1505674]{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 .2s,box-shadow .2s}.x-card[data-v-a1505674]:hover{transform:translateY(-4px);box-shadow:0 8px 24px #00000014}.x-card__icon[data-v-a1505674]{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[data-v-a1505674]{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:calc(var(--x-border-radius, 12px) - 4px);margin-bottom:16px}.x-card__title[data-v-a1505674]{font-size:1.125rem;font-weight:600;color:var(--x-color-text, #2c3e50);margin:0 0 8px}.x-card__desc[data-v-a1505674]{font-size:.9rem;color:var(--x-color-text-light, #6b7c93);line-height:1.6;margin:0}.x-image-text[data-v-5ca1e218]{padding:80px 24px}.x-image-text__container[data-v-5ca1e218]{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[data-v-5ca1e218]{direction:rtl}.x-image-text--reverse .x-image-text__text[data-v-5ca1e218]{direction:ltr}.x-image-text__title[data-v-5ca1e218]{font-size:2rem;font-weight:700;color:var(--x-color-text, #2c3e50);margin:0 0 16px}.x-image-text__content[data-v-5ca1e218]{color:var(--x-color-text, #2c3e50);line-height:1.8}.x-image-text__checklist[data-v-5ca1e218]{list-style:none;padding:0;margin:0}.x-image-text__checklist li[data-v-5ca1e218]{display:flex;align-items:center;gap:12px;padding:8px 0;font-size:1rem;color:var(--x-color-text, #2c3e50)}.x-image-text__check-icon[data-v-5ca1e218]{color:var(--x-color-success, #00d084);font-weight:700}.x-image-text__image[data-v-5ca1e218]{width:100%;border-radius:var(--x-border-radius, 12px)}@media(max-width:768px){.x-image-text__container[data-v-5ca1e218]{grid-template-columns:1fr}.x-image-text--reverse .x-image-text__container[data-v-5ca1e218]{direction:ltr}}.x-pricing[data-v-bd1e5d79]{padding:80px 24px;background:var(--x-color-background-alt, #f7f9fc)}.x-pricing__container[data-v-bd1e5d79]{max-width:var(--x-max-width, 1200px);margin:0 auto}.x-pricing__title[data-v-bd1e5d79]{text-align:center;font-size:2rem;font-weight:700;color:var(--x-color-text, #2c3e50);margin:0 0 8px}.x-pricing__subtitle[data-v-bd1e5d79]{text-align:center;color:var(--x-color-text-light, #6b7c93);margin:0 0 32px}.x-pricing__tabs[data-v-bd1e5d79]{display:flex;justify-content:center;gap:8px;margin-bottom:32px}.x-pricing__tab[data-v-bd1e5d79]{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 .2s}.x-pricing__tab--active[data-v-bd1e5d79]{background:var(--x-color-primary, #1e73be);border-color:var(--x-color-primary, #1e73be);color:#fff}.x-pricing__grid[data-v-bd1e5d79]{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;align-items:start}.x-pricing-card[data-v-bd1e5d79]{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 .2s}.x-pricing-card--featured[data-v-bd1e5d79]{transform:scale(1.04);border-color:var(--x-color-primary, #1e73be);box-shadow:0 8px 32px #0000001a}.x-pricing-card__name[data-v-bd1e5d79]{font-size:1.25rem;font-weight:600;margin:0 0 8px}.x-pricing-card__desc[data-v-bd1e5d79]{color:var(--x-color-text-light, #6b7c93);font-size:.9rem;margin:0 0 16px}.x-pricing-card__price[data-v-bd1e5d79]{margin:16px 0}.x-pricing-card__amount[data-v-bd1e5d79]{font-size:2.5rem;font-weight:800;color:var(--x-color-primary, #1e73be)}.x-pricing-card__period[data-v-bd1e5d79]{color:var(--x-color-text-light, #6b7c93)}.x-pricing-card__features[data-v-bd1e5d79]{list-style:none;padding:0;margin:0 0 24px;text-align:left}.x-pricing-card__features li[data-v-bd1e5d79]{padding:6px 0;border-bottom:1px solid var(--x-color-border, #e2e8f0);font-size:.9rem}.x-pricing-card__features li[data-v-bd1e5d79]:before{content:"✓ ";color:var(--x-color-success, #00d084);font-weight:700}.x-pricing-card__action[data-v-bd1e5d79]{width:100%;justify-content:center}.x-btn[data-v-bd1e5d79]{display:inline-flex;align-items:center;padding:12px 32px;border-radius:var(--x-border-radius, 8px);font-weight:600;text-decoration:none;transition:all .2s;cursor:pointer}.x-btn--primary[data-v-bd1e5d79]{background:var(--x-color-primary, #1e73be);color:#fff}.x-contacts[data-v-e873ba26]{padding:80px 24px}.x-contacts__container[data-v-e873ba26]{max-width:var(--x-max-width, 1200px);margin:0 auto}.x-contacts__title[data-v-e873ba26]{text-align:center;font-size:2rem;font-weight:700;color:var(--x-color-text, #2c3e50);margin:0 0 48px}.x-contacts__grid[data-v-e873ba26]{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}.x-contacts__card[data-v-e873ba26]{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[data-v-e873ba26]{border-color:var(--x-color-primary, #1e73be);background:var(--x-color-primary-light, #e8f2fc)}.x-contacts__name[data-v-e873ba26]{font-size:1.125rem;font-weight:600;margin:0 0 12px;color:var(--x-color-text, #2c3e50)}.x-contacts__info[data-v-e873ba26]{margin:0 0 8px;font-size:.9rem;color:var(--x-color-text, #2c3e50)}.x-contacts__info a[data-v-e873ba26]{color:var(--x-color-primary, #1e73be);text-decoration:none}.x-contacts__hours[data-v-e873ba26]{margin:8px 0 0;font-size:.85rem;color:var(--x-color-text-light, #6b7c93)}.x-gallery-block[data-v-b99bb987]{padding:48px 24px}.x-gallery-block__title[data-v-b99bb987]{text-align:center;font-size:1.75rem;font-weight:700;margin-bottom:32px;color:var(--x-color-text, #2c3e50)}.x-gallery-block__grid[data-v-b99bb987]{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;max-width:1200px;margin:0 auto}.x-gallery-block__item img[data-v-b99bb987]{width:100%;height:200px;object-fit:cover;border-radius:var(--x-border-radius, 8px);display:block}.x-gallery-block__item figcaption[data-v-b99bb987]{text-align:center;font-size:.875rem;color:var(--x-color-text-secondary, #6c757d);margin-top:8px}.x-map-block[data-v-583f4762]{padding:48px 24px}.x-map-block__title[data-v-583f4762]{text-align:center;font-size:1.75rem;font-weight:700;margin-bottom:32px;color:var(--x-color-text, #2c3e50)}.x-map-block__container[data-v-583f4762]{max-width:1200px;margin:0 auto;border-radius:var(--x-border-radius, 8px);overflow:hidden}

package/src/components/blocks/XBlockRenderer.vue

@@ -1,48 +0,0 @@
-<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';
-import XGalleryBlock from './XGalleryBlock.vue';
-import XMapBlock from './XMapBlock.vue';
-
-const props = defineProps<{
-  blocks: Block[];
-}>();
-
-const blockRegistry: Record<string, Component> = {
-  hero: XHeroBlock,
-  html: XHtmlBlock,
-  cards: XCardsBlock,
-  'image-text': XImageTextBlock,
-  pricing: XPricingBlock,
-  contacts: XContactsBlock,
-  gallery: XGalleryBlock,
-  map: XMapBlock,
-};
-
-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

@@ -1,167 +0,0 @@
-<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

@@ -1,110 +0,0 @@
-<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/XGalleryBlock.vue

@@ -1,56 +0,0 @@
-<template>
-  <section class="x-gallery-block">
-    <h2 v-if="data.title" class="x-gallery-block__title">{{ data.title }}</h2>
-    <div class="x-gallery-block__grid">
-      <figure v-for="(img, i) in data.images" :key="i" class="x-gallery-block__item">
-        <img :src="img.src" :alt="img.alt || ''" loading="lazy" />
-        <figcaption v-if="img.caption">{{ img.caption }}</figcaption>
-      </figure>
-    </div>
-  </section>
-</template>
-
-<script setup lang="ts">
-import type { GalleryBlockData } from '../../types/blocks.js';
-
-defineProps<{
-  data: GalleryBlockData;
-}>();
-</script>
-
-<style scoped>
-.x-gallery-block {
-  padding: 48px 24px;
-}
-
-.x-gallery-block__title {
-  text-align: center;
-  font-size: 1.75rem;
-  font-weight: 700;
-  margin-bottom: 32px;
-  color: var(--x-color-text, #2c3e50);
-}
-
-.x-gallery-block__grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-  gap: 16px;
-  max-width: 1200px;
-  margin: 0 auto;
-}
-
-.x-gallery-block__item img {
-  width: 100%;
-  height: 200px;
-  object-fit: cover;
-  border-radius: var(--x-border-radius, 8px);
-  display: block;
-}
-
-.x-gallery-block__item figcaption {
-  text-align: center;
-  font-size: 0.875rem;
-  color: var(--x-color-text-secondary, #6c757d);
-  margin-top: 8px;
-}
-</style>

package/src/components/blocks/XHeroBlock.vue

@@ -1,152 +0,0 @@
-<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>