feat: integrate Kirby CMS data with Vue print editor

- Add JSON content representation template (recit.json.php)
- Create virtual /print page plugin for recit pages
- Add recit.php base template for content representation
- Create Pinia store for recit data management
- Add block components (text, heading, image, list, quote, video, map)
- Update PagedJsWrapper for dynamic content rendering with data-page-type
- Modify header.php to pass recit JSON URL via data attribute
- Update App.vue to load recit data on mount

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

src/components/blocks/HeadingBlock.vue

@@ -0,0 +1,23 @@
+<template>
+  <component :is="tag" class="block-heading">{{ content.text }}</component>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+  content: {
+    type: Object,
+    required: true
+  }
+});
+
+const tag = computed(() => {
+  const level = props.content.level || 'h2';
+  // Ensure valid heading level
+  if (['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(level)) {
+    return level;
+  }
+  return 'h2';
+});
+</script>

src/components/blocks/ImageBlock.vue

@@ -0,0 +1,40 @@
+<template>
+  <figure
+    class="block-image"
+    :style="figureStyle"
+  >
+    <img
+      v-if="content.url"
+      :src="content.url"
+      :alt="content.alt || ''"
+    />
+    <figcaption v-if="content.caption">{{ content.caption }}</figcaption>
+  </figure>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+  content: {
+    type: Object,
+    required: true
+  }
+});
+
+const figureStyle = computed(() => {
+  const styles = {};
+
+  if (props.content.width && props.content.width !== '100%') {
+    styles.width = props.content.width;
+  }
+
+  if (props.content.position === 'center') {
+    styles.margin = '0 auto';
+  } else if (props.content.position === 'right') {
+    styles.marginLeft = 'auto';
+  }
+
+  return styles;
+});
+</script>

src/components/blocks/ListBlock.vue

@@ -0,0 +1,12 @@
+<template>
+  <div class="block-list" v-html="content.text"></div>
+</template>
+
+<script setup>
+defineProps({
+  content: {
+    type: Object,
+    required: true
+  }
+});
+</script>

src/components/blocks/MapBlock.vue

@@ -0,0 +1,14 @@
+<template>
+  <div class="block-map">
+    <p class="map-placeholder">[Carte: {{ content.map }}]</p>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  content: {
+    type: Object,
+    required: true
+  }
+});
+</script>

src/components/blocks/QuoteBlock.vue

@@ -0,0 +1,15 @@
+<template>
+  <blockquote class="block-quote">
+    <div v-html="content.text"></div>
+    <cite v-if="content.citation">{{ content.citation }}</cite>
+  </blockquote>
+</template>
+
+<script setup>
+defineProps({
+  content: {
+    type: Object,
+    required: true
+  }
+});
+</script>

src/components/blocks/TextBlock.vue

@@ -0,0 +1,12 @@
+<template>
+  <div class="block-text" v-html="content.text"></div>
+</template>
+
+<script setup>
+defineProps({
+  content: {
+    type: Object,
+    required: true
+  }
+});
+</script>

src/components/blocks/VideoBlock.vue

@@ -0,0 +1,38 @@
+<template>
+  <figure class="block-video">
+    <div class="video-embed" v-html="embedHtml"></div>
+    <figcaption v-if="content.caption">{{ content.caption }}</figcaption>
+  </figure>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+  content: {
+    type: Object,
+    required: true
+  }
+});
+
+// Convert video URL to embed iframe
+const embedHtml = computed(() => {
+  const url = props.content.url;
+  if (!url) return '';
+
+  // YouTube
+  const youtubeMatch = url.match(/(?:youtube\.com\/watch\?v=|youtu\.be\/)([^&]+)/);
+  if (youtubeMatch) {
+    return `<iframe src="https://www.youtube.com/embed/${youtubeMatch[1]}" frameborder="0" allowfullscreen></iframe>`;
+  }
+
+  // Vimeo
+  const vimeoMatch = url.match(/vimeo\.com\/(\d+)/);
+  if (vimeoMatch) {
+    return `<iframe src="https://player.vimeo.com/video/${vimeoMatch[1]}" frameborder="0" allowfullscreen></iframe>`;
+  }
+
+  // Fallback: direct video tag
+  return `<video src="${url}" controls></video>`;
+});
+</script>

src/components/blocks/index.js

@@ -0,0 +1,18 @@
+export { default as TextBlock } from './TextBlock.vue';
+export { default as HeadingBlock } from './HeadingBlock.vue';
+export { default as ImageBlock } from './ImageBlock.vue';
+export { default as ListBlock } from './ListBlock.vue';
+export { default as QuoteBlock } from './QuoteBlock.vue';
+export { default as VideoBlock } from './VideoBlock.vue';
+export { default as MapBlock } from './MapBlock.vue';
+
+// Block type to component mapping
+export const blockComponents = {
+  text: 'TextBlock',
+  heading: 'HeadingBlock',
+  image: 'ImageBlock',
+  list: 'ListBlock',
+  quote: 'QuoteBlock',
+  video: 'VideoBlock',
+  map: 'MapBlock'
+};