From b6eef6a5119084c83630c5acb2f94e70eacb807f Mon Sep 17 00:00:00 2001
From: Towsty <ianjmcarr@gmail.com>
Date: Sat, 3 Oct 2026 22:28:44 -0500
Subject: [PATCH] Replace Prompt Builder beats with complete set framings.

Sets are places with labeled full-text framings; selecting a framing copies only that text, and legacy beat-only sets migrate to a wide framing.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 pages/prompt-builder.vue        | 1744 +++++++++++++++----------------
 tests/prompt-sequences.test.mjs |  146 +--
 utils/promptSequences.ts        |  174 +--
 3 files changed, 1058 insertions(+), 1006 deletions(-)

diff --git a/pages/prompt-builder.vue b/pages/prompt-builder.vue
index 1809983..abeba0e 100644
--- a/pages/prompt-builder.vue
+++ b/pages/prompt-builder.vue
@@ -1,876 +1,868 @@
-<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 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>
-            <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"
-            >
-            <textarea
-              v-model="set.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">Beats</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="addBeat(sIndex)"
-                >
-                  Add beat
-                </button>
-              </div>
-              <div
-                v-for="(beat, bIndex) in set.beats"
-                :key="beat.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">Beat {{ bIndex + 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="clearBeat(sIndex, bIndex)">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="removeBeat(sIndex, bIndex)">Remove</button>
-                  </div>
-                </div>
-                <input
-                  v-model="beat.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="Beat name (not copied)"
-                >
-                <textarea
-                  v-model="beat.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="Beat text"
-                />
-                <div class="flex flex-wrap items-center gap-x-3 gap-y-1">
-                  <span class="text-[11px] text-zinc-500">Framing</span>
-                  <label
-                    v-for="size in PROMPT_SEQUENCE_SHOT_SIZES"
-                    :key="size"
-                    class="flex items-center gap-1.5 text-[11px] text-zinc-400"
-                  >
-                    <input
-                      type="checkbox"
-                      class="accent-amber-400"
-                      :checked="isBeatFraming(beat, size)"
-                      @change="toggleBeatFraming(beat, size, ($event.target as HTMLInputElement).checked)"
-                    >
-                    {{ size }}
-                  </label>
-                </div>
-              </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>
-
-          <label class="block text-sm">
-            <span class="mb-1 block font-medium text-zinc-300">Shot size</span>
-            <select
-              v-model="activeScene.shotSize"
-              class="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"
-            >
-              <option value="">Any</option>
-              <option v-for="size in PROMPT_SEQUENCE_SHOT_SIZES" :key="size" :value="size">
-                {{ size }}
-              </option>
-            </select>
-            <p class="mt-1 text-[11px] text-zinc-500">
-              Medium drops beats not tagged medium; untagged beats always copy. Empty shot size includes every beat.
-            </p>
-          </label>
-
-          <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 in this image.</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"
-            >
-              <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>
-            </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,
-  PromptSequenceBeat,
-  PromptSequenceCharacter,
-  PromptSequenceScene,
-  PromptSequenceSet
-} from '~/utils/promptSequences'
-import {
-  PROMPT_SEQUENCE_SHOT_SIZES,
-  assembleSceneText,
-  assembleSequenceText,
-  cloneSceneForNext,
-  emptyBeat,
-  emptyCharacter,
-  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
-
-type ShotSize = typeof PROMPT_SEQUENCE_SHOT_SIZES[number]
-
-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 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,
-    beats: (set.beats?.length ? set.beats : [emptyBeat()]).map(beat => ({ ...emptyBeat(), ...beat }))
-  }))
-  scenes.value = (normalized.scenes?.length ? normalized.scenes : [emptyScene(1, characters.value, sets.value)]).map((scene, index) => ({
-    ...emptyScene(index + 1, characters.value, sets.value),
-    ...scene,
-    shotSize: scene.shotSize || '',
-    setStates: (scene.setStates || []).map(state => ({
-      setId: state.setId,
-      on: state.on !== false
-    })),
-    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.description = ''
-  set.beats = [emptyBeat()]
-}
-
-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 addBeat(setIndex: number) {
-  const set = sets.value[setIndex]
-  if (!set) return
-  set.beats.push(emptyBeat())
-}
-
-function removeBeat(setIndex: number, beatIndex: number) {
-  const set = sets.value[setIndex]
-  if (!set) return
-  set.beats.splice(beatIndex, 1)
-}
-
-function clearBeat(setIndex: number, beatIndex: number) {
-  const beat = sets.value[setIndex]?.beats[beatIndex]
-  if (!beat) return
-  beat.name = ''
-  beat.text = ''
-  beat.framings = []
-}
-
-function isBeatFraming(beat: PromptSequenceBeat, size: ShotSize) {
-  return beat.framings.includes(size)
-}
-
-function toggleBeatFraming(beat: PromptSequenceBeat, size: ShotSize, checked: boolean) {
-  if (checked) {
-    if (!beat.framings.includes(size)) beat.framings.push(size)
-  } else {
-    beat.framings = beat.framings.filter(item => item !== size)
-  }
-}
-
-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 })
-    return
-  }
-  state.on = on
-}
-
-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 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>

diff --git a/tests/prompt-sequences.test.mjs b/tests/prompt-sequences.test.mjs
index 7a687ca..f65b3a8 100644
--- a/tests/prompt-sequences.test.mjs
+++ b/tests/prompt-sequences.test.mjs
@@ -23,11 +23,10 @@ const {
   emptyCharacter,
   emptyOutfit,
   emptySet,
-  emptyBeat,
+  emptyFraming,
   cloneSceneForNext,
   normalizePromptSequence,
-  ensureSceneStatesForCharacters,
-  beatMatchesShotSize
+  ensureSceneStatesForCharacters
 } = await import(pathToFileURL(tmp).href)
 unlinkSync(tmp)
 
@@ -39,84 +38,112 @@ test('formatCharacterLine covers name/description and outfit', () => {
   )
 })
 
-test('shot size filters beats; untagged always included; tags never copied', () => {
+test('selecting a framing copies only that framing text; labels never appear', () => {
+  const wide = { ...emptyFraming('wide'), id: 'f-wide', text: 'open courtyard at dawn' }
+  const medium = { ...emptyFraming('medium'), id: 'f-med', text: 'courtyard from the arch' }
+  const narrow = { ...emptyFraming('narrow'), id: 'f-nar', text: 'door latch detail' }
   const set = {
     ...emptySet(),
     id: 's1',
-    name: 'BadgeSet',
-    description: 'studio backdrop',
-    beats: [
-      { ...emptyBeat(), id: 'b1', name: 'WideBeat', text: 'wide only line', framings: ['wide'] },
-      { ...emptyBeat(), id: 'b2', name: 'WideMed', text: 'wide and medium', framings: ['wide', 'medium'] },
-      { ...emptyBeat(), id: 'b3', name: 'Always', text: 'untagged beat', framings: [] },
-      { ...emptyBeat(), id: 'b4', name: 'CU', text: 'close only', framings: ['close-up'] }
-    ]
+    name: 'Courtyard',
+    framings: [wide, medium, narrow]
   }
-  const sceneMedium = {
+  const base = {
     style: 'style',
     settings: 'settings',
-    shotSize: 'medium',
-    setStates: [{ setId: 's1', on: true }],
     characterStates: [],
     prompt: 'prompt'
   }
-  const mediumText = assembleSceneText(sceneMedium, [], [set])
-  assert.equal(
-    mediumText,
-    'style\n\nsettings\n\nstudio backdrop\nwide and medium\nuntagged beat\n\nprompt'
-  )
-  assert.ok(!mediumText.includes('wide only'))
-  assert.ok(!mediumText.includes('close only'))
-  assert.ok(!mediumText.includes('BadgeSet'))
-  assert.ok(!mediumText.includes('WideBeat'))
-  assert.ok(!mediumText.includes('close-up'))
-  assert.ok(!/\bwide\b/.test(mediumText.replace('wide and medium', '')))
+  const mediumText = assembleSceneText({
+    ...base,
+    setStates: [{ setId: 's1', on: true, framingId: 'f-med' }]
+  }, [], [set])
+  assert.equal(mediumText, 'style\n\nsettings\n\ncourtyard from the arch\n\nprompt')
+  assert.ok(!mediumText.includes('open courtyard'))
+  assert.ok(!mediumText.includes('door latch'))
+  assert.ok(!mediumText.includes('Courtyard'))
+  assert.ok(!mediumText.includes('wide'))
+  assert.ok(!mediumText.includes('medium'))
+  assert.ok(!mediumText.includes('narrow'))
 
-  const sceneClose = { ...sceneMedium, shotSize: 'close-up' }
-  const closeText = assembleSceneText(sceneClose, [], [set])
-  assert.equal(
-    closeText,
-    'style\n\nsettings\n\nstudio backdrop\nuntagged beat\nclose only\n\nprompt'
-  )
+  const narrowText = assembleSceneText({
+    ...base,
+    setStates: [{ setId: 's1', on: true, framingId: 'f-nar' }]
+  }, [], [set])
+  assert.equal(narrowText, 'style\n\nsettings\n\ndoor latch detail\n\nprompt')
+  assert.ok(!narrowText.includes('open courtyard'))
+  assert.ok(!narrowText.includes('from the arch'))
 
-  const sceneAny = { ...sceneMedium, shotSize: '' }
-  const anyText = assembleSceneText(sceneAny, [], [set])
-  assert.ok(anyText.includes('wide only line'))
-  assert.ok(anyText.includes('wide and medium'))
-  assert.ok(anyText.includes('untagged beat'))
-  assert.ok(anyText.includes('close only'))
-
-  assert.equal(beatMatchesShotSize({ framings: ['wide'] }, 'medium'), false)
-  assert.equal(beatMatchesShotSize({ framings: [] }, 'medium'), true)
+  const noneText = assembleSceneText({
+    ...base,
+    setStates: [{ setId: 's1', on: true, framingId: null }]
+  }, [], [set])
+  assert.equal(noneText, 'style\n\nsettings\n\nprompt')
 })
 
-test('off set omitted; copy scene is one scene; sequence join is double blank', () => {
-  const set = {
-    ...emptySet(),
-    id: 's1',
-    description: 'set desc',
-    beats: [{ ...emptyBeat(), text: 'beat', framings: [] }]
-  }
+test('off set is omitted; sequence join is double blank', () => {
+  const framing = { ...emptyFraming('wide'), id: 'f1', text: 'set text' }
+  const set = { ...emptySet(), id: 's1', name: 'Place', framings: [framing] }
   const scene1 = {
     style: 'a',
     settings: '',
-    shotSize: '',
-    setStates: [{ setId: 's1', on: true }],
+    setStates: [{ setId: 's1', on: true, framingId: 'f1' }],
     characterStates: [],
     prompt: 'p1'
   }
   const scene2 = {
     style: 'b',
     settings: '',
-    shotSize: '',
-    setStates: [{ setId: 's1', on: false }],
+    setStates: [{ setId: 's1', on: false, framingId: 'f1' }],
     characterStates: [],
     prompt: 'p2'
   }
   assert.equal(assembleSceneText(scene2, [], [set]), 'b\n\np2')
   const full = assembleSequenceText({ sets: [set], scenes: [scene1, scene2] })
-  assert.equal(full, 'a\n\nset desc\nbeat\n\np1\n\n\nb\n\np2')
-  assert.equal(assembleSceneText(scene1, [], [set]), 'a\n\nset desc\nbeat\n\np1')
+  assert.equal(full, 'a\n\nset text\n\np1\n\n\nb\n\np2')
+  assert.ok(!full.includes('Place'))
+  assert.ok(!full.includes('wide'))
+})
+
+test('legacy beat-only set still opens as one wide framing', () => {
+  const legacy = normalizePromptSequence({
+    id: 'seq1',
+    name: 'Old beats',
+    sets: [{
+      id: 's1',
+      name: 'Hall',
+      description: 'stone walls',
+      beats: [
+        { id: 'b1', name: 'Beat1', text: 'first beat', framings: ['wide'] },
+        { id: 'b2', name: 'Beat2', text: 'second beat', framings: ['medium'] }
+      ]
+    }],
+    scenes: [{
+      id: 'sc1',
+      title: 'Scene 1',
+      style: 'oil',
+      settings: '',
+      shotSize: 'wide',
+      setStates: [{ setId: 's1', on: true }],
+      prompt: 'walk',
+      characters: []
+    }],
+    characters: [{ id: 'x', name: 'Ada', description: 'tall', outfits: [] }],
+    createdAt: 1,
+    updatedAt: 1
+  })
+  assert.equal(legacy.sets.length, 1)
+  assert.equal(legacy.sets[0].framings.length, 1)
+  assert.equal(legacy.sets[0].framings[0].label, 'wide')
+  assert.ok(legacy.sets[0].framings[0].text.includes('stone walls'))
+  assert.ok(legacy.sets[0].framings[0].text.includes('first beat'))
+  assert.ok(legacy.sets[0].framings[0].text.includes('second beat'))
+  assert.equal(legacy.scenes[0].setStates[0].framingId, legacy.sets[0].framings[0].id)
+  const text = assembleSequenceText(legacy)
+  assert.ok(text.includes('stone walls'))
+  assert.ok(text.includes('first beat'))
+  assert.ok(!text.includes('Hall'))
+  assert.ok(!text.includes('Beat1'))
 })
 
 test('legacy sequence without sets still assembles', () => {
@@ -137,19 +164,17 @@ test('legacy sequence without sets still assembles', () => {
     updatedAt: 1
   })
   assert.deepEqual(legacy.sets, [])
-  assert.equal(legacy.scenes[0].shotSize, '')
-  const text = assembleSequenceText(legacy)
-  assert.equal(text, 'oil\n\nAda: tall\n\nwalk')
+  assert.equal(assembleSequenceText(legacy), 'oil\n\nAda: tall\n\nwalk')
 })
 
-test('cloneSceneForNext copies shotSize and setStates', () => {
+test('cloneSceneForNext copies setStates including framingId', () => {
   const sets = [emptySet()]
   const first = emptyScene(1, [], sets)
-  first.shotSize = 'close-up'
   first.setStates[0].on = false
+  first.setStates[0].framingId = sets[0].framings[0].id
   const next = cloneSceneForNext(first, 2)
-  assert.equal(next.shotSize, 'close-up')
   assert.equal(next.setStates[0].on, false)
+  assert.equal(next.setStates[0].framingId, sets[0].framings[0].id)
   assert.equal(next.setStates[0].setId, sets[0].id)
 })
 
@@ -164,7 +189,6 @@ test('character outfit and off still work with sets', () => {
   const text = assembleSceneText({
     style: '',
     settings: '',
-    shotSize: '',
     setStates: [],
     characterStates: [{ characterId: 'c1', on: true, outfitId: 'o1' }],
     prompt: 'hi'
diff --git a/utils/promptSequences.ts b/utils/promptSequences.ts
index 065d982..ff7edf6 100644
--- a/utils/promptSequences.ts
+++ b/utils/promptSequences.ts
@@ -18,28 +18,26 @@ export type PromptSequenceCharacterState = {
   outfitId: string | null
 }
 
-export type PromptSequenceShotSize = '' | 'wide' | 'medium' | 'close-up' | 'detail'
+/** Suggested labels only — not a hard enum. */
+export const PROMPT_SEQUENCE_FRAMING_SUGGESTIONS = ['wide', 'medium', 'narrow'] as const
 
-export const PROMPT_SEQUENCE_SHOT_SIZES = ['wide', 'medium', 'close-up', 'detail'] as const
-
-export type PromptSequenceBeat = {
+export type PromptSequenceFraming = {
   id: string
-  name: string
+  label: string
   text: string
-  /** Empty = always include for any shot size. */
-  framings: Array<'wide' | 'medium' | 'close-up' | 'detail'>
 }
 
 export type PromptSequenceSet = {
   id: string
   name: string
-  description: string
-  beats: PromptSequenceBeat[]
+  framings: PromptSequenceFraming[]
 }
 
 export type PromptSequenceSetState = {
   setId: string
   on: boolean
+  /** Chosen framing for this set in this scene (like outfitId). Empty = copy nothing. */
+  framingId: string | null
 }
 
 export type PromptSequenceScene = {
@@ -47,7 +45,6 @@ export type PromptSequenceScene = {
   title: string
   style: string
   settings: string
-  shotSize: PromptSequenceShotSize
   setStates: PromptSequenceSetState[]
   characterStates: PromptSequenceCharacterState[]
   prompt: string
@@ -82,20 +79,20 @@ export function emptyCharacter(): PromptSequenceCharacter {
   return { id: newId(), name: '', description: '', outfits: [] }
 }
 
-export function emptyBeat(): PromptSequenceBeat {
-  return { id: newId(), name: '', text: '', framings: [] }
+export function emptyFraming(label = ''): PromptSequenceFraming {
+  return { id: newId(), label, text: '' }
 }
 
 export function emptySet(): PromptSequenceSet {
-  return { id: newId(), name: '', description: '', beats: [emptyBeat()] }
+  return { id: newId(), name: '', framings: [emptyFraming()] }
 }
 
 export function defaultCharacterState(characterId: string, on = true): PromptSequenceCharacterState {
   return { characterId, on, outfitId: null }
 }
 
-export function defaultSetState(setId: string, on = true): PromptSequenceSetState {
-  return { setId, on }
+export function defaultSetState(setId: string, on = true, framingId: string | null = null): PromptSequenceSetState {
+  return { setId, on, framingId }
 }
 
 export function emptyScene(
@@ -108,8 +105,7 @@ export function emptyScene(
     title: `Scene ${Math.max(1, index)}`,
     style: '',
     settings: '',
-    shotSize: '',
-    setStates: sets.map(set => defaultSetState(set.id, true)),
+    setStates: sets.map(set => defaultSetState(set.id, true, null)),
     characterStates: characters.map(character => defaultCharacterState(character.id, true)),
     prompt: ''
   }
@@ -121,10 +117,10 @@ export function cloneSceneForNext(previous: PromptSequenceScene, nextIndex: numb
     title: `Scene ${nextIndex}`,
     style: previous.style,
     settings: previous.settings,
-    shotSize: previous.shotSize || '',
     setStates: (previous.setStates || []).map(state => ({
       setId: state.setId,
-      on: !!state.on
+      on: !!state.on,
+      framingId: state.framingId || null
     })),
     characterStates: (previous.characterStates || []).map(state => ({
       characterId: state.characterId,
@@ -160,19 +156,9 @@ export function formatCharacterLine(
   return `${base}. Outfit: ${outfitText}`
 }
 
-export function beatMatchesShotSize(
-  beat: { framings?: string[] },
-  shotSize: string = ''
-) {
-  const framings = Array.isArray(beat.framings) ? beat.framings.filter(Boolean) : []
-  if (!framings.length) return true
-  if (!shotSize) return true
-  return framings.includes(shotSize)
-}
-
-/** Set description + matching beat texts (one per line). No set/beat names or framing tags. */
+/** Selected framing text for each on set. No set name, no framing label. */
 export function assembleSetBlock(
-  scene: { shotSize?: string; setStates?: PromptSequenceSetState[] },
+  scene: { setStates?: PromptSequenceSetState[] },
   sets: PromptSequenceSet[] = []
 ) {
   const states = scene.setStates || []
@@ -181,13 +167,11 @@ export function assembleSetBlock(
   for (const set of sets) {
     const state = stateById.get(set.id)
     if (state && !state.on) continue
-    const description = String(set.description || '').trim()
-    const beatLines = (set.beats || [])
-      .filter(beat => beatMatchesShotSize(beat, scene.shotSize || ''))
-      .map(beat => String(beat.text || '').trim())
-      .filter(Boolean)
-    const lines = [description, ...beatLines].filter(Boolean)
-    if (lines.length) chunks.push(lines.join('\n'))
+    const framingId = state?.framingId || null
+    if (!framingId) continue
+    const framing = (set.framings || []).find(item => item.id === framingId)
+    const text = String(framing?.text || '').trim()
+    if (text) chunks.push(text)
   }
   return chunks.join('\n')
 }
@@ -216,7 +200,6 @@ export function assembleSceneText(
     style?: string
     settings?: string
     prompt?: string
-    shotSize?: string
     setStates?: PromptSequenceSetState[]
     characterStates?: PromptSequenceCharacterState[]
     /** Legacy per-scene characters (migration / old tests). */
@@ -256,7 +239,6 @@ export function assembleSequenceText(sequence: {
     style?: string
     settings?: string
     prompt?: string
-    shotSize?: string
     setStates?: PromptSequenceSetState[]
     characterStates?: PromptSequenceCharacterState[]
     characters?: Array<{ name?: string; description?: string }>
@@ -287,12 +269,6 @@ export function normalizePromptSequenceTitle(raw: unknown, fallback: string) {
   return title || fallback
 }
 
-export function normalizeShotSize(raw: unknown): PromptSequenceShotSize {
-  const value = String(raw || '').trim()
-  if (value === 'wide' || value === 'medium' || value === 'close-up' || value === 'detail') return value
-  return ''
-}
-
 export function normalizeOutfit(raw: unknown): PromptSequenceOutfit {
   const rec = (raw && typeof raw === 'object' ? raw : {}) as Record<string, unknown>
   return {
@@ -313,29 +289,46 @@ export function normalizeCharacter(raw: unknown): PromptSequenceCharacter {
   }
 }
 
-export function normalizeBeat(raw: unknown): PromptSequenceBeat {
+export function normalizeFraming(raw: unknown): PromptSequenceFraming {
   const rec = (raw && typeof raw === 'object' ? raw : {}) as Record<string, unknown>
-  const framings = Array.isArray(rec.framings)
-    ? [...new Set(rec.framings.map(item => String(item || '').trim()).filter((item): item is 'wide' | 'medium' | 'close-up' | 'detail' =>
-      item === 'wide' || item === 'medium' || item === 'close-up' || item === 'detail'
-    ))]
-    : []
   return {
     id: String(rec.id || '').trim() || newId(),
-    name: String(rec.name || '').trim().slice(0, 120),
-    text: normalizePromptSequenceField(rec.text),
-    framings
+    label: String(rec.label || '').trim().slice(0, 120),
+    text: normalizePromptSequenceField(rec.text)
   }
 }
 
+/** Fold legacy beat-only sets into one framing labeled "wide". */
+function framingsFromLegacyBeats(rec: Record<string, unknown>): PromptSequenceFraming[] {
+  const parts: string[] = []
+  const description = normalizePromptSequenceField(rec.description).trim()
+  if (description) parts.push(description)
+  const beats = Array.isArray(rec.beats) ? rec.beats : []
+  for (const beat of beats) {
+    if (!beat || typeof beat !== 'object') continue
+    const text = normalizePromptSequenceField((beat as Record<string, unknown>).text).trim()
+    if (text) parts.push(text)
+  }
+  if (!parts.length) return [emptyFraming()]
+  return [{ id: newId(), label: 'wide', text: parts.join('\n') }]
+}
+
 export function normalizeSet(raw: unknown): PromptSequenceSet {
   const rec = (raw && typeof raw === 'object' ? raw : {}) as Record<string, unknown>
-  const beats = Array.isArray(rec.beats) ? rec.beats.map(normalizeBeat) : []
+  let framings: PromptSequenceFraming[]
+  if (Array.isArray(rec.framings) && rec.framings.length) {
+    framings = rec.framings.map(normalizeFraming)
+  } else if (Array.isArray(rec.beats) && rec.beats.length) {
+    framings = framingsFromLegacyBeats(rec)
+  } else if (String(rec.description || '').trim()) {
+    framings = framingsFromLegacyBeats(rec)
+  } else {
+    framings = [emptyFraming()]
+  }
   return {
     id: String(rec.id || '').trim() || newId(),
     name: String(rec.name || '').trim().slice(0, 120),
-    description: normalizePromptSequenceField(rec.description),
-    beats: beats.length ? beats : [emptyBeat()]
+    framings
   }
 }
 
@@ -351,11 +344,30 @@ export function normalizeCharacterState(raw: unknown, fallbackCharacterId = ''):
   }
 }
 
-export function normalizeSetState(raw: unknown, fallbackSetId = ''): PromptSequenceSetState {
+export function normalizeSetState(
+  raw: unknown,
+  fallbackSetId = '',
+  sets: PromptSequenceSet[] = [],
+  legacyShotSize = ''
+): PromptSequenceSetState {
   const rec = (raw && typeof raw === 'object' ? raw : {}) as Record<string, unknown>
+  const setId = String(rec.setId || fallbackSetId || '').trim()
+  const framingRaw = rec.framingId
+  let framingId = framingRaw == null || framingRaw === '' ? null : String(framingRaw).trim() || null
+  const set = sets.find(item => item.id === setId)
+  if (framingId && set && !set.framings.some(framing => framing.id === framingId)) {
+    framingId = null
+  }
+  if (!framingId && legacyShotSize && set) {
+    const match = set.framings.find(
+      framing => framing.label.trim().toLowerCase() === legacyShotSize.trim().toLowerCase()
+    )
+    if (match) framingId = match.id
+  }
   return {
-    setId: String(rec.setId || fallbackSetId || '').trim(),
-    on: rec.on === undefined ? true : !!rec.on
+    setId,
+    on: rec.on === undefined ? true : !!rec.on,
+    framingId
   }
 }
 
@@ -400,16 +412,32 @@ function syncCharacterStates(
 function syncSetStates(
   statesRaw: unknown,
   sets: PromptSequenceSet[],
-  defaultOn = true
+  defaultOn = true,
+  legacyShotSize = ''
 ): PromptSequenceSetState[] {
   const incoming = Array.isArray(statesRaw)
-    ? statesRaw.map(state => normalizeSetState(state)).filter(state => state.setId)
+    ? statesRaw.map(state => normalizeSetState(state, '', sets, legacyShotSize)).filter(state => state.setId)
     : []
   const byId = new Map(incoming.map(state => [state.setId, state]))
   return sets.map((set) => {
     const existing = byId.get(set.id)
-    if (existing) return { setId: set.id, on: existing.on }
-    return defaultSetState(set.id, defaultOn)
+    if (existing) {
+      const framingOk = existing.framingId
+        && set.framings.some(framing => framing.id === existing.framingId)
+      return {
+        setId: set.id,
+        on: existing.on,
+        framingId: framingOk ? existing.framingId : null
+      }
+    }
+    let framingId: string | null = null
+    if (legacyShotSize) {
+      const match = set.framings.find(
+        framing => framing.label.trim().toLowerCase() === legacyShotSize.trim().toLowerCase()
+      )
+      if (match) framingId = match.id
+    }
+    return defaultSetState(set.id, defaultOn, framingId)
   })
 }
 
@@ -420,13 +448,13 @@ export function normalizeScene(
   sets: PromptSequenceSet[] = []
 ): PromptSequenceScene {
   const rec = (raw && typeof raw === 'object' ? raw : {}) as Record<string, unknown>
+  const legacyShotSize = String(rec.shotSize || '').trim()
   return {
     id: String(rec.id || '').trim() || newId(),
     title: normalizePromptSequenceTitle(rec.title, `Scene ${index + 1}`),
     style: normalizePromptSequenceField(rec.style),
     settings: normalizePromptSequenceField(rec.settings),
-    shotSize: normalizeShotSize(rec.shotSize),
-    setStates: syncSetStates(rec.setStates, sets, true),
+    setStates: syncSetStates(rec.setStates, sets, true, legacyShotSize),
     characterStates: syncCharacterStates(rec.characterStates, characters, true),
     prompt: normalizePromptSequenceField(rec.prompt)
   }
@@ -493,11 +521,19 @@ export function ensureSceneStatesForSets(
     const byId = new Map((scene.setStates || []).map(state => [state.setId, state]))
     scene.setStates = sets.map((set) => {
       const existing = byId.get(set.id)
-      if (existing) return existing
+      if (existing) {
+        const framingOk = existing.framingId
+          && set.framings.some(framing => framing.id === existing.framingId)
+        return {
+          setId: set.id,
+          on: existing.on,
+          framingId: framingOk ? existing.framingId : null
+        }
+      }
       const on = newSetId && set.id === newSetId
         ? i === turnOnIndex
         : true
-      return defaultSetState(set.id, on)
+      return defaultSetState(set.id, on, null)
     })
   }
 }