Square Library modal thumbs and add stage previous/next.

assets/css/display.css

@@ -413,6 +413,37 @@
   border-color: var(--amber);
 }
 
+.stage-nav {
+  position: absolute;
+  top: 50%;
+  z-index: 4;
+  display: grid;
+  width: 44px;
+  height: 44px;
+  place-items: center;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: #000a;
+  color: var(--text);
+  font-size: 28px;
+  line-height: 1;
+  cursor: pointer;
+  transform: translateY(-50%);
+}
+
+.stage-nav:hover {
+  border-color: var(--amber);
+  color: var(--amber);
+}
+
+.stage-nav-prev {
+  left: 10px;
+}
+
+.stage-nav-next {
+  right: 10px;
+}
+
 .filmstrip {
   display: none;
 }

components/studio2/Bench.vue

@@ -218,6 +218,21 @@
        </button>
       </div>
 
+      <button
+       v-if="family.length > 1"
+       type="button"
+       class="stage-nav stage-nav-prev"
+       aria-label="Previous"
+       @click.stop="stepFamily(-1)"
+      >‹</button>
+      <button
+       v-if="family.length > 1"
+       type="button"
+       class="stage-nav stage-nav-next"
+       aria-label="Next"
+       @click.stop="stepFamily(1)"
+      >›</button>
+
       <template v-if="selected && isHidden(selected)">
        <p class="placeholder-still">{{ selected.kind==='track' ? 'Track loaded · preview hidden' : selected.role==='input' ? 'Still loaded · preview hidden' : 'Output hidden' }}</p>
       </template>
@@ -440,7 +455,7 @@ const studioQueue=ref<any[]>([])
 const liveMusic=ref<Record<string,any>>({})
 const negativeDraft=ref('')
 const libraryOpen=ref(false)
-const previewForcedHidden=ref<Set<string>>(new Set())
+const eyeOpen=ref(!xaigen)
 const form=reactive<any>({mode:'generate',engine:'flux',enhancePrompt:readStoredEnhancePrompt(),turbo:readStoredTurbo(),imageStyles:{positive:[],negative:readStoredNegatives()},lockFace:true,lockOutfit:true,hideInput:xaigen,folderId:'',identityStillId:'',imageAId:'',imageBId:'',maskId:'',startClipId:'',endStillId:'',guides:[],photos:[],promptSections:sectionsFrom({}),settings:{aspect:'auto',fps:24,steps:24,cfg:4,seed:null,seedMode:'random',duration:5,turbo:true,loraStack:[]}})
 const promptArea=ref<HTMLTextAreaElement|null>(null)
 const promptCaret=ref({start:0,end:0})
@@ -798,30 +813,31 @@ function isHidden(asset:any){
   const input=asset.role==='input'
   return input?classicHideInput.value:classicHideOutput.value
  }
- if(xaigen) return previewHidden(asset,revealed.value,xaigen)
- return previewForcedHidden.value.has(asset.id)
+ // Session chrome: eye gates the stage preview across neighbors.
+ return !eyeOpen.value
 }
 function pickerThumbHidden(asset:any){
  if(pickerRevealAll.value)return false
- return isHidden(asset)
+ if(!asset?.id)return false
+ if(isClassic.value)return classicHideInput.value
+ if(xaigen) return previewHidden(asset,revealed.value,xaigen)
+ return false
 }
 function slotHidden(id:string){
  if(!xaigen || !id)return false
  if(isClassic.value)return classicHideInput.value
  return !revealed.value.has(id)
 }
-function toggleReveal(id:string){
- if(!id)return
- if(xaigen){
-  const next=new Set(revealed.value)
-  if(next.has(id))next.delete(id);else next.add(id)
-  revealed.value=next
-  if(import.meta.client)localStorage.setItem(`studio2-revealed:${form.folderId}`,JSON.stringify([...next]))
-  return
- }
- const next=new Set(previewForcedHidden.value)
- if(next.has(id))next.delete(id);else next.add(id)
- previewForcedHidden.value=next
+function toggleReveal(_id?:string){
+ eyeOpen.value=!eyeOpen.value
+}
+function stepFamily(delta:number){
+ const list=family.value
+ if(list.length < 2)return
+ const i=list.findIndex((a:any)=>a.id===selected.value?.id)
+ const from=i < 0 ? 0 : i
+ const next=list[(from + delta + list.length) % list.length]
+ if(next) selectOutput(next)
 }
 function onLibraryUseAsPhoto(item:any){
  if(item)selectOutput(item)
@@ -839,14 +855,25 @@ function onLibraryDelete(item:any){
  if(item)selectOutput(item)
  void deleteOutput()
 }
-function onLibraryHotkey(e:KeyboardEvent){
- if(e.key!=='l' && e.key!=='L')return
+function onStageHotkey(e:KeyboardEvent){
  if(e.metaKey||e.ctrlKey||e.altKey)return
  const t=e.target as HTMLElement|null
  if(t && (t.tagName==='INPUT'||t.tagName==='TEXTAREA'||t.isContentEditable))return
  if(libraryOpen.value||picker.value)return
- e.preventDefault()
- libraryOpen.value=true
+ if(e.key==='l' || e.key==='L'){
+  e.preventDefault()
+  libraryOpen.value=true
+  return
+ }
+ if(e.key==='ArrowLeft'){
+  e.preventDefault()
+  stepFamily(-1)
+  return
+ }
+ if(e.key==='ArrowRight'){
+  e.preventDefault()
+  stepFamily(1)
+ }
 }
 function closePicker(){
  const key=picker.value
@@ -1022,11 +1049,11 @@ onMounted(async()=>{
  if(asset){selected.value={...asset,kind:route.query.clip?'clip':route.query.track?'track':'still'};if(route.query.use==='1'&&selected.value.kind!=='track')restore(selected.value);if(xaigen)toggleReveal(asset.id)}
  if(route.query.task==='music')form.mode='music'
  const poll=async()=>{try{await refresh();const health=await $fetch<any>('/api/health');healthState.value=health}catch(e:any){healthState.value=null;error.value=e.data?.statusMessage||e.message}if(!disposed)timer=setTimeout(poll,3000)};void poll()
- if(import.meta.client)window.addEventListener('keydown',onLibraryHotkey)
+ if(import.meta.client)window.addEventListener('keydown',onStageHotkey)
 })
 onBeforeUnmount(()=>{
  disposed=true;clearTimeout(timer);clearInterval(clock)
- if(import.meta.client)window.removeEventListener('keydown',onLibraryHotkey)
+ if(import.meta.client)window.removeEventListener('keydown',onStageHotkey)
 })
 
 function randomizeSeed(){form.settings.seedMode='random';form.settings.seed=randomSeed()}
@@ -1078,6 +1105,7 @@ const mobileCtx=computed(()=>({
  toggleReveal,
  chooseTask,
  selectOutput,
+ stepFamily,
  deleteOutput,
  queue,
  upload,

components/studio2/LibraryModal.vue

@@ -54,20 +54,20 @@
             <article
               v-for="entry in entries"
               :key="entry.key"
-              class="library-thumb group relative cursor-pointer overflow-hidden rounded-2xl border bg-zinc-950"
-              :class="entry.key === focusedKey ? 'border-amber-300 ring-2 ring-amber-300/70' : 'border-white/10'"
+              class="lib-modal-tile"
+              :data-active="entry.key === focusedKey ? 'true' : undefined"
               @click="pickEntry(entry)"
             >
-              <div class="relative aspect-[4/5] bg-zinc-900">
+              <div class="lib-modal-media">
                 <div
                   v-if="entry.kind === 'track'"
-                  class="flex h-full w-full items-end gap-0.5 bg-zinc-900 px-4 py-8"
+                  class="lib-modal-track"
                   aria-hidden="true"
                 >
                   <span
                     v-for="n in 16"
                     :key="n"
-                    class="flex-1 rounded-full bg-amber-400/70"
+                    class="lib-modal-bar"
                     :style="{ height: `${20 + ((n * 17) % 60)}%` }"
                   />
                 </div>
@@ -77,16 +77,15 @@
                   alt=""
                   decoding="async"
                   draggable="false"
-                  class="h-full w-full object-cover"
                 >
-                <span v-else class="block h-full w-full bg-zinc-800" />
-                <span class="absolute left-2 top-2 rounded-md bg-black/60 px-1.5 py-0.5 text-[10px] uppercase tracking-wide text-zinc-200">
+                <span v-else class="lib-modal-fallback" />
+                <span class="lib-modal-kind">
                   {{ entry.kind === 'clip' ? 'Video' : entry.kind === 'track' ? 'Music' : 'Image' }}
                 </span>
               </div>
-              <div class="px-2.5 py-2">
-                <p class="truncate text-xs font-medium text-zinc-100">{{ entry.name }}</p>
-                <p class="truncate text-[11px] text-zinc-500">{{ cardMeta(entry) }}</p>
+              <div class="lib-modal-caption">
+                <p class="lib-modal-name">{{ entry.name }}</p>
+                <p class="lib-modal-meta">{{ cardMeta(entry) }}</p>
               </div>
             </article>
           </div>
@@ -435,11 +434,90 @@ onBeforeUnmount(() => {
   min-height: 0;
   height: 100%;
   grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
-  gap: 10px;
+  gap: 8px;
   align-content: start;
   overflow: auto;
   padding: 14px 16px;
 }
+.lib-modal-tile {
+  display: flex;
+  min-height: 120px;
+  flex-direction: column;
+  overflow: hidden;
+  border: 2px solid #2a2a2e;
+  border-radius: 8px;
+  background: #0b0b0d;
+  cursor: pointer;
+}
+.lib-modal-tile[data-active='true'] {
+  border-color: #f5a524;
+  box-shadow: 0 0 0 2px #f5a524;
+}
+.lib-modal-media {
+  position: relative;
+  aspect-ratio: 1 / 1;
+  min-height: 120px;
+  width: 100%;
+  overflow: hidden;
+  background: #18181b;
+}
+.lib-modal-media > img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.lib-modal-fallback {
+  display: block;
+  width: 100%;
+  height: 100%;
+  background: #27272a;
+}
+.lib-modal-track {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  align-items: flex-end;
+  gap: 2px;
+  padding: 16px;
+}
+.lib-modal-bar {
+  flex: 1;
+  border-radius: 999px;
+  background: rgba(245, 165, 36, 0.7);
+}
+.lib-modal-kind {
+  position: absolute;
+  top: 8px;
+  left: 8px;
+  border-radius: 4px;
+  background: #000a;
+  padding: 2px 6px;
+  color: #e4e4e7;
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+.lib-modal-caption {
+  padding: 6px 8px 8px;
+}
+.lib-modal-name {
+  margin: 0;
+  overflow: hidden;
+  color: #f4f4f5;
+  font-size: 12px;
+  font-weight: 600;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.lib-modal-meta {
+  margin: 2px 0 0;
+  overflow: hidden;
+  color: #71717a;
+  font-size: 11px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 .lib-modal-empty {
   grid-column: 1 / -1;
   color: #9a9588;

components/studio2/Mobile.vue

@@ -65,6 +65,20 @@
      <img :src="ctx.isHidden(ctx.selected) ? '/icons/display/eye-off.svg' : '/icons/display/eye.svg'" alt="" width="20" height="20">
     </button>
    </div>
+   <button
+    v-if="(ctx.family || []).length > 1"
+    type="button"
+    class="m-nav m-nav-prev"
+    aria-label="Previous"
+    @click.stop="ctx.stepFamily(-1)"
+   >‹</button>
+   <button
+    v-if="(ctx.family || []).length > 1"
+    type="button"
+    class="m-nav m-nav-next"
+    aria-label="Next"
+    @click.stop="ctx.stepFamily(1)"
+   >›</button>
    <template v-if="ctx.selected && ctx.isHidden(ctx.selected)">
     <p class="m-muted">{{ ctx.selected.kind==='track' ? 'Track loaded · preview hidden' : 'Preview hidden' }}</p>
    </template>
@@ -440,6 +454,24 @@ watch(() => props.ctx.form.mode, () => { sheet.value = '' })
   border-radius: 8px;
   background: #000a;
 }
+.m-nav {
+  position: absolute;
+  top: 50%;
+  z-index: 4;
+  display: grid;
+  width: 48px;
+  height: 48px;
+  place-items: center;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: #000a;
+  color: var(--text);
+  font-size: 28px;
+  line-height: 1;
+  transform: translateY(-50%);
+}
+.m-nav-prev { left: 8px; }
+.m-nav-next { right: 8px; }
 .m-dock {
   display: grid;
   grid-template-columns: repeat(4, 1fr) 120px;