Générateur de portfolios PDF Figures Libres (app Nuxt autonome)

App Nuxt 3 + Nuxt UI qui lit les projets du CMS Grav et compose des portfolios
A3 paysage exportés en PDF (gabarit book_v3) : composeur WYSIWYG, templates
cover/toc/projet/grille/page libre, pipeline Playwright + Ghostscript, gel du
contenu à la génération, partage public opt-in.

Dépôt autonome : Dockerfile (base Playwright + Ghostscript + ffmpeg + rsync) inclus.

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

components/composer/BackgroundEditor.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+// Fond de page (spec §7.2) : blanc / teinté (aplat clair) / pleine couleur.
+import type { Background } from '~~/types'
+
+const model = defineModel<Background>({ required: true })
+
+const modes = [
+  { value: 'white', label: 'Blanc' },
+  { value: 'tint', label: 'Teinté' },
+  { value: 'color', label: 'Couleur' },
+] as const
+
+function setMode(mode: Background['mode']) {
+  if (mode === 'white') model.value = { mode: 'white' }
+  else if (mode === 'tint') model.value = { mode: 'tint', color: model.value.mode === 'tint' ? model.value.color : TINT_PRESETS[0] }
+  else model.value = { mode: 'color', color: model.value.mode === 'color' ? model.value.color : COLOR_PRESETS[1] }
+}
+
+const swatches = computed(() =>
+  model.value.mode === 'tint' ? TINT_PRESETS : model.value.mode === 'color' ? COLOR_PRESETS : [],
+)
+</script>
+
+<template>
+  <div class="space-y-2">
+    <p class="text-xs font-medium uppercase tracking-wide text-neutral-500">Fond de page</p>
+    <div class="flex gap-1">
+      <UButton
+        v-for="m in modes"
+        :key="m.value"
+        :label="m.label"
+        size="xs"
+        :variant="model.mode === m.value ? 'solid' : 'outline'"
+        color="neutral"
+        @click="setMode(m.value)"
+      />
+    </div>
+    <div v-if="swatches.length" class="flex flex-wrap gap-1.5 pt-1">
+      <button
+        v-for="c in swatches"
+        :key="c"
+        type="button"
+        class="size-7 rounded-full border transition-transform hover:scale-110"
+        :class="(model as any).color === c ? 'ring-2 ring-[var(--fl-ink)] ring-offset-1 dark:ring-white' : 'border-neutral-300 dark:border-neutral-600'"
+        :style="{ backgroundColor: c }"
+        :aria-label="c"
+        @click="model = { mode: model.mode as 'tint' | 'color', color: c }"
+      />
+    </div>
+  </div>
+</template>