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/App.vue

@@ -6,9 +6,14 @@ import PagePopup from './components/PagePopup.vue';
 import PreviewLoader from './components/PreviewLoader.vue';
 import { onMounted, ref, watch, computed, provide } from 'vue';
 import { useStylesheetStore } from './stores/stylesheet';
+import { useRecitStore } from './stores/recit';
 import Coloris from '@melloware/coloris';
 
 const stylesheetStore = useStylesheetStore();
+const recitStore = useRecitStore();
+
+// Get recit URL from body data attribute (set by print.php template)
+const recitUrl = document.body.dataset.recitUrl || null;
 const previewFrame1 = ref(null);
 const previewFrame2 = ref(null);
 const elementPopup = ref(null);
@@ -500,6 +505,16 @@ watch(
   }
 );
 
+// Re-render when recit data changes
+watch(
+  () => recitStore.data,
+  () => {
+    if (recitStore.data) {
+      renderPreview();
+    }
+  }
+);
+
 // Print the PagedJS content
 const printPreview = async () => {
   const frame = activeFrame.value;
@@ -559,7 +574,15 @@ const printPreview = async () => {
   }, 100);
 };
 
-onMounted(() => renderPreview(true));
+onMounted(async () => {
+  // Load recit data if URL is provided (print mode)
+  if (recitUrl) {
+    await recitStore.loadRecit(recitUrl);
+  }
+
+  // Render preview after data is loaded
+  renderPreview(true);
+});
 </script>
 
 <template>