Square Library modal thumbs and add stage previous/next.

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;