Update

resources/js/projects-renderer/ProjectPageRenderer.vue

@@ -0,0 +1,282 @@
+<script setup>
+import { computed } from 'vue';
+import PublicSlot from './components/blocks/PublicSlot.vue';
+import ProjectBlockRenderer from './components/ProjectBlockRenderer.vue';
+import ProjectHeadline from './components/ProjectHeadline.vue';
+import ProjectHero from './components/ProjectHero.vue';
+import ProjectMetadata from './components/ProjectMetadata.vue';
+import { normalizeProjectSchema } from './schema/projectSchema';
+
+const props = defineProps({
+    project: {
+        type: Object,
+        default: () => ({}),
+    },
+    editable: {
+        type: Boolean,
+        default: false,
+    },
+    selectedBlockId: {
+        type: String,
+        default: null,
+    },
+    activeLang: {
+        type: String,
+        default: '',
+    },
+    mobilePreview: {
+        type: Boolean,
+        default: false,
+    },
+});
+
+const emit = defineEmits(['select-block']);
+
+const normalizedProject = computed(() => normalizeProjectSchema(props.project, props.activeLang));
+const header = computed(() => normalizedProject.value.header);
+const metadata = computed(() => normalizedProject.value.metadata);
+
+// Map heroMedia → a slot-data shape PublicSlot understands
+const heroSlot = computed(() => {
+    const m = normalizedProject.value.heroMedia;
+    if (!m) return null;
+    const isVideoType = ['youtube', 'frameio', 'bunny', 'video'].includes(m.type);
+    if (isVideoType) {
+        return { type: 'video', content: {}, image: { url: '' }, media: m };
+    }
+    return { type: 'image', content: {}, image: { url: m.url || '', alt: '' }, media: m };
+});
+const publicContentBlocks = computed(() => {
+    const hasMetaDescription = !!metadata.value.description;
+    return normalizedProject.value.contentBlocks.filter((block) => {
+        if (!hasMetaDescription) return true;
+        return !(block.type === 'FullWidth' && block.slot?.type === 'text');
+    });
+});
+</script>
+
+<template>
+    <!-- ===================== PUBLIC VIEW ===================== -->
+    <template v-if="!editable">
+        <section class="projects-area">
+            <div class="container">
+
+                <!-- Headline + hero + metadata -->
+                <div class="row">
+                    <div class="col-lg-12">
+                        <div class="single-project">
+
+                            <div class="project-info">
+                                <div class="row">
+                                    <div class="col-lg-6 col-md-8">
+                                        <h2>{{ header.headline || 'Untitled project' }}</h2>
+                                    </div>
+                                    <div v-if="header.subline" class="col-lg-6 col-md-4">
+                                        <div class="subtitle"><p>{{ header.subline }}</p></div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div class="thumbnail-wrap">
+                                <PublicSlot
+                                    v-if="heroSlot"
+                                    :slot-data="heroSlot"
+                                    :active-lang="activeLang"
+                                />
+                            </div>
+
+                            <div class="row mt-5">
+                                <div class="col-lg-6">
+                                    <div class="project-info mb-0">
+                                        <div v-if="metadata.clientName" class="client-info">
+                                            <h4>Client</h4>
+                                            <span>{{ metadata.clientName }}</span>
+                                        </div>
+                                        <div v-if="metadata.awarded?.length" class="project-details">
+                                            <h4>Awarded</h4>
+                                            <p v-for="award in metadata.awarded" :key="award">{{ award }}</p>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="col-lg-6">
+                                    <div v-if="metadata.description" class="description-text" v-html="metadata.description"></div>
+                                </div>
+                            </div>
+
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Content blocks — all in one shared row so columns flow together -->
+                <div v-if="publicContentBlocks.length" class="row">
+                    <template v-for="block in publicContentBlocks" :key="block.id">
+
+                        <!-- FullWidth text → centered narrow column -->
+                        <div v-if="block.type === 'FullWidth' && block.slot?.type === 'text'" class="col-lg-12">
+                            <div class="row project-content justify-content-center">
+                                <div class="col-lg-6 text-center">
+                                    <PublicSlot
+                                        :slot-data="block.slot"
+                                        :active-lang="activeLang"
+                                    />
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- FullWidth non-text → full 12-col -->
+                        <div v-else-if="block.type === 'FullWidth'" class="col-lg-12">
+                            <div class="single-project">
+                                <div class="thumbnail-wrap">
+                                    <PublicSlot
+                                        :slot-data="block.slot"
+                                        :active-lang="activeLang"
+                                    />
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- TwoColumns: text slots → centered col-lg-10; image/video slots → col-lg-12 thumbnail-wrap -->
+                        <template v-else-if="block.type === 'TwoColumns'">
+                            <!-- left text -->
+                            <div v-if="block.left?.type === 'text'" class="col-lg-12">
+                                <div class="row project-content justify-content-center">
+                                    <div class="col-lg-10 text-center">
+                                        <PublicSlot :slot-data="block.left" :active-lang="activeLang" />
+                                    </div>
+                                </div>
+                            </div>
+                            <!-- left non-text -->
+                            <div v-else-if="block.left" class="col-lg-6 col-md-6">
+                                <div class="single-project">
+                                    <div class="thumbnail-wrap">
+                                        <PublicSlot :slot-data="block.left" :active-lang="activeLang" />
+                                    </div>
+                                </div>
+                            </div>
+                            <!-- right text -->
+                            <div v-if="block.right?.type === 'text'" class="col-lg-12">
+                                <div class="row project-content justify-content-center">
+                                    <div class="col-lg-10 text-center">
+                                        <PublicSlot :slot-data="block.right" :active-lang="activeLang" />
+                                    </div>
+                                </div>
+                            </div>
+                            <!-- right non-text -->
+                            <div v-else-if="block.right" class="col-lg-6 col-md-6">
+                                <div class="single-project">
+                                    <div class="thumbnail-wrap">
+                                        <PublicSlot :slot-data="block.right" :active-lang="activeLang" />
+                                    </div>
+                                </div>
+                            </div>
+                        </template>
+
+                    </template>
+                </div>
+
+            </div>
+        </section>
+    </template>
+
+    <!-- ===================== EDITOR PREVIEW ===================== -->
+    <template v-else>
+        <section class="project-page-renderer">
+            <div class="project-page-renderer__shell">
+                <!-- Hero block: clickable wrapper with same border treatment as dynamic blocks -->
+                <div
+                    class="project-hero-block"
+                    :class="{ 'project-hero-block--selected': selectedBlockId === '__hero__' }"
+                    @click.stop="emit('select-block', '__hero__')"
+                >
+                    <div class="project-hero-block__bar">
+                        <span class="project-hero-block__badge">Hero / Header</span>
+                    </div>
+                    <ProjectHeadline
+                        :key="activeLang"
+                        :headline="header.headline"
+                        :subline="header.subline"
+                        :mobile-preview="mobilePreview"
+                    />
+                    <ProjectHero :media="normalizedProject.heroMedia" />
+                    <ProjectMetadata
+                        :key="activeLang"
+                        :metadata="metadata"
+                        :mobile-preview="mobilePreview"
+                    />
+                </div>
+
+                <div class="project-page-renderer__blocks">
+                    <ProjectBlockRenderer
+                        v-for="block in normalizedProject.contentBlocks"
+                        :key="block.id"
+                        :block="block"
+                        :editable="editable"
+                        :selected="block.id === selectedBlockId"
+                        :active-lang="activeLang"
+                        @select="emit('select-block', $event)"
+                    />
+                </div>
+            </div>
+        </section>
+    </template>
+</template>
+
+<style scoped>
+/* Editor preview only */
+.project-page-renderer {
+    --project-ink: #0f172a;
+    --project-muted: #667085;
+    --project-surface: rgba(255, 255, 255, 0.72);
+    background:
+        radial-gradient(circle at top right, rgba(14, 116, 144, 0.12), transparent 26%),
+        linear-gradient(180deg, rgba(248, 250, 252, 0.95), rgba(241, 245, 249, 0.95));
+    padding: clamp(1rem, 4%, 3rem);
+}
+
+.project-page-renderer__shell {
+    display: grid;
+    gap: 2rem;
+    margin: 0 auto;
+    max-width: 100%;
+    width: 100%;
+}
+
+.project-page-renderer__blocks {
+    display: grid;
+    gap: 2rem;
+}
+
+/* Hero clickable wrapper */
+.project-hero-block {
+    cursor: pointer;
+    display: grid;
+    gap: 0.85rem;
+    position: relative;
+}
+
+.project-hero-block__bar {
+    align-items: center;
+    display: flex;
+    gap: 0.5rem;
+}
+
+.project-hero-block__badge {
+    background: rgba(14, 116, 144, 0.1);
+    border-radius: 999px;
+    color: #0f766e;
+    font-size: 0.75rem;
+    font-weight: 600;
+    padding: 0.35rem 0.7rem;
+}
+
+.project-hero-block--selected {
+    outline: 2px solid rgba(14, 116, 144, 0.35);
+    outline-offset: 0.75rem;
+}
+
+@media (max-width: 768px) {
+    .project-page-renderer {
+        padding: 1rem;
+    }
+}
+</style>

resources/js/projects-renderer/components/ImageDropZone.vue

@@ -0,0 +1,281 @@
+<script setup>
+import { inject, ref } from 'vue';
+
+const props = defineProps({
+    modelValue: {
+        type: String,
+        default: '',
+    },
+    uploadUrl: {
+        type: String,
+        default: null,
+    },
+    label: {
+        type: String,
+        default: '',
+    },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const isDragOver = ref(false);
+const isUploading = ref(false);
+const error = ref(null);
+const fileInputRef = ref(null);
+const localPreview = ref(null);
+
+// Plugs into the parent editor's pending-upload counter so the form submit
+// can be blocked while this upload is in flight.
+const pendingUploads = inject('editorPendingUploads', null);
+
+const uploadFile = async (file) => {
+    if (!file) {
+        return;
+    }
+
+    if (!file.type.startsWith('image/')) {
+        error.value = 'Only image files are accepted.';
+        return;
+    }
+
+    // Emit blob URL immediately so the right-side preview updates at once
+    if (localPreview.value) {
+        URL.revokeObjectURL(localPreview.value);
+    }
+    localPreview.value = URL.createObjectURL(file);
+    error.value = null;
+    emit('update:modelValue', localPreview.value);
+
+    if (!props.uploadUrl) {
+        // No upload endpoint — blob URL stays as the value
+        return;
+    }
+
+    isUploading.value = true;
+    if (pendingUploads) pendingUploads.value++;
+
+    try {
+        const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') ?? '';
+        const formData = new FormData();
+        formData.append('image', file);
+
+        const response = await fetch(props.uploadUrl, {
+            method: 'POST',
+            headers: { 'X-CSRF-TOKEN': csrfToken },
+            body: formData,
+        });
+
+        if (!response.ok) {
+            throw new Error('Upload failed');
+        }
+
+        const data = await response.json();
+        // Replace blob URL with the permanent server URL
+        URL.revokeObjectURL(localPreview.value);
+        localPreview.value = null;
+        emit('update:modelValue', data.url);
+    } catch {
+        error.value = 'Upload failed. Please try again.';
+        URL.revokeObjectURL(localPreview.value);
+        localPreview.value = null;
+        emit('update:modelValue', '');
+    } finally {
+        isUploading.value = false;
+        if (pendingUploads) pendingUploads.value--;
+    }
+};
+
+const onDragOver = (event) => {
+    event.preventDefault();
+    isDragOver.value = true;
+};
+
+const onDragLeave = () => {
+    isDragOver.value = false;
+};
+
+const onDrop = (event) => {
+    event.preventDefault();
+    isDragOver.value = false;
+    const file = event.dataTransfer?.files?.[0];
+
+    if (file) {
+        uploadFile(file);
+    }
+};
+
+const openPicker = () => {
+    fileInputRef.value.value = '';
+    fileInputRef.value.click();
+};
+
+const onFileSelected = (event) => {
+    const file = event.target.files[0];
+
+    if (file) {
+        uploadFile(file);
+    }
+};
+
+const clearImage = (event) => {
+    event.stopPropagation();
+    if (localPreview.value) {
+        URL.revokeObjectURL(localPreview.value);
+        localPreview.value = null;
+    }
+    emit('update:modelValue', '');
+};
+</script>
+
+<template>
+    <div
+        class="image-drop-zone"
+        :class="{
+            'image-drop-zone--over': isDragOver,
+            'image-drop-zone--uploading': isUploading,
+            'image-drop-zone--filled': !!(localPreview || modelValue),
+        }"
+        @dragover="onDragOver"
+        @dragleave="onDragLeave"
+        @drop="onDrop"
+        @click="openPicker"
+    >
+        <template v-if="localPreview || modelValue">
+            <img :src="localPreview || modelValue" class="image-drop-zone__preview" :class="{ 'image-drop-zone__preview--uploading': isUploading }" alt="">
+            <div class="image-drop-zone__overlay">
+                <span class="image-drop-zone__overlay-text">{{ isUploading ? 'Uploading…' : 'Drop or click to replace' }}</span>
+                <button v-if="!isUploading" type="button" class="image-drop-zone__clear" @click="clearImage" title="Remove image">✕</button>
+            </div>
+        </template>
+
+        <template v-else>
+            <div class="image-drop-zone__empty">
+                <span class="image-drop-zone__icon">{{ isUploading ? '⏳' : '🖼' }}</span>
+                <span class="image-drop-zone__hint">{{ isUploading ? 'Uploading…' : (uploadUrl ? 'Drop image or click to upload' : 'Drop image here') }}</span>
+                <span v-if="label" class="image-drop-zone__label">{{ label }}</span>
+            </div>
+        </template>
+    </div>
+
+    <p v-if="error" class="image-drop-zone__error">{{ error }}</p>
+
+    <input ref="fileInputRef" type="file" accept="image/*" class="image-drop-zone__input" @change="onFileSelected">
+</template>
+
+<style scoped>
+.image-drop-zone {
+    border: 2px dashed rgba(15, 23, 42, 0.15);
+    border-radius: 0.75rem;
+    cursor: pointer;
+    overflow: hidden;
+    position: relative;
+    transition: border-color 0.15s, background 0.15s;
+    user-select: none;
+}
+
+.image-drop-zone--over {
+    background: #f0f9ff;
+    border-color: rgba(14, 116, 144, 0.6);
+}
+
+.image-drop-zone--uploading {
+    pointer-events: none;
+}
+
+.image-drop-zone--filled {
+    border-style: solid;
+    border-color: rgba(15, 23, 42, 0.12);
+}
+
+/* Empty state */
+.image-drop-zone__empty {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    gap: 0.35rem;
+    justify-content: center;
+    min-height: 6rem;
+    padding: 1rem;
+}
+
+.image-drop-zone__icon {
+    font-size: 1.6rem;
+    line-height: 1;
+}
+
+.image-drop-zone__hint {
+    color: #64748b;
+    font-size: 0.8rem;
+    font-weight: 600;
+    text-align: center;
+}
+
+.image-drop-zone__label {
+    color: #94a3b8;
+    font-size: 0.72rem;
+    text-align: center;
+}
+
+/* Filled state */
+.image-drop-zone__preview {
+    display: block;
+    height: 9rem;
+    object-fit: cover;
+    width: 100%;
+}
+
+.image-drop-zone__preview--uploading {
+    opacity: 0.5;
+}
+
+.image-drop-zone__overlay {
+    align-items: center;
+    background: rgba(15, 23, 42, 0.5);
+    bottom: 0;
+    display: flex;
+    justify-content: space-between;
+    left: 0;
+    opacity: 0;
+    padding: 0.4rem 0.6rem;
+    position: absolute;
+    right: 0;
+    transition: opacity 0.15s;
+}
+
+.image-drop-zone:hover .image-drop-zone__overlay {
+    opacity: 1;
+}
+
+.image-drop-zone__overlay-text {
+    color: #fff;
+    font-size: 0.75rem;
+    font-weight: 600;
+}
+
+.image-drop-zone__clear {
+    background: rgba(255, 255, 255, 0.15);
+    border: 0;
+    border-radius: 50%;
+    color: #fff;
+    cursor: pointer;
+    font-size: 0.75rem;
+    height: 1.4rem;
+    line-height: 1;
+    padding: 0;
+    width: 1.4rem;
+}
+
+.image-drop-zone__clear:hover {
+    background: rgba(239, 68, 68, 0.75);
+}
+
+.image-drop-zone__input {
+    display: none;
+}
+
+.image-drop-zone__error {
+    color: #b91c1c;
+    font-size: 0.8rem;
+    margin: 0.25rem 0 0;
+}
+</style>

resources/js/projects-renderer/components/ProjectBlockRenderer.vue

@@ -0,0 +1,226 @@
+<script setup>
+import { computed, inject } from 'vue';
+import FullWidthBlock from './blocks/FullWidthBlock.vue';
+import FullWidthImageBlock from './blocks/FullWidthImageBlock.vue';
+import FullWidthTextBlock from './blocks/FullWidthTextBlock.vue';
+import TwoColumnsBlock from './blocks/TwoColumnsBlock.vue';
+import TwoColumnImagesBlock from './blocks/TwoColumnImagesBlock.vue';
+import VideoBlock from './blocks/VideoBlock.vue';
+
+const props = defineProps({
+    block: {
+        type: Object,
+        required: true,
+    },
+    editable: {
+        type: Boolean,
+        default: false,
+    },
+    selected: {
+        type: Boolean,
+        default: false,
+    },
+    activeLang: {
+        type: String,
+        default: '',
+    },
+});
+
+const emit = defineEmits(['select']);
+
+const componentMap = {
+    // New types
+    FullWidth: FullWidthBlock,
+    TwoColumns: TwoColumnsBlock,
+    // Legacy (kept for safety)
+    FullWidthText: FullWidthTextBlock,
+    TwoColumnImages: TwoColumnImagesBlock,
+    FullWidthImage: FullWidthImageBlock,
+    Video: VideoBlock,
+};
+
+const resolvedComponent = computed(() => componentMap[props.block.type] || FullWidthBlock);
+
+const blockDrag = inject('editorBlockDrag', null);
+const toggleVisibility = inject('editorToggleBlockVisibility', null);
+const swapColumns = inject('editorSwapBlockColumns', null);
+
+const isTwoColumn = computed(() => props.block.type === 'TwoColumns' || props.block.type === 'TwoColumnImages');
+const isDragging = computed(() => blockDrag?.dragSrcId.value === props.block.id);
+const isDragOver = computed(() => blockDrag?.dragOverId.value === props.block.id);
+</script>
+
+<template>
+    <div
+        class="project-block"
+        :data-block-id="block.id"
+        :class="{
+            'project-block--selected': selected,
+            'project-block--dragging': isDragging,
+            'project-block--over': isDragOver,
+            'project-block--editable': editable,
+            'project-block--hidden': editable && block.hidden,
+        }"
+        @click="emit('select', block.id)"
+        @dragover="editable && blockDrag ? blockDrag.onDragOver($event, block.id) : null"
+        @dragleave="editable && blockDrag ? blockDrag.onDragLeave() : null"
+        @drop="editable && blockDrag ? blockDrag.onDrop($event, block.id) : null"
+        @dragend="editable && blockDrag ? blockDrag.onDragEnd() : null"
+    >
+        <div v-if="editable" class="project-block__bar">
+            <div class="project-block__bar-left">
+                <span class="project-block__badge" :class="{ 'project-block__badge--hidden': block.hidden }">{{ block.name ? `${block.name} — ${block.type}` : block.type }}</span>
+                <span v-if="block.hidden" class="project-block__hidden-label">Hidden — not visible on frontend</span>
+            </div>
+            <div class="project-block__bar-actions">
+                <button
+                    v-if="swapColumns && isTwoColumn"
+                    type="button"
+                    class="project-block__vis-btn"
+                    title="Swap columns"
+                    @click.stop="swapColumns(block.id)"
+                >
+                    <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M7 16V4m0 0L3 8m4-4l4 4"/><path d="M17 8v12m0 0l4-4m-4 4l-4-4"/></svg>
+                </button>
+                <button
+                    v-if="toggleVisibility"
+                    type="button"
+                    class="project-block__vis-btn"
+                    :class="{ 'project-block__vis-btn--hidden': block.hidden }"
+                    :title="block.hidden ? 'Hidden — click to show' : 'Visible — click to hide'"
+                    @click.stop="toggleVisibility(block.id)"
+                >
+                    <!-- Eye open -->
+                    <svg v-if="!block.hidden" xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
+                    <!-- Eye off -->
+                    <svg v-else xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"/><line x1="1" y1="1" x2="23" y2="23"/></svg>
+                </button>
+                <span
+                    v-if="blockDrag"
+                    class="project-block__handle"
+                    title="Drag to reorder"
+                    draggable="true"
+                    @dragstart.stop="blockDrag.onDragStart($event, block.id)"
+                >⠿</span>
+            </div>
+        </div>
+        <component :is="resolvedComponent" :block="block" :active-lang="activeLang" />
+    </div>
+</template>
+
+<style scoped>
+.project-block {
+    display: grid;
+    gap: 0.85rem;
+    position: relative;
+    scroll-margin-top: 8rem;
+}
+
+.project-block--editable {
+    cursor: pointer;
+}
+
+.project-block--editable:not(.project-block--selected):hover {
+    outline: 2px solid rgba(15, 23, 42, 0.12);
+    outline-offset: 0.75rem;
+}
+
+.project-block--dragging {
+    opacity: 0.4;
+}
+
+.project-block--hidden {
+    border-left: 3px solid #ef4444;
+    padding-left: 0.75rem;
+}
+
+.project-block--over {
+    outline: 2px dashed rgba(14, 116, 144, 0.6);
+    outline-offset: 0.5rem;
+}
+
+.project-block--selected {
+    outline: 2px solid rgba(14, 116, 144, 0.35);
+    outline-offset: 0.75rem;
+}
+
+/* Top bar: badge + drag handle */
+.project-block__bar {
+    align-items: center;
+    display: flex;
+    gap: 0.5rem;
+    justify-content: space-between;
+}
+
+.project-block__bar-left {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.4rem;
+    min-width: 0;
+}
+
+.project-block__hidden-label {
+    color: #ef4444;
+    font-size: 0.7rem;
+    font-weight: 500;
+}
+
+.project-block__badge {
+    background: rgba(14, 116, 144, 0.1);
+    border-radius: 999px;
+    color: #0f766e;
+    font-size: 0.75rem;
+    font-weight: 600;
+    padding: 0.35rem 0.7rem;
+}
+
+.project-block__handle {
+    color: #94a3b8;
+    cursor: grab;
+    font-size: 1.1rem;
+    line-height: 1;
+    padding: 0.2rem 0.4rem;
+    user-select: none;
+}
+
+.project-block__handle:hover {
+    color: #0f766e;
+}
+
+.project-block__bar-actions {
+    align-items: center;
+    display: flex;
+    gap: 0.25rem;
+}
+
+.project-block__badge--hidden {
+    background: #fee2e2;
+    color: #b91c1c;
+}
+
+.project-block__vis-btn {
+    align-items: center;
+    background: none;
+    border: none;
+    border-radius: 0.3rem;
+    color: #94a3b8;
+    cursor: pointer;
+    display: flex;
+    line-height: 1;
+    padding: 0.2rem;
+    transition: color 0.15s;
+}
+
+.project-block__vis-btn:hover {
+    color: #0f766e;
+}
+
+.project-block__vis-btn--hidden {
+    color: #ef4444;
+}
+
+.project-block__vis-btn--hidden:hover {
+    color: #b91c1c;
+}
+</style>

resources/js/projects-renderer/components/ProjectHeadline.vue

@@ -0,0 +1,136 @@
+<script setup>
+import { computed, inject } from 'vue';
+
+defineProps({
+    headline: {
+        type: String,
+        default: '',
+    },
+    subline: {
+        type: String,
+        default: '',
+    },
+    mobilePreview: {
+        type: Boolean,
+        default: false,
+    },
+});
+
+const updateHeader = inject('editorUpdateHeader', null);
+const isEditable = computed(() => !!updateHeader);
+
+function onHeadlineBlur(e) {
+    updateHeader?.('headline', e.target.innerText.trim());
+}
+
+function onSublineBlur(e) {
+    updateHeader?.('subline', e.target.innerText.trim());
+}
+</script>
+
+<template>
+    <section class="project-headline" :class="{ 'project-headline--mobile': mobilePreview }">
+        <span class="project-headline__eyebrow">Project headline</span>
+        <h1
+            v-if="isEditable"
+            contenteditable="true"
+            class="project-headline__editable"
+            data-placeholder="Untitled project"
+            :class="{ 'project-headline__editable--empty': !headline }"
+            @blur="onHeadlineBlur"
+            v-text="headline || ''"
+        ></h1>
+        <h1 v-else>{{ headline || 'Untitled project' }}</h1>
+        <p
+            v-if="isEditable"
+            contenteditable="true"
+            class="project-headline__subline project-headline__editable project-headline__subline--edit"
+            data-placeholder="Add a subline…"
+            @blur="onSublineBlur"
+            v-text="subline || ''"
+        ></p>
+        <p v-else-if="subline" class="project-headline__subline">{{ subline }}</p>
+    </section>
+</template>
+
+<style scoped>
+.project-headline {
+    container-type: inline-size;
+    display: grid;
+    gap: 0.85rem;
+}
+
+.project-headline__eyebrow {
+    color: var(--project-muted, #6b7280);
+    font-size: 0.8rem;
+    font-weight: 600;
+    letter-spacing: 0.18em;
+    text-transform: uppercase;
+}
+
+h1 {
+    color: var(--project-ink, #111827);
+    font-size: clamp(2.3rem, 5vw, 4.75rem);
+    font-weight: 700;
+    letter-spacing: -0.04em;
+    line-height: 0.94;
+    margin: 0;
+    max-width: 20ch;
+}
+
+.project-headline__subline {
+    color: var(--project-muted, #6b7280);
+    font-size: clamp(1rem, 1.5vw, 1.35rem);
+    font-weight: 400;
+    line-height: 1.5;
+    margin: 0;
+    max-width: 42ch;
+}
+
+/* ---- Inline edit ---- */
+.project-headline__editable {
+    outline: none;
+    border-bottom: 1px solid transparent;
+    transition: border-color 0.15s;
+}
+
+.project-headline__editable:hover {
+    border-bottom-color: rgba(15, 23, 42, 0.18);
+}
+
+.project-headline__editable:focus {
+    border-bottom-color: rgba(14, 116, 144, 0.5);
+}
+
+.project-headline__editable:empty::before {
+    color: var(--project-muted, #6b7280);
+    content: attr(data-placeholder);
+    pointer-events: none;
+}
+
+.project-headline__subline--edit {
+    min-height: 1.5em;
+}
+
+.project-headline--mobile h1 {
+    font-size: clamp(1.75rem, 7vw, 2.5rem);
+    max-width: 100%;
+}
+
+.project-headline--mobile .project-headline__subline {
+    font-size: 1rem;
+    max-width: 100%;
+}
+
+@container (max-width: 480px) {
+    h1 {
+        font-size: clamp(1.75rem, 9cqi, 2.5rem);
+        max-width: 100%;
+    }
+
+    .project-headline__subline {
+        font-size: 1rem;
+        max-width: 100%;
+    }
+}
+</style>

resources/js/projects-renderer/components/ProjectHero.vue

@@ -0,0 +1,157 @@
+<script setup>
+import { computed, inject } from 'vue';
+import { useImageUpload } from '../composables/useImageUpload';
+import { useIntersectionActivation } from '../composables/useIntersectionActivation';
+import { getBunnyEmbedUrl, getFrameIoEmbedUrl, getYouTubeEmbedUrl } from '../schema/projectSchema';
+
+const props = defineProps({
+    media: {
+        type: Object,
+        default: () => ({ type: 'image', url: '' }),
+    },
+});
+
+const { isActive, target } = useIntersectionActivation();
+
+const youtubeUrl = computed(() => getYouTubeEmbedUrl(props.media));
+const frameIoUrl = computed(() => getFrameIoEmbedUrl(props.media?.url));
+const bunnyUrl = computed(() => getBunnyEmbedUrl(props.media));
+
+const uploadUrl = inject('editorUploadUrl', null);
+const updateHeroImage = inject('editorUpdateHeroImage', null);
+
+const { isDragOver, isUploading, fileInputRef, onDragOver, onDragLeave, onDrop, openPicker, onFileSelected } = useImageUpload(
+    () => uploadUrl?.value ?? null,
+    (url) => updateHeroImage?.(url),
+);
+
+const isDroppable = computed(() => props.media?.type === 'image' && !!uploadUrl?.value);
+</script>
+
+<template>
+    <section
+        ref="target"
+        class="project-hero"
+        :class="{ 'project-hero--over': isDragOver, 'project-hero--uploading': isUploading, 'project-hero--editable': isDroppable }"
+        @dragover="isDroppable ? onDragOver($event) : null"
+        @dragleave="onDragLeave"
+        @drop="isDroppable ? onDrop($event) : null"
+        @click="isDroppable ? openPicker() : null"
+    >
+        <iframe
+            v-if="media.type === 'youtube' && isActive && youtubeUrl"
+            :src="youtubeUrl"
+            title="Project hero video"
+            loading="lazy"
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+            allowfullscreen
+        />
+
+        <iframe
+            v-else-if="media.type === 'frameio' && isActive && frameIoUrl"
+            :src="frameIoUrl"
+            title="Project hero video"
+            loading="lazy"
+            allow="autoplay; fullscreen; picture-in-picture"
+            allowfullscreen
+        />
+
+        <iframe
+            v-else-if="media.type === 'bunny' && isActive && bunnyUrl"
+            :src="bunnyUrl"
+            title="Project hero video"
+            loading="lazy"
+            style="border:0;position:absolute;top:0;height:100%;width:100%;"
+            allow="accelerometer;gyroscope;autoplay;encrypted-media;picture-in-picture;"
+            allowfullscreen
+        />
+
+        <video
+            v-else-if="media.type === 'video' && isActive && media.url"
+            :autoplay="media.autoplay === true"
+            :muted="media.muted === true"
+            :loop="media.loop === true"
+            controls
+            playsinline
+            preload="metadata"
+        >
+            <source :src="media.url">
+        </video>
+
+        <img v-else-if="media.url" :src="media.url" alt="Project hero" loading="lazy" :class="{ 'project-hero__img--uploading': isUploading }">
+
+        <div v-else class="project-hero__placeholder">
+            {{ isUploading ? 'Uploading…' : (isDroppable ? 'Drop image here or click to upload.' : 'Add a YouTube URL, Frame.io review link, Bunny embed URL, native video URL, or image URL.') }}
+        </div>
+
+        <div v-if="isDragOver" class="project-hero__overlay">Drop to upload</div>
+        <div v-if="isUploading && media.url" class="project-hero__overlay project-hero__overlay--uploading">Uploading…</div>
+    </section>
+
+    <input ref="fileInputRef" type="file" accept="image/*" style="display:none" @change="onFileSelected">
+</template>
+
+<style scoped>
+.project-hero {
+    aspect-ratio: 16 / 9;
+    background: linear-gradient(135deg, rgba(15, 23, 42, 0.08), rgba(148, 163, 184, 0.18));
+    border: 1px solid rgba(15, 23, 42, 0.08);
+    border-radius: 1.75rem;
+    overflow: hidden;
+    position: relative;
+    transition: outline-color 0.15s;
+}
+
+.project-hero--editable {
+    cursor: pointer;
+}
+
+.project-hero--over {
+    outline: 2px dashed rgba(14, 116, 144, 0.7);
+    outline-offset: -2px;
+}
+
+iframe,
+video,
+img {
+    border: 0;
+    display: block;
+    height: 100%;
+    object-fit: cover;
+    width: 100%;
+}
+
+.project-hero__img--uploading {
+    opacity: 0.5;
+}
+
+.project-hero__placeholder {
+    align-items: center;
+    color: var(--project-muted, #6b7280);
+    display: flex;
+    height: 100%;
+    justify-content: center;
+    padding: 2rem;
+    text-align: center;
+}
+
+.project-hero__overlay {
+    align-items: center;
+    background: rgba(14, 116, 144, 0.55);
+    bottom: 0;
+    color: #fff;
+    display: flex;
+    font-size: 1rem;
+    font-weight: 700;
+    justify-content: center;
+    left: 0;
+    pointer-events: none;
+    position: absolute;
+    right: 0;
+    top: 0;
+}
+
+.project-hero__overlay--uploading {
+    background: rgba(15, 23, 42, 0.4);
+}
+</style>

resources/js/projects-renderer/components/ProjectMetadata.vue

@@ -0,0 +1,210 @@
+<script setup>
+import { computed, inject } from 'vue';
+
+defineProps({
+    metadata: {
+        type: Object,
+        default: () => ({ clientName: '', awarded: [], description: '' }),
+    },
+    mobilePreview: {
+        type: Boolean,
+        default: false,
+    },
+});
+
+const updateMetadata = inject('editorUpdateMetadata', null);
+const isEditable = computed(() => !!updateMetadata);
+
+function onClientNameBlur(e) {
+    updateMetadata?.('clientName', e.target.innerText.trim());
+}
+
+function onAwardedBlur(e) {
+    const lines = e.target.innerText.split('\n').map((s) => s.trim()).filter(Boolean);
+    updateMetadata?.('awarded', lines);
+}
+
+function onDescriptionBlur(e) {
+    updateMetadata?.('description', e.target.innerHTML.trim());
+}
+</script>
+
+<template>
+    <section class="project-metadata" :class="{ 'project-metadata--mobile': mobilePreview }">
+        <!-- CLIENT -->
+        <article :class="{ 'project-metadata__article--editable': isEditable }">
+            <span>Client</span>
+            <strong
+                v-if="isEditable"
+                contenteditable="true"
+                class="project-metadata__editable"
+                :data-placeholder="'Add client name'"
+                @blur="onClientNameBlur"
+                v-text="metadata.clientName || ''"
+            ></strong>
+            <strong v-else>{{ metadata.clientName || 'Add client name' }}</strong>
+        </article>
+
+        <!-- AWARDED -->
+        <article :class="{ 'project-metadata__article--editable': isEditable }">
+            <span>Awarded</span>
+            <div
+                v-if="isEditable"
+                contenteditable="true"
+                class="project-metadata__editable project-metadata__awarded-edit"
+                :data-placeholder="'Add award lines'"
+                @blur="onAwardedBlur"
+                v-text="(metadata.awarded || []).join('\n') || ''"
+            ></div>
+            <template v-else>
+                <ul v-if="metadata.awarded?.length">
+                    <li v-for="award in metadata.awarded" :key="award">{{ award }}</li>
+                </ul>
+                <p v-else>Add award lines</p>
+            </template>
+        </article>
+
+        <!-- DESCRIPTION -->
+        <article class="project-metadata__full" :class="{ 'project-metadata__article--editable': isEditable }">
+            <span>Description</span>
+            <div
+                v-if="isEditable"
+                contenteditable="true"
+                class="project-metadata__editable project-metadata__description-edit"
+                :data-placeholder="'Add a project description to populate this summary row.'"
+                @blur="onDescriptionBlur"
+                v-html="metadata.description || ''"
+            ></div>
+            <div v-else-if="metadata.description" class="project-metadata__description" v-html="metadata.description"></div>
+            <p v-else>Add a project description to populate this summary row.</p>
+        </article>
+    </section>
+</template>
+
+<style scoped>
+.project-metadata {
+    container-type: inline-size;
+    display: grid;
+    gap: 1.25rem;
+    grid-template-columns: 1fr 1fr;
+}
+
+.project-metadata article:last-child {
+    grid-column: 1 / -1;
+}
+
+.project-metadata__full {
+    grid-column: 1 / -1;
+}
+
+.project-metadata--mobile {
+    grid-template-columns: 1fr;
+}
+
+.project-metadata--mobile .project-metadata__full {
+    grid-column: auto;
+}
+
+article {
+    background: var(--project-surface, rgba(255, 255, 255, 0.74));
+    border: 1px solid rgba(15, 23, 42, 0.08);
+    border-radius: 1.35rem;
+    display: grid;
+    gap: 0.85rem;
+    padding: 1.35rem;
+}
+
+.project-metadata__article--editable {
+    cursor: text;
+    transition: border-color 0.15s, box-shadow 0.15s;
+}
+
+.project-metadata__article--editable:hover {
+    border-color: rgba(15, 23, 42, 0.18);
+    box-shadow: 0 0 0 3px rgba(14, 116, 144, 0.06);
+}
+
+.project-metadata__article--editable:focus-within {
+    border-color: rgba(14, 116, 144, 0.45);
+    box-shadow: 0 0 0 3px rgba(14, 116, 144, 0.12);
+}
+
+.project-metadata__editable {
+    outline: none;
+}
+
+.project-metadata__editable:empty::before {
+    color: var(--project-muted, #6b7280);
+    content: attr(data-placeholder);
+    pointer-events: none;
+}
+
+.project-metadata__awarded-edit {
+    color: var(--project-ink, #111827);
+    font-size: 1rem;
+    line-height: 1.6;
+    white-space: pre-wrap;
+}
+
+.project-metadata__description-edit {
+    color: var(--project-ink, #111827);
+    line-height: 1.6;
+}
+
+span {
+    color: var(--project-muted, #6b7280);
+    font-size: 0.78rem;
+    font-weight: 600;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+}
+
+strong,
+p,
+li {
+    color: var(--project-ink, #111827);
+    line-height: 1.6;
+}
+
+strong {
+    font-size: 1.05rem;
+}
+
+ul,
+p {
+    margin: 0;
+    padding: 0;
+}
+
+ul {
+    list-style: none;
+}
+
+@container (max-width: 600px) {
+    .project-metadata {
+        grid-template-columns: 1fr;
+    }
+
+    .project-metadata article:last-child {
+        grid-column: auto;
+    }
+
+    .project-metadata__full {
+        grid-column: auto;
+    }
+}
+
+@media (max-width: 900px) {
+    .project-metadata {
+        grid-template-columns: 1fr;
+    }
+
+    .project-metadata article:last-child {
+        grid-column: auto;
+    }
+
+    .project-metadata__full {
+        grid-column: auto;
+    }
+}
+</style>

resources/js/projects-renderer/components/RichTextEditor.vue

@@ -0,0 +1,204 @@
+<script setup>
+import Link from '@tiptap/extension-link';
+import TextAlign from '@tiptap/extension-text-align';
+import Underline from '@tiptap/extension-underline';
+import StarterKit from '@tiptap/starter-kit';
+import { EditorContent, useEditor } from '@tiptap/vue-3';
+import { watch } from 'vue';
+
+const props = defineProps({
+    modelValue: {
+        type: String,
+        default: '',
+    },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const editor = useEditor({
+    content: props.modelValue,
+    extensions: [
+        StarterKit,
+        Underline,
+        Link.configure({ openOnClick: false }),
+        TextAlign.configure({ types: ['heading', 'paragraph'] }),
+    ],
+    editorProps: {
+        attributes: { class: 'rte__content' },
+    },
+    onUpdate({ editor: e }) {
+        emit('update:modelValue', e.getHTML());
+    },
+});
+
+// Sync external value changes (e.g. block switched)
+watch(
+    () => props.modelValue,
+    (val) => {
+        if (editor.value && editor.value.getHTML() !== val) {
+            editor.value.commands.setContent(val, false);
+        }
+    },
+);
+
+const setLink = () => {
+    const url = window.prompt('URL', editor.value?.getAttributes('link').href ?? '');
+
+    if (url === null) return;
+
+    if (url === '') {
+        editor.value?.chain().focus().extendMarkRange('link').unsetLink().run();
+    } else {
+        editor.value?.chain().focus().extendMarkRange('link').setLink({ href: url }).run();
+    }
+};
+</script>
+
+<template>
+    <div class="rte" v-if="editor">
+        <div class="rte__toolbar">
+            <!-- Text style -->
+            <div class="rte__group">
+                <button type="button" :class="{ 'rte__btn--active': editor.isActive('bold') }" @click="editor.chain().focus().toggleBold().run()" title="Bold"><strong>B</strong></button>
+                <button type="button" :class="{ 'rte__btn--active': editor.isActive('italic') }" @click="editor.chain().focus().toggleItalic().run()" title="Italic"><em>I</em></button>
+                <button type="button" :class="{ 'rte__btn--active': editor.isActive('underline') }" @click="editor.chain().focus().toggleUnderline().run()" title="Underline"><u>U</u></button>
+            </div>
+
+            <!-- Headings -->
+            <div class="rte__group">
+                <button type="button" :class="{ 'rte__btn--active': editor.isActive('heading', { level: 2 }) }" @click="editor.chain().focus().toggleHeading({ level: 2 }).run()" title="Heading 2">H2</button>
+                <button type="button" :class="{ 'rte__btn--active': editor.isActive('heading', { level: 3 }) }" @click="editor.chain().focus().toggleHeading({ level: 3 }).run()" title="Heading 3">H3</button>
+                <button type="button" :class="{ 'rte__btn--active': editor.isActive('paragraph') }" @click="editor.chain().focus().setParagraph().run()" title="Paragraph">P</button>
+            </div>
+
+            <!-- Lists -->
+            <div class="rte__group">
+                <button type="button" :class="{ 'rte__btn--active': editor.isActive('bulletList') }" @click="editor.chain().focus().toggleBulletList().run()" title="Bullet list">• List</button>
+                <button type="button" :class="{ 'rte__btn--active': editor.isActive('orderedList') }" @click="editor.chain().focus().toggleOrderedList().run()" title="Numbered list">1. List</button>
+            </div>
+
+            <!-- Alignment -->
+            <div class="rte__group">
+                <button type="button" :class="{ 'rte__btn--active': editor.isActive({ textAlign: 'left' }) }" @click="editor.chain().focus().setTextAlign('left').run()" title="Align left">⬅</button>
+                <button type="button" :class="{ 'rte__btn--active': editor.isActive({ textAlign: 'center' }) }" @click="editor.chain().focus().setTextAlign('center').run()" title="Align center">↔</button>
+                <button type="button" :class="{ 'rte__btn--active': editor.isActive({ textAlign: 'right' }) }" @click="editor.chain().focus().setTextAlign('right').run()" title="Align right">➡</button>
+            </div>
+
+            <!-- Link -->
+            <div class="rte__group">
+                <button type="button" :class="{ 'rte__btn--active': editor.isActive('link') }" @click="setLink" title="Set link">🔗</button>
+                <button v-if="editor.isActive('link')" type="button" @click="editor.chain().focus().unsetLink().run()" title="Remove link">✕ Link</button>
+            </div>
+
+            <!-- History -->
+            <div class="rte__group">
+                <button type="button" :disabled="!editor.can().undo()" @click="editor.chain().focus().undo().run()" title="Undo">↩</button>
+                <button type="button" :disabled="!editor.can().redo()" @click="editor.chain().focus().redo().run()" title="Redo">↪</button>
+            </div>
+        </div>
+
+        <EditorContent :editor="editor" />
+    </div>
+</template>
+
+<style scoped>
+.rte {
+    border: 1px solid rgba(14, 116, 144, 0.35);
+    border-radius: 0.75rem;
+    overflow: hidden;
+}
+
+.rte__toolbar {
+    align-items: center;
+    background: rgba(248, 250, 252, 0.95);
+    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.25rem;
+    padding: 0.4rem 0.5rem;
+}
+
+.rte__group {
+    align-items: center;
+    border-right: 1px solid rgba(15, 23, 42, 0.1);
+    display: flex;
+    gap: 0.1rem;
+    padding-right: 0.35rem;
+}
+
+.rte__group:last-child {
+    border-right: 0;
+    padding-right: 0;
+}
+
+.rte__toolbar button {
+    background: transparent;
+    border: 0;
+    border-radius: 0.4rem;
+    color: #374151;
+    cursor: pointer;
+    font-size: 0.78rem;
+    font-weight: 600;
+    min-width: 1.8rem;
+    padding: 0.25rem 0.4rem;
+    transition: background 0.1s, color 0.1s;
+}
+
+.rte__toolbar button:hover:not(:disabled) {
+    background: rgba(14, 116, 144, 0.1);
+    color: #0f766e;
+}
+
+.rte__toolbar button:disabled {
+    color: #cbd5e1;
+    cursor: default;
+}
+
+.rte__btn--active {
+    background: rgba(14, 116, 144, 0.15) !important;
+    color: #0f766e !important;
+}
+
+/* Editor area — :deep() needed to reach ProseMirror's non-scoped DOM */
+:deep(.rte__content) {
+    min-height: 8rem;
+    outline: none;
+    padding: 0.75rem 1rem;
+}
+
+:deep(.rte__content p),
+:deep(.rte__content h2),
+:deep(.rte__content h3),
+:deep(.rte__content ul),
+:deep(.rte__content ol) {
+    margin: 0 0 0.6em;
+}
+
+:deep(.rte__content p:last-child),
+:deep(.rte__content h2:last-child),
+:deep(.rte__content h3:last-child),
+:deep(.rte__content ul:last-child),
+:deep(.rte__content ol:last-child) {
+    margin-bottom: 0;
+}
+
+:deep(.rte__content h2) {
+    font-size: 1.2rem;
+    font-weight: 700;
+}
+
+:deep(.rte__content h3) {
+    font-size: 1rem;
+    font-weight: 700;
+}
+
+:deep(.rte__content ul),
+:deep(.rte__content ol) {
+    padding-left: 1.4rem;
+}
+
+:deep(.rte__content a) {
+    color: #0f766e;
+    text-decoration: underline;
+}
+</style>

resources/js/projects-renderer/components/blocks/BlockSlot.vue

@@ -0,0 +1,281 @@
+<script setup>
+import { computed, inject } from 'vue';
+import { useImageUpload } from '../../composables/useImageUpload';
+import { useIntersectionActivation } from '../../composables/useIntersectionActivation';
+import { getBunnyEmbedUrl, getFrameIoEmbedUrl, getYouTubeEmbedUrl } from '../../schema/projectSchema';
+const props = defineProps({
+    slotData: {
+        type: Object,
+        required: true,
+    },
+    blockId: {
+        type: String,
+        required: true,
+    },
+    slotKey: {
+        type: String,
+        default: 'slot',
+    },
+    activeLang: {
+        type: String,
+        default: '',
+    },
+    column: {
+        type: Boolean,
+        default: false,
+    },
+});
+
+const uploadUrl = inject('editorUploadUrl', null);
+const updateBlockImage = inject('editorUpdateBlockImage', null);
+
+// Image upload for image-type slot
+const { isDragOver, isUploading, fileInputRef, onDragOver, onDragLeave, onDrop, openPicker, onFileSelected } = useImageUpload(
+    () => uploadUrl?.value ?? null,
+    (url) => updateBlockImage?.(props.blockId, props.slotKey, null, url),
+);
+
+const resolveAlt = (alt, fallback) => {
+    if (!alt) return fallback;
+    if (typeof alt === 'string') return alt || fallback;
+    return alt[props.activeLang] || alt[Object.keys(alt)[0]] || fallback;
+};
+
+// Video activation
+const { isActive, target } = useIntersectionActivation();
+const youtubeUrl = computed(() => getYouTubeEmbedUrl(props.slotData?.media));
+const frameIoUrl = computed(() => getFrameIoEmbedUrl(props.slotData?.media?.url));
+const bunnyUrl = computed(() => getBunnyEmbedUrl(props.slotData?.media));
+
+// Text display
+const displayContent = computed(() => {
+    const c = props.slotData?.content;
+    if (typeof c === 'string') return c;
+    if (c && typeof c === 'object') {
+        return c[props.activeLang] || c[Object.keys(c)[0]] || '';
+    }
+    return '';
+});
+</script>
+
+<template>
+    <!-- TEXT -->
+    <section v-if="slotData.type === 'text'" class="slot-text">
+        <div v-if="displayContent" class="slot-text__body" v-html="displayContent"></div>
+        <p v-else class="slot-text__placeholder">Add narrative copy for this text slot.</p>
+    </section>
+
+    <!-- IMAGE -->
+    <figure
+        v-else-if="slotData.type === 'image'"
+        class="slot-image"
+        :class="{
+            'slot-image--column': column,
+            'slot-image--over': isDragOver,
+            'slot-image--uploading': isUploading,
+            'slot-image--editable': !!uploadUrl?.value,
+        }"
+        @dragover="uploadUrl?.value ? onDragOver($event) : null"
+        @dragleave="onDragLeave"
+        @drop="uploadUrl?.value ? onDrop($event) : null"
+        @click="uploadUrl?.value ? openPicker() : null"
+    >
+        <img v-if="slotData.image?.url" :src="slotData.image.url" :alt="resolveAlt(slotData.image.alt, 'Project image')" loading="lazy">
+        <div v-else class="slot-image__placeholder">
+            {{ isUploading ? 'Uploading…' : (uploadUrl?.value ? 'Drop or click to upload.' : 'Add image URL.') }}
+        </div>
+        <div v-if="isDragOver" class="slot-image__overlay"></div>
+        <div v-if="isUploading && slotData.image?.url" class="slot-image__overlay slot-image__overlay--uploading"></div>
+        <input ref="fileInputRef" type="file" accept="image/*" style="display:none" @change="onFileSelected">
+    </figure>
+
+    <!-- VIDEO -->
+    <section
+        v-else-if="slotData.type === 'video'"
+        ref="target"
+        class="slot-video"
+        :class="{ 'slot-video--column': column }"
+    >
+        <iframe
+            v-if="slotData.media?.type === 'youtube' && isActive && youtubeUrl"
+            :src="youtubeUrl"
+            title="Video slot"
+            loading="lazy"
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+            allowfullscreen
+        />
+        <iframe
+            v-else-if="slotData.media?.type === 'frameio' && isActive && frameIoUrl"
+            :src="frameIoUrl"
+            title="Video slot"
+            loading="lazy"
+            allow="autoplay; fullscreen; picture-in-picture"
+            allowfullscreen
+        />
+        <div
+            v-else-if="slotData.media?.type === 'bunny' && isActive && bunnyUrl"
+            class="slot-video__bunny"
+        >
+            <iframe
+                :src="bunnyUrl"
+                loading="lazy"
+                style="border:0;position:absolute;top:0;height:100%;width:100%;"
+                allow="accelerometer;gyroscope;autoplay;encrypted-media;picture-in-picture;"
+                allowfullscreen
+            />
+        </div>
+        <video
+            v-else-if="slotData.media?.type === 'video' && isActive && slotData.media?.url"
+            :autoplay="slotData.media?.autoplay === true"
+            :muted="slotData.media?.muted === true"
+            :loop="slotData.media?.loop === true"
+            controls
+            playsinline
+            preload="metadata"
+        >
+            <source :src="slotData.media.url">
+        </video>
+        <div v-else class="slot-video__placeholder">Add a video URL to render this slot.</div>
+    </section>
+</template>
+
+<style scoped>
+/* ---- Text ---- */
+.slot-text {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    min-height: 8rem;
+    padding: 2rem;
+    text-align: center;
+}
+
+.slot-text__placeholder {
+    color: var(--project-muted, #6b7280);
+    font-size: clamp(1.05rem, 1.8vw, 1.4rem);
+    line-height: 1.75;
+    margin: 0;
+}
+
+:deep(.slot-text__body p),
+:deep(.slot-text__body h2),
+:deep(.slot-text__body h3),
+:deep(.slot-text__body ul),
+:deep(.slot-text__body ol) {
+    color: var(--project-ink, #111827);
+    font-size: clamp(1.05rem, 1.8vw, 1.4rem);
+    line-height: 1.75;
+    margin: 0 0 0.75em;
+}
+
+:deep(.slot-text__body p:last-child),
+:deep(.slot-text__body h2:last-child),
+:deep(.slot-text__body ul:last-child) {
+    margin-bottom: 0;
+}
+
+:deep(.slot-text__body h2) {
+    font-size: clamp(1.3rem, 2.2vw, 1.8rem);
+    font-weight: 700;
+}
+
+:deep(.slot-text__body h3) {
+    font-size: clamp(1.1rem, 1.9vw, 1.5rem);
+    font-weight: 700;
+}
+
+/* ---- Image ---- */
+.slot-image {
+    aspect-ratio: 16 / 9;
+    background: linear-gradient(135deg, rgba(15, 23, 42, 0.08), rgba(148, 163, 184, 0.15));
+    border-radius: 1.65rem;
+    margin: 0;
+    overflow: hidden;
+    position: relative;
+    transition: outline-color 0.15s;
+}
+
+.slot-image--column {
+    aspect-ratio: 4 / 4;
+    border-radius: 1.5rem;
+}
+
+.slot-image--editable {
+    cursor: pointer;
+}
+
+.slot-image--over {
+    outline: 2px dashed rgba(14, 116, 144, 0.7);
+    outline-offset: -2px;
+}
+
+.slot-image img {
+    display: block;
+    height: 100%;
+    object-fit: cover;
+    width: 100%;
+}
+
+.slot-image--uploading img {
+    opacity: 0.5;
+}
+
+.slot-image__placeholder {
+    align-items: center;
+    color: var(--project-muted, #6b7280);
+    display: flex;
+    height: 100%;
+    justify-content: center;
+    padding: 2rem;
+    text-align: center;
+}
+
+.slot-image__overlay {
+    background: rgba(14, 116, 144, 0.15);
+    bottom: 0;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+}
+
+.slot-image__overlay--uploading {
+    background: rgba(15, 23, 42, 0.3);
+}
+
+/* ---- Video ---- */
+.slot-video {
+    aspect-ratio: 16 / 9;
+    background: linear-gradient(135deg, rgba(15, 23, 42, 0.08), rgba(148, 163, 184, 0.15));
+    border-radius: 1.65rem;
+    overflow: hidden;
+}
+
+.slot-video--column {
+    aspect-ratio: 1 / 1;
+    border-radius: 1.5rem;
+}
+
+.slot-video iframe,
+.slot-video video {
+    border: 0;
+    display: block;
+    height: 100%;
+    width: 100%;
+}
+
+.slot-video__bunny {
+    padding-top: 56.25%;
+    position: relative;
+}
+
+.slot-video__placeholder {
+    align-items: center;
+    color: var(--project-muted, #6b7280);
+    display: flex;
+    height: 100%;
+    justify-content: center;
+    padding: 2rem;
+    text-align: center;
+}
+</style>

resources/js/projects-renderer/components/blocks/FullWidthBlock.vue

@@ -0,0 +1,32 @@
+<script setup>
+import BlockSlot from './BlockSlot.vue';
+
+defineProps({
+    block: {
+        type: Object,
+        required: true,
+    },
+    activeLang: {
+        type: String,
+        default: '',
+    },
+});
+</script>
+
+<template>
+    <section class="block-full-width">
+        <BlockSlot
+            :slot-data="block.slot"
+            :block-id="block.id"
+            slot-key="slot"
+            :active-lang="activeLang"
+            :column="false"
+        />
+    </section>
+</template>
+
+<style scoped>
+.block-full-width {
+    width: 100%;
+}
+</style>

resources/js/projects-renderer/components/blocks/FullWidthImageBlock.vue

@@ -0,0 +1,111 @@
+<script setup>
+import { inject } from 'vue';
+import { useImageUpload } from '../../composables/useImageUpload';
+
+const props = defineProps({
+    block: {
+        type: Object,
+        required: true,
+    },
+    activeLang: {
+        type: String,
+        default: '',
+    },
+});
+
+const resolveAlt = (alt, fallback) => {
+    if (!alt) return fallback;
+    if (typeof alt === 'string') return alt || fallback;
+    return alt[props.activeLang] || alt[Object.keys(alt)[0]] || fallback;
+};
+
+const uploadUrl = inject('editorUploadUrl', null);
+const updateBlockImage = inject('editorUpdateBlockImage', null);
+
+const { isDragOver, isUploading, fileInputRef, onDragOver, onDragLeave, onDrop, openPicker, onFileSelected } = useImageUpload(
+    () => uploadUrl?.value ?? null,
+    (url) => updateBlockImage?.(props.block.id, 'image', null, url),
+);
+</script>
+
+<template>
+    <section
+        class="block-image-full"
+        :class="{ 'block-image-full--over': isDragOver, 'block-image-full--uploading': isUploading, 'block-image-full--editable': !!uploadUrl?.value }"
+        @dragover="uploadUrl?.value ? onDragOver($event) : null"
+        @dragleave="onDragLeave"
+        @drop="uploadUrl?.value ? onDrop($event) : null"
+        @click="uploadUrl?.value ? openPicker() : null"
+    >
+        <img v-if="block.image?.url" :src="block.image.url" :alt="resolveAlt(block.image.alt, 'Project image')" loading="lazy">
+        <div v-else class="block-image-full__placeholder">
+            {{ isUploading ? 'Uploading…' : (uploadUrl?.value ? 'Drop image here or click to upload.' : 'Add a full-width image URL.') }}
+        </div>
+        <div v-if="isDragOver" class="block-image-full__drop-overlay">Drop to upload</div>
+        <div v-if="isUploading && block.image?.url" class="block-image-full__uploading-overlay">Uploading…</div>
+    </section>
+
+    <input ref="fileInputRef" type="file" accept="image/*" style="display:none" @change="onFileSelected">
+</template>
+
+<style scoped>
+.block-image-full {
+    aspect-ratio: 16 / 9;
+    background: linear-gradient(135deg, rgba(15, 23, 42, 0.08), rgba(148, 163, 184, 0.15));
+    border-radius: 1.65rem;
+    overflow: hidden;
+    position: relative;
+    transition: outline-color 0.15s;
+}
+
+.block-image-full--editable {
+    cursor: pointer;
+}
+
+.block-image-full--over {
+    outline: 2px dashed rgba(14, 116, 144, 0.7);
+    outline-offset: -2px;
+}
+
+img {
+    display: block;
+    height: 100%;
+    object-fit: cover;
+    width: 100%;
+}
+
+.block-image-full--uploading img {
+    opacity: 0.5;
+}
+
+.block-image-full__placeholder {
+    align-items: center;
+    color: var(--project-muted, #6b7280);
+    display: flex;
+    height: 100%;
+    justify-content: center;
+    padding: 2rem;
+    text-align: center;
+}
+
+.block-image-full__drop-overlay,
+.block-image-full__uploading-overlay {
+    align-items: center;
+    background: rgba(14, 116, 144, 0.55);
+    bottom: 0;
+    color: #fff;
+    display: flex;
+    font-size: 1rem;
+    font-weight: 700;
+    justify-content: center;
+    left: 0;
+    pointer-events: none;
+    position: absolute;
+    right: 0;
+    top: 0;
+}
+
+.block-image-full__uploading-overlay {
+    background: rgba(15, 23, 42, 0.4);
+}
+</style>

resources/js/projects-renderer/components/blocks/FullWidthTextBlock.vue

@@ -0,0 +1,88 @@
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+    block: {
+        type: Object,
+        required: true,
+    },
+    activeLang: {
+        type: String,
+        default: '',
+    },
+});
+
+const displayContent = computed(() => {
+    const c = props.block.content;
+    // Legacy: plain string
+    if (typeof c === 'string') return c;
+    // Object: try active lang, then first available, then empty
+    if (c && typeof c === 'object') {
+        return c[props.activeLang] || c[Object.keys(c)[0]] || '';
+    }
+    return '';
+});
+</script>
+
+<template>
+    <section class="block-text">
+        <div v-if="displayContent" class="block-text__body" v-html="displayContent"></div>
+        <p v-else class="block-text__placeholder">Add narrative copy for this full-width text row.</p>
+    </section>
+</template>
+
+<style scoped>
+.block-text {
+    margin: 0 auto;
+    max-width: 56rem;
+    text-align: center;
+}
+
+.block-text__placeholder {
+    color: var(--project-muted, #6b7280);
+    font-size: clamp(1.05rem, 1.8vw, 1.4rem);
+    line-height: 1.75;
+    margin: 0;
+}
+
+:deep(.block-text__body p),
+:deep(.block-text__body h2),
+:deep(.block-text__body h3),
+:deep(.block-text__body ul),
+:deep(.block-text__body ol) {
+    color: var(--project-ink, #111827);
+    font-size: clamp(1.05rem, 1.8vw, 1.4rem);
+    line-height: 1.75;
+    margin: 0 0 0.75em;
+}
+
+:deep(.block-text__body p:last-child),
+:deep(.block-text__body h2:last-child),
+:deep(.block-text__body h3:last-child),
+:deep(.block-text__body ul:last-child),
+:deep(.block-text__body ol:last-child) {
+    margin-bottom: 0;
+}
+
+:deep(.block-text__body h2) {
+    font-size: clamp(1.3rem, 2.2vw, 1.8rem);
+    font-weight: 700;
+}
+
+:deep(.block-text__body h3) {
+    font-size: clamp(1.1rem, 1.9vw, 1.5rem);
+    font-weight: 700;
+}
+
+:deep(.block-text__body ul),
+:deep(.block-text__body ol) {
+    display: inline-block;
+    padding-left: 1.4rem;
+    text-align: left;
+}
+
+:deep(.block-text__body a) {
+    color: #0f766e;
+    text-decoration: underline;
+}
+</style>

resources/js/projects-renderer/components/blocks/PublicSlot.vue

@@ -0,0 +1,141 @@
+<script setup>
+import { computed } from 'vue';
+import { useIntersectionActivation } from '../../composables/useIntersectionActivation';
+import { getBunnyEmbedUrl, getFrameIoEmbedUrl, getYouTubeEmbedUrl } from '../../schema/projectSchema';
+
+const props = defineProps({
+    slotData: {
+        type: Object,
+        required: true,
+    },
+    activeLang: {
+        type: String,
+        default: '',
+    },
+});
+
+const { isActive, target } = useIntersectionActivation();
+
+const youtubeUrl = computed(() => getYouTubeEmbedUrl(props.slotData?.media));
+const frameIoUrl = computed(() => getFrameIoEmbedUrl(props.slotData?.media?.url));
+const bunnyUrl = computed(() => getBunnyEmbedUrl(props.slotData?.media));
+
+const displayContent = computed(() => {
+    const c = props.slotData?.content;
+    if (typeof c === 'string') return c;
+    if (c && typeof c === 'object') {
+        return c[props.activeLang] || c[Object.keys(c)[0]] || '';
+    }
+    return '';
+});
+
+const resolveAlt = (alt, fallback) => {
+    if (!alt) return fallback;
+    if (typeof alt === 'string') return alt || fallback;
+    return alt[props.activeLang] || alt[Object.keys(alt)[0]] || fallback;
+};
+</script>
+
+<template>
+    <!-- TEXT -->
+    <div v-if="slotData.type === 'text'" class="project-text-block" v-html="displayContent"></div>
+
+    <!-- IMAGE -->
+    <img
+        v-else-if="slotData.type === 'image' && slotData.image?.url"
+        :src="slotData.image.url"
+        :alt="resolveAlt(slotData.image?.alt, '')"
+        loading="lazy"
+    >
+
+    <!-- VIDEO -->
+    <div v-else-if="slotData.type === 'video'" ref="target" class="project-video-wrap">
+        <iframe
+            v-if="slotData.media?.type === 'youtube' && isActive && youtubeUrl"
+            :src="youtubeUrl"
+            title="Project video"
+            loading="lazy"
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+            allowfullscreen
+        />
+        <iframe
+            v-else-if="slotData.media?.type === 'frameio' && isActive && frameIoUrl"
+            :src="frameIoUrl"
+            title="Project video"
+            loading="lazy"
+            allow="autoplay; fullscreen; picture-in-picture"
+            allowfullscreen
+        />
+        <div v-else-if="slotData.media?.type === 'bunny' && bunnyUrl" class="project-video-wrap__bunny">
+            <iframe
+                v-if="isActive"
+                :src="bunnyUrl"
+                loading="lazy"
+                allow="accelerometer;gyroscope;autoplay;encrypted-media;picture-in-picture;"
+                allowfullscreen
+            />
+        </div>
+        <video
+            v-else-if="slotData.media?.type === 'video' && isActive && slotData.media?.url"
+            class="project-video"
+            :autoplay="slotData.media?.autoplay === true"
+            :muted="slotData.media?.muted === true"
+            :loop="slotData.media?.loop === true"
+            playsinline
+        >
+            <source :src="slotData.media.url" type="video/mp4">
+        </video>
+    </div>
+</template>
+
+<style scoped>
+img {
+    display: block;
+    height: auto;
+    width: 100%;
+}
+
+.project-text-block {
+    color: #f5f5f5;
+    line-height: 1.6;
+    padding: 1rem 0;
+}
+
+.project-video-wrap {
+    aspect-ratio: 16 / 9;
+    overflow: hidden;
+    position: relative;
+    width: 100%;
+}
+
+.project-video-wrap iframe,
+.project-video-wrap video {
+    border: 0;
+    display: block;
+    height: 100%;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 100%;
+}
+
+.project-video-wrap__bunny {
+    height: 100%;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 100%;
+}
+
+.project-video-wrap__bunny iframe {
+    height: 100%;
+    width: 100%;
+}
+
+video.project-video {
+    display: block;
+    height: 100%;
+    object-fit: cover;
+    width: 100%;
+}
+</style>

resources/js/projects-renderer/components/blocks/TwoColumnImagesBlock.vue

@@ -0,0 +1,139 @@
+<script setup>
+import { inject } from 'vue';
+import { useImageUpload } from '../../composables/useImageUpload';
+
+const props = defineProps({
+    block: {
+        type: Object,
+        required: true,
+    },
+    activeLang: {
+        type: String,
+        default: '',
+    },
+});
+
+const resolveAlt = (alt, fallback) => {
+    if (!alt) return fallback;
+    if (typeof alt === 'string') return alt || fallback;
+    return alt[props.activeLang] || alt[Object.keys(alt)[0]] || fallback;
+};
+
+const uploadUrl = inject('editorUploadUrl', null);
+const updateBlockImage = inject('editorUpdateBlockImage', null);
+
+const { isDragOver: isDragOver0, isUploading: isUploading0, fileInputRef: fileInputRef0, onDragOver: onDragOver0, onDragLeave: onDragLeave0, onDrop: onDrop0, openPicker: openPicker0, onFileSelected: onFileSelected0 } = useImageUpload(
+    () => uploadUrl?.value ?? null,
+    (url) => updateBlockImage?.(props.block.id, 'images', 0, url),
+);
+
+const { isDragOver: isDragOver1, isUploading: isUploading1, fileInputRef: fileInputRef1, onDragOver: onDragOver1, onDragLeave: onDragLeave1, onDrop: onDrop1, openPicker: openPicker1, onFileSelected: onFileSelected1 } = useImageUpload(
+    () => uploadUrl?.value ?? null,
+    (url) => updateBlockImage?.(props.block.id, 'images', 1, url),
+);
+
+const dragHandlers = [
+    { isDragOver: isDragOver0, isUploading: isUploading0, fileInputRef: fileInputRef0, onDragOver: onDragOver0, onDragLeave: onDragLeave0, onDrop: onDrop0, openPicker: openPicker0, onFileSelected: onFileSelected0 },
+    { isDragOver: isDragOver1, isUploading: isUploading1, fileInputRef: fileInputRef1, onDragOver: onDragOver1, onDragLeave: onDragLeave1, onDrop: onDrop1, openPicker: openPicker1, onFileSelected: onFileSelected1 },
+];
+</script>
+
+<template>
+    <section class="block-images-split">
+        <figure
+            v-for="(image, index) in block.images"
+            :key="`${block.id}-${index}`"
+            :class="{
+                'block-images-split__figure--over': dragHandlers[index]?.isDragOver.value,
+                'block-images-split__figure--uploading': dragHandlers[index]?.isUploading.value,
+                'block-images-split__figure--editable': !!uploadUrl?.value,
+            }"
+            @dragover="uploadUrl?.value ? dragHandlers[index]?.onDragOver($event) : null"
+            @dragleave="dragHandlers[index]?.onDragLeave()"
+            @drop="uploadUrl?.value ? dragHandlers[index]?.onDrop($event) : null"
+            @click="uploadUrl?.value ? dragHandlers[index]?.openPicker() : null"
+        >
+            <img v-if="image?.url" :src="image.url" :alt="resolveAlt(image.alt, `Project image ${index + 1}`)" loading="lazy">
+            <div v-else class="block-images-split__placeholder">
+                {{ dragHandlers[index]?.isUploading.value ? 'Uploading…' : (uploadUrl?.value ? 'Drop or click to upload.' : `Drop in image URL ${index + 1}`) }}
+            </div>
+            <div v-if="dragHandlers[index]?.isDragOver.value" class="block-images-split__overlay">Drop to upload</div>
+            <div v-if="dragHandlers[index]?.isUploading.value && image?.url" class="block-images-split__overlay block-images-split__overlay--uploading">Uploading…</div>
+            <input :ref="dragHandlers[index]?.fileInputRef" type="file" accept="image/*" style="display:none" @change="dragHandlers[index]?.onFileSelected($event)">
+        </figure>
+    </section>
+</template>
+
+<style scoped>
+.block-images-split {
+    display: grid;
+    gap: 1.4rem;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+figure {
+    aspect-ratio: 4 / 4;
+    background: linear-gradient(135deg, rgba(15, 23, 42, 0.08), rgba(148, 163, 184, 0.15));
+    border-radius: 1.5rem;
+    margin: 0;
+    overflow: hidden;
+    position: relative;
+    transition: outline-color 0.15s;
+}
+
+.block-images-split__figure--editable {
+    cursor: pointer;
+}
+
+.block-images-split__figure--over {
+    outline: 2px dashed rgba(14, 116, 144, 0.7);
+    outline-offset: -2px;
+}
+
+img {
+    display: block;
+    height: 100%;
+    object-fit: cover;
+    width: 100%;
+}
+
+.block-images-split__figure--uploading img {
+    opacity: 0.5;
+}
+
+.block-images-split__placeholder {
+    align-items: center;
+    color: var(--project-muted, #6b7280);
+    display: flex;
+    height: 100%;
+    justify-content: center;
+    padding: 2rem;
+    text-align: center;
+}
+
+.block-images-split__overlay {
+    align-items: center;
+    background: rgba(14, 116, 144, 0.55);
+    bottom: 0;
+    color: #fff;
+    display: flex;
+    font-size: 0.9rem;
+    font-weight: 700;
+    justify-content: center;
+    left: 0;
+    pointer-events: none;
+    position: absolute;
+    right: 0;
+    top: 0;
+}
+
+.block-images-split__overlay--uploading {
+    background: rgba(15, 23, 42, 0.4);
+}
+
+@media (max-width: 900px) {
+    .block-images-split {
+        grid-template-columns: 1fr;
+    }
+}
+</style>

resources/js/projects-renderer/components/blocks/TwoColumnsBlock.vue

@@ -0,0 +1,42 @@
+<script setup>
+import BlockSlot from './BlockSlot.vue';
+
+defineProps({
+    block: {
+        type: Object,
+        required: true,
+    },
+    activeLang: {
+        type: String,
+        default: '',
+    },
+});
+</script>
+
+<template>
+    <section class="block-two-columns">
+        <BlockSlot
+            :slot-data="block.left"
+            :block-id="block.id"
+            slot-key="left"
+            :active-lang="activeLang"
+            :column="true"
+        />
+        <BlockSlot
+            :slot-data="block.right"
+            :block-id="block.id"
+            slot-key="right"
+            :active-lang="activeLang"
+            :column="true"
+        />
+    </section>
+</template>
+
+<style scoped>
+.block-two-columns {
+    align-items: center;
+    display: grid;
+    gap: 1.4rem;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+</style>

resources/js/projects-renderer/components/blocks/VideoBlock.vue

@@ -0,0 +1,90 @@
+<script setup>
+import { computed } from 'vue';
+import { useIntersectionActivation } from '../../composables/useIntersectionActivation';
+import { getBunnyEmbedUrl, getFrameIoEmbedUrl, getYouTubeEmbedUrl } from '../../schema/projectSchema';
+
+const props = defineProps({
+    block: {
+        type: Object,
+        required: true,
+    },
+});
+
+const { isActive, target } = useIntersectionActivation();
+const youtubeUrl = computed(() => getYouTubeEmbedUrl(props.block?.media));
+const frameIoUrl = computed(() => getFrameIoEmbedUrl(props.block?.media?.url));
+const bunnyUrl = computed(() => getBunnyEmbedUrl(props.block?.media));
+</script>
+
+<template>
+    <section ref="target" class="block-video">
+        <iframe
+            v-if="block.media?.type === 'youtube' && isActive && youtubeUrl"
+            :src="youtubeUrl"
+            title="Project video block"
+            loading="lazy"
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+            allowfullscreen
+        />
+
+        <iframe
+            v-else-if="block.media?.type === 'frameio' && isActive && frameIoUrl"
+            :src="frameIoUrl"
+            title="Project video block"
+            loading="lazy"
+            allow="autoplay; fullscreen; picture-in-picture"
+            allowfullscreen
+        />
+
+        <iframe
+            v-else-if="block.media?.type === 'bunny' && isActive && bunnyUrl"
+            :src="bunnyUrl"
+            title="Project video block"
+            loading="lazy"
+            style="border:0;position:absolute;top:0;height:100%;width:100%;"
+            allow="accelerometer;gyroscope;autoplay;encrypted-media;picture-in-picture;"
+            allowfullscreen
+        />
+
+        <video
+            v-else-if="block.media?.type === 'video' && isActive && block.media?.url"
+            :autoplay="block.media?.autoplay === true"
+            :muted="block.media?.muted === true"
+            :loop="block.media?.loop === true"
+            controls
+            playsinline
+            preload="metadata"
+        >
+            <source :src="block.media.url">
+        </video>
+
+        <div v-else class="block-video__placeholder">Add a video block URL to render this row.</div>
+    </section>
+</template>
+
+<style scoped>
+.block-video {
+    aspect-ratio: 16 / 9;
+    background: linear-gradient(135deg, rgba(15, 23, 42, 0.08), rgba(148, 163, 184, 0.15));
+    border-radius: 1.65rem;
+    overflow: hidden;
+}
+
+iframe,
+video {
+    border: 0;
+    display: block;
+    height: 100%;
+    width: 100%;
+}
+
+.block-video__placeholder {
+    align-items: center;
+    color: var(--project-muted, #6b7280);
+    display: flex;
+    height: 100%;
+    justify-content: center;
+    padding: 2rem;
+    text-align: center;
+}
+</style>

resources/js/projects-renderer/composables/useImageUpload.js

@@ -0,0 +1,101 @@
+import { inject, ref } from 'vue';
+
+/**
+ * Shared image upload composable used by both the left-panel ImageDropZone
+ * and the right-side preview block drop zones.
+ *
+ * @param {() => string | null} getUploadUrl  A getter (or plain string) for the upload endpoint.
+ * @param {(url: string) => void} onSuccess   Called immediately with a blob URL, then again with the server URL.
+ */
+export const useImageUpload = (getUploadUrl, onSuccess) => {
+    const isDragOver = ref(false);
+    const isUploading = ref(false);
+    const error = ref(null);
+
+    // Plugs into the parent editor's pending-upload counter so the form submit
+    // can be blocked while this upload is in flight.
+    const pendingUploads = inject('editorPendingUploads', null);
+
+    const uploadFile = async (file) => {
+        if (!file || !file.type.startsWith('image/')) {
+            return;
+        }
+
+        const uploadUrl = typeof getUploadUrl === 'function' ? getUploadUrl() : getUploadUrl;
+
+        if (!uploadUrl) {
+            return;
+        }
+
+        // Emit blob URL immediately so the preview renders at once
+        const blobUrl = URL.createObjectURL(file);
+        onSuccess(blobUrl);
+
+        isUploading.value = true;
+        error.value = null;
+        if (pendingUploads) pendingUploads.value++;
+
+        try {
+            const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') ?? '';
+            const formData = new FormData();
+            formData.append('image', file);
+
+            const response = await fetch(uploadUrl, {
+                method: 'POST',
+                headers: { 'X-CSRF-TOKEN': csrfToken },
+                body: formData,
+            });
+
+            if (!response.ok) {
+                throw new Error('Upload failed');
+            }
+
+            const data = await response.json();
+            URL.revokeObjectURL(blobUrl);
+            onSuccess(data.url);
+        } catch {
+            error.value = 'Upload failed. Please try again.';
+            URL.revokeObjectURL(blobUrl);
+            onSuccess('');
+        } finally {
+            isUploading.value = false;
+            if (pendingUploads) pendingUploads.value--;
+        }
+    };
+
+    const onDragOver = (event) => {
+        event.preventDefault();
+        isDragOver.value = true;
+    };
+
+    const onDragLeave = () => {
+        isDragOver.value = false;
+    };
+
+    const onDrop = (event) => {
+        event.preventDefault();
+        isDragOver.value = false;
+        const file = event.dataTransfer?.files?.[0];
+
+        if (file) {
+            uploadFile(file);
+        }
+    };
+
+    const fileInputRef = ref(null);
+
+    const openPicker = () => {
+        if (!fileInputRef.value) return;
+        fileInputRef.value.value = '';
+        fileInputRef.value.click();
+    };
+
+    const onFileSelected = (event) => {
+        const file = event.target.files[0];
+        if (file) {
+            uploadFile(file);
+        }
+    };
+
+    return { isDragOver, isUploading, error, fileInputRef, onDragOver, onDragLeave, onDrop, openPicker, onFileSelected, uploadFile };
+};

resources/js/projects-renderer/composables/useIntersectionActivation.js

@@ -0,0 +1,40 @@
+import { onBeforeUnmount, onMounted, ref } from 'vue';
+
+export const useIntersectionActivation = (options = { rootMargin: '180px 0px' }) => {
+    const target = ref(null);
+    const isActive = ref(false);
+    let observer;
+
+    onMounted(() => {
+        if (typeof IntersectionObserver === 'undefined') {
+            isActive.value = true;
+            return;
+        }
+
+        observer = new IntersectionObserver((entries) => {
+            entries.forEach((entry) => {
+                if (!entry.isIntersecting) {
+                    return;
+                }
+
+                isActive.value = true;
+                observer?.disconnect();
+            });
+        }, options);
+
+        if (target.value) {
+            observer.observe(target.value);
+        } else {
+            isActive.value = true;
+        }
+    });
+
+    onBeforeUnmount(() => {
+        observer?.disconnect();
+    });
+
+    return {
+        target,
+        isActive,
+    };
+};

resources/js/projects-renderer/schema/projectSchema.js

@@ -0,0 +1,497 @@
+const BLOCK_TYPES = ['FullWidth', 'TwoColumns'];
+const SLOT_TYPES = ['text', 'image', 'video'];
+const MEDIA_TYPES = ['youtube', 'frameio', 'bunny', 'video', 'image'];
+
+let blockCounter = 0;
+
+const nextBlockId = (prefix = 'block') => `${prefix}-${Date.now()}-${blockCounter++}`;
+
+const toString = (value) => (typeof value === 'string' ? value : '');
+
+// Blob URLs are temporary object URLs only valid in the current browser session.
+// Strip them so they are never serialized into the saved JSON structure.
+const sanitizeUrl = (value) => {
+    const str = toString(value);
+    return str.startsWith('blob:') ? '' : str;
+};
+
+const normalizeAwards = (value) => {
+    if (!value) {
+        return [];
+    }
+
+    if (Array.isArray(value)) {
+        return value.map((item) => toString(item).trim()).filter(Boolean);
+    }
+
+    return toString(value)
+        .split('\n')
+        .map((item) => item.trim())
+        .filter(Boolean);
+};
+
+const normalizeMedia = (media) => {
+    const candidate = media && typeof media === 'object' ? media : {};
+    const type = MEDIA_TYPES.includes(candidate.type) ? candidate.type : 'image';
+
+    return {
+        type,
+        url: sanitizeUrl(candidate.url),
+        poster: sanitizeUrl(candidate.poster),
+        autoplay: candidate.autoplay === true,
+        loop: candidate.loop === true,
+        muted: candidate.muted === true,
+    };
+};
+
+const normalizeImage = (image, defaultLang = '') => {
+    const candidate = image && typeof image === 'object' ? image : {};
+    const rawAlt = candidate.alt;
+    let alt;
+    if (!rawAlt) {
+        alt = {};
+    } else if (typeof rawAlt === 'string') {
+        alt = defaultLang ? { [defaultLang]: rawAlt } : { _: rawAlt };
+    } else if (typeof rawAlt === 'object') {
+        alt = Object.fromEntries(Object.entries(rawAlt).map(([k, v]) => [k, toString(v)]));
+    } else {
+        alt = {};
+    }
+
+    return {
+        url: sanitizeUrl(candidate.url),
+        alt,
+    };
+};
+
+export const PROJECT_SCHEMA_EXAMPLE = {
+    header: {
+        headline: 'Modern Office Design',
+    },
+    thumbnailMedia: {
+        type: 'image',
+        url: '',
+        poster: '',
+    },
+    heroMedia: {
+        type: 'youtube',
+        url: 'https://www.youtube.com/watch?v=ScMzIvxBSi4',
+    },
+    metadata: {
+        clientName: 'SOZ',
+        awarded: ['SOF - Gold Award - Art Direction', 'SOF - Silver Award - Design'],
+        description: 'A modular project schema that can drive both the public page and the cPad editor preview.',
+    },
+    contentBlocks: [
+        {
+            id: nextBlockId(),
+            type: 'FullWidth',
+            slot: {
+                type: 'text',
+                content: 'Project overview text rendered inside a full-width row.',
+                image: { url: '', alt: '' },
+                media: { type: 'youtube', url: '', poster: '' },
+            },
+        },
+        {
+            id: nextBlockId(),
+            type: 'TwoColumns',
+            left: {
+                type: 'image',
+                content: {},
+                image: { url: 'https://picsum.photos/1200/900?random=11', alt: 'Left project visual' },
+                media: { type: 'youtube', url: '', poster: '' },
+            },
+            right: {
+                type: 'image',
+                content: {},
+                image: { url: 'https://picsum.photos/1200/900?random=12', alt: 'Right project visual' },
+                media: { type: 'youtube', url: '', poster: '' },
+            },
+        },
+        {
+            id: nextBlockId(),
+            type: 'FullWidth',
+            slot: {
+                type: 'video',
+                content: {},
+                image: { url: '', alt: '' },
+                media: { type: 'youtube', url: 'https://www.youtube.com/watch?v=ysz5S6PUM-U', poster: '' },
+            },
+        },
+    ],
+};
+
+export const createEmptyProjectSchema = () => ({
+    header: {
+        headline: '',
+        subline: '',
+    },
+    thumbnailMedia: {
+        type: 'image',
+        url: '',
+        poster: '',
+        autoplay: false,
+        loop: false,
+        muted: false,
+    },
+    heroMedia: {
+        type: 'image',
+        url: '',
+        poster: '',
+    },
+    metadata: {
+        clientName: '',
+        awarded: [],
+        description: '',
+    },
+    contentBlocks: [],
+});
+
+export const createBlock = (type) => {
+    const createSlot = (slotType = 'text') => ({
+        type: slotType,
+        content: {},
+        image: { url: '', alt: {} },
+        media: { type: 'youtube', url: '', poster: '' },
+    });
+
+    if (type === 'TwoColumns') {
+        return {
+            id: nextBlockId(),
+            type: 'TwoColumns',
+            name: '',
+            hidden: false,
+            left: createSlot('image'),
+            right: createSlot('image'),
+        };
+    }
+
+    // FullWidth (default)
+    return {
+        id: nextBlockId(),
+        type: 'FullWidth',
+        name: '',
+        hidden: false,
+        slot: createSlot('text'),
+    };
+};
+
+const normalizeSlot = (slot, defaultLang = '') => {
+    const candidate = slot && typeof slot === 'object' ? slot : {};
+    const type = SLOT_TYPES.includes(candidate.type) ? candidate.type : 'text';
+
+    const rawContent = candidate.content;
+    let content = {};
+    if (rawContent && typeof rawContent === 'string') {
+        content = defaultLang ? { [defaultLang]: rawContent } : { _: rawContent };
+    } else if (rawContent && typeof rawContent === 'object') {
+        content = Object.fromEntries(Object.entries(rawContent).map(([k, v]) => [k, toString(v)]));
+    }
+
+    return {
+        type,
+        content,
+        image: normalizeImage(candidate.image, defaultLang),
+        media: normalizeMedia(candidate.media),
+    };
+};
+
+const normalizeBlock = (block, index, defaultLang = '') => {
+    const candidate = block && typeof block === 'object' ? block : {};
+    const type = candidate.type;
+    const id = toString(candidate.id) || `block-${index}`;
+
+    // --- Legacy migrations ---
+    if (type === 'FullWidthText') {
+        const rawContent = candidate.content;
+        let content = {};
+        if (rawContent && typeof rawContent === 'string') {
+            content = defaultLang ? { [defaultLang]: rawContent } : { _: rawContent };
+        } else if (rawContent && typeof rawContent === 'object') {
+            content = Object.fromEntries(Object.entries(rawContent).map(([k, v]) => [k, toString(v)]));
+        }
+        return {
+            id, type: 'FullWidth',
+            slot: { type: 'text', content, image: normalizeImage(null, defaultLang), media: normalizeMedia(null) },
+        };
+    }
+
+    if (type === 'FullWidthImage') {
+        return {
+            id, type: 'FullWidth',
+            slot: { type: 'image', content: {}, image: normalizeImage(candidate.image, defaultLang), media: normalizeMedia(null) },
+        };
+    }
+
+    if (type === 'Video') {
+        return {
+            id, type: 'FullWidth',
+            slot: { type: 'video', content: {}, image: normalizeImage(null, defaultLang), media: normalizeMedia(candidate.media) },
+        };
+    }
+
+    if (type === 'TwoColumnImages') {
+        const images = Array.isArray(candidate.images) ? candidate.images.slice(0, 2) : [];
+        return {
+            id, type: 'TwoColumns',
+            left: { type: 'image', content: {}, image: normalizeImage(images[0], defaultLang), media: normalizeMedia(null) },
+            right: { type: 'image', content: {}, image: normalizeImage(images[1], defaultLang), media: normalizeMedia(null) },
+        };
+    }
+
+    // --- New types ---
+    if (type === 'TwoColumns') {
+        return {
+            id,
+            type: 'TwoColumns',
+            name: toString(candidate.name) || '',
+            hidden: candidate.hidden === true,
+            left: normalizeSlot(candidate.left, defaultLang),
+            right: normalizeSlot(candidate.right, defaultLang),
+        };
+    }
+
+    // FullWidth (default)
+    return {
+        id, type: 'FullWidth',
+        name: toString(candidate.name) || '',
+        hidden: candidate.hidden === true,
+        slot: normalizeSlot(candidate.slot, defaultLang),
+    };
+};
+
+export const normalizeProjectSchema = (project, defaultLang = '') => {
+    const candidate = project && typeof project === 'object' ? project : {};
+    const base = createEmptyProjectSchema();
+    const contentBlocks = Array.isArray(candidate.contentBlocks)
+        ? candidate.contentBlocks
+        : Array.isArray(candidate.blocks)
+          ? candidate.blocks
+          : [];
+
+    return {
+        header: {
+            headline: toString(candidate.header?.headline ?? candidate.project_title),
+            subline: toString(candidate.header?.subline),
+        },
+        thumbnailMedia: normalizeMedia(candidate.thumbnailMedia ?? candidate.thumbnail_media),
+        heroMedia: normalizeMedia(candidate.heroMedia ?? candidate.hero_media),
+        metadata: {
+            clientName: toString(candidate.metadata?.clientName),
+            awarded: normalizeAwards(candidate.metadata?.awarded),
+            description: toString(candidate.metadata?.description),
+        },
+        contentBlocks: contentBlocks.map((b, i) => normalizeBlock(b, i, defaultLang)),
+        backgroundColor: toString(candidate.backgroundColor ?? base.backgroundColor),
+    };
+};
+
+export const createProjectSchemaFromLegacy = (legacy) => {
+    const candidate = legacy && typeof legacy === 'object' ? legacy : {};
+    const heroMedia = candidate.youtube
+        ? { type: 'youtube', url: candidate.youtube }
+        : candidate.video
+          ? { type: 'video', url: candidate.video }
+          : { type: 'image', url: candidate.pictureCatalogFull || candidate.pictureCover || '' };
+
+    const contentBlocks = [];
+    const gallery = Array.isArray(candidate.gallery) ? candidate.gallery : [];
+
+    if (gallery.length >= 2) {
+        contentBlocks.push({
+            type: 'TwoColumnImages',
+            images: [gallery[0], gallery[1]],
+        });
+    } else if (candidate.pictureCover || candidate.pictureCatalog) {
+        contentBlocks.push({
+            type: 'TwoColumnImages',
+            images: [
+                { url: candidate.pictureCover || candidate.pictureCatalog || '', alt: '' },
+                { url: candidate.pictureCatalog || candidate.pictureCover || '', alt: '' },
+            ],
+        });
+    }
+
+    if (candidate.description) {
+        contentBlocks.push({
+            type: 'FullWidthText',
+            content: candidate.description,
+        });
+    }
+
+    if (candidate.pictureCatalogFull) {
+        contentBlocks.push({
+            type: 'FullWidthImage',
+            image: { url: candidate.pictureCatalogFull, alt: '' },
+        });
+    }
+
+    if (gallery.length >= 4) {
+        contentBlocks.push({
+            type: 'TwoColumnImages',
+            images: [gallery[2], gallery[3]],
+        });
+    }
+
+    if (candidate.video) {
+        contentBlocks.push({
+            type: 'Video',
+            media: { type: 'video', url: candidate.video },
+        });
+    }
+
+    return normalizeProjectSchema({
+        header: {
+            headline: candidate.headline,
+        },
+        heroMedia,
+        metadata: {
+            clientName: candidate.clientName,
+            awarded: candidate.awarded,
+            description: candidate.description,
+        },
+        contentBlocks,
+    });
+};
+
+export const buildInitialProject = (payload) => {
+    const candidate = payload && typeof payload === 'object' ? payload : {};
+    const defaultLang = toString(candidate.defaultLanguage);
+    const hasModernStructure = candidate.structure
+        && typeof candidate.structure === 'object'
+        && !Array.isArray(candidate.structure)
+        && (candidate.structure.header || candidate.structure.heroMedia || candidate.structure.contentBlocks || candidate.structure.blocks);
+
+    if (hasModernStructure) {
+        return normalizeProjectSchema(candidate.structure, defaultLang);
+    }
+
+    if (candidate.legacy) {
+        return createProjectSchemaFromLegacy(candidate.legacy);
+    }
+
+    if (candidate.header || candidate.heroMedia || candidate.contentBlocks) {
+        return normalizeProjectSchema(candidate, defaultLang);
+    }
+
+    return normalizeProjectSchema(PROJECT_SCHEMA_EXAMPLE);
+};
+
+export const serializeProjectSchema = (project) => JSON.stringify(normalizeProjectSchema(project), null, 2);
+
+export const getYouTubeEmbedUrl = (media) => {
+    const obj = media && typeof media === 'object' ? media : { url: media };
+    const value = toString(obj.url).trim();
+
+    if (!value) {
+        return '';
+    }
+
+    try {
+        const parsed = new URL(value);
+        const autoplay = obj.autoplay === true;
+        const loop = obj.loop === true;
+        const muted = obj.muted === true;
+        let embedUrl = '';
+        let videoId = '';
+
+        if (parsed.hostname.includes('youtu.be')) {
+            videoId = parsed.pathname.replace('/', '');
+        } else {
+            videoId = parsed.searchParams.get('v') || '';
+        }
+
+        if (!videoId && parsed.hostname.includes('youtube.com') && parsed.pathname.startsWith('/embed/')) {
+            videoId = parsed.pathname.split('/').pop() || '';
+        }
+
+        if (!videoId) {
+            return value;
+        }
+
+        embedUrl = `https://www.youtube.com/embed/${videoId}`;
+        const embed = new URL(embedUrl);
+        embed.searchParams.set('autoplay', autoplay ? '1' : '0');
+        embed.searchParams.set('mute', muted ? '1' : '0');
+        embed.searchParams.set('loop', loop ? '1' : '0');
+        if (loop) {
+            embed.searchParams.set('playlist', videoId);
+        }
+
+        return embed.toString();
+    } catch (error) {
+        return value;
+    }
+};
+
+export const getBunnyEmbedUrl = (media) => {
+    const obj = media && typeof media === 'object' ? media : { url: media };
+    const value = toString(obj.url).trim();
+
+    if (!value) {
+        return '';
+    }
+
+    try {
+        const parsed = new URL(value);
+
+        // Accept player.mediadelivery.net URLs directly
+        if (parsed.hostname === 'player.mediadelivery.net') {
+            // Strip existing playback params so we control them from the schema
+            ['autoplay', 'loop', 'muted', 'preload', 'responsive'].forEach(p => parsed.searchParams.delete(p));
+            parsed.searchParams.set('autoplay', obj.autoplay ? 'true' : 'false');
+            parsed.searchParams.set('loop', obj.loop ? 'true' : 'false');
+            parsed.searchParams.set('muted', obj.muted ? 'true' : 'false');
+            parsed.searchParams.set('preload', 'true');
+            parsed.searchParams.set('responsive', 'true');
+            return parsed.toString();
+        }
+
+        return value;
+    } catch (error) {
+        return value;
+    }
+};
+
+export const getFrameIoEmbedUrl = (url) => {
+    const value = toString(url).trim();
+
+    if (!value) {
+        return '';
+    }
+
+    try {
+        const parsed = new URL(value);
+
+        // Already a player embed URL — use as-is
+        if (parsed.hostname === 'player.frame.io') {
+            return value;
+        }
+
+        // Review / presentation share link: https://app.frame.io/reviews/{id}
+        if (parsed.hostname === 'app.frame.io' && parsed.pathname.startsWith('/reviews/')) {
+            return value;
+        }
+
+        // New Frame.io share links: https://next.frame.io/share/{id}
+        if (parsed.hostname === 'next.frame.io') {
+            return value;
+        }
+
+        // Short share link: https://f.io/{token}
+        if (parsed.hostname === 'f.io') {
+            return value;
+        }
+
+        return value;
+    } catch (error) {
+        return value;
+    }
+};
+
+export const blockTypeOptions = [
+    { type: 'FullWidth', label: 'Full Width' },
+    { type: 'TwoColumns', label: 'Two Columns' },
+];
+export const mediaTypeOptions = MEDIA_TYPES;