Add Prompt Builder sets/framing and harden mobile draft look settings.

Sets and beats filter by shot size; scenes reorder/delete; portrait links Prompt Builder; landscape queue collapses; per-engine look settings and prompt Clear persist across iOS resumes.
2026-10-03 19:31:22 -05:00
parent 7799529788
commit a8ae61704e
9 changed files with 1441 additions and 760 deletions
@@ -686,6 +686,10 @@
  flex-direction: column;
 }

+.queue-col[data-collapsed='1'] {
+  min-width: 0;
+}
+
 .queue-head {
  display: flex;
  flex-shrink: 0;
@@ -695,6 +699,24 @@
  font-weight: 650;
 }

+.queue-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-weight: 650;
+  cursor: pointer;
+  padding: 0;
+}
+
+.queue-toggle-mark {
+  color: var(--muted);
+  font-size: 12px;
+}
+
 .queue-badge {
  display: inline-grid;
  min-width: 1.25rem;
@@ -120,7 +120,10 @@
      </div>

      <label>
-       <span class="field-label">Prompt</span>
+       <span class="field-label flex items-center justify-between gap-2">
+        Prompt
+        <button type="button" class="text-[11px] font-normal text-[var(--muted)] hover:text-[var(--amber)]" @click.prevent="clearPrompt">Clear</button>
+       </span>
       <textarea
        ref="promptArea"
        v-model="form.promptSections.action"
@@ -373,12 +376,15 @@
   </section>

   <!-- RIGHT queue -->
-   <aside class="bench-panel queue-col">
+   <aside class="bench-panel queue-col" :data-collapsed="queueCollapsed ? '1' : undefined">
    <div class="queue-head">
-     Queue
-     <span class="queue-badge">{{ queueCount }}</span>
+     <button type="button" class="queue-toggle" :aria-expanded="queueCollapsed ? 'false' : 'true'" @click="queueCollapsed=!queueCollapsed">
+      Queue
+      <span class="queue-badge">{{ queueCount }}</span>
+      <span class="queue-toggle-mark" aria-hidden="true">{{ queueCollapsed ? '▸' : '▾' }}</span>
+     </button>
    </div>
-    <div class="queue-list">
+    <div v-show="!queueCollapsed" class="queue-list">
     <div
      v-for="card in queueCards"
      :key="card.id"
@@ -410,7 +416,7 @@
     </div>
     <p v-if="!queueCards.length" class="px-1 text-[var(--type-sm)] text-[var(--muted)]">No active jobs</p>
    </div>
-    <div class="queue-foot">
+    <div v-show="!queueCollapsed" class="queue-foot">
     <button type="button" class="generate-cta" :disabled="submitting" @click="queue">
      <span aria-hidden="true">▶</span>
      {{ submitting ? 'Queuing…' : (batchMode && imagePromptCount > 1 ? `Generate · ${imagePromptCount} prompts` : 'Generate') }}
@@ -506,7 +512,14 @@ const NEG_STORAGE_KEY='studio2-negative-chips'
 const ENHANCE_STORAGE_KEY='studio2-qwen21-enhance-prompt'
 const TURBO_STORAGE_KEY='studio2-qwen21-turbo'
 const BENCH_DRAFT_KEY='aigen:bench-draft'
+const BENCH_DRAFT_SESSION_KEY='aigen:bench-draft:session'
 let draftTimer:ReturnType<typeof setTimeout>|null=null
+let restoringDraft=false
+type EngineLook={steps:number;cfg:number;aspect:string;seed:number|null;seedMode:string;loraStack:any[]}
+function defaultEngineLook(engine:string):EngineLook{
+ if(engine==='qwen21') return {steps:25,cfg:1,aspect:'auto',seed:null,seedMode:'random',loraStack:[]}
+ return {steps:24,cfg:4,aspect:'auto',seed:null,seedMode:'random',loraStack:[]}
+}
 function readStoredNegatives(){
 if(!import.meta.client)return [...defaultNegatives]
 try{
@@ -537,8 +550,9 @@ function writeStoredTurbo(on:boolean){
 try{localStorage.setItem(TURBO_STORAGE_KEY,on?'1':'0')}catch{/* ignore */}
 }
 function benchDraftPayload(){
+ if(['flux','krea','qwen21'].includes(form.engine)) rememberEngineSampling(form.engine)
 return {
-  v:1,
+  v:2,
  mode:form.mode,
  engine:form.engine,
  folderId:form.folderId,
@@ -563,67 +577,95 @@ function benchDraftPayload(){
  batchMode:!!batchMode.value,
  eyeOpen:!!eyeOpen.value,
  hideInputs:!!hideInputs.value,
+  queueCollapsed:!!queueCollapsed.value,
+  selectedId:selected.value?.id||'',
  music:structuredClone({tags:music.tags,lyrics:music.lyrics,duration:music.duration,seed:music.seed,name:music.name})
 }
 }
+function writeDraftStores(payload:string){
+ try{localStorage.setItem(BENCH_DRAFT_KEY,payload)}catch{/* ignore */}
+ try{sessionStorage.setItem(BENCH_DRAFT_SESSION_KEY,payload)}catch{/* ignore */}
+}
+function readDraftRaw(){
+ let session=''
+ let local=''
+ try{session=sessionStorage.getItem(BENCH_DRAFT_SESSION_KEY)||''}catch{/* ignore */}
+ try{local=localStorage.getItem(BENCH_DRAFT_KEY)||''}catch{/* ignore */}
+ return session || local
+}
 function saveBenchDraft(immediate=false){
- if(!import.meta.client)return
+ if(!import.meta.client || restoringDraft)return
 const write=()=>{
-  try{localStorage.setItem(BENCH_DRAFT_KEY,JSON.stringify(benchDraftPayload()))}catch{/* ignore */}
+  try{writeDraftStores(JSON.stringify(benchDraftPayload()))}catch{/* ignore */}
 }
 if(draftTimer)clearTimeout(draftTimer)
 if(immediate){write();return}
 draftTimer=setTimeout(write,400)
 }
+function mergeEngineLook(row:any, fallback:EngineLook):EngineLook{
+ return {
+  steps:Number.isFinite(Number(row?.steps))?Number(row.steps):fallback.steps,
+  cfg:Number.isFinite(Number(row?.cfg))?Number(row.cfg):fallback.cfg,
+  aspect:typeof row?.aspect==='string' && row.aspect ? row.aspect : fallback.aspect,
+  seed:row?.seed==null || row?.seed==='' ? null : Number(row.seed),
+  seedMode:row?.seedMode==='locked'?'locked':'random',
+  loraStack:Array.isArray(row?.loraStack)?structuredClone(row.loraStack):structuredClone(fallback.loraStack)
+ }
+}
 function restoreBenchDraft(){
 if(!import.meta.client)return
- let raw=''
- try{raw=localStorage.getItem(BENCH_DRAFT_KEY)||''}catch{return}
+ const raw=readDraftRaw()
 if(!raw)return
 let draft:any
 try{draft=JSON.parse(raw)}catch{return}
- if(!draft||draft.v!==1)return
- if(draft.mode)form.mode=draft.mode
- if(draft.engine)form.engine=draft.engine
- if(draft.folderId)form.folderId=draft.folderId
- if(draft.enhancePrompt!=null)form.enhancePrompt=!!draft.enhancePrompt
- if(draft.turbo!=null)form.turbo=!!draft.turbo
- if(draft.lockFace!=null)form.lockFace=!!draft.lockFace
- if(draft.lockOutfit!=null)form.lockOutfit=!!draft.lockOutfit
- if(draft.promptSections)form.promptSections=sectionsFrom(draft.promptSections)
- if(Array.isArray(draft.photos))form.photos=draft.photos.filter((p:any)=>p?.stillId).map((p:any)=>({stillId:String(p.stillId),role:String(p.role||'change')}))
- if(draft.imageStyles)form.imageStyles={positive:draft.imageStyles.positive||[],negative:draft.imageStyles.negative||[]}
- if(draft.settings){
-  Object.assign(form.settings,{
-   aspect:draft.settings.aspect||form.settings.aspect,
-   seed:draft.settings.seed ?? form.settings.seed,
-   seedMode:draft.settings.seedMode||form.settings.seedMode,
-   steps:draft.settings.steps ?? form.settings.steps,
-   cfg:draft.settings.cfg ?? form.settings.cfg,
-   duration:draft.settings.duration ?? form.settings.duration,
-   fps:draft.settings.fps ?? form.settings.fps,
-   loraStack:Array.isArray(draft.settings.loraStack)?draft.settings.loraStack:form.settings.loraStack
-  })
- }
- if(draft.engineSampling && typeof draft.engineSampling==='object'){
-  for(const key of ['flux','krea','qwen21'] as const){
-   const row=draft.engineSampling[key]
-   if(row && Number.isFinite(Number(row.steps)) && Number.isFinite(Number(row.cfg))){
-    engineSampling[key]={steps:Number(row.steps),cfg:Number(row.cfg)}
+ if(!draft|| (draft.v!==1 && draft.v!==2))return
+ restoringDraft=true
+ try{
+  if(draft.engineSampling && typeof draft.engineSampling==='object'){
+   for(const key of ['flux','krea','qwen21'] as const){
+    const row=draft.engineSampling[key]
+    if(!row) continue
+    engineSampling[key]=mergeEngineLook(row, defaultEngineLook(key))
   }
  }
+  if(draft.mode)form.mode=draft.mode
+  if(draft.engine)form.engine=draft.engine
+  if(draft.folderId)form.folderId=draft.folderId
+  if(draft.enhancePrompt!=null)form.enhancePrompt=!!draft.enhancePrompt
+  if(draft.turbo!=null)form.turbo=!!draft.turbo
+  if(draft.lockFace!=null)form.lockFace=!!draft.lockFace
+  if(draft.lockOutfit!=null)form.lockOutfit=!!draft.lockOutfit
+  if(draft.promptSections)form.promptSections=sectionsFrom(draft.promptSections)
+  if(Array.isArray(draft.photos))form.photos=draft.photos.filter((p:any)=>p?.stillId).map((p:any)=>({stillId:String(p.stillId),role:String(p.role||'change')}))
+  if(draft.imageStyles)form.imageStyles={positive:draft.imageStyles.positive||[],negative:draft.imageStyles.negative||[]}
+  if(draft.settings){
+   Object.assign(form.settings,{
+    aspect:draft.settings.aspect||form.settings.aspect,
+    seed:draft.settings.seed ?? form.settings.seed,
+    seedMode:draft.settings.seedMode||form.settings.seedMode,
+    steps:draft.settings.steps ?? form.settings.steps,
+    cfg:draft.settings.cfg ?? form.settings.cfg,
+    duration:draft.settings.duration ?? form.settings.duration,
+    fps:draft.settings.fps ?? form.settings.fps,
+    loraStack:Array.isArray(draft.settings.loraStack)?draft.settings.loraStack:form.settings.loraStack
+   })
+  }
+  if(['flux','krea','qwen21'].includes(form.engine)) applyEngineSampling(form.engine)
+  if(draft.batchMode!=null)batchMode.value=!!draft.batchMode
+  if(draft.eyeOpen!=null)eyeOpen.value=!!draft.eyeOpen
+  if(draft.hideInputs!=null)hideInputs.value=!!draft.hideInputs
+  if(draft.queueCollapsed!=null)queueCollapsed.value=!!draft.queueCollapsed
+  if(draft.music){
+   music.tags=String(draft.music.tags||music.tags)
+   music.lyrics=String(draft.music.lyrics||music.lyrics)
+   if(draft.music.duration!=null)music.duration=Number(draft.music.duration)||music.duration
+   if(draft.music.seed!=null)music.seed=String(draft.music.seed)
+   if(draft.music.name!=null)music.name=String(draft.music.name)
+  }
+  syncPhotosBindings()
+ } finally {
+  restoringDraft=false
 }
- if(draft.batchMode!=null)batchMode.value=!!draft.batchMode
- if(draft.eyeOpen!=null)eyeOpen.value=!!draft.eyeOpen
- if(draft.hideInputs!=null)hideInputs.value=!!draft.hideInputs
- if(draft.music){
-  music.tags=String(draft.music.tags||music.tags)
-  music.lyrics=String(draft.music.lyrics||music.lyrics)
-  if(draft.music.duration!=null)music.duration=Number(draft.music.duration)||music.duration
-  if(draft.music.seed!=null)music.seed=String(draft.music.seed)
-  if(draft.music.name!=null)music.name=String(draft.music.name)
- }
- syncPhotosBindings()
 }

 const xaigen=isXaigenStudio(useRuntimeConfig().public)
@@ -662,11 +704,12 @@ const route=useRoute()
 const tasks=['generate','edit','compose','refine','video','extend','music']
 const settingsOpen=ref(false),detailsOpen=ref(false),submitting=ref(false),error=ref(''),batchText=ref('')
 const batchMode=ref(false)
+const queueCollapsed=ref(false)
 const selectionPinned=ref(false)
-const engineSampling=reactive<Record<string,{steps:number;cfg:number}>>({
- flux:{steps:24,cfg:4},
- krea:{steps:24,cfg:4},
- qwen21:{steps:25,cfg:1}
+const engineSampling=reactive<Record<string,EngineLook>>({
+ flux:defaultEngineLook('flux'),
+ krea:defaultEngineLook('krea'),
+ qwen21:defaultEngineLook('qwen21')
 })
 const viewerVideo=ref<HTMLVideoElement|null>(null)
 const viewerMuted=ref(false)
@@ -696,22 +739,36 @@ function defaultSamplingFor(engine:string){
 }
 function rememberEngineSampling(engine:string){
 if(!['flux','krea','qwen21'].includes(engine)) return
+ const fallback=defaultEngineLook(engine)
 engineSampling[engine]={
-  steps:Number(form.settings.steps)||defaultSamplingFor(engine).steps,
-  cfg:Number(form.settings.cfg)||defaultSamplingFor(engine).cfg
+  steps:Number(form.settings.steps)||defaultSamplingFor(engine).steps||fallback.steps,
+  cfg:Number(form.settings.cfg)||defaultSamplingFor(engine).cfg||fallback.cfg,
+  aspect:String(form.settings.aspect||fallback.aspect),
+  seed:form.settings.seed==null || form.settings.seed==='' ? null : Number(form.settings.seed),
+  seedMode:form.settings.seedMode==='locked'?'locked':'random',
+  loraStack:Array.isArray(form.settings.loraStack)?structuredClone(form.settings.loraStack):[]
 }
 }
 function applyEngineSampling(engine:string){
- const saved=engineSampling[engine]
+ if(!['flux','krea','qwen21'].includes(engine)) return
+ const saved=engineSampling[engine] || defaultEngineLook(engine)
 const fallback=defaultSamplingFor(engine)
- form.settings.steps=saved?.steps ?? fallback.steps
- form.settings.cfg=saved?.cfg ?? fallback.cfg
+ form.settings.steps=saved.steps ?? fallback.steps
+ form.settings.cfg=saved.cfg ?? fallback.cfg
+ form.settings.aspect=saved.aspect || form.settings.aspect || 'auto'
+ form.settings.seed=saved.seed
+ form.settings.seedMode=saved.seedMode || 'random'
+ form.settings.loraStack=Array.isArray(saved.loraStack)?structuredClone(saved.loraStack):[]
+}
+function clearPrompt(){
+ if(form.promptSections) form.promptSections.action=''
 }
 watch(engineOptions,opts=>{
 const current=opts.find(o=>o.value===form.engine)
 if(!current || current.disabled)form.engine=opts.find(o=>!o.disabled)?.value || form.engine
 })
 watch(()=>form.engine,(engine,prev)=>{
+ if(restoringDraft) return
 if(prev && prev!==engine) rememberEngineSampling(prev)
 if(['flux','krea','qwen21'].includes(engine)) applyEngineSampling(engine)
 if(engine==='qwen21'){
@@ -722,14 +779,17 @@ watch(()=>form.engine,(engine,prev)=>{
 watch(()=>form.enhancePrompt,on=>writeStoredEnhancePrompt(!!on))
 watch(()=>form.turbo,on=>{
 writeStoredTurbo(!!on)
- if(form.engine!=='qwen21')return
+ if(restoringDraft || form.engine!=='qwen21')return
 form.settings.steps=on?6:25
 form.settings.cfg=1
 rememberEngineSampling('qwen21')
 })
-watch(()=>[form.settings.steps,form.settings.cfg],()=>{
+watch(()=>[
+ form.settings.steps,form.settings.cfg,form.settings.aspect,form.settings.seed,form.settings.seedMode,form.settings.loraStack
+],()=>{
+ if(restoringDraft) return
 if(['flux','krea','qwen21'].includes(form.engine)) rememberEngineSampling(form.engine)
-})
+},{deep:true})
 watch(()=>[form.mode,form.engine],([mode,engine])=>{
 if(engine==='qwen21' && mode==='edit'){
  form.lockFace=false
@@ -1753,9 +1813,16 @@ async function fetchHealth(){
 watch(()=>[
 form.mode,form.engine,form.folderId,form.enhancePrompt,form.turbo,form.lockFace,form.lockOutfit,
 form.promptSections,form.photos,form.imageStyles,form.settings,
- eyeOpen.value,hideInputs.value,batchMode.value,
+ eyeOpen.value,hideInputs.value,batchMode.value,queueCollapsed.value,
 music.tags,music.lyrics,music.duration,music.seed,music.name
 ],()=>saveBenchDraft(),{deep:true})
+function onPageHide(){saveBenchDraft(true)}
+function onVisibilityFlush(){
+ if(typeof document!=='undefined' && document.visibilityState==='hidden') saveBenchDraft(true)
+}
+function onPageShow(event:PageTransitionEvent){
+ if(!event.persisted) restoreBenchDraft()
+}
 let timer:ReturnType<typeof setTimeout>,clock:ReturnType<typeof setInterval>,disposed=false
 onMounted(()=>{
 submitting.value=false
@@ -1791,6 +1858,9 @@ onMounted(()=>{
 if(import.meta.client){
  window.addEventListener('keydown',onStageHotkey)
  window.addEventListener('pointerdown',onStagePointerDown,true)
+  window.addEventListener('pagehide',onPageHide)
+  window.addEventListener('pageshow',onPageShow)
+  document.addEventListener('visibilitychange',onVisibilityFlush)
 }
 })
 onBeforeUnmount(()=>{
@@ -1800,6 +1870,9 @@ onBeforeUnmount(()=>{
  saveBenchDraft(true)
  window.removeEventListener('keydown',onStageHotkey)
  window.removeEventListener('pointerdown',onStagePointerDown,true)
+  window.removeEventListener('pagehide',onPageHide)
+  window.removeEventListener('pageshow',onPageShow)
+  document.removeEventListener('visibilitychange',onVisibilityFlush)
 }
 })

@@ -1828,6 +1901,7 @@ const mobileCtx=computed(()=>({
 eyeOpen:eyeOpen.value,
 hideInputs:hideInputs.value,
 photoFilledCount:photoFilledCount.value,
+ clearPrompt,
 openLibrary:()=>{libraryOpen.value=true},
 closeLibrary:()=>{libraryOpen.value=false},
 toggleHideInputs:()=>{hideInputs.value=!hideInputs.value;saveBenchDraft(true)},
@@ -1,5 +1,5 @@
 <template>
- <div class="m-shell" data-mobile="1">
+ <div class="m-shell" data-mobile="1" :data-queue-collapsed="queueRailCollapsed ? '1' : undefined">
  <header class="m-header">
   <span class="m-brand">{{ ctx.instanceName }}</span>
   <label class="m-crumb">
@@ -9,11 +9,15 @@
   </label>
   <span class="m-grow" />
   <span class="m-gpu" :data-tone="ctx.gpu.tone" :title="ctx.gpu.detail">● {{ ctx.gpuChipLabel }}</span>
-   <button type="button" class="m-chip" @click="toggleSheet('queue')">Queue {{ ctx.queueCount }}</button>
+   <button type="button" class="m-chip m-queue-chip-portrait" @click="toggleSheet('queue')">Queue {{ ctx.queueCount }}</button>
+   <button type="button" class="m-chip m-queue-chip-landscape" :aria-expanded="queueRailCollapsed ? 'false' : 'true'" @click="queueRailCollapsed=!queueRailCollapsed">
+    Queue {{ ctx.queueCount }} {{ queueRailCollapsed ? '▸' : '▾' }}
+   </button>
   <details class="m-more">
    <summary aria-label="More">⋯</summary>
    <div class="m-more-menu">
     <NuxtLink to="/library" @click="closeMenus">Library</NuxtLink>
+     <NuxtLink to="/prompt-builder" @click="closeMenus">Prompt Builder</NuxtLink>
     <NuxtLink to="/queue" @click="closeMenus">Queue</NuxtLink>
     <NuxtLink to="/settings" @click="closeMenus">Settings</NuxtLink>
    </div>
@@ -224,7 +228,8 @@
     <label class="m-label">Lyrics<textarea v-model="ctx.music.lyrics" rows="8" class="m-area" /></label>
    </template>
    <template v-else>
-     <label class="m-label">Prompt
+     <label class="m-label">
+      <span class="m-label-row">Prompt<button type="button" class="m-link" @click.stop="ctx.clearPrompt()">Clear</button></span>
      <textarea
       :value="ctx.form.promptSections.action"
       rows="5"
@@ -329,7 +334,7 @@
   </div>
  </aside>

-  <aside v-if="sheet==='queue'" class="m-sheet" role="dialog" aria-label="Queue">
+  <aside v-if="sheet==='queue'" class="m-sheet m-queue-sheet-portrait" role="dialog" aria-label="Queue">
   <button type="button" class="m-handle" aria-label="Close" @click="sheet=''" />
   <div class="m-sheet-head"><strong>Queue</strong><button type="button" @click="sheet=''">Done</button></div>
   <div class="m-sheet-body">
@@ -367,6 +372,33 @@
   </div>
  </aside>

+  <aside v-show="!queueRailCollapsed" class="m-queue-rail" aria-label="Queue">
+   <div class="m-sheet-head">
+    <strong>Queue</strong>
+    <button type="button" @click="queueRailCollapsed=true">Hide</button>
+   </div>
+   <div class="m-sheet-body">
+    <div
+     v-for="card in ctx.queueCards"
+     :key="'rail-'+card.id"
+     class="m-job"
+     :class="{ on: ctx.focusedJobId===card.id }"
+     @click="ctx.focusQueueCard(card)"
+    >
+     <div class="m-job-id">{{ card.code }}</div>
+     <div class="m-job-title">{{ card.title }}</div>
+     <div class="m-muted">{{ card.meta }}</div>
+     <div class="m-job-status">
+      <span>● {{ card.statusLabel }}</span>
+      <button v-if="card.cancelable" type="button" @click.stop="ctx.cancel(card.job)">Cancel</button>
+      <button v-else-if="card.dismissable" type="button" @click.stop="ctx.dismissFinishedCard(card)">Dismiss</button>
+     </div>
+    </div>
+    <p v-if="!ctx.queueCards.length" class="m-muted">No active jobs</p>
+    <button v-if="ctx.canClearFinished" type="button" class="m-link" @click="ctx.clearFinished">Clear finished</button>
+   </div>
+  </aside>
+
  <div
   v-if="promptEditorOpen"
   class="m-prompt-editor"
@@ -393,6 +425,7 @@ export type Studio2MobileCtx = Record<string, any>

 const props = defineProps<{ ctx: Studio2MobileCtx }>()
 const sheet = ref('')
+const queueRailCollapsed = ref(false)
 const touchStart = ref<{ x: number; y: number } | null>(null)
 const promptEditorOpen = ref(false)
 const promptEditorDraft = ref('')
@@ -725,6 +758,7 @@ watch(() => props.ctx.form.mode, () => { sheet.value = '' })
  gap: 10px;
 }
 .m-label { display: block; font-size: 11px; color: var(--muted); }
+.m-label-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
 .m-area, .m-input {
  width: 100%;
  margin-top: 4px;
@@ -800,6 +834,46 @@ watch(() => props.ctx.form.mode, () => { sheet.value = '' })
  font-size: 16px;
  font-weight: 600;
 }
+.m-queue-chip-landscape { display: none; }
+.m-queue-rail { display: none; }
+@media (orientation: landscape) {
+  .m-queue-chip-portrait,
+  .m-queue-sheet-portrait { display: none !important; }
+  .m-queue-chip-landscape { display: inline-flex; align-items: center; }
+  .m-shell { position: relative; }
+  .m-queue-rail {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 25;
+    display: flex;
+    width: min(42vw, 16rem);
+    flex-direction: column;
+    border-left: 1px solid var(--line);
+    background: var(--panel);
+  }
+  .m-shell[data-queue-collapsed='1'] .m-queue-rail { display: none; }
+  .m-queue-rail .m-sheet-head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px 12px;
+    border-bottom: 1px solid var(--line);
+  }
+  .m-queue-rail .m-sheet-body {
+    flex: 1;
+    min-height: 0;
+    overflow: auto;
+    padding: 10px 12px;
+  }
+  .m-stage { padding-right: 0; }
+  .m-shell:not([data-queue-collapsed='1']) .m-stage,
+  .m-shell:not([data-queue-collapsed='1']) .m-dock,
+  .m-shell:not([data-queue-collapsed='1']) .m-chips {
+    margin-right: min(42vw, 16rem);
+  }
+}
 .m-prompt-editor-area {
  flex: 1;
  width: 100%;
@@ -5,12 +5,14 @@ export default defineEventHandler(async (event) => {
  const body = await readBody<{
    name?: string
    characters?: unknown
+    sets?: unknown
    scenes?: unknown
    overwrite?: boolean
  }>(event).catch(() => ({}))
  const sequence = await savePromptSequence(owner, {
    name: body?.name || '',
    characters: body?.characters,
+    sets: body?.sets,
    scenes: body?.scenes,
    overwrite: body?.overwrite === true
  })
@@ -3,10 +3,11 @@ import { listPromptSequences, updatePromptSequence } from '~/server/utils/prompt
 export default defineEventHandler(async (event) => {
  const { owner } = assertLibraryOwner(event)
  const id = String(getRouterParam(event, 'id') || '')
-  const body = await readBody<{ name?: string; characters?: unknown; scenes?: unknown }>(event).catch(() => ({}))
+  const body = await readBody<{ name?: string; characters?: unknown; sets?: unknown; scenes?: unknown }>(event).catch(() => ({}))
  const sequence = await updatePromptSequence(owner, id, {
    name: body?.name,
    characters: body?.characters,
+    sets: body?.sets,
    scenes: body?.scenes
  })
  return {
@@ -5,11 +5,13 @@ import {
  normalizePromptSequence,
  normalizePromptSequenceName,
  normalizeCharacter,
+  normalizeSet,
  normalizeScene,
  emptyCharacter,
  emptyScene,
  type PromptSequence,
  type PromptSequenceCharacter,
+  type PromptSequenceSet,
  type PromptSequenceScene
 } from '~/utils/promptSequences'

@@ -62,9 +64,18 @@ function normalizeCharactersInput(raw: unknown): PromptSequenceCharacter[] {
  return raw.map(normalizeCharacter)
 }

-function normalizeScenesInput(raw: unknown, characters: PromptSequenceCharacter[]): PromptSequenceScene[] {
-  if (!Array.isArray(raw) || !raw.length) return [emptyScene(1, characters)]
-  return raw.map((scene, index) => normalizeScene(scene, index, characters))
+function normalizeSetsInput(raw: unknown): PromptSequenceSet[] {
+  if (!Array.isArray(raw)) return []
+  return raw.map(normalizeSet)
+}
+
+function normalizeScenesInput(
+  raw: unknown,
+  characters: PromptSequenceCharacter[],
+  sets: PromptSequenceSet[]
+): PromptSequenceScene[] {
+  if (!Array.isArray(raw) || !raw.length) return [emptyScene(1, characters, sets)]
+  return raw.map((scene, index) => normalizeScene(scene, index, characters, sets))
 }

 export function listPromptSequences(owner: string) {
@@ -81,13 +92,15 @@ export function getPromptSequence(owner: string, id: string) {
 export async function savePromptSequence(owner: string, input: {
  name: string
  characters?: unknown
+  sets?: unknown
  scenes?: unknown
  overwrite?: boolean
 }) {
  const name = normalizePromptSequenceName(input.name)
  if (!name) throw createError({ statusCode: 400, statusMessage: 'A sequence name is required' })
  const characters = normalizeCharactersInput(input.characters)
-  const scenes = normalizeScenesInput(input.scenes, characters)
+  const sets = normalizeSetsInput(input.sets)
+  const scenes = normalizeScenesInput(input.scenes, characters, sets)
  const now = Date.now()
  return mutate(owner, (sequences) => {
    const existing = sequences.find(item => item.name.toLowerCase() === name.toLowerCase())
@@ -96,6 +109,7 @@ export async function savePromptSequence(owner: string, input: {
    }
    if (existing) {
      existing.characters = characters
+      existing.sets = sets
      existing.scenes = scenes
      existing.updatedAt = now
      return existing
@@ -104,6 +118,7 @@ export async function savePromptSequence(owner: string, input: {
      id: crypto.randomUUID(),
      name,
      characters,
+      sets,
      scenes,
      createdAt: now,
      updatedAt: now
@@ -116,6 +131,7 @@ export async function savePromptSequence(owner: string, input: {
 export async function updatePromptSequence(owner: string, id: string, input: {
  name?: string
  characters?: unknown
+  sets?: unknown
  scenes?: unknown
 }) {
  const wanted = String(id || '').trim()
@@ -130,14 +146,18 @@ export async function updatePromptSequence(owner: string, id: string, input: {
      if (clash) throw createError({ statusCode: 409, statusMessage: `A sequence named “${clash.name}” already exists` })
      existing.name = name
    }
-    if (input.characters !== undefined || input.scenes !== undefined) {
+    if (input.characters !== undefined || input.sets !== undefined || input.scenes !== undefined) {
      const characters = input.characters !== undefined
        ? normalizeCharactersInput(input.characters)
        : existing.characters
+      const sets = input.sets !== undefined
+        ? normalizeSetsInput(input.sets)
+        : (existing.sets || [])
      const scenes = input.scenes !== undefined
-        ? normalizeScenesInput(input.scenes, characters)
-        : existing.scenes.map((scene, index) => normalizeScene(scene, index, characters))
+        ? normalizeScenesInput(input.scenes, characters, sets)
+        : existing.scenes.map((scene, index) => normalizeScene(scene, index, characters, sets))
      existing.characters = characters
+      existing.sets = sets
      existing.scenes = scenes
    }
    existing.updatedAt = Date.now()
@@ -22,88 +22,104 @@ const {
  emptyScene,
  emptyCharacter,
  emptyOutfit,
+  emptySet,
+  emptyBeat,
  cloneSceneForNext,
  normalizePromptSequence,
-  ensureSceneStatesForCharacters
+  ensureSceneStatesForCharacters,
+  beatMatchesShotSize
 } = await import(pathToFileURL(tmp).href)
 unlinkSync(tmp)

 test('formatCharacterLine covers name/description and outfit', () => {
  assert.equal(formatCharacterLine({ name: 'Ada', description: 'tall' }), 'Ada: tall')
-  assert.equal(formatCharacterLine({ name: 'Ada', description: '' }), 'Ada')
-  assert.equal(formatCharacterLine({ name: '', description: 'tall' }), 'tall')
-  assert.equal(formatCharacterLine({ name: '', description: '' }), '')
  assert.equal(
    formatCharacterLine({ name: 'Ada', description: 'tall' }, { name: 'Work', description: 'blue jacket' }),
    'Ada: tall. Outfit: blue jacket'
  )
 })

-test('assembleSceneText joins non-empty boxes with a single blank line', () => {
-  const text = assembleSceneText({
-    style: 'oil paint',
-    settings: 'night',
-    characters: [
-      { name: 'Ada', description: 'tall' },
-      { name: '', description: '' },
-      { name: 'Bo', description: 'hat' }
-    ],
-    prompt: 'walks'
-  })
-  assert.equal(text, 'oil paint\n\nnight\n\nAda: tall\nBo: hat\n\nwalks')
+test('shot size filters beats; untagged always included; tags never copied', () => {
+  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'] }
+    ]
+  }
+  const sceneMedium = {
+    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 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 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)
 })

-test('off characters and active outfits affect assembly', () => {
-  const ada = { ...emptyCharacter(), id: 'c1', name: 'Ada', description: 'tall', outfits: [
-    { ...emptyOutfit(), id: 'o1', name: 'Day', description: 'red dress' },
-    { ...emptyOutfit(), id: 'o2', name: 'Night', description: 'black coat' }
-  ] }
-  const bo = { ...emptyCharacter(), id: 'c2', name: 'Bo', description: 'hat', outfits: [] }
+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: [] }]
+  }
  const scene1 = {
-    style: 's1',
+    style: 'a',
    settings: '',
-    prompt: 'p1',
-    characterStates: [
-      { characterId: 'c1', on: true, outfitId: 'o1' },
-      { characterId: 'c2', on: true, outfitId: null }
-    ]
+    shotSize: '',
+    setStates: [{ setId: 's1', on: true }],
+    characterStates: [],
+    prompt: 'p1'
  }
  const scene2 = {
-    style: 's2',
+    style: 'b',
    settings: '',
-    prompt: 'p2',
-    characterStates: [
-      { characterId: 'c1', on: false, outfitId: 'o1' },
-      { characterId: 'c2', on: true, outfitId: null }
-    ]
+    shotSize: '',
+    setStates: [{ setId: 's1', on: false }],
+    characterStates: [],
+    prompt: 'p2'
  }
-  assert.equal(
-    assembleSceneText(scene1, [ada, bo]),
-    's1\n\nAda: tall. Outfit: red dress\nBo: hat\n\np1'
-  )
-  assert.equal(
-    assembleSceneText(scene2, [ada, bo]),
-    's2\n\nBo: hat\n\np2'
-  )
-  const full = assembleSequenceText({ characters: [ada, bo], scenes: [scene1, scene2] })
-  assert.equal(full, 's1\n\nAda: tall. Outfit: red dress\nBo: hat\n\np1\n\n\ns2\n\nBo: hat\n\np2')
-  assert.ok(!full.includes('not present'))
+  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')
 })

-test('assembleSequenceText uses double blank line between scenes and skips empties', () => {
-  const text = assembleSequenceText({
-    name: 'ignored',
-    scenes: [
-      { style: 's1', settings: '', characters: [], prompt: 'p1' },
-      { style: '', settings: '', characters: [{ name: '', description: '' }], prompt: '' },
-      { style: 's2', settings: 'set2', characters: [{ name: 'C', description: 'd' }], prompt: 'p2' }
-    ]
-  })
-  assert.equal(text, 's1\n\np1\n\n\ns2\n\nset2\n\nC: d\n\np2')
-  assert.ok(!text.includes('ignored'))
-})
-
-test('legacy sequences migrate to sequence characters all on with no outfits', () => {
+test('legacy sequence without sets still assembles', () => {
  const legacy = normalizePromptSequence({
    id: 'seq1',
    name: 'Old',
@@ -111,51 +127,56 @@ test('legacy sequences migrate to sequence characters all on with no outfits', (
      {
        id: 'sc1',
        title: 'Scene 1',
-        style: 'a',
+        style: 'oil',
        settings: '',
-        prompt: 'p',
-        characters: [{ id: 'x', name: 'Ada', description: 'tall' }]
-      },
-      {
-        id: 'sc2',
-        title: 'Scene 2',
-        style: 'b',
-        settings: '',
-        prompt: 'q',
+        prompt: 'walk',
        characters: [{ id: 'x', name: 'Ada', description: 'tall' }]
      }
    ],
    createdAt: 1,
    updatedAt: 1
  })
-  assert.equal(legacy.characters.length, 1)
-  assert.equal(legacy.characters[0].name, 'Ada')
-  assert.deepEqual(legacy.characters[0].outfits, [])
-  assert.equal(legacy.scenes[0].characterStates[0].on, true)
-  assert.equal(legacy.scenes[0].characterStates[0].outfitId, null)
-  assert.equal(legacy.scenes[1].characterStates[0].on, true)
+  assert.deepEqual(legacy.sets, [])
+  assert.equal(legacy.scenes[0].shotSize, '')
+  const text = assembleSequenceText(legacy)
+  assert.equal(text, 'oil\n\nAda: tall\n\nwalk')
 })

-test('cloneSceneForNext copies toggles and outfit choices', () => {
-  const chars = [emptyCharacter()]
-  const first = emptyScene(1, chars)
-  first.style = 'a'
-  first.characterStates[0].on = false
-  first.characterStates[0].outfitId = 'o9'
+test('cloneSceneForNext copies shotSize and setStates', () => {
+  const sets = [emptySet()]
+  const first = emptyScene(1, [], sets)
+  first.shotSize = 'close-up'
+  first.setStates[0].on = false
  const next = cloneSceneForNext(first, 2)
-  assert.equal(next.title, 'Scene 2')
-  assert.equal(next.style, 'a')
-  assert.equal(next.characterStates[0].on, false)
-  assert.equal(next.characterStates[0].outfitId, 'o9')
-  assert.notEqual(next.id, first.id)
+  assert.equal(next.shotSize, 'close-up')
+  assert.equal(next.setStates[0].on, false)
+  assert.equal(next.setStates[0].setId, sets[0].id)
+})
+
+test('character outfit and off still work with sets', () => {
+  const ada = {
+    ...emptyCharacter(),
+    id: 'c1',
+    name: 'Ada',
+    description: 'tall',
+    outfits: [{ ...emptyOutfit(), id: 'o1', description: 'red dress' }]
+  }
+  const text = assembleSceneText({
+    style: '',
+    settings: '',
+    shotSize: '',
+    setStates: [],
+    characterStates: [{ characterId: 'c1', on: true, outfitId: 'o1' }],
+    prompt: 'hi'
+  }, [ada], [])
+  assert.equal(text, 'Ada: tall. Outfit: red dress\n\nhi')
 })

 test('ensureSceneStatesForCharacters turns new character on only for current scene', () => {
  const a = emptyCharacter()
  const scenes = [emptyScene(1, [a]), emptyScene(2, [a])]
  const b = emptyCharacter()
-  const list = [a, b]
-  ensureSceneStatesForCharacters(scenes, list, { newCharacterId: b.id, turnOnSceneIndex: 1 })
+  ensureSceneStatesForCharacters(scenes, [a, b], { newCharacterId: b.id, turnOnSceneIndex: 1 })
  assert.equal(scenes[0].characterStates.find(s => s.characterId === b.id).on, false)
  assert.equal(scenes[1].characterStates.find(s => s.characterId === b.id).on, true)
 })
@@ -18,11 +18,37 @@ export type PromptSequenceCharacterState = {
  outfitId: string | null
 }

+export type PromptSequenceShotSize = '' | 'wide' | 'medium' | 'close-up' | 'detail'
+
+export const PROMPT_SEQUENCE_SHOT_SIZES = ['wide', 'medium', 'close-up', 'detail'] as const
+
+export type PromptSequenceBeat = {
+  id: string
+  name: 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[]
+}
+
+export type PromptSequenceSetState = {
+  setId: string
+  on: boolean
+}
+
 export type PromptSequenceScene = {
  id: string
  title: string
  style: string
  settings: string
+  shotSize: PromptSequenceShotSize
+  setStates: PromptSequenceSetState[]
  characterStates: PromptSequenceCharacterState[]
  prompt: string
 }
@@ -31,6 +57,7 @@ export type PromptSequence = {
  id: string
  name: string
  characters: PromptSequenceCharacter[]
+  sets: PromptSequenceSet[]
  scenes: PromptSequenceScene[]
  createdAt: number
  updatedAt: number
@@ -55,16 +82,34 @@ export function emptyCharacter(): PromptSequenceCharacter {
  return { id: newId(), name: '', description: '', outfits: [] }
 }

+export function emptyBeat(): PromptSequenceBeat {
+  return { id: newId(), name: '', text: '', framings: [] }
+}
+
+export function emptySet(): PromptSequenceSet {
+  return { id: newId(), name: '', description: '', beats: [emptyBeat()] }
+}
+
 export function defaultCharacterState(characterId: string, on = true): PromptSequenceCharacterState {
  return { characterId, on, outfitId: null }
 }

-export function emptyScene(index = 1, characters: PromptSequenceCharacter[] = []): PromptSequenceScene {
+export function defaultSetState(setId: string, on = true): PromptSequenceSetState {
+  return { setId, on }
+}
+
+export function emptyScene(
+  index = 1,
+  characters: PromptSequenceCharacter[] = [],
+  sets: PromptSequenceSet[] = []
+): PromptSequenceScene {
  return {
    id: newId(),
    title: `Scene ${Math.max(1, index)}`,
    style: '',
    settings: '',
+    shotSize: '',
+    setStates: sets.map(set => defaultSetState(set.id, true)),
    characterStates: characters.map(character => defaultCharacterState(character.id, true)),
    prompt: ''
  }
@@ -76,6 +121,11 @@ 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
+    })),
    characterStates: (previous.characterStates || []).map(state => ({
      characterId: state.characterId,
      on: !!state.on,
@@ -110,6 +160,38 @@ 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. */
+export function assembleSetBlock(
+  scene: { shotSize?: string; setStates?: PromptSequenceSetState[] },
+  sets: PromptSequenceSet[] = []
+) {
+  const states = scene.setStates || []
+  const stateById = new Map(states.map(state => [state.setId, state]))
+  const chunks: string[] = []
+  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'))
+  }
+  return chunks.join('\n')
+}
+
 export function resolveSceneCharacterLines(
  scene: { characterStates?: PromptSequenceCharacterState[] },
  characters: PromptSequenceCharacter[] = []
@@ -119,7 +201,6 @@ export function resolveSceneCharacterLines(
  return characters
    .map((character) => {
      const state = stateById.get(character.id)
-      // Missing state (legacy) => on
      if (state && !state.on) return ''
      const outfitId = state?.outfitId || null
      const outfit = outfitId
@@ -135,12 +216,18 @@ export function assembleSceneText(
    style?: string
    settings?: string
    prompt?: string
+    shotSize?: string
+    setStates?: PromptSequenceSetState[]
    characterStates?: PromptSequenceCharacterState[]
    /** Legacy per-scene characters (migration / old tests). */
    characters?: Array<{ name?: string; description?: string }>
  },
-  sequenceCharacters?: PromptSequenceCharacter[]
+  sequenceCharacters?: PromptSequenceCharacter[],
+  sequenceSets?: PromptSequenceSet[]
 ) {
+  const setBlock = sequenceSets?.length
+    ? assembleSetBlock(scene, sequenceSets)
+    : ''
  const characterBlock = sequenceCharacters?.length
    ? resolveSceneCharacterLines(scene, sequenceCharacters).join('\n')
    : (scene.characters || [])
@@ -150,6 +237,7 @@ export function assembleSceneText(
  const parts = [
    String(scene.style || '').trim(),
    String(scene.settings || '').trim(),
+    setBlock,
    characterBlock,
    String(scene.prompt || '').trim()
  ].filter(Boolean)
@@ -163,17 +251,25 @@ export function assembleSceneText(
 */
 export function assembleSequenceText(sequence: {
  characters?: PromptSequenceCharacter[]
+  sets?: PromptSequenceSet[]
  scenes?: Array<{
    style?: string
    settings?: string
    prompt?: string
+    shotSize?: string
+    setStates?: PromptSequenceSetState[]
    characterStates?: PromptSequenceCharacterState[]
    characters?: Array<{ name?: string; description?: string }>
  }>
 }) {
  const characters = sequence.characters || []
+  const sets = sequence.sets || []
  return (sequence.scenes || [])
-    .map(scene => assembleSceneText(scene, characters.length ? characters : undefined))
+    .map(scene => assembleSceneText(
+      scene,
+      characters.length ? characters : undefined,
+      sets.length ? sets : undefined
+    ))
    .filter(Boolean)
    .join('\n\n\n')
 }
@@ -191,6 +287,12 @@ 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 {
@@ -211,6 +313,32 @@ export function normalizeCharacter(raw: unknown): PromptSequenceCharacter {
  }
 }

+export function normalizeBeat(raw: unknown): PromptSequenceBeat {
+  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
+  }
+}
+
+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) : []
+  return {
+    id: String(rec.id || '').trim() || newId(),
+    name: String(rec.name || '').trim().slice(0, 120),
+    description: normalizePromptSequenceField(rec.description),
+    beats: beats.length ? beats : [emptyBeat()]
+  }
+}
+
 export function normalizeCharacterState(raw: unknown, fallbackCharacterId = ''): PromptSequenceCharacterState {
  const rec = (raw && typeof raw === 'object' ? raw : {}) as Record<string, unknown>
  const characterId = String(rec.characterId || fallbackCharacterId || '').trim()
@@ -223,6 +351,14 @@ export function normalizeCharacterState(raw: unknown, fallbackCharacterId = ''):
  }
 }

+export function normalizeSetState(raw: unknown, fallbackSetId = ''): PromptSequenceSetState {
+  const rec = (raw && typeof raw === 'object' ? raw : {}) as Record<string, unknown>
+  return {
+    setId: String(rec.setId || fallbackSetId || '').trim(),
+    on: rec.on === undefined ? true : !!rec.on
+  }
+}
+
 function liftLegacyCharacters(scenesRaw: unknown[]): PromptSequenceCharacter[] {
  const byId = new Map<string, PromptSequenceCharacter>()
  for (const scene of scenesRaw) {
@@ -261,10 +397,27 @@ function syncCharacterStates(
  })
 }

+function syncSetStates(
+  statesRaw: unknown,
+  sets: PromptSequenceSet[],
+  defaultOn = true
+): PromptSequenceSetState[] {
+  const incoming = Array.isArray(statesRaw)
+    ? statesRaw.map(state => normalizeSetState(state)).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)
+  })
+}
+
 export function normalizeScene(
  raw: unknown,
  index: number,
-  characters: PromptSequenceCharacter[] = []
+  characters: PromptSequenceCharacter[] = [],
+  sets: PromptSequenceSet[] = []
 ): PromptSequenceScene {
  const rec = (raw && typeof raw === 'object' ? raw : {}) as Record<string, unknown>
  return {
@@ -272,6 +425,8 @@ export function normalizeScene(
    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),
    characterStates: syncCharacterStates(rec.characterStates, characters, true),
    prompt: normalizePromptSequenceField(rec.prompt)
  }
@@ -287,14 +442,16 @@ export function normalizePromptSequence(raw: unknown): PromptSequence | null {
    ? rec.characters.map(normalizeCharacter)
    : liftLegacyCharacters(scenesRaw)
  if (!characters.length) characters = [emptyCharacter()]
+  const sets = Array.isArray(rec.sets) ? rec.sets.map(normalizeSet) : []
  const scenes = scenesRaw.length
-    ? scenesRaw.map((scene, index) => normalizeScene(scene, index, characters))
-    : [emptyScene(1, characters)]
+    ? scenesRaw.map((scene, index) => normalizeScene(scene, index, characters, sets))
+    : [emptyScene(1, characters, sets)]
  const createdAt = Number(rec.createdAt) || Date.now()
  return {
    id: String(rec.id || '').trim() || newId(),
    name,
    characters,
+    sets,
    scenes,
    createdAt,
    updatedAt: Number(rec.updatedAt) || createdAt
@@ -307,7 +464,7 @@ export function ensureSceneStatesForCharacters(
  characters: PromptSequenceCharacter[],
  opts?: { newCharacterId?: string; turnOnSceneIndex?: number }
 ) {
-  const newId = opts?.newCharacterId
+  const newCharacterId = opts?.newCharacterId
  const turnOnIndex = opts?.turnOnSceneIndex
  for (let i = 0; i < scenes.length; i++) {
    const scene = scenes[i]
@@ -315,10 +472,32 @@ export function ensureSceneStatesForCharacters(
    scene.characterStates = characters.map((character) => {
      const existing = byId.get(character.id)
      if (existing) return existing
-      const on = newId && character.id === newId
+      const on = newCharacterId && character.id === newCharacterId
        ? i === turnOnIndex
        : true
      return defaultCharacterState(character.id, on)
    })
  }
 }
+
+/** Ensure every scene has a state row for every sequence set. */
+export function ensureSceneStatesForSets(
+  scenes: PromptSequenceScene[],
+  sets: PromptSequenceSet[],
+  opts?: { newSetId?: string; turnOnSceneIndex?: number }
+) {
+  const newSetId = opts?.newSetId
+  const turnOnIndex = opts?.turnOnSceneIndex
+  for (let i = 0; i < scenes.length; i++) {
+    const scene = scenes[i]
+    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
+      const on = newSetId && set.id === newSetId
+        ? i === turnOnIndex
+        : true
+      return defaultSetState(set.id, on)
+    })
+  }
+}