From 45e97cc1c3a3564af830b55757c517b2a05393f9 Mon Sep 17 00:00:00 2001
From: Towsty <ianjmcarr@gmail.com>
Date: Sun, 4 Oct 2026 07:07:43 -0500
Subject: [PATCH] Add Prompt Builder sequence section order.

Copied scene text and the scene editor follow a persisted sectionOrder, with legacy saves keeping the default style/settings/set/characters/prompt order.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 pages/prompt-builder.vue                  | 1829 +++++++++++----------
 server/api/prompt-sequences.post.ts       |    2 +
 server/api/prompt-sequences/[id].patch.ts |    9 +-
 server/utils/promptSequences.ts           |   15 +
 tests/prompt-sequences.test.mjs           |   82 +
 utils/promptSequences.ts                  |   54 +-
 6 files changed, 1113 insertions(+), 878 deletions(-)

diff --git a/pages/prompt-builder.vue b/pages/prompt-builder.vue
index abeba0e..f5c2bd3 100644
--- a/pages/prompt-builder.vue
+++ b/pages/prompt-builder.vue
@@ -1,868 +1,961 @@
-<template>

-  <div class="min-h-dvh min-w-0">

-    <AppHeader subtitle="Prompt Builder" current="prompt-builder" />

-

-    <main class="mx-auto grid min-w-0 max-w-7xl gap-6 px-4 py-6 sm:px-6 lg:grid-cols-[minmax(0,1fr)_minmax(18rem,22rem)]">

-      <section class="glass min-w-0 max-w-full rounded-3xl p-5 sm:p-6 space-y-5">

-        <div class="flex flex-wrap items-start justify-between gap-3">

-          <div>

-            <h2 class="font-display text-2xl font-bold">Prompt Builder</h2>

-            <p class="mt-1 max-w-2xl text-sm text-zinc-400">

-              Build multi-image prompt sequences. Copy the preview into Generate with Batch on — scenes split on the double blank line.

-            </p>

-          </div>

-          <div class="flex flex-wrap items-center gap-2">

-            <button

-              type="button"

-              class="rounded-full bg-amber-400 px-4 min-h-11 py-2.5 text-sm font-semibold text-zinc-950 hover:bg-amber-300 disabled:cursor-not-allowed disabled:opacity-50"

-              @click="startNew"

-            >

-              New

-            </button>

-            <button

-              type="button"

-              class="rounded-full bg-amber-400 px-4 min-h-11 py-2.5 text-sm font-semibold text-zinc-950 hover:bg-amber-300 disabled:cursor-not-allowed disabled:opacity-50"

-              :disabled="busy || !name.trim()"

-              @click="save"

-            >

-              {{ busy === 'save' ? 'Saving…' : selectedId ? 'Save' : 'Save sequence' }}

-            </button>

-          </div>

-        </div>

-

-        <p v-if="error" class="rounded-2xl border border-red-400/30 bg-red-400/10 px-4 py-3 text-sm text-red-200">{{ error }}</p>

-        <p v-else-if="notice" class="rounded-2xl border border-amber-300/30 bg-amber-400/10 px-4 py-3 text-sm text-amber-100">{{ notice }}</p>

-

-        <label class="block text-sm">

-          <span class="mb-1 block font-medium text-zinc-300">Sequence name</span>

-          <input

-            v-model="name"

-            class="w-full rounded-xl border border-white/10 bg-zinc-950 px-3 py-2 text-sm outline-none ring-amber-300/40 placeholder:text-zinc-600 focus:ring-2"

-            maxlength="80"

-            placeholder="e.g. Badge set A"

-          >

-          <p class="mt-1 text-[11px] text-zinc-500">Save key only — never copied into the prompt text.</p>

-        </label>

-

-        <div class="space-y-3">

-          <div class="flex flex-wrap items-center justify-between gap-2">

-            <div>

-              <span class="text-sm font-medium text-zinc-300">Characters</span>

-              <p class="text-[11px] text-zinc-500">Sequence-wide. Toggle and outfit per scene below.</p>

-            </div>

-            <button

-              type="button"

-              class="rounded-full bg-amber-400 px-4 min-h-11 py-2.5 text-sm font-semibold text-zinc-950 hover:bg-amber-300 disabled:cursor-not-allowed disabled:opacity-50"

-              @click="addCharacter"

-            >

-              Add character

-            </button>

-          </div>

-          <div

-            v-for="(character, cIndex) in characters"

-            :key="character.id"

-            class="rounded-2xl border border-white/10 bg-zinc-950/40 p-3 space-y-3"

-          >

-            <div class="flex items-center justify-between gap-2">

-              <span class="text-[11px] uppercase tracking-wide text-zinc-500">Character {{ cIndex + 1 }}</span>

-              <div class="flex items-center gap-2">

-                <button type="button" class="rounded-full border border-amber-300/70 px-3 min-h-11 py-1.5 text-sm font-semibold text-amber-100 hover:border-amber-300 hover:bg-amber-400/10" @click="clearCharacter(cIndex)">Clear</button>

-                <button

-                  v-if="characters.length > 1"

-                  type="button"

-                  class="rounded-full border border-amber-300/70 px-3 min-h-11 py-2 text-sm font-semibold text-amber-100 hover:border-amber-300 hover:bg-amber-400/10"

-                  @click="removeCharacter(cIndex)"

-                >

-                  Remove

-                </button>

-              </div>

-            </div>

-            <input

-              v-model="character.name"

-              class="w-full rounded-xl border border-white/10 bg-zinc-950 px-3 py-2 text-sm outline-none ring-amber-300/40 placeholder:text-zinc-600 focus:ring-2"

-              maxlength="120"

-              placeholder="Name"

-            >

-            <textarea

-              v-model="character.description"

-              rows="2"

-              class="w-full rounded-xl border border-white/10 bg-zinc-950/70 px-3 py-2 text-sm outline-none ring-amber-300/40 placeholder:text-zinc-600 focus:ring-2"

-              placeholder="Description"

-            />

-            <div class="space-y-2 border-t border-white/5 pt-3">

-              <div class="flex flex-wrap items-center justify-between gap-2">

-                <span class="text-[11px] font-medium uppercase tracking-wide text-zinc-500">Outfits</span>

-                <button

-                  type="button"

-                  class="rounded-full bg-amber-400 px-4 min-h-11 py-2.5 text-sm font-semibold text-zinc-950 hover:bg-amber-300 disabled:cursor-not-allowed disabled:opacity-50"

-                  @click="addOutfit(cIndex)"

-                >

-                  Add outfit

-                </button>

-              </div>

-              <p v-if="!character.outfits.length" class="text-[11px] text-zinc-600">No outfits yet.</p>

-              <div

-                v-for="(outfit, oIndex) in character.outfits"

-                :key="outfit.id"

-                class="rounded-xl border border-white/5 bg-zinc-950/50 p-2 space-y-2"

-              >

-                <div class="flex items-center justify-between gap-2">

-                  <span class="text-[11px] text-zinc-500">Outfit {{ oIndex + 1 }}</span>

-                  <button type="button" class="rounded-full border border-amber-300/70 px-3 min-h-11 py-2 text-sm font-semibold text-amber-100 hover:border-amber-300 hover:bg-amber-400/10" @click="removeOutfit(cIndex, oIndex)">Remove</button>

-                </div>

-                <input

-                  v-model="outfit.name"

-                  class="w-full rounded-lg border border-white/10 bg-zinc-950 px-2.5 py-1.5 text-sm outline-none ring-amber-300/40 placeholder:text-zinc-600 focus:ring-2"

-                  maxlength="120"

-                  placeholder="Outfit name"

-                >

-                <textarea

-                  v-model="outfit.description"

-                  rows="2"

-                  class="w-full rounded-lg border border-white/10 bg-zinc-950/70 px-2.5 py-1.5 text-sm outline-none ring-amber-300/40 placeholder:text-zinc-600 focus:ring-2"

-                  placeholder="What they are wearing"

-                />

-              </div>

-            </div>

-          </div>

-        </div>

-

-        <div class="space-y-3">

-          <div class="flex flex-wrap items-center justify-between gap-2">

-            <div>

-              <span class="text-sm font-medium text-zinc-300">Sets</span>

-              <p class="text-[11px] text-zinc-500">Sequence-wide locations and props. Toggle and framing per scene below.</p>

-            </div>

-            <button

-              type="button"

-              class="rounded-full bg-amber-400 px-4 min-h-11 py-2.5 text-sm font-semibold text-zinc-950 hover:bg-amber-300 disabled:cursor-not-allowed disabled:opacity-50"

-              @click="addSet"

-            >

-              Add set

-            </button>

-          </div>

-          <p v-if="!sets.length" class="text-[11px] text-zinc-600">No sets yet.</p>

-          <div

-            v-for="(set, sIndex) in sets"

-            :key="set.id"

-            class="rounded-2xl border border-white/10 bg-zinc-950/40 p-3 space-y-3"

-          >

-            <div class="flex items-center justify-between gap-2">

-              <span class="text-[11px] uppercase tracking-wide text-zinc-500">Set {{ sIndex + 1 }}</span>

-              <div class="flex items-center gap-2">

-                <button type="button" class="rounded-full border border-amber-300/70 px-3 min-h-11 py-1.5 text-sm font-semibold text-amber-100 hover:border-amber-300 hover:bg-amber-400/10" @click="clearSet(sIndex)">Clear</button>

-                <button

-                  type="button"

-                  class="rounded-full border border-amber-300/70 px-3 min-h-11 py-2 text-sm font-semibold text-amber-100 hover:border-amber-300 hover:bg-amber-400/10"

-                  @click="removeSet(sIndex)"

-                >

-                  Remove

-                </button>

-              </div>

-            </div>

-            <label class="block text-sm">

-              <input

-                v-model="set.name"

-                class="w-full rounded-xl border border-white/10 bg-zinc-950 px-3 py-2 text-sm outline-none ring-amber-300/40 placeholder:text-zinc-600 focus:ring-2"

-                maxlength="120"

-                placeholder="Name"

-              >

-              <p class="mt-1 text-[11px] text-zinc-500">Label only — not copied into the prompt.</p>

-            </label>

-            <div class="space-y-2 border-t border-white/5 pt-3">

-              <div class="flex flex-wrap items-center justify-between gap-2">

-                <span class="text-[11px] font-medium uppercase tracking-wide text-zinc-500">Framings</span>

-                <button

-                  type="button"

-                  class="rounded-full bg-amber-400 px-4 min-h-11 py-2.5 text-sm font-semibold text-zinc-950 hover:bg-amber-300 disabled:cursor-not-allowed disabled:opacity-50"

-                  @click="addFraming(sIndex)"

-                >

-                  Add framing

-                </button>

-              </div>

-              <div

-                v-for="(framing, fIndex) in set.framings"

-                :key="framing.id"

-                class="rounded-xl border border-white/5 bg-zinc-950/50 p-2 space-y-2"

-              >

-                <div class="flex items-center justify-between gap-2">

-                  <span class="text-[11px] text-zinc-500">Framing {{ fIndex + 1 }}</span>

-                  <div class="flex items-center gap-2">

-                    <button type="button" class="rounded-full border border-amber-300/70 px-3 min-h-11 py-1.5 text-sm font-semibold text-amber-100 hover:border-amber-300 hover:bg-amber-400/10" @click="clearFraming(sIndex, fIndex)">Clear</button>

-                    <button type="button" class="rounded-full border border-amber-300/70 px-3 min-h-11 py-2 text-sm font-semibold text-amber-100 hover:border-amber-300 hover:bg-amber-400/10" @click="removeFraming(sIndex, fIndex)">Remove</button>

-                  </div>

-                </div>

-                <input

-                  v-model="framing.label"

-                  class="w-full rounded-lg border border-white/10 bg-zinc-950 px-2.5 py-1.5 text-sm outline-none ring-amber-300/40 placeholder:text-zinc-600 focus:ring-2"

-                  maxlength="120"

-                  :placeholder="framingLabelPlaceholder(fIndex)"

-                >

-                <textarea

-                  v-model="framing.text"

-                  rows="2"

-                  class="w-full rounded-lg border border-white/10 bg-zinc-950/70 px-2.5 py-1.5 text-sm outline-none ring-amber-300/40 placeholder:text-zinc-600 focus:ring-2"

-                  placeholder="Place / location text copied into the prompt"

-                />

-              </div>

-            </div>

-          </div>

-        </div>

-

-        <div class="flex flex-wrap items-center gap-2 border-b border-white/10 pb-2">

-          <button

-            v-for="(scene, index) in scenes"

-            :key="scene.id"

-            type="button"

-            class="rounded-full px-3 py-1.5 text-xs transition"

-            :class="index === activeIndex

-              ? 'min-h-11 bg-amber-400/15 px-3 py-2 text-sm font-semibold text-amber-100 ring-1 ring-amber-300/40'

-              : 'min-h-11 border border-white/25 px-3 py-2 text-sm font-semibold text-zinc-300 hover:bg-white/5 hover:text-zinc-100'"

-            @click="activeIndex = index"

-          >

-            {{ scene.title || `Scene ${index + 1}` }}

-          </button>

-          <button

-            type="button"

-            class="rounded-full bg-amber-400 px-4 min-h-11 py-2.5 text-sm font-semibold text-zinc-950 hover:bg-amber-300 disabled:cursor-not-allowed disabled:opacity-50"

-            @click="addNextScene"

-          >

-            Next scene

-          </button>

-          <button

-            type="button"

-            class="rounded-full border border-amber-300/70 px-4 min-h-11 py-2.5 text-sm font-semibold text-amber-100 hover:border-amber-300 hover:bg-amber-400/10 disabled:cursor-not-allowed disabled:opacity-40"

-            title="Move scene earlier"

-            :disabled="activeIndex <= 0"

-            @click="moveScene(activeIndex, -1)"

-          >

-            ←

-          </button>

-          <button

-            type="button"

-            class="rounded-full border border-amber-300/70 px-4 min-h-11 py-2.5 text-sm font-semibold text-amber-100 hover:border-amber-300 hover:bg-amber-400/10 disabled:cursor-not-allowed disabled:opacity-40"

-            title="Move scene later"

-            :disabled="activeIndex >= scenes.length - 1"

-            @click="moveScene(activeIndex, 1)"

-          >

-            →

-          </button>

-          <button

-            type="button"

-            class="rounded-full border border-amber-300/70 px-4 min-h-11 py-2.5 text-sm font-semibold text-amber-100 hover:border-amber-300 hover:bg-amber-400/10 disabled:cursor-not-allowed disabled:opacity-40"

-            :disabled="scenes.length <= 1"

-            @click="deleteScene(activeIndex)"

-          >

-            Delete scene

-          </button>

-        </div>

-

-        <div v-if="activeScene" class="space-y-4">

-          <label class="block text-sm">

-            <span class="mb-1 flex items-center justify-between gap-2 font-medium text-zinc-300">

-              Scene tab name

-              <span class="text-[11px] font-normal text-zinc-500">optional</span>

-            </span>

-            <input

-              v-model="activeScene.title"

-              class="w-full rounded-xl border border-white/10 bg-zinc-950 px-3 py-2 text-sm outline-none ring-amber-300/40 placeholder:text-zinc-600 focus:ring-2"

-              maxlength="60"

-              :placeholder="`Scene ${activeIndex + 1}`"

-            >

-          </label>

-

-          <div class="space-y-1">

-            <div class="flex items-center justify-between gap-2">

-              <span class="text-sm font-medium text-zinc-300">Style</span>

-              <button type="button" class="rounded-full border border-amber-300/70 px-3 min-h-11 py-1.5 text-sm font-semibold text-amber-100 hover:border-amber-300 hover:bg-amber-400/10" @click="activeScene.style = ''">Clear</button>

-            </div>

-            <textarea

-              v-model="activeScene.style"

-              rows="3"

-              class="w-full rounded-2xl border border-white/10 bg-zinc-950/70 px-3 py-2 text-sm outline-none ring-amber-300/40 placeholder:text-zinc-600 focus:ring-2"

-              placeholder="Visual style for this image"

-            />

-          </div>

-

-          <div class="space-y-1">

-            <div class="flex items-center justify-between gap-2">

-              <span class="text-sm font-medium text-zinc-300">Settings</span>

-              <button type="button" class="rounded-full border border-amber-300/70 px-3 min-h-11 py-1.5 text-sm font-semibold text-amber-100 hover:border-amber-300 hover:bg-amber-400/10" @click="activeScene.settings = ''">Clear</button>

-            </div>

-            <textarea

-              v-model="activeScene.settings"

-              rows="3"

-              class="w-full rounded-2xl border border-white/10 bg-zinc-950/70 px-3 py-2 text-sm outline-none ring-amber-300/40 placeholder:text-zinc-600 focus:ring-2"

-              placeholder="Lighting, framing, technical notes"

-            />

-          </div>

-

-          <div v-if="sets.length" class="space-y-3">

-            <div>

-              <span class="text-sm font-medium text-zinc-300">Sets in this scene</span>

-              <p class="text-[11px] text-zinc-500">Toggle which set blocks appear. Pick a framing for each on set.</p>

-            </div>

-            <div

-              v-for="set in sets"

-              :key="'scene-set-'+set.id"

-              class="rounded-2xl border border-white/10 bg-zinc-950/40 px-3 py-2.5 space-y-2"

-            >

-              <label class="flex items-center justify-between gap-3 text-sm text-zinc-200">

-                <span class="min-w-0 truncate">{{ set.name || 'Unnamed set' }}</span>

-                <input

-                  type="checkbox"

-                  class="accent-amber-400"

-                  :checked="isSetOn(set.id)"

-                  @change="setSetOn(set.id, ($event.target as HTMLInputElement).checked)"

-                >

-              </label>

-              <label v-if="isSetOn(set.id)" class="block text-[11px] text-zinc-500">

-                Framing

-                <select

-                  class="mt-1 w-full rounded-xl border border-white/10 bg-zinc-950 px-3 py-2 text-sm text-zinc-200 outline-none ring-amber-300/40 focus:ring-2"

-                  :value="activeSetFramingId(set.id) || ''"

-                  @change="setSetFraming(set.id, ($event.target as HTMLSelectElement).value)"

-                >

-                  <option value="">None</option>

-                  <option v-for="framing in set.framings" :key="framing.id" :value="framing.id">

-                    {{ framing.label || 'Untitled framing' }}

-                  </option>

-                </select>

-              </label>

-            </div>

-          </div>

-

-          <div class="space-y-3">

-            <div>

-              <span class="text-sm font-medium text-zinc-300">In this scene</span>

-              <p class="text-[11px] text-zinc-500">Toggle who appears. Pick an outfit for each on character.</p>

-            </div>

-            <div

-              v-for="character in characters"

-              :key="'scene-'+character.id"

-              class="rounded-2xl border border-white/10 bg-zinc-950/40 px-3 py-2.5 space-y-2"

-            >

-              <label class="flex items-center justify-between gap-3 text-sm text-zinc-200">

-                <span class="min-w-0 truncate">{{ character.name || 'Unnamed character' }}</span>

-                <input

-                  type="checkbox"

-                  class="accent-amber-400"

-                  :checked="isCharacterOn(character.id)"

-                  @change="setCharacterOn(character.id, ($event.target as HTMLInputElement).checked)"

-                >

-              </label>

-              <label v-if="isCharacterOn(character.id)" class="block text-[11px] text-zinc-500">

-                Outfit

-                <select

-                  class="mt-1 w-full rounded-xl border border-white/10 bg-zinc-950 px-3 py-2 text-sm text-zinc-200 outline-none ring-amber-300/40 focus:ring-2"

-                  :value="activeOutfitId(character.id) || ''"

-                  @change="setCharacterOutfit(character.id, ($event.target as HTMLSelectElement).value)"

-                >

-                  <option value="">None</option>

-                  <option v-for="outfit in character.outfits" :key="outfit.id" :value="outfit.id">

-                    {{ outfit.name || 'Untitled outfit' }}

-                  </option>

-                </select>

-              </label>

-            </div>

-          </div>

-

-          <div class="space-y-1">

-            <div class="flex items-center justify-between gap-2">

-              <span class="text-sm font-medium text-zinc-300">Prompt</span>

-              <button type="button" class="rounded-full border border-amber-300/70 px-3 min-h-11 py-1.5 text-sm font-semibold text-amber-100 hover:border-amber-300 hover:bg-amber-400/10" @click="activeScene.prompt = ''">Clear</button>

-            </div>

-            <textarea

-              v-model="activeScene.prompt"

-              rows="5"

-              class="w-full rounded-2xl border border-white/10 bg-zinc-950/70 px-3 py-2 text-sm outline-none ring-amber-300/40 placeholder:text-zinc-600 focus:ring-2"

-              placeholder="What happens in this image"

-            />

-          </div>

-        </div>

-

-        <section class="rounded-2xl border border-white/10 bg-zinc-950/30">

-          <div class="flex flex-wrap items-center justify-between gap-2 border-b border-white/5 px-4 py-3">

-            <div>

-              <h3 class="text-sm font-medium text-zinc-200">Preview</h3>

-              <p class="text-[11px] text-zinc-500">Assembled text ready to copy. Sequence name is omitted.</p>

-            </div>

-            <div class="flex items-center gap-2">

-              <button

-                type="button"

-                class="rounded-full bg-amber-400 px-4 min-h-11 py-2.5 text-sm font-semibold text-zinc-950 hover:bg-amber-300 disabled:cursor-not-allowed disabled:opacity-50"

-                :disabled="!activeSceneText"

-                @click="copyScene"

-              >

-                {{ copiedScene ? 'Scene copied' : 'Copy scene' }}

-              </button>

-              <button

-                type="button"

-                class="rounded-full bg-amber-400 px-4 min-h-11 py-2.5 text-sm font-semibold text-zinc-950 hover:bg-amber-300 disabled:cursor-not-allowed disabled:opacity-50"

-                :disabled="!previewText"

-                @click="copyPreview"

-              >

-                {{ copied ? 'Copied' : 'Copy' }}

-              </button>

-              <button

-                type="button"

-                class="rounded-full border border-amber-300/70 px-4 min-h-11 py-2.5 text-sm font-semibold text-amber-100 hover:border-amber-300 hover:bg-amber-400/10 disabled:cursor-not-allowed disabled:opacity-40"

-                @click="previewOpen = !previewOpen"

-              >

-                {{ previewOpen ? 'Hide' : 'Show' }}

-              </button>

-            </div>

-          </div>

-          <pre

-            v-if="previewOpen"

-            class="max-h-[min(28rem,50vh)] overflow-auto whitespace-pre-wrap px-4 py-3 text-xs text-zinc-300 [overflow-wrap:anywhere]"

-          >{{ previewText || 'Fill a scene to see the assembled prompt.' }}</pre>

-        </section>

-      </section>

-

-      <aside class="min-w-0 space-y-4">

-        <section class="glass rounded-3xl p-5 sm:p-6">

-          <h3 class="font-display text-lg font-bold">Saved sequences</h3>

-          <p class="mt-1 text-xs text-zinc-500">Stored with your other library data. Open one to edit.</p>

-          <p v-if="!sequences.length" class="mt-4 rounded-2xl border border-white/5 bg-zinc-950/40 px-4 py-6 text-center text-sm text-zinc-500">

-            Nothing saved yet.

-          </p>

-          <div v-else class="mt-4 space-y-2">

-            <button

-              v-for="sequence in sequences"

-              :key="sequence.id"

-              type="button"

-              class="w-full rounded-2xl border p-3 text-left transition"

-              :class="sequence.id === selectedId

-                ? 'border-amber-300/30 bg-amber-400/5'

-                : 'border-white/5 bg-zinc-950/40 hover:border-white/15'"

-              @click="select(sequence)"

-            >

-              <div class="flex items-start justify-between gap-2">

-                <div class="min-w-0">

-                  <p class="truncate text-sm font-medium text-zinc-100">{{ sequence.name }}</p>

-                  <p class="mt-0.5 text-[11px] text-zinc-500">

-                    {{ sequence.scenes?.length || 0 }} scene{{ (sequence.scenes?.length || 0) === 1 ? '' : 's' }}

-                    · {{ sequence.characters?.length || 0 }} character{{ (sequence.characters?.length || 0) === 1 ? '' : 's' }}

-                  </p>

-                </div>

-                <button

-                  type="button"

-                  class="rounded-full border border-amber-300/70 px-3 min-h-11 py-2 text-sm font-semibold text-amber-100 hover:border-amber-300 hover:bg-amber-400/10"

-                  @click.stop="remove(sequence)"

-                >

-                  Delete

-                </button>

-              </div>

-            </button>

-          </div>

-        </section>

-      </aside>

-    </main>

-  </div>

-</template>

-

-<script setup lang="ts">

-import type {

-  PromptSequence,

-  PromptSequenceCharacter,

-  PromptSequenceScene,

-  PromptSequenceSet

-} from '~/utils/promptSequences'

-import {

-  PROMPT_SEQUENCE_FRAMING_SUGGESTIONS,

-  assembleSceneText,

-  assembleSequenceText,

-  cloneSceneForNext,

-  emptyCharacter,

-  emptyFraming,

-  emptyOutfit,

-  emptyScene,

-  emptySet,

-  ensureSceneStatesForCharacters,

-  ensureSceneStatesForSets,

-  normalizePromptSequence

-} from '~/utils/promptSequences'

-

-useHead({ title: 'Prompt Builder' })

-

-const sequences = ref<PromptSequence[]>([])

-const selectedId = ref('')

-const name = ref('')

-const characters = ref<PromptSequenceCharacter[]>([emptyCharacter()])

-const sets = ref<PromptSequenceSet[]>([])

-const scenes = ref<PromptSequenceScene[]>([emptyScene(1, characters.value, sets.value)])

-const activeIndex = ref(0)

-const previewOpen = ref(true)

-const busy = ref('')

-const error = ref('')

-const notice = ref('')

-const copied = ref(false)

-const copiedScene = ref(false)

-let copyTimer: ReturnType<typeof setTimeout> | null = null

-let copySceneTimer: ReturnType<typeof setTimeout> | null = null

-

-const activeScene = computed(() => scenes.value[activeIndex.value] || null)

-const previewText = computed(() => assembleSequenceText({

-  characters: characters.value,

-  sets: sets.value,

-  scenes: scenes.value

-}))

-const activeSceneText = computed(() => {

-  if (!activeScene.value) return ''

-  return assembleSceneText(activeScene.value, characters.value, sets.value)

-})

-

-function framingLabelPlaceholder(index: number) {

-  const suggestion = PROMPT_SEQUENCE_FRAMING_SUGGESTIONS[index % PROMPT_SEQUENCE_FRAMING_SUGGESTIONS.length]

-  return suggestion || 'wide / medium / narrow'

-}

-

-function startNew() {

-  selectedId.value = ''

-  name.value = ''

-  characters.value = [emptyCharacter()]

-  sets.value = []

-  scenes.value = [emptyScene(1, characters.value, sets.value)]

-  activeIndex.value = 0

-  error.value = ''

-  notice.value = ''

-}

-

-function select(sequence: PromptSequence) {

-  const normalized = normalizePromptSequence(sequence) || sequence

-  selectedId.value = normalized.id

-  name.value = normalized.name

-  characters.value = (normalized.characters?.length ? normalized.characters : [emptyCharacter()]).map(character => ({

-    ...emptyCharacter(),

-    ...character,

-    outfits: (character.outfits || []).map(outfit => ({ ...emptyOutfit(), ...outfit }))

-  }))

-  sets.value = (normalized.sets || []).map(set => ({

-    ...emptySet(),

-    ...set,

-    framings: (set.framings?.length ? set.framings : [emptyFraming()]).map(framing => ({ ...emptyFraming(), ...framing }))

-  }))

-  scenes.value = (normalized.scenes?.length ? normalized.scenes : [emptyScene(1, characters.value, sets.value)]).map((scene, index) => ({

-    ...emptyScene(index + 1, characters.value, sets.value),

-    ...scene,

-    setStates: (scene.setStates || []).map(state => ({

-      setId: state.setId,

-      on: state.on !== false,

-      framingId: state.framingId || null

-    })),

-    characterStates: (scene.characterStates || []).map(state => ({

-      characterId: state.characterId,

-      on: state.on !== false,

-      outfitId: state.outfitId || null

-    }))

-  }))

-  ensureSceneStatesForSets(scenes.value, sets.value)

-  ensureSceneStatesForCharacters(scenes.value, characters.value)

-  activeIndex.value = 0

-  error.value = ''

-  notice.value = ''

-}

-

-function addNextScene() {

-  const previous = scenes.value[scenes.value.length - 1] || emptyScene(1, characters.value, sets.value)

-  const next = cloneSceneForNext(previous, scenes.value.length + 1)

-  scenes.value.push(next)

-  activeIndex.value = scenes.value.length - 1

-}

-

-function moveScene(index: number, delta: number) {

-  const newIndex = index + delta

-  if (newIndex < 0 || newIndex >= scenes.value.length) return

-  const [scene] = scenes.value.splice(index, 1)

-  if (!scene) return

-  scenes.value.splice(newIndex, 0, scene)

-  if (activeIndex.value === index) {

-    activeIndex.value = newIndex

-  } else if (index < activeIndex.value && newIndex >= activeIndex.value) {

-    activeIndex.value--

-  } else if (index > activeIndex.value && newIndex <= activeIndex.value) {

-    activeIndex.value++

-  }

-}

-

-function deleteScene(index: number) {

-  if (scenes.value.length <= 1) return

-  scenes.value.splice(index, 1)

-  if (activeIndex.value >= scenes.value.length) {

-    activeIndex.value = scenes.value.length - 1

-  } else if (activeIndex.value > index) {

-    activeIndex.value--

-  }

-}

-

-function addCharacter() {

-  const character = emptyCharacter()

-  characters.value.push(character)

-  ensureSceneStatesForCharacters(scenes.value, characters.value, {

-    newCharacterId: character.id,

-    turnOnSceneIndex: activeIndex.value

-  })

-}

-

-function clearCharacter(index: number) {

-  const character = characters.value[index]

-  if (!character) return

-  character.name = ''

-  character.description = ''

-  character.outfits = []

-  for (const scene of scenes.value) {

-    const state = scene.characterStates.find(item => item.characterId === character.id)

-    if (state) state.outfitId = null

-  }

-}

-

-function removeCharacter(index: number) {

-  if (characters.value.length <= 1) return

-  const [removed] = characters.value.splice(index, 1)

-  if (!removed) return

-  for (const scene of scenes.value) {

-    scene.characterStates = scene.characterStates.filter(state => state.characterId !== removed.id)

-  }

-}

-

-function addOutfit(characterIndex: number) {

-  const character = characters.value[characterIndex]

-  if (!character) return

-  character.outfits.push(emptyOutfit())

-}

-

-function removeOutfit(characterIndex: number, outfitIndex: number) {

-  const character = characters.value[characterIndex]

-  if (!character) return

-  const [removed] = character.outfits.splice(outfitIndex, 1)

-  if (!removed) return

-  for (const scene of scenes.value) {

-    const state = scene.characterStates.find(item => item.characterId === character.id)

-    if (state?.outfitId === removed.id) state.outfitId = null

-  }

-}

-

-function addSet() {

-  const set = emptySet()

-  sets.value.push(set)

-  ensureSceneStatesForSets(scenes.value, sets.value, {

-    newSetId: set.id,

-    turnOnSceneIndex: activeIndex.value

-  })

-}

-

-function clearSet(index: number) {

-  const set = sets.value[index]

-  if (!set) return

-  set.name = ''

-  set.framings = [emptyFraming()]

-  for (const scene of scenes.value) {

-    const state = scene.setStates.find(item => item.setId === set.id)

-    if (state) state.framingId = null

-  }

-}

-

-function removeSet(index: number) {

-  const [removed] = sets.value.splice(index, 1)

-  if (!removed) return

-  for (const scene of scenes.value) {

-    scene.setStates = (scene.setStates || []).filter(state => state.setId !== removed.id)

-  }

-}

-

-function addFraming(setIndex: number) {

-  const set = sets.value[setIndex]

-  if (!set) return

-  set.framings.push(emptyFraming())

-}

-

-function removeFraming(setIndex: number, framingIndex: number) {

-  const set = sets.value[setIndex]

-  if (!set) return

-  const [removed] = set.framings.splice(framingIndex, 1)

-  if (!removed) return

-  for (const scene of scenes.value) {

-    const state = scene.setStates.find(item => item.setId === set.id)

-    if (state?.framingId === removed.id) state.framingId = null

-  }

-}

-

-function clearFraming(setIndex: number, framingIndex: number) {

-  const framing = sets.value[setIndex]?.framings[framingIndex]

-  if (!framing) return

-  framing.label = ''

-  framing.text = ''

-}

-

-function sceneSetState(setId: string) {

-  return activeScene.value?.setStates?.find(state => state.setId === setId)

-}

-

-function isSetOn(setId: string) {

-  const state = sceneSetState(setId)

-  return state ? !!state.on : true

-}

-

-function setSetOn(setId: string, on: boolean) {

-  const state = sceneSetState(setId)

-  if (!state) {

-    activeScene.value?.setStates.push({ setId, on, framingId: null })

-    return

-  }

-  state.on = on

-}

-

-function activeSetFramingId(setId: string) {

-  return sceneSetState(setId)?.framingId || ''

-}

-

-function setSetFraming(setId: string, framingId: string) {

-  const state = sceneSetState(setId)

-  if (!state) {

-    activeScene.value?.setStates.push({

-      setId,

-      on: true,

-      framingId: framingId || null

-    })

-    return

-  }

-  state.framingId = framingId || null

-}

-

-function sceneState(characterId: string) {

-  return activeScene.value?.characterStates.find(state => state.characterId === characterId)

-}

-

-function isCharacterOn(characterId: string) {

-  const state = sceneState(characterId)

-  return state ? !!state.on : true

-}

-

-function setCharacterOn(characterId: string, on: boolean) {

-  const state = sceneState(characterId)

-  if (!state) {

-    activeScene.value?.characterStates.push({ characterId, on, outfitId: null })

-    return

-  }

-  state.on = on

-}

-

-function activeOutfitId(characterId: string) {

-  return sceneState(characterId)?.outfitId || ''

-}

-

-function setCharacterOutfit(characterId: string, outfitId: string) {

-  const state = sceneState(characterId)

-  if (!state) {

-    activeScene.value?.characterStates.push({

-      characterId,

-      on: true,

-      outfitId: outfitId || null

-    })

-    return

-  }

-  state.outfitId = outfitId || null

-}

-

-async function loadSequences() {

-  const listed = await $fetch<{ sequences?: PromptSequence[] }>('/api/prompt-sequences')

-  sequences.value = listed.sequences || []

-}

-

-async function save() {

-  const nextName = name.value.trim()

-  if (!nextName) return

-  const existingByName = sequences.value.find(item => item.name.toLowerCase() === nextName.toLowerCase())

-  const updateExisting = Boolean(selectedId.value) && (!existingByName || existingByName.id === selectedId.value)

-  if (existingByName && existingByName.id !== selectedId.value && !window.confirm(`Overwrite sequence “${existingByName.name}”?`)) return

-  busy.value = 'save'

-  error.value = ''

-  notice.value = ''

-  const payload = {

-    name: nextName,

-    characters: characters.value,

-    sets: sets.value,

-    scenes: scenes.value

-  }

-  try {

-    if (updateExisting && selectedId.value) {

-      const saved = await $fetch<{ sequence: PromptSequence; sequences: PromptSequence[] }>(`/api/prompt-sequences/${selectedId.value}`, {

-        method: 'PATCH',

-        body: payload

-      })

-      sequences.value = saved.sequences

-      select(saved.sequence)

-      notice.value = `Saved “${saved.sequence.name}”.`

-    } else {

-      const saved = await $fetch<{ sequence: PromptSequence; sequences: PromptSequence[] }>('/api/prompt-sequences', {

-        method: 'POST',

-        body: { ...payload, overwrite: Boolean(existingByName) }

-      })

-      sequences.value = saved.sequences

-      select(saved.sequence)

-      notice.value = existingByName ? `Overwrote “${saved.sequence.name}”.` : `Saved “${saved.sequence.name}”.`

-    }

-  } catch (err: any) {

-    error.value = err?.data?.statusMessage || err?.statusMessage || err?.message || 'Could not save that sequence'

-  } finally {

-    busy.value = ''

-  }

-}

-

-async function remove(sequence: PromptSequence) {

-  if (!window.confirm(`Delete sequence “${sequence.name}”?`)) return

-  busy.value = 'delete'

-  error.value = ''

-  notice.value = ''

-  try {

-    const saved = await $fetch<{ sequences: PromptSequence[] }>(`/api/prompt-sequences/${sequence.id}`, { method: 'DELETE' })

-    sequences.value = saved.sequences

-    if (selectedId.value === sequence.id) startNew()

-    notice.value = `Deleted “${sequence.name}”.`

-  } catch (err: any) {

-    error.value = err?.data?.statusMessage || err?.statusMessage || err?.message || 'Could not delete that sequence'

-  } finally {

-    busy.value = ''

-  }

-}

-

-async function writeClipboard(text: string, kind: 'all' | 'scene') {

-  if (!text) return

-  try {

-    await navigator.clipboard.writeText(text)

-    if (kind === 'scene') {

-      copiedScene.value = true

-      if (copySceneTimer) clearTimeout(copySceneTimer)

-      copySceneTimer = setTimeout(() => { copiedScene.value = false }, 1500)

-    } else {

-      copied.value = true

-      if (copyTimer) clearTimeout(copyTimer)

-      copyTimer = setTimeout(() => { copied.value = false }, 1500)

-    }

-  } catch {

-    error.value = 'Could not copy to the clipboard'

-  }

-}

-

-async function copyPreview() {

-  await writeClipboard(previewText.value, 'all')

-}

-

-async function copyScene() {

-  await writeClipboard(activeSceneText.value, 'scene')

-}

-

-onMounted(async () => {

-  try {

-    await loadSequences()

-  } catch (err: any) {

-    error.value = err?.data?.statusMessage || err?.message || 'Could not load saved sequences'

-  }

-})

-

-onBeforeUnmount(() => {

-  if (copyTimer) clearTimeout(copyTimer)

-  if (copySceneTimer) clearTimeout(copySceneTimer)

-})

-</script>

+<template>
+  <div class="min-h-dvh min-w-0">
+    <AppHeader subtitle="Prompt Builder" current="prompt-builder" />
+
+    <main class="mx-auto grid min-w-0 max-w-7xl gap-6 px-4 py-6 sm:px-6 lg:grid-cols-[minmax(0,1fr)_minmax(18rem,22rem)]">
+      <section class="glass min-w-0 max-w-full rounded-3xl p-5 sm:p-6 space-y-5">
+        <div class="flex flex-wrap items-start justify-between gap-3">
+          <div>
+            <h2 class="font-display text-2xl font-bold">Prompt Builder</h2>
+            <p class="mt-1 max-w-2xl text-sm text-zinc-400">
+              Build multi-image prompt sequences. Copy the preview into Generate with Batch on — scenes split on the double blank line.
+            </p>
+          </div>
+          <div class="flex flex-wrap items-center gap-2">
+            <button
+              type="button"
+              class="rounded-full bg-amber-400 px-4 min-h-11 py-2.5 text-sm font-semibold text-zinc-950 hover:bg-amber-300 disabled:cursor-not-allowed disabled:opacity-50"
+              @click="startNew"
+            >
+              New
+            </button>
+            <button
+              type="button"
+              class="rounded-full bg-amber-400 px-4 min-h-11 py-2.5 text-sm font-semibold text-zinc-950 hover:bg-amber-300 disabled:cursor-not-allowed disabled:opacity-50"
+              :disabled="busy || !name.trim()"
+              @click="save"
+            >
+              {{ busy === 'save' ? 'Saving…' : selectedId ? 'Save' : 'Save sequence' }}
+            </button>
+          </div>
+        </div>
+
+        <p v-if="error" class="rounded-2xl border border-red-400/30 bg-red-400/10 px-4 py-3 text-sm text-red-200">{{ error }}</p>
+        <p v-else-if="notice" class="rounded-2xl border border-amber-300/30 bg-amber-400/10 px-4 py-3 text-sm text-amber-100">{{ notice }}</p>
+
+        <label class="block text-sm">
+          <span class="mb-1 block font-medium text-zinc-300">Sequence name</span>
+          <input
+            v-model="name"
+            class="w-full rounded-xl border border-white/10 bg-zinc-950 px-3 py-2 text-sm outline-none ring-amber-300/40 placeholder:text-zinc-600 focus:ring-2"
+            maxlength="80"
+            placeholder="e.g. Badge set A"
+          >
+          <p class="mt-1 text-[11px] text-zinc-500">Save key only — never copied into the prompt text.</p>
+        </label>
+
+        <div class="space-y-3">
+          <div>
+            <span class="text-sm font-medium text-zinc-300">Prompt order</span>
+            <p class="text-[11px] text-zinc-500">Drag to reorder, or use the arrows. Copied text and the scene editor follow this order.</p>
+          </div>
+          <div class="space-y-2">
+            <div
+              v-for="(key, index) in sectionOrder"
+              :key="key"
+              class="flex items-center gap-2 rounded-2xl border border-white/10 bg-zinc-950/40 px-3 py-2"
+              draggable="true"
+              @dragstart="onSectionDragStart(index, $event)"
+              @dragover.prevent="onSectionDragOver($event)"
+              @drop.prevent="onSectionDrop(index)"
+            >
+              <span class="cursor-grab select-none text-zinc-500 active:cursor-grabbing" title="Drag to reorder">⠿</span>
+              <span class="min-w-0 flex-1 text-sm text-zinc-200">{{ sectionLabel(key) }}</span>
+              <button
+                type="button"
+                class="rounded-full border border-amber-300/70 px-3 min-h-11 py-1.5 text-sm font-semibold text-amber-100 hover:border-amber-300 hover:bg-amber-400/10 disabled:cursor-not-allowed disabled:opacity-40"
+                title="Move up"
+                :disabled="index === 0"
+                @click="moveSection(index, -1)"
+              >
+                ↑
+              </button>
+              <button
+                type="button"
+                class="rounded-full border border-amber-300/70 px-3 min-h-11 py-1.5 text-sm font-semibold text-amber-100 hover:border-amber-300 hover:bg-amber-400/10 disabled:cursor-not-allowed disabled:opacity-40"
+                title="Move down"
+                :disabled="index >= sectionOrder.length - 1"
+                @click="moveSection(index, 1)"
+              >
+                ↓
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <div class="space-y-3">
+          <div class="flex flex-wrap items-center justify-between gap-2">
+            <div>
+              <span class="text-sm font-medium text-zinc-300">Characters</span>
+              <p class="text-[11px] text-zinc-500">Sequence-wide. Toggle and outfit per scene below.</p>
+            </div>
+            <button
+              type="button"
+              class="rounded-full bg-amber-400 px-4 min-h-11 py-2.5 text-sm font-semibold text-zinc-950 hover:bg-amber-300 disabled:cursor-not-allowed disabled:opacity-50"
+              @click="addCharacter"
+            >
+              Add character
+            </button>
+          </div>
+          <div
+            v-for="(character, cIndex) in characters"
+            :key="character.id"
+            class="rounded-2xl border border-white/10 bg-zinc-950/40 p-3 space-y-3"
+          >
+            <div class="flex items-center justify-between gap-2">
+              <span class="text-[11px] uppercase tracking-wide text-zinc-500">Character {{ cIndex + 1 }}</span>
+              <div class="flex items-center gap-2">
+                <button type="button" class="rounded-full border border-amber-300/70 px-3 min-h-11 py-1.5 text-sm font-semibold text-amber-100 hover:border-amber-300 hover:bg-amber-400/10" @click="clearCharacter(cIndex)">Clear</button>
+                <button
+                  v-if="characters.length > 1"
+                  type="button"
+                  class="rounded-full border border-amber-300/70 px-3 min-h-11 py-2 text-sm font-semibold text-amber-100 hover:border-amber-300 hover:bg-amber-400/10"
+                  @click="removeCharacter(cIndex)"
+                >
+                  Remove
+                </button>
+              </div>
+            </div>
+            <input
+              v-model="character.name"
+              class="w-full rounded-xl border border-white/10 bg-zinc-950 px-3 py-2 text-sm outline-none ring-amber-300/40 placeholder:text-zinc-600 focus:ring-2"
+              maxlength="120"
+              placeholder="Name"
+            >
+            <textarea
+              v-model="character.description"
+              rows="2"
+              class="w-full rounded-xl border border-white/10 bg-zinc-950/70 px-3 py-2 text-sm outline-none ring-amber-300/40 placeholder:text-zinc-600 focus:ring-2"
+              placeholder="Description"
+            />
+            <div class="space-y-2 border-t border-white/5 pt-3">
+              <div class="flex flex-wrap items-center justify-between gap-2">
+                <span class="text-[11px] font-medium uppercase tracking-wide text-zinc-500">Outfits</span>
+                <button
+                  type="button"
+                  class="rounded-full bg-amber-400 px-4 min-h-11 py-2.5 text-sm font-semibold text-zinc-950 hover:bg-amber-300 disabled:cursor-not-allowed disabled:opacity-50"
+                  @click="addOutfit(cIndex)"
+                >
+                  Add outfit
+                </button>
+              </div>
+              <p v-if="!character.outfits.length" class="text-[11px] text-zinc-600">No outfits yet.</p>
+              <div
+                v-for="(outfit, oIndex) in character.outfits"
+                :key="outfit.id"
+                class="rounded-xl border border-white/5 bg-zinc-950/50 p-2 space-y-2"
+              >
+                <div class="flex items-center justify-between gap-2">
+                  <span class="text-[11px] text-zinc-500">Outfit {{ oIndex + 1 }}</span>
+                  <button type="button" class="rounded-full border border-amber-300/70 px-3 min-h-11 py-2 text-sm font-semibold text-amber-100 hover:border-amber-300 hover:bg-amber-400/10" @click="removeOutfit(cIndex, oIndex)">Remove</button>
+                </div>
+                <input
+                  v-model="outfit.name"
+                  class="w-full rounded-lg border border-white/10 bg-zinc-950 px-2.5 py-1.5 text-sm outline-none ring-amber-300/40 placeholder:text-zinc-600 focus:ring-2"
+                  maxlength="120"
+                  placeholder="Outfit name"
+                >
+                <textarea
+                  v-model="outfit.description"
+                  rows="2"
+                  class="w-full rounded-lg border border-white/10 bg-zinc-950/70 px-2.5 py-1.5 text-sm outline-none ring-amber-300/40 placeholder:text-zinc-600 focus:ring-2"
+                  placeholder="What they are wearing"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="space-y-3">
+          <div class="flex flex-wrap items-center justify-between gap-2">
+            <div>
+              <span class="text-sm font-medium text-zinc-300">Sets</span>
+              <p class="text-[11px] text-zinc-500">Sequence-wide locations and props. Toggle and framing per scene below.</p>
+            </div>
+            <button
+              type="button"
+              class="rounded-full bg-amber-400 px-4 min-h-11 py-2.5 text-sm font-semibold text-zinc-950 hover:bg-amber-300 disabled:cursor-not-allowed disabled:opacity-50"
+              @click="addSet"
+            >
+              Add set
+            </button>
+          </div>
+          <p v-if="!sets.length" class="text-[11px] text-zinc-600">No sets yet.</p>
+          <div
+            v-for="(set, sIndex) in sets"
+            :key="set.id"
+            class="rounded-2xl border border-white/10 bg-zinc-950/40 p-3 space-y-3"
+          >
+            <div class="flex items-center justify-between gap-2">
+              <span class="text-[11px] uppercase tracking-wide text-zinc-500">Set {{ sIndex + 1 }}</span>
+              <div class="flex items-center gap-2">
+                <button type="button" class="rounded-full border border-amber-300/70 px-3 min-h-11 py-1.5 text-sm font-semibold text-amber-100 hover:border-amber-300 hover:bg-amber-400/10" @click="clearSet(sIndex)">Clear</button>
+                <button
+                  type="button"
+                  class="rounded-full border border-amber-300/70 px-3 min-h-11 py-2 text-sm font-semibold text-amber-100 hover:border-amber-300 hover:bg-amber-400/10"
+                  @click="removeSet(sIndex)"
+                >
+                  Remove
+                </button>
+              </div>
+            </div>
+            <label class="block text-sm">
+              <input
+                v-model="set.name"
+                class="w-full rounded-xl border border-white/10 bg-zinc-950 px-3 py-2 text-sm outline-none ring-amber-300/40 placeholder:text-zinc-600 focus:ring-2"
+                maxlength="120"
+                placeholder="Name"
+              >
+              <p class="mt-1 text-[11px] text-zinc-500">Label only — not copied into the prompt.</p>
+            </label>
+            <div class="space-y-2 border-t border-white/5 pt-3">
+              <div class="flex flex-wrap items-center justify-between gap-2">
+                <span class="text-[11px] font-medium uppercase tracking-wide text-zinc-500">Framings</span>
+                <button
+                  type="button"
+                  class="rounded-full bg-amber-400 px-4 min-h-11 py-2.5 text-sm font-semibold text-zinc-950 hover:bg-amber-300 disabled:cursor-not-allowed disabled:opacity-50"
+                  @click="addFraming(sIndex)"
+                >
+                  Add framing
+                </button>
+              </div>
+              <div
+                v-for="(framing, fIndex) in set.framings"
+                :key="framing.id"
+                class="rounded-xl border border-white/5 bg-zinc-950/50 p-2 space-y-2"
+              >
+                <div class="flex items-center justify-between gap-2">
+                  <span class="text-[11px] text-zinc-500">Framing {{ fIndex + 1 }}</span>
+                  <div class="flex items-center gap-2">
+                    <button type="button" class="rounded-full border border-amber-300/70 px-3 min-h-11 py-1.5 text-sm font-semibold text-amber-100 hover:border-amber-300 hover:bg-amber-400/10" @click="clearFraming(sIndex, fIndex)">Clear</button>
+                    <button type="button" class="rounded-full border border-amber-300/70 px-3 min-h-11 py-2 text-sm font-semibold text-amber-100 hover:border-amber-300 hover:bg-amber-400/10" @click="removeFraming(sIndex, fIndex)">Remove</button>
+                  </div>
+                </div>
+                <input
+                  v-model="framing.label"
+                  class="w-full rounded-lg border border-white/10 bg-zinc-950 px-2.5 py-1.5 text-sm outline-none ring-amber-300/40 placeholder:text-zinc-600 focus:ring-2"
+                  maxlength="120"
+                  :placeholder="framingLabelPlaceholder(fIndex)"
+                >
+                <textarea
+                  v-model="framing.text"
+                  rows="2"
+                  class="w-full rounded-lg border border-white/10 bg-zinc-950/70 px-2.5 py-1.5 text-sm outline-none ring-amber-300/40 placeholder:text-zinc-600 focus:ring-2"
+                  placeholder="Place / location text copied into the prompt"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="flex flex-wrap items-center gap-2 border-b border-white/10 pb-2">
+          <button
+            v-for="(scene, index) in scenes"
+            :key="scene.id"
+            type="button"
+            class="rounded-full px-3 py-1.5 text-xs transition"
+            :class="index === activeIndex
+              ? 'min-h-11 bg-amber-400/15 px-3 py-2 text-sm font-semibold text-amber-100 ring-1 ring-amber-300/40'
+              : 'min-h-11 border border-white/25 px-3 py-2 text-sm font-semibold text-zinc-300 hover:bg-white/5 hover:text-zinc-100'"
+            @click="activeIndex = index"
+          >
+            {{ scene.title || `Scene ${index + 1}` }}
+          </button>
+          <button
+            type="button"
+            class="rounded-full bg-amber-400 px-4 min-h-11 py-2.5 text-sm font-semibold text-zinc-950 hover:bg-amber-300 disabled:cursor-not-allowed disabled:opacity-50"
+            @click="addNextScene"
+          >
+            Next scene
+          </button>
+          <button
+            type="button"
+            class="rounded-full border border-amber-300/70 px-4 min-h-11 py-2.5 text-sm font-semibold text-amber-100 hover:border-amber-300 hover:bg-amber-400/10 disabled:cursor-not-allowed disabled:opacity-40"
+            title="Move scene earlier"
+            :disabled="activeIndex <= 0"
+            @click="moveScene(activeIndex, -1)"
+          >
+            ←
+          </button>
+          <button
+            type="button"
+            class="rounded-full border border-amber-300/70 px-4 min-h-11 py-2.5 text-sm font-semibold text-amber-100 hover:border-amber-300 hover:bg-amber-400/10 disabled:cursor-not-allowed disabled:opacity-40"
+            title="Move scene later"
+            :disabled="activeIndex >= scenes.length - 1"
+            @click="moveScene(activeIndex, 1)"
+          >
+            →
+          </button>
+          <button
+            type="button"
+            class="rounded-full border border-amber-300/70 px-4 min-h-11 py-2.5 text-sm font-semibold text-amber-100 hover:border-amber-300 hover:bg-amber-400/10 disabled:cursor-not-allowed disabled:opacity-40"
+            :disabled="scenes.length <= 1"
+            @click="deleteScene(activeIndex)"
+          >
+            Delete scene
+          </button>
+        </div>
+
+        <div v-if="activeScene" class="space-y-4">
+          <label class="block text-sm">
+            <span class="mb-1 flex items-center justify-between gap-2 font-medium text-zinc-300">
+              Scene tab name
+              <span class="text-[11px] font-normal text-zinc-500">optional</span>
+            </span>
+            <input
+              v-model="activeScene.title"
+              class="w-full rounded-xl border border-white/10 bg-zinc-950 px-3 py-2 text-sm outline-none ring-amber-300/40 placeholder:text-zinc-600 focus:ring-2"
+              maxlength="60"
+              :placeholder="`Scene ${activeIndex + 1}`"
+            >
+          </label>
+
+          <template v-for="sectionKey in sectionOrder" :key="'scene-section-' + sectionKey">
+            <div v-if="sectionKey === 'style'" class="space-y-1">
+              <div class="flex items-center justify-between gap-2">
+                <span class="text-sm font-medium text-zinc-300">Style</span>
+                <button type="button" class="rounded-full border border-amber-300/70 px-3 min-h-11 py-1.5 text-sm font-semibold text-amber-100 hover:border-amber-300 hover:bg-amber-400/10" @click="activeScene.style = ''">Clear</button>
+              </div>
+              <textarea
+                v-model="activeScene.style"
+                rows="3"
+                class="w-full rounded-2xl border border-white/10 bg-zinc-950/70 px-3 py-2 text-sm outline-none ring-amber-300/40 placeholder:text-zinc-600 focus:ring-2"
+                placeholder="Visual style for this image"
+              />
+            </div>
+
+            <div v-else-if="sectionKey === 'settings'" class="space-y-1">
+              <div class="flex items-center justify-between gap-2">
+                <span class="text-sm font-medium text-zinc-300">Settings</span>
+                <button type="button" class="rounded-full border border-amber-300/70 px-3 min-h-11 py-1.5 text-sm font-semibold text-amber-100 hover:border-amber-300 hover:bg-amber-400/10" @click="activeScene.settings = ''">Clear</button>
+              </div>
+              <textarea
+                v-model="activeScene.settings"
+                rows="3"
+                class="w-full rounded-2xl border border-white/10 bg-zinc-950/70 px-3 py-2 text-sm outline-none ring-amber-300/40 placeholder:text-zinc-600 focus:ring-2"
+                placeholder="Lighting, framing, technical notes"
+              />
+            </div>
+
+            <div v-else-if="sectionKey === 'set' && sets.length" class="space-y-3">
+              <div>
+                <span class="text-sm font-medium text-zinc-300">Sets in this scene</span>
+                <p class="text-[11px] text-zinc-500">Toggle which set blocks appear. Pick a framing for each on set.</p>
+              </div>
+              <div
+                v-for="set in sets"
+                :key="'scene-set-'+set.id"
+                class="rounded-2xl border border-white/10 bg-zinc-950/40 px-3 py-2.5 space-y-2"
+              >
+                <label class="flex items-center justify-between gap-3 text-sm text-zinc-200">
+                  <span class="min-w-0 truncate">{{ set.name || 'Unnamed set' }}</span>
+                  <input
+                    type="checkbox"
+                    class="accent-amber-400"
+                    :checked="isSetOn(set.id)"
+                    @change="setSetOn(set.id, ($event.target as HTMLInputElement).checked)"
+                  >
+                </label>
+                <label v-if="isSetOn(set.id)" class="block text-[11px] text-zinc-500">
+                  Framing
+                  <select
+                    class="mt-1 w-full rounded-xl border border-white/10 bg-zinc-950 px-3 py-2 text-sm text-zinc-200 outline-none ring-amber-300/40 focus:ring-2"
+                    :value="activeSetFramingId(set.id) || ''"
+                    @change="setSetFraming(set.id, ($event.target as HTMLSelectElement).value)"
+                  >
+                    <option value="">None</option>
+                    <option v-for="framing in set.framings" :key="framing.id" :value="framing.id">
+                      {{ framing.label || 'Untitled framing' }}
+                    </option>
+                  </select>
+                </label>
+              </div>
+            </div>
+
+            <div v-else-if="sectionKey === 'characters'" class="space-y-3">
+              <div>
+                <span class="text-sm font-medium text-zinc-300">In this scene</span>
+                <p class="text-[11px] text-zinc-500">Toggle who appears. Pick an outfit for each on character.</p>
+              </div>
+              <div
+                v-for="character in characters"
+                :key="'scene-'+character.id"
+                class="rounded-2xl border border-white/10 bg-zinc-950/40 px-3 py-2.5 space-y-2"
+              >
+                <label class="flex items-center justify-between gap-3 text-sm text-zinc-200">
+                  <span class="min-w-0 truncate">{{ character.name || 'Unnamed character' }}</span>
+                  <input
+                    type="checkbox"
+                    class="accent-amber-400"
+                    :checked="isCharacterOn(character.id)"
+                    @change="setCharacterOn(character.id, ($event.target as HTMLInputElement).checked)"
+                  >
+                </label>
+                <label v-if="isCharacterOn(character.id)" class="block text-[11px] text-zinc-500">
+                  Outfit
+                  <select
+                    class="mt-1 w-full rounded-xl border border-white/10 bg-zinc-950 px-3 py-2 text-sm text-zinc-200 outline-none ring-amber-300/40 focus:ring-2"
+                    :value="activeOutfitId(character.id) || ''"
+                    @change="setCharacterOutfit(character.id, ($event.target as HTMLSelectElement).value)"
+                  >
+                    <option value="">None</option>
+                    <option v-for="outfit in character.outfits" :key="outfit.id" :value="outfit.id">
+                      {{ outfit.name || 'Untitled outfit' }}
+                    </option>
+                  </select>
+                </label>
+              </div>
+            </div>
+
+            <div v-else-if="sectionKey === 'prompt'" class="space-y-1">
+              <div class="flex items-center justify-between gap-2">
+                <span class="text-sm font-medium text-zinc-300">Prompt</span>
+                <button type="button" class="rounded-full border border-amber-300/70 px-3 min-h-11 py-1.5 text-sm font-semibold text-amber-100 hover:border-amber-300 hover:bg-amber-400/10" @click="activeScene.prompt = ''">Clear</button>
+              </div>
+              <textarea
+                v-model="activeScene.prompt"
+                rows="5"
+                class="w-full rounded-2xl border border-white/10 bg-zinc-950/70 px-3 py-2 text-sm outline-none ring-amber-300/40 placeholder:text-zinc-600 focus:ring-2"
+                placeholder="What happens in this image"
+              />
+            </div>
+          </template>
+        </div>
+
+        <section class="rounded-2xl border border-white/10 bg-zinc-950/30">
+          <div class="flex flex-wrap items-center justify-between gap-2 border-b border-white/5 px-4 py-3">
+            <div>
+              <h3 class="text-sm font-medium text-zinc-200">Preview</h3>
+              <p class="text-[11px] text-zinc-500">Assembled text ready to copy. Sequence name is omitted.</p>
+            </div>
+            <div class="flex items-center gap-2">
+              <button
+                type="button"
+                class="rounded-full bg-amber-400 px-4 min-h-11 py-2.5 text-sm font-semibold text-zinc-950 hover:bg-amber-300 disabled:cursor-not-allowed disabled:opacity-50"
+                :disabled="!activeSceneText"
+                @click="copyScene"
+              >
+                {{ copiedScene ? 'Scene copied' : 'Copy scene' }}
+              </button>
+              <button
+                type="button"
+                class="rounded-full bg-amber-400 px-4 min-h-11 py-2.5 text-sm font-semibold text-zinc-950 hover:bg-amber-300 disabled:cursor-not-allowed disabled:opacity-50"
+                :disabled="!previewText"
+                @click="copyPreview"
+              >
+                {{ copied ? 'Copied' : 'Copy' }}
+              </button>
+              <button
+                type="button"
+                class="rounded-full border border-amber-300/70 px-4 min-h-11 py-2.5 text-sm font-semibold text-amber-100 hover:border-amber-300 hover:bg-amber-400/10 disabled:cursor-not-allowed disabled:opacity-40"
+                @click="previewOpen = !previewOpen"
+              >
+                {{ previewOpen ? 'Hide' : 'Show' }}
+              </button>
+            </div>
+          </div>
+          <pre
+            v-if="previewOpen"
+            class="max-h-[min(28rem,50vh)] overflow-auto whitespace-pre-wrap px-4 py-3 text-xs text-zinc-300 [overflow-wrap:anywhere]"
+          >{{ previewText || 'Fill a scene to see the assembled prompt.' }}</pre>
+        </section>
+      </section>
+
+      <aside class="min-w-0 space-y-4">
+        <section class="glass rounded-3xl p-5 sm:p-6">
+          <h3 class="font-display text-lg font-bold">Saved sequences</h3>
+          <p class="mt-1 text-xs text-zinc-500">Stored with your other library data. Open one to edit.</p>
+          <p v-if="!sequences.length" class="mt-4 rounded-2xl border border-white/5 bg-zinc-950/40 px-4 py-6 text-center text-sm text-zinc-500">
+            Nothing saved yet.
+          </p>
+          <div v-else class="mt-4 space-y-2">
+            <button
+              v-for="sequence in sequences"
+              :key="sequence.id"
+              type="button"
+              class="w-full rounded-2xl border p-3 text-left transition"
+              :class="sequence.id === selectedId
+                ? 'border-amber-300/30 bg-amber-400/5'
+                : 'border-white/5 bg-zinc-950/40 hover:border-white/15'"
+              @click="select(sequence)"
+            >
+              <div class="flex items-start justify-between gap-2">
+                <div class="min-w-0">
+                  <p class="truncate text-sm font-medium text-zinc-100">{{ sequence.name }}</p>
+                  <p class="mt-0.5 text-[11px] text-zinc-500">
+                    {{ sequence.scenes?.length || 0 }} scene{{ (sequence.scenes?.length || 0) === 1 ? '' : 's' }}
+                    · {{ sequence.characters?.length || 0 }} character{{ (sequence.characters?.length || 0) === 1 ? '' : 's' }}
+                  </p>
+                </div>
+                <button
+                  type="button"
+                  class="rounded-full border border-amber-300/70 px-3 min-h-11 py-2 text-sm font-semibold text-amber-100 hover:border-amber-300 hover:bg-amber-400/10"
+                  @click.stop="remove(sequence)"
+                >
+                  Delete
+                </button>
+              </div>
+            </button>
+          </div>
+        </section>
+      </aside>
+    </main>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type {
+  PromptSequence,
+  PromptSequenceCharacter,
+  PromptSequenceScene,
+  PromptSequenceSectionKey,
+  PromptSequenceSet
+} from '~/utils/promptSequences'
+import {
+  DEFAULT_PROMPT_SEQUENCE_SECTION_ORDER,
+  PROMPT_SEQUENCE_FRAMING_SUGGESTIONS,
+  assembleSceneText,
+  assembleSequenceText,
+  cloneSceneForNext,
+  emptyCharacter,
+  emptyFraming,
+  emptyOutfit,
+  emptyScene,
+  emptySet,
+  ensureSceneStatesForCharacters,
+  ensureSceneStatesForSets,
+  normalizePromptSequence,
+  normalizeSectionOrder
+} from '~/utils/promptSequences'
+
+useHead({ title: 'Prompt Builder' })
+
+const SECTION_LABELS: Record<PromptSequenceSectionKey, string> = {
+  style: 'Style',
+  settings: 'Settings',
+  set: 'Set',
+  characters: 'Characters',
+  prompt: 'Prompt'
+}
+
+const sequences = ref<PromptSequence[]>([])
+const selectedId = ref('')
+const name = ref('')
+const sectionOrder = ref<PromptSequenceSectionKey[]>([...DEFAULT_PROMPT_SEQUENCE_SECTION_ORDER])
+const characters = ref<PromptSequenceCharacter[]>([emptyCharacter()])
+const sets = ref<PromptSequenceSet[]>([])
+const scenes = ref<PromptSequenceScene[]>([emptyScene(1, characters.value, sets.value)])
+const activeIndex = ref(0)
+const previewOpen = ref(true)
+const busy = ref('')
+const error = ref('')
+const notice = ref('')
+const copied = ref(false)
+const copiedScene = ref(false)
+let copyTimer: ReturnType<typeof setTimeout> | null = null
+let copySceneTimer: ReturnType<typeof setTimeout> | null = null
+let dragSectionIndex: number | null = null
+
+const activeScene = computed(() => scenes.value[activeIndex.value] || null)
+const previewText = computed(() => assembleSequenceText({
+  sectionOrder: sectionOrder.value,
+  characters: characters.value,
+  sets: sets.value,
+  scenes: scenes.value
+}))
+const activeSceneText = computed(() => {
+  if (!activeScene.value) return ''
+  return assembleSceneText(activeScene.value, characters.value, sets.value, sectionOrder.value)
+})
+
+function sectionLabel(key: PromptSequenceSectionKey) {
+  return SECTION_LABELS[key] || key
+}
+
+function moveSection(index: number, delta: number) {
+  const next = index + delta
+  if (next < 0 || next >= sectionOrder.value.length) return
+  const copy = [...sectionOrder.value]
+  const [item] = copy.splice(index, 1)
+  copy.splice(next, 0, item)
+  sectionOrder.value = copy
+}
+
+function onSectionDragStart(index: number, event: DragEvent) {
+  dragSectionIndex = index
+  event.dataTransfer?.setData('text/plain', String(index))
+  if (event.dataTransfer) event.dataTransfer.effectAllowed = 'move'
+}
+
+function onSectionDragOver(event: DragEvent) {
+  if (event.dataTransfer) event.dataTransfer.dropEffect = 'move'
+}
+
+function onSectionDrop(index: number) {
+  if (dragSectionIndex == null || dragSectionIndex === index) {
+    dragSectionIndex = null
+    return
+  }
+  const copy = [...sectionOrder.value]
+  const [item] = copy.splice(dragSectionIndex, 1)
+  copy.splice(index, 0, item)
+  sectionOrder.value = copy
+  dragSectionIndex = null
+}
+
+function framingLabelPlaceholder(index: number) {
+  const suggestion = PROMPT_SEQUENCE_FRAMING_SUGGESTIONS[index % PROMPT_SEQUENCE_FRAMING_SUGGESTIONS.length]
+  return suggestion || 'wide / medium / narrow'
+}
+
+function startNew() {
+  selectedId.value = ''
+  name.value = ''
+  sectionOrder.value = [...DEFAULT_PROMPT_SEQUENCE_SECTION_ORDER]
+  characters.value = [emptyCharacter()]
+  sets.value = []
+  scenes.value = [emptyScene(1, characters.value, sets.value)]
+  activeIndex.value = 0
+  error.value = ''
+  notice.value = ''
+}
+
+function select(sequence: PromptSequence) {
+  const normalized = normalizePromptSequence(sequence) || sequence
+  selectedId.value = normalized.id
+  name.value = normalized.name
+  sectionOrder.value = normalizeSectionOrder(normalized.sectionOrder)
+  characters.value = (normalized.characters?.length ? normalized.characters : [emptyCharacter()]).map(character => ({
+    ...emptyCharacter(),
+    ...character,
+    outfits: (character.outfits || []).map(outfit => ({ ...emptyOutfit(), ...outfit }))
+  }))
+  sets.value = (normalized.sets || []).map(set => ({
+    ...emptySet(),
+    ...set,
+    framings: (set.framings?.length ? set.framings : [emptyFraming()]).map(framing => ({ ...emptyFraming(), ...framing }))
+  }))
+  scenes.value = (normalized.scenes?.length ? normalized.scenes : [emptyScene(1, characters.value, sets.value)]).map((scene, index) => ({
+    ...emptyScene(index + 1, characters.value, sets.value),
+    ...scene,
+    setStates: (scene.setStates || []).map(state => ({
+      setId: state.setId,
+      on: state.on !== false,
+      framingId: state.framingId || null
+    })),
+    characterStates: (scene.characterStates || []).map(state => ({
+      characterId: state.characterId,
+      on: state.on !== false,
+      outfitId: state.outfitId || null
+    }))
+  }))
+  ensureSceneStatesForSets(scenes.value, sets.value)
+  ensureSceneStatesForCharacters(scenes.value, characters.value)
+  activeIndex.value = 0
+  error.value = ''
+  notice.value = ''
+}
+
+function addNextScene() {
+  const previous = scenes.value[scenes.value.length - 1] || emptyScene(1, characters.value, sets.value)
+  const next = cloneSceneForNext(previous, scenes.value.length + 1)
+  scenes.value.push(next)
+  activeIndex.value = scenes.value.length - 1
+}
+
+function moveScene(index: number, delta: number) {
+  const newIndex = index + delta
+  if (newIndex < 0 || newIndex >= scenes.value.length) return
+  const [scene] = scenes.value.splice(index, 1)
+  if (!scene) return
+  scenes.value.splice(newIndex, 0, scene)
+  if (activeIndex.value === index) {
+    activeIndex.value = newIndex
+  } else if (index < activeIndex.value && newIndex >= activeIndex.value) {
+    activeIndex.value--
+  } else if (index > activeIndex.value && newIndex <= activeIndex.value) {
+    activeIndex.value++
+  }
+}
+
+function deleteScene(index: number) {
+  if (scenes.value.length <= 1) return
+  scenes.value.splice(index, 1)
+  if (activeIndex.value >= scenes.value.length) {
+    activeIndex.value = scenes.value.length - 1
+  } else if (activeIndex.value > index) {
+    activeIndex.value--
+  }
+}
+
+function addCharacter() {
+  const character = emptyCharacter()
+  characters.value.push(character)
+  ensureSceneStatesForCharacters(scenes.value, characters.value, {
+    newCharacterId: character.id,
+    turnOnSceneIndex: activeIndex.value
+  })
+}
+
+function clearCharacter(index: number) {
+  const character = characters.value[index]
+  if (!character) return
+  character.name = ''
+  character.description = ''
+  character.outfits = []
+  for (const scene of scenes.value) {
+    const state = scene.characterStates.find(item => item.characterId === character.id)
+    if (state) state.outfitId = null
+  }
+}
+
+function removeCharacter(index: number) {
+  if (characters.value.length <= 1) return
+  const [removed] = characters.value.splice(index, 1)
+  if (!removed) return
+  for (const scene of scenes.value) {
+    scene.characterStates = scene.characterStates.filter(state => state.characterId !== removed.id)
+  }
+}
+
+function addOutfit(characterIndex: number) {
+  const character = characters.value[characterIndex]
+  if (!character) return
+  character.outfits.push(emptyOutfit())
+}
+
+function removeOutfit(characterIndex: number, outfitIndex: number) {
+  const character = characters.value[characterIndex]
+  if (!character) return
+  const [removed] = character.outfits.splice(outfitIndex, 1)
+  if (!removed) return
+  for (const scene of scenes.value) {
+    const state = scene.characterStates.find(item => item.characterId === character.id)
+    if (state?.outfitId === removed.id) state.outfitId = null
+  }
+}
+
+function addSet() {
+  const set = emptySet()
+  sets.value.push(set)
+  ensureSceneStatesForSets(scenes.value, sets.value, {
+    newSetId: set.id,
+    turnOnSceneIndex: activeIndex.value
+  })
+}
+
+function clearSet(index: number) {
+  const set = sets.value[index]
+  if (!set) return
+  set.name = ''
+  set.framings = [emptyFraming()]
+  for (const scene of scenes.value) {
+    const state = scene.setStates.find(item => item.setId === set.id)
+    if (state) state.framingId = null
+  }
+}
+
+function removeSet(index: number) {
+  const [removed] = sets.value.splice(index, 1)
+  if (!removed) return
+  for (const scene of scenes.value) {
+    scene.setStates = (scene.setStates || []).filter(state => state.setId !== removed.id)
+  }
+}
+
+function addFraming(setIndex: number) {
+  const set = sets.value[setIndex]
+  if (!set) return
+  set.framings.push(emptyFraming())
+}
+
+function removeFraming(setIndex: number, framingIndex: number) {
+  const set = sets.value[setIndex]
+  if (!set) return
+  const [removed] = set.framings.splice(framingIndex, 1)
+  if (!removed) return
+  for (const scene of scenes.value) {
+    const state = scene.setStates.find(item => item.setId === set.id)
+    if (state?.framingId === removed.id) state.framingId = null
+  }
+}
+
+function clearFraming(setIndex: number, framingIndex: number) {
+  const framing = sets.value[setIndex]?.framings[framingIndex]
+  if (!framing) return
+  framing.label = ''
+  framing.text = ''
+}
+
+function sceneSetState(setId: string) {
+  return activeScene.value?.setStates?.find(state => state.setId === setId)
+}
+
+function isSetOn(setId: string) {
+  const state = sceneSetState(setId)
+  return state ? !!state.on : true
+}
+
+function setSetOn(setId: string, on: boolean) {
+  const state = sceneSetState(setId)
+  if (!state) {
+    activeScene.value?.setStates.push({ setId, on, framingId: null })
+    return
+  }
+  state.on = on
+}
+
+function activeSetFramingId(setId: string) {
+  return sceneSetState(setId)?.framingId || ''
+}
+
+function setSetFraming(setId: string, framingId: string) {
+  const state = sceneSetState(setId)
+  if (!state) {
+    activeScene.value?.setStates.push({
+      setId,
+      on: true,
+      framingId: framingId || null
+    })
+    return
+  }
+  state.framingId = framingId || null
+}
+
+function sceneState(characterId: string) {
+  return activeScene.value?.characterStates.find(state => state.characterId === characterId)
+}
+
+function isCharacterOn(characterId: string) {
+  const state = sceneState(characterId)
+  return state ? !!state.on : true
+}
+
+function setCharacterOn(characterId: string, on: boolean) {
+  const state = sceneState(characterId)
+  if (!state) {
+    activeScene.value?.characterStates.push({ characterId, on, outfitId: null })
+    return
+  }
+  state.on = on
+}
+
+function activeOutfitId(characterId: string) {
+  return sceneState(characterId)?.outfitId || ''
+}
+
+function setCharacterOutfit(characterId: string, outfitId: string) {
+  const state = sceneState(characterId)
+  if (!state) {
+    activeScene.value?.characterStates.push({
+      characterId,
+      on: true,
+      outfitId: outfitId || null
+    })
+    return
+  }
+  state.outfitId = outfitId || null
+}
+
+async function loadSequences() {
+  const listed = await $fetch<{ sequences?: PromptSequence[] }>('/api/prompt-sequences')
+  sequences.value = listed.sequences || []
+}
+
+async function save() {
+  const nextName = name.value.trim()
+  if (!nextName) return
+  const existingByName = sequences.value.find(item => item.name.toLowerCase() === nextName.toLowerCase())
+  const updateExisting = Boolean(selectedId.value) && (!existingByName || existingByName.id === selectedId.value)
+  if (existingByName && existingByName.id !== selectedId.value && !window.confirm(`Overwrite sequence “${existingByName.name}”?`)) return
+  busy.value = 'save'
+  error.value = ''
+  notice.value = ''
+  const payload = {
+    name: nextName,
+    sectionOrder: sectionOrder.value,
+    characters: characters.value,
+    sets: sets.value,
+    scenes: scenes.value
+  }
+  try {
+    if (updateExisting && selectedId.value) {
+      const saved = await $fetch<{ sequence: PromptSequence; sequences: PromptSequence[] }>(`/api/prompt-sequences/${selectedId.value}`, {
+        method: 'PATCH',
+        body: payload
+      })
+      sequences.value = saved.sequences
+      select(saved.sequence)
+      notice.value = `Saved “${saved.sequence.name}”.`
+    } else {
+      const saved = await $fetch<{ sequence: PromptSequence; sequences: PromptSequence[] }>('/api/prompt-sequences', {
+        method: 'POST',
+        body: { ...payload, overwrite: Boolean(existingByName) }
+      })
+      sequences.value = saved.sequences
+      select(saved.sequence)
+      notice.value = existingByName ? `Overwrote “${saved.sequence.name}”.` : `Saved “${saved.sequence.name}”.`
+    }
+  } catch (err: any) {
+    error.value = err?.data?.statusMessage || err?.statusMessage || err?.message || 'Could not save that sequence'
+  } finally {
+    busy.value = ''
+  }
+}
+
+async function remove(sequence: PromptSequence) {
+  if (!window.confirm(`Delete sequence “${sequence.name}”?`)) return
+  busy.value = 'delete'
+  error.value = ''
+  notice.value = ''
+  try {
+    const saved = await $fetch<{ sequences: PromptSequence[] }>(`/api/prompt-sequences/${sequence.id}`, { method: 'DELETE' })
+    sequences.value = saved.sequences
+    if (selectedId.value === sequence.id) startNew()
+    notice.value = `Deleted “${sequence.name}”.`
+  } catch (err: any) {
+    error.value = err?.data?.statusMessage || err?.statusMessage || err?.message || 'Could not delete that sequence'
+  } finally {
+    busy.value = ''
+  }
+}
+
+async function writeClipboard(text: string, kind: 'all' | 'scene') {
+  if (!text) return
+  try {
+    await navigator.clipboard.writeText(text)
+    if (kind === 'scene') {
+      copiedScene.value = true
+      if (copySceneTimer) clearTimeout(copySceneTimer)
+      copySceneTimer = setTimeout(() => { copiedScene.value = false }, 1500)
+    } else {
+      copied.value = true
+      if (copyTimer) clearTimeout(copyTimer)
+      copyTimer = setTimeout(() => { copied.value = false }, 1500)
+    }
+  } catch {
+    error.value = 'Could not copy to the clipboard'
+  }
+}
+
+async function copyPreview() {
+  await writeClipboard(previewText.value, 'all')
+}
+
+async function copyScene() {
+  await writeClipboard(activeSceneText.value, 'scene')
+}
+
+onMounted(async () => {
+  try {
+    await loadSequences()
+  } catch (err: any) {
+    error.value = err?.data?.statusMessage || err?.message || 'Could not load saved sequences'
+  }
+})
+
+onBeforeUnmount(() => {
+  if (copyTimer) clearTimeout(copyTimer)
+  if (copySceneTimer) clearTimeout(copySceneTimer)
+})
+</script>
diff --git a/server/api/prompt-sequences.post.ts b/server/api/prompt-sequences.post.ts
index 3a5ea72..8d8fd94 100644
--- a/server/api/prompt-sequences.post.ts
+++ b/server/api/prompt-sequences.post.ts
@@ -4,6 +4,7 @@ export default defineEventHandler(async (event) => {
   const { owner } = assertLibraryOwner(event)
   const body = await readBody<{
     name?: string
+    sectionOrder?: unknown
     characters?: unknown
     sets?: unknown
     scenes?: unknown
@@ -11,6 +12,7 @@ export default defineEventHandler(async (event) => {
   }>(event).catch(() => ({}))
   const sequence = await savePromptSequence(owner, {
     name: body?.name || '',
+    sectionOrder: body?.sectionOrder,
     characters: body?.characters,
     sets: body?.sets,
     scenes: body?.scenes,
diff --git a/server/api/prompt-sequences/[id].patch.ts b/server/api/prompt-sequences/[id].patch.ts
index 63200e1..5948d4b 100644
--- a/server/api/prompt-sequences/[id].patch.ts
+++ b/server/api/prompt-sequences/[id].patch.ts
@@ -3,9 +3,16 @@ import { listPromptSequences, updatePromptSequence } from '~/server/utils/prompt
 export default defineEventHandler(async (event) => {
   const { owner } = assertLibraryOwner(event)
   const id = String(getRouterParam(event, 'id') || '')
-  const body = await readBody<{ name?: string; characters?: unknown; sets?: unknown; scenes?: unknown }>(event).catch(() => ({}))
+  const body = await readBody<{
+    name?: string
+    sectionOrder?: unknown
+    characters?: unknown
+    sets?: unknown
+    scenes?: unknown
+  }>(event).catch(() => ({}))
   const sequence = await updatePromptSequence(owner, id, {
     name: body?.name,
+    sectionOrder: body?.sectionOrder,
     characters: body?.characters,
     sets: body?.sets,
     scenes: body?.scenes
diff --git a/server/utils/promptSequences.ts b/server/utils/promptSequences.ts
index fe4d667..37177c9 100644
--- a/server/utils/promptSequences.ts
+++ b/server/utils/promptSequences.ts
@@ -7,10 +7,13 @@ import {
   normalizeCharacter,
   normalizeSet,
   normalizeScene,
+  normalizeSectionOrder,
   emptyCharacter,
   emptyScene,
+  DEFAULT_PROMPT_SEQUENCE_SECTION_ORDER,
   type PromptSequence,
   type PromptSequenceCharacter,
+  type PromptSequenceSectionKey,
   type PromptSequenceSet,
   type PromptSequenceScene
 } from '~/utils/promptSequences'
@@ -91,6 +94,7 @@ export function getPromptSequence(owner: string, id: string) {
 
 export async function savePromptSequence(owner: string, input: {
   name: string
+  sectionOrder?: unknown
   characters?: unknown
   sets?: unknown
   scenes?: unknown
@@ -101,6 +105,9 @@ export async function savePromptSequence(owner: string, input: {
   const characters = normalizeCharactersInput(input.characters)
   const sets = normalizeSetsInput(input.sets)
   const scenes = normalizeScenesInput(input.scenes, characters, sets)
+  const sectionOrder = input.sectionOrder !== undefined
+    ? normalizeSectionOrder(input.sectionOrder)
+    : [...DEFAULT_PROMPT_SEQUENCE_SECTION_ORDER]
   const now = Date.now()
   return mutate(owner, (sequences) => {
     const existing = sequences.find(item => item.name.toLowerCase() === name.toLowerCase())
@@ -108,6 +115,7 @@ export async function savePromptSequence(owner: string, input: {
       throw createError({ statusCode: 409, statusMessage: `Overwrite sequence “${existing.name}”?` })
     }
     if (existing) {
+      existing.sectionOrder = sectionOrder
       existing.characters = characters
       existing.sets = sets
       existing.scenes = scenes
@@ -117,6 +125,7 @@ export async function savePromptSequence(owner: string, input: {
     const created: PromptSequence = {
       id: crypto.randomUUID(),
       name,
+      sectionOrder,
       characters,
       sets,
       scenes,
@@ -130,6 +139,7 @@ export async function savePromptSequence(owner: string, input: {
 
 export async function updatePromptSequence(owner: string, id: string, input: {
   name?: string
+  sectionOrder?: unknown
   characters?: unknown
   sets?: unknown
   scenes?: unknown
@@ -146,6 +156,11 @@ export async function updatePromptSequence(owner: string, id: string, input: {
       if (clash) throw createError({ statusCode: 409, statusMessage: `A sequence named “${clash.name}” already exists` })
       existing.name = name
     }
+    if (input.sectionOrder !== undefined) {
+      existing.sectionOrder = normalizeSectionOrder(input.sectionOrder)
+    } else if (!existing.sectionOrder?.length) {
+      existing.sectionOrder = [...DEFAULT_PROMPT_SEQUENCE_SECTION_ORDER] as PromptSequenceSectionKey[]
+    }
     if (input.characters !== undefined || input.sets !== undefined || input.scenes !== undefined) {
       const characters = input.characters !== undefined
         ? normalizeCharactersInput(input.characters)
diff --git a/tests/prompt-sequences.test.mjs b/tests/prompt-sequences.test.mjs
index f65b3a8..f03eb39 100644
--- a/tests/prompt-sequences.test.mjs
+++ b/tests/prompt-sequences.test.mjs
@@ -26,6 +26,8 @@ const {
   emptyFraming,
   cloneSceneForNext,
   normalizePromptSequence,
+  normalizeSectionOrder,
+  DEFAULT_PROMPT_SEQUENCE_SECTION_ORDER,
   ensureSceneStatesForCharacters
 } = await import(pathToFileURL(tmp).href)
 unlinkSync(tmp)
@@ -204,3 +206,83 @@ test('ensureSceneStatesForCharacters turns new character on only for current sce
   assert.equal(scenes[0].characterStates.find(s => s.characterId === b.id).on, false)
   assert.equal(scenes[1].characterStates.find(s => s.characterId === b.id).on, true)
 })
+
+test('sectionOrder settings then prompt then characters; empty style and set omitted', () => {
+  const ada = {
+    ...emptyCharacter(),
+    id: 'c1',
+    name: 'Ada',
+    description: 'tall',
+    outfits: []
+  }
+  const set = {
+    ...emptySet(),
+    id: 's1',
+    name: 'Courtyard',
+    framings: [{ ...emptyFraming('wide'), id: 'f1', text: 'open yard' }]
+  }
+  const scene = {
+    style: '',
+    settings: 'soft light',
+    setStates: [{ setId: 's1', on: true, framingId: null }],
+    characterStates: [{ characterId: 'c1', on: true, outfitId: null }],
+    prompt: 'looks up'
+  }
+  const order = ['settings', 'prompt', 'characters']
+  const text = assembleSceneText(scene, [ada], [set], order)
+  assert.equal(text, 'soft light\n\nlooks up\n\nAda: tall')
+  assert.ok(!text.includes('open yard'))
+  assert.ok(!text.includes('Courtyard'))
+  assert.ok(!text.includes('wide'))
+})
+
+test('legacy sequence without sectionOrder keeps default order and \\n\\n\\n join', () => {
+  const legacy = normalizePromptSequence({
+    id: 'seq1',
+    name: 'Old order',
+    characters: [{ id: 'c1', name: 'Ada', description: 'tall', outfits: [] }],
+    sets: [{
+      id: 's1',
+      name: 'Hall',
+      framings: [{ id: 'f1', label: 'wide', text: 'stone hall' }]
+    }],
+    scenes: [
+      {
+        id: 'sc1',
+        title: 'One',
+        style: 'oil',
+        settings: 'day',
+        setStates: [{ setId: 's1', on: true, framingId: 'f1' }],
+        characterStates: [{ characterId: 'c1', on: true, outfitId: null }],
+        prompt: 'walk'
+      },
+      {
+        id: 'sc2',
+        title: 'Two',
+        style: 'ink',
+        settings: '',
+        setStates: [{ setId: 's1', on: false, framingId: 'f1' }],
+        characterStates: [{ characterId: 'c1', on: true, outfitId: null }],
+        prompt: 'stop'
+      }
+    ],
+    createdAt: 1,
+    updatedAt: 1
+  })
+  assert.deepEqual(legacy.sectionOrder, [...DEFAULT_PROMPT_SEQUENCE_SECTION_ORDER])
+  assert.deepEqual(normalizeSectionOrder(undefined), [...DEFAULT_PROMPT_SEQUENCE_SECTION_ORDER])
+  assert.deepEqual(normalizeSectionOrder(['prompt', 'prompt', 'bogus', 'settings']), [
+    'prompt',
+    'settings',
+    'style',
+    'set',
+    'characters'
+  ])
+  const full = assembleSequenceText(legacy)
+  assert.equal(
+    full,
+    'oil\n\nday\n\nstone hall\n\nAda: tall\n\nwalk\n\n\nink\n\nAda: tall\n\nstop'
+  )
+  assert.ok(!full.includes('Hall'))
+  assert.ok(!full.includes('wide'))
+})
diff --git a/utils/promptSequences.ts b/utils/promptSequences.ts
index ff7edf6..6a4aa2f 100644
--- a/utils/promptSequences.ts
+++ b/utils/promptSequences.ts
@@ -50,9 +50,18 @@ export type PromptSequenceScene = {
   prompt: string
 }
 
+/** Scene prompt sections. Default copy order. */
+export const PROMPT_SEQUENCE_SECTION_KEYS = ['style', 'settings', 'set', 'characters', 'prompt'] as const
+export type PromptSequenceSectionKey = (typeof PROMPT_SEQUENCE_SECTION_KEYS)[number]
+export const DEFAULT_PROMPT_SEQUENCE_SECTION_ORDER: PromptSequenceSectionKey[] = [
+  ...PROMPT_SEQUENCE_SECTION_KEYS
+]
+
 export type PromptSequence = {
   id: string
   name: string
+  /** Order of scene sections when assembling / in the editor. */
+  sectionOrder: PromptSequenceSectionKey[]
   characters: PromptSequenceCharacter[]
   sets: PromptSequenceSet[]
   scenes: PromptSequenceScene[]
@@ -60,6 +69,26 @@ export type PromptSequence = {
   updatedAt: number
 }
 
+/** Valid unique keys in given order; missing keys append in default order. */
+export function normalizeSectionOrder(raw: unknown): PromptSequenceSectionKey[] {
+  const allowed = new Set<string>(PROMPT_SEQUENCE_SECTION_KEYS)
+  const seen = new Set<PromptSequenceSectionKey>()
+  const ordered: PromptSequenceSectionKey[] = []
+  if (Array.isArray(raw)) {
+    for (const item of raw) {
+      const key = String(item || '').trim()
+      if (!allowed.has(key) || seen.has(key as PromptSequenceSectionKey)) continue
+      const typed = key as PromptSequenceSectionKey
+      seen.add(typed)
+      ordered.push(typed)
+    }
+  }
+  for (const key of DEFAULT_PROMPT_SEQUENCE_SECTION_ORDER) {
+    if (!seen.has(key)) ordered.push(key)
+  }
+  return ordered
+}
+
 export const PROMPT_SEQUENCE_NAME_MAX = 80
 export const PROMPT_SEQUENCE_FIELD_MAX = 50_000
 export const PROMPT_SEQUENCE_TITLE_MAX = 60
@@ -206,7 +235,8 @@ export function assembleSceneText(
     characters?: Array<{ name?: string; description?: string }>
   },
   sequenceCharacters?: PromptSequenceCharacter[],
-  sequenceSets?: PromptSequenceSet[]
+  sequenceSets?: PromptSequenceSet[],
+  sectionOrder?: PromptSequenceSectionKey[] | unknown
 ) {
   const setBlock = sequenceSets?.length
     ? assembleSetBlock(scene, sequenceSets)
@@ -217,13 +247,15 @@ export function assembleSceneText(
         .map(character => formatCharacterLine(character))
         .filter(Boolean)
         .join('\n')
-  const parts = [
-    String(scene.style || '').trim(),
-    String(scene.settings || '').trim(),
-    setBlock,
-    characterBlock,
-    String(scene.prompt || '').trim()
-  ].filter(Boolean)
+  const blocks: Record<PromptSequenceSectionKey, string> = {
+    style: String(scene.style || '').trim(),
+    settings: String(scene.settings || '').trim(),
+    set: setBlock,
+    characters: characterBlock,
+    prompt: String(scene.prompt || '').trim()
+  }
+  const order = normalizeSectionOrder(sectionOrder)
+  const parts = order.map(key => blocks[key]).filter(Boolean)
   return parts.join('\n\n')
 }
 
@@ -233,6 +265,7 @@ export function assembleSceneText(
  * Sequence name is never included.
  */
 export function assembleSequenceText(sequence: {
+  sectionOrder?: PromptSequenceSectionKey[] | unknown
   characters?: PromptSequenceCharacter[]
   sets?: PromptSequenceSet[]
   scenes?: Array<{
@@ -246,11 +279,13 @@ export function assembleSequenceText(sequence: {
 }) {
   const characters = sequence.characters || []
   const sets = sequence.sets || []
+  const sectionOrder = normalizeSectionOrder(sequence.sectionOrder)
   return (sequence.scenes || [])
     .map(scene => assembleSceneText(
       scene,
       characters.length ? characters : undefined,
-      sets.length ? sets : undefined
+      sets.length ? sets : undefined,
+      sectionOrder
     ))
     .filter(Boolean)
     .join('\n\n\n')
@@ -478,6 +513,7 @@ export function normalizePromptSequence(raw: unknown): PromptSequence | null {
   return {
     id: String(rec.id || '').trim() || newId(),
     name,
+    sectionOrder: normalizeSectionOrder(rec.sectionOrder),
     characters,
     sets,
     scenes,